/* ============================================================
   site.css — shared futuristic theme for all pages.
   ============================================================ */
:root {
  --bg:#05070d; --bg2:#0a0f1c;
  --text:#eaf2ff; --dim:#7d8cab;
  --accent:#ffb028; --accent2:#ff7a18;
  --cyan:#22d3ee; --violet:#8b5cf6; --up:#16c784; --down:#ea3943;
  --line:rgba(120,150,255,.14);
  --glass:rgba(16,22,40,.55);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  background:var(--bg); color:var(--text); overflow-x:hidden; min-height:100vh;
}

/* ---- background: grid + glow orbs ---- */
.bg { position:fixed; inset:0; z-index:-2; background:var(--bg); }
.bg::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(90,120,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,120,255,.06) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}
.orb { position:fixed; border-radius:50%; filter:blur(90px); opacity:.28; z-index:-1; animation:float 14s ease-in-out infinite; }
.orb.a { width:420px; height:420px; background:var(--violet); top:-120px; left:-90px; }
.orb.b { width:360px; height:360px; background:var(--cyan); top:22%; right:-120px; animation-delay:-5s; }
.orb.c { width:300px; height:300px; background:var(--accent2); bottom:-80px; left:32%; animation-delay:-9s; opacity:.18; }
@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(38px) } }

.wrap { max-width:1040px; margin:0 auto; padding:34px 24px 90px; text-align:center; }
.wrap.narrow { max-width:720px; }

/* ---- navigation ---- */
nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:56px; }
.logo { font-size:19px; letter-spacing:3px; font-weight:600; color:var(--text); text-decoration:none; }
.logo b { color:var(--accent); }
.logo .dot { color:var(--cyan); }
nav .links a { color:var(--dim); text-decoration:none; margin-left:26px; font-size:15px; transition:color .2s; }
nav .links a:hover, nav .links a.on { color:var(--text); }

