:root {
    --bg: #f4efe6;
    --surface: rgba(255, 255, 255, 0.74);
    --surface-strong: rgba(255, 255, 255, 0.92);
    --text: #192030;
    --muted: #5f6676;
    --primary: #36238f;
    --primary-2: #5130c8;
    --primary-deep: #201452;
    --accent: #f4b63f;
    --accent-soft: #ffe4a8;
    --success: #1ca451;
    --line: rgba(25, 32, 48, 0.1);
    --shadow: 0 30px 80px rgba(32, 20, 82, 0.14);
    --shadow-soft: 0 16px 36px rgba(32, 20, 82, 0.08);
    --radius: 30px;
    --container: min(1160px, calc(100% - 2rem));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 10% 10%, rgba(81, 48, 200, 0.14), transparent 26%),
        radial-gradient(circle at 92% 12%, rgba(244, 182, 63, 0.16), transparent 18%),
        radial-gradient(circle at 80% 72%, rgba(54, 35, 143, 0.12), transparent 20%),
        linear-gradient(180deg, #fcfaf5 0%, #f4f0ff 48%, #f7f2e7 100%);
    line-height: 1.65;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, transparent 34%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.22), transparent 55%);
    pointer-events: none;
    z-index: -1;
}

.soundscape {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    opacity: 0.6;
}

.soundscape-grid,
.soundscape-aura,
.sound-axis,
.sound-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.soundscape-grid {
    width: min(1600px, calc(100% - 1rem));
    height: 360px;
    background-image: radial-gradient(circle, rgba(18, 26, 40, 0.18) 1px, transparent 1.65px);
    background-size: 16px 16px;
    opacity: 0.34;
}

.soundscape-aura {
    width: 48vw;
    max-width: 760px;
    height: 420px;
    filter: blur(42px);
    opacity: 0.34;
}

.soundscape-aura-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 28% 50%, rgba(50, 112, 255, 0.3), transparent 68%);
}

.soundscape-aura-right {
    right: 0;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 72% 50%, rgba(88, 238, 255, 0.28), transparent 68%);
}

.sound-axis {
    width: min(1700px, calc(100% - 0.5rem));
    height: 3px;
    background: linear-gradient(90deg, rgba(72, 120, 255, 0.64), rgba(104, 233, 255, 0.9), rgba(82, 149, 255, 0.7));
    box-shadow:
        0 0 18px rgba(104, 233, 255, 0.72),
        0 0 44px rgba(82, 149, 255, 0.2);
}

.sound-wave {
    width: min(1900px, 180%);
    height: 300px;
    background-repeat: repeat-x;
    background-position: center;
    background-size: 820px 300px;
}

