/* ============================================================
   KINETA / KinetaIQ — Shared Brand Foundation
   Colors, type tokens, and abstract-tech primitives.
   Used across all three homepage directions.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Primary */
  --cyan:      #00E5FF;
  --blue:      #007BFF;
  --green:     #39FF14;
  --white:     #FFFFFF;

  /* Darks */
  --ink-000:   #05080C;   /* deepest, slightly cooler than guide for depth */
  --ink-050:   #0D1117;
  --ink-100:   #12181F;
  --ink-150:   #1A1F28;
  --ink-200:   #1E2630;
  --ink-300:   #2A3440;
  --ink-400:   #3A4654;

  /* Teals */
  --teal:      #00C2A8;
  --teal-deep: #0A7A6E;

  /* Text */
  --t-hi:      #EAF2F6;
  --t-mid:     #9FB0BC;
  --t-lo:      #5E707C;

  /* Signature gradient — accent ONLY, never a full background */
  --grad: linear-gradient(110deg, var(--cyan) 0%, var(--blue) 42%, var(--teal) 70%, var(--green) 100%);
  --grad-soft: linear-gradient(110deg, var(--cyan), var(--green));

  /* Type */
  --display: 'Michroma', 'Arial Narrow', sans-serif;   /* Bank Gothic stand-in */
  --sans: 'Montserrat', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  --maxw: 1320px;
}

*{ box-sizing:border-box; }

/* ---- typographic primitives ---- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:400;
}
.kicker{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--t-mid);
}
.display{
  font-family:var(--display);
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.01em;
}
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---- abstract tech primitives ---- */

/* fine engineering grid */
.bg-grid{
  background-image:
    linear-gradient(to right, rgba(120,150,170,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,170,.06) 1px, transparent 1px);
  background-size:64px 64px;
}
.bg-grid-fine{
  background-image:
    linear-gradient(to right, rgba(120,150,170,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,170,.05) 1px, transparent 1px);
  background-size:28px 28px;
}

/* radial atmosphere glow */
.glow-cyan{ background:radial-gradient(60% 60% at 50% 40%, rgba(0,229,255,.18), transparent 70%); }
.glow-green{ background:radial-gradient(55% 55% at 70% 60%, rgba(57,255,20,.12), transparent 70%); }

/* hairline accent rule */
.rule{ height:1px; background:linear-gradient(90deg, transparent, var(--ink-300), transparent); border:0; }
.rule-grad{ height:2px; background:var(--grad); border:0; }

/* the X-mark, drawn as a single gradient glyph */
.xmark{
  display:inline-block;
  background:var(--grad);
  clip-path:polygon(18% 0,50% 32%,82% 0,100% 18%,68% 50%,100% 82%,82% 100%,50% 68%,18% 100%,0 82%,32% 50%,0 18%);
}

/* scanline shimmer */
@keyframes scan { 0%{transform:translateY(-100%);} 100%{transform:translateY(100%);} }

/* data ticker */
@keyframes ticker { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* slow pulse */
@keyframes pulse { 0%,100%{opacity:.4;} 50%{opacity:1;} }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}