/* ============================================================
   Eclatprime AI — Midnight Glass Design System
   Theme reference: dark indigo glass, luminous blue→cyan glow,
   floating pill nav, cinematic hero, frosted cards.
   ============================================================ */

:root {
  /* Ground */
  --bg-0: #04060D;
  --bg-1: #070B18;
  --bg-2: #0A1124;
  /* Glass surfaces */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.075);
  --stroke: rgba(148, 196, 255, 0.14);
  --stroke-2: rgba(148, 196, 255, 0.30);
  /* Text */
  --text-hi: #EAF2FF;
  --text-mid: rgba(214, 228, 255, 0.72);
  --text-low: rgba(214, 228, 255, 0.52);
  /* Brand */
  --blue: #007BFF;
  --sky: #00C2FF;
  --cyan: #00E5FF;
  --grad: linear-gradient(92deg, #007BFF 0%, #00C2FF 55%, #00E5FF 100%);
  --glow-blue: rgba(0, 123, 255, 0.35);
  --glow-cyan: rgba(0, 229, 255, 0.20);
  /* Shape */
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 28px;
  --pill: 999px;
  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 650ms;
  /* Type */
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Layout */
  --container: 76rem;
  --nav-h: 86px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { color: var(--text-hi); font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
::selection { background: rgba(0, 123, 255, 0.4); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #16233F; border-radius: 99px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: #1F3157; }

/* Focus */
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--bg-2); color: var(--text-hi);
  padding: 10px 18px; border-radius: var(--pill);
  border: 1px solid var(--stroke-2);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* ---------- Ambient background ---------- */
.ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(52rem 34rem at 82% -8%, rgba(0, 90, 220, 0.16), transparent 62%),
    radial-gradient(40rem 30rem at -10% 26%, rgba(0, 170, 255, 0.10), transparent 60%),
    radial-gradient(46rem 40rem at 50% 118%, rgba(0, 100, 240, 0.12), transparent 62%),
    var(--bg-0);
}
.stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.7;
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  pointer-events: none; will-change: transform; z-index: 0;
}
.orb-a { width: 30rem; height: 30rem; background: rgba(0, 108, 255, 0.20); top: -8rem; right: -8rem; }
.orb-b { width: 24rem; height: 24rem; background: rgba(0, 229, 255, 0.10); bottom: -6rem; left: -7rem; }

/* ---------- Layout primitives ---------- */
.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }
.section { position: relative; padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0, 229, 255, 0.07);
  border: 1px solid rgba(0, 229, 255, 0.22);
  padding: 0.42rem 1rem; border-radius: var(--pill);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 12px var(--cyan);
}
.h-display {
  font-size: clamp(2.6rem, 7.2vw, 5.2rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.02;
}
.h-section { font-size: clamp(1.85rem, 4vw, 2.9rem); font-weight: 700; }
.h-card { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em; }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--text-mid); max-width: 62ch; }
.text-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section-head { display: grid; gap: 1.1rem; justify-items: start; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); max-width: 60rem; }
.section-head.center { justify-items: center; text-align: center; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.55rem; border-radius: var(--pill);
  font-weight: 600; font-size: 0.95rem; font-family: var(--font-body);
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease),
              background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn .arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  transition: transform var(--t-med) var(--ease);
}
.btn:hover .arr { transform: translateX(3px); }
.btn-primary { background: #fff; color: #06122B; box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn-primary .arr { background: var(--grad); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 44px -10px rgba(0, 160, 255, 0.55); }
.btn-glass { background: var(--glass); color: var(--text-hi); border-color: var(--stroke); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-glass .arr { background: rgba(255,255,255,0.1); color: var(--text-hi); }
.btn-glass:hover { transform: translateY(-2px); border-color: var(--stroke-2); background: var(--glass-2); box-shadow: 0 12px 36px -14px rgba(0, 140, 255, 0.45); }
.btn-grad {
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 30px -8px var(--glow-blue);
  position: relative; overflow: hidden;
}
.btn-grad::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease);
}
.btn-grad:hover::after { transform: translateX(120%); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -10px var(--glow-blue); }
.btn-grad .arr { background: rgba(255,255,255,0.18); color: #fff; }

/* ---------- Header / nav ---------- */
/* Deep navy glass bar: distinctly lighter/bluer than the near-black page so the
   header still reads as its own band, with a thick luminous border. The only
   white in the bar is the compact plate under the logo, which the full-colour
   mark needs (its wordmark is navy and its tagline is black). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(14, 23, 48, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 2px solid rgba(126, 184, 255, 0.26);
  box-shadow: 0 6px 28px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease);
}
.site-header.scrolled {
  background: rgba(10, 17, 38, 0.94);
  border-color: rgba(126, 184, 255, 0.36);
  box-shadow: 0 10px 36px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* keep the CTA on the brand gradient — the default .btn-primary is white, which
   would put a second white block back into the bar */
.site-header .nav-cta { background: var(--grad); color: #fff; border: 0; }
.site-header .nav-cta .arr { background: rgba(255, 255, 255, 0.26); color: #fff; }
.site-header .nav-cta:hover { box-shadow: 0 12px 30px -10px rgba(0, 140, 255, 0.6); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-h); position: relative; z-index: 95; }
/* full-colour logo seated on a white plate so its navy wordmark + black tagline
   read on the dark bar; sized snug to the artwork to keep the white minimal */
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #fff; padding: 6px 14px; border-radius: 12px;
  box-shadow: 0 4px 18px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(180, 214, 255, 0.35);
  transition: box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-quick) var(--ease-standard);
}
.brand:hover { transform: translateY(-1px); box-shadow: 0 8px 26px -8px rgba(0, 150, 255, 0.6), 0 0 0 1px rgba(140, 200, 255, 0.6); }
.brand img { height: 46px; width: auto; display: block; }
@media (max-width: 640px) { .brand { padding: 5px 11px; } .brand img { height: 36px; } }
.nav-pill {
  display: none; align-items: center; gap: 0.15rem;
  background: rgba(10, 16, 34, 0.6);
  border: 1px solid var(--stroke);
  border-radius: var(--pill); padding: 0.3rem;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
@media (min-width: 1024px) { .nav-pill { display: flex; } }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 1.05rem; border-radius: var(--pill);
  color: var(--text-mid); font-size: 0.92rem; font-weight: 500;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  background: transparent; border: 0;
}
.nav-link:hover, .nav-item.open > .nav-link { color: var(--text-hi); background: rgba(255, 255, 255, 0.07); }
.nav-link .chev { transition: transform var(--t-med) var(--ease); }
.nav-item.open > .nav-link .chev { transform: rotate(180deg); }
.nav-cta { display: none; }
@media (min-width: 1024px) { .nav-cta { display: inline-flex; padding: 0.62rem 1.3rem; font-size: 0.9rem; } }

