/* ============================================================
   Strym - landing page
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:            #0f0e0d;
  --bg-alt:        #161413;
  --surface:       #1c1a19;
  --surface-2:     #232120;
  --line:          rgba(255,255,255,.09);
  --line-strong:   rgba(255,255,255,.16);

  --text:          #f5f2ef;
  --text-dim:      #a7a19b;
  --text-faint:    #6f6862;
  --cream:         #fffaf4;   /* the logo's own ground */

  --accent:        #55b75d;
  --accent-soft:   rgba(85,183,93,.14);
  --accent-line:   rgba(85,183,93,.35);
  --accent-2:      #f00069;

  --radius:        18px;
  --radius-sm:     12px;
  --maxw:          1180px;
  --pad:           24px;

  --shadow:        0 24px 60px rgba(0,0,0,.45);
  --font:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0 0 .4em; line-height:1.1; letter-spacing:-.02em; font-weight:800; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#04140a; padding:10px 16px; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.container-narrow{ max-width:820px; }

.section{ padding:110px 0; position:relative; }
.section-alt{ background:var(--bg-alt); }

.section-head{ max-width:720px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(30px,4.4vw,48px); }
.kicker{
  display:inline-block; margin:0 0 14px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.muted{ color:var(--text-faint); }
.accent{ color:var(--accent); }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:15px; letter-spacing:-.01em; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn-primary{ background:var(--accent); color:#06180b; box-shadow:0 8px 26px rgba(85,183,93,.24); }
.btn-primary:hover{ background:#63c96b; transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ---------- Header ---------- */
/* fully transparent over the hero; the blur comes in with .is-stuck,
   which main.js toggles past 12px of scroll */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  transition:background .25s ease, backdrop-filter .25s ease;
}
.site-header.is-stuck{
  background:rgba(15,14,13,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; }

.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:18px; }
.logo-mark{
  width:32px; height:32px; flex:none;
  /* the artwork carries its own cream ground and rounded corners */
}

.nav{ display:flex; gap:30px; font-size:15px; color:var(--cream); }
.nav a{ position:relative; transition:color .18s ease; }
.nav a:hover{ color:var(--accent); }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px;
  background:var(--accent); transition:right .22s ease;
}
.nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:12px; }

.nav-toggle{
  display:none; width:42px; height:42px; border:1px solid var(--line-strong); border-radius:11px;
  background:transparent; cursor:pointer; padding:0; place-items:center; gap:4px;
}
.nav-toggle span{ display:block; width:17px; height:1.7px; background:var(--text); border-radius:2px; transition:.22s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:170px 0 110px; overflow:hidden; }
.hero-glow{
  position:absolute; top:-260px; left:50%; translate:-50% 0;
  width:900px; height:640px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(85,183,93,.20), transparent 72%);
  filter:blur(20px);
}
.hero-inner{ position:relative; }
.hero-copy{ max-width:860px; margin-inline:auto; text-align:center; }
.hero-app{ max-width:1000px; margin:66px auto 0; }
.hero h1{ font-size:clamp(40px,6.1vw,72px); margin-bottom:24px; }
.lead{ font-size:clamp(16px,1.6vw,19px); color:var(--text-dim); max-width:60ch; margin-inline:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 22px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--accent-line); background:var(--accent-soft);
  font-size:13px; font-weight:500; line-height:1; color:#a9e0ad; letter-spacing:.01em;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(85,183,93,.18); }

.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:32px; }
.hero-cta.center{ justify-content:center; }

.hero-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:34px; margin-top:44px; color:var(--text-faint); font-size:14px; }
.hero-facts strong{ display:block; color:var(--text); font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }

/* ---------- App mockup (recreation of the real macOS UI) ---------- */
.app-shell{ container-type:inline-size; }

