/* ═══════════════════════════════════════════════════════════════
   Md Ayaan Ali — Business Operating Systems
   core.css · tokens, typography, layout, motion
   Dark, glass, one warm accent. Space Grotesk + Press Start 2P from
   Google Fonts (the only external host the site loads from);
   everything else is still zero dependencies, no build step.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root{
  /* Committed dark. One warm accent — everything else is ink on canvas. */
  --canvas:     #08070a;
  --paper:      #08070a;   /* kept as an alias — most rules still say --paper */
  --paper-2:    #0e0d12;
  --paper-3:    #17151b;
  --ink:        #f2f1f4;
  --ink-2:      #a9a6b1;
  --ink-3:      #8b8894;
  --ink-4:      #5f5c67;
  --rule:       rgba(255,255,255,.10);
  --rule-soft:  rgba(255,255,255,.06);
  --glass:      rgba(255,255,255,.05);
  --glass-strong: rgba(255,255,255,.10);

  --accent:        #e0522f;
  --accent-bright: #ef7248;
  --invert-bg:  var(--accent);
  --invert-ink: #fff;
  --glow:       0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35);
  --glow-lift:  0 2px 4px rgba(0,0,0,.5), 0 18px 60px rgba(0,0,0,.5);
  --glow-accent: 0 20px 60px -20px color-mix(in srgb, var(--accent) 45%, transparent);

  --font-sans: 'Space Grotesk', ui-sans-serif, -apple-system, "Segoe UI Variable Display", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-pixel: 'Press Start 2P', ui-monospace, monospace;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
               "Liberation Mono", monospace;

  /* Fluid type scale */
  --t-mono:  clamp(.66rem, .62rem + .12vw, .72rem);
  --t-sm:    clamp(.82rem, .79rem + .14vw, .90rem);
  --t-body:  clamp(1rem, .96rem + .20vw, 1.10rem);
  --t-lead:  clamp(1.14rem, 1.05rem + .42vw, 1.44rem);
  --t-h3:    clamp(1.4rem, 1.20rem + .9vw, 2.1rem);
  --t-h2:    clamp(2.0rem, 1.5rem + 2.3vw, 3.7rem);
  --t-h1:    clamp(2.6rem, 1.5rem + 5.2vw, 7.2rem);
  --t-mega:  clamp(3.2rem, 1.2rem + 9.4vw, 12rem);

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --sec: clamp(4rem, 8vw, 7.5rem);
  --measure: 34ch;
  --measure-wide: 62ch;
  --radius: 26px;
  --radius-sm: 16px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  color-scheme: dark;
}

/* ── 2. Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.62;
  letter-spacing:-.006em;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{
  outline:2px solid var(--accent-bright);
  outline-offset:3px;
  border-radius:2px;
}
::selection{background:var(--accent);color:#fff}

/* ── 3. Layout primitives ──────────────────────────────────── */
.s-wrap{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--gut);
  position:relative;
}
.s-narrow{max-width:920px;margin-inline:auto}
.s-section{padding-block:var(--sec)}
.s-rule{height:1px;background:var(--rule);border:0}
.s-pixel{font-family:var(--font-pixel);font-weight:400;letter-spacing:0}

/* ── 4. Typography ─────────────────────────────────────────── */
.s-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--t-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:flex;align-items:center;gap:.7em;
}
.s-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 10px 1px var(--accent);
}
.s-eyebrow.is-bare::before{display:none}

.s-h1{
  font-size:var(--t-h1);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:600;
  text-wrap:balance;
}
.s-h2{
  font-size:var(--t-h2);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
  text-wrap:balance;
}
.s-h3{
  font-size:var(--t-h3);
  line-height:1.14;
  letter-spacing:-.022em;
  font-weight:600;
  text-wrap:balance;
}
.s-mega{
  font-size:var(--t-mega);
  line-height:.86;
  letter-spacing:-.055em;
  font-weight:600;
}
/* The typographic signature: the accent picks out one word inside a
   headline instead of switching typeface for it. */
