/* ==========================================================================
   kildaris.com shared chrome: the field layer, header, logo, glass, buttons,
   sections, FAQ, call-to-action band, footer, contact modal and the Ask
   Kildaris palette. Home-only layout is in home.css, inner pages in page.css.
   ========================================================================== */

:root {
  --hdr-h: 84px;
  --glass: rgba(12, 14, 22, 0.86);
  --edge: rgba(236, 238, 245, 0.08);
  --edge-2: rgba(236, 238, 245, 0.15);
  --ember: var(--accent-a);
  --ember-hi: #a5f3fc;
  --signal: var(--accent-b);
}

/* Without WebGL the ground still carries the light, just without motion. */
body {
  background:
    radial-gradient(70rem 40rem at 50% -10%, rgba(103, 232, 249, 0.07), transparent 70%),
    radial-gradient(60rem 40rem at 90% 30%, rgba(167, 139, 250, 0.06), transparent 70%),
    var(--bg);
}
.has-field body { background: var(--bg); }

.field-gl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.field-gl.lit { opacity: 1; }
/* No z-index on main: a stacking context there would cut the hero film's
   screen blend off from the field painted underneath. */
main, .ftr { position: relative; }
.hdr { z-index: 80; }

em { font-style: italic; }
kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72em;
  line-height: 1.4;
  padding: 0.05em 0.5em;
  border-radius: 6px;
  border: 1px solid var(--edge-2);
  color: var(--ink);
}

/* --- logo: core + two rings, spaced wordmark ------------------------------ */

.mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.logo { position: relative; width: 24px; height: 24px; flex: none; }
.logo i, .logo b { position: absolute; border-radius: 50%; }
.logo i:first-child { inset: 0; border: 1px solid rgba(167, 139, 250, 0.55); }
.logo i + i { inset: 4px; border: 1.5px solid rgba(103, 232, 249, 0.7); }
.logo b {
  inset: 8.5px;
  background: radial-gradient(circle at 40% 38%, #cffafe, #67e8f9 50%, #a78bfa);
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.7);
}
.word {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  margin-right: -0.46em;
}

/* --- header: a floating glass bar with mega menus ---------------------------
   Desktop: logo, two mega menus plus three links, then search, the 24/7
   status pill and the call button. At 1080px and below the nav becomes a
   full-height sheet with the mega menus as accordions.                     */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; }

.scroll-prog { position: fixed; inset: 0 0 auto; height: 2px; z-index: 90; pointer-events: none; }
.scroll-prog i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
  box-shadow: 0 0 12px var(--accent-a);
  transform: scaleX(0); transform-origin: 0 50%;
}

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--hdr-h);
  padding: 14px var(--gut) 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease-out);
}
.hdr.tuck { transform: translateY(-110%); }
.hdr .bar {
  pointer-events: auto;
  position: relative;
  max-width: 1240px;
  height: 60px;
  margin-inline: auto;
  padding: 0 8px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
              max-width 0.5s var(--ease-out);
}
.hdr.stuck .bar, .hdr:has(.nav-i.open) .bar {
  max-width: 1180px;
  background: rgba(14, 16, 26, 0.7);
  border-color: var(--edge);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
/* A thin light runs along the bottom edge of the bar once it is solid. */
.hdr .bar::after {
  content: "";
  position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-a), var(--accent-b), transparent);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.hdr.stuck .bar::after { opacity: 0.55; }

/* Lander headers reuse the bar with a simple in-page nav. */
.lnav { display: flex; gap: 4px; font-size: 0.9rem; }
.lnav a { color: var(--ink-2); padding: 9px 14px; border-radius: 999px; transition: color 0.2s, background 0.2s; }
.lnav a:hover { color: var(--ink); background: rgba(236, 238, 245, 0.06); }

