/* ============================================================
   AKCS Website v2 — darker, warmer, more cinematic.
   Primary CTA is near-black (matches mobile). Aubergine reserved
   for accent moments. 3D tilt + scroll reveal + marquee + grain.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper-canvas); color: var(--fg-1); }
html { scroll-behavior: smooth; }
/* IMPORTANT: do NOT set `overflow-x: hidden` on html or body.
   It breaks `position: sticky` for the carousel pin (sticky elements
   can't stick relative to an ancestor that has `overflow` set, even
   on one axis). Any horizontal overflow must be solved at the source
   element (see .pricing-foot using width:fit-content + margin:auto,
   not the translateX(-50%) trick). */

::selection { background: var(--brand-700); color: white; }

img { max-width: 100%; display: block; }

/* ─────── shared layout ─────── */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; }
.section-tight { padding: 80px 0; }

/* eyebrow with leading hairline */
.eyebrow-rule {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.eyebrow-rule::before {
  content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.5;
}
.on-dark .eyebrow-rule { color: var(--brand-300); }

/* ─────── grain + noise overlay (subtle film texture, futuristic) ─────── */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5; mix-blend-mode: overlay; z-index: 1;
}

/* ─────── nav ─────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px 0;
  transition: padding 220ms cubic-bezier(0.22,1,0.36,1), background 220ms, backdrop-filter 220ms;
}
.site-nav.scrolled {
  padding: 12px 0;
  background: rgba(8, 6, 10, 0.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 12px; color: inherit; flex: none; }
.nav-logo .mark { height: 32px; width: auto; }
.nav-logo .wordmark-img { height: 22px; width: auto; }
.nav-links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 32px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: rgba(246, 241, 247, 0.7);
  position: relative; transition: color 200ms;
}
.nav-links a:hover { color: var(--fg-inverse); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--brand-300);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms cubic-bezier(0.22,1,0.36,1);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }

/* ─────── buttons ─────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  cursor: pointer; border: 0;
  padding: 13px 20px; border-radius: 12px;
  transition: all 220ms cubic-bezier(0.22,1,0.36,1);
  text-decoration: none; white-space: nowrap; flex: none;
  position: relative; overflow: hidden;
}
/* primary = near-black, with a sheen on hover */
.btn-primary {
  background: var(--ink-900); color: white;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(184,155,191,0.18) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--ink-800); box-shadow: 0 16px 36px -12px rgba(0,0,0,0.7); }
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:active { transform: translateY(0); background: var(--ink-1000); }

.btn-light {
  background: white; color: var(--ink-1000);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.3);
}
.btn-light:hover { transform: translateY(-2px); background: var(--paper-tint); }

.btn-outline {
  background: transparent; color: var(--fg-1);
  border: 1px solid var(--border-strong); padding: 12px 20px;
}
.btn-outline:hover {
  border-color: var(--ink-900); color: var(--ink-900);
  background: white;
}
.on-dark .btn-outline {
  color: var(--fg-inverse); border-color: rgba(255,255,255,0.18);
}
.on-dark .btn-outline:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.4);
}

.btn-ghost { background: transparent; color: inherit; padding: 12px 8px; }
.btn-ghost:hover { color: var(--brand-300); }

.btn-pill {
  border-radius: 9999px; padding: 11px 22px;
  background: var(--ink-900); color: white;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.7);
}
.btn-pill:hover { background: var(--ink-800); transform: translateY(-2px); }

.btn-small { padding: 9px 16px; font-size: 13px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; color: inherit; cursor: pointer;
}
.link-arrow .arrow { transition: transform 240ms cubic-bezier(0.22,1,0.36,1); display: inline-block; }
.link-arrow:hover .arrow { transform: translateX(6px); }

