/* roulang page: index */
:root{
  --bg:#030712;
  --bg-alt:#081229;
  --bg-soft:#0b1a33;
  --surface:rgba(13,25,48,.72);
  --surface-solid:#0d1930;
  --border:rgba(96,165,250,.16);
  --border-strong:rgba(56,189,248,.42);
  --blue:#2563eb;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --text:#f8fafc;
  --muted:#94a3b8;
  --dim:#64748b;
  --lime:#a3e635;
  --gold:#facc15;
  --green:#22c55e;
  --pink:#f43f5e;
  --radius-lg:22px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-lg:0 24px 60px rgba(2,8,23,.72);
  --shadow:0 12px 34px rgba(2,8,23,.55);
  --glow:0 0 26px rgba(56,189,248,.35);
  --glow-strong:0 0 34px rgba(56,189,248,.55);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(37,99,235,.24), transparent 62%),
    radial-gradient(900px 520px at 4% 12%, rgba(6,182,212,.16), transparent 60%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.24;letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
::selection{background:rgba(56,189,248,.35)}
.container{max-width:var(--maxw);padding-left:20px;padding-right:20px}

/* ---------- BUTTONS ---------- */
.btn-glow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  color:#04122b;
  background:linear-gradient(135deg,#38bdf8 0%,#60a5fa 49%,#a3e635 100%);
  box-shadow:0 0 22px rgba(56,189,248,.45),0 10px 26px rgba(2,8,23,.5);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
  white-space:nowrap;
}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.7),0 14px 30px rgba(2,8,23,.55);filter:saturate(1.15);color:#04122b}
.btn-glow:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.78rem 1.32rem;border-radius:999px;
  font-weight:600;font-size:.93rem;color:var(--holo);
  border:1px solid rgba(96,165,250,.4);
  background:rgba(11,26,51,.5);
  transition:.25s ease;
  white-space:nowrap;
}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.14);box-shadow:0 0 18px rgba(56,189,248,.32)}
.btn-line{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.1rem;border-radius:999px;font-size:.86rem;font-weight:600;
  border:1px solid var(--border);color:var(--muted);background:rgba(13,25,48,.55);
  transition:.25s ease;
}
.btn-line:hover{color:#fff;border-color:var(--border-strong);box-shadow:var(--glow)}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  backdrop-filter:blur(18px);
  background:rgba(4,10,24,.72);
  border-bottom:1px solid rgba(96,165,250,.12);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{background:rgba(4,10,24,.94);box-shadow:0 10px 34px rgba(2,8,23,.6)}
.header-inner{display:flex;align-items:center;gap:1.4rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand-mark{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(56,189,248,.28),rgba(37,99,235,.35));
  border:1px solid rgba(96,165,250,.4);
  box-shadow:inset 0 0 18px rgba(56,189,248,.28);
  font-size:1.05rem;
}
.brand-text{display:flex;flex-direction:column;line-height:1.14}
.brand-text b{font-size:.94rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.brand-text em{font-style:normal;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.main-nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav-link{
  position:relative;padding:.56rem .86rem;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--muted);transition:.22s ease;white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:.86rem;right:.86rem;bottom:.24rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--lime));transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.09)}
.nav-link.active{color:#fff}
.nav-link.active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.6rem;margin-left:.6rem}
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);flex-direction:column;justify-content:center;align-items:center;gap:4px;background:rgba(11,26,51,.6)}
.nav-toggle span{display:block;width:17px;height:2px;border-radius:2px;background:var(--holo);transition:.25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;padding:158px 0 76px;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background-image:url('/assets/images/8f65b11c6ae2e674.jpg');
  background-size:cover;background-position:center;
  opacity:.30;
}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,7,18,.82) 0%,rgba(3,7,18,.9) 45%,rgba(3,7,18,.98) 100%),
    radial-gradient(760px 420px at 78% 18%, rgba(37,99,235,.34), transparent 66%);
}
.hero .container{position:relative;z-index:2}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);
  border:1px solid rgba(163,230,53,.35);
  background:rgba(163,230,53,.09);
}
.hero-title{
  margin-top:1.15rem;
  font-size:clamp(1.72rem,4.3vw,3.05rem);
  font-weight:800;line-height:1.18;
  max-width:22ch;
  background:linear-gradient(120deg,#ffffff 12%,#bae6fd 52%,#a3e635 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{
  margin-top:1.15rem;max-width:74ch;color:var(--muted);
  font-size:1.02rem;line-height:1.72;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
.hero-points{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.35rem}
.hero-points li{
  display:inline-flex;align-items:center;gap:.42rem;
  font-size:.84rem;font-weight:600;color:#cbd5e1;
  padding:.38rem .78rem;border-radius:999px;
  border:1px solid var(--border);background:rgba(13,25,48,.55);
}
.hero-points li i{color:var(--cyan);font-size:.78rem}
.hero-strip{
  margin-top:2.4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:rgba(8,18,41,.62);backdrop-filter:blur(12px);overflow:hidden;
}
.hero-strip div{padding:1.25rem 1.1rem;text-align:center}
.hero-strip div+div{border-left:1px solid var(--border)}
.hero-strip b{display:block;font-size:1.5rem;font-weight:800;color:var(--cyan);letter-spacing:-.02em}
.hero-strip span{display:block;margin-top:.22rem;font-size:.78rem;color:var(--muted);letter-spacing:.02em}

/* ---------- FLASH BAR ---------- */
.flashbar{
  position:relative;z-index:3;
  padding:22px 0;
  background:linear-gradient(90deg,rgba(37,99,235,.20),rgba(6,182,212,.14) 52%,rgba(163,230,53,.14));
  border-top:1px solid rgba(56,189,248,.22);
  border-bottom:1px solid rgba(56,189,248,.22);
}
.flashbar-inner{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.flash-left{display:flex;flex-direction:column;gap:.35rem;min-width:250px;flex:1 1 340px}
.flash-pill{
  align-self:flex-start;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#04122b;background:linear-gradient(90deg,#a3e635,#38bdf8);
  padding:.24rem .7rem;border-radius:6px;
}
.flash-text{font-size:.92rem;color:#cbd5e1}
.flash-text strong{color:var(--gold)}
.flash-count{display:flex;align-items:center;gap:.5rem}
.cd-cell{
  min-width:60px;text-align:center;padding:.5rem .55rem;border-radius:12px;
  background:rgba(4,10,24,.76);border:1px solid rgba(56,189,248,.28);
}
.cd-cell b{display:block;font-size:1.28rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cd-cell span{display:block;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- SECTIONS ---------- */
.section{padding:74px 0;position:relative}
.section-alt{background:linear-gradient(180deg,rgba(8,18,41,.65),rgba(3,7,18,0));border-top:1px solid rgba(96,165,250,.09);border-bottom:1px solid rgba(96,165,250,.09)}
.sec-head{max-width:66ch;margin-bottom:2.4rem}
.sec-tag{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);padding:.28rem .7rem;border-radius:6px;
  border:1px solid rgba(56,189,248,.3);background:rgba(56,189,248,.09);margin-bottom:.85rem;
}
.sec-title{font-size:clamp(1.42rem,2.6vw,2.05rem);font-weight:800}
.sec-title span{background:linear-gradient(100deg,#38bdf8,#a3e635);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-desc{margin-top:.85rem;color:var(--muted);font-size:.97rem;line-height:1.72}

/* ---------- GLASS CARD ---------- */
.glass{
  position:relative;height:100%;
  padding:1.6rem 1.45rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.glass:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 22px 46px rgba(2,8,23,.68),var(--glow)}
.glass-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:1.1rem;color:var(--cyan);
  background:linear-gradient(135deg,rgba(56,189,248,.2),rgba(37,99,235,.22));
  border:1px solid rgba(96,165,250,.3);margin-bottom:1rem;
}
.glass h3{font-size:1.06rem;font-weight:700;margin-bottom:.5rem}
.glass p{font-size:.9rem;color:var(--muted);line-height:1.68}

/* ---------- SCENARIO ---------- */
.scenario{
  padding:1.35rem 1.3rem;border-radius:var(--radius-sm);
  border-left:3px solid var(--cyan);
  background:linear-gradient(90deg,rgba(56,189,248,.1),rgba(13,25,48,.42) 45%);
  height:100%;
}
.scenario h4{font-size:.98rem;margin-bottom:.4rem;color:#fff}
.scenario p{font-size:.875rem;color:var(--muted);line-height:1.65}

/* ---------- LIVE CARDS ---------- */
.live-card{
  height:100%;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:rgba(9,19,40,.7);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.live-card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 22px 46px rgba(2,8,23,.68),var(--glow)}
.live-thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.live-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.live-card:hover .live-thumb img{transform:scale(1.05)}
.live-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.05),rgba(3,7,18,.85))}
.live-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .6rem;border-radius:6px;color:#04122b;
  background:linear-gradient(90deg,#a3e635,#38bdf8);
}
.live-body{padding:1.15rem 1.2rem 1.35rem}
.live-body h3{font-size:1.02rem;margin-bottom:.45rem}
.live-body p{font-size:.875rem;color:var(--muted);line-height:1.65}
.live-meta{display:flex;gap:.85rem;margin-top:.9rem;font-size:.76rem;color:var(--dim)}

/* ---------- TIMELINE ---------- */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--cyan),rgba(163,230,53,.5),transparent)}
.tl-item{position:relative;padding-bottom:1.75rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-25px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--bg-alt);border:2px solid var(--cyan);box-shadow:0 0 12px rgba(56,189,248,.6);
}
.tl-time{font-size:.76rem;font-weight:800;letter-spacing:.1em;color:var(--lime);text-transform:uppercase}
.tl-item h4{font-size:1rem;margin:.32rem 0 .38rem}
.tl-item p{font-size:.885rem;color:var(--muted);line-height:1.66}