.sound-wave-glow {
    opacity: 0.42;
    filter: blur(16px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 300'%3E%3Cpath d='M0 150 C8 150 12 98 20 98 28 98 32 204 40 204 48 204 52 70 60 70 68 70 72 218 80 218 88 218 92 38 100 38 108 38 112 242 120 242 128 242 132 54 140 54 148 54 152 198 160 198 168 198 172 94 180 94 188 94 192 142 200 142 208 142 212 150 220 150 228 150 232 84 240 84 248 84 252 22 260 22 268 22 272 256 280 256 288 256 292 42 300 42 308 42 312 222 320 222 328 222 332 66 340 66 348 66 352 188 360 188 368 188 372 108 380 108 388 108 392 156 400 156 408 156 412 140 420 140 428 140 432 58 440 58 448 58 452 18 460 18 468 18 472 266 480 266 488 266 492 46 500 46 508 46 512 210 520 210 528 210 532 74 540 74 548 74 552 194 560 194 568 194 572 30 580 30 588 30 592 236 600 236 608 236 612 60 620 60 628 60 632 206 640 206 648 206 652 82 660 82 668 82 672 168 680 168 688 168 692 118 700 118 708 118 712 150 720 150 728 150 732 98 740 98 748 98 752 40 760 40 768 40 772 220 780 220 788 220 792 104 800 104 808 104 812 138 820 138' fill='none' stroke='url(%23grad)' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0' y1='0' x2='820' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%234b73ff'/%3E%3Cstop offset='0.5' stop-color='%236ce8ff'/%3E%3Cstop offset='1' stop-color='%235898ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    animation: waveDrift 9.2s linear infinite;
}

.sound-wave-main {
    opacity: 0.88;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 300'%3E%3Cpath d='M0 150 C8 150 12 98 20 98 28 98 32 204 40 204 48 204 52 70 60 70 68 70 72 218 80 218 88 218 92 38 100 38 108 38 112 242 120 242 128 242 132 54 140 54 148 54 152 198 160 198 168 198 172 94 180 94 188 94 192 142 200 142 208 142 212 150 220 150 228 150 232 84 240 84 248 84 252 22 260 22 268 22 272 256 280 256 288 256 292 42 300 42 308 42 312 222 320 222 328 222 332 66 340 66 348 66 352 188 360 188 368 188 372 108 380 108 388 108 392 156 400 156 408 156 412 140 420 140 428 140 432 58 440 58 448 58 452 18 460 18 468 18 472 266 480 266 488 266 492 46 500 46 508 46 512 210 520 210 528 210 532 74 540 74 548 74 552 194 560 194 568 194 572 30 580 30 588 30 592 236 600 236 608 236 612 60 620 60 628 60 632 206 640 206 648 206 652 82 660 82 668 82 672 168 680 168 688 168 692 118 700 118 708 118 712 150 720 150 728 150 732 98 740 98 748 98 752 40 760 40 768 40 772 220 780 220 788 220 792 104 800 104 808 104 812 138 820 138' fill='none' stroke='url(%23grad)' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0' y1='0' x2='820' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23538aff'/%3E%3Cstop offset='0.5' stop-color='%238cf0ff'/%3E%3Cstop offset='1' stop-color='%23579dff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    animation: waveDrift 7.4s linear infinite;
}

.sound-wave-fine {
    opacity: 0.94;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 300'%3E%3Cpath d='M0 150 C8 150 12 98 20 98 28 98 32 204 40 204 48 204 52 70 60 70 68 70 72 218 80 218 88 218 92 38 100 38 108 38 112 242 120 242 128 242 132 54 140 54 148 54 152 198 160 198 168 198 172 94 180 94 188 94 192 142 200 142 208 142 212 150 220 150 228 150 232 84 240 84 248 84 252 22 260 22 268 22 272 256 280 256 288 256 292 42 300 42 308 42 312 222 320 222 328 222 332 66 340 66 348 66 352 188 360 188 368 188 372 108 380 108 388 108 392 156 400 156 408 156 412 140 420 140 428 140 432 58 440 58 448 58 452 18 460 18 468 18 472 266 480 266 488 266 492 46 500 46 508 46 512 210 520 210 528 210 532 74 540 74 548 74 552 194 560 194 568 194 572 30 580 30 588 30 592 236 600 236 608 236 612 60 620 60 628 60 632 206 640 206 648 206 652 82 660 82 668 82 672 168 680 168 688 168 692 118 700 118 708 118 712 150 720 150 728 150 732 98 740 98 748 98 752 40 760 40 768 40 772 220 780 220 788 220 792 104 800 104 808 104 812 138 820 138' fill='none' stroke='rgba(255,255,255,0.96)' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    animation: waveDriftReverse 5.85s linear infinite;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: var(--container);
    margin: 0 auto;
}

.skip-link {
    position: absolute;
    left: -999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    background: #fff;
    padding: 0.75rem 1rem;
    z-index: 100;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(20px);
    background: rgba(248, 244, 237, 0.74);
    border-bottom: 1px solid rgba(54, 35, 143, 0.08);
}

.header-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.8rem;
    align-items: center;
    min-height: 84px;
}

.brand {
    display: inline-flex;
    align-items: center;
    max-width: min(300px, 28vw);
    margin-left: -0.25rem;
}

.brand-logo {
    width: 100%;
    max-width: 268px;
    height: auto;
    aspect-ratio: 1305 / 386;
    object-fit: contain;
}

