:root{
  --bg:#0c0e14;
  --surface:#121626;
  --surface-2:#171c2f;
  --line:rgba(255,255,255,.08);
  --card:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  --text:#e9ecf1;
  --muted:#a6b0c3;
  --brand:#00d1b2;
  --brand-2:#8be9dc;
  --warn:#ffcc66;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --w:1120px;
}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Apple SD Gothic Neo,Malgun Gothic,Roboto,Arial,sans-serif;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{min-height:100dvh;display:flex;flex-direction:column}
.container{max-width:var(--w);margin:0 auto;padding:0 18px}
.site-main{flex:1}

.site-header{position:sticky;top:0;z-index:50;background:rgba(12,14,20,.6);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.header-grid{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;height:64px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.5px}
.logo-mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#59f3dd);color:#001410;font-weight:900}
.logo-type{font-weight:800}
.nav-toggle{display:inline-flex;flex-direction:column;gap:4px;width:38px;height:34px;justify-content:center;align-items:center;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--text)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);opacity:.9}
.nav-list{position:fixed;inset:64px 0 auto 0;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.25s;list-style:none;margin:0;padding:14px;border-top:1px solid var(--line);background:rgba(18,22,38,.9);backdrop-filter:blur(8px)}
.nav-list.open{transform:none;opacity:1;pointer-events:auto}
.nav-list li{border-bottom:1px solid var(--line)}
.nav-list li a{display:block;padding:12px 8px}
.nav-list .divider{border-bottom:0;margin:6px 0}
@media(min-width:960px){
  .nav-toggle{display:none}
  .nav-list{position:unset;inset:auto;transform:none;opacity:1;pointer-events:auto;display:flex;gap:16px;background:transparent;border-top:0}
  .nav-list li{border:0}
  .nav-list li a{padding:8px 6px}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#07c6c2);color:#001410;font-weight:700;box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.small{padding:9px 12px;border-radius:12px}

.hero{background:
 radial-gradient(800px 300px at 10% -20%, rgba(0,209,178,.25), transparent),
 radial-gradient(600px 260px at 90% -10%, rgba(139,233,220,.18), transparent);
 border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:20px;align-items:center;padding:28px 0}
.hero h1{font-size:clamp(24px,4.2vw,42px);line-height:1.2;margin:.2em 0 .4em}
.lede{color:var(--muted)}

.section{padding:28px 0;border-top:1px solid var(--line)}
.section.alt{background:var(--surface);border:1px solid var(--line);margin:18px; border-radius:var(--radius)}
@media(min-width:960px){
  .hero-grid{grid-template-columns:1.2fr .8fr}
  .section{padding:48px 0}
  .section.alt{margin:24px 0}
}

.cards{display:grid;gap:12px;margin:16px 0;list-style:none;padding:0}
.cards.cols-2{grid-template-columns:1fr}
@media(min-width:720px){.cards.cols-2{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}
@media(min-width:960px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr 1fr}
}

.kicker{display:inline-block;font-weight:700;letter-spacing:.08em;color:var(--brand-2);font-size:12px;text-transform:uppercase}
.muted{color:var(--muted)}
.time{color:var(--muted);font-size:12px;margin-top:6px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}

.hero-img{border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}

.faq dt{font-weight:700;margin-top:10px}
.faq dd{margin:0 0 12px 0;color:var(--muted)}
.accordion{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.accordion .item{border-top:1px solid var(--line)}
.accordion .head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:rgba(255,255,255,.02);cursor:pointer}
.accordion .body{display:none;padding:12px 14px}
.accordion .item.open .body{display:block}

.site-footer{border-top:1px solid var(--line);padding:28px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.footer-grid{display:grid;gap:20px}
@media(min-width:960px){.footer-grid{grid-template-columns:1.2fr .8fr .8fr}}
.linklist{list-style:none;margin:0;padding:0}
.linklist li{padding:4px 0}
.socials{display:flex;gap:10px;margin-top:10px}
.icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted)}
.small{font-size:12px}
.notice{border:1px dashed var(--warn);color:#ffe8a3;background:rgba(255,204,102,.06);padding:12px;border-radius:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-top:1px solid var(--line);text-align:left}
.bullets { margin: 10px 0 6px; padding-left: 18px; list-style: disc; line-height: 1.65; }
.inline-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.card.soft { background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.06); }
.card.warn { border-left: 4px solid #ff7a7a; background: rgba(255,122,122,0.06); }
.note { font-size: 13px; opacity: .8; margin-top: 6px; }
.kicker { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity:.7; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 0; }
.chips.compact .chip { padding: 2px 8px; font-size: 12px; }
.chip { background: rgba(0,209,178,.12); color:#9df1e5; border:1px solid rgba(0,209,178,.25); padding:4px 10px; border-radius:999px; }

@media (max-width: 900px){
  .grid.cols-2 { grid-template-columns: 1fr !important; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

.bullets { line-height:1.65; }
.inline-actions { display:flex; gap:10px; flex-wrap:wrap; }
.card.warn { border-left:4px solid #ff7a7a; background:rgba(255,122,122,.06); }
.note { font-size:13px; opacity:.8; margin-top:6px; }

.table caption { caption-side: top; padding:4px 0; font-weight:600; }
.lead { line-height: 1.7; }
.bullets { padding-left: 18px; list-style: disc; line-height: 1.65; }
.small { font-size: 13px; }
.note { font-size: 13px; opacity:.85; margin-top:6px; }

.card.warn { border-left: 4px solid #ff8080; background: rgba(255,128,128,.06); }
.table.compact td, .table.compact th { padding: 8px 10px; }

.steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; margin: 10px 0 10px 34px; line-height: 1.65; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: -34px; top: 0.1rem;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: rgba(0, 209, 178, .18);
  color: #00d1b2;
}

.inline-actions { display:flex; gap:10px; flex-wrap:wrap; }
.kicker { font-size: 12px; letter-spacing:.08em; text-transform: uppercase; opacity:.7; display:inline-block; margin-bottom:6px; }

.nav-list a.active { opacity: 1; font-weight: 600; }
.card.warn { border-left: 4px solid #ff8080; background: rgba(255,128,128,.06); }
.bullets { list-style: disc; padding-left: 18px; line-height: 1.65; }
.small { font-size: 13px; }
.table.compact td, .table.compact th { padding: 8px 10px; }
.section .grid a.card { text-decoration:none; color:inherit; }
.section .grid a.card:hover { outline:1px solid rgba(255,255,255,.12); }
.inline-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.list.tiny li { font-size:12px; opacity:.85; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 10px 14px; border-radius: 8px;
  background: rgba(0,0,0,.8); color: #fff; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.toast.show { opacity: 1; }
.nav-list a.active { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.list.tiny li, .tiny { font-size: 12px; opacity:.85; }
.notice[role="note"] { border-left: 3px solid rgba(255,255,255,.25); padding-left: 10px; }
.toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(15,16,23,.9);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9999;
}
.toast.show{ opacity: 1; }