/* roulang page: article */
:root{
  --bg-deep:#0A2E1C;
  --bg-forest:#123E25;
  --bg-panel:#0E3620;
  --bg-panel-2:#14472B;
  --gold:#FFD700;
  --gold-soft:#E8C24A;
  --red:#D32F2F;
  --red-dark:#A81E1E;
  --text:#FFFFFF;
  --text-mint:#D1F2EB;
  --text-mute:#9CC7B4;
  --line:rgba(255,215,0,.22);
  --line-soft:rgba(209,242,235,.14);
  --radius-s:8px;
  --radius:14px;
  --radius-l:22px;
  --shadow-s:0 6px 18px rgba(0,0,0,.28);
  --shadow:0 16px 40px rgba(0,0,0,.42);
  --glow:0 4px 20px rgba(255,215,0,.3);
  --sp:clamp(56px,7vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:
    radial-gradient(1100px 620px at 82% -8%,rgba(255,215,0,.10),transparent 60%),
    radial-gradient(900px 500px at 4% 12%,rgba(211,47,47,.14),transparent 62%),
    linear-gradient(180deg,var(--bg-deep) 0%,#082516 46%,var(--bg-forest) 100%);
  color:var(--text);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--gold-soft);text-decoration:none;transition:color .22s ease,opacity .22s ease}
a:hover{color:var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.22;font-weight:800;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
.sec{padding:var(--sp) 0;position:relative}
.sec-line{border-top:1px solid var(--line-soft)}
.h-sec{font-size:clamp(1.6rem,3.1vw,2.5rem)}
.h-sub{font-size:clamp(1.12rem,1.7vw,1.35rem);font-weight:700}
.lead{color:var(--text-mint);font-size:1.03rem}
.muted{color:var(--text-mute);font-size:.94rem}

/* ---------- HEADER / NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(8,36,22,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
header nav{
  max-width:1200px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;
}
.logo{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.32rem;font-weight:700;color:var(--gold);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
}
.logo::before{
  content:"";width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#FFF0A6,#C79A12 62%,#7A5A05);
  border:2px solid rgba(255,215,0,.85);box-shadow:var(--glow);
}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:14px;flex:1}
.nav-links a{
  display:block;padding:9px 14px;border-radius:999px;
  font-size:.94rem;font-weight:600;color:var(--text-mint);
  border:1px solid transparent;transition:all .22s ease;
}
.nav-links a:hover{color:var(--gold);background:rgba(255,215,0,.09);border-color:var(--line)}
.nav-links a.active{color:#082516;background:linear-gradient(180deg,#FFE066,#E2B517);border-color:#FFD700}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.btn-login{
  padding:9px 12px;font-size:.92rem;font-weight:600;color:var(--text-mint);
}
.btn-login:hover{color:var(--gold)}
.btn-signup{
  padding:10px 20px;border-radius:999px;font-size:.92rem;font-weight:800;
  color:#fff;background:linear-gradient(180deg,#E74C3C,var(--red-dark));
  border:1px solid rgba(255,215,0,.55);box-shadow:0 8px 20px rgba(211,47,47,.34);
  white-space:nowrap;
}
.btn-signup:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(211,47,47,.46)}
.btn-signup:active{transform:translateY(0) scale(.97)}
.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;padding:9px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:rgba(255,215,0,.06)}
.mobile-menu-toggle span{display:block;width:20px;height:2px;background:var(--gold);border-radius:2px;transition:transform .25s ease}
.mobile-menu-toggle:hover span{background:#fff}

/* ---------- ARTICLE BANNER ---------- */
.banner{
  position:relative;margin-top:70px;padding:clamp(56px,7vw,86px) 0 clamp(40px,5vw,64px);
  overflow:hidden;border-bottom:1px solid var(--line);
}
.banner::before{
  content:"";position:absolute;inset:0;
  background:url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
  opacity:.3;transform:scale(1.04);
}
.banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,36,22,.96) 8%,rgba(10,46,28,.82) 52%,rgba(18,62,37,.58) 100%);
}
.banner .container{position:relative;z-index:2}
.banner-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,4vw,54px);align-items:end}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;color:var(--text-mute);margin-bottom:18px}
.crumb a{color:var(--text-mint)}
.crumb i{font-size:.62rem;opacity:.6}
.banner h1{font-size:clamp(1.75rem,4vw,3rem);color:#fff;max-width:22ch;text-wrap:balance}
.banner .lead{margin-top:18px;max-width:60ch}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);color:var(--text-mint);
}
.chip i{color:var(--gold);font-size:.8rem}
.chip-gold{background:rgba(255,215,0,.12);border-color:var(--line);color:var(--gold)}
.chip-red{background:rgba(211,47,47,.2);border-color:rgba(211,47,47,.55);color:#FFD9D6}
.cover-frame{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.cover-frame img{aspect-ratio:4/3;object-fit:cover}
.cover-frame figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(180deg,transparent,rgba(6,30,18,.94));
  font-size:.84rem;color:var(--text-mint);
}
.burst{
  position:absolute;top:14px;right:14px;z-index:3;
  width:78px;height:78px;display:grid;place-items:center;text-align:center;
  font-size:.72rem;font-weight:800;line-height:1.1;color:#fff;
  background:radial-gradient(circle at 50% 40%,#F0533F,var(--red-dark));
  border:2px solid var(--gold);
  clip-path:polygon(50% 0,61% 14%,78% 8%,79% 26%,96% 30%,86% 46%,100% 58%,83% 66%,88% 84%,69% 82%,60% 98%,50% 86%,38% 99%,29% 83%,12% 86%,15% 68%,0 58%,14% 45%,4% 30%,21% 26%,22% 8%,39% 14%);
  animation:pop 2.6s ease-in-out infinite;
}
@keyframes pop{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(-6deg) scale(1.07)}}

/* ---------- SUMMARY + CONTENT LAYOUT ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(28px,3.6vw,52px);align-items:start}
.panel{
  background:linear-gradient(160deg,rgba(20,71,43,.86),rgba(10,46,28,.72));
  border:1px solid var(--line-soft);border-radius:var(--radius-l);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-s);
}
.panel-gold{border-color:var(--line);box-shadow:var(--glow)}
.sticky-side{position:sticky;top:96px}
.toc{margin-top:16px;display:grid;gap:2px;counter-reset:toc}
.toc li{
  display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px dashed var(--line-soft);font-size:.94rem;color:var(--text-mint);
}
.toc li:last-child{border-bottom:0}
.toc li::before{
  counter-increment:toc;content:counter(toc,decimal-leading-zero);
  font-size:.78rem;font-weight:800;color:var(--gold);padding-top:2px;flex:0 0 auto;
}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.stat{padding:16px 14px;border-left:3px solid var(--gold);background:rgba(255,255,255,.035);border-radius:0 var(--radius-s) var(--radius-s) 0}
.stat b{display:block;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--gold);line-height:1.1}
.stat span{font-size:.8rem;color:var(--text-mute)}

/* ---------- ARTICLE BODY ---------- */
.article-body{font-size:1.03rem;color:var(--text-mint);max-width:74ch}
.article-body > *+*{margin-top:20px}
.article-body h2{color:#fff;font-size:clamp(1.35rem,2.4vw,1.85rem);margin-top:40px;padding-left:14px;border-left:4px solid var(--gold)}
.article-body h3{color:#fff;font-size:1.16rem;margin-top:30px}
.article-body h4{color:var(--gold);font-size:1.02rem;margin-top:24px}
.article-body p{color:var(--text-mint)}
.article-body strong,.article-body b{color:#fff}
.article-body a{text-decoration:underline;text-decoration-color:rgba(255,215,0,.5);text-underline-offset:3px}
.article-body ul,.article-body ol{padding-left:22px;display:grid;gap:10px}
.article-body ul{list-style:none;padding-left:0}
.article-body ul li{position:relative;padding-left:26px}
.article-body ul li::before{
  content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 10px rgba(255,215,0,.55);
}
.article-body ol{list-style:decimal;color:var(--text-mint)}
.article-body ol li::marker{color:var(--gold);font-weight:700}
.article-body img{border-radius:var(--radius);border:1px solid var(--line-soft);margin-top:24px}
.article-body blockquote{
  margin:26px 0;padding:18px 22px;border-left:4px solid var(--red);
  background:rgba(211,47,47,.12);border-radius:0 var(--radius) var(--radius) 0;color:#fff;
}
.article-body table{width:100%;border-collapse:collapse;margin-top:24px;font-size:.94rem}
.article-body th,.article-body td{padding:12px 14px;border-bottom:1px solid var(--line-soft);text-align:left}
.article-body th{color:var(--gold);font-weight:700;background:rgba(255,215,0,.07)}
.article-body hr{border:0;border-top:1px solid var(--line-soft);margin:34px 0}
.empty-state{
  padding:clamp(34px,5vw,60px);text-align:left;
  border:1px dashed var(--line);border-radius:var(--radius-l);background:rgba(255,255,255,.03);
}
.empty-state h2{font-size:1.4rem;color:#fff}
.empty-state p{margin-top:12px;color:var(--text-mint)}

/* ---------- RANK LIST ---------- */
.rank-list{display:grid;gap:12px;margin-top:30px}
.rank{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:16px 18px;border-radius:var(--radius);
  background:linear-gradient(100deg,rgba(20,71,43,.8),rgba(10,46,28,.5));
  border:1px solid var(--line-soft);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.rank:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.rank .no{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  font-size:1.02rem;font-weight:800;color:var(--gold);
  background:rgba(255,215,0,.1);border:1px solid var(--line);
}
.rank h3{font-size:1.04rem;color:#fff}
.rank p{font-size:.9rem;color:var(--text-mute);margin-top:4px}
.tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:.74rem;font-weight:800;letter-spacing:.04em;
}
.tag-hot{background:var(--red);color:#fff}
.tag-new{background:var(--gold);color:#0A2E1C}
.tag-free{background:rgba(209,242,235,.14);color:var(--text-mint);border:1px solid var(--line-soft)}

/* ---------- CARDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.card{
  border-radius:var(--radius-l);overflow:hidden;
  background:linear-gradient(180deg,rgba(20,71,43,.82),rgba(9,40,25,.86));
  border:1px solid var(--line);transition:transform .26s ease,box-shadow .26s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(0,0,0,.5)}
.card-media{position:relative}
.card-media img{aspect-ratio:16/10;object-fit:cover}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,32,20,.9))}
.card-media .tag{position:absolute;top:12px;left:12px;z-index:2}
.card-body{padding:20px;display:grid;gap:10px}
.card-body h3{font-size:1.08rem;color:#fff}
.card-body p{font-size:.93rem;color:var(--text-mint)}
.card-body .muted{margin-top:2px}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px;counter-reset:st}
.step{padding-top:20px;border-top:2px solid var(--line)}
.step::before{
  counter-increment:st;content:"0" counter(st);
  display:block;font-size:.86rem;font-weight:800;color:var(--gold);margin-bottom:8px;letter-spacing:.1em;
}
.step h3{font-size:1.02rem;color:#fff}
.step p{font-size:.92rem;color:var(--text-mute);margin-top:8px}

/* ---------- PAY BADGES ---------- */
.pay-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pay{
  display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  font-size:.9rem;font-weight:600;color:#fff;transition:border-color .22s ease,background .22s ease;
}
.pay:hover{border-color:var(--line);background:rgba(255,215,0,.09)}
.pay i{color:var(--gold)}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin-top:30px;display:grid;gap:12px}
.faq details{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(255,255,255,.035);transition:border-color .22s ease;
}
.faq details[open]{border-color:var(--line);background:rgba(255,215,0,.06)}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 20px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  font-weight:700;color:#fff;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--gold);transition:transform .25s ease;font-size:.9rem}
.faq details[open] summary i{transform:rotate(180deg)}
.faq p{padding:0 20px 19px;color:var(--text-mint);font-size:.96rem}

/* ---------- CTA ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  padding:clamp(34px,5vw,62px) clamp(22px,4vw,54px);text-align:center;
  border:1px solid var(--line);box-shadow:var(--glow);
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;opacity:.26;
}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(9,40,25,.94),rgba(18,62,37,.8))}
.cta > *{position:relative;z-index:2}
.cta h2{font-size:clamp(1.5rem,3vw,2.3rem);color:#fff;max-width:24ch;margin:14px auto 0}
.cta p{margin:16px auto 0;max-width:62ch;color:var(--text-mint)}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;
  font-weight:800;color:#0A2E1C;background:linear-gradient(180deg,#FFE066,#E0B412);
  border:1px solid #FFD700;box-shadow:0 10px 26px rgba(255,215,0,.28);
  transition:transform .22s ease,box-shadow .22s ease;
}
.btn-primary:hover{color:#0A2E1C;transform:translateY(-3px);box-shadow:0 16px 34px rgba(255,215,0,.4)}
.btn-primary:active{transform:translateY(0) scale(.97)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;
  font-weight:700;color:#fff;border:1px solid var(--line);background:rgba(255,255,255,.05);
  transition:background .22s ease,transform .22s ease;
}
.btn-ghost:hover{color:#fff;background:rgba(255,215,0,.12);transform:translateY(-3px)}
.btn-ghost:active{transform:translateY(0) scale(.97)}
.countdown{display:inline-flex;gap:10px;margin-top:24px}
.cd-box{min-width:64px;padding:10px 8px;border-radius:12px;background:rgba(0,0,0,.4);border:1px solid var(--line)}
.cd-box b{display:block;font-size:1.4rem;color:var(--gold);line-height:1}
.cd-box span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}

/* ---------- FAB ---------- */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:70;
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#1d1d1d,#0b0b0b 70%);
  border:3px solid var(--gold);box-shadow:var(--glow);opacity:.72;
  color:var(--gold);font-size:1.25rem;
  animation:float 3.4s ease-in-out infinite;
  transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;
}
.fab:hover{opacity:1;transform:scale(1.1);color:var(--gold);box-shadow:0 8px 30px rgba(255,215,0,.5)}
.fab:hover i{animation:spin .6s ease}
.fab:active{transform:scale(.95) translateY(2px)}
.fab::after{
  content:"";position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;
  background:#E0201B;border:2px solid #0b0b0b;animation:blink 1.4s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- FOOTER ---------- */
footer{
  margin-top:var(--sp);border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(6,28,17,.7),rgba(5,22,14,.96));
}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding:clamp(44px,5vw,64px) 0}
.f-brand{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:700;color:var(--gold)}
.f-grid p{color:var(--text-mute);font-size:.93rem;margin-top:14px;max-width:38ch}
.f-grid h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.f-links{display:grid;gap:10px}
.f-links a{color:var(--text-mint);font-size:.93rem}
.f-links a:hover{color:var(--gold);padding-left:4px}
.f-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.badge-18{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  font-weight:800;font-size:.86rem;color:var(--gold);border:2px solid var(--gold);background:rgba(255,215,0,.08);
}
.f-bottom{
  border-top:1px solid var(--line-soft);padding:20px 0;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:.86rem;color:var(--text-mute);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .banner-grid{grid-template-columns:1fr;align-items:start}
  .split{grid-template-columns:1fr}
  .sticky-side{position:static}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-grid{grid-template-columns:1fr 1fr;gap:30px}
  .nav-links{gap:2px;margin-left:8px}
  .nav-links a{padding:8px 10px;font-size:.88rem}
}
@media (max-width:768px){
  header nav{gap:10px;padding:10px 16px}
  .mobile-menu-toggle{display:flex;order:3}
  .nav-cta{order:2;margin-left:auto;gap:6px}
  .btn-login{padding:8px 6px;font-size:.86rem}
  .btn-signup{padding:9px 15px;font-size:.85rem}
  .nav-links{
    order:4;flex:0 0 100%;display:none;flex-direction:column;align-items:stretch;gap:4px;
    margin:8px 0 4px;padding-top:10px;border-top:1px solid var(--line-soft);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;border-radius:10px}
  .banner{margin-top:64px}
  .stat-row{grid-template-columns:1fr}
  .rank{grid-template-columns:44px minmax(0,1fr);row-gap:10px}
  .rank .tag{grid-column:2}
}
@media (max-width:520px){
  body{font-size:15.5px}
  .container{padding:0 16px}
  .grid-3,.steps{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .banner h1{max-width:100%}
  .burst{width:64px;height:64px;font-size:.62rem}
  .fab{left:12px;bottom:84px;width:52px;height:52px;min-width:48px;min-height:48px}
  .cta-actions{flex-direction:column}
  .btn-primary,.btn-ghost{justify-content:center;width:100%}
  .countdown{flex-wrap:wrap;justify-content:center}
}

/* roulang page: category1 */
:root {
            --primary-bg: #0A2E1C;
            --secondary-bg: #123E25;
            --accent-gold: #FFD700;
            --accent-red: #D32F2F;
            --text-primary: #FFFFFF;
            --text-muted: #D1F2EB;
            --border-color: rgba(255, 215, 0, 0.2);
            --shadow-gold: 0 4px 20px rgba(255, 215, 0, 0.15);
            --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.3);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2rem;
            --spacing-xl: 3rem;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
        }
        
        a {
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        button, .btn {
            cursor: pointer;
            border: none;
            outline: none;
            font-family: inherit;
            transition: all 0.3s ease;
        }
        
        input, textarea {
            font-family: inherit;
            outline: none;
        }
        
        /* Header & Navigation */
        header {
            background: rgba(10, 46, 28, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow-elevated);
        }
        
        nav {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            white-space: nowrap;
            letter-spacing: -0.5px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
            margin: 0;
            padding: 0;
        }
        
        .nav-links a {
            color: var(--text-muted);
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: var(--radius-sm);
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-links a:hover {
            color: var(--accent-gold);
            background: rgba(255, 215, 0, 0.1);
        }
        
        .nav-links a.active {
            color: var(--accent-gold);
            background: rgba(255, 215, 0, 0.15);
        }
        
        .nav-links a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 1rem;
            right: 1rem;
            height: 2px;
            background: var(--accent-gold);
        }
        
        .nav-cta {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .btn-login {
            color: var(--text-muted);
            padding: 0.5rem 1.25rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-login:hover {
            color: var(--accent-gold);
        }
        
        .btn-signup {
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            color: var(--primary-bg);
            padding: 0.625rem 1.5rem;
            border-radius: var(--radius-sm);
            font-weight: 700;
            box-shadow: var(--shadow-gold);
            transition: all 0.3s ease;
        }
        
        .btn-signup:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(255, 215, 0, 0.3);
        }
        
        .btn-signup:active {
            transform: translateY(0);
        }
        
        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            gap: 4px;
            cursor: pointer;
        }
        
        .mobile-menu-toggle span {
            width: 24px;
            height: 3px;
            background: var(--accent-gold);
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        /* Hero Section */
        .hero {
            position: relative;
            background: linear-gradient(rgba(10, 46, 28, 0.85), rgba(18, 62, 37, 0.9)), url('/assets/images/backpic/back-1.jpg') center/cover;
            padding: 4rem 2rem 3rem;
            text-align: center;
            border-bottom: 2px solid var(--border-color);
        }
        
        .hero-content {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 2.75rem;
            font-weight: 900;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFF 50%, var(--accent-gold) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-subtitle {
            font-size: 1.25rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            line-height: 1.6;
        }
        
        .hero-badges {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }
        
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid var(--accent-gold);
            border-radius: 50px;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--accent-gold);
        }
        
        .badge i {
            font-size: 1rem;
        }
        
        .hero-cta {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            color: var(--primary-bg);
            padding: 1rem 2.5rem;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 1.125rem;
            box-shadow: var(--shadow-gold);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255, 215, 0, 0.35);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            padding: 1rem 2.5rem;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 1.125rem;
            border: 2px solid var(--accent-gold);
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-3px);
        }
        
        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        /* Section Styling */
        section {
            padding: 4rem 0;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .section-title {
            font-size: 2.25rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--accent-gold);
        }
        
        .section-subtitle {
            font-size: 1.125rem;
            color: var(--text-muted);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
        }
        
        /* Game Cards Grid */
        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .game-card {
            background: rgba(18, 62, 37, 0.6);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: all 0.4s ease;
            position: relative;
        }
        
        .game-card:hover {
            transform: translateY(-8px);
            border-color: var(--accent-gold);
            box-shadow: 0 12px 40px rgba(255, 215, 0, 0.2);
        }
        
        .game-card-image {
            position: relative;
            overflow: hidden;
            height: 200px;
        }
        
        .game-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        
        .game-card:hover .game-card-image img {
            transform: scale(1.1);
        }
        
        .game-tag {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--accent-red);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 8px rgba(211, 47, 47, 0.4);
        }
        
        .game-card-content {
            padding: 1.5rem;
        }
        
        .game-card-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        
        .game-card-description {
            font-size: 0.9375rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        
        .game-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }
        
        .game-players {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--accent-gold);
        }
        
        .btn-play {
            background: rgba(255, 215, 0, 0.15);
            color: var(--accent-gold);
            padding: 0.5rem 1.25rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.875rem;
            border: 1px solid var(--accent-gold);
            transition: all 0.3s ease;
        }
        
        .btn-play:hover {
            background: var(--accent-gold);
            color: var(--primary-bg);
        }
        
        /* Features Section */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .feature-card {
            background: rgba(18, 62, 37, 0.4);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 2rem;
            text-align: left;
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            border-color: var(--accent-gold);
            background: rgba(18, 62, 37, 0.6);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 1.75rem;
            color: var(--primary-bg);
            box-shadow: var(--shadow-gold);
        }
        
        .feature-title {
            font-size: 1.375rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        
        .feature-description {
            font-size: 1rem;
            color: var(--text-muted);
            line-height: 1.7;
        }
        
        /* How to Play Section */
        .steps-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .step-card {
            text-align: center;
            position: relative;
        }
        
        .step-number {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
            font-weight: 900;
            color: var(--primary-bg);
            box-shadow: var(--shadow-gold);
            position: relative;
        }
        
        .step-card:not(:last-child) .step-number::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 100%;
            width: 100px;
            height: 2px;
            background: linear-gradient(to right, var(--accent-gold), transparent);
        }
        
        .step-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        
        .step-description {
            font-size: 0.9375rem;
            color: var(--text-muted);
            line-height: 1.6;
        }
        
        /* FAQ Section */
        .faq-container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .faq-item {
            background: rgba(18, 62, 37, 0.4);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .faq-item:hover {
            border-color: var(--accent-gold);
        }
        
        .faq-question {
            padding: 1.5rem;
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            transition: all 0.3s ease;
        }
        
        .faq-question:hover {
            color: var(--accent-gold);
        }
        
        .faq-question i {
            color: var(--accent-gold);
            transition: transform 0.3s ease;
        }
        
        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .faq-item.active .faq-answer {
            max-height: 500px;
        }
        
        .faq-answer-content {
            padding: 0 1.5rem 1.5rem;
            color: var(--text-muted);
            line-height: 1.7;
            font-size: 1rem;
        }
        
        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, rgba(18, 62, 37, 0.8) 0%, rgba(10, 46, 28, 0.9) 100%), url('/assets/images/backpic/back-2.jpg') center/cover;
            border-radius: var(--radius-lg);
            padding: 4rem 2rem;
            text-align: center;
            margin: 4rem 0;
            border: 2px solid var(--accent-gold);
            box-shadow: var(--shadow-elevated);
        }
        
        .cta-title {
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .cta-description {
            font-size: 1.25rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Footer */
        footer {
            background: rgba(10, 46, 28, 0.95);
            border-top: 2px solid var(--border-color);
            padding: 3rem 2rem 1.5rem;
        }
        
        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 2rem;
        }
        
        .footer-section h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1.25rem;
            color: var(--accent-gold);
        }
        
        .footer-section p,
        .footer-section a {
            color: var(--text-muted);
            line-height: 1.8;
            font-size: 0.9375rem;
        }
        
        .footer-section a:hover {
            color: var(--accent-gold);
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
        }
        
        .footer-links li {
            margin-bottom: 0.75rem;
        }
        
        .footer-social {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .social-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-gold);
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            background: var(--accent-gold);
            color: var(--primary-bg);
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            max-width: 1400px;
            margin: 0 auto;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
            text-align: center;
            color: var(--text-muted);
            font-size: 0.875rem;
        }
        
        .footer-badges {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }
        
        .footer-badge {
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid var(--accent-gold);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.75rem;
            color: var(--accent-gold);
            font-weight: 600;
        }
        
        /* FAB */
        .fab {
            position: fixed;
            left: 1rem;
            bottom: 6rem;
            z-index: 999;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 3px solid var(--primary-bg);
            opacity: 0.7;
            animation: fabFloat 3s ease-in-out infinite;
        }
        
        .fab:hover {
            opacity: 1;
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
        }
        
        .fab i {
            font-size: 1.5rem;
            color: var(--primary-bg);
        }
        
        @keyframes fabFloat {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .hero h1 {
                font-size: 2.25rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .games-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 1.5rem;
            }
            
            .step-card:not(:last-child) .step-number::after {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
            nav {
                padding: 1rem;
            }
            
            .nav-links {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                background: rgba(10, 46, 28, 0.98);
                flex-direction: column;
                padding: 2rem;
                gap: 0;
                border-bottom: 2px solid var(--accent-gold);
                transition: left 0.3s ease;
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .nav-links li {
                width: 100%;
                text-align: center;
                padding: 0.75rem 0;
                border-bottom: 1px solid var(--border-color);
            }
            
            .nav-cta {
                gap: 0.5rem;
            }
            
            .btn-login, .btn-signup {
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
            }
            
            .mobile-menu-toggle {
                display: flex;
            }
            
            .hero {
                padding: 3rem 1rem 2rem;
            }
            
            .hero h1 {
                font-size: 1.75rem;
            }
            
            .hero-subtitle {
                font-size: 1rem;
            }
            
            .section-title {
                font-size: 1.75rem;
            }
            
            .games-grid {
                grid-template-columns: 1fr;
            }
            
            .features-grid,
            .steps-container {
                grid-template-columns: 1fr;
            }
            
            .cta-title {
                font-size: 1.75rem;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .fab {
                width: 50px;
                height: 50px;
                bottom: 5rem;
            }
            
            .fab i {
                font-size: 1.25rem;
            }
        }
        
        @media (max-width: 520px) {
            .container {
                padding: 0 1rem;
            }
            
            .hero-cta {
                flex-direction: column;
                align-items: stretch;
            }
            
            .btn-primary,
            .btn-secondary {
                width: 100%;
                text-align: center;
            }
        }

/* roulang page: category2 */
:root{
  --bg:#0B0B0B;
  --bg-2:#161616;
  --bg-3:#1E1E1E;
  --lava:#FF4500;
  --fire:#FF0000;
  --text:#FFFFFF;
  --muted:#CCCCCC;
  --line:rgba(255,255,255,.10);
  --line-hot:rgba(255,69,0,.42);
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --sh:0 18px 46px rgba(0,0,0,.55);
  --sh-hot:0 14px 40px rgba(255,69,0,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro',system-ui,Arial,sans-serif;
  line-height:1.62;
  letter-spacing:.1px;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .22s ease,opacity .22s ease}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--lava);color:#0B0B0B}
:focus-visible{outline:2px solid var(--lava);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:1220px;margin:0 auto;padding:0 20px}

/* ===== HEADER / NAV ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(11,11,11,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
header nav{
  width:100%;max-width:1220px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;
}
.logo{
  font-size:1.22rem;font-weight:900;letter-spacing:-.4px;
  background:linear-gradient(96deg,#FFFFFF 8%,#FF7A2F 52%,#FF0000 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;flex:0 0 auto;
}
.logo:hover{opacity:.86}
.nav-links{
  list-style:none;display:flex;align-items:center;gap:6px;
  margin:0;padding:0;flex:1 1 auto;
}
.nav-links a{
  display:block;padding:9px 15px;border-radius:999px;
  font-size:.93rem;font-weight:600;color:var(--muted);
  border:1px solid transparent;white-space:nowrap;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06);border-color:var(--line)}
.nav-links a.active{
  color:#fff;background:linear-gradient(135deg,rgba(255,69,0,.22),rgba(255,0,0,.14));
  border-color:var(--line-hot);
}
.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.btn-login{
  font-size:.9rem;font-weight:600;color:var(--muted);padding:9px 6px;
}
.btn-login:hover{color:var(--lava)}
.btn-signup{
  padding:10px 20px;border-radius:999px;font-size:.9rem;font-weight:800;
  color:#12060A;background:linear-gradient(135deg,#FF6A00,#FF0000);
  box-shadow:0 8px 22px rgba(255,69,0,.34);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
  white-space:nowrap;
}
.btn-signup:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,69,0,.5);filter:saturate(1.1)}
.btn-signup:active{transform:translateY(0) scale(.97)}
.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:2px}
.mobile-menu-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.mobile-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.open span:nth-child(2){opacity:0}
.mobile-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1024px){
  .nav-links{
    position:fixed;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:#0F0F0F;border-bottom:1px solid var(--line);
    padding:14px 20px 22px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .3s ease,opacity .25s ease,padding .3s ease;
  }
  .nav-links.show{max-height:340px;opacity:1;pointer-events:auto}
  .nav-links a{padding:13px 14px;border-radius:var(--r-sm);font-size:1rem}
  .mobile-menu-toggle{display:flex}
  header nav{gap:10px}
  .nav-cta{margin-left:auto}
}
@media (max-width:520px){
  .logo{font-size:1.02rem}
  .btn-signup{padding:9px 14px;font-size:.82rem}
  .btn-login{font-size:.82rem;padding:9px 2px}
  header nav{padding:10px 16px}
}

/* ===== SHARED PIECES ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;
  color:var(--lava);
}
.rule{height:1px;background:linear-gradient(90deg,var(--line-hot),transparent);border:0;margin:0}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:.74rem;font-weight:700;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);
}
.badge-hot{border-color:var(--line-hot);background:rgba(255,69,0,.14);color:#FFB08A}
.burst{
  position:absolute;
  display:grid;place-items:center;
  width:82px;height:82px;
  font-size:.72rem;font-weight:900;line-height:1.15;text-align:center;
  color:#1A0500;
  background:radial-gradient(circle at 50% 45%,#FFD08A,#FF6A00 62%,#FF0000);
  clip-path:polygon(50% 0%,60% 14%,76% 6%,78% 24%,95% 22%,89% 38%,100% 50%,89% 62%,95% 78%,78% 76%,76% 94%,60% 86%,50% 100%,40% 86%,24% 94%,22% 76%,5% 78%,11% 62%,0% 50%,11% 38%,5% 22%,22% 24%,24% 6%,40% 14%);
  box-shadow:0 10px 26px rgba(255,69,0,.4);
  transform:rotate(-9deg);
}
.hot-line{
  background:linear-gradient(96deg,#FFFFFF 20%,#FFB07A 60%,#FF3D00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.skew-card{
  background:linear-gradient(160deg,#191919,#101010);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.skew-card:hover{transform:translateY(-5px);border-color:var(--line-hot);box-shadow:var(--sh-hot)}
.cut-corner{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.divider-row{border-top:1px solid var(--line)}
.stat-num{
  font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;color:var(--lava);line-height:1.15}
.stat-label{font-size:.88rem;color:var(--muted);margin-top:4px}

/* ===== HERO BANNER ===== */
.hero-banner{
  margin-top:64px;
  background:linear-gradient(155deg,rgba(22,22,22,.95),rgba(11,11,11,.98)),url('/assets/images/backpic/back-2.jpg') center/cover;
  border-bottom:1px solid var(--line-hot);
  padding:68px 0 54px;position:relative;overflow:hidden;
}
.hero-banner::before{
  content:'';position:absolute;top:-30%;right:-10%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(255,69,0,.15),transparent 68%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2}
.hero-title{
  font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.14;
  letter-spacing:-1px;margin:0 0 18px;
  background:linear-gradient(96deg,#FFFFFF 15%,#FF9A6C 70%,#FF3D00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  font-size:clamp(1.05rem,2.2vw,1.32rem);font-weight:500;color:var(--muted);
  margin:0 0 28px;max-width:720px;line-height:1.56;
}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;font-size:.86rem;font-weight:700;
  border:1px solid var(--line);background:rgba(0,0,0,.5);color:var(--muted);
}
.pill i{color:var(--lava);font-size:.92rem}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border-radius:var(--r-md);font-size:1.02rem;font-weight:800;
  color:#120000;background:linear-gradient(135deg,#FF6A00,#FF0000);
  box-shadow:0 12px 32px rgba(255,69,0,.42);
  transition:transform .22s ease,box-shadow .22s ease;
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 44px rgba(255,69,0,.58)}
.btn-primary:active{transform:translateY(-1px) scale(.99)}
.btn-secondary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:var(--r-md);font-size:1rem;font-weight:700;
  color:var(--text);background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  transition:background .22s ease,border-color .22s ease;
}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--line-hot)}

