/* SmartCast marketing site — shared styles for /, /about.html, /guide.html,
   /signup.html. Light theme, deliberately independent from the dark
   "Foundry" palette used inside the app at /app — same brand accent
   colors (orange/teal) so the two still read as one product, but the
   marketing site itself is white/light per product direction. */

:root{
  --bg:      #ffffff;
  --sur:     #f7f8fa;
  --sur2:    #eef0f4;
  --bor:     #e3e5eb;
  --acc:     #e8672c;      /* brand orange — buttons, large display text, icons */
  --acc-text:#c2540f;      /* darker orange for small text-on-white (eyebrows, labels) — var(--acc) itself is too light to read reliably at small sizes on white */
  --acc-hover:#d35c22;
  --acc-soft:rgba(232,103,44,.08);
  --acc-ink: #2a1206;      /* dark ink text on top of the accent-orange buttons */
  --acc2:    #0e7490;      /* brand teal, darkened from the app's #4dd0e6 so it reads as text on white */
  --grn:     #1a9d5c;
  --warn:    #a66a00;
  --red:     #c8342a;
  --txt:     #14161c;
  --mut:     #6b7078;
  --fnt:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --fnt-display: 'Space Grotesk', 'Inter', sans-serif;
  --fnt-mono: 'JetBrains Mono', 'Consolas', monospace;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 28px; --sp-7: 40px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --maxw: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-family:var(--fnt);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--acc2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--fnt-display); font-weight:700; margin:0 0 var(--sp-3)}
p{margin:0 0 var(--sp-4); color:var(--mut)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5)}
img,svg{max-width:100%}

/* ── Top nav ── */
.m-nav{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--bor);
}
.m-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.m-brand{display:flex; align-items:center; gap:10px; font-family:var(--fnt-display); font-weight:800; font-size:19px; color:var(--txt)}
.m-brand span{color:var(--acc)}
.m-brand svg{display:block}
.m-links{display:flex; align-items:center; gap:var(--sp-6)}
.m-links a{color:rgba(20,22,28,.68); font-weight:600; font-size:13.5px}
.m-links a:hover{color:var(--txt); text-decoration:none}
.m-cta-group{display:flex; align-items:center; gap:var(--sp-3)}
.m-nav-toggle{display:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fnt); font-weight:700; font-size:13.5px; cursor:pointer;
  border-radius:var(--radius-md); padding:11px 22px; border:1px solid transparent;
  transition:all .15s;
}
.btn-primary{background:var(--acc); color:var(--acc-ink)}
.btn-primary:hover{background:var(--acc-hover); text-decoration:none}
.btn-ghost{background:transparent; border-color:var(--bor); color:var(--txt)}
.btn-ghost:hover{border-color:var(--mut); text-decoration:none}
.btn-lg{padding:14px 30px; font-size:15px}
.btn-block{width:100%}

/* ── Hero ── */
.hero{padding:var(--sp-7) 0 72px; text-align:center; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:900px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,103,44,.10) 0%, rgba(14,116,144,.05) 45%, transparent 72%);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; color:var(--acc2);
  background:rgba(14,116,144,.07); border:1px solid rgba(14,116,144,.22);
  border-radius:999px; padding:6px 14px; margin-bottom:var(--sp-5);
}
.hero h1{font-size:44px; line-height:1.12; max-width:820px; margin:0 auto var(--sp-4); position:relative}
.hero h1 em{color:var(--acc); font-style:normal}
.hero-sub{max-width:600px; margin:0 auto var(--sp-6); font-size:16.5px; color:var(--mut); position:relative}
.hero-ctas{display:flex; align-items:center; justify-content:center; gap:var(--sp-4); position:relative; flex-wrap:wrap}
.hero-note{margin-top:var(--sp-4); font-size:12.5px; color:var(--mut); position:relative}

/* ── Sections ── */
.section{padding:64px 0}
.section-alt{background:var(--sur)}
.section-head{text-align:center; max-width:640px; margin:0 auto 44px}
.section-head .eyebrow{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--acc-text);
  margin-bottom:var(--sp-2); display:block;
}
.section-head h2{font-size:30px}
.section-head p{margin:0}

