/* roulang page: index */
:root{
  --bg:#07070D;
  --bg-2:#0E0E1E;
  --bg-3:#12122a;
  --line:rgba(148,163,184,.16);
  --text:#FFFFFF;
  --muted:#94A3B8;
  --lime:#A3E635;
  --cyan:#06B6D4;
  --pink:#F43F5E;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --glow-lime:0 0 18px rgba(163,230,53,.35);
  --glow-cyan:0 0 18px rgba(6,182,212,.35);
  --container:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;transition:color .2s ease;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3,h4{margin:0 0 .6em;line-height:1.28;font-weight:800;letter-spacing:-.01em;}
p{margin:0 0 1em;color:var(--muted);}
ul{margin:0 0 1em;padding-left:1.1em;color:var(--muted);}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
.section{padding:72px 0;position:relative;}
.section--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);}
.section--deep{background:var(--bg-2);}
.sec-head{max-width:760px;margin-bottom:38px;}
.sec-head.left{text-align:left;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);font-weight:700;margin-bottom:14px;
}
.eyebrow i{color:var(--cyan);}
.sec-head h2{font-size:clamp(24px,3vw,34px);}
.sec-head p{font-size:16px;max-width:680px;}
.kw{color:var(--lime);}

/* ===== HEADER ===== */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(7,7,13,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;gap:18px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:15px;line-height:1.2;letter-spacing:-.01em;
}
.brand .logo-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 36px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  color:#03110a;font-weight:900;font-size:16px;
  box-shadow:var(--glow-lime);
}
.brand span{max-width:230px;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{
  padding:9px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);
  white-space:nowrap;
}
.nav-links a:hover{color:var(--text);background:rgba(148,163,184,.09);}
.nav-links a.active{color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));}
.nav-actions{display:flex;align-items:center;gap:8px;}
.btn-text{
  padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--lime);border:1px solid rgba(163,230,53,.4);
}
.btn-text:hover{background:rgba(163,230,53,.1);}
.btn-solid{
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:800;
  background:linear-gradient(135deg,var(--lime),#4ADE80);color:#04150b;
  box-shadow:0 0 15px rgba(163,230,53,.4);
  transition:transform .2s,box-shadow .2s;
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(163,230,53,.58);}
.menu-toggle{display:none;font-size:20px;color:var(--text);padding:8px;}
.mobile-panel{
  display:none;flex-direction:column;gap:6px;
  padding:14px 20px 20px;border-top:1px solid var(--line);
  background:rgba(7,7,13,.98);
}
.mobile-panel a{padding:10px 4px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:1px dashed rgba(148,163,184,.12);}
.mobile-panel a.active{color:var(--lime);}
.mobile-panel .m-actions{display:flex;gap:10px;margin-top:12px;}

/* ===== HERO ===== */
.hero{
  position:relative;overflow:hidden;
  padding:82px 0 74px;
  background:
    linear-gradient(120deg,rgba(7,7,13,.94) 0%,rgba(14,14,30,.9) 60%,rgba(7,7,13,.94) 100%),
    url('/assets/images/be6776f8b4c62cc0.jpg') center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 30% 40%,#000 0%,transparent 78%);
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;
}
.hero h1{font-size:clamp(28px,4vw,46px);margin-bottom:18px;}
.hero .lede{font-size:17px;line-height:1.7;color:#CBD5E1;max-width:620px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px;}
.btn-primary{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#04150b;
  box-shadow:0 0 20px rgba(6,182,212,.4);
  transition:transform .22s,box-shadow .22s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(6,182,212,.62);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;
  color:var(--text);border:1px solid rgba(148,163,184,.35);
}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.03em;
  padding:6px 12px;border-radius:999px;
  background:rgba(148,163,184,.1);border:1px solid var(--line);color:#CBD5E1;
}
.badge i{color:var(--cyan);}
/* Quiz panel */
.quiz-panel{
  background:linear-gradient(180deg,rgba(18,18,42,.96),rgba(14,14,30,.96));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);
}
.quiz-panel h3{font-size:18px;margin-bottom:6px;}
.quiz-panel .quiz-sub{font-size:13px;color:var(--muted);margin-bottom:18px;}
.quiz-q{border-top:1px dashed rgba(148,163,184,.16);padding:14px 0;}
.quiz-q:first-of-type{border-top:0;padding-top:0;}
.quiz-q p{font-size:14px;color:#E2E8F0;font-weight:600;margin-bottom:10px;}
.quiz-opts{display:flex;flex-wrap:wrap;gap:8px;}
.quiz-opts label{
  font-size:13px;padding:8px 13px;border-radius:999px;
  border:1px solid rgba(148,163,184,.28);color:var(--muted);cursor:pointer;
  transition:.2s;
}
.quiz-opts label:hover{border-color:var(--lime);color:var(--lime);}
.quiz-opts input{display:none;}
.quiz-opts input:checked + span{
  color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));
}
.quiz-opts label span{display:block;}
.quiz-result{
  margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);
  background:rgba(6,182,212,.09);border:1px solid rgba(6,182,212,.32);
  font-size:13px;color:#BAE6FD;
}
.quiz-result strong{color:var(--lime);}
.quiz-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}

/* ===== FEATURE GRID ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.feature-card{
  padding:26px 22px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,18,42,.85),rgba(14,14,30,.85));
  border:1px solid var(--line);transition:.25s;
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);box-shadow:0 12px 34px rgba(0,0,0,.5);}
.feature-card .fc-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(6,182,212,.13);color:var(--cyan);font-size:19px;margin-bottom:16px;
}
.feature-card h3{font-size:17px;margin-bottom:8px;}
.feature-card p{font-size:14.5px;margin:0;}

/* ===== SCENARIO MATRIX ===== */
.matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.matrix-item{
  display:flex;gap:16px;padding:22px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
}
.matrix-item .m-num{
  flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-weight:900;color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));
  font-size:15px;
}
.matrix-item h3{font-size:16.5px;margin-bottom:6px;}
.matrix-item p{font-size:14.5px;margin:0;}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step;}
.step{
  position:relative;padding:30px 22px 24px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,18,42,.7),rgba(14,14,30,.7));
  border:1px solid var(--line);
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:-14px;left:22px;
  font-size:13px;font-weight:900;letter-spacing:.08em;
  padding:6px 12px;border-radius:999px;color:#04150b;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
}
.step h3{font-size:16.5px;margin:8px 0 8px;}
.step p{font-size:14.5px;margin:0;}

/* ===== SHOWCASE ===== */
.showcase{
  display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
}
.showcase-media{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);position:relative;
}
.showcase-media img{width:100%;height:340px;object-fit:cover;}
.showcase-media .media-tag{
  position:absolute;left:16px;bottom:16px;
  font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px;
  background:rgba(7,7,13,.82);border:1px solid var(--line);color:var(--lime);
}
.check-list{list-style:none;padding:0;margin:0;}
.check-list li{
  position:relative;padding-left:32px;margin-bottom:12px;font-size:15px;color:#CBD5E1;
}
.check-list li::before{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:0;top:2px;color:var(--lime);font-size:13px;
}

