/* roulang page: index */
:root{
  --bg:#120D18;
  --bg-2:#1A1222;
  --bg-3:#24182E;
  --card:#1E1528;
  --card-2:#F6EFE6;
  --text:#F8F1EA;
  --text-soft:#D8CBDD;
  --text-dark:#211827;
  --muted:#9C8AA5;
  --line:#4A3658;
  --line-soft:rgba(255,255,255,.08);
  --pink:#FF3D7F;
  --orange:#FFB84D;
  --green:#B6FF5C;
  --purple:#7C5CFF;
  --shadow:0 20px 50px rgba(255,61,127,.16);
  --shadow-soft:0 18px 40px rgba(10,8,16,.32);
  --radius-xl:36px;
  --radius-lg:28px;
  --radius-md:22px;
  --radius-sm:16px;
  --container:1220px;
  --gap:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(124,92,255,.18), transparent 24%),
    radial-gradient(circle at 88% 15%, rgba(255,61,127,.14), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255,184,77,.10), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 44%, #0F0A14 100%);
  color:var(--text);
  line-height:1.75;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:.2s ease}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
::selection{background:rgba(255,61,127,.28);color:#fff}
.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:12px 16px;background:#fff;color:#000;z-index:9999;border-radius:999px}
.header{
  position:sticky;top:0;z-index:50;
  padding:16px 0 8px;
  backdrop-filter:blur(14px);
}
.nav-shell{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(20,14,28,.72);
  border-radius:999px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.brand{
  display:flex;align-items:center;gap:12px;
  min-width:max-content;
  font-weight:800;letter-spacing:.02em;
}
.brand-mark{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--orange));
  box-shadow:0 0 0 6px rgba(255,61,127,.12),0 0 20px rgba(255,61,127,.25);
}
.brand-name{font-size:1rem}
.nav{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
}
.nav a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px;
  border-radius:999px;
  color:var(--text-soft);
  border:1px solid transparent;
}
.nav a:hover,.nav a:focus{
  background:rgba(255,61,127,.13);
  color:#fff;
  border-color:rgba(255,61,127,.28);
  outline:none;
}
.nav a.active{
  background:linear-gradient(135deg, rgba(255,61,127,.96), rgba(255,184,77,.92));
  color:#fff;
  box-shadow:0 12px 24px rgba(255,61,127,.22);
}
.menu-btn{
  display:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:11px 14px;
}
.mobile-panel{display:none}
.hero{
  padding:34px 0 26px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:24px;
  align-items:stretch;
}
.hero-main,.hero-side,.panel,.card,.faq-item,.join-box,.table-wrap{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}
.hero-main{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(36,24,46,.94), rgba(18,13,24,.88));
  border-radius:var(--radius-xl);
  padding:34px;
}
.hero-main:before{
  content:'';
  position:absolute;inset:auto -10% -35% auto;
  width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,61,127,.20), rgba(255,61,127,0) 68%);
  pointer-events:none;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,184,77,.14);
  color:#FFE5BE;
  border:1px solid rgba(255,184,77,.22);
  font-size:14px;font-weight:700;
}
.hero h1{
  margin:16px 0 14px;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.hero p{
  margin:0;
  font-size:16px;
  color:var(--text-soft);
  max-width:62ch;
}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:22px 0 24px;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--text-soft);
  border:1px solid rgba(255,255,255,.08);
  font-size:14px;
}
.badge.pink{background:rgba(255,61,127,.15);color:#FFD4E2;border-color:rgba(255,61,127,.24)}
.badge.orange{background:rgba(255,184,77,.16);color:#FFE6C0;border-color:rgba(255,184,77,.24)}
.badge.green{background:rgba(182,255,92,.14);color:#E9FFBD;border-color:rgba(182,255,92,.20)}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:8px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 20px;border-radius:999px;
  border:1px solid transparent;
  transition:.2s ease;
  font-weight:700;
}
.btn-primary{
  background:linear-gradient(135deg,var(--pink),var(--orange));
  color:#fff;
  box-shadow:0 18px 30px rgba(255,61,127,.22);
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-secondary{
  background:rgba(255,255,255,.05);
  color:#fff;
  border-color:rgba(255,255,255,.10);
}
.btn-secondary:hover{background:rgba(255,61,127,.12);border-color:rgba(255,61,127,.24);transform:translateY(-2px)}
.hero-note{
  margin-top:18px;
  display:flex;flex-wrap:wrap;gap:12px;
  color:var(--muted);
  font-size:14px;
}
.hero-side{
  background:linear-gradient(180deg, rgba(255,246,235,.98), rgba(246,239,230,.96));
  color:var(--text-dark);
  border-radius:var(--radius-xl);
  padding:24px;
}
.side-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;
}
.side-title h2{margin:0;font-size:20px;line-height:1.2}
.side-title span{
  font-size:13px;font-weight:700;
  color:#7A5B69;
  background:rgba(255,61,127,.09);
  padding:7px 10px;border-radius:999px;
}
.matrix{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.matrix .mini{
  min-height:112px;
  border-radius:22px;
  padding:14px;
  background:#fff;
  border:1px solid rgba(33,24,39,.08);
  box-shadow:0 12px 20px rgba(33,24,39,.06);
}
.matrix .mini strong{display:block;font-size:16px;margin-bottom:8px}
.matrix .mini p{margin:0;font-size:14px;color:#6C5A70;line-height:1.6}
.matrix .mini.accent{
  background:linear-gradient(145deg, #ffeff4, #fff6e8);
  border-color:rgba(255,61,127,.12);
}
.section{
  padding:78px 0;
}
.section-head{
  display:flex;align-items:end;justify-content:space-between;gap:18px;
  margin-bottom:22px;
}
.section-head h2{
  margin:0;
  font-size:clamp(1.7rem,2.8vw,2.4rem);
  line-height:1.15;
}
.section-head p{
  margin:0;
  color:var(--text-soft);
  max-width:62ch;
}
.panel{
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-xl);
  padding:26px;
}
.table-wrap{
  border-radius:30px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
}
.compare-table th,.compare-table td{
  padding:18px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
.compare-table thead th{
  background:linear-gradient(135deg, rgba(255,61,127,.20), rgba(124,92,255,.18));
  color:#fff;
  font-size:15px;
  text-align:left;
}
.compare-table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.compare-table tbody td:first-child{
  width:24%;
  color:#FFE8EE;
  font-weight:700;
}
.compare-table td .mark{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:rgba(182,255,92,.14);
  color:#E9FFBD;
  font-size:13px;
  margin-right:8px;
  margin-bottom:6px;
}
.compare-table td .mark.orange{
  background:rgba(255,184,77,.16);
  color:#FFE6C0;
}
.compare-table td strong{color:#fff}
.compare-grid{
  display:none;
  gap:14px;
}
.compare-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  padding:18px;
}
.compare-card h3{margin:0 0 8px;font-size:20px}
.compare-card .price{color:#FFE6C0;font-weight:800;margin-bottom:10px}
.compare-card ul{margin:0;padding-left:18px;color:var(--text-soft)}
.highlights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.hl-card{
  position:relative;
  padding:24px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  min-height:220px;
  overflow:hidden;
  transition:.22s ease;
}
.hl-card:hover{transform:translateY(-5px);border-color:rgba(255,61,127,.32);box-shadow:0 20px 40px rgba(255,61,127,.12)}
.hl-card .num{
  display:inline-flex;
  width:56px;height:56px;border-radius:18px;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(255,61,127,.95), rgba(255,184,77,.92));
  color:#fff;font-weight:900;
  margin-bottom:16px;
}
.hl-card h3{margin:0 0 8px;font-size:22px}
.hl-card p{margin:0;color:var(--text-soft)}
.preview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.preview-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:18px;
  border-radius:32px;
  background:
    linear-gradient(180deg, rgba(30,21,40,.96), rgba(20,14,28,.94));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  transition:.22s ease;
}
.preview-card:nth-child(even){background:linear-gradient(180deg, rgba(246,239,230,.96), rgba(255,248,241,.96));color:var(--text-dark)}
.preview-card:hover{transform:translateY(-5px);border-color:rgba(255,184,77,.32);box-shadow:0 20px 40px rgba(255,184,77,.10)}
.preview-card .tag{
  align-self:flex-start;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  background:rgba(255,61,127,.16);
  color:#FFD5E2;
  margin-bottom:16px;
}
.preview-card:nth-child(even) .tag{background:rgba(124,92,255,.12);color:#5E4AF0}
.preview-card h3{
  margin:0 0 10px;
  font-size:22px;line-height:1.18;
}
.preview-card p{
  margin:0;
  color:inherit;
  opacity:.86;
}
.preview-footer{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:18px;
}
.mini-status{
  font-size:12px;
  padding:7px 10px;border-radius:999px;
  background:rgba(182,255,92,.14);
  color:#E9FFBD;
}
.preview-card:nth-child(even) .mini-status{background:rgba(255,184,77,.18);color:#8B5A10}
.link-btn{
  font-weight:800;
  color:#fff;
}
.preview-card:nth-child(even) .link-btn{color:#7A2953}
.faq{
  display:grid;
  gap:12px;
}
.faq-item{
  border-radius:24px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
.faq-item button{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:transparent;
  color:#fff;
  border:0;
  padding:18px 20px;
  text-align:left;
  font-weight:800;
}
.faq-item button span{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,61,127,.14);
  color:#FFD5E2;
  transition:.2s ease;
  flex:0 0 auto;
}
.faq-item[open] button span{transform:rotate(45deg);background:rgba(255,184,77,.16);color:#FFE6C0}
.faq-item .faq-body{
  padding:0 20px 18px;
  color:var(--text-soft);
  max-width:78ch;
}
.join{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
}
.join-box{
  background:linear-gradient(145deg, rgba(36,24,46,.96), rgba(18,13,24,.96));
  border-radius:36px;
  padding:28px;
}
.join-box h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.12}
.join-box p{margin:0;color:var(--text-soft)}
.form{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.field{
  display:grid;
  gap:8px;
}
.field label{
  font-size:14px;
  color:#EFDFF0;
  font-weight:700;
}
.field input,.field select,.field textarea{
  width:100%;
  min-height:50px;
  border-radius:18px;
  border:1px solid #4A3658;
  background:#17101F;
  color:#fff;
  padding:0 14px;
  outline:none;
  transition:.2s ease;
}
.field textarea{min-height:100px;padding:14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(255,61,127,.16);
}
.steps{
  background:linear-gradient(180deg, rgba(255,246,235,.96), rgba(246,239,230,.96));
  border-radius:36px;
  padding:28px;
  color:var(--text-dark);
}
.steps h3{margin:0 0 14px;font-size:24px}
.step-list{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.step-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 16px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(33,24,39,.08);
}
.step-dot{
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--pink),var(--orange));
  color:#fff;font-weight:900;flex:0 0 auto;
}
.footer{
  padding:34px 0 42px;
}
.footer-shell{
  padding:30px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(16,11,22,.98), rgba(26,18,34,.98));
  border:1px solid rgba(255,255,255,.08);
}
.footer-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  margin-bottom:20px;
}
.footer-brand{
  display:flex;flex-direction:column;gap:10px;
  max-width:42ch;
}
.footer-brand strong{font-size:22px}
.footer-brand span{color:var(--text-soft)}
.footer-links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.footer-links a{
  display:block;
  padding:10px 0;
  color:var(--text-soft);
}
.footer-links a:hover{color:#fff}
.footer-note{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:14px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
}
.pill-row{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:18px;
}
.section-divider{
  margin:0 auto;
  width:min(100%, var(--container));
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.soft-title{
  display:flex;align-items:center;gap:10px;font-weight:800;
  margin-bottom:14px;
}
.soft-title i{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;background:linear-gradient(135deg,var(--pink),var(--orange));
  box-shadow:0 0 0 6px rgba(255,61,127,.12);
}
.info-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
}
.story{
  border-radius:32px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:24px;
}
.story p{margin:0;color:var(--text-soft)}
.story ul{
  margin:14px 0 0;
  padding-left:18px;
  color:var(--text-soft);
}
.inline-tags{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px
}
.inline-tags span{
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#F3E8F4;font-size:12px;font-weight:700;
}
.stats{
  display:grid;
  gap:12px;
}
.stat{
  border-radius:24px;
  padding:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.stat strong{display:block;font-size:28px;line-height:1;color:#fff;margin-bottom:6px}
.stat span{color:var(--text-soft)}
@media (max-width: 1100px){
  .hero-grid,.join,.info-grid{grid-template-columns:1fr}
  .preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .highlights{grid-template-columns:1fr}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 860px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .mobile-panel{
    display:none;
    margin-top:10px;
    padding:14px;
    border-radius:24px;
    background:rgba(20,14,28,.96);
    border:1px solid rgba(255,255,255,.08);
  }
  .mobile-panel.open{display:block}
  .mobile-panel a{
    display:block;
    padding:12px 14px;
    border-radius:16px;
    color:var(--text-soft);
  }
  .mobile-panel a.active,.mobile-panel a:hover{background:rgba(255,61,127,.12);color:#fff}
  .compare-table{display:none}
  .compare-grid{display:grid}
  .section{padding:58px 0}
}
@media (max-width: 640px){
  .container{width:min(100% - 24px, var(--container))}
  .header{padding-top:10px}
  .nav-shell{padding:10px 12px}
  .hero-main,.hero-side,.join-box,.steps,.footer-shell{padding:20px}
  .hero h1{font-size:clamp(1.9rem,9vw,2.6rem)}
  .matrix{grid-template-columns:1fr}
  .preview-grid{grid-template-columns:1fr}
  .footer-top{flex-direction:column}
  .footer-links{grid-template-columns:1fr}
  .footer-note{flex-direction:column}
}

/* roulang page: category1 */
:root{
  --bg:#120D18;
  --bg2:#1A1222;
  --bg3:#24182E;
  --surface:#1B1422;
  --surface-2:#F6EFE6;
  --surface-3:#2A1F33;
  --text:#F8F1EA;
  --muted:#D8CBDD;
  --muted-2:#9D8BAA;
  --line:#4A3658;
  --line-2:#5A436A;
  --primary:#FF3D7F;
  --primary-2:#FF4F8B;
  --accent:#FFB84D;
  --accent-2:#B6FF5C;
  --violet:#7C5CFF;
  --shadow:0 24px 60px rgba(5, 1, 9, .38);
  --shadow-soft:0 14px 32px rgba(255, 61, 127, .12);
  --radius-xl:36px;
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --container:1200px;
  --gap:24px;
  --header-h:84px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,61,127,.16), transparent 26%),
    radial-gradient(circle at top right, rgba(124,92,255,.18), transparent 24%),
    linear-gradient(180deg, #120D18 0%, #17101E 45%, #120D18 100%);
  color:var(--text);
  line-height:1.75;
  letter-spacing:.01em;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{
  outline:3px solid rgba(255,61,127,.55);
  outline-offset:3px;
}
.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}
.site-wrap{
  position:relative;
  overflow:hidden;
}
.site-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 100%),
    linear-gradient(225deg, rgba(255,255,255,.025) 0 1px, transparent 1px 100%);
  background-size:72px 72px;
  opacity:.28;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15) 70%, transparent);
}
.header{
  position:sticky;
  top:16px;
  z-index:50;
  padding:0 0 4px;
}
.nav-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(27,20,34,.74);
  box-shadow:0 16px 44px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}
.brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 24px rgba(255,61,127,.28);
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand-text strong{
  font-size:16px;
  letter-spacing:.02em;
}
.brand-text span{
  font-size:12px;
  color:var(--muted-2);
  margin-top:5px;
}
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  padding:11px 16px;
  border-radius:999px;
  font-size:14px;
  color:var(--muted);
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover,
.nav a:focus-visible{
  background:rgba(255,61,127,.15);
  color:#fff;
  border-color:rgba(255,61,127,.32);
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(255,61,127,.12);
}
.nav a.active{
  background:linear-gradient(135deg, rgba(255,61,127,.96), rgba(255,184,77,.96));
  color:#fff;
  box-shadow:0 14px 28px rgba(255,61,127,.24);
}
.hero{
  position:relative;
  padding:72px 0 38px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:28px;
  align-items:stretch;
}
.hero-panel{
  position:relative;
  border-radius:var(--radius-xl);
  padding:34px;
  background:
    linear-gradient(180deg, rgba(36,24,46,.92), rgba(23,16,30,.96)),
    radial-gradient(circle at top right, rgba(255,61,127,.18), transparent 30%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:auto -20% -30% auto;
  width:320px;
  height:320px;
  background:radial-gradient(circle, rgba(255,61,127,.24), transparent 70%);
  filter:blur(8px);
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-size:13px;
}
.pulse{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--accent-2);
  box-shadow:0 0 0 6px rgba(182,255,92,.12);
}
.hero h1{
  margin:18px 0 14px;
  font-size:clamp(34px, 5vw, 50px);
  line-height:1.08;
  letter-spacing:.01em;
}
.hero p{
  max-width:680px;
  margin:0;
  color:var(--muted);
  font-size:16px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:50px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:0 16px 30px rgba(255,61,127,.26);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 20px 38px rgba(255,61,127,.34);
}
.btn-secondary{
  color:var(--text);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}
.btn-secondary:hover,
.btn-secondary:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,184,77,.35);
  background:rgba(255,184,77,.09);
}
.hero-meta{
  display:grid;
  gap:14px;
}
.side-card{
  border-radius:var(--radius-lg);
  padding:24px;
  background:linear-gradient(180deg, rgba(246,239,230,.98), rgba(238,228,216,.94));
  color:#221829;
  box-shadow:0 20px 42px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.42);
}
.side-card h2{
  margin:0 0 10px;
  font-size:20px;
}
.side-card p{
  margin:0;
  color:#5c4b60;
  font-size:15px;
}
.notice-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.notice{
  border-radius:22px;
  padding:16px;
  background:rgba(27,20,34,.55);
  border:1px solid rgba(255,255,255,.08);
}
.notice strong{
  display:block;
  font-size:16px;
  margin-bottom:6px;
}
.notice span{
  color:var(--muted-2);
  font-size:13px;
}
.section{
  padding:58px 0;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.section-head h2,
.section-head h3{
  margin:0;
  font-size:clamp(26px, 3.3vw, 36px);
  line-height:1.15;
}
.section-head p{
  margin:0;
  color:var(--muted-2);
  max-width:680px;
}
.panel{
  border-radius:var(--radius-xl);
  padding:28px;
  background:linear-gradient(180deg, rgba(30,22,38,.95), rgba(21,16,29,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}
.compare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
}
.compare-table thead th{
  text-align:left;
  font-size:14px;
  color:#fff;
  padding:16px 18px;
}
.compare-table tbody tr{
  background:rgba(255,255,255,.04);
}
.compare-table td,
.compare-table th{
  padding:16px 18px;
}
.compare-table tbody td{
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.compare-table tbody tr td:first-child{
  border-left:1px solid rgba(255,255,255,.06);
  border-top-left-radius:22px;
  border-bottom-left-radius:22px;
  color:#fff;
  font-weight:700;
}
.compare-table tbody tr td:last-child{
  border-right:1px solid rgba(255,255,255,.06);
  border-top-right-radius:22px;
  border-bottom-right-radius:22px;
}
.compare-table .highlight{
  background:rgba(255,61,127,.08);
  box-shadow:inset 0 0 0 1px rgba(255,61,127,.24);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.badge-pink{background:rgba(255,61,127,.14); color:#ffd6e5; border:1px solid rgba(255,61,127,.24);}
.badge-orange{background:rgba(255,184,77,.14); color:#ffe8be; border:1px solid rgba(255,184,77,.24);}
.badge-green{background:rgba(182,255,92,.14); color:#e6ffd0; border:1px solid rgba(182,255,92,.24);}
.badge-violet{background:rgba(124,92,255,.16); color:#e3dbff; border:1px solid rgba(124,92,255,.24);}
.level-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
.level-card{
  position:relative;
  border-radius:32px;
  padding:26px;
  background:linear-gradient(180deg, rgba(246,239,230,.95), rgba(236,224,212,.95));
  color:#221829;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 20px 38px rgba(0,0,0,.13);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.level-card:nth-child(2){
  background:linear-gradient(180deg, rgba(29,20,38,.95), rgba(36,24,46,.98));
  color:var(--text);
}
.level-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,61,127,.28);
  box-shadow:0 24px 44px rgba(255,61,127,.12);
}
.level-card .rank{
  font-size:46px;
  line-height:1;
  font-weight:900;
  color:rgba(255,61,127,.22);
  position:absolute;
  top:16px;
  right:18px;
}
.level-card h3{
  margin:10px 0 8px;
  font-size:24px;
}
.level-card p{
  margin:0 0 18px;
  color:inherit;
  opacity:.86;
}
.check-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.check-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:inherit;
  opacity:.92;
}
.check-list li::before{
  content:"";
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:4px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:0 0 0 5px rgba(255,61,127,.10);
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.vertical-card{
  border-radius:30px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  min-height:280px;
  display:flex;
  flex-direction:column;
}
.vertical-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,184,77,.3);
  box-shadow:0 24px 42px rgba(255,184,77,.08);
}
.visual{
  height:138px;
  border-radius:24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,61,127,.9), rgba(255,61,127,.18) 24%, transparent 26%),
    radial-gradient(circle at 80% 26%, rgba(182,255,92,.9), rgba(182,255,92,.18) 22%, transparent 24%),
    linear-gradient(135deg, rgba(124,92,255,.52), rgba(255,184,77,.42));
  position:relative;
  overflow:hidden;
}
.visual::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
}
.vertical-card h3{
  margin:14px 0 8px;
  font-size:20px;
  line-height:1.25;
}
.vertical-card p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:14px;
}
.card-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.small-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#fff;
  font-weight:700;
}
.small-link span{
  transition:transform .2s var(--ease);
}
.small-link:hover span{transform:translateX(2px)}
.flow{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:20px;
}
.steps{
  display:grid;
  gap:14px;
}
.step{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 18px 18px 16px;
  border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.step-num{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:linear-gradient(135deg, rgba(255,61,127,.95), rgba(255,184,77,.95));
  color:#fff;
  box-shadow:0 10px 22px rgba(255,61,127,.18);
}
.step h3{
  margin:0 0 6px;
  font-size:18px;
}
.step p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.summary{
  border-radius:30px;
  padding:24px;
  background:linear-gradient(180deg, rgba(246,239,230,.95), rgba(241,231,220,.95));
  color:#24162E;
  border:1px solid rgba(255,255,255,.36);
}
.summary h3{
  margin:0 0 12px;
  font-size:22px;
}
.summary ul{
  margin:0;
  padding-left:18px;
  color:#4f4156;
}
.summary li+li{margin-top:10px}
.faq-wrap{
  display:grid;
  gap:12px;
}
.faq-item{
  border-radius:24px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.faq-btn{
  width:100%;
  padding:18px 20px;
  background:transparent;
  border:0;
  color:#fff;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:700;
}
.faq-btn .icon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.faq-item[open] .faq-btn .icon{
  transform:rotate(45deg);
  background:rgba(255,61,127,.2);
}
.faq-body{
  padding:0 20px 20px;
  color:var(--muted);
}
.join-box{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.pass-card{
  border-radius:36px;
  padding:28px;
  background:
    radial-gradient(circle at top right, rgba(255,61,127,.16), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}
.pass-card h2{
  margin:0 0 10px;
  font-size:clamp(28px, 4vw, 40px);
  line-height:1.1;
}
.pass-card p{
  margin:0;
  color:var(--muted);
}
.form-grid{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.field{
  display:grid;
  gap:8px;
}
.field label{
  font-size:14px;
  color:#f1e5ef;
}
.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  background:rgba(16,10,24,.88);
  color:var(--text);
  border-radius:18px;
  padding:14px 16px;
  outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.field textarea{
  min-height:108px;
  resize:vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(255,61,127,.75);
  box-shadow:0 0 0 4px rgba(255,61,127,.15);
}
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.mini-note{
  margin-top:14px;
  color:var(--muted-2);
  font-size:13px;
}
.footer{
  margin-top:28px;
  padding:36px 0 52px;
  background:
    linear-gradient(180deg, rgba(18,13,24,.1), rgba(14,9,18,.84)),
    radial-gradient(circle at top, rgba(255,61,127,.16), transparent 24%);
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-shell{
  display:grid;
  gap:24px;
}
.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.footer-brand{
  display:grid;
  gap:8px;
}
.footer-brand strong{
  font-size:20px;
}
.footer-brand span{
  color:var(--muted-2);
  max-width:520px;
}
.footer-links{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.footer-links div{
  display:grid;
  gap:10px;
}
.footer-links a{
  color:var(--muted);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.footer-links a:hover,
.footer-links a:focus-visible{
  color:#fff;
  transform:translateX(2px);
}
.footer-note{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  color:var(--muted-2);
  font-size:13px;
  padding-top:4px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-note span:last-child{
  margin-left:auto;
  color:#f3dcea;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.filter-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.filter-chip{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:14px;
}
.filter-chip.active{
  background:rgba(255,61,127,.16);
  color:#fff;
  border-color:rgba(255,61,127,.3);
}
.grid-note{
  padding:16px 18px;
  border-radius:20px;
  background:rgba(255,184,77,.1);
  border:1px solid rgba(255,184,77,.24);
  color:#ffe8be;
  font-size:14px;
}
@media (max-width: 1199px){
  .hero-grid,
  .flow,
  .join-box{
    grid-template-columns:1fr;
  }
  .card-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .level-grid{
    grid-template-columns:1fr;
  }
  .footer-links{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 900px){
  .nav-shell{
    border-radius:28px;
    padding:14px;
    align-items:flex-start;
    flex-direction:column;
  }
  .nav{
    width:100%;
    justify-content:flex-start;
    overflow:auto;
    padding-bottom:2px;
  }
  .nav::-webkit-scrollbar{height:0}
  .notice-grid{
    grid-template-columns:1fr;
  }
  .section{
    padding:52px 0;
  }
}
@media (max-width: 767px){
  .hero{
    padding:54px 0 26px;
  }
  .hero-panel,
  .panel,
  .side-card,
  .pass-card{
    padding:22px;
    border-radius:28px;
  }
  .hero h1{
    font-size:clamp(30px, 9vw, 38px);
  }
  .hero-actions,
  .form-actions{
    flex-direction:column;
  }
  .btn{
    width:100%;
  }
  .card-grid{
    grid-template-columns:1fr;
  }
  .compare-table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
  .compare-table thead th,
  .compare-table td{
    padding:14px 16px;
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-top{
    flex-direction:column;
  }
  .footer-links{
    grid-template-columns:1fr;
  }
  .footer-note span:last-child{
    margin-left:0;
  }
}
@media (max-width: 420px){
  .nav a{
    padding:10px 12px;
    font-size:13px;
  }
  .brand-text strong{
    font-size:15px;
  }
  .brand-text span{
    display:none;
  }
  .hero-kicker{
    font-size:12px;
  }
  .badge{
    font-size:11px;
  }
}

/* roulang page: category2 */
:root{
    --bg-0:#120D18;
    --bg-1:#1A1222;
    --bg-2:#24182E;
    --panel:#1E1627;
    --panel-soft:#F6EFE6;
    --panel-soft-2:#FFF8F1;
    --line:rgba(255,255,255,.10);
    --line-strong:rgba(255,61,127,.34);
    --text:#F8F1EA;
    --text-soft:#D8CBDD;
    --text-dark:#211827;
    --muted:#8E7D94;
    --rose:#FF3D7F;
    --rose-2:#FF4F8B;
    --amber:#FFB84D;
    --lime:#B6FF5C;
    --violet:#7C5CFF;
    --shadow:0 24px 60px rgba(11,7,17,.42);
    --shadow-soft:0 16px 40px rgba(255,61,127,.16);
    --radius-xl:36px;
    --radius-lg:30px;
    --radius-md:22px;
    --radius-sm:16px;
    --container:1220px;
    --transition:200ms cubic-bezier(.2,.8,.2,1);
}

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background:
        radial-gradient(circle at 14% 8%, rgba(255,61,127,.16), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(182,255,92,.10), transparent 24%),
        radial-gradient(circle at 72% 78%, rgba(124,92,255,.12), transparent 22%),
        linear-gradient(180deg, #120D18 0%, #1A1222 38%, #120D18 100%);
    color:var(--text);
    line-height:1.75;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body::before,
body::after{
    content:"";
    position:fixed;
    inset:auto;
    pointer-events:none;
    z-index:-1;
}

body::before{
    width:420px;
    height:420px;
    right:-120px;
    top:120px;
    background:radial-gradient(circle, rgba(255,184,77,.12) 0%, transparent 72%);
    filter:blur(10px);
}

body::after{
    width:520px;
    height:520px;
    left:-180px;
    bottom:-160px;
    background:radial-gradient(circle, rgba(255,61,127,.10) 0%, transparent 72%);
    filter:blur(12px);
}

::selection{
    background:rgba(255,61,127,.28);
    color:#fff;
}

a{
    color:inherit;
    text-decoration:none;
    transition:color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

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

button{
    border:0;
    background:none;
    color:inherit;
    padding:0;
    cursor:pointer;
}

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

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

.skip-link{
    position:absolute;
    left:16px;
    top:16px;
    z-index:100;
    padding:10px 16px;
    border-radius:999px;
    background:var(--rose);
    color:#fff;
    transform:translateY(-180%);
    box-shadow:var(--shadow-soft);
}

.skip-link:focus{
    transform:translateY(0);
}

.page-shell{
    position:relative;
    min-height:100vh;
    overflow:hidden;
}

.header{
    position:sticky;
    top:16px;
    z-index:60;
    padding:0 0 8px;
}

.nav-shell{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(20,14,27,.76);
    backdrop-filter:blur(14px);
    border-radius:999px;
    box-shadow:0 18px 42px rgba(6,4,10,.28);
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-width:max-content;
    padding:6px 8px 6px 6px;
}

.brand-mark{
    position:relative;
    width:22px;
    height:22px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--rose), var(--amber));
    box-shadow:0 0 0 6px rgba(255,61,127,.14);
    flex:none;
}

.brand-mark::after{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
}

.brand-text{
    font-size:1rem;
    font-weight:800;
    letter-spacing:.02em;
    color:var(--text);
}

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-left:auto;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:var(--text);
    transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.nav-toggle:hover{
    background:rgba(255,61,127,.12);
    border-color:rgba(255,61,127,.35);
    box-shadow:0 0 0 4px rgba(255,61,127,.10);
}

.nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex:1;
}

.nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 18px;
    border-radius:999px;
    color:var(--text-soft);
    border:1px solid transparent;
    white-space:nowrap;
    transition:transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.nav a:hover{
    background:rgba(255,61,127,.12);
    border-color:rgba(255,61,127,.22);
    color:#fff;
    box-shadow:0 10px 26px rgba(255,61,127,.10);
    transform:translateY(-1px);
}

.nav a.active{
    background:linear-gradient(135deg, rgba(255,61,127,.94), rgba(255,184,77,.92));
    color:#fff;
    box-shadow:0 16px 28px rgba(255,61,127,.24);
}

.hero{
    position:relative;
    padding:34px 0 8px;
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
    gap:28px;
    align-items:start;
}

.hero-copy{
    position:relative;
    padding:18px 0 8px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.09);
    color:var(--text-soft);
    font-size:.92rem;
    letter-spacing:.02em;
}

.hero-copy h1{
    margin:0;
    max-width:14ch;
    font-size:clamp(2.1rem, 5vw, 4rem);
    line-height:1.08;
    letter-spacing:-.04em;
    font-weight:900;
}

.hero-copy p{
    margin:20px 0 0;
    max-width:680px;
    font-size:1rem;
    color:var(--text-soft);
}

.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.badge-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    font-size:.88rem;
    font-weight:700;
    border:1px solid transparent;
    letter-spacing:.01em;
}

.badge-chip.rose{
    background:rgba(255,61,127,.16);
    color:#ffd4e1;
    border-color:rgba(255,61,127,.28);
}

.badge-chip.lime{
    background:rgba(182,255,92,.14);
    color:#f0ffd0;
    border-color:rgba(182,255,92,.22);
}

.badge-chip.violet{
    background:rgba(124,92,255,.16);
    color:#e6deff;
    border-color:rgba(124,92,255,.26);
}

.badge-chip.amber{
    background:rgba(255,184,77,.18);
    color:#fff3db;
    border-color:rgba(255,184,77,.24);
}

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 20px;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:800;
    letter-spacing:.01em;
    transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition), color var(--transition);
}

.btn:hover{
    transform:translateY(-2px);
}

.btn:active{
    transform:translateY(0);
}

.btn-primary{
    background:linear-gradient(135deg, var(--rose), var(--amber));
    color:#fff;
    box-shadow:0 18px 32px rgba(255,61,127,.22);
}

.btn-primary:hover{
    box-shadow:0 22px 38px rgba(255,61,127,.30);
}

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

.btn-secondary:hover{
    background:rgba(255,61,127,.12);
    border-color:rgba(255,61,127,.30);
    box-shadow:0 0 0 4px rgba(255,61,127,.08);
}

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

.stat-card{
    padding:16px 14px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 12px 26px rgba(0,0,0,.16);
}

.stat-card strong{
    display:block;
    font-size:1rem;
    font-weight:800;
    line-height:1.2;
}

.stat-card span{
    display:block;
    margin-top:6px;
    color:var(--text-soft);
    font-size:.88rem;
}

.hero-panel{
    position:relative;
    display:grid;
    gap:16px;
    padding:22px;
    border-radius:var(--radius-xl);
    background:linear-gradient(180deg, rgba(34,25,44,.96), rgba(20,15,26,.96));
    border:1px solid rgba(255,184,77,.16);
    box-shadow:var(--shadow), 0 0 0 1px rgba(255,61,127,.10) inset;
    overflow:hidden;
}

.hero-panel::before{
    content:"";
    position:absolute;
    inset:auto -80px -100px auto;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,61,127,.18), transparent 68%);
    pointer-events:none;
}

.progress-card{
    display:grid;
    grid-template-columns:168px minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding:18px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(246,239,230,.07), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
}

.progress-ring{
    --progress:78%;
    position:relative;
    width:168px;
    aspect-ratio:1;
    border-radius:50%;
    background:
        conic-gradient(var(--rose) 0 var(--progress), rgba(255,255,255,.08) var(--progress) 100%);
    box-shadow:0 18px 28px rgba(255,61,127,.16);
    padding:16px;
}

.progress-ring::after{
    content:"";
    position:absolute;
    inset:16px;
    border-radius:50%;
    background:linear-gradient(180deg, rgba(26,18,34,.98), rgba(19,13,25,.98));
    border:1px solid rgba(255,255,255,.08);
}

.ring-inner{
    position:absolute;
    inset:16px;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}

.ring-value{
    font-size:clamp(2rem, 5vw, 3rem);
    font-weight:900;
    line-height:1;
    letter-spacing:-.05em;
    color:#fff;
}

.ring-label{
    margin-top:8px;
    font-size:.88rem;
    color:var(--text-soft);
}

.progress-copy{
    display:grid;
    gap:10px;
}

.progress-copy h3{
    margin:0;
    font-size:1.2rem;
    line-height:1.2;
    font-weight:850;
}

.progress-copy p{
    margin:0;
    color:var(--text-soft);
    font-size:.96rem;
}

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

.tier-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-radius:22px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.tier-item strong{
    display:block;
    font-size:1rem;
    font-weight:800;
    line-height:1.25;
}

.tier-item span{
    display:block;
    margin-top:4px;
    color:var(--text-soft);
    font-size:.88rem;
}

.tier-item em{
    flex:none;
    font-style:normal;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    background:rgba(255,61,127,.14);
    border:1px solid rgba(255,61,127,.22);
    color:#ffd7e3;
    font-size:.84rem;
    font-weight:700;
}

.hero-mini-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.mini-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-size:.92rem;
    font-weight:700;
}

.mini-link:hover{
    background:rgba(255,61,127,.12);
    border-color:rgba(255,61,127,.28);
}

.section{
    position:relative;
    padding:86px 0;
    scroll-margin-top:120px;
}

.section-soft{
    background:linear-gradient(180deg, rgba(246,239,230,.04), rgba(255,255,255,.02));
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.04);
}

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

.section-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-soft);
    font-size:.88rem;
    font-weight:700;
}

