/* OptimizeStack marketing site — shared tokens + primitives (prototype build).
   Every value here is the handoff value; see OPTIMIZESTACK-DESIGN-HANDOFF.md §Design tokens. */

@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); }

:root {
  /* Backgrounds */
  --os-bg-0: #050711;      /* page */
  --os-bg-1: #0B1020;      /* alternate section band */
  --os-surface-1: #10172B; /* card */
  --os-surface-2: #161E38; /* raised card / hover */
  --os-surface-glass: rgba(16, 23, 43, 0.72);
  /* Text */
  --os-text-1: #F4F6FF;    /* headings  — 18.6:1 on bg-0 */
  --os-text-2: #B7C0DA;    /* body      — 10.9:1 */
  --os-text-3: #7E8AAB;    /* muted     —  5.6:1 (AA for 14px+) */
  --os-text-4: #55607F;    /* disabled / decorative only, NOT for copy */
  /* Borders */
  --os-border-1: rgba(255,255,255,0.07);
  --os-border-2: rgba(255,255,255,0.12);
  --os-border-3: rgba(255,255,255,0.20);
  /* Accents */
  --os-violet: #8057FF;
  --os-violet-hover: #9474FF;
  --os-violet-active: #6C45E6;
  --os-violet-soft: rgba(128,87,255,0.14);
  --os-blue: #3D8BFF;
  --os-blue-soft: rgba(61,139,255,0.14);
  --os-cyan: #6FD5FF;       /* route highlight only */
  --os-positive: #35D49A;
  --os-warning: #F5B544;
  --os-error: #FF5C6E;
  --os-focus: #9DB8FF;
  /* Shadows / glow */
  --os-shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.45);
  --os-shadow-btn: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 24px rgba(128,87,255,0.30);
  --os-glow-globe: 0 0 120px 20px rgba(61,139,255,0.18), 0 0 260px 60px rgba(128,87,255,0.14);
  /* Type */
  --os-font-display: 'Inter Variable', 'Inter', system-ui, sans-serif;
  --os-font-body: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --os-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, Consolas, monospace;
  /* Scale (desktop / mobile via clamp) */
  --os-t-display: clamp(44px, 6.2vw, 76px);
  --os-t-h1: clamp(36px, 4.6vw, 56px);
  --os-t-h2: clamp(30px, 3.2vw, 44px);
  --os-t-h3: 20px;
  --os-t-lead: clamp(17px, 1.25vw, 19px);
  --os-t-body: 16px;
  --os-t-small: 14px;
  --os-t-micro: 12px;
  /* Layout */
  --os-max: 1200px;
  --os-max-wide: 1440px;
  --os-gutter: clamp(16px, 4vw, 40px);
  --os-nav-h: 64px;
  --os-section: clamp(72px, 9vw, 128px);
  /* Radii */
  --os-r-sm: 8px; --os-r-md: 12px; --os-r-lg: 16px; --os-r-xl: 24px; --os-r-pill: 999px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--os-bg-0); color: var(--os-text-2);
  font-family: var(--os-font-body); font-size: var(--os-t-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--os-font-display); color: var(--os-text-1); margin: 0; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-size: var(--os-t-display); font-weight: 600; letter-spacing: -0.028em; line-height: 1.02; text-wrap: balance; font-feature-settings: "ss01", "cv05"; }
