/* ============================================================
   HYCOACH DESIGN SYSTEM v2
   Sports performance — dark theme — JetBrains Mono for all data
   ============================================================ */

:root {
  /* ── BRAND ── */
  --hc-orange:        #ff3d00;
  --hc-orange-dim:    rgba(255,61,0,0.12);
  --hc-orange-glow:   rgba(255,61,0,0.06);
  --accent:           #ff3d00;
  --accent2:          #ff6a30;
  --accent-hover:     #ff5520;
  --accent-muted:     rgba(255,61,0,0.12);
  --accent-subtle:    rgba(255,61,0,0.06);

  /* ── SURFACES ── */
  --hc-bg:            #030508;
  --hc-bg-1:          #0a0d14;
  --hc-bg-2:          #10141f;
  --hc-bg-3:          #161b28;
  --hc-bg-4:          #1c2233;
  --hc-bg-5:          #222840;
  --bg0: #030508;
  --bg1: #0a0d14;
  --bg2: #10141f;
  --bg3: #161b28;
  --bg4: #1c2233;
  --bg5: #222840;

  /* ── TEXT ── */
  --hc-text:          #f0f4ff;
  --hc-text-2:        #8892a4;
  --hc-text-3:        #4a5568;
  --txt:  #f0f4ff;
  --txt2: #8892a4;
  --txt3: #4a5568;
  --txt4: #2d3748;

  /* ── BORDERS ── */
  --hc-border-faint:  rgba(255,255,255,0.04);
  --hc-border:        rgba(255,255,255,0.08);
  --hc-border-mid:    rgba(255,255,255,0.14);
  --hc-border-strong: rgba(255,255,255,0.24);
  --border-subtle:    rgba(255,255,255,0.04);
  --border:           rgba(255,255,255,0.08);
  --border-hi:        rgba(255,255,255,0.14);
  --border-focus:     rgba(255,61,0,0.50);

  /* ── SEMANTIC ── */
  --hc-green:   #28c265;
  --hc-amber:   #f0a020;
  --hc-red:     #ee3c3c;
  --hc-blue:    #4d8cf5;
  --teal:       #00dba8;
  --blue:       #4d8cf5;
  --gold:       #f0a020;
  --green:      #28c265;
  --red:        #ee3c3c;
  --teal-muted:  rgba(0,219,168,0.12);
  --blue-muted:  rgba(77,140,245,0.12);
  --gold-muted:  rgba(240,160,32,0.12);
  --green-muted: rgba(40,194,101,0.12);
  --red-muted:   rgba(238,60,60,0.12);

  /* ── ARCHETYPE ── */
  --hc-runner-bg:     rgba(77,140,245,0.10);
  --hc-runner-text:   #4d8cf5;
  --hc-strength-bg:   rgba(238,60,60,0.12);
  --hc-strength-text: #ee3c3c;
  --hc-balanced-bg:   rgba(40,194,101,0.10);
  --hc-balanced-text: #28c265;

  /* ── TYPE ── */
  --font-display: 'Barlow Condensed', 'Bebas Neue', sans-serif;
  --font-ui:      'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-data:    'JetBrains Mono', 'DM Mono', 'Fira Code', monospace;
  --font-mono:    'JetBrains Mono', 'DM Mono', 'Fira Code', monospace;

  /* ── TYPE SCALE ── */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* ── RADIUS ── */
  --hc-r-sm:   4px;
  --hc-r-md:   8px;
  --hc-r-lg:   12px;
  --hc-r-pill: 999px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── ELEVATION ── */
  --shadow-card:  0 1px 3px rgba(0,0,0,.4),  0 4px 16px rgba(0,0,0,.25);
  --shadow-pop:   0 2px 8px rgba(0,0,0,.5),  0 8px 32px rgba(0,0,0,.35);
  --shadow-modal: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  --glow-accent:  0 0 20px rgba(255,61,0,0.18);
  --glow-teal:    0 0 20px rgba(0,219,168,0.15);

  /* ── LAYOUT ── */
  --sidebar-w:   280px;
  --topnav-h:    56px;
  --bottombar-h: 56px;

  /* ── MOTION ── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-xs:   120ms;
  --dur-sm:   150ms;
  --dur-md:   220ms;
  --dur-lg:   400ms;
  --dur-fast: 150ms;
  --dur-mid:  220ms;
  --dur-slow: 400ms;
}

/* ── GLOBAL RESETS ── */
*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid var(--hc-orange);outline-offset:2px;border-radius:var(--hc-r-sm)}
:focus:not(:focus-visible){outline:none}