/* ─────── HERO ─────── */
.hero {
  background: var(--ink-1000);
  color: var(--fg-inverse);
  padding: 160px 0 100px;
  position: relative; overflow: hidden;
  isolation: isolate;
}
/* two-column split */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero-text { min-width: 0; }
.hero-scene-wrap {
  position: relative;
  min-width: 0;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1080px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .hero-scene-wrap { height: 520px; }
}
/* warm radial fade — DEEPER, WARMER aubergine bloom */
.hero::before {
  content: ""; position: absolute;
  top: -10%; left: 50%; transform: translateX(-50%);
  width: 1400px; height: 1000px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 30%, rgba(124, 76, 138, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 10%, rgba(75, 46, 80, 0.18) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
/* moving aurora */
.hero-aurora {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.hero-aurora::before, .hero-aurora::after {
  content: ""; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  filter: blur(80px); opacity: 0.35;
}
.hero-aurora::before {
  background: radial-gradient(circle, #6a4774 0%, transparent 70%);
  top: 10%; left: -10%;
  animation: aurora-drift-a 18s ease-in-out infinite alternate;
}
.hero-aurora::after {
  background: radial-gradient(circle, #4b2e50 0%, transparent 70%);
  bottom: -20%; right: -15%; width: 700px; height: 700px;
  animation: aurora-drift-b 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(180px, 80px) scale(1.15); }
}
@keyframes aurora-drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-160px, -120px) scale(1.2); }
}

/* extreme-scale watermark mark */
.hero::after {
  content: ""; position: absolute;
  right: -240px; bottom: -240px;
  width: 820px; height: 820px;
  background-image: url('../../assets/logo-mark.png');
  background-size: contain; background-repeat: no-repeat;
  opacity: 0.04; filter: brightness(0) invert(1);
  pointer-events: none; z-index: 0;
}

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

.hero h1 {
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.08;
  margin: 24px 0 56px;
  max-width: 16ch;
  text-wrap: balance;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.hero h1 .accent {
  display: inline-block;
  line-height: 1.25;
  padding-bottom: 0.18em;
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; letter-spacing: -0.03em;
  color: var(--brand-300);
}
.hero .lede {
  font-size: 19px; line-height: 1.55; font-weight: 400;
  color: rgba(246, 241, 247, 0.72);
  max-width: 46ch; margin: 0 0 36px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-trust {
  margin-top: 36px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(246, 241, 247, 0.4);
  display: inline-flex; align-items: center; gap: 18px;
  white-space: nowrap;
}
.hero-trust .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--emerald); box-shadow: 0 0 12px var(--emerald); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* hero product card — 3D tilt */
.hero-product {
  margin: 80px auto 0;
  max-width: 1080px;
  perspective: 2400px;
  position: relative;
  z-index: 2;
}
.hero-product .frame {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #1c1924 0%, #0e0b14 100%);
  box-shadow:
    0 80px 160px -40px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(0deg);
  transition: transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.hero-product .frame-top {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-product .frame-top .dot {
  width: 10px; height: 10px; border-radius: 999px;
}
.hero-product .frame-content {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 520px;
}
.hero-product .frame-sidebar {
  background: rgba(0,0,0,0.3);
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 20px 14px;
}

/* sidebar items */
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; color: rgba(246,241,247,0.55); font-weight: 500;
  transition: all 200ms;
}
.sb-item.active {
  background: linear-gradient(90deg, rgba(75,46,80,0.5), rgba(75,46,80,0.15));
  color: white;
  box-shadow: inset 0 0 0 1px rgba(184,155,191,0.18);
}
.sb-item i { font-size: 16px; }

/* dashboard content */
.dash {
  padding: 22px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; align-content: start;
}
.dash .span2 { grid-column: 1 / -1; }
.tile {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px;
  position: relative; overflow: hidden;
}
.tile.glow::before {
  content: ""; position: absolute; top: -50%; right: -30%;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,155,191,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.tile .tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; position: relative; }
.tile .tile-head .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.tile .big-num { font-size: 40px; font-weight: 700; letter-spacing: -0.025em; color: white; line-height: 1; position: relative; }
.tile .delta { font-size: 12px; color: var(--emerald); font-family: var(--font-mono); margin-top: 8px; position: relative; }
.tile .delta.down { color: var(--red); }

.live-feed { display: grid; gap: 8px; }
.feed-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; background: rgba(255,255,255,0.025); border-radius: 8px;
  font-size: 13px; border: 1px solid transparent;
  transition: all 200ms;
}
.feed-row:hover { border-color: rgba(184,155,191,0.18); background: rgba(255,255,255,0.04); }
.feed-row .avatar { width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(135deg, #6a4774, #4b2e50); display:grid; place-items: center; color: white; font-size: 11px; font-weight: 700; }
.feed-row .who { color: rgba(255,255,255,0.88); font-weight: 500; }
.feed-row .meta { color: rgba(255,255,255,0.4); font-size: 11px; font-family: var(--font-mono); }

/* ─────── logo marquee ─────── */
.logo-strip {
  padding: 64px 0 56px;
  background: var(--paper-canvas);
  position: relative;
  overflow: hidden;
}
.logo-strip .lead {
  text-align: center; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 40px;
}
.marquee {
  display: flex; gap: 80px;
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
}
.marquee-mask {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-mask:hover .marquee { animation-play-state: paused; }
.marquee div {
  font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
  color: var(--fg-2); opacity: 0.55; white-space: nowrap;
  transition: opacity 200ms;
}
.marquee div:hover { opacity: 1; }
.marquee div.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 28px; }
.marquee div.mono { font-family: var(--font-mono); font-weight: 500; font-size: 18px; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────── feature grid ─────── */
.features { padding: 120px 0; background: var(--paper-canvas); }
.features .head {
  max-width: 720px; margin-bottom: 64px;
}
.features h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 0.98;
  margin: 18px 0 18px;
}
.features h2 .accent {
  font-family: var(--font-serif); font-style: italic; color: var(--brand-700);
  font-weight: 400; letter-spacing: -0.03em;
}
.features .lede { font-size: 19px; color: var(--fg-3); line-height: 1.55; max-width: 56ch; }
.feature-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
.feature-grid > * { min-width: 0; }
.feature-card {
  background: var(--paper-pure);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px;
  transition: all 320ms cubic-bezier(0.22,1,0.36,1);
  position: relative; overflow: hidden;
  transform-style: preserve-3d;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(75,46,80,0.18);
  border-color: var(--brand-200);
}
.feature-card .ic {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: white; font-size: 22px;
  margin-bottom: 20px;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.18);
}
.feature-card h3 {
  font-size: 24px; font-weight: 600; letter-spacing: -0.022em;
  margin: 0 0 8px; color: var(--fg-1);
}
.feature-card p {
  font-size: 15px; line-height: 1.55; color: var(--fg-3); margin: 0;
}

/* the featured ceramic card — mirrors the BF102/RESIDENT dashboard card */
.feature-card.ceramic {
  grid-row: span 2;
  background:
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(124,76,138,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 70% 80% at 0% 0%, rgba(58,42,52,0.6) 0%, transparent 60%),
    linear-gradient(135deg, #1c1520 0%, #0e0a13 100%);
  color: var(--fg-inverse);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px -20px rgba(75,46,80,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.feature-card.ceramic h3 { color: white; font-size: 30px; letter-spacing: -0.025em; line-height: 1.1; }
.feature-card.ceramic p { color: rgba(255,255,255,0.65); }
.feature-card.ceramic .ic {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
}
/* ceramic-card photo silhouette */
.feature-card.ceramic .vessel {
  position: absolute; right: -40px; bottom: -60px;
  width: 280px; height: 280px;
  background:
    radial-gradient(ellipse 50% 70% at 50% 60%, rgba(184,155,191,0.35) 0%, transparent 70%),
    radial-gradient(circle at 30% 40%, rgba(75,46,80,0.6) 0%, transparent 50%);
  border-radius: 50%;
  filter: blur(8px);
}
.feature-card.ceramic .vessel::after {
  content: ""; position: absolute; left: 50%; top: 30%; transform: translateX(-50%);
  width: 100px; height: 180px;
  background: linear-gradient(180deg, #2a1c30 0%, #150e1a 100%);
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  box-shadow: inset -20px 0 30px rgba(0,0,0,0.5), inset 20px 0 30px rgba(184,155,191,0.15);
}

/* CCTV mini-grid inside the featured dark card (alt presentation) */
.cctv {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  position: relative; z-index: 2;
}
.cctv .feed {
  aspect-ratio: 4/3; border-radius: 8px;
  background: linear-gradient(135deg, #1c1924 0%, #08060a 100%);
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: end start;
  padding: 8px;
  position: relative; overflow: hidden;
}
.cctv .feed::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(124,76,138,0.5) 0%, transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px);
}
.cctv .feed .cam-label {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.7); letter-spacing: 0.06em;
  position: relative; z-index: 2;
}
.cctv .feed.alert {
  animation: alert-flicker 2s ease-in-out infinite;
}
.cctv .feed.alert::after {
  content: ""; position: absolute; inset: 0; border: 1.5px solid var(--red);
  border-radius: 8px; pointer-events: none;
}
.cctv .feed.alert .cam-label { color: var(--red); }
.cctv .feed .red-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--red); box-shadow: 0 0 0 4px rgba(239,68,68,0.2); animation: pulse 1.2s ease-in-out infinite; }
@keyframes alert-flicker {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50% { box-shadow: 0 0 24px -4px rgba(239,68,68,0.5); }
}

/* ─────── SERVICES TILES (mobile-derived pastel) ─────── */
.services {
  padding: 120px 0;
  background: var(--paper-pure);
  position: relative;
}
.services .head { max-width: 720px; margin-bottom: 56px; }
.services h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  margin: 18px 0 18px;
}
.services h2 .accent { font-family: var(--font-serif); font-style: italic; color: var(--brand-700); font-weight: 400; }
.services .lede { font-size: 18px; color: var(--fg-3); line-height: 1.55; max-width: 56ch; }

.service-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.service-tile {
  background: var(--paper-canvas);
  border-radius: 18px; padding: 28px 22px;
  text-align: center;
  border: 1px solid transparent;
  transition: all 280ms cubic-bezier(0.22,1,0.36,1);
  cursor: pointer; position: relative;
}
.service-tile:hover {
  transform: translateY(-4px);
  border-color: var(--border);
  background: var(--paper-pure);
  box-shadow: 0 16px 40px -16px rgba(75,46,80,0.15);
}
.service-tile .tile-ic {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  margin: 0 auto 14px; font-size: 26px;
  transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
}
.service-tile:hover .tile-ic { transform: scale(1.08) rotate(-3deg); }
.service-tile .tile-label {
  font-size: 14px; font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em;
}
.service-tile .tile-desc {
  font-size: 12px; color: var(--fg-3); margin-top: 4px;
  font-family: var(--font-mono); letter-spacing: 0.05em;
}

/* ─────── ANNOUNCEMENTS (left-border accent style from mobile) ─────── */
.announcements {
  padding: 120px 0;
  background: var(--paper-canvas);
}
.announcements .head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; gap: 24px; flex-wrap: wrap; }
.announcements h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  margin: 12px 0 0;
}
.announcements h2 .accent { font-family: var(--font-serif); font-style: italic; color: var(--brand-700); font-weight: 400; }
.announce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.announce-card {
  background: white; border-radius: 16px; padding: 24px 28px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: all 240ms cubic-bezier(0.22,1,0.36,1);
}
.announce-card:hover { transform: translateX(2px); box-shadow: 0 16px 32px -16px rgba(75,46,80,0.12); }
.announce-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--accent-color, var(--blue-600));
}
.announce-card.priority-high { --accent-color: var(--amber); }
.announce-card.priority-critical { --accent-color: var(--red); }
.announce-card.priority-info { --accent-color: var(--blue-600); }
.announce-card.priority-success { --accent-color: var(--emerald); }
.announce-card .row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.announce-card .tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--accent-color, var(--blue-600)); color: white;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.06em; text-transform: uppercase;
  filter: saturate(0.8);
}
.announce-card .tag.muted { background: var(--paper-canvas); color: var(--fg-3); filter: none; }
.announce-card .when { font-family: var(--font-mono); font-size: 12px; color: var(--fg-4); margin-left: auto; }
.announce-card h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; color: var(--fg-1); }
.announce-card p { font-size: 14px; color: var(--fg-3); margin: 0; line-height: 1.5; }
.announce-card .where { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-3); margin-top: 12px; }
.announce-card .where i { font-size: 13px; }

/* ─────── product showcase split (kept from v1 but darker product card) ─────── */
.showcase {
  padding: 120px 0;
  background: var(--paper-tint);
  position: relative; overflow: hidden;
}
.showcase-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.showcase h2 {
  font-size: clamp(40px, 5vw, 64px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.02; margin: 18px 0 22px;
}
.showcase h2 .accent { font-family: var(--font-serif); font-style: italic; color: var(--brand-700); font-weight: 400; }
.showcase p { font-size: 18px; color: var(--fg-2); line-height: 1.6; }
.showcase ul { list-style: none; padding: 0; margin: 28px 0; }
.showcase ul li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 16px; color: var(--fg-2);
}
.showcase ul li i { color: var(--brand-700); font-size: 18px; margin-top: 2px; flex: none; }

