/* ============================================================
   Helmyx Marketing Site
   Built on the official brand tokens (hx-tokens.css). Voice: calm,
   precise, on the record. Gradient never sits behind body text —
   used only as accents, buttons, badges and decorative glow.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.hx {
  margin: 0;
  font-family: var(--hx-font-sans);
  font-size: var(--hx-size-body);
  color: var(--hx-ink);
  background: var(--hx-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.hx img { max-width: 100%; display: block; }
.hx a { color: inherit; text-decoration: none; }

.hx h1, .hx h2, .hx h3, .hx h4,
.hx-display {
  font-family: var(--hx-font-display);
  font-weight: 700;
  letter-spacing: var(--hx-tracking-tight);
  color: var(--hx-navy-900);
  margin: 0 0 16px;
  line-height: 1.15;
}
.hx h1, .hx-display { font-size: var(--hx-size-display); }
.hx h2 { font-size: var(--hx-size-h1); }
.hx h3 { font-size: var(--hx-size-h2); font-weight: 600; }
.hx h4 { font-size: var(--hx-size-h3); font-weight: 600; }
.hx p { margin: 0 0 16px; color: var(--hx-slate-700); }
.hx .hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hx-font-sans);
  font-size: var(--hx-size-label);
  font-weight: 600;
  letter-spacing: var(--hx-tracking-label);
  text-transform: uppercase;
  color: var(--hx-teal-800);
  margin-bottom: 14px;
}
.hx .hx-eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hx-gradient);
}

.hx-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hx-section { padding: 96px 0; }
.hx-section-tight { padding: 64px 0; }
@media (max-width: 720px) {
  .hx-section { padding: 64px 0; }
  .hx-section-tight { padding: 48px 0; }
  .hx h1, .hx-display { font-size: 32px; }
  .hx h2 { font-size: 26px; }
}

/* ---------- Buttons ---------- */
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hx-font-sans);
  font-weight: 600;
  font-size: var(--hx-size-body);
  padding: 13px 26px;
  border-radius: var(--hx-radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
/* Rule #2 of the brand guide: "Primary buttons are navy. Teal marks
   progress and nothing else." On a light canvas that's hx-btn-primary; on a
   navy section (hero, CTA banner) the equivalent high-contrast primary is
   solid white — the gradient itself never carries button/label text (its
   bright teal end fails contrast either as foreground or background). */
.hx-btn-primary { background: var(--hx-navy-800); color: var(--hx-white); }
.hx-btn-primary:hover { background: var(--hx-navy-700); transform: translateY(-1px); box-shadow: var(--hx-shadow-float); }
.hx-btn-white { background: var(--hx-white); color: var(--hx-navy-800); }
.hx-btn-white:hover { background: var(--hx-teal-100); transform: translateY(-1px); box-shadow: var(--hx-shadow-float); }
.hx-btn-ghost { background: transparent; color: var(--hx-white); border-color: rgba(255,255,255,.35); }
.hx-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.hx-btn-outline { background: transparent; color: var(--hx-navy-800); border-color: var(--hx-slate-300); }
.hx-btn-outline:hover { border-color: var(--hx-navy-600); color: var(--hx-navy-700); }
.hx-btn-sm { padding: 9px 18px; font-size: var(--hx-size-sm); }
.hx-btn-block { width: 100%; }

/* ---------- Nav ---------- */
.hx-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hx-nav.hx-nav-scrolled { border-bottom-color: var(--hx-slate-100); box-shadow: 0 1px 0 rgba(6,39,68,.02); }
.hx-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.hx-nav-logo { display: flex; align-items: center; }
.hx-nav-logo img { height: 30px; width: auto; }
.hx-nav-links { display: flex; align-items: center; gap: 32px; }
.hx-nav-links a {
  font-size: var(--hx-size-sm); font-weight: 600; color: var(--hx-slate-700);
  transition: color .15s ease;
}
.hx-nav-links a:hover { color: var(--hx-navy-800); }
.hx-nav-actions { display: flex; align-items: center; gap: 12px; }
.hx-nav-login { font-size: var(--hx-size-sm); font-weight: 600; color: var(--hx-navy-800); padding: 10px 8px; }
.hx-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hx-nav-mobile { display: none; }

@media (max-width: 900px) {
  .hx-nav-links { display: none; }
  .hx-nav-toggle { display: flex; }
  /* The mobile menu already has its own "Log in" button — the top bar only
     needs the primary CTA + hamburger, or "Log in" wraps and crowds them
     at narrow widths. */
  .hx-nav-login { display: none; }
  .hx-nav-mobile.hx-open {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 24px 20px; border-top: 1px solid var(--hx-slate-100);
    background: var(--hx-white);
  }
  .hx-nav-mobile a { padding: 12px 4px; font-weight: 600; color: var(--hx-slate-700); border-bottom: 1px solid var(--hx-slate-100); }
  .hx-nav-mobile .hx-nav-mobile-ctas { display: flex; gap: 10px; padding-top: 14px; }
}

/* ---------- Hero ---------- */
.hx-hero {
  position: relative;
  background: var(--hx-navy-900);
  overflow: hidden;
  padding: 88px 0 0;
}
.hx-hero-glow {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
}
.hx-hero-glow-1 { width: 620px; height: 620px; right: -180px; top: -220px; background: radial-gradient(circle, rgba(18,194,206,.35), transparent 70%); }
.hx-hero-glow-2 { width: 500px; height: 500px; left: -160px; bottom: -240px; background: radial-gradient(circle, rgba(46,127,196,.28), transparent 70%); }
.hx-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-bottom: 64px; }
.hx-hero h1 { color: var(--hx-white); font-size: 52px; margin-bottom: 20px; }
.hx-hero .hx-eyebrow { color: var(--hx-teal-300); }
.hx-hero .hx-eyebrow::before { background: var(--hx-teal-300); }
.hx-hero p.hx-lede { color: var(--hx-slate-300); font-size: 18px; max-width: 480px; margin-bottom: 32px; }
.hx-hero-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.hx-hero-note { color: var(--hx-slate-400); font-size: var(--hx-size-sm); }
.hx-hero-note strong { color: var(--hx-teal-300); font-weight: 600; }