.nav { display: flex; align-items: center; gap: 2px; font-size: 0.9rem; margin-inline: auto; }
.nav-a, .nav-t {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 14px;
  border: 0; border-radius: 999px; background: none;
  color: var(--ink-2); font: inherit; cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-a:hover, .nav-a[aria-current], .nav-t:hover, .nav-i.open .nav-t, .nav-i.is-cur .nav-t {
  color: var(--ink); background: rgba(236, 238, 245, 0.06);
}
.nav-t .chev { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.3s var(--ease-out); }
.nav-i.open .chev { transform: rotate(180deg); }
.nav-i { position: static; }
.nav-mob { display: none; }

/* Mega panels hang from the bar, centered on it. */
.mega {
  position: absolute; left: 50%; top: calc(100% + 12px);
  width: min(1080px, calc(100vw - 2 * var(--gut)));
  transform: translate(-50%, -8px) scale(0.985);
  transform-origin: top center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.35s var(--ease-out), visibility 0.22s;
}
.mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }   /* hover bridge */
.nav-i.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.mega-in {
  position: relative;
  border-radius: 26px;
  padding: 14px;
  background: rgba(9, 11, 18, 0.975);
  border: 1px solid var(--edge-2);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.95), 0 0 80px -40px rgba(103, 232, 249, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  overflow: hidden;
}
.mega-in::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 80%; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(103, 232, 249, 0.09), transparent 70%);
}
.mega-svc { display: grid; grid-template-columns: 1fr 1fr 300px; gap: 6px; }
.mega-k { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px 6px; margin: 0; }
.mega-it {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 16px;
  transition: background 0.2s var(--ease);
}
.mega-it:hover, .mega-it:focus-visible { background: rgba(236, 238, 245, 0.06); }
.mega-ic {
  width: 38px; height: 38px; padding: 9px; border-radius: 12px;
  color: var(--accent-a);
  background: linear-gradient(140deg, rgba(103, 232, 249, 0.14), rgba(167, 139, 250, 0.1));
  border: 1px solid rgba(165, 243, 252, 0.18);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
}
.mega-it:hover .mega-ic { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 24px -4px rgba(103, 232, 249, 0.6); }
.mega-tx { display: flex; flex-direction: column; min-width: 0; }
.mega-tx b { font-weight: 500; color: var(--ink); font-size: 0.92rem; }
.mega-tx small { color: var(--ink-3); font-size: 0.8rem; line-height: 1.4; }
.mega-pr { font-size: 0.74rem; color: var(--ink-2); white-space: nowrap; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--edge); }
.mega-feat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 22px; border-radius: 20px; min-height: 260px;
  background: radial-gradient(120% 80% at 70% 10%, rgba(103, 232, 249, 0.2), transparent 60%),
              radial-gradient(90% 70% at 10% 100%, rgba(167, 139, 250, 0.22), transparent 60%),
              rgba(236, 238, 245, 0.03);
  border: 1px solid var(--edge-2);
}
.mega-feat b { font-family: var(--display); font-weight: 300; font-size: 1.55rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); }
.mega-feat small { color: var(--ink-2); font-size: 0.86rem; line-height: 1.5; }
.mega-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.86rem; color: var(--accent-a); }
.mega-go .ic { width: 15px; height: 15px; transition: transform 0.3s var(--ease-out); }
.mega-feat:hover .mega-go .ic, .mega-all:hover .mega-go .ic { transform: translateX(4px); }
.mega-orb { position: absolute; top: 22px; right: 22px; width: 76px; height: 76px; }
.mega-orb i, .mega-orb b { position: absolute; border-radius: 50%; }
.mega-orb i:first-child { inset: 0; border: 1px solid rgba(167, 139, 250, 0.5); animation: orbSpin 14s linear infinite; border-top-color: transparent; }
.mega-orb i + i { inset: 12px; border: 1.5px solid rgba(103, 232, 249, 0.6); animation: orbSpin 9s linear infinite reverse; border-left-color: transparent; }
.mega-orb b { inset: 28px; background: radial-gradient(circle at 40% 38%, #cffafe, #67e8f9 50%, #a78bfa); box-shadow: 0 0 30px rgba(103, 232, 249, 0.8); }
@keyframes orbSpin { to { transform: rotate(360deg); } }

.mega-inds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mega-ind {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; font-size: 0.9rem; color: var(--ink-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.mega-ind .ic { width: 20px; height: 20px; color: var(--accent-b); transition: color 0.2s, transform 0.3s var(--ease-out); }
.mega-ind:hover { background: rgba(236, 238, 245, 0.06); color: var(--ink); }
.mega-ind:hover .ic { color: var(--accent-a); transform: scale(1.12); }
.mega-all {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 10px; padding: 16px 18px; border-radius: 16px;
  background: rgba(236, 238, 245, 0.03); border: 1px solid var(--edge);
  font-size: 0.88rem; color: var(--ink-2);
}
.mega-all b { color: var(--ink); font-weight: 500; }
.mega-all .mega-go { margin: 0; white-space: nowrap; }

.hdr-act { display: flex; align-items: center; gap: 6px; }
.ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--edge-2);
  background: rgba(236, 238, 245, 0.04);
  color: var(--ink-2);
  font: 0.86rem var(--sans);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s;
}
.ask-btn:hover { border-color: rgba(165, 243, 252, 0.45); background: rgba(103, 232, 249, 0.08); color: var(--ink); }
.ask-btn .ic { width: 16px; height: 16px; }
.ask-btn kbd { border-radius: 999px; padding: 0.05em 0.6em; }

/* Status pill: a live dot that breathes, and it opens the support pop-up. */
.live {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.07);
  color: #a7f3d0; font: 500 0.8rem var(--sans); letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.live:hover { background: rgba(52, 211, 153, 0.13); border-color: rgba(52, 211, 153, 0.5); }
.live-dot {
  position: relative; display: inline-block; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 10px var(--good);
}
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--good); opacity: 0;
  animation: livePing 2.4s var(--ease-out) infinite;
}
@keyframes livePing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
.hdr-cta { min-height: 42px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  background: rgba(14, 16, 26, 0.5);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1240px) {
  .ask-l { display: none; }
  .nav-a, .nav-t { padding: 0 11px; }
}
@media (max-width: 1080px) {
  :root { --hdr-h: 72px; }
  .hdr { padding-top: 10px; }
  .hdr .bar { height: 56px; padding: 0 6px 0 18px; }
  .hdr.stuck .bar, .hdr.menu-open .bar {
    max-width: none;
    background: rgba(14, 16, 26, 0.78);
    border-color: var(--edge);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
  .nav-toggle { display: flex; }
  .ask-btn kbd { display: none; }
  .ask-btn { width: 42px; padding: 0; justify-content: center; }
  .lnav { display: none; }
  /* Absolute to the bar: the bar's backdrop-filter makes it the containing
     block for fixed children anyway, so anchor to it on purpose. */
  .nav {
    position: absolute;
    top: calc(100% + 8px); left: 0; right: 0;
    max-height: calc(100dvh - var(--hdr-h) - 16px);
    overflow-y: auto; overscroll-behavior: contain;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: 26px;
    background: rgba(9, 11, 18, 0.985);
    border: 1px solid var(--edge-2);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform: translateY(-10px) scale(0.98);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--ease), transform 0.35s var(--ease-out), visibility 0.24s;
  }
  .nav.open { opacity: 1; transform: none; visibility: visible; }
  .nav-a, .nav-t { height: auto; width: 100%; justify-content: space-between; padding: 15px 16px; font-size: 1.08rem; border-radius: 16px; color: var(--ink); }
  .mega {
    position: static; width: auto; transform: none; opacity: 1; visibility: visible;
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out);
  }
  .mega::before { display: none; }
  .nav-i.open .mega { grid-template-rows: 1fr; transform: none; }
  .mega-in { min-height: 0; overflow: hidden; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-i.open .mega-in { padding: 4px 0 10px; }
  .mega-in::before { display: none; }
  .mega-svc { grid-template-columns: 1fr; }
  .mega-feat { min-height: 0; margin-top: 6px; }
  .mega-orb { width: 56px; height: 56px; top: 16px; right: 16px; }
  .mega-orb i + i { inset: 9px; }
  .mega-orb b { inset: 20px; }
  .mega-inds { grid-template-columns: 1fr 1fr; }
  .mega-all { flex-direction: column; align-items: flex-start; }
  .nav-mob { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 6px 6px; margin-top: 8px; border-top: 1px solid var(--edge); }
  .nav-mob .btn { justify-content: center; }
  .nav-mail { text-align: center; color: var(--ink-3); font-size: 0.9rem; }
  html.nav-lock { overflow: hidden; }
}
@media (max-width: 560px) {
  .hdr-cta { display: none; }
  .live { width: 42px; padding: 0; justify-content: center; }
  .live span { display: none; }
  .mega-it { grid-template-columns: 38px 1fr; }
  .mega-pr { display: none; }
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: #f3f5fb;
  --btn-fg: #05060a;
  min-height: 48px;
  padding: 0.85em 1.55em;
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease);
  will-change: transform;
}
.btn:hover {
  background: #fff;
  transform: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 14px 44px -10px rgba(103, 232, 249, 0.55),
              0 0 60px -12px rgba(167, 139, 250, 0.5);
}
.btn.ghost {
  --btn-bg: rgba(236, 238, 245, 0.03);
  --btn-fg: var(--ink);
  border-color: rgba(236, 238, 245, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn.ghost:hover { background: rgba(236, 238, 245, 0.08); border-color: rgba(236, 238, 245, 0.36); box-shadow: none; }
.btn.sm { min-height: 40px; padding: 0.6em 1.1em; font-size: 0.86rem; }
.btn.lg { min-height: 58px; padding: 1em 2em; font-size: 1.02rem; }

/* --- glass + spotlight ------------------------------------------------------
   [data-spot] gets --mx/--my from field.js: a soft light on the surface and
   a brighter one on the edge, both following the pointer.               */

.glass {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(22, 25, 38, 0.55), rgba(12, 14, 22, 0.42));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  isolation: isolate;
}
[data-spot]::before, [data-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
[data-spot]::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(165, 243, 252, 0.08), transparent 60%);
  z-index: -1;
}
[data-spot]::after {
  padding: 1px;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(165, 243, 252, 0.6), rgba(167, 139, 250, 0.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-spot]:hover::before, [data-spot]:hover::after { opacity: 1; }
@media (pointer: coarse) {
  /* No hover on touch: keep a faint edge light where the last touch landed. */
  [data-spot]::after { opacity: 0.35; }
}

[data-tilt] {
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease-out);
  transform-style: preserve-3d;
}

