/* ============================================================
   KAIROS HALO — homepage theme
   Cinematic gold-on-black "universe" landing page.
   (Separate from styles.css, which themes the Custom Websites world.)
   ============================================================ */
:root {
  --h-black: #080604;
  --h-black-2: #100c07;
  --h-panel: #140f09;
  --h-gold: #d9a441;
  --h-gold-bright: #ffcf5c;
  --h-gold-deep: #b07d24;
  --h-text: #ece4d4;
  --h-muted: #9c9080;
  --h-muted-dim: #6d6355;
  --h-line: rgba(217, 164, 65, 0.22);
  --h-line-strong: rgba(217, 164, 65, 0.45);
  --serif: 'Cinzel', Georgia, serif;
  --disp: 'Rajdhani', 'Inter', sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--h-black);
  color: var(--h-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.h-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.h-eyebrow {
  font-family: var(--disp);
  color: var(--h-gold);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.h-eyebrow::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--h-gold);
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 4px;
}
.accent-gold { color: var(--h-gold); }

/* Section framing lines like the reference (thin gold border boxes) */
.framed {
  border: 1px solid var(--h-line);
  position: relative;
}

/* ---------- Buttons ---------- */
.h-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--disp);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  padding: 14px 30px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--h-gold);
  color: var(--h-gold);
  background: transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
/* light-sweep glint on hover */
.h-btn > * { position: relative; z-index: 1; }
.h-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 224, 0.45), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .h-btn:hover::after { transition: left 0.6s ease; left: 150%; }
}
.h-btn:hover {
  background: var(--h-gold);
  color: #14100a;
  box-shadow: 0 0 22px rgba(217, 164, 65, 0.5);
}
.h-btn--solid {
  background: linear-gradient(180deg, var(--h-gold-bright), var(--h-gold-deep));
  color: #14100a;
  border-color: var(--h-gold-bright);
}
.h-btn--solid:hover { box-shadow: 0 0 26px rgba(255, 207, 92, 0.6); color: #14100a; }
.h-arrow { font-size: 1.1em; line-height: 1; }

/* ============================================================
   HEADER
   ============================================================ */
.h-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
}
.h-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  padding-bottom: 26px;
  gap: 24px;
}
.h-brand { display: flex; align-items: center; gap: 12px; }
.h-brand .peg { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(217,164,65,0.5)); }
.h-brand-text { display: flex; flex-direction: column; line-height: 1; }
.h-brand-name { font-family: var(--serif); color: var(--h-gold); font-size: 1.35rem; letter-spacing: 0.3em; }
.h-brand-sub { font-family: var(--disp); color: var(--h-muted); font-size: 0.58rem; letter-spacing: 0.5em; margin-top: 5px; }

.h-nav { display: flex; gap: 34px; margin-left: auto; margin-right: 12px; }
.h-nav a {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--h-text);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.h-nav a:hover, .h-nav a.active { color: var(--h-gold); border-color: var(--h-gold); }

.h-nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.h-nav-toggle span { width: 24px; height: 2px; background: var(--h-gold); border-radius: 2px; }

/* ============================================================
   HERO
   ============================================================ */
.h-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 0 90px;
  overflow: hidden;
}
/* Real gold cityscape hero background (user render) with readability vignette */
.h-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(125% 105% at 50% 44%, transparent 44%, rgba(7, 5, 4, 0.5) 80%, #070504 100%),
    linear-gradient(180deg, rgba(8, 6, 4, 0.82) 0%, rgba(8, 6, 4, 0.26) 26%, rgba(8, 6, 4, 0.12) 50%, rgba(7, 5, 4, 0.7) 86%, #070504 100%),
    radial-gradient(40% 38% at 50% 40%, rgba(255, 198, 92, 0.13), transparent 66%),
    url("assets/city-hero.webp") center 42% / cover no-repeat,
    #070504;
}
/* the render already provides skyline, floor grid, and focal point */
.h-hero-grid { display: none; }

/* warm gold light-sweep that ripples across the skyline (see LIVING CITY below) */
.h-hero-bg::before {
  content: '';
  position: absolute;
  inset: -20% -40%;
  z-index: 1;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 205, 120, 0.06) 46%,
    rgba(255, 218, 140, 0.16) 50%,
    rgba(255, 205, 120, 0.06) 54%,
    transparent 62%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}
/* soft breathing glow over the focal point, so the city core feels lit */
.h-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(38% 34% at 50% 42%, rgba(255, 198, 92, 0.14), transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}

.h-hero-inner { position: relative; z-index: 2; }

/* --halo-glow drives the disk shadow, accent ring, and radiant glow so the
   whole portal shifts colour together as the "living halo" cycles (see kairos-halo.js) */
.h-halo {
  position: relative;
  width: min(520px, 86vw);
  aspect-ratio: 1;
  margin: 0 auto;
  z-index: 2;
  --halo-glow: 255, 200, 110;
}
/* detailed portal disk ring, centred on the Pegasus */
.h-halo-disk {
  position: absolute;
  left: 50%; top: 50%;
  width: 112%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  object-fit: cover;
  mix-blend-mode: screen;
  /* hollow centre so the ring floats and the city shows through the open portal */
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 43%, #000 60%, rgba(0,0,0,0.4) 68%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 30%, #000 43%, #000 60%, rgba(0,0,0,0.4) 68%, transparent 76%);
  /* --halo-hue / --halo-sat tint the shared gold master disk to each colour */
  filter: hue-rotate(var(--halo-hue, 0deg)) saturate(var(--halo-sat, 1)) drop-shadow(0 0 48px rgba(var(--halo-glow), 0.5));
  z-index: 0;
  pointer-events: none;
  /* crossfade + glow shift when the colour changes */
  transition: opacity 1.4s ease, filter 1.4s ease;
}
/* dark, empty core so the halo reads as an open portal into the city depths */
.h-halo::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 80%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* layered depth: near-black void at the very centre easing out to the city */
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, 0.92) 4%, rgba(1, 1, 1, 0.72) 22%, rgba(2, 2, 2, 0.34) 40%, transparent 58%);
  z-index: -1;
  pointer-events: none;
  transition: background 1.4s ease;
}
/* the Pegasus mark, centred inside the ring (wordmark is now live text below) */
.h-halo-mark {
  position: absolute;
  left: 50%; top: 50%;
  width: 66%; height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  /* warm glow + tight dark edge so the gold mark stays crisp on the city */
  filter:
    drop-shadow(0 0 42px rgba(255, 207, 92, 0.45))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 6px rgba(0, 0, 0, 0.7));
}
/* live gold wordmark below the portal — correct, selectable, translatable text */
.h-wordmark {
  position: relative;
  margin: -1% 0 0;
  text-align: center;
  line-height: 0.92;
  z-index: 2;
}
/* soft dark pool so the wordmark lifts off the city */
.h-wordmark::before {
  content: '';
  position: absolute;
  left: 50%; top: 52%;
  width: 116%; height: 210%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(4, 3, 2, 0.88), rgba(4, 3, 2, 0.42) 54%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}
