/* roulang page: index */
:root{
      --bg:#07070a;
      --bg-soft:#101016;
      --panel:#15151f;
      --panel-2:#1b1624;
      --text:#f8f3e8;
      --muted:#b9b0a1;
      --weak:#837a6e;
      --gold:#f6c866;
      --gold-2:#ffd98c;
      --violet:#7c3aed;
      --red:#ff5c7a;
      --green:#36d399;
      --line:rgba(246,200,102,.22);
      --line-soft:rgba(255,255,255,.08);
      --shadow:0 24px 80px rgba(0,0,0,.45);
      --shadow-gold:0 18px 50px rgba(246,200,102,.15);
      --radius-lg:28px;
      --radius-md:20px;
      --radius-sm:14px;
      --container:1180px;
      --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:var(--font);line-height:1.7;color:var(--text);background:radial-gradient(circle at 15% 0%,rgba(124,58,237,.28),transparent 34%),radial-gradient(circle at 85% 12%,rgba(246,200,102,.2),transparent 32%),linear-gradient(180deg,#07070a 0%,#0d0b10 42%,#08080b 100%);min-height:100vh;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{border:0;cursor:pointer}
    .container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:50;background:rgba(7,7,10,.76);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft)}
    .nav{height:76px;display:flex;align-items:center;gap:26px}
    .logo{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
    .logo-mark{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,var(--gold),#8b5cf6);box-shadow:0 10px 34px rgba(246,200,102,.28);display:grid;place-items:center;color:#120d04;font-weight:1000}
    .nav-links{display:flex;align-items:center;gap:8px;margin-left:10px}
    .nav-links a{padding:9px 14px;border-radius:999px;color:var(--muted);font-weight:700;font-size:14px}
    .nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,.08)}
    .nav-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
    .command-search{display:flex;align-items:center;gap:9px;min-width:250px;padding:10px 13px;border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.05);color:var(--weak);font-size:13px}
    .kbd{margin-left:auto;border:1px solid var(--line-soft);border-radius:7px;padding:1px 7px;color:var(--gold);background:rgba(246,200,102,.08)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:12px 18px;font-weight:900;letter-spacing:.01em;transition:.25s ease;border:1px solid transparent;white-space:nowrap}
    .btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#151007;box-shadow:var(--shadow-gold)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 58px rgba(246,200,102,.25)}
    .btn-ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.04)}
    .btn-ghost:hover{background:rgba(246,200,102,.1);border-color:rgba(246,200,102,.45)}
    .btn-danger{background:rgba(255,92,122,.12);border-color:rgba(255,92,122,.34);color:#ffd6de}
    .btn-danger:hover{background:rgba(255,92,122,.2)}
    .menu-toggle{display:none;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.06);color:var(--text)}
    main{position:relative}
    section{padding:72px 0}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(246,200,102,.08);color:var(--gold);font-size:13px;font-weight:900;margin-bottom:16px}
    .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
    .section-head h2{font-size:clamp(26px,3.2vw,42px);line-height:1.18;letter-spacing:-.04em}
    .section-head p{max-width:580px;color:var(--muted);font-size:16px}
    .hero{padding:56px 0 72px}
    .hero-panel{border:1px solid var(--line);border-radius:36px;background:linear-gradient(135deg,rgba(21,21,31,.96),rgba(17,13,25,.92));box-shadow:var(--shadow);overflow:hidden;position:relative}
    .hero-panel:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 10% 20%,rgba(246,200,102,.2),transparent 28%),radial-gradient(circle at 82% 32%,rgba(124,58,237,.24),transparent 30%);pointer-events:none}
    .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:34px;padding:44px}
    .hero h1{font-size:clamp(34px,5.4vw,66px);line-height:1.03;letter-spacing:-.065em;max-width:680px}
    .hero-desc{margin-top:20px;color:#d8cec0;font-size:18px;max-width:650px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
    .hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
    .metric{padding:16px;border:1px solid var(--line-soft);border-radius:18px;background:rgba(255,255,255,.045)}
    .metric strong{display:block;font-size:24px;color:var(--gold);line-height:1.1}
    .metric span{display:block;color:var(--muted);font-size:13px;margin-top:5px}
    .rank-board{border:1px solid var(--line);border-radius:28px;background:rgba(8,8,12,.58);padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
    .rank-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
    .rank-top b{font-size:18px}.status-dot{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:13px;font-weight:800}.status-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}
    .rank-item{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid var(--line-soft);margin-bottom:10px}
    .rank-no{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(246,200,102,.12);color:var(--gold);font-weight:900}
    .rank-item h3{font-size:15px;margin-bottom:2px}.rank-item p{color:var(--muted);font-size:13px;line-height:1.45}.pill{padding:5px 9px;border-radius:999px;background:rgba(54,211,153,.12);color:#9ff3d0;font-size:12px;font-weight:900}
    .coupon-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}
    .coupon{position:relative;min-height:190px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(246,200,102,.14),rgba(255,255,255,.045));padding:24px;overflow:hidden;transition:.25s ease}
    .coupon:after{content:"";position:absolute;right:-28px;top:50%;width:56px;height:56px;border-radius:50%;background:var(--bg)}
    .coupon:hover{transform:translateY(-4px);box-shadow:var(--shadow-gold);border-color:rgba(246,200,102,.48)}
    .coupon .badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#19120a;color:var(--gold);font-weight:900;font-size:12px;border:1px solid var(--line)}
    .coupon h3{font-size:28px;line-height:1.18;margin:18px 0 10px}.coupon p{color:var(--muted)}
    .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:stretch}
    .rule-panel,.story-panel,.cta-panel{border:1px solid var(--line-soft);border-radius:28px;background:rgba(255,255,255,.045);padding:28px}
    .rule-list{display:grid;gap:12px}.rule{display:flex;gap:14px;padding:16px;border-radius:18px;background:rgba(0,0,0,.2);border:1px solid var(--line-soft)}
    .rule-icon{flex:0 0 36px;width:36px;height:36px;border-radius:13px;background:rgba(246,200,102,.12);color:var(--gold);display:grid;place-items:center;font-weight:1000}.rule h3{font-size:17px}.rule p{color:var(--muted);font-size:14px;margin-top:3px}
    .poster-track{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;overflow:hidden}
    .poster{min-height:220px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(124,58,237,.28),rgba(246,200,102,.12)),linear-gradient(180deg,#242032,#0e0e15);padding:16px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;transition:.25s ease}
    .poster:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.16),transparent 25%)}
    .poster h3,.poster p,.poster a{position:relative}.poster h3{font-size:16px}.poster p{color:var(--muted);font-size:13px;margin:4px 0 12px}.poster a{font-weight:900;color:var(--gold);font-size:13px}.poster:hover{transform:translateY(-6px);border-color:rgba(246,200,102,.5)}
    .trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.trust{border:1px solid var(--line-soft);border-radius:22px;background:rgba(255,255,255,.04);padding:22px}.trust strong{font-size:32px;color:var(--gold);line-height:1}.trust span{display:block;color:var(--muted);margin-top:8px;font-size:14px}
    .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare-card{border:1px solid var(--line-soft);border-radius:24px;padding:24px;background:rgba(255,255,255,.04)}.compare-card.highlight{border-color:rgba(246,200,102,.42);background:rgba(246,200,102,.08)}.compare-card h3{font-size:21px;margin-bottom:14px}.compare-card li{list-style:none;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line-soft)}.compare-card li:last-child{border-bottom:0}
    .news-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}.news-list{border:1px solid var(--line-soft);border-radius:26px;background:rgba(255,255,255,.04);overflow:hidden}.news-item{display:grid;grid-template-columns:120px 1fr auto;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line-soft)}.news-item:last-child{border-bottom:0}.news-date{color:var(--gold);font-weight:900;font-size:13px}.news-item a{font-weight:900}.news-item a:hover{color:var(--gold)}.news-item p{color:var(--muted);font-size:14px;margin-top:3px}.arrow{color:var(--weak)}
    .recommend{border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(124,58,237,.18),rgba(246,200,102,.08));padding:24px}.recommend h3{font-size:24px}.recommend p{color:var(--muted);margin:10px 0 18px}.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}.tag{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line-soft);color:var(--muted);font-size:13px;font-weight:800}
    .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.faq{border:1px solid var(--line-soft);border-radius:22px;background:rgba(255,255,255,.04);padding:22px}.faq h3{font-size:18px;margin-bottom:8px}.faq p{color:var(--muted);font-size:15px}
    .cta-panel{background:linear-gradient(135deg,rgba(246,200,102,.16),rgba(124,58,237,.16));display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:center;border-color:var(--line)}.cta-panel h2{font-size:clamp(28px,4vw,48px);line-height:1.15;letter-spacing:-.04em}.cta-panel p{color:#d8cec0;margin-top:12px}.cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
    .site-footer{border-top:1px solid var(--line-soft);background:#060609;padding:44px 0 28px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:26px}.footer-brand p,.footer-col p{color:var(--muted);margin-top:10px}.footer-col h3{font-size:16px;margin-bottom:10px}.footer-col a{display:block;color:var(--muted);padding:5px 0}.footer-col a:hover{color:var(--gold)}.copyright{margin-top:30px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:16px;color:var(--weak);font-size:13px;flex-wrap:wrap}
    a:focus-visible,button:focus-visible{outline:3px solid rgba(246,200,102,.55);outline-offset:3px}
    @media (max-width:1024px){.command-search{display:none}.hero-grid,.split,.cta-panel{grid-template-columns:1fr}.coupon-grid{grid-template-columns:1fr 1fr}.poster-track{grid-template-columns:repeat(3,1fr)}.trust-row{grid-template-columns:repeat(2,1fr)}.news-layout{grid-template-columns:1fr}.cta-actions{justify-content:flex-start}}
    @media (max-width:768px){.container{width:min(100% - 28px,var(--container))}.nav{height:auto;min-height:70px;flex-wrap:wrap;padding:12px 0}.menu-toggle{display:inline-grid;place-items:center;margin-left:auto}.nav-actions{width:100%;justify-content:space-between}.nav-links{order:3;width:100%;overflow-x:auto;padding-bottom:4px;margin-left:0}.hero-panel{border-radius:26px}.hero-grid{padding:24px}.hero-metrics,.coupon-grid,.compare,.faq-grid,.footer-grid{grid-template-columns:1fr}.poster-track{display:flex;overflow-x:auto;padding-bottom:8px}.poster{min-width:210px}.news-item{grid-template-columns:1fr;gap:6px}.section-head{display:block}.section-head p{margin-top:10px}section{padding:52px 0}}
    @media (max-width:520px){.logo span{max-width:220px;overflow:hidden;text-overflow:ellipsis}.hero-actions .btn,.cta-actions .btn{width:100%}.trust-row{grid-template-columns:1fr}.metric{padding:13px}.hero-metrics{gap:9px}.metric strong{font-size:20px}.rank-item{grid-template-columns:30px 1fr}.rank-item .pill{grid-column:2}.coupon h3{font-size:23px}}

/* roulang page: category1 */
:root {
      --bg: #0f0d14;
      --bg-soft: #17131f;
      --surface: #201a2a;
      --surface-2: #fbf6eb;
      --card: rgba(255, 255, 255, 0.07);
      --card-strong: rgba(255, 255, 255, 0.12);
      --text: #fffaf0;
      --text-dark: #211a12;
      --muted: #b9ad9a;
      --muted-dark: #625849;
      --gold: #d6a84f;
      --gold-2: #f3d58a;
      --amber: #ffb94f;
      --danger: #ff6b6b;
      --green: #56d19d;
      --border: rgba(243, 213, 138, 0.24);
      --border-dark: rgba(33, 26, 18, 0.12);
      --shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
      --shadow-soft: 0 14px 42px rgba(35, 21, 7, 0.12);
      --radius-lg: 28px;
      --radius-md: 18px;
      --radius-sm: 12px;
      --container: 1180px;
      --nav-h: 76px;
      --ease: 180ms ease;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      line-height: 1.7;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(214, 168, 79, 0.18), transparent 36%),
        radial-gradient(circle at 88% 10%, rgba(116, 67, 255, 0.16), transparent 32%),
        linear-gradient(180deg, #0f0d14 0%, #15111d 48%, #0f0d14 100%);
      min-height: 100vh;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input { font: inherit; }
    button { cursor: pointer; border: 0; }
    ::selection { background: rgba(214, 168, 79, 0.34); color: #fff; }

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

    .skip-link {
      position: absolute;
      left: 16px;
      top: -48px;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--gold);
      color: #18110a;
      z-index: 100;
      transition: top var(--ease);
    }
    .skip-link:focus { top: 12px; outline: 3px solid rgba(255,255,255,.4); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(18px);
      background: rgba(15, 13, 20, 0.82);
      border-bottom: 1px solid rgba(243, 213, 138, 0.12);
    }
    .top-strip {
      background: linear-gradient(90deg, rgba(243, 213, 138, 0.16), rgba(255,255,255,0.04), rgba(118, 74, 255, 0.12));
      border-bottom: 1px solid rgba(243, 213, 138, 0.12);
      color: var(--gold-2);
      font-size: 13px;
    }
    .top-strip .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 38px;
    }
    .top-strip strong { color: #fff3ce; font-weight: 700; }
    .top-strip .safe-exit {
      color: #fff;
      border: 1px solid rgba(255,255,255,.18);
      padding: 4px 10px;
      border-radius: 999px;
      transition: background var(--ease), transform var(--ease);
    }
    .top-strip .safe-exit:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }

    .navbar {
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .logo-mark {
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      border-radius: 13px;
      color: #1b1207;
      background: linear-gradient(135deg, var(--gold-2), var(--gold));
      box-shadow: 0 10px 26px rgba(214, 168, 79, 0.26);
      flex: 0 0 auto;
    }
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.045);
    }
    .nav-links a {
      padding: 9px 14px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 650;
      white-space: nowrap;
      transition: color var(--ease), background var(--ease), transform var(--ease);
    }
    .nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateY(-1px); }
    .nav-links a.active { color: #1c1308; background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .command-search {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 230px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.055);
      color: var(--muted);
      font-size: 13px;
    }
    .command-search kbd {
      margin-left: auto;
      border: 1px solid rgba(243,213,138,.24);
      border-bottom-width: 2px;
      border-radius: 7px;
      padding: 0 6px;
      color: var(--gold-2);
      background: rgba(0,0,0,.16);
      font-size: 12px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 11px 18px;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: -0.01em;
      border: 1px solid transparent;
      transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
    }
    .btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible {
      outline: 3px solid rgba(243, 213, 138, 0.42);
      outline-offset: 3px;
    }
    .btn-primary {
      color: #1b1207;
      background: linear-gradient(135deg, var(--gold-2), var(--gold));
      box-shadow: 0 14px 34px rgba(214, 168, 79, 0.28);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(214, 168, 79, 0.36); }
    .btn-ghost {
      color: #fff6df;
      border-color: rgba(243, 213, 138, 0.28);
      background: rgba(255,255,255,.06);
    }
    .btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
    .mobile-toggle { display: none; background: transparent; color: #fff; padding: 8px; border-radius: 12px; }

    .hero-band {
      padding: 34px 0 26px;
      background:
        linear-gradient(90deg, rgba(251,246,235,.98), rgba(251,246,235,.92)),
        radial-gradient(circle at 85% 10%, rgba(214,168,79,.42), transparent 32%);
      color: var(--text-dark);
      border-bottom: 1px solid rgba(214, 168, 79, 0.2);
    }
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: var(--muted-dark);
      font-size: 14px;
    }
    .breadcrumb a { color: #5b431d; font-weight: 750; }
    .hero-line {
      display: grid;
      grid-template-columns: 1.35fr .65fr;
      align-items: end;
      gap: 28px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 11px;
      border-radius: 999px;
      background: rgba(214,168,79,.14);
      border: 1px solid rgba(214,168,79,.26);
      color: #6f4e12;
      font-weight: 850;
      font-size: 13px;
    }
    h1 {
      margin: 13px 0 10px;
      font-size: clamp(28px, 4vw, 52px);
      line-height: 1.08;
      letter-spacing: -0.05em;
      max-width: 860px;
    }
    .hero-desc {
      margin: 0;
      max-width: 820px;
      color: #564b3d;
      font-size: 17px;
    }
    .hero-note {
      padding: 16px;
      border-radius: var(--radius-md);
      background: #fffaf0;
      border: 1px solid rgba(214,168,79,.28);
      box-shadow: var(--shadow-soft);
    }
    .hero-note strong { display: block; color: #2b2013; margin-bottom: 4px; }
    .hero-note span { color: #6f6251; font-size: 14px; }

    main { overflow: hidden; }
    .section { padding: 72px 0; }
    .section.alt { background: rgba(255,255,255,.035); border-block: 1px solid rgba(255,255,255,.06); }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 22px;
      margin-bottom: 28px;
    }
    .section-head h2 {
      margin: 0;
      font-size: clamp(25px, 3vw, 38px);
      line-height: 1.18;
      letter-spacing: -0.035em;
    }
    .section-head p { margin: 0; color: var(--muted); max-width: 520px; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--gold-2);
      background: rgba(214, 168, 79, 0.11);
      border: 1px solid rgba(214, 168, 79, 0.22);
      font-size: 13px;
      font-weight: 800;
    }

    .product-flow {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: 26px;
      align-items: stretch;
    }
    .feature-panel, .glass-card {
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045));
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }
    .feature-panel {
      padding: 28px;
      position: relative;
      overflow: hidden;
    }
    .feature-panel::after {
      content: "";
      position: absolute;
      inset: auto -70px -90px auto;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(214,168,79,.16);
      filter: blur(2px);
    }
    .feature-panel h2 { margin: 14px 0 10px; font-size: clamp(26px, 3vw, 40px); line-height: 1.14; }
    .feature-panel p { margin: 0 0 20px; color: var(--muted); }
    .check-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
    .check-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 16px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.07);
    }
    .check-icon {
      width: 25px;
      height: 25px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: #1b1207;
      background: var(--gold-2);
      font-weight: 900;
    }
    .items-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .item-card {
      min-height: 190px;
      padding: 22px;
      border-radius: 24px;
      border: 1px solid rgba(243,213,138,.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045)),
        radial-gradient(circle at 100% 0, rgba(214,168,79,.14), transparent 44%);
      transition: transform var(--ease), border-color var(--ease), background var(--ease);
    }
    .item-card:hover { transform: translateY(-4px); border-color: rgba(243,213,138,.42); background-color: rgba(255,255,255,.04); }
    .item-card .icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(214,168,79,.16);
      border: 1px solid rgba(214,168,79,.25);
      color: var(--gold-2);
      font-size: 21px;
      margin-bottom: 18px;
    }
    .item-card h3 { margin: 0 0 8px; font-size: 19px; }
    .item-card p { margin: 0; color: var(--muted); font-size: 14px; }

    .review-layout {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 18px;
    }
    .review-card {
      padding: 24px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.06);
      position: relative;
      overflow: hidden;
    }
    .review-card::before {
      content: "“";
      position: absolute;
      right: 18px;
      top: -12px;
      font-size: 96px;
      line-height: 1;
      color: rgba(214,168,79,.16);
      font-family: Georgia, serif;
    }
    .review-card p { margin: 0 0 18px; color: #eadfcb; }
    .review-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; }
    .stars { color: var(--gold-2); letter-spacing: 1px; }

    .guarantee-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
    }
    .guarantee-item {
      padding: 24px;
      border-right: 1px solid rgba(255,255,255,.08);
    }
    .guarantee-item:last-child { border-right: 0; }
    .guarantee-item strong { display: block; font-size: 18px; margin-bottom: 6px; }
    .guarantee-item span { color: var(--muted); font-size: 14px; }

    .steps {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 24px;
      align-items: center;
    }
    .step-list { display: grid; gap: 14px; }
    .step {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 16px;
      padding: 18px;
      border-radius: 20px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.09);
    }
    .step-num {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      color: #1b1207;
      font-weight: 900;
      background: linear-gradient(135deg, var(--gold-2), var(--gold));
    }
    .step h3 { margin: 0 0 4px; }
    .step p { margin: 0; color: var(--muted); font-size: 14px; }
    .age-card {
      padding: 28px;
      border-radius: var(--radius-lg);
      background: var(--surface-2);
      color: var(--text-dark);
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(214,168,79,.28);
    }
    .age-card h2 { margin: 0 0 10px; font-size: 30px; letter-spacing: -0.03em; }
    .age-card p { color: var(--muted-dark); margin: 0 0 18px; }
    .age-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
    .age-options .btn-yes { background: #20160b; color: #fff3ce; }
    .age-options .btn-no { background: #fff; color: #2b2013; border: 1px solid var(--border-dark); }

    .faq-wrap { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; align-items: start; }
    .faq-intro {
      position: sticky;
      top: calc(var(--nav-h) + 28px);
      padding: 24px;
      border-radius: 24px;
      background: rgba(214,168,79,.1);
      border: 1px solid rgba(214,168,79,.22);
    }
    .faq-intro h2 { margin: 10px 0; font-size: 32px; line-height: 1.18; }
    .faq-intro p { color: var(--muted); margin: 0; }
    .faq-list { display: grid; gap: 12px; }
    details {
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.055);
      overflow: hidden;
    }
    summary {
      list-style: none;
      padding: 18px 20px;
      font-weight: 850;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; color: var(--gold-2); font-size: 22px; }
    details[open] summary::after { content: "−"; }
    details p { margin: 0; padding: 0 20px 20px; color: var(--muted); }

    .cta {
      padding: 42px;
      border-radius: 34px;
      border: 1px solid rgba(243,213,138,.28);
      background:
        linear-gradient(135deg, rgba(214,168,79,.18), rgba(255,255,255,.06)),
        radial-gradient(circle at 82% 20%, rgba(243,213,138,.26), transparent 36%);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 24px;
      box-shadow: var(--shadow);
    }
    .cta h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.04em; }
    .cta p { margin: 0; color: var(--muted); max-width: 720px; }
    .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

    .site-footer {
      padding: 54px 0 28px;
      background: #0b090f;
      border-top: 1px solid rgba(243,213,138,.14);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr .7fr .95fr;
      gap: 34px;
      padding-bottom: 30px;
    }
    .footer-brand p, .footer-col p { color: var(--muted); margin: 14px 0 0; }
    .footer-col h3 { margin: 0 0 14px; font-size: 16px; color: #fff3ce; }
    .footer-col a {
      display: block;
      color: var(--muted);
      margin: 8px 0;
      transition: color var(--ease), transform var(--ease);
    }
    .footer-col a:hover { color: var(--gold-2); transform: translateX(3px); }
    .copyright {
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      color: #8e8374;
      font-size: 13px;
    }

    @media (max-width: 1024px) {
      .command-search { display: none; }
      .hero-line, .product-flow, .steps, .faq-wrap { grid-template-columns: 1fr; }
      .review-layout { grid-template-columns: 1fr 1fr; }
      .guarantee-strip { grid-template-columns: 1fr 1fr; }
      .guarantee-item:nth-child(2) { border-right: 0; }
      .guarantee-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); }
      .faq-intro { position: static; }
      .cta { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .container { width: min(100% - 28px, var(--container)); }
      .top-strip .container { align-items: flex-start; flex-direction: column; padding: 9px 0; }
      .navbar { height: auto; min-height: var(--nav-h); flex-wrap: wrap; padding: 14px 0; }
      .logo span:last-child { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .mobile-toggle { display: inline-grid; place-items: center; margin-left: auto; border: 1px solid rgba(255,255,255,.1); }
      .nav-links {
        order: 5;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        border-radius: 18px;
      }
      .nav-actions { margin-left: auto; }
      .nav-actions .btn-primary { display: none; }
      .hero-band { padding: 24px 0; }
      .section { padding: 54px 0; }
      .section-head { align-items: flex-start; flex-direction: column; }
      .items-grid, .review-layout, .guarantee-strip, .age-options, .footer-grid { grid-template-columns: 1fr; }
      .guarantee-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
      .guarantee-item:last-child { border-bottom: 0; }
      .copyright { flex-direction: column; }
    }

    @media (max-width: 520px) {
      .btn { width: 100%; }
      .cta { padding: 26px; border-radius: 24px; }
      .feature-panel, .age-card { padding: 22px; border-radius: 22px; }
      .item-card { min-height: auto; }
      .step { grid-template-columns: 1fr; }
      .step-num { width: 46px; height: 46px; }
      h1 { font-size: 30px; }
      .hero-desc { font-size: 15px; }
    }