/* roulang page: index */
:root{
  --bg-950:#04170F;
  --bg-900:#051F14;
  --bg-850:#072417;
  --bg-800:#0B2E1E;
  --bg-700:#103A27;
  --gold-600:#D97706;
  --gold-500:#F59E0B;
  --gold-400:#FBBF24;
  --gold-300:#FCD34D;
  --red-600:#DC2626;
  --ink:#F8FAFC;
  --mint:#D1FAE5;
  --muted:#A3A375;
  --muted-2:#8FA79A;
  --line:rgba(245,158,11,.20);
  --line-soft:rgba(209,250,229,.10);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow-md:0 14px 40px rgba(0,0,0,.42);
  --shadow-gold:0 12px 34px rgba(245,158,11,.22);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(16,58,39,.85) 0%, rgba(5,31,20,0) 62%),
    radial-gradient(900px 520px at 92% 8%, rgba(245,158,11,.10) 0%, rgba(5,31,20,0) 60%),
    var(--bg-900);
  color:var(--ink);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold-400);text-decoration:none;transition:color .22s ease}
a:hover{color:var(--gold-300)}
h1,h2,h3,h4{margin:0 0 .6em;font-weight:800;line-height:1.24;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(1.8rem,3.6vw,2.9rem)}
h2{font-size:clamp(1.45rem,2.5vw,2.1rem)}
h3{font-size:clamp(1.08rem,1.6vw,1.28rem)}
p{margin:0 0 1rem;color:var(--mint);line-height:1.68}
ul{margin:0 0 1rem;padding-left:1.15rem;color:var(--mint)}
li{margin-bottom:.4rem;line-height:1.6}
button,input,select{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:74px 0;position:relative}
.section--tight{padding:54px 0}
.section--alt{background:linear-gradient(180deg,rgba(11,46,30,.75) 0%,rgba(4,23,15,.55) 100%);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-head{max-width:820px;margin-bottom:38px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{margin-bottom:0;color:var(--muted-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-400);background:rgba(245,158,11,.10);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:16px
}
.divider-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.55),transparent);border:0;margin:0}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(4,23,15,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border-radius:13px;font-size:1.15rem;
  background:linear-gradient(145deg,var(--gold-400),var(--gold-600));
  color:#2B0404;box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.16}
.brand-text strong{font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.brand-text span{font-size:.7rem;color:var(--gold-400);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-list a{
  display:block;padding:9px 13px;border-radius:10px;
  font-size:.87rem;font-weight:600;color:var(--mint);
  border:1px solid transparent;transition:all .2s ease;white-space:nowrap
}
.nav-list a:hover{background:rgba(245,158,11,.10);color:var(--gold-300);border-color:var(--line)}
.nav-list a.active{background:rgba(245,158,11,.16);color:var(--gold-300);border-color:var(--line)}
.nav-menu{flex:1 1 auto;display:flex;justify-content:center}
.nav-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav-toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);color:var(--gold-300);
  background:rgba(245,158,11,.08);font-size:1.05rem;line-height:1
}
.btn-ghost{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:11px;
  font-size:.84rem;font-weight:700;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.45);background:transparent;transition:all .2s ease
}
.btn-ghost:hover{background:rgba(245,158,11,.14);color:var(--gold-300);border-color:var(--gold-400)}
.btn-gold{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:11px;
  font-size:.84rem;font-weight:800;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:var(--shadow-gold);transition:all .2s ease;border:0
}
.btn-gold:hover{transform:translateY(-2px);color:#3B1D02;box-shadow:0 16px 38px rgba(245,158,11,.34)}
.btn-gold:active{transform:translateY(0) scale(.98)}

/* HERO */
.hero{position:relative;padding:78px 0 66px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.30;filter:saturate(.9)
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,23,15,.72) 0%,rgba(4,23,15,.90) 62%,var(--bg-900) 100%)
}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:960px;margin:0 auto}
.hero h1{margin-bottom:20px;text-shadow:0 4px 24px rgba(0,0,0,.55)}
.hero-lead{font-size:1.03rem;max-width:790px;margin:0 auto 30px;color:var(--mint)}
.hero-search{
  display:flex;gap:10px;max-width:640px;margin:0 auto 20px;
  background:rgba(7,36,23,.85);border:1px solid var(--line);
  border-radius:999px;padding:8px 8px 8px 20px;box-shadow:var(--shadow-md)
}
.hero-search input{
  flex:1;background:transparent;border:0;color:var(--ink);font-size:.95rem;min-width:0
}
.hero-search input::placeholder{color:rgba(163,163,117,.85)}
.hero-search input:focus{outline:none}
.hero-search button{
  border-radius:999px;padding:12px 26px;font-weight:800;font-size:.9rem;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));white-space:nowrap
}
.hero-search button:hover{filter:brightness(1.06)}
.hero-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  font-size:.8rem;font-weight:700;color:var(--mint);
  background:rgba(11,46,30,.75);border:1px solid var(--line);transition:all .2s ease
}
.chip:hover{color:var(--gold-300);border-color:var(--gold-400);background:rgba(245,158,11,.12);transform:translateY(-2px)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:820px;margin:0 auto}
.stat-box{
  background:rgba(7,36,23,.72);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:16px 12px
}
.stat-box b{display:block;font-size:1.24rem;font-weight:800;color:var(--gold-400)}
.stat-box span{font-size:.76rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}

/* BUTTONS */
.btn-primary{
  display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:13px;
  font-weight:800;font-size:.95rem;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:var(--shadow-gold);transition:all .22s ease
}
.btn-primary:hover{transform:translateY(-3px);color:#3B1D02;box-shadow:0 20px 44px rgba(245,158,11,.34)}
.btn-primary:active{transform:translateY(-1px) scale(.99)}
.btn-line{
  display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:13px;
  font-weight:700;font-size:.94rem;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.06);transition:all .22s ease
}
.btn-line:hover{background:rgba(245,158,11,.15);color:var(--gold-300);border-color:var(--gold-400);transform:translateY(-2px)}

/* CARDS & GRIDS */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.g-card{
  background:linear-gradient(160deg,rgba(11,46,30,.90) 0%,rgba(7,36,23,.82) 100%);
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease
}
.g-card:hover{transform:translateY(-5px);border-color:rgba(245,158,11,.45);box-shadow:var(--shadow-md)}
.g-card .ico{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(245,158,11,.13);border:1px solid var(--line);
  color:var(--gold-400);font-size:1.15rem;margin-bottom:16px
}
.g-card h3{margin-bottom:9px}
.g-card p{margin-bottom:0;font-size:.93rem;color:var(--muted-2)}
.card-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card-media:hover img{transform:scale(1.05)}
.tag{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;color:var(--gold-300);
  background:rgba(245,158,11,.14);border:1px solid var(--line)
}
.tag--red{color:#FEE2E2;background:rgba(220,38,38,.30);border-color:rgba(220,38,38,.55)}

/* PROBLEM SECTION */
.problem-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.pain-list{list-style:none;padding:0;margin:0}
.pain-list li{
  display:flex;gap:14px;padding:15px 0;border-bottom:1px dashed var(--line-soft);align-items:flex-start
}
.pain-list li:last-child{border-bottom:0}
.pain-list .x{
  flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(220,38,38,.18);border:1px solid rgba(220,38,38,.42);color:#FCA5A5;font-size:.8rem
}
.pain-list strong{display:block;color:var(--ink);font-size:.96rem;margin-bottom:2px}
.pain-list span{font-size:.88rem;color:var(--muted-2)}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{
  position:relative;padding:26px 22px;
  background:linear-gradient(160deg,rgba(11,46,30,.88),rgba(7,36,23,.78));
  border:1px solid var(--line);border-radius:var(--radius)
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:-15px;left:22px;
  font-size:1.5rem;font-weight:900;color:var(--gold-400);
  background:var(--bg-900);padding:0 10px;line-height:1;letter-spacing:-.03em
}
.step h3{margin:8px 0 9px;font-size:1.02rem}
.step p{font-size:.88rem;color:var(--muted-2);margin-bottom:0}

/* RESULTS */
.result-band{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.bar-list{display:flex;flex-direction:column;gap:16px}
.bar-row{display:grid;grid-template-columns:132px 1fr 62px;gap:14px;align-items:center}
.bar-row span{font-size:.85rem;color:var(--mint);font-weight:600}
.bar-track{height:11px;border-radius:999px;background:rgba(209,250,229,.10);overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-600),var(--gold-300))}
.bar-row b{font-size:.86rem;color:var(--gold-400);text-align:right}

/* RESOURCE WALL */
.res-card{
  display:flex;flex-direction:column;height:100%;
  background:rgba(7,36,23,.74);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;transition:all .24s ease
}
.res-card:hover{border-color:rgba(245,158,11,.5);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.res-card .res-top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.res-card .res-top i{color:var(--gold-400);font-size:1.15rem}
.res-card h3{font-size:1rem;margin-bottom:8px}
.res-card p{font-size:.87rem;color:var(--muted-2);margin-bottom:16px;flex:1}
.res-link{font-size:.83rem;font-weight:800;color:var(--gold-400)}

/* MATRIX */
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.matrix-item{
  display:flex;gap:14px;padding:18px;border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);background:rgba(11,46,30,.55);transition:all .22s ease
}
.matrix-item:hover{border-color:var(--line);background:rgba(11,46,30,.85)}
.matrix-item i{color:var(--gold-400);font-size:1.05rem;margin-top:3px}
.matrix-item strong{display:block;font-size:.93rem;margin-bottom:3px}
.matrix-item span{font-size:.83rem;color:var(--muted-2)}

