/* ===========================================================
   AutomintAI — shared dark/mint design system
   Used by every page. Page-specific rules live in the page.
   =========================================================== */
:root{
  --bg:#0C1210;--bg-deep:#080D0B;--panel:#121A16;--panel-2:#182420;
  --line:#22302A;--line-soft:#182420;
  --text:#EDEFEA;--muted:#93A099;--faint:#5C6B63;
  --mint:#3FBF82;--mint-bright:#7FE0B0;--pop:#E08256;--pop-ink:#2A1206;
  --danger:#E0616B;--warn:#E0B356;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;
  /* Inter is drawn slightly wide for UI use; a hair of negative tracking at body
     size is what makes it read like Linear/Stripe rather than default-Google. */
  letter-spacing:-.011em;
}
::selection{background:var(--mint);color:var(--bg-deep);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3{
  font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.15;
  /* Fraunces is a variable font with an optical-size axis: letting the browser
     drive it thins the strokes at display sizes and thickens them at small ones. */
  font-optical-sizing:auto;
  /* Stops a heading dropping one lonely word onto its own line. */
  text-wrap:balance;
}
/* Avoids a single-word last line in body copy (ignored by browsers without it). */
p,.lead{text-wrap:pretty;}
/* Figures line up in columns instead of jittering as values change. */
.num,.stat,.metric,time,[data-num]{font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px;}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.narrow{max-width:780px;margin:0 auto;padding:0 28px;}

.kicker{font-family:var(--mono);font-size:12px;color:var(--mint-bright);letter-spacing:.05em;display:block;margin-bottom:14px;}
.sec-title{font-size:clamp(26px,3.6vw,40px);}
.lead{color:var(--muted);font-size:15px;max-width:560px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--mint);color:var(--bg-deep);
  padding:13px 26px;border-radius:6px;font-size:14px;font-weight:600;
  border:none;cursor:pointer;font-family:var(--sans);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s,background .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(63,191,130,.35);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.ghost{background:transparent;border:1px solid var(--line);color:var(--text);}
.ghost:hover{background:var(--panel);box-shadow:none;}
.btn-sm{padding:8px 16px;font-size:13px;}
.btn-danger{background:transparent;border:1px solid rgba(224,97,107,.4);color:var(--danger);}
.btn-danger:hover{background:rgba(224,97,107,.12);box-shadow:none;}

/* ---------- nav ---------- */
nav.site{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(8,13,11,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);}
nav.site .nav-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:15px 28px;gap:16px;}
nav.site .logo{font-family:var(--serif);font-size:19px;white-space:nowrap;}
nav.site .logo b{color:var(--mint);font-weight:500;}
nav.site .nav-links{display:flex;gap:22px;align-items:center;font-size:13px;color:var(--muted);}
nav.site .nav-links a{transition:color .2s;}
nav.site .nav-links a:hover,nav.site .nav-links a.active{color:var(--text);}
nav.site .nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:7px 9px;cursor:pointer;}
nav.site .nav-toggle span{display:block;width:17px;height:1.5px;background:var(--text);margin:3.5px 0;transition:transform .25s,opacity .2s;}
nav.site .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
nav.site .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
nav.site .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
/* Below 820px the links collapse behind the toggle. They are hidden by display,
   not by opacity, so nothing can strand them half-visible. */
@media(max-width:820px){
  nav.site .nav-toggle{display:block;order:3;}
  nav.site .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 28px 16px;
    background:var(--bg-deep);border-bottom:1px solid var(--line);}
  nav.site .nav-links.open{display:flex;}
  nav.site .nav-links a{padding:11px 0;font-size:14px;}
  nav.site .nav-links a.btn{margin-top:10px;text-align:center;padding:12px 20px;}
}

/* page top offset for fixed nav (non-hero pages) */
.page-top{padding-top:120px;}

/* ---------- panels / cards ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
.card-hover{transition:transform .35s,border-color .35s;}
.card-hover:hover{transform:translateY(-6px);border-color:var(--mint);}

/* ---------- forms ---------- */
label{display:block;font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px;}
input,textarea,select{
  width:100%;background:var(--bg-deep);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;font-size:14.5px;color:var(--text);font-family:var(--sans);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
input::placeholder,textarea::placeholder{color:var(--faint);}
input:focus,textarea:focus,select:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(63,191,130,.14);}
textarea{resize:vertical;line-height:1.6;}
.field{margin-bottom:18px;}
.hint{font-size:12px;color:var(--faint);margin-top:6px;}

/* ---------- feedback ---------- */
.alert{border-radius:8px;padding:11px 14px;font-size:13.5px;margin-bottom:16px;}
.alert-err{background:rgba(224,97,107,.1);border:1px solid rgba(224,97,107,.35);color:#F0A4AA;}
.alert-ok{background:rgba(63,191,130,.1);border:1px solid rgba(63,191,130,.35);color:var(--mint-bright);}
.badge{display:inline-block;font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);}
.badge-mint{background:rgba(63,191,130,.12);border-color:rgba(63,191,130,.35);color:var(--mint-bright);}
.badge-pop{background:var(--pop);border-color:var(--pop);color:var(--pop-ink);font-weight:700;}

/* ---------- reveal (GSAP targets) ---------- */
.reveal{opacity:1;transform:none;}
/* Hidden only once JS confirms it can animate. If JS fails or never runs,
   content stays fully visible. Transition is CSS-driven (no JS ticker). */
.js-anim .reveal{opacity:0;transform:translateY(28px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.js-anim .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;}
  *{animation:none!important;transition:none!important;}
}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-soft);padding:26px 0;margin-top:60px;}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11.5px;color:var(--faint);}
footer.site a:hover{color:var(--mint-bright);}