/* ---------- COMPARE TABLE ---------- */
.cmp-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:rgba(9,19,40,.6)}
.cmp-table{width:100%;border-collapse:collapse;font-size:.9rem}
.cmp-table th,.cmp-table td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid rgba(96,165,250,.12)}
.cmp-table thead th{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:rgba(11,26,51,.75);font-weight:700}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table td:first-child{color:#e2e8f0;font-weight:600}
.cmp-good{color:var(--lime);font-weight:600}
.cmp-bad{color:var(--dim)}

/* ---------- METHOD ARTICLE ---------- */
.method{border-radius:var(--radius-lg);border:1px solid var(--border);background:rgba(9,19,40,.6);padding:clamp(1.6rem,3.4vw,2.7rem)}
.method h2{font-size:clamp(1.35rem,2.5vw,1.92rem);margin-bottom:1rem}
.method .intro{color:var(--muted);font-size:.97rem;line-height:1.78;max-width:80ch}
.method-block{margin-top:1.9rem;padding-left:1.15rem;border-left:3px solid rgba(56,189,248,.45)}
.method-block h3{font-size:1.05rem;margin-bottom:.55rem;color:#e2e8f0}
.method-block p{font-size:.92rem;color:var(--muted);line-height:1.76;max-width:82ch}
.method-block ul{margin-top:.7rem;display:grid;gap:.45rem}
.method-block ul li{font-size:.9rem;color:#cbd5e1;padding-left:1.25rem;position:relative;line-height:1.62}
.method-block ul li::before{content:"›";position:absolute;left:.3rem;top:-1px;color:var(--cyan);font-weight:800}

/* ---------- REWARD ---------- */
.reward{
  position:relative;height:100%;padding:1.7rem 1.5rem;border-radius:var(--radius);
  border:1px solid var(--border);background:rgba(9,19,40,.66);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.reward:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--glow)}
.reward.featured{border-color:rgba(163,230,53,.5);background:linear-gradient(160deg,rgba(163,230,53,.1),rgba(13,25,48,.72))}
.reward-flag{
  position:absolute;top:-11px;right:16px;
  font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.22rem .62rem;border-radius:6px;color:#04122b;background:linear-gradient(90deg,#a3e635,#38bdf8);
}
.reward-val{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.reward-val small{font-size:.9rem;font-weight:700;color:var(--cyan);margin-left:.25rem}
.reward h3{margin-top:.4rem;font-size:1rem}
.reward p{margin-top:.5rem;font-size:.875rem;color:var(--muted);line-height:1.66}
.reward ul{margin-top:1rem;display:grid;gap:.42rem}
.reward ul li{font-size:.86rem;color:#cbd5e1;display:flex;gap:.5rem;align-items:flex-start;line-height:1.55}
.reward ul li i{color:var(--lime);font-size:.76rem;margin-top:.35rem}

/* ---------- STEPS ---------- */
.step{height:100%;padding:1.5rem 1.35rem;border-radius:var(--radius);border:1px solid var(--border);background:rgba(9,19,40,.55);position:relative;transition:.28s ease}
.step:hover{border-color:var(--border-strong);box-shadow:var(--glow);transform:translateY(-4px)}
.step-num{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-weight:800;font-size:.98rem;color:#04122b;
  background:linear-gradient(135deg,#38bdf8,#a3e635);margin-bottom:1rem;
}
.step h3{font-size:1rem;margin-bottom:.45rem}
.step p{font-size:.88rem;color:var(--muted);line-height:1.66}

/* ---------- TIER TABLE ---------- */
.tier{height:100%;padding:1.6rem 1.4rem;border-radius:var(--radius);border:1px solid var(--border);background:rgba(9,19,40,.6);display:flex;flex-direction:column;transition:.28s ease}
.tier:hover{border-color:var(--border-strong);box-shadow:var(--glow)}
.tier.best{border-color:rgba(56,189,248,.55);background:linear-gradient(165deg,rgba(37,99,235,.16),rgba(9,19,40,.7))}
.tier-name{font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.tier-price{margin-top:.6rem;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.tier-price small{display:block;font-size:.76rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:.2rem}
.tier-list{margin:1.1rem 0 1.4rem;display:grid;gap:.5rem;flex:1}
.tier-list li{font-size:.875rem;color:#cbd5e1;display:flex;gap:.55rem;align-items:flex-start;line-height:1.55}
.tier-list li i{margin-top:.35rem;font-size:.72rem;color:var(--cyan)}

/* ---------- REVIEWS ---------- */
.review{height:100%;padding:1.35rem 1.3rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:rgba(9,19,40,.5)}
.review-stars{color:var(--gold);font-size:.8rem;letter-spacing:.12em;margin-bottom:.6rem}
.review p{font-size:.885rem;color:#cbd5e1;line-height:1.68}
.review-who{display:flex;align-items:center;gap:.6rem;margin-top:.95rem}
.review-ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;color:#04122b;background:linear-gradient(135deg,#60a5fa,#a3e635)}
.review-who b{display:block;font-size:.85rem;color:#fff;font-weight:600}
.review-who span{display:block;font-size:.72rem;color:var(--dim)}

/* ---------- CATEGORY MATRIX ---------- */
.cat-card{
  display:block;height:100%;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:rgba(9,19,40,.62);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.cat-card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 22px 46px rgba(2,8,23,.7),var(--glow)}
.cat-thumb{aspect-ratio:16/10;overflow:hidden}
.cat-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat-card:hover .cat-thumb img{transform:scale(1.06)}
.cat-body{padding:1.15rem 1.2rem 1.35rem}
.cat-body h3{font-size:1.02rem;margin-bottom:.42rem}
.cat-body p{font-size:.87rem;color:var(--muted);line-height:1.64}
.cat-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.83rem;font-weight:700;color:var(--cyan)}
.cat-card:hover .cat-more i{transform:translateX(4px)}
.cat-more i{transition:transform .25s ease}

/* ---------- NEWS ---------- */
.news-card{
  height:100%;padding:1.25rem 1.25rem;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(9,19,40,.55);
  transition:.28s ease;display:flex;flex-direction:column;
}
.news-card:hover{border-color:var(--border-strong);box-shadow:var(--glow);transform:translateY(-4px)}
.news-cat{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.news-card h3{font-size:.98rem;margin:.55rem 0 .5rem;line-height:1.45}
.news-card h3 a:hover{color:var(--cyan)}
.news-card p{font-size:.855rem;color:var(--muted);line-height:1.62;flex:1}
.news-meta{margin-top:.9rem;font-size:.74rem;color:var(--dim);display:flex;gap:.8rem;flex-wrap:wrap}
.news-side{padding:1.4rem 1.3rem;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(170deg,rgba(37,99,235,.14),rgba(9,19,40,.6))}
.news-side h3{font-size:1.02rem;margin-bottom:.7rem}
.news-side p{font-size:.875rem;color:var(--muted);line-height:1.68}
.news-empty{padding:2rem;border-radius:var(--radius);border:1px dashed rgba(96,165,250,.3);color:var(--muted);text-align:center;font-size:.9rem}

/* ---------- TRUST ---------- */
.trust-item{display:flex;gap:.85rem;align-items:flex-start;padding:1.1rem 1.15rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:rgba(9,19,40,.5);height:100%}
.trust-item i{font-size:1.05rem;color:var(--cyan);margin-top:.2rem}
.trust-item b{display:block;font-size:.92rem;color:#fff;margin-bottom:.28rem}
.trust-item span{font-size:.845rem;color:var(--muted);line-height:1.6}

/* ---------- FINAL CTA ---------- */
.final-cta{position:relative;overflow:hidden;padding:78px 0}
.final-bg{position:absolute;inset:0;background-image:url('/assets/images/282374261f369d9c.jpg');background-size:cover;background-position:center;opacity:.26}
.final-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.86),rgba(3,7,18,.96))}
.final-cta .container{position:relative;z-index:2;text-align:center}
.final-cta h2{font-size:clamp(1.45rem,3vw,2.15rem);max-width:24ch;margin:0 auto}
.final-cta p{max-width:64ch;margin:1rem auto 0;color:var(--muted);font-size:.97rem;line-height:1.72}
.final-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* ---------- FOOTER ---------- */
.site-footer{background:linear-gradient(180deg,rgba(4,10,24,.9),#020509);border-top:1px solid rgba(96,165,250,.14);padding:60px 0 26px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem}
.footer-brand p{margin-top:1rem;font-size:.87rem;color:var(--muted);line-height:1.7;max-width:38ch}
.footer-col h4{font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}
.footer-col ul{display:grid;gap:.6rem}
.footer-col ul li a{font-size:.875rem;color:var(--muted);transition:.2s ease}
.footer-col ul li a:hover{color:#fff;padding-left:4px}
.footer-bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(96,165,250,.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-bottom p{font-size:.78rem;color:var(--dim)}
.footer-bottom b{color:var(--muted);font-weight:600}

/* ---------- FAB ---------- */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:70;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(7,10,22,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 0 20px rgba(6,182,212,.45),0 10px 24px rgba(2,8,23,.6);
  opacity:.78;
  transition:transform .3s ease,opacity .3s ease,box-shadow .3s ease;
  animation:fabFloat 3.4s ease-in-out infinite;
}
.fab::before{
  content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;
  background:linear-gradient(135deg,#a3e635,#38bdf8,#2563eb);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.fab i{font-size:1.25rem;color:#7dd3fc;transition:transform .45s ease}
.fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 0 34px rgba(6,182,212,.75),0 12px 26px rgba(2,8,23,.6)}
.fab:hover i{transform:rotate(360deg);color:#a3e635}
.fab:active{transform:scale(.94)}
.fab-dot{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px rgba(7,10,22,.9);animation:dotPulse 1.6s ease-in-out infinite}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem}
  .hero{padding-top:140px}
}
@media (max-width:991px){
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    padding:1rem 1.2rem 1.3rem;margin-left:0;
    background:rgba(4,10,24,.97);
    border-bottom:1px solid rgba(96,165,250,.18);
    box-shadow:0 24px 40px rgba(2,8,23,.6);
    display:none;
  }
  .main-nav.open{display:flex}
  .nav-link{padding:.72rem .8rem;font-size:.94rem}
  .nav-toggle{display:flex}
  .header-actions .btn-ghost,.header-actions .btn-glow{padding:.6rem .95rem;font-size:.84rem}
  .hero-strip{grid-template-columns:repeat(2,1fr)}
  .hero-strip div+div{border-left:0;border-top:1px solid var(--border)}
  .hero-strip div:nth-child(odd){border-right:1px solid var(--border)}
  .hero-strip div:nth-child(1),.hero-strip div:nth-child(2){border-top:0}
}
@media (max-width:768px){
  .section{padding:56px 0}
  .hero{padding:126px 0 58px}
  .hero-title{max-width:100%}
  .brand-text em{display:none}
  .brand-text b{font-size:.88rem}
  .flashbar-inner{gap:1.1rem}
  .cd-cell{min-width:52px}
  .footer-grid{grid-template-columns:1fr;gap:1.6rem}
  .fab{left:12px;bottom:88px;width:54px;height:54px}
}
@media (max-width:520px){
  .container{padding-left:16px;padding-right:16px}
  .header-inner{min-height:64px;gap:.6rem}
  .header-actions .btn-ghost{display:none}
  .hero-strip{grid-template-columns:1fr}
  .hero-strip div{border-right:0!important;border-top:1px solid var(--border)}
  .hero-strip div:first-child{border-top:0}
  .hero-lead{font-size:.95rem}
  .flash-count{width:100%;justify-content:space-between}
  .cmp-table th,.cmp-table td{padding:.75rem .7rem;font-size:.82rem}
  .method-block{padding-left:.9rem}
}

/* roulang page: article */
:root{
  --bg:#030712;
  --bg-alt:#081229;
  --bg-soft:#0b1a33;
  --surface:rgba(13,25,48,.72);
  --surface-solid:#0d1930;
  --border:rgba(96,165,250,.16);
  --border-strong:rgba(56,189,248,.42);
  --blue:#2563eb;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --text:#f8fafc;
  --muted:#94a3b8;
  --dim:#64748b;
  --lime:#a3e635;
  --gold:#facc15;
  --green:#22c55e;
  --pink:#f43f5e;
  --radius-lg:22px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-lg:0 24px 60px rgba(2,8,23,.72);
  --shadow:0 12px 34px rgba(2,8,23,.55);
  --glow:0 0 26px rgba(56,189,248,.35);
  --glow-strong:0 0 34px rgba(56,189,248,.55);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(37,99,235,.24), transparent 62%),
    radial-gradient(900px 520px at 4% 12%, rgba(6,182,212,.16), transparent 60%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
p{margin:0 0 1rem}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;color:#fff}
ul{margin:0;padding:0;list-style:none}
.container{max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}
::selection{background:rgba(56,189,248,.35);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ---------- BUTTONS ---------- */
.btn-glow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  color:#04122b;
  background:linear-gradient(135deg,#38bdf8 0%,#60a5fa 49%,#a3e635 100%);
  box-shadow:0 0 22px rgba(56,189,248,.45),0 10px 26px rgba(2,8,23,.5);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
  white-space:nowrap;
}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.7),0 14px 30px rgba(2,8,23,.55);filter:saturate(1.15);color:#04122b}
.btn-glow:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.78rem 1.32rem;border-radius:999px;
  font-weight:600;font-size:.93rem;color:var(--holo);
  border:1px solid rgba(96,165,250,.4);
  background:rgba(11,26,51,.5);
  transition:.25s ease;white-space:nowrap;
}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.14);box-shadow:0 0 18px rgba(56,189,248,.32)}
.btn-line{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.1rem;border-radius:999px;font-size:.86rem;font-weight:600;
  border:1px solid var(--border);color:var(--muted);background:rgba(13,25,48,.55);
  transition:.25s ease;
}
.btn-line:hover{color:#fff;border-color:var(--border-strong);box-shadow:var(--glow)}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  backdrop-filter:blur(18px);
  background:rgba(4,10,24,.72);
  border-bottom:1px solid rgba(96,165,250,.12);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{background:rgba(4,10,24,.94);box-shadow:0 10px 34px rgba(2,8,23,.6)}
.header-inner{display:flex;align-items:center;gap:1.4rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand-mark{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(56,189,248,.28),rgba(37,99,235,.35));
  border:1px solid rgba(96,165,250,.4);
  box-shadow:inset 0 0 18px rgba(56,189,248,.28);
  font-size:1.05rem;color:#e0f2fe;
}
.brand-text{display:flex;flex-direction:column;line-height:1.14}
.brand-text b{font-size:.94rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.brand-text em{font-style:normal;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.main-nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav-link{
  position:relative;padding:.56rem .86rem;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--muted);transition:.22s ease;white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:.86rem;right:.86rem;bottom:.24rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--lime));transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.09)}
.nav-link.active{color:#fff}
.nav-link.active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.6rem;margin-left:.6rem}
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);flex-direction:column;justify-content:center;align-items:center;gap:4px;background:rgba(11,26,51,.6)}
.nav-toggle span{display:block;width:17px;height:2px;border-radius:2px;background:var(--holo);transition:.25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- ARTICLE HERO ---------- */
.art-hero{position:relative;padding:150px 0 58px;overflow:hidden}
.art-hero-bg{
  position:absolute;inset:0;
  background-image:url('/assets/images/8f65b11c6ae2e674.jpg');
  background-size:cover;background-position:center;opacity:.26;
}
.art-hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,7,18,.86) 0%,rgba(3,7,18,.92) 48%,rgba(3,7,18,.99) 100%),
    radial-gradient(720px 420px at 80% 14%, rgba(37,99,235,.32), transparent 66%);
}
.art-hero .container{position:relative;z-index:2}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.82rem;color:var(--dim);margin-bottom:1.2rem}
.crumbs a{color:var(--muted);transition:color .2s ease}
.crumbs a:hover{color:var(--cyan)}
.crumbs i{font-size:.6rem;color:var(--dim)}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(163,230,53,.35);background:rgba(163,230,53,.09);
}
.art-hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2.4rem;align-items:start;margin-top:1.15rem}
.art-title{
  font-size:clamp(1.6rem,3.8vw,2.6rem);
  line-height:1.22;max-width:26ch;
  background:linear-gradient(120deg,#ffffff 12%,#bae6fd 55%,#a3e635 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.art-lead{margin-top:1.1rem;max-width:70ch;color:var(--muted);font-size:1.02rem;line-height:1.72}
.art-meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.4rem}
.tag{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .78rem;border-radius:999px;font-size:.76rem;font-weight:700;
  border:1px solid var(--border);background:rgba(13,25,48,.7);color:var(--muted);
}
.tag-cyan{color:#7dd3fc;border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.1)}
.tag-lime{color:#bef264;border-color:rgba(163,230,53,.38);background:rgba(163,230,53,.1)}
.tag-gold{color:#fde047;border-color:rgba(250,204,21,.38);background:rgba(250,204,21,.1)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}

/* ---------- GLASS CARD / PANELS ---------- */
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.panel{padding:1.5rem}
.panel-title{font-size:1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.55rem}
.panel-title i{color:var(--cyan)}
.fact-row{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;border-bottom:1px dashed rgba(96,165,250,.16);font-size:.9rem}
.fact-row:last-child{border-bottom:0}
.fact-row span:first-child{color:var(--dim)}
.fact-row span:last-child{color:#e2e8f0;font-weight:600;text-align:right}

/* ---------- SECTIONS ---------- */
.section{padding:66px 0;position:relative}
.section-alt{background:linear-gradient(180deg,rgba(8,18,41,.62) 0%,rgba(3,7,18,.15) 100%);border-top:1px solid rgba(96,165,250,.09);border-bottom:1px solid rgba(96,165,250,.09)}
.sec-head{max-width:74ch;margin-bottom:2.1rem}
.sec-head h2{font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.3}
.sec-head p{margin-top:.85rem;color:var(--muted);line-height:1.7}
.eyebrow{
  display:inline-block;margin-bottom:.7rem;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
}

/* ---------- STATS ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.stat{
  padding:1.15rem 1.25rem;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(13,25,48,.86),rgba(8,18,41,.5));
  border:1px solid var(--border);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.stat:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow)}
.stat b{display:block;font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.03em}
.stat span{display:block;margin-top:.3rem;font-size:.8rem;color:var(--muted);line-height:1.5}

/* ---------- GRIDS & CARDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.card{
  border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(13,25,48,.9),rgba(6,14,32,.72));
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--glow)}
.card-media{position:relative;aspect-ratio:16/9;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.06)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.05) 40%,rgba(3,7,18,.85) 100%)}
.card-body{padding:1.15rem 1.25rem 1.35rem}
.card-body h3{font-size:1.02rem;line-height:1.4;margin-bottom:.55rem}
.card-body p{color:var(--muted);font-size:.9rem;line-height:1.68;margin-bottom:0}
.badge-float{
  position:absolute;top:.7rem;left:.7rem;z-index:3;
  padding:.28rem .66rem;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#04122b;background:linear-gradient(135deg,#a3e635,#38bdf8);
}

/* ---------- ARTICLE BODY ---------- */
.article-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem}
.article-body{
  padding:2rem 2.1rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg,rgba(13,25,48,.82),rgba(6,14,32,.6));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  font-size:1.03rem;
  color:#cbd5e1;
}
.article-body h2{font-size:1.4rem;margin:1.9rem 0 .9rem;line-height:1.35}
.article-body h3{font-size:1.14rem;margin:1.5rem 0 .7rem;color:#e0f2fe}
.article-body h2:first-child,.article-body h3:first-child{margin-top:0}
.article-body p{line-height:1.75;margin-bottom:1.05rem}
.article-body ul,.article-body ol{margin:0 0 1.15rem;padding-left:0}
.article-body ul li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;line-height:1.7}
.article-body ul li::before{
  content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:0;top:.15rem;color:var(--cyan);font-size:.85rem;
}
.article-body ol{counter-reset:li;list-style:none}
.article-body ol li{position:relative;counter-increment:li;padding-left:2rem;margin-bottom:.6rem}
.article-body ol li::before{
  content:counter(li);position:absolute;left:0;top:.1rem;
  width:1.4rem;height:1.4rem;border-radius:8px;display:grid;place-items:center;
  font-size:.74rem;font-weight:800;color:#04122b;background:linear-gradient(135deg,#38bdf8,#a3e635);
}
.article-body a{color:var(--cyan);border-bottom:1px solid rgba(56,189,248,.4);transition:.2s ease}
.article-body a:hover{color:#fff;border-color:#fff}
.article-body img{border-radius:var(--radius);margin:1.2rem 0;border:1px solid var(--border)}
.article-body blockquote{
  margin:1.4rem 0;padding:1rem 1.2rem;
  border-left:3px solid var(--cyan);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(56,189,248,.08);color:#e0f2fe;font-style:normal;
}
.article-body table{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.92rem;display:block;overflow-x:auto}
.article-body th,.article-body td{padding:.72rem .9rem;border-bottom:1px solid rgba(96,165,250,.18);text-align:left;white-space:nowrap}
.article-body th{color:#fff;background:rgba(56,189,248,.1);font-weight:700}
.article-body strong{color:#fff}
.article-empty{padding:2.4rem;text-align:center;border-radius:var(--radius-lg);border:1px dashed var(--border-strong);background:rgba(13,25,48,.6)}
.article-empty h2{font-size:1.25rem;margin-bottom:.7rem}
.article-empty p{color:var(--muted);max-width:60ch;margin:0 auto 1.3rem}

/* ---------- LIST BLOCK ---------- */
.bullet-list li{
  position:relative;padding-left:1.7rem;margin-bottom:.85rem;color:var(--muted);line-height:1.7;font-size:.94rem;
}
.bullet-list li i{position:absolute;left:0;top:.28rem;color:var(--cyan);font-size:.82rem}
.bullet-list strong{color:#fff}

/* ---------- PROGRESS ---------- */
.bar-row{margin-bottom:1.15rem}
.bar-row .bar-top{display:flex;justify-content:space-between;font-size:.88rem;color:#e2e8f0;margin-bottom:.45rem}
.bar-row .bar-top span:last-child{color:var(--cyan);font-weight:700}
.bar{height:8px;border-radius:999px;background:rgba(148,163,184,.16);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--lime))}

/* ---------- PAYMENTS ---------- */
.pay-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-top:1.4rem}
.pay{
  padding:.9rem 1rem;border-radius:var(--radius-sm);text-align:center;
  border:1px solid var(--border);background:rgba(8,18,41,.7);
  font-size:.84rem;font-weight:700;color:#e2e8f0;
  transition:.25s ease;
}
.pay i{display:block;font-size:1.15rem;margin-bottom:.45rem;color:var(--cyan)}
.pay:hover{border-color:var(--border-strong);box-shadow:var(--glow);transform:translateY(-3px)}

/* ---------- STEPS ---------- */
.step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;counter-reset:step}
.step{
  position:relative;padding:1.5rem 1.3rem 1.3rem;border-radius:var(--radius);
  background:rgba(8,18,41,.66);border:1px solid var(--border);
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:-.85rem;left:1.2rem;
  padding:.2rem .6rem;border-radius:8px;font-size:.74rem;font-weight:800;
  color:#04122b;background:linear-gradient(135deg,#a3e635,#38bdf8);
}
.step h3{font-size:.98rem;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.88rem;margin-bottom:0;line-height:1.66}

/* ---------- HIGHLIGHT SPLIT ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.2rem;align-items:center}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media .badge-float{top:1rem;left:1rem}

/* ---------- FAQ ---------- */
.faq-item{
  border:1px solid var(--border);border-radius:var(--radius);
  background:rgba(8,18,41,.66);margin-bottom:.8rem;overflow:hidden;transition:.25s ease;
}
.faq-item[open]{border-color:var(--border-strong);box-shadow:var(--glow)}
.faq-item summary{
  list-style:none;cursor:pointer;
  padding:1.05rem 3rem 1.05rem 1.2rem;position:relative;
  font-weight:700;font-size:.98rem;color:#fff;line-height:1.5;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\2b";position:absolute;right:1.15rem;top:50%;transform:translateY(-50%);
  font-size:1.1rem;font-weight:700;color:var(--cyan);transition:transform .25s ease;
}
.faq-item[open] summary::after{content:"\2212";transform:translateY(-50%) rotate(180deg)}
.faq-item .faq-answer{padding:0 1.2rem 1.2rem;color:var(--muted);font-size:.93rem;line-height:1.72}

/* ---------- RELATED POSTS ---------- */
.post-card{
  display:block;padding:1.25rem 1.3rem;border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(13,25,48,.88),rgba(6,14,32,.66));
  border:1px solid var(--border);transition:.28s ease;
}
.post-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow)}
.post-card h3{font-size:.98rem;line-height:1.45;margin-bottom:.5rem}
.post-card p{color:var(--muted);font-size:.86rem;margin-bottom:.75rem;line-height:1.65}
.post-more{font-size:.82rem;font-weight:700;color:var(--cyan);display:inline-flex;align-items:center;gap:.4rem}

/* ---------- CTA ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  padding:2.6rem 2.2rem;
  border:1px solid var(--border-strong);
  background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(6,182,212,.14) 55%,rgba(163,230,53,.12));
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.cta-band h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:.8rem}
.cta-band p{color:#cbd5e1;max-width:66ch;margin:0 auto 1.5rem}
.cta-band .hero-actions{justify-content:center}

/* ---------- FAB ---------- */
.fab-support{
  position:fixed;left:1rem;bottom:6rem;z-index:50;
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:52px;padding:.7rem 1.05rem;border-radius:999px;
  background:rgba(7,7,13,.82);backdrop-filter:blur(14px);
  border:1px solid rgba(56,189,248,.55);
  color:#e0f2fe;font-size:.84rem;font-weight:700;
  box-shadow:0 0 20px rgba(6,182,212,.45);
  opacity:.85;
  animation:fabPulse 2.8s ease-in-out infinite;
  transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;
}
.fab-support i{color:var(--lime);font-size:1rem}
.fab-support::after{
  content:"";position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 2px rgba(3,7,18,.9);
}
.fab-support:hover{opacity:1;transform:scale(1.06);box-shadow:0 0 32px rgba(56,189,248,.7)}
.fab-support:active{transform:scale(.96)}
@keyframes fabPulse{0%,100%{box-shadow:0 0 18px rgba(6,182,212,.38)}50%{box-shadow:0 0 30px rgba(56,189,248,.65)}}

/* ---------- FOOTER ---------- */
.site-footer{
  margin-top:2rem;padding:3.2rem 0 1.6rem;
  background:linear-gradient(180deg,rgba(3,7,18,.4),rgba(4,10,24,.96));
  border-top:1px solid rgba(96,165,250,.14);
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.footer-brand .brand{margin-bottom:1rem}
.footer-brand p{color:var(--dim);font-size:.88rem;line-height:1.72;max-width:44ch}
.footer-col h4{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:#e2e8f0;margin-bottom:1rem}
.footer-col li{margin-bottom:.6rem}
.footer-col a{color:var(--dim);font-size:.88rem;transition:.2s ease}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{
  margin-top:2.4rem;padding-top:1.3rem;
  border-top:1px solid rgba(96,165,250,.12);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
}
.footer-bottom p{margin:0;color:var(--dim);font-size:.82rem}
.footer-bottom b{color:#cbd5e1}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .art-hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step-list{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  .split{grid-template-columns:1fr;gap:1.6rem}
}
@media (max-width:768px){
  .header-inner{flex-wrap:wrap;min-height:66px;padding-top:.6rem;padding-bottom:.6rem}
  .main-nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:.25rem;margin:.6rem 0 0;padding:.7rem;border-radius:var(--radius);
    background:rgba(6,14,32,.96);border:1px solid var(--border);
  }
  .main-nav.open{display:flex}
  .nav-link{padding:.72rem .8rem}
  .nav-link::after{display:none}
  .nav-link.active{background:rgba(56,189,248,.14);color:#fff}
  .header-actions{margin-left:auto}
  .nav-toggle{display:flex}
  .art-hero{padding:132px 0 46px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .article-body{padding:1.4rem 1.15rem}
  .section{padding:52px 0}
  .cta-band{padding:2rem 1.3rem}
  .fab-support span{display:none}
  .fab-support{padding:.85rem;border-radius:50%}
}
@media (max-width:520px){
  .container{padding-left:16px;padding-right:16px}
  .stat-strip{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .brand-text b{font-size:.86rem}
  .brand-text em{font-size:.6rem;letter-spacing:.1em}
  .hero-actions .btn-glow,.hero-actions .btn-ghost{width:100%;justify-content:center}
  .pay-grid{grid-template-columns:1fr}
  .art-title{font-size:1.55rem}
}

/* roulang page: category1 */
:root{
  --bg:#030712;
  --bg-alt:#081229;
  --bg-soft:#0b1a33;
  --surface:rgba(13,25,48,.72);
  --surface-solid:#0d1930;
  --border:rgba(96,165,250,.16);
  --border-strong:rgba(56,189,248,.42);
  --blue:#2563eb;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --text:#f8fafc;
  --muted:#94a3b8;
  --dim:#64748b;
  --lime:#a3e635;
  --gold:#facc15;
  --green:#22c55e;
  --pink:#f43f5e;
  --radius-lg:22px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-lg:0 24px 60px rgba(2,8,23,.72);
  --shadow:0 12px 34px rgba(2,8,23,.55);
  --glow:0 0 26px rgba(56,189,248,.35);
  --glow-strong:0 0 34px rgba(56,189,248,.55);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(37,99,235,.24), transparent 62%),
    radial-gradient(900px 520px at 4% 12%, rgba(6,182,212,.16), transparent 60%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.24;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
[id]{scroll-margin-top:96px}
.container{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}

/* ---------- BUTTONS ---------- */
.btn-glow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  color:#04122b;
  background:linear-gradient(135deg,#38bdf8 0%,#60a5fa 49%,#a3e635 100%);
  box-shadow:0 0 22px rgba(56,189,248,.45),0 10px 26px rgba(2,8,23,.5);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
  white-space:nowrap;
}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.7),0 14px 30px rgba(2,8,23,.55);filter:saturate(1.15);color:#04122b}
.btn-glow:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.78rem 1.32rem;border-radius:999px;
  font-weight:600;font-size:.93rem;color:var(--holo);
  border:1px solid rgba(96,165,250,.4);
  background:rgba(11,26,51,.5);
  transition:.25s ease;
  white-space:nowrap;
}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.14);box-shadow:0 0 18px rgba(56,189,248,.32)}
.btn-line{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.1rem;border-radius:999px;font-size:.86rem;font-weight:600;
  border:1px solid var(--border);color:var(--muted);background:rgba(13,25,48,.55);
  transition:.25s ease;
}
.btn-line:hover{color:#fff;border-color:var(--border-strong);box-shadow:var(--glow)}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  backdrop-filter:blur(18px);
  background:rgba(4,10,24,.72);
  border-bottom:1px solid rgba(96,165,250,.12);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{background:rgba(4,10,24,.94);box-shadow:0 10px 34px rgba(2,8,23,.6)}
.header-inner{display:flex;align-items:center;gap:1.4rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand-mark{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(56,189,248,.28),rgba(37,99,235,.35));
  border:1px solid rgba(96,165,250,.4);
  box-shadow:inset 0 0 18px rgba(56,189,248,.28);
  font-size:1.05rem;
}
.brand-text{display:flex;flex-direction:column;line-height:1.14}
.brand-text b{font-size:.94rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.brand-text em{font-style:normal;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.main-nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav-link{
  position:relative;padding:.56rem .86rem;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--muted);transition:.22s ease;white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:.86rem;right:.86rem;bottom:.24rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--lime));transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.09)}
.nav-link.active{color:#fff}
.nav-link.active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.6rem;margin-left:.6rem}
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);flex-direction:column;justify-content:center;align-items:center;gap:4px;background:rgba(11,26,51,.6)}
.nav-toggle span{display:block;width:17px;height:2px;border-radius:2px;background:var(--holo);transition:.25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- HERO DANH MỤC ---------- */
.cat-hero{position:relative;padding:152px 0 70px;overflow:hidden}
.cat-hero-bg{
  position:absolute;inset:0;
  background-image:url('/assets/images/282374261f369d9c.jpg');
  background-size:cover;background-position:center;
  opacity:.26;
}
.cat-hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,7,18,.86) 0%,rgba(3,7,18,.94) 52%,rgba(3,7,18,1) 100%),
    radial-gradient(760px 440px at 82% 16%, rgba(37,99,235,.34), transparent 66%);
}
.cat-hero .container{position:relative;z-index:2}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.8rem;color:var(--dim);margin-bottom:1.15rem}
.crumb a{color:var(--muted);transition:.2s}
.crumb a:hover{color:var(--cyan)}
.crumb i{font-size:.62rem;color:var(--dim)}
.cat-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:start}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(163,230,53,.35);background:rgba(163,230,53,.09);
}
.cat-hero h1{
  margin-top:1.15rem;
  font-size:clamp(1.7rem,4vw,2.85rem);
  line-height:1.18;
  max-width:24ch;
  background:linear-gradient(120deg,#ffffff 12%,#bae6fd 54%,#a3e635 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cat-hero .lead{margin-top:1.15rem;max-width:70ch;color:var(--muted);font-size:1.01rem;line-height:1.72}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
.hero-points{display:grid;gap:.75rem;margin-top:1.9rem}
.hero-points li{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;color:var(--muted)}
.hero-points i{color:var(--cyan);margin-top:.3rem;font-size:.82rem}

.board{
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  padding:22px;backdrop-filter:blur(14px);
  box-shadow:var(--shadow-lg),var(--glow);
}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:14px;border-bottom:1px solid var(--border)}
.board-title{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.55rem}
.board-title i{color:var(--cyan)}
.live-pill{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime);padding:.3rem .6rem;border-radius:999px;background:rgba(163,230,53,.1);border:1px solid rgba(163,230,53,.28);
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(163,230,53,.9);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.board-list{margin-top:6px}
.board-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:12px 0;border-bottom:1px dashed rgba(96,165,250,.16);font-size:.9rem}
.board-row:last-child{border-bottom:0}
.board-row span{color:var(--muted)}
.board-row b{color:#fff;font-weight:700;white-space:nowrap}
.board-row b.up{color:var(--lime)}
.board-row b.down{color:var(--pink)}
.board-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:.78rem;color:var(--dim);line-height:1.62}

