/* ATIL Brand Guidelines — Tokens & Base
   ======================================
   The system that runs the document.
   Every measurement in here is referenced by class, never by inline style. */

:root{
  /* ——— Color: committed palette ——— */
  /* Hue pulled 4° toward scarlet, saturation eased 2% — distinguishable from Coca-Cola/Target stock red. */
  --red:        oklch(60% 0.245 27);     /* ATIL Red — primary, brand */
  --red-deep:   oklch(50% 0.215 27);     /* hover / pressed / print-safe */
  --red-tint:   oklch(95% 0.045 27);     /* whisper-red for surfaces */

  --ink:        #0A0F1F;                  /* foundation */
  --ink-2:      #131A2E;                  /* elevated card on Ink */
  --ink-3:      #1C2540;                  /* hairline-strong on Ink */
  --paper:      #F5F1E8;                  /* warm bone — not white */
  --paper-2:    #ECE6D6;                  /* card on Paper */

  --grey-900: #0A0F1F;
  --grey-700: #2D3447;
  --grey-500: #5C6478;
  --grey-300: #A8AEBC;
  --grey-200: #D6DAE2;
  --grey-100: #E7E3D5;

  --line:        rgba(10,15,31,.10);
  --line-strong: rgba(10,15,31,.18);
  --line-d:      rgba(245,241,232,.10);
  --line-d-s:    rgba(245,241,232,.20);

  /* ——— Type ——— */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-serif:   "Instrument Serif", ui-serif, Georgia, serif;

  /* ——— Spacing scale (4-base, doubling) ——— */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* ——— Radius ——— */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 999px;

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in:  cubic-bezier(.55,.08,.77,.27);
  --ease-std: cubic-bezier(.4,0,.2,1);
  --t-ui: 180ms;
  --t-reveal: 480ms;
  --t-hero: 720ms;

  --content-max: 1180px;
  --side-w: 280px;
}

/* ——— Reset + base ——— */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  font-feature-settings:"ss01","cv11","tnum" 0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}

/* ——— Type primitives ——— */
.t-display-xl,h1.display{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(64px, 9.5vw, 144px);
  line-height:.92;letter-spacing:-.045em;
  text-wrap:balance;
}
.t-display-l{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(48px, 6vw, 96px);
  line-height:.96;letter-spacing:-.04em;text-wrap:balance;
}
.t-display-m,h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(36px, 4vw, 56px);
  line-height:1.02;letter-spacing:-.03em;
  margin:0;text-wrap:balance;
}
.t-h3,h3{
  font-family:var(--font-display);font-weight:600;
  font-size:24px;line-height:1.2;letter-spacing:-.015em;
  margin:0;
}
.t-h4,h4{
  font-family:var(--font-body);font-weight:600;
  font-size:16px;line-height:1.3;letter-spacing:-.005em;
  margin:0;
}
.t-lede{
  font-size:21px;line-height:1.45;
  color:var(--ink);max-width:54ch;text-wrap:pretty;
}
p{margin:0 0 14px;color:var(--grey-700);max-width:62ch;text-wrap:pretty}
.t-mono{
  font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.06em;
}
.t-mono-cap{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-500);
}
.t-serif{font-family:var(--font-serif);font-style:italic;letter-spacing:-.01em}

/* ——— Eyebrow (numbered section opener) ——— */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-500);
  margin-bottom:24px;
}
.eyebrow .num{
  display:inline-block;padding:3px 9px;
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-pill);font-size:10px;
}
.eyebrow .num::before{content:"§ "}
/* Signature device: tiny diagonal cut sits beside the eyebrow */
.eyebrow .cut{
  display:inline-block;width:14px;height:10px;
  background:var(--red);
  clip-path:polygon(0 0,100% 0,60% 100%,40% 100%);
}

/* ——— Layout shell ——— */
.shell{
  display:grid;
  grid-template-columns:var(--side-w) 1fr;
  min-height:100vh;
}
nav.side{
  position:sticky;top:0;align-self:start;
  height:100vh;
  border-right:1px solid var(--line);
  background:var(--paper);
  padding:28px 28px;
  display:flex;flex-direction:column;gap:24px;
  overflow:auto;
}
nav.side .brandmark{
  display:flex;align-items:center;gap:12px;
}
nav.side .brandmark .mk{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
}
nav.side .brandmark .mk img{width:100%;height:100%;object-fit:contain}
nav.side .brandmark .mk svg{width:24px;height:24px}
nav.side .brandmark .meta{
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey-500);
  line-height:1.5;
}
nav.side .brandmark .meta b{color:var(--ink);font-weight:600;display:block}
nav.side ol{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:1px;
  counter-reset:s;
}
nav.side ol li{counter-increment:s}
nav.side ol a{
  display:flex;align-items:baseline;gap:14px;
  padding:8px 10px;border-radius:var(--r-2);
  text-decoration:none;font-size:13.5px;color:var(--ink);
  line-height:1.25;
  transition:background var(--t-ui) var(--ease-std);
}
nav.side ol a::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--font-mono);font-size:10.5px;
  color:var(--grey-300);letter-spacing:.06em;
  min-width:18px;
}
nav.side ol a:hover{background:rgba(10,15,31,.05)}
nav.side ol a.active{background:var(--ink);color:var(--paper)}
nav.side ol a.active::before{color:var(--red)}
nav.side .foot{
  margin-top:auto;padding-top:24px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:10.5px;
  color:var(--grey-500);letter-spacing:.04em;line-height:1.7;
}