h2 { font-size: var(--os-t-h2); font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; }
h3 { font-size: var(--os-t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
html { font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: var(--os-max); margin-inline: auto; padding-inline: var(--os-gutter); }
.container--wide { max-width: var(--os-max-wide); }
/* Laptop widths: real side margins so the nav and hero are not pinned to the screen edge. From 1441px the margin
   eases back down as the centred column starts to supply its own, so large screens are unchanged. */
@media (min-width: 1024px) { .container--wide { padding-inline: clamp(var(--os-gutter), 7vw, 100px); } }
@media (min-width: 1441px) { .container--wide { padding-inline: clamp(40px, calc(100px - (100vw - 1440px) * .125), 100px); } }

/* Eyebrow / mono label */
.eyebrow { font: 500 13px/1.4 var(--os-font-body); letter-spacing: 0; text-transform: none; color: var(--os-text-3); }
.eyebrow--accent { color: #A993FF; } /* once per page at most */
.lead { font-size: var(--os-t-lead); line-height: 1.55; letter-spacing: -0.006em; color: var(--os-text-2); max-width: 44ch; text-wrap: pretty; }

/* Buttons */
.btn {
  --h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h); padding: 0 16px; border-radius: 8px; border: 1px solid transparent;
  font: 550 14.5px/1 var(--os-font-body); letter-spacing: -0.006em; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color .16s cubic-bezier(.2,0,0,1), border-color .16s cubic-bezier(.2,0,0,1), color .16s cubic-bezier(.2,0,0,1), box-shadow .16s cubic-bezier(.2,0,0,1), transform .08s ease-out;
}
.btn--lg { --h: 46px; padding: 0 20px; font-size: 15.5px; border-radius: 10px; }
.btn--sm { --h: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 7px; }
@media (pointer: coarse) { .btn--sm { --h: 40px; } }
/* Primary: depth from INSIDE the button (inset highlight + hairline), no coloured glow, no lift */
.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #7650F5 0%, #6A41E8 100%); /* white text >= 4.9:1 at every stop */
  border-color: rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.4);
}
.btn--primary:hover { background: linear-gradient(180deg, #7C54FB 0%, #7048EE 100%); } /* lightest allowed: 4.65:1 with white */
.btn--primary:active { background: #5F38D6; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); transform: scale(.985); }
/* Secondary: light-on-dark with real shape */
.btn--secondary { color: var(--os-text-1); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.btn--secondary:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.btn--secondary:active { background: rgba(255,255,255,.08); transform: scale(.985); }
.btn--ghost { color: var(--os-text-2); background: transparent; padding: 0 10px; }
.btn--ghost:hover { color: var(--os-text-1); background: rgba(255,255,255,.05); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--os-bg-0), 0 0 0 4px #9DB8FF; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 1; color: var(--os-text-4); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); box-shadow: none; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: os-spin .7s linear infinite; }
@keyframes os-spin { to { transform: rotate(360deg); } }
/* Arrow: inline SVG, the stem grows on hover (primary CTA only) */
.btn .arrow { width: 14px; height: 14px; margin-right: -2px; overflow: visible; }
.btn .arrow .stem { opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity .16s, transform .16s cubic-bezier(.2,0,0,1); }
.btn .arrow .head { transition: transform .16s cubic-bezier(.2,0,0,1); }
.btn:hover .arrow .stem { opacity: 1; transform: scaleX(1); }
.btn:hover .arrow .head { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn * { transition: none !important; } }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; height: var(--os-nav-h); display: flex; align-items: center;
  background: rgba(5,7,17,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--os-border-1); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { display: inline-flex; align-items: center; }
.nav__lockup { display: inline-flex; align-items: center; gap: 10px; }
.nav__lockup .lm { height: 34px; width: 34px; }
.nav__lockup .wmcrop { display: block; height: 30px; overflow: hidden; } /* crops the baked-in tagline off the wordmark art */
.nav__lockup .wmcrop img { height: 44px; width: auto; display: block; } /* was 26px: the full.png wordmark is only ~half the image height, so 26px rendered it ~10px tall */
.nav__links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 6px; font: 500 14px/1 var(--os-font-body); letter-spacing: -0.005em; color: var(--os-text-3); transition: color .12s ease; }
.nav__links a:hover { color: var(--os-text-1); background: none; }
.nav__links a:focus-visible { outline: 2px solid var(--os-focus); outline-offset: 2px; }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--os-border-2); background: transparent; color: var(--os-text-1); cursor: pointer; }
.nav__logo .nav__mark { display: none; height: 36px; width: 36px; }
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost { display: none; }
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 480px) {
  .nav__logo .nav__lockup { display: none; }
  .nav__logo .nav__mark { display: block; }
  .nav__actions .btn--primary { min-height: 40px; padding-inline: 14px; font-size: 14px; }
}

