/* ============================================================
   Hive design system — shared across all pages.
   Extracted from the home page; sub-page components at the end.
   ============================================================ */

/* ============ Reset & root ============ */
*,*::before,*::after{box-sizing:border-box;margin:0}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit;color:inherit}
a{color:inherit}
ul,ol{list-style:none;padding:0}
input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}
[hidden]{display:none!important}

:root{
  /* ---- Fonts: change the whole site's typeface here ---- */
  --font-sans:"Onest",system-ui,sans-serif;

  /* ---- Type scale: change global text sizes here ---- */
  --text-2xs:0.65rem;  --text-xs:0.75rem;   --text-sm:0.875rem;
  --text-base:1rem;    --text-lg:1.125rem;  --text-xl:1.25rem;
  --text-2xl:1.5rem;   --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem;     --text-6xl:3.75rem;  --text-7xl:4.5rem;
  --text-hero:12.5vw;  --text-ghost:8.2vw;

  /* ---- Colors: change the whole palette here ---- */
  --background:#ffffff;  --foreground:#0a0a0a;
  --brand:#2563c9;       --brand-deep:#0a091a;
  --brand-deep-rgb:10, 9, 26; /* --brand-deep as R,G,B for rgba() overlays */
  --brand-light:#5790e6; --accent-teal:#0b6e97;
  --surface:#f4f4f4;     --surface-card:#ffffff;
  --ink:#0a0a0a;         --ink-soft:#717784;
  --ghost:#d7dae1;       --hairline:#e6e8ec;
  --on-brand:#ffffff;
  --brand-yellow:#e7de12;
  --radius-card:1.5rem;  --radius-card-lg:2rem; --radius-pill:62.5rem;
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-quart:cubic-bezier(0.25,1,0.5,1);
  --ease-inout-cubic:cubic-bezier(0.645,0.045,0.355,1);
}

/* Adaptive rem grid — design base 1920, FONT_BASE 16 */
html{font-size:16px}
@media (max-width:1920px){ html{font-size:0.833333vw} }
@media (max-width:1440px){ html{font-size:1.111111vw} }
@media (max-width:1024px){ html{font-size:1.5625vw} }
@media (max-width:640px) { html{font-size:4.444444vw} }

html.locked{position:relative;overflow:hidden;height:100%}

body{
  min-height:100vh;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

main{width:100%;overflow-x:clip;padding:0.5rem}
@media (min-width:640px){ main{padding:0.75rem} }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ Reveal primitives ============ */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:0.14em;margin-bottom:-0.14em}
.wi{display:inline-block;transform:translateY(115%);opacity:0;will-change:transform,opacity}
.stacked .line{display:block;overflow:hidden;padding-bottom:0.14em;margin-bottom:-0.14em}
.stacked .line-inner{display:block;transform:translateY(115%);will-change:transform}
.fw{display:inline-block;transform:translateY(18px);opacity:0;will-change:transform,opacity}

/* ============ Shared components ============ */
.eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.22em;color:var(--ink-soft)}
.eyebrow .dot{width:0.375rem;height:0.375rem;border-radius:var(--radius-pill);background:var(--brand)}
.eyebrow-light{color:rgba(255,255,255,0.7)}
.eyebrow-light .dot{background:var(--brand-light)}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:var(--ink)}
.eyebrow-light a:hover{color:#fff}
.crumb-sep{opacity:0.5}

.pill{display:inline-flex;align-items:center;gap:0.5rem;border:0;border-radius:var(--radius-pill);padding:0.875rem 1.75rem;font-size:var(--text-sm);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;text-decoration:none;transition:background-color .25s ease,color .25s ease}
.pill svg{width:1rem;height:1rem}
.pill-light{background:#fff;color:var(--brand-deep)}
.pill-light:hover{background:var(--brand-light);color:#fff}
.pill-solid{background:var(--ink);color:#fff}
.pill-solid:hover{background:var(--brand-deep)}
.pill-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.35)}
.pill-ghost:hover{background:rgba(255,255,255,0.15)}
.pill-outline{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
.pill-outline:hover{border-color:var(--ink)}

.arrow-btn{width:3rem;height:3rem;border-radius:var(--radius-pill);display:grid;place-items:center;background:transparent;transition:background-color .25s ease,border-color .25s ease}
@media (min-width:640px){ .arrow-btn{width:3.5rem;height:3.5rem} }
.arrow-btn svg{width:1.25rem;height:1.25rem}
.arrow-outline{border:1px solid var(--hairline);color:var(--ink)}
.arrow-outline:hover{border-color:var(--ink)}
.arrow-solid{border:1px solid var(--ink);background:var(--ink);color:#fff}
.arrow-solid:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.flip{display:grid;transform:scaleX(-1)}

.dots{display:flex;gap:0.5rem}
.dots button{padding:0.375rem;background:none;border:0;display:grid;place-items:center}
.dots .pip{display:block;height:0.375rem;width:0.375rem;border-radius:var(--radius-pill);transition:width .3s ease,background-color .3s ease}
.dots-dark .pip{background:var(--ghost)}
.dots-dark button[aria-current] .pip{width:1.25rem;background:var(--ink)}
.dots-light .pip{background:rgba(255,255,255,0.4)}
.dots-light button[aria-current] .pip{width:1.25rem;background:#fff}

.glass{border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.10);border-radius:var(--radius-card);box-shadow:0 20px 40px -12px rgba(var(--brand-deep-rgb),0.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:0.75rem}

.glass-cap{position:absolute;left:0.75rem;right:0.75rem;bottom:0.75rem;border-radius:0.75rem;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0.5rem 0.75rem}

.title-xl{font-size:var(--text-5xl);font-weight:500;line-height:0.95;letter-spacing:-0.02em}

/* ============ Loader ============ */
/* Splash visuals are pure CSS so they play on every page the instant the curtain paints. */
#loader{position:fixed;inset:0;z-index:200;background:var(--brand-deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.loader-mark{display:flex;align-items:center;gap:0.75rem;font-size:var(--text-2xl);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;opacity:0;transform:translateY(16px);animation:loaderMarkIn 700ms var(--ease-expo) 80ms forwards}
.loader-mark svg{width:1.75rem;height:1.75rem}
.loader-track{width:10rem;height:1px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.2);overflow:hidden}
.loader-fill{height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;animation:loaderFill 1280ms var(--ease-inout-cubic) 120ms forwards}
@keyframes loaderMarkIn{to{opacity:1;transform:translateY(0)}}
@keyframes loaderFill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .loader-mark{animation-duration:1ms;animation-delay:0ms}
  .loader-fill{animation-duration:1ms;animation-delay:0ms}
}

/* ============ Header ============ */
.site-header{display:flex;align-items:center;padding:1.5rem 1.5rem 0;font-size:var(--text-xs);color:#fff}
@media (min-width:640px){ .site-header{padding:2rem 2.5rem 0} }
.h-left{display:none;flex:1;gap:2rem;align-items:center}
@media (min-width:1024px){ .h-left{display:flex} }
.h-left a,.h-navlink{background:none;border:0;padding:0;font-size:var(--text-xs);color:rgba(255,255,255,0.9);text-decoration:none}
.h-left a:hover,.h-navlink:hover{color:#fff}
.h-brand{flex:1;display:flex;align-items:center;gap:0.5rem;font-size:var(--text-base);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;white-space:nowrap;color:#fff;text-decoration:none}
@media (min-width:1024px){ .h-brand{justify-content:center} }
.h-brand svg{width:1.25rem;height:1.25rem;flex:none}
.h-right{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:1rem}
@media (min-width:640px){ .h-right{gap:1.25rem} }
.h-book{display:none;background:none;border:0;color:#fff;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;text-decoration:none}
@media (min-width:640px){ .h-book{display:inline-block} }
.h-book:hover{text-decoration:underline}
.burger{width:2.5rem;height:2.5rem;border:0;border-radius:var(--radius-pill);background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;transition:background-color .25s ease}
.burger:hover{background:rgba(255,255,255,0.25)}
.burger .bars{display:grid;gap:5px}
.burger .bars span{display:block;width:1rem;height:1px;background:#fff}

/* ============ Home hero (kept for future home adoption) ============ */
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card-lg);background:var(--brand-deep);color:var(--on-brand);height:calc(100svh - 1rem);min-height:36rem;display:flex;flex-direction:column}
@media (min-width:640px){ .hero{height:calc(100svh - 1.5rem)} }
.hero-bg{position:absolute;inset:0;z-index:-10}
.hero-plate{position:absolute;left:0;right:0;top:-16%;height:132%;width:100%}
.hero-plate img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--brand-deep-rgb),0.65),rgba(var(--brand-deep-rgb),0.35),rgba(var(--brand-deep-rgb),0.75))}
.hero-title-wrap{padding:1rem 1.5rem 0}
@media (min-width:640px){ .hero-title-wrap{padding-left:2.5rem;padding-right:2.5rem} }
.hero-title{font-size:var(--text-hero);font-weight:500;text-transform:uppercase;line-height:0.85;letter-spacing:-0.02em;white-space:nowrap}
.hero-bottom{margin-top:auto;padding:0 1.5rem 2rem;display:flex;flex-direction:column;gap:1.5rem}
@media (min-width:640px){ .hero-bottom{flex-direction:row;justify-content:space-between;align-items:flex-end;padding:0 2.5rem 2.5rem} }
.hero-tagline{font-size:2.4rem;font-weight:500;text-transform:uppercase;line-height:0.95;letter-spacing:-0.02em;color:rgba(255,255,255,0.85)}
.hero-right{display:flex;align-items:flex-end;gap:1rem}

/* ============ Page hero (sub-pages) ============ */
.page-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card-lg);background:var(--brand-deep);color:var(--on-brand);display:flex;flex-direction:column;min-height:30rem}
.ph-body{padding:4rem 1.5rem 4.5rem;max-width:62rem}
@media (min-width:640px){ .ph-body{padding:5rem 2.5rem 5.5rem} }
.ph-title{font-size:2.75rem;font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1.25rem}
@media (min-width:640px){ .ph-title{font-size:var(--text-7xl)} }
.ph-sub{font-size:var(--text-base);color:rgba(255,255,255,0.75);line-height:1.625;max-width:34rem;margin-top:1.5rem}
.ph-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2.25rem}

