/* FobSight marketing site — shared stylesheet (base: docs/fobnest-mockups/marketing.html,
   brand: docs/fobsight-brand.md). Self-contained: fonts self-hosted, no external requests. */
@font-face{
  font-family:"Inter"; src:url("/assets/inter.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono"; src:url("/assets/jetbrains-mono.woff2") format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
}
:root{
  --bg:#0c1116; --surface:#141b22; --surface-2:#1b232c; --line:#26303a; --linestr:#36424e;
  --ink:#e6edf3; --muted:#9aa7b2; --faint:#6b7785;
  --teal:#14b8a6; --teal-bright:#2dd4bf; --teal-subtle:rgba(20,184,166,.12);
  --success:#22c55e; --warning:#f59e0b; --danger:#ef4444;
  --maxw:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--teal-bright); outline-offset:2px; border-radius:4px}
img{max-width:100%; display:block}
.logo{height:32px; width:99px; display:block}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-bright)}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; border-radius:10px;
     padding:11px 18px; border:1px solid transparent; cursor:pointer; transition:.15s ease; white-space:nowrap}
.btn-primary{background:var(--teal); color:#04201d}
.btn-primary:hover{background:var(--teal-bright)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--linestr)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-bright)}
.ico{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* nav */
header.nav{position:sticky; top:0; z-index:50; background:rgba(12,17,22,.82); backdrop-filter:blur(10px);
           border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{color:var(--muted); font-size:15px; font-weight:500}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{display:flex; gap:12px; align-items:center}

/* hero */
.hero{position:relative; overflow:hidden; padding:88px 0 72px; border-bottom:1px solid var(--line)}
.hero::before{content:""; position:absolute; inset:0; background:
   radial-gradient(900px 380px at 78% -10%, rgba(20,184,166,.16), transparent 60%),
   radial-gradient(700px 320px at 12% 8%, rgba(45,212,191,.07), transparent 60%); pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:54px; line-height:1.05; font-weight:800; letter-spacing:-.02em; margin:18px 0 18px}
.hero h1 .accent{color:var(--teal)}
.hero p.lead{font-size:19px; color:var(--muted); max-width:560px; margin-bottom:28px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.hero-note{font-size:13px; color:var(--faint); display:flex; align-items:center; gap:8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* real product screenshot frame */
.shot{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
      box-shadow:0 24px 60px -28px rgba(0,0,0,.7)}
.shot-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line)}
.shot-bar span{width:10px; height:10px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line)}
.shot img{width:100%}
.shot-caption{font-size:12.5px; color:var(--faint); padding:10px 14px; border-top:1px solid var(--line)}

/* segment strip */
.strip{padding:26px 0; border-bottom:1px solid var(--line); background:var(--surface)}
.strip-inner{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center}
.strip span.label{color:var(--faint); font-size:13px; font-weight:600; letter-spacing:.04em}
.chip{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--muted);
      border:1px solid var(--line); border-radius:999px; padding:7px 14px}
.chip svg{width:16px;height:16px;stroke:var(--teal-bright);fill:none;stroke-width:1.7}

/* sections */
section.block{padding:84px 0}
.sec-head{text-align:center; max-width:680px; margin:0 auto 50px}
.sec-head h2{font-size:36px; font-weight:800; letter-spacing:-.02em; margin:14px 0 12px}
.sec-head p{color:var(--muted); font-size:18px}