.h-wordmark-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 9vw, 5.1rem);
  letter-spacing: 0.1em;
  /* brushed-gold fill */
  background: linear-gradient(180deg, #fdecb4 0%, #eabf5c 34%, #c08a26 60%, #f6dd94 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 24px rgba(255, 207, 92, 0.32));
}
.h-wordmark-halo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin-top: 0.42em;
  padding-left: 0.6em; /* balance the trailing letter-spacing */
  font-family: var(--disp);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 3.4vw, 1.55rem);
  letter-spacing: 0.6em;
  color: var(--h-gold-bright);
  text-shadow: 0 0 16px rgba(255, 207, 92, 0.4), 0 2px 10px rgba(0, 0, 0, 0.7);
}
.h-wordmark-halo i {
  height: 1px;
  width: clamp(26px, 8vw, 64px);
  background: linear-gradient(90deg, transparent, var(--h-gold));
}
.h-wordmark-halo i:last-child { background: linear-gradient(90deg, var(--h-gold), transparent); }
.h-halo-sub {
  font-family: var(--disp);
  text-transform: uppercase;
  /* fluid so the wide-tracked eyebrow never overflows a narrow phone */
  letter-spacing: clamp(0.14em, 1vw, 0.32em);
  font-size: clamp(0.62rem, 3.2vw, 0.95rem);
  color: var(--h-gold-bright);
  margin-top: 4px;
  text-shadow: 0 0 20px rgba(255, 207, 92, 0.4);
}
.h-hero-tagline { color: var(--h-muted); font-size: 1rem; max-width: 440px; margin: 26px auto 30px; line-height: 1.7; }

.h-hero-index {
  position: absolute;
  left: 40px; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--h-muted);
}
.h-hero-index .num { font-family: var(--disp); font-size: 1rem; letter-spacing: 0.2em; color: var(--h-gold); }
.h-hero-index .dots { display: flex; flex-direction: column; gap: 8px; }
.h-hero-index .dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--h-muted-dim); }
.h-hero-index .dots span:first-child { background: var(--h-gold); }

/* ============================================================
   CHOOSE YOUR PATH
   ============================================================ */
.h-section { padding: 84px 0; position: relative; }
.h-paths { background: var(--h-black); }
.h-paths-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 46px;
}
.h-title {
  font-family: var(--disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
}
.h-paths-head p { color: var(--h-muted); font-size: 0.98rem; max-width: 420px; }

.h-path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.h-path-card {
  background: linear-gradient(180deg, rgba(30, 22, 12, 0.6), rgba(12, 9, 5, 0.6));
  border: 1px solid var(--h-line);
  border-radius: 6px;
  padding: 34px 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.h-path-card:hover {
  transform: translateY(-6px);
  border-color: var(--h-line-strong);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 24px rgba(217, 164, 65, 0.12);
}
.h-path-ico {
  width: 66px; height: 66px;
  border-radius: 8px;
  border: 1px solid var(--h-line);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
  background: radial-gradient(circle at 50% 40%, rgba(255,207,92,0.14), transparent 70%);
}
.h-path-ico svg { width: 34px; height: 34px; fill: none; stroke: var(--h-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(217,164,65,0.5)); }
.h-path-card h3 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--h-gold);
  margin-bottom: 12px;
}
.h-path-card p { color: var(--h-muted); font-size: 0.86rem; margin-bottom: 22px; flex: 1; }
.h-path-link {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--h-gold);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.h-path-link:hover { color: var(--h-gold-bright); }

/* whole card is clickable: stretch the path link across the card
   (the link stays the real, keyboard-focusable target) */
.h-path-card { cursor: pointer; }
.h-path-link::after,
.h-locked--link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* keep keyboard focus visible on the card, not just the small link */
.h-path-link:focus-visible,
.h-locked--link:focus-visible { outline: none; }
.h-path-card:focus-within {
  border-color: var(--h-line-strong);
  box-shadow: 0 0 0 2px var(--h-gold), 0 20px 44px rgba(0, 0, 0, 0.6);
}

.h-path-card--locked { opacity: 0.72; }
.h-path-card--locked h3, .h-path-card--locked .h-path-ico svg { color: var(--h-muted); stroke: var(--h-muted); }
.h-locked { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--h-muted-dim); display: inline-flex; align-items: center; gap: 8px; }
.h-locked--link { transition: color 0.15s; }
.h-locked--link:hover { color: var(--h-gold); }

/* angular tech-panel corner brackets (top-left + bottom-right) */
.h-path-card::before, .h-path-card::after,
.sol-get-card::before, .sol-get-card::after,
.sol-detail-card::before, .sol-detail-card::after,
.sol-process-box::before, .sol-process-box::after,
.sol-cta-box::before, .sol-cta-box::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.h-path-card::before,
.sol-get-card::before,
.sol-detail-card::before,
.sol-process-box::before,
.sol-cta-box::before {
  top: 9px; left: 9px;
  border-top: 1px solid var(--h-gold);
  border-left: 1px solid var(--h-gold);
}
.h-path-card::after,
.sol-get-card::after,
.sol-detail-card::after,
.sol-process-box::after,
.sol-cta-box::after {
  bottom: 9px; right: 9px;
  border-bottom: 1px solid var(--h-gold);
  border-right: 1px solid var(--h-gold);
}
.h-path-card:hover::before, .h-path-card:hover::after,
.sol-get-card:hover::before, .sol-get-card:hover::after,
.sol-detail-card:hover::before, .sol-detail-card:hover::after {
  opacity: 1;
}
.sol-process-box::before, .sol-process-box::after,
.sol-cta-box::before, .sol-cta-box::after {
  width: 20px; height: 20px;
  opacity: 0.75;
}

/* venture status badges */
.h-status {
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.25);
}
.h-status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}
.h-status--active { color: #58cf88; }
.h-status--dev { color: var(--h-gold-bright); }
.h-status--research { color: #b6ad9d; }
.h-status--locked { color: var(--h-muted); }

/* ============================================================
   ABOUT
   ============================================================ */
.h-about { background: var(--h-black-2); }
.h-about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.h-about-copy .h-title { margin-bottom: 24px; }
.h-about-copy p { color: var(--h-muted); font-size: 1rem; margin-bottom: 30px; max-width: 440px; }
/* right-side pedestal/halo visual (swap for a real render later) */
.h-about-visual {
  position: relative;
  min-height: 380px;
  border-radius: 8px;
  border: 1px solid var(--h-line);
  background:
    radial-gradient(50% 46% at 50% 50%, rgba(var(--halo-glow), 0.14), transparent 68%),
    linear-gradient(160deg, #17110a, #0a0705);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* follows the living-halo colour (set by kairos-halo.js); gold until then */
  --halo-glow: 255, 200, 110;
}
/* portal disk behind the pegasus — hollow ring, colour-driven glow */
.h-about-disk {
  position: absolute;
  left: 50%; top: 50%;
  width: min(340px, 88%); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 43%, #000 60%, rgba(0,0,0,0.4) 68%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 30%, #000 43%, #000 60%, rgba(0,0,0,0.4) 68%, transparent 76%);
  filter: hue-rotate(var(--halo-hue, 0deg)) saturate(var(--halo-sat, 1)) drop-shadow(0 0 34px rgba(var(--halo-glow), 0.45));
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.4s ease, filter 1.4s ease;
}
/* dark, empty core so the About portal reads like the hero */
.h-about-visual::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: min(240px, 62%); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.92) 4%, rgba(1,1,1,0.7) 22%, rgba(2,2,2,0.32) 40%, transparent 58%);
  z-index: 0;
  pointer-events: none;
}
.h-about-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(200px, 52%);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(255, 207, 92, 0.5)) drop-shadow(0 1px 2px rgba(0,0,0,0.85));
}

/* ============================================================
   CURRENT WORLD
   ============================================================ */
.h-current { background: var(--h-black); }
.h-current-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 52px; align-items: center; }
.h-current-copy h2 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--h-gold);
  margin-bottom: 18px;
}
.h-current-copy p { color: var(--h-muted); font-size: 1rem; margin-bottom: 28px; max-width: 340px; }