/* ---------- SECTION BASE ---------- */
.section{padding:74px 0;position:relative}
.section.tight{padding:40px 0}
.section.alt{
  background:linear-gradient(180deg,rgba(8,18,41,.72),rgba(3,7,18,.34));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.section-head{max-width:800px;margin-bottom:38px}
.section-head h2{font-size:clamp(1.4rem,2.7vw,2.05rem)}
.section-head p{margin-top:.9rem;color:var(--muted);font-size:.96rem;line-height:1.7}
.kicker{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:.85rem;
}

/* ---------- STATS ---------- */
.stats-section{padding:38px 0 0}
.stats-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(96,165,250,.18);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.stat{background:rgba(6,14,32,.9);padding:24px 22px}
.stat b{
  display:block;font-size:1.65rem;font-weight:800;line-height:1.1;
  background:linear-gradient(120deg,#ffffff,#38bdf8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;margin-top:.4rem;font-size:.82rem;color:var(--muted);line-height:1.5}

/* ---------- FEATURE GRID ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.fcard{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.fcard::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(56,189,248,.13),transparent 58%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.fcard:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow),var(--glow)}
.fcard:hover::before{opacity:1}
.fcard .ico{
  position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(56,189,248,.12);border:1px solid var(--border);color:var(--cyan);font-size:1.05rem;
}
.fcard h3{position:relative;font-size:1.05rem;margin:1rem 0 .55rem}
.fcard p{position:relative;color:var(--muted);font-size:.92rem;line-height:1.68}

/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.split-media{position:relative}
.split-media img{border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.split-media .cap{
  position:absolute;left:14px;bottom:14px;right:14px;
  background:rgba(3,7,18,.82);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.6rem .8rem;font-size:.76rem;color:var(--muted);backdrop-filter:blur(8px);
}
.tick{display:flex;gap:1rem;padding:15px 0;border-bottom:1px solid rgba(96,165,250,.12)}
.tick:last-child{border-bottom:0}
.tick .num{
  flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;color:#04122b;background:linear-gradient(135deg,#38bdf8,#a3e635);
}
.tick h4{font-size:.99rem;margin-bottom:.22rem}
.tick p{font-size:.9rem;color:var(--muted);line-height:1.65}

/* ---------- SCENES ---------- */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scene{
  background:linear-gradient(180deg,rgba(13,25,48,.92),rgba(6,14,32,.88));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.scene:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow),var(--glow)}
.scene .tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:999px;color:var(--cyan);background:rgba(56,189,248,.12);border:1px solid var(--border);
}
.scene h3{font-size:1.02rem;margin:1rem 0 .55rem}
.scene p{font-size:.9rem;color:var(--muted);line-height:1.68}
.scene .meta{margin-top:1rem;padding-top:.85rem;border-top:1px dashed rgba(96,165,250,.2);font-size:.8rem;color:var(--dim)}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:rgba(6,14,32,.72)}
table.kb{width:100%;border-collapse:collapse;min-width:660px}
table.kb th{
  background:rgba(37,99,235,.18);color:#fff;text-align:left;
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 18px;border-bottom:1px solid var(--border);white-space:nowrap;
}
table.kb td{padding:15px 18px;border-bottom:1px solid rgba(96,165,250,.1);font-size:.9rem;color:var(--muted);line-height:1.6}
table.kb td:first-child{color:#fff;font-weight:600;white-space:nowrap}
table.kb tr:last-child td{border-bottom:0}
table.kb tbody tr{transition:background .22s ease}
table.kb tbody tr:hover{background:rgba(56,189,248,.06)}
.pill{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.74rem;font-weight:600}
.pill.cy{color:var(--cyan);background:rgba(56,189,248,.12);border:1px solid var(--border)}
.pill.li{color:var(--lime);background:rgba(163,230,53,.1);border:1px solid rgba(163,230,53,.28)}
.pill.gd{color:var(--gold);background:rgba(250,204,21,.1);border:1px solid rgba(250,204,21,.28)}

/* ---------- TIMELINE ---------- */
.timeline{position:relative;padding-left:28px;margin-top:8px}
.timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--cyan),rgba(56,189,248,0))}
.tl-item{position:relative;padding:0 0 28px 6px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-27px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--cyan);box-shadow:0 0 12px rgba(56,189,248,.6);
}
.tl-item time{font-size:.76rem;font-weight:700;letter-spacing:.08em;color:var(--cyan)}
.tl-item h4{font-size:1rem;margin:.35rem 0 .3rem}
.tl-item p{font-size:.9rem;color:var(--muted);line-height:1.66}