/* Dropdown panels */
.panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  translate: -50% 8px;
  min-width: 240px;
  background: rgba(8, 13, 28, 0.97);
  border: 1px solid var(--stroke);
  border-radius: var(--r-m);
  padding: 0.6rem;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0,0,0,0.2), 0 10px 50px -20px var(--glow-blue);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), translate var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.nav-item.open > .panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  translate: -50% 0; transition-delay: 0s;
}
.panel a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem; border-radius: 10px;
  font-size: 0.92rem; color: var(--text-mid); white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.panel a:hover { background: rgba(0, 123, 255, 0.12); color: var(--text-hi); padding-left: 1.05rem; }
.panel .p-label {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-low); font-weight: 600; padding: 0.7rem 0.85rem 0.35rem;
}
.panel-mega { display: grid; grid-template-columns: repeat(4, auto); gap: 0.4rem 1.6rem; padding: 1rem; max-width: min(94vw, 1040px); overflow-x: auto; }
.panel-cols { display: grid; grid-template-columns: repeat(2, auto); gap: 0.4rem 1.4rem; padding: 0.8rem; }

/* Mobile nav */
.nav-burger {
  display: inline-flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--pill);
  background: var(--glass); border: 1px solid var(--stroke);
}
.nav-burger span { width: 18px; height: 2px; background: var(--text-hi); border-radius: 2px; transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
@media (min-width: 1024px) { .nav-burger { display: none; } }
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 6, 13, 0.96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; transition-delay: 0s; }
body.nav-open { overflow: hidden; }
.m-group { border-bottom: 1px solid var(--stroke); }
.m-group > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; color: var(--text-hi);
  font-size: 1.05rem; font-weight: 600; font-family: var(--font-display);
  padding: 1.05rem 0.2rem;
}
.m-group > button .chev { transition: transform var(--t-med) var(--ease); }
.m-group.open > button .chev { transform: rotate(180deg); }
.m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease); }
.m-group.open .m-sub { grid-template-rows: 1fr; }
.m-sub > div { overflow: hidden; }
.m-sub a { display: block; padding: 0.5rem 0.9rem; color: var(--text-mid); font-size: 0.95rem; border-radius: 8px; }
.m-sub a:hover { color: var(--text-hi); background: rgba(255,255,255,0.05); }
.m-sub .p-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-low); font-weight: 600; padding: 0.75rem 0.9rem 0.2rem; }
.mobile-nav .m-ctas { display: grid; gap: 0.8rem; padding-top: 1.5rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 8vw, 6.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.hero-inner { position: relative; z-index: 2; display: grid; gap: 1.4rem; justify-items: center; text-align: center; }
.hero .h-display { max-width: 16ch; }
.hero .lede { max-width: 72ch; text-align: center; }
.hero-sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); letter-spacing: -0.01em;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 0.6rem; }
.hero-frame {
  position: relative; margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--r-l);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  padding: 0.6rem;
  box-shadow: 0 40px 120px -30px rgba(0, 110, 255, 0.35), 0 0 0 1px rgba(0,0,0,0.3);
  max-width: 58rem; width: 100%;
}
.hero-frame::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, rgba(0,123,255,0.55), transparent 30%, transparent 70%, rgba(0,229,255,0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.hero-frame img { border-radius: calc(var(--r-l) - 8px); width: 100%; }
.hero-visual { width: 100%; height: auto; display: block; border-radius: calc(var(--r-l) - 8px); background: radial-gradient(120% 100% at 50% 0%, rgba(10,20,42,.6), rgba(4,7,16,.9)); }
/* hero-visual motion (enriched) */
@media (prefers-reduced-motion: no-preference) {
  .hv-breathe { animation: hvBreathe 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes hvBreathe { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: .8; transform: scale(1.1); } }
  .hv-float { animation: hvFloat 5s ease-in-out infinite; transform-box: fill-box; }
  @keyframes hvFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .hv-dash { stroke-dasharray: 5 9; animation: hvDash 1.7s linear infinite; }
  @keyframes hvDash { to { stroke-dashoffset: -28; } }
  .hv-ring { animation: hvSpin 40s linear infinite; transform-box: fill-box; transform-origin: center; }
  .hv-ring.rev { animation: hvSpin 30s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
  .hv-sweep { animation: hvSpin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes hvSpin { to { transform: rotate(360deg); } }
  .hv-bob { animation: hvBob 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes hvBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  .hv-twinkle { animation: hvTwinkle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes hvTwinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .hv-breathe, .hv-float, .hv-dash, .hv-ring, .hv-sweep, .hv-bob, .hv-twinkle { animation: none !important; }
}
.hero-glow {
  position: absolute; left: 50%; top: 20%; translate: -50% 0; z-index: 0;
  width: min(70rem, 110vw); height: 30rem; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 120, 255, 0.28), transparent 70%);
  filter: blur(30px);
}

/* Entrance sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-enter] { opacity: 0; transform: translateY(26px); animation: enter 0.9s var(--ease) forwards; }
  .hero [data-enter="1"] { animation-delay: 0.05s; }
  .hero [data-enter="2"] { animation-delay: 0.16s; }
  .hero [data-enter="3"] { animation-delay: 0.28s; }
  .hero [data-enter="4"] { animation-delay: 0.4s; }
  .hero [data-enter="5"] { animation-delay: 0.52s; }
  .hero [data-enter="6"] { animation-delay: 0.68s; }
  @keyframes enter { to { opacity: 1; transform: none; } }
}

/* ---------- Scroll reveals ---------- */
[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: var(--rd, 0ms);
  }
  [data-reveal].in { opacity: 1; transform: none; }
  [data-reveal="left"] { transform: translateX(-28px); }
  [data-reveal="right"] { transform: translateX(28px); }
  [data-reveal="left"].in, [data-reveal="right"].in { transform: none; }
  [data-reveal="scale"] { transform: scale(0.94); }
  [data-reveal="scale"].in { transform: none; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r-m);
  padding: 1.7rem;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--stroke-2);
  background: var(--glass-2);
  box-shadow: 0 24px 60px -22px rgba(0, 120, 255, 0.45);
}
.card h3 { margin-bottom: 0.55rem; }
.card p { font-size: 0.95rem; color: var(--text-mid); }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  background: linear-gradient(135deg, rgba(0,123,255,0.28), rgba(0,229,255,0.12));
  border: 1px solid var(--stroke-2);
  color: var(--cyan);
  margin-bottom: 1.1rem;
  box-shadow: inset 0 0 18px rgba(0, 160, 255, 0.14);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.card:hover .chip { transform: scale(1.08) rotate(-4deg); box-shadow: inset 0 0 22px rgba(0,190,255,0.3), 0 6px 20px -6px var(--glow-blue); }
.chip svg { width: 22px; height: 22px; }

/* Product cards */
.product-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 2rem; border-radius: var(--r-l); overflow: hidden; }
.product-card::after {
  content: ""; position: absolute; inset: auto -30% -55% -30%; height: 70%;
  background: radial-gradient(closest-side, rgba(0, 140, 255, 0.16), transparent 70%);
  opacity: 0; transition: opacity var(--t-slow) var(--ease); pointer-events: none;
}
.product-card:hover::after { opacity: 1; }
.product-card .cat { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--cyan); }
.product-card h3 { font-size: 1.5rem; }
.product-card p { flex: 1; }
.product-card .row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.94rem; color: var(--text-hi); }
.link-arrow svg { transition: transform var(--t-med) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--cyan); }