@media (max-width: 980px) {
  .hx-hero-inner { grid-template-columns: 1fr; padding-bottom: 40px; }
  .hx-hero h1 { font-size: 38px; }
  .hx-hero p.hx-lede { max-width: none; }
}

/* ---------- Product preview mock (Bridge dashboard) ---------- */
.hx-mock {
  background: var(--hx-white);
  border-radius: var(--hx-radius-app);
  box-shadow: var(--hx-shadow-float);
  overflow: hidden;
  transform: rotate(1deg);
}
.hx-mock-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: var(--hx-border); }
.hx-mock-bar-title { font-family: var(--hx-font-display); font-weight: 700; font-size: 15px; color: var(--hx-navy-900); }
.hx-mock-bar-sub { font-size: 12px; color: var(--hx-slate-400); margin-top: 2px; }
.hx-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hx-slate-100); }
.hx-mock-stat { background: var(--hx-white); padding: 16px 18px; }
.hx-mock-stat-label { font-size: 11px; color: var(--hx-slate-400); text-transform: uppercase; letter-spacing: var(--hx-tracking-label); margin-bottom: 6px; }
.hx-mock-stat-value { font-family: var(--hx-font-display); font-weight: 700; font-size: 18px; color: var(--hx-navy-900); }
.hx-mock-stat-value span { font-size: 12px; color: var(--hx-slate-400); font-weight: 500; font-family: var(--hx-font-sans); }
.hx-mock-rows { padding: 6px 0 14px; }
.hx-mock-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; }
.hx-mock-row + .hx-mock-row { border-top: 1px solid var(--hx-slate-100); }
.hx-mock-row-name { font-size: 13.5px; font-weight: 600; color: var(--hx-navy-900); }
.hx-mock-row-sub { font-size: 11.5px; color: var(--hx-slate-400); margin-top: 2px; }
.hx-mock-row-right { text-align: right; }
.hx-mock-heading {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--hx-radius-pill);
}
.hx-mock-heading::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.hx-mock-heading.on-course { background: var(--hx-on-course-tint); color: var(--hx-on-course-text); }
.hx-mock-heading.on-course::before { background: var(--hx-on-course); }
.hx-mock-heading.drifting { background: var(--hx-drifting-tint); color: var(--hx-drifting-text); }
.hx-mock-heading.drifting::before { background: var(--hx-drifting); }
.hx-mock-heading.off-course { background: var(--hx-off-course-tint); color: var(--hx-off-course-text); }
.hx-mock-heading.off-course::before { background: var(--hx-off-course); }
.hx-mock-row-amount { font-size: 13px; font-weight: 600; color: var(--hx-navy-900); margin-top: 4px; }
.hx-mock-caption { text-align: center; font-size: 12px; color: var(--hx-slate-400); margin-top: 18px; }