/* AUDIENCE */
.audience{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.audience-col{border-radius:var(--radius);padding:26px;border:1px solid var(--line)}
.audience-col.yes{background:linear-gradient(160deg,rgba(16,185,129,.10),rgba(7,36,23,.85))}
.audience-col.no{background:linear-gradient(160deg,rgba(220,38,38,.10),rgba(7,36,23,.85))}
.audience-col h3{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.audience-col ul{list-style:none;padding:0;margin:0}
.audience-col li{display:flex;gap:10px;font-size:.9rem;color:var(--mint);padding:7px 0}
.audience-col li i{margin-top:5px;font-size:.72rem}
.audience-col.yes i{color:#34D399}
.audience-col.no i{color:#F87171}

/* SECURITY */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sec-item{
  text-align:left;padding:22px;border-radius:var(--radius);
  background:rgba(7,36,23,.72);border:1px solid var(--line-soft)
}
.sec-item i{font-size:1.5rem;color:var(--gold-400);margin-bottom:14px;display:block}
.sec-item strong{display:block;font-size:.95rem;margin-bottom:6px;color:var(--ink)}
.sec-item span{font-size:.84rem;color:var(--muted-2)}

/* METRICS */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.metric{padding:24px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(160deg,rgba(11,46,30,.9),rgba(7,36,23,.75))}
.metric b{display:block;font-size:1.9rem;font-weight:900;color:var(--gold-400);letter-spacing:-.03em;line-height:1.1}
.metric span{font-size:.84rem;color:var(--muted-2);display:block;margin-top:8px}

/* TIMELINE */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--gold-500),rgba(245,158,11,.06))}
.tl-item{position:relative;padding:0 0 28px 0}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-30px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--bg-900);border:2px solid var(--gold-500);box-shadow:0 0 0 4px rgba(245,158,11,.12)
}
.tl-item time{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-400)}
.tl-item h3{font-size:1rem;margin:6px 0 6px}
.tl-item p{font-size:.88rem;color:var(--muted-2);margin-bottom:0}

/* TESTIMONIALS */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{
  padding:24px;border-radius:var(--radius);border:1px solid var(--line-soft);
  background:rgba(7,36,23,.72);display:flex;flex-direction:column;height:100%
}
.quote .stars{color:var(--gold-400);font-size:.8rem;margin-bottom:12px;letter-spacing:.1em}
.quote p{font-size:.9rem;color:var(--mint);flex:1}
.quote .who{display:flex;align-items:center;gap:11px;margin-top:14px;border-top:1px solid var(--line-soft);padding-top:14px}
.quote .who b{font-size:.86rem;color:var(--ink);display:block}
.quote .who span{font-size:.76rem;color:var(--muted-2)}
.avatar{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold-400),var(--gold-600));color:#3B1D02;font-weight:900;font-size:.85rem
}

/* NEWS */
.news-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:start}
.news-list{display:flex;flex-direction:column;gap:16px}
.news-item{
  display:grid;grid-template-columns:150px 1fr;gap:18px;
  background:rgba(7,36,23,.72);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:14px;transition:all .22s ease
}
.news-item:hover{border-color:rgba(245,158,11,.45);transform:translateY(-3px)}
.news-item .thumb{border-radius:var(--radius-xs);overflow:hidden;height:104px}
.news-item .thumb img{width:100%;height:100%;object-fit:cover}
.news-item h3{font-size:1rem;margin:6px 0 7px}
.news-item h3 a{color:var(--ink)}
.news-item h3 a:hover{color:var(--gold-300)}
.news-item p{font-size:.85rem;color:var(--muted-2);margin-bottom:8px}
.news-meta{font-size:.75rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.news-side{
  background:rgba(7,36,23,.72);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;position:sticky;top:96px
}
.news-side h3{font-size:1.02rem;margin-bottom:16px}
.side-item{display:block;padding:12px 0;border-bottom:1px dashed var(--line-soft)}
.side-item:last-child{border-bottom:0;padding-bottom:0}
.side-item strong{display:block;font-size:.88rem;color:var(--ink);font-weight:700;line-height:1.45}
.side-item:hover strong{color:var(--gold-300)}
.side-item span{font-size:.75rem;color:var(--muted)}
.empty-note{
  padding:26px;border-radius:var(--radius);border:1px dashed var(--line);
  color:var(--muted-2);font-size:.9rem;background:rgba(7,36,23,.5)
}
.more-row{margin-top:26px}

/* CHANNEL MATRIX */
.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.channel{
  display:block;padding:24px;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(11,46,30,.92),rgba(7,36,23,.78));
  transition:all .24s ease
}
.channel:hover{transform:translateY(-5px);border-color:var(--gold-400);box-shadow:var(--shadow-gold)}
.channel i{font-size:1.3rem;color:var(--gold-400);margin-bottom:14px;display:block}
.channel strong{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:7px}
.channel span{font-size:.86rem;color:var(--muted-2);display:block;margin-bottom:14px}
.channel em{font-style:normal;font-size:.8rem;font-weight:800;color:var(--gold-400)}

/* CTA */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  border:1px solid rgba(245,158,11,.35);
  background:linear-gradient(140deg,rgba(16,58,39,.95),rgba(4,23,15,.95));
  padding:52px 44px;text-align:center
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(560px 260px at 50% -30%,rgba(245,158,11,.22),transparent 70%)
}
.cta-band > *{position:relative;z-index:2}
.cta-band h2{margin-bottom:14px}
.cta-band p{max-width:660px;margin:0 auto 26px;color:var(--mint)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* NOTICE */
.notice{
  display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:var(--radius);
  border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.07)
}
.notice i{color:var(--gold-400);font-size:1.05rem;margin-top:4px}
.notice p{margin:0;font-size:.88rem;color:var(--mint)}

/* FOOTER */
.site-footer{background:var(--bg-950);border-top:1px solid var(--line);padding:58px 0 26px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;margin-bottom:36px}
.footer-grid h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-400);margin-bottom:16px}
.footer-grid p{font-size:.86rem;color:var(--muted-2)}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid ul li{margin-bottom:9px}
.footer-grid ul a{font-size:.87rem;color:var(--mint)}
.footer-grid ul a:hover{color:var(--gold-300)}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pay-badge{
  font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:6px 11px;border-radius:8px;
  color:var(--gold-300);border:1px solid var(--line);background:rgba(245,158,11,.08)
}
.footer-bottom{
  border-top:1px solid var(--line-soft);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted)
}
.age-badge{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:2px solid var(--gold-500);color:var(--gold-400);font-weight:900;font-size:.82rem
}

/* FAB */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:900;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#1B1A14 0%,#2B0404 70%);
  border:2px solid var(--gold-500);
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  color:var(--gold-300);font-size:1.28rem;
  opacity:.85;transition:all .26s ease;
  animation:fabFloat 3.4s ease-in-out infinite
}
.fab:hover{opacity:1;transform:scale(1.1)}
.fab:hover i{animation:fabSpin .6s ease}
.fab:active{transform:scale(.95) translateY(4px)}
.fab .dot{
  position:absolute;top:1px;right:1px;width:13px;height:13px;border-radius:50%;
  background:#DC2626;box-shadow:0 0 0 2px #fff
}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes fabSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* RESPONSIVE */
@media (max-width:1024px){
  .nav-menu{display:none;position:absolute;top:72px;left:0;right:0;background:rgba(4,23,15,.98);border-bottom:1px solid var(--line);padding:14px 20px}
  .nav-menu.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-toggle{display:grid;place-items:center}
  .nav-wrap{position:relative}
  .problem-wrap,.result-band,.news-grid{grid-template-columns:1fr}
  .news-side{position:static}
  .grid-4,.steps,.sec-grid,.metrics{grid-template-columns:repeat(2,1fr)}
  .grid-3,.matrix,.quote-grid,.channel-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .section{padding:56px 0}
  .hero{padding:56px 0 48px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .grid-2,.audience{grid-template-columns:1fr}
  .brand-text strong{font-size:.86rem}
  .brand-text span{font-size:.63rem}
  .news-item{grid-template-columns:1fr}
  .news-item .thumb{height:150px}
  .cta-band{padding:38px 22px}
  .bar-row{grid-template-columns:100px 1fr 54px}
}
@media (max-width:520px){
  .container{padding:0 15px}
  .grid-3,.grid-4,.steps,.sec-grid,.metrics,.matrix,.quote-grid,.channel-grid{grid-template-columns:1fr}
  .hero-search{flex-direction:column;border-radius:var(--radius);padding:14px}
  .hero-search button{width:100%;border-radius:12px}
  .footer-grid{grid-template-columns:1fr}
  .nav-actions .btn-ghost,.nav-actions .btn-gold{padding:8px 12px;font-size:.78rem}
  .brand-mark{width:36px;height:36px;flex:0 0 36px;font-size:1rem}
  .fab{left:12px;bottom:84px;width:52px;height:52px;font-size:1.1rem}
}

/* roulang page: article */
:root{
  --bg-950:#04170F;
  --bg-900:#051F14;
  --bg-850:#072417;
  --bg-800:#0B2E1E;
  --bg-700:#103A27;
  --gold-600:#D97706;
  --gold-500:#F59E0B;
  --gold-400:#FBBF24;
  --gold-300:#FCD34D;
  --red-600:#DC2626;
  --ink:#F8FAFC;
  --mint:#D1FAE5;
  --muted:#A3A375;
  --muted-2:#8FA79A;
  --line:rgba(245,158,11,.20);
  --line-soft:rgba(209,250,229,.10);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow-md:0 14px 40px rgba(0,0,0,.42);
  --shadow-gold:0 12px 34px rgba(245,158,11,.22);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(16,58,39,.85) 0%, rgba(5,31,20,0) 62%),
    radial-gradient(900px 520px at 92% 8%, rgba(245,158,11,.10) 0%, rgba(5,31,20,0) 60%),
    var(--bg-900);
  color:var(--ink);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold-400);text-decoration:none;transition:color .22s ease}