/* device cluster (stylized; swap for a real render later) */
.h-devices { position: relative; min-height: 300px; }
.h-devices::before {
  content: '';
  position: absolute;
  left: 46%; top: 50%;
  width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255, 190, 80, 0.10), transparent 58%),
    radial-gradient(closest-side, transparent 58%, rgba(217, 164, 65, 0.22) 60%, transparent 63%),
    radial-gradient(closest-side, transparent 74%, rgba(217, 164, 65, 0.13) 76%, transparent 79%);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 94%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 94%);
  z-index: 0;
  pointer-events: none;
}
.h-devices .h-dev-laptop { position: relative; z-index: 1; }
.h-devices .h-dev-phone { z-index: 2; }
.h-dev-laptop {
  width: 82%;
  border: 3px solid #2a2015;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 26px 50px rgba(0,0,0,0.6);
}
.h-dev-laptop::after {
  content: '';
  display: block;
  height: 12px;
  background: #1a140d;
  border-radius: 0 0 10px 10px;
  margin: 0 -3px;
}
.h-dev-screen {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(13, 9, 5, 0.94) 0%, rgba(13, 9, 5, 0.5) 32%, rgba(13, 9, 5, 0.1) 56%, transparent 70%),
    url("assets/city-screen.webp") center / cover no-repeat,
    #0c0805;
  padding: 22px;
  display: flex; flex-direction: column; justify-content: center;
}
.h-dev-screen > * { position: relative; z-index: 1; }
.h-dev-screen .brand-mini { font-family: var(--serif); color: var(--h-gold); font-size: 0.6rem; letter-spacing: 0.3em; margin-bottom: 14px; }
.h-dev-screen h4 { font-family: var(--serif); color: var(--h-text); font-size: 1.2rem; line-height: 1.1; margin-bottom: 8px; }
.h-dev-screen .line { height: 4px; width: 60%; background: rgba(236,228,212,0.2); border-radius: 3px; margin-bottom: 6px; }
.h-dev-screen .line.short { width: 42%; }
.h-dev-screen .chip { margin-top: 12px; align-self: flex-start; background: var(--h-gold); color: #14100a; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 2px; }
.h-dev-phone {
  position: absolute;
  right: 0; bottom: 0;
  width: 74px;
  border: 3px solid #2a2015;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(0,0,0,0.7);
}
.h-dev-phone .h-dev-screen { aspect-ratio: 9 / 17; padding: 12px; }
.h-dev-phone h4 { font-size: 0.6rem; }

/* ============================================================
   UPCOMING WORLDS
   ============================================================ */
.h-upcoming { background: var(--h-black-2); }
.h-upcoming-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.h-carousel-btns { display: flex; gap: 12px; }
.h-carousel-btns button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--h-line-strong);
  background: transparent;
  color: var(--h-gold);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.h-carousel-btns button:hover { background: rgba(217,164,65,0.12); box-shadow: 0 0 18px rgba(217,164,65,0.3); }
.h-upcoming-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-upcoming-card {
  border: 1px solid var(--h-line);
  border-radius: 8px;
  min-height: 210px;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(217,164,65,0.08), transparent 70%),
    linear-gradient(160deg, #140f09, #0a0705);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 30px;
}
.h-upcoming-lock {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--h-line-strong);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.h-upcoming-lock svg { width: 24px; height: 24px; fill: none; stroke: var(--h-gold); stroke-width: 1.6; }
.h-upcoming-card .soon { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; color: var(--h-gold); }
.h-upcoming-card .desc { color: var(--h-muted); font-size: 0.82rem; }

/* ============================================================
   VENTURE (WORLD) LANDING PAGES
   ============================================================ */
.h-venture-hero {
  position: relative;
  text-align: center;
  padding: 160px 0 90px;
  overflow: hidden;
}
.h-vhero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 4, 0.88) 0%, rgba(8, 6, 4, 0.8) 48%, rgba(8, 6, 4, 0.96) 100%),
    radial-gradient(58% 60% at 50% 28%, rgba(255, 190, 80, 0.15), transparent 66%),
    url("assets/city-screen.webp") center bottom / cover no-repeat,
    #0a0805;
}
.h-vhero-bg::after {
  content: '';
  position: absolute;
  left: 50%; top: 150px;
  width: 460px; height: 460px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 207, 92, 0.16), transparent 70%);
  filter: blur(6px);
}
.h-vhero-inner { position: relative; z-index: 2; }

/* venture pillars (3-up feature cards) */
.h-tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .h-tri-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
.h-venture-hero .h-status { position: static; display: inline-flex; margin: 0 auto 20px; }
.h-venture-name {
  font-family: var(--disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  color: var(--h-text);
}
.h-venture-tag {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--h-gold-bright);
  font-size: 0.9rem;
  margin-top: 14px;
}
.h-venture-mission { color: var(--h-muted); font-size: 1.05rem; max-width: 640px; margin: 24px auto 34px; line-height: 1.8; }
.h-venture-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.h-collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; }
.h-collection {
  border: 1px solid var(--h-line);
  border-radius: 8px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(30, 22, 12, 0.5), rgba(12, 9, 5, 0.5));
  display: flex; align-items: center; gap: 16px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.h-collection:hover { border-color: var(--h-line-strong); transform: translateY(-3px); box-shadow: 0 0 22px rgba(217, 164, 65, 0.12); }
.h-collection .num { font-family: var(--serif); color: var(--h-gold); font-size: 1.05rem; min-width: 26px; }
.h-collection .t { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.92rem; color: var(--h-text); }
@media (max-width: 900px) { .h-collection-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .h-collection-grid { grid-template-columns: 1fr; } }

/* ============================================================
   JOIN THE HALO
   ============================================================ */
.h-join { background: var(--h-black); position: relative; }
.h-join-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  border-top: 1px solid var(--h-line);
  border-bottom: 1px solid var(--h-line);
  padding: 54px 0;
}
.h-join-copy h2 { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin-bottom: 8px; }
.h-join-copy p { color: var(--h-muted); }
.h-join-form { display: flex; gap: 0; min-width: 320px; flex: 1; max-width: 460px; }
.h-join-form input {
  flex: 1;
  background: var(--h-panel);
  border: 1px solid var(--h-line-strong);
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: var(--h-text);
  padding: 15px 18px;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.h-join-form input::placeholder { color: var(--h-muted-dim); }
.h-join-form input:focus { outline: none; border-color: var(--h-gold); }
.h-join-form button { border-radius: 0 4px 4px 0; border-left: none; white-space: nowrap; }
.h-join-note { flex-basis: 100%; text-align: center; color: var(--h-gold); font-size: 0.85rem; min-height: 1em; opacity: 0; transition: opacity 0.2s; }
.h-join-note.show { opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.h-footer { background: var(--h-black-2); padding-top: 56px; }
.h-footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; padding-bottom: 40px; }
.h-footer-brand .h-brand { margin-bottom: 16px; }
.h-footer-tag { color: var(--h-muted); font-size: 0.9rem; line-height: 1.7; }
.h-footer-col h4 { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--h-gold); margin-bottom: 16px; }
.h-footer-col a { display: block; color: var(--h-muted); font-size: 0.88rem; margin-bottom: 10px; transition: color 0.15s; }
.h-footer-col a:hover { color: var(--h-gold); }
.h-socials { display: flex; gap: 12px; }
.h-socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--h-line);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.h-socials a:hover { border-color: var(--h-gold); box-shadow: 0 0 16px rgba(217,164,65,0.3); }
.h-socials svg { width: 17px; height: 17px; fill: none; stroke: var(--h-gold); stroke-width: 1.6; }
.h-footer-bottom { border-top: 1px solid var(--h-line); padding: 22px 0; text-align: center; }
.h-footer-bottom .h-container { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.h-footer-bottom span { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--h-muted-dim); }
.h-footer-admin { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--h-muted-dim); text-decoration: none; transition: color .15s; }
.h-footer-admin:hover { color: var(--h-gold); }