@media (max-width:768px){
  .hero-banner{padding:48px 0 40px}
  .hero-title{font-size:1.9rem}
  .hero-sub{font-size:1.05rem;margin-bottom:22px}
  .hero-pills{gap:8px;margin-bottom:26px}
  .pill{font-size:.8rem;padding:8px 13px}
  .btn-primary,.btn-secondary{padding:12px 24px;font-size:.92rem}
}

/* ===== INTRO GRID ===== */
.intro-grid{padding:68px 0;background:var(--bg)}
.intro-grid .container{max-width:1080px}
.intro-headline{
  font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:900;line-height:1.2;
  margin:0 0 16px;text-align:center;
}
.intro-desc{
  font-size:1.08rem;color:var(--muted);text-align:center;
  max-width:680px;margin:0 auto 48px;line-height:1.65;
}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.intro-card{
  background:linear-gradient(155deg,#1C1C1C,#0F0F0F);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;position:relative;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.intro-card::before{
  content:'';position:absolute;top:-50%;right:-30%;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,69,0,.1),transparent 60%);
  pointer-events:none;
}
.intro-card:hover{transform:translateY(-6px);border-color:var(--line-hot);box-shadow:0 16px 44px rgba(0,0,0,.6)}
.intro-icon{
  width:58px;height:58px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(255,69,0,.18),rgba(255,0,0,.08));
  display:grid;place-items:center;font-size:1.7rem;color:var(--lava);
  margin-bottom:20px;position:relative;z-index:2;
}
.intro-card h3{
  font-size:1.26rem;font-weight:800;margin:0 0 10px;position:relative;z-index:2;
}
.intro-card p{
  font-size:.96rem;color:var(--muted);margin:0;line-height:1.62;position:relative;z-index:2;
}