.section-title{
    margin:0;
    font-size:clamp(1.7rem, 3vw, 2.55rem);
    line-height:1.16;
    letter-spacing:-.03em;
    font-weight:900;
}

.section-desc{
    max-width:640px;
    margin:0;
    color:var(--text-soft);
    font-size:1rem;
}

.filter-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    border-radius:28px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.filter-group{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.filter-label{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-soft);
    font-size:.88rem;
    font-weight:700;
}

.chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.03);
    color:var(--text-soft);
    font-size:.88rem;
    font-weight:700;
}

.chip:hover{
    background:rgba(255,61,127,.12);
    color:#fff;
    border-color:rgba(255,61,127,.24);
}

.chip.active{
    background:linear-gradient(135deg, rgba(255,61,127,.92), rgba(255,184,77,.90));
    color:#fff;
    border-color:transparent;
    box-shadow:0 12px 24px rgba(255,61,127,.18);
}

.filter-hint{
    color:var(--text-soft);
    font-size:.92rem;
}

.benefits-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
    gap:20px;
    align-items:start;
}

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

.step-card{
    position:relative;
    padding:20px;
    min-height:180px;
    border-radius:30px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 36px rgba(0,0,0,.18);
    transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.step-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,61,127,.28);
    box-shadow:0 22px 42px rgba(255,61,127,.12);
}