/* the ceramic resident-card style "pass" mock */
.pass-card {
  background:
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(124,76,138,0.5) 0%, transparent 65%),
    linear-gradient(135deg, #2a1c30 0%, #0e0a13 100%);
  border-radius: 24px; padding: 36px;
  color: white; position: relative; overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(75,46,80,0.3);
  transform-style: preserve-3d;
}
.pass-card .pass-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-300);
}
.pass-card h3 { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 14px 0 8px; }
.pass-card .members { color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; }
.pass-card .members .sep { margin: 0 8px; color: rgba(255,255,255,0.3); }
.pass-card .location {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px; font-weight: 600; margin-top: 24px;
}
.pass-card .location i { font-size: 14px; color: var(--brand-300); }
.pass-card .vase {
  position: absolute; right: -40px; bottom: -50px;
  width: 220px; height: 280px;
  background:
    radial-gradient(ellipse 50% 80% at 50% 60%, rgba(184,155,191,0.5) 0%, rgba(75,46,80,0.4) 40%, transparent 70%);
  filter: blur(2px);
}
.pass-card .vase::before {
  content: ""; position: absolute; left: 40%; top: 20%;
  width: 60px; height: 200px;
  background: linear-gradient(180deg, #3a2540 0%, #1a1020 100%);
  border-radius: 50% 50% 35% 35% / 40% 40% 60% 60%;
  box-shadow: inset -10px 0 20px rgba(0,0,0,0.6), inset 8px -10px 20px rgba(184,155,191,0.2);
}
.pass-card .vase::after {
  content: ""; position: absolute; left: 65%; top: 35%;
  width: 35px; height: 80px;
  background: linear-gradient(180deg, #2a1830 0%, #14091a 100%);
  border-radius: 50% 50% 30% 30%;
  box-shadow: inset -6px 0 12px rgba(0,0,0,0.6);
}

/* ─────── BIG NUMBERS ─────── */
.numbers {
  background: var(--ink-1000); color: var(--fg-inverse);
  padding: 140px 0;
  position: relative; overflow: hidden;
}
.numbers::before {
  content: ""; position: absolute;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(124,76,138,0.18) 0%, transparent 60%);
  top: -200px; left: -200px;
  pointer-events: none;
}
.numbers .head { max-width: 720px; margin-bottom: 72px; position: relative; z-index: 2; }
.numbers h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 0.98;
  margin: 18px 0;
}
.numbers h2 .accent { font-family: var(--font-serif); font-style: italic; color: var(--brand-300); font-weight: 400; }
.numbers .lede { color: rgba(246,241,247,0.6); font-size: 19px; line-height: 1.55; max-width: 56ch; }
.numbers-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 56px;
  position: relative; z-index: 2;
}
.num-cell { position: relative; }
.num-cell .n {
  font-size: clamp(56px, 7vw, 96px); font-weight: 700;
  letter-spacing: -0.045em; line-height: 0.95; color: white;
}
.num-cell .n .unit { font-size: 0.45em; color: var(--brand-300); margin-left: 4px; font-weight: 600; }
.num-cell .label {
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(246,241,247,0.5); margin-top: 16px;
}

/* ─────── pricing ─────── */
.pricing { padding: 120px 0; background: var(--paper-pure); }
.pricing .head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.pricing h2 { font-size: clamp(40px, 5vw, 64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; margin: 18px 0 18px; }
.pricing .lede { color: var(--fg-3); font-size: 18px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.price-card {
  background: white; border: 1px solid var(--border);
  border-radius: 22px; padding: 36px;
  display: flex; flex-direction: column;
  transition: all 240ms cubic-bezier(0.22,1,0.36,1);
}
.price-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -20px rgba(75,46,80,0.18); }
.price-card.featured {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(124,76,138,0.35) 0%, transparent 60%),
    var(--ink-1000);
  color: var(--fg-inverse);
  border-color: var(--ink-700);
  position: relative; overflow: hidden;
}
.price-card.featured::after {
  content: ""; position: absolute; inset: 0;
  background-image: url('../../assets/logo-mark.png');
  background-size: 400px; background-repeat: no-repeat;
  background-position: 130% 130%;
  opacity: 0.04; filter: brightness(0) invert(1);
  pointer-events: none;
}
.price-card h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); margin: 0; font-family: var(--font-mono); }
.price-card.featured h4 { color: var(--brand-300); }
.price-card .amount { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 20px 0 2px; }
.price-card .per { font-size: 14px; color: var(--fg-3); }
.price-card.featured .per { color: rgba(255,255,255,0.5); }
.price-card .tagline { font-size: 15px; color: var(--fg-2); margin: 20px 0 28px; line-height: 1.55; }
.price-card.featured .tagline { color: rgba(255,255,255,0.7); }
.price-card ul { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; }
.price-card ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.price-card ul li i { color: var(--brand-700); margin-top: 2px; font-size: 16px; }
.price-card.featured ul li i { color: var(--brand-300); }
.price-card .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ─────── footer ─────── */
.footer {
  background: var(--ink-1000); color: var(--fg-inverse);
  padding: 120px 0 56px;
  position: relative; overflow: hidden;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 72px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative; z-index: 2;
}
.footer-brand .logo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 24px;
}
.footer-brand .logo img { height: 38px; filter: brightness(0) invert(1); opacity: 0.95; width: auto; }
.footer-brand p { color: rgba(246,241,247,0.5); max-width: 340px; font-size: 14.5px; line-height: 1.6; }
.footer-col h5 { font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(246,241,247,0.4); margin: 0 0 18px; font-weight: 500; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-col a { font-size: 14px; color: rgba(246,241,247,0.75); transition: color 200ms; }
.footer-col a:hover { color: white; }
.footer-base {
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: rgba(246,241,247,0.4); position: relative; z-index: 2;
}
.akcs-mega {
  position: relative;
  font-size: clamp(120px, 22vw, 320px); font-weight: 800; letter-spacing: -0.085em; line-height: 0.85;
  background: linear-gradient(180deg, rgba(124,76,138,0.5) 0%, rgba(75,46,80,0.02) 80%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin: 80px 0 -60px;
  text-align: center;
  pointer-events: none; user-select: none;
}

/* ─────── scroll reveal ─────── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.reveal.in {
  opacity: 1; transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }

/* ─────── Bricolage variable axis play (hero display only) ─────── */
.features h2, .services h2, .announcements h2, .showcase h2, .numbers h2, .pricing h2, .pin-frame h2, .faq h2 {
  font-variation-settings: "wdth" 95, "opsz" 72;
}

/* ─────── HERO SPOTLIGHT — cursor-following radial glow ─────── */
.hero-spotlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(
    circle 600px at var(--spot-x, 50%) var(--spot-y, 30%),
    rgba(184, 155, 191, 0.18) 0%,
    rgba(124, 76, 138, 0.06) 30%,
    transparent 60%
  );
  transition: background 60ms linear;
  mix-blend-mode: screen;
}

/* ─────── hero glassmorphism toast ─────── */
.hero-glass-toast {
  position: absolute; right: -20px; top: -28px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08);
  color: white;
  z-index: 4;
  animation: glass-float 6s ease-in-out infinite alternate;
  max-width: 320px;
}
.hero-glass-toast .glass-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--emerald); box-shadow: 0 0 14px var(--emerald);
  animation: pulse 1.6s ease-in-out infinite;
  flex: none;
}
.hero-glass-toast .glass-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.hero-glass-toast .glass-sub { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; margin-top: 1px; }
.hero-glass-toast i { color: rgba(255,255,255,0.5); margin-left: 4px; }
@keyframes glass-float {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(-12px) translateX(-6px); }
}

/* ─────── HORIZONTAL CAROUSEL — apple-style pinned scroll ─────── */
.hcarousel {
  background: var(--ink-1000);
  position: relative;
  /* Drives how long the horizontal scroll lasts. Calibrated so that the
     track finishes translating exactly when the section is about to unstick
     — i.e. NO extra "empty pinned space" after the last card scrolls past.
     Track scroll distance ~= (6 cards × 520 + 5 gaps × 28) - viewport width.
     Section vertical travel = (min-height − vh). At p=1 the section should
     also be at the end of its sticky range. 360vh gives that on standard
     720–900px viewports. */
  min-height: 400vh;
}
.hcarousel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(75,46,80,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 90%, rgba(124,76,138,0.15) 0%, transparent 60%);
}
.hcarousel-pin {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}
/* HEAD — kept very compact so the cards below have room.
   Constraint: head + viewport padding + card MUST fit in vh.
   Tested at vh = 720–900: cards always fully visible (top corners
   never clipped, dense cards like VOIP don't overflow). */
.hcarousel-head {
  padding: 32px 32px 0;
  flex: none;
}
.hcarousel-head h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.0;
  margin: 8px 0 8px; color: var(--fg-inverse);
}
.hcarousel-head h2 .accent {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; color: var(--brand-300);
}
.hcarousel-head p {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  margin: 0;
}
/* VIEWPORT — minimal padding. Vertical centering in the leftover flex
   space means card top + bottom get equal breathing room automatically. */
.hcarousel-viewport {
  flex: 1; overflow: hidden; padding: 24px 0 32px;
  display: flex; align-items: center;
}
.hcarousel-track {
  display: flex; gap: 28px;
  padding-left: 5vw;
  will-change: transform;
}