/* ============================================================
   SOLUTIONS PAGE — Custom Websites (Digital Solutions world)
   Shares the homepage design system (kairos-halo.css tokens & header/footer).
   ============================================================ */
/* Solid header variant for interior pages (non-hero top) */
.h-header--solid {
  position: sticky;
  background: rgba(8, 6, 4, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--h-line);
}

/* ---------- Breadcrumb ---------- */
.sol-crumbs { border-bottom: 1px solid var(--h-line); background: rgba(0, 0, 0, 0.35); }
.sol-crumbs-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
}
.sol-crumbs a { color: var(--h-muted); transition: color 0.15s; }
.sol-crumbs a:hover { color: var(--h-gold); }
.sol-crumbs .sep { color: var(--h-muted-dim); }
.sol-crumbs .cur { color: var(--h-gold); }

/* ---------- Hero ---------- */
.sol-hero { position: relative; overflow: hidden; padding: 74px 0 84px; }
.sol-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 4, 0.9) 0%, rgba(8, 6, 4, 0.82) 52%, rgba(8, 6, 4, 0.95) 100%),
    radial-gradient(52% 60% at 78% 42%, rgba(255, 190, 80, 0.18), transparent 66%),
    url("assets/city-screen.webp") center bottom / cover no-repeat,
    #0a0805;
}
.sol-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 54px; align-items: center;
}
.sol-h1 {
  font-family: var(--disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: 20px;
}
.sol-h1 .g { display: block; color: var(--h-gold); }
.sol-hero-text { color: var(--h-muted); font-size: 1rem; max-width: 430px; margin-bottom: 36px; }

.sol-features { list-style: none; display: flex; flex-wrap: wrap; gap: 26px 30px; }
.sol-feature { display: flex; flex-direction: column; align-items: center; text-align: center; width: 86px; gap: 12px; }
.sol-feature svg {
  width: 30px; height: 30px;
  fill: none; stroke: var(--h-gold); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(217, 164, 65, 0.5));
}
.sol-feature span {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--h-muted);
  line-height: 1.35;
}

/* ---------- Hero device mockup (stylized; swap for a real render later) ---------- */
.sol-hero-visual { position: relative; display: flex; justify-content: center; }
/* soft glow behind the device cluster */
.sol-hero-visual::before {
  content: '';
  position: absolute;
  left: 50%; top: 46%;
  width: 128%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 80, 0.12), transparent 60%);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 94%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 94%);
  z-index: 0;
  pointer-events: none;
}
.sol-device { position: relative; z-index: 1; width: min(480px, 100%); padding-bottom: 34px; }
.sol-laptop {
  border: 3px solid #2b2115;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 34px 66px rgba(0, 0, 0, 0.6);
}
.sol-laptop::after {
  content: ''; display: block; height: 15px;
  background: linear-gradient(180deg, #1c150d, #120d07);
  border-radius: 0 0 14px 14px; margin: 0 -3px;
}
.sol-screen {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(13, 9, 5, 0.94) 0%, rgba(13, 9, 5, 0.55) 34%, rgba(13, 9, 5, 0.12) 58%, transparent 72%),
    url("assets/city-screen.webp") center / cover no-repeat,
    #0c0805;
  padding: 22px 26px;
  display: flex; flex-direction: column;
}
.sol-screen > * { position: relative; z-index: 1; }
.sol-screen-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.sol-screen-brand { font-family: var(--serif); color: var(--h-gold); font-size: 0.6rem; letter-spacing: 0.24em; margin-right: auto; }
.sol-screen-links { font-family: var(--disp); color: rgba(236, 228, 212, 0.75); font-size: 0.5rem; letter-spacing: 0.14em; }
.sol-screen-menu { width: 22px; height: 12px; border: 1px solid rgba(236, 228, 212, 0.5); border-radius: 2px; }
.sol-screen-body { margin-top: auto; }
.sol-screen-body h3 { font-family: var(--serif); color: var(--h-text); font-size: 1.3rem; line-height: 1.12; margin-bottom: 8px; }
.sol-screen-body p { color: rgba(236, 228, 212, 0.7); font-size: 0.62rem; letter-spacing: 0.02em; margin-bottom: 14px; font-style: italic; }
.sol-screen-btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--h-gold-bright), var(--h-gold-deep));
  color: #14100a;
  font-family: var(--disp); font-weight: 700;
  font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 2px;
}
.sol-phone {
  position: absolute; left: -6px; bottom: 0;
  width: 108px;
  border: 3px solid #2b2115;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.7);
}
.sol-phone-screen {
  aspect-ratio: 9 / 17;
  background:
    radial-gradient(70% 60% at 60% 40%, rgba(255, 190, 80, 0.3), transparent 60%),
    linear-gradient(150deg, #241a0d, #0c0805);
  padding: 12px; display: flex; flex-direction: column;
}
.sol-phone-nav { display: flex; align-items: center; justify-content: space-between; }
.sol-phone-menu { width: 12px; height: 8px; border: 1px solid rgba(236, 228, 212, 0.5); border-radius: 1px; }
.sol-phone-body { margin-top: auto; }
.sol-phone-body h4 { font-family: var(--serif); color: var(--h-text); font-size: 0.66rem; line-height: 1.15; margin-bottom: 6px; }
.sol-phone-body p { color: rgba(236, 228, 212, 0.7); font-size: 0.4rem; font-style: italic; margin-bottom: 8px; }
.sol-phone-body .sol-screen-btn { font-size: 0.4rem; padding: 4px 8px; }

/* ---------- Centered section heads ---------- */
.sol-center-head { text-align: center; margin-bottom: 48px; }
.sol-center-head .h-eyebrow { display: inline-block; }
.sol-center-head .h-title { max-width: 760px; margin: 0 auto; }

/* ---------- What You Get ---------- */
.sol-get-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sol-get-card {
  border: 1px solid var(--h-line);
  border-radius: 6px;
  padding: 34px 18px 30px;
  text-align: center;
  background: linear-gradient(180deg, rgba(28, 21, 12, 0.55), rgba(11, 8, 5, 0.55));
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}
.sol-get-card:hover {
  transform: translateY(-6px);
  border-color: var(--h-line-strong);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 22px rgba(217, 164, 65, 0.12);
}
.sol-get-ico { margin: 0 auto 20px; width: 40px; height: 40px; }
.sol-get-ico svg { width: 40px; height: 40px; fill: none; stroke: var(--h-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(217, 164, 65, 0.45)); }
.sol-get-card h3 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--h-gold);
  margin-bottom: 10px;
}
.sol-get-card p { color: var(--h-muted); font-size: 0.8rem; line-height: 1.55; }