a:hover{color:var(--gold-300)}
button,input,select{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,h5{margin:0 0 .6em;line-height:1.24;font-weight:800;letter-spacing:-.012em}
h1{font-size:clamp(1.78rem,4.1vw,2.85rem)}
h2{font-size:clamp(1.34rem,2.7vw,1.95rem)}
h3{font-size:clamp(1.06rem,1.9vw,1.28rem)}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.5em}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:74px 0;position:relative}
.section--tight{padding:54px 0}
.section--alt{background:linear-gradient(180deg,rgba(11,46,30,.75) 0%,rgba(4,23,15,.55) 100%);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-head{max-width:820px;margin-bottom:38px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{margin-bottom:0;color:var(--muted-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-400);background:rgba(245,158,11,.10);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:16px
}
.divider-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.55),transparent);border:0;margin:0}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(4,23,15,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border-radius:13px;font-size:1.15rem;
  background:linear-gradient(145deg,var(--gold-400),var(--gold-600));
  color:#2B0404;box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.16}
.brand-text strong{font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.brand-text span{font-size:.7rem;color:var(--gold-400);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.nav-menu{flex:1 1 auto;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-list a{
  display:block;padding:9px 13px;border-radius:10px;
  font-size:.87rem;font-weight:600;color:var(--mint);
  border:1px solid transparent;transition:all .2s ease;white-space:nowrap
}
.nav-list a:hover{background:rgba(245,158,11,.10);color:var(--gold-300);border-color:var(--line)}
.nav-list a.active{background:rgba(245,158,11,.16);color:var(--gold-300);border-color:var(--line)}
.nav-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav-toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);color:var(--gold-300);
  background:rgba(245,158,11,.08);font-size:1.05rem;line-height:1
}
.btn-ghost{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:11px;
  font-size:.84rem;font-weight:700;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.45);background:transparent;transition:all .2s ease
}
.btn-ghost:hover{background:rgba(245,158,11,.14);color:var(--gold-300);border-color:var(--gold-400)}
.btn-gold{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:11px;
  font-size:.84rem;font-weight:800;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:var(--shadow-gold);transition:all .2s ease;border:0
}
.btn-gold:hover{transform:translateY(-2px);color:#3B1D02;box-shadow:0 16px 38px rgba(245,158,11,.34)}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-outline-gold{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:12px;
  font-weight:800;font-size:.88rem;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.5);background:rgba(245,158,11,.06);transition:all .2s ease
}
.btn-outline-gold:hover{background:rgba(245,158,11,.16);color:var(--gold-300);transform:translateY(-2px)}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px}

/* ARTICLE HERO */
.art-hero{position:relative;padding:0;border-bottom:1px solid var(--line);overflow:hidden}
.art-hero-media{position:relative;min-height:420px;display:flex;align-items:flex-end}
.art-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.art-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,23,15,.78) 0%,rgba(4,23,15,.88) 55%,var(--bg-900) 100%)
}
.art-hero-inner{position:relative;z-index:2;width:100%;padding:88px 0 46px}
.breadcrumb-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:.79rem;color:var(--muted-2);margin-bottom:20px;letter-spacing:.02em
}
.breadcrumb-line a{color:var(--muted-2)}
.breadcrumb-line a:hover{color:var(--gold-300)}
.breadcrumb-line i{font-size:.6rem;opacity:.6}
.art-hero h1{max-width:900px;margin-bottom:18px;text-shadow:0 4px 26px rgba(0,0,0,.6)}
.art-meta{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:24px}
.art-tag{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  font-size:.78rem;font-weight:700;color:var(--mint);
  background:rgba(11,46,30,.82);border:1px solid var(--line)
}
.art-tag i{color:var(--gold-400);font-size:.78rem}
.art-quote{
  position:relative;max-width:860px;
  border-left:3px solid var(--gold-500);
  background:linear-gradient(100deg,rgba(245,158,11,.09),rgba(245,158,11,0));
  padding:22px 26px;border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.03rem;color:var(--mint);margin:0
}
.art-quote strong{color:var(--gold-300)}

/* ARTICLE BODY */
.art-shell{max-width:960px;margin:0 auto}
.article-body{font-size:1.03rem;color:#E6F2EC}
.article-body h2{margin:1.9em 0 .7em;color:var(--ink);padding-bottom:.4em;border-bottom:1px solid var(--line-soft)}
.article-body h3{margin:1.55em 0 .55em;color:var(--gold-300)}
.article-body h4{margin:1.3em 0 .5em;color:var(--mint);font-size:1.02rem}
.article-body p{margin-bottom:1.05em}
.article-body img{border-radius:var(--radius);margin:26px 0;border:1px solid var(--line)}
.article-body ul,.article-body ol{padding-left:1.3em}
.article-body li::marker{color:var(--gold-500)}
.article-body blockquote{
  margin:26px 0;padding:20px 24px;border-left:3px solid var(--gold-500);
  background:rgba(245,158,11,.07);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--mint)
}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.92rem}
.article-body th,.article-body td{padding:12px 14px;border:1px solid var(--line-soft);text-align:left}
.article-body th{background:rgba(245,158,11,.10);color:var(--gold-300);font-weight:700}
.article-body tr:nth-child(even) td{background:rgba(11,46,30,.45)}
.article-body a{color:var(--gold-400);text-decoration:underline;text-decoration-color:rgba(245,158,11,.4)}

.art-empty{
  text-align:center;padding:60px 26px;border-radius:var(--radius-lg);
  background:rgba(11,46,30,.6);border:1px dashed var(--line)
}
.art-empty h2{margin-bottom:12px}
.art-empty p{color:var(--muted-2);margin-bottom:22px}

/* QUICK FACTS */
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:6px}
.fact-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(16,58,39,.72),rgba(7,36,23,.6));
  padding:22px 20px;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease
}
.fact-card:hover{transform:translateY(-4px);border-color:rgba(245,158,11,.45);box-shadow:var(--shadow-gold)}
.fact-card .fact-num{font-size:1.85rem;font-weight:800;color:var(--gold-300);line-height:1.1;display:block}
.fact-card .fact-label{font-size:.84rem;color:var(--muted-2);margin-top:6px;display:block}

/* DATA TABLE */
.table-shell{
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:rgba(7,36,23,.62)
}
.table-shell .table{--bs-table-bg:transparent;--bs-table-color:var(--ink);margin:0}
.table-shell thead th{
  background:rgba(245,158,11,.12);color:var(--gold-300);
  font-size:.79rem;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding:15px 16px;white-space:nowrap
}
.table-shell tbody td{
  border-bottom:1px solid var(--line-soft);padding:15px 16px;
  font-size:.92rem;color:var(--mint);vertical-align:middle
}
.table-shell tbody tr:last-child td{border-bottom:0}
.table-shell tbody tr:hover td{background:rgba(245,158,11,.05)}
.cell-strong{color:var(--gold-300);font-weight:800}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--gold-300);background:rgba(245,158,11,.10)
}
.pill--red{color:#FCA5A5;border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.14)}
.pill--mint{color:var(--mint);border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.12)}

/* CHECKLIST */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.check-item{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(11,46,30,.66),rgba(4,23,15,.5));
  padding:24px 22px;position:relative;transition:border-color .24s ease,transform .24s ease
}
.check-item:hover{border-color:rgba(245,158,11,.42);transform:translateY(-3px)}
.check-item .check-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(245,158,11,.13);border:1px solid var(--line);
  color:var(--gold-400);font-size:1.02rem;margin-bottom:15px
}
.check-item h3{font-size:1.04rem;margin-bottom:9px}
.check-item p{margin:0;font-size:.9rem;color:var(--muted-2)}

/* MISTAKES */
.mistake-list{display:grid;gap:16px}
.mistake-row{
  display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(7,36,23,.5);padding:20px 22px;transition:all .24s ease
}
.mistake-row:hover{border-color:rgba(220,38,38,.42);background:rgba(43,4,4,.35)}
.mistake-num{
  font-size:1.4rem;font-weight:800;color:rgba(220,38,38,.9);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em
}
.mistake-row h3{font-size:1.02rem;margin-bottom:5px}
.mistake-row p{margin:0;font-size:.88rem;color:var(--muted-2)}
.mistake-fix{
  font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-300);border:1px solid var(--line);border-radius:999px;padding:7px 14px;white-space:nowrap
}

/* TIMELINE */
.timeline{position:relative;padding-left:38px}
.timeline::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--gold-500),rgba(245,158,11,.05))
}
.tl-item{position:relative;padding-bottom:30px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-33px;top:7px;width:14px;height:14px;border-radius:50%;
  background:var(--bg-900);border:2px solid var(--gold-500);box-shadow:0 0 0 4px rgba(245,158,11,.10)
}
.tl-item h3{font-size:1.05rem;margin-bottom:7px}
.tl-item .tl-label{
  font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-400);display:block;margin-bottom:6px
}
.tl-item p{margin:0;font-size:.92rem;color:var(--muted-2)}

/* PAYMENT */
.pay-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
.pay-panel{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(16,58,39,.7),rgba(7,36,23,.55));padding:30px
}
.pay-badges-lg{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 4px}
.pay-badges-lg span{
  padding:9px 16px;border-radius:11px;font-size:.82rem;font-weight:800;
  color:var(--gold-300);background:rgba(245,158,11,.10);border:1px solid var(--line)
}
.pay-list{list-style:none;padding:0;margin:0}
.pay-list li{
  display:flex;gap:12px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--line-soft);margin:0
}
.pay-list li:last-child{border-bottom:0}
.pay-list i{color:var(--gold-400);margin-top:4px}
.pay-list strong{display:block;font-size:.95rem;color:var(--ink);margin-bottom:3px}
.pay-list span{font-size:.86rem;color:var(--muted-2)}

/* FAQ */
.faq-wrap{max-width:900px;margin:0 auto}
.faq-item{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(7,36,23,.5);margin-bottom:14px;overflow:hidden;transition:border-color .24s ease
}
.faq-item[open]{border-color:rgba(245,158,11,.42)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;font-size:.99rem;
  color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--gold-400);font-size:.82rem;transition:transform .25s ease;flex-shrink:0
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 24px 22px;color:var(--muted-2);font-size:.93rem}
.faq-item .faq-body p:last-child{margin-bottom:0}

