:root{
            color-scheme: light dark;
            --radius-2xl: 34px;
            --radius-xl: 28px;
            --radius-lg: 22px;
            --radius-md: 16px;
            --radius-sm: 12px;
            --transition: .22s ease;

            --bg:#f5f1ea;
            --bg-2:#ebe4d8;
            --bg-3:#e2d8c7;

            --card:rgba(255,255,255,.72);
            --card-2:rgba(255,255,255,.86);
            --card-3:rgba(255,255,255,.95);

            --line:rgba(44,31,16,.10);
            --line-strong:rgba(184,137,60,.22);

            --text:#1f1a14;
            --muted:rgba(31,26,20,.70);
            --muted-2:rgba(31,26,20,.50);

            --gold:#b8893c;
            --gold-2:#d1ab61;
            --gold-3:#efd9a5;
            --gold-soft:rgba(184,137,60,.10);
            --gold-soft-2:rgba(184,137,60,.16);

            --success:#2f9e63;
            --danger:#c75146;
            --warning:#d18a1a;
            --info:#3c6fd6;

            --shadow:rgba(22,18,12,.12);
            --shadow-strong:rgba(22,18,12,.18);
            --glow:rgba(209,171,97,.26);
        }

        @media (prefers-color-scheme: dark) {
            :root{
                --bg:#09090d;
                --bg-2:#0f1015;
                --bg-3:#151720;
                --card:rgba(20,22,29,.78);
                --card-2:rgba(20,22,29,.88);
                --card-3:rgba(20,22,29,.96);
                --line:rgba(255,255,255,.08);
                --line-strong:rgba(214,179,106,.20);
                --text:#f6f1e8;
                --muted:rgba(246,241,232,.68);
                --muted-2:rgba(246,241,232,.50);
                --gold:#d6b36a;
                --gold-2:#edd395;
                --gold-3:#f4e3bc;
                --gold-soft:rgba(214,179,106,.12);
                --gold-soft-2:rgba(214,179,106,.18);
                --success:#59d090;
                --danger:#ff7b72;
                --warning:#f2b24b;
                --info:#78a6ff;
                --shadow:rgba(0,0,0,.42);
                --shadow-strong:rgba(0,0,0,.52);
                --glow:rgba(214,179,106,.22);
            }
        }

        *{ box-sizing:border-box; }
        html{ scroll-behavior:smooth; }
        body{
            margin:0;
            min-height:100vh;
            font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color:var(--text);
            background:
                    radial-gradient(circle at top, var(--gold-soft), transparent 22%),
                    radial-gradient(circle at 85% 8%, rgba(120,130,255,.08), transparent 20%),
                    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
            padding:24px;
            transition:background var(--transition), color var(--transition);
        }
        a{ color:inherit; text-decoration:none; }
        img{ max-width:100%; display:block; }
        .page{ max-width:1440px; margin:0 auto; }
        .window{
            position:relative;
            overflow:hidden;
            border-radius:38px;
            background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), var(--card-2);
            border:1px solid var(--line);
            box-shadow:0 24px 70px var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
            backdrop-filter:blur(18px);
        }
        .window::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                    radial-gradient(circle at top right, var(--gold-soft), transparent 24%),
                    radial-gradient(circle at 10% 5%, rgba(120,130,255,.08), transparent 18%),
                    linear-gradient(135deg, rgba(255,255,255,.10), transparent 35%);
            pointer-events:none;
        }
        .window-header{
            position:relative;
            z-index:2;
            padding:20px 22px;
            border-bottom:1px solid var(--line);
            background:rgba(255,255,255,.04);
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
            backdrop-filter:blur(10px);
        }
        .site-header{ display:flex; align-items:center; gap:12px; min-width:0; }
        .logo{
            width:56px; height:56px; padding:7px; border-radius:18px; object-fit:contain;
            border:1px solid var(--line-strong); background:rgba(255,255,255,.10);
            box-shadow:0 10px 28px var(--shadow); flex-shrink:0;
        }
        .title-block{ display:flex; flex-direction:column; gap:3px; min-width:0; }
        .sub-title{ font-size:.78rem; font-weight:800; color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; }
        .main-title{ font-size:1.16rem; font-weight:900; color:var(--text); letter-spacing:-.02em; }
        .header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
        .header-btn,
        .btn{
            display:inline-flex; align-items:center; justify-content:center; gap:8px;
            min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line);
            background:rgba(255,255,255,.08); color:var(--text); font-size:.92rem; font-weight:900;
            transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
            backdrop-filter:blur(8px);
        }
        .header-btn:hover, .btn:hover{
            transform:translateY(-2px); border-color:var(--line-strong); background:rgba(255,255,255,.14); box-shadow:0 10px 24px var(--shadow);
        }
        .btn-primary{
            background:linear-gradient(180deg, var(--gold-2), var(--gold));
            color:#fff8ed;
            border-color:color-mix(in srgb, var(--gold) 70%, black 10%);
            box-shadow:0 14px 28px var(--shadow), 0 0 0 6px transparent;
        }
        .btn-primary:hover{ box-shadow:0 18px 32px var(--shadow), 0 0 26px var(--glow); }
        .single-layout{ position:relative; z-index:2; padding:28px; display:grid; gap:22px; }

        .hero-card,
        .notice-card,
        .section-card,
        .quick-stats,
        .help-bar{
            position:relative;
            border-radius:var(--radius-2xl);
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), var(--card);
            box-shadow:0 16px 40px var(--shadow), inset 0 1px 0 rgba(255,255,255,.16);
            overflow:hidden;
        }
        .hero-card::before,
        .notice-card::before,
        .section-card::before,
        .quick-stats::before,
        .help-bar::before{
            content:"";
            position:absolute;
            inset:0;
            background:radial-gradient(circle at top right, var(--gold-soft), transparent 28%);
            pointer-events:none;
        }

        .hero-card{ padding:40px; min-height:340px; }
        .hero-grid{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(320px, .8fr); gap:24px; align-items:center; }
        .hero-kicker{
            display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
            border:1px solid var(--line-strong); background:var(--gold-soft); color:var(--gold);
            font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.11em; margin-bottom:18px;
        }
        .hero-card h1{ margin:0 0 14px; font-size:clamp(2.2rem, 4.4vw, 3.7rem); line-height:.94; letter-spacing:-.05em; max-width:780px; }
        .lead{ max-width:760px; color:var(--muted); line-height:1.78; font-size:1rem; }
        .hero-footer{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
        .hero-chip{
            display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:999px;
            border:1px solid var(--line); background:rgba(255,255,255,.08); font-size:.84rem; font-weight:800; color:var(--text);
        }
        .hero-preview{
            position:relative; border-radius:30px; border:1px solid var(--line-strong);
            background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 55%), linear-gradient(180deg, var(--gold-soft-2), var(--gold-soft));
            padding:18px; box-shadow:0 18px 32px var(--shadow), 0 0 30px var(--glow);
        }
        .hero-preview img{ width:100%; border-radius:22px; object-fit:cover; }

        .notice-card{ padding:18px 20px; font-size:.96rem; color:var(--muted); line-height:1.7; }
        .quick-stats{ padding:16px; }
        .quick-stats-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
        .quick-stat{ padding:16px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.05); }
        .quick-stat-label{ font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); margin-bottom:8px; }
        .quick-stat-value{ font-size:1.35rem; font-weight:900; color:var(--text); line-height:1.1; }
        .quick-stat-sub{ margin-top:6px; color:var(--muted); font-size:.88rem; line-height:1.45; }

        .section-card{ padding:24px; }
        .section-head{ display:flex; justify-content:space-between; align-items:end; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
        .section-head h2{ margin:0; font-size:1.5rem; letter-spacing:-.03em; }
        .section-head p{ margin:8px 0 0; color:var(--muted); max-width:760px; line-height:1.65; }
        .tool-badge{
            display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; border-radius:999px;
            background:var(--gold-soft); border:1px solid var(--line-strong); color:var(--gold); font-size:.84rem; font-weight:900;
        }

        .features-grid,
        .steps-grid,
        .showcase-grid,
        .help-bar-grid{
            display:grid; gap:14px;
        }
        .features-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
        .steps-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
        .showcase-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
        .help-bar-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

        .feature-card,
        .step-card,
        .showcase-card,
        .help-chip{
            border-radius:22px; border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), rgba(255,255,255,.04);
            padding:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
        }
        .feature-badge,
        .step-number{
            display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 12px; border-radius:999px;
            background:var(--gold-soft); border:1px solid var(--line-strong); color:var(--gold); font-size:.78rem; font-weight:900; margin-bottom:12px;
        }
        .feature-card h3,
        .step-card h3,
        .showcase-card h3{ margin:0 0 10px; font-size:1.04rem; letter-spacing:-.02em; }
        .feature-card p,
        .step-card p,
        .showcase-card p,
        .help-chip span{ margin:0; color:var(--muted); line-height:1.65; }
        .showcase-card img{ border-radius:18px; border:1px solid var(--line); margin-bottom:14px; background:rgba(255,255,255,.05); }

        .cta-band{
            display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
            padding:22px; border-radius:26px; border:1px solid var(--line-strong);
            background:radial-gradient(circle at top right, var(--gold-soft), transparent 30%), rgba(255,255,255,.05);
        }
        .cta-band strong{ display:block; font-size:1.14rem; margin-bottom:6px; }
        .cta-band span{ color:var(--muted); line-height:1.6; }
        .cta-actions{ display:flex; flex-wrap:wrap; gap:10px; }

        .help-chip strong{ display:block; color:var(--text); margin-bottom:4px; font-size:.93rem; }

        footer{
            padding:6px 6px 2px; text-align:center; color:var(--muted-2); font-size:.9rem;
        }

        @media (max-width: 1180px){
            .quick-stats-grid,
            .help-bar-grid,
            .steps-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
            .features-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 980px){
            .hero-grid,
            .showcase-grid{ grid-template-columns:1fr; }
        }
        @media (max-width: 860px){
            body{ padding:10px; }
            .single-layout{ padding:18px; }
            .window-header{ padding:14px 16px; }
            .hero-card{ padding:24px; min-height:220px; }
            .features-grid,
            .steps-grid,
            .showcase-grid,
            .quick-stats-grid,
            .help-bar-grid{ grid-template-columns:1fr; }
            .cta-actions{ width:100%; }
            .cta-actions .btn{ width:100%; }
        }
        @media (max-width: 640px){
            .window-header{ flex-direction:column; align-items:flex-start; }
            .header-actions{ width:100%; }
            .header-btn{ width:100%; }
        }