/* roulang page: index */
:root{
  --bg:#071018;
  --bg-soft:#0b141d;
  --surface:#101a25;
  --surface-2:#14202d;
  --surface-3:#182433;
  --text:#e8f0f7;
  --muted:#95a6b8;
  --line:rgba(164, 183, 201, .18);
  --line-strong:rgba(164, 183, 201, .28);
  --accent:#26d0b8;
  --accent-2:#f5a25c;
  --accent-3:#f36d7a;
  --accent-4:#9dd46f;
  --shadow:0 18px 45px rgba(0,0,0,.34);
  --shadow-soft:0 10px 28px rgba(0,0,0,.24);
  --radius:8px;
  --radius-sm:6px;
  --container:1180px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, #071018 0%, #09131b 42%, #081017 100%);
  min-height:100vh;
  line-height:1.65;
  overflow-x:hidden;
  color-scheme:dark;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

button,
input{
  font:inherit;
}

button{
  border:0;
  background:none;
}

::selection{
  background:rgba(38,208,184,.24);
  color:#fff;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

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

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(18px);
  background:rgba(7,16,24,.76);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:76px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
  font-weight:800;
  letter-spacing:0;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(38,208,184,.95), rgba(245,162,92,.88));
  color:#071018;
  font-size:13px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(38,208,184,.18);
  flex:0 0 auto;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.brand-text strong{
  display:block;
  font-size:16px;
  line-height:1.15;
  white-space:nowrap;
}

.brand-text span{
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  color:var(--muted);
  border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-link:hover,
.nav-link:focus-visible{
  color:var(--text);
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  transform:translateY(-1px);
  outline:none;
}

.nav-link.is-active{
  color:#061018;
  background:linear-gradient(135deg, var(--accent), #7fe3d5);
  border-color:transparent;
  box-shadow:0 12px 28px rgba(38,208,184,.16);
}

.header-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent-2), #ffbc82);
  color:#1b1209;
  font-weight:800;
  box-shadow:0 14px 30px rgba(245,162,92,.16);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.header-cta:hover,
.header-cta:focus-visible{
  transform:translateY(-1px);
  filter:saturate(1.05);
  box-shadow:0 16px 34px rgba(245,162,92,.2);
  outline:none;
}

main{
  padding-bottom:40px;
}

.section{
  padding:72px 0;
  position:relative;
}

.section + .section{
  border-top:1px solid rgba(255,255,255,.04);
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(38,208,184,.22);
  background:rgba(38,208,184,.08);
  color:#8ff0e3;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
}

.section-title{
  margin:12px 0 10px;
  font-size:30px;
  line-height:1.12;
  letter-spacing:0;
  text-wrap:balance;
}

.section-desc{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.hero{
  padding:46px 0 62px;
}

.hero-shell{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.95fr);
  gap:28px;
  align-items:stretch;
}

.hero-copy{
  padding:28px 0 12px;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(245,162,92,.1);
  border:1px solid rgba(245,162,92,.18);
  color:#ffd7b6;
  font-size:12px;
  font-weight:700;
}

.hero h1{
  margin:18px 0 16px;
  font-size:58px;
  line-height:1.03;
  letter-spacing:0;
  text-wrap:balance;
}

.hero-lead{
  margin:0;
  max-width:720px;
  color:#c8d3df;
  font-size:17px;
  line-height:1.9;
}

.hero-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:26px 0 0;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#dbe7f3;
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
  font-weight:600;
}

.badge.accent{
  background:rgba(38,208,184,.12);
  border-color:rgba(38,208,184,.18);
  color:#bff7ee;
}

.badge.warm{
  background:rgba(245,162,92,.12);
  border-color:rgba(245,162,92,.18);
  color:#ffd8b8;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}

.btn svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
}

.btn-primary{
  background:linear-gradient(135deg, var(--accent), #75e5d7);
  color:#071018;
  box-shadow:0 14px 28px rgba(38,208,184,.18);
}

.btn-primary:hover,
.btn-primary:focus-visible{
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 16px 34px rgba(38,208,184,.22);
}

.btn-secondary{
  background:rgba(255,255,255,.03);
  color:var(--text);
  border:1px solid rgba(255,255,255,.1);
}

.btn-secondary:hover,
.btn-secondary:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  outline:none;
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:30px;
}

.hero-metric{
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.hero-metric strong{
  display:block;
  font-size:24px;
  line-height:1.1;
  margin-bottom:4px;
}

.hero-metric span{
  color:var(--muted);
  font-size:13px;
}

.hero-panel{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(17,26,37,.96), rgba(11,20,29,.96));
  box-shadow:var(--shadow);
  display:grid;
  gap:16px;
}

.panel-top{
  padding:16px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(38,208,184,.1), rgba(245,162,92,.08));
  border:1px solid rgba(255,255,255,.08);
}

.panel-top h2{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.15;
}

.panel-top p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

.panel-points{
  display:grid;
  gap:10px;
}

.panel-point{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.point-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:7px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(38,208,184,.12);
  flex:0 0 auto;
}

.panel-point span{
  color:#dae5f0;
  font-size:14px;
  line-height:1.6;
}

.apply-form{
  display:grid;
  gap:10px;
  margin-top:2px;
}

.apply-field{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.12);
  background:#08111a;
  color:var(--text);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.apply-field::placeholder{
  color:#7f91a6;
}

.apply-field:focus{
  outline:none;
  border-color:rgba(38,208,184,.48);
  box-shadow:0 0 0 4px rgba(38,208,184,.12);
  background:#0a121d;
}

.panel-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.band{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.compare-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

.compare-card{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow-soft);
}

.compare-card strong{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  margin-bottom:12px;
}

.compare-card .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#071018;
  background:linear-gradient(135deg, var(--accent), #7ee4d6);
}

.compare-card ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.compare-card li{
  position:relative;
  padding-left:18px;
  color:#d7e3ef;
  font-size:14px;
  line-height:1.65;
}

.compare-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent-2);
}

