/* ============================================================
   ScoutNest — shared marketing site stylesheet
   Brand tokens lifted from the app's globals.css + sign-in page.
   Used by every public page (home, features, pricing, about,
   login, signup, contact) for a consistent design language.
   ============================================================ */

:root {
  /* Forest green */
  --g50:#f2faf6; --g100:#e6f5ec; --g200:#c2e8d0; --g300:#8ed4a5;
  --g400:#5cba80; --g500:#38a665; --g600:#2d8a54; --g700:#236b42;
  --g800:#1e4d35; --g900:#1a3a2a;
  /* Warm neutrals */
  --w50:#faf8f5; --w100:#f5f0ea; --w200:#e8dfd4; --w300:#d4c7b6;
  --w600:#8a7a68; --w800:#4a3f34;
  --paper:#faf8f5; --ink:#1a3a2a; --muted:#6f6253;
  --card-border:#e8e4de;
  /* Semantic */
  --amber:#d4910a; --amber-bg:#fef7e6; --amber-text:#8a5d04; --amber-border:#f0e0b0;
  --blue:#2a6cb6; --blue-bg:#edf4fc; --blue-text:#1a4a80; --blue-border:#c8daf0;
  --purple:#7c3aed; --purple-bg:#f3eefe; --purple-text:#5521b5;
  --danger:#c53434; --danger-bg:#fef0f0;

  --maxw:1180px;
  --radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-xl:26px;
  --shadow-sm:0 1px 2px rgba(26,58,42,.05);
  --shadow:0 2px 14px rgba(26,58,42,.07);
  --shadow-lg:0 24px 60px -28px rgba(26,58,42,.30);
  --shadow-card:0 1px 2px rgba(26,58,42,.04), 0 20px 44px -26px rgba(26,58,42,.22);
  --font:'DM Sans', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); background:var(--paper); color:var(--w800);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; color:var(--g900); letter-spacing:-0.025em; line-height:1.08; font-weight:700; }
p{ margin:0; }

::selection{ background:var(--g200); color:var(--g900); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:104px 0; position:relative; }
.section--tight{ padding:76px 0; }
@media (max-width:860px){ .section{ padding:72px 0; } .wrap{ padding:0 20px; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--g600);
}
.eyebrow::before{
  content:""; width:18px; height:2px; border-radius:2px; background:var(--g400);
}
.eyebrow.center::before{ display:none; }

.h-display{ font-size:clamp(34px,5.2vw,60px); letter-spacing:-0.035em; line-height:1.02; }
.h-section{ font-size:clamp(28px,3.6vw,42px); letter-spacing:-0.03em; }
.lede{ font-size:clamp(16px,1.5vw,19px); color:var(--muted); line-height:1.6; }

