/* cybos.ai design tokens — docs/DESIGN.md §2. Names are final; copied verbatim to native-landing. */
@font-face{font-family:"Inter Tight";src:url(../fonts/intertight-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url(../fonts/intertight-var-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";src:url(../fonts/inter-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(../fonts/inter-var-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrainsmono-var-latin.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Fallback Sans";src:local("Arial");size-adjust:97%;ascent-override:92%}

:root{
  /* surfaces */
  --bone:#F6F5F1;--paper:#FFFFFF;--bone-2:#EFEDE7;--ink-bg:#111110;--ink-bg-2:#1A1A18;
  --orange:#FE7241;--orange-hover:#F2622F;--orange-soft:#FFE6DB;
  /* text */
  --ink:#0B0B0B;--muted:#5D5D58;--faint:#6B6A65;--on-dark:#F4F3EF;--on-dark-2:#B9B8B2;--on-dark-3:#92918B;--orange-ink:#3D1A0B;
  /* lines */
  --hair:#DAD9D3;--hair-2:#EBEAE5;--hair-dark:#2A2A27;
  --focus:#0B0B0B;

  /* type families */
  --display:"Inter Tight","Inter","Fallback Sans",Arial,sans-serif;
  --sans:"Inter","Fallback Sans",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --mono-lazy:ui-monospace,Menlo,monospace;

  /* type scale: size/line-height (desktop ≥1200) */
  --t-display:500 112px/104px var(--display);--tr-display:-.035em;
  --t-h1:500 72px/72px var(--display);--tr-h1:-.03em;
  --t-h2:500 52px/56px var(--display);--tr-h2:-.025em;
  --t-h3:500 30px/36px var(--display);--tr-h3:-.015em;
  --t-h4:600 21px/28px var(--display);--tr-h4:-.01em;
  --t-stat:500 64px/60px var(--display);--tr-stat:-.035em;
  --t-lead:400 22px/32px var(--sans);--tr-lead:-.005em;
  --t-body:400 18px/28px var(--sans);
  --t-small:400 15px/22px var(--sans);
  --t-ui:500 15px/20px var(--sans);
  --t-code:400 14px/22px var(--mono-lazy);

  /* spacing */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s7:64px;--s8:80px;--s9:104px;--s10:128px;--s11:160px;

  /* grid */
  --maxw:1312px;--margin:64px;--gutter:24px;

  /* radii */
  --r-0:0;--r-plate:6px;--r-pill:999px;

  /* shadows */
  --sh-0:none;
  --sh-1:0 1px 0 rgba(11,11,11,.04),0 1px 2px rgba(11,11,11,.06);
  --sh-2:0 1px 0 rgba(11,11,11,.04),0 18px 40px -20px rgba(11,11,11,.28);
  --sh-dark:0 0 0 1px rgba(255,255,255,.06),0 24px 60px -24px rgba(0,0,0,.8);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:160ms;--d-base:320ms;--d-slow:640ms;

  /* section rhythm */
  --sec-y:var(--s10);--sec-y-xl:var(--s11);

  /* dark-section vignette (the one allowed gradient besides renders) */
  --vignette:radial-gradient(60% 50% at 50% 40%,#1C1B19 0%,#111110 70%);

  /* derived values quoted in DESIGN.md §3 (nav, stack, viewer); components use only these names */
  --nav-stuck:rgba(246,245,241,.86);
  --glass-face:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  --glass-edge:rgba(255,255,255,.18);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.25);
  --glass-line:rgba(244,243,239,.35);
  --orange-a08:rgba(254,114,65,.08);
  --orange-a10:rgba(254,114,65,.10);
  --orange-a60:rgba(254,114,65,.6);
  --scrim:rgba(17,17,16,.72);
  /* volumetric glass plates (layer stack) */
  --plate-face:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 55%,rgba(255,255,255,.07));
  --plate-sh:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.06),0 6px 0 -1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.9);
  --plate-sel:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1.5px #FE7241,0 0 48px -8px rgba(254,114,65,.45),0 40px 80px -30px rgba(0,0,0,.9);
  --row-face:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  --row-hi:inset 0 1px 0 rgba(255,255,255,.18);
  --img-mask:radial-gradient(closest-side at 50% 50%,#000 62%,transparent 100%);
  --matte:#E9E7E1;
}
.mono-ready{--mono-lazy:var(--mono)}

@media (max-width:1439px){:root{--margin:48px}}
@media (max-width:1199px){
  :root{
    --margin:32px;
    --t-display:500 80px/76px var(--display);
    --t-h1:500 56px/58px var(--display);
    --t-h2:500 44px/48px var(--display);
    --t-h3:500 26px/32px var(--display);
    --t-h4:600 20px/28px var(--display);
    --t-stat:500 56px/54px var(--display);
    --t-lead:400 20px/30px var(--sans);
    --t-body:400 17px/27px var(--sans);
    --sec-y:var(--s8);--sec-y-xl:var(--s9);
  }
}
@media (max-width:767px){
  :root{
    --margin:20px;--gutter:16px;
    --t-display:500 52px/52px var(--display);
    --t-h1:500 40px/44px var(--display);
    --t-h2:500 32px/36px var(--display);
    --t-h3:500 22px/28px var(--display);
    --t-h4:600 19px/26px var(--display);
    --t-stat:500 44px/44px var(--display);
    --t-lead:400 19px/28px var(--sans);
    --t-body:400 17px/26px var(--sans);
    --sec-y:var(--s7);--sec-y-xl:var(--s8);
  }
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:1ms!important}}