/* CTA */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  border:1px solid var(--line);padding:52px 44px;text-align:center;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(245,158,11,.16), transparent 70%),
    linear-gradient(160deg,var(--bg-800),var(--bg-950))
}
.cta-band h2{margin-bottom:14px}
.cta-band p{color:var(--mint);max-width:700px;margin:0 auto 28px}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* FOOTER */
.site-footer{
  background:linear-gradient(180deg,var(--bg-950),#020D08);
  border-top:1px solid var(--line);padding:64px 0 28px;margin-top:0
}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
.footer-grid h4{
  font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:18px;font-weight:800
}
.footer-grid p{color:var(--muted-2);font-size:.88rem;line-height:1.66}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid ul li{margin-bottom:10px}
.footer-grid ul a{color:var(--muted-2);font-size:.88rem;transition:color .2s ease}
.footer-grid ul a:hover{color:var(--gold-300)}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pay-badge{
  font-size:.72rem;font-weight:800;letter-spacing:.05em;padding:6px 12px;border-radius:9px;
  color:var(--gold-300);background:rgba(245,158,11,.09);border:1px solid var(--line)
}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line-soft);
  color:var(--muted);font-size:.79rem
}
.age-badge{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-size:.76rem;font-weight:800;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.5);background:rgba(245,158,11,.10);flex:0 0 38px
}
.footer-brand{margin-bottom:14px}

/* FAB */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:50;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%, #7F1D1D 0%, #2B0404 62%, #0B0C0E 100%);
  border:2px solid var(--gold-500);
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  color:var(--gold-300);font-size:1.22rem;
  opacity:.82;transition:transform .26s ease,opacity .26s ease,box-shadow .26s ease;
  animation:fabFloat 3.4s ease-in-out infinite
}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fab:hover{opacity:1;transform:scale(1.1) translateY(-2px);box-shadow:0 10px 34px rgba(245,158,11,.5)}
.fab:hover i{animation:fabSpin .7s ease}
@keyframes fabSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fab:active{transform:scale(.95) translateY(3px)}
.fab::after{
  content:"";position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:50%;
  background:#DC2626;box-shadow:0 0 0 2px rgba(248,250,252,.9)
}

/* RESPONSIVE */
@media (max-width:1024px){
  .nav-toggle{display:inline-grid;place-items:center}
  .nav-menu{
    position:absolute;top:72px;left:0;right:0;
    background:rgba(4,23,15,.98);border-bottom:1px solid var(--line);
    padding:14px 20px 20px;display:none;box-shadow:var(--shadow-md)
  }
  .nav-menu.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:6px}
  .nav-list a{padding:12px 14px;font-size:.94rem}
  .nav-wrap{position:relative}
  .nav-menu{left:-20px;right:-20px;padding-left:20px;padding-right:20px}
  .fact-grid{grid-template-columns:repeat(2,1fr)}
  .check-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .pay-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .section{padding:56px 0}
  .section--tight{padding:44px 0}
  .art-hero-media{min-height:330px}
  .art-hero-inner{padding:64px 0 36px}
  .art-quote{padding:18px 20px;font-size:.97rem}
  .mistake-row{grid-template-columns:44px 1fr;gap:14px}
  .mistake-fix{grid-column:2;justify-self:start;margin-top:6px}
  .cta-band{padding:38px 24px}
  .table-shell{overflow-x:auto}
  .table-shell table{min-width:640px}
}
@media (max-width:520px){
  .container{padding:0 16px}
  .nav-actions .btn-ghost{display:none}
  .brand-text strong{font-size:.85rem}
  .brand-text span{font-size:.62rem;letter-spacing:.06em}
  .brand-mark{width:38px;height:38px;flex:0 0 38px;font-size:1rem}
  .fact-grid{grid-template-columns:1fr 1fr;gap:12px}
  .fact-card{padding:18px 15px}
  .fact-card .fact-num{font-size:1.5rem}
  .check-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .art-hero h1{font-size:1.5rem}
  .cta-actions{flex-direction:column}
  .cta-actions a{width:100%;justify-content:center}
  .fab{left:12px;bottom:84px;width:52px;height:52px}
}

/* roulang page: category1 */
:root{
  --bg-950:#04170F;
  --bg-900:#051F14;
  --bg-850:#072417;
  --bg-800:#0B2E1E;
  --bg-700:#103A27;
  --gold-600:#D97706;
  --gold-500:#F59E0B;
  --gold-400:#FBBF24;
  --gold-300:#FCD34D;
  --red-600:#DC2626;
  --ink:#F8FAFC;
  --mint:#D1FAE5;
  --muted:#A3A375;
  --muted-2:#8FA79A;
  --line:rgba(245,158,11,.20);
  --line-soft:rgba(209,250,229,.10);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow-md:0 14px 40px rgba(0,0,0,.42);
  --shadow-gold:0 12px 34px rgba(245,158,11,.22);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(16,58,39,.85) 0%, rgba(5,31,20,0) 62%),
    radial-gradient(900px 520px at 92% 8%, rgba(245,158,11,.10) 0%, rgba(5,31,20,0) 60%),
    var(--bg-900);
  color:var(--ink);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold-400);text-decoration:none;transition:color .22s ease}
a:hover{color:var(--gold-300)}
button,input,select{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,h5{margin:0 0 12px;font-weight:800;line-height:1.24;color:var(--ink);letter-spacing:-.01em}
h1{font-size:2.22rem}
h2{font-size:1.72rem}
h3{font-size:1.12rem}
h4{font-size:1rem}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(245,158,11,.35)}
a:focus-visible,button:focus-visible,input:focus-visible,.faq-item summary:focus-visible{
  outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px
}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:74px 0;position:relative}
.section--tight{padding:52px 0}
.section--alt{
  background:linear-gradient(180deg,rgba(11,46,30,.75) 0%,rgba(4,23,15,.55) 100%);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)
}
.section-head{max-width:840px;margin-bottom:38px}
.section-head p{color:var(--muted-2);margin-bottom:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-400);background:rgba(245,158,11,.10);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:16px
}
.divider-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.55),transparent);border:0;margin:0}
.text-gold{color:var(--gold-400)}
.muted{color:var(--muted-2)}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(4,23,15,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border-radius:13px;font-size:1.15rem;
  background:linear-gradient(145deg,var(--gold-400),var(--gold-600));
  color:#2B0404;box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.16}
.brand-text strong{font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.brand-text span{font-size:.7rem;color:var(--gold-400);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.nav-menu{flex:1 1 auto;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-list a{
  display:block;padding:9px 13px;border-radius:10px;
  font-size:.87rem;font-weight:600;color:var(--mint);
  border:1px solid transparent;transition:all .2s ease;white-space:nowrap
}
.nav-list a:hover{background:rgba(245,158,11,.10);color:var(--gold-300);border-color:var(--line)}
.nav-list a.active{background:rgba(245,158,11,.16);color:var(--gold-300);border-color:var(--line)}
.nav-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav-toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);color:var(--gold-300);
  background:rgba(245,158,11,.08);font-size:1.05rem;line-height:1
}
.btn-ghost{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:11px;
  font-size:.84rem;font-weight:700;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.45);background:transparent;transition:all .2s ease
}
.btn-ghost:hover{background:rgba(245,158,11,.14);color:var(--gold-300);border-color:var(--gold-400)}
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;
  font-size:.88rem;font-weight:800;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:var(--shadow-gold);transition:all .2s ease;border:0
}
.btn-gold:hover{transform:translateY(-2px);color:#3B1D02;box-shadow:0 16px 38px rgba(245,158,11,.34)}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;
  font-size:.88rem;font-weight:700;color:var(--mint);
  border:1px solid rgba(209,250,229,.28);background:rgba(7,36,23,.6);transition:all .2s ease
}
.btn-outline:hover{color:var(--gold-300);border-color:var(--gold-400);background:rgba(245,158,11,.12)}
.btn-outline:active{transform:scale(.98)}

/* ---------- CATEGORY HERO ---------- */
.cat-hero{position:relative;padding:66px 0 58px;overflow:hidden;border-bottom:1px solid var(--line)}
.cat-hero::before{
  content:"";position:absolute;inset:0;background-image:url('/assets/images/a7d69170a24c5b4d.jpg');
  background-size:cover;background-position:center;opacity:.14;filter:saturate(.8)
}
.cat-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,23,15,.80) 0%,rgba(5,31,20,.92) 60%,var(--bg-900) 100%)
}
.cat-hero .container{position:relative;z-index:2}
.cat-hero h1{font-size:2.5rem;margin-bottom:18px}
.hero-sub{font-size:1.02rem;color:var(--mint);max-width:640px;margin-bottom:26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.status-bar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  padding:14px;border-radius:var(--radius);border:1px solid var(--line);
  background:rgba(7,36,23,.78);box-shadow:var(--shadow-sm)
}
.status-item{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;color:var(--mint)}
.status-item i{color:var(--gold-400);font-size:.85rem}
.symbol-panel{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(165deg,rgba(11,46,30,.92) 0%,rgba(4,23,15,.92) 100%);
  padding:26px;box-shadow:var(--shadow-md)
}
.symbol-panel h2{font-size:1.05rem;margin-bottom:4px}
.symbol-note{font-size:.82rem;color:var(--muted-2);margin-top:16px}
.symbol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.symbol-chip{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(5,31,20,.85);padding:14px 10px;text-align:center;transition:all .22s ease
}
.symbol-chip:hover{border-color:var(--gold-400);transform:translateY(-3px);background:rgba(245,158,11,.10)}
.symbol-chip span{display:block;font-size:.86rem;font-weight:800;color:var(--ink)}
.symbol-chip small{display:block;font-size:.72rem;color:var(--gold-400);font-weight:700;margin-top:4px}

/* ---------- PAIN / SOLUTION ---------- */
.pain-list{display:grid;gap:12px}
.pain-item{
  display:flex;gap:14px;padding:16px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);background:rgba(7,36,23,.6)
}
.pain-item .idx{
  flex:0 0 30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:.8rem;font-weight:800;color:#3B1D02;background:linear-gradient(140deg,var(--gold-300),var(--gold-500))
}
.pain-item p{margin:0;font-size:.9rem;color:var(--mint)}
.solution-box{
  margin-top:26px;padding:22px 24px;border-radius:var(--radius);
  border-left:3px solid var(--gold-400);
  background:linear-gradient(120deg,rgba(245,158,11,.14),rgba(7,36,23,.5))
}
.solution-box strong{color:var(--gold-300)}