/* Single source of truth for .hcard.
   Keeps the Apple-glass aesthetic (translucent gradient surface) but
   solves the visible top "band" by laying down a SOLID INK UNDERLAY via
   ::before first, so whatever the section bloom is doing behind the card
   cannot bleed through unevenly. The translucent gradient then sits on
   that uniform underlay, not on the asymmetric section.
   No `border` and no `inset 0 1px 0` rim — those were the literal lines
   the user kept seeing along the top edge. */
.hcard {
  flex: none;
  /* Sized to fit the pinned viewport area AND hold the densest card's
     content (VOIP needs ~497px). Constraints:
       vh (720) - head (~135) - viewport padding (56) >= card height (500)
       → 720 - 135 - 56 = 529 ≥ 500 ✓ (29px breathing)
     If you make this taller, top corners will clip on shorter viewports.
     If you make head bigger, content will overflow card. Tested: stays
     visible at vh between 720 and 900. */
  width: 520px; height: 520px;
  /* Apple-glass surface: subtle top sheen + small aubergine corner glow.
     All gradients are confined to the upper-left and lower-right corners
     so they DON'T paint a horizontal band across the top — that was the
     old failure mode. */
  background:
    /* fine top-left specular sparkle (Apple device camera-bump highlight) */
    radial-gradient(
      circle 280px at 12% 8%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.025) 30%,
      transparent 55%
    ),
    /* bottom-right aubergine glow (warmth, not a stripe) */
    radial-gradient(
      circle 380px at 90% 100%,
      rgba(124, 76, 138, 0.18) 0%,
      rgba(124, 76, 138, 0.06) 35%,
      transparent 65%
    ),
    /* gentle top-down sheen */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 255, 255, 0.008) 100%
    );
  border-radius: 28px;
  padding: 28px 30px;
  color: white;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  /* Shadow uses a large positive y-offset and negative spread so the
     shadow's blur cone lives BELOW the card only — no aubergine bleed
     above the top edge. */
  box-shadow:
    0 80px 60px -40px rgba(0, 0, 0, 0.8),
    0 40px 40px -30px rgba(75, 46, 80, 0.35);
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
}
/* SOLID INK UNDERLAY — color is intentionally very close to the section's
   --ink-1000 (#08060A) so the card's top edge dissolves into the section
   instead of reading as a hard luminance step. Slightly warmer than pure
   ink so the aubergine surface gradient has something to glow against. */
.hcard::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 100%,
      #1a1320 0%,
      #110d18 50%,
      #0c0a10 100%
    );
  border-radius: inherit;
  z-index: -1;
}
.hcard:hover {
  transform: perspective(1200px) translateZ(0);
  /* Same downward-only shadow philosophy, slightly more dramatic on hover */
  box-shadow:
    0 100px 80px -50px rgba(0, 0, 0, 0.9),
    0 60px 60px -40px rgba(124, 76, 138, 0.5);
}
.hcard > * { transform: translateZ(20px); }
.hcard h3 { transform: translateZ(40px); }
.hcard .hcv { transform: translateZ(60px); }
.hcard-num {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; color: var(--brand-300);
  margin-bottom: 8px; font-weight: 500;
}
.hcard-eyebrow {
  font-size: 13px; font-family: var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 18px;
}
.hcard h3 {
  font-size: 32px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.1; margin: 0 0 16px; color: white;
}
.hcard p {
  font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,0.6); margin: 0;
  max-width: 38ch;
}

/* per-card visual area at the bottom */
.hcv {
  margin-top: auto; padding-top: 28px;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}

/* — resident phone tile-grid */
.hcv-phone {
  width: 180px; height: 220px; border-radius: 22px;
  background: var(--paper-canvas);
  padding: 18px; display: grid;
  grid-template-rows: 1fr;
  align-items: end;
}
.hcv-phone-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.hcv-tile {
  aspect-ratio: 1/1; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 26px;
}

/* — security feeds */
.hcv-feeds {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  width: 280px;
}
.hcv-feed {
  aspect-ratio: 4/3; background: #0e0b14;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 8px;
}
.hcv-feed-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(124,76,138,0.4) 0%, transparent 50%),
    linear-gradient(rgba(184,155,191,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,155,191,0.04) 1px, transparent 1px);
  background-size: auto, 16px 16px, 16px 16px;
}
.hcv-feed-label {
  position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.6); letter-spacing: 0.08em;
}
.hcv-feed.alert { border-color: var(--red); }
.hcv-feed.alert .hcv-feed-label { color: var(--red); }
.hcv-feed-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 999px; background: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.25); animation: pulse 1s ease-in-out infinite; }

/* — security: seven tools collapsing into one app */
.hcv-collapse {
  display: grid;
  grid-template-columns: 1fr 80px 168px;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 460px;
  padding: 0 4px;
}
.hcv-collapse-list {
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
}
.hcv-collapse-item {
  display: grid; grid-template-columns: 22px 1fr;
  align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  line-height: 1.2;
}
.hcv-collapse-num {
  color: rgba(184,155,191,0.7);
  font-size: 10px;
}
.hcv-collapse-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.hcv-collapse-rails {
  width: 80px; height: 220px;
  display: block;
  align-self: center;
}
.hcv-collapse-app {
  position: relative;
  background: linear-gradient(160deg, rgba(75,46,80,0.55) 0%, rgba(20,12,24,0.9) 100%);
  border: 1px solid rgba(184,155,191,0.25);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 20px 50px -20px rgba(124,76,138,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.hcv-collapse-app-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle 110px at 50% 30%, rgba(184,155,191,0.35) 0%, transparent 60%);
  pointer-events: none;
}
.hcv-collapse-app-icon {
  position: relative; z-index: 1;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(184,155,191,0.18);
  border: 1px solid rgba(184,155,191,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: rgba(255,255,255,0.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.hcv-collapse-app-label {
  position: relative; z-index: 1;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  color: white;
}
.hcv-collapse-app-sub {
  position: relative; z-index: 1;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(184,155,191,0.7);
}

/* — AI face match */
.hcv-ai {
  width: 280px; padding: 20px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; position: relative;
}
.hcv-ai-bbox {
  position: absolute; top: 14px; left: 16px;
  width: 60px; height: 60px;
  border: 1.5px solid var(--emerald);
  box-shadow: 0 0 14px -2px var(--emerald);
}
.hcv-ai-bbox::before, .hcv-ai-bbox::after { content:""; position:absolute; background: var(--emerald); }
.hcv-ai-bbox::before { top: -1px; left: 30%; right: 30%; height: 2px; }
.hcv-ai-bbox::after { bottom: -1px; left: 30%; right: 30%; height: 2px; }
.hcv-ai-scan {
  position: absolute; left: 16px; right: 16px; top: 76px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
  box-shadow: 0 0 6px var(--emerald);
  animation: scan-line 2.5s ease-in-out infinite;
}
@keyframes scan-line {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-50px); opacity: 1; }
}
.hcv-ai-label {
  margin-top: 70px; margin-left: 80px;
  font-family: var(--font-mono); font-size: 10px; color: var(--emerald);
  letter-spacing: 0.12em; display: flex; align-items: center; gap: 6px;
}
.hcv-ai-label .emr { width: 5px; height: 5px; border-radius: 999px; background: var(--emerald); }
.hcv-ai-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
.hcv-ai-row:last-child { border-bottom: 0; }
.hcv-ai-row .ok { color: var(--emerald); }
.hcv-ai-row .muted { color: rgba(255,255,255,0.4); }

/* — VOIP call */
.hcv-call {
  width: 280px; padding: 28px 20px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px; text-align: center;
}
.hcv-call-avatar {
  width: 56px; height: 56px; border-radius: 999px;
  background: linear-gradient(135deg, #6a4774, #4b2e50);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700; color: white;
  margin: 0 auto 12px;
}
.hcv-call-name { font-size: 18px; font-weight: 600; color: white; letter-spacing: -0.01em; }
.hcv-call-meta { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; margin-top: 2px; }
.hcv-call-wave {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  margin: 18px 0; height: 40px;
}
.hcv-call-wave span {
  width: 3px; background: var(--brand-300); border-radius: 999px;
  animation: wave 1.2s ease-in-out infinite;
}
.hcv-call-wave span:nth-child(2n) { animation-delay: 0.1s; }
.hcv-call-wave span:nth-child(3n) { animation-delay: 0.2s; }
.hcv-call-wave span:nth-child(4n) { animation-delay: 0.3s; }
.hcv-call-wave span:nth-child(5n) { animation-delay: 0.4s; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.6); }
  50% { transform: scaleY(1); }
}
.hcv-call-actions { display: flex; justify-content: center; gap: 18px; }
.hcv-call-btn {
  width: 44px; height: 44px; border-radius: 999px;
  border: 0; cursor: pointer; color: white; font-size: 18px;
  display: grid; place-items: center;
}
.hcv-call-btn.red { background: var(--red); }
.hcv-call-btn.green { background: var(--emerald); }