/* ---------- Framework (6 steps) ---------- */
.framework { position: relative; }
.fw-grid { display: grid; gap: 1.2rem; counter-reset: fw; position: relative; z-index: 1; }
@media (min-width: 720px) { .fw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fw-grid { grid-template-columns: repeat(3, 1fr); } }
.fw-step { counter-increment: fw; padding: 1.6rem; }
.fw-step .num {
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--cyan); letter-spacing: 0.1em;
}
.fw-step .num::before { content: "0" counter(fw); font-size: 1.6rem; margin-right: 0.4rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fw-step h3 { margin: 0.5rem 0 0.5rem; font-size: 1.25rem; }
.fw-coda {
  margin-top: 2.4rem; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--text-hi);
}
.fw-line { height: 2px; width: min(320px, 60%); margin: 1rem auto 0; background: var(--grad); border-radius: 2px;
  transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .fw-line { transform: scaleX(0); transition: transform 1.1s var(--ease) 0.15s; }
  .fw-line.in { transform: scaleX(1); }
}

/* ---------- Split sections ---------- */
.split { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } .split.rev > .split-media { order: -1; } }
.split-media { position: relative; }
.media-frame {
  position: relative; border-radius: var(--r-l);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  padding: 2rem; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 110, 255, 0.35);
  min-height: 280px; display: grid; place-items: center;
}
.media-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(140,190,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,190,255,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(closest-side at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000, transparent);
}