em, .s-em{
  font-style:normal;
  color:var(--accent-bright);
  font-weight:inherit;
}
.s-lead{
  font-size:var(--t-lead);
  line-height:1.45;
  letter-spacing:-.014em;
  color:var(--ink-2);
  max-width:var(--measure-wide);
  text-wrap:pretty;
}
.s-body{max-width:var(--measure-wide);color:var(--ink-2);text-wrap:pretty}
.s-small{font-size:var(--t-sm);color:var(--ink-3);line-height:1.55}
.s-mono{
  font-family:var(--font-mono);
  font-size:var(--t-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.s-dim{color:var(--ink-3)}
.s-dot{color:var(--accent-bright);text-shadow:0 0 16px color-mix(in srgb, var(--accent-bright) 65%, transparent)}

/* ── 5. Chrome: header, nav ────────────────────────────────── */
.s-skip{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  padding:.6rem 1rem;background:var(--accent);color:#fff;
  border-radius:4px;transform:translateY(-160%);
}
.s-skip:focus{transform:none}

.s-head{
  position:sticky;top:0;z-index:100;
  padding:1rem clamp(.8rem,3vw,1.6rem) 0;
}
.s-head__in{
  display:flex;align-items:center;gap:1rem;
  max-width:1180px;margin-inline:auto;
  background:rgba(14,13,18,.62);
  border:1px solid var(--glass-strong);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-radius:999px;
  padding:.5rem .5rem .5rem 1.3rem;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.s-head.is-stuck .s-head__in{border-color:var(--rule);background:rgba(14,13,18,.85)}
.s-brand{
  display:flex;align-items:baseline;gap:.6rem;flex:none;
  font-weight:700;letter-spacing:-.02em;font-size:.96rem;
  white-space:nowrap;
}
.s-brand span{
  font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  display:none;
}
@media (min-width:1040px){ .s-brand span{display:inline} }

.s-nav{margin-left:auto;display:flex;align-items:center;gap:.15rem;min-width:0}
.s-nav a{
  font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap;
  padding:.5rem .9rem;border-radius:99px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.s-nav a:hover,.s-nav a[aria-current="page"]{color:#fff;background:var(--glass-strong)}
@media (max-width:939px){ .s-nav .is-optional{display:none} }
@media (max-width:700px){ .s-nav [data-cmd-open]{display:none} }
@media (max-width:420px){
  .s-nav a{padding:.5rem .55rem}
  .s-head__in{gap:.5rem}
  .s-nav{gap:.05rem}
}

.s-iconbtn{
  width:2.15rem;height:2.15rem;flex:none;display:grid;place-items:center;
  border-radius:99px;color:var(--ink-3);
  transition:color .25s var(--ease),background .25s var(--ease);
}
@media (pointer:coarse){
  .s-iconbtn{width:2.75rem;height:2.75rem}
  .s-nav a{padding-block:.7rem}
}
.s-iconbtn:hover{color:var(--ink);background:var(--glass-strong)}
.s-iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}

.s-progress{
  position:fixed;top:0;left:0;height:2px;z-index:101;
  background:var(--accent-bright);width:0;
  box-shadow:0 0 8px 1px var(--accent);
  transition:width .12s linear;
}

/* ── 6. Reveal motion ─────────────────────────────────────────
   Gated on .js: without JavaScript nothing is ever hidden, so a
   script failure degrades to a plain, complete page rather than a
   blank one. */
.js .r{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .r.in{opacity:1;transform:none}
.r-d1{transition-delay:.08s}.r-d2{transition-delay:.16s}
.r-d3{transition-delay:.24s}.r-d4{transition-delay:.32s}
.r-d5{transition-delay:.40s}.r-d6{transition-delay:.48s}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .r{opacity:1;transform:none}
}

/* ── 6b. Ambient motion: spotlight, parallax, marquee ─────────
   Hand-built (the artifact sandbox this was drafted in blocks every
   external CDN) to the same easing motion.dev ships by default —
   cubic-bezier(.16,1,.3,1), --ease-out above. */
.s-glow{position:absolute;inset:-15% -10% auto -10%;height:130%;pointer-events:none;z-index:0;overflow:hidden}
.s-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.s-blob.a{width:36vw;height:36vw;top:-10%;left:-6%;background:radial-gradient(circle, var(--accent) 0%, transparent 72%)}
.s-blob.b{width:28vw;height:28vw;top:16%;right:-8%;background:radial-gradient(circle, #6a3fd6 0%, transparent 72%);opacity:.25}
.s-spot{
  position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),
    color-mix(in srgb, var(--accent-bright) 28%, transparent), transparent 70%);
}
@media (prefers-reduced-motion:reduce){ .s-spot{display:none} .s-blob{display:none} }

.s-marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:1rem 0;background:var(--paper-2)}
.s-marquee__track{display:flex;gap:2.6rem;width:max-content;animation:s-scroll 30s linear infinite}
.s-marquee:hover .s-marquee__track{animation-play-state:paused}
.s-marquee span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;display:flex;align-items:center;gap:.7rem}
.s-marquee span i{color:var(--accent-bright);font-style:normal}
@keyframes s-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .s-marquee__track{animation:none} }

/* ── 7. Home: the statement sequence ───────────────────────── */
.s-hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:8rem 4rem;position:relative;overflow:hidden;
}
.s-hero__q{
  font-weight:600;letter-spacing:-.045em;
  font-size:var(--t-mega);line-height:.9;
  margin-top:.35em;
}
.s-scrollcue{
  position:absolute;bottom:2.2rem;left:var(--gut);
  display:flex;align-items:center;gap:.7rem;color:var(--ink-3);z-index:1;
}
.s-scrollcue i{
  width:1px;height:2.6rem;background:linear-gradient(var(--ink-3),transparent);
  display:block;animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.5);opacity:.4;transform-origin:top}
  50%{transform:scaleY(1);opacity:1;transform-origin:top}}