/* ===== TESTIMONIALS ===== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.quote{
  padding:24px;border-radius:var(--radius);background:var(--bg-2);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;
}
.quote .stars{color:#FACC15;font-size:13px;letter-spacing:2px;}
.quote blockquote{margin:0;font-size:14.5px;color:#CBD5E1;line-height:1.7;}
.quote .who{font-size:13px;color:var(--muted);font-weight:600;}

/* ===== COMPARE TABLE ===== */
.compare-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);}
table.compare{width:100%;border-collapse:collapse;min-width:620px;background:var(--bg-2);}
table.compare th,table.compare td{
  padding:15px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);
}
table.compare thead th{background:rgba(6,182,212,.09);color:var(--lime);font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;}
table.compare td:first-child{color:#E2E8F0;font-weight:600;}
table.compare tbody tr:hover{background:rgba(148,163,184,.05);}
.ok{color:var(--lime);font-weight:700;}
.no{color:var(--pink);font-weight:700;}

/* ===== NEWS / CMS ===== */
.news-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:28px;align-items:start;}
.post-list{display:grid;gap:16px;}
.post-card{
  display:grid;grid-template-columns:150px 1fr;gap:18px;
  padding:16px;border-radius:var(--radius);background:var(--bg-2);
  border:1px solid var(--line);transition:.22s;
}
.post-card:hover{border-color:rgba(6,182,212,.45);transform:translateY(-3px);}
.post-card .thumb{
  width:150px;height:104px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-3);
}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;}
.post-card h3{font-size:16px;margin-bottom:6px;line-height:1.4;}
.post-card p{font-size:14px;margin:0 0 8px;}
.post-meta{font-size:12.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;}
.post-meta i{color:var(--cyan);margin-right:5px;}
.side-card{
  padding:22px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);
}
.side-card h3{font-size:16px;margin-bottom:14px;}
.side-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.side-list li a{font-size:14px;color:#CBD5E1;font-weight:600;line-height:1.5;}
.side-list li a:hover{color:var(--lime);}
.side-list li span{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px;}
.empty-note{font-size:14.5px;color:var(--muted);padding:22px;border:1px dashed var(--line);border-radius:var(--radius);}
.more-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:700;color:var(--lime);}
.more-link:hover{color:var(--cyan);}

/* ===== DOWNLOAD ===== */
.download-band{
  display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;
  padding:40px;border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(6,182,212,.14),rgba(163,230,53,.1));
  border:1px solid rgba(163,230,53,.28);
}
.download-band h2{font-size:clamp(22px,2.6vw,30px);}
.store-btns{display:flex;gap:12px;flex-wrap:wrap;}
.store-btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:12px;
  background:rgba(7,7,13,.7);border:1px solid var(--line);font-size:14px;font-weight:700;
}
.store-btn i{font-size:19px;color:var(--lime);}
.store-btn:hover{border-color:var(--lime);}

/* ===== CATEGORY ENTRY ===== */
.cat-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cat-card{
  padding:26px 22px;border-radius:var(--radius);background:var(--bg-2);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;transition:.22s;
}
.cat-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);}
.cat-card .cat-ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(163,230,53,.18),rgba(6,182,212,.18));color:var(--lime);
}
.cat-card h3{font-size:16.5px;margin:0;}
.cat-card p{font-size:14.5px;margin:0;}
.cat-card .cat-link{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--cyan);}
.cat-card .cat-link:hover{color:var(--lime);}

/* ===== FAQ ===== */
.faq-list{display:grid;gap:12px;max-width:900px;}
.faq-item{
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);overflow:hidden;
}
.faq-item summary{
  list-style:none;cursor:pointer;padding:17px 20px;font-weight:700;font-size:15.5px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"\2b";color:var(--lime);font-weight:900;font-size:17px;}
.faq-item[open] summary::after{content:"\2212";}
.faq-item .faq-body{padding:0 20px 18px;font-size:14.5px;color:var(--muted);}

/* ===== FINAL CTA ===== */
.final-cta{
  text-align:center;padding:56px 30px;border-radius:var(--radius);
  background:
    linear-gradient(120deg,rgba(7,7,13,.9),rgba(14,14,30,.9)),
    url('/assets/images/81e114041e0c7ed7.jpg') center/cover no-repeat;
  border:1px solid rgba(163,230,53,.3);
}
.final-cta h2{font-size:clamp(22px,3vw,32px);}
.final-cta p{max-width:660px;margin:0 auto 24px;color:#CBD5E1;}
.final-cta .hero-cta{justify-content:center;}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--bg-2);border-top:1px solid var(--line);padding:54px 0 26px;margin-top:0;
}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:28px;}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin-bottom:14px;}
.foot-brand .logo-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 34px;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#04150b;font-weight:900;font-size:15px;
}
.site-footer p{font-size:14px;}
.site-footer h4{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#E2E8F0;margin-bottom:14px;}
.foot-links{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.foot-links a{font-size:14px;color:var(--muted);}
.foot-links a:hover{color:var(--lime);}
.foot-pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.foot-pay span{
  font-size:12px;font-weight:700;padding:6px 11px;border-radius:8px;
  background:rgba(148,163,184,.1);border:1px solid var(--line);color:#CBD5E1;
}
.foot-bottom{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);
}
.age-badge{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--pink);color:var(--pink);font-weight:900;font-size:11px;
}