/* ---------- WHO ---------- */
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.who{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:22px;transition:.26s ease;
}
.who:hover{border-color:var(--border-strong);box-shadow:var(--glow);transform:translateY(-3px)}
.who i{color:var(--holo);font-size:1.05rem}
.who h4{font-size:.96rem;margin:.8rem 0 .4rem}
.who p{font-size:.86rem;color:var(--muted);line-height:1.62}

/* ---------- FAQ ---------- */
.faq{max-width:900px}
.faq details{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  margin-bottom:12px;overflow:hidden;transition:border-color .25s ease;
}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.97rem;font-weight:600;color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--cyan);font-size:.8rem;
  transition:transform .25s ease;flex:0 0 auto;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 20px 18px;color:var(--muted);font-size:.9rem;line-height:1.72}

/* ---------- CTA ---------- */
.cta-band{
  position:relative;overflow:hidden;
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(6,14,32,.92) 62%);
  padding:46px;box-shadow:var(--shadow-lg);
}
.cta-band::after{
  content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.3),transparent 68%);
}
.cta-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center}
.cta-grid h2{font-size:clamp(1.35rem,2.6vw,1.95rem)}
.cta-grid p{margin-top:.9rem;color:var(--muted);font-size:.95rem;line-height:1.7}
.code-form{display:flex;gap:.65rem;flex-wrap:wrap}
.code-form input{
  flex:1;min-width:200px;padding:.88rem 1.05rem;border-radius:12px;
  border:1px solid var(--border);background:rgba(3,7,18,.72);color:#fff;font-size:.95rem;
  transition:border-color .22s ease,box-shadow .22s ease;
}
.code-form input::placeholder{color:var(--dim)}
.code-form input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
.form-note{margin-top:.85rem;font-size:.8rem;color:var(--dim);line-height:1.6}
.form-msg{margin-top:.9rem;font-size:.88rem;color:var(--lime);display:none}
.form-msg.show{display:block}
.cta-list{display:grid;gap:.7rem;margin-top:1.3rem}
.cta-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.cta-list i{color:var(--lime);margin-top:.3rem;font-size:.78rem}

