/* ============================================================
   APIQO — Design System
   Minimal scientific aesthetic · brand-rooted
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --brand-magenta: #CD3266;
  --brand-cyan:    #54AFBC;
  --brand-blue:    #0439D9;

  /* Derivatives */
  --magenta-50:  #FDEEF3;
  --magenta-100: #F8D5E1;
  --magenta-500: #CD3266;
  --magenta-600: #B22657;

  --cyan-50:   #ECF7F8;
  --cyan-100:  #D2ECEF;
  --cyan-500:  #54AFBC;

  --blue-50:   #EAF0FE;
  --blue-100:  #C7D5FB;
  --blue-500:  #0439D9;
  --blue-600:  #0330B3;

  /* Light surfaces (warm-neutral) */
  --bg:         #FBFBFC;
  --bg-soft:    #F4F5F7;
  --bg-card:    #FFFFFF;
  --line:       #E6E7EB;
  --line-soft:  #EFF0F3;
  --ink:        #0A0B0E;
  --ink-2:      #2A2C32;
  --ink-3:      #54575F;
  --ink-4:      #8B8E97;
  --ink-5:      #B7B9C0;

  /* Dark surfaces (hero) */
  --dark-bg:    #06070A;
  --dark-bg-2:  #0C0E14;
  --dark-line:  #1A1D26;
  --dark-line-2:#2A2E3B;
  --dark-ink:   #F4F5F8;
  --dark-ink-2: #B6BAC4;
  --dark-ink-3: #6B6F7C;

  /* Type */
  --font-display: 'Nunito', system-ui, sans-serif;   /* rounded geometric — closest to Nautica Rounded */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10,11,14,.04), 0 0 0 1px rgba(10,11,14,.04);
  --shadow-md: 0 6px 18px -8px rgba(10,11,14,.12), 0 1px 3px rgba(10,11,14,.06);
  --shadow-lg: 0 24px 60px -20px rgba(10,11,14,.18), 0 2px 6px rgba(10,11,14,.05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* Display type */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Container */
.container {
  width: min(1240px, 92vw);
  margin: 0 auto;
}
.container-wide {
  width: min(1400px, 94vw);
  margin: 0 auto;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--ink);
  color: white;
}
.btn-primary:hover { background: var(--brand-blue); }
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark {
  background: white;
  color: var(--dark-bg);
}
.btn-dark-ghost {
  background: transparent;
  border-color: var(--dark-line-2);
  color: var(--dark-ink);
}
.btn-dark-ghost:hover { border-color: var(--dark-ink-2); }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pill-light {
  background: var(--bg-soft);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.pill-dark {
  background: rgba(255,255,255,.06);
  color: var(--dark-ink-2);
  border: 1px solid var(--dark-line-2);
}

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}

/* Section scaffolding */
section {
  padding: 96px 0;
  position: relative;
}
.section-head {
  display: grid;
  gap: 18px;
  margin-bottom: 56px;
  max-width: 760px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.section-head p {
  font-size: 18px;
  color: var(--ink-3);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Grid lines (subtle scientific feel) */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Mono code chip */
.mono { font-family: var(--font-mono); }

/* Numeric tabular */
.tab-num { font-variant-numeric: tabular-nums; }

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pulse */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes float-orb {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.05); }
  66% { transform: translate(-30px,30px) scale(0.95); }
}

@keyframes flow-line {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Selection */
::selection {
  background: var(--brand-magenta);
  color: white;
}