.step-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:54px;
    min-height:32px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,61,127,.16);
    border:1px solid rgba(255,61,127,.22);
    color:#ffd7e3;
    font-size:.85rem;
    font-weight:800;
    letter-spacing:.04em;
}

.step-card h3{
    margin:14px 0 8px;
    font-size:1.1rem;
    line-height:1.25;
    font-weight:850;
}

.step-card p{
    margin:0;
    color:var(--text-soft);
    font-size:.96rem;
}

.step-hint{
    display:inline-flex;
    margin-top:16px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(182,255,92,.14);
    color:#f2ffd8;
    border:1px solid rgba(182,255,92,.18);
    font-size:.82rem;
    font-weight:700;
}

.summary-stack{
    display:grid;
    gap:14px;
}

.summary-card{
    padding:18px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(246,239,230,.96), rgba(255,250,244,.92));
    color:var(--text-dark);
    border:1px solid rgba(255,184,77,.18);
    box-shadow:0 18px 30px rgba(14,10,19,.18);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.summary-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,61,127,.24);
    box-shadow:0 22px 36px rgba(255,61,127,.12);
}

.summary-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.summary-label{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,61,127,.12);
    color:#b11f52;
    font-size:.84rem;
    font-weight:800;
}

.summary-state{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(124,92,255,.10);
    color:#5340a8;
    font-size:.82rem;
    font-weight:800;
}

