/* ============================================================
   Sentinel — marketing site styles
   Builds on the Sentinel design system (Geist · Geist Mono ·
   Fraunces display). Forest/signal palette. Editorial rhythm.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&display=swap');

:root{
  --forest:#0C2A20; --forest-2:#13382C; --forest-3:#0a2018; --moss:#1E5D44;
  --signal:#3DD598; --signal-dk:#159C6E; --signal-lt:#D9F2E5; --signal-glow:rgba(61,213,152,.14);
  --lime:#C9E86A; --slate:#6B7A78; --slate-lt:#B8C0BE;
  --bone:#F5F3EC; --paper:#ECEAE1; --chalk:#FBFAF5;
  --graphite:#4A5A55; --hairline:#D8D4C4; --hairline-dk:#1E3329;
  --outbreak:#E04D2B; --watch:#E0A43A;

  --f-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-display:"Fraunces","Geist",Georgia,serif;

  /* tweakable accent */
  --accent:#3DD598;
  --accent-dk:#159C6E;

  --maxw:1240px;
  --pad-x:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bone); color:var(--forest);
  font-family:var(--f-sans); font-size:17px; line-height:1.6;
  letter-spacing:-.005em; font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---- shared layout ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--accent-dk);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
.eyebrow.on-dark{color:var(--accent)}
.section{padding:clamp(72px,11vw,140px) 0}
.disp{font-family:var(--f-display);font-weight:300;letter-spacing:-.025em;line-height:1.02}
.disp em{font-style:italic;color:var(--accent-dk)}
.on-dark .disp em,.disp.on-dark em{color:var(--accent)}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--graphite);max-width:60ch}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(12,42,32,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--hairline-dk);color:var(--bone);
}
.nav__in{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:30px;height:30px;flex:none}
.brand__name{font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1}
.brand__name small{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;
  color:var(--slate-lt);text-transform:uppercase;font-weight:400;margin-top:3px}
.nav__links{display:flex;gap:26px;margin-left:18px}
.nav__links a{font-size:14px;color:var(--slate-lt);transition:color .15s}
.nav__links a:hover{color:var(--signal)}
.nav__cta{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(max-width:760px){.nav__links{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;
  font-size:14px;font-weight:500;border-radius:6px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.btn:hover{text-decoration:none}
.btn--signal{background:var(--accent);color:var(--forest);border-color:var(--accent)}
.btn--signal:hover{background:var(--signal-lt);transform:translateY(-1px)}
.btn--ghost-dark{background:transparent;color:var(--bone);border-color:var(--hairline-dk)}
.btn--ghost-dark:hover{border-color:var(--slate-lt);background:rgba(255,255,255,.04)}
.btn--ghost{background:transparent;color:var(--forest);border-color:var(--hairline)}
.btn--ghost:hover{border-color:var(--graphite);background:var(--chalk)}
.btn--lg{height:50px;padding:0 26px;font-size:15px}
.btn .ext{font-family:var(--f-mono);font-size:13px;opacity:.7}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;color:var(--bone);
  background:
    radial-gradient(at 78% 18%, rgba(61,213,152,.30) 0%, transparent 46%),
    radial-gradient(at 12% 84%, rgba(30,93,68,.55) 0%, transparent 56%),
    radial-gradient(at 58% 52%, rgba(107,122,120,.22) 0%, transparent 52%),
    var(--forest);
}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,var(--forest-3) 100%);opacity:.5}
.hero__grain{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:3px 3px}
.hero__in{position:relative;z-index:2;display:grid;gap:56px;
  padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(64px,9vw,120px)}

