/* ============================================================
   KOVA BASE — reset, typography, primitives
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
iframe { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-hi);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

::selection { background: rgba(110, 231, 255, .28); color: #fff; }

/* Focus */
:focus-visible { outline: 2px solid var(--acc-1); outline-offset: 3px; border-radius: 4px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #232a44; border-radius: 99px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: #313a5e; }

/* ---------- Layout primitives ---------- */
.shell { width: min(var(--shell), 100% - 48px); margin-inline: auto; }
.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--acc-1);
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--glass);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 99px;
  background: var(--grad-brand); box-shadow: 0 0 12px var(--acc-1);
}

.section-title { font-size: clamp(30px, 4.2vw, 52px); margin: 22px 0 14px; }
.section-sub { max-width: 640px; font-size: 17px; color: var(--text-low); }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--glass-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--text-hi); background: var(--btn-bg);
  border: 1px solid var(--line-strong);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-med);
  white-space: nowrap; user-select: none;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(110, 231, 255, .5); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-brand);
  color: #06070d; border: 0; font-weight: 700;
  box-shadow: 0 8px 30px -8px rgba(110, 231, 255, .45), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover { box-shadow: 0 12px 40px -8px rgba(167, 139, 255, .55), inset 0 1px 0 rgba(255,255,255,.35); }

.btn-ghost { background: transparent; border-color: var(--line); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Glass card ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Gradient hairline on top of a card */
.glass-top {
  position: relative;
}
.glass-top::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,231,255,.55), rgba(167,139,255,.55), transparent);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}