.summary-card strong{
    display:block;
    font-size:1.06rem;
    line-height:1.4;
    font-weight:850;
}

.summary-card p{
    margin:8px 0 0;
    color:#6b5a70;
    font-size:.94rem;
}

.summary-tip{
    padding:16px 18px;
    border-radius:24px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-soft);
    font-size:.93rem;
}

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

.preview-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100%;
    border-radius:32px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(246,239,230,.97), rgba(255,250,244,.92));
    color:var(--text-dark);
    border:1px solid rgba(255,184,77,.16);
    box-shadow:0 18px 32px rgba(12,8,16,.16);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.preview-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,61,127,.28);
    box-shadow:0 24px 40px rgba(255,61,127,.14);
}

.preview-card:nth-child(2n){
    margin-top:18px;
}

.preview-art{
    position:relative;
    height:182px;
    overflow:hidden;
}

.preview-art::before,
.preview-art::after{
    content:"";
    position:absolute;
    border-radius:999px;
    pointer-events:none;
}

.preview-art::before{
    width:190px;
    height:190px;
    left:-58px;
    top:-44px;
    background:radial-gradient(circle, rgba(255,61,127,.34), transparent 68%);
}

.preview-art::after{
    width:130px;
    height:130px;
    right:-34px;
    bottom:-38px;
    background:radial-gradient(circle, rgba(255,184,77,.34), transparent 66%);
}