/* Floating robot / motif */
.float {
  animation: floaty 5.5s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

/* Orbit motif (SVG rings) */
.orbit-spin { transform-origin: center; animation: spin 26s linear infinite; }
.orbit-spin.slow { animation-duration: 44s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit-spin { animation: none; } }
.pulse-dot { animation: pulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* ---------- Checklist ---------- */
.checks { display: grid; gap: 0.9rem; }
@media (min-width: 720px) { .checks { grid-template-columns: 1fr 1fr; } }
.check {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1.05rem 1.2rem; border-radius: var(--r-s);
  background: var(--glass); border: 1px solid var(--stroke);
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  font-size: 0.98rem; color: var(--text-hi); font-weight: 500;
}
.check:hover { border-color: var(--stroke-2); background: var(--glass-2); transform: translateX(4px); }
.check .ck {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--grad); color: #fff;
  box-shadow: 0 0 14px rgba(0, 180, 255, 0.5);
}
.check .ck svg { width: 13px; height: 13px; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; position: relative; padding-block: 0.35rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee + .marquee { margin-top: 0.9rem; }
.marquee-track {
  display: flex; gap: 1rem; width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee-track.rev { animation-duration: 50s; animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
/* Partner logo chips: official logo on a white chip so full-colour marks read
   on the dark surface; clean text wordmark where a logo file isn't present. */
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 58px; padding: 8px 22px; border-radius: 12px; flex: none;
  background: #fff; box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.5);
  transition: transform var(--motion-quick) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.logo-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(0, 140, 255, 0.4); }
/* scale each logo to fill the chip and stay centred, whatever its aspect ratio */
.logo-chip img { max-height: 46px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.logo-chip--text { font-family: var(--font-display); font-weight: 700; color: #24395F; font-size: 0.98rem; white-space: nowrap; }
/* Sizing is picked at build time from each logo's aspect ratio so every mark
   carries the same optical weight: square/vertical lockups (Python, Azure, AWS,
   scikit-learn) scale taller; long wordmarks (Google Cloud, FastAPI, Pinecone)
   are width-limited, so they get the full chip width to work with. */
.logo-chip--box img { max-height: 54px; }
.logo-chip--wide { padding-left: 12px; padding-right: 12px; }
.marquee-track .logo-chip { height: 62px; min-width: 92px; }

/* ---------- Technology-stack grid (categorized) ---------- */
.stack-grid { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stack-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .stack-grid { grid-template-columns: repeat(5, 1fr); } }
.stack-card { padding: 1.5rem 1.4rem; }
.stack-card .st-cat {
  display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); font-weight: 600; margin-bottom: 1.2rem;
}
.stack-list { display: grid; gap: 0.8rem; }
.stack-item { display: block; }
.stack-item .logo-chip { display: flex; width: 100%; height: 72px; justify-content: center; padding: 9px 16px; }
.stack-item .logo-chip img { max-height: 52px; max-width: 100%; width: auto; height: auto; }
.stack-item .logo-chip--box img { max-height: 64px; }
.stack-item .logo-chip--wide { padding-left: 9px; padding-right: 9px; }
.stack-item .logo-chip--text { font-size: 1.02rem; }

/* Stats band (.stats/.stat) removed with the achievements section, 26 Jul 2026. */

/* ---------- Forms ---------- */
.form-wrap {
  border-radius: var(--r-l); border: 1px solid var(--stroke);
  background: linear-gradient(170deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  padding: clamp(1.6rem, 4vw, 2.6rem);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  position: relative; overflow: hidden;
}
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.86rem; font-weight: 600; color: var(--text-hi); }
.field label .req { color: var(--cyan); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1.05rem;
  background: rgba(5, 9, 20, 0.6);
  border: 1px solid var(--stroke); border-radius: var(--r-s);
  color: var(--text-hi); font: inherit; font-size: 0.95rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-low); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: rgba(0, 160, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.18); background: rgba(6, 12, 26, 0.8);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2388A9D8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field select:invalid { color: var(--text-low); }
.field .err { font-size: 0.8rem; color: #FF8A9A; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: rgba(255, 90, 110, 0.6); }
.field.invalid .err { display: block; }
.form-note { font-size: 0.82rem; color: var(--text-low); }
.form-success {
  display: none; text-align: center; padding: 2.5rem 1rem;
}
.form-success.show { display: block; }
.form-success .big { font-size: 1.3rem; color: var(--text-hi); font-weight: 600; font-family: var(--font-display); margin-bottom: 0.5rem; }
form.hidden { display: none; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-l); border: 1px solid var(--stroke-2);
  padding: clamp(2.6rem, 6vw, 4.5rem);
  text-align: center;
  background:
    radial-gradient(42rem 22rem at 50% 120%, rgba(0, 120, 255, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
.cta-band .h-section { max-width: 26ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; margin-top: 1.1rem; }
.cta-band .hero-ctas { margin-top: 1.8rem; }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-low); }
.crumbs a:hover { color: var(--cyan); }
.crumbs .sep { opacity: 0.5; }
.crumbs .cur { color: var(--text-mid); }

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-hero .h-display { font-size: clamp(2.3rem, 5.6vw, 4rem); }

/* ---------- Numbered outcomes ---------- */
.num-card .n {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: block; margin-bottom: 0.6rem;
}

/* ---------- Locations ---------- */
.loc-card { padding: 1.4rem 1.5rem; }
.loc-card .city { font-weight: 600; color: var(--text-hi); font-family: var(--font-display); font-size: 1.02rem; display: flex; gap: 0.5rem; align-items: center; }
.loc-card .city svg { color: var(--cyan); flex: none; }
.loc-card .addr { font-size: 0.88rem; color: var(--text-mid); margin-top: 0.45rem; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--stroke);
  background: linear-gradient(180deg, transparent, rgba(0, 60, 160, 0.08));
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  position: relative; overflow: hidden;
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer .brand img { height: 34px; }
.site-footer .f-desc { margin-top: 1rem; font-size: 0.92rem; max-width: 34ch; color: var(--text-mid); }
.f-col .f-head { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-low); font-weight: 600; margin-bottom: 1rem; }
.f-col a { display: block; padding: 0.3rem 0; color: var(--text-mid); font-size: 0.95rem; transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
.f-col a:hover { color: var(--cyan); padding-left: 4px; }
.f-contact { display: grid; gap: 0.5rem; font-size: 0.95rem; }
.f-contact a { display: inline-flex; align-items: center; gap: 0.5rem; }
.socials { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--text-mid);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
}
.socials a:hover { transform: translateY(-3px); color: var(--cyan); border-color: var(--stroke-2); box-shadow: 0 8px 24px -8px var(--glow-blue); }
.socials svg { width: 17px; height: 17px; }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--stroke);
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-low);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; translate: -50% 20px; z-index: 300;
  background: rgba(8, 14, 30, 0.95); border: 1px solid var(--stroke-2);
  color: var(--text-hi); padding: 0.9rem 1.4rem; border-radius: var(--pill);
  font-size: 0.92rem; opacity: 0; visibility: hidden;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.8), 0 0 40px -10px var(--glow-blue);
  transition: opacity var(--t-med) var(--ease), translate var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  max-width: min(92vw, 460px); text-align: center;
}
.toast.show { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-1 { margin-top: 0.6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--stroke-2), transparent); border: 0; margin: 0; }

