/* AG9 — shared design system (matches homepage + very.org)
   Tokens, base, nav, buttons, footer. Page-specific styles live in each page. */

/* Suisse Intl — drop woff2 files in /assets/fonts/ to enable; falls back to Inter otherwise.
   See assets/fonts/README.md (or generate via Swiss Typefaces / your licensed source). */
@font-face {
  font-family:'Suisse Intl';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/SuisseIntl-Regular.woff2') format('woff2');
}
@font-face {
  font-family:'Suisse Intl';
  font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/SuisseIntl-Medium.woff2') format('woff2');
}
@font-face {
  font-family:'Suisse Intl';
  font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family:'Suisse Intl';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/SuisseIntl-Bold.woff2') format('woff2');
}

:root {
  /* very.org */
  --very-black: #1c2125;
  --bg-default: #f9f9f7;
  --text-muted: #7e8791;
  --text-active: #3692cd;
  --border-light: #e5e7eb;

  /* ag9 dark (figma) */
  --bg:        #121212;
  --bg-2:      #181818;
  --bg-card:   #1b1b1b;
  --bg-foot:   #171717;
  --bg-bar:    #1c1c1c;
  --bg-pill:   #202020;
  --border:    #2e2e2e;
  --border-nav:#383838;
  --border-soft:#3e3e3e;
  --text:      #ffffff;
  --text-1:    #b4b4b4;
  --text-2:    #8c8c8c;
  --text-3:    #cbcbcb;

  /* semantic state (sub-pages) */
  --ok:        #8fc686;
  --ok-dim:    rgba(143,198,134,.12);
  --ok-border: rgba(143,198,134,.32);
  --indigo:    #818cf8;
  --indigo-dim:rgba(129,140,248,.12);
  --indigo-border:rgba(129,140,248,.32);
  --warn:      #d4a24c;
  --warn-dim:  rgba(212,162,76,.12);
  --warn-border:rgba(212,162,76,.32);
  --err:       #e48a7c;
  --err-dim:   rgba(228,138,124,.12);
}

/* ── Reset ── */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Suisse Intl','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  font-feature-settings:'cv11','ss01';
}
a { color:inherit; text-decoration:none; transition:opacity .15s, color .15s, background-color .15s; }
a:hover { opacity:.78; }

/* Keyboard focus ring (a11y) */
:focus { outline:none; }
:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible, .nav-cta:focus-visible {
  outline-offset:3px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid #fff;
  outline-offset:1px;
}
code, pre { font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; }
img, svg { display:block; max-width:100%; }

.brand-mark { font-family:'Orbitron',sans-serif; font-weight:500; letter-spacing:.02em; }
.nav-brand {
  display:inline-flex; align-items:center; gap:14px;
  color:var(--text);
}
.nav-brand .brand-mark { color:var(--text); }
.nav-brand .by {
  display:inline-flex; align-items:center; gap:6px;
  padding-left:14px; border-left:1px solid var(--border-nav);
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:13px; color:var(--text-2); letter-spacing:0;
  text-transform:none;
  transition:color .15s ease, opacity .15s ease;
}
.nav-brand .by:hover { color:var(--text); opacity:1; }
.nav-brand .by img { height:14px; width:auto; opacity:.85; transition:opacity .15s ease; }
.nav-brand .by:hover img { opacity:1; }
@media (max-width:540px) {
  .nav-brand .by { display:none; }
}