.preview-card.lime .preview-art::before{
    background:radial-gradient(circle, rgba(182,255,92,.34), transparent 68%);
}

.preview-card.violet .preview-art::before{
    background:radial-gradient(circle, rgba(124,92,255,.36), transparent 68%);
}

.preview-card.amber .preview-art::before{
    background:radial-gradient(circle, rgba(255,184,77,.38), transparent 68%);
}

.preview-door{
    position:absolute;
    left:22px;
    bottom:22px;
    display:grid;
    gap:8px;
}

.preview-door span{
    width:74px;
    height:8px;
    border-radius:999px;
    background:rgba(33,24,39,.16);
}

.preview-door span:nth-child(2){
    width:112px;
    background:rgba(255,61,127,.32);
}

.preview-door span:nth-child(3){
    width:52px;
    background:rgba(124,92,255,.28);
}

.preview-body{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1;
    padding:20px;
}

.preview-tag{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 11px;
    border-radius:999px;
    background:rgba(255,61,127,.12);
    color:#b82257;
    font-size:.84rem;
    font-weight:850;
}

.preview-card.amber .preview-tag{
    background:rgba(255,184,77,.20);
    color:#8d5a00;
}

.preview-card.lime .preview-tag{
    background:rgba(93,142,12,.12);
    color:#476f00;
}

