:root {
            --obsidian-0: #0a0611;
            --obsidian-1: #120b1f;
            --obsidian-2: #1c1330;
            --obsidian-3: #271a40;
            --glass-line: rgba(193, 59, 255, 0.22);
            --glass-line-strong: rgba(193, 59, 255, 0.42);
            --purple-primary: #7A2BE0;
            --purple-light: #BC6FFF;
            --purple-soft: #E2C6FF;
            --purple-deep: #2A0A5E;
            --purple-mid: #8B3EFF;
            --purple-electric: #C13BFF;
            --ink: #f2f2f6;
            --ink-dim: #e6e6ec;
            --ink-faint: #b4b4bd;
            --radius: 10px;
            --display: 'Space Grotesk', sans-serif;
            --body: 'Inter', sans-serif;
            --mono: 'JetBrains Mono', monospace;
            --wa-green: #25D366;
            --wa-green-dark: #128C7E;
            --wa-green-light: #4ADE80;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
            width: 100%;
        }
        body {
            background: var(--obsidian-0);
            color: var(--ink);
            font-family: var(--body);
            overflow-x: hidden;
            overscroll-behavior-x: none;
            width: 100%;
            position: relative;
            -webkit-font-smoothing: antialiased;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -3;
            pointer-events: none;
            background:
                radial-gradient(ellipse 60% 40% at 12% 8%, rgba(139, 62, 255, .16), transparent 60%),
                radial-gradient(ellipse 55% 45% at 88% 30%, rgba(193, 59, 255, .13), transparent 60%),
                radial-gradient(ellipse 60% 45% at 20% 68%, rgba(122, 43, 224, .14), transparent 60%),
                radial-gradient(ellipse 55% 40% at 85% 92%, rgba(139, 62, 255, .12), transparent 60%);
        }
        ::selection {
            background: var(--purple-light);
            color: var(--obsidian-0);
        }
        /* ─── CUSTOM SCROLLBAR (electric purple, beautification) ─── */
        ::-webkit-scrollbar { width: 11px; height: 11px; }
        ::-webkit-scrollbar-track { background: var(--obsidian-0); }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--purple-electric), var(--purple-mid));
            border-radius: 999px;
            border: 2px solid var(--obsidian-0);
        }
        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #d666ff, var(--purple-electric)); }
        html { scrollbar-color: var(--purple-electric) var(--obsidian-0); scrollbar-width: thin; }
        a {
            color: inherit;
            text-decoration: none;
        }
        ul {
            list-style: none;
        }
        img {
            max-width: 100%;
            display: block;
        }
        button {
            font-family: inherit;
            cursor: pointer;
        }
        .wrap {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 32px;
        }
        @media(prefers-reduced-motion:reduce) {
            * {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001ms !important;
            }
        }

        .metal-text {
            color: #ffffff;
            text-shadow: 0 0 18px rgba(193, 59, 255, .35);
        }

        /* ─── ELECTRIC PURPLE SCROLL GRID ─── */
        .purple-grid-overlay {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(193, 59, 255, .16) 1px, transparent 1px),
                linear-gradient(90deg, rgba(193, 59, 255, .16) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: radial-gradient(ellipse 90% 140% at 50% 0%, #000 45%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 90% 140% at 50% 0%, #000 45%, transparent 100%);
            opacity: 0;
            transition: opacity 1s ease;
        }
        .purple-grid-overlay.grid-visible {
            opacity: 1;
        }
        @media (prefers-reduced-motion: reduce) {
            .purple-grid-overlay { transition: none; }
        }
        @keyframes obsidianSheen {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* ─── OBSIDIAN ICON (replaces diamond) ─── */
        .obsidian-icon {
            display: inline-block;
            width: 1.2em;
            height: 1.2em;
            flex-shrink: 0;
            background: linear-gradient(135deg, #2A0A5E, #B026FF, #D9B8FF, #7B2FE0);
            background-size: 220% 220%;
            animation: obsidianSheen 5s ease-in-out infinite;
            clip-path: polygon(50% 0%, 90% 30%, 80% 90%, 50% 100%, 20% 90%, 10% 30%);
            box-shadow: 0 0 18px rgba(176, 38, 255, 0.55), 0 0 4px rgba(217, 184, 255, 0.6);
            transition: transform .3s;
        }
        .obsidian-icon:hover {
            transform: rotate(10deg) scale(1.05);
        }
        .obsidian-icon-sm {
            width: 1em;
            height: 1em;
        }
        .obsidian-icon-lg {
            width: 2.4rem;
            height: 2.4rem;
        }
        .obsidian-icon-xl {
            width: 4rem;
            height: 4rem;
        }
        .obsidian-icon-xxl {
            width: 6rem;
            height: 6rem;
        }

        /* Real logo image variants (replace CSS-drawn diamond where a raster mark is used) */
        .logo-img {
            display: inline-block;
            object-fit: contain;
            flex-shrink: 0;
            filter: brightness(1.18) contrast(1.06) saturate(1.25) drop-shadow(0 0 10px rgba(191, 100, 255, .5));
        }

        .btn-primary {
            background: linear-gradient(145deg, #C77DFF, #B026FF 35%, #7B2FE0 65%, #2A0A5E 100%);
            color: #fff;
            font-weight: 700;
            font-size: .9rem;
            padding: 15px 28px;
            border: none;
            border-radius: var(--radius);
            display: inline-block;
            position: relative;
            overflow: hidden;
            transition: transform .3s, box-shadow .3s;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
            box-shadow: 0 4px 24px rgba(176, 38, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
        }
        .btn-primary::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, 0) 100%);
            animation: metallicShine 4s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes metallicShine {
            0% {
                transform: translateX(-100%) rotate(25deg);
            }
            30% {
                transform: translateX(100%) rotate(25deg);
            }
            100% {
                transform: translateX(100%) rotate(25deg);
            }
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 34px -10px rgba(176, 38, 255, .9), 0 0 46px rgba(176, 38, 255, .35);
        }
        .btn-ghost {
            border: 1px solid rgba(139, 115, 232, .4);
            color: var(--ink);
            font-weight: 600;
            font-size: .9rem;
            padding: 15px 28px;
            border-radius: var(--radius);
            transition: border-color .3s, background .3s, box-shadow .3s;
            display: inline-block;
            background: rgba(75, 54, 143, .12);
            backdrop-filter: blur(4px);
            position: relative;
            overflow: hidden;
        }
        .btn-ghost::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, transparent 0%, rgba(139, 115, 232, .08) 30%, rgba(196, 181, 240, .15) 50%, rgba(139, 115, 232, .08) 70%, transparent 100%);
            background-size: 200% 100%;
            animation: ghostShine 5s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes ghostShine {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }
        .btn-ghost:hover {
            border-color: var(--purple-soft);
            background: rgba(176, 38, 255, .2);
            box-shadow: 0 0 34px rgba(176, 38, 255, .35);
        }

        /* ─── WHATSAPP GREEN BUTTON ─── */
        .btn-wa {
            background: linear-gradient(145deg, #4ADE80, #25D366 40%, #128C7E 70%, #075E54);
            color: #fff;
            font-weight: 700;
            font-size: .9rem;
            padding: 15px 28px;
            border: none;
            border-radius: var(--radius);
            display: inline-block;
            position: relative;
            overflow: hidden;
            transition: transform .3s, box-shadow .3s;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
            box-shadow: 0 4px 20px rgba(37, 211, 102, .4), inset 0 1px 0 rgba(255, 255, 255, .15);
        }
        .btn-wa::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, 0) 100%);
            animation: metallicShine 4s ease-in-out infinite;
            pointer-events: none;
        }
        .btn-wa:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .7), 0 0 40px rgba(37, 211, 102, .2);
        }

        #glow {
            position: fixed;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(139, 115, 232, .14), rgba(75, 54, 143, .10) 45%, transparent 70%);
            transition: background .15s ease;
        }
        .grain {
            position: fixed;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            opacity: .04;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        }

        /* ─── PURPLE GRID BACKGROUND LAYER ─── */
        .purple-grid {
            position: fixed;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(193, 59, 255, .10) 1px, transparent 1px),
                linear-gradient(90deg, rgba(193, 59, 255, .10) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 90%);
            -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 90%);
        }

        /* ─── WELCOME / DISCOUNT POPUP ─── */
        .welcome-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: rgba(5, 5, 6, .85);
            backdrop-filter: blur(16px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .7s ease;
            padding: 20px;
        }
        .welcome-overlay.open {
            opacity: 1;
            pointer-events: all;
        }
        .welcome-card {
            max-width: 620px;
            width: 100%;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: linear-gradient(155deg, #4B368F 0%, #382570 45%, #1c1338 100%);
            border: 1px solid rgba(196, 181, 240, .35);
            border-radius: 24px;
            padding: 48px 44px 40px;
            text-align: left;
            position: relative;
            overflow-x: hidden;
            transform: translateY(30px) scale(.96);
            transition: transform .7s cubic-bezier(.2, .9, .3, 1), opacity .7s ease;
            opacity: 0;
            box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 70px rgba(139, 115, 232, .25);
        }
        .welcome-overlay.open .welcome-card {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        .welcome-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 70% 50% at 15% 0%, rgba(255, 255, 255, .12), transparent 65%), radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px);
            background-size: auto, 24px 24px;
            pointer-events: none;
        }
        .welcome-card .gem-big {
            font-size: 4.2rem;
            display: block;
            margin: 0 0 12px;
            filter: drop-shadow(0 0 30px rgba(255, 255, 255, .35));
            animation: gemFloat 3s ease-in-out infinite;
        }
        .welcome-card .gem-big .obsidian-icon {
            width: 4.2rem;
            height: 4.2rem;
        }
        @keyframes gemFloat {
            0%,
            100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-8px) scale(1.04);
            }
        }
        .welcome-card h2 {
            font-family: var(--display);
            font-size: clamp(1.6rem, 3.6vw, 2.6rem);
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 12px;
            color: #ffffff;
        }
        .welcome-card p {
            color: #ffffff;
            opacity: .92;
            font-size: 1rem;
            line-height: 1.7;
            margin: 0 0 28px;
            max-width: 460px;
        }
        .welcome-card .tagline {
            font-family: var(--mono);
            font-size: .72rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: #ffffff;
            margin-bottom: 8px;
            display: block;
        }
        .welcome-card .btn-primary {
            font-size: 1rem;
            padding: 16px 40px;
        }
        .welcome-close {
            position: absolute;
            top: 16px;
            right: 20px;
            background: none;
            border: none;
            color: #ffffff;
            opacity: .7;
            font-size: 1.4rem;
            transition: color .3s, opacity .3s;
            z-index: 2;
        }
        .welcome-close:hover {
            color: #ffffff;
            opacity: 1;
        }

        /* ─── DISCOUNT BADGE INSIDE POPUP ─── */
        .discount-ring {
            position: relative;
            width: 130px;
            height: 130px;
            margin: 0 0 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #C4B5F0, #ffffff, #C4B5F0, #8B73E8, #C4B5F0);
            animation: obsidianSheen 6s linear infinite;
            box-shadow: 0 0 40px rgba(196, 181, 240, .5);
        }
        .discount-ring::before {
            content: '';
            position: absolute;
            inset: 6px;
            border-radius: 50%;
            background: linear-gradient(155deg, #6c4fc9, #4B368F);
        }
        .discount-ring .discount-num {
            position: relative;
            z-index: 2;
            font-family: var(--display);
            font-weight: 700;
            line-height: 1;
            text-align: center;
        }
        .discount-ring .discount-num b {
            font-size: 2.1rem;
            display: block;
            color: #ffffff;
        }
        .discount-ring .discount-num span {
            font-family: var(--mono);
            font-size: .6rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: #ffffff;
            opacity: .85;
        }
        .welcome-timer {
            display: flex;
            gap: 10px;
            justify-content: flex-start;
            margin-bottom: 26px;
        }
        .welcome-timer div {
            background: rgba(0, 0, 0, .22);
            border: 1px solid rgba(255, 255, 255, .25);
            border-radius: 10px;
            padding: 10px 14px;
            min-width: 58px;
            text-align: center;
        }
        .welcome-timer div b {
            display: block;
            font-family: var(--display);
            font-size: 1.3rem;
            color: #ffffff;
        }
        .welcome-timer div span {
            font-family: var(--mono);
            font-size: .58rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #ffffff;
            opacity: .8;
        }
        .welcome-code {
            font-family: var(--mono);
            font-size: .8rem;
            color: #ffffff;
            opacity: .85;
            margin-top: 16px;
            letter-spacing: .05em;
        }
        .welcome-code b {
            color: #ffffff;
            border: 1px dashed rgba(255, 255, 255, .5);
            padding: 3px 10px;
            border-radius: 6px;
            margin-left: 4px;
            opacity: 1;
        }
        .welcome-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        /* ─── LOADER ─── */
        #loader {
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(75, 54, 143, .22), transparent 65%), var(--obsidian-0);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px;
            text-align: center;
            transition: opacity .7s ease, visibility .7s ease;
        }
        #loader.hide {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .loader-rig {
            position: relative;
            width: 128px;
            height: 128px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 34px;
        }
        .loader-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid var(--glass-line);
        }
        .loader-ring::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 50%;
            border: 1.5px solid transparent;
            border-top-color: var(--purple-soft);
            border-right-color: var(--purple-light);
            filter: drop-shadow(0 0 6px rgba(139, 115, 232, .6));
            animation: ringSpin 1.6s linear infinite;
        }
        .loader-ring.outer {
            inset: -20px;
            opacity: .6;
        }
        .loader-ring.outer::before {
            border-top-color: transparent;
            border-left-color: var(--purple-deep);
            animation-duration: 2.6s;
            animation-direction: reverse;
        }
        @keyframes ringSpin {
            to {
                transform: rotate(360deg);
            }
        }
        @keyframes letterRise {
            0% {
                opacity: .15;
                transform: translateY(6px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .loader-gem {
            width: 54px;
            height: 54px;
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 0 16px rgba(139, 115, 232, .55));
            animation: gemFloat 2.4s ease-in-out infinite;
        }
        .loader-gem .obsidian-icon {
            width: 54px;
            height: 54px;
        }
        .loader-mark {
            font-family: var(--display);
            font-weight: 700;
            font-size: clamp(1.2rem, 5vw, 2.4rem);
            letter-spacing: .02em;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2px;
            max-width: 100%;
        }
        .loader-mark span {
            display: inline-block;
            opacity: .15;
            transform: translateY(6px);
            animation: letterRise 1.1s ease forwards;
        }
        .loader-mark .obsidian-text {
            color: #ffffff;
            text-shadow: 0 0 18px rgba(255, 255, 255, .35), 0 0 30px rgba(139, 115, 232, .55), 0 0 46px rgba(139, 115, 232, .3);
        }
        .loader-sub {
            margin-top: 14px;
            font-family: var(--mono);
            font-size: clamp(.6rem, 2.4vw, .72rem);
            letter-spacing: .2em;
            text-transform: uppercase;
            color: #ffffff;
            max-width: 90vw;
            text-align: center;
            white-space: normal;
        }
        .loader-bar {
            margin-top: 34px;
            width: min(220px, 60vw);
            height: 2px;
            background: var(--glass-line);
            position: relative;
            overflow: hidden;
            border-radius: 2px;
        }
        .loader-bar::after {
            content: '';
            position: absolute;
            left: -40%;
            top: 0;
            bottom: 0;
            width: 40%;
            background: linear-gradient(90deg, transparent, var(--purple-deep), var(--purple-soft), var(--purple-light), transparent);
            animation: loaderSweep 1.3s ease-in-out infinite;
        }
        @keyframes loaderSweep {
            0% {
                left: -40%;
            }
            100% {
                left: 100%;
            }
        }
        .loader-pct {
            margin-top: 16px;
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .2em;
            color: #ffffff;
        }

        /* ─── NAV ─── */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 500;
            background: rgba(5, 5, 6, .72);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--glass-line);
            transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
        }
        header.nav-scrolled {
            background: rgba(5, 5, 6, .94);
            border-bottom-color: var(--glass-line-strong);
            box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .85);
        }
        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 14px 32px;
            max-width: 1240px;
            margin: 0 auto;
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: 0;
        }
        .logo .mark {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo .mark .obsidian-icon {
            width: 32px;
            height: 32px;
        }
        .logo .word {
            display: flex;
            flex-direction: column;
            line-height: 1;
            min-width: 0;
        }
        .logo .word b {
            font-family: var(--display);
            font-weight: 700;
            font-size: 1.02rem;
            letter-spacing: .02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .logo .word b em {
            font-style: normal;
        }
        .logo .word small {
            font-family: var(--mono);
            font-size: .52rem;
            letter-spacing: .22em;
            color: var(--ink-faint);
            margin-top: 2px;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            max-width: 100%;
        }
        .nav-links {
            display: flex;
            gap: 26px;
            font-size: .87rem;
            color: var(--ink-dim);
        }
        .nav-links a {
            position: relative;
            padding: 4px 0;
            transition: color .25s;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 1px;
            background: var(--purple-soft);
            transition: width .25s;
        }
        .nav-links a:hover {
            color: var(--ink);
        }
        .nav-links a:hover::after {
            width: 100%;
        }
        .nav-cta {
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .02em;
            padding: 10px 20px;
            background: linear-gradient(145deg, #C77DFF, #B026FF 40%, #7B2FE0 70%, #2A0A5E 100%);
            color: #fff;
            border-radius: var(--radius);
            transition: transform .25s, box-shadow .25s;
            white-space: nowrap;
            border: 1px solid rgba(176, 38, 255, .45);
            position: relative;
            overflow: hidden;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
            box-shadow: 0 4px 20px rgba(176, 38, 255, .4);
        }
        .nav-cta::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, 0) 100%);
            animation: metallicShine 4s ease-in-out infinite;
            pointer-events: none;
        }
        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px -8px rgba(176, 38, 255, .85);
        }
        .nav-phone {
            font-family: var(--mono);
            font-size: .85rem;
            font-weight: 600;
            color: var(--ink);
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            transition: color .25s;
        }
        .nav-phone:hover {
            color: #ffffff;
        }
        .burger {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
        }
        .burger span {
            width: 22px;
            height: 1.5px;
            background: var(--ink);
        }

        /* ─── HERO ─── */
        .hero-banner {
            position: relative;
            height: 100vh;
            min-height: 700px;
            overflow: hidden;
            margin-top: 70px;
        }
        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            background:
                radial-gradient(ellipse 70% 55% at 18% 20%, rgba(193, 59, 255, .30), transparent 60%),
                radial-gradient(ellipse 60% 50% at 85% 15%, rgba(139, 62, 255, .26), transparent 60%),
                radial-gradient(ellipse 65% 60% at 50% 100%, rgba(122, 43, 224, .28), transparent 65%),
                linear-gradient(160deg, #0a0611 0%, #150b26 45%, #1c1330 100%);
        }
        .hero-bg-grid {
            position: absolute;
            inset: -2px;
            background-image:
                linear-gradient(rgba(226, 198, 255, .08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(226, 198, 255, .08) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 85%);
        }
        .hero-bg-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            opacity: .55;
            animation: heroOrbFloat 12s ease-in-out infinite;
        }
        .hero-bg-orb-1 {
            width: 380px;
            height: 380px;
            top: -80px;
            right: 8%;
            background: radial-gradient(circle, rgba(193, 59, 255, .55), transparent 70%);
        }
        .hero-bg-orb-2 {
            width: 320px;
            height: 320px;
            bottom: -60px;
            left: 6%;
            background: radial-gradient(circle, rgba(139, 62, 255, .5), transparent 70%);
            animation-delay: -6s;
        }
        @keyframes heroOrbFloat {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-26px) scale(1.06); }
        }
        .hero-bg-shard {
            position: absolute;
            top: 12%;
            right: 12%;
            width: 220px;
            height: 220px;
            background: linear-gradient(135deg, rgba(226, 198, 255, .16), rgba(193, 59, 255, .06));
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
            opacity: .5;
            animation: heroShardSpin 22s linear infinite;
        }
        @keyframes heroShardSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @media(max-width:768px) {
            .hero-bg-orb-1, .hero-bg-orb-2 { width: 240px; height: 240px; }
            .hero-bg-shard { width: 140px; height: 140px; }
        }

        /* ─── AUTO-ROTATING WORD (replaces image slider) ─── */
        .word-rotator {
            position: relative;
            display: inline-block;
            min-width: 1ch;
            vertical-align: bottom;
            white-space: nowrap;
        }
        .word-rotator-item {
            display: inline-block;
            color: var(--purple-soft);
            background: linear-gradient(135deg, var(--purple-soft), var(--purple-electric));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .word-rotator-item:not(.is-current) {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            pointer-events: none;
        }
        .word-rotator-item.is-current {
            animation: wordIn .6s ease both;
        }
        .word-rotator-item.is-leaving {
            opacity: 1;
            animation: wordOut .5s ease both;
        }
        @keyframes wordIn {
            0% { opacity: 0; transform: translateY(.5em); filter: blur(4px); }
            100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
        @keyframes wordOut {
            0% { opacity: 1; transform: translateY(0); filter: blur(0); }
            100% { opacity: 0; transform: translateY(-.5em); filter: blur(4px); }
        }
        .hero-content {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            align-items: center;
            padding: 0 32px;
        }
        .hero-content .wrap {
            width: 100%;
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1.25fr .75fr;
            gap: 48px;
            align-items: center;
        }
        .hero-text {
            max-width: 680px;
        }
        .hero-text .eyebrow {
            font-family: var(--mono);
            font-size: .72rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 22px;
        }
        .hero-text .eyebrow::before {
            content: '';
            width: 26px;
            height: 1px;
            background: var(--purple-soft);
        }
        .hero-tagline-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 18px 0 8px;
            padding: 8px 18px;
            border-radius: 999px;
            font-family: var(--display);
            font-size: .82rem;
            font-weight: 600;
            letter-spacing: .02em;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(217, 184, 255, .28), rgba(176, 38, 255, .18));
            border: 1px solid rgba(217, 184, 255, .5);
            box-shadow: 0 0 24px rgba(176, 38, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
            text-shadow: 0 0 12px rgba(217, 184, 255, .6);
        }
        .hero-text h1 {
            font-family: var(--display);
            font-weight: 700;
            font-size: clamp(2.6rem, 5.6vw, 4.8rem);
            line-height: 1.05;
            letter-spacing: -.01em;
            margin-bottom: 20px;
        }
        .hero-text h1 .metal-text {
            display: inline-block;
        }
        .hero-text .lead {
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--ink-dim);
            max-width: 540px;
            margin-bottom: 32px;
        }
        .hero-ctas {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        /* ─── HERO SERVICES PANEL (right side, glass cards on dark hero) ─── */
        .hero-services-panel {
            position: relative;
        }
        .hero-services-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--mono);
            font-size: .7rem;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--purple-soft);
            margin-bottom: 18px;
        }
        .hero-services-label::before {
            content: '';
            width: 22px;
            height: 1px;
            background: var(--purple-soft);
        }
        .hero-services-grid {
            display: grid;
            gap: 14px;
        }
        .hero-service-chip {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 18px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(196, 181, 240, .05));
            border: 1px solid rgba(226, 198, 255, .18);
            backdrop-filter: blur(10px);
            transition: transform .3s ease, background .3s ease, border-color .3s ease;
        }
        .hero-service-chip:hover {
            transform: translateX(6px);
            background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(196, 181, 240, .08));
            border-color: rgba(226, 198, 255, .35);
        }
        .hero-service-chip .hero-service-icon {
            flex-shrink: 0;
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #C77DFF, #7B2FE0);
            color: #fff;
            box-shadow: 0 8px 20px rgba(176, 38, 255, .35);
        }
        .hero-service-chip .hero-service-icon svg { width: 22px; height: 22px; }
        .hero-service-chip b {
            display: block;
            font-family: var(--display);
            font-size: .94rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 2px;
        }
        .hero-service-chip span {
            font-size: .78rem;
            color: rgba(230, 230, 236, .75);
            line-height: 1.4;
        }
        @media(max-width:960px) {
            .hero-grid { grid-template-columns: 1fr; }
        }
        @media(max-width:960px) {
            .hero-banner {
                height: auto;
                min-height: auto;
                overflow: visible;
                padding-bottom: 56px;
            }
            .hero-content {
                position: relative;
                inset: auto;
                display: block;
                padding: 120px 24px 0;
            }
            .hero-services-panel {
                margin-top: 8px;
            }
            .hero-services-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .hero-service-chip {
                flex-direction: column;
                text-align: center;
                gap: 10px;
                padding: 18px 12px;
            }
            .scroll-cue { display: none; }
        }
        @media(max-width:480px) {
            .hero-services-grid { grid-template-columns: 1fr; }
            .hero-service-chip { flex-direction: row; text-align: left; }
        }
        /* ─── MAIN BANNER (single big auto-slider, purple + white theme) ─── */
        .main-banner {
            padding: 70px 32px 90px;
            background: var(--obsidian-0);
        }
        .mb-slider {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid var(--glass-line-strong);
            box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
            background: #050308;
        }
        .mb-track {
            display: flex;
            transition: transform .7s cubic-bezier(.65, 0, .35, 1);
        }
        .mb-slide {
            min-width: 100%;
            aspect-ratio: 16/6.4;
        }
        .mb-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .mb-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .12);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, .35);
            color: #fff;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            z-index: 3;
            transition: background .25s ease, border-color .25s ease, transform .25s ease;
        }
        .mb-arrow:hover {
            background: linear-gradient(135deg, #C77DFF, #B026FF);
            border-color: rgba(255, 255, 255, .6);
            transform: translateY(-50%) scale(1.08);
        }
        .mb-prev { left: 18px; }
        .mb-next { right: 18px; }
        .mb-dots {
            position: absolute;
            left: 50%;
            bottom: 18px;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 3;
        }
        .mb-dots button {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: none;
            padding: 0;
            background: rgba(255, 255, 255, .45);
            cursor: pointer;
            transition: width .25s ease, background .25s ease;
        }
        .mb-dots button.active {
            width: 26px;
            border-radius: 6px;
            background: linear-gradient(135deg, #C77DFF, #B026FF);
        }
        .mb-caption {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 28px 34px;
            background: linear-gradient(120deg, #ffffff 0%, #f4ecff 100%);
            border-top: 3px solid var(--purple-mid);
        }
        .mb-caption-inner { flex: 1; min-width: 0; }
        .mb-tag {
            display: inline-block;
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            padding: 5px 12px;
            border-radius: 999px;
            color: #fff;
            background: linear-gradient(135deg, #B026FF, #7B2FE0);
            margin-bottom: 10px;
        }
        .mb-caption-inner h3 {
            font-family: var(--display);
            font-size: 1.4rem;
            font-weight: 700;
            color: #1b0f2e;
            margin-bottom: 6px;
        }
        .mb-caption-inner p {
            font-size: .92rem;
            color: #5c4d75;
            max-width: 520px;
        }
        .mb-btn {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            border-radius: 999px;
            font-family: var(--display);
            font-weight: 600;
            font-size: .92rem;
            color: #fff;
            background: linear-gradient(135deg, #C77DFF, #B026FF 55%, #7B2FE0);
            box-shadow: 0 10px 30px rgba(176, 38, 255, .4);
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .mb-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 36px rgba(176, 38, 255, .55);
        }
        /* ─── SERVICE ICONS STRIP (purple + white) ─── */
        .mb-services {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
        .mb-service {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 8px;
            padding: 26px 16px;
            border-radius: 18px;
            background: linear-gradient(160deg, #ffffff, #f3ecff);
            border: 1px solid rgba(176, 38, 255, .18);
            box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
            transition: transform .3s ease, box-shadow .3s ease;
        }
        .mb-service:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 38px rgba(176, 38, 255, .35);
        }
        .mb-service-icon {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #B026FF, #7B2FE0);
            color: #fff;
            box-shadow: 0 8px 20px rgba(176, 38, 255, .4);
        }
        .mb-service-icon svg { width: 26px; height: 26px; }
        .mb-service b {
            font-family: var(--display);
            font-size: .92rem;
            font-weight: 700;
            color: #1b0f2e;
        }
        .mb-service span {
            font-size: .78rem;
            color: #6b5c85;
            line-height: 1.4;
        }
        @media(max-width:860px) {
            .mb-slide { aspect-ratio: 12/5; }
            .mb-caption { flex-direction: column; align-items: flex-start; padding: 22px; }
            .mb-btn { width: 100%; justify-content: center; }
            .mb-services { grid-template-columns: repeat(2, 1fr); }
        }
        @media(max-width:480px) {
            .mb-arrow { width: 36px; height: 36px; font-size: 1.15rem; }
        }
        /* ─── AZAADI SALE POPUP (big centered modal, white + purple, uses your artwork) ─── */
        .azaadi-popup {
            position: fixed;
            inset: 0;
            z-index: 9998;
            background: rgba(5, 5, 6, .8);
            backdrop-filter: blur(14px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .5s ease;
        }
        .azaadi-popup.show {
            opacity: 1;
            pointer-events: all;
        }
        .azaadi-popup-card {
            position: relative;
            width: 100%;
            max-width: 620px;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: #ffffff;
            border: 1px solid rgba(193, 59, 255, .3);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(193, 59, 255, .12), 0 0 80px rgba(193, 59, 255, .35);
            transform: translateY(30px) scale(.96);
            transition: transform .6s cubic-bezier(.2, .9, .3, 1);
        }
        .azaadi-popup-card::after {
            content: '';
            position: absolute;
            inset: -2px;
            z-index: -1;
            border-radius: 26px;
            background: conic-gradient(from 0deg, var(--purple-electric), #ffffff, var(--purple-mid), #ffffff, var(--purple-electric));
            opacity: 0;
            animation: azaadiRingSpin 6s linear infinite;
        }
        .azaadi-popup.show .azaadi-popup-card::after { opacity: .55; }
        @keyframes azaadiRingSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .azaadi-popup-sparkle {
            position: absolute;
            color: var(--purple-electric);
            opacity: 0;
            animation: azaadiSparkle 2.2s ease-in-out infinite;
            pointer-events: none;
            z-index: 2;
        }
        .azaadi-popup-sparkle.s1 { top: 14px; left: 20px; font-size: 1.1rem; animation-delay: .1s; }
        .azaadi-popup-sparkle.s2 { top: 40px; left: 52px; font-size: .7rem; animation-delay: .9s; }
        .azaadi-popup-sparkle.s3 { top: 18px; left: 46%; font-size: .85rem; animation-delay: 1.5s; }
        @keyframes azaadiSparkle {
            0%, 100% { opacity: 0; transform: scale(.6) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
        }
        .azaadi-popup.show .azaadi-popup-card {
            transform: translateY(0) scale(1);
        }
        .azaadi-popup-image {
            position: relative;
            width: 100%;
            aspect-ratio: 16/6.4;
            background: #050308;
        }
        .azaadi-popup-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .azaadi-popup-body {
            padding: 32px 38px 38px;
            background: linear-gradient(120deg, #ffffff 0%, #faf6ff 55%, #f3e9ff 100%);
        }
        .azaadi-popup-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, .85);
            color: #7B2FE0;
            font-size: .95rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
            transition: background .2s ease, transform .2s ease;
        }
        .azaadi-popup-close:hover { background: #ffffff; transform: scale(1.06); }
        .azaadi-popup-badge {
            display: inline-block;
            font-family: var(--display);
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: 999px;
            color: #6E2FD9;
            background: rgba(176, 38, 255, .12);
            border: 1px solid rgba(176, 38, 255, .25);
            margin-bottom: 14px;
        }
        .azaadi-popup-body h2 {
            font-family: var(--display);
            font-size: clamp(1.5rem, 3.2vw, 2.1rem);
            font-weight: 700;
            color: #1b0f2e;
            margin-bottom: 10px;
            line-height: 1.15;
        }
        .azaadi-popup-body p {
            font-size: .98rem;
            color: #5c4d75;
            line-height: 1.65;
            max-width: 480px;
            margin-bottom: 26px;
        }
        .azaadi-popup-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }
        .azaadi-popup-actions .btn-primary {
            background: linear-gradient(135deg, var(--purple-electric), var(--purple-mid) 55%, var(--purple-primary));
            color: #fff;
            box-shadow: 0 10px 30px rgba(193, 59, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
        }
        .azaadi-popup-actions .btn-ghost {
            font-size: .95rem;
            color: var(--purple-primary);
            border: 1.5px solid rgba(193, 59, 255, .45);
            background: rgba(193, 59, 255, .08);
        }
        .azaadi-popup-actions .btn-ghost::before { display: none; }
        .azaadi-popup-actions .btn-ghost:hover {
            border-color: rgba(193, 59, 255, .75);
            background: rgba(193, 59, 255, .16);
        }
        @media(max-width:600px) {
            .azaadi-popup-body { padding: 26px 22px 30px; }
            .azaadi-popup-actions { flex-direction: column; }
            .azaadi-popup-actions a { width: 100%; text-align: center; justify-content: center; }
        }
        .scroll-cue {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 4;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: var(--ink-faint);
            font-family: var(--mono);
            font-size: .65rem;
            letter-spacing: .25em;
            text-transform: uppercase;
        }
        .scroll-cue i {
            width: 1px;
            height: 30px;
            background: linear-gradient(var(--purple-soft), transparent);
            animation: scrollDown 1.8s ease-in-out infinite;
        }
        @keyframes scrollDown {
            0% {
                opacity: 0;
                transform: translateY(-6px);
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translateY(10px);
            }
        }

        /* ─── SECTIONS ─── */
        section {
            padding: 100px 0;
            position: relative;
            z-index: 3;
        }
        .section-head {
            max-width: 680px;
            margin-bottom: 56px;
        }
        .section-head.center {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        .tag {
            font-family: var(--mono);
            font-size: .72rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: #ffffff;
            margin-bottom: 16px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-shadow: 0 0 12px rgba(193, 59, 255, .65), 0 0 24px rgba(139, 62, 255, .35);
        }
        .tag::before {
            content: '';
            width: 24px;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--purple-electric), transparent);
            animation: tagPulse 2.4s ease-in-out infinite;
        }
        @keyframes tagPulse {
            0%, 100% { opacity: .5; width: 18px; }
            50% { opacity: 1; width: 30px; }
        }
        .sec-icon {
            width: 44px;
            height: 44px;
            font-size: 1.2rem;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .section-head.center .sec-icon {
            margin-left: auto;
            margin-right: auto;
        }
        .section-head h2 {
            font-family: var(--display);
            font-weight: 700;
            font-size: clamp(1.9rem, 3.6vw, 2.8rem);
            line-height: 1.15;
            position: relative;
            padding-bottom: 20px;
            text-shadow: 0 0 26px rgba(193, 59, 255, .28);
        }
        .section-head h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 64px;
            height: 3px;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--purple-mid), var(--purple-soft));
            box-shadow: 0 0 14px rgba(176, 38, 255, .5);
        }
        .why-card:hover,
        .service-card:hover,
        .price-card:hover,
        .test-card:hover,
        .industry-card:hover,
        .advanced-card:hover,
        .welcome-card:hover,
        .contact-info-card:hover,
        .portfolio-detail-card:hover {
            border-color: var(--purple-electric);
            box-shadow: 0 0 0 1px rgba(193, 59, 255, .35), 0 12px 40px rgba(193, 59, 255, .22);
        }
        .section-head.center h2::after {
            left: 50%;
            transform: translateX(-50%);
        }
        .section-head p {
            margin-top: 18px;
            color: var(--ink-dim);
            font-size: 1.02rem;
            line-height: 1.7;
        }
        .reveal {
            opacity: 0;
            transform: translateY(28px) scale(.98);
            transition: opacity .8s cubic-bezier(.2, .7, .3, 1), transform .8s cubic-bezier(.2, .7, .3, 1);
        }
        .reveal.in {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .reveal-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: opacity .9s ease, transform .9s ease;
        }
        .reveal-left.in {
            opacity: 1;
            transform: translateX(0);
        }
        .reveal-right {
            opacity: 0;
            transform: translateX(50px);
            transition: opacity .9s ease, transform .9s ease;
        }
        .reveal-right.in {
            opacity: 1;
            transform: translateX(0);
        }
        .stagger-parent>* {
            opacity: 0;
            transform: translateY(26px);
            transition: opacity .6s ease, transform .6s ease;
        }
        .stagger-parent.in>* {
            opacity: 1;
            transform: translateY(0);
        }
        .stagger-parent.in>*:nth-child(1) {
            transition-delay: .02s;
        }
        .stagger-parent.in>*:nth-child(2) {
            transition-delay: .10s;
        }
        .stagger-parent.in>*:nth-child(3) {
            transition-delay: .18s;
        }
        .stagger-parent.in>*:nth-child(4) {
            transition-delay: .26s;
        }
        .stagger-parent.in>*:nth-child(5) {
            transition-delay: .34s;
        }
        .stagger-parent.in>*:nth-child(6) {
            transition-delay: .42s;
        }
        .stagger-parent.in>*:nth-child(7) {
            transition-delay: .50s;
        }

        .icon-badge {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(150deg, rgba(193, 59, 255, .32) 0%, rgba(122, 43, 224, .38) 45%, rgba(15, 8, 26, .95) 100%);
            border: 1px solid rgba(193, 59, 255, .55);
            margin-bottom: 20px;
            transition: transform .35s, background .35s, border-color .35s, box-shadow .35s;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 22px rgba(193, 59, 255, .38);
            position: relative;
            overflow: hidden;
            font-size: 1.4rem;
            color: #ffffff;
        }
        .icon-badge:hover {
            transform: translateY(-3px);
            border-color: var(--purple-electric);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 30px rgba(193, 59, 255, .55);
        }
        .icon-badge::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(226, 198, 255, 0) 0%, rgba(226, 198, 255, .1) 30%, rgba(226, 198, 255, .35) 50%, rgba(226, 198, 255, .1) 70%, rgba(226, 198, 255, 0) 100%);
            background-size: 200% 200%;
            animation: iconShine 5s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes iconShine {
            0% {
                transform: translateX(-100%) rotate(25deg);
            }
            50% {
                transform: translateX(100%) rotate(25deg);
            }
            100% {
                transform: translateX(100%) rotate(25deg);
            }
        }
        .icon-badge .obsidian-icon {
            width: 28px;
            height: 28px;
        }
        .icon-badge svg {
            width: 26px;
            height: 26px;
            stroke: var(--purple-soft);
            fill: none;
            stroke-width: 1.6;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 0 6px rgba(176, 38, 255, .55));
            position: relative;
            z-index: 1;
        }
        .ico svg {
            width: 18px;
            height: 18px;
            stroke: var(--purple-soft);
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* ─── WHO WE ARE (ADVANCED) ─── */
        .who-section {
            position: relative;
            overflow: hidden;
        }
        .who-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 60% 50% at 70% 30%, rgba(75, 54, 143, .08), transparent 60%);
            pointer-events: none;
        }
        .who-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        .who-image-wrap {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid var(--glass-line);
            box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
            aspect-ratio: 4/5;
        }
        .who-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .8s ease;
            filter: grayscale(20%) contrast(1.05);
        }
        .who-image-wrap:hover img {
            transform: scale(1.04);
        }
        .who-image-wrap .who-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 5, 6, .10) 0%, rgba(5, 5, 6, .50) 60%, rgba(5, 5, 6, .85) 100%);
            pointer-events: none;
        }
        .who-image-wrap .who-badge-float {
            position: absolute;
            bottom: 24px;
            left: 24px;
            right: 24px;
            background: rgba(12, 12, 15, .8);
            backdrop-filter: blur(12px);
            border: 1px solid var(--glass-line-strong);
            border-radius: 14px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            pointer-events: none;
        }
        .who-image-wrap .who-badge-float .obsidian-icon {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
        }
        .who-image-wrap .who-badge-float strong {
            font-family: var(--display);
            font-size: 1rem;
            color: #ffffff;
            display: block;
        }
        .who-image-wrap .who-badge-float span {
            font-family: var(--mono);
            font-size: .68rem;
            color: var(--ink-faint);
            letter-spacing: .05em;
        }
        .who-badges {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .who-badge {
            border: 1px solid var(--glass-line);
            border-radius: 14px;
            padding: 22px 24px;
            background: linear-gradient(160deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 40%);
            transition: border-color .3s, transform .3s, box-shadow .3s;
            position: relative;
            overflow: hidden;
        }
        .who-badge::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, var(--purple-soft), var(--purple-deep));
            transform: scaleY(0);
            transform-origin: top;
            transition: transform .4s ease;
        }
        .who-badge:hover::before {
            transform: scaleY(1);
        }
        .who-badge:hover {
            border-color: rgba(139, 115, 232, .4);
            transform: translateY(-3px);
            box-shadow: 0 12px 30px -16px rgba(75, 54, 143, .3);
        }
        .who-badge b {
            font-family: var(--display);
            font-size: 1.05rem;
            color: #ffffff;
            display: block;
            margin-bottom: 6px;
        }
        .who-badge span {
            font-size: .88rem;
            color: var(--ink-dim);
            line-height: 1.6;
        }

        /* ─── WHY CARDS ─── */
        .why-card {
            border-radius: 16px;
            border: 1px solid var(--glass-line);
            padding: 32px 26px;
            transition: transform .35s, border-color .35s, background .35s;
            position: relative;
            overflow: hidden;
            background: linear-gradient(160deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 40%);
        }
        .why-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--purple-deep), var(--purple-soft), var(--purple-light));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s;
        }
        .why-card:hover {
            transform: translateY(-6px);
            border-color: var(--glass-line-strong);
            background: var(--obsidian-1);
            box-shadow: 0 18px 44px -20px rgba(75, 54, 143, .4);
        }
        .why-card:hover::before {
            transform: scaleX(1);
        }
        .why-card h4 {
            font-family: var(--display);
            font-size: 1.08rem;
            margin-bottom: 10px;
            color: #ffffff;
        }
        .why-card p {
            font-size: .88rem;
            color: var(--ink-dim);
            line-height: 1.6;
        }
        .why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 26px;
        }

        /* ─── CHECK PILLS ─── */
        .check-pills {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px 30px;
            max-width: 640px;
            margin: 50px auto 0;
        }
        .check-pills li {
            font-size: .92rem;
            color: var(--ink-dim);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .check-pills li::before {
            content: '✓';
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            border-radius: 50%;
            background: rgba(139, 115, 232, .15);
            border: 1px solid var(--purple-soft);
            color: #ffffff;
            font-size: .65rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ─── SERVICES ─── */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }
        .service-card {
            border-radius: 16px;
            background: var(--obsidian-0);
            padding: 36px 28px;
            transition: transform .35s, border-color .35s, background .35s;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--glass-line);
        }
        .service-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, var(--purple-soft), var(--purple-deep));
            transform: scaleY(0);
            transform-origin: top;
            transition: transform .4s ease;
            z-index: 3;
        }
        .service-card:hover {
            transform: translateY(-4px);
            border-color: rgba(139, 115, 232, .35);
            box-shadow: 0 18px 44px -20px rgba(75, 54, 143, .4);
        }
        .service-card:hover::before {
            transform: scaleY(1);
        }
        .service-card .icon-badge {
            margin-bottom: 16px;
        }
        .service-card .stub {
            font-family: var(--mono);
            font-size: .66rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--ink-faint);
            margin-bottom: 8px;
        }
        .service-card h3 {
            font-family: var(--display);
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: #ffffff;
        }
        .service-card p {
            color: var(--ink-dim);
            font-size: .92rem;
            line-height: 1.65;
            flex-grow: 1;
        }
        .service-card.centered {
            grid-column: 2 / span 1;
            max-width: 100%;
        }

        /* ─── CTA ─── */
        .cta-banner {
            background: var(--obsidian-1);
            border-top: 1px solid var(--glass-line);
            border-bottom: 1px solid var(--glass-line);
            text-align: center;
            position: relative;
            overflow: hidden;
            padding: 80px 0;
        }
        .cta-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(75, 54, 143, .15), transparent 60%);
        }
        .cta-banner h2 {
            font-family: var(--display);
            font-weight: 700;
            font-size: clamp(2rem, 4.4vw, 3.4rem);
            position: relative;
            z-index: 2;
        }
        .cta-banner p {
            margin: 18px auto 36px;
            color: var(--ink-dim);
            max-width: 520px;
            position: relative;
            z-index: 2;
        }
        .cta-actions {
            display: flex;
            gap: 16px;
            justify-content: center;
            position: relative;
            z-index: 2;
            flex-wrap: wrap;
        }

        /* ─── FOOTER ─── */
        footer {
            padding: 80px 0 30px;
            border-top: 1px solid var(--glass-line);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 60px;
        }
        .footer-brand p {
            margin-top: 16px;
            color: var(--ink-dim);
            font-size: .92rem;
            max-width: 280px;
            line-height: 1.6;
        }
        .footer-social {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .footer-social a {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid var(--glass-line);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ink-dim);
            transition: all .3s;
        }
        .footer-social a:hover {
            border-color: var(--purple-soft);
            color: #ffffff;
            transform: translateY(-3px);
        }
        .footer-social a svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }
        .footer-col h5 {
            font-family: var(--mono);
            font-size: .72rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--ink-faint);
            margin-bottom: 18px;
        }
        .footer-col li {
            margin-bottom: 12px;
        }
        .footer-col a {
            color: var(--ink-dim);
            font-size: .9rem;
            transition: color .25s;
        }
        .footer-col a:hover {
            color: #ffffff;
        }
        .footer-bottom {
            border-top: 1px solid var(--glass-line);
            padding-top: 26px;
            display: flex;
            justify-content: space-between;
            font-size: .8rem;
            color: var(--ink-faint);
            flex-wrap: wrap;
            gap: 10px;
        }

        /* ─── WHATSAPP FLOAT (GREEN) ─── */
        .whatsapp-float {
            position: fixed;
            bottom: 26px;
            right: 26px;
            z-index: 400;
            width: 58px;
            height: 58px;
            background: linear-gradient(145deg, #4ADE80, #25D366 40%, #128C7E 70%, #075E54);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(37, 211, 102, .5);
            animation: pulseWA 2.4s ease-in-out infinite;
            transition: transform .3s, bottom .4s cubic-bezier(.2, .8, .3, 1);
            border: 1px solid rgba(74, 222, 128, .3);
            overflow: hidden;
        }
        .whatsapp-float::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, 0) 100%);
            animation: metallicShine 4s ease-in-out infinite;
            pointer-events: none;
            border-radius: 50%;
        }
        .whatsapp-float svg {
            width: 28px;
            height: 28px;
            fill: #fff;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
        }
        @keyframes pulseWA {
            0%,
            100% {
                box-shadow: 0 8px 24px rgba(37, 211, 102, .5);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 8px 30px rgba(37, 211, 102, .8), 0 0 0 8px rgba(37, 211, 102, .12);
                transform: scale(1.05);
            }
        }
        .whatsapp-float:hover {
            transform: scale(1.1);
        }

        /* ─── WHATSAPP POPUP ─── */
        .wa-popup {
            position: fixed;
            bottom: 96px;
            right: 26px;
            z-index: 401;
            width: 320px;
            max-width: calc(100vw - 40px);
            background: var(--obsidian-1);
            border: 1px solid var(--glass-line-strong);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7), 0 0 40px rgba(37, 211, 102, .10);
            opacity: 0;
            transform: translateY(16px) scale(.96);
            pointer-events: none;
            transition: opacity .3s ease, transform .3s ease, bottom .4s cubic-bezier(.2, .8, .3, 1);
        }
        .wa-popup.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: all;
        }
        .wa-popup-head {
            background: linear-gradient(135deg, #4ADE80, #25D366 45%, #128C7E 80%);
            padding: 18px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            overflow: hidden;
        }
        .wa-popup-head::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, 0) 70%);
            animation: metallicShine 4s ease-in-out infinite;
        }
        .wa-popup-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(255, 255, 255, .3);
            overflow: hidden;
        }
        .wa-popup-avatar .obsidian-icon {
            width: 24px;
            height: 24px;
        }
        .wa-popup-head div.wa-who {
            position: relative;
            z-index: 1;
        }
        .wa-popup-head b {
            font-family: var(--display);
            font-size: .95rem;
            color: #fff;
            display: block;
        }
        .wa-popup-head span {
            font-family: var(--mono);
            font-size: .68rem;
            color: rgba(255, 255, 255, .8);
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 2px;
        }
        .wa-popup-head span::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4ADE80;
            box-shadow: 0 0 6px #4ADE80;
        }
        .wa-popup-close {
            margin-left: auto;
            position: relative;
            z-index: 1;
            background: rgba(255, 255, 255, .12);
            border: none;
            color: #fff;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .9rem;
        }
        .wa-popup-body {
            padding: 18px 20px;
        }
        .wa-chat-log {
            max-height: 300px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 14px;
            padding-right: 4px;
        }
        .wa-chat-log::-webkit-scrollbar { width: 4px; }
        .wa-chat-log::-webkit-scrollbar-thumb { background: rgba(176,38,255,.35); border-radius: 4px; }
        .wa-popup-msg,
        .wa-msg-bot {
            background: var(--obsidian-2);
            border: 1px solid var(--glass-line);
            border-radius: 12px 12px 12px 2px;
            padding: 12px 14px;
            font-size: .85rem;
            color: var(--ink-dim);
            line-height: 1.55;
            align-self: flex-start;
            max-width: 92%;
            animation: waFadeIn .3s ease;
        }
        .wa-msg-user {
            background: linear-gradient(135deg, rgba(37,211,102,.25), rgba(18,140,126,.25));
            border: 1px solid rgba(37,211,102,.35);
            border-radius: 12px 12px 2px 12px;
            padding: 10px 14px;
            font-size: .85rem;
            color: var(--ink);
            line-height: 1.5;
            align-self: flex-end;
            max-width: 88%;
            animation: waFadeIn .3s ease;
        }
        .wa-msg-result {
            background: linear-gradient(155deg, rgba(176,38,255,.16), rgba(42,10,94,.3));
            border: 1px solid rgba(176,38,255,.4);
            border-radius: 12px 12px 12px 2px;
            padding: 14px 16px;
            align-self: flex-start;
            max-width: 96%;
            animation: waFadeIn .3s ease;
        }
        .wa-msg-result .wa-result-tag {
            font-family: var(--mono);
            font-size: .65rem;
            letter-spacing: .05em;
            color: #ffffff;
            text-transform: uppercase;
        }
        .wa-msg-result .wa-result-title {
            font-family: var(--display);
            font-size: 1.05rem;
            color: var(--ink);
            margin: 4px 0 2px;
        }
        .wa-msg-result .wa-result-price {
            font-family: var(--mono);
            color: #ffffff;
            font-size: .82rem;
            margin-bottom: 6px;
        }
        .wa-msg-result p {
            font-size: .82rem;
            color: var(--ink-dim);
            line-height: 1.5;
        }
        @keyframes waFadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .wa-typing {
            display: flex;
            gap: 4px;
            padding: 12px 14px;
            align-self: flex-start;
        }
        .wa-typing span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--purple-soft);
            opacity: .5;
            animation: waTyping 1s ease-in-out infinite;
        }
        .wa-typing span:nth-child(2) { animation-delay: .15s; }
        .wa-typing span:nth-child(3) { animation-delay: .3s; }
        @keyframes waTyping {
            0%, 60%, 100% { transform: translateY(0); opacity: .5; }
            30% { transform: translateY(-4px); opacity: 1; }
        }
        .wa-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 14px;
        }
        .wa-options button {
            text-align: left;
            background: rgba(37, 211, 102, .06);
            border: 1px solid var(--glass-line);
            color: var(--ink);
            font-size: .82rem;
            padding: 10px 14px;
            border-radius: 10px;
            transition: border-color .25s, background .25s;
        }
        .wa-options button:hover {
            border-color: #25D366;
            background: rgba(37, 211, 102, .12);
        }
        .wa-options .wa-restart {
            border-color: rgba(176,38,255,.35);
            background: rgba(176,38,255,.08);
        }
        .wa-options .wa-restart:hover {
            border-color: var(--purple-soft);
            background: rgba(176,38,255,.16);
        }
        .wa-popup-body .btn-wa {
            width: 100%;
            text-align: center;
            padding: 12px;
            font-size: .85rem;
        }
        .wa-type-row {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        .wa-type-row input {
            flex: 1;
            background: var(--obsidian-2);
            border: 1px solid var(--glass-line);
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 16px;
            color: var(--ink);
            font-family: var(--body);
        }
        .wa-type-row input:focus {
            outline: none;
            border-color: var(--purple-electric);
        }
        .wa-type-row input::placeholder {
            color: var(--ink-faint);
        }
        .wa-type-row button {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            border-radius: 10px;
            background: linear-gradient(150deg, rgba(193, 59, 255, .35), rgba(122, 43, 224, .4));
            border: 1px solid rgba(193, 59, 255, .5);
            color: var(--ink);
            font-size: 1rem;
            transition: border-color .25s, transform .2s;
        }
        .wa-type-row button:hover {
            border-color: var(--purple-electric);
            transform: scale(1.05);
        }

        /* ─── BACK TO TOP ─── */
        #backToTop {
            position: fixed;
            bottom: 26px;
            left: 26px;
            z-index: 402;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1px solid var(--glass-line-strong);
            background: linear-gradient(145deg, rgba(21, 21, 25, .9), rgba(12, 12, 15, .9));
            backdrop-filter: blur(8px);
            color: var(--purple-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translateY(10px) scale(.9);
            pointer-events: none;
            box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .6);
            transition: opacity .35s, transform .35s, border-color .3s, color .3s, box-shadow .3s, bottom .4s cubic-bezier(.2, .8, .3, 1);
        }
        #backToTop svg {
            width: 20px;
            height: 20px;
        }
        #backToTop.show {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: all;
        }
        #backToTop:hover {
            transform: translateY(-3px) scale(1.05);
            border-color: var(--purple-soft);
            color: #fff;
            background: linear-gradient(145deg, #C77DFF, #B026FF 55%, #7B2FE0);
            box-shadow: 0 10px 30px -8px rgba(176, 38, 255, .65), 0 0 24px rgba(176, 38, 255, .35);
        }

        /* ─── MARQUEE ─── */
        .marquee-strip {
            border-top: 1px solid var(--glass-line);
            border-bottom: 1px solid var(--glass-line);
            background: var(--obsidian-1);
            padding: 16px 0;
            overflow: hidden;
            position: relative;
        }
        .marquee-track {
            display: flex;
            width: max-content;
            animation: scrollLeft 26s linear infinite;
        }
        .marquee-track span {
            font-family: var(--display);
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--ink-faint);
            padding: 0 28px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 28px;
        }
        .marquee-track span i {
            width: 6px;
            height: 6px;
            background: var(--purple-soft);
            display: inline-block;
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
        }
        @keyframes scrollLeft {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-50%);
            }
        }

        /* ─── IMPACT BANNER ─── */
        .impact-banner {
            position: relative;
            overflow: hidden;
            padding: 30px 0;
            text-align: center;
            background: linear-gradient(100deg, #1a1030 0%, #2A1A5A 22%, #4B368F 45%, #5F46B0 55%, #4B368F 68%, #2A1A5A 85%, #1a1030 100%);
            background-size: 260% 100%;
            animation: obsidianSheen 9s ease-in-out infinite;
            border-top: 1px solid rgba(196, 181, 240, .25);
            border-bottom: 1px solid rgba(196, 181, 240, .25);
        }
        .impact-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(255, 255, 255, .5) 1px, transparent 1px);
            background-size: 26px 26px;
            opacity: .05;
            pointer-events: none;
        }
        .impact-banner::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -20%;
            width: 60%;
            height: 200%;
            background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .10), transparent);
            animation: metallicShine 5s ease-in-out infinite;
            pointer-events: none;
        }
        .impact-track {
            display: flex;
            width: max-content;
            animation: scrollLeft 20s linear infinite;
            position: relative;
            z-index: 2;
        }
        .impact-track span {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            font-family: var(--display);
            font-weight: 700;
            font-size: 1.25rem;
            color: #fff;
            text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
            padding: 0 40px;
            white-space: nowrap;
            letter-spacing: .01em;
        }
        .impact-track span i {
            width: 7px;
            height: 7px;
            flex-shrink: 0;
            background: #fff;
            opacity: .85;
            display: inline-block;
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            box-shadow: 0 0 8px rgba(255, 255, 255, .8);
        }
        .impact-track span em {
            font-style: normal;
            color: #ffffff;
        }
        @media(max-width:768px) {
            .impact-track span {
                font-size: 1rem;
                padding: 0 26px;
            }
        }

        /* ─── TRUSTED STRIP ─── */
        .trusted-strip {
            padding: 40px 0;
            border-bottom: 1px solid var(--glass-line);
            overflow: hidden;
        }
        .trusted-strip .label {
            font-family: var(--mono);
            font-size: .7rem;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: var(--ink-faint);
            text-align: center;
            margin-bottom: 24px;
        }
        .trusted-track {
            display: flex;
            width: max-content;
            animation: scrollLeft 22s linear infinite;
        }
        .trusted-track span {
            font-family: var(--display);
            font-weight: 600;
            font-size: 1.25rem;
            color: var(--ink-faint);
            opacity: .55;
            padding: 0 38px;
            white-space: nowrap;
            transition: opacity .3s, color .3s;
        }
        .trusted-track span:hover {
            opacity: 1;
            color: #ffffff;
        }

        /* ─── FEATURED STRIP ─── */
        .featured-strip {
            padding: 50px 0;
            border-bottom: 1px solid var(--glass-line);
            border-top: 1px solid var(--glass-line);
            background: var(--obsidian-1);
            overflow: hidden;
        }
        .featured-strip .label {
            font-family: var(--mono);
            font-size: .7rem;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: var(--ink-faint);
            text-align: center;
            margin-bottom: 24px;
        }
        .featured-track {
            display: flex;
            width: max-content;
            animation: scrollLeft 24s linear infinite reverse;
        }
        .featured-track span {
            font-family: var(--mono);
            font-weight: 500;
            font-size: .95rem;
            color: var(--ink-dim);
            padding: 0 30px;
            white-space: nowrap;
            letter-spacing: .03em;
            opacity: .75;
        }

        /* ─── COUNTER ROW ─── */
        .counter-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 26px;
            margin-bottom: 56px;
            text-align: center;
        }
        .counter-row div {
            border-top: 2px solid var(--purple-soft);
            padding-top: 18px;
        }
        .counter-row b {
            display: block;
            font-family: var(--display);
            font-size: 2.4rem;
            color: #ffffff;
        }
        .counter-row span {
            font-family: var(--mono);
            font-size: .72rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--ink-faint);
        }

        /* ─── FULL BANNER ─── */
        .full-banner {
            position: relative;
            height: 440px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-attachment: scroll;
        }
        .full-banner .fb-shade {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 5, 6, .6) 0%, rgba(5, 5, 6, .9) 100%);
        }
        .full-banner .fb-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 24px;
        }
        .full-banner h2 {
            font-family: var(--display);
            font-weight: 700;
            font-size: clamp(1.9rem, 4.4vw, 3.2rem);
            max-width: 820px;
            line-height: 1.15;
        }
        .full-banner p {
            color: var(--ink-dim);
            font-size: 1.02rem;
            margin: 18px 0 30px;
            max-width: 560px;
        }

        /* ─── PROMO BANNER ─── */
        .promo-banner {
            position: relative;
            height: 400px;
            overflow: hidden;
        }
        .promo-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1s ease;
            background-size: cover;
            background-position: center;
        }
        .promo-slide.active {
            opacity: 1;
        }
        .promo-shade {
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, rgba(5, 5, 6, .94) 30%, rgba(5, 5, 6, .55) 65%, rgba(5, 5, 6, .28));
        }
        .promo-content {
            position: relative;
            z-index: 2;
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 32px;
            height: 100%;
            display: flex;
            align-items: center;
        }
        .promo-text {
            max-width: 540px;
        }
        .promo-text .eyebrow {
            margin-bottom: 16px;
        }
        .promo-text h3 {
            font-family: var(--display);
            font-weight: 700;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.18;
            margin-bottom: 16px;
        }
        .promo-text p {
            color: var(--ink-dim);
            font-size: .98rem;
            line-height: 1.6;
            margin-bottom: 22px;
            max-width: 460px;
        }
        .promo-dots {
            position: absolute;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 5;
        }
        .promo-dots button {
            width: 28px;
            height: 3px;
            background: rgba(238, 238, 244, .28);
            border: none;
            transition: background .3s, width .3s;
        }
        .promo-dots button.active {
            background: var(--purple-soft);
            width: 42px;
        }

        /* ─── ABOUT ─── */
        .about-grid {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 60px;
            align-items: center;
        }
        .about-img-wrap {
            position: relative;
        }
        .about-img {
            aspect-ratio: 4/5;
            overflow: hidden;
            border: 1px solid var(--glass-line);
            clip-path: polygon(0 0, 100% 0, 100% 88%, 85% 100%, 0 100%);
            background: var(--obsidian-2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .about-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .about-img.logo-frame img {
            width: 60%;
            height: 60%;
            object-fit: contain;
            filter: drop-shadow(0 10px 30px rgba(75, 54, 143, .5));
        }
        .about-badge {
            position: absolute;
            bottom: -24px;
            right: -20px;
            background: var(--obsidian-2);
            border: 1px solid var(--glass-line-strong);
            padding: 20px 24px;
            text-align: center;
        }
        .about-badge b {
            display: block;
            font-family: var(--display);
            font-size: 2rem;
            color: #ffffff;
        }
        .about-badge span {
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--ink-faint);
        }
        .about-text p {
            color: var(--ink-dim);
            font-size: 1rem;
            line-height: 1.8;
            margin-bottom: 18px;
        }
        .about-quote {
            margin: 28px 0;
            padding-left: 22px;
            border-left: 2px solid var(--purple-soft);
            font-family: var(--display);
            font-size: 1.2rem;
            line-height: 1.5;
        }
        .about-mini-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        .about-mini-stats div {
            border-top: 1px solid var(--glass-line);
            padding-top: 12px;
        }
        .about-mini-stats b {
            display: block;
            font-family: var(--display);
            font-size: 1.4rem;
        }
        .about-mini-stats span {
            font-size: .78rem;
            color: var(--ink-faint);
        }

        /* ─── METALLIC BRAND SHOWCASE (replaces team photo collage) ─── */
        .brand-showcase-panel {
            position: relative;
            height: 420px;
            border-radius: 22px;
            overflow: hidden;
        }
        .brand-showcase-panel .showcase-cover {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        @keyframes showcaseSpin {
            to { transform: rotate(360deg); }
        }
        .brand-showcase-panel img {
            position: relative;
            z-index: 1;
            width: 62%;
            filter: drop-shadow(0 20px 40px rgba(176, 38, 255, .45));
        }
        .brand-showcase-panel img.showcase-photo {
            width: 260px;
            height: 260px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(217, 184, 255, .35);
        }
        .brand-showcase-panel .showcase-icon {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 220px;
            height: 220px;
        }
        .brand-showcase-panel .showcase-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 20px 40px rgba(176, 38, 255, .5));
        }
        .brand-showcase-panel .bsp-ring {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 1px solid rgba(217, 184, 255, .25);
            z-index: 0;
        }

        /* ─── WHY SHOWCASE ─── */
        .why-showcase {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 60px;
            align-items: center;
            margin-bottom: 70px;
        }
        .why-collage {
            position: relative;
            height: 420px;
        }
        .wc-img {
            position: absolute;
            object-fit: cover;
            border: 1px solid var(--glass-line);
            box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7);
            transition: transform .4s ease;
        }
        .wc-img:hover {
            transform: translateY(-6px);
        }
        .wc-1 {
            width: 60%;
            height: 88%;
            top: 0;
            left: 0;
            z-index: 2;
        }
        .wc-2 {
            width: 52%;
            height: 52%;
            bottom: 0;
            right: 0;
            z-index: 3;
            border-color: rgba(75, 54, 143, .4);
        }
        .wc-3 {
            width: 42%;
            height: 38%;
            top: 8%;
            right: 6%;
            z-index: 1;
            opacity: .85;
        }

        /* ─── CASE GRID ─── */
        .case-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px;
        }
        .case-card {
            border-radius: 16px;
            border: 1px solid var(--glass-line);
            padding: 34px 28px;
            transition: border-color .3s, transform .3s;
        }
        .case-card:hover {
            border-color: var(--purple-soft);
            transform: translateY(-4px);
            box-shadow: 0 16px 40px -18px rgba(75, 54, 143, .5);
        }
        .case-metric {
            font-family: var(--display);
            font-size: 2.6rem;
            color: #ffffff;
        }
        .case-metric-label {
            font-family: var(--mono);
            font-size: .7rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--ink-faint);
            margin: 6px 0 22px;
        }
        .case-card h4 {
            font-family: var(--display);
            font-size: 1.15rem;
            margin-bottom: 10px;
        }
        .case-card p {
            color: var(--ink-dim);
            font-size: .9rem;
            line-height: 1.6;
            margin-bottom: 18px;
        }
        .case-link {
            font-size: .85rem;
            font-weight: 600;
            color: var(--ink);
            border-bottom: 1px solid var(--purple-soft);
            padding-bottom: 2px;
            transition: color .3s, border-color .3s;
        }
        .case-link:hover {
            color: #ffffff;
            border-color: var(--purple-light);
        }

        /* ─── DETAILED PORTFOLIO GRID ─── */
        .portfolio-detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
        }
        .portfolio-detail-card {
            border: 1px solid var(--glass-line);
            border-radius: 18px;
            overflow: hidden;
            background: var(--obsidian-2);
            transition: transform .35s, border-color .35s, box-shadow .35s;
        }
        .portfolio-detail-card:hover {
            transform: translateY(-6px);
            border-color: var(--purple-soft);
            box-shadow: 0 20px 46px -20px rgba(122, 43, 224, .55);
        }
        .pd-cover {
            position: relative;
            aspect-ratio: 16 / 10;
            overflow: hidden;
        }
        .pd-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
        }
        .portfolio-detail-card:hover .pd-cover img {
            transform: scale(1.06);
        }
        .pd-cover::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(5,5,6,.85) 100%);
        }
        .pd-metric {
            position: absolute;
            left: 18px;
            bottom: 14px;
            z-index: 2;
            font-family: var(--display);
            font-size: 1.6rem;
            display: flex;
            flex-direction: column;
            line-height: 1.1;
        }
        .pd-metric small {
            font-family: var(--mono);
            font-size: .62rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--ink-dim);
            font-weight: 500;
        }
        .pd-body {
            padding: 24px 26px 28px;
        }
        .pd-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 6px;
        }
        .pd-top h3 {
            font-family: var(--display);
            font-size: 1.15rem;
            line-height: 1.35;
        }
        .pd-industry {
            flex-shrink: 0;
            font-family: var(--mono);
            font-size: .62rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #ffffff;
            border: 1px solid var(--glass-line-strong);
            border-radius: 20px;
            padding: 4px 10px;
            white-space: nowrap;
        }
        .pd-client {
            font-size: .82rem;
            color: var(--ink-faint);
            margin-bottom: 14px;
        }
        .pd-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        .pd-tags span {
            font-size: .72rem;
            font-family: var(--mono);
            color: var(--ink-dim);
            border: 1px solid var(--glass-line);
            border-radius: 8px;
            padding: 4px 9px;
        }
        .pd-tags.pd-tech span {
            color: #ffffff;
            border-color: var(--glass-line-strong);
        }
        .pd-open {
            margin-top: 16px;
            font-size: .85rem;
            padding: 12px 22px;
        }

        /* ─── CASE STUDY MODAL ─── */
        .pd-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 999;
            background: rgba(5, 5, 6, .82);
            backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            visibility: hidden;
            transition: opacity .3s ease;
        }
        .pd-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .pd-modal {
            position: relative;
            width: 100%;
            max-width: 780px;
            max-height: 88vh;
            overflow-y: auto;
            background: var(--obsidian-2);
            border: 1px solid var(--glass-line-strong);
            border-radius: 20px;
            transform: translateY(24px);
            transition: transform .35s ease;
        }
        .pd-modal-overlay.active .pd-modal {
            transform: translateY(0);
        }
        .pd-modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 3;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid var(--glass-line-strong);
            background: rgba(5,5,6,.6);
            color: var(--ink);
            font-size: 1rem;
            cursor: pointer;
        }
        .pd-modal-cover {
            aspect-ratio: 16 / 8;
            overflow: hidden;
            border-radius: 20px 20px 0 0;
        }
        .pd-modal-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .pd-modal-body {
            padding: 30px 34px 34px;
        }
        .pd-modal-body h3 {
            font-family: var(--display);
            font-size: 1.5rem;
            margin: 8px 0 4px;
        }
        .pd-modal-body h5 {
            font-family: var(--mono);
            font-size: .7rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #ffffff;
            margin-bottom: 8px;
        }
        .pd-modal-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
            margin: 20px 0 22px;
        }
        .pd-modal-grid p {
            font-size: .9rem;
            color: var(--ink-dim);
            line-height: 1.6;
        }
        .pd-modal-body > .check-list {
            margin-bottom: 22px;
        }
        .pd-modal-tech {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 26px;
        }
        .pd-modal-tech > span {
            font-size: .8rem;
            color: var(--ink-faint);
        }
        .pd-modal-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }
        @media (max-width: 720px) {
            .portfolio-detail-grid { grid-template-columns: 1fr; }
            .pd-modal-grid { grid-template-columns: 1fr; }
        }

        /* ─── SLIDER ─── */
        .slider {
            position: relative;
            border: 1px solid var(--glass-line);
            overflow: hidden;
        }
        .slides {
            display: flex;
            transition: transform .7s cubic-bezier(.65, 0, .35, 1);
        }
        .slide {
            min-width: 100%;
            position: relative;
            height: 520px;
        }
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(45%) contrast(1.1) brightness(.72);
        }
        .slide-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(5, 5, 6, .94) 5%, rgba(5, 5, 6, .18) 55%, transparent 80%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 44px;
        }
        .slide-tag {
            font-family: var(--mono);
            font-size: .72rem;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: #ffffff;
            margin-bottom: 12px;
        }
        .slide-overlay h3 {
            font-family: var(--display);
            font-size: 2rem;
            max-width: 560px;
        }
        .slide-overlay p {
            margin-top: 10px;
            color: var(--ink-dim);
            max-width: 480px;
        }
        .slider-nav {
            position: absolute;
            bottom: 24px;
            right: 44px;
            display: flex;
            gap: 10px;
            z-index: 3;
        }
        .dot {
            width: 26px;
            height: 3px;
            background: rgba(255, 255, 255, .25);
            border: none;
            transition: background .3s, width .3s;
        }
        .dot.active {
            background: var(--purple-soft);
            width: 40px;
        }
        .slider-arrows {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 3;
            pointer-events: none;
        }
        .arrow-btn {
            pointer-events: all;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .3);
            background: rgba(5, 5, 6, .4);
            color: var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            backdrop-filter: blur(6px);
            transition: background .3s, border-color .3s;
        }
        .arrow-btn:hover {
            background: rgba(139, 115, 232, .2);
            border-color: var(--purple-soft);
        }

        /* ─── GALLERY ─── */
        .gallery-panel {
            display: none;
        }
        .gallery-panel.active {
            display: block;
        }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .gallery-item {
            border-radius: 16px;
            aspect-ratio: 1/1;
            overflow: hidden;
            border: 1px solid var(--glass-line);
            position: relative;
        }
        .gallery-item.wide {
            aspect-ratio: 16/10;
            grid-column: span 1;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(35%) contrast(1.1);
            transition: filter .4s, transform .5s;
        }
        .gallery-item:hover {
            border-color: var(--purple-soft);
            box-shadow: 0 16px 38px -18px rgba(75, 54, 143, .5);
        }
        .gallery-item:hover img {
            filter: grayscale(0%);
            transform: scale(1.06);
        }
        .gallery-item.logo-showcase {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 26px;
            background: radial-gradient(circle at 50% 40%, rgba(139, 62, 255, .16), var(--obsidian-1, #120a24) 72%);
        }
        .gallery-item.logo-showcase img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: none;
        }
        .gallery-item.logo-showcase:hover img {
            transform: scale(1.05);
            filter: drop-shadow(0 0 20px rgba(193, 59, 255, .55));
        }

        .gtab {
            padding: 11px 22px;
            border: 1px solid var(--glass-line);
            font-size: .86rem;
            font-weight: 600;
            color: var(--ink-dim);
            border-radius: var(--radius);
            transition: all .3s;
            background: transparent;
            position: relative;
            overflow: hidden;
        }
        .gtab.active {
            background: linear-gradient(145deg, #C77DFF, #B026FF 40%, #7B2FE0 70%, #2A0A5E 100%);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 20px rgba(176, 38, 255, .5);
            text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        }

        /* ─── PRICING ─── */
        .pricing-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }
        .ptab {
            padding: 11px 22px;
            border: 1px solid var(--glass-line);
            font-size: .86rem;
            font-weight: 600;
            color: var(--ink-dim);
            border-radius: var(--radius);
            transition: all .3s;
            background: transparent;
            position: relative;
            overflow: hidden;
        }
        .ptab.active {
            background: linear-gradient(145deg, #C77DFF, #B026FF 40%, #7B2FE0 70%, #2A0A5E 100%);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 20px rgba(176, 38, 255, .5);
            text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
        }
        .pricing-panel {
            display: none;
        }
        .pricing-panel.active {
            display: block;
        }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px;
            width: 100%;
        }
        @media(max-width:1024px) {
            .pricing-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        @media(max-width:768px) {
            .pricing-grid {
                grid-template-columns: 1fr;
            }
        }
        .price-card {
            border-radius: 18px;
            border: 1px solid var(--glass-line);
            padding: 38px 30px;
            position: relative;
            transition: transform .35s, border-color .35s, box-shadow .35s;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .price-card:hover {
            transform: translateY(-6px);
            border-color: rgba(139, 115, 232, .5);
            box-shadow: 0 20px 50px -20px rgba(75, 54, 143, .4);
        }
        .price-card.featured {
            background: linear-gradient(160deg, rgba(139, 115, 232, .08), rgba(75, 54, 143, .05));
            border-color: var(--purple-soft);
        }

        /* ─── METALLIC PURPLE PACKAGE CARDS ─── */
        .price-card.metallic {
            background: linear-gradient(155deg, rgba(122, 46, 220, .16) 0%, rgba(42, 10, 94, .35) 45%, rgba(12, 12, 15, .9) 100%);
            border: 1px solid rgba(176, 38, 255, .35);
            box-shadow: 0 20px 60px -24px rgba(75, 54, 143, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
        }
        .price-card.metallic::after {
            content: '';
            position: absolute;
            top: -60%;
            left: -60%;
            width: 60%;
            height: 220%;
            background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(217, 184, 255, .16) 45%, rgba(255, 255, 255, .28) 50%, rgba(217, 184, 255, .16) 55%, rgba(255, 255, 255, 0) 100%);
            transform: rotate(20deg);
            animation: cardSheen 6s ease-in-out infinite;
            pointer-events: none;
        }
        .price-card.metallic.featured {
            background: linear-gradient(155deg, rgba(176, 38, 255, .28) 0%, rgba(75, 24, 140, .4) 45%, rgba(12, 12, 15, .92) 100%);
            border-color: var(--purple-electric);
            box-shadow: 0 24px 70px -20px rgba(176, 38, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
        }
        @keyframes cardSheen {
            0% { left: -60%; }
            35% { left: 120%; }
            100% { left: 120%; }
        }
        .price-tier-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            background: linear-gradient(155deg, rgba(176, 38, 255, .22), rgba(42, 10, 94, .5));
            border: 1px solid rgba(217, 184, 255, .35);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px -10px rgba(176, 38, 255, .5);
            position: relative;
            z-index: 1;
        }
        .price-tier-icon svg {
            width: 28px;
            height: 28px;
            stroke: var(--purple-soft);
            fill: none;
            stroke-width: 1.6;
            filter: drop-shadow(0 0 6px rgba(176, 38, 255, .6));
        }
        .price-card-logo {
            position: absolute;
            top: 54px;
            right: 28px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            opacity: .9;
            box-shadow: 0 0 0 2px rgba(217, 184, 255, .3), 0 0 16px rgba(176, 38, 255, .4);
        }
        .pkg-price-range {
            font-size: 1rem;
            color: var(--ink-faint);
        }
        .price-badge {
            position: absolute;
            top: 16px;
            right: 28px;
            background: linear-gradient(145deg, #C77DFF, #B026FF 40%, #7B2FE0 70%, #2A0A5E 100%);
            color: #fff;
            font-size: .68rem;
            font-weight: 700;
            padding: 5px 12px;
            letter-spacing: .05em;
            border-radius: 4px;
            box-shadow: 0 4px 20px rgba(176, 38, 255, .5);
        }
        .discount-tag {
            position: absolute;
            top: 16px;
            left: 0;
            background: #ff5b5b;
            color: #fff;
            font-family: var(--mono);
            font-size: .68rem;
            font-weight: 700;
            padding: 6px 14px 6px 16px;
            letter-spacing: .03em;
            clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
            box-shadow: 0 6px 18px -6px rgba(255, 91, 91, .6);
            z-index: 2;
        }

        /* ─── PACKAGE SPOTLIGHT LAYOUT (single-package pricing view) ─── */
        .pkg-spotlight {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            align-items: end;
            width: 100%;
        }
        .pkg-spotlight .price-card {
            border-radius: 4px 24px 4px 24px;
        }
        .pkg-spotlight .pkg-1 { transform: translateY(24px); }
        .pkg-spotlight .pkg-2 { transform: translateY(0); z-index: 1; }
        .pkg-spotlight .pkg-3 { transform: translateY(24px); }
        @media(max-width:1024px) {
            .pkg-spotlight {
                grid-template-columns: 1fr 1fr;
            }
            .pkg-spotlight .pkg-3 {
                grid-column: 1 / -1;
                transform: translateY(0);
            }
        }
        @media(max-width:768px) {
            .pkg-spotlight {
                grid-template-columns: 1fr;
            }
            .pkg-spotlight .pkg-1,
            .pkg-spotlight .pkg-2,
            .pkg-spotlight .pkg-3 {
                grid-column: auto;
                transform: none;
            }
        }
        .price-original {
            font-family: var(--mono);
            font-size: .95rem;
            color: var(--ink-faint);
            text-decoration: line-through;
            text-decoration-color: #ff5b5b;
            margin-top: 18px;
        }
        .price-card .pamount {
            font-family: var(--display);
            font-size: 2.5rem;
            margin: 14px 0 4px;
            color: #ffffff;
        }
        .price-card .pamount sup {
            font-size: 1rem;
            color: var(--ink-faint);
            font-weight: 400;
        }
        .price-card .pdesc {
            color: var(--ink-dim);
            font-size: .88rem;
            margin-bottom: 22px;
        }
        .price-card ul {
            margin-bottom: 28px;
            flex-grow: 1;
        }
        .price-card li {
            padding: 10px 0;
            border-top: 1px solid var(--glass-line);
            font-size: .9rem;
            color: var(--ink-dim);
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }
        .price-card li::before {
            content: '◆';
            color: #ffffff;
            font-size: .6rem;
            margin-top: 5px;
        }
        .price-card .btn-ghost,
        .price-card .btn-primary {
            width: 100%;
            text-align: center;
        }

        /* ─── FAQ ─── */
        .faq-list {
            max-width: 820px;
        }
        .faq-item {
            border-bottom: 1px solid var(--glass-line);
        }
        .faq-q {
            width: 100%;
            background: none;
            border: none;
            text-align: left;
            padding: 26px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            color: var(--ink);
            font-family: var(--display);
            font-size: 1.05rem;
            transition: color .3s;
        }
        .faq-q:hover {
            color: #ffffff;
        }
        .faq-q .plus {
            font-family: var(--mono);
            font-size: 1.2rem;
            color: #ffffff;
            transition: transform .35s;
            flex-shrink: 0;
        }
        .faq-item.open .faq-q .plus {
            transform: rotate(45deg);
        }
        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease, padding .4s ease;
        }
        .faq-item.open .faq-a {
            max-height: 220px;
            padding-bottom: 24px;
        }
        .faq-a p {
            color: var(--ink-dim);
            font-size: .92rem;
            line-height: 1.7;
            max-width: 640px;
        }

        /* ─── TESTIMONIALS (SINGLE ROW) ─── */
        .testimonials-wrap {
            overflow: hidden;
            position: relative;
            padding: 20px 0;
        }
        .test-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1240px;
            margin: 0 auto 20px;
            padding: 0 32px;
        }
        .test-swipe-hint {
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--ink-faint);
        }
        .test-arrows {
            display: flex;
            gap: 10px;
        }
        .arrow-btn-sm {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgba(226, 198, 255, .3);
            background: rgba(21, 21, 25, .5);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background .3s, border-color .3s, box-shadow .3s, transform .2s;
        }
        .arrow-btn-sm svg {
            width: 18px;
            height: 18px;
        }
        .arrow-btn-sm:hover {
            background: linear-gradient(145deg, #C77DFF, #B026FF 60%, #7B2FE0);
            border-color: var(--purple-soft);
            box-shadow: 0 0 20px rgba(176, 38, 255, .5);
            transform: translateY(-2px);
        }
        @media(max-width:600px) {
            .test-controls {
                padding: 0 20px;
            }
            .test-swipe-hint {
                font-size: .58rem;
                letter-spacing: .1em;
            }
            .arrow-btn-sm {
                width: 36px;
                height: 36px;
                flex-shrink: 0;
            }
        }
        .test-track {
            display: flex;
            gap: 24px;
            width: max-content;
            animation: scrollLeft 40s linear infinite;
        }
        .test-track.manual {
            width: auto;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            animation: none;
            padding: 4px 32px 12px;
            -ms-overflow-style: none;
            scrollbar-width: none;
            touch-action: pan-x;
            overscroll-behavior-x: contain;
        }
        .test-track.manual::-webkit-scrollbar {
            display: none;
        }
        .test-track.manual .test-card {
            scroll-snap-align: start;
        }
        .test-track:hover {
            animation-play-state: paused;
        }
        .test-card {
            width: 340px;
            flex-shrink: 0;
            border: 1px solid var(--glass-line);
            border-radius: 16px;
            padding: 26px 28px;
            background: var(--obsidian-0);
            transition: border-color .3s, transform .3s;
        }
        .test-card:hover {
            border-color: var(--purple-soft);
            transform: translateY(-4px);
        }
        .test-card p {
            color: var(--ink-dim);
            font-size: .92rem;
            line-height: 1.6;
            margin-bottom: 16px;
            font-style: italic;
        }
        .test-card .test-who {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .test-card .test-who img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid var(--glass-line);
            object-fit: cover;
        }
        .test-card .test-who b {
            display: block;
            font-family: var(--display);
            font-size: .9rem;
            color: #ffffff;
        }
        .test-card .test-who span {
            font-size: .78rem;
            color: var(--ink-faint);
        }

        /* ─── CONTACT ─── */
        .contact-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 50px;
        }
        .contact-form {
            border-radius: 18px;
            border: 1px solid var(--glass-line);
            padding: 40px;
            background: var(--obsidian-1);
        }
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin-bottom: 18px;
        }
        .field {
            margin-bottom: 18px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .field label {
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--ink-faint);
        }
        .field input,
        .field select,
        .field textarea {
            border-radius: 8px;
            background: var(--obsidian-0);
            border: 1px solid var(--glass-line);
            color: var(--ink);
            padding: 13px 14px;
            font-size: 16px;
            border-radius: var(--radius);
            transition: border-color .3s, box-shadow .3s;
        }
        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-color: var(--purple-soft);
            box-shadow: 0 0 20px rgba(75, 54, 143, .1);
        }
        .field textarea {
            resize: vertical;
            min-height: 110px;
        }
        .form-submit {
            border: none;
            width: 100%;
        }
        .form-note {
            margin-top: 16px;
            font-size: .82rem;
            color: var(--ink-faint);
            display: none;
        }
        .form-note.show {
            display: block;
            color: #ffffff;
        }
        .contact-info-card {
            border-radius: 16px;
            border: 1px solid var(--glass-line);
            padding: 32px;
            margin-bottom: 20px;
            transition: border-color .3s, box-shadow .3s;
        }
        .contact-info-card:hover {
            border-color: rgba(139, 115, 232, .3);
            box-shadow: 0 0 30px rgba(75, 54, 143, .05);
        }
        .contact-info-card h5 {
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--ink-faint);
            margin-bottom: 10px;
        }
        .contact-info-card p,
        .contact-info-card a {
            font-family: var(--display);
            font-size: 1.15rem;
            color: #ffffff;
            transition: color .3s;
        }
        .contact-info-card a:hover {
            color: #fff;
        }
        .contact-info-card .social-inline {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }
        .contact-info-card .social-inline a {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid var(--glass-line);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
        }
        .contact-info-card .social-inline a svg {
            width: 15px;
            height: 15px;
            fill: currentColor;
        }
        .contact-map {
            aspect-ratio: 16/10;
            border: 1px solid var(--glass-line);
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--obsidian-2), var(--obsidian-1));
        }
        .contact-map::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: .5;
            background-image: linear-gradient(var(--glass-line) 1px, transparent 1px), linear-gradient(90deg, var(--glass-line) 1px, transparent 1px);
            background-size: 32px 32px;
        }
        .map-pin {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100%);
            text-align: center;
        }
        .map-pin i {
            display: block;
            width: 14px;
            height: 14px;
            margin: 0 auto;
            background: linear-gradient(135deg, #8B73E8, #4B368F);
            clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
            animation: pinPulse 2s ease-in-out infinite;
        }
        @keyframes pinPulse {
            0%,
            100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.25);
            }
        }
        .map-pin span {
            display: block;
            margin-top: 8px;
            font-family: var(--mono);
            font-size: .7rem;
            color: var(--ink-dim);
            white-space: nowrap;
        }

        /* ─── ESTIMATE ─── */
        .estimate-box {
            display: grid;
            grid-template-columns: 1.3fr 1fr;
            gap: 50px;
            border: 1px solid var(--glass-line);
            border-radius: 20px;
            padding: 44px;
            background: var(--obsidian-2);
        }
        .est-group {
            margin-bottom: 26px;
        }
        .est-group:last-child {
            margin-bottom: 0;
        }
        .est-group h4 {
            font-family: var(--mono);
            font-size: .72rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: #ffffff;
            margin-bottom: 14px;
        }
        .est-check {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            padding: 13px 16px;
            border: 1px solid var(--glass-line);
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: border-color .25s, background .25s;
        }
        .est-check:hover {
            border-color: rgba(139, 115, 232, .35);
        }
        .est-check .est-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .92rem;
        }
        .est-check input {
            accent-color: var(--purple-soft);
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .est-check .est-price {
            font-family: var(--mono);
            font-size: .8rem;
            color: var(--ink-faint);
            white-space: nowrap;
        }
        .est-summary {
            border-left: 1px solid var(--glass-line);
            padding-left: 44px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .est-summary .tag {
            margin-bottom: 6px;
        }
        .est-total {
            font-family: var(--display);
            font-size: 2.8rem;
            color: #ffffff;
            margin: 8px 0 6px;
            word-break: break-word;
        }
        .est-summary p {
            color: var(--ink-dim);
            font-size: .85rem;
            line-height: 1.6;
            margin-bottom: 22px;
        }

        /* ─── PROCESS ─── */
        .process-row {
            display: grid;
            grid-template-columns: 90px 1fr 1.3fr;
            gap: 30px;
            align-items: center;
            padding: 32px 0;
            border-bottom: 1px solid var(--glass-line);
            transition: padding-left .3s;
        }
        .process-row:hover {
            padding-left: 14px;
            background: rgba(139, 115, 232, .04);
        }
        .process-row .pnum {
            font-family: var(--mono);
            color: var(--ink-faint);
            font-size: 1rem;
        }
        .process-row h4 {
            font-family: var(--display);
            font-size: 1.3rem;
        }
        .process-row p {
            color: var(--ink-dim);
            font-size: .95rem;
            line-height: 1.65;
        }

        /* ─── TEAM ─── */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 36px;
        }
        .team-card {
            position: relative;
        }
        .team-photo-wrap {
            position: relative;
            aspect-ratio: 4/4.6;
            overflow: hidden;
            clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%);
            border: 1px solid var(--glass-line);
        }
        .team-photo-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(60%) contrast(1.1);
            transition: filter .5s, transform .6s;
        }
        .team-card:hover .team-photo-wrap img {
            filter: grayscale(0%) contrast(1.05);
            transform: scale(1.05);
        }
        .team-photo-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(200deg, rgba(75, 54, 143, .25), rgba(139, 115, 232, .10) 60%, transparent);
            mix-blend-mode: overlay;
            opacity: .9;
        }
        .team-role-tag {
            position: absolute;
            bottom: 14px;
            left: 14px;
            z-index: 2;
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            background: rgba(5, 5, 6, .7);
            backdrop-filter: blur(6px);
            padding: 6px 10px;
            border: 1px solid var(--glass-line);
            color: #ffffff;
        }
        .team-info {
            margin-top: 18px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .team-info h3 {
            font-family: var(--display);
            font-size: 1.25rem;
        }
        .team-info span {
            display: block;
            margin-top: 4px;
            color: var(--ink-faint);
            font-size: .85rem;
        }
        .team-social {
            display: flex;
            gap: 10px;
        }
        .team-social a {
            width: 30px;
            height: 30px;
            border: 1px solid var(--glass-line);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .75rem;
            color: var(--ink-dim);
            transition: all .3s;
            border-radius: 4px;
        }
        .team-social a:hover {
            border-color: var(--purple-soft);
            color: #ffffff;
        }
        .team-wa {
            border-radius: 8px;
            margin-top: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--mono);
            font-size: .74rem;
            color: #25D366;
            border: 1px solid rgba(37, 211, 102, .3);
            padding: 8px 14px;
            border-radius: var(--radius);
            transition: background .25s, color .25s, box-shadow .25s;
            position: relative;
            overflow: hidden;
        }
        .team-wa:hover {
            background: #25D366;
            color: #0a0a0c;
            box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
        }
        .team-wa svg {
            width: 14px;
            height: 14px;
            position: relative;
            z-index: 1;
            fill: currentColor;
        }
        .team-wa span {
            position: relative;
            z-index: 1;
        }

        /* ─── REAL RESULTS (TEXT-ONLY) ─── */
        .results-grid {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .result-stat {
            background: var(--glass);
            border: 1px solid var(--glass-line);
            border-radius: 16px;
            padding: 28px 20px;
            text-align: center;
            transition: transform .25s, border-color .25s;
        }
        .result-stat:hover {
            transform: translateY(-4px);
            border-color: rgba(139, 115, 232, .4);
        }
        .result-stat span {
            display: block;
            font-family: var(--display);
            font-weight: 700;
            font-size: 2.1rem;
            margin-bottom: 10px;
        }
        .result-stat p {
            font-size: .85rem;
            color: var(--ink-dim);
            line-height: 1.5;
        }
        @media(max-width:768px) {
            .results-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ─── COMPARE TABLE ─── */
        .compare-table {
            max-width: 760px;
            margin: 0 auto;
            border: 1px solid var(--glass-line);
            border-radius: 16px;
            overflow: hidden;
        }
        .compare-row {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            align-items: center;
            padding: 16px 26px;
            border-bottom: 1px solid var(--glass-line);
            font-size: .9rem;
            color: var(--ink-dim);
        }
        .compare-row:last-child {
            border-bottom: none;
        }
        .compare-row div:nth-child(2),
        .compare-row div:nth-child(3) {
            text-align: center;
        }
        .compare-head {
            background: var(--obsidian-2);
            font-family: var(--display);
            font-weight: 700;
            color: var(--ink);
            font-size: .95rem;
        }
        .compare-head div:nth-child(2) {
            color: #ffffff;
        }
        .compare-yes {
            color: #ffffff;
            font-weight: 700;
            font-size: 1.05rem;
        }
        .compare-no {
            color: var(--ink-faint);
            font-size: 1.05rem;
        }

        /* ─── SERVICE ROW ─── */
        .service-row {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 56px;
            align-items: center;
            margin-bottom: 80px;
        }
        .service-row:last-child {
            margin-bottom: 0;
        }
        .service-row.reverse {
            grid-template-columns: 1.1fr .9fr;
        }
        .service-row.reverse .service-row-img {
            order: 2;
        }
        .service-row.reverse .service-row-text {
            order: 1;
        }
        .service-row-img {
            aspect-ratio: 5/4;
            overflow: hidden;
            border: 1px solid var(--glass-line);
            clip-path: polygon(0 0, 100% 0, 100% 90%, 88% 100%, 0 100%);
        }
        .service-row-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(45%) contrast(1.1);
        }
        .service-row-text {
            display: flex;
            flex-direction: column;
            gap: 34px;
        }
        .service-block h3 {
            font-family: var(--display);
            font-size: 1.4rem;
            margin-bottom: 10px;
        }
        .service-block p {
            color: var(--ink-dim);
            font-size: .94rem;
            line-height: 1.7;
            margin-bottom: 16px;
        }
        .check-list {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        .check-list li {
            font-size: .88rem;
            color: var(--ink-dim);
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            padding-left: 26px;
        }
        .check-list li::before {
            content: '';
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            border-radius: 50%;
            background: rgba(139, 115, 232, .15);
            border: 1px solid var(--purple-soft);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .check-list li::after {
            content: '✓';
            position: absolute;
            left: 3px;
            top: 50%;
            transform: translateY(-55%);
            font-size: .6rem;
            color: #ffffff;
        }

        /* ─── MANIFESTO / OUR PROMISE ─── */
        .manifesto-section {
            background: var(--obsidian-1);
            position: relative;
            overflow: hidden;
        }
        .manifesto-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 50% 40% at 60% 30%, rgba(75, 54, 143, .10), transparent 70%);
            pointer-events: none;
        }
        .manifesto-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        .manifesto-text .tag {
            margin-bottom: 12px;
        }
        .manifesto-text h2 {
            font-family: var(--display);
            font-weight: 700;
            font-size: clamp(1.8rem, 3.4vw, 2.8rem);
            line-height: 1.12;
            margin-bottom: 20px;
        }
        .manifesto-text p {
            color: var(--ink-dim);
            font-size: 1.02rem;
            line-height: 1.8;
            margin-bottom: 16px;
        }
        .manifesto-text p.strong {
            color: var(--ink);
            font-family: var(--display);
            font-size: 1.15rem;
        }
        .manifesto-image {
            position: relative;
            aspect-ratio: 5/4;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid var(--glass-line);
            box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
        }
        .manifesto-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(30%) contrast(1.05);
            transition: transform .8s ease;
        }
        .manifesto-image:hover img {
            transform: scale(1.04);
        }
        .manifesto-image .glow-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(75, 54, 143, .20), rgba(139, 115, 232, .08) 50%, transparent 80%);
            mix-blend-mode: overlay;
            pointer-events: none;
        }
        .manifesto-image .badge-pulse {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(5, 5, 6, .75);
            backdrop-filter: blur(8px);
            border: 1px solid var(--glass-line-strong);
            border-radius: 12px;
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            font-family: var(--display);
            font-size: .9rem;
            color: #ffffff;
            animation: gemFloat 3s ease-in-out infinite;
        }
        .manifesto-image .badge-pulse .obsidian-icon {
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }
        .manifesto-image .badge-pulse span {
            font-size: 1.8rem;
        }

        /* ─── INDUSTRY GRID ─── */
        .industry-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 20px;
        }
        .industry-card {
            border-radius: 16px;
            border: 1px solid var(--glass-line);
            padding: 26px 16px;
            text-align: center;
            transition: border-color .3s, transform .3s, background .3s;
            position: relative;
            overflow: hidden;
        }
        .industry-card:hover {
            transform: translateY(-5px);
            border-color: rgba(75, 54, 143, .5);
            background: var(--obsidian-1);
            box-shadow: 0 14px 34px -18px rgba(75, 54, 143, .5);
        }
        .industry-card .ico {
            font-size: 1.8rem;
            margin-bottom: 10px;
            display: block;
        }
        .industry-card span {
            font-size: .82rem;
            color: var(--ink-dim);
            font-weight: 500;
        }

        /* ─── ADVANCED TECH SECTION ─── */
        .advanced-section {
            position: relative;
            overflow: hidden;
            background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(139, 62, 255, .2), transparent 60%), var(--obsidian-0);
            border-top: 1px solid var(--glass-line);
            border-bottom: 1px solid var(--glass-line);
        }
        .advanced-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(var(--glass-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--glass-line-strong) 1px, transparent 1px);
            background-size: 46px 46px;
            opacity: .4;
            -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 10%, transparent 75%);
            pointer-events: none;
        }
        .advanced-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 22px;
            position: relative;
            z-index: 2;
        }

        /* ─── TECHNOLOGIES SECTION ─── */
        .tech-groups {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px 40px;
        }
        .tech-group h5 {
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #ffffff;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--glass-line);
        }
        .tech-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tech-chip {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: .84rem;
            color: var(--ink-dim);
            border: 1px solid var(--glass-line);
            border-radius: 30px;
            padding: 8px 16px 8px 8px;
            background: var(--obsidian-2);
            transition: border-color .3s, transform .3s, box-shadow .3s, color .3s;
        }
        .tech-chip:hover {
            border-color: var(--purple-soft);
            transform: translateY(-3px);
            box-shadow: 0 10px 24px -12px rgba(139, 115, 232, .5);
            color: var(--ink);
        }
        .tech-ico {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--purple-deep), var(--purple-light));
            font-family: var(--display);
            font-size: .68rem;
            font-weight: 700;
            color: #fff;
        }
        @media (max-width: 900px) {
            .tech-groups { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 560px) {
            .tech-groups { grid-template-columns: 1fr; }
            .tech-chip { font-size: .8rem; padding: 7px 14px 7px 7px; }
        }
        .advanced-card {
            grid-column: span 1;
            border-radius: 18px;
            border: 1px solid var(--glass-line);
            background: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%), var(--obsidian-1);
            padding: 30px 26px;
            position: relative;
            overflow: hidden;
            transition: transform .35s, border-color .35s, box-shadow .35s;
        }
        .advanced-card::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 18px;
            padding: 1px;
            background: linear-gradient(140deg, rgba(139, 115, 232, .5), transparent 40%, transparent 60%, rgba(139, 115, 232, .3));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity .35s;
            pointer-events: none;
        }
        .advanced-card:hover {
            transform: translateY(-6px);
            border-color: transparent;
            box-shadow: 0 24px 50px -22px rgba(75, 54, 143, .5);
        }
        .advanced-card:hover::after {
            opacity: 1;
        }
        .advanced-card.wide {
            grid-column: span 2;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 20px;
        }
        .advanced-card .adv-num {
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: #ffffff;
            margin-bottom: 14px;
            display: block;
        }
        .advanced-card h4 {
            font-family: var(--display);
            font-size: 1.15rem;
            margin-bottom: 10px;
        }
        .advanced-card p {
            color: var(--ink-dim);
            font-size: .88rem;
            line-height: 1.65;
        }
        .adv-bars {
            display: flex;
            align-items: flex-end;
            gap: 6px;
            height: 60px;
        }
        .adv-bars i {
            display: block;
            width: 8px;
            border-radius: 3px 3px 0 0;
            background: linear-gradient(180deg, var(--purple-light), var(--purple-deep));
            animation: barPulse 2.4s ease-in-out infinite;
        }
        @keyframes barPulse {
            0%,
            100% {
                transform: scaleY(.7);
            }
            50% {
                transform: scaleY(1);
            }
        }
        .adv-radar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            position: relative;
            border: 1px solid var(--glass-line-strong);
            flex-shrink: 0;
        }
        .adv-radar::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: conic-gradient(rgba(139, 115, 232, .55), transparent 70%);
            animation: ringSpin 3s linear infinite;
        }
        .adv-radar::after {
            content: '';
            position: absolute;
            inset: 6px;
            border-radius: 50%;
            background: var(--obsidian-1);
        }
        .advanced-badge-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .advanced-badge-row span {
            font-family: var(--mono);
            font-size: .68rem;
            letter-spacing: .08em;
            color: var(--ink-dim);
            border: 1px solid var(--glass-line);
            border-radius: 20px;
            padding: 5px 12px;
        }
        .advanced-card .icon-badge {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            margin-bottom: 18px;
        }
        .advanced-card .icon-badge svg {
            width: 22px;
            height: 22px;
        }
        .advanced-card.wide .icon-badge {
            margin-bottom: 14px;
        }

        /* ─── DATA PIPELINE FLOW (Growth Infrastructure — distinct from radar) ─── */
        .adv-pulse {
            width: 96px;
            height: 60px;
            flex-shrink: 0;
        }
        .adv-pulse svg {
            width: 100%;
            height: 100%;
        }
        .adv-pulse circle {
            fill: var(--purple-electric);
            filter: drop-shadow(0 0 5px rgba(193, 59, 255, .8));
        }
        .adv-pulse path.pulse-line {
            fill: none;
            stroke: var(--purple-light);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 0 4px rgba(176, 38, 255, .55));
        }
        .adv-pulse path.pulse-dash {
            fill: none;
            stroke: var(--purple-soft);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-dasharray: 6 10;
            animation: pulseDashMove 1.6s linear infinite;
            filter: drop-shadow(0 0 6px rgba(226, 198, 255, .8));
        }
        @keyframes pulseDashMove {
            to { stroke-dashoffset: -32; }
        }

        /* ─── FUNNEL VISUAL (A/B Tested Funnels — distinct from bar chart) ─── */
        .adv-funnel {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            width: 64px;
        }
        .adv-funnel i {
            display: block;
            height: 9px;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--purple-electric), var(--purple-deep));
            animation: funnelPulse 2.2s ease-in-out infinite;
            box-shadow: 0 0 8px rgba(193, 59, 255, .4);
        }
        .adv-funnel i:nth-child(1) { width: 60px; }
        .adv-funnel i:nth-child(2) { width: 42px; animation-delay: .2s; }
        .adv-funnel i:nth-child(3) { width: 24px; animation-delay: .4s; }
        @keyframes funnelPulse {
            0%, 100% { opacity: .55; transform: scaleX(.94); }
            50% { opacity: 1; transform: scaleX(1); }
        }

        /* ─── CLAIM DEAL BOTTOM BAR ─── */
        #claimBar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 450;
            transform: translateY(100%);
            transition: transform .5s cubic-bezier(.2, .8, .3, 1);
        }
        #claimBar.show {
            transform: translateY(0);
        }
        .claim-inner {
            background: linear-gradient(100deg, #0c0c0f 0%, #1a1030 30%, #2A1A5A 55%, #4B368F 75%, #1a1030 100%);
            background-size: 220% 100%;
            animation: obsidianSheen 10s ease-in-out infinite;
            border-top: 1px solid var(--glass-line-strong);
            box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .8);
            padding: 14px 60px 14px 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
            position: relative;
        }
        .claim-inner::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(255, 255, 255, .5) 1px, transparent 1px);
            background-size: 24px 24px;
            opacity: .05;
            pointer-events: none;
        }
        .claim-left {
            display: flex;
            align-items: center;
            gap: 14px;
            position: relative;
            z-index: 2;
        }
        .claim-left .obsidian-icon {
            width: 30px;
            height: 30px;
            flex-shrink: 0;
        }
        .claim-copy b {
            display: block;
            font-family: var(--display);
            font-size: .98rem;
            color: #fff;
        }
        .claim-copy span {
            font-family: var(--mono);
            font-size: .7rem;
            color: rgba(255, 255, 255, .75);
            letter-spacing: .04em;
        }
        .claim-timer {
            display: flex;
            gap: 8px;
            position: relative;
            z-index: 2;
        }
        .claim-timer div {
            background: rgba(0, 0, 0, .35);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 8px;
            padding: 6px 10px;
            text-align: center;
            min-width: 46px;
        }
        .claim-timer div b {
            display: block;
            font-family: var(--display);
            font-size: 1rem;
            color: #fff;
        }
        .claim-timer div span {
            font-family: var(--mono);
            font-size: .55rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .6);
        }
        .claim-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 2;
        }
        .claim-btn {
            position: relative;
            overflow: hidden;
            background: linear-gradient(100deg, #2A1A5A 0%, #6B4FD8 20%, #C4B5F0 40%, #8B73E8 60%, #4B368F 80%, #2A1A5A 100%);
            background-size: 260% 100%;
            color: #fff;
            font-family: var(--display);
            font-weight: 700;
            font-size: .86rem;
            padding: 12px 24px;
            border-radius: 10px;
            border: 1px solid rgba(196, 181, 240, .6);
            animation: obsidianSheen 4s ease-in-out infinite, claimGlow 2.2s ease-in-out infinite;
            transition: transform .25s, box-shadow .25s;
            white-space: nowrap;
        }
        .claim-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .06) 70%, transparent 100%);
            animation: metallicShine 2.6s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes claimGlow {
            0%, 100% {
                box-shadow: 0 0 14px rgba(139, 115, 232, .55), 0 6px 20px rgba(0, 0, 0, .3);
            }
            50% {
                box-shadow: 0 0 28px rgba(196, 181, 240, .9), 0 6px 24px rgba(0, 0, 0, .35);
            }
        }
        .claim-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 32px rgba(196, 181, 240, 1), 0 10px 26px rgba(0, 0, 0, .4);
        }
        .claim-close {
            position: absolute;
            top: 50%;
            right: 18px;
            transform: translateY(-50%);
            z-index: 10;
            background: rgba(0, 0, 0, .45);
            border: 1px solid rgba(255, 255, 255, .25);
            color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
            flex-shrink: 0;
            cursor: pointer;
            transition: background .2s, transform .2s;
        }
        .claim-close:hover {
            background: rgba(255, 255, 255, .18);
            transform: translateY(-50%) scale(1.08);
        }
        @media(max-width:768px) {
            .claim-inner {
                padding: 14px 56px 14px 16px;
                gap: 12px;
                justify-content: center;
            }
            .claim-copy span {
                display: none;
            }
            .claim-timer div {
                min-width: 38px;
                padding: 5px 6px;
            }
        }
        @media(max-width:480px) {
            .claim-timer {
                display: none;
            }
            .claim-btn {
                padding: 10px 18px;
                font-size: .8rem;
            }
            .claim-inner {
                gap: 10px;
                flex-direction: column;
                padding: 16px 50px 14px 16px;
            }
            .claim-close {
                top: 14px;
                right: 14px;
                transform: none;
            }
            .claim-close:hover {
                transform: scale(1.08);
            }
        }

        /* ─── RESPONSIVE ─── */
        @media(max-width:1024px) {
            .why-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .service-card.centered {
                grid-column: auto;
            }
            .industry-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
            .team-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .case-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .about-grid,
            .contact-grid,
            .who-grid {
                grid-template-columns: 1fr;
            }
            .why-showcase {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .why-collage {
                height: 340px;
            }
            .about-badge {
                position: static;
                margin-top: 20px;
                display: inline-block;
            }
            .estimate-box {
                grid-template-columns: 1fr;
                padding: 32px;
            }
            .est-summary {
                border-left: none;
                border-top: 1px solid var(--glass-line);
                padding-left: 0;
                padding-top: 28px;
                margin-top: 8px;
            }
            .process-row {
                grid-template-columns: 50px 1fr;
            }
            .process-row p {
                grid-column: 1/-1;
            }
            .service-row,
            .service-row.reverse {
                grid-template-columns: 1fr;
            }
            .service-row.reverse .service-row-img {
                order: 1;
            }
            .service-row.reverse .service-row-text {
                order: 2;
            }
            .manifesto-wrap {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .manifesto-image {
                order: -1;
            }
            .advanced-grid {
                grid-template-columns: 1fr 1fr;
            }
            .advanced-card.wide {
                grid-column: span 2;
                grid-template-columns: 1fr;
                text-align: left;
            }
            .advanced-card.wide .adv-radar,
            .advanced-card.wide .adv-pulse {
                margin: 20px 0 0;
            }
        }
        @media(max-width:768px) {
            nav {
                gap: 14px;
                padding: 12px 20px;
            }
            .logo {
                flex: 1 1 auto;
                max-width: calc(100% - 60px);
            }
            .logo .mark {
                width: 32px;
                height: 32px;
            }
            .logo .word b {
                font-size: .92rem;
            }
            .logo .word small {
                font-size: .46rem;
                letter-spacing: .16em;
            }
            .burger {
                flex-shrink: 0;
                margin-left: 8px;
            }
            .nav-links,
            .nav-cta,
            .nav-phone {
                display: none;
            }
            .nav-links.mobile-open {
                display: flex;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                flex-direction: column;
                background: var(--obsidian-1);
                padding: 20px 32px;
                gap: 18px;
                border-bottom: 1px solid var(--glass-line);
                z-index: 10;
            }
            .burger {
                display: flex;
                position: relative;
                z-index: 11;
            }
            .burger span {
                transition: transform .25s ease, opacity .2s ease;
            }
            .burger.active span:nth-child(1) {
                transform: translateY(6.5px) rotate(45deg);
            }
            .burger.active span:nth-child(2) {
                opacity: 0;
            }
            .burger.active span:nth-child(3) {
                transform: translateY(-6.5px) rotate(-45deg);
            }
            .hero-banner {
                min-height: 600px;
                margin-top: 66px;
            }
            .hero-text h1 {
                font-size: clamp(2rem, 10vw, 3rem);
            }
            .why-grid {
                grid-template-columns: 1fr;
            }
            .services-grid {
                grid-template-columns: 1fr;
            }
            .industry-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: 1fr;
            }
            .team-grid {
                grid-template-columns: 1fr;
            }
            .case-grid {
                grid-template-columns: 1fr;
            }
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .check-pills {
                grid-template-columns: 1fr;
            }
            section {
                padding: 70px 0;
            }
            .scroll-cue {
                bottom: 56px;
            }
            #backToTop {
                left: 16px;
                bottom: 20px;
                width: 42px;
                height: 42px;
            }
            .whatsapp-float {
                bottom: 20px;
                right: 20px;
                display: flex;
                width: 56px;
                height: 56px;
            }
            .counter-row {
                grid-template-columns: 1fr 1fr;
            }
            .slide {
                height: 400px;
            }
            .full-banner {
                height: 360px;
            }
            .promo-banner {
                height: 460px;
            }
            .promo-shade {
                background: linear-gradient(180deg, rgba(5, 5, 6, .5), rgba(5, 5, 6, .96) 60%);
            }
            .about-mini-stats {
                grid-template-columns: 1fr 1fr;
            }
            .welcome-card {
                padding: 32px 24px;
            }
            .advanced-grid {
                grid-template-columns: 1fr;
            }
            .advanced-card.wide {
                grid-column: span 1;
                grid-template-columns: 1fr;
                text-align: left;
            }
            .advanced-card.wide .adv-radar,
            .advanced-card.wide .adv-pulse {
                margin: 20px 0 0;
            }
        }
        @media(max-width:480px) {
            .hero-banner {
                min-height: 500px;
            }
            .hero-text .eyebrow {
                font-size: .6rem;
            }
            .hero-text h1 {
                font-size: 1.8rem;
            }
            .hero-text .lead {
                font-size: .9rem;
            }
            .btn-primary,
            .btn-ghost,
            .btn-wa {
                padding: 12px 20px;
                font-size: .8rem;
            }
            .hero-ctas {
                flex-direction: column;
                align-items: stretch;
                gap: 14px;
                width: 100%;
            }
            .hero-ctas a {
                text-align: center;
                width: 100%;
            }
            .industry-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .industry-card {
                padding: 18px 10px;
            }
            .industry-card .ico {
                font-size: 1.4rem;
            }
            .industry-card span {
                font-size: .7rem;
            }
            .gallery-grid {
                grid-template-columns: 1fr;
            }
            .counter-row {
                grid-template-columns: 1fr;
            }
            .form-row {
                grid-template-columns: 1fr;
            }
            .contact-form {
                padding: 24px;
            }
            .welcome-card {
                padding: 24px 18px;
                max-height: calc(100vh - 24px);
            }
            .welcome-card .gem-big {
                font-size: 3rem;
            }
            .discount-ring {
                width: 92px;
                height: 92px;
                margin-bottom: 10px;
            }
            .discount-ring .discount-num b {
                font-size: 1.5rem;
            }
            .discount-ring .discount-num span {
                font-size: .52rem;
            }
            .welcome-card .tagline {
                font-size: .6rem;
                letter-spacing: .2em;
            }
            .welcome-card h2 {
                font-size: 1.35rem;
                margin-bottom: 8px;
            }
            .welcome-card p {
                font-size: .85rem;
                line-height: 1.5;
                margin-bottom: 16px;
            }
            .welcome-timer {
                margin-bottom: 16px;
            }
            .welcome-code {
                font-size: .68rem;
                margin-top: 10px;
            }
            .welcome-actions {
                gap: 10px;
            }
            .welcome-card .btn-primary,
            .welcome-actions .btn-wa,
            .welcome-actions .btn-ghost {
                padding: 12px 20px;
                font-size: .88rem;
            }
        }

        /* scroll progress */
        #scrollProgress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            z-index: 600;
            background: linear-gradient(90deg, var(--purple-deep), var(--purple-light), var(--purple-soft));
            box-shadow: 0 0 10px rgba(139, 115, 232, .6);
            transition: width .1s linear;
        }

        /* leave space at bottom for claim bar on small screens so it doesn't cover content permanently */
        body.claim-open {
            scroll-padding-bottom: 70px;
        }
        body.claim-open .whatsapp-float {
            bottom: 106px;
            transition: bottom .4s cubic-bezier(.2, .8, .3, 1), transform .3s;
        }
        body.claim-open .wa-popup {
            bottom: 176px;
            transition: bottom .4s cubic-bezier(.2, .8, .3, 1);
        }
        body.claim-open #backToTop {
            bottom: 90px;
        }
        @media(max-width:520px) {
            body.claim-open .whatsapp-float { bottom: 128px; }
            body.claim-open .wa-popup { bottom: 198px; }
            body.claim-open #backToTop { bottom: 112px; }
        }

        /* ═══════════════════════════════════════════════════
           MOBILE RESPONSIVE PASS — newer components
           ═══════════════════════════════════════════════════ */
        @media(max-width:768px) {
            /* Pricing cards */
            .price-card {
                padding: 30px 22px;
            }
            .discount-tag {
                left: 16px;
                font-size: .62rem;
                padding: 5px 12px 5px 14px;
            }
            .price-card-logo {
                top: 46px;
                right: 20px;
                width: 28px;
                height: 28px;
            }
            .price-badge {
                top: 16px;
                right: 20px;
            }

            /* Brand showcase panel (replaces old team collage) */
            .brand-showcase-panel {
                height: 280px;
            }
            .brand-showcase-panel .bsp-ring {
                width: 200px;
                height: 200px;
            }
            .brand-showcase-panel img.showcase-photo {
                width: 170px;
                height: 170px;
            }
            .brand-showcase-panel .showcase-icon {
                width: 150px;
                height: 150px;
            }

            /* WhatsApp chatbot popup */
            .wa-popup {
                width: calc(100vw - 24px);
                right: 12px;
                bottom: 88px;
            }
            .wa-chat-log {
                max-height: 46vh;
            }
            body.claim-open .wa-popup {
                bottom: 168px;
            }

            /* Advanced capability / growth infrastructure cards */
            .advanced-card {
                padding: 24px 20px;
            }
            .adv-pulse {
                width: 76px;
            }

            /* Purple grid background — lighter grid on small screens */
            .purple-grid {
                background-size: 40px 40px;
            }

            /* Hero tagline pill */
            .hero-tagline-pill {
                font-size: .74rem;
                padding: 7px 14px;
            }

            /* Compare table */
            .compare-row {
                padding: 12px 14px;
                font-size: .78rem;
            }
        }

        @media(max-width:480px) {
            .price-card {
                padding: 26px 18px;
            }
            .price-original {
                font-size: .82rem;
            }
            .wa-popup {
                width: calc(100vw - 16px);
                right: 8px;
                left: 8px;
            }
            .wa-popup-body {
                padding: 14px 16px;
            }
            .wa-type-row input {
                font-size: 16px;
                padding: 9px 10px;
            }
            .brand-showcase-panel {
                height: 220px;
            }
            .brand-showcase-panel img {
                width: 50%;
            }
            .brand-showcase-panel img.showcase-photo {
                width: 140px;
                height: 140px;
            }
            .brand-showcase-panel .showcase-icon {
                width: 120px;
                height: 120px;
            }
            .advanced-grid {
                gap: 16px;
            }
            .icon-badge {
                width: 46px;
                height: 46px;
            }
            .icon-badge svg {
                width: 22px;
                height: 22px;
            }

            /* Tighter global gutter on small phones */
            .wrap {
                padding: 0 20px;
            }

            /* Case study modal */
            .pd-modal-overlay {
                padding: 12px;
                align-items: flex-start;
                padding-top: 40px;
            }
            .pd-modal {
                max-height: calc(100vh - 52px);
                border-radius: 16px;
            }
            .pd-modal-cover {
                aspect-ratio: 16 / 10;
                border-radius: 16px 16px 0 0;
            }
            .pd-modal-close {
                top: 10px;
                right: 10px;
                width: 34px;
                height: 34px;
                font-size: .85rem;
            }
            .pd-modal-body {
                padding: 22px 18px 26px;
            }
            .pd-modal-body h3 {
                font-size: 1.2rem;
            }
            .pd-modal-actions {
                flex-direction: column;
            }
            .pd-modal-actions a {
                width: 100%;
                text-align: center;
            }

            /* Portfolio detail cards */
            .portfolio-detail-card .pd-body {
                padding: 20px 18px 22px;
            }
            .pd-metric {
                font-size: 1.3rem;
                left: 14px;
                bottom: 12px;
            }
            .pd-top h3 {
                font-size: 1.02rem;
            }

            /* Welcome popup timer never wraps awkwardly */
            .welcome-timer {
                gap: 6px;
            }
            .welcome-timer div {
                min-width: 48px;
                padding: 8px 6px;
            }
        }