/* ---------- FOOTER ---------- */
.site-footer{
  margin-top:24px;padding:58px 0 26px;
  background:linear-gradient(180deg,rgba(4,10,24,.6),rgba(2,5,14,.98));
  border-top:1px solid var(--border);
}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:34px}
.footer-brand p{margin-top:1.05rem;color:var(--muted);font-size:.89rem;line-height:1.7;max-width:44ch}
.footer-col h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--holo);margin-bottom:1rem}
.footer-col li{margin-bottom:.62rem}
.footer-col a{font-size:.89rem;color:var(--muted);transition:.22s ease}
.footer-col a:hover{color:#fff;padding-left:4px}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(96,165,250,.12);
  font-size:.81rem;color:var(--dim);
}
.footer-bottom b{color:var(--muted)}

/* ---------- FAB ---------- */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:50;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.72rem 1.1rem;border-radius:999px;
  background:
    linear-gradient(rgba(7,7,13,.88),rgba(7,7,13,.88)) padding-box,
    linear-gradient(135deg,var(--cyan),var(--lime)) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(14px);
  box-shadow:0 0 20px rgba(6,182,212,.45);
  color:#dbeafe;font-size:.85rem;font-weight:600;
  opacity:.8;transition:opacity .26s ease,transform .26s ease,box-shadow .26s ease;
  min-height:48px;
}
.fab:hover{opacity:1;transform:translateY(-3px);box-shadow:0 0 32px rgba(6,182,212,.7)}
.fab:active{transform:scale(.96)}
.fab .fab-ico{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(56,189,248,.3),rgba(163,230,53,.24));
  color:#e6f9ff;animation:pulseIcon 2.4s infinite;
}
.fab .dot{
  position:absolute;top:7px;right:9px;width:9px;height:9px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 10px rgba(244,63,94,.9);animation:blink 1.5s infinite;
}
@keyframes pulseIcon{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.45)}50%{box-shadow:0 0 0 9px rgba(56,189,248,0)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .cat-hero-grid{grid-template-columns:1fr;gap:34px}
  .split{grid-template-columns:1fr;gap:30px}
  .cta-grid{grid-template-columns:1fr;gap:28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .cta-band{padding:36px}
}
@media (max-width:1024px){
  .header-inner{min-height:64px;gap:.9rem}
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;top:64px;left:0;right:0;z-index:70;
    flex-direction:column;align-items:stretch;gap:.15rem;margin:0;
    padding:.85rem 20px 1.2rem;
    background:rgba(4,10,24,.985);
    border-bottom:1px solid var(--border);
    box-shadow:0 22px 40px rgba(2,8,23,.6);
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s ease,opacity .28s ease,visibility .28s ease;
  }
  .main-nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav-link{padding:.78rem .7rem;font-size:.95rem;border-radius:12px}
  .nav-link::after{display:none}
  .nav-link.active{background:rgba(56,189,248,.1);color:#fff}
  .header-actions{margin-left:auto}
  .cat-hero{padding:124px 0 58px}
}
@media (max-width:900px){
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .scene-grid{grid-template-columns:1fr}
  .who-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .section{padding:56px 0}
  .section.tight{padding:32px 0}
  .feature-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-brand p{max-width:100%}
}
@media (max-width:560px){
  body{font-size:15.5px}
  .cat-hero{padding:112px 0 48px}
  .brand-text em{display:none}
  .brand-mark{width:36px;height:36px;border-radius:11px}
  .brand-text b{font-size:.86rem}
  .btn-ghost,.btn-glow{padding:.6rem .95rem;font-size:.83rem}
  .header-actions{gap:.4rem}
  .hero-actions .btn-glow,.hero-actions .btn-ghost{width:100%;justify-content:center}
  .cta-band{padding:26px 20px}
  .who-grid{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:1fr}
  .fab{bottom:84px;left:12px;padding:.62rem .9rem;font-size:.8rem}
}

/* roulang page: category2 */
:root{
  --bg:#030712;
  --bg-alt:#081229;
  --bg-soft:#0b1a33;
  --surface:rgba(13,25,48,.72);
  --surface-solid:#0d1930;
  --border:rgba(96,165,250,.16);
  --border-strong:rgba(56,189,248,.42);
  --blue:#2563eb;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --text:#f8fafc;
  --muted:#94a3b8;
  --dim:#64748b;
  --lime:#a3e635;
  --gold:#facc15;
  --green:#22c55e;
  --pink:#f43f5e;
  --radius-lg:22px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-lg:0 24px 60px rgba(2,8,23,.72);
  --shadow:0 12px 34px rgba(2,8,23,.55);
  --glow:0 0 26px rgba(56,189,248,.35);
  --glow-strong:0 0 34px rgba(56,189,248,.55);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(37,99,235,.24), transparent 62%),
    radial-gradient(900px 520px at 4% 12%, rgba(6,182,212,.16), transparent 60%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.26;font-weight:800;letter-spacing:-.015em}
p{margin:0}
button{cursor:pointer;border:0;background:none;font:inherit;color:inherit}
input{font:inherit}
::selection{background:rgba(56,189,248,.35);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.container{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}

/* ---------- BUTTONS ---------- */
.btn-glow{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  color:#04122b;
  background:linear-gradient(135deg,#38bdf8 0%,#60a5fa 49%,#a3e635 100%);
  box-shadow:0 0 22px rgba(56,189,248,.45),0 10px 26px rgba(2,8,23,.5);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
  white-space:nowrap;
}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.7),0 14px 30px rgba(2,8,23,.55);filter:saturate(1.15);color:#04122b}
.btn-glow:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.32rem;border-radius:999px;
  font-weight:600;font-size:.93rem;color:var(--holo);
  border:1px solid rgba(96,165,250,.4);
  background:rgba(11,26,51,.5);
  transition:.25s ease;white-space:nowrap;
}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.14);box-shadow:0 0 18px rgba(56,189,248,.32)}
.btn-line{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.1rem;border-radius:999px;font-size:.86rem;font-weight:600;
  border:1px solid var(--border);color:var(--muted);background:rgba(13,25,48,.55);
  transition:.25s ease;
}
.btn-line:hover{color:#fff;border-color:var(--border-strong);box-shadow:var(--glow)}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(4,10,24,.72);
  border-bottom:1px solid rgba(96,165,250,.12);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{background:rgba(4,10,24,.94);box-shadow:0 10px 34px rgba(2,8,23,.6)}
.header-inner{display:flex;align-items:center;gap:1.2rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand-mark{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(56,189,248,.28),rgba(37,99,235,.35));
  border:1px solid rgba(96,165,250,.4);
  box-shadow:inset 0 0 18px rgba(56,189,248,.28);
  font-size:1.05rem;color:#e0f2fe;
}
.brand-text{display:flex;flex-direction:column;line-height:1.14}
.brand-text b{font-size:.94rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.brand-text em{font-style:normal;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.main-nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav-link{
  position:relative;padding:.56rem .86rem;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--muted);transition:.22s ease;white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:.86rem;right:.86rem;bottom:.24rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--lime));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.09)}
