:root{
            --bg:#f7f2fd;
            --surface:#ffffff;
            --surface-soft:#fbf6ff;
            --text:#171422;
            --muted:#555c6b;
            --line:#dfcfe8;
            --primary:#6f3381;
            --primary-dark:#2f1439;
            --gold:#c48a36;
            --gold-dark:#8b5e1d;
            --success:#117a5d;
            --shadow-xl:0 30px 80px rgba(33,22,52,.11);
            --shadow-lg:0 18px 46px rgba(33,22,52,.09);
            --shadow-sm:0 10px 24px rgba(33,22,52,.06);
            --radius-xxl:34px;
            --radius-xl:26px;
            --radius-lg:22px;
            --container:1240px;
            --font-body:"Manrope", Arial, Helvetica, sans-serif;
            --font-heading:"Cormorant Garamond", Georgia, serif;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:var(--font-body);
            color:var(--text);
            line-height:1.65;
            background:
                radial-gradient(circle at top left, rgba(111,51,129,.14), transparent 28%),
                radial-gradient(circle at top right, rgba(196,138,54,.10), transparent 20%),
                linear-gradient(180deg, #fcf9ff 0%, #f7f1fb 44%, #f4edf8 100%);
        }

        img{display:block;max-width:100%}
        a{text-decoration:none;color:inherit}
        button{font:inherit}
        .container{width:min(var(--container), calc(100% - 32px));margin:auto}
        .section{padding:46px 0}

        .topbar{
            background:#24102f;
            color:#f7f2ff;
            font-size:13px;
        }
        .topbar-wrap{
            min-height:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            padding:8px 0;
        }
        .topbar strong{font-weight:800}
        .topbar a{color:#fff}

        .header{
            position:sticky;
            top:0;
            z-index:20;
            backdrop-filter:blur(12px);
            background:rgba(250,245,255,.82);
            border-bottom:1px solid rgba(223,207,232,.8);
        }
        .header-wrap{
            min-height:74px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            font-weight:800;
            color:var(--primary-dark);
        }
        .brand-mark{
            width:44px;
            height:44px;
            border-radius:14px;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#fff;
            font-size:18px;
            font-weight:900;
            background:linear-gradient(180deg, #7b4190, #341641);
            box-shadow:0 14px 20px rgba(111,51,129,.22);
        }
        .nav{
            display:flex;
            align-items:center;
            gap:18px;
            flex-wrap:wrap;
        }
        .nav a{
            font-size:14px;
            font-weight:700;
            color:var(--muted);
        }
        .nav a:hover{color:var(--primary-dark)}

        .btn-row{display:flex;flex-wrap:wrap;gap:12px}
        .btn{
            min-height:52px;
            min-width:152px;
            padding:0 20px;
            border-radius:14px;
            border:1px solid transparent;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            text-align:center;
            font-size:14px;
            font-weight:800;
            transition:.25s ease;
            cursor:pointer;
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(180deg, #7c3f91, #33153f);
            box-shadow:0 18px 28px rgba(111,51,129,.26);
        }
        .btn-primary:hover{transform:translateY(-1px)}
        .btn-secondary{
            color:var(--primary-dark);
            background:linear-gradient(180deg, #ffffff, #f7edff);
            border-color:#dcc9e6;
        }
        .btn-secondary:hover{background:linear-gradient(180deg, #ffffff, #f4e7fd)}
        .btn-download{
            color:#fff;
            background:linear-gradient(180deg, #159170, #0f6e56);
            box-shadow:0 18px 28px rgba(17,122,93,.24);
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:38px;
            padding:0 16px;
            border-radius:999px;
            border:1px solid #ddc8e8;
            background:linear-gradient(180deg, #fbf4ff, #f2e7fb);
            color:var(--primary-dark);
            font-size:12px;
            font-weight:800;
            letter-spacing:.12em;
            text-transform:uppercase;
            margin-bottom:14px;
            box-shadow:0 10px 18px rgba(111,51,129,.08);
        }

        .section-card{
            border:1px solid var(--line);
            border-radius:30px;
            padding:30px;
            background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(251,245,255,.98));
            box-shadow:var(--shadow-lg);
        }

        .section-head{margin-bottom:26px}
        .section-head h2,
        .hero-title,
        .feature-card h3,
        .use-card h3,
        .faq-card h3,
        .content-card h3,
        .step-card h3,
        .cta-banner h2{
            margin:0;
            font-family:var(--font-heading);
            letter-spacing:-.02em;
            line-height:1.04;
        }
        .section-head h2{font-size:clamp(34px,3.1vw,48px);margin-bottom:10px}
        .section-head p{margin:0;max-width:860px;color:var(--muted);font-size:15px}

        /* =========================================================
           SECTION 07 : HERO
        ========================================================== */
        .hero{padding:28px 0 34px}
        .hero-shell{
            padding:18px;
            border:1px solid var(--line);
            border-radius:var(--radius-xxl);
            background:
                radial-gradient(circle at top right, rgba(196,138,54,.10), transparent 24%),
                linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,240,252,.98));
            box-shadow:var(--shadow-xl);
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.04fr .96fr;
            gap:18px;
        }
        .hero-panel,
        .hero-visual{
            border:1px solid var(--line);
            border-radius:var(--radius-xl);
            background:linear-gradient(180deg, #ffffff, #faf2ff);
            box-shadow:var(--shadow-sm);
        }
        .hero-panel{
            padding:38px;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .hero-title{
            font-size:clamp(46px,4.6vw,74px);
            line-height:.96;
            margin-bottom:14px;
        }
        .hero-desc{margin:0;color:var(--muted);font-size:16px;max-width:760px}
        .hero-tags{margin:24px 0;display:flex;flex-wrap:wrap;gap:10px}
        .hero-tag{
            min-height:40px;
            padding:0 14px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            gap:8px;
            background:#fff;
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
            font-size:13px;
            font-weight:700;
        }
        .hero-tag-dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--gold);
            box-shadow:0 0 0 4px rgba(196,138,54,.12);
        }

        .hero-visual{
            padding:18px;
            display:grid;
            gap:14px;
        }
        .mockup{
            position:relative;
            overflow:hidden;
            min-height:360px;
            border:1px solid var(--line);
            border-radius:22px;
            background:
                radial-gradient(circle at top right, rgba(111,51,129,.14), transparent 28%),
                radial-gradient(circle at bottom left, rgba(196,138,54,.10), transparent 22%),
                linear-gradient(180deg, #ffffff, #f7effd);
            padding:18px;
        }
        .mockup-window{
            border:1px solid #e3d4ec;
            border-radius:18px;
            background:#fff;
            box-shadow:var(--shadow-sm);
            overflow:hidden;
        }
        .mockup-top{
            min-height:42px;
            display:flex;
            align-items:center;
            gap:8px;
            padding:0 14px;
            background:linear-gradient(180deg, #f8f1fd, #f1e7f9);
            border-bottom:1px solid #eadcf1;
        }
        .dot-ui{
            width:10px;
            height:10px;
            border-radius:50%;
            background:#d0b2df;
        }
        .mockup-body{
            padding:16px;
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }
        .ui-card{
            min-height:102px;
            border:1px solid #eadcf1;
            border-radius:16px;
            background:linear-gradient(180deg, #ffffff, #faf4ff);
            padding:14px;
        }
        .ui-title{
            font-size:12px;
            font-weight:800;
            letter-spacing:.10em;
            text-transform:uppercase;
            color:#7a6886;
            margin-bottom:10px;
        }
        .ui-line{
            height:10px;
            border-radius:999px;
            background:#efe4f8;
            margin-bottom:10px;
        }
        .ui-line.w-80{width:80%}
        .ui-line.w-65{width:65%}
        .ui-line.w-55{width:55%}
        .ui-line.w-40{width:40%}
        .ui-chip-row{display:flex;flex-wrap:wrap;gap:8px}
        .ui-chip{
            min-height:28px;
            padding:0 10px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            background:#f7edff;
            border:1px solid #eadcf1;
            font-size:12px;
            font-weight:700;
            color:var(--primary-dark);
        }

        .hero-stats{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:12px;
        }
        .stat-card{
            background:linear-gradient(180deg, #ffffff, #f9f2ff);
            border:1px solid var(--line);
            border-radius:16px;
            padding:16px 14px;
            text-align:center;
            box-shadow:var(--shadow-sm);
        }
        .stat-card strong{
            display:block;
            font-size:20px;
            line-height:1.1;
            margin-bottom:4px;
            color:var(--primary-dark);
        }
        .stat-card span{display:block;font-size:13px;color:var(--muted)}

        /* =========================================================
           SECTION 08 : QUICK BAR
        ========================================================== */
        .quick-grid{
            margin-top:18px;
            display:grid;
            grid-template-columns:1.2fr 1fr 1fr;
            gap:16px;
        }
        .quick-card{
            position:relative;
            overflow:hidden;
            min-height:196px;
            border:1px solid var(--line);
            border-radius:24px;
            padding:22px;
            background:linear-gradient(180deg, #ffffff, #fbf3ff);
            box-shadow:var(--shadow-sm);
        }
        .quick-card::before{
            content:"";
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:4px;
            background:linear-gradient(90deg, #7b4190, #c48a36);
        }
        .quick-card h3{
            margin:10px 0 8px;
            font-family:var(--font-heading);
            font-size:32px;
            line-height:1.02;
            color:var(--primary-dark);
        }
        .quick-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .small-label{
            display:inline-block;
            font-size:11px;
            font-weight:800;
            letter-spacing:.14em;
            text-transform:uppercase;
            color:#7c6e5c;
        }

        /* =========================================================
           SECTION 09 : FEATURE GRID
        ========================================================== */
        .feature-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:16px;
        }
        .feature-card,
        .use-card,
        .faq-card,
        .content-card,
        .step-card{
            background:linear-gradient(180deg, #ffffff, #fbf4ff);
            border:1px solid var(--line);
            border-radius:22px;
            padding:22px;
            box-shadow:var(--shadow-sm);
        }
        .feature-card h3,
        .use-card h3,
        .faq-card h3,
        .content-card h3,
        .step-card h3{
            font-size:30px;
            margin-bottom:8px;
        }
        .feature-card p,
        .use-card p,
        .faq-card p,
        .content-card p,
        .step-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .icon-badge{
            width:48px;
            height:48px;
            border-radius:15px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(180deg, #fdf2da, #efcf95);
            color:var(--gold-dark);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 10px 16px rgba(196,138,54,.14);
            margin-bottom:14px;
            font-weight:900;
        }

        /* =========================================================
           SECTION 10 : CONTENT LIST
        ========================================================== */
        .content-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:16px;
        }
        .content-list{
            list-style:none;
            margin:0;
            padding:0;
        }
        .content-list li{
            position:relative;
            padding:12px 0 12px 24px;
            border-bottom:1px solid #eee4f5;
            color:var(--text);
            font-size:15px;
        }
        .content-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:21px;
            width:9px;
            height:9px;
            border-radius:50%;
            background:var(--gold);
            box-shadow:0 0 0 4px rgba(196,138,54,.10);
        }

        /* =========================================================
           SECTION 11 : GOOD FOR
        ========================================================== */
        .use-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:16px;
        }

        /* =========================================================
           SECTION 12 : STEPS
        ========================================================== */
        .step-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:16px;
        }
        .step-no{
            width:38px;
            height:38px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(180deg, #f7e8ff, #ead6f7);
            color:var(--primary-dark);
            font-size:13px;
            font-weight:900;
            margin-bottom:12px;
            box-shadow:0 8px 14px rgba(111,51,129,.10);
        }

        /* =========================================================
           SECTION 13 : FAQ / CTA / FOOTER
        ========================================================== */
        .faq-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:16px;
        }
        .cta-banner{
            overflow:hidden;
            position:relative;
            border:1px solid var(--line);
            border-radius:28px;
            padding:30px;
            background:
                radial-gradient(circle at top right, rgba(111,51,129,.16), transparent 28%),
                radial-gradient(circle at bottom left, rgba(196,138,54,.10), transparent 24%),
                linear-gradient(180deg, #fffdf9, #f5eafb);
            box-shadow:var(--shadow-lg);
        }
        .cta-banner h2{font-size:clamp(36px,3vw,46px);margin-bottom:10px}
        .cta-banner p{margin:0 0 18px;max-width:760px;color:var(--muted)}

        .footer{
            padding:26px 0 36px;
        }
        .footer-card{
            border:1px solid var(--line);
            border-radius:24px;
            background:linear-gradient(180deg, #ffffff, #faf2ff);
            box-shadow:var(--shadow-sm);
            padding:24px;
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.2fr 1fr 1fr;
            gap:16px;
        }
        .footer-card h3{
            margin:0 0 10px;
            font-family:var(--font-heading);
            font-size:28px;
            line-height:1.04;
            color:var(--primary-dark);
        }
        .footer-card p,
        .footer-card li{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .footer-links{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:10px;
        }
        .footer-copy{
            margin-top:18px;
            padding-top:16px;
            border-top:1px solid #eadcf1;
            color:var(--muted);
            font-size:13px;
        }

        /* =========================================================
           SECTION 14 : RESPONSIVE
        ========================================================== */
        @media (max-width:1100px){
            .hero-grid,
            .content-grid,
            .footer-grid{grid-template-columns:1fr}
            .quick-grid,
            .feature-grid,
            .use-grid,
            .step-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
        }

        @media (max-width:820px){
            .topbar-wrap,
            .header-wrap{justify-content:center}
            .nav{justify-content:center}
            .hero-stats,
            .faq-grid,
            .quick-grid,
            .feature-grid,
            .use-grid,
            .step-grid{grid-template-columns:1fr}
            .mockup-body{grid-template-columns:1fr}
        }

        @media (max-width:640px){
            .section{padding:34px 0}
            .section-card,
            .hero-panel,
            .hero-visual,
            .cta-banner,
            .footer-card{padding:22px}
            .hero-title{font-size:42px}
            .section-head h2{font-size:34px}
            .feature-card h3,
            .use-card h3,
            .faq-card h3,
            .content-card h3,
            .step-card h3,
            .quick-card h3{font-size:26px}
            .btn{width:100%}
        }