/* ============================================================
   MOTION SYSTEM v2 (PRD: tokens, fade-through routing,
   container transform, smart nav, signature hero, assistant)
   ============================================================ */

/* ---------- 4.3 Motion tokens ---------- */
:root {
  --motion-instant: 100ms;
  --motion-quick:   180ms;
  --motion-base:    280ms;
  --motion-page:    400ms;
  --motion-hero:    900ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --motion-rise: 24px; --motion-rise-lg: 48px;
  --motion-stagger: 60ms; --motion-scale-in: 0.96;
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-instant: 0ms; --motion-quick: 0ms; --motion-base: 0ms;
          --motion-page: 0ms; --motion-hero: 0ms;
          --motion-rise: 0px; --motion-rise-lg: 0px; --motion-scale-in: 1; }
}

/* ---------- 5.1 Route transitions: cross-document fade-through ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out var(--motion-quick) var(--ease-accelerate) both;
  }
  ::view-transition-new(root) {
    animation: vt-in var(--motion-base) var(--ease-decelerate) 40ms both;
  }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* container transform: home card title -> product hero title */
[data-vt="eliberate"]     { view-transition-name: vt-eliberate; }
[data-vt="fraudlens-ai"]  { view-transition-name: vt-fraudlens-ai; }
[data-vt="prama-nova"]    { view-transition-name: vt-prama-nova; }
[data-vt="eforgeiq"]      { view-transition-name: vt-eforgeiq; }

/* ---------- 5.1 Smart sticky nav (hide down, return up) ---------- */
.site-header { transform: translateY(0); transition: transform var(--motion-base) var(--ease-standard), background var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.site-header.nav-hidden { transform: translateY(-100%); }
body.nav-open .site-header.nav-hidden { transform: none; }

/* nav link underline: scaleX in from left, exit right */
.f-col a, .crumbs a, .panel a { position: relative; }
.u-line { position: relative; }
.u-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-quick) var(--ease-standard);
}
.u-line:hover::after, .u-line:focus-visible::after { transform: scaleX(1); }

