/* Miko marketing site — brand system lifted from branding/miko_brand.html.
   Dark, teal->violet gradient, "miko" wordmark with the glowing i-dot. */

:root{
  --bg:#080a11; --bg2:#0d1019; --panel:#0f1420; --panel2:#141a27;
  --ink:#F4F7FD; --muted:#96A0B4; --line:rgba(255,255,255,.08);
  --a:#33E6C6;   /* teal */
  --b:#6E74FF;   /* violet-blue */
  --grad:linear-gradient(118deg,#33E6C6 0%,#5AC7FF 42%,#6E74FF 100%);
  --font:"Avenir Next","SF Pro Display","Helvetica Neue",system-ui,-apple-system,sans-serif;
  --wrap:1080px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(120% 90% at 82% -10%, rgba(110,116,255,.16) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(51,230,198,.10) 0%, transparent 50%);
  background-attachment:fixed;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.gradtext{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color:var(--muted); }

/* ---- wordmark ---- */
.wm{ font-weight:600; letter-spacing:-.03em; display:inline-flex; align-items:baseline; line-height:.9; }
.wm .idot{ display:inline-block; width:.13em; height:.13em; border-radius:50%; background:var(--grad);
  margin-left:.06em; transform:translateY(-.34em); box-shadow:0 0 10px 1px rgba(90,199,255,.6); }

/* ---- nav ---- */
header.nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(8,10,17,.72); border-bottom:1px solid var(--line); }
.nav .row{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.nav .wm{ font-size:30px; }
.nav nav{ display:flex; align-items:center; gap:28px; }
.nav nav a:not(.btn){ color:var(--muted); font-weight:500; font-size:15px; transition:color .15s; }
.nav nav a:not(.btn):hover{ color:var(--ink); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:16px;
  padding:13px 22px; border-radius:12px; cursor:pointer; border:0; font-family:inherit;
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s; }
.btn-primary{ background:var(--grad); color:#04120f; box-shadow:0 10px 30px -10px rgba(90,199,255,.6); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 40px -12px rgba(90,199,255,.75); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost{ background:rgba(255,255,255,.04); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.btn-lg{ font-size:17px; padding:16px 28px; }

/* ---- hero ---- */
.hero{ padding:78px 0 40px; }
.eyebrow{ font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--a); margin-bottom:20px; }
.hero h1{ font-size:clamp(34px,5.4vw,60px); font-weight:600; letter-spacing:-.02em; line-height:1.05; max-width:16ch; }
.hero p.lede{ font-size:clamp(17px,2.2vw,21px); color:var(--muted); margin-top:22px; max-width:56ch; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.trust{ margin-top:22px; font-size:14px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.trust .dot{ width:7px; height:7px; border-radius:50%; background:var(--a); box-shadow:0 0 8px var(--a); flex:none; }

/* ---- generic section ---- */
section{ padding:56px 0; }
.section-title{ font-size:clamp(24px,3.4vw,34px); font-weight:600; letter-spacing:-.01em; }
.section-lead{ color:var(--muted); margin-top:12px; max-width:60ch; font-size:17px; }

/* ---- video placeholder ---- */
.video{ margin-top:38px; }
.video .frame{ position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,var(--panel2),var(--panel)); aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center; text-align:center; }
.video .frame::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 50% 30%, rgba(90,199,255,.16), transparent 70%); }
.video .play{ position:relative; width:76px; height:76px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px rgba(90,199,255,.45); }
.video .play svg{ width:28px; height:28px; margin-left:4px; fill:#04120f; }
.video .cap{ position:relative; margin-top:18px; color:var(--muted); font-size:15px; }

/* ---- cards ---- */
.grid{ display:grid; gap:20px; margin-top:38px; }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card{ background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:16px; padding:26px; }
.card .n{ font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--a); }
.card h3{ font-size:19px; font-weight:600; margin:12px 0 8px; letter-spacing:-.01em; }
.card p{ color:var(--muted); font-size:15.5px; }
.stat{ font-size:40px; font-weight:600; letter-spacing:-.02em; }
.stat.gradtext{ line-height:1.1; }

/* ---- review CTA band ---- */
.band{ margin:20px 0; border:1px solid var(--line); border-radius:22px; padding:48px 40px;
  background:radial-gradient(120% 140% at 15% 10%, rgba(51,230,198,.10), transparent 55%),
             linear-gradient(180deg,var(--panel2),var(--panel)); }
.band h2{ font-size:clamp(26px,3.6vw,38px); font-weight:600; letter-spacing:-.01em; max-width:20ch; }
.band p{ color:var(--muted); margin-top:14px; max-width:60ch; font-size:17px; }

/* ---- review page call widget ---- */
.callwrap{ max-width:640px; margin:0 auto; }
.callcard{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:20px; padding:34px; text-align:center; margin-top:8px; }
.orb{ width:120px; height:120px; border-radius:50%; margin:6px auto 22px;
  background:radial-gradient(circle at 34% 30%, #7ef0dd 0%, #33E6C6 26%, #5AC7FF 55%, #6E74FF 100%);
  box-shadow:0 0 70px 6px rgba(90,199,255,.4), inset 0 0 40px rgba(255,255,255,.18); }
.orb.live{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 70px 6px rgba(90,199,255,.4), inset 0 0 40px rgba(255,255,255,.18);}
  50%{ box-shadow:0 0 96px 14px rgba(51,230,198,.6), inset 0 0 40px rgba(255,255,255,.22);} }
#status{ margin-top:22px; min-height:22px; color:var(--muted); font-size:15px; white-space:pre-wrap; }
.notice{ display:flex; gap:12px; text-align:left; background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; margin-top:16px; font-size:14px; color:var(--muted); }
.notice svg{ width:18px; height:18px; flex:none; margin-top:2px; }
.steps{ counter-reset:s; margin-top:26px; text-align:left; display:grid; gap:14px; }
.steps li{ list-style:none; display:flex; gap:14px; align-items:flex-start; }
.steps li::before{ counter-increment:s; content:counter(s); flex:none; width:28px; height:28px; border-radius:50%;
  background:rgba(51,230,198,.14); color:var(--a); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; }

/* ---- prose (privacy) ---- */
.prose{ max-width:760px; }
.prose h1{ font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-.01em; }
.prose h2{ font-size:21px; font-weight:600; margin:34px 0 10px; letter-spacing:-.01em; }
.prose p, .prose li{ color:var(--muted); font-size:16px; margin-top:10px; }
.prose ul{ margin-left:20px; }
.prose a{ color:var(--a); }
.prose .updated{ color:var(--muted); font-size:14px; margin-top:8px; }

/* ---- footer ---- */
footer{ border-top:1px solid var(--line); margin-top:40px; padding:40px 0; }
footer .row{ display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; }
footer .wm{ font-size:24px; }
footer .links{ display:flex; gap:22px; flex-wrap:wrap; }
footer .links a{ color:var(--muted); font-size:14px; }
footer .links a:hover{ color:var(--ink); }
footer .links .fnum{ color:var(--muted); font-size:14px; }
footer .fine{ color:var(--muted); font-size:13px; margin-top:14px; max-width:70ch; }

/* ---- phone number, DISPLAY-ONLY (not a link, not a button, no hover) ---- */
.phonedisplay{ margin-top:16px; }
.phonedisplay .pnum{ display:inline-flex; align-items:center; gap:11px;
  font-size:30px; font-weight:700; letter-spacing:.01em; color:var(--ink); }
.phonedisplay .pnum svg{ width:23px; height:23px; fill:var(--a); flex:none; }
.phonedisplay .plbl{ font-size:14px; color:var(--muted); margin-top:7px; }
/* "See how it works" is a text link, not a button (the web call is the only button). */
.seelink{ display:inline-flex; align-items:center; align-self:center; gap:6px;
  color:var(--muted); font-weight:600; font-size:16px; }
.seelink:hover{ color:var(--ink); }
@media (max-width:520px){ .phonedisplay .pnum{ font-size:26px; } }

/* ---- sticky mobile call bar (mobile only) ---- */
.stickybar{ display:none; }

/* ---- responsive ---- */
@media (max-width:820px){
  .grid.cols-3{ grid-template-columns:1fr; }
  .grid.cols-2{ grid-template-columns:1fr; }
  .nav nav a:not(.btn){ display:none; }
  .band{ padding:34px 24px; }
  section{ padding:44px 0; }
  body{ padding-bottom:74px; }
  .stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    font-weight:700; font-size:17px; letter-spacing:.01em;
    background:var(--grad); color:#04120f; text-decoration:none;
    box-shadow:0 -8px 30px -6px rgba(0,0,0,.6); }
  .stickybar svg{ width:20px; height:20px; fill:currentColor; }
}