/* ── TYPOGRAPHY UTILITIES ── */
.hc-display{font-family:var(--font-display);line-height:.88;letter-spacing:-.01em;text-transform:uppercase}
.hc-h1{font-family:var(--font-display);line-height:.9;text-transform:uppercase}
.hc-h2{font-family:var(--font-display);line-height:.95;text-transform:uppercase}
.hc-mono{font-family:var(--font-data);font-size:13px;letter-spacing:.02em}
.hc-label{font-family:var(--font-data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hc-text-3)}
.hc-label-orange{color:var(--hc-orange)}

/* Data values — always DM Mono */
.hc-data{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.hc-data-lg{font-family:var(--font-data);font-size:clamp(28px,4vw,48px);font-weight:500;color:var(--hc-orange);font-variant-numeric:tabular-nums}

/* ── BUTTONS ── */
.hc-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:var(--hc-r-sm);
  font-family:var(--font-ui);font-size:14px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;border:none;
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) ease;
  white-space:nowrap;min-height:44px;
}
.hc-btn:hover{transform:translateY(-1px)}
.hc-btn:active{transform:translateY(0) scale(0.98)}
.hc-btn-primary{background:var(--hc-orange);color:#0d0d0d}
.hc-btn-primary:hover{opacity:.92}
.hc-btn-ghost{background:transparent;color:var(--hc-text-2);border:1px solid var(--hc-border-mid)}
.hc-btn-ghost:hover{border-color:var(--hc-border-strong);color:var(--hc-text)}

/* ── CARDS ── */
.hc-card{
  background:var(--hc-bg-2);border:1px solid var(--hc-border);
  border-radius:var(--hc-r-lg);
  transition:border-color var(--dur-mid) ease,transform var(--dur-mid) var(--ease-out);
}
.hc-card:hover{border-color:var(--hc-border-mid);transform:translateY(-2px)}

/* ── TERMINAL ── */
.hc-terminal{background:var(--hc-bg-2);border:1px solid var(--hc-border);border-radius:var(--hc-r-lg);overflow:hidden;font-family:var(--font-data)}
.hc-terminal-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--hc-bg-3);border-bottom:1px solid var(--hc-border-faint)}
.hc-terminal-dots{display:flex;gap:5px}
.hc-terminal-dots span{width:8px;height:8px;border-radius:50%;background:var(--hc-border-mid)}
.hc-terminal-dots span:first-child{background:#ff5f57}
.hc-terminal-dots span:nth-child(2){background:#febc2e}
.hc-terminal-dots span:last-child{background:#28c840}

/* ── PROGRESS BARS ── */
.hc-progress{height:3px;background:var(--hc-border);border-radius:var(--hc-r-pill);overflow:hidden}
.hc-progress-fill{height:100%;background:var(--hc-orange);border-radius:var(--hc-r-pill);transition:width 800ms var(--ease-out)}

/* ── ARCHETYPE BADGES ── */
.hc-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--hc-r-pill);font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.hc-badge-runner   {background:var(--hc-runner-bg);   color:var(--hc-runner-text)}
.hc-badge-strength {background:var(--hc-strength-bg); color:var(--hc-strength-text)}
.hc-badge-balanced {background:var(--hc-balanced-bg); color:var(--hc-balanced-text)}
.hc-badge-orange   {background:var(--hc-orange-dim);  color:var(--hc-orange)}
.hc-badge-success  {background:rgba(61,232,122,0.1);  color:var(--hc-green)}
.hc-badge-warning  {background:rgba(245,166,35,0.1);  color:var(--hc-amber)}
.hc-badge-danger   {background:rgba(255,59,48,0.1);   color:var(--hc-red)}

/* ── FORM INPUTS ── */
.hc-input{
  background:var(--hc-bg-3);border:1px solid var(--hc-border);
  border-radius:var(--hc-r-sm);padding:10px 14px;
  color:var(--hc-text);font-family:var(--font-ui);font-size:14px;
  width:100%;min-height:44px;
  transition:border-color var(--dur-fast) ease;
}
.hc-input:hover{border-color:var(--hc-border-mid)}
.hc-input:focus{border-color:var(--hc-orange);outline:none}
.hc-input::placeholder{color:var(--hc-text-3)}
.hc-input.error{border-color:var(--hc-red)}
.hc-error-msg{font-family:var(--font-data);font-size:12px;color:var(--hc-red);margin-top:4px}

/* ── SKELETON LOADING ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.hc-skeleton{
  background:linear-gradient(90deg,var(--hc-bg-3) 25%,var(--hc-bg-4) 50%,var(--hc-bg-3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--hc-r-sm);
}

/* ── EMPTY STATES ── */
.hc-empty-state{text-align:center;padding:3rem 1rem;color:var(--hc-text-3)}
.hc-empty-state h3{font-size:16px;font-weight:700;color:var(--hc-text-2);margin-bottom:.5rem}
.hc-empty-state p{font-size:13px;line-height:1.6;margin-bottom:1.5rem}

/* ── SCROLL REVEAL ── */
.hc-reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.hc-reveal.visible{opacity:1;transform:none}
.hc-reveal-group>*{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.hc-reveal-group.visible>*:nth-child(1){opacity:1;transform:none;transition-delay:0ms}
.hc-reveal-group.visible>*:nth-child(2){opacity:1;transform:none;transition-delay:80ms}
.hc-reveal-group.visible>*:nth-child(3){opacity:1;transform:none;transition-delay:160ms}
.hc-reveal-group.visible>*:nth-child(4){opacity:1;transform:none;transition-delay:240ms}
.hc-reveal-group.visible>*:nth-child(5){opacity:1;transform:none;transition-delay:320ms}
.hc-reveal-group.visible>*:nth-child(6){opacity:1;transform:none;transition-delay:400ms}

/* ── ANIMATIONS ── */
@keyframes hc-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hc-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes hc-live-pulse{0%{box-shadow:0 0 0 0 rgba(61,232,122,0.4)}70%{box-shadow:0 0 0 8px rgba(61,232,122,0)}100%{box-shadow:0 0 0 0 rgba(61,232,122,0)}}
@keyframes hc-pulse-glow{0%,100%{opacity:0.6}50%{opacity:1}}
@keyframes hc-underline-reveal{to{transform:scaleX(1)}}

/* ── TERMINAL GLOW ── */
.hc-terminal-glow{position:relative}
.hc-terminal-glow::before{
  content:'';position:absolute;inset:-40px;
  background:radial-gradient(ellipse at center,rgba(255,61,0,0.10) 0%,transparent 70%);
  pointer-events:none;
  animation:hc-pulse-glow 4s ease-in-out infinite;
  z-index:-1;
}

/* ── LIVE DOT ── */
.hc-live-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--hc-green);
  animation:hc-live-pulse 2s ease-in-out infinite;
}

/* ── STEP CONNECTOR ── */
.hc-step-connector{
  height:1px;flex:1;
  background:linear-gradient(90deg,var(--hc-orange) var(--prog,0%),rgba(255,255,255,0.08) var(--prog,0%));
  transition:--prog 1200ms var(--ease-out);
  margin-top:19px;align-self:auto;
}

/* ── FEATURE CARD LEFT-BORDER REVEAL ── */
.hc-feature-reveal{position:relative}
.hc-feature-reveal::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--hc-orange);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform 250ms var(--ease-out);
}
.hc-feature-reveal:hover::before{transform:scaleY(1)}

