:root{
            --bg:#060a1a;
            --bg-2:#0a1023;
            --bg-3:#11182f;
            --panel:rgba(10,16,35,.72);
            --panel-strong:rgba(16,23,45,.92);
            --line:rgba(255,255,255,.09);
            --line-strong:rgba(255,255,255,.14);
            --text:#f8fafc;
            --muted:#b8c2df;
            --accent:#ff4fb3;
            --accent-2:#8b5cf6;
            --accent-3:#23d3ff;
            --gold:#d9b25f;
            --success:#3ddc97;
            --danger:#ff6b6b;
            --shadow:0 25px 80px rgba(0,0,0,.45);
            --radius:26px;
            --radius-sm:18px;
            --max:1280px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            background:
                radial-gradient(circle at top left, rgba(139,92,246,.20), transparent 28%),
                radial-gradient(circle at top right, rgba(35,211,255,.14), transparent 24%),
                radial-gradient(circle at 50% 0%, rgba(255,79,179,.12), transparent 30%),
                linear-gradient(180deg, #050815 0%, #070b19 32%, #091126 100%);
            min-height:100vh;
        }

        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}

        .container{
            width:min(calc(100% - 32px), var(--max));
            margin:0 auto;
        }

        .topbar{
            position:sticky;
            top:0;
            z-index:50;
            backdrop-filter:blur(16px);
            background:rgba(5,8,21,.70);
            border-bottom:1px solid rgba(255,255,255,.06);
        }

        .nav{
            min-height:82px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
        }

        .brand{
            display:flex;
            align-items:center;
            gap:14px;
        }

        .brandMark{
            width:48px;
            height:48px;
            border-radius:16px;
            background:linear-gradient(135deg, rgba(255,79,179,.95), rgba(139,92,246,.95));
            box-shadow:0 16px 40px rgba(139,92,246,.34);
            display:grid;
            place-items:center;
            font-weight:800;
            letter-spacing:.08em;
        }

        .brandText strong{
            display:block;
            font-size:20px;
            font-weight:800;
        }

        .brandText span{
            display:block;
            color:var(--muted);
            font-size:13px;
        }

        .navLinks{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }

        .navLinks a,
        .navLinks button{
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--text);
            padding:12px 16px;
            border-radius:999px;
            transition:.22s ease;
            cursor:pointer;
        }

        .navLinks a:hover,
        .navLinks button:hover{
            transform:translateY(-1px);
            border-color:rgba(255,255,255,.16);
            background:rgba(255,255,255,.06);
        }

        .navLinks .cta{
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            border-color:transparent;
            box-shadow:0 14px 34px rgba(255,79,179,.22);
            font-weight:700;
        }

        .navLinks a.active{
            border-color:rgba(255,255,255,.22);
            background:rgba(255,255,255,.09);
        }

        .navLinks .cartLink{
            display:inline-flex;
            align-items:center;
            gap:8px;
        }

        .cartIcon{
            width:18px;
            height:18px;
            flex:none;
        }

        .hero{
            padding:0;
            min-height:100vh;
            display:flex;
            align-items:center;
        }

        .heroGrid{
            display:grid;
            grid-template-columns:1fr;
            gap:24px;
            align-items:center;
            justify-items:center;
            text-align:center;
        }

        .glass,
        .card{
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--panel);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }

        .heroMain{
            position:relative;
            overflow:hidden;
            padding:34px;
            width:100%;
            max-width:900px;
            margin:0 auto;
            text-align:center;
        }

        .heroMain::before{
            content:"";
            position:absolute;
            inset:auto -80px -90px auto;
            width:260px;
            height:260px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(255,79,179,.32), transparent 70%);
            pointer-events:none;
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.04);
            color:#dfe7ff;
            font-size:12px;
            font-weight:700;
            letter-spacing:.08em;
            text-transform:uppercase;
        }

        h1{
            margin:18px 0 14px;
            font-size:clamp(34px, 5vw, 62px);
            line-height:1.03;
            letter-spacing:-.03em;
        }

        .lead{
            margin:0;
            max-width:760px;
            color:var(--muted);
            font-size:18px;
            line-height:1.7;
        }

        .heroActions{
            justify-content:center;
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:24px;
        }

        .btn{
            appearance:none;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.05);
            color:var(--text);
            border-radius:16px;
            padding:14px 18px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            cursor:pointer;
            transition:.22s ease;
            font-weight:700;
        }

        .btn:hover{transform:translateY(-1px)}
        .btnPrimary{
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            border-color:transparent;
            box-shadow:0 15px 30px rgba(139,92,246,.26);
        }
        .btnGhost{background:rgba(255,255,255,.04)}
        .btnGold{
            background:linear-gradient(135deg, rgba(217,178,95,.96), rgba(255,79,179,.85));
            border-color:transparent;
            color:#0a1023;
        }

        .heroStats{
            justify-content:center;
            margin-left:auto;
            margin-right:auto;
            margin-top:26px;
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:14px;
        }

        .stat{
            border-radius:20px;
            padding:16px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.04);
        }

        .stat strong{
            display:block;
            font-size:24px;
            margin-bottom:6px;
        }

        .stat span{
            color:var(--muted);
            font-size:14px;
            line-height:1.5;
        }

        .heroSide{
            padding:22px;
            display:flex;
            flex-direction:column;
            gap:16px;
        }

        .previewBox{
            min-height:260px;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.08);
            background:
                radial-gradient(circle at top right, rgba(255,79,179,.24), transparent 34%),
                radial-gradient(circle at bottom left, rgba(35,211,255,.16), transparent 40%),
                linear-gradient(180deg, rgba(12,19,39,.96), rgba(10,14,28,.94));
            padding:18px;
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }

        .miniCard{
            border-radius:18px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            padding:14px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:112px;
        }

        .miniCard small{
            color:var(--muted);
            font-size:12px;
            text-transform:uppercase;
            letter-spacing:.08em;
        }

        .miniCard strong{
            font-size:19px;
            line-height:1.2;
        }

        .tagRow{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }

        .tag{
            padding:7px 10px;
            border-radius:999px;
            font-size:12px;
            color:#eef2ff;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.08);
        }

        .section{
            padding:18px 0 26px;
        }

        .sectionHead{
            margin-bottom:18px;
        }

        .sectionHead h2{
            margin:0 0 8px;
            font-size:clamp(28px, 4vw, 40px);
            line-height:1.08;
        }

        .sectionHead p{
            margin:0;
            color:var(--muted);
            max-width:820px;
            line-height:1.7;
        }

        .grid3,
        .grid4,
        .pricingGrid,
        .contactGrid,
        .footerGrid{
            display:grid;
            gap:18px;
        }

        .grid4{grid-template-columns:repeat(4, minmax(0,1fr))}
        .grid3{grid-template-columns:repeat(3, minmax(0,1fr))}
        .pricingGrid{grid-template-columns:1.1fr .9fr}
        .contactGrid{grid-template-columns:1fr 1fr}
        .footerGrid{grid-template-columns:1fr}

        .feature,
        .infoCard,
        .pricingCard,
        .formCard,
        .cartCard,
        .faqItem,
        .processCard,
        .footerCard{
            padding:22px;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--panel);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
        }

        .featureIcon,
        .pillIcon{
            width:44px;
            height:44px;
            border-radius:14px;
            display:grid;
            place-items:center;
            font-weight:800;
            background:linear-gradient(135deg, rgba(255,79,179,.16), rgba(139,92,246,.16));
            border:1px solid rgba(255,255,255,.08);
            margin-bottom:14px;
        }

        .feature h3,
        .pricingCard h3,
        .formCard h3,
        .cartCard h3,
        .faqItem h3,
        .processCard h3,
        .footerCard h3{
            margin:0 0 10px;
            font-size:22px;
        }

        .feature p,
        .pricingCard p,
        .formCard p,
        .cartCard p,
        .faqItem p,
        .processCard p,
        .footerCard p,
        .infoCard p{
            margin:0;
            color:var(--muted);
            line-height:1.7;
        }

        .bulletList{
            display:grid;
            gap:10px;
            margin-top:18px;
        }

        .bullet{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:#eaf0ff;
            line-height:1.6;
        }

        .bullet i{
            width:22px;
            height:22px;
            flex:0 0 22px;
            border-radius:999px;
            display:grid;
            place-items:center;
            font-style:normal;
            font-size:12px;
            background:rgba(61,220,151,.14);
            color:var(--success);
            border:1px solid rgba(61,220,151,.22);
            margin-top:2px;
        }

        .pricingCard.featured{
            position:relative;
            overflow:hidden;
            background:
                radial-gradient(circle at top right, rgba(255,79,179,.16), transparent 28%),
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
                var(--panel-strong);
            border-color:rgba(255,255,255,.14);
        }

        .pricingTop{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:18px;
            margin-bottom:14px;
        }

        .priceWrap strong{
            display:block;
            font-size:48px;
            line-height:1;
            letter-spacing:-.04em;
        }

        .priceWrap span{
            color:var(--muted);
            font-size:14px;
        }

        .badge{
            display:inline-flex;
            align-items:center;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.08);
            font-size:12px;
            font-weight:700;
            text-transform:uppercase;
            letter-spacing:.08em;
        }

        .highlightStrip{
            margin-top:16px;
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:12px;
        }

        .highlight{
            border-radius:18px;
            padding:14px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
        }

        .highlight strong{
            display:block;
            margin-bottom:6px;
            font-size:16px;
        }

        .field,
        .textarea,
        select{
            width:100%;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.05);
            color:var(--text);
            padding:14px 15px;
            outline:none;
            transition:.18s ease;
        }

        .field:focus,
        .textarea:focus,
        select:focus{
            border-color:rgba(139,92,246,.65);
            box-shadow:0 0 0 4px rgba(139,92,246,.12);
        }

        .textarea{
            min-height:132px;
            resize:vertical;
        }

        .formGrid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:14px;
            margin-top:18px;
        }

        .formGrid .full{grid-column:1 / -1}

        .stack{display:grid;gap:10px}

        .flash,
        .errorBox{
            margin:0 0 18px;
            padding:14px 16px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.10);
            line-height:1.6;
        }

        .flash.success{
            background:rgba(61,220,151,.10);
            border-color:rgba(61,220,151,.24);
            color:#dcfff0;
        }

        .flash.error,
        .errorBox{
            background:rgba(255,107,107,.10);
            border-color:rgba(255,107,107,.24);
            color:#ffe0e0;
        }

        .cartList{
            display:grid;
            gap:12px;
            margin:18px 0;
        }

        .cartItem{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:14px;
            border-radius:18px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
        }

        .cartItem strong{display:block;font-size:16px}
        .cartItem span{display:block;color:var(--muted);font-size:13px;margin-top:5px}

        .cartSummary{
            padding-top:16px;
            margin-top:12px;
            border-top:1px solid rgba(255,255,255,.08);
            display:grid;
            gap:10px;
        }

        .sumRow{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            color:var(--muted);
        }

        .sumRow strong{color:var(--text);font-size:22px}

        .stepNumber{
            width:42px;
            height:42px;
            border-radius:14px;
            display:grid;
            place-items:center;
            font-weight:800;
            background:linear-gradient(135deg, rgba(255,79,179,.20), rgba(139,92,246,.20));
            border:1px solid rgba(255,255,255,.10);
            margin-bottom:14px;
        }

        .faqList{display:grid;gap:16px}

        footer{
            padding:20px 0 46px;
        }

        .footerCard{
            padding:26px;
        }

        .miniNote{
            color:var(--muted);
            font-size:13px;
            line-height:1.6;
        }

        .anchorOffset{scroll-margin-top:105px}

        .cartBubble{
            min-width:28px;
            height:28px;
            padding:0 10px;
            border-radius:999px;
            display:inline-grid;
            place-items:center;
            background:rgba(255,255,255,.12);
            font-size:13px;
            font-weight:800;
        }

        .softLine{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
            margin:18px 0;
        }

        @media (max-width: 1120px){
            .heroGrid,
            .pricingGrid,
            .contactGrid,
            .footerGrid,
            .grid4,
            .grid3{
                grid-template-columns:1fr 1fr;
            }
        }

        @media (max-width: 860px){
            .nav{
                align-items:flex-start;
                flex-direction:column;
                padding:14px 0;
            }

            .navLinks{
                width:100%;
                justify-content:flex-start;
            }

            .heroGrid,
            .pricingGrid,
            .contactGrid,
            .footerGrid,
            .grid4,
            .grid3,
            .formGrid,
            .highlightStrip,
            .heroStats,
            .previewBox{
                grid-template-columns:1fr;
            }

            .heroMain,
            .heroSide,
            .feature,
            .infoCard,
            .pricingCard,
            .formCard,
            .cartCard,
            .faqItem,
            .processCard,
            .footerCard{
                padding:18px;
                border-radius:22px;
            }

            h1{font-size:clamp(30px, 10vw, 46px)}
        }