/* ---- typography ---- */
h1 { font-size:clamp(32px,5.4vw,54px); line-height:1.1; margin-bottom:18px; letter-spacing:-.5px; }
h2 { font-size:clamp(24px,3.4vw,34px); margin-bottom:14px; }
.grad {
  background:linear-gradient(92deg, var(--accent) 10%, var(--accent2) 45%, var(--cyan) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad2 {
  background:linear-gradient(92deg, var(--cyan), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub { font-size:clamp(16px,2.2vw,20px); color:var(--dim); max-width:640px; margin:0 auto 34px; line-height:1.6; }
a { color:var(--accent); }

/* ---- badge/tag ---- */
.tag {
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(10px);
  border-radius:999px; padding:8px 18px; font-size:14px; color:var(--dim); margin-bottom:26px;
}
.tag .pulse { width:8px; height:8px; border-radius:50%; background:var(--up); box-shadow:0 0 0 0 rgba(22,199,132,.6); animation:pulse 2s infinite; }
@keyframes pulse { 70%{ box-shadow:0 0 0 9px rgba(22,199,132,0) } 100%{ box-shadow:0 0 0 0 rgba(22,199,132,0) } }

/* ---- buttons ---- */
.btn {
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  font-weight:700; font-size:17px; border-radius:999px; padding:15px 34px;
  transition:transform .15s, box-shadow .15s; font-family:inherit;
}
.btn.primary {
  background:linear-gradient(92deg, var(--accent), var(--accent2));
  color:#1a1205; box-shadow:0 0 26px rgba(255,176,40,.35);
}
.btn.primary:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(255,176,40,.55); }
.btn.ghost { background:var(--glass); color:var(--text); border:1px solid var(--line); backdrop-filter:blur(10px); }
.btn.ghost:hover { border-color:var(--cyan); box-shadow:0 0 22px rgba(34,211,238,.25); }
.btn.danger { background:transparent; color:var(--down); border:1px solid var(--down); }
.btn.block { width:100%; }

/* ---- cards ---- */
.card {
  background:var(--glass); border:1px solid var(--line); border-radius:20px;
  padding:30px 28px; backdrop-filter:blur(12px); text-align:left;
}
.card.center { text-align:center; }

/* ---- forms ---- */
label { display:block; text-align:left; color:var(--dim); font-size:14px; margin-bottom:8px; }
input, select {
  width:100%; background:rgba(5,8,16,.8); border:2px solid var(--line); border-radius:12px;
  padding:14px; color:var(--text); font-size:17px; font-family:inherit; outline:none; transition:border-color .2s, box-shadow .2s;
}
input:focus { border-color:var(--accent); box-shadow:0 0 18px rgba(255,176,40,.2); }
.code-input { text-align:center; letter-spacing:6px; text-transform:uppercase; font-size:26px; }
.msg { min-height:22px; margin-top:12px; font-weight:600; font-size:15px; }
.ok { color:var(--up); } .err { color:var(--down); }
.muted { color:var(--dim); font-size:14px; }
.hidden { display:none; }

/* ---- pricing ---- */
.plans { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.plan {
  position:relative; background:var(--glass); border:1px solid var(--line); border-radius:22px;
  padding:34px 38px; min-width:260px; backdrop-filter:blur(12px); transition:transform .2s; text-align:center;
}
.plan:hover { transform:translateY(-4px); }
.plan.best { border-color:rgba(255,176,40,.6); box-shadow:0 0 44px rgba(255,176,40,.15); }
.plan .flag {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(92deg,var(--accent),var(--accent2)); color:#1a1205;
  font-size:12px; font-weight:800; padding:5px 14px; border-radius:999px; letter-spacing:.5px; white-space:nowrap;
}
.plan .name { color:var(--dim); font-size:15px; }
.plan .price { font-size:46px; font-weight:800; margin:10px 0 2px; }
.plan .per { color:var(--dim); font-size:15px; }
.plan .save { color:var(--up); font-size:14px; margin-top:8px; font-weight:600; }
.plan .btn { width:100%; margin-top:22px; }

/* ---- steps ---- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:40px 0 60px; counter-reset:step; }
.step { position:relative; background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:26px 20px 22px; text-align:left; backdrop-filter:blur(10px); }
.step::before {
  counter-increment:step; content:counter(step);
  position:absolute; top:-14px; left:20px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
  background:linear-gradient(92deg,var(--accent),var(--accent2)); color:#1a1205; box-shadow:0 0 16px rgba(255,176,40,.4);
}
.step h3 { font-size:16px; margin-bottom:6px; }
.step p { color:var(--dim); font-size:14px; line-height:1.55; }

/* ---- prose (legal pages / faq) ---- */
.prose { text-align:left; }
.prose h2 { font-size:20px; margin:30px 0 8px; color:var(--accent); }
.prose p, .prose li { color:#cdd6ea; line-height:1.7; }
.prose ul { margin:6px 0 6px 22px; }
.prose table { width:100%; border-collapse:collapse; margin:10px 0; }
.prose td, .prose th { border:1px solid var(--line); padding:10px 12px; text-align:left; font-size:15px; }
.prose th { color:var(--dim); font-weight:600; }
.note { background:var(--glass); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:14px 16px; color:var(--dim); font-size:14px; margin:22px 0; text-align:left; }

/* ---- faq ---- */
details {
  background:var(--glass); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; margin-bottom:12px; text-align:left; backdrop-filter:blur(10px);
}
details summary { cursor:pointer; font-weight:600; font-size:16px; list-style:none; }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:"+"; float:right; color:var(--accent); font-weight:800; }
details[open] summary::after { content:"−"; }
details p { color:var(--dim); margin-top:10px; line-height:1.6; font-size:15px; }

/* ---- footer ---- */
footer { margin-top:80px; color:var(--dim); font-size:13.5px; line-height:2; text-align:center; }
footer a { color:var(--dim); text-decoration:none; } footer a:hover { color:var(--accent); }

/* ---- mobile ---- */
@media (max-width:640px){
  .wrap { padding:22px 16px 60px; }
  nav { flex-direction:column; gap:12px; margin-bottom:36px; }
  .logo { font-size:16px; letter-spacing:2px; white-space:nowrap; }
  nav .links { display:flex; gap:18px; } nav .links a { margin:0; font-size:14px; white-space:nowrap; }
  .sub { font-size:16px; }
  .btn { font-size:16px; padding:14px 22px; }
  .card { padding:22px 18px; }
  .plans { gap:16px; } .plan { min-width:0; width:100%; padding:28px 22px; }
}