/* ===== FAB ===== */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:130;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(7,7,13,.85);backdrop-filter:blur(10px);
  border:2px solid transparent;
  background-image:linear-gradient(rgba(7,7,13,.9),rgba(7,7,13,.9)),
                   linear-gradient(135deg,var(--lime),var(--cyan));
  background-origin:border-box;background-clip:padding-box,border-box;
  color:var(--lime);font-size:20px;
  box-shadow:0 0 20px rgba(6,182,212,.45);
  transition:transform .25s,box-shadow .25s,opacity .25s;
  opacity:.82;
}
.fab:hover{transform:scale(1.1);opacity:1;box-shadow:0 0 30px rgba(6,182,212,.7);}
.fab:active{transform:scale(.94);}
.fab .fab-dot{
  position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 8px rgba(244,63,94,.9);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:125;
  background:rgba(7,7,13,.94);backdrop-filter:blur(12px);
  border-top:1px solid rgba(163,230,53,.28);
  padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.sticky-bar p{margin:0;font-size:13.5px;color:#CBD5E1;}
.sticky-bar strong{color:var(--lime);}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .grid-3,.quotes,.steps,.cat-wall{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .news-layout{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .showcase{grid-template-columns:1fr;}
  .download-band{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .nav-links{display:none;}
  .menu-toggle{display:block;}
  .nav-actions .btn-text{display:inline-flex;}
  .section{padding:54px 0;}
  .matrix{grid-template-columns:1fr;}
  .post-card{grid-template-columns:1fr;}
  .post-card .thumb{width:100%;height:170px;}
  .sticky-bar p{display:none;}
  .sticky-bar{justify-content:center;}
}
@media (max-width:520px){
  .grid-3,.quotes,.steps,.cat-wall,.grid-4{grid-template-columns:1fr;}
  .hero{padding:58px 0 52px;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{justify-content:center;}
  .foot-grid{grid-template-columns:1fr;}
  .brand span{max-width:150px;font-size:13px;}
  .nav-actions .btn-text,.nav-actions .btn-solid{padding:8px 12px;font-size:12.5px;}
  .fab{bottom:88px;left:12px;width:52px;height:52px;}
}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* roulang page: article */
:root{
  --bg:#07070D;
  --bg-2:#0E0E1E;
  --bg-3:#12122a;
  --line:rgba(148,163,184,.16);
  --text:#FFFFFF;
  --muted:#94A3B8;
  --lime:#A3E635;
  --cyan:#06B6D4;
  --pink:#F43F5E;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --glow-lime:0 0 18px rgba(163,230,53,.35);
  --glow-cyan:0 0 18px rgba(6,182,212,.35);
  --container:1200px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;transition:color .2s ease;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
p{margin:0 0 16px;}
h1,h2,h3,h4{margin:0 0 14px;line-height:1.28;font-weight:800;letter-spacing:-.01em;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
.section{padding:72px 0;position:relative;}
.section--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);}
.section--deep{background:var(--bg-2);}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);font-weight:700;margin-bottom:14px;
}
.eyebrow i{color:var(--cyan);}
.site-header{
  position:sticky;top:0;z-index:120;background:rgba(7,7,13,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;line-height:1.2;letter-spacing:-.01em;}
.brand .logo-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 36px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#03110a;font-weight:900;font-size:16px;
  box-shadow:var(--glow-lime);
}
.brand span{max-width:230px;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{padding:9px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;}
.nav-links a:hover{color:var(--text);background:rgba(148,163,184,.09);}
.nav-links a.active{color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));}
.nav-actions{display:flex;align-items:center;gap:8px;}
.btn-text{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--lime);border:1px solid rgba(163,230,53,.4);}
.btn-text:hover{background:rgba(163,230,53,.1);}
.btn-solid{
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:800;
  background:linear-gradient(135deg,var(--lime),#4ADE80);color:#04150b;
  box-shadow:0 0 15px rgba(163,230,53,.4);transition:transform .2s,box-shadow .2s;
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(163,230,53,.58);}
.menu-toggle{display:none;font-size:20px;color:var(--text);padding:8px;}
.mobile-panel{display:none;flex-direction:column;gap:6px;padding:14px 20px 20px;border-top:1px solid var(--line);background:rgba(7,7,13,.98);}
.mobile-panel a{padding:10px 4px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:1px dashed rgba(148,163,184,.12);}
.mobile-panel a.active{color:var(--lime);}
.mobile-panel .m-actions{display:flex;gap:10px;margin-top:12px;}
/* article hero */
.art-hero{
  position:relative;overflow:hidden;padding:56px 0 44px;
  background:linear-gradient(120deg,rgba(7,7,13,.95) 0%,rgba(14,14,30,.9) 65%,rgba(7,7,13,.95) 100%),
  url('/assets/images/81e114041e0c7ed7.jpg') center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.art-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(circle at 25% 40%,#000 0%,transparent 78%);
}
.art-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .6fr;gap:38px;align-items:start;}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:18px;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--lime);}
.breadcrumb span{color:var(--cyan);}
.art-hero h1{font-size:clamp(25px,3.6vw,40px);margin-bottom:16px;}
.art-hero .lede{font-size:16.5px;color:#CBD5E1;max-width:720px;line-height:1.7;}
.art-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;}
.meta-item{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);}
.meta-item i{color:var(--cyan);}
.hero-aside{
  border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,18,42,.92),rgba(14,14,30,.92));
  padding:22px;box-shadow:var(--shadow);
}
.hero-aside h3{font-size:15px;color:var(--lime);margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em;}
.hero-aside ul{list-style:none;margin:0;padding:0;}
.hero-aside li{display:flex;gap:10px;font-size:14px;color:#CBD5E1;padding:9px 0;border-bottom:1px dashed rgba(148,163,184,.14);}
.hero-aside li:last-child{border-bottom:none;}
.hero-aside li i{color:var(--lime);margin-top:4px;}
/* article layout */
.art-layout{display:block;}
.art-figure{margin:0 0 30px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);}
.art-figure img{width:100%;aspect-ratio:16/8;object-fit:cover;}
.art-figure figcaption{font-size:13px;color:var(--muted);padding:11px 16px;background:rgba(14,14,30,.9);}
.article-body{font-size:16.5px;color:#E2E8F0;max-width:880px;}
.article-body h2{font-size:23px;margin:38px 0 14px;color:var(--text);padding-left:14px;border-left:3px solid var(--lime);line-height:1.35;}
.article-body h3{font-size:19px;margin:28px 0 12px;color:#F1F5F9;}
.article-body p{margin:0 0 17px;color:#CBD5E1;line-height:1.72;}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px;color:#CBD5E1;}
.article-body li{margin-bottom:9px;line-height:1.7;}
.article-body strong{color:var(--text);}
.article-body a{color:var(--cyan);border-bottom:1px dashed rgba(6,182,212,.45);}
.article-body a:hover{color:var(--lime);border-color:var(--lime);}
.article-body img{border-radius:var(--radius-sm);margin:22px 0;border:1px solid var(--line);}
.article-body blockquote{
  margin:26px 0;padding:20px 24px;border-left:4px solid var(--cyan);
  background:rgba(6,182,212,.07);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:17px;color:#F8FAFC;font-style:italic;
}
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;border:1px solid var(--line);}
.article-body th,.article-body td{padding:12px 14px;border:1px solid var(--line);text-align:left;color:#CBD5E1;}
.article-body th{background:rgba(163,230,53,.1);color:var(--text);font-weight:700;}
.pull-quote{
  margin:30px 0;padding:26px 30px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(163,230,53,.12),rgba(6,182,212,.1));
  border:1px solid rgba(163,230,53,.3);font-size:18px;line-height:1.65;
  color:#F8FAFC;font-weight:600;
}
.pull-quote i{color:var(--lime);margin-right:10px;}
.not-found{
  padding:50px 28px;border-radius:var(--radius);border:1px dashed rgba(148,163,184,.35);
  background:var(--bg-2);text-align:center;max-width:720px;
}
.not-found h2{font-size:22px;margin-bottom:12px;}
.not-found p{color:var(--muted);}
.not-found a.btn-primary{display:inline-flex;margin-top:14px;}
/* cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.feature-card{
  padding:26px 22px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,18,42,.85),rgba(14,14,30,.85));
  border:1px solid var(--line);transition:.25s;
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);box-shadow:0 12px 34px rgba(0,0,0,.5);}
.feature-card .fc-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(6,182,212,.13);color:var(--cyan);font-size:19px;margin-bottom:16px;
}
.feature-card h3{font-size:17px;margin-bottom:8px;}
.feature-card p{font-size:14.5px;color:var(--muted);margin:0;}
.btn-primary{
  display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:999px;
  font-weight:800;font-size:15px;background:linear-gradient(135deg,var(--lime),var(--cyan));
  color:#04150b;box-shadow:0 0 20px rgba(6,182,212,.4);transition:transform .22s,box-shadow .22s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(6,182,212,.62);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px;
  font-weight:700;font-size:15px;color:var(--text);border:1px solid rgba(148,163,184,.35);
}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.badge{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.03em;
  padding:6px 12px;border-radius:999px;background:rgba(148,163,184,.1);
  border:1px solid var(--line);color:#CBD5E1;
}
.badge i{color:var(--cyan);}
.channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.channel-card{
  padding:20px 18px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg-2);text-align:center;transition:.25s;
}
.channel-card:hover{border-color:rgba(6,182,212,.5);transform:translateY(-3px);}
.channel-card i{font-size:22px;color:var(--lime);margin-bottom:10px;display:block;}
.channel-card strong{display:block;font-size:15px;margin-bottom:4px;}
.channel-card span{font-size:13px;color:var(--muted);}
.cat-entry{
  display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(163,230,53,.09),rgba(6,182,212,.06));
  border:1px solid rgba(163,230,53,.25);transition:.25s;
}
.cat-entry:hover{border-color:var(--lime);transform:translateY(-3px);}
.cat-entry strong{font-size:16px;}
.cat-entry span{font-size:13.5px;color:var(--muted);}
.cat-entry em{font-size:13px;color:var(--cyan);font-style:normal;font-weight:700;}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:var(--bg-2);margin-bottom:14px;}
.faq-item h3{font-size:16.5px;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start;}
.faq-item h3 i{color:var(--lime);margin-top:4px;}
.faq-item p{margin:0;font-size:14.8px;color:var(--muted);}
.cta-band{
  border-radius:var(--radius);padding:40px 34px;border:1px solid rgba(163,230,53,.3);
  background:linear-gradient(120deg,rgba(163,230,53,.12),rgba(6,182,212,.1)),
  url('/assets/images/4c62d32905f56dde.jpg') center/cover no-repeat;
  display:grid;grid-template-columns:1.5fr .5fr;gap:26px;align-items:center;
  position:relative;overflow:hidden;
}
.cta-band::before{content:"";position:absolute;inset:0;background:rgba(7,7,13,.78);}
.cta-band > *{position:relative;z-index:2;}
.cta-band h2{font-size:clamp(21px,2.6vw,28px);margin-bottom:12px;}
.cta-band p{color:#CBD5E1;margin-bottom:0;}
.trust-strip{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;}
.trust-strip .ts{display:flex;align-items:center;gap:10px;font-size:14px;color:#CBD5E1;}
.trust-strip .ts i{color:var(--lime);font-size:18px;}
.age-badge{
  display:inline-grid;place-items:center;width:35px;height:35px;border-radius:50%;
  border:1.5px solid var(--pink);color:var(--pink);font-weight:800;font-size:12.5px;flex:0 0 35px;
}
.related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.rel-card{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);
  transition:.25s;display:flex;flex-direction:column;
}
.rel-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);}
.rel-card img{aspect-ratio:16/10;object-fit:cover;width:100%;}
.rel-card .rc-body{padding:18px;}
.rel-card h3{font-size:16px;margin-bottom:8px;}
.rel-card p{font-size:14px;color:var(--muted);margin:0;}
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:54px 0 26px;margin-top:0;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px;}
.site-footer h4{font-size:15px;margin-bottom:16px;color:var(--text);}
.site-footer p{font-size:14px;color:var(--muted);}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin-bottom:14px;}
.foot-brand .logo-mark{
  width:34px;height:34px;border-radius:10px;flex:0 0 34px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#03110a;font-weight:900;font-size:15px;
}
.foot-links{list-style:none;margin:0;padding:0;}
.foot-links li{margin-bottom:10px;}
.foot-links a{font-size:14px;color:var(--muted);}
.foot-links a:hover{color:var(--lime);}
.foot-pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.foot-pay span{
  font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px;
  background:rgba(148,163,184,.1);border:1px solid var(--line);color:#CBD5E1;
}
.foot-bottom{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:13px;color:var(--muted);
}
.fab{
  position:fixed;left:16px;bottom:96px;z-index:150;width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;background:rgba(7,7,13,.8);backdrop-filter:blur(10px);
  border:1.5px solid transparent;
  background-image:linear-gradient(rgba(7,7,13,.85),rgba(7,7,13,.85)),linear-gradient(135deg,var(--lime),var(--cyan));
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 0 20px rgba(6,182,212,.45);color:var(--lime);font-size:22px;
  transition:transform .22s,opacity .22s;opacity:.78;
}
.fab:hover{transform:scale(1.1);opacity:1;}
.fab:active{transform:scale(.94);}
.fab .dot{
  position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 10px rgba(244,63,94,.8);
  border:2px solid var(--bg);
}
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:130;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:12px 20px;
  background:rgba(7,7,13,.94);backdrop-filter:blur(12px);border-top:1px solid rgba(163,230,53,.3);
}
.sticky-cta span{font-size:14px;color:#CBD5E1;font-weight:600;}
.sticky-cta .sc-actions{display:flex;gap:10px;}
@media screen and (max-width:1024px){
  .hero-grid,.art-hero-inner,.grid-3,.grid-4,.related-list,.foot-grid,.channel-grid{grid-template-columns:1fr 1fr;}
  .art-hero-inner{gap:26px;}
  .cta-band{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .menu-toggle{display:block;}
}
@media screen and (max-width:768px){
  .section{padding:52px 0;}
  .hero-grid,.art-hero-inner,.grid-3,.grid-2,.grid-4,.related-list,.foot-grid,.channel-grid{grid-template-columns:1fr;}
  .nav-actions .btn-text{display:inline-flex;}
  .nav-actions .btn-solid{display:inline-flex;}
  .brand span{max-width:150px;font-size:13.5px;}
  .foot-bottom{flex-direction:column;}
}
@media screen and (max-width:520px){
  .hero-cta{flex-direction:column;align-items:stretch;}
  .btn-primary,.btn-ghost{justify-content:center;}
  .sticky-cta span{display:none;}
  .sticky-cta{justify-content:center;}
  .fab{bottom:82px;left:12px;width:50px;height:50px;font-size:19px;}
}

/* roulang page: category1 */
:root{
  --bg:#07070D;
  --bg-2:#0E0E1E;
  --bg-3:#12122a;
  --line:rgba(148,163,184,.16);
  --text:#FFFFFF;
  --muted:#94A3B8;
  --lime:#A3E635;
  --cyan:#06B6D4;
  --pink:#F43F5E;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --glow-lime:0 0 18px rgba(163,230,53,.35);
  --glow-cyan:0 0 18px rgba(6,182,212,.35);
  --container:1200px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;transition:color .2s ease;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0 0 14px;line-height:1.25;font-weight:800;}
p{margin:0 0 14px;color:#CBD5E1;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
.section{padding:72px 0;position:relative;}
.section--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);}
.section--deep{background:var(--bg-2);}
.section--tight{padding:52px 0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);font-weight:700;margin-bottom:14px;
}
.eyebrow i{color:var(--cyan);}
.sec-title{font-size:clamp(22px,2.6vw,32px);}
.sec-sub{color:var(--muted);font-size:15px;max-width:720px;}
/* ===== HEADER ===== */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(7,7,13,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;gap:18px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:15px;line-height:1.2;letter-spacing:-.01em;
}
.brand .logo-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 36px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  color:#03110a;font-weight:900;font-size:16px;
  box-shadow:var(--glow-lime);
}
.brand span{max-width:230px;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{
  padding:9px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);
  white-space:nowrap;
}
.nav-links a:hover{color:var(--text);background:rgba(148,163,184,.09);}
.nav-links a.active{color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));}
.nav-actions{display:flex;align-items:center;gap:8px;}
.btn-text{
  padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--lime);border:1px solid rgba(163,230,53,.4);
}
.btn-text:hover{background:rgba(163,230,53,.1);}
.btn-solid{
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:800;
  background:linear-gradient(135deg,var(--lime),#4ADE80);color:#04150b;
  box-shadow:0 0 15px rgba(163,230,53,.4);
  transition:transform .2s,box-shadow .2s;
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(163,230,53,.58);}
.menu-toggle{display:none;font-size:20px;color:var(--text);padding:8px;}
.mobile-panel{
  display:none;flex-direction:column;gap:6px;
  padding:14px 20px 20px;border-top:1px solid var(--line);
  background:rgba(7,7,13,.98);
}
.mobile-panel a{padding:10px 4px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:1px dashed rgba(148,163,184,.12);}
.mobile-panel a.active{color:var(--lime);}
.mobile-panel .m-actions{display:flex;gap:10px;margin-top:12px;}
/* ===== HERO ===== */
.hero{
  position:relative;overflow:hidden;
  padding:78px 0 66px;
  background:
    linear-gradient(120deg,rgba(7,7,13,.95) 0%,rgba(14,14,30,.9) 60%,rgba(7,7,13,.95) 100%),
    url('/assets/images/be6776f8b4c62cc0.jpg') center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 30% 40%,#000 0%,transparent 78%);
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start;
}
.hero h1{font-size:clamp(27px,3.7vw,44px);margin-bottom:18px;}
.hero .lede{font-size:17px;line-height:1.7;color:#CBD5E1;max-width:640px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px;}
.btn-primary{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#04150b;
  box-shadow:0 0 20px rgba(6,182,212,.4);
  transition:transform .22s,box-shadow .22s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(6,182,212,.62);}
.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-solid:focus-visible,.btn-text:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;
  color:var(--text);border:1px solid rgba(148,163,184,.35);
}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.03em;
  padding:6px 12px;border-radius:999px;
  background:rgba(148,163,184,.1);border:1px solid var(--line);color:#CBD5E1;
}
.badge i{color:var(--cyan);}
/* Hero side panel */
.panel{
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,18,42,.92),rgba(14,14,30,.92));
  border:1px solid var(--line);
  padding:24px;
  box-shadow:var(--shadow);
}
.panel h3{font-size:16px;display:flex;align-items:center;gap:9px;}
.panel h3 i{color:var(--lime);}
.check-list li{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 0;border-bottom:1px dashed rgba(148,163,184,.14);
  font-size:14.5px;color:#CBD5E1;
}
.check-list li:last-child{border-bottom:none;}
.check-list i{color:var(--lime);margin-top:4px;}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px dashed rgba(148,163,184,.14);font-size:14px;}
.status-row:last-child{border-bottom:none;}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px;}
.dot--on{background:var(--lime);box-shadow:0 0 10px rgba(163,230,53,.8);}
.dot--warn{background:#FACC15;box-shadow:0 0 10px rgba(250,204,21,.7);}
/* ===== FEATURE GRID ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.feature-card{
  padding:26px 22px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,18,42,.85),rgba(14,14,30,.85));
  border:1px solid var(--line);transition:.25s;
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);box-shadow:0 12px 34px rgba(0,0,0,.5);}
.feature-card .fc-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(6,182,212,.13);color:var(--cyan);font-size:19px;margin-bottom:16px;
}
.feature-card h3{font-size:17px;margin-bottom:8px;}
.feature-card p{font-size:14.5px;margin:0;}
/* matrix */
.matrix-item{
  display:flex;gap:16px;padding:22px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
}
.matrix-item .m-num{
  flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-weight:900;color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));
  font-size:15px;
}
.matrix-item h3{font-size:16px;margin-bottom:6px;}
.matrix-item p{font-size:14.5px;margin:0;}
/* steps */
.step-list{display:grid;gap:16px;}
.step{
  display:grid;grid-template-columns:56px 1fr;gap:18px;
  padding:22px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
  transition:.25s;
}
.step:hover{border-color:rgba(6,182,212,.45);transform:translateX(4px);}
.step .s-num{
  width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  font-weight:900;font-size:19px;color:#04150b;
  background:linear-gradient(135deg,var(--cyan),var(--lime));
}
.step h3{font-size:16.5px;margin-bottom:6px;}
.step p{font-size:14.5px;margin:0;}
/* scenario cards */
.scene-card{
  border-radius:var(--radius);overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:.25s;
}
.scene-card:hover{transform:translateY(-5px);border-color:rgba(163,230,53,.42);}
.scene-card img{width:100%;height:180px;object-fit:cover;}
.scene-body{padding:22px;}
.scene-body h3{font-size:17px;margin-bottom:8px;}
.scene-body p{font-size:14.5px;margin-bottom:12px;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:5px 11px;border-radius:999px;
  background:rgba(163,230,53,.12);color:var(--lime);border:1px solid rgba(163,230,53,.28);
}
.tag--cyan{background:rgba(6,182,212,.12);color:var(--cyan);border-color:rgba(6,182,212,.3);}
/* stats */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:26px;border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(6,182,212,.1),rgba(163,230,53,.08));
  border:1px solid var(--line);
}
.stat b{display:block;font-size:26px;font-weight:900;color:var(--lime);line-height:1.2;}
.stat span{font-size:13.5px;color:var(--muted);}
/* evidence / review */
.review{
  padding:22px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
}
.review .stars{color:#FACC15;font-size:13px;margin-bottom:10px;}
.review p{font-size:14.5px;color:#CBD5E1;}
.review .who{display:flex;align-items:center;gap:11px;margin-top:14px;}
.avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#04150b;
  background:linear-gradient(135deg,var(--cyan),var(--lime));
}
.who b{font-size:14px;display:block;}
.who span{font-size:12.5px;color:var(--muted);}
/* compare table */
.compare{
  width:100%;border-collapse:collapse;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);
}
.compare th,.compare td{padding:14px 16px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);}
.compare th{background:var(--bg-3);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.compare td:first-child{color:var(--muted);width:38%;}
.compare tr:last-child td{border-bottom:none;}
.compare .good{color:var(--lime);font-weight:700;}
.compare .bad{color:var(--pink);font-weight:700;}
/* cms list */
.cms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.cms-card{
  border-radius:var(--radius);overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:.25s;
}
.cms-card:hover{transform:translateY(-5px);border-color:rgba(6,182,212,.45);}
.cms-card img{width:100%;height:172px;object-fit:cover;}
.cms-card .cms-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.cms-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin-bottom:10px;align-items:center;}
.cms-meta .cms-cat{
  padding:4px 10px;border-radius:999px;font-weight:700;
  background:rgba(163,230,53,.12);color:var(--lime);border:1px solid rgba(163,230,53,.28);
}
.cms-card h3{font-size:16px;margin-bottom:8px;}
.cms-card h3 a:hover{color:var(--lime);}
.cms-card p{font-size:14px;flex:1;}
.cms-more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--cyan);}
.cms-more:hover{color:var(--lime);}
.empty-note{padding:20px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:14px;}
/* faq */
.faq-list{display:grid;gap:14px;}
.faq-item{
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg-2);overflow:hidden;
}
.faq-q{
  width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:19px 22px;font-size:15.5px;font-weight:700;
}
.faq-q i{color:var(--lime);transition:transform .25s;flex:0 0 auto;}
.faq-item.open .faq-q i{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 22px 20px;margin:0;font-size:14.5px;}
/* CTA band */
.cta-band{
  border-radius:var(--radius);
  padding:42px 36px;
  background:linear-gradient(120deg,rgba(6,182,212,.16),rgba(163,230,53,.12));
  border:1px solid rgba(163,230,53,.3);
  text-align:center;
}
.cta-band h2{font-size:clamp(21px,2.6vw,30px);}
.cta-band p{max-width:700px;margin:0 auto 22px;}
/* category matrix */
.chan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.chan-card{
  padding:26px 22px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
  transition:.25s;display:flex;flex-direction:column;
}
.chan-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);}
.chan-card .chan-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(163,230,53,.12);color:var(--lime);font-size:18px;margin-bottom:15px;
}
.chan-card h3{font-size:17px;}
.chan-card p{font-size:14.5px;flex:1;}
.chan-link{font-size:13.5px;font-weight:700;color:var(--cyan);display:inline-flex;align-items:center;gap:7px;}
.chan-link:hover{color:var(--lime);}
/* FAB */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:50;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(7,7,13,.82);backdrop-filter:blur(10px);
  border:2px solid transparent;
  background-image:linear-gradient(rgba(7,7,13,.82),rgba(7,7,13,.82)),
                   linear-gradient(135deg,var(--cyan),var(--lime));
  background-origin:border-box;background-clip:padding-box,border-box;
  color:var(--lime);font-size:20px;
  box-shadow:0 0 20px rgba(6,182,212,.45);
  opacity:.78;transition:transform .25s,opacity .25s,box-shadow .25s;
  animation:fabPulse 3s ease-in-out infinite;
}
.fab:hover{opacity:1;transform:scale(1.1);box-shadow:0 0 30px rgba(6,182,212,.7);}
.fab:active{transform:scale(.94);}
.fab .fab-dot{
  position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 10px rgba(244,63,94,.9);
}
@keyframes fabPulse{0%,100%{box-shadow:0 0 18px rgba(6,182,212,.4);}50%{box-shadow:0 0 28px rgba(163,230,53,.6);}}
/* bottom bar */
.bottom-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 16px;background:rgba(7,7,13,.96);
  border-top:1px solid var(--line);backdrop-filter:blur(12px);
  gap:10px;
}
.bottom-bar .btn-primary,.bottom-bar .btn-ghost{flex:1;justify-content:center;padding:12px 10px;font-size:14px;}
/* ===== FOOTER ===== */
.site-footer{
  background:var(--bg-2);border-top:1px solid var(--line);
  padding:56px 0 26px;margin-top:0;
}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin-bottom:14px;}
.foot-brand .logo-mark{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  color:#03110a;font-weight:900;font-size:15px;
}
.site-footer h4{font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--lime);margin-bottom:14px;}
.site-footer p{font-size:14px;color:var(--muted);}
.foot-links li{margin-bottom:9px;}
.foot-links a{font-size:14px;color:#CBD5E1;}
.foot-links a:hover{color:var(--lime);}
.foot-pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.foot-pay span{
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;
  background:rgba(148,163,184,.1);border:1px solid var(--line);color:#CBD5E1;
}
.age-badge{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-weight:900;font-size:13px;color:#04150b;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .grid-3,.grid-4,.chan-grid,.cms-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-actions{display:none;}
  .menu-toggle{display:block;}
  .mobile-panel.open{display:flex;}
}
@media (max-width:768px){
  .section{padding:56px 0;}
  .grid-3,.grid-4,.chan-grid,.cms-grid,.grid-2{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .step{grid-template-columns:46px 1fr;padding:18px;}
  .step .s-num{width:46px;height:46px;font-size:16px;border-radius:12px;}
  .compare th,.compare td{padding:11px 12px;font-size:13.5px;}
  .cta-band{padding:32px 22px;}
  .bottom-bar{display:flex;}
  .fab{bottom:88px;}
  .brand span{max-width:180px;font-size:14px;}
}
@media (max-width:520px){
  body{font-size:15.5px;}
  .hero{padding:58px 0 52px;}
  .panel{padding:20px;}
  .review{padding:18px;}
  .foot-bottom{flex-direction:column;}
}

/* roulang page: category2 */
:root{
  --bg:#07070D;
  --bg-2:#0E0E1E;
  --bg-3:#12122a;
  --line:rgba(148,163,184,.16);
  --text:#FFFFFF;
  --muted:#94A3B8;
  --lime:#A3E635;
  --cyan:#06B6D4;
  --pink:#F43F5E;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --glow-lime:0 0 18px rgba(163,230,53,.35);
  --glow-cyan:0 0 18px rgba(6,182,212,.35);
  --container:1200px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;transition:color .2s ease;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3,h4{margin:0 0 14px;line-height:1.25;letter-spacing:-.01em;}
p{margin:0 0 14px;}
ul{margin:0;padding:0;list-style:none;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
.section{padding:72px 0;position:relative;}
.section--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);}
.section--deep{background:var(--bg-2);}
.section--tight{padding:52px 0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);font-weight:700;margin-bottom:14px;
}
.eyebrow i{color:var(--cyan);}
.section-head{max-width:760px;margin-bottom:34px;}
.section-head h2{font-size:clamp(22px,2.6vw,32px);}
.section-head p{color:#CBD5E1;font-size:15.5px;margin:0;}
/* HEADER */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(7,7,13,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;gap:18px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:15px;line-height:1.2;letter-spacing:-.01em;
}
.brand .logo-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 36px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
  color:#03110a;font-weight:900;font-size:16px;
  box-shadow:var(--glow-lime);
}
.brand span{max-width:230px;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{
  padding:9px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);
  white-space:nowrap;
}
.nav-links a:hover{color:var(--text);background:rgba(148,163,184,.09);}
.nav-links a.active{color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));}
.nav-actions{display:flex;align-items:center;gap:8px;}
.btn-text{
  padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--lime);border:1px solid rgba(163,230,53,.4);
}
.btn-text:hover{background:rgba(163,230,53,.1);}
.btn-solid{
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:800;
  background:linear-gradient(135deg,var(--lime),#4ADE80);color:#04150b;
  box-shadow:0 0 15px rgba(163,230,53,.4);
  transition:transform .2s,box-shadow .2s;
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(163,230,53,.58);}
.menu-toggle{display:none;font-size:20px;color:var(--text);padding:8px;}
.mobile-panel{
  display:none;flex-direction:column;gap:6px;
  padding:14px 20px 20px;border-top:1px solid var(--line);
  background:rgba(7,7,13,.98);
}
.mobile-panel.open{display:flex;}
.mobile-panel a{padding:10px 4px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:1px dashed rgba(148,163,184,.12);}
.mobile-panel a.active{color:var(--lime);}
.mobile-panel .m-actions{display:flex;gap:10px;margin-top:12px;}
/* HERO */
.hero{
  position:relative;overflow:hidden;
  padding:78px 0 70px;
  background:
    linear-gradient(120deg,rgba(7,7,13,.94) 0%,rgba(14,14,30,.9) 60%,rgba(7,7,13,.95) 100%),
    url('/assets/images/81e114041e0c7ed7.jpg') center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 30% 40%,#000 0%,transparent 78%);
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start;
}
.hero h1{font-size:clamp(27px,3.8vw,44px);margin-bottom:18px;}
.hero .lede{font-size:16.5px;line-height:1.7;color:#CBD5E1;max-width:640px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 20px;}
.btn-primary{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#04150b;
  box-shadow:0 0 20px rgba(6,182,212,.4);
  transition:transform .22s,box-shadow .22s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(6,182,212,.62);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;
  color:var(--text);border:1px solid rgba(148,163,184,.35);
}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.03em;
  padding:6px 12px;border-radius:999px;
  background:rgba(148,163,184,.1);border:1px solid var(--line);color:#CBD5E1;
}
.badge i{color:var(--cyan);}
/* HERO SIDE PANEL */
.panel{
  background:linear-gradient(180deg,rgba(18,18,42,.92),rgba(14,14,30,.92));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow);
}
.panel h3{font-size:16px;margin-bottom:14px;}
.check-list li{
  display:flex;gap:11px;align-items:flex-start;
  padding:10px 0;border-bottom:1px dashed rgba(148,163,184,.14);
  font-size:14.5px;color:#CBD5E1;
}
.check-list li:last-child{border-bottom:none;padding-bottom:0;}
.check-list i{color:var(--lime);margin-top:4px;font-size:13px;}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
.stat{
  text-align:center;padding:14px 8px;border-radius:var(--radius-sm);
  background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.22);
}
.stat strong{display:block;font-size:19px;color:var(--lime);line-height:1.2;}
.stat span{font-size:12px;color:var(--muted);}
/* GRIDS */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.feature-card{
  padding:26px 22px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,18,42,.85),rgba(14,14,30,.85));
  border:1px solid var(--line);transition:transform .25s,border-color .25s,box-shadow .25s;
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);box-shadow:0 12px 34px rgba(0,0,0,.5);}
.feature-card .fc-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(6,182,212,.13);color:var(--cyan);font-size:19px;margin-bottom:16px;
}
.feature-card h3{font-size:16.5px;margin-bottom:8px;}
.feature-card p{font-size:14.5px;color:var(--muted);margin:0;}
/* CAUSE LIST */
.cause-item{
  display:flex;gap:16px;padding:22px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
  transition:border-color .25s,transform .25s;
}
.cause-item:hover{border-color:rgba(244,63,94,.45);transform:translateX(4px);}
.cause-item .c-num{
  flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-weight:900;color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));
  font-size:15px;
}
.cause-item h3{font-size:16px;margin-bottom:6px;}
.cause-item p{font-size:14px;color:var(--muted);margin:0;}
/* STEPS */
.step-list{counter-reset:step;display:grid;gap:16px;}
.step-item{
  position:relative;padding:20px 22px 20px 68px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(18,18,42,.9),rgba(14,14,30,.9));
  border:1px solid var(--line);
}
.step-item::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:20px;top:20px;
  font-weight:900;font-size:14px;color:#04150b;
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cyan),var(--lime));
}
.step-item h3{font-size:16px;margin-bottom:6px;}
.step-item p{font-size:14.3px;color:var(--muted);margin:0;}
/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;}
.split img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);}
.split h2{font-size:clamp(21px,2.4vw,30px);}
.tick-list li{
  display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:14.8px;color:#CBD5E1;
}
.tick-list i{color:var(--cyan);margin-top:5px;font-size:13px;}
/* COMPARE TABLE */
.compare{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);}
.compare table{width:100%;border-collapse:collapse;min-width:560px;background:var(--bg-2);}
.compare th,.compare td{padding:15px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);}
.compare th{background:rgba(6,182,212,.1);color:var(--lime);font-size:13px;text-transform:uppercase;letter-spacing:.06em;}
.compare td{color:#CBD5E1;}
.compare tr:last-child td{border-bottom:none;}
.compare td.good{color:var(--lime);font-weight:700;}
.compare td.bad{color:var(--pink);}
/* REVIEWS */
.review{
  padding:24px 22px;border-radius:var(--radius);background:var(--bg-2);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;
}
.review .stars{color:#FACC15;font-size:13px;letter-spacing:2px;}
.review p{font-size:14.5px;color:#CBD5E1;margin:0;}
.review .who{display:flex;align-items:center;gap:10px;margin-top:auto;}
.review .who .av{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#04150b;font-weight:900;font-size:14px;
}
.review .who span{font-size:13px;color:var(--muted);}
/* ARTICLE LIST */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.news-card{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(18,18,42,.85),rgba(14,14,30,.9));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .25s,border-color .25s;
}
.news-card:hover{transform:translateY(-4px);border-color:rgba(6,182,212,.5);}
.news-card img{width:100%;height:172px;object-fit:cover;border-bottom:1px solid var(--line);}
.news-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1;}
.news-body .n-meta{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.news-body h3{font-size:16px;margin:0;}
.news-body h3 a:hover{color:var(--lime);}
.news-body p{font-size:14px;color:var(--muted);margin:0;flex:1;}
.read-more{font-size:13.5px;font-weight:700;color:var(--cyan);display:inline-flex;align-items:center;gap:7px;}
.read-more:hover{color:var(--lime);}
.empty-note{color:var(--muted);font-size:15px;padding:24px;border:1px dashed var(--line);border-radius:var(--radius);text-align:center;}
/* FAQ */
.faq-item{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);margin-bottom:12px;overflow:hidden;
}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 20px;font-size:15.5px;font-weight:700;text-align:left;color:var(--text);
}
.faq-q:hover{color:var(--lime);}
.faq-q i{color:var(--cyan);transition:transform .25s;flex:0 0 auto;}
.faq-item.open .faq-q i{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 20px 18px;font-size:14.5px;color:#CBD5E1;margin:0;}
/* GUARANTEE */
.guarantee-bar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:26px 24px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(163,230,53,.08));
  border:1px solid rgba(6,182,212,.28);
}
.guarantee-bar .g-item{display:flex;gap:12px;align-items:flex-start;}
.guarantee-bar .g-item i{color:var(--lime);font-size:18px;margin-top:3px;}
.guarantee-bar .g-item strong{display:block;font-size:15px;margin-bottom:3px;}
.guarantee-bar .g-item span{font-size:13.3px;color:var(--muted);}
/* CTA */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius);
  padding:44px 38px;
  background:
    linear-gradient(120deg,rgba(7,7,13,.93),rgba(14,14,30,.9)),
    url('/assets/images/4c62d32905f56dde.jpg') center/cover no-repeat;
  border:1px solid rgba(163,230,53,.3);
  text-align:center;
}
.cta-band h2{font-size:clamp(21px,2.6vw,30px);}
.cta-band p{color:#CBD5E1;max-width:660px;margin:0 auto 22px;font-size:15.5px;}
.cta-band .hero-cta{justify-content:center;margin-bottom:0;}
/* FOOTER */
.site-footer{background:#04040A;border-top:1px solid var(--line);padding:56px 0 26px;margin-top:0;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:32px;}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin-bottom:12px;}
.foot-brand .logo-mark{
  width:34px;height:34px;border-radius:9px;flex:0 0 34px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#03110a;font-weight:900;font-size:15px;
}
.site-footer p{font-size:14px;color:var(--muted);}
.site-footer h4{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--text);margin-bottom:14px;}
.foot-links li{margin-bottom:9px;}
.foot-links a{font-size:14px;color:var(--muted);}
.foot-links a:hover{color:var(--lime);}
.foot-pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.foot-pay span{
  font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);color:#CBD5E1;background:rgba(148,163,184,.08);
}
.age-badge{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--pink);color:var(--pink);font-weight:900;font-size:12px;
}
.foot-bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:32px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
/* FAB */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:50;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(7,7,13,.82);backdrop-filter:blur(10px);
  border:2px solid transparent;
  background-image:linear-gradient(rgba(7,7,13,.85),rgba(7,7,13,.85)),
    linear-gradient(135deg,var(--lime),var(--cyan));
  background-origin:border-box;background-clip:padding-box,border-box;
  color:var(--lime);font-size:20px;
  box-shadow:0 0 20px rgba(6,182,212,.45);
  animation:pulseFab 3s ease-in-out infinite;
}
.fab:hover{transform:scale(1.1);}
.fab:active{transform:scale(.95);}
@keyframes pulseFab{
  0%,100%{box-shadow:0 0 18px rgba(6,182,212,.4);}
  50%{box-shadow:0 0 30px rgba(163,230,53,.6);}
}
.fab .dot{
  position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;
  background:var(--pink);border:2px solid #07070D;
}
/* RESPONSIVE */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .guarantee-bar{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:26px;}
  .news-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .nav-links,.nav-actions{display:none;}
  .menu-toggle{display:block;}
  .section{padding:54px 0;}
  .grid-3,.grid-2,.split{grid-template-columns:1fr;gap:20px;}
  .brand span{max-width:170px;font-size:13.5px;}
  .cta-band{padding:34px 22px;}
  .compare table{min-width:520px;}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr;}
  .news-grid{grid-template-columns:1fr;}
  .guarantee-bar{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:24px;}
  .stat-row{grid-template-columns:1fr;}
  .hero{padding:56px 0 50px;}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{width:100%;justify-content:center;}
  .foot-bottom{flex-direction:column;}
}