/* Decorative device grid (optional hero/band visual) */
.device-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0.5rem;padding:1rem;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);border-radius:var(--radius-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.device-cell{aspect-ratio:1;border-radius:0.5rem;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.10);display:grid;place-items:center}
.device-cell .dot{width:0.375rem;height:0.375rem;border-radius:var(--radius-pill);background:var(--brand-light)}
.device-cell.ok .dot{background:#4ade80}
.device-cell.warn .dot{background:#facc15}
.device-cell.err .dot{background:#f87171}

/* ============ Page-aware hero visuals ============ */
.hive-page-visual{margin:0 1.5rem 1.5rem;border:1px solid rgba(255,255,255,.16);border-radius:1.35rem;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055));box-shadow:0 1.5rem 4rem rgba(0,0,0,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;color:#fff;min-height:15rem;position:relative}
.hv-top{height:2.7rem;padding:0 .9rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.11);font-size:.625rem;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.62)}
.hv-lights{display:flex;gap:.3rem}.hv-lights i{display:block;width:.35rem;height:.35rem;border-radius:50%;background:rgba(255,255,255,.25)}.hv-lights i:first-child{background:var(--brand)}
.hv-stage{height:9.2rem;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 55% 55%,rgba(37,99,201,.22),transparent 56%)}
.hv-data{height:3.5rem;padding:.65rem .9rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.11)}
.hv-data span{display:flex;flex-direction:column;gap:.1rem}.hv-data small{font-size:.55rem;color:rgba(255,255,255,.5)}.hv-data strong{font-size:.75rem;font-weight:500}.hv-data em{font-style:normal;font-size:.58rem;letter-spacing:.05em;color:#a7f3d0;padding:.35rem .55rem;border-radius:999px;background:rgba(16,185,129,.12);border:1px solid rgba(52,211,153,.18)}
@media (min-width:1024px){
  .page-hero:has(.hive-page-visual) .ph-body{max-width:68%;padding-right:2rem}
  .hive-page-visual{position:absolute;right:2.5rem;bottom:2.5rem;width:24rem;margin:0;min-height:17rem}
  .hv-stage{height:11.2rem}
}
@media (min-width:1320px){.hive-page-visual{width:27rem}.page-hero:has(.hive-page-visual) .ph-body{max-width:64%}}

/* Device fleet */
.hv-device-field{display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem;width:82%;transform:perspective(30rem) rotateX(56deg) rotateZ(-7deg)}
.hv-device{aspect-ratio:1;border-radius:.35rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);position:relative;box-shadow:0 .5rem 1rem rgba(0,0,0,.18)}
.hv-device:after{content:"";position:absolute;width:.3rem;height:.3rem;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:#4ade80;box-shadow:0 0 .7rem rgba(74,222,128,.65)}
.hv-device.v-4:after,.hv-device.v-11:after{background:#fbbf24;box-shadow:0 0 .7rem rgba(251,191,36,.6)}.hv-device.v-7:after{background:#f87171;box-shadow:0 0 .7rem rgba(248,113,113,.6)}

/* Physical Android equipment */
.hv-hardware{width:5.5rem;height:8rem;border:.28rem solid rgba(255,255,255,.74);border-radius:.8rem;position:relative;box-shadow:1.3rem 1.2rem 0 rgba(37,99,201,.2)}
.hv-hardware .hv-screen{position:absolute;inset:.55rem;background:linear-gradient(150deg,rgba(87,144,230,.48),rgba(255,255,255,.06));border-radius:.35rem;padding:.55rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem}
.hv-app{display:block;border-radius:.2rem;background:rgba(255,255,255,.48)}.hv-app:nth-child(2),.hv-app:nth-child(5){background:var(--brand)}
.hv-base{position:absolute;left:50%;bottom:-1.1rem;transform:translateX(-50%);width:3.5rem;height:.35rem;border-radius:1rem;background:rgba(255,255,255,.5)}
.hv-vending{width:6.2rem}.hv-vending .hv-screen{grid-template-columns:repeat(3,1fr)}.hv-vending .hv-app{aspect-ratio:.8}.hv-signage{width:8.5rem;height:5.4rem}.hv-signage .hv-screen{grid-template-columns:repeat(3,1fr)}.hv-field{height:8.5rem;width:4.7rem;border-radius:1.1rem}.hv-hospitality{transform:rotate(-4deg)}

/* Rollout */
.hv-waves{width:80%;display:grid;gap:.55rem}.hv-wave{height:1.2rem;border-radius:999px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}.hv-wave:after{content:"";position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--brand-light));width:28%}.hv-wave.v-2:after{width:51%}.hv-wave.v-3:after{width:72%}.hv-wave.v-4:after{width:92%}