.lead,
.metric-card p,
.info-card p,
.feature-item p,
.blog-card p,
.form-note,
.article-shell p,
.article-list,
.site-footer p {
    color: var(--muted);
}

.site-nav {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    color: #34374a;
    transition: color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.site-nav a:hover {
    color: var(--primary);
    background: rgba(81, 48, 200, 0.08);
    transform: translateY(-1px);
}

.site-nav a.active,
.site-nav a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 16px 28px rgba(54, 35, 143, 0.22);
    transform: none;
}

.header-cta,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.header-cta,
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    box-shadow: 0 18px 35px rgba(54, 35, 143, 0.28);
}

.header-cta {
    min-height: 46px;
    padding: 0 1.1rem;
}

.btn {
    min-height: 52px;
    padding: 0 1.3rem;
}

.btn-secondary {
    border: 1px solid rgba(54, 35, 143, 0.12);
    background: rgba(255, 255, 255, 0.72);
    color: var(--primary-deep);
}

.btn:hover,
.header-cta:hover,
.metric-card:hover,
.info-card:hover,
.blog-card:hover,
.feature-item:hover,
.faq-item:hover,
.hero-card:hover {
    transform: translateY(-4px);
}

.btn:hover,
.header-cta:hover {
    box-shadow: 0 22px 42px rgba(54, 35, 143, 0.34);
}

.nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    padding: 0;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
    background: var(--text);
}

.hero,
.page-hero {
    padding: 5.4rem 0 3rem;
    position: relative;
}

.hero::before,
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.44), transparent 26%);
    pointer-events: none;
}

.hero-grid,
.split-layout,
.contact-grid,
.faq-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.hero-grid,
.split-layout,
.contact-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
}

.hero h1,
.page-hero h1,
.section-heading h2,
.cta-band h2,
.article-shell h1 {
    margin: 0.35rem 0 1rem;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.hero h1 {
    font-size: clamp(2.3rem, 4.3vw, 4rem);
    max-width: 14ch;
    text-wrap: balance;
    line-height: 0.98;
}

.page-hero h1,
.section-heading h2,
.cta-band h2,
.article-shell h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.eyebrow {
    display: inline-flex;
    padding: 0.48rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(54, 35, 143, 0.08);
    color: var(--primary);
}

.lead {
    max-width: 62ch;
    font-size: 1.06rem;
}

.hero-actions,
.cta-band-actions {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin: 1.6rem 0;
}

.trust-line {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.trust-line span {
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(54, 35, 143, 0.08);
    box-shadow: var(--shadow-soft);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary-deep);
}

.hero-points,
.article-list,
.footer-links {
    margin: 0;
    padding-left: 1.1rem;
}

.hero-points li {
    margin-bottom: 0.45rem;
}

.hero-visual {
    position: relative;
    padding: 0.4rem 0 2.5rem;
}

.hero-card,
.metric-card,
.info-card,
.feature-item,
.blog-card,
.contact-form,
.article-shell,
.faq-item,
.cta-band-inner {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.metric-card:hover,
.info-card:hover,
.feature-item:hover,
.blog-card:hover,
.faq-item:hover {
    border-color: rgba(81, 48, 200, 0.2);
    box-shadow: 0 34px 84px rgba(32, 20, 82, 0.16);
}

.hero-card {
    width: min(100%, 900px);
    margin-left: auto;
    padding: 0.55rem;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.86);
}

.hero-card::after {
    content: "";
    position: absolute;
    inset: -50% auto auto -20%;
    width: 48%;
    height: 210%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
    transform: rotate(18deg);
    animation: shine 8s linear infinite;
}

.hero-card img {
    border-radius: 20px;
    width: 100%;
    height: auto;
    aspect-ratio: 1305 / 386;
    object-fit: contain;
    object-position: center;
}

.hero-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: fit-content;
    margin: -1.2rem auto 0;
    padding: 0.92rem 1.12rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #ffd778);
    color: #382500;
    font-weight: 900;
    box-shadow: 0 22px 40px rgba(244, 182, 63, 0.24);
    animation: floaty 4s ease-in-out infinite;
}