.timeline{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

.timeline-step{
  position:relative;
  padding:18px;
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(20,32,45,.96), rgba(12,20,30,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}

.timeline-step::after{
  content:"";
  position:absolute;
  right:-8px;
  top:50%;
  width:16px;
  height:2px;
  background:linear-gradient(90deg, rgba(38,208,184,.65), rgba(245,162,92,.65));
  transform:translateY(-50%);
}

.timeline-step:last-child::after{
  display:none;
}

.step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  margin-bottom:14px;
  font-weight:900;
  color:#071018;
  background:linear-gradient(135deg, var(--accent), #8ce8dc);
}

.timeline-step h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
}

.timeline-step p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}

.category-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

.category-card{
  padding:22px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(17,26,37,.98), rgba(11,20,29,.98));
  box-shadow:var(--shadow-soft);
  display:grid;
  gap:16px;
}

.category-card .topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.category-card h3{
  margin:0;
  font-size:22px;
  line-height:1.18;
}

.category-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(38,208,184,.1);
  color:#bff7ee;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(38,208,184,.18);
}

.category-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.category-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.category-list li{
  padding:11px 12px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  color:#d8e5f2;
  font-size:14px;
}

.category-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}

.metrics-shell{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:18px;
  align-items:start;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

.metric-card{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow-soft);
}

.metric-card strong{
  display:block;
  font-size:32px;
  line-height:1.05;
  margin-bottom:6px;
}

.metric-card span{
  color:var(--muted);
  font-size:13px;
}

.trust-panel{
  padding:20px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(20,32,45,.95), rgba(11,20,29,.95));
  box-shadow:var(--shadow-soft);
}

.trust-panel h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.2;
}

.trust-panel p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.trust-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.trust-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#d8e5f2;
  font-size:14px;
  line-height:1.7;
}

.trust-list li::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:.45em;
  background:var(--accent-4);
  box-shadow:0 0 0 4px rgba(157,212,111,.12);
  flex:0 0 auto;
}

.news-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:18px;
  align-items:start;
}

.news-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}

.news-item{
  display:block;
  padding:16px 16px 16px 18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.news-item:hover,
.news-item:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(38,208,184,.22);
  background:rgba(255,255,255,.05);
  outline:none;
}

.news-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.news-time,
.news-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.news-time{
  background:rgba(255,255,255,.06);
  color:#d3deea;
}

.news-tag{
  background:rgba(245,162,92,.12);
  color:#ffd8ba;
}

.news-title{
  margin:0;
  font-size:16px;
  line-height:1.75;
  color:#edf4fb;
}

.news-side{
  padding:20px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(17,26,37,.98), rgba(11,20,29,.98));
  box-shadow:var(--shadow-soft);
}

.news-side h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.2;
}

.news-side p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.side-grid{
  display:grid;
  gap:10px;
}

.side-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}

.side-row strong{
  display:block;
  font-size:14px;
  line-height:1.5;
  margin-bottom:4px;
}

.side-row span{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.side-mark{
  width:11px;
  height:11px;
  border-radius:50%;
  margin-top:5px;
  background:var(--accent-3);
  box-shadow:0 0 0 4px rgba(243,109,122,.12);
  flex:0 0 auto;
}

.cta-shell{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:18px;
  align-items:stretch;
  padding:22px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(38,208,184,.08), rgba(245,162,92,.08)),
    linear-gradient(180deg, rgba(17,26,37,.98), rgba(11,20,29,.98));
  box-shadow:var(--shadow);
}

.cta-shell h2{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.15;
}

.cta-shell p{
  margin:0;
  color:#d2dde9;
  font-size:15px;
  line-height:1.85;
  max-width:700px;
}

.cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.cta-panel{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.cta-panel h3{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.2;
}

.cta-panel p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.cta-mini{
  display:grid;
  gap:10px;
}

.cta-mini .btn{
  width:100%;
}

.faq-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  gap:18px;
  align-items:start;
}

.faq-list{
  display:grid;
  gap:12px;
}

details.faq-item{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

details.faq-item[open]{
  border-color:rgba(38,208,184,.2);
  background:rgba(255,255,255,.05);
}

details.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  font-size:16px;
  font-weight:700;
  color:#eef4fb;
}

details.faq-item summary::-webkit-details-marker{
  display:none;
}

details.faq-item summary::after{
  content:"+";
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#dbe7f1;
  flex:0 0 auto;
}

details.faq-item[open] summary::after{
  content:"–";
  background:rgba(38,208,184,.12);
  color:#bff7ee;
}

.faq-answer{
  padding:0 18px 18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
}

.faq-side{
  padding:20px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(20,32,45,.95), rgba(11,20,29,.95));
  box-shadow:var(--shadow-soft);
}

.faq-side h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.2;
}

.faq-side p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.faq-side ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.faq-side li{
  padding:11px 12px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#d8e5f2;
  font-size:14px;
  line-height:1.65;
}

.site-footer{
  padding:28px 0 96px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(4,10,16,.72);
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) auto;
  gap:20px;
  align-items:start;
}

.footer-brand{
  display:grid;
  gap:10px;
  max-width:620px;
}

.footer-brand strong{
  font-size:18px;
  line-height:1.2;
}

.footer-brand p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
}

.footer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.footer-links a{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#dbe6f2;
  font-size:13px;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-1px);
  outline:none;
}

.footer-meta{
  margin-top:16px;
  color:#7f90a4;
  font-size:12px;
  line-height:1.7;
}

.mobile-tabs{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  display:none;
  gap:8px;
  padding:10px 12px 12px;
  background:rgba(7,16,24,.92);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.08);
}

.mobile-tab{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:54px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}

.mobile-tab svg{
  width:18px;
  height:18px;
}

