/* ============================================================
   Viziro — shared stylesheet
   Deliberately single (dark) theme: this is the brand, not a
   default. Background and every color are set explicitly so the
   page reads correctly on either host background per the artifact
   contract, even though the light-mode media/data-theme blocks
   are intentionally omitted.
   ============================================================ */

/* Google Fonts are linked directly from each page's <head> (see page files) —
   not @import'd here, per the artifact CSP's documented pattern. */

:root{
  /* --- brand palette (WCAG-AA checked against the backgrounds they pair with) --- */
  --bg:        #1B2350;   /* page background — slightly deeper than the panel navy for depth */
  --bg-2:      #20285C;   /* secondary background band */
  --panel:     #2B3573;   /* card / panel fill */
  --panel-2:   #323C82;   /* raised panel (hover, form fields) */
  --line:      #3B4590;   /* hairline borders on panels */

  --text:      #FFFFFF;   /* primary text — 11.3:1 on panel, 13.8:1 on bg */
  --text-soft: #B4D7FF;   /* secondary text / links — 7.6:1 on panel */
  --muted:     #9AA8DE;   /* captions, on --bg or --bg-2 only (5.1:1) — avoid on --panel-2 */

  --accent:    #30DAE6;   /* teal — the one accent color, used with restraint */
  --accent-ink:#12163A;   /* near-black navy, the ONLY text color placed on a teal fill (10.2:1) */
  --accent-soft: rgba(48,218,230,.12);

  --danger:    #FF9AA8;   /* form-error red-pink, tuned to stay >4.5:1 on --panel */
  --success:   #7CE8B8;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));

  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

  color-scheme: dark;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  padding-inline: var(--gutter);
}
img{ max-width:100%; }
[hidden]{ display:none !important; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--text);
  line-height:1.15;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight:800; letter-spacing:-.01em; }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight:700; letter-spacing:-.005em; }
h3{ font-size: 1.25rem; font-weight:700; }
p{ margin:0 0 1em; max-width: 62ch; color: var(--text-soft); }
.lede{ font-size:1.15rem; }
a{ color: var(--accent); text-underline-offset:3px; }
a:not(.btn):hover{ text-decoration-thickness: 2px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--accent);
  margin-bottom: .9em;
}
.eyebrow::before{ content:""; width:1.4em; height:2px; background: var(--accent); display:inline-block; }