/* ---------- Design Process ---------- */
.sol-process-box {
  position: relative;
  border: 1px solid var(--h-line);
  border-radius: 12px;
  padding: 54px 40px 46px;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(217, 164, 65, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(18, 13, 8, 0.6), rgba(9, 7, 5, 0.6));
}
.sol-process-title {
  font-family: var(--disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--h-gold);
  text-align: center;
  margin-bottom: 46px;
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.sol-process-title::before,
.sol-process-title::after { content: ''; height: 1px; width: 60px; background: var(--h-line-strong); }
.sol-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sol-step { position: relative; text-align: center; padding: 0 6px; }
/* dotted connector + arrow between steps */
.sol-step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 38px; left: -50%; right: 50%;
  border-top: 1px dashed var(--h-line-strong);
}
.sol-step:not(:first-child)::after {
  content: '';
  position: absolute;
  top: 34px; left: calc(50% - 3px);
  width: 7px; height: 7px;
  border-top: 1px solid var(--h-gold);
  border-right: 1px solid var(--h-gold);
  transform: translateX(-50px) rotate(45deg);
}
.sol-step-circle {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid var(--h-line-strong);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 207, 92, 0.14), transparent 70%),
    var(--h-black);
  position: relative; z-index: 1;
}
.sol-step-circle svg { width: 34px; height: 34px; fill: none; stroke: var(--h-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(217, 164, 65, 0.5)); }
.sol-step-n { font-family: var(--disp); color: var(--h-gold); letter-spacing: 0.24em; font-size: 0.9rem; }
.sol-step h4 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--h-text);
  margin: 6px 0 10px;
}
.sol-step p { color: var(--h-muted); font-size: 0.78rem; line-height: 1.5; }

/* ---------- Designed to Deliver Results ---------- */
.sol-results-grid {
  display: grid; grid-template-columns: 1.05fr 0.9fr 1.05fr;
  gap: 40px; align-items: center;
}
.sol-result-list { list-style: none; display: flex; flex-direction: column; gap: 26px; }
.sol-result-list li { display: flex; gap: 16px; align-items: flex-start; }
.sol-result-ico { flex: 0 0 auto; width: 40px; height: 40px; }
.sol-result-ico svg { width: 40px; height: 40px; fill: none; stroke: var(--h-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(217, 164, 65, 0.45)); }
.sol-result-list strong {
  display: block;
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
  color: var(--h-text);
  margin-bottom: 5px;
}
.sol-result-list span { display: block; color: var(--h-muted); font-size: 0.82rem; line-height: 1.5; }

/* concentric glowing orb */
.sol-orb { position: relative; aspect-ratio: 1; width: 100%; max-width: 300px; margin: 0 auto; }
.sol-orb .ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid var(--h-line-strong); }
.sol-orb .r1 { width: 100%; height: 100%; border-color: rgba(217, 164, 65, 0.25); }
.sol-orb .r2 { width: 68%; height: 68%; border-color: rgba(255, 207, 92, 0.5); box-shadow: 0 0 30px rgba(255, 207, 92, 0.35), inset 0 0 22px rgba(255, 207, 92, 0.25); }
.sol-orb .r3 { width: 40%; height: 40%; border-color: rgba(217, 164, 65, 0.3); }
.sol-orb .core { position: absolute; inset: 0; margin: auto; width: 16%; height: 16%; border-radius: 50%; background: radial-gradient(circle, var(--h-gold-bright), var(--h-gold-deep)); box-shadow: 0 0 30px rgba(255, 207, 92, 0.7); }

.sol-results-copy h3 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--h-text);
  margin-bottom: 18px;
}
.sol-results-copy p { color: var(--h-muted); font-size: 1rem; line-height: 1.7; }

/* ---------- CTA banner ---------- */
.sol-cta-box {
  border: 1px solid var(--h-line-strong);
  border-radius: 12px;
  padding: 40px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  background:
    radial-gradient(60% 140% at 90% 50%, rgba(255, 190, 80, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(20, 15, 9, 0.7), rgba(9, 7, 5, 0.7));
}
.sol-cta-text h3 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  color: var(--h-gold);
  margin-bottom: 10px;
}
.sol-cta-text p { color: var(--h-muted); font-size: 0.98rem; max-width: 560px; }
.sol-cta-box .h-btn { flex-shrink: 0; }

/* ---------- Contact page ---------- */
.sol-hero--short { padding: 60px 0 46px; }
.sol-page-head { position: relative; z-index: 2; text-align: center; }
.sol-page-head .h-eyebrow { display: inline-block; }
.sol-hero-text--wide { max-width: 620px; margin-left: auto; margin-right: auto; margin-bottom: 0; }
.sol-page-cta { margin-top: 30px; }
.sol-process-title--left { justify-content: flex-start; text-align: left; margin-bottom: 22px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.sol-process-title--left::before { display: none; }
.sol-process-title--left::after { width: 40px; }

.sol-contact-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 54px; align-items: start; }
.sol-contact-copy > p { color: var(--h-muted); font-size: 0.98rem; margin-bottom: 28px; max-width: 380px; }
.sol-contact-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.sol-contact-list li { display: flex; align-items: center; gap: 14px; color: var(--h-muted); font-size: 0.95rem; }
.sol-contact-list a { color: var(--h-text); transition: color 0.15s; }
.sol-contact-list a:hover { color: var(--h-gold); }
.sol-contact-ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--h-line-strong);
  display: flex; align-items: center; justify-content: center;
}
.sol-contact-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--h-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sol-contact-form {
  border: 1px solid var(--h-line);
  border-radius: 12px;
  padding: 34px;
  background: linear-gradient(180deg, rgba(20, 15, 9, 0.6), rgba(9, 7, 5, 0.6));
}
.sol-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sol-field { display: flex; flex-direction: column; margin-bottom: 18px; }
.sol-field label {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--h-gold);
  margin-bottom: 8px;
}
.sol-field .opt { color: var(--h-muted-dim); font-weight: 500; letter-spacing: 0.06em; }
.sol-field input,
.sol-field select,
.sol-field textarea {
  background: var(--h-panel);
  border: 1px solid var(--h-line-strong);
  border-radius: 4px;
  color: var(--h-text);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 0.92rem;
  width: 100%;
}
.sol-field textarea { resize: vertical; }
.sol-field select { appearance: none; cursor: pointer; }
.sol-field input::placeholder,
.sol-field textarea::placeholder { color: var(--h-muted-dim); }
.sol-field input:focus,
.sol-field select:focus,
.sol-field textarea:focus { outline: none; border-color: var(--h-gold); box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.14); }
.sol-contact-submit { margin-top: 8px; }
.sol-form-note { margin-top: 14px; color: var(--h-gold); font-size: 0.88rem; min-height: 1em; opacity: 0; transition: opacity 0.2s; }
.sol-form-note.show { opacity: 1; }

/* ---------- Services detail cards ---------- */
.sol-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sol-detail-card {
  border: 1px solid var(--h-line);
  border-radius: 8px;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(28, 21, 12, 0.5), rgba(11, 8, 5, 0.5));
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
}
.sol-detail-card:hover {
  transform: translateY(-5px);
  border-color: var(--h-line-strong);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 22px rgba(217, 164, 65, 0.12);
}
.sol-detail-card .svc-icon {
  width: 46px; height: 46px;
  fill: none; stroke: var(--h-gold); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 6px rgba(217, 164, 65, 0.45));
}
.sol-detail-card h3 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--h-gold);
  margin-bottom: 12px;
}
.sol-detail-card > p { color: var(--h-muted); font-size: 0.88rem; line-height: 1.6; margin-bottom: 18px; }
.sol-points { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sol-points li { position: relative; padding-left: 24px; color: var(--h-text); font-size: 0.84rem; }
.sol-points li::before {
  content: ''; position: absolute; left: 2px; top: 4px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--h-gold);
  border-bottom: 2px solid var(--h-gold);
  transform: rotate(-45deg);
}
.sol-detail-card--muted { opacity: 0.82; }
.sol-detail-card--muted h3, .sol-detail-card--muted .svc-icon { color: var(--h-muted); stroke: var(--h-muted); }