.mobile-tab.is-active{
  color:#071018;
  background:linear-gradient(135deg, var(--accent), #7fe3d4);
  border-color:transparent;
}

.mobile-tab:hover,
.mobile-tab:focus-visible{
  transform:translateY(-1px);
  outline:none;
}

@media (max-width: 1080px){
  .hero-shell,
  .metrics-shell,
  .news-layout,
  .faq-layout,
  .cta-shell{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:50px;
  }

  .compare-grid,
  .timeline,
  .category-grid{
    grid-template-columns:1fr;
  }

  .timeline-step::after{
    display:none;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-links{
    justify-content:flex-start;
  }
}

@media (max-width: 820px){
  .site-nav,
  .header-cta{
    display:none;
  }

  .hero{
    padding-top:28px;
  }

  .hero h1{
    font-size:42px;
  }

  .hero-metrics,
  .metric-grid{
    grid-template-columns:1fr 1fr;
  }

  .section{
    padding:58px 0;
  }

  .site-footer{
    padding-bottom:118px;
  }

  .mobile-tabs{
    display:flex;
  }
}

@media (max-width: 560px){
  .container{
    width:min(var(--container), calc(100% - 22px));
  }

  .header-inner{
    min-height:68px;
  }

  .brand-mark{
    width:36px;
    height:36px;
    font-size:12px;
  }

  .brand-text strong{
    font-size:15px;
  }

  .brand-text span{
    font-size:11px;
  }

  .hero h1{
    font-size:34px;
  }

  .hero-lead,
  .section-desc,
  .cta-shell p,
  .panel-top p{
    font-size:14px;
  }

  .hero-metrics,
  .metric-grid{
    grid-template-columns:1fr;
  }

  .section-title{
    font-size:24px;
  }

  .cta-shell,
  .hero-panel,
  .category-card,
  .compare-card,
  .timeline-step,
  .news-side,
  .trust-panel,
  .faq-side,
  .panel-top{
    padding:16px;
  }

  .category-card h3,
  .cta-shell h2,
  .faq-side h3,
  .news-side h3,
  .trust-panel h3{
    font-size:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* roulang page: category2 */
:root {
            --bg: #0b1220;
            --bg-soft: #0f1a2d;
            --surface: #12213a;
            --surface-2: #162947;
            --line: rgba(183, 201, 226, 0.14);
            --line-strong: rgba(183, 201, 226, 0.22);
            --text: #eef4fb;
            --muted: #9bb0cb;
            --soft: #7f96b4;
            --accent: #2dd4bf;
            --accent-2: #f59e0b;
            --accent-3: #60a5fa;
            --accent-soft: rgba(45, 212, 191, 0.16);
            --danger: #fb7185;
            --shadow: 0 18px 48px rgba(2, 10, 24, 0.36);
            --shadow-soft: 0 10px 26px rgba(2, 10, 24, 0.22);
            --radius: 8px;
            --radius-sm: 6px;
            --container: 1180px;
            --space-1: 8px;
            --space-2: 12px;
            --space-3: 16px;
            --space-4: 20px;
            --space-5: 24px;
            --space-6: 32px;
            --space-7: 40px;
            --space-8: 56px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-width: 320px;
            color: var(--text);
            background:
                linear-gradient(180deg, #09111f 0%, #0b1322 100%);
            font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
            line-height: 1.6;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            padding-bottom: 92px;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
            background-size: 28px 28px;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 92%);
            opacity: 0.34;
            z-index: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        button {
            border: 0;
            background: none;
            color: inherit;
        }

        :focus-visible {
            outline: 2px solid rgba(45, 212, 191, 0.95);
            outline-offset: 2px;
        }

        .site-shell {
            position: relative;
            z-index: 1;
        }

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

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            backdrop-filter: blur(18px);
            background: rgba(8, 14, 26, 0.86);
            border-bottom: 1px solid var(--line);
        }

        .header-inner {
            min-height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-4);
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: var(--radius);
            background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(245, 158, 11, 0.18));
            border: 1px solid rgba(255, 255, 255, 0.10);
            color: #f7fbff;
            font-weight: 800;
            letter-spacing: 0;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
            flex: 0 0 auto;
        }

        .brand-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .brand-text strong {
            font-size: 1rem;
            line-height: 1.15;
            white-space: nowrap;
        }

        .brand-text span {
            font-size: 0.84rem;
            color: var(--muted);
            white-space: nowrap;
        }

        .site-nav {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 40px;
            padding: 0 14px;
            border: 1px solid transparent;
            border-radius: var(--radius);
            color: var(--muted);
            transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
        }

        .nav-link:hover {
            color: var(--text);
            background: rgba(255, 255, 255, 0.03);
            border-color: var(--line);
            transform: translateY(-1px);
        }

        .nav-link.is-active,
        .nav-link[aria-current="page"] {
            color: var(--text);
            background: rgba(45, 212, 191, 0.11);
            border-color: rgba(45, 212, 191, 0.22);
            box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.08);
        }

        .header-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            height: 42px;
            padding: 0 16px;
            border-radius: var(--radius);
            background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(96, 165, 250, 0.15));
            border: 1px solid rgba(45, 212, 191, 0.22);
            color: var(--text);
            font-weight: 600;
            transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
            box-shadow: var(--shadow-soft);
        }

        .header-cta svg,
        .btn svg,
        .tab-icon svg,
        .mini-icon svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
        }

        .header-cta:hover,
        .btn:hover {
            transform: translateY(-1px);
        }

        .header-cta:hover {
            border-color: rgba(45, 212, 191, 0.36);
            box-shadow: 0 16px 32px rgba(2, 10, 24, 0.30);
        }

        main {
            display: block;
        }

        .hero {
            padding: 54px 0 30px;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
            gap: var(--space-7);
            align-items: center;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: var(--radius);
            border: 1px solid rgba(45, 212, 191, 0.18);
            background: rgba(45, 212, 191, 0.08);
            color: #b9f4ea;
            font-size: 0.88rem;
            margin-bottom: 18px;
        }

        .eyebrow::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--accent);
            box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.16);
        }

        .hero h1 {
            margin: 0;
            font-size: 3.35rem;
            line-height: 1.06;
            letter-spacing: 0;
            max-width: 12ch;
        }

        .hero p {
            margin: 18px 0 0;
            max-width: 54ch;
            color: var(--muted);
            font-size: 1.03rem;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 28px;
        }

        .btn {
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 16px;
            border-radius: var(--radius);
            border: 1px solid transparent;
            font-weight: 700;
            transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
        }

        .btn-primary {
            color: #09111f;
            background: linear-gradient(135deg, #68f2df 0%, #2dd4bf 100%);
            box-shadow: 0 16px 28px rgba(45, 212, 191, 0.18);
        }

        .btn-primary:hover {
            box-shadow: 0 18px 30px rgba(45, 212, 191, 0.24);
        }

        .btn-secondary {
            color: var(--text);
            background: rgba(255, 255, 255, 0.02);
            border-color: var(--line);
        }

        .btn-secondary:hover {
            border-color: rgba(245, 158, 11, 0.25);
            background: rgba(245, 158, 11, 0.07);
        }

        .hero-meta {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin-top: 26px;
        }

        .metric {
            padding: 14px 14px 13px;
            border-radius: var(--radius);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--line);
        }

        .metric strong {
            display: block;
            font-size: 1.26rem;
            color: #f8fcff;
            margin-bottom: 4px;
        }

        .metric span {
            color: var(--muted);
            font-size: 0.9rem;
        }

        .hero-panel {
            position: relative;
            padding: 22px;
            border-radius: 14px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
                linear-gradient(180deg, rgba(18, 33, 58, 0.96), rgba(14, 24, 42, 0.96));
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .panel-head {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: center;
            margin-bottom: 18px;
        }

        .panel-title {
            margin: 0;
            font-size: 1.1rem;
            line-height: 1.3;
        }

        .panel-note {
            color: var(--soft);
            font-size: 0.9rem;
        }

        .progress-wrap {
            display: grid;
            grid-template-columns: 180px minmax(0, 1fr);
            gap: 18px;
            align-items: center;
        }

        .progress-ring {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            padding: 14px;
            background:
                conic-gradient(var(--accent) 0 calc(var(--value) * 1%), rgba(255, 255, 255, 0.08) 0 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
            margin: 0 auto;
        }

        .progress-ring-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: grid;
            place-items: center;
            text-align: center;
            background: linear-gradient(180deg, #0e1728 0%, #121f35 100%);
            border: 1px solid rgba(255, 255, 255, 0.04);
        }

        .progress-ring-inner strong {
            display: block;
            font-size: 2rem;
            line-height: 1;
        }

        .progress-ring-inner span {
            display: block;
            margin-top: 8px;
            color: var(--muted);
            font-size: 0.88rem;
        }

        .tier-list {
            display: grid;
            gap: 10px;
        }

        .tier {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: flex-start;
            padding: 14px 14px 13px;
            border-radius: var(--radius);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--line);
        }

        .tier strong {
            display: block;
            margin-bottom: 4px;
            font-size: 1rem;
        }

        .tier span {
            color: var(--muted);
            font-size: 0.88rem;
        }

        .tier em {
            font-style: normal;
            color: #dffcf7;
            background: rgba(45, 212, 191, 0.12);
            border: 1px solid rgba(45, 212, 191, 0.18);
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 0.82rem;
            white-space: nowrap;
        }

        .band {
            padding: 10px 0 6px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .stat {
            padding: 18px;
            border-radius: var(--radius);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--line);
        }

        .stat strong {
            display: block;
            margin-bottom: 6px;
            font-size: 1.4rem;
        }

        .stat span {
            color: var(--muted);
            font-size: 0.92rem;
        }

        .section {
            padding: 60px 0;
        }

        .section.alt {
            background: rgba(255, 255, 255, 0.015);
            border-top: 1px solid rgba(255, 255, 255, 0.04);
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 18px;
            margin-bottom: 22px;
        }

        .section-head h2 {
            margin: 0;
            font-size: 2rem;
            line-height: 1.1;
        }

        .section-head p {
            margin: 0;
            color: var(--muted);
            max-width: 46ch;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #d5feff;
            font-size: 0.88rem;
            margin-bottom: 12px;
        }

        .section-kicker::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: var(--accent-2);
            box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 14px;
        }

        .feature,
        .panel,
        .showcase,
        .cta-box {
            border-radius: 14px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, 0.03);
            box-shadow: var(--shadow-soft);
        }

        .feature {
            grid-column: span 4;
            padding: 22px;
            transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
        }

        .feature:hover {
            transform: translateY(-2px);
            border-color: rgba(45, 212, 191, 0.22);
            background: rgba(255, 255, 255, 0.045);
        }

        .mini-icon {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border-radius: var(--radius);
            margin-bottom: 14px;
            background: rgba(45, 212, 191, 0.12);
            color: #baf6eb;
            border: 1px solid rgba(45, 212, 191, 0.16);
        }

        .feature h3 {
            margin: 0 0 10px;
            font-size: 1.08rem;
        }

        .feature p {
            margin: 0;
            color: var(--muted);
        }

        .pair {
            display: grid;
            grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.98fr);
            gap: 14px;
            align-items: stretch;
        }

        .panel {
            padding: 22px;
        }

        .panel h3 {
            margin: 0 0 14px;
            font-size: 1.15rem;
        }

        .road-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 12px;
        }

        .road-item {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr);
            gap: 12px;
            align-items: start;
            padding: 14px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .road-item:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .road-num {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: var(--radius);
            font-weight: 800;
            color: #09111f;
            background: linear-gradient(135deg, #f9d64f 0%, #f59e0b 100%);
        }

        .road-item strong {
            display: block;
            margin-bottom: 4px;
            font-size: 1rem;
        }

        .road-item p {
            margin: 0;
            color: var(--muted);
        }

        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 18px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 36px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text);
        }

        .tag.hot {
            border-color: rgba(245, 158, 11, 0.22);
            background: rgba(245, 158, 11, 0.10);
        }

        .tag.new {
            border-color: rgba(45, 212, 191, 0.22);
            background: rgba(45, 212, 191, 0.10);
        }

        .tag.dim {
            color: var(--muted);
        }

        .bar-stack {
            display: grid;
            gap: 12px;
            margin-top: 18px;
        }

        .bar-row {
            display: grid;
            grid-template-columns: 88px minmax(0, 1fr) 42px;
            gap: 12px;
            align-items: center;
        }

        .bar-row span {
            color: var(--muted);
            font-size: 0.92rem;
        }

        .bar {
            height: 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.05);
            overflow: hidden;
        }

        .bar i {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #60a5fa 0%, #2dd4bf 100%);
        }

        .showcase-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .showcase {
            overflow: hidden;
            transition: transform 160ms ease, border-color 160ms ease;
        }

        .showcase:hover {
            transform: translateY(-2px);
            border-color: rgba(96, 165, 250, 0.22);
        }

        .showcase-top {
            padding: 18px 18px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
        }

        .showcase-top h3 {
            margin: 10px 0 8px;
            font-size: 1.12rem;
        }

        .showcase-top p {
            margin: 0;
            color: var(--muted);
        }

        .badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 30px;
            padding: 0 10px;
            border-radius: 999px;
            font-size: 0.82rem;
            border: 1px solid var(--line);
            color: var(--muted);
            background: rgba(255, 255, 255, 0.02);
        }

        .showcase-body {
            padding: 16px 18px 18px;
            display: grid;
            gap: 12px;
        }

        .showcase-line {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            padding-bottom: 12px;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
        }

        .showcase-line:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }

        .showcase-line span {
            color: var(--muted);
            font-size: 0.92rem;
        }

        .showcase-line strong {
            font-size: 0.98rem;
        }

        .qa-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
        }

        details.faq-item {
            border: 1px solid var(--line);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.03);
            overflow: hidden;
        }

        details.faq-item[open] {
            border-color: rgba(45, 212, 191, 0.18);
            background: rgba(255, 255, 255, 0.04);
        }

        details.faq-item summary {
            list-style: none;
            cursor: pointer;
            padding: 18px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            font-weight: 700;
        }

        details.faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-answer {
            padding: 0 18px 18px;
            color: var(--muted);
        }

        .faq-answer p {
            margin: 0;
        }

        .faq-chev {
            flex: 0 0 auto;
            width: 20px;
            height: 20px;
            color: var(--soft);
            transition: transform 160ms ease, color 160ms ease;
        }

        details[open] .faq-chev {
            transform: rotate(180deg);
            color: var(--text);
        }

        .cta-band {
            padding: 22px 0 70px;
        }

        .cta-box {
            padding: 26px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, 0.94fr);
            gap: 18px;
            align-items: center;
            background:
                linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(245, 158, 11, 0.08)),
                rgba(255, 255, 255, 0.03);
        }

        .cta-copy h2 {
            margin: 0 0 10px;
            font-size: 1.95rem;
            line-height: 1.15;
        }

        .cta-copy p {
            margin: 0;
            color: var(--muted);
            max-width: 52ch;
        }

        .cta-form {
            display: grid;
            gap: 12px;
        }

        .form-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 172px;
            gap: 10px;
        }

        .field {
            width: 100%;
            height: 46px;
            padding: 0 14px;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background: rgba(8, 14, 26, 0.74);
            color: var(--text);
            outline: none;
            transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
        }

        .field::placeholder {
            color: #7d92ae;
        }

        .field:focus {
            border-color: rgba(45, 212, 191, 0.34);
            box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.08);
        }

        .form-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .form-note {
            color: var(--soft);
            font-size: 0.88rem;
        }

        .site-footer {
            padding: 30px 0 34px;
            border-top: 1px solid var(--line);
            background: rgba(6, 11, 20, 0.76);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
            gap: 24px;
            align-items: start;
        }

        .footer-brand p {
            margin: 16px 0 14px;
            color: var(--muted);
            max-width: 52ch;
        }

        .footer-meta {
            color: var(--soft);
            font-size: 0.9rem;
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 10px;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            height: 38px;
            padding: 0 12px;
            border-radius: var(--radius);
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, 0.03);
            color: var(--muted);
            transition: color 160ms ease, border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
        }

        .footer-links a:hover {
            color: var(--text);
            border-color: rgba(45, 212, 191, 0.22);
            background: rgba(45, 212, 191, 0.08);
            transform: translateY(-1px);
        }

        .mobile-tabbar {
            display: none;
        }

        @media (max-width: 1120px) {
            .hero-grid,
            .pair,
            .cta-box,
            .footer-grid {
                grid-template-columns: 1fr;
            }

            .progress-wrap {
                grid-template-columns: 1fr;
                justify-items: center;
            }

            .progress-ring {
                margin-bottom: 8px;
            }

            .showcase-strip,
            .stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .feature {
                grid-column: span 6;
            }

            .hero h1 {
                max-width: 14ch;
            }

            .footer-links {
                justify-content: flex-start;
            }
        }

        @media (max-width: 768px) {
            body {
                padding-bottom: 84px;
            }

            .header-inner {
                min-height: 68px;
            }

            .site-nav {
                display: none;
            }

            .header-cta {
                display: none;
            }

            .hero {
                padding-top: 30px;
            }

            .hero h1 {
                font-size: 2.42rem;
            }

            .section-head {
                flex-direction: column;
                align-items: flex-start;
            }

            .section-head h2 {
                font-size: 1.64rem;
            }

            .hero-meta,
            .stats-grid,
            .showcase-strip {
                grid-template-columns: 1fr;
            }

            .feature {
                grid-column: span 12;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .cta-copy h2 {
                font-size: 1.58rem;
            }

            .footer-grid {
                gap: 18px;
            }

            .mobile-tabbar {
                display: flex;
                position: fixed;
                left: 10px;
                right: 10px;
                bottom: 10px;
                z-index: 30;
                padding: 8px;
                border-radius: 14px;
                background: rgba(8, 14, 26, 0.94);
                border: 1px solid rgba(255, 255, 255, 0.09);
                box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
                backdrop-filter: blur(18px);
                gap: 6px;
            }

            .mobile-tab {
                flex: 1 1 0;
                min-width: 0;
                display: grid;
                place-items: center;
                gap: 4px;
                padding: 9px 4px 7px;
                border-radius: 12px;
                color: var(--muted);
                transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
            }

            .mobile-tab:hover {
                color: var(--text);
                background: rgba(255, 255, 255, 0.03);
            }

            .mobile-tab.is-active {
                color: var(--text);
                background: rgba(45, 212, 191, 0.11);
            }

            .tab-icon {
                display: grid;
                place-items: center;
                width: 20px;
                height: 20px;
            }

            .mobile-tab span:last-child {
                font-size: 0.75rem;
                line-height: 1.15;
                white-space: nowrap;
            }
        }

        @media (max-width: 520px) {
            .container {
                width: min(var(--container), calc(100% - 24px));
            }

            .hero h1 {
                font-size: 2.02rem;
            }

            .hero p {
                font-size: 0.97rem;
            }

            .hero-panel,
            .panel,
            .cta-box {
                padding: 18px;
            }

            .panel-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .progress-ring {
                width: 164px;
                height: 164px;
            }

            .progress-ring-inner strong {
                font-size: 1.72rem;
            }

            .bar-row {
                grid-template-columns: 72px minmax(0, 1fr) 38px;
            }

            .brand-text span {
                white-space: normal;
                max-width: 140px;
            }

            .showcase-strip {
                display: grid;
                gap: 12px;
            }

            .road-item {
                grid-template-columns: 36px minmax(0, 1fr);
            }

            .road-num {
                width: 36px;
                height: 36px;
                font-size: 0.92rem;
            }

            .mobile-tabbar {
                left: 8px;
                right: 8px;
                bottom: 8px;
                gap: 4px;
            }
        }

/* roulang page: category1 */
:root{
    --bg:#08111d;
    --bg-soft:#0e1929;
    --panel:#111e31;
    --panel-2:#16233a;
    --line:rgba(148,177,217,.18);
    --line-strong:rgba(148,177,217,.28);
    --text:#ecf3ff;
    --muted:#9fb1cc;
    --muted-2:#7890b3;
    --brand:#6cebc4;
    --brand-2:#6ca8ff;
    --accent:#ffb56b;
    --warn:#ff6f8f;
    --shadow:0 24px 60px rgba(0,0,0,.32);
    --shadow-soft:0 12px 30px rgba(0,0,0,.22);
    --radius:8px;
    --radius-sm:6px;
    --container:1180px;
    --gap:clamp(18px,2vw,28px);
    --header-h:76px;
    --tabbar-h:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    color:var(--text);
    background:
        linear-gradient(180deg, rgba(11,19,31,.96), rgba(8,17,29,1) 44%, rgba(7,13,23,1) 100%),
        radial-gradient(circle at top left, rgba(108,235,196,.08), transparent 28%),
        radial-gradient(circle at 82% 16%, rgba(108,168,255,.08), transparent 24%);
    line-height:1.65;
    letter-spacing:0;
    min-height:100vh;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    padding-top:var(--header-h);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.04) 42%, rgba(0,0,0,0));
    opacity:.24;
    z-index:-1;
}