.nav-link.active{color:#fff}
.nav-link.active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.6rem;margin-left:.6rem}
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);
  flex-direction:column;justify-content:center;align-items:center;gap:4px;
  background:rgba(11,26,51,.6);
}
.nav-toggle span{display:block;width:17px;height:2px;border-radius:2px;background:var(--holo);transition:.25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;padding:152px 0 72px;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.30;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(56,189,248,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.05) 1px,transparent 1px);
  background-size:56px 56px;
}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,7,18,.86) 0%,rgba(3,7,18,.92) 46%,rgba(3,7,18,.99) 100%),
    radial-gradient(760px 420px at 78% 16%, rgba(37,99,235,.34), transparent 66%);
}
.hero .container{position:relative;z-index:2}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(163,230,53,.35);background:rgba(163,230,53,.09);
}
.hero-cat-inner{display:grid;grid-template-columns:1.4fr .85fr;gap:26px;align-items:start}
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.hero-main-card{padding:34px 32px;border-radius:var(--radius-lg)}
.hero-title{
  margin-top:1.05rem;
  font-size:clamp(1.7rem,4.1vw,2.85rem);
  line-height:1.18;font-weight:800;
  background:linear-gradient(120deg,#ffffff 14%,#bae6fd 54%,#a3e635 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{margin-top:1.05rem;max-width:70ch;color:var(--muted);font-size:1rem;line-height:1.72}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.hero-mini-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid rgba(96,165,250,.14);
}
.hero-mini-stats strong{display:block;font-size:1.28rem;font-weight:800;color:#fff;line-height:1.2}
.hero-mini-stats span{display:block;font-size:.76rem;color:var(--dim);margin-top:.25rem;line-height:1.45}
.hero-side{display:grid;gap:20px}
.side-card{padding:22px 22px 24px;border-radius:var(--radius)}
.side-card--top{margin-right:22px}
.side-card--bottom{margin-left:22px;border-color:rgba(163,230,53,.28)}
.side-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.95rem}
.side-ico{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:.92rem;
  background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.34);color:var(--cyan);
}
.sidehead-lime .side-ico{background:rgba(163,230,53,.13);border-color:rgba(163,230,53,.34);color:var(--lime)}
.side-head h3{font-size:.98rem;letter-spacing:-.01em}
.side-list li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px dashed rgba(96,165,250,.14);
  font-size:.86rem;color:var(--muted);
}
.side-list li:last-child{border-bottom:0;padding-bottom:0}
.side-list b{color:#e2e8f0;font-weight:700;text-align:right}
.side-note{margin-top:.85rem;font-size:.82rem;color:var(--dim);line-height:1.6}

/* ---------- SECTIONS ---------- */
.section{padding:66px 0;position:relative}
.section-alt{
  background:linear-gradient(180deg,rgba(8,18,41,.72),rgba(3,7,18,.2));
  border-top:1px solid rgba(96,165,250,.1);
  border-bottom:1px solid rgba(96,165,250,.1);
}
.section-head{max-width:780px;margin-bottom:34px}
.tag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:.85rem;
}
.section-head h2{font-size:clamp(1.35rem,2.7vw,2.05rem);color:#fff}
.section-head p{margin-top:.75rem;color:var(--muted);font-size:.98rem;line-height:1.72}
.section-head--tight{max-width:640px}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* stat cards */
.stat-card{padding:24px 22px;border-radius:var(--radius);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.stat-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow)}
.stat-ico{font-size:1.15rem;color:var(--cyan);margin-bottom:.85rem}
.stat-value{font-size:1.75rem;font-weight:800;line-height:1.15;color:#fff}
.stat-label{margin-top:.3rem;font-size:.84rem;font-weight:600;color:var(--holo)}
.stat-desc{margin-top:.6rem;font-size:.85rem;color:var(--muted);line-height:1.62}

/* split media */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:30px;align-items:center}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split-media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(3,7,18,.12),rgba(3,7,18,.72))}
.media-badge{
  position:absolute;left:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .9rem;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.05em;
  color:#e0f2fe;background:rgba(4,10,24,.72);border:1px solid rgba(56,189,248,.4);backdrop-filter:blur(8px);
}
.feature-item{display:flex;gap:1rem;padding:18px 0;border-bottom:1px solid rgba(96,165,250,.12)}
.feature-item:last-child{border-bottom:0;padding-bottom:0}
.feature-item:first-child{padding-top:0}
.feature-ico{
  flex:0 0 44px;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  font-size:1rem;color:var(--lime);
  background:linear-gradient(135deg,rgba(163,230,53,.16),rgba(56,189,248,.12));
  border:1px solid rgba(163,230,53,.28);
}
.feature-item h3{font-size:1.02rem;margin-bottom:.35rem}
.feature-item p{font-size:.9rem;color:var(--muted);line-height:1.68}

/* bitrate rows */
.rate-list{border-radius:var(--radius);border:1px solid var(--border);background:rgba(9,18,36,.6);overflow:hidden}
.rate-row{
  display:grid;grid-template-columns:1.1fr .8fr 1.2fr;gap:16px;align-items:center;
  padding:18px 22px;border-bottom:1px solid rgba(96,165,250,.12);
  transition:background .25s ease;
}
.rate-row:last-child{border-bottom:0}
.rate-row:hover{background:rgba(56,189,248,.07)}
.rate-row.is-head{background:rgba(56,189,248,.08);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:700}
.rate-name{font-weight:700;color:#fff;font-size:.96rem;display:flex;align-items:center;gap:.5rem}
.rate-name i{color:var(--cyan);font-size:.85rem}
.rate-speed{font-weight:700;color:var(--lime);font-size:.92rem}
.rate-fit{font-size:.87rem;color:var(--muted)}
.rate-hint{margin-top:18px;font-size:.86rem;color:var(--dim)}

/* device cards */
.device-card{padding:24px 22px;border-radius:var(--radius);text-align:left;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.device-card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--glow)}
.device-card i{font-size:1.3rem;color:var(--holo)}
.device-card h3{margin-top:.85rem;font-size:1rem}
.device-card p{margin-top:.45rem;font-size:.87rem;color:var(--muted);line-height:1.62}