/* Remote support */
.hv-remote{width:100%;height:100%;position:relative;display:grid;place-items:center}.hv-phone{width:4.2rem;height:7.2rem;border:.23rem solid rgba(255,255,255,.7);border-radius:.75rem;background:linear-gradient(145deg,rgba(37,99,201,.5),rgba(255,255,255,.05))}.hv-phone:after{content:"";position:absolute;width:1.2rem;height:.18rem;border-radius:1rem;background:rgba(255,255,255,.55);left:50%;top:1.45rem;transform:translateX(-50%)}.hv-cursor{position:absolute;width:.8rem;height:1.1rem;background:#fff;clip-path:polygon(0 0,100% 70%,55% 72%,38% 100%);left:57%;top:50%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}.hv-pulse{position:absolute;width:5.5rem;height:5.5rem;border:1px solid rgba(87,144,230,.3);border-radius:50%}.hv-pulse.v-2{width:8rem;height:8rem}.hv-pulse.v-3{width:11rem;height:11rem}

/* Monitoring */
.hv-chart{height:70%;width:82%;display:flex;gap:.32rem;align-items:flex-end;position:relative;border-left:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);padding:.6rem}.hv-bar{flex:1;background:rgba(87,144,230,.3);border-radius:.15rem .15rem 0 0;height:34%}.hv-bar:nth-child(3n){height:68%}.hv-bar:nth-child(4n){height:48%}.hv-bar:nth-child(5n){height:82%;background:rgba(37,99,201,.75)}.hv-chart-line{position:absolute;left:7%;right:2%;top:45%;height:2px;background:#4ade80;transform:rotate(-4deg);box-shadow:0 0 .65rem rgba(74,222,128,.55)}

/* Workflow */
.hv-flow{width:88%;height:75%;position:relative}.hv-node{position:absolute;width:4.3rem;height:2.2rem;border-radius:.55rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09)}.hv-node:after{content:"";position:absolute;left:.6rem;right:.6rem;top:50%;height:.2rem;border-radius:1rem;background:rgba(255,255,255,.35)}.hv-node.v-1{left:0;top:35%}.hv-node.v-2{left:36%;top:5%}.hv-node.v-3{left:36%;bottom:5%}.hv-node.v-4{right:0;top:35%;border-color:rgba(74,222,128,.4)}.hv-link{position:absolute;height:1px;background:rgba(87,144,230,.7);transform-origin:left}.hv-link.v-1{width:29%;left:19%;top:49%;transform:rotate(-25deg)}.hv-link.v-2{width:29%;left:19%;top:52%;transform:rotate(25deg)}.hv-link.v-3{width:29%;left:55%;top:25%;transform:rotate(25deg)}

/* Integrations and routes */
.hv-network{width:100%;height:100%;position:relative}.hv-hub,.hv-satellite{position:absolute;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--brand);box-shadow:0 0 1.2rem rgba(37,99,201,.5)}.hv-hub{width:2.8rem;height:2.8rem}.hv-satellite{width:.75rem;height:.75rem;background:rgba(255,255,255,.75);box-shadow:none}.hv-satellite:after{content:"";position:absolute;width:4.2rem;height:1px;right:.35rem;top:.35rem;background:rgba(255,255,255,.18);transform-origin:right}.hv-satellite.v-1{left:18%;top:22%}.hv-satellite.v-2{left:21%;top:72%}.hv-satellite.v-3{left:48%;top:12%}.hv-satellite.v-4{left:78%;top:25%}.hv-satellite.v-5{left:82%;top:70%}.hv-satellite.v-6{left:49%;top:88%}

/* Chip and Android */
.hv-chip{width:5.8rem;height:5.8rem;border-radius:.85rem;background:linear-gradient(145deg,rgba(37,99,201,.7),rgba(87,144,230,.18));border:1px solid rgba(255,255,255,.35);position:relative;box-shadow:0 0 2rem rgba(37,99,201,.25)}.hv-chip>i:first-child{position:absolute;inset:1.25rem;border:1px solid rgba(255,255,255,.4);border-radius:.45rem}.hv-pin{position:absolute;width:.65rem;height:.12rem;background:rgba(255,255,255,.52)}.hv-pin:nth-of-type(2),.hv-pin:nth-of-type(3),.hv-pin:nth-of-type(4){left:-.65rem}.hv-pin:nth-of-type(5),.hv-pin:nth-of-type(6),.hv-pin:nth-of-type(7){right:-.65rem}.hv-pin:nth-of-type(2),.hv-pin:nth-of-type(5){top:1rem}.hv-pin:nth-of-type(3),.hv-pin:nth-of-type(6){top:2.75rem}.hv-pin:nth-of-type(4),.hv-pin:nth-of-type(7){bottom:1rem}