.text-center{ text-align:center; }
.section-head{ max-width:680px; }
.section-head.center{ margin:0 auto; text-align:center; }
.section-head .h-section{ margin-top:16px; }
.section-head .lede{ margin-top:16px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:50px; padding:0 24px; border-radius:11px; border:1px solid transparent;
  font-size:15.5px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap;
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s;
}
.btn:active{ transform:translateY(1px); }
.btn-amber{
  background:var(--amber); color:#3a2702;
  box-shadow:0 1px 2px rgba(138,93,4,.25), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-amber:hover{ background:#e29c14; box-shadow:0 10px 24px -10px rgba(212,145,10,.6); }
.btn-green{
  background:var(--g600); color:#fff;
  box-shadow:0 1px 2px rgba(26,58,42,.2), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-green:hover{ background:var(--g700); box-shadow:0 10px 26px -12px rgba(45,138,84,.7); }
.btn-ghost{
  background:#fff; color:var(--g800); border-color:var(--w200);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{ border-color:var(--g300); background:var(--g50); }
.btn-lg{ height:56px; padding:0 30px; font-size:16.5px; }
.btn-block{ width:100%; }

.pill{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  font-size:12.5px; font-weight:600; background:var(--g50); color:var(--g700);
  border:1px solid var(--g200);
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(250,248,245,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
}
.nav.scrolled{ border-bottom-color:var(--w200); box-shadow:0 6px 24px -18px rgba(26,58,42,.4); }
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 28px; height:70px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:32px; height:32px; border-radius:10px; background:var(--g600);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-weight:700; font-size:18px; line-height:1; flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(26,58,42,.18);
}
.brand-word{ font-size:21px; font-weight:700; letter-spacing:-0.02em; color:var(--g900); }
.brand-word b{ color:var(--g600); font-weight:700; }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-links a{
  padding:9px 14px; border-radius:9px; font-size:14.5px; font-weight:600; color:var(--w800);
  transition:background .15s, color .15s;
}
.nav-links a:hover{ background:var(--w100); color:var(--g700); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-cta .signin{ font-size:14.5px; font-weight:600; color:var(--g800); padding:9px 12px; border-radius:9px; }
.nav-cta .signin:hover{ background:var(--w100); }
.nav-burger{ display:none; width:44px; height:44px; border-radius:11px; border:1px solid var(--w200);
  background:#fff; align-items:center; justify-content:center; margin-left:auto; }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--g800); border-radius:2px; position:relative; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--g800); border-radius:2px; }
.nav-burger span::before{ top:-6px; } .nav-burger span::after{ top:6px; }

.mobile-menu{
  display:none; position:fixed; inset:70px 0 0; z-index:55;
  background:var(--paper); padding:18px 22px 30px; overflow:auto;
  flex-direction:column; gap:6px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:14px 12px; font-size:17px; font-weight:600; color:var(--g900); border-bottom:1px solid var(--w200); }
.mobile-menu .btn{ margin-top:14px; }
@media (max-width:920px){
  .nav-links{ display:none; } .nav-cta{ display:none; } .nav-burger{ display:flex; }
}

/* ---------- footer ---------- */
.footer{ background:var(--g900); color:rgba(255,255,255,.72); padding:72px 0 36px; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; position:relative; }
.footer .brand-word{ color:#fff; }
.footer .brand-word b{ color:var(--g300); }
.footer-blurb{ margin-top:16px; font-size:14px; line-height:1.6; max-width:280px; color:rgba(255,255,255,.6); }
.footer-col h4{ color:#fff; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; margin-bottom:16px; }
.footer-col a{ display:block; padding:6px 0; font-size:14.5px; color:rgba(255,255,255,.66); transition:color .15s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13.5px; color:rgba(255,255,255,.55); position:relative;
}
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:background .15s; }
.footer-social a:hover{ background:rgba(255,255,255,.16); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- generic card ---------- */
.card{
  background:#fff; border:1px solid var(--card-border); border-radius:16px;
  box-shadow:var(--shadow-sm); transition:box-shadow .2s, border-color .2s, transform .2s;
}
.card:hover{ box-shadow:var(--shadow); border-color:var(--g200); }

/* ---------- app-panel primitives (stylized product UI) ---------- */
.appwin{
  background:#fff; border:1px solid var(--card-border); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-card);
}
.appbar{ height:38px; display:flex; align-items:center; gap:7px; padding:0 14px;
  background:var(--w50); border-bottom:1px solid var(--w200); }
.appdot{ width:11px; height:11px; border-radius:50%; }
.appbar-title{ margin-left:10px; font-size:12px; font-weight:600; color:var(--w600); }
.app-side{ background:var(--g900); }
.app-navitem{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:9px;
  font-size:12.5px; font-weight:500; color:var(--g300); }
.app-navitem.active{ background:rgba(255,255,255,.1); color:#fff; font-weight:600; }
.app-stat{ background:#fff; border:1px solid var(--card-border); border-radius:12px; padding:14px; }
.app-stat .num{ font-size:24px; font-weight:700; color:var(--g900); letter-spacing:-0.03em; line-height:1; }
.app-stat .lbl{ font-size:11.5px; color:var(--w600); margin-top:5px; font-weight:500; }
.badge{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px;
  font-size:11px; font-weight:600; line-height:18px; white-space:nowrap; border:1px solid; }
.badge.green{ background:var(--g100); color:var(--g700); border-color:var(--g200); }
.badge.amber{ background:var(--amber-bg); color:var(--amber-text); border-color:var(--amber-border); }
.badge.blue{ background:var(--blue-bg); color:var(--blue-text); border-color:var(--blue-border); }
.badge.purple{ background:var(--purple-bg); color:var(--purple-text); border-color:var(--purple-border,#d8c8f0); }
.badge.gray{ background:#f0eeeb; color:var(--w600); border-color:var(--w200); }
.avi{ border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  font-weight:600; flex-shrink:0; }

/* ---------- contour watermark ---------- */
.contour{ position:absolute; inset:0; pointer-events:none; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* public site / browser mockup (shared: homepage + features) */
.pub{ background:var(--w50); }
.pub-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
.browser{ background:#fff; border:1px solid var(--card-border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); }
.browser-bar{ height:42px; display:flex; align-items:center; gap:8px; padding:0 14px; background:var(--w50); border-bottom:1px solid var(--w200); }
.browser-url{ flex:1; height:26px; border-radius:8px; background:#fff; border:1px solid var(--w200); display:flex; align-items:center; gap:7px; padding:0 11px; font-size:12px; color:var(--w600); margin-left:6px; }
.browser-url b{ color:var(--g800); font-weight:600; }
.pub-hero{ position:relative; height:172px; background:linear-gradient(150deg,#1e4d35,#142a1f); overflow:hidden; padding:22px 24px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; }
.pub-hero .t100{ font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--g300); }
.pub-hero h4{ color:#fff; font-size:24px; margin-top:6px; letter-spacing:-0.02em; }
.pub-hero p{ color:rgba(255,255,255,.74); font-size:13px; margin-top:5px; }
.pub-nav{ display:flex; gap:18px; padding:13px 24px; border-bottom:1px solid var(--w100); font-size:12.5px; font-weight:600; color:var(--w600); }
.pub-nav span:first-child{ color:var(--g700); }
.pub-body{ padding:18px 24px 22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pub-tile{ border:1px solid var(--w200); border-radius:12px; padding:14px; }
.pub-tile .h{ font-size:12.5px; font-weight:700; color:var(--g900); display:flex; align-items:center; gap:7px; }
.pub-tile .r{ display:flex; align-items:center; gap:8px; margin-top:9px; font-size:11.5px; color:var(--w600); }
@media (max-width:980px){ .pub-grid{ grid-template-columns:1fr; gap:32px; } .pub-grid .pub-copy{ order:-1; } }