/* ---------- 5.1 Scroll-progress hairline ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------- 5.2 Signature hero: signal-from-noise canvas ---------- */
.hero-particles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero .hero-inner { will-change: transform; }
.hero-static-constellation { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-particles { display: none; }
  .hero-static-constellation { display: block; position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none; }
}

/* magnetic CTA is decorative: transform only on the visual */
.btn-magnetic { will-change: transform; }

/* one-time sheen on hero primary after entrance */
@media (prefers-reduced-motion: no-preference) {
  .sheen-once { position: relative; overflow: hidden; }
  .sheen-once::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.5) 50%, transparent 62%);
    transform: translateX(-130%); animation: sheen 900ms var(--ease-standard) 1.5s 1 both;
  }
  @keyframes sheen { to { transform: translateX(130%); } }
}

/* ---------- 5.4 Product-card glyphs ---------- */
.pc-glyph { position: absolute; top: 1.6rem; right: 1.6rem; width: 54px; height: 54px; opacity: 0.9; }
.product-card { position: relative; }
.pc-glyph .g-anim { transition: transform var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard); }
@media (prefers-reduced-motion: no-preference) {
  .product-card:hover .g-lens { animation: g-sweep 1.1s var(--ease-standard) 1; }
  @keyframes g-sweep { 0% { transform: translateX(-8px); } 55% { transform: translateX(8px); } 100% { transform: translateX(0); } }
  .product-card:hover .g-flag { animation: g-flag 1.1s var(--ease-standard) 1; }
  @keyframes g-flag { 0%, 45% { fill: #7FB6FF; } 60%, 100% { fill: #FF5A6E; } }
  .product-card:hover .g-orbit { animation: g-orbit 1.2s var(--ease-standard) 1; transform-origin: center; }
  @keyframes g-orbit { to { transform: rotate(180deg); } }
  .product-card:hover .g-spark { animation: g-spark 1s var(--ease-standard) 1; }
  @keyframes g-spark { 0% { stroke-dashoffset: 60; opacity: 0.4; } 100% { stroke-dashoffset: 0; opacity: 1; } }
  .product-card:hover .g-lock { animation: g-lock 0.9s var(--ease-standard) 1; transform-origin: center; }
  @keyframes g-lock { 40% { transform: translateY(-4px) rotate(-8deg); } 100% { transform: translateY(0) rotate(0); } }
}

/* ---------- 5.4 Living product motifs (hero, paused off-screen) ---------- */
.product-hero-grid { display: grid; gap: 2.2rem; align-items: center; text-align: left; }
@media (min-width: 980px) { .product-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.product-hero-grid .hero-copy { display: grid; gap: 1.3rem; justify-items: start; }
.product-hero-grid .hero-ctas { justify-content: flex-start; }
.motif-frame {
  position: relative; border-radius: var(--r-l);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow: 0 30px 80px -30px rgba(0, 110, 255, 0.35);
  overflow: hidden; padding: 1.4rem;
}
.motif-frame svg { width: 100%; height: auto; display: block; }
.motif { --run: paused; }
.motif.playing { --run: running; }
.m-anim { animation-play-state: var(--run) !important; }
@media (prefers-reduced-motion: reduce) { .m-anim { animation: none !important; } }
.m-flow { animation: m-flow 7s linear infinite; }
@keyframes m-flow { from { transform: translateX(0); } to { transform: translateX(-140px); } }
.m-pulse { animation: m-pulse 2.8s ease-in-out infinite; transform-origin: center; }
@keyframes m-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.m-flag { animation: m-flag 7s linear infinite; }
@keyframes m-flag { 0%, 58% { fill: #6FA9E8; r: 5; } 63%, 82% { fill: #FF5A6E; } 90%, 100% { fill: #6FA9E8; } }
.m-orbit { animation: m-orbit 16s linear infinite; transform-origin: center; }
@keyframes m-orbit { to { transform: rotate(360deg); } }
.m-orbit-r { animation: m-orbit 22s linear infinite reverse; transform-origin: center; }
.m-rise { animation: m-rise 6s var(--ease-standard) infinite; }
@keyframes m-rise { 0%, 15% { transform: translateY(26px); opacity: 0; } 35%, 75% { transform: translateY(0); opacity: 1; } 92%, 100% { transform: translateY(-6px); opacity: 0; } }
.m-dash { stroke-dasharray: 6 10; animation: m-dash 2.2s linear infinite; }
@keyframes m-dash { to { stroke-dashoffset: -32; } }
.m-tile { animation: m-tile 8s var(--ease-standard) infinite; }
@keyframes m-tile { 0%, 10% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.6); }
  30%, 78% { opacity: 1; transform: translate(0, 0) scale(1); } 94%, 100% { opacity: 0; } }

/* ---------- 6.5 AI Solutions Assistant ---------- */
.chat-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad);
  color: #fff; border: 0;
  box-shadow: 0 12px 34px -6px rgba(0, 150, 255, 0.7), 0 0 26px -2px rgba(0, 229, 255, 0.6), inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
  transition: transform var(--motion-quick) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard);
}
.chat-launcher:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 50px -8px rgba(0, 160, 255, 0.85), 0 0 42px 0 rgba(0, 229, 255, 0.75), inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
.chat-launcher:active { transform: scale(0.95); }
.chat-launcher svg { width: 26px; height: 26px; }
.chat-launcher .lb {
  position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%;
  white-space: nowrap; background: rgba(8, 14, 30, 0.95); border: 1px solid var(--stroke-2);
  color: var(--text-hi); font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 0.85rem; border-radius: var(--pill);
  opacity: 0; pointer-events: none; transition: opacity var(--motion-quick) var(--ease-standard);
}
.chat-launcher:hover .lb, .chat-launcher:focus-visible .lb { opacity: 1; }
body.chat-open .chat-launcher { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .chat-launcher.pulse-once { animation: fab-pulse 1.6s var(--ease-standard) 1.2s 1; }
  @keyframes fab-pulse { 0% { box-shadow: 0 14px 40px -10px rgba(0,140,255,.6), 0 0 0 0 rgba(0,229,255,.5); }
    70% { box-shadow: 0 14px 40px -10px rgba(0,140,255,.6), 0 0 0 18px rgba(0,229,255,0); }
    100% { box-shadow: 0 14px 40px -10px rgba(0,140,255,.6), 0 0 0 0 rgba(0,229,255,0); } }
}

