@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url("inter-latin.woff2") format("woff2")}
/* Portal-inspired ribbon atmosphere and clear brand focal points. Specific
   selectors also override page-local explorer styles without shifting nodes. */
body .hv-light {
  background: radial-gradient(ellipse at 65% 0%, #dbf6ef, transparent 65%), #eef6f5;
}
body .hv-light .hv-glass {
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 24px 60px -20px rgba(11,31,51,.18), inset 0 1px 0 #fff;
}
body .hv-core, body .hv-story-art .hv-core {
  width: 90px; height: 90px; border-radius: 26px;
  background: linear-gradient(135deg, #183c4a, #061b2b);
  border: 1px solid rgba(110,235,212,.6);
  box-shadow: 0 0 50px rgba(0,199,163,.22), inset 0 1px 0 rgba(255,255,255,.15);
}
body .hv-core img, body .hv-story-art .hv-core img {
  width: 62px; height: 62px; object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,199,163,.25));
}
body .hv-explorer-brand img { width: 40px; height: 40px; }
body .hv-hero { isolation: isolate; }
body .hv-hero::after {
  content: ''; position: absolute; inset: 0 0 0 48%; z-index: 0;
  pointer-events: none; opacity: .28;
  background: url('auth-ribbons.svg') center / cover no-repeat;
  mask-image: linear-gradient(to right, transparent, black 35%);
}
@media(max-width:760px) {
  body .hv-hero::after { inset: 35% -30% 0 0; opacity: .18; }
}
@media(max-width:560px) {
  body .hv-core, body .hv-story-art .hv-core { width: 72px; height: 72px; border-radius: 22px; }
  body .hv-core img, body .hv-story-art .hv-core img { width: 50px; height: 50px; }
}
/* ==========================================================================
   HAVEIO CANONICAL PUBLIC DESIGN SYSTEM
   One shared stylesheet for every public page: tokens, reset, container
   widths, typography scale, buttons, glass, navigation, footer, the
   section-joint transition system, and atmosphere helpers (blooms, dot
   matrices, rings/arcs). Page-specific composition (hero layouts, unique
   visuals, page-only components) stays local to each page's own <style>
   block and should build on these tokens rather than redefining them.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ---- Haveio palette (exact brand values) ---- */
  --hv-deep: #06121f;
  --hv-navy: #0b1f33;
  --hv-teal: #00c7a3;
  --hv-teal-bright: #6eebd4;
  --hv-emerald: #00866f;
  --hv-coral: #ff6b4a;
  --hv-cloud: #f8fafc;
  --hv-surface: #eef6f5;    /* shared portal mint surface */
  --hv-surface-b: #eef6f5;

  --hv-ink: #0b1f33;
  --hv-ink-muted: rgba(11,31,51,.62);
  --hv-on-dark: #f8fafc;
  --hv-on-dark-muted: rgba(248,250,252,.68);
  --hv-border-dark: rgba(248,250,252,.14);
  --hv-border-light: rgba(11,31,51,.10);

  --hv-radius-lg: 28px;
  --hv-radius-md: 18px;
  --hv-radius-sm: 12px;
  --hv-max: 1200px;
  --hv-pad: max(24px, calc((100vw - var(--hv-max)) / 2));
  --hv-ease: cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--hv-deep);
  color: var(--hv-on-dark);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
h1, h2, h3, h4 { margin: 0; letter-spacing: -.03em; text-wrap: pretty; font-weight: 800; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--hv-teal); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- Shared containers ---- */
.hv-wrap { width: 100%; max-width: var(--hv-max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.hv-section { position: relative; padding: clamp(64px, 8vw, 108px) var(--hv-pad); }
.hv-eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hv-teal-bright); margin-bottom: 16px; }
.hv-section.hv-light .hv-eyebrow { color: var(--hv-emerald); }

/* ---- Canonical light surface — frosted cool tint, never pure white ---- */
.hv-light {
  background:
    var(--hv-light-atmo, radial-gradient(60% 55% at 82% 6%, rgba(0,199,163,.07), transparent 70%)),
    radial-gradient(46% 40% at 6% 100%, rgba(11,31,51,.035), transparent 72%),
    linear-gradient(180deg, var(--hv-surface) 0%, var(--hv-surface-b) 100%);
  color: var(--hv-ink);
}

/* ---- Glass surface: use for hierarchy (nav, forms, key visuals, panels) ---- */
.hv-glass {
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid var(--hv-border-dark);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  border-radius: var(--hv-radius-lg);
}
.hv-light .hv-glass, .hv-glass.hv-glass--light {
  background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 24px 60px rgba(11,31,51,.08), inset 0 1px 0 #fff;
}