/* roulang page: category3 */
:root{
  --bg:#07070D;
  --bg-2:#0E0E1E;
  --bg-3:#12122a;
  --line:rgba(148,163,184,.16);
  --text:#FFFFFF;
  --muted:#94A3B8;
  --lime:#A3E635;
  --cyan:#06B6D4;
  --pink:#F43F5E;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --glow-lime:0 0 18px rgba(163,230,53,.35);
  --glow-cyan:0 0 18px rgba(6,182,212,.35);
  --container:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;transition:color .2s ease;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3,h4{margin:0 0 12px;line-height:1.28;font-weight:800;letter-spacing:-.01em;}
p{margin:0 0 14px;color:#CBD5E1;}
ul{margin:0;padding:0;list-style:none;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
.section{padding:72px 0;position:relative;}
.section--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);}
.section--deep{background:var(--bg-2);}
.section-head{max-width:760px;margin-bottom:38px;}
.section-head h2{font-size:clamp(22px,3vw,32px);}
.section-head p{font-size:15.5px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);font-weight:700;margin-bottom:14px;
}
.eyebrow i{color:var(--cyan);}
/* HEADER */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(7,7,13,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;line-height:1.2;}
.brand .logo-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 36px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#03110a;font-weight:900;font-size:16px;
  box-shadow:var(--glow-lime);
}
.brand span{max-width:230px;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-links a{padding:9px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;}
.nav-links a:hover{color:var(--text);background:rgba(148,163,184,.09);}
.nav-links a.active{color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));}
.nav-actions{display:flex;align-items:center;gap:8px;}
.btn-text{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--lime);border:1px solid rgba(163,230,53,.4);}
.btn-text:hover{background:rgba(163,230,53,.1);}
.btn-solid{
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:800;
  background:linear-gradient(135deg,var(--lime),#4ADE80);color:#04150b;
  box-shadow:0 0 15px rgba(163,230,53,.4);transition:transform .2s,box-shadow .2s;
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(163,230,53,.58);}
.menu-toggle{display:none;font-size:20px;color:var(--text);padding:8px;}
.mobile-panel{display:none;flex-direction:column;gap:6px;padding:14px 20px 20px;border-top:1px solid var(--line);background:rgba(7,7,13,.98);}
.mobile-panel a{padding:10px 4px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:1px dashed rgba(148,163,184,.12);}
.mobile-panel a.active{color:var(--lime);}
.mobile-panel .m-actions{display:flex;gap:10px;margin-top:12px;}
/* HERO */
.hero{
  position:relative;overflow:hidden;padding:78px 0 64px;
  background:
    linear-gradient(115deg,rgba(7,7,13,.95) 0%,rgba(14,14,30,.9) 58%,rgba(7,7,13,.95) 100%),
    url('/assets/images/81e114041e0c7ed7.jpg') center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 32% 42%,#000 0%,transparent 78%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:start;}
.hero h1{font-size:clamp(27px,3.9vw,44px);margin-bottom:18px;}
.hero .lede{font-size:16.5px;line-height:1.72;color:#CBD5E1;max-width:620px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px;}
.btn-primary{
  display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:999px;
  font-weight:800;font-size:15px;background:linear-gradient(135deg,var(--lime),var(--cyan));color:#04150b;
  box-shadow:0 0 20px rgba(6,182,212,.4);transition:transform .22s,box-shadow .22s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(6,182,212,.62);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px;
  font-weight:700;font-size:15px;color:var(--text);border:1px solid rgba(148,163,184,.35);
}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;}
.badge{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.03em;
  padding:6px 12px;border-radius:999px;background:rgba(148,163,184,.1);border:1px solid var(--line);color:#CBD5E1;
}
.badge i{color:var(--cyan);}
.badge--pink i{color:var(--pink);}
/* HERO SIDE PANEL */
.panel-card{
  background:linear-gradient(180deg,rgba(18,18,42,.92),rgba(14,14,30,.92));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);
}
.panel-card h3{font-size:16px;display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.panel-card h3 i{color:var(--lime);}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed rgba(148,163,184,.15);font-size:14px;}
.stat-row:last-of-type{border-bottom:none;}
.stat-row span{color:var(--muted);}
.stat-row strong{color:var(--lime);font-size:15px;}
.stat-row strong.cy{color:var(--cyan);}
.panel-card .btn-primary{width:100%;justify-content:center;margin-top:16px;}
.panel-note{font-size:12.5px;color:var(--muted);margin:12px 0 0;}
/* GENERIC GRIDS */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
/* FEATURE CARD */
.feature-card{
  padding:26px 22px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,18,42,.85),rgba(14,14,30,.85));
  border:1px solid var(--line);transition:.25s;
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.45);box-shadow:0 12px 34px rgba(0,0,0,.5);}
.fc-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(6,182,212,.13);color:var(--cyan);font-size:19px;margin-bottom:16px;
}
.fc-icon.lime{background:rgba(163,230,53,.13);color:var(--lime);}
.fc-icon.pink{background:rgba(244,63,94,.13);color:var(--pink);}
.feature-card h3{font-size:17px;margin-bottom:8px;}
.feature-card p{font-size:14.5px;margin:0;}
/* MATRIX */
.matrix-item{display:flex;gap:16px;padding:22px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);}
.m-num{
  flex:0 0 42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-weight:900;color:#04150b;background:linear-gradient(135deg,var(--lime),var(--cyan));font-size:15px;
}
.matrix-item h3{font-size:16.5px;margin-bottom:6px;}
.matrix-item p{font-size:14.5px;margin:0;}
/* LOCAL IMAGE FIGURE */
.fig-frame{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-3);box-shadow:var(--shadow);
}
.fig-frame img{width:100%;height:320px;object-fit:cover;}
.fig-caption{padding:16px 20px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);}
/* SCENARIO LIST */
.scene-list li{
  display:flex;gap:14px;padding:16px 0;border-bottom:1px dashed rgba(148,163,184,.14);
}
.scene-list li:last-child{border-bottom:none;}
.scene-list i{
  flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(6,182,212,.12);color:var(--cyan);font-size:15px;
}
.scene-list strong{display:block;font-size:15.5px;margin-bottom:4px;}
.scene-list p{font-size:14.5px;margin:0;}
/* COMPARE TABLE */
.cmp-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;background:var(--bg-2);}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);}
table.cmp th{background:rgba(163,230,53,.07);color:var(--lime);font-size:13px;text-transform:uppercase;letter-spacing:.06em;}
table.cmp td:first-child{color:var(--muted);font-weight:600;}
table.cmp tr:hover td{background:rgba(6,182,212,.05);}
/* STEPS */
.step{display:flex;gap:16px;padding:20px;border-radius:var(--radius);background:var(--bg-3);border:1px solid var(--line);}
.step .s-dot{
  flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#04150b;font-weight:900;
}
.step h4{font-size:15.5px;margin-bottom:6px;}
.step p{font-size:14px;margin:0;}
/* METRIC STRIP */
.metric-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:26px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(18,18,42,.9),rgba(14,14,30,.9));
}
.metric{text-align:left;}
.metric b{display:block;font-size:24px;background:linear-gradient(135deg,var(--lime),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;}
.metric span{font-size:13.5px;color:var(--muted);}
/* NEWS LIST */
.news-card{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);transition:.25s;height:100%;display:flex;flex-direction:column;
}
.news-card:hover{transform:translateY(-4px);border-color:rgba(6,182,212,.45);box-shadow:0 14px 32px rgba(0,0,0,.5);}
.news-card img{height:180px;width:100%;object-fit:cover;}
.news-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.news-body h3{font-size:16px;margin:0;}
.news-body h3 a:hover{color:var(--lime);}
.news-body p{font-size:14px;margin:0;color:var(--muted);flex:1;}
.tag{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);
  padding:4px 10px;border-radius:999px;background:rgba(6,182,212,.12);width:fit-content;
}
.news-meta{font-size:12.5px;color:var(--muted);}
.empty-note{padding:24px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);text-align:center;}
.view-more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--lime);font-size:14.5px;}
.view-more:hover{color:var(--cyan);}
/* CATEGORY MATRIX */
.cat-card{
  display:block;padding:26px 24px;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(18,18,42,.85),rgba(14,14,30,.9));
  transition:.25s;
}
.cat-card:hover{border-color:rgba(163,230,53,.5);transform:translateY(-4px);}
.cat-card h3{font-size:17px;display:flex;align-items:center;gap:10px;}
.cat-card h3 i{color:var(--lime);}
.cat-card p{font-size:14.5px;margin:0;}
/* FAQ */
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);margin-bottom:12px;overflow:hidden;}
.faq-item summary{
  cursor:pointer;padding:18px 20px;font-weight:700;font-size:15.5px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--cyan);font-size:13px;}