/* — backend rows */
.hcv-back {
  width: 320px; padding: 8px 0;
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,0.8);
}
.hcv-back-row {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.hcv-back-row:last-child { border-bottom: 0; }
.hcv-back-row i { color: var(--brand-300); font-size: 16px; }
.hcv-back-row .ok { color: var(--emerald); }

/* — roadmap */
.hcv-next {
  width: 320px; display: grid; gap: 10px;
}
.hcv-next-item {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  align-items: center;
}
.hcv-next-item i { font-size: 18px; color: var(--brand-300); }
.hcv-next-item strong { display: block; font-size: 13px; font-weight: 600; color: white; }
.hcv-next-item span { display: block; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; margin-top: 2px; }

/* ─────── FAQ — magnetic + spotlight ─────── */
.faq { padding: 140px 0 120px; background: var(--paper-canvas); }
.faq .head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.faq h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.02;
  margin: 18px 0 0;
}
.faq h2 .accent { font-family: var(--font-serif); font-style: italic; color: var(--brand-700); font-weight: 400; }
.faq .head .eyebrow-rule { justify-content: center; }

.faq-list { display: grid; gap: 10px; max-width: 920px; margin: 0 auto; }
.faq-item {
  position: relative;
  display: block; width: 100%;
  background: white; color: inherit;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0; cursor: pointer;
  text-align: left; font-family: inherit;
  transform: translate(var(--mx, 0), var(--my, 0));
  transition:
    transform 240ms cubic-bezier(0.22,1,0.36,1),
    border-color 240ms,
    box-shadow 240ms;
  overflow: hidden;
}
/* radial spotlight that follows cursor inside the item */
.faq-item::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    circle 240px at var(--lx, 50%) var(--ly, 50%),
    rgba(75,46,80,0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 240ms;
}
.faq-item:hover {
  border-color: var(--brand-300);
  box-shadow: 0 24px 60px -20px rgba(75,46,80,0.2);
}
.faq-item:hover::before { opacity: 1; }
.faq-list:hover .faq-item:not(:hover) { opacity: 0.55; }
.faq-list .faq-item { transition: transform 240ms cubic-bezier(0.22,1,0.36,1), opacity 240ms, border-color 240ms, box-shadow 240ms; }

.faq-q {
  display: grid; grid-template-columns: 48px 1fr 48px;
  align-items: center;
  padding: 24px 28px;
  gap: 16px;
}
.faq-num {
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 500; color: var(--fg-3); letter-spacing: 0.12em;
}
.faq-text {
  font-size: 19px; font-weight: 600;
  color: var(--fg-1); letter-spacing: -0.015em;
}
.faq-icon {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--paper-canvas);
  display: grid; place-items: center;
  transition: all 240ms cubic-bezier(0.22,1,0.36,1);
  color: var(--fg-2);
}
.faq-item.open .faq-icon { background: var(--ink-900); color: white; transform: rotate(45deg); }

.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(0.22,1,0.36,1);
}
.faq-a > p {
  overflow: hidden;
  font-size: 16px; color: var(--fg-3); line-height: 1.65;
  margin: 0;
  padding: 0 28px 0 92px;
  max-width: 64ch;
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-item.open .faq-a > p {
  padding: 0 28px 28px 92px;
}

/* ─────── SCROLLPIN — apple-style sticky scrollytelling ─────── */
.scrollpin {
  background: var(--ink-1000);
  color: var(--fg-inverse);
  position: relative;
  /* 3 frames × 90vh + 60vh tail */
  min-height: 330vh;
}
.scrollpin::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 20%, rgba(124,76,138,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(75,46,80,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.scrollpin-inner {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start;
  height: 100%;
}
.pin-left, .pin-right {
  position: sticky; top: 12vh; height: 76vh;
  display: flex; align-items: center;
}
.pin-stage { width: 100%; position: relative; }
.pin-frame {
  position: absolute; top: 60px; left: 0; right: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.22,1,0.36,1), transform 500ms cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.pin-frame.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pin-eyebrow {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--brand-300); margin-bottom: 20px;
}
.pin-frame h2 {
  font-size: clamp(40px, 5vw, 72px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 0.98; margin: 0 0 24px;
}
.pin-frame h2 .accent {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; color: var(--brand-300);
}
.pin-frame p { font-size: 19px; line-height: 1.55; color: rgba(246,241,247,0.7); max-width: 44ch; }
.pin-dots {
  position: absolute; bottom: 0; left: 0;
  display: flex; gap: 8px;
}
.pin-dot {
  width: 32px; height: 3px;
  background: rgba(255,255,255,0.12); border-radius: 999px;
  overflow: hidden;
}
.pin-dot-fill {
  height: 100%; background: var(--brand-300);
  transform-origin: left; transform: scaleX(0);
  transition: transform 200ms linear;
}

/* right visual: cross-faded layers */
.pin-right .pin-visual {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.94) translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.pin-right .pin-visual.on {
  opacity: 1; transform: scale(1) translateY(0);
}

/* generic visual-card shell */
.visual-card {
  width: 100%; max-width: 480px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 24px;
  backdrop-filter: blur(20px);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* gate cam visual */
.visual-cam {
  aspect-ratio: 16/10;
  background: linear-gradient(180deg, #1c1924 0%, #08060a 100%);
  border-radius: 16px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.cam-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(184,155,191,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,155,191,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.cam-target {
  position: absolute; top: 30%; left: 35%; width: 30%; aspect-ratio: 1/1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cam-target-box {
  width: 100%; aspect-ratio: 1/1;
  border: 1.5px solid var(--emerald);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 24px -4px var(--emerald);
  position: relative;
  animation: target-pulse 2s ease-in-out infinite;
}
.cam-target-box::before, .cam-target-box::after {
  content: ""; position: absolute; background: var(--emerald);
}
.cam-target-box::before { top: -1px; left: 30%; right: 30%; height: 2px; }
.cam-target-box::after { bottom: -1px; left: 30%; right: 30%; height: 2px; }
@keyframes target-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 24px -4px var(--emerald); }
  50% { box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 32px 0 var(--emerald); }
}
.cam-target-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--emerald); margin-top: 6px;
  background: rgba(8,6,10,0.7); padding: 3px 8px; border-radius: 3px;
}
.cam-meta {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
}
.cam-meta .rec { color: var(--red); display: flex; align-items: center; gap: 6px; }
.cam-meta .rec-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--red); animation: pulse 1.2s ease-in-out infinite; }

.visual-row { display: flex; gap: 8px; margin-top: 18px; }
.visual-chip {
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: white;
  font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
}
.visual-chip.green { background: rgba(16,185,129,0.15); color: var(--emerald); border-color: rgba(16,185,129,0.3); }

/* pass visual */
.pass-mini {
  background: white; color: var(--ink-1000);
  border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pass-mini-head { display: flex; align-items: center; gap: 10px; }
.pass-mini-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.pass-mini-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; background: var(--ink-900); color: white;
  padding: 4px 10px; border-radius: 999px;
}
.pass-mini-meta { font-size: 12px; color: var(--fg-3); margin-top: 6px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.pass-qr {
  margin: 20px 0 16px;
  width: 180px; height: 180px;
  border-radius: 12px; background: var(--paper-canvas);
  display: grid; place-items: center;
}
.pass-code { display: flex; gap: 6px; margin-bottom: 14px; }
.code-cell {
  width: 36px; height: 44px; border-radius: 8px;
  background: var(--paper-canvas);
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700; color: var(--ink-1000);
  font-family: var(--font-mono);
}
.pass-foot { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.04em; }

/* audit visual */
.audit {
  font-family: var(--font-mono);
}
.audit-head {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.5);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.audit-count { color: var(--brand-300); }
.audit-row {
  display: grid; grid-template-columns: 50px 1fr 70px 1.4fr 18px;
  gap: 12px; align-items: center;
  padding: 10px 0; font-size: 11.5px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
}
.audit-row:last-child { border-bottom: 0; }
.audit-row .t { color: rgba(255,255,255,0.45); }
.audit-row .who { font-weight: 600; }
.audit-row .via { color: var(--brand-300); }
.audit-row .by { color: rgba(255,255,255,0.5); font-size: 10.5px; }
.audit-row i { color: var(--emerald); font-size: 14px; }
.audit-row.bad i { color: var(--red); }
.audit-row.bad .by { color: var(--red); }


/* ============================================================
   v3 ADDITIONS — Hero scene, redesigned product blocks,
   client logos, nav dropdown.
   ============================================================ */

/* ─────── HERO SCENE (right column) ─────── */
.hero-scene {
  position: relative;
  width: 100%;
  height: 580px;
  max-width: 600px;
  margin-left: auto;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 60%, rgba(124,76,138,0.22) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  transform: translate3d(var(--px,0), var(--py,0), 0);
  transition: transform 240ms cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
}
.hs-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(184,155,191,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,155,191,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 60%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 60%, black 30%, transparent 80%);
}
.hs-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle 320px at 50% 40%, rgba(184,155,191,0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* radar pulses from central tower */
.hs-radar {
  position: absolute;
  left: 50%; top: 60%;
  width: 1px; height: 1px;
  pointer-events: none;
}
.hs-radar span {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 1px solid rgba(184,155,191,0.4);
  opacity: 0;
  animation: hs-radar 4s ease-out infinite;
}
.hs-radar span:nth-child(2) { animation-delay: 1.3s; }
.hs-radar span:nth-child(3) { animation-delay: 2.6s; }
@keyframes hs-radar {
  0%   { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(5);   opacity: 0; }
}

/* buildings svg */
.hs-buildings {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 2;
}

/* window twinkle */
.hs-win {
  animation: hs-window 5s linear infinite;
}
.hs-win-a { fill: #cdb3d1; }
.hs-win-b { fill: #b89bbf; }
.hs-win-c { fill: #aa8db1; }
@keyframes hs-window {
  0%   { opacity: 0; }
  6%   { opacity: 0.95; }
  60%  { opacity: 0.6; }
  92%  { opacity: 0.1; }
  100% { opacity: 0; }
}
.hs-antenna-tip {
  animation: hs-tip 1.6s ease-in-out infinite;
}
@keyframes hs-tip {
  0%, 100% { r: 3; opacity: 1; }
  50%      { r: 4; opacity: 0.6; }
}

/* smoke */
.hs-smoke {
  animation: hs-smoke 5s ease-in-out infinite;
  transform-origin: center;
}
.hs-smoke.s2 { animation-delay: 1.8s; }
@keyframes hs-smoke {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  30%  { opacity: 0.4; }
  100% { transform: translateY(-90px) scale(2.4); opacity: 0; }
}

/* data flow lines */
.hs-flow {
  stroke-dashoffset: 0;
  animation: hs-flow 4s linear infinite;
}
.hs-flow.d2 { animation-delay: 1.5s; }
@keyframes hs-flow {
  from { stroke-dashoffset: 16; }
  to   { stroke-dashoffset: 0; }
}

/* scan line sweeping the scene */
.hs-scan {
  position: absolute;
  left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(184,155,191,0.6), transparent);
  box-shadow: 0 0 12px rgba(184,155,191,0.5);
  z-index: 3; pointer-events: none;
  animation: hs-scan 6s ease-in-out infinite;
}
@keyframes hs-scan {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(580px); opacity: 0; }
}

/* floating glass event cards */
.hs-card {
  position: absolute;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
  z-index: 4;
  min-width: 260px;
  max-width: 280px;
}
.hsc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
}
.hsc-eyebrow {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; color: rgba(255,255,255,0.55);
  margin-bottom: 2px;
}
.hsc-title {
  font-size: 13px; font-weight: 600; color: white;
  letter-spacing: -0.005em; line-height: 1.25;
}
.hsc-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.45); margin-top: 2px;
  letter-spacing: 0.04em;
}
.hsc-dot {
  width: 8px; height: 8px; border-radius: 999px;
}
.hsc-dot.red   { background: var(--red);     box-shadow: 0 0 12px var(--red); animation: pulse 1.2s ease-in-out infinite; }
.hsc-dot.green { background: var(--emerald); box-shadow: 0 0 10px var(--emerald); animation: pulse 1.6s ease-in-out infinite; }

.hs-card-vision { top: 36px;  right: -10px; animation: hs-float-a 7s ease-in-out infinite alternate; }
.hs-card-gate   { top: 240px; left:  -16px; animation: hs-float-b 8s ease-in-out infinite alternate; }
.hs-card-pay    { bottom: 36px; right: 16px; animation: hs-float-c 9s ease-in-out infinite alternate; }

@keyframes hs-float-a {
  from { transform: translate(0, 0); }
  to   { transform: translate(-8px, 10px); }
}
@keyframes hs-float-b {
  from { transform: translate(0, 0); }
  to   { transform: translate(10px, -8px); }
}
@keyframes hs-float-c {
  from { transform: translate(0, 0); }
  to   { transform: translate(-6px, -10px); }
}

/* ─────── CLIENT LOGO GRID (replaces marquee) ─────── */
.logo-strip .cl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}
.cl-item {
  text-align: center;
  padding: 24px 8px;
  border-right: 1px solid var(--border-soft);
  transition: opacity 220ms;
}
.cl-item:last-child { border-right: 0; }
.cl-item:hover { opacity: 1; }
.cl-grid:hover .cl-item:not(:hover) { opacity: 0.5; }
.cl-item { opacity: 0.85; }