/* ---- Buttons ---- */
.hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 22px; border-radius: 14px; font-weight: 750; font-size: .93rem; white-space: nowrap; transition: transform .22s var(--hv-ease), box-shadow .22s var(--hv-ease), border-color .22s var(--hv-ease), background .22s var(--hv-ease); }
.hv-btn-primary { background: linear-gradient(135deg, var(--hv-teal-bright), var(--hv-teal)); color: #052623; box-shadow: 0 14px 34px rgba(0,199,163,.24), inset 0 1px 0 rgba(255,255,255,.4); }
.hv-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0,199,163,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.hv-btn-ghost { border: 1px solid var(--hv-border-dark); background: rgba(255,255,255,.05); color: var(--hv-on-dark); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.hv-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.hv-btn-dark { background: var(--hv-navy); color: var(--hv-cloud); }
.hv-btn-dark:hover { transform: translateY(-2px); }

/* ==========================================================================
   NAVIGATION — one floating glass bar, identical markup/CSS on every page
   ========================================================================== */
.hv-nav {
  position: fixed; z-index: 200; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1160px, calc(100% - 28px));
  display: flex; align-items: center; gap: 20px;
  height: 60px; padding: 0 10px 0 16px;
  border-radius: 17px;
  background: rgba(6,18,31,.78);
  border: 1px solid rgba(150,230,214,.14);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 16px 44px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.09);
}
.hv-nav-logo { display: flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.hv-nav-logo img { display: block; height: 22px; width: auto; max-height: 22px; }
.hv-nav-links { display: flex; align-items: center; gap: 26px; margin: 0 auto; }
.hv-nav-links a { font-size: 13.5px; font-weight: 600; color: rgba(220,232,234,.92); white-space: nowrap; transition: color .18s ease; }
.hv-nav-links a:hover { color: var(--hv-teal-bright); }
.hv-nav-links a[aria-current="page"] { color: var(--hv-teal-bright); }
.hv-nav-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.hv-nav-signin { font-size: 13px; font-weight: 650; color: rgba(220,232,234,.86); white-space: nowrap; }
.hv-nav-signin:hover { color: var(--hv-teal-bright); }
.hv-nav-cta { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 11px; background: linear-gradient(135deg, var(--hv-teal-bright), var(--hv-teal)); color: #052623; font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 22px rgba(0,199,163,.22), inset 0 1px 0 rgba(255,255,255,.4); }

@media (max-width: 980px) {
  .hv-nav-links { gap: 16px; }
  .hv-nav-links a { font-size: 12.5px; }
}
@media (max-width: 820px) {
  .hv-nav { height: 56px; gap: 10px; padding: 0 8px 0 14px; }
  .hv-nav-links, .hv-nav-signin { display: none; }
  .hv-nav-actions { margin-left: auto; }
  .hv-nav-logo img { height: 19px; max-height: 19px; }
  .hv-nav-cta { padding: 9px 13px; font-size: 12px; }
}

/* ---- Mobile nav toggle + dropdown menu — same glass treatment as
   .hv-nav itself, so opening it feels like part of the bar, not a
   generic overlay. The toggle only exists to restore, on narrow
   viewports, the links/sign-in that .hv-nav-links/.hv-nav-signin hide
   above — never remove primary nav access below 820px again. ---- */
.hv-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  cursor: pointer;
}
.hv-nav-toggle-bars, .hv-nav-toggle-bars::before, .hv-nav-toggle-bars::after {
  display: block; width: 16px; height: 2px; border-radius: 2px;
  background: var(--hv-on-dark);
  transition: transform .22s var(--hv-ease), opacity .22s var(--hv-ease), background .22s var(--hv-ease);
}
.hv-nav-toggle-bars { position: relative; }
.hv-nav-toggle-bars::before, .hv-nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.hv-nav-toggle-bars::before { top: -5px; }
.hv-nav-toggle-bars::after { top: 5px; }
.hv-nav-toggle[aria-expanded="true"] .hv-nav-toggle-bars { background: transparent; }
.hv-nav-toggle[aria-expanded="true"] .hv-nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.hv-nav-toggle[aria-expanded="true"] .hv-nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

.hv-mobile-menu {
  display: none;
  position: fixed; z-index: 199; top: 78px; left: 50%; transform: translateX(-50%);
  width: min(1160px, calc(100% - 28px));
  flex-direction: column; gap: 2px;
  padding: 10px;
  border-radius: 17px;
  background: rgba(6,18,31,.94);
  border: 1px solid rgba(150,230,214,.16);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 20px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09);
}
.hv-mobile-menu.is-open { display: flex; }
.hv-mobile-menu a {
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 650;
  color: rgba(220,232,234,.92);
  transition: background .18s ease, color .18s ease;
}
.hv-mobile-menu a:hover { background: rgba(255,255,255,.06); color: var(--hv-teal-bright); }
.hv-mobile-menu a[aria-current="page"] { color: var(--hv-teal-bright); background: rgba(255,255,255,.05); }
.hv-mobile-menu .hv-mobile-cta {
  margin-top: 6px; text-align: center;
  background: linear-gradient(135deg, var(--hv-teal-bright), var(--hv-teal));
  color: #052623; font-weight: 800;
}
.hv-mobile-menu .hv-mobile-cta:hover { color: #052623; }

@media (max-width: 820px) {
  .hv-nav-toggle { display: inline-flex; width:44px; height:44px; flex:none; }
  .hv-mobile-menu { max-height:calc(100dvh - 90px); overflow-y:auto; }
}

/* ==========================================================================
   ATMOSPHERE — reusable decoration primitives. Compose differently per
   page (position/size/opacity) rather than repeating one fixed layout.
   ========================================================================== */
.hv-atmo-fixed { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--hv-deep); }
.hv-dotgrid { position: absolute; opacity: .3; background-image: radial-gradient(rgba(140,214,204,.9) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse, #000, transparent 72%); mask-image: radial-gradient(ellipse, #000, transparent 72%); pointer-events: none; z-index: 1; }
.hv-light .hv-dotgrid { background-image: radial-gradient(rgba(0,134,111,.5) 1px, transparent 1.4px); }
.hv-ring { position: absolute; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; pointer-events: none; z-index: 1; }
.hv-light .hv-ring { border-color: rgba(11,31,51,.08); }
.hv-arc { position: absolute; border: 1px solid rgba(110,235,212,.22); border-radius: 50%; pointer-events: none; z-index: 1; }

@keyframes hv-drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}
.hv-bloom { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); animation: hv-drift 36s var(--hv-ease) infinite; }
.hv-bloom--slow { animation-duration: 46s; }
.hv-bloom--teal { background: radial-gradient(circle at 34% 30%, rgba(110,235,212,.45), rgba(0,134,111,.12) 46%, transparent 72%); }
.hv-bloom--coral { background: radial-gradient(circle, rgba(255,107,74,.24), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .hv-bloom { animation: none; } }

/* ==========================================================================
   SECTION JOINTS — the shared transition system.
   A .hv-joint is a real, normal-flow block sitting BETWEEN two <section>
   elements (a sibling of both, nested in neither). It is the boundary
   itself, not a decoration overlaid near one: its own background is the
   PRECEDING section's colour, and a smooth SVG surface curve rises from
   the bottom in the FOLLOWING section's colour, with a translucent teal
   glass wash and a faint edge highlight layered above it. Because it
   occupies real height in the flow, it can never look detached or float
   free of the sections it joins — no padding coordination needed. Vary
   the <path d=""> per instance for a unique, non-cloned curve.
   ========================================================================== */
.hv-joint { position: relative; display: block; width: 100%; margin: 0; height: clamp(64px, 7vw, 112px); overflow: hidden; line-height: 0; font-size: 0; background: var(--hv-joint-a, var(--hv-deep)); }
/* The svg is intentionally sized 2px taller than its box and shifted -1px,
   bleeding 1px past both the top and bottom edge. This is the fix for the
   sub-pixel seam that sub-pixel SVG rasterisation can otherwise leave at
   the exact boundary where the curve meets the next section's flat
   background (a well-known cross-browser antialiasing artifact, not a
   colour mismatch). display:block + vertical-align:bottom removes the
   separate inline-replaced-element gap some engines add below an <svg>. */
.hv-joint svg { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: calc(100% + 2px); display: block; vertical-align: bottom; }
.hv-joint .hv-j-glass { fill: var(--hv-joint-glass, rgba(0,199,163,.15)); opacity: .9; }
.hv-joint .hv-j-surface { fill: var(--hv-joint-b, var(--hv-cloud)); }
.hv-joint .hv-j-edge { fill: none; stroke: var(--hv-joint-edge, rgba(255,255,255,.5)); stroke-width: 1.6; }

/* ---- Dark<->dark seamless blend: no curve, just an atmospheric gradient
   fade so the exact boundary pixel can't be located. .hv-blend-down goes
   on the section BEFORE a boundary and fades its own bottom edge toward
   --hv-blend-to, which must equal the FOLLOWING section's own flat base
   colour — at the shared edge the fade reaches 100% of that colour, and
   the following section (left with a plain, edge-adjacent-glow-free
   background — see below) is already exactly that colour, so the two
   meet with nothing left to see. Use ONE-SIDED blends only: do NOT also
   add .hv-blend-up to the section on the other side of the SAME boundary
   — a blend-up starts at full strength of --hv-blend-from exactly where
   the preceding blend-down has already arrived at the target colour,
   which is a step backwards, not a continuation, and reintroduces a hard
   edge (proven by pixel-sampling: a lone blend-down measured clean, the
   double-sided version measured a 30+ delta spike at the exact seam).
   .hv-blend-up exists for the rarer case where only the LATER section can
   carry the transition (nothing to attach a blend-down to on the earlier
   side) — never pair both on one boundary. IMPORTANT: never give the
   section on either side of a blended boundary its own separate
   atmospheric glow/radial positioned at or near that same edge (e.g.
   `at 50% -10%` right at a section's own top, or a --hv-light-atmo glow
   at `0%`/`100%` right next to a .hv-joint) — that creates a NEW hard
   "glow starts here" seam layered on top of an otherwise-fixed colour
   match. Keep edge-adjacent backgrounds flat/glow-free and put decorative
   glows inset at least ~15-18% away from any boundary, mid-section. ---- */
.hv-blend-down { position: relative; }
.hv-blend-down::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--hv-blend-depth, 280px);
  background: linear-gradient(180deg, transparent 0%, var(--hv-blend-to, transparent) 100%);
  pointer-events: none; z-index: 1;
}
.hv-blend-up { position: relative; }
.hv-blend-up::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: var(--hv-blend-depth, 280px);
  background: linear-gradient(180deg, var(--hv-blend-from, transparent) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}