/* timeline */
.timeline{position:relative;padding-left:30px;max-width:820px}
.timeline::before{
  content:"";position:absolute;left:7px;top:8px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(163,230,53,.2));
}
.tl-item{position:relative;padding-bottom:26px}
.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-alt);border:2px solid var(--cyan);box-shadow:0 0 12px rgba(56,189,248,.6);
}
.tl-time{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.tl-item h3{margin-top:.35rem;font-size:1rem}
.tl-item p{margin-top:.35rem;font-size:.88rem;color:var(--muted);line-height:1.65}

/* reviews */
.review-card{padding:24px 22px;border-radius:var(--radius);display:flex;flex-direction:column;gap:.9rem}
.review-stars{color:var(--gold);font-size:.85rem;letter-spacing:.15em}
.review-card p{font-size:.9rem;color:#cbd5e1;line-height:1.7}
.review-meta{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(96,165,250,.12)}
.avatar{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;color:#04122b;
  background:linear-gradient(135deg,#38bdf8,#a3e635);
}
.review-meta b{display:block;font-size:.88rem;color:#fff}
.review-meta span{display:block;font-size:.76rem;color:var(--dim)}

/* faq */
.faq-wrap{max-width:900px}
.faq-item{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:rgba(13,25,48,.6);margin-bottom:12px;overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.faq-item:hover{border-color:var(--border-strong)}
.faq-item[open]{border-color:rgba(56,189,248,.4);box-shadow:0 0 20px rgba(56,189,248,.14)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1rem 1.15rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  font-weight:600;font-size:.96rem;color:#e2e8f0;
}
.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:.75rem;
  color:var(--cyan);flex-shrink:0;margin-top:.3rem;transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-answer{padding:0 1.15rem 1.1rem;font-size:.89rem;color:var(--muted);line-height:1.72;max-width:76ch}

/* CTA */
.cta-section{padding:70px 0 80px}
.cta-panel{
  position:relative;overflow:hidden;
  padding:44px 40px;border-radius:var(--radius-lg);
  background:
    radial-gradient(560px 300px at 82% 8%, rgba(37,99,235,.4), transparent 66%),
    linear-gradient(140deg,rgba(11,26,51,.94),rgba(6,14,32,.96));
  border:1px solid rgba(56,189,248,.3);
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.cta-panel h2{font-size:clamp(1.4rem,3vw,2.1rem);color:#fff}
.cta-panel p{margin-top:.9rem;color:var(--muted);font-size:.98rem;max-width:70ch;margin-left:auto;margin-right:auto;line-height:1.72}
.code-highlight{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.3rem;
  padding:.6rem 1.25rem;border-radius:999px;
  font-weight:800;letter-spacing:.16em;color:#04122b;
  background:linear-gradient(135deg,#facc15,#a3e635);
  box-shadow:0 0 26px rgba(163,230,53,.4);
}
.code-form{display:flex;gap:10px;flex-wrap:wrap;margin:1.6rem auto 0;max-width:520px}
.code-form input{
  flex:1 1 240px;min-width:0;
  padding:.85rem 1.1rem;border-radius:999px;
  border:1px solid var(--border);background:rgba(3,7,18,.72);color:#fff;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.code-form input::placeholder{color:var(--dim)}
.code-form input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
.cta-note{margin-top:1.1rem;font-size:.8rem;color:var(--dim)}
.pay-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.4rem}
.pay-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem 1rem;border-radius:999px;font-size:.8rem;font-weight:600;
  color:#dbeafe;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.28);
}

/* ---------- FOOTER ---------- */
.site-footer{
  position:relative;margin-top:16px;padding:58px 0 26px;
  background:linear-gradient(180deg,rgba(3,7,18,.35),rgba(4,10,24,.97));
  border-top:1px solid rgba(96,165,250,.14);
}
.footer-grid{display:grid;grid-template-columns:1.65fr 1fr 1fr 1fr;gap:34px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand p{color:var(--muted);font-size:.9rem;line-height:1.72;max-width:46ch}
.footer-col h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;font-weight:700}
.footer-col li{margin-bottom:9px}
.footer-col a{color:var(--muted);font-size:.89rem;transition:color .2s ease,padding-left .2s ease}
.footer-col a:hover{color:#fff;padding-left:4px}
.footer-bottom{
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(96,165,250,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:var(--dim);font-size:.82rem;
}
.footer-bottom b{color:#cbd5e1}

/* ---------- FAB ---------- */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:60;
  width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;
  color:#e0f2fe;font-size:1.25rem;
  background:linear-gradient(rgba(7,7,13,.86),rgba(7,7,13,.86)) padding-box,
             linear-gradient(135deg,#38bdf8,#a3e635) border-box;
  border:1.5px solid transparent;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:.82;
  animation:fabPulse 2.8s ease-in-out infinite;
  transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;
}
.fab:hover{opacity:1;transform:scale(1.09);box-shadow:0 0 30px rgba(56,189,248,.7)}
.fab:active{transform:scale(.94)}
.fab-dot{
  position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;
  background:var(--pink);border:2px solid #030712;box-shadow:0 0 10px rgba(244,63,94,.9);
  animation:dotBlink 1.6s ease-in-out infinite;
}
@keyframes fabPulse{
  0%,100%{box-shadow:0 0 18px rgba(6,182,212,.38)}
  50%{box-shadow:0 0 30px rgba(163,230,53,.55)}
}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .fab,.fab-dot{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .nav-link{padding:.55rem .68rem;font-size:.85rem}
  .hero-cat-inner{grid-template-columns:1.25fr .85fr;gap:20px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .header-inner{gap:.8rem}
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    padding:1rem 20px 1.4rem;
    background:rgba(4,10,24,.97);
    border-bottom:1px solid rgba(96,165,250,.16);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s ease,opacity .28s ease,visibility .28s ease;
  }
  .main-nav.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .nav-link{padding:.75rem .8rem;font-size:.95rem}
  .nav-link::after{display:none}
  .nav-link.active{background:rgba(56,189,248,.14)}
  .header-actions{margin-left:auto}
  .btn-ghost{padding:.6rem .95rem;font-size:.82rem}
  .btn-glow{padding:.6rem 1.05rem;font-size:.82rem}
  .hero{padding:132px 0 60px}
  .hero-cat-inner{grid-template-columns:1fr}
  .side-card--top{margin-right:0}
  .side-card--bottom{margin-left:0}
  .split{grid-template-columns:1fr;gap:24px}
  .split-media{order:-1}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:767px){
  .section{padding:52px 0}
  .hero-main-card{padding:26px 22px}
  .hero-mini-stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .rate-row{grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .rate-row.is-head{display:none}
  .rate-speed{color:var(--lime)}
  .cta-panel{padding:34px 22px}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .container{padding-left:16px;padding-right:16px}
  .brand-text b{font-size:.82rem}
  .brand-text em{font-size:.58rem;letter-spacing:.1em}
  .hero{padding:118px 0 48px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-glow,.hero-actions .btn-ghost{width:100%}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:6px}
  .fab{left:12px;bottom:20px;width:52px;height:52px}
  .btn-ghost{padding:.55rem .8rem;font-size:.78rem}
  .btn-glow{padding:.55rem .9rem;font-size:.78rem}
}

/* roulang page: category3 */
:root{
  --bg:#030712;
  --bg-alt:#081229;
  --bg-soft:#0b1a33;
  --surface:rgba(13,25,48,.72);
  --surface-solid:#0d1930;
  --border:rgba(96,165,250,.16);
  --border-strong:rgba(56,189,248,.42);
  --blue:#2563eb;
  --cyan:#38bdf8;
  --holo:#60a5fa;
  --text:#f8fafc;
  --muted:#94a3b8;
  --dim:#64748b;
  --lime:#a3e635;
  --gold:#facc15;
  --green:#22c55e;
  --pink:#f43f5e;
  --radius-lg:22px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-lg:0 24px 60px rgba(2,8,23,.72);
  --shadow:0 12px 34px rgba(2,8,23,.55);
  --glow:0 0 26px rgba(56,189,248,.35);
  --glow-strong:0 0 34px rgba(56,189,248,.55);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(37,99,235,.24), transparent 62%),
    radial-gradient(900px 520px at 4% 12%, rgba(6,182,212,.16), transparent 60%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
p{margin:0 0 1rem}
h1,h2,h3,h4{margin:0 0 .6rem;font-weight:800;line-height:1.26;letter-spacing:-.01em}
ul{margin:0;padding:0;list-style:none}
.container{max-width:var(--maxw);padding-left:20px;padding-right:20px;margin:0 auto}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}

/* ---------- BUTTONS ---------- */
.btn-glow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  color:#04122b;
  background:linear-gradient(135deg,#38bdf8 0%,#60a5fa 49%,#a3e635 100%);
  box-shadow:0 0 22px rgba(56,189,248,.45),0 10px 26px rgba(2,8,23,.5);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
  white-space:nowrap;
}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(56,189,248,.7),0 14px 30px rgba(2,8,23,.55);filter:saturate(1.15);color:#04122b}
.btn-glow:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.78rem 1.32rem;border-radius:999px;
  font-weight:600;font-size:.93rem;color:var(--holo);
  border:1px solid rgba(96,165,250,.4);
  background:rgba(11,26,51,.5);
  transition:.25s ease;
  white-space:nowrap;
}
.btn-ghost:hover{color:#fff;border-color:var(--cyan);background:rgba(56,189,248,.14);box-shadow:0 0 18px rgba(56,189,248,.32)}
.btn-line{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.1rem;border-radius:999px;font-size:.86rem;font-weight:600;
  border:1px solid var(--border);color:var(--muted);background:rgba(13,25,48,.55);
  transition:.25s ease;
}
.btn-line:hover{color:#fff;border-color:var(--border-strong);box-shadow:var(--glow)}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  backdrop-filter:blur(18px);
  background:rgba(4,10,24,.72);
  border-bottom:1px solid rgba(96,165,250,.12);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{background:rgba(4,10,24,.94);box-shadow:0 10px 34px rgba(2,8,23,.6)}
.header-inner{display:flex;align-items:center;gap:1.4rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand-mark{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(56,189,248,.28),rgba(37,99,235,.35));
  border:1px solid rgba(96,165,250,.4);
  box-shadow:inset 0 0 18px rgba(56,189,248,.28);
  font-size:1.05rem;
}
.brand-text{display:flex;flex-direction:column;line-height:1.14}
.brand-text b{font-size:.94rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.brand-text em{font-style:normal;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.main-nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav-link{
  position:relative;padding:.56rem .86rem;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--muted);transition:.22s ease;white-space:nowrap;
}
.nav-link::after{
  content:"";position:absolute;left:.86rem;right:.86rem;bottom:.24rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--lime));transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.09)}
.nav-link.active{color:#fff}
.nav-link.active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.6rem;margin-left:.6rem}
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);flex-direction:column;justify-content:center;align-items:center;gap:4px;background:rgba(11,26,51,.6)}
.nav-toggle span{display:block;width:17px;height:2px;border-radius:2px;background:var(--holo);transition:.25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- CATEGORY HERO ---------- */
.cat-hero{position:relative;padding:150px 0 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url('/assets/images/282374261f369d9c.jpg');background-size:cover;background-position:center;opacity:.30}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,7,18,.84) 0%,rgba(3,7,18,.92) 48%,rgba(3,7,18,.99) 100%),
    radial-gradient(720px 420px at 80% 12%, rgba(37,99,235,.35), transparent 66%);
}
.cat-hero .container{position:relative;z-index:2}
.cat-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(163,230,53,.35);background:rgba(163,230,53,.09);
}
.hero-title{
  margin-top:1.1rem;
  font-size:clamp(1.7rem,4.1vw,2.9rem);
  font-weight:800;line-height:1.2;max-width:24ch;
  background:linear-gradient(120deg,#ffffff 12%,#bae6fd 54%,#a3e635 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{margin-top:1.1rem;max-width:62ch;color:var(--muted);font-size:1rem;line-height:1.72}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid rgba(96,165,250,.15)}
.stat-item{min-width:132px}
.stat-num{display:block;font-size:1.3rem;font-weight:800;color:#fff}
.stat-label{font-size:.78rem;color:var(--dim);letter-spacing:.04em}
.quick-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;backdrop-filter:blur(14px);box-shadow:var(--shadow-lg);
}
.quick-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
.quick-panel-head h2{font-size:1rem;margin:0;letter-spacing:.03em;text-transform:uppercase;color:var(--holo)}
.quick-panel-head span{font-size:.74rem;color:var(--dim)}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-tile{
  display:block;padding:14px 14px 13px;border-radius:var(--radius);
  border:1px solid var(--border);background:rgba(9,19,38,.75);
  transition:.25s ease;
}
.quick-tile:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--glow)}
.quick-icon{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:.55rem;
  background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(37,99,235,.32));
  border:1px solid rgba(96,165,250,.35);color:var(--cyan);font-size:.9rem;
}
.quick-tile b{display:block;font-size:.92rem;color:#fff}
.quick-tile small{display:block;font-size:.75rem;color:var(--muted);line-height:1.45;margin-top:.18rem}

/* ---------- SECTIONS ---------- */
.section{padding:72px 0;position:relative}
.section-alt{
  background:linear-gradient(180deg,rgba(8,18,41,.72),rgba(3,7,18,.32));
  border-top:1px solid rgba(96,165,250,.1);
  border-bottom:1px solid rgba(96,165,250,.1);
}
.section-head{max-width:760px;margin-bottom:34px}
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--lime))}
.h2{font-size:clamp(1.38rem,2.6vw,2.05rem);margin-bottom:.65rem}
.section-lead{color:var(--muted);font-size:.97rem;margin:0;max-width:72ch}

/* ---------- OFFER CARDS ---------- */
.offer-card{
  height:100%;display:flex;flex-direction:column;
  padding:24px 22px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);
  backdrop-filter:blur(14px);box-shadow:var(--shadow);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.offer-card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--glow),var(--shadow-lg)}