/* --- cursor: dot, trailing gradient ring that becomes a labeled pill, tail ---- */

.cursor { position: fixed; inset: 0; z-index: 300; pointer-events: none; transition: opacity 0.3s; }
.cursor.off { opacity: 0; }
.cursor > * { position: fixed; left: 0; top: 0; will-change: transform; }
.cur-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgba(165, 243, 252, 0.9);
  transition: opacity 0.2s, width 0.25s var(--ease-out), height 0.25s var(--ease-out), margin 0.25s var(--ease-out);
}
.cur-tail {
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.55), transparent 70%);
  mix-blend-mode: screen;
}
.cur-tail:nth-child(2) { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: radial-gradient(circle, rgba(167, 139, 250, 0.4), transparent 70%); }
.cur-tail:nth-child(3) { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: radial-gradient(circle, rgba(240, 171, 252, 0.25), transparent 70%); }
.cur-ring {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 999px;
  /* A gradient hairline: the border is the padding box of a masked gradient. */
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              conic-gradient(from var(--cur-a, 0deg), var(--accent-a), var(--accent-b), var(--accent-c), var(--accent-a)) border-box;
  border: 1.5px solid transparent;
  background-clip: padding-box, border-box;
  opacity: 0.55;
  animation: curSpin 6s linear infinite;
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), margin 0.4s var(--ease-out),
              opacity 0.3s var(--ease), background 0.3s;
}
@property --cur-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes curSpin { to { --cur-a: 360deg; } }
/* Hollow by default: the fill only shows once it turns into a pill. */
.cursor:not(.pill) .cur-ring { background: conic-gradient(from var(--cur-a, 0deg), var(--accent-a), var(--accent-b), var(--accent-c), var(--accent-a)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); border: 0; }
.cur-ring span { font: 500 11px var(--sans); letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; opacity: 0; transform: scale(0.8); transition: opacity 0.2s, transform 0.3s var(--ease-out); }
.cursor.big .cur-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; opacity: 0.9; }
.cursor.pill .cur-ring { width: 96px; height: 34px; margin: 22px 0 0 4px; opacity: 1; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.8), 0 0 24px -6px rgba(103, 232, 249, 0.6); }
.cursor.pill .cur-ring span { opacity: 1; transform: none; }
.cursor.pill .cur-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.cursor.press .cur-ring { transform-origin: center; scale: 0.85; }
.cursor.typing .cur-ring, .cursor.typing .cur-tail { opacity: 0; }
.cursor.typing .cur-dot { opacity: 0; }

/* --- headline reveal: words rise out of a mask ---------------------------- */

