:root {
  --bg: #111111;
  --surface: rgba(255,255,255,.04);
  --surface-hover: rgba(255,255,255,.07);
  --border: rgba(255,255,255,.07);
  --border-bright: rgba(255,255,255,.13);
  --text: rgba(255,255,255,.92);
  --text-muted: rgba(255,255,255,.45);
  --text-sub: rgba(255,255,255,.62);
  --accent-a: #e8e8ee;
  --accent-b: #a0a0b0;
  --accent-bright: #d4d4de;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --slide-dur: 420ms;
  --slide-ease: cubic-bezier(.45,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: rgba(200,200,220,.18); }

html { height: 100%; background: var(--bg); }
body {
  min-height: 100%; color: var(--text);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; font-weight: 400;
  background: var(--bg); overflow-x: hidden;
  position: relative; isolation: isolate;
}

canvas#starCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }

/* ── SLIDE VIEWPORT ── */
header, .modal-overlay { position: relative; z-index: 10; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1060px, 92vw); margin: 0 auto; }

.viewport-outer { position: relative; z-index: 1; overflow: hidden; }
.viewport-track {
  display: flex;
  transition: transform var(--slide-dur) var(--slide-ease);
  will-change: transform;
  align-items: flex-start;
}
.view { flex: 0 0 100vw; width: 100vw; }