/* ---------- Every website includes ---------- */
.sol-incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; margin-top: 44px; }
.sol-incl-item { display: flex; gap: 14px; align-items: flex-start; }
.sol-incl-check {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--h-gold);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(255, 207, 92, 0.12), transparent 70%);
}
.sol-incl-check::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid var(--h-gold);
  border-bottom: 2px solid var(--h-gold);
  transform: rotate(-45deg) translateY(-1px);
}
.sol-incl-item h4 {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.92rem;
  color: var(--h-text);
  margin-bottom: 5px;
}
.sol-incl-item p { color: var(--h-muted); font-size: 0.84rem; line-height: 1.55; }

/* ---------- FAQ accordion ---------- */
.sol-faq-list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sol-faq-item {
  border: 1px solid var(--h-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 15, 9, 0.5), rgba(9, 7, 5, 0.5));
  transition: border-color 0.2s;
}
.sol-faq-item[open] { border-color: var(--h-line-strong); }
.sol-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--h-text);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sol-faq-item summary::-webkit-details-marker { display: none; }
.sol-faq-item summary::after { content: '+'; color: var(--h-gold); font-size: 1.5rem; line-height: 1; transition: transform 0.2s; }
.sol-faq-item[open] summary { color: var(--h-gold); }
.sol-faq-item[open] summary::after { transform: rotate(45deg); }
.sol-faq-item p { padding: 0 24px 22px; color: var(--h-muted); font-size: 0.94rem; line-height: 1.7; }

/* ============================================================
   FAQ PAGE — portal hero, path rings, tabs, accordion, browse
   ============================================================ */
/* path color tokens */
.faq--gold   { --rc: #e6b955; }
.faq--purple { --rc: #a878ff; }
.faq--blue   { --rc: #57a9ff; }
.faq--orange { --rc: #ff9a4d; }
.faq--white  { --rc: #d6dde8; }
.faq--teal   { --rc: #4fd6c9; }

/* reusable glowing ring icon badge */
.faq-ring {
  --sz: 60px;
  width: var(--sz); height: var(--sz);
  border-radius: 50%;
  border: 2px solid var(--rc, var(--h-gold));
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--rc, var(--h-gold)) 20%, transparent), transparent 68%),
    rgba(8, 6, 4, 0.55);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--rc, var(--h-gold)) 50%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--rc, var(--h-gold)) 26%, transparent);
}
.faq-ring svg { width: 46%; height: 46%; fill: none; stroke: var(--rc, var(--h-gold)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faq-ring--sm { --sz: 46px; }
.faq-ring--lg { --sz: 78px; }

/* ---------- Hero ---------- */
.faq-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.faq-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

.faq-portal { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin: 0 auto; --halo-glow: 255, 200, 110; }
.faq-portal-img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen;
  filter: hue-rotate(var(--halo-hue, 0deg)) saturate(var(--halo-sat, 1)) drop-shadow(0 0 42px rgba(var(--halo-glow), 0.45));
  position: relative; z-index: 1;
  /* hollow ring so the portal centre reads as an open, dark opening */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 44%, #000 60%, rgba(0,0,0,0.4) 68%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 44%, #000 60%, rgba(0,0,0,0.4) 68%, transparent 76%);
  transition: opacity 1.4s ease, filter 1.4s ease;
}
/* dark, empty core matching the hero portal */
.faq-portal::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 71%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.9) 6%, rgba(1,1,1,0.62) 26%, rgba(2,2,2,0.28) 44%, transparent 62%);
  z-index: 0;
  pointer-events: none;
}
.faq-portal-glow {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--halo-glow), 0.2), transparent 68%);
  z-index: 0;
}
.faq-portal-base {
  position: absolute; left: 50%; bottom: 1%;
  width: 58%; height: 8%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 207, 92, 0.55), transparent 75%);
  filter: blur(5px);
  z-index: 0;
}
.faq-orbit {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.faq-orbit small {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.56rem;
  color: var(--h-muted);
  text-align: center; line-height: 1.25;
}
.faq-orbit--tl { top: 8%; left: -9%; }
.faq-orbit--bl { bottom: 8%; left: -9%; }
.faq-orbit--tr { top: 8%; right: -11%; }
.faq-orbit--br { bottom: 8%; right: -11%; }

/* ---------- Category tabs ---------- */
.faq-tabs { border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); background: rgba(0, 0, 0, 0.4); }
.faq-tabs-inner { display: flex; gap: 6px; overflow-x: auto; }
.faq-tab {
  flex: 1 0 auto; min-width: 128px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px 18px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.faq-tab > span:last-child {
  font-family: var(--disp);
  text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 0.72rem; font-weight: 600;
  color: var(--h-muted); text-align: center;
  transition: color 0.2s;
}
.faq-tab:hover > span:last-child, .faq-tab.active > span:last-child { color: var(--rc, var(--h-gold)); }
.faq-tab.active { border-color: var(--rc, var(--h-gold)); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rc) 9%, transparent)); }

/* ---------- Accordion (two columns) ---------- */
.faq-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; align-items: start; }
.faq-acc-col { display: flex; flex-direction: column; gap: 14px; }
.faq-q {
  border: 1px solid var(--h-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 15, 9, 0.5), rgba(9, 7, 5, 0.5));
  transition: border-color 0.2s;
}
.faq-q[open] { border-color: var(--h-line-strong); }
.faq-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 17px 20px; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-num { font-family: var(--disp); color: var(--h-gold); font-size: 0.85rem; letter-spacing: 0.1em; min-width: 22px; }
.faq-qt { flex: 1; font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.88rem; font-weight: 600; color: var(--h-text); }
.faq-q summary::after { content: '+'; color: var(--h-gold); font-size: 1.4rem; line-height: 1; }
.faq-q[open] summary::after { content: '\2212'; }
.faq-q[open] .faq-qt { color: var(--h-gold); }
.faq-q p { padding: 0 20px 18px 56px; color: var(--h-muted); font-size: 0.9rem; line-height: 1.65; }
.faq-q p a { color: var(--h-gold); text-decoration: underline; }

/* ---------- Browse by path ---------- */
.faq-browse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 960px; margin: 0 auto; }
.faq-browse-card {
  border: 1px solid var(--h-line);
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(80% 46% at 50% 0%, color-mix(in srgb, var(--rc) 12%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(20, 15, 9, 0.5), rgba(9, 7, 5, 0.5));
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.faq-browse-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--rc) 55%, var(--h-line));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px color-mix(in srgb, var(--rc) 24%, transparent);
}
.faq-browse-card .faq-ring { margin-bottom: 18px; }
/* real disk render as the card's path portal */
.faq-browse-disk { position: relative; width: 132px; height: 132px; margin: 0 auto 16px; }
.faq-browse-disk img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle, #000 58%, rgba(0,0,0,0.4) 70%, transparent 78%);
  mask-image: radial-gradient(circle, #000 58%, rgba(0,0,0,0.4) 70%, transparent 78%);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rc, var(--h-gold)) 45%, transparent));
}
.faq-browse-glyph {
  position: absolute; inset: 0; margin: auto;
  width: 34px; height: 34px;
  fill: none; stroke: var(--rc, var(--h-gold)); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rc, var(--h-gold)) 60%, transparent));
}
.faq-browse-card h3 { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; font-weight: 700; color: var(--rc, var(--h-gold)); margin-bottom: 10px; }
.faq-browse-card p { color: var(--h-muted); font-size: 0.8rem; line-height: 1.55; margin-bottom: 18px; flex: 1; }
.faq-browse-link { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 600; color: var(--rc, var(--h-gold)); display: inline-flex; gap: 8px; align-items: center; }

