/* ============================================================
   KORE Health & Performance — landing page styles
   Palette + type from brand manual:
     gold  #C48D28 -> #E6B049   dark #212121   light #EBEBEB
     Titles: Prometo (substituted -> Saira)   Body: Sora
   ============================================================ */

:root {
  /* base */
  --black: #08080a;
  --bg: #0d0d0f;
  --bg-2: #111114;
  --surface-1: #16161a;
  --surface-2: #1d1d22;
  --surface-3: #25252b;
  --line: rgba(235, 235, 235, 0.09);
  --line-strong: rgba(235, 235, 235, 0.16);

  /* gold */
  --gold-1: #c48d28;
  --gold-2: #e6b049;
  --gold-3: #f3cd78;
  --gold-grad: linear-gradient(118deg, #c48d28 0%, #e6b049 52%, #f3cd78 100%); /* @kind color */
  --gold-grad-soft: linear-gradient(118deg, rgba(196,141,40,.16), rgba(230,176,73,.16)); /* @kind color */
  --gold-glow: rgba(230, 176, 73, 0.30);

  /* text */
  --text: #ebebeb;
  --text-dim: rgba(235, 235, 235, 0.60);
  --text-faint: rgba(235, 235, 235, 0.38);

  /* type */
  --font-title: "Saira", "Prometo", system-ui, sans-serif;
  --font-body: "Sora", system-ui, sans-serif;

  /* metrics */
  --radius: 6px;
  --radius-lg: 12px;
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px); /* @kind spacing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-2); color: var(--black); }

/* scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 3px solid var(--black); }

/* ---------- typography ---------- */
.title { font-family: var(--font-title); font-weight: 800; line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; }
.display {
  font-family: var(--font-title);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
}
.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.kicker {
  font-family: var(--font-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 12.5px;
  color: var(--gold-2);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold-grad);
}
.kicker.center::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold-grad);
}
.kicker.center { justify-content: center; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
section { position: relative; }
.section-pad { padding-block: clamp(72px, 11vw, 150px); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--gold-grad);
  color: #18120a;
  box-shadow: 0 0 0 0 var(--gold-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px var(--gold-glow);
  filter: saturate(1.08) brightness(1.04);
}
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--gold-2); color: var(--gold-2); background: var(--gold-grad-soft); }
.btn-ghost:active { transform: scale(.985); }
.btn-lg { padding: 18px 36px; font-size: 15px; }
.btn-block { width: 100%; }

/* ---------- orbital motif (grafismo derived from symbol) ---------- */
.orbit-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(230, 176, 73, 0.12);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}
.orbit.tilt { transform: translate(-50%, -50%) rotate(28deg); }
.orbit.tilt2 { transform: translate(-50%, -50%) rotate(-22deg); }
@media (prefers-reduced-motion: no-preference) {
  .orbit.spin { animation: orbit-spin 60s linear infinite; }
  .orbit.spin-rev { animation: orbit-spin 90s linear infinite reverse; }
}
@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* glow blobs */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(196,141,40,.30), transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ---------- reveal on scroll ----------
   NB: animate transform only (not opacity) so a paint taken before the
   transition advances still shows content rather than a blank frame. */
.reveal { transform: translateY(26px); transition: transform .7s var(--ease); will-change: transform; }
.reveal.in { transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: none; }
}

/* generic divider */
.hr-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); border: 0; }