.preview-card.violet .preview-tag{
    background:rgba(124,92,255,.14);
    color:#4d3aa6;
}

.preview-card h3{
    margin:0;
    font-size:1.28rem;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.02em;
}

.preview-card p{
    margin:0;
    color:#6c5a70;
    font-size:.95rem;
}

.preview-meta{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#7c687e;
    font-size:.84rem;
    font-weight:700;
}

.preview-meta a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    background:var(--text-dark);
    color:#fff;
}

.preview-meta a:hover{
    background:linear-gradient(135deg, var(--rose), var(--amber));
    box-shadow:0 12px 20px rgba(255,61,127,.18);
}

.notice-band{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    margin-top:28px;
    padding:22px;
    border-radius:32px;
    background:
        linear-gradient(135deg, rgba(255,61,127,.14), rgba(255,184,77,.10)),
        rgba(255,255,255,.04);
    border:1px solid rgba(255,61,127,.18);
    box-shadow:0 20px 44px rgba(0,0,0,.18);
}

.notice-band strong{
    display:block;
    font-size:1.18rem;
    line-height:1.35;
    font-weight:900;
}

.notice-band p{
    margin:6px 0 0;
    color:var(--text-soft);
}

.faq-wrap{
    display:grid;
    grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);
    gap:26px;
    align-items:start;
}