a{
    color:inherit;
    text-decoration:none;
    transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{
    outline:2px solid rgba(108,235,196,.85);
    outline-offset:2px;
}
::selection{
    background:rgba(108,235,196,.22);
    color:var(--text);
}

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

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--header-h);
    z-index:40;
    backdrop-filter:saturate(170%) blur(18px);
    background:rgba(8,17,29,.76);
    border-bottom:1px solid rgba(148,177,217,.12);
}
.header-inner{
    height:var(--header-h);
    display:flex;
    align-items:center;
    gap:18px;
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:0 0 auto;
}
.brand-mark{
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:
        linear-gradient(145deg, rgba(108,235,196,.22), rgba(108,168,255,.18)),
        #12233a;
    color:var(--text);
    border:1px solid rgba(108,235,196,.28);
    box-shadow:0 10px 22px rgba(0,0,0,.22);
    font-weight:800;
    letter-spacing:.02em;
}
.brand-text{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.brand-text strong{
    font-size:15px;
    line-height:1.15;
    letter-spacing:.01em;
}
.brand-text span{
    color:var(--muted);
    font-size:12px;
    margin-top:2px;
}

.site-nav{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
    padding:6px;
    border:1px solid rgba(148,177,217,.12);
    background:rgba(14,25,41,.62);
    border-radius:999px;
    box-shadow:var(--shadow-soft);
}
.nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:40px;
    padding:0 16px;
    border-radius:999px;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
}
.nav-link:hover{
    color:var(--text);
    background:rgba(255,255,255,.04);
}
.nav-link.is-active{
    color:#07131d;
    background:linear-gradient(135deg, var(--brand), #97f4d9);
    box-shadow:0 10px 24px rgba(108,235,196,.18);
}
.header-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    height:44px;
    padding:0 18px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(108,168,255,.18), rgba(108,235,196,.18));
    border:1px solid rgba(108,235,196,.28);
    color:var(--text);
    font-weight:700;
    flex:0 0 auto;
}
.header-cta svg{
    width:16px;
    height:16px;
}
.header-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 28px rgba(0,0,0,.24);
}