/* ---------- RULE CARDS ---------- */
.rule-card{
  height:100%;padding:24px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(7,36,23,.68);
  transition:all .24s ease;position:relative
}
.rule-card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow-md);background:rgba(11,46,30,.85)}
.rule-card i{font-size:1.15rem;color:var(--gold-400);margin-bottom:14px;display:block}
.rule-card h3{font-size:1.02rem;margin-bottom:8px}
.rule-card p{font-size:.88rem;color:var(--muted-2);margin:0}
.rule-tag{
  position:absolute;top:18px;right:18px;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-300);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;background:rgba(245,158,11,.10)
}

/* ---------- STEP TIMELINE ---------- */
.step-list{display:grid;gap:14px}
.step-item{
  display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
  padding:18px 20px;border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);background:rgba(5,31,20,.62);transition:all .22s ease
}
.step-item:hover{border-color:var(--line);background:rgba(11,46,30,.8)}
.step-num{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;font-size:1.05rem;color:#2B0404;
  background:linear-gradient(140deg,var(--gold-300),var(--gold-600));box-shadow:var(--shadow-gold)
}
.step-item h3{font-size:1rem;margin-bottom:6px}
.step-item p{font-size:.87rem;color:var(--muted-2);margin:0}
.log-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem}
.log-table th{
  text-align:left;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-400);padding:10px 12px;border-bottom:1px solid var(--line)
}
.log-table td{padding:12px;border-bottom:1px solid var(--line-soft);color:var(--mint)}
.log-table tr:last-child td{border-bottom:0}
.log-table td:first-child{font-weight:800;color:var(--ink)}
.log-win{color:#6EE7B7;font-weight:700}
.log-lose{color:#FCA5A5;font-weight:700}
.log-wrap{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:rgba(4,23,15,.72);padding:8px 10px 4px
}

/* ---------- SCENARIO CARDS ---------- */
.scene-card{
  height:100%;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-soft);background:rgba(7,36,23,.7);
  display:flex;flex-direction:column;transition:all .24s ease
}
.scene-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow-md)}
.scene-thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.scene-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.scene-card:hover .scene-thumb img{transform:scale(1.06)}
.scene-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,23,15,.05),rgba(4,23,15,.85))}
.scene-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.scene-body h3{font-size:1.03rem;margin:0}
.scene-body p{font-size:.87rem;color:var(--muted-2);margin:0}
.scene-body ul{display:grid;gap:8px;margin-top:6px}
.scene-body li{font-size:.85rem;color:var(--mint);display:flex;gap:9px}
.scene-body li i{color:var(--gold-400);font-size:.75rem;margin-top:6px}

/* ---------- COMPARE ---------- */
.compare-row{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  overflow:hidden;background:rgba(5,31,20,.55);margin-bottom:12px
}
.compare-row > div{padding:16px 20px;font-size:.88rem}
.compare-row .bad{color:#FCA5A5;border-right:1px solid var(--line-soft)}
.compare-row .good{color:#A7F3D0;background:rgba(16,185,129,.07)}
.compare-row .bad b{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#F87171;margin-bottom:6px}
.compare-row .good b{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#34D399;margin-bottom:6px}

/* ---------- QUOTES + STATS ---------- */
.quote-card{
  height:100%;padding:24px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(7,36,23,.65)
}
.quote-card p{font-size:.9rem;color:var(--mint);font-style:italic}
.quote-who{display:flex;align-items:center;gap:12px;margin-top:16px}
.quote-avatar{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;color:#2B0404;
  background:linear-gradient(140deg,var(--gold-300),var(--gold-600))
}
.quote-who span{font-size:.8rem;color:var(--muted-2)}
.quote-who strong{display:block;font-size:.88rem;color:var(--ink)}
.stat-card{
  padding:22px;border-radius:var(--radius);text-align:left;
  border:1px solid var(--line);background:linear-gradient(150deg,rgba(11,46,30,.85),rgba(4,23,15,.9))
}
.stat-card b{display:block;font-size:1.7rem;font-weight:800;color:var(--gold-300);line-height:1.1}
.stat-card span{font-size:.8rem;color:var(--muted-2)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:rgba(7,36,23,.6);overflow:hidden;transition:border-color .2s ease
}
.faq-item[open]{border-color:var(--line);background:rgba(11,46,30,.78)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:.95rem;font-weight:700;color:var(--ink)
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:.7rem;color:var(--gold-400);flex-shrink:0;transition:transform .25s ease
}
.faq-item[open] summary::after{content:"\f068"}
.faq-item .faq-body{padding:0 20px 20px;font-size:.88rem;color:var(--muted-2)}

/* ---------- CATEGORY MATRIX ---------- */
.cat-card{
  display:block;height:100%;padding:24px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(5,31,20,.6);transition:all .24s ease;color:inherit
}
.cat-card:hover{color:inherit;border-color:var(--gold-400);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cat-card i{color:var(--gold-400);font-size:1.2rem;margin-bottom:14px;display:block}
.cat-card h3{font-size:1.03rem;margin-bottom:8px}
.cat-card p{font-size:.86rem;color:var(--muted-2);margin:0}
.cat-card .cat-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:.82rem;font-weight:800;color:var(--gold-300)}

/* ---------- NEWS LIST ---------- */
.news-card{
  height:100%;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line-soft);background:rgba(7,36,23,.65);transition:all .24s ease
}
.news-card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow-md)}
.news-thumb{aspect-ratio:16/9;overflow:hidden;display:block}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.news-card:hover .news-thumb img{transform:scale(1.05)}
.news-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-meta{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-400)}
.news-body h3{font-size:.98rem;margin:0}
.news-body h3 a{color:var(--ink)}
.news-body h3 a:hover{color:var(--gold-300)}
.news-body p{font-size:.84rem;color:var(--muted-2);margin:0}
.news-empty{padding:26px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted-2);font-size:.9rem}

/* ---------- CTA ---------- */
.cta-band{
  position:relative;padding:60px 0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(760px 340px at 88% 12%, rgba(245,158,11,.20) 0%, rgba(4,23,15,0) 62%),
    linear-gradient(150deg,rgba(16,58,39,.95),rgba(4,23,15,.98))
}
.cta-band h2{font-size:1.6rem;margin-bottom:12px}
.cta-band p{color:var(--mint);font-size:.95rem;max-width:600px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cta-note{font-size:.78rem;color:var(--muted-2);margin-top:18px}

/* ---------- FOOTER ---------- */
.site-footer{
  padding:56px 0 26px;background:rgba(3,17,11,.94);border-top:1px solid var(--line)
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.site-footer p{font-size:.86rem;color:var(--muted-2)}
.site-footer h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-400);margin-bottom:16px}
.site-footer ul{display:grid;gap:10px}
.site-footer ul a{font-size:.87rem;color:var(--mint)}
.site-footer ul a:hover{color:var(--gold-300)}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pay-badge{
  font-size:.72rem;font-weight:700;color:var(--mint);padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(11,46,30,.7)
}
.footer-bottom{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--muted-2)
}
.age-badge{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-size:.78rem;font-weight:800;color:#2B0404;
  background:linear-gradient(140deg,var(--gold-300),var(--gold-600))
}

/* ---------- FAB ---------- */
.fab-royal{
  position:fixed;left:16px;bottom:96px;z-index:50;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;color:#2B0404;
  background:radial-gradient(circle at 32% 28%, #FCD34D 0%, #F59E0B 55%, #B45309 100%);
  border:2px solid var(--gold-400);
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.85;animation:fabFloat 3.4s ease-in-out infinite;transition:all .25s ease
}
.fab-royal:hover{opacity:1;transform:scale(1.1);color:#2B0404}
.fab-royal:hover i{transform:rotate(360deg)}
.fab-royal i{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.fab-royal:active{transform:scale(.95) translateY(4px)}
.fab-dot{
  position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;
  background:var(--red-600);box-shadow:0 0 0 2px #FFFFFF
}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  h1{font-size:2rem}
  .cat-hero h1{font-size:2.05rem}
  .nav-menu{justify-content:flex-start}
  .nav-list a{padding:8px 11px;font-size:.82rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .status-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav-toggle{display:grid;place-items:center;order:3}
  .nav-menu{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:rgba(4,23,15,.98);border-bottom:1px solid var(--line);
    padding:14px 20px 20px;backdrop-filter:blur(14px)
  }
  .nav-menu.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:6px}
  .nav-list a{padding:12px 14px;font-size:.9rem}
  .nav-actions{margin-left:auto;order:2}
  .nav-wrap{position:relative;flex-wrap:wrap}
}
@media (max-width:768px){
  .section{padding:54px 0}
  .cat-hero{padding:50px 0 44px}
  .cat-hero h1{font-size:1.72rem}
  h2{font-size:1.42rem}
  .compare-row{grid-template-columns:1fr}
  .compare-row .bad{border-right:0;border-bottom:1px solid var(--line-soft)}
  .symbol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-band{padding:46px 0}
}
@media (max-width:520px){
  body{font-size:15px}
  h1{font-size:1.55rem}
  .cat-hero h1{font-size:1.48rem}
  h2{font-size:1.26rem}
  .brand-text strong{font-size:.82rem}
  .brand-text span{font-size:.62rem}
  .nav-actions .btn-ghost,.nav-actions .btn-gold{padding:9px 12px;font-size:.78rem}
  .status-bar{grid-template-columns:1fr}
  .step-item{grid-template-columns:44px 1fr;padding:16px}
  .step-num{width:44px;height:44px;border-radius:12px;font-size:.92rem}
  .footer-grid{grid-template-columns:1fr}
  .log-table{font-size:.78rem}
  .log-table th,.log-table td{padding:9px 8px}
  .fab-royal{width:52px;height:52px;bottom:88px}
}

/* roulang page: category2 */
:root{
  --bg-950:#04170F;
  --bg-900:#051F14;
  --bg-850:#072417;
  --bg-800:#0B2E1E;
  --bg-700:#103A27;
  --gold-600:#D97706;
  --gold-500:#F59E0B;
  --gold-400:#FBBF24;
  --gold-300:#FCD34D;
  --red-600:#DC2626;
  --ink:#F8FAFC;
  --mint:#D1FAE5;
  --muted:#A3A375;
  --muted-2:#8FA79A;
  --line:rgba(245,158,11,.20);
  --line-soft:rgba(209,250,229,.10);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow-md:0 14px 40px rgba(0,0,0,.42);
  --shadow-gold:0 12px 34px rgba(245,158,11,.22);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(16,58,39,.85) 0%, rgba(5,31,20,0) 62%),
    radial-gradient(900px 520px at 92% 8%, rgba(245,158,11,.10) 0%, rgba(5,31,20,0) 60%),
    var(--bg-900);
  color:var(--ink);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold-400);text-decoration:none;transition:color .22s ease}