.device-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.device-card {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    align-content: start;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.device-card:hover {
    transform: translateY(-4px);
    border-color: rgba(81, 48, 200, 0.2);
    box-shadow: 0 34px 84px rgba(32, 20, 82, 0.16);
}

.device-card-media {
    display: grid;
    place-items: center;
    height: 128px;
    padding: 0.35rem 0.8rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 243, 255, 0.9));
    overflow: hidden;
}

.device-card-media img {
    width: min(100%, 142px);
    max-height: 104px;
    aspect-ratio: 1;
    object-fit: contain;
}

.device-family {
    display: inline-flex;
    width: fit-content;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(81, 48, 200, 0.08);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.device-card h3,
.device-card p {
    margin: 0;
}

.device-card-copy {
    display: grid;
    gap: 0.9rem;
}

.device-tagline {
    color: var(--primary-deep);
    font-weight: 700;
}

.device-points {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
}

.section,
.metrics {
    padding: 1.5rem 0 4.8rem;
}

.alt {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(54, 35, 143, 0.03));
}

.metrics-grid,
.cards-grid,
.blog-grid,
.footer-grid {
    display: grid;
    gap: 1.2rem;
}

.metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.blog-grid,
.footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card,
.info-card,
.blog-card,
.feature-item,
.contact-form,
.article-shell {
    padding: 1.5rem;
}

.blog-card {
    overflow: hidden;
}

.blog-card-media {
    display: block;
    margin: -1.5rem -1.5rem 1rem;
}

.blog-card-media img {
    width: 100%;
    aspect-ratio: 16 / 3.2;
    object-fit: cover;
    max-height: 150px;
}

.visual-story-grid {
    display: grid;
    gap: 1.4rem;
}

.showcase-card {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 1.4rem;
    padding: 1.4rem;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.showcase-card-offset {
    grid-template-columns: 0.92fr 1.08fr;
}

.showcase-card-offset .showcase-media {
    order: 2;
}

.showcase-media img,
.image-strip-card img,
.article-figure img {
    width: 100%;
    aspect-ratio: 16 / 4.6;
    object-fit: cover;
    border-radius: 24px;
    max-height: 220px;
}

.showcase-copy,
.image-strip-copy {
    align-self: center;
}

.image-strip {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 1.6rem;
    align-items: center;
}

.image-strip-card {
    margin: 0;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.blog-card h2,
.blog-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.metric-card strong,
.info-card h3,
.feature-item strong,
.blog-card h3,
.blog-card h2 {
    color: var(--primary-deep);
}

.section-heading {
    max-width: 760px;
    margin-bottom: 2rem;
}

.feature-stack,
.faq-list {
    display: grid;
    gap: 1rem;
}

.text-link {
    font-weight: 800;
    color: var(--primary);
}

.faq-item {
    padding: 1.2rem 1.4rem;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 800;
}

.cta-band-inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cta-band-inner::before {
    content: "";
    position: absolute;
    inset: auto -10% -70% auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 182, 63, 0.22), transparent 68%);
    pointer-events: none;
}

.narrow {
    max-width: 760px;
}

.contact-form {
    display: grid;
    gap: 1rem;
}

.contact-form label {
    display: grid;
    gap: 0.45rem;
    font-weight: 700;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0.95rem 1rem;
    font: inherit;
    background: rgba(255, 255, 255, 0.92);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: rgba(81, 48, 200, 0.42);
    box-shadow: 0 0 0 4px rgba(81, 48, 200, 0.09);
    transform: translateY(-1px);
}

.form-success {
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(26, 165, 74, 0.12);
    color: #11733a;
    font-weight: 700;
}

.article-page {
    padding: 2rem 0 5rem;
}

.article-shell {
    max-width: 820px;
}

.article-shell h2 {
    margin-top: 2rem;
    color: var(--primary-deep);
}

.article-figure {
    margin: 1.2rem 0 1.6rem;
}