/* ── HERO STAGGER ── */
.hc-hero-eyebrow{animation:hc-fade-up 500ms var(--ease-out) 0ms   both}
.hc-hero-h1     {animation:hc-fade-up 600ms var(--ease-out) 80ms  both}
.hc-hero-sub    {animation:hc-fade-up 500ms var(--ease-out) 180ms both}
.hc-hero-ctas   {animation:hc-fade-up 500ms var(--ease-out) 260ms both}
.hc-hero-trust  {animation:hc-fade-up 400ms var(--ease-out) 340ms both}

/* ── ORANGE WORD UNDERLINE (hero HYROX) ── */
.hc-word-accent{position:relative;display:inline;color:var(--hc-orange)}
.hc-word-accent::after{
  content:'';position:absolute;bottom:2px;left:0;right:0;height:3px;
  background:var(--hc-orange);
  transform:scaleX(0);transform-origin:left;
  animation:hc-underline-reveal 600ms var(--ease-out) 500ms forwards;
}

/* ── PRICING FEATURED ── */
.hc-pricing-featured{
  border:2px solid var(--hc-orange)!important;
  background:linear-gradient(180deg,rgba(255,61,0,0.04) 0%,var(--hc-bg-2,#10141f) 40%)!important;
  transform:translateY(-6px);
}

/* ── COMPLIANCE DOTS (coach) ── */
.hc-compliance-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.hc-compliance-dot.on-track{background:var(--hc-green)}
.hc-compliance-dot.behind   {background:var(--hc-amber)}
.hc-compliance-dot.attention{background:var(--hc-red)}

/* ── MOBILE TOUCH TARGETS ── */
@media(max-width:768px){
  .hc-btn{min-height:44px;padding:12px 22px}
  button,a,select,input[type="checkbox"],input[type="radio"]{min-height:44px}
  .hc-nav-item{min-height:48px}
}