/* ==========================================================================
   SiliCore — base.css
   Design tokens, reset, typography, buttons, shared primitives.
   Load order: base.css -> layout.css -> components.css
   ========================================================================== */

/* ========= Design tokens ========= */
:root{
  /* palette (unchanged from the original single-page site) */
  --black:#0b0b0c;
  --white:#f5f7fa;
  --cyan:#18e0ff;
  --cyan-soft:#6ff0ff;
  --deep:#0c1a3a;
  --muted:#a8b3c7;
  --card:#0f1730;

  /* derived surfaces */
  --surface: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  --surface-solid:#0f1730;
  --hairline: rgba(255,255,255,.08);
  --hairline-strong: rgba(255,255,255,.14);

  /* effects */
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --shadow-cyan: 0 16px 36px rgba(24,224,255,.18);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* rhythm */
  --gap: clamp(14px, 2.2vw, 22px);
  --maxw: 1200px;
  --maxw-prose: 820px;
  --section-y: clamp(56px, 8vw, 112px);

  /* motion */
  --speed: 220ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* chip/circuit pattern used by hero + 404 backgrounds */
  --chip-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none'%3E%3Cg stroke='%2318e0ff' stroke-opacity='.14' stroke-width='1.2'%3E%3Cpath d='M0 24h40l16 16h40'/%3E%3Cpath d='M96 40v40h64'/%3E%3Cpath d='M24 0v40'/%3E%3Cpath d='M0 120h24l16-16h56v56'/%3E%3Cpath d='M136 0v24h-24'/%3E%3Cpath d='M56 160v-24h40'/%3E%3Cpath d='M160 96h-24'/%3E%3C/g%3E%3Cg fill='%2318e0ff' fill-opacity='.22'%3E%3Ccircle cx='24' cy='24' r='2.6'/%3E%3Ccircle cx='96' cy='40' r='2.6'/%3E%3Ccircle cx='96' cy='80' r='2.6'/%3E%3Ccircle cx='40' cy='104' r='2.6'/%3E%3Ccircle cx='96' cy='136' r='2.6'/%3E%3Ccircle cx='136' cy='24' r='2.6'/%3E%3C/g%3E%3Cg stroke='%2318e0ff' stroke-opacity='.10' stroke-width='1'%3E%3Crect x='112' y='104' width='28' height='28' rx='3'/%3E%3Crect x='8' y='60' width='20' height='20' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ========= Reset ========= */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
  color:var(--white);
  background:var(--deep);
  background-image:linear-gradient(180deg, var(--deep), #0a1228 55%, #0a1020);
  background-attachment:fixed;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}

/* ========= Typography ========= */
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:.2px;font-weight:700}
h1{font-size:clamp(30px, 5vw, 56px)}
h2{font-size:clamp(24px, 3.4vw, 36px)}
h3{font-size:clamp(17px, 2.4vw, 22px)}
h4{font-size:clamp(15px, 2vw, 18px)}
p{margin:0}

.lead{
  color:var(--muted);
  font-size:clamp(15px, 2.2vw, 19px);
}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.92em;
}

a{color:var(--cyan);text-decoration:none;transition:color var(--speed) var(--ease)}
a:hover{color:var(--cyan-soft)}

/* Visible focus for keyboard users on every interactive element */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* ========= Skip link ========= */
.skip{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{
  left:16px;top:16px;width:auto;height:auto;z-index:1000;
  background:var(--black);color:var(--white);
  padding:10px 14px;border-radius:10px;
}

/* Spacing utilities */
.mt-gap{margin-top:var(--gap)}
.stack{display:grid;gap:var(--gap)}

/* Screen-reader-only text */
.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;
}

/* ========= Buttons ========= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;
  border-radius:var(--radius-sm);
  border:1px solid var(--hairline-strong);
  background:rgba(12,26,58,.55);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  backdrop-filter:saturate(120%) blur(6px);
  color:var(--white);
  font-weight:600;
  cursor:pointer;
  transition:transform var(--speed) var(--ease),
             border-color var(--speed) var(--ease),
             background var(--speed) var(--ease);
}
.btn:hover{transform:translateY(-2px);border-color:var(--cyan);color:var(--white)}
.btn:active{transform:translateY(0)}

.btn--primary{
  background:linear-gradient(180deg, var(--cyan), var(--cyan-soft));
  color:#001018;
  border-color:transparent;
}
.btn--primary:hover{transform:translateY(-2px) scale(1.02);color:#001018}

.btn--ghost{background:transparent}

.btnrow{display:flex;gap:14px;flex-wrap:wrap}

/* Arrow that nudges on hover — used in card CTAs */
.cta{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;color:var(--cyan);
}
.cta svg{width:16px;height:16px;transition:transform var(--speed) var(--ease)}

/* ========= Badge / chip ========= */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:rgba(24,224,255,.14);
  border:1px solid rgba(24,224,255,.4);
  color:var(--cyan);
  font-size:12px;font-weight:600;letter-spacing:.2px;
  white-space:nowrap;
}
.badge--muted{
  background:rgba(255,255,255,.06);
  border-color:var(--hairline-strong);
  color:var(--muted);
}

/* ========= Scroll reveal =========
   Elements start hidden and fade/rise in when observed by scripts/reveal.js.
   .no-js on <html> (or a missing observer) leaves them visible — see below. */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1;transform:none}

/* Fail-safe: if JS never runs, content must not stay invisible. */
.no-js .reveal{opacity:1;transform:none}

/* ========= Lenis (inertia scrolling) =========
   Required by the vendored Lenis library. Without these the page either
   double-scrolls or fights the browser's own smooth-scroll. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ========= Reduced motion =========
   Kills reveals, hover lifts, and the timeline pulse. Lenis is also disabled
   in JS (see scripts/reveal.js) — CSS alone cannot stop it. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}