/* The mask is padded on every side and pulled back with negative margins, so
   it sits wider than the glyphs (ascenders, accents, descenders and italic
   overhang) while the line boxes and word spacing stay exactly as set. */
.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.2em 0.08em 0.24em;
  margin: -0.2em -0.08em -0.24em;
}
.split .w > span {
  display: inline-block;
  transform: translateY(105%);
  filter: blur(6px);
  opacity: 0;
  transition: transform 1s var(--ease-out), filter 1s var(--ease-out), opacity 0.8s var(--ease);
  transition-delay: calc(var(--d, 0ms) + var(--i) * 55ms);
}
/* Clipped-text gradients break across transformed children, so once split,
   each italic word carries its own copy of the sheen. */
.split em { background: none; animation: none; color: inherit; padding-right: 0; }
.split em .w > span {
  background: linear-gradient(100deg, var(--accent-a) 0%, var(--accent-b) 40%, var(--accent-c) 60%, var(--accent-a) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
  /* background-clip: text only paints inside this box, so it has to reach
     past the glyphs too, or the gradient cuts the tops and tails off. */
  padding: 0.2em 0.1em 0.24em 0.02em;
  margin: -0.2em -0.1em -0.24em -0.02em;
}
.split.in .w > span { transform: none; filter: none; opacity: 1; }
.split[data-reveal] { opacity: 1; transform: none; }
.no-anim .split .w > span { transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; }

[data-reveal] { transform: translateY(26px); filter: blur(4px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); transition-delay: var(--d, 0ms); }
[data-reveal].in { filter: none; }
.no-anim [data-reveal] { filter: none !important; }

/* --- sections --------------------------------------------------------------- */

.sec { padding-block: var(--sec); position: relative; }
.sec.tint { background: none; border: 0; }
/* Every other section sits on a faint band with hairlines, so the page has
   a rhythm instead of one long dark scroll. */
.sec.alt {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(103, 232, 249, 0.05), transparent 70%),
    linear-gradient(180deg, rgba(11, 13, 21, 0.4), rgba(11, 13, 21, 0.72) 20%, rgba(11, 13, 21, 0.72) 80%, rgba(11, 13, 21, 0.4));
  border-block: 1px solid rgba(236, 238, 245, 0.05);
}
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  margin: 0 auto clamp(2.8rem, 6vw, 4.5rem);
  max-width: 56rem;
}
.sec-head h2 { max-width: 18ch; }
.sec-head .lede { max-width: 54ch; font-weight: 300; }
.sec-head .lede a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(103, 232, 249, 0.5); text-underline-offset: 4px; }
.sec-head .lede a:hover { color: #fff; text-decoration-color: var(--accent-a); }

/* Eyebrows are small, quiet, and used sparingly: a glass pill with a dot. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: rgba(236, 238, 245, 0.03);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-2);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-a);
  box-shadow: 0 0 10px var(--accent-a);
}

.tag {
  font-size: 0.74rem;
  color: var(--ink-3);
  padding: 5px 11px;
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  white-space: nowrap;
}

/* --- FAQ --------------------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  border-radius: 18px;
  border: 1px solid var(--edge);
  background: rgba(16, 18, 28, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.faq details[open] { border-color: var(--edge-2); background: rgba(20, 23, 35, 0.55); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 3.4rem 1.25rem 1.5rem;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 350;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute;
  right: 1.5rem; top: 50%;
  width: 13px; height: 1.5px;
  background: var(--ink-2);
  transition: transform 0.35s var(--ease-out), background 0.2s;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover::before, .faq summary:hover::after { background: var(--accent-a); }
.faq .ans { padding: 0 1.5rem 1.4rem; color: var(--ink-2); font-weight: 300; }
.faq .ans p { max-width: 64ch; }
.faq .ans strong { color: var(--ink); font-weight: 500; }

/* --- CTA band --------------------------------------------------------------- */

.band { overflow: hidden; background: none; border: 0; }
.band-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
}
.band-copy { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; max-width: 50rem; }
.band-copy > p:not(.eyebrow) { color: var(--ink-2); font-weight: 300; max-width: 50ch; font-size: var(--step-1); }
.band-mail { font-size: 0.92rem !important; color: var(--ink-3) !important; }
.band-mail a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(236, 238, 245, 0.3); text-underline-offset: 4px; }

/* --- footer ------------------------------------------------------------------ */

.ftr { padding-block: 5rem 2.2rem; border-top: 1px solid var(--edge); background: linear-gradient(180deg, transparent, rgba(3, 4, 7, 0.85) 30%); }
.ftr-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
.ftr-col { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9rem; }
.ftr-col a { color: var(--ink-2); transition: color 0.2s var(--ease); width: fit-content; }
.ftr-col a:hover { color: var(--ink); }
.ftr-col h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}
.ftr-brand p { color: var(--ink-3); font-size: 0.9rem; max-width: 34ch; margin-top: 0.9rem; }
.ftr-big {
  margin-top: 4.5rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.4rem, 15vw, 15rem);
  line-height: 1.05;
  /* The gradient only paints inside the padding box; give the glyphs room. */
  padding-block: 0.22em 0.26em;
  margin-block: calc(4.5rem - 0.22em) -0.38em;
  letter-spacing: -0.04em;
  text-align: center;
  background: linear-gradient(180deg, rgba(236, 238, 245, 0.16), rgba(236, 238, 245, 0.015));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.ftr-btm {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
  font-size: 0.82rem;
  color: var(--ink-4);
}
.ftr-btm a:hover { color: var(--ink-2); }
@media (max-width: 860px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .ftr { padding-top: 3.5rem; }
  .ftr-btm { flex-direction: column; }
}

/* --- floating CTA (phones) --------------------------------------------------- */

