/* SOMA PRO VISION: shared glass styles. Static by design: no animation, no transitions.
   Background image: put your dark blue image next to index.html and name it background.png */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root{
  --ink:#f4f8ff;--soft:rgba(244,248,255,.72);--faint:rgba(244,248,255,.5);
  --edge:rgba(255,255,255,.16);--edge2:rgba(255,255,255,.32);
  --blue:#7cc0ff;--blue2:#4aa3ff;--deep:#0a2a6b;--black:#02060f;
  --r:26px;--shadow:0 24px 60px -18px rgba(0,0,0,.6);
  --display:'Jost','Helvetica Neue',Arial,sans-serif;--body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
html{background:#030b1f}
body{
  display:flow-root;min-height:100vh;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  background-color:#030b1f;
  background-image:url('../background.png'),radial-gradient(ellipse at 20% 0%,#0b2a6b 0%,transparent 55%),radial-gradient(ellipse at 90% 100%,#0a2a6b 0%,transparent 50%);
  background-size:cover,auto,auto;background-position:center;background-attachment:fixed;background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- glass surface (the minimal frosted look) ---------- */
.glass{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.18);
}
.glass.soft{background:rgba(255,255,255,.055)}

/* ---------- layout ---------- */
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.narrow{width:min(680px,calc(100% - 40px));margin:0 auto}
section{padding:56px 0}
.nav{position:sticky;top:16px;z-index:30;width:min(1120px,calc(100% - 32px));margin:16px auto 0;display:flex;align-items:center;gap:22px;padding:10px 12px 10px 26px;border-radius:999px}
.brand{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.22em;text-decoration:none;white-space:nowrap}
.nav .links{display:flex;gap:6px;margin-left:12px}
.nav .links a{padding:8px 14px;border-radius:999px;font-size:14px;color:var(--soft);text-decoration:none}
.nav .links a:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.nav .sp{flex:1}

/* ---------- type ---------- */
h1{font-family:var(--display);font-weight:300;font-size:clamp(36px,5.4vw,66px);line-height:1.08;letter-spacing:.01em}
h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.2vw,38px);line-height:1.15;letter-spacing:.02em}
h3{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.03em}
.tag{font-family:var(--display);font-weight:300;font-size:13px;letter-spacing:.32em;color:var(--soft);text-transform:uppercase}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--soft);max-width:60ch}
.mute{color:var(--soft)}.faint{color:var(--faint)}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}

/* ---------- controls ---------- */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;font:500 15px var(--body);letter-spacing:.02em;color:#fff;text-decoration:none;cursor:pointer;
  border:1px solid rgba(124,192,255,.55);background:linear-gradient(180deg,rgba(124,192,255,.40),rgba(74,163,255,.20));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px -12px rgba(74,163,255,.55)}
.btn:hover{background:linear-gradient(180deg,rgba(124,192,255,.52),rgba(74,163,255,.30))}
.btn.ghost{background:rgba(255,255,255,.06);border-color:var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.sm{padding:10px 20px;font-size:14px}
.btn.block{display:flex;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;border:1px solid var(--edge);background:rgba(255,255,255,.06);font-size:14px;color:var(--soft)}
button.chip{cursor:pointer;font-family:var(--body)}
button.chip.on,.opt.on{background:rgba(124,192,255,.22);border-color:rgba(124,192,255,.7);color:#fff}
.opt{padding:16px 18px;border-radius:20px;border:1px solid var(--edge);background:rgba(255,255,255,.05);text-align:left;cursor:pointer;color:var(--ink);font-family:var(--body);font-size:15px}
.opt b{display:block;font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.03em;margin-bottom:4px}
.opt small{color:var(--soft);font-size:13.5px;line-height:1.45;display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lbl{display:block;font-size:13px;letter-spacing:.06em;color:var(--soft);margin-bottom:10px}
.field{margin-top:26px}
input[type=number]{width:104px;padding:10px 12px;border-radius:14px;border:1px solid var(--edge);background:rgba(255,255,255,.07);color:#fff;font:400 22px var(--display);text-align:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;--fill:50%}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--blue2),var(--blue)) 0/var(--fill) 100% no-repeat,rgba(255,255,255,.16)}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:rgba(255,255,255,.16)}
input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--blue2),var(--blue))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:0;box-shadow:0 4px 14px rgba(0,0,0,.45)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:0}

/* ---------- cards ---------- */
.card{padding:30px}
.step{display:flex;gap:16px;align-items:flex-start}
.num{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--edge2);display:grid;place-items:center;font-family:var(--display);font-size:16px;color:var(--blue)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tile{padding:20px 22px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid var(--edge)}
.tile .k{font-size:13.5px;color:var(--soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tile .v{font-family:var(--display);font-weight:300;font-size:42px;line-height:1.1;margin-top:6px}
.tile .v small{font-family:var(--body);font-size:15px;color:var(--soft);margin-left:6px}
.badge{padding:2px 10px;border-radius:999px;border:1px solid rgba(124,192,255,.6);font-size:11.5px;color:var(--blue);letter-spacing:.04em}
details{padding:18px 24px;border-radius:20px;border:1px solid var(--edge);background:rgba(255,255,255,.05);margin-top:12px}
summary{cursor:pointer;font-weight:500;font-size:16px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';float:right;color:var(--blue);font-size:20px;line-height:1}
details[open] summary::after{content:'\2212'}
details p{margin-top:12px;color:var(--soft)}
footer{padding:36px 0 48px;color:var(--faint);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--edge);padding-top:24px}

@media (max-width:820px){
  .nav .links{display:none}
  .three,.two{grid-template-columns:1fr}
  section{padding:40px 0}
  .card{padding:22px}
}
@media print{
  body{background:#fff!important;color:#000}
  .nav,.noprint,footer{display:none!important}
  .glass,.tile{background:#fff!important;border:1px solid #bbb!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;color:#000}
  .mute,.k,.lead{color:#333!important}
}