a:hover{color:var(--gold-300)}
button,input,select{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{line-height:1.24;font-weight:800;letter-spacing:-.015em;margin:0 0 14px}
h1{font-size:clamp(1.85rem,4.2vw,2.9rem)}
h2{font-size:clamp(1.4rem,2.6vw,2rem)}
h3{font-size:1.12rem}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:74px 0;position:relative}
.section--tight{padding:54px 0}
.section--alt{
  background:linear-gradient(180deg,rgba(11,46,30,.75) 0%,rgba(4,23,15,.55) 100%);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.section-head{max-width:820px;margin-bottom:38px}
.section-head p{margin-bottom:0;color:var(--muted-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-400);background:rgba(245,158,11,.10);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:16px;
}
.text-muted-2{color:var(--muted-2)}
/* HEADER */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(4,23,15,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;gap:18px;min-height:72px;position:relative}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border-radius:13px;font-size:1.15rem;
  background:linear-gradient(145deg,var(--gold-400),var(--gold-600));
  color:#2B0404;box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.16}
.brand-text strong{font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.brand-text span{font-size:.7rem;color:var(--gold-400);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-list a{
  display:block;padding:9px 13px;border-radius:10px;
  font-size:.87rem;font-weight:600;color:var(--mint);
  border:1px solid transparent;transition:all .2s ease;white-space:nowrap;
}
.nav-list a:hover{background:rgba(245,158,11,.10);color:var(--gold-300);border-color:var(--line)}
.nav-list a.active{background:rgba(245,158,11,.16);color:var(--gold-300);border-color:var(--line)}
.nav-menu{flex:1 1 auto;display:flex;justify-content:center}
.nav-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav-toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);color:var(--gold-300);
  background:rgba(245,158,11,.08);font-size:1.05rem;line-height:1;
}
.btn-ghost{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:11px;
  font-size:.84rem;font-weight:700;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.45);background:transparent;transition:all .2s ease;
}
.btn-ghost:hover{background:rgba(245,158,11,.14);color:var(--gold-300);border-color:var(--gold-400)}
.btn-gold{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:11px;
  font-size:.84rem;font-weight:800;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:var(--shadow-gold);transition:all .2s ease;border:0;
}
.btn-gold:hover{transform:translateY(-2px);color:#3B1D02;box-shadow:0 16px 38px rgba(245,158,11,.34)}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-outline-soft{
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:12px;
  font-size:.9rem;font-weight:700;color:var(--mint);
  border:1px solid var(--line-soft);background:rgba(7,36,23,.55);transition:all .2s ease;
}
.btn-outline-soft:hover{color:var(--gold-300);border-color:var(--line);background:rgba(11,46,30,.8)}
/* CATEGORY HERO — BENTO */
.cat-hero{position:relative;padding:66px 0 62px;overflow:hidden;border-bottom:1px solid var(--line)}
.cat-hero .hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.22;filter:saturate(.85);
}
.cat-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,23,15,.80) 0%,rgba(4,23,15,.94) 64%,var(--bg-900) 100%);
}
.cat-hero .container{position:relative;z-index:2}
.hero-main{
  background:linear-gradient(160deg,rgba(11,46,30,.94),rgba(7,36,23,.70));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:38px 34px;
  box-shadow:var(--shadow-md);
  height:100%;
}
.hero-main h1{margin-bottom:16px}
.hero-main .hero-lead{color:var(--mint);font-size:1.02rem;margin-bottom:26px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-mini{
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(7,36,23,.86);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
  transition:transform .22s ease,border-color .22s ease;
}
.hero-mini:hover{transform:translateY(-3px);border-color:rgba(245,158,11,.42)}
.hero-mini:last-child{margin-bottom:0}
.mini-icon{
  width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:12px;
  background:rgba(245,158,11,.13);color:var(--gold-300);font-size:1.05rem;
  border:1px solid var(--line);
}
.mini-num{font-size:1.5rem;font-weight:800;color:var(--gold-300);line-height:1.1;margin-bottom:4px}
.mini-label{font-size:.85rem;color:var(--muted-2);line-height:1.5}
.hero-cta-bar{
  margin-top:30px;padding:18px 26px;border-radius:var(--radius);
  background:linear-gradient(90deg,rgba(245,158,11,.16),rgba(245,158,11,.03));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.hero-cta-bar span{font-weight:700;color:var(--mint)}
/* GENERIC CARDS */
.soft-card{
  background:linear-gradient(160deg,rgba(11,46,30,.72),rgba(4,23,15,.48));
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:26px;
  height:100%;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.soft-card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.soft-card h3{color:var(--ink)}
.soft-card p{color:var(--muted-2);font-size:.94rem}
.icon-badge{
  width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
  background:rgba(245,158,11,.12);border:1px solid var(--line);
  color:var(--gold-300);font-size:1.1rem;margin-bottom:18px;
}
/* PROBABILITY TABLE */
.table-shell{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(7,36,23,.55);
  box-shadow:var(--shadow-sm);
}
.table-responsive{overflow-x:auto}
.prob-table{width:100%;border-collapse:separate;border-spacing:0;min-width:640px}
.prob-table th{
  background:rgba(245,158,11,.13);color:var(--gold-300);
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;
}
.prob-table td{
  padding:15px 18px;border-bottom:1px solid var(--line-soft);
  color:var(--mint);font-size:.93rem;vertical-align:top;
}
.prob-table tbody tr:last-child td{border-bottom:0}
.prob-table tbody tr:hover td{background:rgba(245,158,11,.05)}
.prob-table td strong{color:var(--gold-300);font-weight:800}
.rate-pill{
  display:inline-block;padding:3px 11px;border-radius:999px;
  font-size:.8rem;font-weight:800;
  background:rgba(245,158,11,.13);color:var(--gold-300);border:1px solid var(--line);
}
/* STEPS */
.step-list{display:grid;gap:14px}
.step-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 22px;border-radius:var(--radius);
  border:1px solid var(--line-soft);
  background:rgba(7,36,23,.55);
  transition:border-color .22s ease,background .22s ease;
}
.step-item:hover{border-color:var(--line);background:rgba(11,46,30,.7)}
.step-num{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  border-radius:11px;font-weight:800;font-size:.95rem;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:var(--shadow-gold);
}
.step-item h3{margin-bottom:6px;font-size:1.02rem}
.step-item p{color:var(--muted-2);font-size:.92rem;margin:0}
/* SCENARIOS */
.scene-card{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:24px;height:100%;
  background:linear-gradient(165deg,rgba(11,46,30,.62),rgba(4,23,15,.42));
  transition:border-color .22s ease,transform .22s ease;
}
.scene-card:hover{border-color:var(--line);transform:translateY(-4px)}
.scene-tag{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-400);background:rgba(245,158,11,.1);
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;margin-bottom:14px;
}
.scene-card h3{font-size:1.03rem;margin-bottom:10px}
.scene-card p{color:var(--muted-2);font-size:.9rem;margin:0}
/* MYTHS */
.myth-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 0;border-bottom:1px dashed var(--line-soft);
}
.myth-item:last-child{border-bottom:0}
.myth-mark{
  width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;
  border-radius:9px;font-size:.82rem;
}
.myth-mark.bad{background:rgba(220,38,38,.16);color:#FCA5A5;border:1px solid rgba(220,38,38,.35)}
.myth-mark.good{background:rgba(16,185,129,.14);color:#6EE7B7;border:1px solid rgba(16,185,129,.32)}
.myth-item h3{font-size:.99rem;margin-bottom:4px}
.myth-item p{color:var(--muted-2);font-size:.91rem;margin:0}
/* STATS */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-top:30px;
}
.stat-box{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:22px;text-align:left;background:rgba(7,36,23,.6);
  transition:border-color .22s ease,transform .22s ease;
}
.stat-box:hover{border-color:var(--line);transform:translateY(-3px)}
.stat-box .num{font-size:1.75rem;font-weight:800;color:var(--gold-300);line-height:1.1}
.stat-box .lbl{font-size:.84rem;color:var(--muted-2);margin-top:6px;line-height:1.5}
.figure-block{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:rgba(7,36,23,.6);box-shadow:var(--shadow-sm);height:100%;
}
.figure-block img{width:100%;height:260px;object-fit:cover}
.figure-caption{padding:18px 22px;font-size:.88rem;color:var(--muted-2)}
/* NEWS */
.news-card{
  display:flex;flex-direction:column;gap:10px;
  height:100%;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:24px;background:rgba(7,36,23,.55);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.news-card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow-sm);color:inherit}