.offer-tag{
  align-self:flex-start;padding:.28rem .68rem;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#04122b;background:linear-gradient(135deg,#a3e635,#38bdf8);
}
.offer-tag.alt{background:linear-gradient(135deg,#facc15,#f97316);color:#2b1204}
.offer-tag.warm{background:linear-gradient(135deg,#f43f5e,#f97316);color:#fff}
.offer-card h3{margin-top:.9rem;font-size:1.08rem;color:#fff}
.offer-amount{margin:.35rem 0 .6rem;font-size:1.5rem;font-weight:800;color:var(--cyan)}
.offer-desc{color:var(--muted);font-size:.88rem;line-height:1.6}
.offer-list{margin-top:1rem;display:grid;gap:.5rem}
.offer-list li{position:relative;padding-left:1.3rem;font-size:.85rem;color:var(--muted)}
.offer-list li::before{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.66rem;
  position:absolute;left:0;top:.32rem;color:var(--lime);
}
.offer-foot{margin-top:auto;padding-top:1.1rem}

/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.split-media img{width:100%;height:100%;object-fit:cover;min-height:300px}
.split-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,18,.05),rgba(3,7,18,.72))}
.split-body{padding-left:.5rem}
.check-list{display:grid;gap:.95rem;margin-top:1.2rem}
.check-item{display:flex;gap:.85rem;align-items:flex-start}
.check-item i{
  flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(56,189,248,.12);border:1px solid rgba(96,165,250,.3);color:var(--cyan);font-size:.82rem;
}
.check-item b{display:block;font-size:.94rem;color:#fff}
.check-item span{font-size:.86rem;color:var(--muted);line-height:1.6}

/* ---------- TIER LIST ---------- */
.tier-list{margin-top:8px;border-top:1px solid rgba(96,165,250,.14)}
.tier-row{
  display:grid;grid-template-columns:1.1fr 1fr .9fr .8fr;gap:14px;align-items:center;
  padding:16px 6px;border-bottom:1px solid rgba(96,165,250,.14);transition:background .22s ease;
}
.tier-row:hover{background:rgba(56,189,248,.06)}
.tier-row.is-head{padding-top:6px;padding-bottom:10px}
.tier-row.is-head span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700}
.tier-name{font-weight:700;color:#fff;font-size:.95rem}
.tier-name small{display:block;font-weight:500;font-size:.76rem;color:var(--dim);letter-spacing:.02em}
.tier-meta{color:var(--muted);font-size:.88rem}
.tier-value{font-weight:800;color:var(--lime);font-size:.95rem}
.tier-note{color:var(--holo);font-size:.88rem;font-weight:600}

/* ---------- STEPS ---------- */
.step-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.step-item{
  position:relative;padding:22px 20px;border-radius:var(--radius);
  background:rgba(9,19,38,.72);border:1px solid var(--border);transition:.25s ease;
}
.step-item:hover{border-color:var(--border-strong);box-shadow:var(--glow);transform:translateY(-4px)}
.step-num{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;margin-bottom:.8rem;
  font-weight:800;color:#04122b;background:linear-gradient(135deg,#38bdf8,#a3e635);
}
.step-item b{display:block;font-size:.96rem;color:#fff}
.step-item span{display:block;margin-top:.35rem;font-size:.85rem;color:var(--muted);line-height:1.58}

/* ---------- PAYMENTS ---------- */
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.pay-item{
  padding:18px;border-radius:var(--radius);background:rgba(9,19,38,.72);
  border:1px solid var(--border);display:flex;flex-direction:column;gap:.45rem;transition:.25s ease;
}
.pay-item:hover{border-color:var(--border-strong);transform:translateY(-4px)}
.pay-name{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.94rem;color:#fff}
.pay-name i{color:var(--cyan)}
.pay-time{font-size:.82rem;color:var(--lime);font-weight:600}
.pay-item p{margin:0;font-size:.83rem;color:var(--muted);line-height:1.55}

/* ---------- NEWS ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card{
  display:flex;flex-direction:column;height:100%;
  padding:20px;border-radius:var(--radius);
  background:rgba(9,19,38,.72);border:1px solid var(--border);
  transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease;
}
.news-card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--glow)}
.news-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap}
.news-tag{
  padding:.22rem .6rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan);background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3);
}
.news-date{font-size:.75rem;color:var(--dim)}
.news-card h3{font-size:1rem;color:#fff;line-height:1.45}
.news-excerpt{font-size:.85rem;color:var(--muted);line-height:1.6;margin:0}
.empty-note{
  padding:26px 22px;border-radius:var(--radius);border:1px dashed rgba(96,165,250,.3);
  color:var(--muted);font-size:.9rem;background:rgba(9,19,38,.6);
}
.more-row{display:flex;justify-content:flex-start;margin-top:26px}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px;max-width:900px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:rgba(9,19,38,.7);overflow:hidden;transition:border-color .25s ease}
.faq-item[open]{border-color:var(--border-strong);box-shadow:var(--glow)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:17px 20px;cursor:pointer;font-weight:700;font-size:.95rem;color:#fff;list-style:none;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"\2b";font-weight:700;color:var(--cyan);font-size:1.1rem;line-height:1}
.faq-item[open] .faq-q::after{content:"\2212"}
.faq-a{padding:0 20px 18px;color:var(--muted);font-size:.9rem;line-height:1.68}

/* ---------- CTA ---------- */
.cta-panel{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:36px;align-items:center;
  padding:36px;border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg,rgba(37,99,235,.22),rgba(6,182,212,.12)),
    rgba(9,19,38,.82);
  border:1px solid var(--border-strong);
  box-shadow:var(--glow),var(--shadow-lg);
}
.cta-panel h2{font-size:clamp(1.35rem,2.4vw,1.9rem)}
.cta-panel p{color:var(--muted);font-size:.93rem}
.code-form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:.4rem}
.field label{font-size:.8rem;font-weight:600;color:var(--holo);letter-spacing:.03em}
.field-input{
  width:100%;padding:.78rem .95rem;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(4,10,24,.78);color:var(--text);
  font-size:.92rem;transition:.22s ease;
}
.field-input::placeholder{color:var(--dim)}
.field-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
.form-note{margin:0;font-size:.82rem;color:var(--dim);line-height:1.6}
.form-note.is-ok{color:var(--lime);font-weight:600}

/* ---------- TRUST ---------- */
.trust-strip{padding:26px 0 6px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-item{
  display:flex;align-items:center;gap:.75rem;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(9,19,38,.6);
}
.trust-item i{color:var(--cyan);font-size:1rem}
.trust-item span{font-size:.83rem;color:var(--muted)}
.trust-item b{display:block;font-size:.86rem;color:#fff}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:64px;padding:56px 0 26px;border-top:1px solid rgba(96,165,250,.14);background:rgba(4,10,24,.72)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.footer-brand p{margin-top:1rem;color:var(--muted);font-size:.86rem;line-height:1.68;max-width:44ch}
.footer-col h4{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--holo);margin-bottom:.9rem}
.footer-col ul{display:grid;gap:.55rem}
.footer-col a{font-size:.87rem;color:var(--muted);transition:.2s ease}
.footer-col a:hover{color:#fff}
.footer-bottom{
  margin-top:36px;padding-top:18px;border-top:1px solid rgba(96,165,250,.14);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.footer-bottom p{margin:0;font-size:.8rem;color:var(--dim)}
.footer-bottom b{color:var(--muted)}

/* ---------- FAB ---------- */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:50;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem 1.05rem .62rem .78rem;border-radius:999px;
  background:rgba(7,7,13,.84);backdrop-filter:blur(12px);
  border:1px solid rgba(56,189,248,.55);
  box-shadow:0 0 20px rgba(6,182,212,.45),inset 0 0 18px rgba(37,99,235,.25);
  color:#fff;font-weight:700;font-size:.82rem;opacity:.8;
  transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease;
}
.fab:hover{opacity:1;transform:translateY(-3px);box-shadow:0 0 32px rgba(56,189,248,.72)}
.fab:active{transform:translateY(0) scale(.96)}
.fab i{color:var(--cyan);font-size:1rem}
.fab .fab-dot{
  position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  background:#f43f5e;box-shadow:0 0 12px rgba(244,63,94,.9);animation:fabPulse 1.7s infinite;
}
@keyframes fabPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.65}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .cat-hero-grid{grid-template-columns:1fr;gap:34px}
  .split{grid-template-columns:1fr;gap:28px}
  .split-body{padding-left:0}
  .step-list{grid-template-columns:repeat(2,1fr)}
  .pay-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .cta-panel{grid-template-columns:1fr;padding:28px}
}
@media (max-width:991px){
  .main-nav{
    position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:14px 20px 20px;
    background:rgba(4,10,24,.98);
    border-bottom:1px solid var(--border);
    box-shadow:0 20px 40px rgba(2,8,23,.65);
    display:none;
  }
  .main-nav.open{display:flex}
  .nav-link{padding:.72rem .8rem}
  .nav-link::after{display:none}
  .nav-link.active{background:rgba(56,189,248,.14)}
  .nav-toggle{display:flex}
  .header-actions{margin-left:auto}
  .cat-hero{padding:132px 0 58px}
}
@media (max-width:768px){
  .section{padding:56px 0}
  .hero-title{max-width:none}
  .hero-stats{gap:1.1rem}
  .stat-item{min-width:110px}
  .tier-row{grid-template-columns:1fr 1fr;gap:8px 14px;padding:14px 4px}
  .tier-row.is-head{display:none}
  .tier-name{grid-column:1 / -1}
  .news-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:520px){
  .brand-text b{font-size:.82rem;max-width:170px}
  .brand-text em{display:none}
  .btn-ghost{padding:.55rem .85rem;font-size:.78rem}
  .btn-glow{padding:.58rem .95rem;font-size:.79rem}
  .quick-grid{grid-template-columns:1fr}
  .step-list{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-panel{padding:22px 18px}
  .hero-actions .btn-glow,.hero-actions .btn-ghost{width:100%;justify-content:center}
  .fab{padding:.58rem .8rem .58rem .68rem;font-size:.76rem;bottom:82px}
  .footer-bottom{flex-direction:column;gap:.4rem}
}

/* 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}