@media (max-width: 980px) { .hx-mock { transform: none; } }

/* ---------- Pillars (Steer / Plan / Deliver) ---------- */
.hx-pillars { background: var(--hx-mist); }
.hx-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.hx-pillar {
  background: var(--hx-white); border-radius: var(--hx-radius-card); border: var(--hx-border);
  padding: 32px 28px;
}
.hx-pillar-icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--hx-gradient);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.hx-pillar-icon svg { width: 24px; height: 24px; stroke: var(--hx-white); }
.hx-pillar h3 { margin-bottom: 8px; }
.hx-pillar-word { font-family: var(--hx-font-display); font-weight: 700; font-size: 13px; letter-spacing: var(--hx-tracking-label); text-transform: uppercase; color: var(--hx-teal-800); margin-bottom: 10px; display: block; }
.hx-pillar ul { list-style: none; margin: 16px 0 0; padding: 0; }
.hx-pillar li { display: flex; gap: 10px; font-size: var(--hx-size-sm); color: var(--hx-slate-600); padding: 6px 0; }
.hx-pillar li svg { flex-shrink: 0; width: 16px; height: 16px; stroke: var(--hx-teal-800); margin-top: 2px; }

@media (max-width: 900px) { .hx-pillar-grid { grid-template-columns: 1fr; } }

/* ---------- Feature grid ---------- */
.hx-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.hx-feature {
  border: var(--hx-border); border-radius: var(--hx-radius-card); padding: 26px 22px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hx-feature:hover { box-shadow: var(--hx-shadow-float); transform: translateY(-2px); border-color: transparent; }
.hx-feature-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--hx-teal-100);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.hx-feature-icon svg { width: 20px; height: 20px; stroke: var(--hx-teal-800); }
.hx-feature h4 { margin-bottom: 6px; }
.hx-feature p { font-size: var(--hx-size-sm); margin-bottom: 0; }

@media (max-width: 980px) { .hx-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hx-feature-grid { grid-template-columns: 1fr; } }

/* ---------- How it works ---------- */
.hx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 48px; counter-reset: hx-step; }
.hx-step { position: relative; padding-left: 4px; }
.hx-step-num {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--hx-navy-800);
  color: var(--hx-navy-800); font-family: var(--hx-font-display); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.hx-step h4 { margin-bottom: 6px; }
.hx-step p { font-size: var(--hx-size-sm); margin-bottom: 0; }
@media (max-width: 900px) { .hx-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hx-steps { grid-template-columns: 1fr; } }