.float-cta {
  position: fixed;
  left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 70;
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--ease-out);
}
.float-cta.up { transform: translate(-50%, 0); }
.float-cta .btn { box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.85), 0 0 40px -10px rgba(103, 232, 249, 0.45); }
@media (min-width: 901px) { .float-cta { display: none; } }

/* --- dialogs ---------------------------------------------------------------- */

.modal-back, .ask-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3, 4, 7, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.modal-back.open, .ask-back.open { opacity: 1; visibility: visible; }
.modal-back.open .modal, .ask-back.open .ask { animation: dlgPop 520ms var(--ease-out) both; }
@keyframes dlgPop {
  from { transform: translateY(18px) scale(0.97); opacity: 0; filter: blur(6px); }
  to { transform: none; opacity: 1; filter: none; }
}

.modal {
  width: min(580px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  border-radius: 28px;
  background: var(--glass);
  border: 1px solid var(--edge-2);
  box-shadow: 0 50px 140px rgba(0, 0, 0, 0.7), 0 0 90px -30px rgba(103, 232, 249, 0.35);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  padding: clamp(1.4rem, 4vw, 2.2rem);
}
.m-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.m-head h3 { font-family: var(--display); font-weight: 300; font-size: 2.2rem; letter-spacing: -0.02em; line-height: 1.05; }
.m-head p { color: var(--ink-2); font-size: 0.94rem; margin-top: 0.5rem; font-weight: 300; }
.m-head .m-book { margin-top: 1rem; }
.m-close {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--edge-2);
  background: transparent;
  color: var(--ink-2);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.m-close:hover { color: var(--ink); border-color: var(--ink-3); }

#contact-form { display: flex; flex-direction: column; gap: 1rem; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .f-row { grid-template-columns: 1fr; } }
.field-wrap, .field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.84rem; color: var(--ink-2); }
.field .req { color: var(--accent-a); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;   /* 16px stops iOS from zooming into the field */
  color: var(--ink);
  background: rgba(236, 238, 245, 0.04);
  border: 1px solid var(--edge-2);
  border-radius: 14px;
  min-height: 50px;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: #0b0d14; }
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(165, 243, 252, 0.55);
  background: rgba(103, 232, 249, 0.05);
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.1);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 0.9rem; min-height: 1.2em; }
.form-msg.ok { color: var(--good); }
.form-msg.err { color: var(--bad); }
.form-note { font-size: 0.8rem; color: var(--ink-3); }

/* --- Ask Kildaris palette ---------------------------------------------------- */