.cl-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  line-height: 1;
  margin-bottom: 10px;
}
.cl-place {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
}

/* Ramky One Krystal — bold serif blocks */
.cl-ramky .cl-r { color: var(--ink-900); font-weight: 900; letter-spacing: 0.04em; }
.cl-ramky .cl-one {
  font-size: 14px; padding: 4px 8px;
  background: var(--brand-700); color: white;
  border-radius: 6px; font-weight: 800; letter-spacing: 0.08em;
  transform: translateY(-4px);
}
.cl-ramky .cl-krystal { color: var(--brand-700); font-weight: 800; letter-spacing: 0.04em; }

/* Aaditri Empire — italic luxury */
.cl-aaditri { font-family: var(--font-serif); }
.cl-aaditri .cl-aa { font-style: italic; font-weight: 400; font-size: 30px; color: var(--ink-900); }
.cl-aaditri .cl-emp {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--brand-700);
  transform: translateY(-2px);
  text-transform: uppercase;
}

/* La Vista — mixed weight */
.cl-lavista { font-family: var(--font-serif); align-items: center; gap: 8px; }
.cl-lavista span:first-child {
  font-weight: 900; font-size: 30px; color: var(--ink-900);
  letter-spacing: -0.02em; font-family: var(--font-sans);
}
.cl-lavista .cl-vista {
  font-style: italic; font-weight: 400; font-size: 32px;
  color: var(--brand-700);
}

/* Janapriya — clean serif logotype */
.cl-janapriya {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 500; font-size: 34px;
  color: var(--ink-900); letter-spacing: -0.01em;
}

@media (max-width: 880px) {
  .logo-strip .cl-grid { grid-template-columns: 1fr 1fr; }
  .cl-item:nth-child(2n) { border-right: 0; }
  .cl-item:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
}

/* ─────── PRODUCTS SECTION (replaces feature-grid) ─────── */
.products {
  background: var(--ink-1000);
  color: var(--fg-inverse);
  padding: 140px 0;
  position: relative; overflow: hidden;
}
.products::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(75,46,80,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(124,76,138,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.products .container { position: relative; z-index: 2; }
.products .head { max-width: 780px; margin-bottom: 96px; }
.products .head h2 {
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 0.98;
  margin: 16px 0 22px;
  color: var(--fg-inverse);
}
.products .head h2 .accent {
  font-family: var(--font-serif); font-style: italic;
  color: var(--brand-300); font-weight: 400;
}
.products .head .lede { color: rgba(246,241,247,0.65); font-size: 18px; line-height: 1.55; }

.product-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 80px;
  align-items: center;
  margin-bottom: 120px;
  padding: 0;
}
.product-block:last-of-type { margin-bottom: 80px; }
.product-block.product-vision { direction: rtl; }
.product-block.product-vision > * { direction: ltr; }

@media (max-width: 1024px) {
  .product-block { grid-template-columns: 1fr; gap: 48px; }
  .product-block.product-vision { direction: ltr; }
}

.pb-text { min-width: 0; }
.pb-text .eyebrow-rule { color: var(--brand-300); margin-bottom: 14px; }
.pb-text h3 {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.02;
  color: white; margin: 0 0 20px; text-wrap: balance;
}
.pb-text h3 .accent {
  font-family: var(--font-serif); font-style: italic;
  color: var(--brand-300); font-weight: 400;
  letter-spacing: -0.025em;
}
.pb-lede {
  font-size: 17px; line-height: 1.6;
  color: rgba(246,241,247,0.68);
  margin: 0 0 32px; max-width: 52ch;
}

.sub-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px;
  margin-bottom: 32px;
}
.sub-feature {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  align-items: start;
}
.sub-feature i {
  font-size: 20px; color: var(--brand-300); margin-top: 3px;
}
.sub-feature strong {
  display: block; font-size: 14.5px; font-weight: 600;
  color: white; letter-spacing: -0.005em;
}
.sub-feature p {
  margin: 4px 0 0; font-size: 13px; line-height: 1.5;
  color: rgba(246,241,247,0.55);
}

