@font-face {
            font-family: "Oswald";
            src: local("Oswald"),
                 url("../fonts/Oswald-VariableFont_wght.ttf") format("truetype");
            font-weight: 200 700;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "iBrand";
            src: url("../fonts/ibrand.otf") format("opentype");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Creato Display";
            src: url("../fonts/CreatoDisplay-Regular.otf") format("opentype");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Creato Display";
            src: url("../fonts/CreatoDisplay-Bold.otf") format("opentype");
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Instrument Sans";
            src: url("../fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype");
            font-weight: 400 700;
            font-style: normal;
            font-stretch: 75% 100%;
            font-display: swap;
        }

        :root {
            --obsidian: #141316;
            --carbon: #1c1c1e;
            --ice: #f7f8f9;
            --platinum: #e3e5e8;
            --lavender: #ad94f4;
            --sage: #bfd85a;
            --iris: #8f74e8;
            --ink-muted: #aba8b2;
            --ice-muted: #5e5b65;
            --line-dark: rgba(247, 248, 249, 0.11);
            --line-light: rgba(20, 19, 22, 0.13);
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
            --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
            /* ── Surface claras — tom cinza-frio registrado do bridge-section ── */
            --surface: #efeff3;
            --surface-dim: #e8e8ee;
        }

        * {
            box-sizing: border-box;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        html {
            background: var(--surface);
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            overflow-x: hidden;
            color: var(--obsidian);
            background: var(--surface);
            font-family: "Instrument Sans", sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        body::selection {
            color: var(--obsidian);
            background: var(--sage);
        }

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

        button,
        a {
            -webkit-tap-highlight-color: transparent;
        }

        a:focus-visible,
        button:focus-visible {
            outline: 2px solid var(--iris);
            outline-offset: 4px;
        }

        .site-nav {
            position: fixed;
            inset: 0 0 auto;
            z-index: 100;
            opacity: 1;
            transform: none;
            border-bottom: 1px solid rgba(20, 19, 22, 0.08);
            background: rgba(239, 239, 243, 0.76);
            backdrop-filter: blur(18px);
        }

        .nav-inner {
            width: min(calc(100% - (var(--page-gutter) * 2)), 1600px);
            height: 5rem;
            margin-inline: auto;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 2rem;
        }

        .brand {
            display: inline-flex;
            width: clamp(8.5rem, 11vw, 10.5rem);
            align-items: center;
        }

        .brand img {
            display: block;
            width: 100%;
            height: auto;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: clamp(1.25rem, 2.4vw, 2.5rem);
            color: var(--ice-muted);
            font: 700 0.67rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .nav-links a {
            position: relative;
            transition: color 300ms ease;
        }

        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 100%;
            bottom: -0.7rem;
            height: 1px;
            background: var(--iris);
            transition: right 400ms var(--ease-out);
        }

        .nav-links a:hover {
            color: var(--obsidian);
        }

        .nav-links a:hover::after {
            right: 0;
        }

        .nav-cta {
            position: relative;
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            min-height: 2.7rem;
            padding: 0.75rem 1.1rem;
            border: 1px solid var(--obsidian);
            border-radius: 999px;
            font: 700 0.65rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            transition: color 300ms ease, background 300ms ease, transform 300ms var(--ease-out);
        }

        .nav-cta::before {
            content: "";
            position: absolute;
            inset: -1px;
            padding: 1px;
            border-radius: inherit;
            background: conic-gradient(
                from var(--beam-angle),
                transparent 0deg,
                transparent 245deg,
                rgba(173, 148, 244, 0.14) 278deg,
                rgba(173, 148, 244, 0.48) 302deg,
                rgba(191, 216, 90, 0.48) 326deg,
                transparent 350deg
            );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: button-beam 6.5s linear infinite;
            pointer-events: none;
        }

        .nav-cta:hover {
            color: var(--ice);
            background: var(--obsidian);
            transform: translateY(-2px);
        }

        .nav-cta span {
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 50%;
            background: var(--sage);
            box-shadow: 0 0 0 4px rgba(191, 216, 90, 0.16);
        }

        .hero-track {
            position: relative;
            min-height: 165svh;
            overflow: clip;
            background:
                radial-gradient(circle at 76% 42%, rgba(173, 148, 244, 0.12), transparent 27rem),
                linear-gradient(135deg, #f9fafb 0%, var(--ice) 46%, #e9eaed 100%);
        }

        .hero {
            position: relative;
            min-height: 100svh;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 7.75rem var(--page-gutter) 3.5rem;
            isolation: isolate;
            background:
                radial-gradient(circle at 76% 42%, rgba(173, 148, 244, 0.12), transparent 27rem),
                linear-gradient(135deg, #f9fafb 0%, var(--ice) 46%, #e9eaed 100%);
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -4;
            opacity: 0.58;
            background-image:
                linear-gradient(rgba(20, 19, 22, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20, 19, 22, 0.06) 1px, transparent 1px);
            background-size: 4rem 4rem;
            mask-image: radial-gradient(ellipse 92% 88% at 50% 44%,
                black 20%, rgba(0,0,0,.40) 62%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 44%,
                black 20%, rgba(0,0,0,.40) 62%, transparent 100%);
        }


        .noise {
            position: absolute;
            inset: 0;
            z-index: 10;
            pointer-events: none;
            opacity: 0.08;
            mix-blend-mode: multiply;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
        }

        .hero-shell {
            position: relative;
            z-index: 2;
            width: min(100%, 1500px);
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            will-change: transform, opacity, filter;
        }

        .hero-copy {
            position: relative;
            z-index: 5;
            width: min(100%, 58rem);
            min-width: 0;
            padding-top: 1.1rem;
        }

        .eyebrow {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: clamp(1.4rem, 3vh, 2.3rem);
            color: rgba(247, 248, 249, 0.55);
            font: 700 0.66rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            content: "";
            width: 2rem;
            height: 1px;
            background: var(--iris);
        }

        .eyebrow-index {
            color: var(--iris);
        }

        .hero-title {
            max-width: 11ch;
            margin: 0;
            color: var(--ice);
            font-family: "Oswald", sans-serif;
            font-size: clamp(3rem, 4.35vw, 5.15rem);
            font-weight: 550;
            line-height: 0.9;
            letter-spacing: -0.04em;
            text-transform: uppercase;
            text-wrap: balance;
        }

        .title-line {
            display: block;
            overflow: hidden;
            font-family: "Oswald", sans-serif;
            padding-bottom: 0.08em;
        }

        .title-line > span {
            display: block;
            font-family: "Oswald", sans-serif;
            transform: none;
        }

        .title-line.outline > span {
            color: transparent;
            -webkit-text-stroke: clamp(1px, 0.11vw, 2px) rgba(247, 248, 249, 0.42);
        }

        .title-line:last-child > span::after {
            content: ".";
            color: var(--iris);
            -webkit-text-stroke: 0;
        }

        .hero-description {
            max-width: 42rem;
            margin: clamp(1.6rem, 3.5vh, 2.7rem) 0 0;
            color: rgba(247, 248, 249, 0.65);
            font-size: clamp(1.1rem, 1.28vw, 1.22rem);
            line-height: 1.62;
        }

        .hero-description strong {
            color: var(--ice);
            font-weight: 650;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.8rem;
            margin-top: clamp(1.7rem, 3.5vh, 2.8rem);
            opacity: 1;
            transform: none;
        }

        .button {
            position: relative;
            display: inline-flex;
            min-height: 3.7rem;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 0.95rem 1.55rem;
            border: 1px solid transparent;
            border-radius: 999px;
            font: 700 0.69rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            transition: transform 350ms var(--ease-out), color 300ms ease, background 300ms ease, border-color 300ms ease;
        }

        .button:hover {
            transform: translateY(-3px);
        }

        .button-primary {
            color: var(--ice);
            background: var(--obsidian);
        }

        .button-primary::before {
            content: "";
            position: absolute;
            inset: -1px;
            padding: 1px;
            border-radius: inherit;
            background: conic-gradient(
                from var(--beam-angle),
                transparent 0deg,
                transparent 245deg,
                rgba(173, 148, 244, 0.22) 278deg,
                var(--lavender) 302deg,
                var(--sage) 326deg,
                transparent 350deg
            );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: button-beam 4.2s linear infinite;
            pointer-events: none;
        }

        .button-primary:hover {
            color: var(--obsidian);
            background: var(--sage);
        }

        .button-icon {
            display: grid;
            width: 1.8rem;
            height: 1.8rem;
            place-items: center;
            border-radius: 50%;
            color: var(--obsidian);
            background: var(--sage);
            font-size: 1rem;
            transition: transform 350ms var(--ease-out);
        }

        .button-primary:hover .button-icon {
            color: var(--ice);
            background: var(--obsidian);
            transform: translateX(3px) rotate(-35deg);
        }

        .button-secondary {
            border-color: var(--line-dark);
            background: rgba(247, 248, 249, 0.12);
            color: var(--ice);
        }

        .button-secondary::before {
            content: "";
            position: absolute;
            inset: -1px;
            padding: 1px;
            border-radius: inherit;
            background: conic-gradient(
                from var(--beam-angle),
                transparent 0deg,
                transparent 245deg,
                rgba(173, 148, 244, 0.16) 278deg,
                rgba(173, 148, 244, 0.55) 302deg,
                rgba(191, 216, 90, 0.55) 326deg,
                transparent 350deg
            );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: button-beam 5.8s linear infinite;
            pointer-events: none;
        }

        .button-secondary:hover {
            border-color: rgba(247, 248, 249, 0.6);
            background: rgba(247, 248, 249, 0.22);
        }

        .down-arrow {
            display: inline-block;
            animation: arrow-drift 1.8s ease-in-out infinite;
        }

        .trust-line {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: clamp(1.6rem, 3vh, 2.6rem);
            color: rgba(247, 248, 249, 0.52);
            font: 700 0.61rem/1.3 "Creato Display", sans-serif;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            opacity: 1;
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: 0.55rem;
        }

        .trust-item::before {
            content: "";
            width: 0.36rem;
            height: 0.36rem;
            border-radius: 50%;
            background: var(--sage);
            box-shadow: 0 0 0 4px rgba(191, 216, 90, 0.12);
        }

        .background-scene {
            position: absolute;
            inset: 0;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
        }

        .scene-glow {
            position: absolute;
            width: min(62vw, 62rem);
            aspect-ratio: 1;
            right: -10%;
            top: 3%;
            border-radius: 50%;
            opacity: 0.82;
            filter: blur(74px);
            background:
                radial-gradient(circle at 48% 44%, rgba(143, 116, 232, 0.48), transparent 45%),
                radial-gradient(circle at 62% 35%, rgba(173, 148, 244, 0.38), transparent 31%),
                radial-gradient(circle at 68% 62%, rgba(191, 216, 90, 0.11), transparent 25%);
            will-change: transform, opacity;
        }

        .scene-plane {
            position: absolute;
            right: clamp(-12rem, -6vw, -4rem);
            width: clamp(12rem, 19vw, 21rem);
            height: 130%;
            top: -15%;
            border: 1px solid rgba(247, 248, 249, 0.5);
            border-radius: 999px;
            background: linear-gradient(
                180deg,
                rgba(247, 248, 249, 0.54) 0%,
                rgba(205, 191, 248, 0.34) 30%,
                rgba(173, 148, 244, 0.4) 56%,
                rgba(143, 116, 232, 0.3) 72%,
                rgba(247, 248, 249, 0.48) 100%
            );
            box-shadow:
                inset 1px 0 rgba(255, 255, 255, 0.94),
                inset -1px 0 rgba(143, 116, 232, 0.14),
                inset 0 0 2.5rem rgba(247, 248, 249, 0.3),
                0 2rem 6rem rgba(143, 116, 232, 0.13);
            backdrop-filter: blur(32px) saturate(108%);
            transform: translateZ(0);
            will-change: transform, opacity;
        }

        .plane-one {
            right: 7%;
            transform: rotate(19deg);
            opacity: 0.82;
        }

        .plane-two {
            right: -5%;
            transform: rotate(19deg) translateY(8%);
            opacity: 0.64;
            background: linear-gradient(
                180deg,
                rgba(247, 248, 249, 0.52),
                rgba(205, 191, 248, 0.3) 32%,
                rgba(173, 148, 244, 0.34) 58%,
                rgba(247, 248, 249, 0.44)
            );
        }

        .plane-three {
            right: 24%;
            width: clamp(5rem, 8vw, 8rem);
            transform: rotate(19deg) translateY(-8%);
            opacity: 0.52;
        }

        .scene-line {
            position: absolute;
            right: -8%;
            top: 52%;
            width: 66%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(143, 116, 232, 0.32), rgba(191, 216, 90, 0.28), transparent);
            transform: rotate(-17deg);
            transform-origin: center;
            will-change: transform, opacity;
        }

        .hero-video {
            position: absolute;
            top: -14%;
            left: 0;
            right: 0;
            width: 100%;
            height: 128%;
            object-fit: cover;
            object-position: center 30%;
            z-index: 0;
            will-change: transform;
        }

        .hero-video-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                160deg,
                rgba(20, 19, 22, 0.78) 0%,
                rgba(20, 19, 22, 0.55) 100%
            );
            z-index: 1;
        }

        .metrics-motion {
            position: relative;
            z-index: 4;
            width: min(100%, 38rem);
            min-height: min(61vh, 36rem);
            justify-self: end;
            perspective: 1200px;
            animation: dashboard-drift 7s ease-in-out infinite;
        }

        .command-center {
            position: absolute;
            left: 3%;
            top: 16%;
            width: 62%;
            min-height: 24rem;
            padding: 1.15rem;
            overflow: hidden;
            border: 1px solid rgba(20, 19, 22, 0.13);
            border-radius: 1.4rem;
            background: linear-gradient(145deg, rgba(247, 248, 249, 0.9), rgba(227, 229, 232, 0.62));
            box-shadow: 0 26px 64px rgba(20, 19, 22, 0.12), inset 0 1px rgba(247, 248, 249, 0.9);
            backdrop-filter: blur(22px);
            transform: rotate(-2deg);
            will-change: transform;
        }

        .command-kicker {
            color: var(--ice-muted);
            font: 700 0.58rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        .command-title {
            margin: 0.5rem 0 1rem;
            font: 700 clamp(1.2rem, 1.7vw, 1.6rem)/1.1 "Creato Display", sans-serif;
            letter-spacing: -0.02em;
        }

        .command-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 0.6rem;
        }

        .metric-panel {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 8rem;
            padding: 0.95rem;
            overflow: hidden;
            border: 1px solid var(--line-light);
            border-radius: 0.9rem;
            color: var(--obsidian);
            background: rgba(247, 248, 249, 0.58);
            box-shadow: inset 0 1px rgba(247, 248, 249, 0.9);
            backdrop-filter: blur(18px);
            transform-style: preserve-3d;
            will-change: transform;
            transition:
                border-color 350ms ease,
                box-shadow 450ms var(--ease-out),
                background 350ms ease;
        }

        .metric-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.38;
            background:
                radial-gradient(circle at 100% 0%, rgba(173, 148, 244, 0.2), transparent 42%),
                linear-gradient(120deg, transparent 42%, rgba(255, 255, 255, 0.56), transparent 58%);
        }

        .metric-panel:hover {
            border-color: rgba(143, 116, 232, 0.3);
            box-shadow:
                inset 0 1px rgba(247, 248, 249, 0.98),
                0 24px 54px rgba(20, 19, 22, 0.12);
        }

        .metric-top,
        .metric-value,
        .metric-transition {
            position: relative;
            z-index: 1;
        }

        .metric-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .metric-label {
            color: var(--ice-muted);
            font: 700 0.54rem/1.35 "Creato Display", sans-serif;
            letter-spacing: 0.13em;
            text-transform: uppercase;
        }

        .metric-index {
            color: rgba(143, 116, 232, 0.48);
            font: 500 1.2rem/1 "Oswald", sans-serif;
            letter-spacing: -0.04em;
        }

        .metric-value {
            margin-top: 1rem;
            font-family: "Instrument Sans", sans-serif;
            font-size: clamp(1.9rem, 2.8vw, 3rem);
            font-weight: 650;
            font-stretch: 100%;
            line-height: 0.95;
            letter-spacing: -0.045em;
            font-variant-numeric: tabular-nums;
        }

        .metric-transition {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            margin-top: 1rem;
            white-space: nowrap;
        }

        .metric-from {
            color: var(--ice-muted);
            font-family: "Instrument Sans", sans-serif;
            font-size: clamp(1.1rem, 1.6vw, 1.5rem);
            font-weight: 600;
            font-stretch: 100%;
            line-height: 1;
            letter-spacing: -0.04em;
            text-decoration: line-through;
            text-decoration-thickness: 1px;
        }

        .metric-arrow {
            display: grid;
            flex: 0 0 auto;
            width: 1.65rem;
            height: 1.65rem;
            place-items: center;
            border-radius: 50%;
            color: var(--obsidian);
            background: var(--sage);
            font-size: 0.9rem;
        }

        .metric-to {
            font-family: "Instrument Sans", sans-serif;
            font-size: clamp(2rem, 2.85vw, 2.9rem);
            font-weight: 650;
            font-stretch: 100%;
            line-height: 0.95;
            letter-spacing: -0.045em;
            font-variant-numeric: tabular-nums;
        }

        .metric-primary {
            min-height: 8.4rem;
        }

        .metric-primary .metric-from {
            font-size: clamp(0.88rem, 1.1vw, 1.1rem);
        }

        .metric-primary .metric-to {
            font-size: clamp(1.65rem, 2.1vw, 2.2rem);
        }

        .metric-bookings {
            min-height: 8.4rem;
        }

        .metric-opportunities {
            position: absolute;
            right: 4%;
            top: 3%;
            width: 35%;
            min-height: 9rem;
            transform: rotate(2deg) translateZ(80px);
            background:
                radial-gradient(circle at 50% 0%, rgba(173, 148, 244, 0.22), transparent 44%),
                linear-gradient(145deg, rgba(247, 248, 249, 0.94), rgba(227, 229, 232, 0.82) 58%, rgba(143, 116, 232, 0.12));
            box-shadow: inset 0 1px var(--ice), 0 26px 64px rgba(20, 19, 22, 0.12);
            animation: card-float-a 5.8s var(--ease-out) infinite;
        }

        .metric-tasks {
            position: absolute;
            right: 1%;
            bottom: 4%;
            width: 38%;
            min-height: 13rem;
            transform: rotate(2deg) translateZ(100px);
            animation: card-float-b 6.4s var(--ease-out) infinite;
        }

        .metric-attendance {
            position: absolute;
            left: 25%;
            bottom: 0;
            width: 31%;
            min-height: 8.5rem;
            transform: rotate(-2deg) translateZ(120px);
            animation: card-float-c 6s var(--ease-out) infinite;
        }

        .metric-primary .metric-label {
            color: var(--obsidian);
        }

        .metric-primary::after {
            content: "";
            position: absolute;
            right: 1.15rem;
            bottom: 1.15rem;
            width: 0.55rem;
            height: 0.55rem;
            border-radius: 50%;
            background: var(--sage);
            box-shadow: 0 0 0 0.45rem rgba(191, 216, 90, 0.13);
        }

        .trend-chart {
            position: relative;
            height: 7.7rem;
            margin-top: 0.7rem;
            overflow: hidden;
            border-top: 1px solid rgba(20, 19, 22, 0.08);
            background:
                linear-gradient(rgba(20, 19, 22, 0.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20, 19, 22, 0.045) 1px, transparent 1px);
            background-size: 100% 33.333%, 20% 100%;
        }

        .trend-chart svg {
            position: absolute;
            inset: 12% 2% 5%;
            width: 96%;
            height: 83%;
            overflow: visible;
        }

        .trend-chart path {
            fill: none;
            stroke: var(--lavender);
            stroke-width: 4;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 0 10px rgba(173, 148, 244, 0.2));
            animation: chart-breathe 4s ease-in-out infinite;
        }

        .mini-bars {
            display: flex;
            height: 5.5rem;
            align-items: end;
            gap: 0.4rem;
            margin-top: 0.85rem;
        }

        .mini-bars span {
            flex: 1;
            min-width: 0;
            border-radius: 0.45rem 0.45rem 0.15rem 0.15rem;
            background: var(--platinum);
            transform-origin: bottom;
            animation: bars-breathe 3.5s ease-in-out infinite alternate;
        }

        .mini-bars span:nth-child(2),
        .mini-bars span:nth-child(4) {
            background: linear-gradient(var(--sage), #d9ed83);
            animation-delay: -0.7s;
        }

        .mini-bars span:nth-child(3),
        .mini-bars span:nth-child(6) {
            background: linear-gradient(var(--lavender), var(--iris));
            animation-delay: -1.4s;
        }

        .section-index {
            position: absolute;
            z-index: 6;
            right: max(1.25rem, calc(var(--page-gutter) * 0.45));
            top: 50%;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            color: var(--ice-muted);
            font: 700 0.58rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            transform: rotate(90deg) translateX(50%);
            transform-origin: right center;
        }

        .section-index::after {
            content: "";
            width: 5rem;
            height: 1px;
            background: linear-gradient(90deg, var(--iris), transparent);
        }

        .scroll-control {
            position: absolute;
            z-index: 6;
            left: 50%;
            bottom: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.65rem;
            color: var(--ice-muted);
            font: 700 0.57rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            transform: translateX(-50%);
        }

        .scroll-control::after {
            content: "";
            width: 1px;
            height: 2.5rem;
            background: linear-gradient(var(--iris), transparent);
            animation: scroll-line 2s ease-in-out infinite;
        }

        .growth-section {
            position: relative;
            min-height: 120vh;
            overflow: hidden;
            padding: clamp(8rem, 13vw, 12rem) var(--page-gutter);
            color: var(--ice);
            background: var(--obsidian);
            isolation: isolate;
        }

        .growth-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            opacity: 0.48;
            background:
                radial-gradient(circle at 82% 24%, rgba(173, 148, 244, 0.2), transparent 30rem),
                linear-gradient(rgba(247, 248, 249, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(247, 248, 249, 0.035) 1px, transparent 1px);
            background-size: auto, 5rem 5rem, 5rem 5rem;
            mask-image: linear-gradient(to bottom, black, transparent 92%);
        }

        .section-motion-shell {
            width: min(100%, 1280px);
            margin-inline: auto;
            will-change: transform, opacity, filter;
        }

        .growth-layout {
            display: grid;
            grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr);
            gap: clamp(4rem, 9vw, 9rem);
            align-items: start;
        }

        .growth-heading {
            position: sticky;
            top: 9rem;
        }

        .section-eyebrow {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 1.8rem;
            color: var(--lavender);
            font: 700 0.64rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.2em;
        }

        .section-eyebrow::before {
            content: "";
            width: 2rem;
            height: 1px;
            background: currentColor;
        }

        .growth-title {
            max-width: 12ch;
            margin: 0;
            font-family: "Creato Display", sans-serif;
            font-size: clamp(2.5rem, 4.4vw, 4.6rem);
            font-weight: 500;
            line-height: 0.96;
            letter-spacing: -0.03em;
            text-wrap: balance;
        }

        .growth-title span {
            color: var(--lavender);
        }

        .growth-note {
            max-width: 27rem;
            margin-top: 2rem;
            color: var(--ink-muted);
            font-size: 1.07rem;
            line-height: 1.7;
        }

        .story-flow {
            position: relative;
            padding-left: clamp(2rem, 4vw, 4rem);
        }

        .story-line {
            position: absolute;
            left: 0;
            top: 0.25rem;
            bottom: 0;
            width: 1px;
            overflow: hidden;
            background: rgba(247, 248, 249, 0.1);
        }

        .story-line-fill {
            position: absolute;
            inset: 0;
            background: linear-gradient(var(--lavender), var(--sage), transparent 86%);
            transform: scaleY(0);
            transform-origin: top;
            box-shadow: 0 0 16px rgba(173, 148, 244, 0.45);
        }

        .story-block {
            position: relative;
            padding: 0 0 clamp(4.5rem, 8vw, 7rem);
        }

        .story-block::before {
            content: "";
            position: absolute;
            left: calc(clamp(2rem, 4vw, 4rem) * -1 - 0.28rem);
            top: 0.3rem;
            width: 0.56rem;
            height: 0.56rem;
            border-radius: 50%;
            background: var(--lavender);
            box-shadow: 0 0 0 0.45rem rgba(173, 148, 244, 0.1), 0 0 1.5rem rgba(173, 148, 244, 0.35);
        }

        .story-block:last-child {
            padding-bottom: 0;
        }

        .story-block:last-child::before {
            background: var(--sage);
            box-shadow: 0 0 0 0.45rem rgba(191, 216, 90, 0.1), 0 0 1.5rem rgba(191, 216, 90, 0.32);
        }

        .story-kicker {
            display: block;
            margin-bottom: 1rem;
            color: var(--ink-muted);
            font: 700 0.6rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.17em;
        }

        .story-copy {
            max-width: 31ch;
            margin: 0;
            color: var(--ice);
            font-family: "Creato Display", sans-serif;
            font-size: clamp(1.65rem, 2.5vw, 2.65rem);
            font-weight: 400;
            line-height: 1.14;
            letter-spacing: -0.025em;
            text-wrap: balance;
        }

        .story-copy em {
            color: var(--lavender);
            font-style: normal;
        }

        .story-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.65rem;
            max-width: 34rem;
            margin: 1.6rem 0 0;
            padding: 0;
            list-style: none;
        }

        .story-list li {
            padding: 0.65rem 0.85rem;
            border: 1px solid var(--line-dark);
            border-radius: 999px;
            color: var(--ink-muted);
            background: rgba(247, 248, 249, 0.035);
            font: 700 0.62rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .pressure-section {
            position: relative;
            overflow: hidden;
            padding: clamp(8rem, 13vw, 11rem) var(--page-gutter) clamp(6.5rem, 10vw, 9rem);
            color: var(--obsidian);
            background:
                radial-gradient(circle at 18% 14%, rgba(173, 148, 244, 0.15), transparent 20rem),
                radial-gradient(circle at 82% 72%, rgba(191, 216, 90, 0.10), transparent 18rem),
                transparent; /* fundo herdado do light-unified-zone */
        }

        /* Architectural Grid Lines background overlay */
        .vertical-grid-lines {
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            width: min(calc(100% - (var(--page-gutter) * 2)), 1280px);
            margin-inline: auto;
        }

        .vertical-grid-lines span {
            border-right: 1px solid rgba(20, 19, 22, 0.016);
            height: 100%;
        }

        .vertical-grid-lines span:first-child {
            border-left: 1px solid rgba(20, 19, 22, 0.016);
        }

        .pressure-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(20, 19, 22, .030) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20, 19, 22, .030) 1px, transparent 1px);
            background-size: 4rem 4rem;
            mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            -webkit-mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            opacity: 0.46;
        }

        .pressure-section::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            background:
                linear-gradient(90deg, transparent 0, transparent 16%, rgba(20, 19, 22, 0.06) 16%, rgba(20, 19, 22, 0.06) 16.12%, transparent 16.12%, transparent 100%),
                linear-gradient(180deg, transparent 0, transparent 82%, rgba(20, 19, 22, 0.06) 82%, rgba(20, 19, 22, 0.06) 82.12%, transparent 82.12%, transparent 100%);
            opacity: 0.16;
        }

        .pressure-shell {
            width: min(100%, 1280px);
            margin: 0 auto;
            position: relative;
        }

        .pressure-grid-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
            gap: clamp(3rem, 6vw, 6rem);
            align-items: start;
        }

        .pressure-left-col {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .pressure-heading {
            max-width: 100%;
            display: grid;
            gap: 1.2rem;
            justify-items: start;
            text-align: left;
        }

        .pressure-title {
            max-width: 100%;
            margin: 0;
            font-family: "Creato Display", sans-serif;
            font-size: clamp(2.35rem, 3.35vw, 3.4rem);
            font-weight: 500;
            line-height: 1.05;
            letter-spacing: -0.03em;
            text-wrap: balance;
        }

        .pressure-title span {
            color: rgba(20, 19, 22, 0.42);
        }

        .pressure-intro {
            max-width: 100%;
            margin: 0;
            color: rgba(20, 19, 22, 0.68);
            font-size: clamp(1.04rem, 1.18vw, 1.14rem);
            line-height: 1.72;
        }

        /* Metrics Widget */
        .pressure-metrics-widget {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            padding: 1.8rem;
            border-radius: 1.6rem;
            border: 1px solid rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(12px);
        }

        .pressure-widget-kicker {
            color: rgba(20, 19, 22, 0.42);
            font: 700 0.6rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .pressure-widget-meters {
            display: grid;
            gap: 1.2rem;
        }

        .pressure-widget-meter-row {
            display: grid;
            gap: 0.5rem;
        }

        .pressure-widget-meter-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pressure-widget-meter-label {
            font: 700 0.6rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(20, 19, 22, 0.6);
        }

        .pressure-widget-meter-value {
            font: 700 0.7rem/1 "Creato Display", sans-serif;
            color: var(--obsidian);
        }

        .pressure-widget-meter-bar {
            height: 0.35rem;
            border-radius: 999px;
            background: rgba(20, 19, 22, 0.08);
            overflow: hidden;
        }

        .pressure-widget-meter-fill {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--iris), var(--sage));
            box-shadow: 0 0 10px rgba(143, 116, 232, 0.3);
        }

        /* Summary Widget */
        .pressure-summary-widget {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-left: 0.5rem;
        }

        .pressure-summary-copy {
            margin: 0;
            font-family: "Creato Display", sans-serif;
            font-size: clamp(1.65rem, 2.15vw, 2.2rem);
            line-height: 1.08;
            letter-spacing: -0.04em;
            text-wrap: balance;
        }

        .pressure-summary-copy em {
            color: var(--iris);
            font-style: normal;
        }

        .pressure-summary-note {
            margin: 0;
            color: rgba(20, 19, 22, 0.64);
            font-size: clamp(1rem, 1.04vw, 1.06rem);
            line-height: 1.7;
        }

        /* Staggered vertical deck list */
        .pressure-staggered-list {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .pressure-card {
            position: relative;
            min-width: 0;
            padding: 1.65rem 1.6rem;
            border-radius: 1.6rem;
            border: 1px solid rgba(255, 255, 255, 0.68);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
            backdrop-filter: blur(26px) saturate(135%);
            box-shadow:
                0 1.6rem 3.5rem rgba(143, 116, 232, 0.09),
                0 1rem 2rem rgba(20, 19, 22, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.84);
            overflow: hidden;
            transition: transform 0.45s var(--ease-out), border-color 0.45s ease, box-shadow 0.45s var(--ease-out);
        }

        /* Hover Flashlight and glow effect */
        .pressure-card::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0;
            background: radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(173, 148, 244, 0.12), transparent 45%);
            transition: opacity 0.4s;
            pointer-events: none;
        }

        .flashlight-border {
            position: absolute;
            inset: 0;
            z-index: 2;
            padding: 1px;
            border-radius: inherit;
            opacity: 0;
            pointer-events: none;
            background: radial-gradient(280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--lavender), transparent 44%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            transition: opacity 0.4s;
        }

        .pressure-card:hover::before,
        .pressure-card:hover .flashlight-border {
            opacity: 1;
        }

        .pressure-card:hover {
            transform: translateY(-5px);
            border-color: rgba(143, 116, 232, 0.32);
            box-shadow:
                0 2rem 4rem rgba(143, 116, 232, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        /* Stagger layout logic on desktop */
        @media (min-width: 1024px) {
            .pressure-stagger-2 {
                margin-left: 3.5rem;
            }
            .pressure-stagger-3 {
                margin-left: 1.5rem;
            }
        }

        .pressure-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            position: relative;
            z-index: 3;
        }

        .pressure-card-index {
            color: rgba(173, 148, 244, 0.54);
            font: 700 1.45rem/1 "Oswald", sans-serif;
            letter-spacing: -0.02em;
        }

        .pressure-mark {
            width: 2.85rem;
            height: 2.85rem;
            display: grid;
            place-items: center;
            border-radius: 50%;
            border: 1px solid rgba(20, 19, 22, 0.08);
            background: rgba(255, 255, 255, 0.56);
            color: var(--lavender);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
        }

        .pressure-mark svg {
            width: 1rem;
            height: 1rem;
        }

        .pressure-card-title {
            margin: 1.2rem 0 0;
            font-family: "Creato Display", sans-serif;
            font-size: clamp(1.18rem, 1.35vw, 1.32rem);
            line-height: 1.12;
            letter-spacing: -0.03em;
            position: relative;
            z-index: 3;
        }

        .pressure-card-copy {
            margin: 0.85rem 0 0;
            color: rgba(20, 19, 22, 0.66);
            font-size: clamp(1.06rem, 1.14vw, 1.14rem);
            line-height: 1.68;
            position: relative;
            z-index: 3;
        }

        .pressure-meta {
            display: inline-flex;
            align-items: center;
            gap: 0.48rem;
            margin-top: 1rem;
            color: rgba(20, 19, 22, 0.44);
            font: 700 0.58rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            position: relative;
            z-index: 3;
        }

        .pressure-meta::before {
            content: "";
            width: 1.4rem;
            height: 1px;
            background: rgba(173, 148, 244, 0.52);
        }

        .pressure-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            color: rgba(20, 19, 22, 0.42);
            font: 700 0.6rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .pressure-kicker::before {
            content: "";
            width: 1.6rem;
            height: 1px;
            background: rgba(173, 148, 244, 0.55);
        }

        .bridge-section {
            position: relative;
            padding: clamp(5rem, 9vw, 7rem) var(--page-gutter);
            background:
                radial-gradient(circle at 50% 68%, rgba(173, 148, 244, 0.10), transparent 22rem),
                radial-gradient(circle at 84% 80%, rgba(191, 216, 90, 0.06), transparent 16rem),
                transparent; /* fundo herdado do light-unified-zone */
            color: var(--obsidian);
            overflow: hidden;
        }

        .bridge-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(20, 19, 22, .030) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20, 19, 22, .030) 1px, transparent 1px);
            background-size: 4rem 4rem;
            mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            -webkit-mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            opacity: 0.46;
        }

        /* ── Grid padrão para seções claras — reutilizar em novas seções */
        .section-light-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-image:
                linear-gradient(rgba(20, 19, 22, .030) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20, 19, 22, .030) 1px, transparent 1px);
            background-size: 4rem 4rem;
            mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            -webkit-mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            opacity: 0.46;
        }

        .bridge-section::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                linear-gradient(to bottom,
                    rgba(143,116,232,.05) 0%,
                    transparent 28%
                ),
                linear-gradient(90deg,
                    transparent 8%,
                    rgba(143,116,232,.06) 22%,
                    transparent 46%,
                    rgba(191,216,90,.04) 68%,
                    transparent 90%
                );
        }

        .bridge-shell {
            position: relative;
            width: min(100%, 1120px);
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
            gap: 2.4rem;
            align-items: center;
        }

        .bridge-copy {
            display: grid;
            gap: 1rem;
        }

        .bridge-title {
            margin: 0;
            max-width: 13ch;
            font-family: "Creato Display", sans-serif;
            font-size: clamp(2.2rem, 3.35vw, 3.35rem);
            line-height: 1;
            letter-spacing: -0.05em;
        }

        .bridge-title span {
            color: var(--lavender);
        }

        .bridge-note {
            margin: 0;
            max-width: 38rem;
            color: rgba(20, 19, 22, 0.62);
            font-size: clamp(1.04rem, 1.1vw, 1.14rem);
            line-height: 1.76;
        }