/* Deployment modes */
.hv-cloud>i{display:block;width:7rem;height:3rem;border-radius:3rem;background:rgba(255,255,255,.72);position:relative}.hv-cloud>i:before,.hv-cloud>i:after{content:"";position:absolute;border-radius:50%;background:inherit}.hv-cloud>i:before{width:3.4rem;height:3.4rem;left:1rem;top:-1.6rem}.hv-cloud>i:after{width:2.7rem;height:2.7rem;right:.8rem;top:-1.05rem}.hv-cloud-node{position:absolute;width:.45rem;height:.45rem;background:#4ade80;border-radius:50%;bottom:1.4rem}.hv-cloud-node.v-1{left:35%}.hv-cloud-node.v-2{left:50%}.hv-cloud-node.v-3{left:65%}
.hv-rack{width:70%;display:grid;gap:.45rem}.hv-server{height:1.55rem;border-radius:.35rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);position:relative}.hv-server:before{content:"";position:absolute;width:.35rem;height:.35rem;border-radius:50%;background:#4ade80;right:.75rem;top:50%;transform:translateY(-50%)}.hv-server:after{content:"";position:absolute;left:.7rem;right:2rem;top:50%;height:1px;background:rgba(255,255,255,.2)}
.hv-vault{width:6.2rem;height:7.2rem;border:.3rem solid rgba(255,255,255,.65);border-radius:.65rem;position:relative;background:rgba(255,255,255,.05)}.hv-door{position:absolute;inset:.5rem;border:1px solid rgba(255,255,255,.25);border-radius:.35rem}.hv-dial{position:absolute;width:2rem;height:2rem;border:.25rem double var(--brand-light);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.hv-layers{width:72%;height:75%;position:relative;perspective:30rem}.hv-layer{position:absolute;left:12%;right:12%;height:3.1rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);transform:rotateX(58deg) rotateZ(-8deg)}.hv-layer.v-1{top:0}.hv-layer.v-2{top:22%;left:18%;right:6%}.hv-layer.v-3{top:44%;left:24%;right:0}.hv-layer.v-4{top:66%;left:30%;right:-6%;background:rgba(37,99,201,.35)}

/* Resource and business visuals */
.hv-library{width:82%;height:75%;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;align-items:end}.hv-page{height:72%;border-radius:.45rem;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);transform:rotate(-3deg);position:relative}.hv-page:after{content:"";position:absolute;left:.5rem;right:.5rem;top:.75rem;height:1.5rem;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.35) 0 2px,transparent 2px 7px)}.hv-page.v-2{height:90%;transform:rotate(2deg)}.hv-page.v-3{height:65%}.hv-page.v-4{height:82%;transform:rotate(4deg);background:rgba(37,99,201,.35)}
.hv-terminal{width:82%;padding:1rem;border-radius:.6rem;background:#070713;border:1px solid rgba(255,255,255,.14);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;display:grid;gap:.55rem;color:rgba(255,255,255,.66)}.hv-terminal span:first-child{color:var(--brand-light)}.hv-terminal .ok{color:#4ade80}
.hv-timeline{width:82%;display:flex;align-items:center;justify-content:space-between;position:relative}.hv-timeline:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.22)}.hv-release{width:1.2rem;height:1.2rem;border-radius:50%;background:var(--brand-deep);border:.22rem solid var(--brand-light);position:relative}.hv-release:last-child{background:var(--brand);box-shadow:0 0 1rem rgba(87,144,230,.55)}
.hv-tickets{width:82%;display:grid;gap:.45rem}.hv-ticket{height:1.55rem;border-radius:.35rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);position:relative}.hv-ticket:before{content:"";position:absolute;left:.65rem;top:50%;transform:translateY(-50%);width:.38rem;height:.38rem;border-radius:50%;background:#4ade80}.hv-ticket:after{content:"";position:absolute;left:1.45rem;right:.7rem;top:50%;height:2px;background:rgba(255,255,255,.25)}.hv-ticket.v-3:before{background:#fbbf24}
.hv-plans{width:82%;height:78%;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;align-items:end}.hv-plan{height:72%;border-radius:.55rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}.hv-plan.v-2{height:100%;background:rgba(37,99,201,.32);border-color:rgba(87,144,230,.5)}
.hv-shield{width:5.7rem;height:6.7rem;background:linear-gradient(150deg,rgba(37,99,201,.75),rgba(87,144,230,.17));clip-path:polygon(50% 0,95% 18%,87% 73%,50% 100%,13% 73%,5% 18%);position:relative;display:grid;place-items:center}.hv-shield>i:first-child{width:1.5rem;height:2rem;border:.22rem solid rgba(255,255,255,.85);border-radius:.35rem;position:relative}.hv-shield>i:first-child:before{content:"";position:absolute;width:.85rem;height:.8rem;border:.2rem solid rgba(255,255,255,.85);border-bottom:0;border-radius:.6rem .6rem 0 0;left:50%;top:-.9rem;transform:translateX(-50%)}
.hv-orbit{position:absolute;border:1px solid rgba(87,144,230,.25);border-radius:50%;width:8rem;height:8rem}.hv-orbit.v-2{width:10rem;height:10rem}.hv-orbit.v-3{width:12rem;height:12rem}
.hv-document{width:6.2rem;height:7.7rem;border-radius:.55rem;background:rgba(255,255,255,.78);position:relative;box-shadow:1rem .9rem 0 rgba(37,99,201,.22)}.hv-document>i:first-child{position:absolute;right:0;top:0;border-style:solid;border-width:0 0 1.4rem 1.4rem;border-color:transparent transparent rgba(10,9,26,.25) transparent}.hv-copy-line{position:absolute;left:.8rem;right:.8rem;height:.18rem;background:rgba(10,9,26,.24);border-radius:1rem}.hv-copy-line.v-1{top:1.4rem}.hv-copy-line.v-2{top:2.3rem}.hv-copy-line.v-3{top:3.2rem;right:2rem}.hv-copy-line.v-4{top:4.5rem}.hv-copy-line.v-5{top:5.4rem;right:1.6rem}
.hv-people{display:flex;align-items:flex-end;gap:.65rem}.hv-person{width:1.8rem;height:3.5rem;border-radius:1rem 1rem .45rem .45rem;background:rgba(255,255,255,.12);position:relative}.hv-person:before{content:"";position:absolute;width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(255,255,255,.55);left:50%;top:-.65rem;transform:translateX(-50%)}.hv-person.v-3{height:4.4rem;background:rgba(37,99,201,.48)}
.hv-signal{width:82%;height:70%;position:relative;display:grid;align-content:center;gap:.7rem}.hv-stream{height:.24rem;border-radius:1rem;background:linear-gradient(90deg,transparent,rgba(255,255,255,.48) 55%,var(--brand));width:75%}.hv-stream.v-2{width:62%}.hv-stream.v-3{width:85%}.hv-stream.v-4{width:68%}.hv-core{position:absolute;width:2.7rem;height:2.7rem;background:var(--brand);right:0;top:50%;transform:translateY(-50%) rotate(45deg);border-radius:.35rem;box-shadow:0 0 1.5rem rgba(37,99,201,.5)}

@media (prefers-reduced-motion:no-preference){
  .hv-device:after,.hv-server:before{animation:hv-pulse 2.4s ease-in-out infinite}
}
@keyframes hv-pulse{50%{opacity:.4}}

/* ============ Bands (generic sections) ============ */
.band{padding:5rem 1.5rem}
@media (min-width:640px){ .band{padding-left:2.5rem;padding-right:2.5rem} }
.band-surface{background:var(--surface)}
.band-navy{background:var(--brand-deep);color:var(--on-brand);border-radius:var(--radius-card-lg);margin-top:0.75rem}
.band-overlap{background:var(--background);border-radius:var(--radius-card-lg);margin-top:-2.5rem;position:relative}
.band-head{max-width:46rem}
.band-head .title-xl{margin-top:1rem}
.lead{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;max-width:28rem;margin-top:1.5rem}
.band-navy .lead{color:rgba(255,255,255,0.7)}

/* ============ Numbered rows (programs pattern, generic) ============ */
.prog-list{margin-top:3.5rem}
.prog-row{display:block;text-decoration:none;border-top:1px solid var(--hairline);transition:background-color .25s ease}
li:last-child>.prog-row{border-bottom:1px solid var(--hairline)}
.prog-row:hover,.prog-row:focus-visible{background:var(--background)}
.band-navy .prog-row{border-color:rgba(255,255,255,0.15)}
.band-navy .prog-row:hover{background:rgba(255,255,255,0.06)}
.prog-inner{display:flex;align-items:center;gap:1.5rem;padding:1.75rem 0}
.prog-idx{width:2.5rem;flex:none;font-size:var(--text-sm);font-weight:500;color:var(--ink-soft)}
.band-navy .prog-idx{color:rgba(255,255,255,0.55)}
.prog-main{flex:1;min-width:0}
.prog-name{font-size:var(--text-2xl);font-weight:500;letter-spacing:-0.02em}
@media (min-width:640px){ .prog-name{font-size:var(--text-3xl)} }
.prog-desc{display:block;font-size:var(--text-sm);color:var(--ink-soft);margin-top:0.25rem}
.band-navy .prog-desc{color:rgba(255,255,255,0.65)}
.prog-arrow{width:2.75rem;height:2.75rem;flex:none;border-radius:var(--radius-pill);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--ink)}
.band-navy .prog-arrow{border-color:rgba(255,255,255,0.25);color:#fff}
.prog-arrow svg{width:1.25rem;height:1.25rem;opacity:0.55}

/* ============ Card grids ============ */
.card-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:640px){ .card-grid.cols-2{grid-template-columns:repeat(2,1fr)} .card-grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:768px){ .card-grid.cols-3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .card-grid.cols-4{grid-template-columns:repeat(4,1fr)} }
.info-card{display:flex;flex-direction:column;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.band-surface .info-card{background:var(--background)}
.band-navy .info-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12)}
.info-card h3{font-size:var(--text-lg);font-weight:500;letter-spacing:-0.01em}
.info-card p{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;margin-top:0.75rem}
.band-navy .info-card p{color:rgba(255,255,255,0.7)}
.ic-num{font-size:var(--text-sm);font-weight:500;color:var(--brand);margin-bottom:1rem}
.band-navy .ic-num{color:var(--brand-light)}
.ic-link{margin-top:auto;padding-top:1.25rem;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink);text-decoration:none}
.ic-link:hover{text-decoration:underline}
.band-navy .ic-link{color:#fff}

/* ============ Check list ============ */
.check-list{margin-top:1.25rem;display:flex;flex-direction:column;gap:0.625rem}
.check-list li{display:flex;gap:0.625rem;align-items:flex-start;font-size:var(--text-sm);color:var(--ink-soft);line-height:1.5}
.check-list svg{width:1rem;height:1rem;flex:none;color:var(--brand);margin-top:0.125rem}
.band-navy .check-list li{color:rgba(255,255,255,0.75)}
.band-navy .check-list svg{color:var(--brand-light)}

/* ============ Detail sections (capability / industry anchors) ============ */
.detail{border-top:1px solid var(--hairline);padding:3.5rem 0;display:grid;gap:2rem;scroll-margin-top:2rem}
@media (min-width:768px){ .detail{grid-template-columns:1fr 1fr;gap:2.5rem} }
.d-index{display:block;font-size:var(--text-sm);font-weight:500;color:var(--ink-soft);margin-bottom:0.75rem}
.detail h3{font-size:var(--text-3xl);font-weight:500;letter-spacing:-0.02em;line-height:1.05}
@media (min-width:640px){ .detail h3{font-size:var(--text-4xl)} }
.detail>div>p{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;margin-top:1rem;max-width:26rem}

/* ============ Stats (navy band) ============ */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem;margin-top:4rem}
@media (min-width:1024px){ .stats-grid{grid-template-columns:repeat(4,1fr)} }
.stat{border-top:1px solid rgba(255,255,255,0.2);padding-top:1.25rem}
.stat-val{display:block;font-size:var(--text-6xl);font-weight:500;letter-spacing:-0.02em;line-height:1}
@media (min-width:640px){ .stat-val{font-size:var(--text-7xl)} }
.stat-label{display:block;font-size:var(--text-sm);color:rgba(255,255,255,0.65);margin-top:0.75rem}