/* ==========================================================================
   FOOTER — identical on every page
   ========================================================================== */
.hv-footer {
  position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 100%), var(--hv-deep);
}
/* top kept well inside the footer's own box (not bleeding above it) so
   .hv-footer's overflow:hidden never creates a hard "glow clip line"
   exactly at the section boundary above — the same seam bug class as an
   edge-positioned section radial, just via clipping instead of opacity. */
.hv-footer-glow { position: absolute; width: 460px; height: 260px; right: -8%; top: 60px; background: radial-gradient(circle, rgba(0,199,163,.12), transparent 70%); pointer-events: none; }
.hv-footer-main { position: relative; max-width: var(--hv-max); margin: 0 auto; padding: 56px 24px 42px; display: grid; grid-template-columns: 1.3fr .85fr .85fr .85fr; gap: 40px; }
.hv-footer-brand img { height: 26px; width: auto; }
.hv-footer-brand p { margin-top: 18px; font-size: 1.1rem; font-weight: 750; letter-spacing: -.02em; }
.hv-footer-brand small { display: block; margin-top: 6px; font-size: .8rem; color: rgba(248,250,252,.5); }
.hv-footer-col b { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--hv-teal-bright); margin-bottom: 13px; }
.hv-footer-col a { display: block; margin-bottom: 10px; font-size: .87rem; color: rgba(248,250,252,.68); }
.hv-footer-col a:hover { color: var(--hv-cloud); }
.hv-footer-bottom { position: relative; max-width: var(--hv-max); margin: 0 auto; padding: 18px 24px 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255,255,255,.07); font-size: .74rem; color: rgba(248,250,252,.45); }

@media (max-width: 820px) {
  .hv-footer-main { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .hv-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .hv-footer-main { grid-template-columns: 1fr 1fr; }
}

/* Keyboard access and comfortable targets. */
.hv-skip-link { position:fixed; top:8px; left:24px; z-index:100; padding:12px 18px; border-radius:8px; background:var(--hv-cloud); color:var(--hv-ink); transform:translateY(-160%); }
.hv-skip-link:focus { transform:none; }
#main-content:focus { outline:none; }
.hv-nav-toggle { min-width:44px; min-height:44px; }
.hv-mobile-menu a { min-height:44px; }
.hv-btn:active { filter:brightness(.94); }
button:disabled { cursor:wait; opacity:.7; }
.hv-field input,.hv-field select,.hv-field textarea { font-size:1rem; }
@media (prefers-reduced-motion:reduce) { [data-reveal] { opacity:1!important; filter:none!important; transform:none!important; } }

.hv-footer-col > a { min-height: 30px; display: flex; align-items: center; }