.ask-back { place-items: start center; padding-top: min(12vh, 120px); }
.ask {
  width: min(780px, 100%);
  border-radius: 28px;
  background: var(--glass);
  border: 1px solid var(--edge-2);
  box-shadow: 0 50px 140px rgba(0, 0, 0, 0.7), 0 0 90px -30px rgba(167, 139, 250, 0.35);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  overflow: hidden;
}
.ask-in { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 18px 0 24px; border-bottom: 1px solid var(--edge); }
.ask-dot {
  flex: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #cffafe, #67e8f9 55%, #a78bfa);
  box-shadow: 0 0 16px rgba(103, 232, 249, 0.8);
}
.ask-in input { flex: 1; min-width: 0; height: 46px; border: 0; outline: none; background: transparent; color: var(--ink); font: 1.12rem var(--sans); }
.ask-in input::placeholder { color: var(--ink-3); }
.ask-esc { font-size: 0.74rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.ask-cols { display: flex; min-height: 400px; }
.ask-left { width: 300px; flex: none; padding: 12px; border-right: 1px solid var(--edge); display: flex; flex-direction: column; gap: 4px; }
.ask-k, .ask-tag { font-size: 0.76rem; color: var(--ink-3); }
.ask-k { padding: 8px 14px; }
#ask-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#ask-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 46px; padding: 8px 14px; border-radius: 14px;
  font-size: 0.92rem; line-height: 1.35; color: var(--ink-2); cursor: pointer;
}
#ask-list li[aria-selected="true"] { background: rgba(236, 238, 245, 0.07); color: var(--ink); }
#ask-list li[aria-selected="true"]::after { content: "\21B5"; color: var(--accent-a); }
.ask-empty { padding: 8px 14px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-3); }
.ask-right { flex: 1; min-width: 0; padding: 30px 32px; display: flex; flex-direction: column; }
.ask-tag { color: var(--accent-a); }
.ask-qq { margin-top: 14px; font-family: var(--display); font-weight: 300; font-size: 2.1rem; line-height: 1.08; letter-spacing: -0.02em; }
.ask-a { margin-top: 16px; font-size: 0.98rem; line-height: 1.65; font-weight: 300; color: var(--ink-2); }
.ask-cta { margin-top: auto; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 10px; }
.ask-foot { display: flex; gap: 22px; min-height: 46px; align-items: center; padding: 0 24px; border-top: 1px solid var(--edge); font-size: 0.76rem; color: var(--ink-3); }
.ask-note { margin-left: auto; }
@media (max-width: 720px) {
  .ask-back { padding-top: 0.75rem; }
  .ask { max-height: calc(100dvh - 1.5rem); display: flex; flex-direction: column; border-radius: 24px; }
  .ask-cols { flex-direction: column; min-height: 0; overflow-y: auto; }
  .ask-left { width: auto; border-right: 0; border-bottom: 1px solid var(--edge); }
  #ask-list { max-height: 38dvh; overflow-y: auto; }
  .ask-right { padding: 22px; }
  .ask-qq { font-size: 1.7rem; }
  .ask-foot span:not(.ask-note) { display: none; }
  .ask-note { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  h1 em, h2 em, .grad { animation: none; }
}

/* --- data pop-ups (#kx-modal, filled from assets/modals.js) ------------------ */

.modal.wide { width: min(880px, 100%); }
.kxm { position: relative; overflow-x: hidden; padding: clamp(1.5rem, 4vw, 2.6rem); }
.kxm > * { position: relative; }
.kxm .m-close { position: absolute; top: 18px; right: 18px; z-index: 2; }
.kxm-glow {
  position: absolute !important; inset: -45% -25% auto; height: 85%;
  background: radial-gradient(closest-side, rgba(103, 232, 249, 0.22), transparent),
              radial-gradient(closest-side at 80% 60%, rgba(167, 139, 250, 0.18), transparent);
  filter: blur(30px); pointer-events: none;
}
#kx-modal[data-kind="ind"] .kxm-glow { background: radial-gradient(closest-side, rgba(167, 139, 250, 0.26), transparent), radial-gradient(closest-side at 80% 60%, rgba(240, 171, 252, 0.14), transparent); }
#kx-modal[data-kind="support"] .kxm-glow, #kx-modal[data-kind="geo"] .kxm-glow { background: radial-gradient(closest-side, rgba(52, 211, 153, 0.18), transparent), radial-gradient(closest-side at 80% 60%, rgba(103, 232, 249, 0.18), transparent); }
.kxm-head { display: flex; align-items: center; gap: 16px; padding-right: 52px; }
.kxm-ic {
  flex: none; width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 16px; color: var(--accent-a);
  background: linear-gradient(140deg, rgba(103, 232, 249, 0.16), rgba(167, 139, 250, 0.12));
  border: 1px solid rgba(165, 243, 252, 0.22);
  box-shadow: 0 0 40px -10px rgba(103, 232, 249, 0.6);
}
.kxm-ic:empty { display: none; }
.kxm-ic .ic { width: 26px; height: 26px; }
.kxm-k { display: block; font-size: 0.82rem; color: var(--accent-a); }
.kxm h3 {
  margin-top: 0.3rem;
  font-family: var(--display); font-weight: var(--display-weight);
  font-variation-settings: var(--display-axes, normal);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1.08; letter-spacing: var(--display-track);
}
.kxm-lead { margin-top: 1.1rem; color: var(--ink-2); font-weight: 300; font-size: 1.04rem; max-width: 64ch; }
.kxm-body { margin-top: 1.6rem; }
.kxm h4 { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.9rem; }
.kxm-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.8rem; margin-top: 1.6rem; }
.kxm-body > .kxm-cols:first-child { margin-top: 0; }
.kxm-list, .kxm-flow, .kxm-autos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kxm-list li, .kxm-autos li, .kxm-flow li { opacity: 0; transform: translateY(8px); animation: kxIn 0.55s var(--ease-out) forwards; }
.kxm-list li:nth-child(2), .kxm-autos li:nth-child(2), .kxm-flow li:nth-child(2) { animation-delay: 0.06s; }
.kxm-list li:nth-child(3), .kxm-autos li:nth-child(3), .kxm-flow li:nth-child(3) { animation-delay: 0.12s; }
.kxm-list li:nth-child(4), .kxm-autos li:nth-child(4), .kxm-flow li:nth-child(4) { animation-delay: 0.18s; }
.kxm-list li:nth-child(n+5) { animation-delay: 0.24s; }
@keyframes kxIn { to { opacity: 1; transform: none; } }
.kxm-list li {
  position: relative; padding: 11px 14px 11px 40px; border-radius: 14px;
  background: rgba(236, 238, 245, 0.035); border: 1px solid var(--edge);
  font-size: 0.93rem; font-weight: 300; line-height: 1.45;
}
.kxm-list li::before {
  content: ""; position: absolute; left: 15px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff, var(--accent-a) 60%);
  box-shadow: 0 0 10px var(--accent-a);
}
.kxm-checks li::before {
  background: none; box-shadow: none; border-radius: 0;
  width: 10px; height: 5px; margin-top: -4px;
  border: solid var(--good); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.kxm-flow { counter-reset: kf; position: relative; gap: 14px; }
.kxm-flow::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(var(--accent-a), transparent); }
.kxm-flow li { counter-increment: kf; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; font-size: 0.93rem; font-weight: 300; }
.kxm-flow li::before {
  content: counter(kf); width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg); border: 1px solid rgba(103, 232, 249, 0.5);
  box-shadow: 0 0 16px -4px var(--accent-a);
  font-family: var(--display); font-size: 0.95rem;
}
.kxm-autos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kxm-autos li {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(236, 238, 245, 0.05), rgba(236, 238, 245, 0.02));
  border: 1px solid var(--edge);
}
.kxm-autos b { font-weight: 500; font-size: 0.98rem; }
.kxm-autos span { color: var(--ink-2); font-size: 0.88rem; font-weight: 300; line-height: 1.5; }
.kxm-autos em { font-style: normal; font-size: 0.8rem; color: var(--accent-a); margin-top: auto; padding-top: 4px; }
.kxm-note { color: var(--ink-2); font-size: 0.9rem; font-weight: 300; line-height: 1.6; max-width: none; }
.kxm-body > .kxm-note { margin-top: 1.2rem; }
.kxm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--edge); }
.kxm-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.kxm-nav { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.kxm-nav[hidden] { display: none; }
.kxm-nav button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--edge-2); background: transparent; color: var(--ink-2);
  cursor: pointer; font-size: 1rem; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.kxm-nav button:hover { color: var(--ink); border-color: var(--accent-a); background: rgba(103, 232, 249, 0.08); }