/* ── NAV ── */
header { position: sticky; top: 0; z-index: 50; padding: 14px 0; pointer-events: none; }
.nav-shell {
  pointer-events: auto;
  width: min(960px, 92vw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-radius: var(--radius-lg);
  background: rgba(17,17,17,.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); transition: background .15s; }
.brand:hover { background: var(--surface); }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.brand-sub { font-size: 12px; color: var(--text-muted); display: block; margin-top: 1px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 8px rgba(212,212,222,.4); animation: blink 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes blink { 50% { opacity: .3; } }
body.frozen .dot { animation-play-state: paused; }

nav { display: flex; align-items: center; gap: 2px; font-size: 13.5px; }
nav a { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text-sub); font-weight: 500; transition: color .15s, background .15s; display: inline-flex; cursor: pointer; }
nav a:hover { color: var(--text); background: var(--surface); }
nav a.active { color: var(--accent-bright); background: rgba(212,212,222,.08); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none;
  transition: transform .15s, background .15s, border-color .15s;
  position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-ghost { background: rgba(212,212,222,.06); color: var(--accent-bright); border: 1px solid rgba(212,212,222,.2); }
.btn-ghost:hover { background: rgba(212,212,222,.11); border-color: rgba(212,212,222,.36); }

.btn-primary { background: rgba(212,212,222,.1); color: var(--accent-bright); border: 1px solid rgba(212,212,222,.22); }
.btn-primary:hover { background: rgba(212,212,222,.18); border-color: rgba(212,212,222,.4); }
.btn-primary::before { content: ""; position: absolute; inset: 0; background: radial-gradient(160px 120px at var(--bx,50%) var(--by,50%), rgba(212,212,222,.2), transparent 70%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.btn-primary:hover::before { opacity: 1; }

.btn-green { background: rgba(212,212,222,.1); color: var(--accent-bright); border: 1px solid rgba(212,212,222,.22); }
.btn-green:hover { background: rgba(212,212,222,.18); border-color: rgba(212,212,222,.4); }
.btn-green::before { content: ""; position: absolute; inset: 0; background: radial-gradient(160px 120px at var(--bx,50%) var(--by,50%), rgba(212,212,222,.2), transparent 70%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.btn-green:hover::before { opacity: 1; }

/* ── PAGE INNER PADDING ── */
.page-inner { padding: 48px 0 100px; }

/* ── HERO ── */
.hero { display: grid; grid-template-columns: 1fr 360px; gap: 14px; margin-top: 10px; align-items: stretch; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } nav { display: none; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.card-pad { padding: 28px; }

.tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(212,212,222,.06); border: 1px solid rgba(212,212,222,.16); font-size: 12.5px; color: var(--accent-bright); font-weight: 500; margin-bottom: 20px; }
.hero-title { font-size: clamp(38px, 5vw, 58px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 14px; }
.hero-title .grad { background: linear-gradient(110deg, #e8e8ee 0%, #808090 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 15.5px; color: var(--text-sub); line-height: 1.7; max-width: 50ch; margin-bottom: 26px; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── STATUS ── */
.card.status-card { display: flex; flex-direction: column; }
.status-item { padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); transition: background .15s; flex: 1; min-height: 68px; }
.status-item:last-child { border-bottom: none; }
.status-item:hover { background: rgba(255,255,255,.02); }
.status-label { font-size: 13.5px; font-weight: 500; }
.status-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.pill-green { background: rgba(176,176,176,.07); color: rgba(200,200,200,.9); border: 1px solid rgba(176,176,176,.14); }
.pill-cyan { background: rgba(212,212,222,.14); color: #e8e8ee; border: 1px solid rgba(212,212,222,.32); }
.pill-neutral { background: var(--surface); color: var(--text-sub); border: 1px solid var(--border); }
.pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }

/* ── SECTIONS ── */
section { margin-top: 40px; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }

/* ── PRICING ── */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color .2s, transform .2s; }
.price-card:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.price-card.featured {
  border-color: rgba(212,212,222,.35);
  background: linear-gradient(160deg, rgba(212,212,222,.09) 0%, rgba(160,160,176,.04) 100%);
  box-shadow: 0 0 0 1px rgba(212,212,222,.15), 0 8px 32px rgba(212,212,222,.08), 0 2px 8px rgba(0,0,0,.4);
  position: relative;
  transform: translateY(-3px);
}
.price-card.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 50%, rgba(255,255,255,.03) 100%);
  pointer-events: none;
}
.price-card.featured:hover { border-color: rgba(212,212,222,.55); transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(212,212,222,.25), 0 16px 48px rgba(212,212,222,.12), 0 4px 12px rgba(0,0,0,.4); }
.price-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.price-name { font-size: 15px; font-weight: 700; }
.price-amount { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.price-period { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.price-divider { height: 1px; background: var(--border); margin: 18px 0; }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.price-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-sub); }
.check { width: 16px; height: 16px; border-radius: 50%; background: rgba(212,212,222,.06); border: 1px solid rgba(212,212,222,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.check svg { display: block; }

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color .18s; }
.faq-card:hover { border-color: var(--border-bright); }
.faq-q { font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.faq-a { font-size: 13.5px; color: var(--text-sub); line-height: 1.6; }
.link-blue { color: var(--accent-bright); cursor: pointer; opacity: .8; transition: opacity .15s; }
.link-blue:hover { opacity: 1; }

/* ── FOOTER ── */
footer { margin-top: 60px; padding: 20px 0 40px; border-top: 1px solid var(--border); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-copy { font-size: 13px; color: var(--text-muted); }
.foot-links { display: flex; gap: 4px; flex-wrap: wrap; }
.foot-links a { font-size: 13px; color: var(--text-muted); padding: 6px 10px; border-radius: var(--radius-sm); transition: color .15s, background .15s; font-weight: 500; cursor: pointer; }
.foot-links a:hover { color: var(--text); background: var(--surface); }

/* ── DOWNLOAD PAGE ── */
.dl-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 38px; margin-top: 10px; }
.dl-title { font-size: clamp(48px,6vw,72px); font-weight: 700; letter-spacing: -2px; line-height: 1; background: linear-gradient(110deg, #e8e8ee, #808090); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; margin-top: 14px; }
.dl-sub { font-size: 15.5px; color: var(--text-sub); max-width: 52ch; line-height: 1.65; margin-bottom: 24px; }
.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 720px) { .info-grid { grid-template-columns: 1fr; } }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.info-card h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.info-card p { font-size: 13px; color: var(--text-sub); line-height: 1.6; }

/* ── TERMS PAGE ── */
.terms-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 38px; margin-top: 10px; }
.terms-title { font-size: clamp(40px,5vw,60px); font-weight: 700; letter-spacing: -1.5px; line-height: 1; background: linear-gradient(110deg, #e8e8ee, #808090); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; margin-top: 14px; }
.terms-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 0; }

.terms-body { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.terms-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.terms-section h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.terms-section p, .terms-section li { font-size: 13.5px; color: var(--text-sub); line-height: 1.72; }
.terms-section ul { padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.terms-section p + p { margin-top: 8px; }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.reveal.on { opacity: 1; transform: translateY(0); }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: none; place-items: center; padding: 20px; z-index: 200; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-overlay.show { display: grid; }
.modal { width: min(460px,96vw); background: #141414; border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); box-shadow: 0 40px 100px rgba(0,0,0,.7); overflow: hidden; transform: translateY(12px) scale(.98); opacity: 0; transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .2s; }
.modal-overlay.show .modal { transform: translateY(0) scale(1); opacity: 1; }

.modal-head { padding: 20px 20px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.modal-icon-wrap { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.micon-cyan { background: rgba(212,212,222,.07); border: 1px solid rgba(212,212,222,.14); }
.micon-green { background: rgba(212,212,222,.07); border: 1px solid rgba(212,212,222,.14); }
.micon-teal { background: rgba(212,212,222,.07); border: 1px solid rgba(212,212,222,.14); }
.modal-title-group { display: flex; align-items: center; gap: 12px; }
.modal-title { font-size: 15.5px; font-weight: 700; }
.modal-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.modal-close { width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; transition: background .15s, color .15s; margin-top: 2px; }
.modal-close:hover { background: var(--surface-hover); color: var(--text); }
.modal-close svg { display: block; }
.modal-body { padding: 20px; }
.modal-url-label { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; display: block; }
.modal-url-box { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.modal-url-text { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.modal-notice { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: var(--radius-sm); margin-top: 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.mnotice-cyan { background: rgba(212,212,222,.04); border: 1px solid rgba(212,212,222,.1); }
.mnotice-green { background: rgba(212,212,222,.04); border: 1px solid rgba(212,212,222,.1); }
.mnotice-teal { background: rgba(212,212,222,.04); border: 1px solid rgba(212,212,222,.1); }
.modal-notice svg { flex-shrink: 0; margin-top: 1px; }
.modal-divider { height: 1px; background: var(--border); margin: 18px 0; }
.modal-actions { display: flex; gap: 8px; }
.modal-actions .btn { flex: 1; font-size: 13.5px; padding: 10px 14px; }

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

/* ── VIEW VISIBILITY ── */
.view--hidden { height: 0 !important; overflow: hidden; visibility: hidden; }

/* ── HIDE NATIVE SCROLLBAR ── */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

/* ── CUSTOM SCROLLBAR ── */
#custom-scrollbar {
  position: fixed;
  right: 6px;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#custom-scrollbar.visible {
  opacity: 1;
  pointer-events: auto;
}
#custom-scrollbar.sb-fading-out {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease;
}
#custom-scrollbar.sb-fading-in {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}
#custom-scrollbar-thumb {
  position: absolute;
  right: 3px;
  width: 4px;
  min-height: 32px;
  border-radius: 999px;
  background: rgba(212, 212, 222, 0.25);
  transition: width 0.15s, right 0.15s, background 0.15s;
  cursor: grab;
}
#custom-scrollbar:hover #custom-scrollbar-thumb,
#custom-scrollbar-thumb.dragging {
  width: 6px;
  right: 2px;
  background: rgba(212, 212, 222, 0.5);
}
#custom-scrollbar-thumb.dragging {
  cursor: grabbing;
}