.pb-cta { color: var(--brand-300); }
.pb-cta:hover { color: white; }

.pb-visual {
  position: relative; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ── GATE visual (phone + ping) ── */
.pv-stack { position: relative; width: 100%; max-width: 460px; }
.pv-phone {
  background: var(--paper-canvas);
  color: var(--ink-1000);
  border-radius: 28px;
  padding: 22px;
  box-shadow:
    0 60px 120px -40px rgba(0,0,0,0.6),
    0 0 0 8px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
  transform: rotate(-2deg);
  transition: transform 400ms cubic-bezier(0.22,1,0.36,1);
}
.pv-phone:hover { transform: rotate(0) translateY(-4px); }
.pv-phone-bar {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  margin-bottom: 18px;
}
.pv-phone-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.pv-phone-eyebrow { font-size: 13px; color: var(--fg-3); }
.pv-phone-name {
  font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--ink-1000); margin-top: 2px;
}
.pv-phone-avatar {
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: white; display: grid; place-items: center;
  font-weight: 700;
}
.pv-phone-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 20px;
}
.pv-pt {
  padding: 16px 14px;
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.pv-pt i { font-size: 22px; }
.pv-pt span {
  font-size: 13px; font-weight: 600; color: var(--ink-900);
  letter-spacing: -0.005em;
}
.pv-phone-row {
  background: white; border-radius: 14px;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--border);
  gap: 10px;
}
.pv-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #ecfdf5; color: #047857;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; white-space: nowrap;
}
.pv-live span {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--emerald);
  animation: pulse 1.4s ease-in-out infinite;
}

.pv-ping {
  position: absolute;
  bottom: -24px; right: -32px;
  background: rgba(20,15,28,0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: center;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,0.6);
  animation: hs-float-c 6s ease-in-out infinite alternate;
  max-width: 240px;
}
.pv-ping-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--brand-300);
  box-shadow: 0 0 12px var(--brand-300);
  animation: pulse 1.4s ease-in-out infinite;
}

/* ── VISION visual (cam + events) ── */
.pv-vision { width: 100%; max-width: 520px; }
.pv-vision-cam {
  aspect-ratio: 16/10;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(124,76,138,0.18) 0%, transparent 70%),
    linear-gradient(180deg, #15101a 0%, #08060a 100%);
  border-radius: 16px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.pv-cam-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(184,155,191,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,155,191,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* perimeter / climb detection */
.pv-bbox {
  position: absolute;
  border: 1.5px solid;
  border-radius: 2px;
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.pv-bbox.pv-bbox-1 {
  top: 22%; left: 18%; width: 22%; height: 50%;
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 22px -4px var(--red);
  animation: target-pulse 2s ease-in-out infinite;
}
.pv-bbox.pv-bbox-2 {
  top: 38%; right: 18%; width: 26%; height: 38%;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 18px -4px var(--amber);
  animation: target-pulse 2.6s ease-in-out infinite 0.4s;
}
.pv-bbox-label {
  position: absolute; top: -20px; left: -1px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; font-weight: 700;
  padding: 3px 6px; border-radius: 2px;
  background: rgba(8,6,10,0.85);
  white-space: nowrap;
}
.pv-bbox-label.red { color: var(--red); }
.pv-bbox-label.amber { color: var(--amber); }

.pv-corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 1.5px solid var(--brand-300);
  opacity: 0.55;
}
.pv-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.pv-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.pv-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.pv-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.pv-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-300), transparent);
  box-shadow: 0 0 12px var(--brand-300);
  animation: pv-scan 3.5s ease-in-out infinite;
}
@keyframes pv-scan {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(320px); opacity: 0; }
}

.pv-cam-hud {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
}

/* event tape */
.pv-events {
  margin-top: 14px;
  display: grid; gap: 8px;
}
.pv-ev {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  position: relative; overflow: hidden;
}
.pv-ev::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
}
.pv-ev.red::before { background: var(--red); }
.pv-ev.amber::before { background: var(--amber); }
.pv-ev.violet::before { background: var(--violet); }
.pv-ev i { font-size: 18px; }
.pv-ev.red i { color: var(--red); }
.pv-ev.amber i { color: var(--amber); }
.pv-ev.violet i { color: var(--violet); }
.pv-ev-t { font-size: 13px; font-weight: 600; color: white; letter-spacing: -0.005em; }
.pv-ev-m { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.06em; margin-top: 2px; }
.pv-ev-time { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 0.06em; }

/* trust strip below the two products */
.trust-strip {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: 32px 36px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
}
.ts-item {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  align-items: center;
}
.ts-item i {
  font-size: 28px; color: var(--brand-300);
}
.ts-item strong {
  display: block; font-size: 14px; font-weight: 600; color: white;
}
.ts-item span {
  display: block; font-size: 12px; color: rgba(246,241,247,0.5);
  margin-top: 2px; line-height: 1.4;
}
@media (max-width: 900px) {
  .trust-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .trust-strip { grid-template-columns: 1fr; }
}

/* ─────── NAV DROPDOWN ─────── */
.nav-dropdown { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.nav-trigger i { font-size: 12px; transition: transform 200ms; }
.nav-trigger.on i { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 460px;
  background: rgba(18,14,22,0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 14px;
  display: grid; gap: 6px;
  opacity: 0; pointer-events: none;
  transition: all 240ms cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7);
  z-index: 60;
}
.nav-menu.on {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nm-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  padding: 14px;
  border-radius: 12px;
  transition: background 220ms;
  align-items: center;
}
.nm-item:hover { background: rgba(255,255,255,0.04); }
.nm-ic {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 22px;
}
.nm-item strong {
  display: block; font-size: 15px; font-weight: 600; color: white;
  letter-spacing: -0.01em;
}
.nm-item span {
  display: block; font-size: 12.5px; line-height: 1.4;
  color: rgba(246,241,247,0.6); margin-top: 4px;
}

/* ── HCV-AI red variant for Vision card ── */
.hcv-ai-bbox.red { border-color: var(--red); box-shadow: 0 0 14px -2px var(--red); }
.hcv-ai-bbox.red::before, .hcv-ai-bbox.red::after { background: var(--red); }
.hcv-ai-label.red { color: var(--red); }
.hcv-ai-label .emr.red { background: var(--red); }


/* ============================================================
   GLOBAL fix — italic .accent descender overlap.
   Every h1/h2/h3 .accent gets the same inline-block + padding-
   bottom treatment so 'g', 'p', 'y', 'j' don't crash into the
   next paragraph. Higher-specificity rules above still win.
   ============================================================ */
h1 .accent,
h2 .accent,
h3 .accent {
  display: inline-block;
  line-height: 1.15;
  padding-bottom: 0.18em;
  vertical-align: baseline;
}


/* ============================================================
   v4 ADDITIONS — person silhouettes in Vision detection boxes,
   Apple-style HCarousel card effects, pricing strikethrough.
   ============================================================ */

/* abstract anomaly visualization inside detection bboxes
   — heat blob (pulsing radial) + corner crosshair tick marks
   + measurement lines. No person figures; reads as "vision
   system flagging a region" without anthropomorphic noise. */
.pv-bbox-1::before,
.pv-bbox-2::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* heat blob */
    radial-gradient(circle at 50% 60%, var(--blob, rgba(239,68,68,0.55)) 0%, transparent 55%),
    /* faint motion-vector trails */
    repeating-linear-gradient(45deg, transparent 0 6px, var(--trail, rgba(239,68,68,0.06)) 6px 7px);
  filter: blur(0.4px);
  animation: pv-blob 2.2s ease-in-out infinite;
}
.pv-bbox-2::before {
  --blob: rgba(245,158,11,0.5);
  --trail: rgba(245,158,11,0.06);
  animation-duration: 2.8s;
  animation-delay: 0.4s;
}
@keyframes pv-blob {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 0.95; transform: scale(1.02); }
}

/* crosshair tick marks pinned to each side of the bbox */
.pv-bbox-1::after,
.pv-bbox-2::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* top tick */
    linear-gradient(to right, transparent calc(50% - 6px), currentColor calc(50% - 6px), currentColor calc(50% + 6px), transparent calc(50% + 6px)) top / 100% 1px no-repeat,
    /* bottom tick */
    linear-gradient(to right, transparent calc(50% - 6px), currentColor calc(50% - 6px), currentColor calc(50% + 6px), transparent calc(50% + 6px)) bottom / 100% 1px no-repeat,
    /* left tick */
    linear-gradient(to bottom, transparent calc(50% - 6px), currentColor calc(50% - 6px), currentColor calc(50% + 6px), transparent calc(50% + 6px)) left / 1px 100% no-repeat,
    /* right tick */
    linear-gradient(to bottom, transparent calc(50% - 6px), currentColor calc(50% - 6px), currentColor calc(50% + 6px), transparent calc(50% + 6px)) right / 1px 100% no-repeat;
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px currentColor);
}
.pv-bbox-1::after { color: var(--red); }
.pv-bbox-2::after { color: var(--amber); }