main{padding-bottom:60px}
.section{
    padding:clamp(26px,4.4vw,56px) 0;
}
.section-tight{padding-top:18px}
.section-heading{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:clamp(18px,2.6vw,28px);
}
.kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--brand);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.kicker::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--brand);
    box-shadow:0 0 0 5px rgba(108,235,196,.12);
}
.section-title{
    margin:0;
    font-size:clamp(24px,3vw,40px);
    line-height:1.08;
    letter-spacing:0;
}
.section-lead{
    margin:0;
    max-width:760px;
    color:var(--muted);
    font-size:16px;
}

.hero{
    padding:26px 0 14px;
}
.hero-shell{
    display:grid;
    grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);
    gap:clamp(18px,3vw,34px);
    align-items:stretch;
}
.hero-copy{
    padding:clamp(10px,1.2vw,18px) 0;
}
.badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}
.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:32px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(148,177,217,.16);
    background:rgba(255,255,255,.03);
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}
.badge--brand{
    border-color:rgba(108,235,196,.24);
    color:#c9fff0;
    background:rgba(108,235,196,.08);
}
.badge--accent{
    border-color:rgba(255,181,107,.26);
    color:#ffe0bf;
    background:rgba(255,181,107,.08);
}
.hero-title{
    margin:0;
    max-width:12ch;
    font-size:clamp(38px,5.5vw,72px);
    line-height:.98;
    letter-spacing:0;
}
.hero-summary{
    margin:18px 0 0;
    max-width:680px;
    color:var(--muted);
    font-size:17px;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 18px;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
}
.btn svg{
    width:16px;
    height:16px;
}
.btn-primary{
    color:#07131d;
    background:linear-gradient(135deg, var(--brand), #9ff4dc);
    box-shadow:0 16px 30px rgba(108,235,196,.18);
}
.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 36px rgba(108,235,196,.24);
}
.btn-secondary{
    color:var(--text);
    background:rgba(255,255,255,.03);
    border-color:rgba(148,177,217,.16);
}
.btn-secondary:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(148,177,217,.26);
    transform:translateY(-1px);
}