/* ── Feature grid ── */
.feat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5)}
.feat-card{
  background:var(--bg); border:1px solid var(--bor); border-radius:var(--radius-lg);
  padding:var(--sp-6); transition:border-color .15s, box-shadow .15s;
  box-shadow:0 1px 2px rgba(20,22,28,.04);
}
.feat-card:hover{border-color:var(--acc); box-shadow:0 4px 14px rgba(20,22,28,.06)}
.feat-icon{
  width:44px; height:44px; border-radius:var(--radius-md); display:flex; align-items:center;
  justify-content:center; font-size:21px; background:var(--acc-soft); margin-bottom:var(--sp-4);
}
.feat-card h3{font-size:16.5px; margin-bottom:6px}
.feat-card p{font-size:13.5px; margin:0}

/* ── Numbered steps (how it works / guide) ── */
.steps{display:flex; flex-direction:column; gap:0}
.step{
  display:grid; grid-template-columns:56px 1fr; gap:var(--sp-5);
  padding:var(--sp-6) 0; border-bottom:1px solid var(--bor);
}
.step:last-child{border-bottom:none}
.step-num{
  width:40px; height:40px; border-radius:50%; background:var(--sur2); border:1px solid var(--bor);
  color:var(--acc-text); font-family:var(--fnt-mono); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step h3{font-size:17px; margin-bottom:6px}
.step p{margin:0; font-size:14px}
.step-tag{
  display:inline-block; font-family:var(--fnt-mono); font-size:10.5px; font-weight:700;
  color:var(--acc2); background:rgba(14,116,144,.07); border:1px solid rgba(14,116,144,.22);
  border-radius:5px; padding:2px 8px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.3px;
}

/* ── Stat strip ── */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); text-align:center}
.stat-strip b{display:block; font-family:var(--fnt-display); font-size:30px; color:var(--txt)}
.stat-strip span{font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.4px}

/* ── CTA banner ── */
.cta-banner{
  background:linear-gradient(135deg, rgba(232,103,44,.10), rgba(14,116,144,.06));
  border:1px solid var(--bor); border-radius:var(--radius-lg); padding:52px var(--sp-6);
  text-align:center;
}
.cta-banner h2{font-size:26px; margin-bottom:var(--sp-3)}
.cta-banner p{max-width:480px; margin:0 auto var(--sp-5)}

/* ── Cards / values (about page) ── */
.value-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-5)}
.value-card{background:var(--bg); border:1px solid var(--bor); border-radius:var(--radius-lg); padding:var(--sp-6); box-shadow:0 1px 2px rgba(20,22,28,.04)}
.value-card h3{font-size:15.5px; margin-bottom:6px; color:var(--acc2)}
.value-card p{font-size:13.5px; margin:0}

.prose{max-width:720px; margin:0 auto}
.prose h2{font-size:24px; margin-top:var(--sp-7)}
.prose p{font-size:15px; color:var(--txt); opacity:.85}
.prose p.mut{color:var(--mut); opacity:1}

/* ── Form (signup / request access) ── */
.form-card{
  max-width:480px; margin:0 auto; background:var(--sur); border:1px solid var(--bor);
  border-radius:var(--radius-lg); padding:var(--sp-7);
}
.fg{margin-bottom:var(--sp-4)}
.fg label{display:block; font-size:12px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px}
.fg input,.fg textarea,.fg select{
  width:100%; background:var(--bg); border:1px solid var(--bor); color:var(--txt);
  border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; font-family:var(--fnt);
}
.fg input:focus,.fg textarea:focus{outline:none; border-color:var(--acc2)}
.fg textarea{resize:vertical; min-height:80px}
.form-msg{
  margin-top:var(--sp-4); padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px;
  display:none;
}
.form-msg.on{display:block}
.form-msg.ok{background:rgba(26,157,92,.08); border:1px solid rgba(26,157,92,.3); color:var(--grn)}
.form-msg.err{background:rgba(200,52,42,.08); border:1px solid rgba(200,52,42,.3); color:var(--red)}

/* ── Footer ── */
.m-footer{border-top:1px solid var(--bor); padding:40px 0; margin-top:40px}
.m-footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4)}
.m-footer-links{display:flex; gap:var(--sp-5)}
.m-footer-links a{color:var(--mut); font-size:13px}
.m-footer-copy{color:var(--mut); font-size:12.5px}

code, .mono{font-family:var(--fnt-mono)}

@media (max-width: 860px){
  .feat-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr); gap:var(--sp-6)}
  .m-links{display:none}
  .hero h1{font-size:32px}
  .section-head h2{font-size:24px}
}