.chat-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 160;
  width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 44px));
  display: none; flex-direction: column;
  background: rgba(7, 12, 26, 0.97);
  border: 1px solid var(--stroke-2); border-radius: 22px;
  box-shadow: 0 40px 110px -30px rgba(0, 0, 0, 0.9), 0 10px 60px -20px rgba(0, 123, 255, 0.4);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  overflow: hidden;
}
body.chat-open .chat-panel { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  body.chat-open .chat-panel { animation: chat-in var(--motion-page) var(--ease-standard) both; transform-origin: bottom right; }
  @keyframes chat-in { from { opacity: 0; transform: scale(0.28); } to { opacity: 1; transform: scale(1); } }
}
@media (max-width: 560px) {
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; }
  @media (prefers-reduced-motion: no-preference) {
    body.chat-open .chat-panel { animation: chat-in-sheet var(--motion-page) var(--ease-decelerate) both; }
    @keyframes chat-in-sheet { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
  }
}
.chat-head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
}
.chat-head .dot3 { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); box-shadow: 0 4px 14px -4px rgba(0,150,255,.6); display: grid; place-items: center; flex: none; }
.chat-head .dot3 svg { width: 18px; height: 18px; color: #fff; }
.chat-head .t { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 0.95rem; line-height: 1.2; }
.chat-head .x {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--text-hi);
  display: grid; place-items: center;
}
.chat-head .x:hover { background: var(--glass-2); }
.chat-log {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem;
  overscroll-behavior: contain; scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .chat-log { scroll-behavior: auto; } }
.msg { max-width: 86%; padding: 0.65rem 0.9rem; border-radius: 16px; font-size: 0.92rem; line-height: 1.5; }
.msg.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--stroke); color: var(--text-mid); border-bottom-left-radius: 6px; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, rgba(0,123,255,0.35), rgba(0,194,255,0.25)); border: 1px solid var(--stroke-2); color: var(--text-hi); border-bottom-right-radius: 6px; }
.msg.bot strong { color: var(--text-hi); }
@media (prefers-reduced-motion: no-preference) {
  .msg { animation: msg-in var(--motion-quick) var(--ease-decelerate) both; }
  @keyframes msg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.typing { display: inline-flex; gap: 4px; padding: 0.75rem 0.95rem; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-low); }