/* status line */
.statusline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-lt)}
.statusline .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 0 rgba(61,213,152,.7);animation:livepulse 2.4s var(--ease,cubic-bezier(.16,1,.3,1)) infinite}
.statusline a{color:var(--signal-lt);border-bottom:1px solid rgba(217,242,229,.25)}
.statusline a:hover{color:#fff}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(61,213,152,.55)}70%{box-shadow:0 0 0 9px rgba(61,213,152,0)}100%{box-shadow:0 0 0 0 rgba(61,213,152,0)}}

.hero h1{font-family:var(--f-display);font-weight:300;letter-spacing:-.03em;line-height:1.0;
  font-size:clamp(44px,6.4vw,90px);margin:22px 0 0}
.hero h1 em{font-style:italic;color:var(--signal)}
.hero__sub{margin-top:26px;font-size:clamp(17px,1.5vw,20px);line-height:1.62;
  color:rgba(245,243,236,.78);max-width:54ch}
.hero__actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* Hero layout: statement (default) */
.hero[data-hero="statement"] .hero__in{grid-template-columns:1fr;justify-items:start;text-align:left}
.hero[data-hero="statement"] .hero__visual--product{display:none}
.hero[data-hero="statement"] .hero__radar{display:block}

/* Hero layout: product */
.hero[data-hero="product"] .hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(36px,5vw,72px)}
.hero[data-hero="product"] .hero__radar{display:none}
.hero[data-hero="product"] .hero__visual--product{display:block}
.hero[data-hero="product"] h1{font-size:clamp(40px,4.6vw,68px)}
@media(max-width:900px){
  .hero[data-hero="product"] .hero__in{grid-template-columns:1fr}
  .hero[data-hero="product"] .hero__visual--product{display:none}
  .hero[data-hero="product"] .hero__radar{display:block}
}

/* radar visual */
.hero__radar{justify-self:center;margin-top:8px}
.radar{position:relative;width:min(360px,72vw);aspect-ratio:1}
.radar__ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid rgba(61,213,152,.4)}
.radar__core{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
  background:var(--signal);box-shadow:0 0 30px 6px rgba(61,213,152,.5)}
.radar__ping{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
  border:2px solid var(--signal);animation:radarping 3.4s cubic-bezier(.16,1,.3,1) infinite}
.radar__ping.d2{animation-delay:1.13s}
.radar__ping.d3{animation-delay:2.26s}
.radar__sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(61,213,152,.16) 28deg,transparent 60deg);
  animation:sweep 4.6s linear infinite}
@keyframes radarping{0%{width:46px;height:46px;opacity:.9}100%{width:min(360px,72vw);height:min(360px,72vw);opacity:0}}
@keyframes sweep{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .radar__ping,.radar__sweep,.statusline .dot{animation:none}
  .radar__ping{opacity:.25;width:min(280px,60vw);height:min(280px,60vw)}
}

/* product hero screenshot frame */
.hero__visual--product{position:relative}

/* browser-ish frame for screenshots */
.frame{border:1px solid var(--hairline-dk);border-radius:12px;overflow:hidden;
  background:var(--forest-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03)}
.frame__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--hairline-dk);
  background:rgba(0,0,0,.18)}
.frame__bar i{width:10px;height:10px;border-radius:50%;background:#2f4a40;display:block}
.frame__bar .url{margin-left:12px;font-family:var(--f-mono);font-size:11px;color:var(--slate-lt);
  letter-spacing:.04em;display:flex;align-items:center;gap:7px}
.frame__bar .url .lk{width:6px;height:6px;border-radius:50%;background:var(--signal)}
.frame img{width:100%;display:block}
.frame--light{border-color:var(--hairline);background:var(--chalk)}
.frame--light .frame__bar{border-color:var(--hairline);background:var(--paper)}
.frame--light .frame__bar i{background:#cfcabb}
.frame--light .frame__bar .url{color:var(--graphite)}

/* mini sparkline of "case arrivals" under hero */
.hero__ticker{position:relative;z-index:2;border-top:1px solid var(--hairline-dk);
  background:rgba(0,0,0,.16)}
.hero__ticker .wrap{display:flex;align-items:center;gap:clamp(20px,5vw,72px);
  padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.tstat{display:flex;flex-direction:column;gap:5px}
.tstat .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-lt)}
.tstat .v{font-family:var(--f-display);font-weight:300;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--bone)}
.tstat .v.sig{color:var(--signal)}
.tbars{display:flex;align-items:flex-end;gap:4px;height:38px;margin-left:auto}
.tbars span{width:6px;border-radius:2px 2px 0 0;background:var(--moss);opacity:.8;
  transform-origin:bottom;animation:barbreath 3.2s ease-in-out infinite}