.news-tag{
  align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-400);background:rgba(245,158,11,.1);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;
}
.news-card h3{font-size:1rem;color:var(--ink);margin:0}
.news-card p{color:var(--muted-2);font-size:.89rem;margin:0;flex:1 1 auto}
.news-date{font-size:.78rem;color:var(--muted);font-weight:700}
.empty-note{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:32px;text-align:center;color:var(--muted-2);background:rgba(7,36,23,.4);
}
/* FAQ */
.faq-item{
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:rgba(7,36,23,.5);margin-bottom:12px;overflow:hidden;
  transition:border-color .22s ease;
}
.faq-item[open]{border-color:var(--line)}
.faq-item summary{
  padding:18px 22px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.97rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--gold-400);font-size:.82rem;transition:transform .25s ease;flex:0 0 auto;
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-body{padding:0 22px 20px;color:var(--muted-2);font-size:.93rem}
/* FINAL CTA */
.cta-band{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:48px 40px;
  background:linear-gradient(135deg,rgba(11,46,30,.95),rgba(4,23,15,.92));
  box-shadow:var(--shadow-md);
}
.cta-band::before{
  content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.22),rgba(245,158,11,0) 68%);
}
.cta-band h2{position:relative;z-index:2}
.cta-band p{position:relative;z-index:2;color:var(--mint);max-width:660px}
.cta-actions{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* FOOTER */
.site-footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,23,15,.9),rgba(3,17,11,.98));
  padding:60px 0 26px;
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:34px;border-bottom:1px solid var(--line-soft);
}
.site-footer h4{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:16px;font-weight:800;
}
.site-footer p{color:var(--muted-2);font-size:.88rem;max-width:420px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:9px}
.site-footer ul li a{font-size:.88rem;color:var(--mint)}
.site-footer ul li a:hover{color:var(--gold-300)}
.brand--footer{margin-bottom:14px}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pay-badge{
  font-size:.74rem;font-weight:700;letter-spacing:.03em;
  padding:5px 12px;border-radius:8px;
  color:var(--mint);background:rgba(11,46,30,.85);border:1px solid var(--line-soft);
}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:22px;color:var(--muted);font-size:.82rem;
}
.age-badge{
  display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 8px;
  border-radius:7px;font-weight:800;font-size:.76rem;
  color:#3B1D02;background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
}
/* FAB */
.fab-support{
  position:fixed;left:16px;bottom:96px;z-index:50;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;font-size:1.2rem;
  color:#2B0404;
  background:radial-gradient(circle at 32% 28%,#FCD34D,#D97706 78%);
  border:2px solid var(--gold-400);
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.86;transition:transform .25s ease,opacity .25s ease;
  animation:fabFloat 3.4s ease-in-out infinite;
}
.fab-support:hover{transform:scale(1.1);opacity:1}
.fab-support:active{transform:scale(.95) translateY(3px)}
.fab-support .fab-dot{
  position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:#DC2626;box-shadow:0 0 0 2px #fff;
}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* RESPONSIVE */
@media (max-width:1199px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:991px){
  .nav-wrap{flex-wrap:wrap;padding:10px 0;min-height:auto}
  .nav-toggle{display:inline-grid;place-items:center;order:3}
  .nav-actions{order:2;margin-left:auto}
  .nav-menu{order:4;flex-basis:100%;display:none;justify-content:flex-start}
  .nav-menu.is-open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px;padding:8px 0 4px}
  .nav-list a{padding:11px 14px}
  .brand-text span{display:none}
  .section{padding:58px 0}
  .cat-hero{padding:52px 0 48px}
  .hero-main{padding:30px 26px}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .cta-band{padding:38px 26px}
}
@media (max-width:767px){
  .figure-block img{height:210px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .section{padding:48px 0}
}
@media (max-width:520px){
  body{font-size:15px}
  .container{padding:0 16px}
  .brand-text strong{font-size:.82rem}
  .brand-mark{width:38px;height:38px;flex:0 0 38px;font-size:1rem}
  .btn-ghost{padding:7px 10px;font-size:.74rem}
  .btn-gold{padding:8px 12px;font-size:.74rem}
  .hero-btns{gap:9px}
  .hero-btns .btn-gold,.hero-btns .btn-outline-soft{width:100%;justify-content:center}
  .hero-cta-bar{padding:16px 18px;border-radius:var(--radius)}
  .hero-cta-bar .btn-gold{width:100%}
  .stat-strip{grid-template-columns:1fr}
  .cta-actions .btn-gold,.cta-actions .btn-outline-soft{width:100%;justify-content:center}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .fab-support{left:12px;bottom:84px;width:52px;height:52px}
}

/* roulang page: category3 */
:root{
  --bg-950:#04170F;
  --bg-900:#051F14;
  --bg-850:#072417;
  --bg-800:#0B2E1E;
  --bg-700:#103A27;
  --gold-600:#D97706;
  --gold-500:#F59E0B;
  --gold-400:#FBBF24;
  --gold-300:#FCD34D;
  --red-600:#DC2626;
  --ink:#F8FAFC;
  --mint:#D1FAE5;
  --muted:#A3A375;
  --muted-2:#8FA79A;
  --line:rgba(245,158,11,.20);
  --line-soft:rgba(209,250,229,.10);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.30);
  --shadow-md:0 14px 40px rgba(0,0,0,.42);
  --shadow-gold:0 12px 34px rgba(245,158,11,.22);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(16,58,39,.85) 0%, rgba(5,31,20,0) 62%),
    radial-gradient(900px 520px at 92% 8%, rgba(245,158,11,.10) 0%, rgba(5,31,20,0) 60%),
    var(--bg-900);
  color:var(--ink);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold-400);text-decoration:none;transition:color .22s ease}
