/* ============================================================
   Octomatica — component + layout classes (static stack).
   Pairs with tokens.css (load tokens.css FIRST, then this).
   Every value is a token. Mirrors the app stack's component layer
   in app-globals.css so both stacks look identical.
   ============================================================ */

/* ── Layout ── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: var(--maxw-wide); }
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }
.section-head { max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .section { padding: 54px 0; }
}

/* ── Type helpers ── */
.display { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; }
.h-sec { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.lead { font-size: clamp(1.04rem, 1.35vw, 1.2rem); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-3); }
.accent-text { color: var(--accent-deep); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); }
.eyebrow::before { content: ""; width: 16px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow.no-tick::before { display: none; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: .9rem; padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: .2s var(--ease); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: var(--sh-glow); }
.btn-primary:hover { background: var(--accent-bright); transform: translateY(-2px); }
.btn-ghost { background: transparent; border: 1.5px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-soft { background: var(--accent-soft); color: var(--accent-deep); }
.btn-on-ink { background: var(--ink-on-dark); color: #0F1613; }
.btn-ghost-ink { background: rgba(236,243,239,.05); border: 1px solid var(--ink-line); color: var(--ink-on-dark); }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }

/* ── Cards / pills ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.card-hover { transition: .25s var(--ease); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--line-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.pill-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--accent); }

/* ── Inputs ── */
input, textarea, select { border: 1px solid var(--line-2); border-radius: var(--r-xs); padding: 10px 12px; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

/* ── Table ── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-3); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 14px 12px; font-size: 14px; border-bottom: 1px solid var(--line); }
.tbl tr:hover td { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Browser-frame (product demo) ── */
.browser-frame { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; background: var(--surface); }
.browser-bar { padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.browser-dots { display: inline-flex; gap: 6px; }
.browser-dots i { width: 11px; height: 11px; border-radius: 99px; display: inline-block; }
.browser-url { font-family: var(--font-mono); font-size: .76rem; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-3); }

/* ── Nav (basic) ── */
.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; z-index: 100; transition: .25s var(--ease); }
.nav-scrolled { height: 60px; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav-on-ink { color: var(--ink-on-dark); }
.nav-on-ink .accent-text { color: var(--accent-on-ink); }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(26px); transition: .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; } .reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; } .reveal[data-d="4"] { transition-delay: .28s; }
.reveal[data-d="5"] { transition-delay: .35s; } .reveal[data-d="6"] { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }