/* ========== Base / Theme ========== */
        :root {
            --bg: #0b0b0c;
            --card: #111216;
            --text: #e9e9ee;
            --muted: #b8b8c3;
            --line: #24262e;
            --brand1: #7c3aed;
            /* violet */
            --brand2: #ec4899;
            /* fuchsia */
            --accent: #14b8a6;
            /* teal */
            --shadow: 20, 22, 30;

            --radius: 18px;
            --space: clamp(14px, 1.2vw, 18px);
            --hero: clamp(38px, 5.4vw, 64px);
            --h2: clamp(28px, 3.8vw, 44px);
            --h3: clamp(18px, 2vw, 22px);
            --speed: 180ms;
        }

        @media (prefers-color-scheme: light) {
            :root {
                --bg: #ffffff;
                --card: #f7f7fb;
                --text: #0c0d10;
                --muted: #525463;
                --line: #e7e7ef;
            }
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            color: var(--text);
            background:
                radial-gradient(1200px 700px at 10% -10%, color-mix(in oklab, var(--brand1) 22%, transparent), transparent),
                radial-gradient(900px 500px at 90% 0%, color-mix(in oklab, var(--brand2) 18%, transparent), transparent),
                linear-gradient(#0a0a0b, var(--bg));
            font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
            line-height: 1.5;
        }

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

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

        .wrap {
            width: min(1200px, 92%);
            margin-inline: auto
        }

        /* ===== Dropdown (desktop) ===== */
        .dropdown {
            position: relative;
        }

        .drop-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: var(--muted);
            padding: 8px 10px;
            border-radius: 10px;
            border: 0;
            background: transparent;
            cursor: pointer;
        }

        .drop-toggle:hover {
            background: color-mix(in oklab, var(--card) 80%, transparent);
            color: var(--text);
        }

        .drop-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 210px;
            display: none;
            grid-auto-rows: min-content;
            gap: 4px;
            background: color-mix(in oklab, var(--card) 96%, transparent);
            border: 1px solid var(--line);
            border-radius: 12px;
            box-shadow: 0 18px 40px rgba(var(--shadow), .28);
            padding: 8px;
            z-index: 60;
        }

        .dropdown.open .drop-menu {
            display: grid;
        }

        .drop-menu a {
            padding: 10px 12px;
            border-radius: 10px;
            color: var(--text);
        }

        .drop-menu a:hover {
            background: color-mix(in oklab, var(--card) 86%, transparent);
        }

        /* ===== Mobile collapsible group ===== */
        .menu-group summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-radius: 10px;
            cursor: pointer;
            color: var(--muted);
        }

        .menu-group[open] summary {
            background: color-mix(in oklab, var(--card) 85%, transparent);
        }

        .menu-group .menu-sub {
            display: grid;
            padding: 8px 6px 2px 6px;
            gap: 6px;
        }

        .menu-group .menu-sub a {
            padding: 8px 10px;
            border-radius: 10px;
            color: var(--muted);
        }

        .menu-group .menu-sub a:hover {
            background: color-mix(in oklab, var(--card) 85%, transparent);
            color: var(--text);
        }

        /* Utility */
        .btn {
            --bg: var(--text);
            --fg: var(--bg);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            border-radius: 14px;
            font-weight: 600;
            background: var(--bg);
            color: var(--fg);
            border: 1px solid color-mix(in oklab, var(--bg) 92%, black);
            box-shadow: 0 6px 18px rgba(var(--shadow), .18);
            transition: transform var(--speed), filter var(--speed), background var(--speed);
            cursor: pointer;
        }

        .btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.05)
        }

        .btn.primary {
            --bg: color-mix(in oklab, var(--brand1) 60%, var(--brand2) 40%);
            --fg: #fff;
            border-color: transparent
        }

        .btn.ghost {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--line)
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 999px;
            color: #fff;
            background: linear-gradient(90deg, color-mix(in oklab, var(--brand1) 70%, #0000), color-mix(in oklab, var(--brand2) 70%, #0000));
            border: 1px solid rgba(255, 255, 255, .18);
            backdrop-filter: blur(6px);
        }

        /* ========== Header ========== */
        .header {
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: saturate(160%) blur(5px);
            background: color-mix(in oklab, var(--bg) 82%, transparent);
            border-bottom: 1px solid var(--line);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700
        }

        .logo {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: conic-gradient(from 200deg at 50% 50%, var(--brand1), var(--brand2), var(--brand1));
            box-shadow: 0 6px 16px rgba(124, 58, 237, .35);
        }

        .links {
            display: flex;
            gap: 20px;
        }

        .links a {
            font-size: 14px;
            color: var(--muted);
            padding: 8px 10px;
            border-radius: 10px
        }

        .links a:hover {
            background-color: color-mix(in oklab, var(--card) 80%, transparent)
        }

        .nav-cta {
            display: flex;
            gap: 10px;
            align-items: center
        }

        /* Mobile menu */
        .menu-btn {
            display: none;
            background: transparent;
            border: 0;
            color: var(--text);
            padding: 8px;
            border-radius: 10px
        }

        .menu {
            display: none;
        }

        @media (max-width: 860px) {
            .links {
                display: none
            }

            .menu-btn {
                display: inline-flex
            }

            .menu {
                display: grid;
                gap: 10px;
                padding: 14px;
                border-top: 1px solid var(--line);
                background: color-mix(in oklab, var(--bg) 88%, transparent);
            }

            .menu a {
                color: var(--muted);
                padding: 10px 12px;
                border-radius: 10px
            }

            .menu a:hover {
                background: color-mix(in oklab, var(--card) 85%, transparent)
            }
        }

        /* ========== Hero ========== */
        .hero {
            padding: clamp(28px, 4vw, 42px) 0 18px
        }

        .hero .grid {
            display: grid;
            gap: 28px;
            align-items: center;
            grid-template-columns: 1.1fr .9fr;
        }

        @media (max-width: 980px) {
            .hero .grid {
                grid-template-columns: 1fr
            }
        }

        h1 {
            font-size: var(--hero);
            line-height: 1.05;
            letter-spacing: -0.02em;
            margin: 10px 0 12px
        }

        .lead {
            color: var(--muted);
            font-size: clamp(16px, 1.7vw, 19px)
        }

        .hero-cta {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 14px
        }

        .email {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            flex-wrap: wrap;
        }

        .email input {
            flex: 1 1 280px;
            height: 44px;
            border-radius: 12px;
            padding: 0 14px;
            background: color-mix(in oklab, var(--card) 85%, transparent);
            border: 1px solid var(--line);
            color: var(--text);
            outline: none;
        }

        /* Preview card */
        .screen {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            background: #0b0c11;
            border: 1px solid #151822;
            box-shadow: 0 30px 70px rgba(var(--shadow), .45);
            aspect-ratio: 16 / 9;
        }

        .tiles {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 14px;
            height: 100%;
            background: linear-gradient(140deg, rgba(124, 58, 237, .18), rgba(236, 72, 153, .12));
        }

        .tile {
            border-radius: 14px;
            background: #161922;
            position: relative;
            overflow: hidden
        }

        .tile::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 28%);
        }

        .resume {
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 14px;
            border-radius: 14px;
            background: color-mix(in oklab, var(--card) 92%, transparent);
            border: 1px solid var(--line);
            padding: 10px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Logos row */
        .logos {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            place-items: center;
            gap: 20px;
            opacity: .8;
            padding: 18px 0 6px
        }

        .logo-item {
            color: var(--muted);
            font-weight: 700
        }

        @media (max-width: 720px) {
            .logos {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        /* Sections */
        section {
            padding: 46px 0
        }

        .center {
            text-align: center
        }

        h2 {
            font-size: var(--h2);
            letter-spacing: -.02em;
            margin: 6px 0 8px
        }

        .sub {
            color: var(--muted)
        }

        /* Features grid */
        .grid-3 {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(3, 1fr)
        }

        @media (max-width: 980px) {
            .grid-3 {
                grid-template-columns: 1fr 1fr
            }
        }

        @media (max-width: 620px) {
            .grid-3 {
                grid-template-columns: 1fr
            }
        }

        .card {
            background: color-mix(in oklab, var(--card) 96%, transparent);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 16px;
            box-shadow: 0 10px 26px rgba(var(--shadow), .22);
            transition: transform var(--speed), box-shadow var(--speed);
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 38px rgba(var(--shadow), .28)
        }

        .ico {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--brand1), var(--brand2));
            color: #fff;
            font-weight: 800;
            box-shadow: 0 10px 22px rgba(124, 58, 237, .35);
        }

        .card h3 {
            font-size: var(--h3);
            margin: 10px 0 6px
        }

        /* Pricing */
        .pricing {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(3, 1fr)
        }

        @media (max-width: 980px) {
            .pricing {
                grid-template-columns: 1fr
            }
        }

        .price {
            position: relative;
            overflow: hidden
        }

        .tag {
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 11px;
            color: #fff;
            padding: 6px 8px;
            background: linear-gradient(90deg, var(--brand1), var(--brand2));
            border-radius: 999px;
        }

        .amount {
            font-size: 36px;
            font-weight: 800;
            letter-spacing: -.02em
        }

        .features {
            list-style: none;
            padding: 0;
            margin: 10px 0 14px
        }

        .features li {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            margin: 6px 0;
            color: var(--muted)
        }

        .dot {
            margin-top: 6px;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: var(--accent)
        }

        /* FAQ */
        .faq {
            display: grid;
            gap: 12px;
            grid-template-columns: 1fr 1fr
        }

        @media (max-width: 980px) {
            .faq {
                grid-template-columns: 1fr
            }
        }

        details {
            border: 1px solid var(--line);
            border-radius: 14px;
            background: color-mix(in oklab, var(--card) 94%, transparent);
            padding: 12px 14px;
        }

        summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer
        }

        summary::-webkit-details-marker {
            display: none
        }

        .caret {
            transition: transform var(--speed)
        }

        details[open] .caret {
            transform: rotate(180deg)
        }

        /* CTA */
        .cta {
            border-radius: 22px;
            padding: 28px;
            background: linear-gradient(90deg, color-mix(in oklab, var(--brand1) 75%, #0000), color-mix(in oklab, var(--brand2) 75%, #0000));
            box-shadow: 0 20px 48px rgba(124, 58, 237, .35);
            text-align: center;
        }

        /* Footer */
        footer {
            border-top: 1px solid var(--line);
            padding: 26px 0 40px
        }

        .foot {
            display: grid;
            gap: 18px;
            grid-template-columns: 2fr 1fr 1fr 1fr
        }

        @media (max-width: 980px) {
            .foot {
                grid-template-columns: 1fr 1fr
            }
        }

        @media (max-width: 620px) {
            .foot {
                grid-template-columns: 1fr
            }
        }

        .tiny {
            color: var(--muted);
            font-size: 12px;
            margin-top: 14px
        }