.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px}
.card:hover{border-color:var(--linestr)}
.card .icobox{width:44px;height:44px;border-radius:11px;background:var(--teal-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .icobox svg{width:24px;height:24px;stroke:var(--teal-bright);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:17px; font-weight:700; margin-bottom:8px}
.card p{color:var(--muted); font-size:14.5px}

/* problem vignettes + outcome trio */
.vign{border-left:3px solid var(--linestr); padding:4px 0 4px 18px}
.vign h3{font-size:16.5px; font-weight:700; margin-bottom:6px}
.vign p{color:var(--muted); font-size:14.5px}
.turnline{text-align:center; color:var(--ink); font-size:18px; max-width:640px; margin:44px auto 0}
.turnline strong{color:var(--teal-bright)}
.getgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px 32px; margin:0 auto; max-width:820px}
.getgrid li{display:flex; gap:11px; align-items:flex-start; color:var(--ink); font-size:15px; list-style:none}
.getgrid svg{width:20px;height:20px;flex:0 0 20px;stroke:var(--teal-bright);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.linkrow{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.linkrow a{color:var(--teal-bright); font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:6px}
.linkrow a:hover{text-decoration:underline}

/* how it works */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:24px 22px}
.step .n{font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--teal); font-weight:600; letter-spacing:.1em}
.step h4{font-size:16px; font-weight:700; margin:8px 0 6px}
.step p{color:var(--muted); font-size:13.5px}
.step .arrow{position:absolute; right:-12px; top:50%; transform:translateY(-50%); color:var(--linestr); z-index:2}
.step:last-child .arrow{display:none}

/* reliability band */
.band{background:linear-gradient(180deg,var(--surface),#10171e); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:72px 0}
.band h2{font-size:32px; font-weight:800; letter-spacing:-.02em; margin:14px 0 14px; line-height:1.1}
.band p{color:var(--muted); font-size:17px; margin-bottom:14px}
.checks{list-style:none; display:grid; gap:12px; margin-top:10px}
.checks li{display:flex; gap:11px; align-items:flex-start; color:var(--ink); font-size:15px}
.checks svg{width:20px;height:20px;flex:0 0 20px;stroke:var(--success);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.statwrap{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px}
.stat .big{font-size:34px; font-weight:800; color:var(--teal-bright); letter-spacing:-.02em}
.stat .lab{color:var(--muted); font-size:13.5px; margin-top:4px}

/* feature row */
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

/* cta band */
.ctaband{padding:84px 0}
.ctabox{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:56px; text-align:center}
.ctabox::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 240px at 50% 0,rgba(20,184,166,.16),transparent 65%)}
.ctabox h2{position:relative; font-size:34px; font-weight:800; letter-spacing:-.02em; margin-bottom:12px}
.ctabox p{position:relative; color:var(--muted); font-size:18px; margin-bottom:26px}
.ctabox .hero-cta{position:relative; justify-content:center}

/* footer */
footer{border-top:1px solid var(--line); padding:54px 0 36px; background:var(--surface)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px}
.foot-grid h2{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:14px; font-weight:600}
.foot-grid a{display:block; color:var(--muted); font-size:14px; padding:5px 0}
.foot-grid a:hover{color:var(--teal-bright)}
.foot-blurb{color:var(--muted); font-size:14px; max-width:280px; margin-top:14px}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:22px; color:var(--faint); font-size:13px; flex-wrap:wrap; gap:12px}

/* responsive */
@media (max-width:920px){
  .hero-grid,.band-grid{grid-template-columns:1fr; gap:40px}
  .pillars,.steps,.feat{grid-template-columns:1fr 1fr}
  .hero h1{font-size:42px}
  .step .arrow{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .getgrid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}   /* two buttons + logo don't fit at 390 — the demo CTA wins */
  .pillars,.steps,.feat,.statwrap,.foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  section.block{padding:56px 0}
  .ctabox{padding:36px 20px}
}

/* ===== motion (operator-requested) — subtle, no deps, reduced-motion-safe ===== */
@media (prefers-reduced-motion:no-preference){
  /* hero entrance: staggered rise */
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes riseShot{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
  .hero .eyebrow,.hero h1,.hero p.lead,.hero .hero-cta,.hero .hero-note{opacity:0;animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
  .hero h1{animation-delay:.08s}
  .hero p.lead{animation-delay:.16s}
  .hero .hero-cta{animation-delay:.24s}
  .hero .hero-note{animation-delay:.32s}
  .hero .shot{opacity:0;animation:riseShot .7s cubic-bezier(.2,.7,.2,1) .2s forwards}

  /* live pulse (hero card chrome + hero-note dot) */
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .pulse{animation:pulse 2.2s ease-in-out infinite}

  /* scroll reveals: html.js hides .reveal until the observer flips .in (no-JS stays visible) */
  html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .reveal:nth-child(2){transition-delay:.08s}
  html.js .reveal:nth-child(3){transition-delay:.16s}
  html.js .reveal:nth-child(4){transition-delay:.24s}
  html.js .reveal:nth-child(5){transition-delay:.32s}
  html.js .reveal:nth-child(6){transition-delay:.4s}

  /* micro-interactions */
  .linkrow a svg{transition:transform .18s ease}
  .linkrow a:hover svg{transform:translateX(3px)}
  .btn-primary svg{transition:transform .18s ease}
  .btn-primary:hover svg{transform:translateX(3px)}
  .card{transition:transform .2s ease,border-color .2s ease}
  .card:hover{transform:translateY(-2px)}
}
.live-pill{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--teal-bright);background:var(--teal-subtle);border-radius:999px;padding:3px 10px}
.live-pill .dot{background:var(--teal-bright)}

/* ===== demo form (slice 3) ===== */
.formgrid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start}
.field{margin-bottom:16px}
.field label{display:block; font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:6px}
.field input,.field textarea{width:100%; background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:11px 13px; color:var(--ink); font:inherit; font-size:15px}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-subtle)}
.field textarea{min-height:110px; resize:vertical}
.hp{position:absolute; left:-9999px; top:-9999px; height:1px; width:1px; overflow:hidden}
.banner{border-radius:12px; padding:14px 16px; font-size:14.5px; margin-bottom:20px; display:none}
.banner.show{display:block}
.banner-ok{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:#7ee2a0}
.banner-err{background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3); color:#f4c065}
.turnstile-slot{margin:6px 0 18px}
@media (max-width:920px){.formgrid{grid-template-columns:1fr; gap:36px}}

/* ===== legal prose (slice 4) ===== */
.prose{max-width:760px}
.prose h2{font-size:22px; font-weight:700; letter-spacing:-.01em; margin:36px 0 10px}
.prose p,.prose li{color:var(--muted); font-size:15.5px; line-height:1.65}
.prose p{margin-bottom:12px}
.prose ul{margin:0 0 12px 22px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink)}
.prose .lastmod{font-size:13px; color:var(--faint); margin-bottom:8px}
.draftnote{background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:#f4c065;
  border-radius:12px; padding:12px 16px; font-size:13.5px; margin:18px 0 6px}