/* Floating metric card — metric TYPE shown, value is a placeholder by design */
.mcard {
  position: absolute; width: 176px; padding: 14px 16px 12px; border-radius: 14px;
  background: var(--os-surface-glass); border: 1px solid var(--os-border-2);
  box-shadow: var(--os-shadow-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--os-text-1);
}
.mcard__label { display: flex; align-items: center; gap: 8px; font-family: var(--os-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--os-text-3); }
.mcard__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--os-violet); }
.mcard__dot--blue { background: var(--os-blue); }
.mcard__dot--green { background: var(--os-positive); }
.mcard__value { margin-top: 6px; font-family: var(--os-font-body); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mcard__spark { margin-top: 8px; height: 22px; width: 100%; }
.mcard__note { margin-top: 6px; font-size: 12.5px; color: var(--os-text-2); font-family: var(--os-font-body); }

/* Globe block: wrapper carries the image's exact aspect so an SVG overlay in image pixels lines up */
.globe { position: relative; aspect-ratio: 1312 / 1199; }
.globe__img { width: 100%; height: 100%; object-fit: contain; filter: saturate(1.05); }
.globe__halo { position: absolute; inset: 8%; border-radius: 50%; box-shadow: var(--os-glow-globe); pointer-events: none; }
.globe__routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.route { fill: none; stroke: url(#routeGrad); stroke-width: 3.2; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(111,213,255,0.9)) drop-shadow(0 0 14px rgba(128,87,255,0.55));
  animation: route-draw 5.2s cubic-bezier(.4,0,.2,1) infinite; }
.route:nth-child(2) { animation-delay: .9s; } .route:nth-child(3) { animation-delay: 1.8s; }
.route:nth-child(4) { animation-delay: 2.7s; } .route:nth-child(5) { animation-delay: 3.6s; }
@keyframes route-draw {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  8%   { opacity: .95; }
  45%  { stroke-dashoffset: 0; opacity: .95; }
  70%  { stroke-dashoffset: 0; opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.node { fill: #fff; }
.node__pulse { fill: none; stroke: var(--os-cyan); stroke-width: 2; opacity: 0; transform-origin: center; transform-box: fill-box;
  animation: node-pulse 3.2s ease-out infinite; }
.node__pulse:nth-child(3) { animation-delay: .9s; } .node__pulse:nth-child(5) { animation-delay: 1.8s; }
.globe__halo { animation: halo-breathe 6s ease-in-out infinite; }
@keyframes halo-breathe { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
@keyframes node-pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise-in .7s cubic-bezier(.2,.7,.2,1) both; }
.rise-2 { animation-delay: .1s; } .rise-3 { animation-delay: .2s; } .rise-4 { animation-delay: .3s; }

/* Preview override: add ?motion=on to the URL to force full motion even when the OS asks for reduced motion */
/* Reduced motion: everything collapses to instant EXCEPT the globe's own light show (route lines drawing, node
   pulses, halo breathing): small, local, non-flashing motion that is the signature of the page. The large
   float of the globe and the cards stays off. */
@media (prefers-reduced-motion: reduce) {
  *:not(.route):not(.node__pulse):not(.globe__halo), *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .globe__img { animation: none !important; }
  html { scroll-behavior: auto; }
}


/* mobile menu (shared so every prototype has a working burger) */
.mobilemenu { position: fixed; inset: var(--os-nav-h) 0 0 0; z-index: 45; background: var(--os-bg-0); padding: 16px var(--os-gutter) 32px; display: none; flex-direction: column; gap: 4px; }
.mobilemenu[data-open="true"] { display: flex; }
.mobilemenu a { display: flex; align-items: center; min-height: 52px; font-size: 18px; font-weight: 500; color: var(--os-text-1); border-bottom: 1px solid var(--os-border-1); }
.mobilemenu .mobilemenu__actions { margin-top: auto; display: grid; gap: 10px; }
.mobilemenu .mobilemenu__actions a { border: 0; justify-content: center; min-height: 52px; }

.nav__logo:focus-visible { outline: 2px solid var(--os-focus); outline-offset: 4px; border-radius: 6px; }

/* returning users on phones: Sign in is hidden in the nav below 861px, so repeat it under the hero buttons */
.hero__signin { display: none; margin: 14px 0 0; font-size: 14px; color: var(--os-text-3); }
.hero__signin a { color: var(--os-text-1); font-weight: 550; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.hero__signin a:hover { text-decoration-color: currentColor; }
@media (max-width: 860px) { .hero__signin { display: block; } }
.path__mail { margin: 12px 0 0; font-size: 13.5px; color: var(--os-text-3); }
.path__mail a { color: var(--os-text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); }