.article-note {
    margin-top: 1.6rem;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--accent);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.56);
}

.article-note p {
    margin: 0.35rem 0 0;
}

.site-footer {
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(54, 35, 143, 0.08);
    background: rgba(255, 255, 255, 0.24);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.footer-separator {
    margin: 0 0.45rem;
    color: rgba(25, 32, 48, 0.42);
}

.footer-credit-link {
    color: var(--primary);
    font-weight: 800;
}

.floating-whatsapp {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #1ba34d, #25d366);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 22px 44px rgba(27, 163, 77, 0.34);
    overflow: hidden;
    isolation: isolate;
}

.floating-whatsapp:hover {
    transform: translateY(-4px) scale(1.01);
}

.floating-whatsapp-rings,
.floating-whatsapp-rings::before,
.floating-whatsapp-rings::after {
    position: absolute;
    border-radius: 999px;
    inset: 0;
    content: "";
}

.floating-whatsapp-rings {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

.floating-whatsapp-rings::before,
.floating-whatsapp-rings::after {
    border: 1px solid rgba(255, 255, 255, 0.24);
    animation: pulseRing 2.8s ease-out infinite;
}

.floating-whatsapp-rings::after {
    animation-delay: 1.1s;
}

.floating-whatsapp-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 1.1rem;
}

.floating-whatsapp-copy {
    position: relative;
    z-index: 1;
    display: grid;
    line-height: 1.1;
}

.floating-whatsapp-copy small {
    opacity: 0.88;
    font-size: 0.77rem;
    font-weight: 600;
}

.reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hero .reveal:nth-child(1) {
    transition-delay: 0.08s;
}

.hero .reveal:nth-child(2) {
    transition-delay: 0.18s;
}

[data-parallax] {
    transform-style: preserve-3d;
    will-change: transform;
}

@keyframes shine {
    0% {
        transform: translateX(-180%) rotate(18deg);
    }
    100% {
        transform: translateX(320%) rotate(18deg);
    }
}

@keyframes floaty {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes waveDrift {
    0% {
        background-position: 0 center;
    }
    100% {
        background-position: -980px center;
    }
}

@keyframes waveDriftReverse {
    0% {
        background-position: -980px center;
    }
    100% {
        background-position: 0 center;
    }
}

@keyframes pulseRing {
    0% {
        transform: scale(0.92);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@media (max-width: 960px) {
    .hero-grid,
    .split-layout,
    .contact-grid,
    .metrics-grid,
    .cards-grid,
    .device-grid,
    .blog-grid,
    .footer-grid,
    .faq-grid,
    .showcase-card,
    .image-strip {
        grid-template-columns: 1fr;
    }

    .showcase-card-offset .showcase-media {
        order: initial;
    }

    .header-shell {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .nav-toggle {
        display: block;
        justify-self: end;
        margin-left: auto;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 1rem;
        right: 1rem;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: var(--shadow);
    }

    .site-nav a {
        width: 100%;
        justify-content: flex-start;
    }

    .site-nav.open {
        display: flex;
    }

    .header-cta {
        display: none;
    }

    .cta-band-inner,
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .floating-whatsapp {
        right: 0.8rem;
        bottom: 0.8rem;
    }
}

@media (max-width: 640px) {
    .hero,
    .page-hero {
        padding-top: 3.5rem;
    }

    .hero h1 {
        max-width: 100%;
    }

    .brand {
        max-width: min(280px, 68vw);
        margin-left: -0.15rem;
    }

    .floating-whatsapp-copy small {
        display: none;
    }

    .floating-whatsapp {
        padding-right: 0.85rem;
    }

    .soundscape {
        opacity: 0.26;
    }

    .soundscape-grid {
        width: calc(100% - 0.5rem);
        height: 220px;
    }

    .soundscape-aura {
        width: 62vw;
        height: 220px;
    }

    .sound-axis {
        width: calc(100% - 1rem);
    }

    .sound-wave {
        width: 220%;
        height: 220px;
        background-size: 620px 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}