.s-statements{border-top:1px solid var(--rule)}
.s-statement{
  padding-block:clamp(3rem,7vw,6rem);
  border-bottom:1px solid var(--rule-soft);
  display:grid;gap:1.2rem;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .s-statement{grid-template-columns:8rem minmax(0,1fr);gap:2.5rem;align-items:start}
}
.s-statement p{
  font-size:var(--t-h2);line-height:1.06;letter-spacing:-.032em;
  font-weight:600;max-width:22ch;text-wrap:balance;
}
.s-statement.is-quiet p{
  font-size:var(--t-lead);color:var(--ink-3);font-weight:400;
  letter-spacing:-.01em;line-height:1.4;max-width:46ch;
}

/* ── 8. The loop (philosophy) ──────────────────────────────── */
.s-loop{
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  grid-template-columns:1fr;
  margin-top:clamp(2rem,5vw,3.5rem);
}
@media (min-width:560px){ .s-loop{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .s-loop{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1240px){ .s-loop{grid-template-columns:repeat(6,1fr)} }
.s-step{
  background:var(--paper-2);padding:1.6rem 1.4rem 1.8rem;
  position:relative;min-height:12rem;
  display:flex;flex-direction:column;gap:.5rem;
  transition:background .4s var(--ease);
}
.s-step:hover,.s-step:focus-within{background:var(--paper-3)}
.s-step__n{
  font-family:var(--font-pixel);font-size:.62rem;letter-spacing:0;color:var(--accent-bright);
}
.s-step__t{
  font-size:1.32rem;letter-spacing:-.024em;font-weight:600;margin-top:.35rem;
}
.s-step__d{font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;margin-top:auto}
.s-step__bar{
  position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent-bright);
  box-shadow:0 0 8px 1px var(--accent);
  transition:width .7s var(--ease-out);
}
.s-step.in .s-step__bar{width:100%}
.s-step:nth-child(1) .s-step__bar{transition-delay:.05s}
.s-step:nth-child(2) .s-step__bar{transition-delay:.15s}
.s-step:nth-child(3) .s-step__bar{transition-delay:.25s}
.s-step:nth-child(4) .s-step__bar{transition-delay:.35s}
.s-step:nth-child(5) .s-step__bar{transition-delay:.45s}
.s-step:nth-child(6) .s-step__bar{transition-delay:.55s}
.s-loopback{
  display:flex;align-items:center;gap:.85rem;margin-top:1.4rem;
  font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.s-loopback i{flex:1;height:1px;background:var(--rule)}

/* ── 9. Product index (glass chapters) ─────────────────────── */
.s-chapter{
  display:block;position:relative;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--radius);
  margin-block:1.1rem;padding:clamp(2rem,5vw,3.2rem) clamp(1.6rem,4vw,3rem);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--paper-2);
  transition:border-color .35s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.s-chapter:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--rule));transform:translateY(-3px);box-shadow:var(--glow-accent)}