.kxm.swap > :not(.kxm-glow):not(.m-close):not(.kxm-foot) { animation: kxSwap 0.45s var(--ease-out); }
@keyframes kxSwap { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 720px) {
  .kxm-cols, .kxm-autos { grid-template-columns: 1fr; }
  .kxm-foot { flex-direction: column-reverse; align-items: stretch; }
  .kxm-cta { flex-direction: column; margin: 0; }
  .kxm-cta .btn { justify-content: center; }
  .kxm-nav { justify-content: center; }
  .kxm-head { align-items: flex-start; }
  .kxm-ic { width: 44px; height: 44px; border-radius: 13px; }
}
.no-anim .kxm-list li, .no-anim .kxm-autos li, .no-anim .kxm-flow li { opacity: 1; transform: none; animation: none; }

/* --- industry cards: the card links to the page, the chip opens the pop-up --- */

.icards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.icard { position: relative; display: flex; flex-direction: column; border-radius: 22px; transition: transform 0.4s var(--ease-out), border-color 0.3s; }
.icard:hover { transform: translateY(-3px); border-color: var(--glass-hi); }
.icard-a { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 8px; flex: 1; }
.icard-ic {
  width: 46px; height: 46px; padding: 11px; margin-bottom: 10px; border-radius: 14px;
  color: var(--accent-a);
  background: linear-gradient(140deg, rgba(103, 232, 249, 0.14), rgba(167, 139, 250, 0.1));
  border: 1px solid rgba(165, 243, 252, 0.18);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease);
}
.icard:hover .icard-ic { transform: scale(1.08) rotate(-5deg); box-shadow: 0 0 30px -6px rgba(103, 232, 249, 0.7); }
.icard-a b { font-weight: 500; font-size: 1.02rem; color: var(--ink); }
.icard-a span { font-size: 0.86rem; color: var(--ink-3); line-height: 1.45; }
.icard-q {
  align-self: flex-start; margin: 8px 22px 20px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--edge-2); background: rgba(236, 238, 245, 0.03);
  color: var(--ink-2); font: 0.8rem var(--sans); cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.icard-q:hover { color: var(--ink); border-color: var(--accent-a); background: rgba(103, 232, 249, 0.08); }
@media (max-width: 1080px) { .icards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .icard-a { padding: 18px 16px 6px; } .icard-q { margin: 6px 16px 16px; } }
@media (max-width: 380px) { .icards { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--edge-2); background: rgba(236, 238, 245, 0.04);
  color: var(--ink); font: 0.88rem var(--sans); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.3s var(--ease-out);
}
.chip .ic { width: 16px; height: 16px; color: var(--accent-a); }
.chip:hover { border-color: var(--accent-a); background: rgba(103, 232, 249, 0.08); transform: translateY(-2px); }

/* --- coverage map ---------------------------------------------------------- */

.geo { position: relative; border-radius: 26px; padding: clamp(8px, 2vw, 18px); overflow: hidden; }
.geo-map { width: 100%; height: auto; display: block; overflow: visible; }
.geo-shore { fill: none; stroke: rgba(236, 238, 245, 0.08); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.geo-l { fill: none; stroke: rgba(165, 243, 252, 0.35); stroke-width: 1; stroke-dasharray: 3 5; animation: geoFlow 2.2s linear infinite; }
@keyframes geoFlow { to { stroke-dashoffset: -16; } }
.geo-world { fill: none; stroke: url(#geo-g); stroke: rgba(167, 139, 250, 0.55); stroke-width: 1.4; stroke-dasharray: 6 8; animation: geoFlow 1.6s linear infinite; }
.geo-wt { fill: var(--accent-b); font: 500 16px var(--sans); letter-spacing: 0.02em; }
.geo-hub { animation: geoHub 4s var(--ease) infinite; transform-origin: 450px 236px; }
@keyframes geoHub { 50% { transform: scale(1.25); opacity: 0.7; } }
.geo-n { cursor: pointer; outline: none; }
.geo-n text { fill: var(--ink-2); font: 16px var(--sans); transition: fill 0.2s; pointer-events: none; }
.geo-dot { fill: #cffafe; stroke: rgba(103, 232, 249, 0.9); stroke-width: 2; transition: r 0.3s var(--ease-out); filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.9)); }
.geo-halo { fill: rgba(103, 232, 249, 0.1); stroke: rgba(103, 232, 249, 0.3); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: geoPing 3s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.3s); }
@keyframes geoPing { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.geo-n:hover text, .geo-n:focus-visible text { fill: var(--ink); }
.geo-n:hover .geo-dot, .geo-n:focus-visible .geo-dot { r: 9; }
.geo-n:focus-visible .geo-halo { stroke: var(--accent-a); stroke-width: 2; animation: none; opacity: 1; transform: none; }
@media (max-width: 640px) { .geo-n text { font-size: 18px; } .geo-wt { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .geo-l, .geo-world, .geo-hub, .geo-halo { animation: none; } }

.ftr-live { margin-top: 1.2rem; height: auto; min-height: 40px; padding: 8px 14px; white-space: normal; text-align: left; }
.ftr-h2 { margin-top: 1rem !important; }

/* --- icon tiles: a solid gradient chip with a white glyph -------------------- */

.itile {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #22d3ee, #6366f1 55%, #a855f7);
  box-shadow: 0 10px 26px -10px rgba(99, 102, 241, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.4s var(--ease-out);
}
.itile .ic { width: 22px; height: 22px; stroke-width: 1.8; }
:is(.why-c, .tool-c, .icard):hover .itile, .icard:hover .icard-ic { transform: scale(1.08) rotate(-5deg); }

/* --- sliders and tier pickers (home and the calculators in pop-ups) ------------ */

.seat-range, .t-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; margin: 0;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b)) 0 / var(--fill, 13%) 100% no-repeat, rgba(236, 238, 245, 0.1);
  cursor: pointer;
}
.seat-range::-webkit-slider-thumb, .t-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff, #a5f3fc 45%, #67e8f9);
  box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.18), 0 0 24px rgba(103, 232, 249, 0.7);
}
.seat-range::-moz-range-thumb, .t-range::-moz-range-thumb {
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff, #a5f3fc 45%, #67e8f9);
  box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.18), 0 0 24px rgba(103, 232, 249, 0.7);
}
.seat-tiers { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(236, 238, 245, 0.03); width: fit-content; max-width: 100%; }
.seat-tiers button {
  padding: 9px 16px; border-radius: 999px; border: 0; background: none;
  color: var(--ink-2); font: 0.88rem var(--sans); cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.seat-tiers button small { color: var(--ink-3); margin-left: 4px; }
.seat-tiers button[aria-checked="true"] { background: rgba(236, 238, 245, 0.12); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-2); }
.seat-tiers button[aria-checked="true"] small { color: var(--accent-a); }