.hero-panel{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    border:1px solid rgba(148,177,217,.16);
    background:
        linear-gradient(180deg, rgba(21,35,58,.92), rgba(12,22,36,.95)),
        linear-gradient(135deg, rgba(108,168,255,.12), rgba(108,235,196,.12));
    box-shadow:var(--shadow);
    padding:22px;
}
.hero-panel::before{
    content:"";
    position:absolute;
    inset:auto -10% -40% auto;
    width:240px;
    height:240px;
    border-radius:28px;
    background:linear-gradient(145deg, rgba(108,168,255,.12), rgba(108,235,196,.08));
    transform:rotate(14deg);
    pointer-events:none;
}
.panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}
.panel-head h2{
    margin:0;
    font-size:20px;
    line-height:1.1;
}
.panel-head p{
    margin:8px 0 0;
    color:var(--muted);
    font-size:14px;
}
.panel-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:30px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(148,177,217,.16);
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    flex:0 0 auto;
}
.panel-grid{
    display:grid;
    gap:14px;
}
.progress-card{
    padding:16px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.035);
    border:1px solid rgba(148,177,217,.12);
}
.progress-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    font-size:14px;
}
.progress-top strong{
    color:#d9fef4;
}
.progress-track{
    height:10px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    overflow:hidden;
}
.progress-fill{
    width:78%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent));
    box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.progress-note{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
    color:var(--muted);
    font-size:13px;
}
.stat-row{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
}
.stat{
    border-radius:var(--radius);
    background:rgba(255,255,255,.03);
    border:1px solid rgba(148,177,217,.12);
    padding:14px;
}
.stat strong{
    display:block;
    font-size:24px;
    line-height:1;
    color:var(--text);
}
.stat span{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:12px;
}
.invite-box{
    padding:16px;
    border-radius:var(--radius);
    background:linear-gradient(145deg, rgba(108,235,196,.08), rgba(108,168,255,.06));
    border:1px solid rgba(108,235,196,.18);
}
.invite-box h3{
    margin:0 0 8px;
    font-size:16px;
}
.invite-box p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.invite-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}
.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:32px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(148,177,217,.14);
    color:var(--text);
    font-size:12px;
    font-weight:700;
}