main{
  padding:0 var(--s-9) 200px;
  max-width:var(--content-max);
  width:100%;
}

/* ——— Logo image (real PNG mark) ——— */
.atil-logo{
  display:inline-block;
  object-fit:contain;
  max-width:100%;
}
/* White variant for dark surfaces — invert red to white */
.atil-logo.white,
.logo-stage.dark .atil-logo,
.logo-stage.red .atil-logo,
.avatar:not(.fav-light) .atil-logo,
.og-card .atil-logo,
.manifesto .atil-logo,
nav.side ol a.active .atil-logo,
.card.ink .atil-logo,
.card.red .atil-logo{
  filter:brightness(0) invert(1);
}
/* Inside .logo-stage default (Paper), keep brand red */

/* ——— Section rhythm — varied padding intentionally ——— */
  padding:120px 0 96px;
  border-top:1px solid var(--line);
  scroll-margin-top:24px;
  position:relative;
}
section:first-of-type{border-top:none;padding-top:80px}
section.tall{padding:160px 0 120px}
section.short{padding:80px 0 64px}

/* ——— Signature device: section opener with diagonal cut bar ——— */
.section-rule{
  display:flex;align-items:center;gap:12px;
  margin-bottom:48px;
}
.section-rule .bar{
  flex:1;height:1px;background:var(--line);
}
.section-rule .glyph{
  width:18px;height:14px;
  background:var(--red);
  clip-path:polygon(0 0,100% 0,60% 100%,40% 100%);
}

/* ——— Card primitives ——— */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-3);
  padding:28px;
}
.card.paper-2{background:var(--paper-2);border-color:transparent}
.card.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.ink p{color:#c9d0e0}
.card.ink h3,.card.ink h4{color:var(--paper)}
.card.red{background:var(--red);color:#fff;border-color:var(--red)}

/* ——— Grids ——— */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid-2-asym{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:flex-start}

/* ——— Buttons (real, with states) ——— */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:600;
  font-size:14.5px;letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;
  border:1px solid transparent;
  transition:background var(--t-ui) var(--ease-std),
             border-color var(--t-ui) var(--ease-std),
             color var(--t-ui) var(--ease-std);
}
.btn .arr{transition:transform var(--t-ui) var(--ease-out);display:inline-block}
.btn:hover .arr{transform:translateX(4px)}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-deep)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ——— Badges ——— */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-strong);
  color:var(--grey-700);background:transparent;
}
.badge.live::before{
  content:"";display:block;width:6px;height:6px;
  border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px rgba(237,28,36,.18);
  animation:pulse 1.6s var(--ease-out) infinite;
}
.badge.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge.red{background:var(--red);color:#fff;border-color:var(--red)}
.badge.ghost-red{color:var(--red);border-color:currentColor}

@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(237,28,36,.18)}
  50%{box-shadow:0 0 0 7px rgba(237,28,36,0)}
}

/* ——— Footer ——— */
footer{
  padding:80px 0 60px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:24px;
  font-family:var(--font-mono);font-size:11.5px;
  color:var(--grey-500);letter-spacing:.04em;
}
footer .col{display:flex;flex-direction:column;gap:6px}
footer .col b{color:var(--ink);font-weight:600;font-family:var(--font-display);font-size:13px;letter-spacing:-.01em;text-transform:none}

/* ——— Responsive ——— */
@media (max-width:1240px){
  main{padding:0 var(--s-7) 160px}
}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  nav.side{
    position:sticky;top:0;z-index:50;
    height:auto;
    border-right:none;border-bottom:1px solid var(--line);
    padding:14px 20px;
    flex-direction:row;align-items:center;gap:18px;
    overflow:visible;
    background:var(--paper);
  }
  nav.side .brandmark{flex-shrink:0}
  nav.side ol{
    flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;
    padding:0 0 4px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    flex:1;
  }
  nav.side ol li{flex-shrink:0}
  nav.side ol a{padding:8px 12px;white-space:nowrap;font-size:12.5px}
  nav.side ol a::before{display:none}
  nav.side .foot{display:none}
  main{padding:0 24px 120px}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .grid-2-asym{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  section{padding:80px 0 64px}
  .hero{padding:60px 0 40px}
  .hero-foot{grid-template-columns:1fr 1fr}
  .construction{padding:24px}
  .construction .blueprint{width:100%;max-width:340px;height:auto;aspect-ratio:1/1}
}

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}