@media (max-width:768px){
  .intro-grid{padding:48px 0}
  .grid-3{grid-template-columns:1fr;gap:20px}
}

/* ===== REWARD TABLE ===== */
.reward-table-sec{padding:72px 0;background:var(--bg-2)}
.reward-table-sec .container{max-width:1140px}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head h2{
  font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;line-height:1.18;
  margin:0 0 14px;
}
.sec-head p{
  font-size:1.08rem;color:var(--muted);margin:0;max-width:660px;margin:0 auto;
  line-height:1.62;
}
.reward-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px}
.reward-card{
  background:linear-gradient(145deg,#191919,#0E0E0E);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0;overflow:hidden;position:relative;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.reward-card:hover{transform:translateY(-6px);border-color:var(--line-hot);box-shadow:0 18px 46px rgba(0,0,0,.65)}
.reward-thumb{
  width:100%;height:200px;
  background:url('/assets/images/coverpic/cover-3.jpg') center/cover;
  position:relative;
}
.reward-thumb::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 20%,rgba(11,11,11,.85));
}
.reward-body{padding:26px 24px 28px;position:relative}
.reward-title{
  font-size:1.28rem;font-weight:800;margin:0 0 8px;
  display:flex;align-items:center;gap:10px;
}
.reward-chip-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.chip-badge{
  padding:6px 14px;border-radius:999px;font-size:.84rem;font-weight:700;
  background:rgba(255,69,0,.14);border:1px solid var(--line-hot);color:#FFB08A;
}
.reward-meta{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.meta-row{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}
.meta-label{color:var(--muted)}
.meta-val{font-weight:700;color:var(--text)}
.meta-val.hot{color:var(--lava)}
.reward-btn{
  width:100%;padding:12px;border-radius:var(--r-sm);font-size:.96rem;font-weight:800;
  color:#0F0000;background:linear-gradient(135deg,#FF6A00,#FF0000);
  border:0;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.reward-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,69,0,.42)}