.faq-intro{
    position:sticky;
    top:110px;
    padding:24px;
    border-radius:32px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
}

.faq-intro p{
    margin:12px 0 0;
    color:var(--text-soft);
}

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

.faq-item{
    border-radius:24px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.faq-item.is-open{
    border-color:rgba(255,61,127,.36);
    background:rgba(255,61,127,.08);
    box-shadow:0 18px 34px rgba(255,61,127,.10);
}

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    text-align:left;
    color:var(--text);
    font-weight:850;
}

.faq-question:focus-visible,
.btn:focus-visible,
.nav a:focus-visible,
.nav-toggle:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.mini-link:focus-visible,
.preview-meta a:focus-visible{
    outline:3px solid rgba(255,184,77,.70);
    outline-offset:3px;
}

.faq-icon{
    position:relative;
    flex:none;
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    transition:transform var(--transition), background var(--transition);
}

.faq-icon::before,
.faq-icon::after{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:13px;
    height:2px;
    border-radius:999px;
    background:currentColor;
}

.faq-icon::after{
    transform:rotate(90deg);
    transition:transform var(--transition);
}

.faq-item.is-open .faq-icon{
    transform:rotate(180deg);
    background:rgba(255,61,127,.18);
}

.faq-item.is-open .faq-icon::after{
    transform:rotate(0deg);
}