/* ---------- layout ---------- */
.wrap{ max-width: 1120px; margin-inline:auto; }
.wrap-narrow{ max-width: 760px; margin-inline:auto; }
section{ padding-block: clamp(48px, 8vw, 96px); }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; flex-wrap:wrap; gap:1rem; }
.grid{ display:grid; gap:1.5rem; }
@media (min-width: 760px){
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
  .grid-2{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- nav ---------- */
.site-nav{
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(27,35,80,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 14px;
}
.brand{ display:flex; align-items:center; gap:.6em; text-decoration:none; }
.brand-mark{ width:34px; height:34px; flex:0 0 auto; }
.brand-word{ font-family: var(--font-display); font-weight:800; font-size:1.25rem; color:var(--text); letter-spacing:-.01em; }
.brand-word span{ color: var(--accent); }
.nav-links{ display:flex; align-items:center; gap: 1.75rem; list-style:none; margin:0; padding:0; }
.nav-links a{ color: var(--text-soft); text-decoration:none; font-weight:600; font-size:.95rem; }
.nav-links a:hover, .nav-links a:focus-visible{ color: var(--text); }
@media (max-width: 720px){ .nav-links .nav-only-desktop{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-body); font-weight:700; font-size:1rem;
  padding: .85em 1.5em; border-radius: 999px; border: 2px solid transparent;
  text-decoration:none; cursor:pointer; transition: transform .15s ease, background .15s ease;
  line-height:1;
}
.btn-primary{ background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover{ background:#5CE6EF; }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }
.btn:active{ transform: scale(.98); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* ---------- cards / panels ---------- */
.card{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.75rem;
}
.card-icon{
  width:48px; height:48px; border-radius:14px; background: var(--accent-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
  color: var(--accent);
}
.card-icon svg{ width:24px; height:24px; }

/* ---------- pricing ---------- */
.plan{ display:flex; flex-direction:column; gap:1rem; }
.plan-name{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text-soft); text-transform:uppercase; letter-spacing:.04em; }
.plan-price{ font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:var(--text); }
.plan-price small{ font-family:var(--font-body); font-size:1rem; font-weight:500; color:var(--muted); }
.plan-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.plan-features li{ display:flex; gap:.6em; align-items:flex-start; color:var(--text-soft); font-size:.95rem; }
.plan-features svg{ flex:0 0 auto; width:18px; height:18px; margin-top:.15em; color: var(--accent); }
.plan.is-featured{ background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-color: var(--accent); position:relative; }
.plan.is-featured::before{
  content:"MOST POPULAR"; position:absolute; top:-13px; left:1.75rem;
  background: var(--accent); color: var(--accent-ink); font-family:var(--font-body);
  font-weight:800; font-size:.7rem; letter-spacing:.08em; padding:.35em .8em; border-radius:999px;
}

/* ---------- trust / promise ---------- */
.promise{
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  display:flex; gap:2rem; align-items:center; flex-wrap:wrap;
}
.promise-figure{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,6vw,4rem); color:var(--accent); line-height:1; }

/* ---------- form ---------- */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.25rem; }
.field label{ font-weight:700; font-size:.9rem; color: var(--text); }
.field .hint{ font-size:.82rem; color: var(--muted); }
input[type=text], input[type=email], select{
  font: inherit; color: var(--text); background: var(--panel-2);
  border:1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: .8em 1em; width:100%;
}
input::placeholder{ color: var(--muted); }
input:invalid[data-touched="true"]{ border-color: var(--danger); }
.error-msg{ color: var(--danger); font-size:.85rem; min-height:1.2em; }
.checkbox-row{ display:flex; gap:.75em; align-items:flex-start; }
.checkbox-row input[type=checkbox]{
  width:22px; height:22px; flex:0 0 auto; margin-top:.1em;
  accent-color: var(--accent); background: var(--panel-2);
}
.checkbox-row label{ font-weight:500; color: var(--text-soft); font-size:.92rem; }
.checkbox-row a{ font-weight:700; }
.form-status{ padding:1em 1.25em; border-radius: var(--radius-sm); font-weight:600; margin-top:1rem; }
.form-status.ok{ background: rgba(124,232,184,.12); color: var(--success); border:1px solid rgba(124,232,184,.35); }
.form-status.err{ background: rgba(255,154,168,.12); color: var(--danger); border:1px solid rgba(255,154,168,.35); }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding-block: 3rem; }
.footer-grid{ display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-links a{ color: var(--text-soft); text-decoration:none; font-size:.92rem; }
.footer-links a:hover{ color: var(--accent); }
.footer-col h4{ font-family:var(--font-body); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem; }
.footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color:var(--muted); }

/* ---------- cookie banner ---------- */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  padding: 1.1rem var(--gutter);
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(0,0,0,.35);
}
#cookie-banner .wrap{ display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; justify-content:space-between; }
#cookie-banner p{ margin:0; color: var(--text-soft); font-size:.92rem; max-width:56ch; }
#cookie-banner .actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.btn-sm{ padding:.6em 1.2em; font-size:.9rem; }

/* ---------- legal pages ---------- */
.legal main{ padding-block: clamp(40px,6vw,72px); }
.legal h2{ margin-top:2em; }
.legal h3{ margin-top:1.5em; }
.legal ul, .legal ol{ color: var(--text-soft); padding-left:1.3em; }
.legal li{ margin-bottom:.5em; }
.legal .updated{ color: var(--muted); font-size:.9rem; }
.legal .placeholder{ background: var(--accent-soft); border:1px dashed var(--accent); border-radius:6px; padding:.15em .5em; color: var(--text); font-family: ui-monospace, monospace; font-size:.88em; }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:1rem; top:-60px; z-index:200;
  background: var(--accent); color: var(--accent-ink); font-weight:700;
  padding:.7em 1.2em; border-radius: 8px; text-decoration:none; transition: top .15s ease;
}
.skip-link:focus{ top: calc(1rem + env(safe-area-inset-top, 0px)); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}