/* ── Buttons (very.org spec) ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:52px; padding:0 24px; border-radius:999px;
  font-size:15px; font-weight:600; line-height:1; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { opacity:1; }
.btn--primary { background:#fff; color:#000; border-color:#fff; }
.btn--primary:hover { background:#ededed; border-color:#ededed; }
.btn--ghost   { background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.30); }
.btn--ghost:hover { background:rgba(255,255,255,.20); }
.btn--dark    { background:var(--very-black); color:#fff; border-color:var(--very-black); }
.btn--dark:hover { background:#000; border-color:#000; }
.btn--light   { background:#fff; color:var(--very-black); border-color:var(--border-light); }
.btn--light:hover { background:#f3f4f6; }
.btn--sm      { height:44px; font-size:14px; padding:0 20px; }

/* ── Nav ── */
.nav-wrap {
  position:sticky; top:0; left:0; right:0; z-index:50;
  background:rgba(18,18,18,.85);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-nav);
}
nav {
  max-width:1440px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 60px; height:70px;
}
.nav-brand { font-size:18px; color:var(--text); }
.nav-links {
  display:flex; gap:8px; align-items:center;
  font-size:15px; color:var(--text-2); font-weight:500; line-height:1;
}
.nav-links a {
  padding:8px 12px; border-radius:8px;
  transition:background-color .15s, color .15s;
}
.nav-links a:hover { color:var(--text); background:rgba(255,255,255,.05); opacity:1; }
.nav-links a.active { color:var(--text); }
.nav-cta {
  display:inline-flex; align-items:center; gap:4px;
  height:40px; padding:0 18px; border-radius:999px;
  background:#fff; color:#000;
  font-size:14px; font-weight:600; line-height:1;
  transition:background-color .15s;
}
.nav-cta:hover { background:#ededed; opacity:1; }

/* Mobile hamburger (hidden on desktop, shown <860) */
.nav-mobile-toggle {
  display:none;
  align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  background:rgba(255,255,255,.04); color:var(--text);
  border:1px solid var(--border-nav);
  cursor:pointer; transition:background-color .15s, border-color .15s;
}
.nav-mobile-toggle:hover { background:rgba(255,255,255,.08); border-color:var(--border-soft); }
.nav-mobile-toggle svg { width:18px; height:18px; }

/* Full-screen mobile menu overlay */
.mobile-menu {
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; height:70px; flex-shrink:0;
  border-bottom:1px solid var(--border-nav);
}
.mobile-menu-close {
  width:40px; height:40px; border-radius:999px;
  background:transparent; color:var(--text);
  border:1px solid var(--border-nav);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background-color .15s;
}
.mobile-menu-close:hover { background:rgba(255,255,255,.06); }
.mobile-menu-list {
  flex:1; overflow-y:auto; padding:8px 24px;
}
.mobile-menu-list a {
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 4px;
  font-size:28px; font-weight:500; letter-spacing:-.02em;
  color:var(--text);
  border-top:1px solid var(--border);
  transition:color .15s;
}
.mobile-menu-list a:first-child { border-top:0; }
.mobile-menu-list a:hover { color:var(--text-1); opacity:1; }
.mobile-menu-list a svg { color:var(--text-2); width:18px; height:18px; }
.mobile-menu-foot {
  padding:24px; flex-shrink:0;
  display:flex; flex-direction:column; gap:12px;
  border-top:1px solid var(--border);
}
.mobile-menu-foot .btn { width:100%; }

/* ── Layout helpers ── */
.container    { max-width:1280px; margin:0 auto; padding:0 60px; }
.container-md { max-width:960px;  margin:0 auto; padding:0 60px; }
.container-sm { max-width:760px;  margin:0 auto; padding:0 60px; }

.eyebrow {
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-2); margin-bottom:14px;
}

/* ── Reveal ── */
.reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"] { transition-delay:.06s; }
.reveal[data-d="2"] { transition-delay:.12s; }
.reveal[data-d="3"] { transition-delay:.18s; }
.reveal[data-d="4"] { transition-delay:.24s; }
.reveal[data-d="5"] { transition-delay:.30s; }
.reveal[data-d="6"] { transition-delay:.36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

/* ── Footer (centered slim bar) ── */
.site-footer {
  background:transparent; color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  padding:32px 24px; gap:18px; flex-wrap:wrap;
  font-size:13px; text-align:center;
}

/* ── Mobile ── */
@media (max-width:860px) {
  nav { padding:14px 24px; height:64px; }
  .nav-links { gap:8px; }
  .nav-links .nav-anchor-hide { display:none; }
  .nav-links .nav-cta { display:none; }
  .nav-mobile-toggle { display:inline-flex; }
  .container, .container-md, .container-sm { padding:0 24px; }
  .site-footer { padding:20px 24px; font-size:12px; gap:12px; }
}

/* Stack + full-width CTAs on phones */
@media (max-width:540px) {
  .hero-ctas, .final-cta-ctas, .stack-ctas, .code-ctas,
  .prod-ctas, .footer-cta-ctas, .product-card .btn-row,
  .hero-ctas + div {
    flex-direction:column; align-items:stretch; width:100%;
  }
  .hero-ctas .btn, .final-cta-ctas .btn, .stack-ctas .btn,
  .code-ctas .btn, .prod-ctas .btn, .footer-cta-ctas .btn,
  .product-card .btn { width:100%; }
}