.tbars span.hi{background:var(--signal)}
.tbars span.warn{background:var(--watch)}
@keyframes barbreath{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.tbars span{animation:none}}
@media(max-width:560px){.tbars{display:none}}

/* ============================================================
   QUOTE / WHY band (light)
   ============================================================ */
.why{background:var(--paper);border-bottom:1px solid var(--hairline)}
.why .wrap{padding-top:clamp(64px,9vw,108px);padding-bottom:clamp(64px,9vw,108px)}
.why blockquote{font-family:var(--f-display);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(26px,3.6vw,46px);line-height:1.18;max-width:20ch;margin:18px 0 0}
.why blockquote em{font-style:italic;color:var(--accent-dk)}
.why__src{margin-top:28px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--graphite)}
.why__src b{color:var(--forest);font-weight:500}
.why__body{margin-top:34px;max-width:60ch;color:var(--graphite);font-size:18px;line-height:1.65}

/* ============================================================
   PRINCIPLES (light)
   ============================================================ */
.principles__head{max-width:46ch;margin-bottom:clamp(40px,6vw,72px)}
.principles__head h2{font-size:clamp(34px,4.6vw,58px);margin-top:18px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
@media(max-width:780px){.pgrid{grid-template-columns:1fr}}
.pcell{background:var(--bone);padding:clamp(30px,4vw,52px)}
.pcell__n{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;color:var(--accent-dk)}
.pcell h3{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.8vw,36px);
  letter-spacing:-.02em;line-height:1.08;margin:18px 0 16px}
.pcell p{color:var(--graphite);font-size:17px;line-height:1.62;max-width:42ch}
.pcell p+p{margin-top:14px}
.pcell .quietkey{color:var(--forest);font-weight:500}

/* ============================================================
   SHOWCASE (dark) — real product screenshots
   ============================================================ */
.showcase{background:var(--forest);color:var(--bone);position:relative;overflow:hidden}
.showcase::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(at 85% 8%, rgba(61,213,152,.16) 0%, transparent 42%)}
.showcase .wrap{position:relative;z-index:1}
.showcase__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  flex-wrap:wrap;margin-bottom:clamp(34px,5vw,58px)}
.showcase__head h2{font-size:clamp(32px,4.4vw,56px);color:var(--bone);max-width:18ch}
.showcase__head h2 em{font-style:italic;color:var(--signal)}
.showcase__head p{color:rgba(245,243,236,.7);max-width:40ch;font-size:17px;margin-top:8px}
.showcase__main{margin-bottom:24px}
.showcase__cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-lt);margin-top:14px;display:flex;gap:10px;align-items:center}
.showcase__cap .s{color:var(--signal)}
.showcase__pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
@media(max-width:780px){.showcase__pair{grid-template-columns:1fr}}

/* ============================================================
   UNDER THE HOOD (light)
   ============================================================ */
.hood__head{max-width:48ch;margin-bottom:clamp(40px,6vw,72px)}
.hood__head h2{font-size:clamp(34px,4.6vw,58px);margin-top:18px}
.hood__head p{margin-top:20px}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
@media(max-width:780px){.hgrid{grid-template-columns:1fr}}
.hitem{background:var(--bone);padding:clamp(28px,3.4vw,44px);position:relative;transition:background .2s}
.hitem:hover{background:var(--chalk)}
.hitem__n{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--accent-dk);
  display:flex;align-items:center;gap:10px}
.hitem__n .ic{width:34px;height:34px;border-radius:8px;border:1px solid var(--hairline);
  display:grid;place-items:center;background:var(--chalk)}
.hitem__n .ic svg{width:17px;height:17px;color:var(--accent-dk)}
.hitem h3{font-family:var(--f-display);font-weight:400;font-size:clamp(21px,2.2vw,27px);
  letter-spacing:-.015em;margin:20px 0 12px}