.rail-wrap{
    position:relative;
}
.rail-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px, 1fr);
    gap:14px;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:rgba(148,177,217,.35) transparent;
}
.rail-track::-webkit-scrollbar{height:10px}
.rail-track::-webkit-scrollbar-track{background:transparent}
.rail-track::-webkit-scrollbar-thumb{
    background:rgba(148,177,217,.32);
    border-radius:999px;
}
.rail-card{
    scroll-snap-align:start;
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(18,31,50,.96), rgba(13,23,38,.96));
    border:1px solid rgba(148,177,217,.14);
    padding:18px;
    min-height:188px;
    box-shadow:var(--shadow-soft);
    display:flex;
    flex-direction:column;
    gap:14px;
}
.rail-card:hover{
    transform:translateY(-2px);
    border-color:rgba(108,235,196,.22);
}
.rail-card .tag{
    display:inline-flex;
    align-self:flex-start;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    color:var(--brand);
    border:1px solid rgba(108,235,196,.16);
    font-size:12px;
    font-weight:700;
}
.rail-card h3{
    margin:0;
    font-size:19px;
    line-height:1.15;
}
.rail-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.rail-card .link{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#dffcf4;
    font-weight:700;
}
.rail-card .link svg{
    width:14px;
    height:14px;
}
.rail-card--accent{
    background:
        linear-gradient(180deg, rgba(28,34,50,.98), rgba(14,21,35,.96)),
        linear-gradient(135deg, rgba(255,181,107,.12), rgba(108,235,196,.08));
}
.rail-card--accent .tag{
    color:#ffe1be;
    border-color:rgba(255,181,107,.2);
}
.rail-card--soft{
    background:
        linear-gradient(180deg, rgba(20,31,51,.98), rgba(12,20,34,.96)),
        linear-gradient(135deg, rgba(108,168,255,.12), rgba(108,235,196,.08));
}

.band{
    padding:0;
}
.band-shell{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
}
.band-card{
    border-radius:var(--radius);
    border:1px solid rgba(148,177,217,.14);
    background:rgba(255,255,255,.03);
    padding:18px;
    box-shadow:var(--shadow-soft);
}
.band-card strong{
    display:block;
    font-size:26px;
    line-height:1;
}
.band-card span{
    display:block;
    margin-top:10px;
    color:var(--muted);
    font-size:14px;
}

.split-grid{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
    gap:18px;
    align-items:start;
}
.feature-card{
    border-radius:var(--radius);
    border:1px solid rgba(148,177,217,.14);
    background:linear-gradient(180deg, rgba(18,30,49,.96), rgba(11,20,33,.96));
    box-shadow:var(--shadow-soft);
    padding:22px;
}
.feature-list{
    margin:18px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:12px;
}
.feature-list li{
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:var(--muted);
    font-size:15px;
}
.feature-list .dot{
    width:10px;
    height:10px;
    margin-top:7px;
    border-radius:999px;
    background:var(--brand);
    flex:0 0 auto;
    box-shadow:0 0 0 5px rgba(108,235,196,.12);
}
.feature-aside{
    display:grid;
    gap:14px;
}
.note-card{
    border-radius:var(--radius);
    border:1px solid rgba(148,177,217,.14);
    background:rgba(255,255,255,.03);
    padding:18px;
}
.note-card h3{
    margin:0 0 10px;
    font-size:18px;
}
.note-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.status-list{
    display:grid;
    gap:12px;
    margin-top:14px;
}
.status-item{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
    padding:12px 0;
    border-top:1px solid rgba(148,177,217,.12);
}
.status-item:first-child{
    border-top:0;
    padding-top:0;
}
.status-item strong{
    display:block;
    font-size:15px;
}
.status-item span{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-top:4px;
}
.pill{
    display:inline-flex;
    align-items:center;
    height:30px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(108,235,196,.08);
    color:#bcfff0;
    border:1px solid rgba(108,235,196,.18);
    font-size:12px;
    font-weight:700;
    flex:0 0 auto;
}