.s-chapter__grid{
  position:relative;z-index:1;
  display:grid;gap:1.6rem;align-items:end;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .s-chapter__grid{grid-template-columns:minmax(0,1fr) 30ch;gap:3.5rem}
}
.s-chapter__name{
  font-size:var(--t-mega);line-height:.84;letter-spacing:-.055em;font-weight:600;
  display:flex;align-items:baseline;gap:.28em;
}
.s-chapter__name small{
  font-family:var(--font-pixel);font-size:.5em;letter-spacing:0;
  color:var(--accent-bright);font-weight:400;
}
.s-chapter__tag{
  font-weight:600;
  font-size:var(--t-h3);letter-spacing:-.015em;color:#fff;margin-top:.5rem;
}
.s-chapter__meta{display:flex;flex-direction:column;gap:1.1rem}
.s-chapter__fact{display:flex;flex-direction:column;gap:.15rem}
.s-chapter__fact b{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.s-chapter__go{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.s-chapter__go svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;
  transition:transform .4s var(--ease)}
.s-chapter:hover .s-chapter__go svg{transform:translateX(5px)}

/* ── 10. Other systems ─────────────────────────────────────── */
.s-systems{
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.s-system{
  background:var(--paper-2);padding:clamp(1.6rem,3vw,2.4rem);
  display:flex;flex-direction:column;gap:.7rem;
  transition:background .4s var(--ease);
}
.s-system:hover{background:var(--paper-3)}
.s-system__k{font-family:var(--font-pixel);font-size:.56rem;letter-spacing:0;color:var(--accent-bright)}
.s-system__t{font-size:1.36rem;letter-spacing:-.026em;font-weight:600;line-height:1.15;color:#fff}
.s-system__t span{display:block;font-size:var(--t-sm);font-weight:400;color:var(--ink-3);
  letter-spacing:0;margin-top:.2rem}
.s-system__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}
.s-system__o{
  margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--rule-soft);
  font-size:var(--t-sm);
}
.s-system__o b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.2;color:#fff}

/* ── 11. About + contact ───────────────────────────────────── */
.s-about{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){ .s-about{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)} }
.s-about p + p{margin-top:1.4rem}
.s-pull{
  font-weight:600;
  font-size:var(--t-h3);line-height:1.28;letter-spacing:-.02em;
  color:#fff;border-left:2px solid var(--accent);
  padding-left:1.6rem;margin-block:2.2rem;
}
.s-contact{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden}
.s-contact a{
  flex:1 1 14rem;background:var(--paper-2);padding:1.7rem 1.6rem;
  display:flex;flex-direction:column;gap:.35rem;
  transition:background .35s var(--ease);
}
.s-contact a:hover{background:var(--paper-3)}
.s-contact b{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.s-foot{
  padding-block:2.5rem 3.5rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline;
}

/* ── 12. Buttons / links ───────────────────────────────────── */
.s-link{
  display:inline-flex;align-items:center;gap:.55rem;
  border-bottom:1px solid var(--rule);padding-bottom:.28rem;
  transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.s-link:hover{border-color:var(--accent-bright);gap:.8rem}
.s-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.4rem;border-radius:99px;
  background:var(--invert-bg);color:var(--invert-ink);
  font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em;
  transition:transform .3s var(--ease-out),background .3s var(--ease);
}
.s-btn:hover{transform:translateY(-2px);background:var(--accent-bright)}
.s-btn.is-ghost{background:none;color:var(--ink);border:1px solid var(--rule)}
.s-btn.is-ghost:hover{border-color:var(--accent-bright);background:none}

/* ── 13. Command palette ───────────────────────────────────── */
.s-cmd[hidden]{display:none}
.s-cmd{
  position:fixed;inset:0;z-index:300;
  background:rgba(6,5,8,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;justify-content:center;padding-top:14vh;
}
.s-cmd__box{
  width:min(560px,92vw);height:max-content;
  background:var(--paper-2);border:1px solid var(--rule);
  border-radius:16px;box-shadow:var(--glow-lift);overflow:hidden;
}
.s-cmd__in{
  width:100%;padding:1.05rem 1.25rem;border:0;background:none;color:var(--ink);
  font-size:1.02rem;letter-spacing:-.01em;
  border-bottom:1px solid var(--rule);
}
.s-cmd__in:focus{outline:none}
.s-cmd__list{max-height:52vh;overflow-y:auto;padding:.45rem}
.s-cmd__item{
  display:flex;width:100%;align-items:baseline;gap:.8rem;
  padding:.65rem .8rem;border-radius:7px;text-align:left;color:var(--ink);
}
.s-cmd__item[aria-selected="true"]{background:var(--glass-strong)}
.s-cmd__item b{font-weight:600;letter-spacing:-.015em}
.s-cmd__item span{font-size:var(--t-sm);color:var(--ink-3);margin-left:auto}
.s-kbd{
  font-family:var(--font-pixel);font-size:.6rem;letter-spacing:0;
  border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;
  padding:.2rem .4rem;color:var(--ink-3);
}