.faq-item[open] summary::after{content:"\f068";}
.faq-item[open] summary{color:var(--lime);}
.faq-item .faq-body{padding:0 20px 20px;font-size:14.5px;color:#CBD5E1;}
/* CTA BAND */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius);
  padding:44px 38px;border:1px solid rgba(163,230,53,.3);
  background:
    linear-gradient(120deg,rgba(7,7,13,.94),rgba(14,14,30,.9)),
    url('/assets/images/e126fddaa3cc7c7d.jpg') center/cover no-repeat;
}
.cta-band h2{font-size:clamp(21px,2.8vw,29px);max-width:720px;}
.cta-band p{max-width:660px;font-size:15.5px;}
/* TRUST BAR */
.trust-bar{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding:20px 24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-3);
}
.trust-bar .tb-item{display:flex;align-items:center;gap:10px;font-size:14px;color:#CBD5E1;}
.trust-bar .tb-item i{color:var(--lime);}
.age-badge{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--pink);color:#fff;font-weight:900;font-size:13px;
}
/* CONTACT FORM */
.form-box{padding:26px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-2);}
.form-box label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:#CBD5E1;}
.form-box input,.form-box select,.form-box textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg-3);color:var(--text);
  font-family:inherit;font-size:14.5px;margin-bottom:16px;outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-box input:focus,.form-box select:focus,.form-box textarea:focus{
  border-color:var(--lime);box-shadow:0 0 0 3px rgba(163,230,53,.15);
}
.form-box .btn-primary{width:100%;justify-content:center;}
.form-note{font-size:12.5px;color:var(--muted);margin:12px 0 0;}
/* FAB */
.fab{
  position:fixed;left:16px;bottom:96px;z-index:50;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;color:var(--lime);
  background:rgba(7,7,13,.82);backdrop-filter:blur(10px);
  border:2px solid rgba(163,230,53,.6);
  box-shadow:0 0 20px rgba(6,182,212,.45);opacity:.8;
  transition:transform .25s,opacity .25s;
}
.fab:hover{transform:scale(1.1);opacity:1;}
.fab::after{
  content:"";position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 2px rgba(7,7,13,.9);
}
/* FOOTER */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:56px 0 26px;margin-top:0;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin-bottom:14px;}
.foot-brand .logo-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lime),var(--cyan));color:#03110a;font-weight:900;font-size:15px;
}
.site-footer h4{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--lime);margin-bottom:16px;}
.site-footer p{font-size:14px;color:var(--muted);}
.foot-links li{margin-bottom:10px;}
.foot-links a{font-size:14px;color:#CBD5E1;}
.foot-links a:hover{color:var(--lime);}
.foot-pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.foot-pay span{
  font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;
  background:rgba(148,163,184,.1);border:1px solid var(--line);color:#CBD5E1;
}
.foot-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:30px;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .metric-strip{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px;}
  .nav-links{display:none;}
  .menu-toggle{display:block;}
  .nav-actions .btn-text{display:none;}
}
@media (max-width:768px){
  .section{padding:54px 0;}
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .cta-band{padding:32px 24px;}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr;}
  .metric-strip{grid-template-columns:1fr;gap:14px;}
  .foot-grid{grid-template-columns:1fr;}
  .hero{padding:58px 0 48px;}
  .nav-wrap{height:62px;}
  .brand span{max-width:150px;font-size:13px;}
  .nav-actions .btn-solid{padding:9px 14px;font-size:13px;}
  .fab{bottom:110px;width:52px;height:52px;}
  .step{flex-direction:row;}
  .matrix-item{flex-direction:row;}
}