/* ---------- Still have questions ---------- */
.faq-help {
  border: 1px solid var(--h-line-strong);
  border-radius: 12px;
  padding: 34px 40px;
  display: grid; grid-template-columns: 1.25fr 1.5fr auto;
  gap: 34px; align-items: center;
  background:
    radial-gradient(60% 130% at 100% 50%, rgba(120, 180, 255, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(20, 15, 9, 0.6), rgba(9, 7, 5, 0.6));
}
.faq-help-copy { display: flex; align-items: center; gap: 18px; }
.faq-help-orb {
  width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 34% 30%, #4a5568, #0c0f16 70%);
  box-shadow: 0 0 24px rgba(120, 150, 200, 0.3), inset -6px -6px 12px rgba(0, 0, 0, 0.6);
}
.faq-help-copy h3 { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.15rem; font-weight: 700; color: var(--h-gold); margin-bottom: 6px; }
.faq-help-copy p { color: var(--h-muted); font-size: 0.88rem; }
.faq-help-pillars { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.faq-help-pillars li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.faq-help-pillars strong { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem; color: var(--h-text); }
.faq-help-pillars small { color: var(--h-muted); font-size: 0.72rem; line-height: 1.4; }
.faq-help-btns { display: flex; flex-direction: column; gap: 12px; }
.faq-help-btns .h-btn { white-space: nowrap; justify-content: center; }

/* ---------- Footer additions ---------- */
.faq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rc, var(--h-gold)); margin-right: 10px; box-shadow: 0 0 8px var(--rc, var(--h-gold)); vertical-align: middle; }
.faq-footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1.5fr; }
.faq-footer-connect p { color: var(--h-muted); font-size: 0.86rem; margin-bottom: 14px; }
.faq-footer-connect .h-footer-tag { margin: 0; }
.faq-footer-form { min-width: 0; max-width: 340px; }
.faq-footer-form button { padding-left: 18px; padding-right: 18px; }
.h-footer-brand .h-socials { margin-top: 18px; }

/* ---------- FAQ responsive ---------- */
@media (max-width: 1000px) {
  .faq-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-portal { order: -1; }
  .faq-browse { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
  .faq-help { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .faq-help-copy { justify-content: center; }
  .faq-help-btns { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .faq-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .faq-acc { grid-template-columns: 1fr; }
  .faq-browse { grid-template-columns: 1fr 1fr; }
  .faq-orbit { display: none; }
}
@media (max-width: 520px) {
  .faq-browse { grid-template-columns: 1fr; }
  .faq-footer-inner { grid-template-columns: 1fr; }
  .faq-help-pillars { grid-template-columns: 1fr; }
}

/* ---------- Solutions page responsive ---------- */
@media (max-width: 1000px) {
  .sol-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .sol-hero-visual { order: -1; }
  .sol-get-grid { grid-template-columns: repeat(3, 1fr); }
  .sol-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-incl-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-results-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .sol-result-list { max-width: 460px; margin: 0 auto; text-align: left; }
  .sol-orb { order: -1; }
}
@media (max-width: 900px) {
  .sol-contact-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .sol-steps { grid-template-columns: 1fr 1fr; gap: 30px 14px; }
  .sol-field-row { grid-template-columns: 1fr; gap: 0; }
  .sol-step:not(:first-child)::before,
  .sol-step:not(:first-child)::after { display: none; }
  .sol-process-title::before, .sol-process-title::after { width: 30px; }
  .sol-cta-box { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 560px) {
  .sol-get-grid { grid-template-columns: 1fr 1fr; }
  .sol-detail-grid { grid-template-columns: 1fr; }
  .sol-incl-grid { grid-template-columns: 1fr; }
  .sol-steps { grid-template-columns: 1fr; }
  .sol-features { justify-content: center; }
  .sol-process-box { padding: 40px 22px 34px; }
  .sol-cta-box { padding: 32px 24px; }
}

/* ============================================================
   UX — accessibility, focus, back-to-top, mobile menu
   ============================================================ */
/* visible keyboard focus (mouse clicks stay clean via :focus-visible) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.faq-tab:focus-visible, .h-path-card:focus-within {
  outline: 2px solid var(--h-gold-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

/* skip-to-content link (injected by kairos-halo.js) */
.skip-link {
  position: fixed;
  left: 14px; top: -80px;
  z-index: 200;
  background: var(--h-gold);
  color: #14100a;
  padding: 11px 20px;
  border-radius: 4px;
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 14px; outline: 2px solid #14100a; outline-offset: 2px; }
:where(section, main):focus { outline: none; }

/* back-to-top button (injected by kairos-halo.js) */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--h-gold);
  background: rgba(8, 6, 4, 0.8);
  color: var(--h-gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s, box-shadow 0.2s, color 0.2s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--h-gold); color: #14100a; box-shadow: 0 0 20px rgba(217, 164, 65, 0.5); }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* mobile nav toggle → animated X (driven by aria-expanded) */
.h-nav-toggle span { transition: transform 0.22s ease, opacity 0.22s ease; }
.h-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.h-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* status badge for FAQ browse-by-path cards */
.faq-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--disp);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.56rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 14px;
}
.faq-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.faq-badge--active { color: #58cf88; }
.faq-badge--dev { color: var(--h-gold-bright); }
.faq-badge--research { color: #b6ad9d; }
.faq-badge--locked { color: var(--h-muted-dim); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .to-top { transition: opacity 0.2s ease; }
}

/* ============================================================
   LIVING PORTALS — slow rotation on the disk renders
   (subtle "energized" motion; disabled under reduced motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hz-spin { to { transform: rotate(360deg); } }
  @keyframes hz-spin-c { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
  /* slow "breathing" so the portal feels powered — swells the ring glow */
  @keyframes hz-halo-breathe {
    0%, 100% { filter: hue-rotate(var(--halo-hue, 0deg)) saturate(var(--halo-sat, 1)) drop-shadow(0 0 38px rgba(var(--halo-glow), 0.4)); }
    50%      { filter: hue-rotate(var(--halo-hue, 0deg)) saturate(var(--halo-sat, 1)) drop-shadow(0 0 74px rgba(var(--halo-glow), 0.62)); }
  }
  .h-halo-disk { animation: hz-spin-c 150s linear infinite, hz-halo-breathe 6s ease-in-out infinite; will-change: transform, filter; }
  /* the Pegasus glow breathes in sync with the ring — one living portal
     (dark outline held constant so the letters & mark stay crisp) */
  @keyframes hz-mark-breathe {
    0%, 100% { filter: drop-shadow(0 0 32px rgba(255, 207, 92, 0.4)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.75)); }
    50%      { filter: drop-shadow(0 0 58px rgba(255, 207, 92, 0.6)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.75)); }
  }
  .h-halo-mark { animation: hz-mark-breathe 6s ease-in-out infinite; will-change: filter; }
  .h-about-disk { animation: hz-spin-c 170s linear infinite; will-change: transform; }
  .faq-portal-img { animation: hz-spin 160s linear infinite; will-change: transform; }
  .faq-browse-disk img { animation: hz-spin 120s linear infinite; will-change: transform; }
}

/* ============================================================
   LIVING CITY — the gold skyline breathes and catches light
   (slow drift + a light-sweep rippling across the render;
    disabled under reduced motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* slow "Ken Burns" drift so the cityscape feels alive with depth;
     --px/--py are a live mouse-parallax offset layered in by kairos-halo.js */
  @keyframes hz-city-drift {
    0%   { transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.06); }
    50%  { transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.12) translate(-1.4%, -1%); }
    100% { transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.06); }
  }
  /* a band of warm gold light travelling across the skyline */
  @keyframes hz-city-sweep {
    0%   { transform: translateX(-38%); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(38%); opacity: 0; }
  }
  /* the city core gently pulses, as if the gold is glowing */
  @keyframes hz-city-glow {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
  }
  .h-hero-bg, .h-vhero-bg, .sol-hero-bg {
    animation: hz-city-drift 46s ease-in-out infinite;
    transform-origin: 50% 44%;
    will-change: transform;
  }
  .h-hero-bg::before {
    animation: hz-city-sweep 14s ease-in-out infinite;
    will-change: transform, opacity;
  }
  .h-hero-bg::after {
    animation: hz-city-glow 9s ease-in-out infinite;
    will-change: opacity;
  }
}