.faq-answer{
    display:none;
    padding:0 20px 20px;
    color:var(--text-soft);
}

.faq-item.is-open .faq-answer{
    display:block;
}

.faq-answer p{
    margin:0;
}

.cta-panel{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(300px,1.05fr);
    gap:26px;
    align-items:stretch;
    padding:28px;
    border-radius:40px;
    background:
        radial-gradient(circle at 15% 18%, rgba(255,61,127,.18), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(182,255,92,.12), transparent 28%),
        linear-gradient(135deg, rgba(36,24,46,.98), rgba(18,13,24,.98));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.pass-card{
    position:relative;
    min-height:360px;
    padding:26px;
    border-radius:34px;
    background:linear-gradient(180deg, rgba(246,239,230,.96), rgba(255,248,241,.92));
    color:var(--text-dark);
    border:1px solid rgba(255,184,77,.20);
    overflow:hidden;
}

.pass-card::before{
    content:"91";
    position:absolute;
    right:18px;
    bottom:-36px;
    font-size:9rem;
    line-height:1;
    font-weight:900;
    color:rgba(255,61,127,.10);
    letter-spacing:-.08em;
}

.pass-label{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(255,61,127,.12);
    color:#b82257;
    font-size:.86rem;
    font-weight:850;
}

.pass-card h2{
    position:relative;
    margin:22px 0 10px;
    max-width:9ch;
    font-size:clamp(2rem, 4vw, 3rem);
    line-height:1.08;
    letter-spacing:-.05em;
    font-weight:950;
}

.pass-card p{
    position:relative;
    margin:0;
    color:#6c5a70;
}

.pass-points{
    position:relative;
    display:grid;
    gap:10px;
    margin-top:24px;
    padding:0;
    list-style:none;
}

.pass-points li{
    display:flex;
    align-items:center;
    gap:10px;
    color:#3d3044;
    font-weight:750;
}

.pass-points li::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--rose), var(--amber));
    box-shadow:0 0 0 5px rgba(255,61,127,.10);
    flex:none;
}

.join-form{
    display:grid;
    gap:14px;
    padding:24px;
    border-radius:34px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.form-field{
    display:grid;
    gap:7px;
}

.form-field label{
    color:var(--text-soft);
    font-size:.9rem;
    font-weight:750;
}

.form-field input,
.form-field select,
.form-field textarea{
    width:100%;
    min-height:50px;
    padding:0 16px;
    border-radius:18px;
    border:1px solid #4A3658;
    background:rgba(18,13,24,.82);
    color:var(--text);
    outline:none;
    transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.form-field textarea{
    min-height:102px;
    padding-top:14px;
    resize:vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
    color:rgba(216,203,221,.58);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
    border-color:var(--rose);
    box-shadow:0 0 0 4px rgba(255,61,127,.12);
    background:rgba(18,13,24,.94);
}

.form-note{
    margin:0;
    color:var(--text-soft);
    font-size:.88rem;
}

.footer{
    padding:54px 0 32px;
    background:
        linear-gradient(180deg, rgba(18,13,24,.15), rgba(18,13,24,.92)),
        radial-gradient(circle at 20% 0%, rgba(255,61,127,.12), transparent 32%);
}

.footer-shell{
    padding:28px;
    border-radius:36px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 38px rgba(0,0,0,.20);
}

.footer-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-brand{
    display:grid;
    gap:8px;
}

.footer-brand strong{
    font-size:1.2rem;
    font-weight:900;
}

.footer-brand span{
    color:var(--text-soft);
    font-size:.94rem;
}

.badge{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(255,184,77,.14);
    border:1px solid rgba(255,184,77,.22);
    color:#fff1d6;
    font-size:.88rem;
    font-weight:800;
}

.footer-links{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px;
    padding:24px 0;
}

.footer-links div{
    display:grid;
    gap:10px;
}

.footer-links a{
    color:var(--text-soft);
    font-size:.94rem;
}

.footer-links a:hover{
    color:#fff;
    transform:translateX(3px);
}

.footer-note{
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
    color:rgba(216,203,221,.78);
    font-size:.86rem;
}

@media (max-width:1100px){
    .hero-grid,
    .benefits-grid,
    .faq-wrap,
    .cta-panel{
        grid-template-columns:1fr;
    }

    .hero-copy h1{
        max-width:18ch;
    }

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

    .faq-intro{
        position:relative;
        top:auto;
    }
}

@media (max-width:820px){
    .header{
        top:10px;
    }

    .nav-shell{
        align-items:center;
        border-radius:28px;
        flex-wrap:wrap;
    }

    .brand-text{
        font-size:.94rem;
    }

    .nav-toggle{
        display:inline-flex;
    }

    .nav{
        display:none;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        padding-top:10px;
    }

    .nav.is-open{
        display:flex;
    }

    .nav a{
        justify-content:flex-start;
        min-height:46px;
        padding:0 16px;
    }

    .hero{
        padding-top:24px;
    }

    .progress-card{
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
    }

    .progress-copy{
        justify-items:center;
    }

    .hero-stats,
    .steps-grid,
    .form-row,
    .footer-links{
        grid-template-columns:1fr;
    }

    .section{
        padding:64px 0;
    }

    .section-head,
    .filter-bar,
    .notice-band,
    .footer-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .filter-bar{
        display:flex;
    }

    .preview-card:nth-child(2n){
        margin-top:0;
    }

    .footer-note{
        flex-direction:column;
    }
}

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

    .nav-shell,
    .hero-panel,
    .cta-panel,
    .footer-shell{
        padding:14px;
    }

    .hero-copy h1{
        font-size:2.25rem;
    }

    .hero-actions,
    .hero-mini-actions{
        flex-direction:column;
    }

    .btn,
    .mini-link{
        width:100%;
    }

    .hero-stats,
    .preview-grid{
        grid-template-columns:1fr;
    }

    .progress-ring{
        width:148px;
    }

    .tier-item,
    .summary-top,
    .preview-meta{
        align-items:flex-start;
        flex-direction:column;
    }

    .pass-card,
    .join-form{
        padding:20px;
        border-radius:28px;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}