a:hover{color:var(--gold-300)}
button,input,select{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
p{margin:0 0 14px}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.015em;line-height:1.24;margin:0 0 14px;color:var(--ink)}
h1{font-size:clamp(1.85rem,3.6vw,2.85rem)}
h2{font-size:clamp(1.4rem,2.4vw,2rem)}
h3{font-size:clamp(1.05rem,1.6vw,1.24rem)}
ul{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:74px 0;position:relative}
.section--tight{padding:52px 0}
.section--alt{background:linear-gradient(180deg,rgba(11,46,30,.75) 0%,rgba(4,23,15,.55) 100%);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-head{max-width:820px;margin-bottom:36px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{margin-bottom:0;color:var(--muted-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-400);background:rgba(245,158,11,.10);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:16px
}
.divider-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.55),transparent);border:0;margin:0}
.text-muted{color:var(--muted-2)}
/* ===== HEADER ===== */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(4,23,15,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;gap:18px;min-height:72px;position:relative}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border-radius:13px;font-size:1.15rem;
  background:linear-gradient(145deg,var(--gold-400),var(--gold-600));
  color:#2B0404;box-shadow:var(--shadow-gold);
}
.brand-text{display:flex;flex-direction:column;line-height:1.16}
.brand-text strong{font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.brand-text span{font-size:.7rem;color:var(--gold-400);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.nav-menu{flex:1 1 auto;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.nav-list a{
  display:block;padding:9px 13px;border-radius:10px;
  font-size:.87rem;font-weight:600;color:var(--mint);
  border:1px solid transparent;transition:all .2s ease;white-space:nowrap
}
.nav-list a:hover{background:rgba(245,158,11,.10);color:var(--gold-300);border-color:var(--line)}
.nav-list a.active{background:rgba(245,158,11,.16);color:var(--gold-300);border-color:var(--line)}
.nav-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav-toggle{
  display:none;width:44px;height:44px;place-items:center;border-radius:12px;
  border:1px solid var(--line);color:var(--gold-300);
  background:rgba(245,158,11,.08);font-size:1.05rem;line-height:1
}
.btn-ghost{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:11px;
  font-size:.84rem;font-weight:700;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.45);background:transparent;transition:all .2s ease
}
.btn-ghost:hover{background:rgba(245,158,11,.14);color:var(--gold-300);border-color:var(--gold-400)}
.btn-gold{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:11px;
  font-size:.84rem;font-weight:800;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:var(--shadow-gold);transition:all .2s ease;border:0
}
.btn-gold:hover{transform:translateY(-2px);color:#3B1D02;box-shadow:0 16px 38px rgba(245,158,11,.34)}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-gold-lg{padding:14px 26px;border-radius:14px;font-size:.95rem}
.btn-outline-lg{
  display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:14px;
  font-size:.93rem;font-weight:700;color:var(--gold-300);
  border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.05);transition:all .2s ease
}
.btn-outline-lg:hover{background:rgba(245,158,11,.14);color:var(--gold-300);transform:translateY(-2px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:10px}
/* ===== CRUMB ===== */
.crumb-bar{border-bottom:1px solid var(--line-soft);background:rgba(7,36,23,.55)}
.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.8rem;color:var(--muted-2);padding:12px 0}
.crumb a{color:var(--mint);font-weight:600}
.crumb a:hover{color:var(--gold-300)}
.crumb i{font-size:.6rem;opacity:.7}
/* ===== CATEGORY HERO ===== */
.cat-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:62px 0 68px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.26;filter:saturate(.9)}
.cat-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(4,23,15,.94) 0%,rgba(4,23,15,.80) 52%,rgba(4,23,15,.94) 100%)
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center}
.hero-copy{text-align:left}
.hero-copy h1{margin-bottom:18px;text-shadow:0 4px 26px rgba(0,0,0,.5)}
.hero-copy .lead{font-size:1.02rem;color:var(--mint);max-width:600px;margin-bottom:26px}
.hero-points{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.hero-points li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--mint)}
.hero-points i{color:var(--gold-400);margin-top:4px;font-size:.85rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  font-size:.78rem;font-weight:700;color:var(--mint);
  background:rgba(11,46,30,.78);border:1px solid var(--line)
}
.chip i{color:var(--gold-400)}
/* console / code card */
.code-card{
  background:linear-gradient(160deg,rgba(7,36,23,.96),rgba(4,23,15,.98));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden
}
.code-head{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-soft);background:rgba(16,58,39,.55)}
.code-dots{display:flex;gap:6px}
.code-dots span{width:10px;height:10px;border-radius:50%;background:rgba(245,158,11,.35)}
.code-dots span:nth-child(2){background:rgba(245,158,11,.6)}
.code-dots span:nth-child(3){background:rgba(252,211,77,.9)}
.code-head strong{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-400);font-weight:800}
.code-block{
  font-family:var(--mono);font-size:.79rem;line-height:1.9;color:var(--mint);
  padding:20px 20px 8px;margin:0;white-space:pre-wrap;word-break:break-word;text-align:left
}
.code-block .k{color:var(--gold-300);font-weight:700}
.code-block .v{color:#7DE2B4}
.code-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px 18px;flex-wrap:wrap}
.code-foot span{font-size:.76rem;color:var(--muted-2)}
.code-foot a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;
  font-size:.8rem;font-weight:800;color:#3B1D02;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500))
}
.code-foot a:hover{color:#3B1D02;filter:brightness(1.06)}
/* ===== STAT STRIP ===== */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:rgba(7,36,23,.9);padding:22px 20px}
.stat b{display:block;font-size:1.5rem;color:var(--gold-300);letter-spacing:-.02em;line-height:1.2}
.stat span{display:block;font-size:.8rem;color:var(--muted-2);margin-top:5px}
/* ===== SPLIT BLOCK ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.split--media{grid-template-columns:.95fr 1.05fr}
.media-figure{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--bg-850)}
.media-figure img{width:100%;height:100%;object-fit:cover;min-height:280px}
.note-list{display:flex;flex-direction:column;gap:16px}
.note-item{display:flex;gap:14px;padding-left:16px;border-left:2px solid rgba(245,158,11,.35)}
.note-item i{color:var(--gold-400);font-size:1rem;margin-top:4px}
.note-item h4{margin-bottom:5px;font-size:1rem}
.note-item p{margin:0;color:var(--muted-2);font-size:.9rem}
.tag-soft{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(220,38,38,.16);color:#FCA5A5;border:1px solid rgba(220,38,38,.32)
}
.tag-gold{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(245,158,11,.14);color:var(--gold-300);border:1px solid var(--line)
}
/* ===== TIERS ===== */
.tier-list{display:flex;flex-direction:column;gap:14px}
.tier-row{
  display:grid;grid-template-columns:64px 1.1fr 1.5fr;gap:22px;align-items:center;
  padding:22px 24px;border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(11,46,30,.85),rgba(7,36,23,.6));
  border:1px solid var(--line-soft);transition:border-color .25s ease,transform .25s ease
}
.tier-row:hover{border-color:var(--line);transform:translateX(4px)}
.tier-idx{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:800;font-size:1rem;color:#2B0404;
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600))
}
.tier-name h3{margin-bottom:4px;font-size:1.06rem}
.tier-name span{font-size:.78rem;color:var(--gold-400);font-weight:800;letter-spacing:.05em}
.tier-row p{margin:0;font-size:.9rem;color:var(--muted-2)}
.tier-bar{height:6px;border-radius:999px;background:rgba(209,250,229,.10);margin-top:10px;overflow:hidden}
.tier-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
/* ===== SCENES ===== */
.scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.scene-card{
  padding:26px;border-radius:var(--radius);border:1px solid var(--line-soft);
  background:rgba(7,36,23,.62);transition:all .25s ease;height:100%
}
.scene-card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.scene-card .scene-icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(245,158,11,.12);border:1px solid var(--line);color:var(--gold-400);font-size:1.1rem
}
.scene-card h3{margin-bottom:8px}
.scene-card p{color:var(--muted-2);font-size:.9rem;margin-bottom:14px}
.scene-card ul{display:flex;flex-direction:column;gap:7px}
.scene-card li{font-size:.86rem;color:var(--mint);display:flex;gap:9px}
.scene-card li i{color:var(--gold-400);font-size:.75rem;margin-top:5px}
/* ===== FLOW ===== */
.flow{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line);margin-left:12px}
.flow-step{position:relative;padding:0 0 30px 34px}
.flow-step:last-child{padding-bottom:0}
.flow-num{
  position:absolute;left:-15px;top:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;color:#2B0404;
  background:linear-gradient(145deg,var(--gold-300),var(--gold-500));box-shadow:var(--shadow-gold)
}
.flow-step h3{margin-bottom:6px;font-size:1.02rem}
.flow-step p{margin:0;color:var(--muted-2);font-size:.9rem;max-width:720px}
/* ===== PAY ===== */
.pay-table{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.pay-line{
  display:grid;grid-template-columns:200px 1fr 150px;gap:18px;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--line-soft);background:rgba(7,36,23,.55)
}
.pay-line:last-child{border-bottom:0}
.pay-line b{font-size:.92rem;color:var(--ink)}
.pay-line p{margin:0;font-size:.85rem;color:var(--muted-2)}
.pay-line em{font-style:normal;font-size:.82rem;font-weight:800;color:var(--gold-300);text-align:right}
.pay-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.pay-badge{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;
  font-size:.78rem;font-weight:700;color:var(--mint);
  background:rgba(11,46,30,.8);border:1px solid var(--line)
}
/* ===== CHECKLIST ===== */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.check-card{
  padding:22px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);
  background:rgba(4,23,15,.55);display:flex;gap:13px;align-items:flex-start;height:100%
}
.check-card i{color:#7DE2B4;font-size:1rem;margin-top:4px}
.check-card h4{margin-bottom:5px;font-size:.96rem}
.check-card p{margin:0;font-size:.85rem;color:var(--muted-2)}
/* ===== NEWS ===== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card{
  display:flex;flex-direction:column;height:100%;padding:24px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(7,36,23,.66);transition:all .25s ease
}
.news-card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.news-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.74rem;color:var(--gold-400);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.news-card h3{font-size:1.02rem;margin-bottom:9px}
.news-card h3 a{color:var(--ink)}
.news-card h3 a:hover{color:var(--gold-300)}
.news-card p{font-size:.87rem;color:var(--muted-2);margin-bottom:16px}
.news-more{margin-top:26px;display:flex;justify-content:flex-start}
.empty-note{padding:26px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted-2);font-size:.9rem}
/* ===== FAQ ===== */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:rgba(7,36,23,.6);overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;gap:16px;
  align-items:center;font-weight:700;font-size:.96rem;color:var(--ink)
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{color:var(--gold-400);transition:transform .25s ease;font-size:.85rem}
.faq-item[open] summary i{transform:rotate(180deg)}
.faq-item[open] summary{color:var(--gold-300)}
.faq-body{padding:0 22px 20px;color:var(--muted-2);font-size:.9rem}
/* ===== CTA ===== */
.cta-panel{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  border:1px solid var(--line);padding:52px 44px;
  background:linear-gradient(120deg,rgba(16,58,39,.95),rgba(4,23,15,.96))
}
.cta-panel::before{
  content:"";position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.18
}
.cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
.cta-inner p{color:var(--mint);margin-bottom:22px;max-width:620px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-side{border:1px solid var(--line-soft);border-radius:var(--radius);background:rgba(4,23,15,.6);padding:22px}
.cta-side ul{display:flex;flex-direction:column;gap:11px}
.cta-side li{font-size:.87rem;color:var(--mint);display:flex;gap:10px}
.cta-side li i{color:var(--gold-400);margin-top:4px;font-size:.8rem}
/* ===== FAB ===== */
.fab-support{
  position:fixed;left:16px;bottom:96px;z-index:1050;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#2B0404 0%,#0B0C0E 70%);
  border:2px solid var(--gold-500);
  box-shadow:0 6px 25px rgba(245,158,11,.35);
  opacity:.85;animation:fabFloat 3.6s ease-in-out infinite;transition:transform .25s ease,opacity .25s ease
}
.fab-support i{color:var(--gold-300);font-size:1.25rem;transition:transform .45s ease}
.fab-support:hover{opacity:1;transform:scale(1.1)}
.fab-support:hover i{transform:rotate(360deg)}
.fab-support:active{transform:scale(.95) translateY(3px)}
.fab-dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:var(--red-600);box-shadow:0 0 0 2px #F8FAFC}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* ===== FOOTER ===== */
.site-footer{border-top:1px solid var(--line);background:rgba(4,23,15,.96);padding:58px 0 26px;margin-top:10px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.footer-grid h4{font-size:.86rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-400);margin-bottom:16px}
.footer-grid p{font-size:.87rem;color:var(--muted-2)}
.footer-grid ul{display:flex;flex-direction:column;gap:10px}
.footer-grid ul a{font-size:.87rem;color:var(--mint)}
.footer-grid ul a:hover{color:var(--gold-300)}
.footer-bottom{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:38px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:.79rem;color:var(--muted-2)
}
.age-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:5px 9px;border-radius:8px;font-weight:800;font-size:.72rem;
  color:var(--gold-300);border:1px solid var(--line);background:rgba(245,158,11,.08)
}
/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .nav-toggle{display:grid;order:3}
  .nav-actions{order:2}
  .nav-menu{
    order:4;width:100%;flex-direction:column;align-items:stretch;display:none;
    padding:14px 0 6px;margin-top:8px;border-top:1px solid var(--line-soft)
  }
  .nav-menu.open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:6px}
  .nav-list a{padding:12px 14px}
  .nav-wrap{flex-wrap:wrap;padding:10px 0;min-height:0}
  .brand{flex:1 1 auto}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .split,.split--media{grid-template-columns:1fr;gap:30px}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .check-grid{grid-template-columns:repeat(2,1fr)}
  .cta-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .tier-row{grid-template-columns:56px 1fr;gap:16px}
  .tier-row p{grid-column:1 / -1}
}
@media (max-width:768px){
  .section{padding:56px 0}
  .cat-hero{padding:46px 0 54px}
  .scene-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}
  .pay-line{grid-template-columns:1fr;gap:6px}
  .pay-line em{text-align:left}
  .brand-text strong{font-size:.84rem}
  .brand-text span{display:none}
  .brand-mark{width:38px;height:38px;flex:0 0 38px;font-size:1rem}
  .btn-ghost,.btn-gold{padding:8px 12px;font-size:.77rem}
  .cta-panel{padding:36px 24px}
  .code-block{font-size:.73rem}
}
@media (max-width:520px){
  .container{padding:0 15px}
  .stat-strip{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-cta .btn-gold-lg,.hero-cta .btn-outline-lg{width:100%;justify-content:center}
  h1{font-size:1.6rem}
  .fab-support{width:50px;height:50px;bottom:88px;left:12px}
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}