.app-window{
  --aw-green:#4fbe62;
  --aw-blue:#2f7ff0;
  --aw-card:#171717;
  --aw-line:rgba(255,255,255,.08);
  --aw-dim:#8b8b8b;
  font-size:12.5px; line-height:1.3;
  background:#0d0d0d; color:#eceae8;
  border:1px solid rgba(255,255,255,.1); border-radius:14px;
  overflow:hidden;
  /* the window is a picture made of markup, not UI: no text cursor,
     no selection, and nothing inside it is focusable */
  cursor:default; user-select:none; -webkit-user-select:none;
  /* green light pooling under the window, echoing .hero-glow above it.
     Layered: a neutral shadow for depth, then two accent-tinted spreads */
  box-shadow:
    0 28px 64px rgba(0,0,0,.55),
    0 20px 56px -16px rgba(85,183,93,.34),
    0 44px 96px -32px rgba(85,183,93,.24);
}
/* title bar */
.aw-titlebar{ display:flex; align-items:center; gap:.55em; padding:.85em 1em; background:#1b232e; }
.tl{ width:.85em; height:.85em; border-radius:50%; flex:none; }
.tl.red{ background:#ff5f57; } .tl.amber{ background:#febc2e; } .tl.green{ background:#28c840; }
.aw-title{ margin-left:.7em; font-weight:700; font-size:1.05em; }

/* brand header */
.aw-header{ display:flex; align-items:center; gap:.7em; padding:.9em 1.1em; border-bottom:1px solid var(--aw-line); }
.aw-logo{ width:2.3em; height:2.3em; flex:none; }
.aw-brand{ font-size:1.7em; font-weight:800; letter-spacing:-.02em; }
.aw-status{ margin-left:auto; display:flex; gap:1.1em; color:var(--aw-dim); }
.aw-status li{ display:flex; align-items:center; gap:.45em; }
.aw-status i{ width:.5em; height:.5em; border-radius:50%; background:#5a5a5a; }

.aw-body{ padding:1.1em; display:grid; gap:1.05em; }

/* mode switch */
.aw-modes{ display:grid; grid-template-columns:1fr 1fr; gap:.7em; }
.aw-mode{
  display:flex; align-items:center; justify-content:center; gap:.55em;
  padding:1em .8em; border-radius:9px; border:1px solid var(--aw-line);
  background:var(--aw-card); color:var(--aw-dim); font-weight:600; font-size:1.1em;
}
.aw-mode.is-active{ background:var(--aw-green); border-color:var(--aw-green); color:#08240f; }
.aw-mode svg{ width:1.25em; height:1.25em; flex:none; }

/* cards */
.aw-row{ display:grid; gap:.7em; }
.aw-row-3{ grid-template-columns:repeat(3,1fr); }
.aw-card{ background:var(--aw-card); border:1px solid var(--aw-line); border-radius:9px; padding:.85em .9em; min-width:0; }
.aw-head{
  display:flex; align-items:center; gap:.4em; margin:0 0 .75em;
  color:var(--aw-green); font-weight:600;
}
.aw-head svg{ width:1.15em; height:1.15em; flex:none; }
.aw-head .chev{ width:.9em; height:.9em; }
.aw-value{ margin:0; font-weight:600; font-size:1.1em; display:flex; align-items:center; gap:.45em; min-width:0; }
.aw-value .flag{ font-size:1.2em; line-height:1; }
.aw-value.sel{ justify-content:space-between; gap:.6em; }
.aw-value.sel svg{ width:.95em; height:.95em; color:var(--aw-dim); flex:none; }

.aw-pill{
  margin-left:auto; flex:none; padding:.15em .6em;
  border:1px solid var(--aw-green); border-radius:999px; font-size:.82em; font-weight:600;
}
.aw-refresh{ flex:none; }

/* transport */
.aw-transport{ display:flex; gap:.7em; }
.aw-btn{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  padding:1em .8em; border:0; border-radius:9px; font-weight:700; font-size:1.1em;
}
.aw-btn svg{ width:1.15em; height:1.15em; flex:none; }
.aw-start{ flex:1.1; background:var(--aw-green); color:#08240f; }
.aw-rec{ width:3.6em; flex:none; background:var(--aw-blue); color:#fff; }
.aw-pause{ flex:1.5; background:var(--aw-card); border:1px solid var(--aw-line); color:#5f5f5f; }

/* toggles, meters, sliders */
.aw-toggle{
  margin-left:auto; flex:none; position:relative;
  width:2.5em; height:1.35em; border-radius:999px; background:#3d3d3d;
}
.aw-toggle::after{
  content:""; position:absolute; top:.17em; left:.17em;
  width:1.01em; height:1.01em; border-radius:50%; background:#fff;
}
.aw-toggle.on{ background:var(--aw-green); }
.aw-toggle.on::after{ left:auto; right:.17em; }

.aw-level{ margin-top:.85em; height:.42em; border-radius:999px; background:#2a2a2a; }
.aw-slider{ margin-top:.85em; display:flex; align-items:center; gap:.5em; color:var(--aw-dim); }
.aw-slider svg{ width:.95em; height:.95em; flex:none; }
.aw-track{ flex:1; position:relative; height:.38em; border-radius:999px; background:#2a2a2a; }
.aw-fill{ position:absolute; inset:0; border-radius:999px; background:var(--aw-green); }
.aw-knob{ position:absolute; top:50%; width:1.15em; height:1.15em; border-radius:50%; background:#e6e6e6; translate:-50% -50%; }

/* translation panel */
.aw-translation{ min-height:5.5em; }
.aw-translation .aw-head{ margin-bottom:0; }
.aw-badge{ padding:.05em .6em; border-radius:999px; background:#2e2e2e; color:#eceae8; font-size:.85em; }
.aw-clear{ margin-left:auto; color:#5f5f5f; font-weight:600; }

/* footer bar */
.aw-footer{
  display:flex; align-items:center; gap:.7em; flex-wrap:wrap;
  padding:.9em 1.1em; border-top:1px solid var(--aw-line);
  color:var(--aw-dim); font-size:.92em;
}
.aw-footer svg{ width:1.15em; height:1.15em; flex:none; }
.aw-offline{ display:flex; align-items:center; gap:.45em; }
.aw-offline i{ width:.5em; height:.5em; border-radius:50%; background:#5a5a5a; }
.aw-foot-right{ margin-left:auto; display:flex; align-items:center; gap:.85em; }
.aw-reset{ padding:.35em .75em; border-radius:6px; background:#8f2b22; color:#ffb3aa; font-weight:600; }
.aw-pro{ color:var(--aw-green); font-weight:600; }

/* narrow container: stack the three-up rows */
@container (max-width:620px){
  .app-window{ font-size:12px; }
  .aw-row-3{ grid-template-columns:1fr; }
  .aw-foot-right{ gap:.6em; }
}
@container (max-width:380px){
  .aw-status{ gap:.7em; }
  .aw-foot-right{ width:100%; margin-left:0; justify-content:space-between; }
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.card h3{ font-size:22px; }
/* .tag and .flow are paragraphs too: exclude them here, or this rule
   (0,1,1) out-ranks their own colour and spacing (0,1,0) and wipes it */
.card p:not(.tag):not(.flow){ color:var(--text-dim); margin-bottom:0; }

.card-mode{ padding:40px; }
.card-mode h3{ font-size:clamp(22px,2.4vw,28px); margin-bottom:14px; }
/* line-height:1 on every pill: the inherited 1.65 adds ~8px of dead
   space and leaves the label floating away from the edges */
.tag{
  display:inline-block; margin:0 0 18px; padding:8px 14px; border-radius:999px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  color:#a9e0ad; font-size:12px; font-weight:600; line-height:1;
  letter-spacing:.05em; text-transform:uppercase;
}
.tag-alt{ background:rgba(240,0,105,.10); border-color:rgba(240,0,105,.32); color:#ff9dc0; }
.flow{
  margin-top:26px; padding-top:20px; border-top:1px dashed var(--line-strong);
  font-size:13.5px; color:var(--text-faint);
}
.flow b{ color:var(--text); font-weight:600; }
.flow span{ color:var(--accent); padding:0 6px; }

.feature h3{ font-size:18px; margin-bottom:10px; }
.feature p{ font-size:14.5px; line-height:1.6; }
.feature{ padding:26px; }

.pcard{ padding:34px; }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s; }
.step{
  position:relative; padding:38px 30px 32px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.step h3{ font-size:20px; margin-bottom:12px; }
.step p{ color:var(--text-dim); margin:0; font-size:15px; }
.step-num{
  position:absolute; top:-19px; left:30px;
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent); color:#06180b; font-weight:800; font-size:16px;
  box-shadow:0 8px 20px rgba(85,183,93,.25);
}

/* ---------- Audience ---------- */
.who-item{ padding:26px 0; border-top:2px solid var(--accent); }
.who-item h3{ font-size:18px; margin-bottom:8px; }
.who-item p{ color:var(--text-dim); font-size:14.5px; margin:0; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; transition:border-color .2s ease;
}
.faq-item[open]{ border-color:var(--accent-line); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 56px 20px 24px; position:relative;
  font-weight:600; font-size:16.5px; letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; position:absolute; right:24px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  translate:0 -70%; rotate:45deg; transition:rotate .22s ease;
}
.faq-item[open] summary::after{ rotate:-135deg; translate:0 -20%; }
.faq-body{ padding:0 24px 22px; color:var(--text-dim); }
.faq-body p{ margin:0; }

/* ---------- CTA ---------- */
.cta{
  padding:120px 0; text-align:center; position:relative;
  /* clip sideways only: overflow:hidden here would slice ::before at the
     footer edge, and the cut gradient reads as a background change */
  overflow-x:clip; overflow-y:visible;
}
.cta::before{
  content:""; position:absolute; inset:auto 50% -120px auto; translate:50% 0;
  width:900px; height:560px; pointer-events:none;
  /* -120px is the footer's height: the glow reaches the end of the page
     and stops there. Push it lower and it extends the scrollable area
     past the footer, leaving dead space at the bottom. */
  background:radial-gradient(closest-side, rgba(85,183,93,.18), transparent 70%);
}
.cta-inner{ position:relative; }
.cta h2{ font-size:clamp(34px,5.4vw,60px); }
.badge-soon{
  display:inline-block; margin:18px 0 0; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--text-faint);
  font-size:12px; font-weight:600; line-height:1; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- Notify card (placeholder, not wired to a backend) ---------- */
.notify{
  max-width:540px; margin:46px auto 0; padding:32px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.notify h3{ font-size:21px; margin-bottom:8px; }
.notify-lead{ color:var(--text-dim); font-size:15px; margin-bottom:22px; }

.notify-form{ display:flex; gap:10px; }
.notify-input{
  flex:1; min-width:0; padding:13px 18px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line-strong);
  color:var(--text); font:inherit; font-size:15px; text-align:left;
}
.notify-input::placeholder{ color:var(--text-faint); }
.notify-input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.notify-note{ margin:16px 0 0; font-size:13px; color:var(--text-faint); }
.notify-note.is-warn{ color:#ffb3aa; }

@media (max-width:560px){
  .notify{ padding:26px; }
  .notify-form{ flex-direction:column; }
}

/* ---------- Footer ---------- */
.site-footer{ background:transparent; padding:44px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-note, .footer-copy{ margin:0; color:var(--text-faint); font-size:14px; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero{ padding-top:140px; }
  .hero-app{ margin-top:52px; }
}

@media (max-width:820px){
  .nav{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(15,14,13,.98); border-bottom:1px solid var(--line);
    padding:8px 24px 22px; display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav a::after{ display:none; }
  .nav-toggle{ display:grid; }
  .grid-2, .grid-3, .steps{ grid-template-columns:1fr; }
  .section{ padding:76px 0; }
  .section-head{ margin-bottom:40px; }
  .card-mode{ padding:30px; }
  .step-num{ left:24px; }
  .step{ padding-inline:24px; }
}

@media (max-width:560px){
  :root{ --pad:18px; }
  .grid-4{ grid-template-columns:1fr; }
  .hero-facts{ gap:24px; }
  .btn{ width:100%; }
  .header-actions .btn{ width:auto; }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:12px; }
}