@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

        html { scroll-padding-top: 72px; }

        :root {
            color-scheme: dark;
            --bg: #101820;
            --fg: #fbfbfb;
            --muted: #c7c2b8;
            --muted-2: #716e6a;
            --accent: #fa4616;
            --accent-2: #ef4202;
            --accent-3: #c10801;
            --warm: #e2ddd4;
            --line: rgba(226, 221, 212, 0.18);
            --card: rgba(16, 24, 32, 0.78);
            --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
        }

        * { box-sizing: border-box; }

        html, body { overflow-x: hidden; }

        body {
            margin: 0;
            background: #0f1620;
            color: var(--fg);
            font-family: "Golos Text", system-ui, sans-serif;
            letter-spacing: -0.01em;
            overflow-x: hidden;
        }

        img, svg { max-width: 100%; height: auto; }

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

        .wrap { --wrap-pad: 24px; max-width: 1180px; margin: 0 auto; padding: 0 var(--wrap-pad); }

        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            background: transparent;
            border-bottom: 1px solid transparent;
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        header.is-scrolled {
            background-color: rgba(6, 12, 20, 0.92);
            border-bottom: 1px solid rgba(226, 221, 212, 0.08);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .nav {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 18px 0;
        }

        .brand-logo { height: 28px; width: auto; display: block; }

        .nav-links {
            display: flex;
            gap: 18px;
            font-size: 14px;
            color: var(--muted);
            font-family: "Roboto", system-ui, sans-serif;
        }

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

        .cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 22px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #101820;
            font-weight: 600;
            font-family: "Roboto", system-ui, sans-serif;
            box-shadow: var(--shadow);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .ghost {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--fg);
            font-family: "Roboto", system-ui, sans-serif;
        }

        /* ---- MOBILE NAV TOGGLE ---- */
        .nav-toggle {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            margin-left: auto;
            flex-shrink: 0;
        }

        .nav-toggle span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--fg);
            border-radius: 2px;
            transition: transform 0.25s ease, opacity 0.2s ease;
        }

        .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* ---- MOBILE NAV DRAWER ---- */
        .nav-drawer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
            background: rgba(12, 18, 28, 0.97);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--line);
            padding: 72px 24px 28px;
            transform: translateY(-110%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        .nav-drawer.is-open {
            transform: translateY(0);
            pointer-events: auto;
        }

        .nav-drawer-links {
            display: flex;
            flex-direction: column;
        }

        .nav-drawer-links a {
            padding: 16px 0;
            font-size: 1.05rem;
            color: var(--warm);
            border-bottom: 1px solid var(--line);
            font-family: "Roboto", system-ui, sans-serif;
            transition: color 0.2s;
        }

        .nav-drawer-links a:last-child { border-bottom: none; }
        .nav-drawer-links a:hover { color: var(--fg); }

        .nav-drawer-cta {
            margin-top: 20px;
            display: flex;
        }

        .nav-drawer-cta .cta {
            width: 100%;
            justify-content: center;
        }

        /* =========================================================
           HERO — Statement Dark
           ========================================================= */

        .hero {
            position: relative;
            min-height: 100vh;
            min-height: 100svh;
            overflow: hidden;
            display: flex;
            align-items: center;
            background: #060c14;
        }

        /* Warm ambient glow — very subtle, brand tint */
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 65% 55% at 78% 50%, rgba(250, 70, 22, 0.08) 0%, transparent 62%),
                radial-gradient(ellipse 40% 50% at 10% 88%, rgba(250, 70, 22, 0.04) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }

        /* ---- Background geometry ---- */
        .hero-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        /* Concentric rings — anchored right-center */
        .hero-ring {
            position: absolute;
            top: 50%;
            border-radius: 50%;
            transform: translate(50%, -50%);
        }

        .hero-ring--1 {
            right: 8vw;
            width: clamp(280px, 48vh, 540px);
            height: clamp(280px, 48vh, 540px);
            border: 1px solid rgba(250, 70, 22, 0.16);
            animation: ringBreath 14s ease-in-out infinite;
        }

        .hero-ring--2 {
            right: 8vw;
            width: clamp(200px, 34vh, 390px);
            height: clamp(200px, 34vh, 390px);
            border: 1px solid rgba(250, 70, 22, 0.09);
            animation: ringBreath 14s ease-in-out infinite 1.8s;
        }

        .hero-ring--3 {
            right: 8vw;
            width: clamp(120px, 20vh, 240px);
            height: clamp(120px, 20vh, 240px);
            border: 1px solid rgba(250, 70, 22, 0.05);
            animation: ringBreath 14s ease-in-out infinite 3.6s;
        }

        /* Horizontal signal lines — right half, behind rings */
        .hero-lines {
            position: absolute;
            right: 0;
            top: 0;
            width: 52%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
            padding-right: calc(8vw + clamp(140px, 24vh, 270px));
            overflow: hidden;
        }

        .hero-lines span {
            display: block;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(250, 70, 22, 0.28), transparent);
            animation: linePulse 5s ease-in-out infinite;
        }

        .hero-lines span:nth-child(1) { animation-delay: 0.0s; width: 92%; }
        .hero-lines span:nth-child(2) { animation-delay: 0.8s; width: 68%; }
        .hero-lines span:nth-child(3) { animation-delay: 1.6s; width: 84%; }
        .hero-lines span:nth-child(4) { animation-delay: 2.4s; width: 58%; }
        .hero-lines span:nth-child(5) { animation-delay: 3.2s; width: 76%; }
        .hero-lines span:nth-child(6) { animation-delay: 4.0s; width: 90%; }

        /* ---- Hero content ---- */
        .hero-inner {
            position: relative;
            z-index: 2;
            padding-top: 130px;
            padding-bottom: 100px;
        }

        .hero-body {
            max-width: 840px;
        }

        /* Eyebrow label */
        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-family: "Roboto", system-ui, sans-serif;
            font-size: 0.68rem;
            font-weight: 500;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--accent);
            margin: 0 0 22px;
            opacity: 0;
            animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.1s;
        }

        .hero-eyebrow::before {
            content: '';
            display: inline-block;
            width: 22px;
            height: 1px;
            background: currentColor;
            flex-shrink: 0;
        }

        /* Headline */
        .hero-h1 {
            font-size: clamp(2.8rem, 5.4vw, 5.8rem);
            line-height: 1.02;
            letter-spacing: -0.03em;
            color: var(--fg);
            margin: 0;
            opacity: 0;
            animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
        }

        /* Orange accent rule */
        .hero-rule {
            width: 40px;
            height: 3px;
            background: linear-gradient(to right, var(--accent), var(--accent-2));
            border-radius: 2px;
            margin: 26px 0;
            opacity: 0;
            animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.5s;
        }

        /* Subtitle */
        .hero-sub {
            max-width: 480px;
            color: rgba(242, 240, 236, 0.68);
            font-size: 1.05rem;
            line-height: 1.68;
            opacity: 0;
            animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.65s;
        }

        .hero-sub p { color: inherit; margin: 0; }

        /* Actions */
        .hero-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 32px;
            opacity: 0;
            animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.8s;
        }

        /* Scroll cue */
        .hero-scroll-cue {
            position: absolute;
            bottom: 36px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .hero-scroll-cue span {
            display: block;
            width: 1px;
            height: 52px;
            background: linear-gradient(to bottom, rgba(250, 70, 22, 0.75), transparent);
            animation: scrollDrop 2.4s ease-in-out infinite;
        }

        /* ---- Hero keyframes ---- */
        @keyframes heroFadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes ringBreath {
            0%, 100% { opacity: 0.65; }
            50%       { opacity: 1; }
        }

        @keyframes linePulse {
            0%, 100% { opacity: 0.2; }
            50%       { opacity: 1; }
        }

        @keyframes scrollDrop {
            0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
            40%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
            70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
            100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
        }

        h1 { font-size: clamp(2.8rem, 4.8vw, 4.6rem); line-height: 1.02; margin: 0 0 12px; }
        h2 {
            font-size: clamp(2.4rem, 4vw, 3.6rem);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--accent);
            text-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
            margin: 0 0 16px;
        }
        p { margin: 0 0 16px; color: var(--warm); line-height: 1.6; }

        .rich-text { color: var(--warm); line-height: 1.6; }
        .rich-text p,
        .rich-text div { margin: 0 0 16px; }
        .rich-text p:last-child,
        .rich-text div:last-child { margin-bottom: 0; }
        .rich-text ul,
        .rich-text ol { margin: 0 0 16px 18px; }
        .rich-text a { color: var(--fg); text-decoration: underline; }

        .hero-subtitle { margin-bottom: 16px; max-width: 680px; }
        .section-subtitle { margin-top: 8px; margin-bottom: 16px; }

        .section-title {
            position: relative;
            z-index: 0;
            width: 100vw;
            margin-left: calc(-1 * (max(0px, (100vw - 1180px) / 2)));
            padding-left: 0;
            padding-right: clamp(16px, 4vw, 56px);
            box-sizing: border-box;
            word-break: break-word;
            overflow-wrap: anywhere;
            line-height: 0.6;
            margin-bottom: 32px;
        }

        .section-title .muted-header{
            display: block;
            color: var(--muted);
            font-size: 0.9em;
            margin-top: 6px;
        }

        @media (max-width: 1220px) {
            .section-title {
                width: calc(100% + 24px);
                margin-left: -24px;
                padding-right: 0;
                line-height: 0.8;
            }
        }

        .trust-strip {
            background: #060c14;
            border-top: 2px solid rgba(250, 70, 22, 0.38);
        }

        .stats {
            display: grid;
            gap: 0;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            padding: 40px 0;
        }

        .stat {
            padding: 0 36px;
            border-right: 1px solid var(--line);
        }

        .stat:first-child { padding-left: 0; }
        .stat:last-child  { border-right: none; padding-right: 0; }

        .stat h3 {
            font-size: clamp(2.4rem, 3.2vw, 3rem);
            margin: 0 0 6px;
            color: var(--accent);
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .stat p { margin: 0; color: var(--muted); font-size: 0.88rem; letter-spacing: 0.02em; }

        section { padding: 72px 0; }

        /* Section colour dissolves — top of each section fades from previous section's colour */
        #sobre {
            background: linear-gradient(to bottom, #060c14 0%, #0f1620 110px, #0f1620 100%);
        }

        #cases {
            background: linear-gradient(to bottom, #0f1620 0%, #060c14 110px, #060c14 100%);
        }

        #depoimentos {
            background: #060c14;
        }

        #produtos {
            background: linear-gradient(to bottom, #060c14 0%, #0f1620 110px, #0f1620 100%);
        }

        .split {
            display: grid;
            gap: 28px;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            align-items: center;
        }

        .about-grid { align-items: start; }

        .about-text p { color: var(--muted); }

        .about-subtitle {
            margin-top: 18px;
            color: var(--warm);
            font-weight: 600;
        }

        .about-visual {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 40px;
            border-left: 1px solid var(--line);
            min-height: 260px;
        }

        .about-symbol {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .about-symbol img {
            width: clamp(220px, 72%, 380px);
            height: auto;
            display: block;
            opacity: 0.07;
            filter: drop-shadow(0 0 40px rgba(250, 70, 22, 0.12));
        }

        .about-highlights {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px 24px;
            width: 100%;
        }

        .about-highlight-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-radius: 10px;
            border: 1px solid rgba(250, 70, 22, 0.2);
            border-left: 3px solid var(--accent);
            background: rgba(6, 12, 20, 0.72);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            font-family: "Golos Text", system-ui, sans-serif;
            font-size: 0.96rem;
            font-weight: 600;
            color: var(--fg);
            line-height: 1.3;
            letter-spacing: -0.01em;
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .about-highlight-item:hover {
            background: rgba(250, 70, 22, 0.08);
            border-color: rgba(250, 70, 22, 0.4);
            border-left-color: var(--accent);
        }

        .about-highlight-dot { display: none; }

        .card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 22px;
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow);
        }

        /* ---- PRODUTOS ---- */

        .eyebrow-label {
            display: inline-block;
            font-size: 0.7rem;
            font-family: "Roboto", sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--accent);
            margin-bottom: 16px;
        }

        .ecosystem-intro { max-width: 640px; margin: 0 0 64px; }

        .ecosystem-intro-text {
            font-size: 1rem;
            color: var(--muted);
            line-height: 1.75;
            margin: 0;
        }

        .ecosystem-intro-text strong { color: var(--fg); font-weight: 600; }

        .produto-wrap {
            padding: 52px 0;
            border-top: 1px solid var(--line);
        }

        .produto-wrap:last-child { border-bottom: 1px solid var(--line); }

        .produto-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 999px;
            border: 1px solid var(--line);
            font-size: 0.7rem;
            font-family: "Roboto", sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--muted);
            margin-bottom: 20px;
        }

        .produto-badge--main {
            border-color: rgba(250, 70, 22, 0.3);
            color: rgba(250, 70, 22, 0.9);
        }

        .produto-name {
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            font-weight: 700;
            color: var(--fg);
            letter-spacing: -0.03em;
            margin: 0 0 10px;
        }

        .produto-tagline {
            font-size: 1.05rem;
            color: var(--muted);
            line-height: 1.55;
            margin: 0 0 20px;
            max-width: 580px;
        }

        .produto-tagline mark {
            background: transparent;
            color: var(--accent);
            font-weight: 600;
        }

        .produto-desc--nucleo {
            margin-bottom: 32px;
        }

        /* Origem layout */
        .produto-origem-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px 80px;
            align-items: start;
        }

        .produto-desc {
            font-size: 0.96rem;
            color: var(--muted);
            line-height: 1.75;
            margin: 0 0 28px;
        }

        .produto-origem-price {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 28px;
        }

        .origem-price-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--fg);
            letter-spacing: -0.03em;
        }

        .origem-price-note {
            font-size: 0.8rem;
            color: var(--muted);
            font-family: "Roboto", sans-serif;
        }

        /* Tier selector */
        .tier-selector {
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 32px;
        }

        .tier-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 22px 28px;
            cursor: pointer;
            border-bottom: 1px solid var(--line);
            transition: background 0.18s ease;
            outline: none;
        }

        .tier-item:last-child { border-bottom: none; }
        .tier-item:hover { background: rgba(255, 255, 255, 0.03); }

        .tier-item.is-active {
            background: rgba(250, 70, 22, 0.07);
            border-left: 3px solid var(--accent);
            padding-left: 25px;
        }

        .tier-item-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
        }

        .tier-name {
            font-size: 1rem;
            font-weight: 700;
            color: var(--fg);
            letter-spacing: -0.01em;
        }

        .tier-item.is-active .tier-name { color: var(--accent); }

        .tier-desc {
            font-size: 0.84rem;
            color: var(--muted);
            line-height: 1.4;
        }

        .tier-description {
            display: block;
            font-size: 0.82rem;
            color: rgba(251, 251, 251, 0.38);
            line-height: 1.5;
            margin-top: 6px;
        }

        .tier-base-price {
            font-size: 1rem;
            font-weight: 700;
            color: var(--fg);
            white-space: nowrap;
            flex-shrink: 0;
            letter-spacing: -0.01em;
            opacity: 0.65;
        }

        .tier-item.is-active .tier-base-price { opacity: 1; }

        .tier-base-price em {
            font-style: normal;
            font-size: 0.75rem;
            font-weight: 400;
            color: var(--muted);
            margin-left: 2px;
        }

        /* Add-ons */
        .addons-wrap { margin-bottom: 32px; }

        .addons-intro {
            font-size: 0.87rem;
            color: var(--muted);
            line-height: 1.65;
            margin: 0 0 20px;
            max-width: 600px;
        }

        .addon-list { display: flex; flex-direction: column; gap: 10px; }

        .addon-item { display: flex; cursor: pointer; }
        .addon-check { display: none; }

        .addon-card {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 16px 20px;
            border: 1px solid var(--line);
            border-radius: 12px;
            width: 100%;
            transition: border-color 0.18s ease, background 0.18s ease;
        }

        .addon-item:hover .addon-card {
            border-color: rgba(250, 70, 22, 0.25);
            background: rgba(255, 255, 255, 0.02);
        }

        .addon-check:checked + .addon-card {
            border-color: var(--accent);
            background: rgba(250, 70, 22, 0.07);
        }

        .addon-tag {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--accent);
            font-family: "Roboto", sans-serif;
            letter-spacing: 0.05em;
            white-space: nowrap;
            flex-shrink: 0;
            min-width: 48px;
            padding-top: 1px;
        }

        .addon-desc {
            font-size: 0.87rem;
            color: var(--muted);
            line-height: 1.55;
        }

        /* Estratégico note */
        .estrategico-note {
            padding: 16px 20px;
            border: 1px solid var(--line);
            border-radius: 12px;
            font-size: 0.92rem;
            color: var(--muted);
            font-style: italic;
            margin-bottom: 32px;
        }

        /* Price + CTA row */
        .nucleo-bottom {
            display: flex;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .nucleo-price-block {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: wrap;
        }

        .nucleo-price {
            font-size: clamp(2rem, 3.5vw, 3.2rem);
            font-weight: 700;
            color: var(--fg);
            letter-spacing: -0.04em;
            transition: opacity 0.12s ease;
        }

        .nucleo-price.fading { opacity: 0.15; }

        .nucleo-period {
            font-size: 1rem;
            color: var(--muted);
            font-weight: 400;
            align-self: flex-end;
            padding-bottom: 6px;
        }

        .nucleo-footnote {
            width: 100%;
            font-size: 0.72rem;
            color: var(--muted);
            opacity: 0.55;
            font-family: "Roboto", sans-serif;
            margin-top: 4px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid var(--line);
            font-size: 12px;
            color: var(--muted);
            font-family: "Roboto", system-ui, sans-serif;
        }

        .case-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .cases-grid {
            display: grid;
            grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.7fr);
            gap: 28px;
            align-items: start;
            position: relative;
            margin-top: 28px;
        }

        #cases {
            overflow-x: clip;
        }

        @supports not (overflow: clip) {
            #cases { overflow-x: hidden; }
        }

        #cases .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--wrap-pad); }

        #cases .cases-grid {
            padding: 0 clamp(12px, 2vw, 28px);
        }

        .case-menu {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .case-item {
            border: 1px solid var(--line);
            border-left: 3px solid transparent;
            background: rgba(16, 24, 32, 0.6);
            color: var(--warm);
            border-radius: 16px;
            padding: 14px 16px 14px 14px;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
        }

        .case-item:hover {
            border-color: rgba(250, 70, 22, 0.3);
            border-left-color: rgba(250, 70, 22, 0.5);
            color: var(--fg);
        }

        .case-item.is-active {
            background: rgba(250, 70, 22, 0.08);
            border-color: rgba(250, 70, 22, 0.25);
            border-left-color: var(--accent);
            color: var(--fg);
        }

        .case-title {
            display: block;
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 4px;
        }

        .case-year {
            font-size: 0.85rem;
            color: var(--muted);
            letter-spacing: 0.08em;
        }

        .case-panels {
            position: relative;
            min-width: 0;
            margin-right: 0;
            padding-right: 0;
            width: 100%;
        }

        .case-panel {
            display: none;
        }

        .case-panel.is-active {
            display: block;
        }

        .case-media {
            background: rgba(16, 24, 32, 0.55);
            border: 1px solid var(--line);
            border-radius: 26px;
            padding: clamp(18px, 2vw, 28px);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .mockup-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
            grid-template-rows: repeat(2, minmax(0, 1fr));
            gap: clamp(14px, 2vw, 20px);
            height: clamp(320px, 44vw, 520px);
        }

        .mockup-grid.is-single {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            height: clamp(360px, 52vw, 640px);
        }

        .mockup-grid.is-duo {
            grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
            grid-template-rows: 1fr;
            height: clamp(340px, 48vw, 600px);
        }

        .mockup-grid.is-duo .mockup-a { grid-row: auto; }

        .mockup {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            background: radial-gradient(circle at 20% 20%, rgba(250, 70, 22, 0.12), rgba(12, 17, 23, 0.95));
            border: 1px solid rgba(251, 251, 251, 0.1);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
            overflow: hidden;
            position: relative;
        }

        .mockup-a { grid-row: span 2; }

        .mockup img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block;
            object-position: center;
            position: absolute;
            inset: 0;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .mockup img:hover { transform: scale(1.04); }

        .mockup.is-empty::after {
            content: "Sem mídia";
            color: rgba(251, 251, 251, 0.4);
            font-size: 0.85rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .case-main-result {
            display: inline-block;
            margin-top: 16px;
            padding: 6px 14px;
            background: rgba(250, 70, 22, 0.08);
            border-left: 3px solid var(--accent);
            border-radius: 0 6px 6px 0;
            color: var(--accent);
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .case-description {
            margin-top: 16px;
            color: var(--muted);
            font-size: 0.98rem;
        }

        .testimonial-featured {
            margin-top: 32px;
            padding: 32px 36px;
            background: rgba(250, 70, 22, 0.04);
            border: 1px solid rgba(250, 70, 22, 0.18);
            border-radius: 18px;
            position: relative;
        }
        .testimonial-featured::before {
            content: '\201C';
            display: block;
            font-size: 3.5rem;
            line-height: 1;
            color: var(--accent);
            opacity: 0.35;
            margin-bottom: 8px;
        }
        .testimonial-featured-text {
            font-size: 1.15rem;
            color: var(--fg);
            line-height: 1.65;
            margin: 0 0 24px;
        }
        .testimonial-featured-footer {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .testimonial-wall {
            margin-top: 32px;
            column-count: 3;
            column-gap: 20px;
        }

        .testimonial-bubble {
            break-inside: avoid;
            margin: 0 0 20px;
            padding: 24px 22px 22px;
            border-radius: 20px;
            background: var(--card);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .testimonial-bubble::before {
            content: '\201C';
            display: block;
            font-size: 3rem;
            line-height: 1;
            color: rgba(250, 70, 22, 0.4);
            font-family: Georgia, 'Times New Roman', serif;
            margin-bottom: 6px;
        }

        .testimonial-bubble-text {
            margin: 0 0 18px;
            color: var(--warm);
            line-height: 1.72;
            font-size: 0.97rem;
        }

        .testimonial-bubble-footer {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .testimonial-bubble-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            overflow: hidden;
            flex: 0 0 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--fg);
            background: linear-gradient(140deg, rgba(250, 70, 22, 0.35), rgba(251, 251, 251, 0.12));
            border: 1px solid rgba(251, 251, 251, 0.18);
        }

        .testimonial-bubble-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .testimonial-bubble-author {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .testimonial-bubble-author strong {
            color: var(--fg);
            font-size: 1rem;
            line-height: 1.2;
        }

        .testimonial-bubble-author span {
            color: var(--muted);
            font-size: 0.92rem;
            line-height: 1.25;
        }

        .testimonial-empty {
            color: var(--muted);
            font-size: 0.95rem;
        }

        .cta-section {
            background: linear-gradient(to bottom, #0f1620 0%, #060c14 110px, #060c14 100%);
        }

        .cta-section .card {
            background: rgba(250, 70, 22, 0.06);
            border: 1px solid rgba(250, 70, 22, 0.22);
        }

        .cta-section .card h3 {
            color: var(--fg);
            font-size: 1.2rem;
            margin: 0 0 12px;
        }

        .footer {
            padding: 48px 0 36px;
            border-top: 1px solid rgba(250, 70, 22, 0.22);
            background: #060c14;
        }

        .footer-social {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .footer-copy {
            margin-top: 24px;
            color: var(--muted);
            font-size: 0.9rem;
        }

        /* ---- LIGHTBOX ---- */
        .lightbox {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(8px);
            align-items: center;
            justify-content: center;
        }

        .lightbox.is-open { display: flex; }

        .lightbox-img {
            max-width: min(92vw, 1200px);
            max-height: 86vh;
            object-fit: contain;
            border-radius: 12px;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
            animation: lbFadeIn 0.22s ease;
            user-select: none;
        }

        .lightbox-close {
            position: absolute;
            top: 18px;
            right: 22px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 20px;
            line-height: 1;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            transition: background 0.2s;
        }

        .lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
        .lightbox-prev { left: 18px; }
        .lightbox-next { right: 18px; }

        .lightbox-counter {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.55);
            font-size: 0.88rem;
            font-family: "Roboto", system-ui, sans-serif;
            white-space: nowrap;
        }

        @keyframes lbFadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        @media (max-width: 768px) {
            .hero-ring--1, .hero-ring--2, .hero-ring--3, .hero-lines { display: none; }
        }

        @media (max-width: 1100px) {
            .cases-grid { grid-template-columns: 1fr; }
            .case-menu { flex-direction: row; flex-wrap: wrap; }
            .case-item { flex: 1 1 180px; }
            .case-panels { margin-right: 0; padding-right: 0; }
            .testimonial-wall { column-count: 2; }
            .about-visual { padding-left: 24px; }
        }

        @media (max-width: 900px) {
            .nav-links { display: none; }
            .nav-toggle { display: flex; }
            .nav-cta { display: none; }
        }
        @media (max-width: 720px) {
            .wrap { --wrap-pad: 16px; padding: 0 var(--wrap-pad); }
            section { padding: 48px 0; }
            .section-title {
                width: calc(100% + 16px);
                margin-left: -16px;
                padding-right: 0;
                line-height: 1.1;
            }
            /* Case menu: horizontal scroll instead of vertical stack */
            .case-menu {
                flex-direction: row;
                flex-wrap: nowrap;
                overflow-x: auto;
                gap: 10px;
                padding-bottom: 6px;
                scrollbar-width: none;
            }
            .case-menu::-webkit-scrollbar { display: none; }
            .case-item { flex: 0 0 auto; min-width: 140px; }
            .case-media { border-radius: 22px; }
            .mockup-grid { grid-template-columns: 1fr; height: auto; }
            .mockup-grid.is-duo { grid-template-columns: 1fr; }
            .mockup-a { grid-row: auto; min-height: 240px; }
            .mockup-b, .mockup-c { min-height: 200px; }
            .testimonial-wall { column-count: 1; }
            /* About: hide the decorative visual on mobile */
            .about-visual { display: none; }
            /* Produtos: stack on small screens */
            .produto-origem-inner { grid-template-columns: 1fr; gap: 0; }
            .produto-origem-head { margin-bottom: 24px; }
            .tier-item { flex-direction: column; align-items: flex-start; gap: 10px; }
            .tier-base-price { font-size: 0.9rem; }
            .nucleo-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
            .nucleo-bottom .cta { width: 100%; justify-content: center; }
            /* Stats: stack on small screens */
            .stat { border-right: none; padding: 16px 0; border-bottom: 1px solid var(--line); }
            .stat:last-child { border-bottom: none; }
            .hero-inner { padding-top: 100px; padding-bottom: 72px; }
            .hero-h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); }
            .hero-sub { max-width: 100%; }
            .hero-actions .cta,
            .hero-actions .ghost { width: 100%; justify-content: center; }
        }

        @media (max-width: 480px) {
            h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
            .nav-drawer { padding-left: 20px; padding-right: 20px; }
            .mockup-a { min-height: 200px; }
            .mockup-b, .mockup-c { min-height: 160px; }
            .stat h3 { font-size: clamp(2rem, 8vw, 2.4rem); }
        }