/* ============ Testimonial / quote cards ============ */
.t-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:768px){ .t-grid{grid-template-columns:repeat(3,1fr)} }
.t-grid li{display:flex}
.t-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:100%;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.band-surface .t-card{background:var(--background)}
.t-quote-mark{font-size:var(--text-4xl);color:var(--brand);line-height:1}
.t-card blockquote{font-size:var(--text-lg);line-height:1.625;color:var(--ink);margin-top:1rem}
.t-card figcaption{border-top:1px solid var(--hairline);padding-top:1rem;margin-top:1.5rem}
.t-name{font-weight:500}
.t-role{font-size:var(--text-sm);color:var(--ink-soft)}
.quote-band blockquote{font-size:var(--text-2xl);line-height:1.4;letter-spacing:-0.01em;max-width:44rem;margin-top:2rem}
@media (min-width:640px){ .quote-band blockquote{font-size:var(--text-3xl)} }

/* ============ Plans (pricing) ============ */
.plan-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:640px){ .plan-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .plan-grid{grid-template-columns:repeat(4,1fr)} }
.plan{display:flex;flex-direction:column;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.plan.featured{background:var(--brand-deep);color:#fff}
.plan-tag{display:inline-block;align-self:flex-start;font-size:var(--text-2xs);font-weight:500;text-transform:uppercase;letter-spacing:0.18em;border-radius:var(--radius-pill);background:rgba(255,255,255,0.15);padding:0.375rem 0.75rem;margin-bottom:1rem}
.plan-name{font-size:var(--text-lg);font-weight:500}
.plan-price{font-size:var(--text-4xl);font-weight:500;letter-spacing:-0.02em;margin-top:1rem}
.plan-price span{font-size:var(--text-sm);font-weight:400;letter-spacing:0;color:var(--ink-soft)}
.plan.featured .plan-price span{color:rgba(255,255,255,0.65)}
.plan-blurb{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.5;margin-top:0.5rem}
.plan.featured .plan-blurb{color:rgba(255,255,255,0.7)}
.plan .check-list{margin:1.5rem 0}
.plan.featured .check-list li{color:rgba(255,255,255,0.75)}
.plan.featured .check-list svg{color:var(--brand-light)}
.plan .pill{margin-top:auto;justify-content:center}

/* ============ Matrix / comparison table ============ */
.matrix-wrap{overflow-x:auto;margin-top:3.5rem;border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--background)}
.matrix{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:44rem}
.matrix th,.matrix td{padding:1rem 1.25rem;text-align:left;border-bottom:1px solid var(--hairline)}
.matrix thead th{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-soft);background:var(--surface)}
.matrix tbody tr:last-child td{border-bottom:0}
.matrix td{color:var(--ink-soft)}
.matrix td:first-child{color:var(--ink);font-weight:500}
.matrix .yes{color:var(--brand);font-weight:500}
.matrix .no{color:var(--ghost)}

/* ============ FAQ ============ */
.faq{margin-top:3.5rem;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;font-size:var(--text-lg);font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--text-2xl);color:var(--ink-soft);transition:transform .3s var(--ease-expo)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 0 1.5rem;font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;max-width:40rem}

/* ============ Tag strip (integrations, locations, chips) ============ */
.tag-strip{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2.5rem}
.tag-chip{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:0.625rem 1.125rem;color:var(--ink-soft)}
.band-navy .tag-chip{border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.75)}

/* ============ Ghost heading (oversized) ============ */
.ghost-h{pointer-events:none;user-select:none;font-size:var(--text-ghost);font-weight:500;text-transform:uppercase;line-height:1.02;letter-spacing:-0.02em;color:var(--ghost);margin-top:3rem}
.ghost-h .gw{display:inline-block;overflow:hidden;padding-bottom:0.12em;margin-bottom:-0.12em}
.ghost-h .gw-ink{color:var(--ink)}
.ghost-row{display:flex;justify-content:space-between}

