/* Hydrix pitch · shared design system. Sections add their own CSS scoped to #their-id. */
:root {
  --bg: #050c17; --bg2: #0b1a2e; --card: rgba(15, 34, 56, .72); --card2: #13294a; --line: rgba(120, 170, 220, .16);
  --cyan: #22d3ee; --blue: #0ea5e9; --brand: #0075ba; --gold: #ffc500; --red: #f43f5e; --green: #34d399;
  --text: #d6e2ee; --muted: #8aa0b6; --white: #f5f9fc;
  --head: 'Space Grotesk', 'Inter', system-ui, sans-serif; --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 20px; --wrap: 1200px; --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 18px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 700px at 85% -10%, rgba(14,165,233,.14), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(34,211,238,.08), transparent 60%),
  radial-gradient(rgba(140,190,240,.07) 1px, transparent 1px) 0 0 / 28px 28px; }
a { color: var(--cyan); }
img { max-width: 100%; display: block; }

/* sections */
.hx-sec { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 40px; }
.hx-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; position: relative; }
.eyebrow { font: 700 13px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--cyan); margin: 0 0 18px; }
.h1 { font: 700 clamp(56px, 9vw, 132px)/.95 var(--head); letter-spacing: -.03em; color: var(--white); margin: 0; }
.h2 { font: 700 clamp(34px, 4.6vw, 60px)/1.05 var(--head); letter-spacing: -.02em; color: var(--white); margin: 0 0 18px; }
.h3 { font: 600 22px/1.25 var(--head); color: var(--white); margin: 0 0 8px; }
.lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--text); max-width: 760px; margin: 0; }
.muted { color: var(--muted); } .small { font-size: 14px; }
.grad-text { background: linear-gradient(100deg, var(--cyan), var(--blue) 45%, #7dd3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold { color: var(--gold); } .cyan { color: var(--cyan); } .red { color: var(--red); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.8); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.card:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.45); box-shadow: 0 30px 80px -30px rgba(34,211,238,.25); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(34,211,238,.4); background: rgba(34,211,238,.08); color: var(--cyan); font: 600 14px/1 var(--body); }
.pill.gold { border-color: rgba(255,197,0,.5); background: rgba(255,197,0,.1); color: var(--gold); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 999px; background: var(--gold); color: #0b1424; font: 700 18px/1 var(--head); text-decoration: none; box-shadow: 0 0 40px rgba(255,197,0,.35); transition: transform .3s var(--ease), box-shadow .3s; }
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 60px rgba(255,197,0,.55); }
.grid { display: grid; gap: 24px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.35); color: var(--cyan); }
.icon svg { width: 26px; height: 26px; }
.num { font: 700 clamp(48px, 6vw, 84px)/1 var(--head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: 1fr 1fr; } .hx-sec { padding: 96px 20px; } }
@media (max-width: 600px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } body { font-size: 16px; } }

/* reveal on scroll: add data-reveal="up|fade|scale|left|right" (+ data-delay="ms") */
[data-reveal] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: transform, opacity; }
[data-reveal="up"] { transform: translateY(40px); } [data-reveal="left"] { transform: translateX(-50px); } [data-reveal="right"] { transform: translateX(50px); }
[data-reveal="scale"] { transform: scale(.9); }
[data-reveal].in { opacity: 1; transform: none; }
.hx-static [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* chrome: progress bar, dot nav, footer brand, key hint */
#hx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 50; background: linear-gradient(90deg, var(--cyan), var(--gold)); box-shadow: 0 0 12px var(--cyan); }
#hx-nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 12px; }
#hx-nav a { position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(214,226,238,.25); transition: all .3s; }
#hx-nav a.on { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transform: scale(1.3); }
#hx-nav a span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 12px/1 var(--body); color: var(--text); background: rgba(5,12,23,.9); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; }
#hx-nav a:hover span { opacity: 1; }
#hx-brand { position: fixed; left: 28px; bottom: 22px; z-index: 40; font: 700 14px/1 var(--head); letter-spacing: .25em; color: var(--white); text-decoration: none; }
#hx-brand b { color: var(--gold); }
#hx-brand small { font: 500 11px/1 var(--body); letter-spacing: .12em; color: var(--muted); margin-left: 10px; }
#hx-keys { position: fixed; right: 22px; bottom: 20px; z-index: 40; font: 500 12px/1 var(--body); color: var(--muted); display: flex; gap: 8px; align-items: center; }
#hx-keys button { background: rgba(15,34,56,.8); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; font: 600 12px/1 var(--body); }
@media (max-width: 700px) { #hx-nav, #hx-keys { display: none; } #hx-brand { display: none; } }
.hx-only #hx-nav, .hx-only #hx-keys, .hx-only #hx-progress { display: none; }