.grid-cards{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
}
.info-card{
    border-radius:var(--radius);
    border:1px solid rgba(148,177,217,.14);
    background:linear-gradient(180deg, rgba(17,28,46,.96), rgba(11,20,34,.96));
    padding:18px;
    min-height:180px;
    box-shadow:var(--shadow-soft);
}
.info-card .index{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:10px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(148,177,217,.16);
    font-weight:800;
    color:#e6f7ff;
}
.info-card h3{
    margin:14px 0 8px;
    font-size:18px;
    line-height:1.15;
}
.info-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.process{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
}
.step{
    padding:20px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.03);
    border:1px solid rgba(148,177,217,.14);
}
.step strong{
    display:block;
    font-size:17px;
    margin:10px 0 8px;
}
.step p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.step-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:12px;
    background:linear-gradient(135deg, rgba(108,235,196,.18), rgba(108,168,255,.18));
    border:1px solid rgba(108,235,196,.22);
    color:#dbfff6;
    font-weight:800;
}

.faq-list{
    display:grid;
    gap:12px;
}
details.faq-item{
    border-radius:var(--radius);
    border:1px solid rgba(148,177,217,.14);
    background:rgba(255,255,255,.03);
    padding:0 18px;
    box-shadow:var(--shadow-soft);
}
details.faq-item[open]{
    border-color:rgba(108,235,196,.22);
    background:rgba(255,255,255,.04);
}
details.faq-item summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 0;
    font-size:16px;
    font-weight:700;
}
details.faq-item summary::-webkit-details-marker{display:none}
.faq-answer{
    padding:0 0 18px;
    color:var(--muted);
    font-size:14px;
    max-width:860px;
}

.cta{
    padding-bottom:34px;
}
.cta-shell{
    border-radius:calc(var(--radius) + 2px);
    border:1px solid rgba(108,235,196,.18);
    background:
        linear-gradient(135deg, rgba(22,35,58,.98), rgba(11,19,32,.98)),
        linear-gradient(180deg, rgba(108,235,196,.08), rgba(255,181,107,.04));
    box-shadow:var(--shadow);
    padding:clamp(20px,3vw,34px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,.86fr);
    gap:18px;
    align-items:center;
}
.cta-copy h2{
    margin:0;
    font-size:clamp(28px,3.8vw,46px);
    line-height:1.04;
}
.cta-copy p{
    margin:14px 0 0;
    color:var(--muted);
    max-width:680px;
}
.form-card{
    border-radius:var(--radius);
    border:1px solid rgba(148,177,217,.14);
    background:rgba(255,255,255,.04);
    padding:18px;
}
.form-grid{
    display:grid;
    gap:12px;
}
.field{
    display:grid;
    gap:8px;
}
.field label{
    font-size:13px;
    color:var(--muted);
    font-weight:700;
}
.field input,.field select{
    width:100%;
    min-height:46px;
    border-radius:12px;
    border:1px solid rgba(148,177,217,.16);
    background:rgba(8,17,29,.68);
    color:var(--text);
    padding:0 14px;
    outline:none;
}
.field input::placeholder{
    color:#7290b8;
}
.field input:focus,.field select:focus{
    border-color:rgba(108,235,196,.44);
    box-shadow:0 0 0 4px rgba(108,235,196,.08);
}
.form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top:4px;
}
.form-hint{
    color:var(--muted-2);
    font-size:12px;
}

.site-footer{
    padding:28px 0 18px;
    border-top:1px solid rgba(148,177,217,.12);
    background:rgba(6,12,21,.92);
}
.footer-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
    gap:24px;
    align-items:start;
}
.footer-brand p{
    margin:14px 0 0;
    max-width:640px;
    color:var(--muted);
}
.footer-meta{
    margin-top:14px;
    color:var(--muted-2);
    font-size:13px;
}
.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}
.footer-links a{
    display:inline-flex;
    align-items:center;
    height:36px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid rgba(148,177,217,.14);
    color:var(--text);
    background:rgba(255,255,255,.03);
}
.footer-links a:hover{
    border-color:rgba(108,235,196,.22);
    background:rgba(255,255,255,.06);
}

.mobile-tabbar{
    display:none;
}

@media (max-width: 1024px){
    .hero-shell,
    .split-grid,
    .cta-shell,
    .footer-grid{
        grid-template-columns:1fr;
    }
    .grid-cards{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .band-shell{
        grid-template-columns:1fr;
    }
}

@media (max-width: 768px){
    body{
        padding-bottom:var(--tabbar-h);
    }
    .header-inner{
        gap:12px;
    }
    .site-nav{
        display:none;
    }
    .header-cta{
        margin-left:auto;
        padding-inline:14px;
    }
    .hero{
        padding-top:18px;
    }
    .hero-title{
        max-width:100%;
    }
    .stat-row{
        grid-template-columns:1fr;
    }
    .grid-cards,
    .process{
        grid-template-columns:1fr;
    }
    .section-title{
        font-size:clamp(22px,6vw,32px);
    }
    .hero-summary,
    .section-lead,
    .cta-copy p{
        font-size:15px;
    }
    .footer-links{
        justify-content:flex-start;
    }
    .mobile-tabbar{
        display:flex;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:35;
        height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        background:rgba(8,17,29,.92);
        backdrop-filter:blur(20px) saturate(160%);
        border-top:1px solid rgba(148,177,217,.12);
    }
    .mobile-tabbar__inner{
        width:min(var(--container), calc(100% - 6px));
        margin:0 auto;
        display:grid;
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:10px;
    }
    .mobile-tabbar__link{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        min-height:46px;
        border-radius:14px;
        color:var(--muted);
        border:1px solid rgba(148,177,217,.12);
        background:rgba(255,255,255,.03);
        font-size:11px;
        font-weight:700;
    }
    .mobile-tabbar__link svg{
        width:16px;
        height:16px;
    }
    .mobile-tabbar__link.is-active{
        color:#07131d;
        background:linear-gradient(135deg, var(--brand), #a7f7e0);
        border-color:rgba(108,235,196,.18);
    }
}

@media (max-width: 520px){
    .container{
        width:min(var(--container), calc(100% - 24px));
    }
    .header-cta{
        display:none;
    }
    .brand-text span{
        display:none;
    }
    .badge-row,
    .hero-actions,
    .invite-actions{
        gap:8px;
    }
    .rail-track{
        grid-auto-columns:minmax(220px, 84vw);
    }
    .hero-panel,
    .feature-card,
    .note-card,
    .form-card,
    .cta-shell{
        padding:16px;
    }
}