/* ─────── APPLE-STYLE HCARD ─────────────────────────────────
   The `.hcard` rule and its 3D-translate children now live in a single
   consolidated block above (search "Single source of truth for .hcard").
   This section previously held an override that stacked with the original,
   making the top edge unfixable. Intentionally left empty as a breadcrumb. */

/* specular highlight that follows cursor */
.hcard-spec {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 320px at var(--mx, 50%) var(--my, 50%),
    rgba(184,155,191,0.16) 0%,
    rgba(184,155,191,0.05) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.22,1,0.36,1);
  z-index: 0;
  mix-blend-mode: screen;
}
.hcard:hover .hcard-spec { opacity: 1; }

/* (removed) the previous 1px top sheen line read as a hard cut-off
   against the dark section background — corner radius now reads cleanly
   without it. Reinstate only if a softer, inset version is designed. */

/* ─────── PRICING — strikethrough + Free + Contact sales ─────── */
.pricing .head h2 .accent {
  font-family: var(--font-serif); font-style: italic;
  color: var(--brand-700); font-weight: 400;
}
.pc-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.pc-product {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  padding: 4px 10px;
  background: var(--paper-canvas);
  border-radius: 999px;
}
.price-card.featured .pc-product {
  background: rgba(184,155,191,0.18); color: var(--brand-300);
}
.price-card.contact .pc-product {
  background: rgba(184,155,191,0.18); color: var(--brand-700);
}

.pc-price {
  position: relative;
  margin: 22px 0 0;
  display: flex; align-items: baseline; gap: 16px;
}
.pc-was {
  font-size: 32px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--fg-4);
  position: relative;
  display: inline-block;
}
.pc-was::after {
  content: ""; position: absolute;
  left: -4px; right: -4px; top: 55%;
  height: 3px;
  background: var(--red);
  transform: rotate(-8deg);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(239,68,68,0.5);
}
.pc-now {
  font-size: 56px; font-weight: 700; letter-spacing: -0.035em;
  line-height: 1; color: var(--ink-1000);
  position: relative;
}
.price-card.featured .pc-now { color: white; }
.pc-now::after {
  content: "";
  position: absolute; left: -2px; right: -2px; bottom: 4px; height: 8px;
  background: linear-gradient(90deg, rgba(124,76,138,0.18), rgba(124,76,138,0.0));
  z-index: -1;
  border-radius: 4px;
}

/* contact sales card */
.price-card.contact {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(184,155,191,0.18) 0%, transparent 60%),
    var(--paper-canvas);
  border-color: var(--brand-300);
}
.pc-contact {
  margin: 22px 0 0;
}
.pc-contact-line {
  display: block;
  font-size: 38px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink-1000); line-height: 1;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
}
.pc-contact-sub {
  display: block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--fg-3);
}

.pricing-foot {
  /* Centered with `width: fit-content` + `margin: 0 auto`. The previous
     rule also used `position: relative; left: 50%; transform: translateX(-50%)`
     which causes horizontal overflow on the right side of the page when the
     pill is wide (the box anchors at 50% of parent, transform pulls back,
     but the layout still reserves the overflow space). */
  display: flex; align-items: center; gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 48px auto 0;
  padding: 14px 22px;
  background: var(--paper-canvas);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px; color: var(--fg-2);
}
.pricing-foot i {
  font-size: 20px; color: var(--brand-700);
}

/* ═════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — comprehensive pass
   ─────────────────────────────────────────────────────────────────────
   Strategy: three breakpoints.
     1024px  → small desktop / tablet landscape: collapse 3-col → 2,
              4-col → 2. Reduce hero scene, shrink padding.
     768px   → tablet portrait: collapse 2-col → 1 where it helps.
              Nav links shrink, pricing stacks, footer reflows.
     540px   → mobile: type-scale ramp down, all multi-col → 1,
              CTA buttons go full-width, padding minimized.
   No mobile nav drawer for now — the nav-links wrap or hide cleanly
   on small screens; that's a separate v2 task.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .container { padding: 0 24px; }

  /* PRICING — collapse to single column on tablets and below.
     Was 3 columns × 1fr, which squished the middle card to a vertical
     strip at <1100px (max-width of the grid). */
  .price-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 560px;
  }

  /* SHOWCASE 2-col split also goes to 1 col for breathing room */
  .showcase-inner { grid-template-columns: 1fr; gap: 48px; }

  /* FEATURE GRID 1.4/1/1 collapses cleanly to 2 over 1 */
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid > :first-child { grid-column: 1 / -1; }

  /* SERVICE TILES 4-col → 2-col */
  .service-grid { grid-template-columns: repeat(2, 1fr); }

  /* NUMBERS 4-col → 2-col */
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* HERO scene — shrink the sidebar column */
  .hero-product .frame-content { grid-template-columns: 1fr; }
  .hero-product .frame-sidebar { display: none; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }

  /* SITE NAV — hide middle links, keep logo + CTA only.
     Future: replace with a hamburger drawer. */
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
  .nav-cta .btn-ghost { display: none; }  /* hide Sign in, keep Book demo */

  /* HERO — type scale down */
  .hero h1 { font-size: clamp(36px, 7vw, 56px); }
  .hero .lede { font-size: 16px; }
  .hero-ctas .btn { padding: 12px 18px; font-size: 13px; }

  /* FEATURE GRID and 2-col grids → 1-col */
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid > :first-child { grid-column: auto; }
  .announce-grid { grid-template-columns: 1fr; }

  /* SERVICE TILES still 2-col, but smaller */
  .service-grid { gap: 10px; }

  /* SHOWCASE / Products split → already 1-col at 1024 */

  /* BIG NUMBERS reduce font */
  .numbers-grid .n-value { font-size: 56px; }

  /* FAQ — tighter on mobile */
  .faq .head h2 { font-size: clamp(28px, 6vw, 40px); }

  /* PRICING text scale */
  .pricing .head h2 { font-size: clamp(28px, 5.5vw, 44px); line-height: 1.1; }
  .pricing .lede { font-size: 16px; }

  /* FOOTER — stack columns */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }

  /* SECTIONS — generic padding pullback */
  .features, .services, .announcements, .showcase,
  .numbers, .pricing, .faq, .products {
    padding-top: 80px; padding-bottom: 80px;
  }
}

@media (max-width: 540px) {
  .container { padding: 0 16px; }

  /* SERVICE TILES → 1-col on smallest screens to keep readability */
  .service-grid { grid-template-columns: 1fr; }

  /* NUMBERS → 1-col stack */
  .numbers-grid { grid-template-columns: 1fr; }

  /* FOOTER fully stacked */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* TYPE — ramp display sizes down so they don't dominate */
  .hero h1 { font-size: clamp(30px, 8vw, 44px); }
  .hero .lede { font-size: 15px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; width: 100%; }

  /* All H2s small */
  .features h2, .services h2, .announcements h2, .showcase h2,
  .numbers h2, .pricing h2, .faq h2, .products .head h2 {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.1;
  }

  /* PRICING card padding tighter on mobile */
  .price-card { padding: 28px 22px; }

  /* FAQ items full-width with tighter padding */
  .faq-item { padding: 18px 16px; }

  /* CAROUSEL on mobile: pinned horizontal scroll is awkward on touch,
     so we collapse to a normal vertical stack. The track stops being
     a flex row and becomes a vertical list constrained to the viewport
     content area. */
  .hcarousel { min-height: auto; }
  .hcarousel-pin { position: static; height: auto; overflow: visible; }
  .hcarousel-head { padding: 64px 20px 24px; text-align: center; }
  .hcarousel-head h2 { font-size: clamp(28px, 7vw, 40px); }
  .hcarousel-head p { display: none; }  /* hide "Scroll." hint on mobile */
  /* Move padding to viewport so the track itself stays at 100% width
     of the visible area — no horizontal overflow. */
  .hcarousel-viewport { padding: 0 20px 64px; }
  .hcarousel-track {
    flex-direction: column;
    transform: none !important;  /* override JS-applied translateX */
    padding: 0;
    gap: 20px;
    width: 100%;
  }
  .hcard {
    width: 100%; height: auto; min-height: 400px;
    transform: none !important;  /* override JS-applied 3D tilt */
  }
  /* Disable hover-tilt and cursor specular on touch devices */
  .hcard-spec { display: none; }
}

/* Touch-device safety: kill hover-only interactions */
@media (hover: none) {
  .hcard-spec { display: none; }
  .hcard:hover { transform: none; }
}