/* ---------- Trust / security band ---------- */
.hx-trust { background: var(--hx-navy-900); color: var(--hx-white); }
.hx-trust h2 { color: var(--hx-white); }
.hx-trust .hx-eyebrow { color: var(--hx-teal-300); }
.hx-trust .hx-eyebrow::before { background: var(--hx-teal-300); }
.hx-trust > .hx-container > p { color: var(--hx-slate-300); max-width: 640px; }
.hx-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.hx-trust-item { border: 1px solid rgba(255,255,255,.12); border-radius: var(--hx-radius-card); padding: 24px 20px; background: rgba(255,255,255,.03); }
.hx-trust-item svg { width: 22px; height: 22px; stroke: var(--hx-teal-300); margin-bottom: 14px; }
.hx-trust-item h4 { color: var(--hx-white); margin-bottom: 6px; font-size: 15px; }
.hx-trust-item p { color: var(--hx-slate-400); font-size: 13.5px; margin-bottom: 0; }
@media (max-width: 900px) { .hx-trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hx-trust-grid { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.hx-price-region {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--hx-white); border: var(--hx-border); border-radius: var(--hx-radius-pill);
  padding: 8px 8px 8px 16px; font-size: var(--hx-size-sm); color: var(--hx-slate-600); margin: 0 auto 40px;
}
.hx-price-region select {
  border: 1px solid var(--hx-slate-300); border-radius: var(--hx-radius-pill);
  padding: 6px 14px; font-family: var(--hx-font-sans); font-size: var(--hx-size-sm); font-weight: 600;
  color: var(--hx-navy-800); background: var(--hx-white); cursor: pointer;
}
.hx-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; max-width: 920px; margin: 0 auto; }
.hx-price-card {
  border: var(--hx-border); border-radius: var(--hx-radius-card); padding: 34px 28px;
  background: var(--hx-white); display: flex; flex-direction: column;
}
.hx-price-card.hx-featured {
  border: 2px solid transparent;
  background: linear-gradient(var(--hx-white), var(--hx-white)) padding-box, var(--hx-gradient) border-box;
  box-shadow: var(--hx-shadow-float);
  position: relative;
}
.hx-price-badge {
  position: absolute; top: -13px; left: 28px; background: var(--hx-navy-800); color: var(--hx-white);
  font-size: 11px; font-weight: 700; letter-spacing: var(--hx-tracking-label); text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--hx-radius-pill);
}
.hx-price-name { font-family: var(--hx-font-display); font-weight: 700; font-size: 19px; color: var(--hx-navy-900); margin-bottom: 6px; }
.hx-price-desc { font-size: var(--hx-size-sm); color: var(--hx-slate-600); margin-bottom: 22px; min-height: 40px; }
.hx-price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.hx-price-amount .hx-amount { font-family: var(--hx-font-display); font-weight: 700; font-size: 40px; color: var(--hx-navy-900); }
.hx-price-amount .hx-period { font-size: var(--hx-size-sm); color: var(--hx-slate-400); }
.hx-price-billed { font-size: 12.5px; color: var(--hx-slate-400); margin-bottom: 24px; }
.hx-price-features { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.hx-price-features li { display: flex; gap: 10px; font-size: var(--hx-size-sm); color: var(--hx-slate-700); padding: 8px 0; border-top: 1px solid var(--hx-slate-100); }
.hx-price-features li:first-child { border-top: none; }
.hx-price-features li svg { flex-shrink: 0; width: 16px; height: 16px; stroke: var(--hx-on-course); margin-top: 2px; }
.hx-price-empty { text-align: center; padding: 60px 20px; color: var(--hx-slate-500); border: 1px dashed var(--hx-slate-300); border-radius: var(--hx-radius-card); max-width: 560px; margin: 0 auto; }

.hx-trial-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--hx-teal-100); color: var(--hx-teal-800); border-radius: var(--hx-radius-pill);
  padding: 10px 22px; font-size: var(--hx-size-sm); font-weight: 600; max-width: fit-content; margin: 0 auto 32px;
}
.hx-trial-banner svg { width: 16px; height: 16px; stroke: var(--hx-teal-800); }

.hx-faq { max-width: 760px; margin: 48px auto 0; }
.hx-faq details { border-bottom: 1px solid var(--hx-slate-100); padding: 18px 0; }
.hx-faq summary { cursor: pointer; font-weight: 600; color: var(--hx-navy-900); font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hx-faq summary::-webkit-details-marker { display: none; }
.hx-faq summary::after { content: "+"; font-size: 22px; color: var(--hx-slate-400); font-weight: 400; transition: transform .2s ease; flex-shrink: 0; }
.hx-faq details[open] summary::after { transform: rotate(45deg); }
.hx-faq p { margin: 12px 0 0; font-size: var(--hx-size-sm); }

/* ---------- CTA banner ---------- */
.hx-cta { background: var(--hx-navy-900); text-align: center; padding: 80px 0; position: relative; overflow: hidden; }
.hx-cta::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hx-gradient); opacity: .14; pointer-events: none;
}
.hx-cta > .hx-container { position: relative; z-index: 1; }
.hx-cta h2 { color: var(--hx-white); }
.hx-cta p { color: rgba(255,255,255,.75); font-size: 17px; max-width: 480px; margin: 0 auto 32px; }
.hx-cta-ctas { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.hx-footer { background: var(--hx-navy-900); color: var(--hx-slate-400); padding: 64px 0 32px; }
.hx-footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hx-footer-brand img { height: 26px; margin-bottom: 14px; }
.hx-footer-brand p { color: var(--hx-slate-400); font-size: var(--hx-size-sm); max-width: 300px; margin-bottom: 0; }
.hx-footer-cols { display: flex; gap: 64px; }
.hx-footer-col h5 { color: var(--hx-white); font-family: var(--hx-font-sans); font-size: 12px; font-weight: 600; letter-spacing: var(--hx-tracking-label); text-transform: uppercase; margin: 0 0 16px; }
.hx-footer-col a { display: block; font-size: var(--hx-size-sm); color: var(--hx-slate-400); padding: 6px 0; transition: color .15s ease; }
.hx-footer-col a:hover { color: var(--hx-white); }
.hx-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 12.5px; flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) { .hx-footer-top, .hx-footer-cols { flex-direction: column; gap: 32px; } }