.bridge-aside {
            justify-self: end;
            max-width: 18rem;
            padding: 0.35rem 0 0.35rem 1.25rem;
            border-left: 1px solid rgba(20, 19, 22, 0.14);
            background: transparent;
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }

        .bridge-aside p {
            margin: 0;
            color: rgba(20, 19, 22, 0.56);
            font-size: 1.04rem;
            line-height: 1.68;
        }

        /* ── Stagger 3D (inspiração Origami / d3adrabbit) ── */
        .stagger-scene {
            perspective: 560px;
            perspective-origin: 42% 32%;
            width: 100%;
            height: 76px;
            flex-shrink: 0;
            pointer-events: none;
            user-select: none;
            overflow: visible;
        }

        .stagger-group {
            width: 70%;
            height: 56px;
            transform-style: preserve-3d;
            transform: rotateX(22deg) rotateY(44deg);
            position: relative;
            top: 6px;
            left: 2px;
        }

        .stagger-blade {
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            height: 10px;
            top: calc(var(--i) * 11px);
            border-radius: 3px;
            background: linear-gradient(to right,
                rgba(143, 116, 232, .72),
                rgba(173, 148, 244, .46)
            );
            border: 1px solid rgba(143, 116, 232, .24);
            box-shadow:
                inset 0 1px 0 rgba(247, 248, 249, .18),
                0 2px 8px rgba(143, 116, 232, .12);
            transform-origin: center center;
            will-change: transform;
        }

        .pressure-impact-list {
            display: grid;
            gap: 0.8rem;
            margin-top: 1rem;
        }

        .pressure-impact-item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 0.8rem;
            align-items: start;
            padding: 0.95rem 1rem;
            border-radius: 1.2rem;
            background: rgba(255, 255, 255, 0.42);
            border: 1px solid rgba(255, 255, 255, 0.66);
        }

        .pressure-impact-index {
            color: rgba(173, 148, 244, 0.54);
            font: 700 0.88rem/1 "Oswald", sans-serif;
            letter-spacing: 0.04em;
        }

        .pressure-impact-text {
            color: rgba(20, 19, 22, 0.76);
            font-size: 0.92rem;
            line-height: 1.58;
        }

        .pressure-hover-card {
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        }

        .pressure-hover-card:hover {
            transform: translateY(-4px);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)),
                radial-gradient(circle at 18% 14%, rgba(173, 148, 244, 0.12), transparent 42%);
            border-color: rgba(173, 148, 244, 0.24);
            box-shadow:
                0 0 0 1px rgba(173, 148, 244, 0.06),
                0 1.9rem 3.8rem rgba(143, 116, 232, 0.16),
                0 0 44px rgba(173, 148, 244, 0.18),
                0 1rem 2rem rgba(20, 19, 22, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.84);
        }

        /* ── Seção 04 — Método / Diagnóstico ──────────────────────────────── */
        .method-section {
            position: relative;
            overflow: hidden;
            padding: clamp(7.5rem, 11vw, 9.5rem) var(--page-gutter) 0;
            color: var(--ice);
            background: transparent;
        }

        .method-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.22;
            background:
                linear-gradient(rgba(247, 248, 249, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(247, 248, 249, 0.04) 1px, transparent 1px);
            background-size: 4.6rem 4.6rem;
        }

        .method-section::after {
            display: none;
        }

        .method-shell {
            position: relative;
            z-index: 1;
            width: min(100%, 1180px);
            margin: 0 auto;
        }

        /* Cabeçalho centralizado */
        .method-header {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 3rem;
        }

        .method-header .section-eyebrow {
            justify-content: center;
        }

        .method-title {
            margin: 0.6rem 0 1rem;
            font-family: "Creato Display", sans-serif;
            font-size: clamp(2.6rem, 3.8vw, 4.2rem);
            font-weight: 500;
            line-height: 1.02;
            letter-spacing: -0.03em;
            text-wrap: pretty;
        }

        .method-title span {
            color: var(--lavender);
        }

        .method-subtitle {
            margin: 0;
            color: var(--ink-muted);
            font-size: clamp(1.06rem, 1.1vw, 1.14rem);
            line-height: 1.72;
        }

        /* Pill tabs — Resend-inspired */
        .method-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            justify-content: center;
            margin-bottom: 2.6rem;
        }

        .method-tab {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.58rem 1.15rem 0.58rem 0.85rem;
            border-radius: 999px;
            border: 1px solid rgba(247, 248, 249, 0.09);
            background: transparent;
            color: var(--ink-muted);
            font-family: "Instrument Sans", sans-serif;
            font-size: 0.84rem;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.28s, background 0.28s, border-color 0.28s;
            overflow: hidden;
        }

        .method-tab:hover {
            color: var(--ice);
            border-color: rgba(247, 248, 249, 0.16);
            background: rgba(247, 248, 249, 0.03);
        }

        .method-tab.active {
            background: var(--sage);
            border-color: var(--sage);
            color: var(--obsidian);
        }

        .method-tab-num {
            font-family: "Oswald", sans-serif;
            font-size: 0.76rem;
            font-weight: 600;
            line-height: 1;
            opacity: 0.52;
        }

        .method-tab.active .method-tab-num {
            opacity: 0.42;
        }

        /* Barra de progresso dentro da tab ativa */
        .method-tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            width: 0;
            background: rgba(0, 0, 0, 0.2);
        }

        .method-tab.active .method-tab-bar {
            animation: tab-progress-fill 4s linear forwards;
        }

        @keyframes tab-progress-fill {
            to { width: 100%; }
        }

        /* Feature card — padrão Resend */
        .method-card {
            position: relative;
            border-radius: 1.75rem 1.75rem 0 0;
            border: 1px solid rgba(247, 248, 249, 0.08);
            border-bottom: none;
            background: linear-gradient(180deg,
                rgba(247, 248, 249, 0.044) 0%,
                rgba(247, 248, 249, 0.012) 45%,
                transparent 100%
            );
            overflow: hidden;
            padding: clamp(2.2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5rem);
            min-height: 24rem;
        }

        /* Fade inferior — card dissolve no fundo */
        .method-card::after {
            content: "";
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 7rem;
            background: linear-gradient(0deg, #111014 0%, transparent 100%);
            pointer-events: none;
            z-index: 2;
        }

        /* Painéis por tab */
        .method-panel {
            display: none;
            grid-template-columns: 1fr 1fr;
            gap: clamp(2rem, 5vw, 4rem);
            align-items: center;
        }

        .method-panel.active {
            display: grid;
        }

        .method-panel-left {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-bottom: 2rem;
        }

        .method-panel-num {
            font: 700 2.4rem/1 "Oswald", sans-serif;
            color: rgba(173, 148, 244, 0.42);
            letter-spacing: -0.02em;
        }

        .method-panel-title {
            margin: 0;
            font-family: "Creato Display", sans-serif;
            font-size: clamp(1.4rem, 1.55vw, 1.68rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.022em;
        }

        .method-panel-desc {
            margin: 0;
            color: var(--ink-muted);
            font-size: 1.04rem;
            line-height: 1.68;
        }

        .method-panel-list {
            list-style: none;
            margin: 0.2rem 0 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.52rem;
        }

        .method-panel-list li {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            color: rgba(247, 248, 249, 0.68);
            font-size: 1.02rem;
            line-height: 1.52;
        }

        .method-panel-list li::before {
            content: "";
            flex-shrink: 0;
            margin-top: 0.44em;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--sage);
        }

        /* Área visual — coluna direita */
        .method-panel-visual {
            border-radius: 1.2rem;
            border: 1px solid rgba(247, 248, 249, 0.06);
            background: rgba(247, 248, 249, 0.018);
            min-height: 16rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.6rem;
            position: relative;
            overflow: hidden;
        }

        /* ── Visuais por painel ──────────────────────────────────────── */

        /* Visual 1 — Timeline de Atraso */
        .mv-timeline { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
        .mv-tl-row { display: flex; align-items: center; gap: 0.85rem; }
        .mv-tl-dot {
            width: 2.1rem; height: 2.1rem; border-radius: 50%;
            border: 2px solid rgba(247,248,249,0.14); background: var(--carbon);
            flex-shrink: 0; display: flex; align-items: center; justify-content: center;
            font: 700 0.65rem/1 "Oswald",sans-serif; color: var(--ink-muted);
        }
        .mv-tl-dot.done { background: rgba(191,216,90,0.12); border-color: var(--sage); color: var(--sage); }
        .mv-tl-dot.error {
            background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.55); color: rgb(239,68,68);
            animation: mvtl-pulse 2s ease-in-out infinite;
        }
        @keyframes mvtl-pulse { 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0.1); } }
        .mv-tl-line { flex-grow: 1; height: 1px; background: rgba(247,248,249,0.07); }
        .mv-tl-label { font-size: 0.76rem; color: var(--ink-muted); white-space: nowrap; }
        .mv-tl-badge {
            font-size: 0.7rem; font-weight: 700; padding: 0.25em 0.65em; border-radius: 4px;
            background: rgba(239,68,68,0.1); color: rgb(239,68,68); border: 1px solid rgba(239,68,68,0.22);
        }

        /* Visual 2 — Dependências */
        .mv-deps { width: 100%; display: flex; flex-direction: column; gap: 1.4rem; }
        .mv-dep-row { display: flex; align-items: center; gap: 0.75rem; }
        .mv-dep-node {
            padding: 0.42rem 0.9rem; border-radius: 0.6rem;
            border: 1px solid rgba(247,248,249,0.09); background: var(--carbon);
            font: 600 0.76rem/1.4 "Instrument Sans",sans-serif; color: var(--ink-muted); white-space: nowrap;
        }
        .mv-dep-node.active { border-color: rgba(173,148,244,0.32); background: rgba(143,116,232,0.1); color: var(--lavender); }
        .mv-dep-node.blocked { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.07); color: rgb(239,68,68); }
        .mv-dep-arrow {
            flex-grow: 1; height: 1px; background: rgba(247,248,249,0.08); position: relative;
        }
        .mv-dep-arrow::after {
            content: "▶"; position: absolute; right: -4px; top: -6px;
            font-size: 0.52rem; color: rgba(247,248,249,0.2);
        }
        .mv-dep-arrow.blocked { background: rgba(239,68,68,0.25); }
        .mv-dep-arrow.blocked::after {
            content: "⊘"; color: rgb(239,68,68); font-size: 0.7rem; top: -7px; right: calc(50% - 6px);
        }

        /* Visual 3 — Loop repetitivo */
        .mv-loop { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; width: 100%; }
        .mv-loop-ring {
            width: 7rem; height: 7rem; border-radius: 50%;
            border: 2px dashed rgba(173,148,244,0.28);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            animation: mv-loop-spin 14s linear infinite;
        }
        @keyframes mv-loop-spin { to { transform: rotate(360deg); } }
        .mv-loop-count { font: 700 2rem/1 "Oswald",sans-serif; color: var(--sage); letter-spacing: -0.02em; }
        .mv-loop-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); margin-top: 0.15rem; }
        .mv-loop-tags { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: center; }
        .mv-loop-tag {
            font-size: 0.68rem; padding: 0.25em 0.65em; border-radius: 999px;
            border: 1px solid rgba(247,248,249,0.08); color: var(--ink-muted); background: rgba(247,248,249,0.02);
        }

        /* Visual 4 — Informação dispersa */
        .mv-scatter { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.65rem; width: 100%; }
        .mv-source {
            background: rgba(247,248,249,0.02); border: 1px solid rgba(247,248,249,0.07);
            border-radius: 0.75rem; padding: 0.9rem 0.6rem;
            display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center;
        }
        .mv-source-icon {
            width: 2.2rem; height: 2.2rem; border-radius: 0.5rem;
            display: flex; align-items: center; justify-content: center;
        }
        .mv-source-icon svg { width: 1.05rem; height: 1.05rem; }
        .mv-source-icon.green { background: rgba(191,216,90,0.12); color: var(--sage); }
        .mv-source-icon.purple { background: rgba(173,148,244,0.12); color: var(--lavender); }
        .mv-source-icon.orange { background: rgba(255,166,0,0.1); color: #ffa600; }
        .mv-source-name { font: 700 0.72rem/1.2 "Creato Display",sans-serif; color: var(--ice); }
        .mv-source-tag { font-size: 0.58rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
        .mv-scatter-note {
            grid-column: 1 / -1; text-align: center; font-size: 0.73rem;
            color: rgba(239,68,68,0.68); border-top: 1px solid rgba(239,68,68,0.1);
            padding-top: 0.6rem; margin-top: 0.1rem;
        }

        /* Visual 5 — Funil */
        .mv-funnel { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 100%; }
        .mv-funnel-step {
            border-radius: 999px; height: 2.2rem;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 1.1rem;
            font: 600 0.76rem/1 "Instrument Sans",sans-serif;
        }
        .mv-funnel-step.f-top { width: 88%; background: rgba(247,248,249,0.05); border: 1px solid rgba(247,248,249,0.1); color: var(--ice); }
        .mv-funnel-step.f-mid { width: 62%; background: rgba(143,116,232,0.1); border: 1px solid rgba(143,116,232,0.22); color: var(--lavender); }
        .mv-funnel-step.f-low { width: 36%; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.22); color: rgb(239,68,68); }
        .mv-funnel-leak { font-size: 0.65rem; color: rgba(239,68,68,0.65); margin: 0.1rem 0; }

        /* Placeholder para classes diagnose-* usadas pelo GSAP */
        .diagnose-reveal { /* alias para os targets do GSAP existente */ }


                @keyframes arrow-drift {
            0%, 100% { transform: translateY(-2px); }
            50% { transform: translateY(3px); }
        }

        @keyframes dashboard-drift {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        @keyframes card-float-a {
            0%, 100% { transform: rotate(2deg) translate3d(0, 0, 80px); }
            50% { transform: rotate(1deg) translate3d(0, -9px, 80px); }
        }

        @keyframes card-float-b {
            0%, 100% { transform: rotate(2deg) translate3d(0, 0, 100px); }
            50% { transform: rotate(3deg) translate3d(0, 8px, 100px); }
        }

        @keyframes card-float-c {
            0%, 100% { transform: rotate(-2deg) translate3d(0, 0, 120px); }
            50% { transform: rotate(-1deg) translate3d(0, -7px, 120px); }
        }

        @keyframes chart-breathe {
            50% {
                transform: translateY(-3px);
                filter: drop-shadow(0 0 16px rgba(173, 148, 244, 0.36));
            }
        }

        @keyframes bars-breathe {
            to {
                transform: scaleY(0.72);
                opacity: 0.74;
            }
        }

        @keyframes scroll-line {
            0%, 100% { transform: scaleY(0.45); transform-origin: top; opacity: 0.5; }
            50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
        }

        @property --beam-angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }
        @keyframes button-beam {
            to { --beam-angle: 360deg; }
        }


        /* ── SVG NOISE OVERLAY (grain sutil em seções claras) ── */
        .section-noise {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: 0.042;
            mix-blend-mode: multiply;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
            background-size: 180px 180px;
        }

        /* ── GHOST WORD (palavra sombreada de fundo — preenchida) ── */
        .section-ghost-word {
            position: absolute;
            z-index: 0;
            pointer-events: none;
            user-select: none;
            color: rgba(20, 19, 22, 0.052);
            font-family: "Oswald", sans-serif;
            font-size: clamp(110px, 16vw, 230px);
            font-weight: 600;
            line-height: 0.82;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: -0.05em;
        }

        /* ── KEYWORD HIGHLIGHT (iris + underline gradiente) ── */
        .text-keyword {
            position: relative;
            color: var(--iris);
            font-weight: 650;
        }
        .text-keyword::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: -3px;
            left: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--lavender), var(--sage));
            opacity: 0.82;
        }

        /* ── DARK UNIFIED ZONE (tools-band + method-section share one background) ── */
        .dark-unified-zone {
            background: #08070a;
            isolation: isolate;
            display: flow-root;
        }

        /* ── TOOLS BAND (NEW INTEGRATIONS HUB) ── */
        .tools-band {
            position: relative;
            z-index: 3;
            overflow: visible;
            padding: clamp(170px, 20vw, 230px) 0 0;
            background:
                radial-gradient(circle at 50% 45%, rgba(143, 116, 232, 0.15) 0%, transparent 52%),
                radial-gradient(circle at 50% 45%, rgba(173, 148, 244, 0.07) 0%, transparent 40%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .integration-graph {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, 1.6vw, 16px);
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px clamp(1rem, 3vw, 3rem);
        }

        .hub-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(100px, 14vw, 140px);
            height: clamp(100px, 14vw, 140px);
            flex-shrink: 0;
            z-index: 3;
        }

        .center-hub {
            width: clamp(78px, 10vw, 106px);
            height: clamp(78px, 10vw, 106px);
            border-radius: 50%;
            background: linear-gradient(145deg, var(--lavender) 0%, var(--iris) 60%, #6b52cc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid rgba(247, 248, 249, 0.18);
            z-index: 2;
            position: relative;
            animation: hub-breathe 3.5s infinite ease-in-out;
            box-shadow:
                0 0 0 10px rgba(143, 116, 232, 0.08),
                0 0 28px rgba(143, 116, 232, 0.28),
                0 0 54px rgba(143, 116, 232, 0.18);
        }

        .center-hub svg {
            width: clamp(22px, 3vw, 30px);
            height: clamp(22px, 3vw, 30px);
            color: var(--ice);
            stroke-width: 2.5;
        }

        .concentric-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .ring-1 {
            width: clamp(140px, 18vw, 200px);
            height: clamp(140px, 18vw, 200px);
            background: radial-gradient(circle at center,
                rgba(143, 116, 232, 0.18) 0%,
                rgba(143, 116, 232, 0.08) 55%,
                transparent 100%);
            border: 1px solid rgba(143, 116, 232, 0.28);
            animation: ring-breathe 3.5s ease-in-out infinite;
        }

        .ring-2 {
            width: clamp(240px, 30vw, 340px);
            height: clamp(240px, 30vw, 340px);
            background: radial-gradient(circle at center,
                transparent 36%,
                rgba(143, 116, 232, 0.10) 55%,
                rgba(143, 116, 232, 0.04) 75%,
                transparent 100%);
            border: 1px solid rgba(143, 116, 232, 0.16);
            animation: ring-breathe 3.5s ease-in-out infinite 0.7s;
        }

        .ring-3 {
            width: clamp(360px, 44vw, 500px);
            height: clamp(360px, 44vw, 500px);
            background: radial-gradient(circle at center,
                transparent 55%,
                rgba(143, 116, 232, 0.06) 70%,
                rgba(143, 116, 232, 0.02) 85%,
                transparent 100%);
            border: 1px solid rgba(143, 116, 232, 0.08);
            animation: ring-breathe 3.5s ease-in-out infinite 1.4s;
        }

        .tool-node {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border-radius: 50%;
            background: rgba(20, 19, 22, 0.6);
            border: 1px solid rgba(247, 248, 249, 0.08);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition: all 0.4s var(--ease-out);
            cursor: pointer;
            flex-shrink: 0;
            z-index: 2;
        }

        .node-outer {
            width: clamp(36px, 4vw, 46px);
            height: clamp(36px, 4vw, 46px);
        }

        .node-middle {
            width: clamp(40px, 4.5vw, 50px);
            height: clamp(40px, 4.5vw, 50px);
        }

        .node-inner {
            width: clamp(44px, 5vw, 56px);
            height: clamp(44px, 5vw, 56px);
        }

        .tool-node img {
            width: 48%;
            height: 48%;
            object-fit: contain;
            filter: brightness(0) invert(1);
            opacity: 0.72;
            transition: opacity 0.3s ease;
        }
        .tool-node .tool-svg {
            width: 48%; height: 48%;
            fill: rgba(255,255,255,.72);
            transition: fill 0.3s ease;
            overflow: visible;
        }
        .tool-depth-1 {
            width: clamp(52px, 6vw, 66px);
            height: clamp(52px, 6vw, 66px);
            top: 0;
            z-index: 5;
        }
        .tool-depth-2 {
            width: clamp(48px, 5.4vw, 60px);
            height: clamp(48px, 5.4vw, 60px);
            top: -5px;
            z-index: 4;
        }
        .tool-depth-3 {
            width: clamp(43px, 4.8vw, 54px);
            height: clamp(43px, 4.8vw, 54px);
            top: -10px;
            z-index: 3;
        }
        .tool-depth-4 {
            width: clamp(38px, 4.2vw, 48px);
            height: clamp(38px, 4.2vw, 48px);
            top: -15px;
            z-index: 2;
        }
        .tool-node--aws .tool-svg {
            width: 84%;
            height: 84%;
        }
        .tool-node--brand img {
            width: 66%;
            height: 66%;
        }
        .tool-node:hover {
            border-color: var(--lavender);
            box-shadow: 0 0 18px rgba(173, 148, 244, 0.4);
            transform: scale(1.12) translateY(-2px);
        }
        .tool-node:hover img { opacity: 1; }
        .tool-node:hover .tool-svg { fill: rgba(255,255,255,1); }

        .integrations-copy-block {
            text-align: center;
            max-width: 760px;
            margin-top: clamp(32px, 5vw, 52px);
            padding: 0 var(--page-gutter) clamp(60px, 9vw, 100px);
        }

        .integrations-headline {
            font-family: "Creato Display", sans-serif;
            font-size: clamp(1.65rem, 2.8vw, 2.6rem);
            font-weight: 700;
            line-height: 1.08;
            letter-spacing: -0.035em;
            color: var(--ice);
            margin: 0 0 0.85rem;
            text-wrap: balance;
        }

        .integrations-headline em {
            font-style: normal;
            background: linear-gradient(90deg, var(--lavender), var(--sage));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .integrations-text {
            font-family: "Instrument Sans", sans-serif;
            font-size: clamp(1.04rem, 1.18vw, 1.16rem);
            font-weight: 400;
            line-height: 1.65;
            color: rgba(247, 248, 249, 0.52);
            letter-spacing: 0;
            text-wrap: balance;
            margin: 0;
        }

        @keyframes ring-breathe {
            0%, 100% {
                transform: translate(-50%, -50%) scale(0.88);
                opacity: 0.45;
            }
            50% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }

        @keyframes hub-breathe {
            0%, 100% {
                box-shadow:
                    0 0 18px rgba(143, 116, 232, 0.5),
                    0 0 40px rgba(143, 116, 232, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.22);
                transform: scale(0.97);
            }
            50% {
                box-shadow:
                    0 0 32px rgba(173, 148, 244, 0.85),
                    0 0 70px rgba(143, 116, 232, 0.35),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
                transform: scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .center-hub, .concentric-ring {
                animation: none !important;
            }
        }

        /* ── SOLUTIONS SECTION ── */
        .solutions-section {
            position: relative;
            overflow: hidden;
            padding: clamp(8rem, 13vw, 11rem) var(--page-gutter) clamp(6rem, 10vw, 9rem);
            background: var(--surface);
            isolation: isolate;
        }

        .solutions-shell {
            position: relative;
            z-index: 2;
            width: min(100%, 1400px);
            margin-inline: auto;
        }

        .solutions-heading {
            max-width: 50rem;
            margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
        }

        .solutions-eyebrow {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: clamp(1.2rem, 2.5vh, 2rem);
            color: var(--iris);
            font: 700 0.64rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.2em;
        }

        .solutions-eyebrow::before {
            content: "";
            width: 2rem;
            height: 1px;
            background: currentColor;
            opacity: 0.5;
        }

        .solutions-title {
            margin: 0 0 1.2rem;
            color: var(--obsidian);
            font-family: "Creato Display", sans-serif;
            font-size: clamp(2.8rem, 4vw, 4.4rem);
            font-weight: 550;
            line-height: 0.92;
            letter-spacing: -0.03em;
        }

        .solutions-subtitle {
            color: var(--ice-muted);
            font-size: clamp(1rem, 1.16vw, 1.12rem);
            line-height: 1.65;
            max-width: 36rem;
        }

        .solutions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 1.1rem;
        }

        .solution-card {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 1.4rem;
            padding: clamp(2rem, 3vw, 2.6rem);
            overflow: hidden;
            border: 1px solid rgba(20, 19, 22, 0.08);
            border-radius: 1.75rem;
            background: linear-gradient(
                148deg,
                #ffffff 0%,
                rgba(236, 239, 245, 1) 100%
            );
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                0 1px 2px rgba(20, 19, 22, 0.04),
                0 4px 16px rgba(20, 19, 22, 0.05),
                0 16px 48px rgba(20, 19, 22, 0.06);
            transition:
                border-color 300ms ease,
                box-shadow 400ms var(--ease-out),
                transform 380ms var(--ease-out);
        }

        /* shimmer line no topo — oculto por padrão, aparece no hover */
        .solution-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 1px;
            opacity: 0;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(143, 116, 232, 0.55) 40%,
                rgba(191, 216, 90, 0.40) 70%,
                transparent 100%
            );
            z-index: 1;
            transition: opacity 380ms ease;
        }

        /* glow radial no hover */
        .solution-card::after {
            content: "";
            position: absolute;
            inset: -1px;
            pointer-events: none;
            opacity: 0;
            border-radius: inherit;
            background: transparent;
            box-shadow:
                0 0 0 1px rgba(143, 116, 232, 0.55),
                0 0 22px rgba(143, 116, 232, 0.32),
                0 0 55px rgba(143, 116, 232, 0.18),
                0 0 90px rgba(143, 116, 232, 0.08);
            transition: opacity 400ms ease;
        }

        .solution-card:hover {
            border-color: rgba(143, 116, 232, 0.50);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.98),
                0 2px 4px rgba(20, 19, 22, 0.04),
                0 8px 24px rgba(20, 19, 22, 0.06),
                0 28px 64px rgba(20, 19, 22, 0.05);
            transform: translateY(-3px);
        }

        .solution-card:hover::before {
            opacity: 1;
        }

        .solution-card:hover::after {
            opacity: 1;
        }

        .solution-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
        }

        .solution-number {
            flex-shrink: 0;
            color: var(--iris);
            font: 700 0.62rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.12em;
            opacity: 0.7;
            margin-top: 0.22rem;
        }

        .solution-name {
            margin: 0;
            flex: 1;
            color: var(--obsidian);
            font-family: "Creato Display", sans-serif;
            font-size: clamp(1.18rem, 1.56vw, 1.48rem);
            font-weight: 500;
            line-height: 1.1;
            letter-spacing: -0.01em;
        }

        .solution-body {
            margin: 0;
            color: var(--ice-muted);
            font-size: clamp(1.04rem, 1.1vw, 1.08rem);
            line-height: 1.7;
        }

        .solution-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.38rem;
            margin-top: auto;
            padding-top: 0.6rem;
            border-top: 1px solid rgba(20, 19, 22, 0.05);
        }

        .solution-tag {
            padding: 0.32rem 0.72rem;
            border: 1px solid rgba(20, 19, 22, 0.07);
            border-radius: 99px;
            color: var(--ice-muted);
            font: 600 0.65rem/1.2 "Creato Display", sans-serif;
            letter-spacing: 0.04em;
            background: rgba(20, 19, 22, 0.02);
            transition: border-color 250ms ease, color 250ms ease;
        }

        .solution-card:hover .solution-tag {
            border-color: rgba(143, 116, 232, 0.18);
            color: var(--iris);
        }

        /* Flow widget — card Automação ──────────────────────────────────── */
        .solution-flow {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: auto;
            padding: 1.1rem;
            border: 1px solid var(--line-light);
            border-radius: 1rem;
            background: rgba(240, 241, 244, 0.62);
            box-shadow: inset 0 1px rgba(255, 255, 255, 0.88);
        }
        .flow-track {
            display: flex;
            align-items: flex-start;
            padding-top: 0.1rem;
        }
        .flow-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.44rem;
            flex-shrink: 0;
        }
        .flow-dot {
            display: block;
            width: 0.48rem;
            height: 0.48rem;
            border-radius: 50%;
            background: rgba(20, 19, 22, 0.10);
            border: 1px solid rgba(20, 19, 22, 0.14);
            flex-shrink: 0;
        }
        .flow-step.flow-done .flow-dot {
            background: var(--iris);
            border-color: transparent;
            box-shadow: 0 0 0 2px rgba(143, 116, 232, 0.16);
        }
        .flow-step.flow-active .flow-dot {
            background: var(--sage);
            border-color: transparent;
            box-shadow: 0 0 0 3px rgba(191, 216, 90, 0.18);
            animation: flow-pulse 1.85s ease infinite;
        }
        @keyframes flow-pulse {
            0%, 100% { box-shadow: 0 0 0 3px rgba(191, 216, 90, 0.18); }
            50%       { box-shadow: 0 0 0 6px rgba(191, 216, 90, 0.07); }
        }
        .flow-lbl {
            font: 600 0.52rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: rgba(20, 19, 22, 0.30);
            white-space: nowrap;
        }
        .flow-step.flow-done   .flow-lbl { color: var(--iris);  opacity: 0.70; }
        .flow-step.flow-active .flow-lbl { color: var(--sage); }
        .flow-line {
            flex: 1;
            height: 1px;
            align-self: flex-start;
            margin-top: 0.23rem;
            background: rgba(20, 19, 22, 0.07);
        }
        .flow-line.flow-done {
            background: linear-gradient(90deg, rgba(143,116,232,.42) 0%, rgba(143,116,232,.18) 100%);
        }

        /* Mini dashboard — card Dados */
        .solution-mini-dash {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: auto;
            padding: 1.1rem;
            border: 1px solid var(--line-light);
            border-radius: 1rem;
            background: rgba(240, 241, 244, 0.62);
            box-shadow: inset 0 1px rgba(255, 255, 255, 0.88);
        }

        .mini-dash-kicker {
            color: var(--ink-muted);
            font: 700 0.55rem/1 "Creato Display", sans-serif;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .mini-dash-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.45rem;
        }

        .mini-metric {
            padding: 0.7rem 0.8rem;
            border: 1px solid var(--line-light);
            border-radius: 0.65rem;
            background: rgba(247, 248, 249, 0.58);
        }

        .mini-metric-label {
            display: block;
            color: var(--ink-muted);
            font: 600 0.58rem/1.2 "Creato Display", sans-serif;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        .mini-metric-value {
            display: block;
            margin-top: 0.28rem;
            color: var(--obsidian);
            font: 700 1.1rem/1 "Oswald", sans-serif;
            letter-spacing: -0.02em;
        }

        .mini-metric-delta {
            font-size: 0.68rem;
            font-family: "Creato Display", sans-serif;
            font-weight: 700;
            color: var(--iris);
            margin-left: 0.2rem;
        }

        .mini-dash-footer {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--ink-muted);
            font: 600 0.62rem/1.2 "Creato Display", sans-serif;
        }

        .mini-dash-dot {
            width: 0.38rem;
            height: 0.38rem;
            border-radius: 50%;
            background: var(--sage);
            box-shadow: 0 0 0 3px rgba(191, 216, 90, 0.2);
            flex-shrink: 0;
        }

        /* CTA intermediário */
        .solutions-cta {
            display: flex;
            justify-content: center;
            margin-top: clamp(3.5rem, 6vw, 5rem);
            position: relative;
        }
        .solutions-cta::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 380px;
            height: 90px;
            background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(143,116,232,.18), transparent 72%);
            filter: blur(10px);
            pointer-events: none;
            z-index: 0;
        }
        /* Wrapper neon giratório — funciona sem @property */
        .btn-neon-wrap {
            position: relative;
            display: inline-flex;
            border-radius: 999px;
            padding: 1.5px;
            overflow: hidden;
        }
        .btn-neon-wrap::before {
            content: "";
            position: absolute;
            top: 50%; left: 50%;
            width: 160%; aspect-ratio: 1;
            transform: translate(-50%, -50%) rotate(0deg);
            background: conic-gradient(
                rgba(173,148,244,0)   0%,
                rgba(173,148,244,0)   60%,
                rgba(173,148,244,.72) 72%,
                rgba(191,216,90,.72)  82%,
                rgba(173,148,244,0)   90%
            );
            animation: btn-neon-spin 4s linear infinite;
            z-index: 0;
            pointer-events: none;
        }
        .btn-neon-wrap .button-primary {
            position: relative;
            z-index: 1;
        }
        .btn-neon-wrap .button-primary::before { display: none; }
        @keyframes btn-neon-spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* ─────────────────────────────────────────────────────────────────────
           SECTION TRANSITIONS — inspiração Linear, paleta Swift Sales
           iris #8f74e8 · lavender #ad94f4 · sage #bfd85a
        ───────────────────────────────────────────────────────────────────── */

        /* 1. Keyframes das linhas de luz viajantes */
        @keyframes glowline-h {
            0%   { opacity: 0; transform: translateX(0); }
            4%   { opacity: 1; }
            78%  { opacity: 1; }
            100% { opacity: 0; transform: translateX(38rem); }
        }
        @keyframes glowline-h-rev {
            0%   { opacity: 0; transform: translateX(0); }
            4%   { opacity: 1; }
            78%  { opacity: 1; }
            100% { opacity: 0; transform: translateX(-38rem); }
        }
        @keyframes glowline-v {
            0%   { opacity: 0; transform: translateY(0); }
            4%   { opacity: 1; }
            78%  { opacity: 1; }
            100% { opacity: 0; transform: translateY(34rem); }
        }


        /* 3. Bottom fade das seções escuras → seções claras que seguem */
        .growth-section::after {
            content: "";
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 140px;
            background: linear-gradient(to bottom, transparent, rgba(248,248,250,.09));
            z-index: 2;
            pointer-events: none;
        }

        /* 4. Top overlay da solutions (dark → light) — suave revelação */
        .solutions-section::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 180px;
            background: linear-gradient(to bottom,
                rgba(17,16,20,.12) 0%,
                rgba(17,16,20,.04) 55%,
                transparent 100%
            );
            z-index: 2;
            pointer-events: none;
        }

        /* 5. Headline gradient em seções escuras (Linear text-gradient adaptado) */
        .growth-title,
        .method-title {
            background: linear-gradient(to right bottom,
                rgba(247,248,249,1) 28%,
                rgba(247,248,249,.55) 100%
            );
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        /* Mantém a cor da span de destaque dentro do título */
        .growth-title span,
        .method-title span {
            background: linear-gradient(to right bottom,
                rgba(173,148,244,1)  20%,
                rgba(143,116,232,.7) 100%
            );
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Solutions section — line grid via ::after */
        .solutions-section::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(20,19,22,.030) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20,19,22,.030) 1px, transparent 1px);
            background-size: 4rem 4rem;
            mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            -webkit-mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            opacity: 0.46;
        }

        /* ─────────────────────────────────────────────────────────────────────
           O QUE MUDA
        ───────────────────────────────────────────────────────────────────── */
        .change-section {
            background:
                radial-gradient(circle at 50% 50%, rgba(173, 148, 244, 0.11), transparent 18rem),
                radial-gradient(circle at 84% 28%, rgba(191, 216, 90, 0.07), transparent 16rem),
                linear-gradient(180deg, var(--surface) 0%, var(--surface-dim) 100%);
            color: var(--obsidian);
            position: relative;
            padding: clamp(6rem, 11vw, 9rem) var(--page-gutter) clamp(3rem, 5vw, 4.5rem);
            overflow: hidden;
        }
        .change-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(20, 19, 22, .030) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20, 19, 22, .030) 1px, transparent 1px);
            background-size: 4rem 4rem;
            mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            -webkit-mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            opacity: 0.46;
        }
        .change-section::after { display: none; }
        .change-shell {
            max-width: 68rem;
            margin: 0 auto;
        }
        .change-kicker {
            font-family: 'Creato Display', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            color: var(--sage);
            margin-bottom: 2.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .change-kicker::before {
            content: "";
            width: 2rem;
            height: 1px;
            background: var(--sage);
            opacity: 0.55;
            flex-shrink: 0;
        }
        .change-headline {
            font-family: 'Creato Display', sans-serif;
            font-size: clamp(2.2rem, 5vw, 4rem);
            font-weight: 500;
            line-height: 1.06;
            letter-spacing: -0.02em;
            color: var(--obsidian);
            margin-bottom: clamp(3rem, 6vw, 4.5rem);
        }
        .change-headline em {
            font-style: normal;
            background: linear-gradient(to right, var(--lavender), var(--iris));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .change-grid {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            border: 1px solid transparent;
            border-radius: 1.8rem;
            overflow: hidden;
            background: rgba(255,255,255,.80);
            background-clip: padding-box;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow:
                0 2px 4px rgba(20,19,22,.04),
                0 10px 32px rgba(20,19,22,.07),
                0 40px 80px rgba(143,116,232,.06),
                inset 0 1px 0 rgba(255,255,255,.95);
        }

        /* Borda gradiente: lavanda → neutro → iris */
        .change-grid::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: calc(1.8rem + 1px);
            background: linear-gradient(
                145deg,
                rgba(173, 148, 244, 0.45) 0%,
                rgba(20,19,22,.09) 40%,
                rgba(20,19,22,.09) 60%,
                rgba(143, 116, 232, 0.32) 100%
            );
            z-index: -1;
            pointer-events: none;
        }

        .change-col {
            position: relative;
            z-index: 1;
            padding: clamp(2.2rem, 4vw, 3.4rem);
        }
        .change-col::before { display: none; }

        /* Menos: wash frio muito sutil */
        .change-col--menos {
            background: rgba(171,168,178,.04);
            border-right: none;
        }

        /* Divisória gradiente iris puro */
        .change-col--menos::before {
            content: "";
            position: absolute;
            right: 0;
            top: 6%;
            height: 88%;
            width: 1px;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(173,148,244,.24) 20%,
                rgba(143,116,232,.38) 50%,
                rgba(173,148,244,.24) 80%,
                transparent 100%
            );
        }

        /* Mais: wash lavanda muito sutil */
        .change-col--mais  {
            background: rgba(173,148,244,.04);
        }
        .change-col--mais::before { display: none; }

        .change-col-head {
            font-family: 'Creato Display', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 0.16em;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .change-col--menos .change-col-head { color: rgba(20,19,22,.42); }
        .change-col--mais  .change-col-head { color: var(--lavender); font-weight: 600; }

        .change-col-icon {
            width: 1.45rem;
            height: 1.45rem;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            line-height: 1;
            flex-shrink: 0;
        }

        /* Ícone ✕ — rosê muted */
        .change-col--menos .change-col-icon {
            background: rgba(214,100,100,.10);
            color: rgba(214,100,100,.65);
            border: 1px solid rgba(214,100,100,.18);
        }

        /* Ícone ✓ — iris/lavanda */
        .change-col--mais  .change-col-icon {
            background: rgba(173,148,244,.22);
            color: var(--iris);
            border: 1px solid rgba(173,148,244,.45);
            box-shadow: 0 0 6px rgba(173,148,244,.18);
        }

        .change-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.35rem; }
        .change-item {
            display: flex;
            align-items: flex-start;
            gap: 0.8rem;
            font-family: 'Instrument Sans', sans-serif;
            font-size: 1.02rem;
            line-height: 1.55;
            padding-left: 0.75rem;
            border-left: 1px solid rgba(20,19,22,.08);
            transition: border-color 0.35s ease, color 0.35s ease;
        }
        .change-col--menos .change-item { color: rgba(20,19,22,.52); }
        .change-col--menos .change-item:hover {
            border-left-color: rgba(214,100,100,.30);
            color: rgba(20,19,22,.72);
        }
        .change-col--mais  .change-item { color: rgba(20,19,22,.84); }
        .change-col--mais  .change-item:hover {
            border-left-color: var(--lavender);
            color: var(--obsidian);
        }

        .change-item-dot {
            width: 1.15rem;
            height: 1.15rem;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 0.22rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.52rem;
        }

        /* Dot ✕ — rosê muted */
        .change-col--menos .change-item-dot {
            background: rgba(214,100,100,.09);
            border: 1px solid rgba(214,100,100,.20);
            color: rgba(214,100,100,.60);
        }

        /* Dot ✓ — iris/lavanda presente e visível */
        .change-col--mais  .change-item-dot {
            background: linear-gradient(180deg, rgba(173,148,244,.40), rgba(143,116,232,.20));
            border: 1px solid rgba(173,148,244,.58);
            color: var(--iris);
            box-shadow: 0 0 5px rgba(173,148,244,.22);
        }
        .change-footer {
            margin-top: clamp(2.5rem, 5vw, 3.75rem);
            padding-top: 2.25rem;
            border-top: 1px solid rgba(20,19,22,.08);
            font-family: 'Creato Display', sans-serif;
            font-size: clamp(1.1rem, 2.4vw, 1.4rem);
            line-height: 1.5;
            color: rgba(20,19,22,.55);
        }
        .change-footer em { font-style: normal; color: var(--iris); }

        /* ── CHANGE LAYOUT NOVO — cards individuais ──────────────────────── */
        .change-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(2rem, 4vw, 3.5rem);
            align-items: start;
            margin-top: clamp(2.5rem, 4vw, 3.5rem);
        }
        .change-antes { padding-top: 0.5rem; }
        .change-antes-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: 'Creato Display', sans-serif;
            font-size: 0.64rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(214,100,100,.70);
            font-weight: 600;
            margin-bottom: 1.6rem;
        }
        .change-antes-icon {
            width: 1.22rem; height: 1.22rem;
            border-radius: 50%;
            background: rgba(214,100,100,.10);
            border: 1px solid rgba(214,100,100,.22);
            color: rgba(214,100,100,.65);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.50rem; flex-shrink: 0;
        }
        .change-antes-list { display: none; }
        .change-antes-item { display: none; }
        /* Cards "Antes" — estilo muted/ghost, consistente com lado direito */
        .change-antes-cards { display: flex; flex-direction: column; gap: 0.6rem; }
        .change-antes-card {
            display: flex; align-items: flex-start; gap: 0.8rem;
            padding: 1.1rem 1.35rem;
            border-radius: 0.85rem;
            background: rgba(255,245,245,.92);
            border: 1px solid rgba(214,100,100,.14);
            border-left: 3px solid rgba(214,100,100,.28);
            box-shadow: 0 1px 6px rgba(214,100,100,.05), 0 3px 14px rgba(20,19,22,.04);
            transition: border-color 0.22s ease, box-shadow 0.22s ease;
            position: relative; overflow: hidden;
        }
        .change-antes-card::before {
            content: "";
            position: absolute; inset: 0; z-index: 0;
            background: radial-gradient(320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(214,100,100,.16), transparent 48%);
            opacity: 0; transition: opacity 0.45s; pointer-events: none;
        }
        .change-antes-card .flashlight-border {
            background: radial-gradient(280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(214,100,100,.55), transparent 44%);
        }
        .change-antes-card:hover::before,
        .change-antes-card:hover .flashlight-border { opacity: 1; }
        .change-antes-card:hover {
            border-color: rgba(214,100,100,.35);
            border-left-color: rgba(214,100,100,.55);
            box-shadow: 0 3px 12px rgba(214,100,100,.10), 0 6px 22px rgba(20,19,22,.05);
        }
        .change-antes-card-check {
            width: 1.4rem; height: 1.4rem; min-width: 1.4rem; border-radius: 50%;
            background: rgba(214,100,100,.12);
            border: 1px solid rgba(214,100,100,.28);
            color: rgba(214,100,100,.70);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.52rem; flex-shrink: 0; margin-top: 0.14rem;
        }
        .change-antes-card-text {
            font-family: 'Instrument Sans', sans-serif;
            font-size: 1.04rem; line-height: 1.52;
            color: rgba(20,19,22,.68);
            text-decoration: line-through;
            text-decoration-color: rgba(214,100,100,.40);
            text-decoration-thickness: 1.5px;
        }
        .change-cards-label {
            display: flex; align-items: center; gap: 0.5rem;
            font-family: 'Creato Display', sans-serif;
            font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
            color: var(--lavender); font-weight: 600;
            margin-bottom: 1.1rem;
        }
        .change-cards-icon {
            width: 1.22rem; height: 1.22rem; border-radius: 50%;
            background: rgba(173,148,244,.22); border: 1px solid rgba(173,148,244,.40);
            color: var(--iris); display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.50rem; box-shadow: 0 0 6px rgba(173,148,244,.20); flex-shrink: 0;
        }
        .change-cards-grid { display: flex; flex-direction: column; gap: 0.6rem; }

        /* Cards individuais — lavender accent + flashlight */
        .change-card {
            display: flex; align-items: flex-start; gap: 0.85rem;
            padding: 1.1rem 1.35rem;
            border-radius: 0.85rem;
            background: rgba(247,245,255,.92);
            border: 1px solid rgba(173,148,244,.18);
            border-left: 3px solid rgba(173,148,244,.38);
            box-shadow: 0 1px 6px rgba(173,148,244,.06), 0 3px 14px rgba(20,19,22,.04);
            transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
            position: relative; overflow: hidden;
        }
        .change-card::before {
            content: "";
            position: absolute; inset: 0; z-index: 0;
            background: radial-gradient(320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(173,148,244,.20), transparent 48%);
            opacity: 0; transition: opacity 0.45s; pointer-events: none;
        }
        .change-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 18px rgba(173,148,244,.16), 0 8px 28px rgba(20,19,22,.06);
            border-color: rgba(173,148,244,.40);
            border-left-color: rgba(173,148,244,.65);
        }
        .change-card:hover::before,
        .change-card:hover .flashlight-border { opacity: 1; }
        .change-card-check {
            width: 1.4rem; height: 1.4rem; min-width: 1.4rem; border-radius: 50%;
            background: rgba(173,148,244,.18);
            border: 1px solid rgba(173,148,244,.38);
            color: var(--iris);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.52rem;
            flex-shrink: 0; margin-top: 0.14rem;
        }
        .change-card-text {
            font-family: 'Instrument Sans', sans-serif;
            font-size: 1.04rem; line-height: 1.52; color: rgba(20,19,22,.82);
        }
        /* arc removido — elemento no HTML pode ser display:none */
        .change-arc { display: none; }

        /* ─────────────────────────────────────────────────────────────────────
           COMO TRABALHAMOS
        ───────────────────────────────────────────────────────────────────── */
        .process-section {
            background:
                radial-gradient(circle at 20% 50%, rgba(173, 148, 244, 0.09), transparent 20rem),
                radial-gradient(circle at 80% 30%, rgba(191, 216, 90, 0.06), transparent 16rem),
                linear-gradient(180deg, var(--surface-dim) 0%, var(--surface) 100%);
            color: var(--obsidian);
            position: relative;
            padding: clamp(3rem, 5vw, 4.5rem) var(--page-gutter) clamp(6rem, 11vw, 9rem);
            overflow: hidden;
        }
        .process-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(20, 19, 22, .030) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20, 19, 22, .030) 1px, transparent 1px);
            background-size: 4rem 4rem;
            mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            -webkit-mask-image: radial-gradient(ellipse 90% 64% at 50% 52%,
                black 14%, rgba(0,0,0,0.22) 48%, transparent 76%);
            opacity: 0.46;
        }
        .process-shell { max-width: 68rem; margin: 0 auto; }
        .process-kicker {
            font-family: 'Creato Display', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            color: var(--lavender);
            margin-bottom: 2.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .process-kicker::before {
            content: "";
            width: 2rem;
            height: 1px;
            background: var(--lavender);
            opacity: 0.55;
            flex-shrink: 0;
        }
        .process-headline {
            font-family: 'Creato Display', sans-serif;
            font-size: clamp(2.2rem, 5vw, 4rem);
            font-weight: 500;
            line-height: 1.06;
            letter-spacing: -0.02em;
            color: var(--obsidian);
            margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
        }
        .process-headline em {
            font-style: normal;
            background: linear-gradient(to right, var(--lavender), var(--iris));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .process-steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            position: relative;
        }
        .process-steps::before {
            content: "";
            position: absolute;
            top: 1.375rem;
            left: 1.375rem;
            right: 1.375rem;
            height: 1px;
            background: linear-gradient(90deg, rgba(143,116,232,.32) 0%, rgba(173,148,244,.18) 50%, rgba(143,116,232,.10) 100%);
            z-index: 0;
        }
        .process-step {
            position: relative;
            z-index: 1;
            padding: 1.35rem 1.35rem 1.75rem;
            overflow: hidden;
            border-radius: 0.85rem;
            border: 1px solid rgba(143,116,232,.09);
            background: rgba(255,255,255,.55);
            transition: border-color 0.28s ease, box-shadow 0.28s ease;
        }
        .process-step::before {
            content: "";
            position: absolute; inset: 0; z-index: 0;
            background: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(143,116,232,.08), transparent 48%);
            opacity: 0; transition: opacity 0.45s; pointer-events: none;
        }
        .process-step:hover {
            border-color: rgba(143,116,232,.28);
            box-shadow: 0 4px 20px rgba(143,116,232,.10);
        }
        .process-step:hover::before,
        .process-step:hover .flashlight-border { opacity: 1; }
        .process-num {
            margin-bottom: 2rem;
        }
        .process-num-circle {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 50%;
            background: rgba(255,255,255,.75);
            border: 1px solid rgba(143,116,232,.28);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Oswald', sans-serif;
            font-size: 0.88rem;
            font-weight: 400;
            letter-spacing: 0.06em;
            color: var(--lavender);
        }
        .process-step-name {
            font-family: 'Creato Display', sans-serif;
            font-size: 1.28rem;
            font-weight: 700;
            color: var(--obsidian);
            margin-bottom: 0.85rem;
            line-height: 1.2;
        }
        .process-step-body {
            font-family: 'Instrument Sans', sans-serif;
            font-size: 0.96rem;
            line-height: 1.65;
            color: rgba(20,19,22,.52);
        }

        /* ─────────────────────────────────────────────────────────────────────
           MANIFESTO
        ───────────────────────────────────────────────────────────────────── */
        /* ── LIGHT UNIFIED ZONE: pressure-section + bridge-section ── */
        .light-unified-zone {
            position: relative;
            margin-top: -3rem;
            background: var(--surface);
            display: flow-root;
        }

        /* ── ICE UNIFIED ZONE: O que muda + Como trabalhamos ── */
        .ice-unified-zone {
            background: var(--surface);
            display: flow-root;
        }
        /* Glow em arco: concentrado no centro-baixo, some nos cantos */
        .ice-unified-zone .change-section {
            background:
                radial-gradient(ellipse 40% 48% at 50% 92%, rgba(173, 148, 244, 0.14), transparent 100%),
                transparent;
        }

        .ice-unified-zone .process-section {
            background:
                radial-gradient(circle at 50% 50%, rgba(173, 148, 244, 0.09), transparent 20rem),
                radial-gradient(circle at 84% 28%, rgba(191, 216, 90, 0.06), transparent 16rem),
                transparent;
        }

        /* ── DARK END ZONE ── */
        .dark-end-zone {
            background: var(--obsidian);
            display: flow-root;
        }

        .manifesto-section {
            background: transparent;
            position: relative;
            padding: clamp(7rem, 13vw, 11rem) var(--page-gutter);
            overflow: hidden;
        }
        .manifesto-section::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(173,148,244,.10) 15%, rgba(143,116,232,.18) 40%, rgba(143,116,232,.22) 50%, rgba(143,116,232,.18) 60%, rgba(173,148,244,.10) 85%, transparent);
        }
        .manifesto-shell {
            max-width: 54rem;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .manifesto-eyebrow {
            font-family: 'Creato Display', sans-serif;
            font-size: 0.7rem;
            letter-spacing: 0.18em;
            color: rgba(173,148,244,.45);
            margin-bottom: 3rem;
        }
        /* Stage: janela de altura fixa onde um item de cada vez aparece */
        .manifesto-stage {
            position: relative;
            height: clamp(12rem, 20vw, 15rem);
            margin-bottom: 3rem;
        }
        .manifesto-list {
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
            height: 100%;
        }
        .manifesto-item {
            position: absolute;
            inset: 0;
            display: block;
            font-family: 'Creato Display', sans-serif;
            max-width: 56rem;
            margin: 0 auto;
            font-size: clamp(1.7rem, 3.8vw, 2.45rem);
            font-weight: 400;
            line-height: 1.46;
            letter-spacing: -0.01em;
            color: rgba(247,248,249,.90);
            text-align: center;
            padding: 0 clamp(1.5rem, 5vw, 4rem);
            opacity: 0;
            will-change: transform, opacity, filter;
        }
        .manifesto-lead {
            display: inline;
        }
        .manifesto-item em {
            display: inline;
            font-style: normal;
            color: var(--lavender);
        }
        .manifesto-closing {
            font-family: 'Creato Display', sans-serif;
            font-size: clamp(1.75rem, 3.8vw, 2.8rem);
            font-weight: 700;
            color: var(--ice);
            line-height: 1.35;
            text-wrap: balance;
            opacity: 0;
        }
        .manifesto-closing em {
            font-style: normal;
            background: linear-gradient(to right, var(--lavender), var(--iris));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* ─────────────────────────────────────────────────────────────────────
           CTA FINAL
        ───────────────────────────────────────────────────────────────────── */
        .cta-section {
            background:
                radial-gradient(ellipse 70% 65% at 50% 50%, rgba(143, 116, 232, 0.11) 0%, transparent 58%);
            position: relative;
            padding: clamp(8rem, 14vw, 12rem) var(--page-gutter);
            overflow: hidden;
        }
        .cta-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(247,248,249,.022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(247,248,249,.022) 1px, transparent 1px);
            background-size: 4.6rem 4.6rem;
            mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, black 10%, rgba(0,0,0,.18) 55%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, black 10%, rgba(0,0,0,.18) 55%, transparent 100%);
        }
        .cta-shell {
            max-width: 52rem;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        /* eyebrow tag */
        .cta-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-family: 'Instrument Sans', sans-serif;
            font-size: 0.78rem;
            font-weight: 500;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: var(--lavender);
            border: 1px solid rgba(173,148,244,.22);
            background: rgba(143,116,232,.08);
            backdrop-filter: blur(6px);
            border-radius: 2rem;
            padding: 0.4rem 1.1rem;
            margin-bottom: 1.8rem;
        }
        .cta-eyebrow::before {
            content: "";
            display: block;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--sage);
            box-shadow: 0 0 6px var(--sage);
            animation: blink-dot 2s ease-in-out infinite;
        }
        @keyframes blink-dot {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        .cta-headline {
            font-family: 'Creato Display', sans-serif;
            font-size: clamp(2rem, 4vw, 3.2rem);
            font-weight: 700;
            line-height: 1.1;
            color: var(--ice);
            margin-bottom: 2rem;
            letter-spacing: -0.025em;
            text-wrap: balance;
        }
        .cta-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            justify-content: center;
            margin-bottom: 2.2rem;
        }
        .cta-pill {
            font-family: 'Instrument Sans', sans-serif;
            font-size: 0.78rem;
            letter-spacing: 0.02em;
            color: rgba(247,248,249,.58);
            border: 1px solid rgba(173,148,244,.18);
            background: rgba(143,116,232,.07);
            backdrop-filter: blur(4px);
            border-radius: 2rem;
            padding: 0.36rem 1rem;
            transition: border-color 0.25s, color 0.25s;
        }
        .cta-pill:hover {
            border-color: rgba(173,148,244,.40);
            color: rgba(247,248,249,.85);
        }
        .cta-desc {
            font-family: 'Instrument Sans', sans-serif;
            font-size: 1.1rem;
            line-height: 1.7;
            color: rgba(247,248,249,.48);
            max-width: 34rem;
            margin: 0 auto 3rem;
        }

        /* ─────────────────────────────────────────────────────────────────────
           FOOTER
        ───────────────────────────────────────────────────────────────────── */
        .site-footer {
            background: rgba(239, 239, 243, 0.96);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            position: relative;
            padding: 4.5rem var(--page-gutter) 2.75rem;
            box-shadow: 0 -1px 0 rgba(20, 19, 22, 0.06);
        }
        .footer-shell { max-width: 72rem; margin: 0 auto; }
        .footer-top {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.7fr) minmax(15rem, 0.9fr);
            gap: clamp(1.5rem, 3vw, 3rem);
            margin-bottom: 2.5rem;
            padding: 0 0 2.4rem;
            border-bottom: 1px solid rgba(20, 19, 22, 0.07);
            align-items: start;
        }
        .footer-brand {
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }
        .footer-brand img {
            width: clamp(12rem, 20vw, 15.5rem);
            height: auto;
            display: block;
        }
        .footer-brand-block {
            display: grid;
            gap: 1rem;
            max-width: 26rem;
        }
        .footer-brand-text {
            margin: 0;
            font-family: 'Instrument Sans', sans-serif;
            font-size: 0.95rem;
            line-height: 1.65;
            color: rgba(20, 19, 22, 0.58);
        }
        .footer-label {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 0.95rem;
            font: 700 0.68rem/1 'Creato Display', sans-serif;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(20, 19, 22, 0.4);
        }
        .footer-label::before {
            content: "";
            width: 1.6rem;
            height: 1px;
            background: rgba(143, 116, 232, 0.45);
        }
        .footer-nav-block,
        .footer-contact-block {
            min-width: 0;
        }
        .footer-nav {
            display: grid;
            gap: 0.8rem;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .footer-nav a {
            font-family: 'Instrument Sans', sans-serif;
            font-size: 0.92rem;
            color: rgba(20, 19, 22, 0.58);
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer-nav a:hover { color: var(--obsidian); }
        .footer-contact-card {
            display: grid;
            gap: 0.85rem;
            padding: 1.15rem 1.2rem;
            border-radius: 1.15rem;
            background: rgba(255, 255, 255, 0.54);
            border: 1px solid rgba(20, 19, 22, 0.06);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
        }
        .footer-contact-item {
            display: grid;
            gap: 0.15rem;
        }
        .footer-contact-kicker {
            font: 700 0.64rem/1.2 'Creato Display', sans-serif;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(20, 19, 22, 0.38);
        }
        .footer-contact-link,
        .footer-contact-text {
            font-family: 'Instrument Sans', sans-serif;
            font-size: 0.94rem;
            line-height: 1.45;
            color: rgba(20, 19, 22, 0.72);
            text-decoration: none;
        }
        .footer-contact-link:hover {
            color: var(--iris);
        }
        .footer-bottom {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 1.25rem 2rem;
            align-items: end;
        }
        .footer-meta {
            display: grid;
            gap: 0.45rem;
        }
        .footer-copy,
        .footer-legal {
            font-family: 'Instrument Sans', sans-serif;
            font-size: 0.8rem;
            line-height: 1.55;
            color: rgba(20, 19, 22, 0.4);
        }
        .footer-tagline {
            font-family: 'Creato Display', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(143, 116, 232, 0.58);
            justify-self: end;
            align-self: center;
        }

        /* ─── PROCESS — animated track (replaces ::before) ─────────────── */
        .process-steps::before { display: none; }
        .process-track {
            position: absolute;
            top: 1.375rem;
            left: 1.375rem;
            right: 1.375rem;
            height: 1px;
            background: rgba(143,116,232,.28);
            z-index: 0;
            overflow: hidden;
        }
        .process-track-fill {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(143,116,232,.52) 0%, rgba(173,148,244,.28) 55%, transparent 100%);
            transform-origin: left center;
            transform: scaleX(0);
            will-change: transform;
        }



        /* ─── PROPÓSITO — background decorative word ───────────────────── */
        .manifesto-section::after {
            content: "Propósito";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -52%);
            font-family: "iBrand", sans-serif;
            font-size: clamp(7rem, 17vw, 19rem);
            font-weight: 400;
            color: rgba(247,248,249,.018);
            -webkit-text-stroke: 0;
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
            z-index: 0;
            letter-spacing: -0.02em;
            line-height: 1;
        }
        .manifesto-shell {
            position: relative;
            z-index: 1;
        }

        /* ─── CTA — headline accent ─────────────────────────────────────── */
        .cta-headline em {
            font-style: normal;
            color: var(--lavender);
        }

        /* ── Notebook largo: esconde ícones externos antes de estourar as bordas ── */
        @media (max-width: 1380px) {
            .tool-depth-4 { display: none !important; }
            .integration-graph { gap: clamp(6px, 1vw, 12px) !important; }
        }

        @media (max-width: 1100px) {
            .hero-track {
                min-height: auto;
            }

            .hero {
                min-height: auto;
                padding-top: 8.15rem;
                padding-bottom: 7rem;
            }

            .hero-shell {
                align-items: flex-start;
            }

            .hero-title {
                max-width: 11ch;
                font-size: clamp(3.6rem, 8vw, 5.4rem);
            }

            .hero-description {
                max-width: 46rem;
            }

            .section-index,
            .scroll-control {
                display: none;
            }

            .metrics-motion {
                width: min(100%, 48rem);
                min-height: 34rem;
                margin-inline: auto;
            }

            .solutions-grid {
                grid-template-columns: 1fr;
            }

            .growth-section {
                min-height: auto;
            }

            .growth-layout {
                grid-template-columns: 1fr;
                gap: 5rem;
            }

            .growth-heading {
                position: relative;
                top: auto;
            }

            .growth-title {
                max-width: 14ch;
            }

            .light-unified-zone {
                margin-top: -1.5rem;
            }

            .pressure-section {
                padding-top: 7.5rem;
            }

            .pressure-grid-layout {
                grid-template-columns: 1fr;
                gap: 4rem;
            }

            .pressure-stagger-2,
            .pressure-stagger-3 {
                margin-left: 0 !important;
            }

            .pressure-card {
                padding: 1.45rem 1.4rem 1.5rem;
            }

            .bridge-shell {
                grid-template-columns: 1fr;
            }

            .method-card {
                grid-template-columns: 1fr;
            }

            .method-panel {
                grid-template-columns: 1fr;
            }

            .method-title {
                font-size: clamp(2.2rem, 8.5vw, 3.4rem);
            }

            .process-steps {
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
            }
            .process-steps::before { display: none; }

            .footer-top {
                grid-template-columns: 1fr 1fr;
            }
            .footer-brand-block {
                grid-column: 1 / -1;
                max-width: 34rem;
            }

            /* ── Integration: esconde depth-3 e depth-4 em telas médias ── */
            .tool-depth-3,
            .tool-depth-4 { display: none !important; }
            .integration-graph { gap: 8px; }

            /* ── change-layout: mantém 2 colunas mas com gap menor ── */
            .change-layout { gap: 2rem; }

        }

        @media (max-width: 720px) {
            :root {
                --page-gutter: 1.15rem;
            }

            .nav-inner {
                grid-template-columns: 1fr auto;
            }

            .nav-links {
                display: none;
            }

            .nav-cta {
                min-height: 2.55rem;
                padding-inline: 0.9rem;
                font-size: 0.57rem;
            }

            .hero {
                padding-top: 7.5rem;
                padding-bottom: 4rem;
            }

            .hero-shell {
                align-items: flex-start;
            }

            .hero-copy {
                width: 100%;
                padding-top: 0;
                text-align: left;
            }

            .eyebrow {
                justify-content: flex-start;
            }

            .hero-title {
                max-width: 100%;
                font-size: clamp(2.8rem, 11.8vw, 4rem);
            }

            .hero-description {
                width: 100%;
                overflow-wrap: anywhere;
                font-size: 0.96rem;
            }

            .hero-description .secondary-copy {
                display: none;
            }

            .hero-actions {
                width: 100%;
                gap: 0.7rem;
            }

            .button {
                width: 100%;
            }

            .trust-line {
                width: 100%;
                justify-content: flex-start;
                gap: 0.8rem 1.25rem;
            }

            .scene-plane {
                right: -22%;
                opacity: 0.32;
            }

            .plane-two,
            .plane-three {
                display: none;
            }

            .metrics-motion {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
                min-height: 0;
                animation: none;
            }

            .command-center {
                position: relative;
                inset: auto;
                grid-column: 1 / -1;
                width: auto;
                min-height: 0;
                padding: 1rem;
                transform: none;
            }

            .command-grid {
                grid-template-columns: 1fr;
            }

            .metric-panel {
                position: relative;
                inset: auto;
                width: auto;
                min-height: 9rem;
                padding: 1rem;
                transform: none;
            }

            .metric-primary {
                min-height: 11rem;
            }

            .metric-opportunities,
            .metric-tasks,
            .metric-attendance {
                position: relative;
                inset: auto;
                width: auto;
                min-height: 9rem;
                transform: none;
                animation: none;
            }

            .metric-tasks {
                min-height: 13rem;
            }

            .trend-chart {
                height: 7rem;
            }

            .metric-value {
                font-size: clamp(2.3rem, 11vw, 3.2rem);
            }

            .metric-label {
                font-size: 0.54rem;
            }

            .solutions-grid {
                gap: 0.85rem;
            }

            .mini-dash-grid {
                grid-template-columns: 1fr 1fr;
            }

            .growth-section {
                padding-block: 7rem;
            }

            .growth-layout {
                gap: 4rem;
            }

            .growth-title {
                font-size: clamp(2.3rem, 10.5vw, 3.6rem);
            }

            .growth-note,
            .story-list {
                max-width: 100%;
            }

            .story-flow {
                padding-left: 1.7rem;
            }

            .story-block::before {
                left: -1.98rem;
            }

            .story-copy {
                font-size: clamp(1.45rem, 6.8vw, 2rem);
            }

            .light-unified-zone {
                margin-top: -1rem;
            }

            .pressure-section {
                padding-top: 6.5rem;
                padding-bottom: 5.5rem;
            }

            .pressure-title {
                font-size: clamp(2rem, 10vw, 3.1rem);
            }

            .pressure-grid-layout {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .pressure-stagger-2,
            .pressure-stagger-3 {
                margin-left: 0 !important;
            }

            .pressure-card {
                padding: 1.2rem 1.05rem 1.2rem;
            }

            .pressure-mark {
                width: 2.5rem;
                height: 2.5rem;
            }

            .pressure-overview-title,
            .pressure-side-title {
                font-size: clamp(1.5rem, 7.2vw, 1.95rem);
            }

            .pressure-overview-copy,
            .pressure-side-copy,
            .pressure-card-copy,
            .pressure-summary-note,
            .pressure-impact-text {
                font-size: 0.92rem;
            }

            .pressure-summary-copy {
                font-size: clamp(1.4rem, 7vw, 1.85rem);
            }

            .bridge-aside {
                justify-self: start;
                max-width: 100%;
                padding-left: 1rem;
            }

            .bridge-shell {
                gap: 2rem;
            }

            .bridge-note,
            .bridge-aside p {
                font-size: 0.95rem;
            }

            .method-card {
                min-height: 0;
                padding: 1.35rem 1rem 2rem;
                border-radius: 1.25rem 1.25rem 0 0;
            }

            .method-card::after {
                height: 4rem;
            }

            .method-tabs {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 0.35rem;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .method-tabs::-webkit-scrollbar { display: none; }

            .method-tabs {
                gap: 0.35rem;
            }

            .method-tab {
                flex: 0 0 auto;
                white-space: nowrap;
                font-size: 0.8rem;
                padding: 0.52rem 0.9rem 0.52rem 0.72rem;
            }

            .method-panel {
                grid-template-columns: 1fr;
                gap: 1.8rem;
            }

            .method-panel-left {
                padding-bottom: 0;
            }

            .method-panel-title {
                font-size: 1.22rem;
            }

            .method-panel-desc,
            .method-panel-list li {
                font-size: 0.9rem;
            }

            .method-panel-visual {
                min-height: 12rem;
                padding: 1rem;
            }

            .change-grid {
                grid-template-columns: 1fr;
            }
            .change-col--menos {
                border-right: none;
                border-bottom: 1px solid rgba(173,148,244,.10);
            }
            .change-layout {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            .change-antes { order: 2; }
            .change-depois { order: 1; }

            .change-headline,
            .process-headline,
            .solutions-title,
            .cta-headline {
                text-wrap: balance;
            }

            .solutions-heading {
                gap: 1rem;
            }

            .solution-card {
                padding: 1.15rem 1rem 1.05rem;
            }

            .solution-body {
                font-size: 0.92rem;
            }

            .solution-tags {
                gap: 0.45rem;
            }

            .mini-dash-grid,
            .flow-track {
                max-width: 100%;
            }

            .process-steps {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }

            .process-headline,
            .change-headline,
            .solutions-title {
                font-size: clamp(2rem, 9vw, 3rem);
            }

            .manifesto-section {
                padding-block: 5.5rem;
            }

            .manifesto-shell {
                max-width: 100%;
            }

            .manifesto-stage {
                height: clamp(13rem, 58vw, 17rem);
                margin-bottom: 2rem;
            }

            .manifesto-list {
                display: block;
                gap: 0;
                height: 100%;
                position: relative;
            }

            .manifesto-item {
                position: absolute;
                inset: 0;
                padding: 0 0.35rem;
                font-size: clamp(1.35rem, 6.6vw, 1.9rem);
                line-height: 1.38;
            }

            .manifesto-closing {
                font-size: clamp(1.45rem, 7vw, 2rem);
            }

            .cta-section {
                padding-block: 6rem;
            }

            .cta-shell {
                max-width: 100%;
            }

            .cta-desc {
                font-size: 0.98rem;
                margin-bottom: 2.2rem;
            }

            .footer-top {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            .footer-bottom {
                grid-template-columns: 1fr;
                align-items: start;
                gap: 0.85rem;
            }
            .footer-brand img {
                width: clamp(10.5rem, 48vw, 13rem);
            }
            .footer-contact-card {
                padding: 1rem;
            }

            .cta-pills {
                gap: 0.5rem;
            }

            /* ── Integration graph: 3 linhas no mobile ──
               Linha 1: ícones esquerdos (AI / infra)
               Linha 2: hub centralizado (focal point)
               Linha 3: ícones direitos (automação / CRM)   ── */
            .tools-band {
                padding-top: clamp(60px, 14vw, 100px);
                overflow: hidden;
            }
            .integration-graph {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                width: 100%;
                max-width: 100%;
                padding: 0 1.5rem;
                gap: 8px !important;
                transform: none;
            }
            /* Esconde depth-3 e depth-4 — ficam 4 ícones por lado */
            .tool-depth-3,
            .tool-depth-4 { display: none !important; }
            .tool-depth-1 { width: 44px !important; height: 44px !important; top: 0; }
            .tool-depth-2 { width: 40px !important; height: 40px !important; top: 0; }
            /* Hub ocupa linha própria e fica maior como ponto focal */
            .hub-container {
                flex: 0 0 100% !important;
                width: 100% !important;
                height: 76px !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                margin: 4px 0 !important;
            }
            .center-hub {
                width: 60px !important;
                height: 60px !important;
            }
            .concentric-ring { display: none; }

            /* ── btn-neon-wrap full-width no mobile ── */
            .btn-neon-wrap {
                width: 100%;
            }
            .btn-neon-wrap .button-primary {
                width: 100%;
            }

            /* ── Cards change-section: padding reduzido ── */
            .change-card,
            .change-antes-card {
                padding: 0.9rem 1.1rem;
            }
            .change-card-text,
            .change-antes-card-text {
                font-size: 0.93rem;
            }

            /* ── Integrations copy ── */
            .integrations-headline {
                font-size: clamp(1.6rem, 7.5vw, 2.2rem);
            }
            .integrations-text {
                font-size: 0.9rem;
                line-height: 1.6;
            }

            /* ── Footer typography ── */
            .footer-contact-link,
            .footer-contact-text,
            .footer-brand-text {
                font-size: 0.88rem;
            }
            .footer-tagline { justify-self: start; }

        }

        /* ── Extra small (< 400px) ── */
        @media (max-width: 400px) {
            .hero-title {
                font-size: clamp(2.4rem, 13vw, 3rem);
            }
            .hero-description {
                font-size: 0.9rem;
            }
            .change-layout {
                gap: 1.5rem;
            }
            .change-card,
            .change-antes-card {
                padding: 0.8rem 1rem;
                gap: 0.65rem;
            }
            .change-card-check,
            .change-antes-card-check {
                width: 1.2rem; height: 1.2rem; min-width: 1.2rem;
                font-size: 0.44rem;
            }
            .nav-cta {
                padding-inline: 0.75rem;
                font-size: 0.54rem;
            }
            .method-tab {
                font-size: 0.74rem;
                padding-inline: 0.78rem;
            }
            .integration-graph {
                gap: 6px !important;
                padding: 0 1rem !important;
            }
            .tool-depth-1 { width: 38px !important; height: 38px !important; }
            .tool-depth-2 { width: 34px !important; height: 34px !important; }
            .hub-container {
                height: 64px !important;
            }
            .center-hub {
                width: 52px !important;
                height: 52px !important;
            }
            .integrations-text,
            .footer-contact-link,
            .footer-contact-text,
            .footer-brand-text,
            .cta-desc {
                font-size: 0.84rem;
            }
            .manifesto-item {
                font-size: 1.22rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
            }

            .site-nav,
            .hero-actions,
            .trust-line {
                opacity: 1;
                transform: none;
            }

            .title-line > span {
                transform: none;
            }
        }