/* ============================================================
   CYPHER INTELLIGENCE — RESET & TOKENS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* — Palette ——————————————————————————————— */
  --ink-bg:        #05080F;
  --ink-bg-2:      #0A1220;
  --ink-panel:     #0E1626;
  --ink-line:      #1B2A44;
  --ink-line-2:    #243454;
  --ink-fg:        #E8EEF7;
  --ink-fg-dim:    #9AA7BD;
  --ink-fg-mute:   #5B6A85;
  --steel:         #C8D1DE;

  --accent:        #3FB8FF;
  --accent-bright: #7CD3FF;
  --accent-dim:    #1F6EA8;
  --accent-glow:   rgba(63, 184, 255, 0.30);

  --lab:           #FF5C5C;
  --sec:           #5BD692;
  --innov:         #F5B72A;

  /* — Type ——————————————————————————————————— */
  --font-display:  "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --type-mega:     clamp(56px, 7.5vw, 112px);
  --type-h1:       clamp(34px, 4.2vw, 60px);
  --type-h2:       clamp(24px, 2.6vw, 38px);
  --type-h3:       clamp(20px, 1.7vw, 26px);
  --type-lead:     clamp(15px, 1.05vw, 17px);
  --type-body:     15px;
  --type-small:    13px;
  --type-mono:     11px;
  --type-caption:  10px;

  /* — Spacing — múltiplos de 4 — base 8 — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* — Radius — editorial-tech — */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* — Shadow / glow — */
  --shadow-cta:    0 0 24px rgba(63, 184, 255, 0.25);
  --shadow-glow:   0 0 60px rgba(63, 184, 255, 0.30);
  --shadow-panel:  0 12px 60px rgba(0, 0, 0, 0.5);
  --shadow-card:   0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.6);

  /* — Motion — */
  --ease:        cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration:    320ms;
  --duration-fast: 180ms;

  /* — Layout — */
  --container:   1320px;
  --gutter:      clamp(20px, 4vw, 64px);
  --nav-h:       72px;

  /* — Decorative — */
  --grid-line:   rgba(63, 184, 255, 0.07);
  --radar-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'><g fill='none' stroke='%233FB8FF' stroke-width='1'><circle cx='1200' cy='1200' r='1100' stroke-opacity='0.05'/><circle cx='1200' cy='1200' r='900' stroke-opacity='0.06'/><circle cx='1200' cy='1200' r='720' stroke-opacity='0.07'/><circle cx='1200' cy='1200' r='560' stroke-opacity='0.08'/><circle cx='1200' cy='1200' r='420' stroke-opacity='0.10'/><circle cx='1200' cy='1200' r='300' stroke-opacity='0.12'/><circle cx='1200' cy='1200' r='200' stroke-opacity='0.14'/></g></svg>");
}

html {
  scroll-behavior: auto;
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--ink-bg);
  color: var(--ink-fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Film grain global */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

a:hover {
  color: var(--accent-bright);
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--ink-bg);
}

/* Focus visible */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Hide scrollbar styling for the modern feel */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track { background: var(--ink-bg); }
::-webkit-scrollbar-thumb {
  background: var(--ink-line);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* Lenis smooth scroll */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}