/* --- tables in pop-ups --------------------------------------------------------- */

.kxm-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.kxm-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.kxm-table th, .kxm-table td { padding: 11px 12px; border-bottom: 1px solid var(--edge); text-align: left; vertical-align: middle; }
.kxm-table th { font-weight: 500; color: var(--ink); font-size: 0.86rem; }
.kxm-table td { color: var(--ink-2); font-weight: 300; }
.kxm-table td:last-child { color: var(--ink); }
.kxm-tiers th:not(:first-child), .kxm-tiers td:not(:first-child) { text-align: center; width: 18%; }
.kxm-tiers th small { display: block; font-weight: 400; color: var(--accent-a); font-size: 0.76rem; }
.kxm-tiers .ok { color: var(--good); font-size: 1.05rem; }
.kxm-tiers .no { color: var(--ink-4); }
.kxm-tiers tbody tr:hover td { background: rgba(236, 238, 245, 0.03); }

/* --- self-check tools (assets/tools.js) ------------------------------------------ */

.t-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: tq; }
.t-qs li {
  counter-increment: tq;
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(236, 238, 245, 0.03);
  transition: border-color 0.3s, background 0.3s;
}
.t-qs li::before { content: counter(tq); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge-2); font-size: 0.8rem; color: var(--ink-3); }
.t-qs li.done { border-color: rgba(103, 232, 249, 0.25); background: rgba(103, 232, 249, 0.04); }
.t-qs li.done::before { border-color: var(--accent-a); color: var(--accent-a); }
.t-q { font-size: 0.93rem; line-height: 1.45; }
.t-yn { display: flex; gap: 6px; }
.t-yn button {
  min-width: 56px; min-height: 38px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--edge-2); background: transparent; color: var(--ink-2); font: 500 0.84rem var(--sans); cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.t-yn button:hover { border-color: var(--ink-3); color: var(--ink); }
.t-yn button[data-v="1"][aria-pressed="true"] { background: rgba(52, 211, 153, 0.16); border-color: var(--good); color: #d1fae5; }
.t-yn button[data-v="0"][aria-pressed="true"] { background: rgba(251, 113, 133, 0.14); border-color: var(--bad); color: #ffe4e6; }
.t-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.t-count { font-size: 0.84rem; color: var(--ink-3); }
.t-foot .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.t-res { display: flex; align-items: center; gap: 24px; margin-bottom: 1.4rem; }
.t-ring { position: relative; width: 150px; height: 150px; flex: none; }
.t-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.t-ring circle { fill: none; stroke-width: 9; }
.t-ring-bg { stroke: rgba(236, 238, 245, 0.08); }
.t-ring-fg { stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease-out); }
.kxm-link[hidden] { display: none; }
.t-ring b { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 16px; font-family: var(--display); font-weight: 350; font-size: 2.8rem; color: #fff; font-variant-numeric: tabular-nums; }
.t-ring span { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.t-head { font-family: var(--display); font-weight: 350; font-size: 1.7rem; line-height: 1.15; color: #fff; }
.t-why { color: var(--ink-2); font-weight: 300; margin-top: 6px; }
.t-offer { display: inline-block; margin-top: 10px; color: var(--accent-a); font-size: 0.92rem; }
.t-offer:hover { color: #fff; }
.t-again { margin-top: 1.2rem; border: 0; background: none; padding: 0; color: var(--ink-3); font: 0.86rem var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.t-again:hover { color: var(--ink); }
.t-calc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.6rem; }
.t-in { display: flex; flex-direction: column; gap: 12px; }
.t-sl { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.88rem; color: var(--ink-2); margin-top: 6px; }
.t-sl output { font-family: var(--display); font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; }
.t-out {
  display: flex; flex-direction: column; gap: 2px; padding: 20px; border-radius: 18px;
  background: radial-gradient(120% 90% at 80% 0%, rgba(103, 232, 249, 0.14), transparent 60%), rgba(236, 238, 245, 0.03);
  border: 1px solid var(--edge-2);
}
.t-k { font-size: 0.78rem; color: var(--ink-3); margin-top: 10px; }
.t-k:first-child { margin-top: 0; }
.t-big { font-family: var(--display); font-weight: 350; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.t-mid { font-family: var(--display); font-weight: 350; font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.t-math { margin-top: 1rem; font-size: 0.86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; max-width: none; }
.t-bars { display: grid; gap: 12px; margin-bottom: 1.2rem; }
.t-tiles { margin-bottom: 1.4rem; }
@media (max-width: 720px) {
  .t-qs li { grid-template-columns: 26px 1fr; }
  .t-yn { grid-column: 2; }
  .t-res { flex-direction: column; align-items: flex-start; }
  .t-calc { grid-template-columns: 1fr; }
}