/* ============================================================
   HELIOS DESIGN SYSTEM — v1
   Single source of truth for color, type, spacing, radii,
   motion, and core components. Every section of the site
   should build from these tokens — no hard-coded values.
   ============================================================ */

:root{
  /* ---------- color: surfaces ---------- */
  --hx-bg:            #070a12;   /* page / scene background — deep space navy */
  --hx-surface:       #0d1119;   /* raised panels, cards */
  --hx-surface-2:     #141a26;   /* nested / hover surfaces */
  --hx-border:        rgba(255,255,255,.10);
  --hx-border-strong: rgba(255,255,255,.18);

  /* ---------- color: text ---------- */
  --hx-text:       #f4f1ea;      /* warm white — headlines, primary copy */
  --hx-text-dim:   #98a1b3;      /* body copy, nav links */
  --hx-text-faint: #5d6675;      /* captions, disabled, partner logos */

  /* ---------- color: brand ---------- */
  --hx-accent:      #ffa64d;     /* solar amber — links, highlights */
  --hx-accent-hot:  #ff7a1a;     /* core orange — glows, emphasis */
  --hx-accent-soft: rgba(255,166,77,.14);  /* tinted fills, badges */
  --hx-cool:        #6ea8ff;     /* electric blue — secondary accent, rim light */

  /* ---------- effects ---------- */
  --hx-glow:      0 0 42px 4px rgba(255,154,74,.35);
  --hx-glow-cool: 0 0 42px 4px rgba(110,168,255,.30);
  --hx-shadow-lg: 0 40px 120px -20px rgba(4,6,12,.7), 0 8px 30px rgba(4,6,12,.5);

  /* ---------- typography ---------- */
  --hx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hx-display-xl: clamp(34px, 4.6vw, 56px);  /* hero headline */
  --hx-display-lg: clamp(28px, 3.4vw, 42px);  /* section headline */
  --hx-display-md: clamp(21px, 2.2vw, 28px);  /* card / feature title */
  --hx-body-lg: 16px;
  --hx-body:    14.5px;
  --hx-body-sm: 13px;
  --hx-caption: 12px;
  --hx-leading-tight: 1.08;   /* display type */
  --hx-leading-body:  1.65;   /* running copy */
  --hx-tracking-tight: -0.02em;  /* display type */
  --hx-tracking-wide:   0.14em;  /* kickers, logo, uppercase labels */

  /* ---------- spacing (4px base scale) ---------- */
  --hx-s1: 4px;  --hx-s2: 8px;   --hx-s3: 12px; --hx-s4: 16px;
  --hx-s5: 20px; --hx-s6: 24px;  --hx-s7: 32px; --hx-s8: 40px;
  --hx-s9: 56px; --hx-s10: 72px; --hx-s11: 96px; --hx-s12: 128px;

  /* ---------- radii ---------- */
  --hx-r-sm: 8px;
  --hx-r-md: 14px;    /* frame / cards */
  --hx-r-pill: 999px;

  /* ---------- motion ---------- */
  --hx-ease: cubic-bezier(.2,.7,.2,1);
  --hx-fast: .25s;
  --hx-med:  .45s;
  --hx-slow: .9s;
}

/* ============================================================
   BASE
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }
body{
  font-family: var(--hx-font);
  color: var(--hx-text);
  background: var(--hx-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.hx-container{
  width: min(94vw, 1320px);
  margin-inline: auto;
}
.hx-section{
  padding-block: var(--hx-s11);
}

/* ============================================================
   TYPE COMPONENTS
   ============================================================ */
.hx-display-xl{
  font-size: var(--hx-display-xl);
  line-height: var(--hx-leading-tight);
  font-weight: 700;
  letter-spacing: var(--hx-tracking-tight);
  text-wrap: balance;
}
.hx-display-lg{
  font-size: var(--hx-display-lg);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: var(--hx-tracking-tight);
  text-wrap: balance;
}
.hx-kicker{
  font-size: var(--hx-caption);
  font-weight: 600;
  letter-spacing: var(--hx-tracking-wide);
  text-transform: uppercase;
  color: var(--hx-accent);
}
.hx-body{
  font-size: var(--hx-body);
  line-height: var(--hx-leading-body);
  color: var(--hx-text-dim);
}
/* animated highlight sweep for display type */
.hx-shimmer{
  background: linear-gradient(100deg, var(--hx-text) 20%, var(--hx-accent) 40%, var(--hx-text) 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hx-shimmer 6s linear infinite;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.hx-btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hx-font);
  font-size: var(--hx-body); font-weight: 600;
  padding: 14px 26px;
  border-radius: var(--hx-r-pill);
  border: none; cursor: pointer;
  transition: box-shadow var(--hx-fast) var(--hx-ease),
              transform var(--hx-fast) var(--hx-ease),
              background var(--hx-fast) var(--hx-ease);
}
.hx-btn--primary{
  background: var(--hx-text);
  color: #12100c;
}
.hx-btn--primary:hover{
  box-shadow: var(--hx-glow);
  transform: translateY(-2px);
}
.hx-btn--ghost{
  background: rgba(255,255,255,.07);
  border: 1px solid var(--hx-border);
  color: var(--hx-text);
  font-size: var(--hx-body-sm); font-weight: 500;
  padding: 10px 20px;
  backdrop-filter: blur(8px);
}
.hx-btn--ghost:hover{
  background: rgba(255,255,255,.14);
  box-shadow: var(--hx-glow);
  transform: translateY(-1px);
}
.hx-btn svg{ transition: transform var(--hx-fast) var(--hx-ease); }
.hx-btn:hover svg.hx-arrow{ transform: translateX(3px); }

/* ============================================================
   CARDS
   ============================================================ */
.hx-card{
  background: var(--hx-surface);
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-r-md);
  padding: var(--hx-s7);
  transition: border-color var(--hx-fast) var(--hx-ease),
              transform var(--hx-fast) var(--hx-ease),
              box-shadow var(--hx-fast) var(--hx-ease);
}
.hx-card:hover{
  border-color: var(--hx-border-strong);
  transform: translateY(-3px);
  box-shadow: var(--hx-glow);
}

/* ============================================================
   NAV LINK
   ============================================================ */
.hx-navlink{
  color: var(--hx-text-dim);
  text-decoration: none;
  font-size: var(--hx-body-sm);
  transition: color var(--hx-fast) var(--hx-ease);
}
.hx-navlink:hover{ color: var(--hx-text); }

/* ============================================================
   MOTION KEYFRAMES + entrance utilities
   Usage: class="hx-fade-up" + inline animation-delay if staggered
   ============================================================ */
@keyframes hx-fade-up   { from{ opacity:0; transform: translateY(22px);}  to{ opacity:1; transform:none; } }
@keyframes hx-fade-down { from{ opacity:0; transform: translateY(-16px);} to{ opacity:1; transform:none; } }
@keyframes hx-shimmer   { to{ background-position: -200% 0; } }

.hx-fade-up{   opacity:0; animation: hx-fade-up   var(--hx-slow) var(--hx-ease) forwards; }
.hx-fade-down{ opacity:0; animation: hx-fade-down var(--hx-slow) var(--hx-ease) forwards; }

@media (prefers-reduced-motion: reduce){
  .hx-fade-up, .hx-fade-down{ animation: none; opacity: 1; }
  .hx-shimmer{ animation: none; }
}