/* ============================================================
   BASE  ·  tokens, reset, typography, utilities, buttons, motion
   Abdulmumin Abdulwahab — v2 "three pillars" design system
   ============================================================ */

:root {
  /* ---- Surfaces (cool near-black, premium) ---- */
  --bg:        #080a0f;
  --bg-2:      #0b0e14;
  --surface:   #0f131b;
  --surface-2: #141924;
  --surface-3: #1a2130;
  --line:      #1e2634;
  --line-2:    #2a3444;
  --line-soft: #161c26;

  /* ---- Ink ---- */
  --ink:   #eef2f8;
  --ink-2: #aab4c4;
  --ink-3: #6b7589;
  --ink-4: #454f61;

  /* ---- Brand ---- */
  --brand:   #5ea0ff;        /* electric blue */
  --brand-2: #9b7bff;        /* indigo-violet */
  --brand-ink: #04060c;
  --brand-glow: rgba(94,160,255,.16);

  /* ---- Pillar accents (chart-validated) ---- */
  --cyber: #ff6b6b;          /* security */
  --web:   #b388ff;          /* full-stack */
  --data:  #ffb84d;          /* data */
  --ok:    #3ddc97;
  --warn:  #ffb84d;
  --bad:   #ff6b6b;
  --reverve: #46c76a;

  /* chart categorical (passes dataviz validator, dark) */
  --c1:#12a97a; --c2:#3f7fe0; --c3:#c44ba3; --c4:#bd7f1c; --c5:#7f66e0; --c6:#dd5343;

  /* ---- Type ---- */
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-2xs: clamp(.64rem, .6rem + .15vw, .72rem);
  --t-xs:  clamp(.74rem, .7rem + .2vw, .82rem);
  --t-sm:  clamp(.84rem, .8rem + .22vw, .94rem);
  --t-md:  clamp(.96rem, .92rem + .25vw, 1.06rem);
  --t-lg:  clamp(1.1rem, 1rem + .5vw, 1.32rem);
  --t-xl:  clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  --t-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --t-3xl: clamp(2.7rem, 1.7rem + 4.6vw, 5.4rem);
  --t-4xl: clamp(3.2rem, 1.9rem + 6vw, 7rem);

  /* ---- Space ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px; --s10:120px;

  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.6,0,.8,.2);
  --dur: .5s;

  --shadow-1: 0 2px 10px -4px rgba(0,0,0,.6);
  --shadow-2: 0 20px 50px -24px rgba(0,0,0,.8);
  --shadow-3: 0 40px 90px -30px rgba(0,0,0,.85);
}

/* light theme */
[data-theme="light"] {
  --bg:#f6f8fc; --bg-2:#eef2f8; --surface:#ffffff; --surface-2:#f4f7fb; --surface-3:#eaf0f7;
  --line:#dde5ef; --line-2:#c7d3e2; --line-soft:#e9eff6;
  --ink:#0c1420; --ink-2:#44536a; --ink-3:#6f7f96; --ink-4:#9fb0c4;
  --brand:#2f6bd8; --brand-2:#6b46d9; --brand-ink:#ffffff; --brand-glow:rgba(47,107,216,.14);
  --cyber:#d13b3b; --web:#6d3ecf; --data:#b06f00; --ok:#1a9e5f; --reverve:#1a9e46;
  --c1:#0f8a63; --c2:#2f63c4; --c3:#a53b88; --c4:#9a6a12; --c5:#6448c4; --c6:#c23f31;
  --shadow-2: 0 20px 50px -28px rgba(20,40,70,.28);
  --shadow-3: 0 40px 90px -34px rgba(20,40,70,.3);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
  transition: background .4s var(--ease), color .4s var(--ease);
}
body.locked { overflow: hidden; }

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:where(h1,h2,h3,h4) { font-family: var(--f-display); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; }
p { overflow-wrap: break-word; }

::selection { background: var(--brand); color: var(--brand-ink); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid var(--bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* ---- utilities ---- */
.mono { font-family: var(--f-mono); }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[hidden] { display: none !important; }

.kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.kicker::before { content:""; width: 18px; height: 1px; background: var(--brand); }

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 9999;
  background: var(--brand); color: var(--brand-ink);
  padding: 10px 16px; border-radius: 8px; font-family: var(--f-mono); font-size: var(--t-sm);
  transform: translateY(-150%); transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: none; }

/* ---- buttons ---- */
.btn {
  --b: var(--surface-2); --f: var(--ink); --bd: var(--line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 13px 22px; border: 1px solid var(--bd); border-radius: 99px;
  background: var(--b); color: var(--f);
  font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 500; letter-spacing: .01em;
  transition: transform .2s var(--ease), border-color .2s, background .2s, color .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  --b: var(--brand); --f: var(--brand-ink); --bd: transparent;
  font-weight: 600;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
}
.btn--primary:hover { box-shadow: 0 14px 34px -12px var(--brand-glow); }
.btn--ghost { --b: transparent; --bd: var(--line-2); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--sm { padding: 9px 15px; font-size: var(--t-xs); }
.btn:disabled { opacity:.5; cursor: not-allowed; transform: none; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface-2);
}

/* ---- reveal motion ---- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d,0ms); will-change: opacity, transform; }
[data-reveal="l"] { transform: translateX(-26px); }
[data-reveal="r"] { transform: translateX(26px); }
[data-reveal="s"] { transform: scale(.96); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---- section framework ---- */
.section { position: relative; max-width: var(--maxw); margin-inline: auto; padding: clamp(60px,8vw,96px) var(--gutter); }
.section__head { margin-bottom: var(--s7); max-width: 72ch; }
.section__title { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.035em; margin: var(--s3) 0 var(--s3); }
.section__sub { color: var(--ink-2); font-size: var(--t-lg); max-width: 60ch; }

.print-only { display: none; }
@media print { .bg-fx, nav, .cursor, .hero__scroll { display:none !important; } body { background:#fff; color:#000; } }