.reward-btn:active{transform:translateY(0)}

@media (max-width:768px){
  .reward-table-sec{padding:52px 0}
  .reward-cards{grid-template-columns:1fr;gap:22px}
  .reward-thumb{height:180px}
}

/* ===== COMPARISON TABLE ===== */
.comparison-sec{padding:72px 0;background:var(--bg)}
.comparison-sec .container{max-width:1180px}
.table-wrap{overflow-x:auto;margin-top:38px}
.comp-table{
  width:100%;min-width:900px;border-collapse:collapse;
  background:linear-gradient(155deg,#181818,#0D0D0D);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.comp-table thead{background:rgba(255,69,0,.08);border-bottom:1px solid var(--line-hot)}
.comp-table th{
  padding:16px 14px;text-align:left;font-size:.88rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
}
.comp-table tbody tr{border-bottom:1px solid var(--line);transition:background .2s ease}
.comp-table tbody tr:hover{background:rgba(255,255,255,.02)}
.comp-table td{padding:18px 14px;font-size:.92rem;vertical-align:middle}
.comp-table td:first-child{font-weight:700}
.comp-table .check-icon{color:#4AFF7A;font-size:1.1rem}
.comp-table .cross-icon{color:#FF5C5C;font-size:1.1rem}
.table-note{
  margin-top:18px;padding:16px 20px;border-radius:var(--r-sm);
  background:rgba(255,69,0,.06);border:1px solid var(--line-hot);
  font-size:.88rem;color:var(--muted);line-height:1.58;
}

@media (max-width:768px){
  .comparison-sec{padding:52px 0}
  .table-wrap{margin-top:28px}
}

/* ===== STEPS ===== */
.steps-sec{padding:72px 0;background:var(--bg-2)}
.steps-sec .container{max-width:1060px}
.steps-list{display:grid;gap:24px;margin-top:44px}
.step-item{
  display:grid;grid-template-columns:80px 1fr;gap:22px;
  background:linear-gradient(155deg,#1A1A1A,#0E0E0E);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;align-items:start;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.step-item:hover{transform:translateX(6px);border-color:var(--line-hot);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.step-num{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,69,0,.2),rgba(255,0,0,.1));
  border:2px solid var(--line-hot);
  display:grid;place-items:center;
  font-size:2rem;font-weight:900;color:var(--lava);
  flex-shrink:0;
}
.step-content h3{
  font-size:1.3rem;font-weight:800;margin:0 0 10px;
}
.step-content p{
  font-size:.98rem;color:var(--muted);margin:0;line-height:1.64;
}

@media (max-width:768px){
  .steps-sec{padding:52px 0}
  .step-item{grid-template-columns:1fr;gap:18px;padding:24px 20px}
  .step-num{width:64px;height:64px;font-size:1.6rem;margin:0 auto}
  .step-content{text-align:center}
}

/* ===== FAQ ===== */
.faq-sec{padding:72px 0;background:var(--bg)}
.faq-sec .container{max-width:920px}
.faq-list{margin-top:44px;display:flex;flex-direction:column;gap:16px}
.faq-item{
  background:linear-gradient(155deg,#181818,#0D0D0D);
  border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .25s ease;
}
.faq-item.open{border-color:var(--line-hot)}
.faq-q{
  width:100%;padding:20px 22px;background:transparent;border:0;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-size:1.08rem;font-weight:700;text-align:left;color:var(--text);
  cursor:pointer;transition:background .2s ease;
}
.faq-q:hover{background:rgba(255,255,255,.03)}
.faq-icon{
  font-size:1.1rem;color:var(--lava);flex-shrink:0;
  transition:transform .3s ease;
}
.faq-item.open .faq-icon{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .35s ease;
}
.faq-item.open .faq-a{max-height:420px;padding:0 22px 22px}
.faq-a p{
  margin:0;font-size:.96rem;color:var(--muted);line-height:1.68;
}

@media (max-width:768px){
  .faq-sec{padding:52px 0}
  .faq-q{font-size:1rem;padding:18px 18px}
  .faq-a{padding:0 18px 18px!important}
}

/* ===== CTA FINAL ===== */
.cta-final{
  padding:88px 0;
  background:linear-gradient(160deg,rgba(22,22,22,.96),rgba(11,11,11,.99)),url('/assets/images/backpic/back-3.jpg') center/cover;
  border-top:1px solid var(--line-hot);
  text-align:center;position:relative;overflow:hidden;
}
.cta-final::before{
  content:'';position:absolute;top:50%;left:50%;
  width:800px;height:800px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,69,0,.12),transparent 65%);
  pointer-events:none;
}
.cta-final .container{position:relative;z-index:2}
.cta-title{
  font-size:clamp(2rem,4.5vw,3rem);font-weight:900;line-height:1.16;
  margin:0 0 18px;
}
.cta-desc{
  font-size:1.12rem;color:var(--muted);margin:0 auto 38px;
  max-width:640px;line-height:1.62;
}
.cta-btn-row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}

@media (max-width:768px){
  .cta-final{padding:62px 0}
  .cta-title{font-size:1.9rem}
  .cta-desc{font-size:1.04rem;margin-bottom:28px}
}

/* ===== FOOTER ===== */
footer{
  background:var(--bg-2);border-top:1px solid var(--line);
  padding:52px 0 28px;
}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:42px 32px;
  margin-bottom:42px;
}
.footer-col h4{
  font-size:1.08rem;font-weight:800;margin:0 0 18px;
}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-links a{
  font-size:.92rem;color:var(--muted);
  transition:color .2s ease,padding-left .2s ease;
  display:inline-block;
}
.footer-links a:hover{color:var(--lava);padding-left:4px}
.footer-desc{font-size:.92rem;color:var(--muted);line-height:1.64;margin:0}
.footer-bottom{
  padding-top:28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;
}
.footer-copy{font-size:.86rem;color:var(--muted);margin:0}
.footer-badges{display:flex;align-items:center;gap:12px}
.footer-badge{
  padding:6px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-size:.74rem;font-weight:700;color:var(--muted);
}

@media (max-width:768px){
  footer{padding:42px 0 24px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ===== FAB ===== */
.fab{
  position:fixed;left:20px;bottom:96px;z-index:55;
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,69,0,.28),rgba(255,0,0,.18));
  backdrop-filter:blur(10px);
  border:2px solid var(--line-hot);
  display:grid;place-items:center;
  font-size:1.7rem;color:var(--lava);
  cursor:pointer;opacity:.7;
  box-shadow:0 12px 32px rgba(255,69,0,.36);
  transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease;
  animation:fabFloat 3.2s ease-in-out infinite;
}
.fab:hover{opacity:1;transform:scale(1.12);box-shadow:0 18px 42px rgba(255,69,0,.54)}
.fab:active{transform:scale(.96)}
@keyframes fabFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@media (max-width:768px){
  .fab{width:56px;height:56px;font-size:1.5rem;left:16px;bottom:84px}
}

/* roulang page: index */
:root {
            --primary-bg: #0A2E1C;
            --secondary-bg: #123E25;
            --accent-gold: #FFD700;
            --accent-red: #D32F2F;
            --text-light: #FFFFFF;
            --text-pale: #D1F2EB;
            --card-bg: rgba(18, 62, 37, 0.8);
            --border-gold: #FFD700;
            --shadow-gold: rgba(255, 215, 0, 0.3);
            --radius: 12px;
            --spacing: 1.5rem;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-light);
            background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
            min-height: 100vh;
        }
        
        a {
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        button, .btn {
            cursor: pointer;
            border: none;
            outline: none;
            transition: all 0.3s ease;
        }
        
        input, textarea {
            font-family: inherit;
            border: none;
            outline: none;
        }
        
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        /* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(10, 46, 28, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            max-width: 1280px;
            margin: 0 auto;
        }
        
        .logo {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--accent-gold);
            text-shadow: 0 2px 8px var(--shadow-gold);
        }
        
        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
            align-items: center;
        }
        
        .nav-links a {
            color: var(--text-pale);
            font-weight: 500;
            position: relative;
            padding: 0.5rem 0;
        }
        
        .nav-links a:hover,
        .nav-links a.active {
            color: var(--accent-gold);
        }
        
        .nav-links a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-gold);
        }
        
        .nav-cta {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .btn-login {
            color: var(--text-pale);
            font-weight: 500;
            padding: 0.5rem 1rem;
        }
        
        .btn-login:hover {
            color: var(--accent-gold);
        }
        
        .btn-signup {
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            color: var(--primary-bg);
            font-weight: 700;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px var(--shadow-gold);
        }
        
        .btn-signup:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px var(--shadow-gold);
        }
        
        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }
        
        .mobile-menu-toggle span {
            width: 25px;
            height: 3px;
            background: var(--accent-gold);
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        /* Hero Section */
        .hero {
            margin-top: 80px;
            padding: 4rem 0;
            background: linear-gradient(rgba(10, 46, 28, 0.85), rgba(18, 62, 37, 0.85)), url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            border-bottom: 3px solid var(--accent-gold);
        }
        
        .hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }
        
        .hero-text h1 {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            color: var(--accent-gold);
            text-shadow: 0 3px 10px var(--shadow-gold);
        }
        
        .hero-text p {
            font-size: 1.1rem;
            line-height: 1.7;
            color: var(--text-pale);
            margin-bottom: 2rem;
        }
        
        .hero-badges {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }
        
        .badge {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--card-bg);
            padding: 0.75rem 1.25rem;
            border-radius: 50px;
            border: 1px solid var(--border-gold);
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .badge i {
            color: var(--accent-gold);
        }
        
        .hero-cta {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            color: var(--primary-bg);
            font-weight: 700;
            padding: 1rem 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px var(--shadow-gold);
            font-size: 1.1rem;
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px var(--shadow-gold);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--text-light);
            border: 2px solid var(--accent-gold);
            font-weight: 600;
            padding: 1rem 2rem;
            border-radius: 8px;
        }
        
        .btn-secondary:hover {
            background: var(--accent-gold);
            color: var(--primary-bg);
        }
        
        .hero-visual {
            position: relative;
        }
        
        .apply-card {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 2px solid var(--border-gold);
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
        }
        
        .apply-card h3 {
            font-size: 1.5rem;
            color: var(--accent-gold);
            margin-bottom: 1rem;
        }
        
        .apply-benefits {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .benefit-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            background: rgba(255, 215, 0, 0.1);
            border-radius: 8px;
        }
        
        .benefit-item i {
            color: var(--accent-gold);
            font-size: 1.25rem;
        }
        
        .btn-apply {
            width: 100%;
            background: linear-gradient(135deg, var(--accent-red) 0%, #FF6B6B 100%);
            color: white;
            font-weight: 700;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(211, 47, 47, 0.4);
            text-align: center;
        }
        
        .btn-apply:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(211, 47, 47, 0.6);
        }
        
        /* Sections */
        section {
            padding: 4rem 0;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .section-header h2 {
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--accent-gold);
            margin-bottom: 1rem;
        }
        
        .section-header p {
            font-size: 1.1rem;
            color: var(--text-pale);
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* Commission Highlights */
        .commission-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }
        
        .commission-card {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-gold);
            border-radius: var(--radius);
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .commission-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .commission-card:hover::before {
            opacity: 1;
        }
        
        .commission-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 35px rgba(255, 215, 0, 0.3);
            border-color: var(--accent-gold);
        }
        
        .commission-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--primary-bg);
            box-shadow: 0 4px 15px var(--shadow-gold);
        }
        
        .commission-card h3 {
            font-size: 1.5rem;
            color: var(--accent-gold);
            margin-bottom: 1rem;
        }
        
        .commission-card p {
            color: var(--text-pale);
            line-height: 1.6;
        }
        
        .hot-tag {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--accent-red);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
        }
        
        /* Promotion Materials */
        .materials-showcase {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }
        
        .materials-content h3 {
            font-size: 1.75rem;
            color: var(--accent-gold);
            margin-bottom: 1.5rem;
        }
        
        .materials-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .material-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            background: rgba(255, 215, 0, 0.05);
            border-left: 3px solid var(--accent-gold);
            border-radius: 6px;
        }
        
        .material-item i {
            color: var(--accent-gold);
            font-size: 1.5rem;
            margin-top: 0.25rem;
        }
        
        .material-item div h4 {
            color: var(--accent-gold);
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        
        .material-item div p {
            color: var(--text-pale);
            font-size: 0.95rem;
        }
        
        .materials-visual {
            position: relative;
        }
        
        .materials-visual img {
            border-radius: var(--radius);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
            border: 2px solid var(--border-gold);
        }
        
        /* News/Articles Section */
        .news-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 3rem;
        }
        
        .news-main {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .news-item {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: var(--radius);
            padding: 1.5rem;
            transition: all 0.3s ease;
            display: flex;
            gap: 1.5rem;
        }
        
        .news-item:hover {
            border-color: var(--accent-gold);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
        }
        
        .news-meta {
            display: flex;
            gap: 1rem;
            align-items: center;
            margin-bottom: 0.75rem;
            font-size: 0.85rem;
            color: var(--text-pale);
        }
        
        .news-category {
            background: var(--accent-gold);
            color: var(--primary-bg);
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-weight: 600;
        }
        
        .news-item h3 {
            font-size: 1.25rem;
            color: var(--text-light);
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }
        
        .news-item h3:hover {
            color: var(--accent-gold);
        }
        
        .news-excerpt {
            color: var(--text-pale);
            font-size: 0.95rem;
            line-height: 1.6;
        }
        
        .news-sidebar {
            position: sticky;
            top: 100px;
            align-self: flex-start;
        }
        
        .sidebar-widget {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-gold);
            border-radius: var(--radius);
            padding: 1.5rem;
        }
        
        .sidebar-widget h3 {
            font-size: 1.25rem;
            color: var(--accent-gold);
            margin-bottom: 1.5rem;
            border-bottom: 2px solid var(--accent-gold);
            padding-bottom: 0.75rem;
        }
        
        .popular-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .popular-item {
            display: flex;
            gap: 1rem;
            padding: 0.75rem;
            background: rgba(255, 215, 0, 0.05);
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .popular-item:hover {
            background: rgba(255, 215, 0, 0.15);
        }
        
        .popular-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent-gold);
            min-width: 30px;
        }
        
        .popular-item h4 {
            font-size: 0.95rem;
            color: var(--text-light);
            line-height: 1.4;
        }
        
        /* Join CTA */
        .join-cta {
            background: linear-gradient(135deg, rgba(211, 47, 47, 0.2) 0%, rgba(255, 215, 0, 0.2) 100%);
            border: 2px solid var(--accent-gold);
            border-radius: var(--radius);
            padding: 3rem;
            text-align: center;
        }
        
        .join-cta h2 {
            font-size: 2rem;
            color: var(--accent-gold);
            margin-bottom: 1rem;
        }
        
        .join-cta p {
            font-size: 1.1rem;
            color: var(--text-pale);
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .join-benefits {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }
        
        .join-benefit {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
        }
        
        .join-benefit i {
            color: var(--accent-gold);
            font-size: 1.25rem;
        }
        
        /* Footer */
        footer {
            background: var(--primary-bg);
            border-top: 2px solid var(--accent-gold);
            padding: 3rem 0 1.5rem;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 2rem;
        }
        
        .footer-about h3 {
            font-size: 1.5rem;
            color: var(--accent-gold);
            margin-bottom: 1rem;
        }
        
        .footer-about p {
            color: var(--text-pale);
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            background: var(--card-bg);
            border: 1px solid var(--border-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-gold);
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            background: var(--accent-gold);
            color: var(--primary-bg);
            transform: translateY(-3px);
        }
        
        .footer-section h4 {
            color: var(--accent-gold);
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }
        
        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .footer-links a {
            color: var(--text-pale);
            font-size: 0.95rem;
        }
        
        .footer-links a:hover {
            color: var(--accent-gold);
            padding-left: 5px;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 215, 0, 0.2);
            color: var(--text-pale);
            font-size: 0.9rem;
        }
        
        .footer-bottom a {
            color: var(--accent-gold);
        }
        
        /* FAB */
        .fab {
            position: fixed;
            left: 1.5rem;
            bottom: 6rem;
            z-index: 999;
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border: 3px solid var(--primary-bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px var(--shadow-gold);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.7;
            animation: float 3s ease-in-out infinite;
        }
        
        .fab:hover {
            opacity: 1;
            transform: scale(1.1) rotate(360deg);
            box-shadow: 0 6px 30px var(--shadow-gold);
        }
        
        .fab i {
            font-size: 1.75rem;
            color: var(--primary-bg);
        }
        
        .fab-notification {
            position: absolute;
            top: 0;
            right: 0;
            width: 16px;
            height: 16px;
            background: var(--accent-red);
            border: 2px solid var(--primary-bg);
            border-radius: 50%;
            animation: blink 1.5s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .materials-showcase {
                grid-template-columns: 1fr;
            }
            
            .news-container {
                grid-template-columns: 1fr;
            }
            
            .news-sidebar {
                position: static;
            }
            
            .footer-content {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--primary-bg);
                flex-direction: column;
                padding: 1.5rem;
                gap: 1rem;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
            }
            
            .nav-links.active {
                display: flex;
            }
            
            .mobile-menu-toggle {
                display: flex;
            }
            
            .nav-cta {
                margin-top: 1rem;
            }
            
            .hero {
                padding: 2rem 0;
            }
            
            .hero-text h1 {
                font-size: 1.75rem;
            }
            
            .hero-cta {
                flex-direction: column;
            }
            
            .section-header h2 {
                font-size: 1.75rem;
            }
            
            .commission-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .fab {
                width: 60px;
                height: 60px;
                left: 1rem;
                bottom: 5rem;
            }
            
            .fab i {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 520px) {
            .container {
                padding: 0 1rem;
            }
            
            .logo {
                font-size: 1rem;
            }
            
            .hero-text h1 {
                font-size: 1.5rem;
            }
            
            .hero-text p {
                font-size: 1rem;
            }
            
            .hero-badges {
                flex-direction: column;
                gap: 0.75rem;
            }
            
            .btn-primary, .btn-secondary {
                width: 100%;
                text-align: center;
            }
            
            section {
                padding: 2.5rem 0;
            }
            
            .section-header h2 {
                font-size: 1.5rem;
            }
            
            .join-cta {
                padding: 2rem 1rem;
            }
            
            .join-benefits {
                flex-direction: column;
                align-items: flex-start;
            }
        }