/* ============================================================
   SCROLL REVEAL (added by JS; respects reduced motion)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1120px) {
  .h-nav { gap: 20px; margin-right: 8px; }
  .h-nav a { font-size: 0.72rem; letter-spacing: 0.12em; }
  .h-header-inner .h-btn { padding: 12px 18px; letter-spacing: 0.12em; }
  .h-brand .peg { width: 40px; height: 40px; }
}
@media (max-width: 1000px) {
  .h-path-grid { grid-template-columns: repeat(2, 1fr); }
  .h-upcoming-grid { grid-template-columns: 1fr; }
  .h-about-inner, .h-current-inner { grid-template-columns: 1fr; gap: 40px; }
  .h-footer-inner { grid-template-columns: 1fr 1fr; }
  .h-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .h-nav { display: none; position: absolute; top: 78px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--h-black-2); border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); padding: 14px 28px; margin: 0; }
  .h-nav.open { display: flex; }
  .h-nav a { padding: 12px 0; }
  .h-nav-toggle { display: flex; }
  .h-header .h-btn { display: none; }
  .h-hero-index { display: none; }
  .h-paths-head { grid-template-columns: 1fr; gap: 16px; }
  .h-join-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .h-container { padding: 0 20px; }
  .h-path-grid { grid-template-columns: 1fr; }
  .h-footer-inner { grid-template-columns: 1fr; }
}
/* phones: tighten hero rhythm so the tall portal + copy + CTA fit comfortably */
@media (max-width: 560px) {
  .h-hero { padding: 112px 0 74px; }
  .h-hero-tagline { font-size: 0.95rem; margin: 20px auto 26px; }
}
/* lighter glow blur on phones — smoother breathing on lower-powered devices */
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  @keyframes hz-halo-breathe {
    0%, 100% { filter: hue-rotate(var(--halo-hue, 0deg)) saturate(var(--halo-sat, 1)) drop-shadow(0 0 20px rgba(var(--halo-glow), 0.4)); }
    50%      { filter: hue-rotate(var(--halo-hue, 0deg)) saturate(var(--halo-sat, 1)) drop-shadow(0 0 40px rgba(var(--halo-glow), 0.6)); }
  }
}
/* on phones the small device-mockup phone overlaps the laptop text — hide it */
@media (max-width: 640px) {
  .sol-phone, .h-dev-phone { display: none; }
}

/* ============================================================
   FUTURISTIC ENHANCEMENTS
   (cursor spotlight, HUD frame, ember particles, themed scrollbar
    — all motion gated behind prefers-reduced-motion / fine pointer)
   ============================================================ */

/* themed gold scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--h-gold-deep) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0b0805; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--h-gold-deep), var(--h-gold));
  border-radius: 7px; border: 2px solid #0b0805;
}
::-webkit-scrollbar-thumb:hover { background: var(--h-gold-bright); }

/* cursor spotlight — a soft glow that follows the pointer (fine pointers only) */
.cursor-glow {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px), rgba(255, 200, 110, 0.07), transparent 62%);
  opacity: 0; transition: opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) { .cursor-glow.on { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

/* HUD corner brackets framing the viewport (desktop) */
.hud-frame { position: fixed; inset: 15px; z-index: 40; pointer-events: none; }
.hud-frame b {
  position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--h-line-strong); opacity: 0.6;
}
.hud-frame .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud-frame .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hud-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
@media (max-width: 760px) { .hud-frame { display: none; } }

/* ember particle canvas layered into heroes */
.hero-embers {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hero-embers { display: none; } }

/* keep decrypting text on one line so it doesn't reflow while scrambling */
.is-decrypting { white-space: nowrap; }

/* ============================================================
   LANGUAGE SWITCHER (injected into the header by kairos-halo-i18n.js)
   Compact gold-on-black dropdown that matches the site chrome.
   ============================================================ */
.kh-lang { position: relative; flex-shrink: 0; }
.kh-lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--disp);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.74rem; font-weight: 600;
  color: var(--h-text);
  background: rgba(8, 6, 4, 0.4);
  border: 1px solid var(--h-line-strong);
  border-radius: 4px;
  padding: 9px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.kh-lang-btn:hover, .kh-lang-btn[aria-expanded="true"] {
  color: var(--h-gold);
  border-color: var(--h-gold);
  box-shadow: 0 0 16px rgba(217, 164, 65, 0.25);
}
.kh-lang-btn[disabled] { cursor: progress; opacity: 0.7; }
.kh-lang-globe { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kh-lang-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.2s ease; }
.kh-lang-btn[aria-expanded="true"] .kh-lang-caret { transform: rotate(180deg); }
.kh-lang-cur { line-height: 1; }

/* busy: pulse the globe while a translation is in flight */
.kh-lang.is-busy .kh-lang-globe { animation: kh-spin 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes kh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kh-lang.is-busy .kh-lang-globe { animation: none; opacity: 0.5; } }

.kh-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 180px;
  list-style: none; margin: 0; padding: 6px;
  background: linear-gradient(180deg, rgba(24, 18, 10, 0.98), rgba(12, 9, 5, 0.98));
  border: 1px solid var(--h-line-strong);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(217, 164, 65, 0.06);
  z-index: 60;
  backdrop-filter: blur(6px);
}
.kh-lang-menu[hidden] { display: none; }
.kh-lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 5px; cursor: pointer;
  color: var(--h-text); font-size: 0.9rem;
  transition: background 0.12s, color 0.12s;
}
.kh-lang-opt:hover { background: rgba(217, 164, 65, 0.12); color: var(--h-gold-bright); }
.kh-lang-opt[aria-selected="true"] { color: var(--h-gold); }
.kh-lang-opt[aria-selected="true"]::after {
  content: '✓'; font-size: 0.85rem; color: var(--h-gold);
}
.kh-lang-note {
  margin-top: 4px; padding: 8px 12px 4px;
  border-top: 1px solid var(--h-line);
  color: var(--h-muted-dim); font-size: 0.68rem; letter-spacing: 0.02em;
  font-family: var(--sans); text-transform: none;
}

/* RTL languages (Arabic): let the menu open from the other edge */
:root[dir="rtl"] .kh-lang-menu { right: auto; left: 0; }
:root[dir="rtl"] .kh-lang-opt { flex-direction: row-reverse; }

/* Slightly tighter on very small screens; the switcher stays visible next to
   the hamburger even when the CTA button is hidden. */
@media (max-width: 1120px) {
  .kh-lang-btn { padding: 8px 10px; letter-spacing: 0.1em; }
}
@media (max-width: 400px) {
  .kh-lang-btn .kh-lang-cur { display: none; } /* icon-only on the narrowest phones */
  .kh-lang-btn { padding: 9px; }
}