.hitem p{color:var(--graphite);font-size:15.5px;line-height:1.6}
.hitem .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite);border:1px solid var(--hairline);background:var(--chalk);
  padding:4px 9px;border-radius:4px}

/* ============================================================
   CTA / open source (dark) + Pip
   ============================================================ */
.cta{position:relative;overflow:hidden;color:var(--bone);
  background:
    radial-gradient(at 18% 22%, rgba(61,213,152,.26) 0%, transparent 44%),
    radial-gradient(at 86% 80%, rgba(30,93,68,.5) 0%, transparent 54%),
    var(--forest);}
.cta .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:48px;
  align-items:center;padding-top:clamp(72px,10vw,128px);padding-bottom:clamp(72px,10vw,128px)}
@media(max-width:820px){.cta .wrap{grid-template-columns:1fr;gap:40px}}
.cta h2{font-size:clamp(34px,5vw,62px);color:var(--bone)}
.cta h2 em{font-style:italic;color:var(--signal)}
.cta p{color:rgba(245,243,236,.78);font-size:18px;line-height:1.62;margin-top:22px;max-width:46ch}
.cta__actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.cta__contact{margin-top:22px;font-size:15px;color:rgba(245,243,236,.65)}
.cta__contact a{color:var(--signal);border-bottom:1px solid rgba(61,213,152,.3);font-family:var(--f-mono);font-size:13.5px}
.cta__contact a:hover{color:var(--signal-lt)}
.cta__meta{margin-top:30px;display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--slate-lt)}
.cta__meta b{display:block;color:var(--bone);font-size:20px;font-weight:500;
  font-family:var(--f-display);letter-spacing:-.01em;margin-bottom:3px}
.cta__pip{justify-self:center;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.14));
  border:1px solid var(--hairline-dk);border-radius:20px;padding:30px 34px 20px;overflow:hidden}
.cta__pip::before{content:"";position:absolute;left:50%;top:40%;width:74%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(61,213,152,.26),rgba(61,213,152,.06) 52%,transparent 70%)}
.cta__pip svg{position:relative;z-index:1;width:min(190px,52vw);height:auto;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.5))}
.cta__pip .label{position:relative;z-index:1;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-lt);text-align:center;margin-top:12px}
@media(max-width:820px){.cta__pip{display:none}}

/* pip ping */
.pipping{transform-origin:60px -6px;animation:pipping 3s ease-out infinite}
@keyframes pipping{0%{opacity:.9;transform:scale(.5)}70%{opacity:0;transform:scale(1.6)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pipping{animation:none;opacity:.5}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--forest-3);color:var(--slate-lt);border-top:1px solid var(--hairline-dk)}
.footer .wrap{padding-top:clamp(48px,6vw,72px);padding-bottom:40px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  padding-bottom:40px;border-bottom:1px solid var(--hairline-dk)}
@media(max-width:680px){.footer__top{grid-template-columns:1fr 1fr}}
.footer__brand .brand__name{color:var(--bone)}
.footer__brand p{margin-top:16px;font-size:14px;line-height:1.6;max-width:34ch;color:var(--slate-lt)}
.fcol h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-bottom:14px;font-weight:500}
.fcol a{display:block;font-size:14px;color:var(--slate-lt);margin-bottom:10px;transition:color .15s}
.fcol a:hover{color:var(--signal)}
.footer__bot{padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--slate)}
.footer__bot a{color:var(--slate-lt)}
.acknowledge{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--slate);max-width:70ch;
  font-style:italic}

/* ============================================================
   scroll reveal
   ============================================================ */
/* Reveal = transform-only slide. Opacity stays 1 at ALL times, so content
   is never invisible even if the animation clock is frozen/unsupported. */
.reveal.pre{transform:translateY(26px)}
.reveal.in{transform:none}
.reveal.pre,.reveal.in{transition:transform .85s cubic-bezier(.16,1,.3,1)}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.reveal.pre{transform:none;transition:none}}