/* ============ Legal / long-form prose ============ */
.prose{max-width:46rem;margin-top:3.5rem;color:var(--ink-soft);font-size:0.9375rem;line-height:1.75}
.prose section{scroll-margin-top:2rem}
.prose h2{font-size:var(--text-2xl);font-weight:500;letter-spacing:-0.01em;color:var(--ink);margin-top:3rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.0625rem;font-weight:500;color:var(--ink);margin-top:1.75rem}
.prose p{margin-top:1rem}
.prose ul{margin-top:1rem;padding-left:1.25rem;list-style:disc;display:flex;flex-direction:column;gap:0.5rem}
.prose a{color:var(--brand);text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose strong{color:var(--ink);font-weight:500}
.prose-updated{display:inline-block;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-soft);border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:0.5rem 1rem;margin-top:2rem}

/* ============ Footer ============ */
.site-footer{background:var(--brand-deep);color:var(--on-brand);border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:3.5rem 1.5rem}
@media (min-width:640px){ .site-footer{padding:4rem 2.5rem} }
.cta-band{border-bottom:1px solid rgba(255,255,255,0.15);padding-bottom:3.5rem;display:flex;flex-direction:column;gap:2rem}
@media (min-width:640px){ .cta-band{flex-direction:row;justify-content:space-between;align-items:flex-end} }
.cta-title{font-size:var(--text-6xl);font-weight:500;line-height:0.92;letter-spacing:-0.02em;margin-top:1rem}
.footer-cols{display:grid;gap:2.5rem;padding:3.5rem 0}
@media (min-width:640px){ .footer-cols{grid-template-columns:repeat(3,1fr)} .f-brand{grid-column:1/-1} }
@media (min-width:1024px){ .footer-cols{grid-template-columns:1.4fr repeat(5,1fr)} .f-brand{grid-column:auto} }
.f-brand{max-width:20rem}
.f-mark{display:flex;align-items:center;gap:0.5rem;font-size:var(--text-lg);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:#fff;text-decoration:none}
.f-mark svg{width:1.25rem;height:1.25rem}
.f-blurb{font-size:var(--text-sm);color:rgba(255,255,255,0.65);margin-top:1rem;line-height:1.625}
.f-brand address{font-style:normal;margin-top:1.5rem;color:rgba(255,255,255,0.8);font-size:var(--text-sm)}
.f-brand address a{display:block;text-decoration:none;margin-top:0.25rem}
.f-brand address a:hover{text-decoration:underline}
.f-muted{display:block;color:rgba(255,255,255,0.55);margin-top:0.25rem}
.f-col h3{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:rgba(255,255,255,0.5)}
.f-col h3 a{text-decoration:none}
.f-col h3 a:hover{color:#fff}
.f-col ul{margin-top:1.25rem;font-size:var(--text-sm);color:rgba(255,255,255,0.8)}
.f-col li + li{margin-top:0.75rem}
.f-col a{text-decoration:none}
.f-col a:hover{color:#fff}
.f-bottom{border-top:1px solid rgba(255,255,255,0.15);padding-top:2rem;font-size:var(--text-sm);color:rgba(255,255,255,0.6);display:flex;flex-direction:column;gap:1.25rem}
@media (min-width:640px){ .f-bottom{flex-direction:row;justify-content:space-between;align-items:center} }
.f-links{display:flex;gap:1.25rem}
.f-links a{text-decoration:none}
.f-links a:hover{color:#fff}

/* ============ Contact / demo modal ============ */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:0.75rem;pointer-events:none;visibility:hidden}
.modal.open{pointer-events:auto;visibility:visible}
@media (min-width:640px){ .modal{align-items:center;padding:1.5rem} }
.modal-backdrop{position:absolute;inset:0;background:rgba(var(--brand-deep-rgb),0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0}
.modal-panel{position:relative;width:100%;max-height:92svh;overflow-y:auto;border-radius:var(--radius-card-lg);background:var(--surface-card);color:var(--ink);padding:1.5rem;box-shadow:0 40px 90px -20px rgba(var(--brand-deep-rgb),0.5);opacity:0}
@media (min-width:640px){ .modal-panel{max-width:32rem;padding:2rem} }
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.modal-title{font-size:var(--text-4xl);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:0.75rem}
@media (min-width:640px){ .modal-title{font-size:var(--text-5xl)} }
.close-btn{width:2.5rem;height:2.5rem;flex:none;border:0;border-radius:var(--radius-pill);background:var(--surface);display:grid;place-items:center;transition:background-color .25s ease}
.close-btn:hover{background:var(--hairline)}
.close-btn svg{width:1.125rem;height:1.125rem}
.visit-form{margin-top:1.75rem;display:flex;flex-direction:column;gap:1rem}
.field label{display:block;font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink-soft);margin-bottom:0.5rem}
.field input,.field textarea{width:100%;border-radius:0.75rem;border:1px solid var(--hairline);background:var(--background);padding:0.75rem 1rem;font-size:var(--text-sm);color:var(--ink);resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand-light);box-shadow:0 0 0 3px rgba(87,144,230,0.25)}
.submit-btn{align-self:flex-start;border:0;border-radius:var(--radius-pill);background:var(--ink);color:#fff;padding:0.875rem 1.75rem;font-size:var(--text-sm);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;transition:background-color .25s ease,opacity .25s ease}
.submit-btn:hover{background:var(--brand-deep)}
.submit-btn:disabled{opacity:0.6;cursor:default}
.success{margin-top:2rem;border-radius:var(--radius-card);background:var(--surface);padding:1.5rem;text-align:center}
.success-check{width:3rem;height:3rem;margin:0 auto;border-radius:var(--radius-pill);background:var(--brand);display:grid;place-items:center;color:#fff}
.success-check svg{width:1.5rem;height:1.5rem}
.success h3{font-size:var(--text-lg);font-weight:500;margin-top:1rem}
.success p{font-size:var(--text-sm);color:var(--ink-soft);margin-top:0.5rem}
.success .pill-solid{margin-top:1.25rem}

/* ============ Fullscreen menu ============ */
.menu{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;pointer-events:none;visibility:hidden}
.menu.open{pointer-events:auto;visibility:visible}
.menu-backdrop{position:absolute;inset:0;background:var(--brand-deep);opacity:0}
.menu-panel{position:relative;flex:1;display:flex;flex-direction:column;color:#fff;padding:0.5rem;opacity:0}
@media (min-width:640px){ .menu-panel{padding:0.75rem} }
.menu-inner{flex:1;display:flex;flex-direction:column;padding:1.5rem;min-height:0}
@media (min-width:640px){ .menu-inner{padding:2rem 2.5rem} }
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-brand{display:flex;align-items:center;gap:0.5rem;font-size:var(--text-base);font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:#fff;text-decoration:none}
.menu-brand svg{width:1.25rem;height:1.25rem}
.menu-close{width:2.5rem;height:2.5rem;border:0;border-radius:var(--radius-pill);background:rgba(255,255,255,0.15);display:grid;place-items:center;color:#fff;transition:background-color .25s ease}
.menu-close:hover{background:rgba(255,255,255,0.25)}
.menu-close svg{width:1.125rem;height:1.125rem}
.menu-nav{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow-y:auto}
.menu-primary{margin:auto 0;padding:1.5rem 0;display:flex;flex-direction:column}
@media (min-width:1024px){ .menu-primary{width:52%} }
.menu-group{border-bottom:1px solid rgba(255,255,255,0.08)}
.menu-group:last-child{border-bottom:0}
@media (min-width:1024px){ .menu-group{border-bottom:0} }
.menu-glink{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;background:none;border:0;padding:0.55rem 0;color:#fff;font-size:2rem;font-weight:500;letter-spacing:-0.02em;line-height:1.05;text-align:left;text-decoration:none;transition:color .2s ease}
@media (min-width:640px){ .menu-glink{font-size:2.75rem} }
.menu-glink:hover{color:var(--brand-light)}
.menu-plus{width:1.375rem;height:1.375rem;flex:none;opacity:0.55;transition:transform .3s var(--ease-expo)}
.menu-group.open .menu-plus{transform:rotate(45deg)}
.menu-children{height:0;overflow:hidden;transition:height .4s var(--ease-expo)}
.menu-children-inner{display:flex;flex-direction:column;gap:0.65rem;padding:0.25rem 0 1.25rem}
.menu-children a{font-size:var(--text-base);color:rgba(255,255,255,0.75);text-decoration:none;transition:color .2s ease}
.menu-children a:hover{color:#fff}
.menu-child-label{display:none}
@media (min-width:1024px){
  .menu-glink{color:rgba(255,255,255,0.45)}
  .menu-glink:hover{color:var(--brand-light)}
  .menu-glink.current{color:rgba(255,255,255,0.75)}
  .menu-group.active>.menu-glink{color:#fff}
  .menu-plus{display:none}
  .menu-children{position:absolute;left:58%;right:0;top:50%;transform:translateY(-50%);height:auto;max-height:100%;overflow-y:auto;transition:none;display:none}
  .menu-group.active .menu-children{display:block}
  .menu-children-inner{gap:0.75rem;padding:0}
  .menu-children a{font-size:var(--text-lg);color:rgba(255,255,255,0.8)}
  .menu-child-label{display:inline-flex;margin-bottom:1rem}
}
.menu-bottom{border-top:1px solid rgba(255,255,255,0.15);padding-top:2rem;display:flex;flex-direction:column;gap:1.25rem}
@media (min-width:640px){ .menu-bottom{flex-direction:row;justify-content:space-between;align-items:center} }
.menu-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.menu-util{font-size:var(--text-sm);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.85);text-decoration:none}
.menu-util:hover{color:#fff;text-decoration:underline}
.menu-social{display:flex;gap:1.25rem;font-size:var(--text-sm);color:rgba(255,255,255,0.7)}
.menu-social a{text-decoration:none}
.menu-social a:hover{color:#fff}


/* ============================================================
   Home page (index.html) sections
   ============================================================ */
/* Collection slider */
.collection-slider{display:none;opacity:0}
@media (min-width:768px){ .collection-slider{display:flex;flex-direction:column;gap:0.75rem;width:16rem} }
.cs-holder{position:relative}
.cs-card{display:flex;gap:0.75rem;align-items:flex-start}
.cs-img{width:3.5rem;height:3.5rem;flex:none;border-radius:0.75rem;object-fit:cover}
.cs-info{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.cs-brand{font-size:0.7rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em}
.cs-title{font-size:0.7rem;text-transform:uppercase;opacity:0.8}
.cs-cta{font-size:var(--text-2xs);text-decoration:underline;margin-top:0.25rem}

/* Membership card */
.membership{width:100%;max-width:20rem;display:flex;gap:0.75rem;align-items:stretch;opacity:0}
@media (min-width:640px){ .membership{width:15rem;max-width:none} }
.mem-left{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:0.5rem;min-width:0}
.mem-value{font-size:var(--text-3xl);font-weight:500;line-height:1}
.avatars{display:flex}
.avatars span{width:1.25rem;height:1.25rem;border-radius:var(--radius-pill);border:1px solid rgba(var(--brand-deep-rgb),0.4)}
.avatars span + span{margin-left:-0.5rem}
.mem-cap{font-size:var(--text-2xs);opacity:0.8}
.mem-img{width:4rem;flex:none;aspect-ratio:3/4;border-radius:0.75rem;object-fit:cover;height:auto}

/* ============ Trust ============ */
.trust{position:relative;isolation:isolate;overflow:hidden;background:var(--background);padding:4rem 1.5rem}
@media (min-width:640px){ .trust{padding:5rem 2.5rem} }
.trust-top{position:relative;z-index:20;display:flex;flex-direction:column;gap:2rem}
@media (min-width:640px){ .trust-top{flex-direction:row;justify-content:space-between;align-items:flex-start} }
.pct-badge{width:7rem;height:7rem;flex:none;border-radius:var(--radius-pill);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0.25rem}
@media (min-width:640px){ .pct-badge{width:8rem;height:8rem} }
.pct{font-size:var(--text-2xl);font-weight:500}
.pct-cap{font-size:0.6rem;color:var(--ink-soft);max-width:7em}
.badge-card{max-width:28rem;display:flex;gap:1rem;align-items:flex-start;border-radius:var(--radius-card);background:var(--surface);padding:1.25rem}
@media (min-width:640px){ .badge-card{gap:1.25rem;padding:1.5rem} }
.badge-idx{flex:none;border-radius:0.75rem;background:var(--background);padding:0.5rem 1rem;font-size:var(--text-xl);font-weight:500}
.badge-title{font-size:var(--text-lg);font-weight:500}
.badge-body{font-size:var(--text-xs);color:var(--ink-soft);line-height:1.625;margin-top:0.375rem}

.trust-ghost{position:relative;z-index:0;pointer-events:none;user-select:none;max-width:88rem;margin:3rem auto 0;font-size:var(--text-ghost);font-weight:500;text-transform:uppercase;line-height:1.02;letter-spacing:-0.02em;color:var(--ghost)}
.ghost-row{display:flex;justify-content:space-between}
.gw{display:inline-block;overflow:hidden;padding-bottom:0.12em;margin-bottom:-0.12em}
.gw-ink{color:var(--ink)}

.coach-wrap{position:relative;z-index:10;width:13rem;margin:2.5rem auto 0}
@media (min-width:640px){ .coach-wrap{position:absolute;left:50%;top:50%;translate:-50% -50%;width:16rem;margin:0} }
.coach-card{position:relative;transform:rotate(6deg);aspect-ratio:3/4;border-radius:var(--radius-card);background:var(--brand);overflow:hidden}
.coach-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#coachImgB{opacity:0}
.coach-cap{background:rgba(var(--brand-deep-rgb),0.4)}
.coach-name{font-size:var(--text-sm);font-weight:500}
.coach-role{font-size:var(--text-2xs);opacity:0.8}

.trust-controls{position:relative;z-index:20;margin-top:3rem;display:flex;justify-content:space-between;align-items:center}
@media (min-width:640px){ .trust-controls{margin-top:6rem} }

/* ============ Programs ============ */
.programs{background:var(--surface);padding:6rem 1.5rem}
@media (min-width:640px){ .programs{padding-left:2.5rem;padding-right:2.5rem} }
.programs h2{margin-top:1rem}
.prog-list{margin-top:3.5rem}
.prog-row{display:block;text-decoration:none;border-top:1px solid var(--hairline);transition:background-color .25s ease}
.prog-row:hover,.prog-row:focus-visible{background:var(--background)}
.prog-inner{display:flex;align-items:center;gap:1.5rem;padding:1.75rem 0}
.prog-idx{width:2.5rem;flex:none;font-size:var(--text-sm);font-weight:500;color:var(--ink-soft)}
.prog-main{flex:1;min-width:0}
.prog-name{font-size:var(--text-2xl);font-weight:500;letter-spacing:-0.02em}
@media (min-width:640px){ .prog-name{font-size:var(--text-3xl)} }
.prog-desc{font-size:var(--text-sm);color:var(--ink-soft);margin-top:0.25rem}
.prog-arrow{width:2.75rem;height:2.75rem;flex:none;border-radius:var(--radius-pill);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--ink)}
.prog-arrow svg{width:1.25rem;height:1.25rem;opacity:0.55}

/* ============ Facilities ============ */
.facilities{position:relative;background:var(--background);border-radius:var(--radius-card-lg);margin-top:-2.5rem;padding:4rem 1.5rem 5rem}
@media (min-width:640px){ .facilities{padding-left:2.5rem;padding-right:2.5rem} }
.fac-grid{display:grid;grid-template-columns:1fr;align-items:end;gap:2.5rem}
@media (min-width:768px){ .fac-grid{grid-template-columns:1fr 1fr} }
.fac-intro{max-width:24rem}
.fac-icon{width:4rem;height:4rem;border-radius:var(--radius-card);object-fit:cover;opacity:0}
.fac-intro h2{margin-top:1.5rem}
.fac-body{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.625;max-width:20rem;margin-top:1.5rem}
.fac-cards{display:flex;align-items:flex-end;gap:1.25rem}
.court-card{position:relative;flex:1;aspect-ratio:3/4;border-radius:var(--radius-card);overflow:hidden;background:var(--surface)}
.court-card-2{margin-bottom:2rem}
.court-card img{width:100%;height:100%;object-fit:cover}
.court-cap{padding:0.75rem 1rem}
.cap-clay{background:rgba(var(--brand-deep-rgb),0.4)}
.cap-blue{background:rgba(11,110,151,0.55)}
.court-name{font-size:var(--text-sm);font-weight:500}
.court-desc{font-size:var(--text-2xs);opacity:0.85;margin-top:0.125rem}

/* ============ Stats ============ */
.stats{background:var(--brand-deep);color:var(--on-brand);border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:5rem 1.5rem}
@media (min-width:640px){ .stats{padding-left:2.5rem;padding-right:2.5rem} }
.stats h2{margin-top:1rem}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;row-gap:3rem;margin-top:4rem}
@media (min-width:1024px){ .stats-grid{grid-template-columns:repeat(4,1fr)} }
.stat{border-top:1px solid rgba(255,255,255,0.2);padding-top:1.25rem}
.stat-val{display:block;font-size:var(--text-6xl);font-weight:500;letter-spacing:-0.02em;line-height:1}
@media (min-width:640px){ .stat-val{font-size:var(--text-7xl)} }
.stat-label{display:block;font-size:var(--text-sm);color:rgba(255,255,255,0.65);margin-top:0.75rem}

/* ============ Testimonials ============ */
.testimonials{background:var(--background);padding:5rem 1.5rem}
@media (min-width:640px){ .testimonials{padding:6rem 2.5rem} }
.testimonials h2{margin-top:1rem}
.t-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3.5rem}
@media (min-width:768px){ .t-grid{grid-template-columns:repeat(3,1fr)} }
.t-grid li{display:flex}
.t-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:100%;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.t-quote-mark{font-size:var(--text-4xl);color:var(--brand);line-height:1}
.t-card blockquote{font-size:var(--text-lg);line-height:1.625;color:var(--ink);margin-top:1rem}
.t-card figcaption{border-top:1px solid var(--hairline);padding-top:1rem;margin-top:1.5rem}
.t-name{font-weight:500}
.t-role{font-size:var(--text-sm);color:var(--ink-soft)}

/* ============ Hive home visuals (CSS-built, no photos) ============ */
.hero-grid{position:absolute;inset:-2% 0;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;gap:0.75rem;padding:1rem;opacity:0.9}
.hg-cell{border-radius:0.75rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);display:grid;place-items:center}
.hg-dot{width:0.4rem;height:0.4rem;border-radius:var(--radius-pill);background:var(--brand-light)}
.hg-cell.ok .hg-dot{background:#4ade80}
.hg-cell.warn .hg-dot{background:var(--brand-yellow)}
.hg-cell.dim .hg-dot{opacity:0.22}
.cs-thumb{width:3.5rem;height:3.5rem;flex:none;border-radius:0.75rem;background:var(--brand-deep);border:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;gap:0.3rem;align-items:flex-start;justify-content:center;padding:0.6rem}
.cs-thumb span{display:block;height:0.28rem;border-radius:var(--radius-pill);background:rgba(255,255,255,0.35)}
.cs-thumb span:nth-child(1){width:70%}
.cs-thumb span:nth-child(2){width:45%;background:var(--brand-yellow)}
.cs-thumb span:nth-child(3){width:58%}
.mem-visual{width:4rem;flex:none;aspect-ratio:3/4;border-radius:0.75rem;background:var(--brand-deep);border:1px solid rgba(255,255,255,0.15);display:grid;grid-template-columns:repeat(2,1fr);gap:0.35rem;padding:0.5rem;align-content:center}
.mem-visual i{display:block;aspect-ratio:1;border-radius:0.4rem;background:rgba(255,255,255,0.12)}
.mem-visual i.on{background:var(--brand-light)}
.console-mock{position:absolute;inset:0;background:linear-gradient(160deg,#1c1b40,var(--brand-deep));display:flex;flex-direction:column;gap:0.65rem;padding:1.1rem 1.1rem 4.5rem}
.cm-row{display:flex;align-items:center;gap:0.5rem}
.cm-dot{width:0.45rem;height:0.45rem;border-radius:var(--radius-pill);background:#4ade80;flex:none}
.cm-dot.warn{background:var(--brand-yellow)}
.cm-dot.err{background:#f87171}
.cm-bar{height:0.35rem;border-radius:var(--radius-pill);background:rgba(255,255,255,0.25)}
.court-link{flex:1;display:block;text-decoration:none;color:inherit}
.court-link .court-card{width:100%}
.court-visual{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;padding:1rem;align-content:start}
.court-visual i{display:block;aspect-ratio:1;border-radius:0.6rem;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.12)}
.cv-vending{background:linear-gradient(170deg,#232152,var(--brand-deep))}
.cv-retail{background:linear-gradient(170deg,var(--accent-teal),#07344a)}
a.tag-chip{text-decoration:none;transition:border-color .2s ease,color .2s ease}
.band-navy a.tag-chip:hover{border-color:#fff;color:#fff}
.band-surface a.tag-chip:hover,.band a.tag-chip:hover{border-color:var(--ink);color:var(--ink)}
.cta-stack{display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:640px){ .cta-stack{align-items:flex-end} }
.cta-links{display:flex;gap:1.25rem;margin-top:1rem;font-size:var(--text-sm)}
.cta-links a{color:rgba(255,255,255,0.75);text-decoration:none}
.cta-links a:hover{color:#fff;text-decoration:underline}

/* Photo treatments for home visuals */
img.cv-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center;padding:0;border:0}
.console-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;background:var(--brand-deep)}

/* Floating product renders inside industry tiles */
.court-card .cv-product{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;margin:auto;padding:0;border:0;filter:drop-shadow(0 1.5rem 2rem rgba(0,0,0,0.45))}