@media (prefers-reduced-motion: no-preference) {
  .typing i { animation: tw 1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes tw { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
}
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-self: flex-start; max-width: 100%; }
.chip-btn {
  background: var(--glass); border: 1px solid var(--stroke-2); color: var(--text-hi);
  font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.85rem; border-radius: var(--pill);
  transition: background var(--motion-quick) var(--ease-standard), transform var(--motion-quick) var(--ease-standard);
}
.chip-btn:hover { background: rgba(0, 123, 255, 0.18); transform: translateY(-1px); }
.pcard {
  align-self: flex-start; width: 100%; max-width: 100%;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke-2); border-radius: 16px;
  padding: 0.9rem 1rem; display: grid; gap: 0.5rem;
}
.pcard .pn { font-family: var(--font-display); font-weight: 700; color: var(--text-hi); }
.pcard .pcat { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.pcard p { font-size: 0.85rem; color: var(--text-mid); }
.pcard .row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pcard .row a, .pcard .row button {
  font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.9rem; border-radius: var(--pill);
}
.pcard .go { background: var(--grad); color: #fff; border: 0; }
.pcard .alt { background: var(--glass); border: 1px solid var(--stroke-2); color: var(--text-hi); }
.ctable { width: 100%; border-collapse: collapse; font-size: 0.8rem; align-self: flex-start; }
.ctable th, .ctable td { border: 1px solid var(--stroke); padding: 0.45rem 0.55rem; text-align: left; vertical-align: top; }
.ctable th { color: var(--text-hi); background: rgba(255, 255, 255, 0.04); font-weight: 600; }
.ctable td { color: var(--text-mid); }
.chat-form { display: grid; gap: 0.5rem; align-self: stretch; background: rgba(255,255,255,0.04); border: 1px solid var(--stroke); border-radius: 14px; padding: 0.8rem; }
.chat-form input, .chat-form textarea, .chat-form select {
  width: 100%; padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.85rem;
  background: rgba(5, 9, 20, 0.7); border: 1px solid var(--stroke); color: var(--text-hi); font-family: inherit;
}
.chat-form button { justify-self: start; }
.chat-input { display: flex; gap: 0.55rem; padding: 0.8rem; border-top: 1px solid var(--stroke); background: rgba(255,255,255,0.02); }
.chat-input input {
  flex: 1; padding: 0.7rem 0.95rem; border-radius: var(--pill); font-size: 0.9rem;
  background: rgba(5, 9, 20, 0.7); border: 1px solid var(--stroke); color: var(--text-hi);
}
.chat-input input:focus { outline: none; border-color: rgba(0,160,255,0.65); box-shadow: 0 0 0 3px rgba(0,140,255,0.18); }
.chat-input button {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--grad); color: #fff; border: 0; display: grid; place-items: center;
  transition: transform var(--motion-quick) var(--ease-standard);
}
.chat-input button:hover { transform: scale(1.06); }
.chat-input button:active { transform: scale(0.94); }
.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; }

/* ==========================================================================
   RESPONSIVE COMPLIANCE
   Primary targets: mobile 390x844 (holds 360-430), tablet 768x1024 +
   1024x768 landscape, desktop 1920x1080. Verified no horizontal scroll
   anywhere from 320px to 1920px, including in-between widths (500, 1100).
   ========================================================================== */

/* "Touch" = a coarse pointer, or any width up to tablet landscape. Declaring
   it once as a variable keeps the rules below single-sourced instead of
   duplicated across two media queries. 0px = rule is inert on desktop. */
:root { --tap-min: 0px; }
@media (max-width: 1024px) { :root { --tap-min: 44px; } }
@media (pointer: coarse)   { :root { --tap-min: 44px; } }

/* --- 1. Tap targets: 44x44 minimum on touch ------------------------------
   Applied as min-height + centering rather than font-size or margin, so the
   hit area grows without changing the type scale or the visual rhythm. */
.f-col a, .m-sub a { display: flex; align-items: center; min-height: var(--tap-min); }
/* .btn lands on 43.99px from padding alone — pin it so it clears 44 exactly */
.btn { min-height: var(--tap-min); }
.f-contact a, .crumbs a, .link-arrow, .u-line { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.socials a { width: max(40px, var(--tap-min)); height: max(40px, var(--tap-min)); }
/* breadcrumb row keeps its own height so the taller links don't stretch it */
.crumbs { flex-wrap: wrap; row-gap: 0.15rem; }

/* --- 1b. Tablet portrait gets two columns -------------------------------
   .grid-4 only broke to two-up at 1024, leaving 768 as a single stack with
   a lot of dead width. */
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* --- 2. Body copy: 16px floor on mobile ---------------------------------
   Micro-labels (field labels, eyebrows, error text) are intentionally
   exempt - they are UI labels, not body copy. */
@media (max-width: 767px) {
  .card p, .f-col a, .f-contact, .m-sub a, .link-arrow,
  .loc-card .addr, .site-footer .f-desc, .form-note { font-size: 1rem; }
  .msg { font-size: 1rem; }
}

/* --- 3. Form controls: never below 16px ---------------------------------
   iOS Safari zooms the viewport when a focused control is under 16px. This
   applies at every width because the trigger is the device, not the layout. */
.field input, .field select, .field textarea,
.chat-form input, .chat-form textarea, .chat-form select,
.chat-input input { font-size: max(1rem, 0.95rem); }

/* --- 4. Safe-area insets (notch + home indicator) -----------------------
   Requires viewport-fit=cover on the viewport meta tag to take effect. */
.site-header > .container { padding-left: max(1.15rem, env(safe-area-inset-left)); padding-right: max(1.15rem, env(safe-area-inset-right)); }
.mobile-nav {
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.site-footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
.chat-launcher {
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
}
.chat-panel { padding-bottom: env(safe-area-inset-bottom); }

/* --- 5. Media: reserve space so nothing shifts as images decode ----------
   The real fix is the width/height attributes the build writes onto every
   <img> (see logo_chip() / the brand markup in build_site.py): the browser
   derives an intrinsic aspect ratio from them and reserves the box before
   the file arrives. These two rules keep that box fluid rather than fixed,
   so the declared dimensions never cause overflow. */
img { max-width: 100%; }
.logo-chip img, .brand img { height: auto; }