/* =========================================================
   SentriTec — Marketing site
   Design language inspired by verkada.com (clean, spacious,
   alternating light/dark sections, large grotesque type).
   ========================================================= */

:root {
  --ink:        #161618;   /* near-black text / dark sections */
  --ink-2:      #26262b;
  --slate:      #5b5f6b;   /* secondary text */
  --line:       #e6e6ea;   /* hairlines */
  --paper:      #ffffff;
  --paper-2:    #f6f6f8;   /* light section bg */
  --accent:     #616794;   /* SentriTec brand indigo */
  --accent-2:   #4a4f73;   /* darker hover */
  --accent-soft:#eef0f6;
  --radius:     16px;
  --radius-lg:  24px;
  --maxw:       1240px;
  --nav-h:      72px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --shadow:     0 24px 60px -28px rgba(22,22,24,.35);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.05; font-weight: 600; margin: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow.on-dark { color: #aab0d6; }

.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--slate); max-width: 640px; }
.section .lead { margin-top: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  padding: 13px 24px; padding: 7px 25px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #f0f0f3; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2c2c30; }
.btn-secondary { background: transparent; color: #fff; border-color: #fff; }
.btn-secondary:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost.on-dark:hover { border-color: #fff; background: rgba(255,255,255,.06); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--accent);
}
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Announcement bar (fixed just below the nav) ---------- */
/* --anno-h is set by nav.js to the bar's measured height; the whole page
   shifts down by that amount so the bar never covers content */
body { padding-top: var(--anno-h, 0px); }
.anno-bar {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 95;
  background: var(--ink); color: rgba(255,255,255,.82);
  text-align: center; font-size: 13.5px; line-height: 1.5;
  padding: 10px clamp(16px, 4vw, 24px);
}
.anno-bar b { color: #fff; font-weight: 600; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
}
/* links sit left, right after the logo; the actions push to the far right */
.nav .wrap { display: flex; align-items: center; justify-content: flex-start; gap: clamp(24px, 3vw, 44px); }
.nav-right { margin-left: auto; }
.nav-logo { height: 26px; height: 30px;width: auto; margin-left: -9px; }
.nav-logo.white { display: none; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: 14px; font-weight: 500; opacity: .92;
  position: relative; padding: 6px 0;
  transition: opacity .2s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: currentColor; transition: width .25s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 16px; }

/* nav triggers (mega-menu parents) */
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 300; color: inherit; opacity: .92;
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.nav-trigger:hover, .nav-item:hover .nav-trigger, .nav-item.open .nav-trigger { opacity: 1; color: var(--accent); }
.nav-trigger svg { display: none; }

/* solid nav: on scroll OR while a mega menu is open */
.nav.scrolled,
.nav:has(.nav-item:hover),
.nav:has(.nav-item.open) {
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
.nav.scrolled .nav-logo.white,
.nav:has(.nav-item:hover) .nav-logo.white,
.nav:has(.nav-item.open) .nav-logo.white { display: none; }
.nav.scrolled .nav-logo.dark,
.nav:has(.nav-item:hover) .nav-logo.dark,
.nav:has(.nav-item.open) .nav-logo.dark { display: block; }
.nav.scrolled .btn-ghost,
.nav:has(.nav-item:hover) .btn-ghost,
.nav:has(.nav-item.open) .btn-ghost { color: var(--ink); border-color: var(--line); }
.nav.scrolled .btn-ghost:hover { border-color: var(--ink); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: inherit; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; transition: .25s var(--ease); }

/* ---------- Mega menu ---------- */
.nav-item { position: static; }
.mega {
  position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 95;
  background: #fff; color: var(--ink); border-top: 1px solid var(--line);
  box-shadow: 0 26px 44px -22px rgba(20,22,30,.28);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-item:hover > .mega, .nav-item:focus-within > .mega, .nav-item.open > .mega {
  opacity: 1; visibility: visible; transform: none;
}
.nav .mega-inner { display: flex; justify-content: flex-start; align-items: flex-start; gap: clamp(36px, 5vw, 72px); padding: clamp(28px, 3vw, 44px) 0 clamp(32px, 3.5vw, 48px); }
/* simple megas share the Products anatomy: fixed label rail + divider line + content */
.nav .mega-inner--simple { align-items: stretch; gap: 0; }
.mega-inner--simple .mega-aside {
  flex: 0 0 clamp(150px, 14vw, 190px); border-right: 1px solid var(--line); padding-right: clamp(20px, 2vw, 32px);
  /* match the Products rail tabs: same size, weight and text position */
  font-size: 15.5px; font-weight: 600; letter-spacing: 0; padding-top: 9px; padding-left: 6px;
}
.mega-inner--simple .mega-content { padding-left: clamp(24px, 3vw, 44px); }
.mega-feature { flex: 0 0 clamp(280px, 26vw, 360px); }
.mega-content { flex: 0 1 auto; min-width: 0; }
.mega-cards--4 { flex: 1 1 auto; }
.mega-aside { flex: 0 0 110px; }

/* feature card (left) */
.mega-feature { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); transition: border-color .2s var(--ease); }
.mega-feature:hover { border-color: #d9dae1; }
/* image-only, non-clickable feature (no redirect) */
.mega-feature--static { cursor: default; }
.mega-feature--static:hover { border-color: var(--line); }
.mega-feat-img { aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(135deg, #eef0f6, #e1e4ee); }
.mega-feat-img--dark { background: linear-gradient(135deg, #2b2f4a, #14161f); }
.mega-feat-img--dark .ph-mini { color: rgba(255,255,255,.5); }
.ph-mini { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9aa0b4; }
.mega-feat-text { padding: 18px 20px 20px; }
.mega-feat-text b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.mega-feat-text small { font-size: 13.5px; color: var(--slate); line-height: 1.5; }
.mega-aside { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--accent); }

/* products list */
.mega-products { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.mega-prod { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 14px; transition: background .2s var(--ease); }
.mega-prod:hover { background: var(--paper-2); }
.mega-thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.mega-thumb img { max-width: 72%; max-height: 80%; width: auto; height: auto; object-fit: contain; }
.mega-prod-t b { display: block; font-size: 15.5px; font-weight: 600; }
.mega-prod-t small { font-size: 13px; color: var(--slate); }

/* simple link columns (industries) */
.mega-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; max-width: 620px; }
.mega-links a { display: block; padding: 11px 6px; font-size: 15.5px; font-weight: 500; color: var(--ink); border-radius: 8px; transition: color .2s var(--ease); }
.mega-links a:hover { color: var(--accent); }

/* nested product tree: Products > Access Control > Door Access */
.mega-tree { display: flex; gap: clamp(36px, 4vw, 64px); flex-wrap: wrap; }
.mega-branch-title { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.mega-branch-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-branch-links a { display: block; padding: 9px 6px; font-size: 15.5px; font-weight: 500; color: var(--ink); border-radius: 8px; transition: color .2s var(--ease); }
.mega-branch-links a:hover { color: var(--accent); }

/* product mega: category rail (left) + item grid (right) */
.nav .mega-inner.mega-cat { gap: 0; align-items: stretch; }
.mega-cats {
  flex: 0 0 clamp(150px, 14vw, 190px); display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--line); padding-right: clamp(20px, 2vw, 32px);
}
.mega-cat-tab {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
  padding: 9px 6px; border-radius: 8px; font-size: 15.5px; font-weight: 600; color: var(--ink);
  transition: color .2s var(--ease);
}
.mega-cat-tab:hover, .mega-cat-tab.active { color: var(--accent); }
.mega-cat-body { flex: 1 1 auto; min-width: 0; padding-left: clamp(24px, 3vw, 44px); }
.mega-cat-panel { display: none; }
.mega-cat-panel.active { display: block; }
.mega-grid { display: grid; grid-template-columns: repeat(auto-fill, 230px); gap: 14px; }
/* the generic ".nav-links a" rule (padding + underline) must not hijack the mega cards */
.nav-links .mega-card { padding: 18px 20px; opacity: 1; }
.nav-links .mega-card::after { content: none; }
.nav-links .mega-card b { margin: 0; }

/* cards grid (resources / partners) */
.mega-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 680px; }
.mega-cards--4 { grid-template-columns: repeat(3, 1fr); max-width: none; }
.mega-cards--fixed { grid-template-columns: repeat(2, 230px); max-width: none; }
.mega-cards--3 { grid-template-columns: repeat(3, 230px); max-width: none; }
.mega-card { display: block; padding: 18px 20px; border-radius: 14px; background: #fafafa; transition: background .2s var(--ease), transform .2s var(--ease); }
.mega-card:hover { background: #eef0f4; }
.mega-card b { display: block; font-size: 14px; font-weight: 300; margin-bottom: 5px; }
/* card with an image below the label (Products menu) */
.mega-card--img b { margin-bottom: 12px; }
.mega-card-img { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; }
.mega-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* product renders (transparent PNGs): contained with breathing room, never cropped */
.mega-card-img img.fit { object-fit: contain; padding: 12px; }
.mega-card small { font-size: 13px; color: var(--slate); line-height: 1.5; }

/* mega card with a leading icon (Industries) */
.nav-links .mega-card--ico { display: flex; align-items: center; gap: 12px; }
.mega-card--ico .mega-card-ic { flex: none; display: grid; place-items: center; color: var(--accent); }
.nav-links .mega-card--ico b { margin: 0; }

/* mobile menu accordions */
.m-group { border-bottom: 1px solid var(--line); }
.m-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.m-group summary::-webkit-details-marker { display: none; }
.m-group summary svg { transition: transform .2s var(--ease); color: var(--slate); }
.m-group[open] summary svg { transform: rotate(180deg); }
.nav-mobile .m-group a { display: block; padding: 11px 0 11px 14px; font-size: 15.5px; font-weight: 500; color: var(--slate); border-bottom: 0; }
.nav-mobile .m-group a:hover { color: var(--ink); }
.nav-mobile .m-sublabel { display: block; padding: 12px 0 4px 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }

/* ---------- Hero (full-screen video) ---------- */
.hero-v {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; 
  /* align-items: center;  */
  align-items: flex-end; 
  justify-content: center; text-align: center;
  color: #fff; background: #0c0d12;
}
.hero-v-media { position: absolute; inset: 0; z-index: 0; }
.hero-v-video, .hero-v-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* mobile: the tall crop cuts the sides — bias every hero image toward its right side,
   where the subject usually sits (readers, doors, devices) */
@media (max-width: 700px) {
  .hero-v-media img, .hero-v-media video,
  .pass-hero-bg img,
  .nw-hero-bg img { object-position: 75% center; }
}
.hero-v-ph {
  position: absolute; inset: 0; display: grid; place-items: end center;
  padding-bottom: clamp(28px, 6vh, 64px);
  background:
    radial-gradient(70% 60% at 30% 18%, #23263b 0%, rgba(35,38,59,0) 60%),
    linear-gradient(135deg, #1a1c2b 0%, #0c0d12 100%);
}
.hero-v-ph .ph-label { color: rgba(255,255,255,.42); }
.hero-v-ph .ph-label svg { opacity: .85; }
.hero-v-ph .ph-label small { color: rgba(255,255,255,.32); }
.hero-v-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* diagonal: dark anchored bottom-left, fading out toward the upper-right half,
     plus a faint top strip so the transparent nav stays legible over bright images */
  background:
    linear-gradient(180deg, rgba(8,9,14,.35) 0%, rgba(8,9,14,0) 16%),
    linear-gradient(45deg, rgba(8,9,14,.8) 0%, rgba(8,9,14,.42) 30%, rgba(8,9,14,0) 55%);
}
/* variant: dark rises from the bottom-left corner and is gone by mid-screen */
.hero-v-scrim--corner {
  background: linear-gradient(45deg, rgba(8,9,14,.78) 0%, rgba(8,9,14,.4) 28%, rgba(8,9,14,0) 52%);
}
.hero-v-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 34px;
  padding: calc(var(--nav-h) + 40px) 0 64px;
}
.hero-v-title {
  text-align: left;
  font-size: clamp(40px, 7vw, 92px); font-size: clamp(40px, 7vw, 60px); font-weight: 600; max-width: 17ch;
  letter-spacing: -0.03em; line-height: 1.04; text-shadow: 0 2px 36px rgba(0,0,0,.35);
  animation: heroRise 1s var(--ease) .15s both;
}
.hero-v-sub {
  text-align: left; margin: 20px 0 0; max-width: 60ch;
  font-size: clamp(16px, 1.55vw, 19px); line-height: 1.6; color: rgba(255,255,255,.84);
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
  animation: heroRise 1s var(--ease) .3s both;
}
.hero-v-cta .btn svg { flex: none; }
.hero-v-cta {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  animation: heroRise 1s var(--ease) .4s both;
}
.hero-v-cta .btn { padding: 15px 34px; font-size: 16px; }
/* the video/placeholder gently settles in as the hero loads */
.hero-v-media { animation: heroMedia 1.4s var(--ease) both; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroMedia {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Hero (scroll-pinned, multi-scene) ---------- */
.hero-scroll { position: relative; height: 300vh; background: var(--paper-2); }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #d9dbe0; color: var(--ink);
}
/* stacked slides crossfade */
.hs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.hs-slide.active { opacity: 1; }
.hs-media { position: absolute; inset: 0; overflow: hidden; }
.hs-media picture { display: block; width: 100%; height: 100%; }
.hs-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.hs-slide.active .hs-media img { transform: scale(1); }
.hs-media .ph { position: absolute; inset: 0; }
/* slide 1 opens on the platform dashboard instead of a device */
.hs-slide--platform .hs-media {
  background:
    radial-gradient(58% 60% at 80% 16%, rgba(124,132,196,.22), transparent 62%),
    linear-gradient(135deg, #f5f6f9 0%, #e9ebf1 55%, #dee0e9 100%);
}
.hs-ui { position: absolute; z-index: 1; right: clamp(20px, 5vw, 80px); top: 50%; transform: translateY(-50%); width: min(48%, 560px); }
.hs-ui .ui-mock { width: 100%; }
/* left scrim so dark text stays legible across any scene */
.hs-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* background: linear-gradient(90deg, rgba(248,249,251,.92) 0%, rgba(248,249,251,.6) 28%, rgba(248,249,251,0) 58%); */
  background: linear-gradient(90deg, rgb(255 255 255 / 92%) 0%, rgb(255 255 255 / 60%) 28%, rgb(255 255 255 / 0%) 58%), linear-gradient(360deg, #FFFFFF 0%, #ffffff00 34%)
}
.hs-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.hs-text {
  max-width: 620px; opacity: 0; transform: translateY(18px);
  transition: opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.hs-slide.active .hs-text { opacity: 1; transform: none; }
.hs-label {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.hs-text h1 { font-size: clamp(38px, 5.4vw, 78px); font-weight: 600; max-width: 14ch; }

/* progress dots (right side) */
.hs-dots {
  position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%);
  z-index: 5; display: flex; flex-direction: column; gap: 14px;
}
.hs-dot {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(20,22,30,.22); transition: background .3s var(--ease), height .3s var(--ease);
}
.hs-dot:hover { background: rgba(20,22,30,.4); }
.hs-dot.active { background: var(--accent); height: 30px; }
.hs-dot:not(.active) { border: #fafafa solid 1px; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(70,75,95,.55); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-hint .dot { width: 1px; height: 34px; background: linear-gradient(rgba(70,75,95,.6), transparent); animation: drop 1.8s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Sections ---------- */
/* .section { padding: clamp(72px, 11vw, 140px) 0; } */
.section.spec {
  padding: clamp(64px, 9vw, 112px) 0;
  background: linear-gradient(180deg,rgba(247, 248, 255, 1) 0%, rgba(255, 255, 255, 1) 20%);
}
.section.mission { padding-bottom: 50px; }
#ecosystem { overflow-x: clip; }  /* clip the carousel bleed at the viewport edge, no sideways page scroll */
.section.tight { padding: clamp(56px, 8vw, 96px) 0; }
.section.dark { background: var(--ink); color: #fff; }
.section.muted { background: var(--paper-2); }
.section-head { max-width: 760px; 
  padding-bottom: 20px;
  padding-bottom: 30px;
}
/* .section-head h2 { font-size: clamp(30px, 4.4vw, 54px); } */
.section-head h2 { font-size: clamp(30px, 4.4vw, 42px); }
.section.dark .section-head h2 { color: #fff; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Ecosystem carousel ---------- */
.carousel-head { margin-bottom: 40px; }
.carousel-head h2 { font-size: clamp(30px, 4.4vw, 54px); }

/* nav controls — filled grey, bottom-right */
.carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.car-arrows { display: flex; gap: 12px; }
.car-btn {
  width: 50px; height: 50px; border-radius: 50%; border: 0;
  background: var(--paper-2); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.car-btn:hover { background: #e4e5ea; }
.car-btn:disabled { opacity: .4; cursor: not-allowed; background: var(--paper-2); }

/* ----- Media-Formats style split: title/desc left, carousel right ----- */
.mf-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mf-head h2 { font-size: clamp(30px, 4.4vw, 54px); }

.mf-split {
  display: grid; grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.45fr);
  gap: clamp(36px, 5vw, 80px); align-items: center; margin-top: clamp(36px, 4.5vw, 64px);
}
/* mirror the carousel track's top/bottom padding so the label aligns with the card top
   and the controls (arrows + Learn More) align with the card bottom on the right */
.mf-info { min-width: 0; display: flex; flex-direction: column; align-self: stretch; padding: 12px 0 34px; }
.mf-label { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-top: auto; margin-bottom: 18px; }
.mf-title { font-size: clamp(28px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 18px; color: var(--ink); max-width: 15ch; }
.mf-desc { font-size: clamp(16px, 1.8vw, 19px); color: var(--slate); line-height: 1.6; margin: 0; max-width: 42ch; }
.mf-controls { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: clamp(28px, 4vw, 44px); }
.mf-controls .btn { margin-left: auto; }
.mf-info.mf-anim .mf-label { animation: mfIn .5s var(--ease) both; }
.mf-info.mf-anim .mf-title { animation: mfIn .5s var(--ease) .06s both; }
.mf-info.mf-anim .mf-desc  { animation: mfIn .5s var(--ease) .12s both; }
@keyframes mfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* carousel overflows to the right (next card bleeds into the page margin);
   clip-path hides the previous card on the LEFT while leaving the right side open,
   and the section clips the bleed at the viewport edge so the page never scrolls sideways */
.carousel { position: relative; overflow: visible; clip-path: inset(-60px -100vw -60px -14px); }
.carousel-track {
  display: flex; gap: clamp(14px, 2vw, 28px); align-items: center;
  padding: 12px 0 34px; transition: transform .55s var(--ease); will-change: transform;
}
.slide {
  flex: 0 0 80%; transform-origin: left bottom;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.slide.is-active { opacity: 1; transform: none; }
/* inactive cards: large preview that bleeds outside the box on the right */
.slide:not(.is-active) { opacity: .55; transform: scale(.78); /*cursor: pointer;*/ }
.mf-split .slide-card::after { content: none; }  /* no title overlay here */

/* foot: arrows left, progress right */
.mf-foot { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: clamp(34px, 4vw, 52px); }
.mf-progress { display: flex; align-items: center; gap: 20px; flex: 1; max-width: 460px; margin-left: auto; }
.mf-bar { display: block; flex: 1; height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.mf-bar span { display: block; height: 100%; width: 33.33%; background: var(--accent); border-radius: 999px; transition: width .5s var(--ease); }
.mf-count { font-size: 15px; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .02em; }
.mf-count b { color: var(--ink); font-weight: 600; }
.mf-count i { font-style: normal; margin: 0 7px; color: #c7c9d2; }

/* square video box */
.slide-card {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  background: radial-gradient(120% 130% at 12% 0%, #2b2f4a 0%, #1a1c2b 48%, #0e0f16 100%);
  border-radius: var(--radius-lg);
  color: #fff; box-shadow: var(--shadow);
  display: grid; place-items: center; padding: clamp(24px, 2.6vw, 40px); text-align: center;
}
.slide-card video, .slide-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.slide-card::after { /* scrim so the bottom-left title stays legible over the video */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; z-index: 2;
  background: linear-gradient(transparent, rgba(8,8,14,.82)); pointer-events: none;
}
/* title overlaid at the bottom-left, inside the box */
.slide-title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; text-align: left;
  padding: clamp(22px, 2.6vw, 36px);
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; color: #fff; letter-spacing: -0.025em;
}
/* description below the box, outside */
.slide-desc { margin: 20px 4px 0; color: var(--slate); font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; max-width: 46ch; }

.slide-stage {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; padding: 36px;
  overflow: hidden;
}
.slide-stage img, .slide-stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.slide-stage::before { /* faint grid texture */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(124,132,196,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(124,132,196,.07) 1px, transparent 1px);
  background-size: 38px 38px; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.video-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(124,132,196,.18); color: #c7ccec; border: 1px solid rgba(124,132,196,.32);
}
.stage-note { position: relative; z-index: 1; text-align: center; max-width: 52ch; color: rgba(255,255,255,.85); }
.stage-note svg { color: #aab0d6; margin: 0 auto 18px; opacity: .85; }
.stage-note p { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; margin: 0; }
.stage-note strong { color: #fff; font-weight: 600; }

/* ---------- Access Control System (big alternating video squares) ---------- */
.acs2 { display: grid; gap: clamp(56px, 9vw, 120px); margin-top: clamp(44px, 6vw, 80px); }
.acs2-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.acs2-row:nth-child(even) .acs2-video { order: 2; }          /* alternate the video side */

.acs2-video {
  position: relative; aspect-ratio: 1 / 1; border-radius: clamp(20px, 2.4vw, 30px); overflow: hidden;
  display: grid; place-items: center; padding: clamp(28px, 3vw, 48px); text-align: center; color: #fff;
  background: radial-gradient(120% 130% at 15% 0%, #2b2f4a 0%, #1a1c2b 48%, #0e0f16 100%);
  box-shadow: var(--shadow);
}
.acs2-video video, .acs2-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.acs-note { position: relative; z-index: 1; max-width: 36ch; color: rgba(255,255,255,.5); }
.acs-note svg { color: rgba(255,255,255,.6); margin: 0 auto 18px; display: block; }
.acs-note p { font-size: clamp(13.5px, 1.5vw, 15px); line-height: 1.6; margin: 0; }

.acs2-num { display: block; font-size: clamp(40px, 5vw, 66px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--accent); opacity: .28; margin-bottom: clamp(14px, 2vw, 22px); }
.acs2-text h3 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 16px; max-width: 14ch; }
.acs2-text p { font-size: clamp(16px, 1.9vw, 20px); color: var(--slate); line-height: 1.55; margin: 0; max-width: 42ch; }

.acs-cta { display: flex; justify-content: center; margin-top: clamp(48px, 7vw, 84px); }

.carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.carousel-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--line); transition: background .25s var(--ease), width .25s var(--ease);
}
.carousel-dots button.active { background: var(--accent); width: 26px; border-radius: 999px; }

/* ---------- Feature rows (alternating) ---------- */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(40px, 6vw, 88px);
}
.feature + .feature { margin-top: clamp(72px, 10vw, 128px); }
.feature.reverse .feature-media { order: 2; }
.feature h3 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 18px; }
.feature p { color: var(--slate); font-size: 18px; max-width: 46ch; }
.section.dark .feature p { color: rgba(255,255,255,.72); }
.feature-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--slate); }
.section.dark .feature-list li { color: rgba(255,255,255,.78); }
.feature-list svg { flex: none; margin-top: 3px; color: var(--accent); }
.section.dark .feature-list svg { color: #aab0d6; }
.feature-stack { margin-top: clamp(40px, 5vw, 72px); }
.feature-media .ftr-card { width: 100%; }
.feature-text .link-arrow { margin-top: 22px; }

/* ---------- Placeholder media ---------- */
.media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--paper-2); box-shadow: var(--shadow);
}
.media.tall { aspect-ratio: 3 / 4; }
.ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    linear-gradient(135deg, #eef0f6 0%, #e3e6f0 100%);
  color: #9aa0b4;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(97,103,148,.07) 0 2px, transparent 2px 14px);
}
.ph-label {
  position: relative; z-index: 1; text-align: center;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.ph-label svg { margin: 0 auto 10px; display: block; opacity: .65; }
.ph-label small { display: block; font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .7; margin-top: 4px; }

/* ---------- Concept icon grid (Designed to Work as One) ---------- */
.concept-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px;
}
.concept {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.concept:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.concept .ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 18px;
}
.concept h4 { font-size: 17px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.concept p { font-size: 14.5px; color: var(--slate); margin: 0; }

/* connectors line under concept grid */
.flow {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 40px; color: var(--slate); font-size: 14px; font-weight: 500;
}
.flow .chip { background: var(--accent-soft); color: var(--accent-2); padding: 8px 16px; border-radius: 999px; }
.flow .arrow { color: var(--accent); opacity: .7; }

/* ---------- Platform (software) ---------- */
.platform-intro {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: center;
}
.platform-copy h2 { font-size: clamp(30px, 4.4vw, 54px); }
.platform-copy .lead { margin-top: 18px; }
.platform-points { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 13px; }
.platform-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink); }
.platform-points svg { flex: none; margin-top: 2px; color: var(--accent); }

/* dashboard mock (placeholder for a product screenshot) */
.platform-shot { position: relative; }
.ui-mock {
  display: block; border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ui-top {
  display: flex; align-items: center; gap: 7px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: #fbfbfd;
}
.ui-top i { width: 10px; height: 10px; border-radius: 50%; background: #e1e2e8; }
.ui-top em {
  margin-left: 12px; font-style: normal; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; color: var(--slate);
}
.ui-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #1f7a4d;
  background: rgba(38,160,98,.12); padding: 4px 10px; border-radius: 999px;
}
.ui-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #26a062; }
.ui-body { display: flex; min-height: 300px; }
.ui-side {
  flex: none; width: clamp(54px, 7vw, 76px); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--line); background: #fafbfc;
}
.ui-nav { height: 9px; border-radius: 999px; background: #e7e8ee; }
.ui-nav.on { background: var(--accent); opacity: .85; }
.ui-main { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; }
.ui-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--paper-2); }
.ui-h-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.ui-h-meta { font-size: 11px; color: var(--slate); }
.ui-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--paper-2); }
.ui-row:last-child { border-bottom: 0; }
.ui-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #d9dbe6, #c7cad9); flex: none; }
.ui-rt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ui-rt b { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ui-rt i { font-style: normal; font-size: 11.5px; color: var(--slate); line-height: 1.2; }
.ui-pill {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px;
}
.ui-pill.ok { color: #1f7a4d; background: rgba(38,160,98,.12); }
.ui-pill.no { color: #b23b30; background: rgba(200,70,55,.12); }

/* feature grid — borderless and airy for a cleaner, more minimal feel */
.platform-features {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(34px, 4vw, 56px) clamp(28px, 3.4vw, 52px);
  margin-top: clamp(56px, 7vw, 84px);
}
.platform-features .concept { background: transparent; border: 0; border-radius: 0; padding: 0; }
.platform-features .concept:hover { transform: none; box-shadow: none; }
.platform-features .concept .ico { background: #fff; box-shadow: 0 6px 16px -8px rgba(40,44,60,.25); }

/* integrations strip */
.integrations {
  margin-top: clamp(48px, 6vw, 72px); padding-top: 36px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.integrations-label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.integrations-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.integrations-list li {
  font-size: 14.5px; font-weight: 600; color: var(--slate);
  background: #fff; border: 1px solid var(--line); padding: 9px 18px; border-radius: 999px;
}

/* trust / security strip */
.trust {
  margin-top: clamp(36px, 4vw, 56px); padding-top: 30px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 34px;
}
.trust-title {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin-right: 8px;
}
.trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.trust-list li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--slate); }
.trust-list svg { color: var(--accent); flex: none; }

/* ---------- Why SentriTec (platform value) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 44px); margin-top: 56px; }
.why-ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 18px;
}
.why h4 { font-size: 18px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.why p { font-size: 15px; color: var(--slate); margin: 0; }

/* ---------- Why SentriTec (tabs) ---------- */
.why2 { margin-top: clamp(40px, 5vw, 64px); }
/* pill tabs */
.why2-tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin: 0 auto clamp(28px, 4vw, 44px);
}
.why2-tab {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line);
  font-size: clamp(14px, 1.6vw, 16px); font-weight: 600;
  color: var(--slate); background: none;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.why2-tab:hover { color: var(--accent); border-color: var(--accent); }
.why2-tab.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* split layout: plain text on white beside a rounded image — no card, no border, no shadow */
.why2-panel { display: none; }
.why2-panel.active {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.why2-text {
  color: var(--ink); order: 2;
  display: flex; flex-direction: column; align-items: flex-start;
}
.why2-text h3 { font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px; }
.why2-text > p { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: var(--slate); margin: 0 0 clamp(24px, 3vw, 34px); max-width: 42ch; }
.why2-points { list-style: none; margin: 0 0 clamp(28px, 3.5vw, 40px); padding: 0; display: grid; gap: 16px; }
.why2-points li { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(15px, 1.6vw, 16.5px); font-weight: 500; color: var(--ink); }
.why2-ic { flex: none; color: var(--accent); line-height: 0; margin-top: 1px; }
.why2-cta { margin-top: clamp(8px, 1.5vw, 18px); }

.why2-media {
  position: relative; overflow: hidden; min-height: clamp(320px, 42vw, 560px);
  border-radius: var(--radius-lg); background: var(--paper-2); order: 1;
}
.why2-ph {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 0;
  background: linear-gradient(135deg, #eef0f6 0%, #e3e6f0 100%);
  color: #9aa0b4; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.why2-media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.why2-media img[src=""], .why2-media img:not([src]) { display: none; }

/* ---------- Why SentriTec — centered title, then tabs + image ---------- */
.why3-head { text-align: center; max-width: 800px; margin: 0 auto clamp(40px, 5vw, 64px); }
.why3-head h2 { margin: 0; }
.why3 { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.why3-tabs { display: flex; flex-direction: column; min-width: 0; }
.why3-tab {
  display: flex; gap: 22px; align-items: stretch; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: clamp(15px, 1.9vw, 22px) 0;
}
.why3-line { flex: none; width: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.why3-fill { position: absolute; inset: 0 0 auto 0; width: 100%; height: 0; background: var(--accent); }
.why3-tab.active .why3-fill { animation: why3fill 5s linear forwards; }
@keyframes why3fill { from { height: 0; } to { height: 100%; } }
.why3-tx b { display: block; font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; letter-spacing: -0.01em; color: var(--slate); transition: color .25s var(--ease); }
.why3-tx small { display: block; font-size: 15px; line-height: 1.55; color: #9aa0b4; margin-top: 7px; transition: color .25s var(--ease); }
.why3-tab.active .why3-tx b { color: var(--ink); }
.why3-tab.active .why3-tx small { color: var(--slate); }

.why3-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; }
.why3-pane { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.why3-pane.active { opacity: 1; }
.why3-pane .img-ph { width: 100%; height: 100%; border-radius: 0; }
.why3-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* inline tab image — only used on mobile, where it sits above the active tab's text */
.why3-tab-media { display: none; }

@media (max-width: 920px) {
  .why3-head { margin-bottom: clamp(28px, 5vw, 40px); }
  .why3 { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  /* the shared media stage is replaced by the per-tab image above the active item */
  .why3-media { display: none !important; }
  .why3-tab.active .why3-tab-media { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; margin: 4px 0 14px; animation: tabMediaIn .5s var(--ease) both; }
  .why3-tab-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
/* smooth reveal for inline tab media — expands and fades in instead of popping */
@keyframes tabMediaIn {
  from { opacity: 0; max-height: 0; transform: translateY(6px); }
  to   { opacity: 1; max-height: 340px; transform: none; }
}

/* The Software Experience — one frame, Admin/User toggle swaps screen + copy */
.sw2 { margin-top: clamp(36px, 5vw, 56px); }
.sw2-toggle { display: flex; gap: 4px; width: -moz-fit-content; width: fit-content; margin: 0 auto clamp(36px, 5vw, 56px); padding: 5px; background: var(--paper-2); border-radius: 999px; }
.sw2-tab {
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px;
  color: var(--slate); padding: 10px 26px; border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.sw2-tab.active { background: var(--accent); color: #fff; }

.sw2-body { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.sw2-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.sw2-pane { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); }
.sw2-pane.active { opacity: 1; }
.sw2-pane .img-ph { width: 100%; height: 100%; border-radius: 0; }
.sw2-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw2-copy { position: relative; }
.sw2-text { display: none; }
.sw2-text.active { display: block; animation: tlFade .35s var(--ease) both; }
.sw2-text h3 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 16px; }
.sw2-text > p { color: var(--slate); font-size: clamp(16px, 1.7vw, 18px); line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }

.sw-btn { gap: 9px; }
.sw-btn svg { flex: none; transition: transform .2s var(--ease); }
.sw-btn:hover svg { transform: translateX(3px); }

/* ---------- Software — full-bleed media stage (homepage) ----------
   Video/image fills the whole viewport; a full-width segmented control sits
   up top; the title, description and CTA are anchored bottom-left over a
   legibility scrim. */
.home #software.sw2-hero { padding: 0; }
.sw2-hero .sw2 {
  position: relative; margin: 0; width: 100%;
  /* min-height: 100vh;  */
  /* min-height: 100svh; */
  min-height: calc(100svh - 72px);
  display: flex; overflow: hidden; border-radius: 0;
}
.sw2-hero .sw2-visual {
  position: absolute; inset: 0; z-index: 0;
  aspect-ratio: auto; border-radius: 0; overflow: hidden; background: #0c0d12;
}
.sw2-hero .sw2-pane { position: absolute; inset: 0; }
.sw2-hero .sw2-pane .img-ph {
  width: 100%; height: 100%; border-radius: 0;
  background:
    radial-gradient(80% 70% at 30% 18%, #23263b 0%, rgba(35,38,59,0) 60%),
    linear-gradient(135deg, #1a1c2b 0%, #0c0d12 100%);
}
.sw2-hero .sw2-pane .ph-mini { color: rgba(255,255,255,.5); }
.sw2-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,9,14,.6) 0%, rgba(8,9,14,.14) 30%, rgba(8,9,14,.2) 52%, rgba(8,9,14,.82) 100%);
}
.sw2-overlay {
  position: relative; z-index: 2; align-self: stretch;
  display: flex; flex-direction: column; color: #fff;
  padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 52px));
  padding-top: clamp(24px, 4vw, 30px);
  padding-bottom: clamp(40px, 6vw, 30px);
}
.sw2-top { display: flex; flex-direction: column; gap: clamp(18px, 2.6vw, 30px); }
.sw2-heading {
  margin: 0; color: #fff; 
  /* max-width: 18ch; */
  font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.03em; line-height: 1.06;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
  text-align: center;
}
/* full-width glass segmented control at the top */
.sw2-hero .sw2-toggle {
  width: 100%; margin: 0; gap: 6px; padding: 6px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sw2-hero .sw2-tab { flex: 1; text-align: center; color: rgba(255,255,255,.82); padding: 13px 26px; }
.sw2-hero .sw2-tab:hover { color: #fff; }
.sw2-hero .sw2-tab.active { background: #fff; color: var(--ink); }

/* copy anchored to the bottom-left */
.sw2-hero .sw2-copy { margin-top: auto; max-width: 600px; padding-top: clamp(40px, 8vw, 90px); }

/* mobile: breathing room top/bottom + compact single-word tabs */
@media (max-width: 700px) {
  .sw2-hero .sw2-overlay { padding-top: clamp(28px, 8vw, 44px); padding-bottom: clamp(36px, 10vw, 52px); }
  .sw2-hero .sw2-tab { padding: 11px 10px; font-size: 14px; }
  .sw2-tab-x { display: none; }
}
.sw2-hero .sw2-text h3 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.sw2-hero .sw2-text > p { color: rgba(255,255,255,.86); }

/* Integration — dark visual + clickable numbered feature list (swaps the visual) */
/* Integration — two-column header: title on the left, subheading + CTA on the right */
.intg2-head { display: flex; align-items: flex-start; gap: clamp(32px, 5vw, 80px); margin-bottom: 20px;}
.intg2-head-title { flex: 1 1 0; min-width: 0; }
.intg2-head-title h2 { margin: 0; }
.intg2-head-aside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.intg2-head-aside .lead { margin: 0; color: var(--slate); }

.intg2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: stretch; 
  /* margin-top: clamp(44px, 6vw, 72px);  */
  margin-top: clamp(44px, 6vw, 50px); 
}
.intg2-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; 
  /* min-height: clamp(380px, 42vw, 520px);  */
  min-height: clamp(400px, 60vh, 640px); 
}
.intg2-pane { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); }
.intg2-pane.active { opacity: 1; }
.intg2-pane .img-ph { width: 100%; height: 100%; border-radius: 0; background: linear-gradient(150deg, #2b2f4a 0%, #14161f 100%); }
.intg2-pane .img-ph .ph-mini { color: rgba(255,255,255,.5); }
.intg2-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intg2-list { display: flex; flex-direction: column; justify-content: center; }
.intg2-item {
  display: flex; gap: 20px; padding: clamp(16px, 1.9vw, 22px) clamp(18px, 1.6vw, 24px);
  border-radius: var(--radius); text-align: left; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  transition: background .2s var(--ease);
}
.intg2-item.active { background: var(--accent-soft); }
.intg2-line { flex: none; width: 2px; border-radius: 2px; background: var(--line); align-self: stretch; transition: background .25s var(--ease); }
.intg2-item.active .intg2-line { background: var(--accent); }
.intg2-tx b { display: block; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.01em; color: var(--slate); margin-bottom: 8px; transition: color .25s var(--ease); }
.intg2-item.active .intg2-tx b { color: var(--ink); }
.intg2-num { color: var(--accent); font-weight: 700; margin-right: 8px; }
.intg2-tx small { display: block; font-size: 15px; line-height: 1.55; color: #9aa0b4; transition: color .25s var(--ease); }
.intg2-item.active .intg2-tx small { color: var(--slate); }
.intg2-cta { align-self: flex-start; margin-top: clamp(22px, 3vw, 32px); }
/* inline item image — only used on mobile, where it sits above the active item's text */
.intg2-item-media { display: none; }

@media (max-width: 920px) {
  .intg2-head { flex-direction: column; gap: clamp(16px, 3vw, 24px); margin-bottom: clamp(26px, 6vw, 38px); }
  .intg2 { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  /* keep a real min-height so the box never collapses on browsers/devices
     where aspect-ratio doesn't take effect (the panes inside are absolute) */
  .intg2-visual { min-height: clamp(220px, 62vw, 380px); aspect-ratio: 16 / 11; order: -1; }
  /* home #integration + integrations #native: the shared visual is replaced
     by the image above the active item */
  .home #integration .intg2-visual,
  #native .intg2-visual { display: none; }
  .home #integration .intg2,
  #native .intg2 { gap: 0; }
  #native .intg2 { margin-top: 0; }
  .home #integration .intg2-item.active .intg2-item-media,
  #native .intg2-item.active .intg2-item-media { display: block; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; margin: 2px 0 14px; animation: tabMediaIn .5s var(--ease) both; }
  .intg2-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* Homepage — each major section fills ~one viewport with its content vertically
   centered, so the page reads as one clean screen per section instead of tall
   gaps between them. Compliance is intentionally excluded below (short logo row). */
.home #why-sentritec,
.home #software,
.home #products,
.home #integration {
  /* min-height: 100vh; */
  /* min-height: 100svh; */
  min-height: calc(100svh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* real padding (inside the 100svh box via border-box) guarantees breathing room
     between sections when the content grows taller than the viewport on short screens */
  padding-top: clamp(72px, 9vh, 120px);
  padding-bottom: clamp(72px, 9vh, 120px);
}
/* mobile: drop the one-screen-per-section constraint — stacked content is much
   shorter than the viewport, so centering it leaves huge gaps top and bottom */
@media (max-width: 920px) {
  .home #why-sentritec,
  .home #products,
  .home #integration {
    min-height: 0;
    padding-top: clamp(56px, 10vw, 80px);
    padding-bottom: clamp(56px, 10vw, 80px);
  }
}
/* a */

  .home #integration.sec-bg{
        background-color: #F4F4F7;
  }

/* Compliance — monochrome logo row that goes full colour on hover.
   Kept at natural (short) height — not stretched to the viewport. */
#compliance { padding-top: clamp(56px, 8vw, 88px); padding-bottom: clamp(56px, 8vw, 88px); }

/* Who Trusts Us — continuous right-to-left logo marquee */
.trust-sec { padding: clamp(56px, 8vw, 88px) 0; background: var(--paper); overflow-x: clip; }
.trust-marquee { overflow: hidden; margin-top: clamp(36px, 5vw, 56px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trust-track { display: flex; width: max-content; animation: trustScroll 30s linear infinite; }
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-set {
  list-style: none; margin: 0; padding: 0 0 0 clamp(48px, 7vw, 96px);
  display: flex; align-items: center; gap: clamp(48px, 7vw, 96px); flex: none;
}
.trust-set li {
  flex: none; display: inline-flex; align-items: center;
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; letter-spacing: .01em;
  color: #b4b8c4; white-space: nowrap;
}
.trust-set img { height: clamp(42px, 5.5vw, 64px); width: auto; filter: grayscale(1) opacity(.6); }
@keyframes trustScroll { to { transform: translateX(-50%); } }

/* Industries — card carousel that bleeds to the right edge of the screen */
.ind-sec { overflow-x: clip; }  /* hard-clips the bleeding track at the viewport edge, no sideways page scroll */
.ind-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3.2vw, 40px); }
.ind-head h2 { margin: 0; font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.03em; line-height: 1.06; max-width: 16ch; }
.ind-nav { display: flex; gap: 10px; flex: none; }
.ind-track {
  display: flex; gap: clamp(14px, 1.8vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* bleed to both screen edges; inner padding re-aligns the cards with the content column
     so clipping happens at the viewport edge and the last card keeps its end spacing */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  /* viewport-based value so padding and scroll-padding resolve to the SAME pixels
     (scroll-padding % resolves against the scrollport, so % here would misalign the snap) */
  padding: 0 max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
  scroll-padding-left: max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
  scrollbar-width: none;
}
.ind-track::-webkit-scrollbar { display: none; }
.ind-card { flex: 0 0 clamp(290px, 29vw, 440px); scroll-snap-align: start; }
.ind-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; }
.ind-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.ind-card:hover .ind-media img { transform: scale(1.045); }
.ind-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,16,0) 46%, rgba(10,11,16,.72) 100%); }
.ind-media h3 { position: absolute; left: 22px; bottom: 74px; z-index: 1; margin: 0; color: #fff; font-size: clamp(20px, 2.1vw, 26px); letter-spacing: -0.01em; }
/* CTA lives inside the card, under the title, as a frosted pill */
.ind-more {
  position: absolute; left: 22px; bottom: 20px; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 10px 18px;
  background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-weight: 600; font-size: 14px; color: #fff; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.ind-more:hover { background: #fff; color: var(--ink); border-color: #fff; }
.ind-more svg { flex: none; transition: transform .2s var(--ease); }
.ind-more:hover svg { transform: translateX(3px); }
/* Learn more hidden for now (industry pages pending) — delete these two lines to bring it back */
.ind-more { display: none; }
.ind-media h3 { bottom: 20px; }
@media (max-width: 640px) {
  .ind-card { flex-basis: min(82vw, 360px); }
}

/* Mobile — once the sections stack, their content grows past the viewport and
   the 100vh sizing collapses to content height, so neighbours end up touching.
   Add real vertical breathing room between them (the full-bleed software stage
   stays edge-to-edge and keeps its own padding:0). */
@media (max-width: 920px) {
  .home #why-sentritec,
  .home #products,
  .home #integration {
    padding-top: clamp(60px, 10vw, 88px);
    padding-bottom: clamp(60px, 10vw, 88px);
  }
}
.comp-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(40px, 7vw, 96px); margin-top: clamp(44px, 5vw, 64px); }
.comp-logo {
  display: inline-flex; align-items: center;
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: .01em;
  color: #b4b8c4; transition: color .3s var(--ease);
}
.comp-logo:hover { color: var(--accent); }
.comp-logo img {
  height: clamp(36px, 4.4vw, 56px); width: auto;
  filter: grayscale(1) opacity(.55); transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.comp-logo:hover img { filter: grayscale(0) opacity(1); }

/* Homepage — one standardized title & description size across all section headers */
#why-sentritec .why3-head h2,
#features .section-head h2,
#software .section-head h2,
#products .scene-head h2,
#built-for .section-head h2,
#compliance .section-head h2,
#trust .section-head h2,
#integration .intg2-head h2,
#integration .intg-copy h2 {
  font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.03em; line-height: 1.06;
}
#why-sentritec .why3-head .lead,
#compliance .section-head .lead,
#integration .intg2-head .lead {
  font-size: clamp(16px, 1.6vw, 18.5px);
}

/* Homepage — one standardized gap between every section title and its content
   (was 20px / 36px / 64px across the different heading wrappers). */
.home .why3-head,
.home .scene-head,
.home .section-head {
  margin-bottom: clamp(22px, 2.4vw, 34px);
  padding-bottom: 0;
}

/* Why Sentritec — enlarge the visual so the content fills the viewport section
   instead of leaving a tall empty band above the title. */
.home #why-sentritec .why3 { align-items: stretch; }
.home #why-sentritec .why3-media {
  aspect-ratio: auto;
  height: clamp(400px, 60vh, 640px);
}
.home #why-sentritec .why3-tabs { justify-content: center; }

/* ---------- Unified operations (persona stripe) ---------- */
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.persona {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: var(--ink-2); color: #fff; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
}
.persona .ph { mix-blend-mode: normal; }
.persona-body { position: relative; z-index: 2; padding: 28px; background: linear-gradient(transparent, rgba(8,8,12,.85) 55%); }
.persona .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #c2c7e6; margin-bottom: 12px; }
.persona h4 { font-size: 20px; margin: 0 0 8px; }
.persona p { font-size: 14.5px; color: rgba(255,255,255,.75); margin: 0; }

/* ---------- Access Ecosystem (interactive scene) ---------- */
.scene-head { margin-bottom: 36px; text-align: center; }
.scene-head h2 { font-size: clamp(30px, 4.4vw, 54px); }
.scene-intro { max-width: 560px; margin-top: 20px; }
.scene-intro p { color: var(--slate); font-size: 17px; margin: 0 0 14px; }

.scene {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: clamp(440px, 50vw, 640px); box-shadow: var(--shadow);
  background: #e9ebef;
}
.scene-bg {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(214,217,224,.5)),
    repeating-linear-gradient(115deg, #e4e6eb 0 60px, #dfe1e7 60px 120px),
    linear-gradient(135deg, #eef0f3, #d9dce2);
  color: #9aa0b4;
}
.scene-bg::after { /* soft floor + light */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(80% 40% at 50% 110%, rgba(70,75,95,.14), transparent 60%);
}
.scene-bg .ph-label { position: relative; z-index: 1; }

/* hotspots — full product, shown at natural size */
.hotspot {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: transparent; cursor: pointer;
  overflow: visible;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.hotspot img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 20px 28px rgba(30,33,45,.34));
  transition: filter .25s var(--ease);
}
/* per-product sizes (kept at real proportions) */
#face-core       { width: clamp(54px, 6.5vw, 88px); }
#access-core     { width: clamp(58px, 7vw,   94px); }
#access-core-pro { width: clamp(36px, 4.4vw, 60px); }

/* "+" marker to show it's clickable */
.hotspot::after {
  content: ""; position: absolute; top: -6px; right: -6px; z-index: 4;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 4px 10px rgba(97,103,148,.5);
  animation: badgePulse 2.2s var(--ease) infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 4px 10px rgba(97,103,148,.5), 0 0 0 0 rgba(97,103,148,.45); }
  60% { box-shadow: 0 4px 10px rgba(97,103,148,.5), 0 0 0 12px rgba(97,103,148,0); }
}
.hotspot:hover { transform: translate(-50%, -50%) scale(1.05); }
.hotspot:hover img { filter: drop-shadow(0 26px 34px rgba(30,33,45,.42)); }
.hotspot.active { transform: translate(-50%, -50%) scale(1.06); }
.hotspot.active img { filter: drop-shadow(0 26px 36px rgba(97,103,148,.55)); }
.hotspot.active::after {
  animation: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23616794' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.scene-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  font-size: 14.5px; font-weight: 600; color: var(--slate);
  background: rgba(255,255,255,.78); padding: 9px 18px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: opacity .25s var(--ease);
}
.scene-hint.hidden { opacity: 0; pointer-events: none; }

.scene-popup {
  position: absolute; z-index: 5; left: 0; top: 0; width: min(300px, 78%);
  background: #fff; border-radius: 16px; padding: 22px 22px 20px;
  box-shadow: 0 22px 48px rgba(20,22,30,.26);
  opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.scene-popup.show { opacity: 1; transform: none; pointer-events: auto; }
.popup-caret {
  position: absolute; top: -7px; left: 24px; width: 14px; height: 14px;
  background: #fff; transform: rotate(45deg); border-radius: 3px;
  box-shadow: -3px -3px 7px rgba(20,22,30,.05);
}
.scene-popup.popup--above .popup-caret {
  top: auto; bottom: -7px;
  box-shadow: 3px 3px 7px rgba(20,22,30,.05);
}
.popup-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--paper-2); color: var(--slate); cursor: pointer;
  display: grid; place-items: center; transition: background .2s var(--ease), color .2s var(--ease);
}
.popup-close:hover { background: #e7e8ec; color: var(--ink); }
.popup-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.scene-popup h3 { font-size: 24px; margin: 8px 0 10px; }
.scene-popup p { color: var(--slate); font-size: 15px; margin: 0 0 20px; }

/* ---------- Hardware — floating product image with centered text (no card, no border, no grey) ---------- */
.eco-grid { display: flex; gap: clamp(24px, 3vw, 56px); 
  /* margin-top: 56px;  */
}
/* a single featured product sits centred rather than stretching full width */
.eco-grid--single { justify-content: center; }
.eco-grid--single .eco-card { flex: 0 1 clamp(360px, 52%, 540px); }
.eco-card {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px) 0;
}

/* title + learn-more anchored at the top of the card */
.eco-body {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0; max-width: 400px; margin: 0 auto;
}
.eco-body h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 12px; }
.eco-body .link-arrow { color: var(--accent); }
/* image-first cards: the body is last, so it carries the card's bottom padding */
.eco-stage + .eco-body { padding-bottom: clamp(28px, 3vw, 44px); }

/* product image sits at the bottom — same footprint for every card */
.eco-stage {
  position: relative; width: 100%; margin-top: clamp(22px, 3vw, 40px);
  /* height: clamp(300px, 30vw, 420px); */
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 clamp(8px, 1.2vw, 18px) clamp(28px, 3vw, 44px);
  background: none;
}
.eco-stage img {
  position: relative; z-index: 1; width: auto; max-width: 100%;
  max-height: clamp(210px, 24vw, 320px);
  filter: drop-shadow(0 22px 28px rgba(45,49,66,.18));
  transform-origin: center bottom;
}

/* ---------- Hero CTA buttons ---------- */
.hs-cta { display: flex; gap: 14px; margin-top: clamp(24px, 3vw, 34px); flex-wrap: wrap; }

/* ---------- Social proof logo strip ---------- */
.logos-strip { padding: clamp(34px, 4.5vw, 54px) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.logos-strip .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.logos-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.logos-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(22px, 4vw, 56px); }
.logos-row li {
  font-size: clamp(16px, 1.9vw, 22px); font-weight: 700; letter-spacing: .03em;
  color: #b7bac6; white-space: nowrap; transition: color .2s var(--ease);
}
.logos-row li:hover { color: var(--slate); }

/* ---------- Testimonial ---------- */
.quote { max-width: 880px; margin: 0 auto; text-align: center; }
.quote-mark { color: var(--accent); opacity: .22; margin: 0 auto; }
.quote blockquote {
  font-size: clamp(22px, 3vw, 34px); line-height: 1.4; font-weight: 600; letter-spacing: -0.02em;
  margin: 14px 0 28px; color: var(--ink);
}
.quote figcaption { display: flex; flex-direction: column; gap: 4px; }
.q-name { font-weight: 600; }
.q-role { color: var(--slate); font-size: 15px; }

/* ---------- CTA actions ---------- */
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; padding-top: 20px;}
.cta-fine { font-size: 13.5px !important; color: rgba(255,255,255,.5) !important; margin: 4px 0 0 !important; }

/* ---------- Focus styles (keyboard a11y) ---------- */s
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 4px; }
.hero-scroll:focus { outline: none; }

/* skip-to-content link */
.skip-link {
  position: fixed; left: 14px; top: -64px; z-index: 200;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 14px; }

/* anchor offset so headings clear the fixed nav */
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--anno-h, 0px) + 14px); }

/* active nav link (scrollspy) */
.nav-links a.active { opacity: 1; }
.nav-links a.active::after { width: 100%; }

/* ---------- How it works (steps) ---------- */
.steps {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 56px);
}
.step { padding-top: 22px; border-top: 1px solid var(--line); }
.step-num { display: block; font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; color: var(--accent); letter-spacing: -0.02em; margin-bottom: 14px; }
.step h4 { font-size: clamp(19px, 2.1vw, 23px); margin: 0 0 10px; }
.step p { color: var(--slate); font-size: 15.5px; margin: 0; max-width: 36ch; }


/* ---------- Product ecosystem cards ---------- */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.product-card {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  border-radius: var(--radius-lg); background: linear-gradient(180deg, #f4f5f9 0%, #e9ebf2 100%);
  border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-stage { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; padding: 30px; }
.product-stage::before {
  content: ""; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(97,103,148,.18), transparent 70%);
}
.product-stage img { position: relative; max-height: 100%; width: auto; filter: drop-shadow(0 30px 40px rgba(20,22,40,.32)); transition: transform .45s var(--ease); }
.product-card:hover .product-stage img { transform: scale(1.04) translateY(-4px); }
.product-info { padding: 26px 28px 30px; background: #fff; border-top: 1px solid var(--line); }
.product-info .kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.product-info h3 { font-size: 24px; margin: 8px 0 8px; }
.product-info p { color: var(--slate); font-size: 15px; margin: 0 0 18px; min-height: 44px; }
.product-info .link-arrow { font-size: 15px; }

/* ---------- Built For (editorial hover list + live preview) ---------- */
.builtfor {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 72px);
  align-items: center; margin-top: 48px;
}
/* the "Built For" heading sits left-aligned above the list */
#built-for .section-head { margin: 0 0 clamp(28px, 4vw, 48px); max-width: none; text-align: left; }
/* preview panel */
.bf-preview {
  position: relative; order: 2; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 5 / 5; box-shadow: var(--shadow); background: var(--paper-2);
}
.bf-pane { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .55s var(--ease), transform .7s var(--ease); }
.bf-pane.active { opacity: 1; transform: none; }
.bf-pane .ph { position: absolute; inset: 0; }
.bf-pane img { width: 100%; height: 100%; object-fit: cover; }
.bf-tag {
  position: absolute; left: 22px; bottom: 22px; z-index: 2;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(20,22,30,.55); padding: 8px 16px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* list */
.bf-list { order: 1; display: flex; flex-direction: column; }
.bf-item {
  position: relative; display: flex; align-items: center; gap: clamp(18px, 2vw, 28px);
  padding: clamp(24px, 3.2vw, 40px) 6px; border-top: 1px solid var(--line);
  color: var(--ink); transition: padding-left .3s var(--ease);
}
.bf-item:last-child { border-bottom: 1px solid var(--line); }
.bf-item::before { /* vertical accent that grows on active */
  content: ""; position: absolute; left: -2px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .35s var(--ease);
}
.bf-item.active { padding-left: 22px; }
.bf-item.active::before { transform: scaleY(1); }
.bf-index {
  font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--slate);
  transition: color .25s var(--ease); flex: none; padding-top: 6px; align-self: flex-start;
}
.bf-item.active .bf-index { color: var(--accent); }
.bf-text h3 {
  font-size: clamp(24px, 3vw, 36px); margin: 0; line-height: 1.08;
  color: #c2c4cc; transition: color .3s var(--ease);
}
.bf-item.active .bf-text h3, .bf-item:hover .bf-text h3 { color: var(--ink); }
.bf-text p {
  margin: 0; color: var(--slate); font-size: 15.5px; max-width: 44ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
}
.bf-item.active .bf-text p { max-height: 120px; opacity: 1; margin-top: 12px; }
.bf-more { display: none; }   /* mobile-only Learn more button (see media query) */
.bf-arrow { margin-left: auto; flex: none; color: #c2c4cc; transition: color .25s var(--ease), transform .25s var(--ease); }
.bf-item.active .bf-arrow { color: var(--accent); transform: translateX(4px); }

/* ---------- CTA (full-width deep-charcoal band, whole box clickable) ---------- */
.cta-section { padding: 0; }
.cta-link {
  display: block; text-decoration: none; color: #fff;
  background: #1a1c22; transition: background .3s var(--ease);
  padding: clamp(48px, 8vw, 104px) 0;
}
.cta-link:hover { background: #24262f; }
.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 5vw, 64px); flex-wrap: wrap;
}
.cta-inner h2 {
  font-size: clamp(24px, 2.8vw, 30px); letter-spacing: -0.02em; line-height: 1.12;
  margin: 0; max-width: 20ch; color: #fff;
}
.cta-text { max-width: 620px; }
.cta-text h2 { max-width: none; }
.cta-text p {
  margin: 14px 0 0; color: rgba(255,255,255,.82);
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; max-width: 56ch;
}
.cta-go {
  flex: none; display: inline-flex; align-items: center; gap: 16px;
  font-size: clamp(36px, 4vw, 52px); font-weight: 600; letter-spacing: -0.02em; color: #fff; white-space: nowrap;
}
.cta-go svg { flex: none; transition: transform .25s var(--ease); }
.cta-link:hover .cta-go svg { transform: translateX(6px); }

/* ---------- Footer (white) ---------- */
.footer { background: #fff; color: var(--slate); padding: 72px 0 40px; border-top: 1px solid var(--line);}
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand img { height: 26px; height: 30px; margin-bottom: 18px; margin-left: -9px; }
.footer-brand p { font-size: 14.5px; max-width: 30ch; color: var(--slate); }
.footer h5 { color: var(--ink); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 18px; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer ul a { font-size: 15px; color: var(--slate); transition: color .2s var(--ease); }
.footer ul a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px; color: #9aa0b4;
}

/* ---------- Product page: Power of Cloud (editorial split) ---------- */
.pwr {
  display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 84px); align-items: start;
}
.pwr-intro { position: sticky; top: calc(var(--nav-h) + 28px); }
.pwr-intro h2 { font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.pwr-intro .lead { margin-top: 20px; }
.pwr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pwr-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: clamp(26px, 3.4vw, 40px) 4px; border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease);
}
.pwr-num {
  font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.03em;
  color: var(--accent); opacity: .28; line-height: 1; transition: opacity .35s var(--ease);
}
.pwr-tx h3 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.pwr-tx p { font-size: clamp(15px, 1.7vw, 17px); color: var(--slate); line-height: 1.6; margin: 0; max-width: 46ch; }
.pwr-ic {
  flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.pwr-row:hover { padding-left: 18px; }
.pwr-row:hover .pwr-num { opacity: .7; }
.pwr-row:hover .pwr-ic { background: var(--accent); color: #fff; transform: scale(1.06); }

/* ---------- Product page: Featured Features (interactive showcase) ---------- */
/* desktop: headers stack in the left column, the active media pane fills the right column.
   buttons and their panes are interleaved in the DOM so mobile can become an accordion. */
.ftr {
  display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  column-gap: clamp(28px, 4vw, 60px); align-items: start; margin-top: clamp(40px, 5vw, 60px);
}
.ftr-item {
  grid-column: 1; align-self: start;
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: 0; border-left: 2px solid var(--line); border-radius: 0;
  padding: 16px 0 16px 22px; margin-bottom: 4px; color: var(--ink);
  transition: border-color .3s var(--ease);
}
.ftr-item:hover { border-left-color: var(--slate); }
.ftr-ic {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  background: none; border: 0; color: var(--slate); margin-top: 1px;
  transition: color .3s var(--ease);
}
.ftr-tx { display: flex; flex-direction: column; min-width: 0; }
.ftr-tx b { font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; letter-spacing: -0.01em; }
.ftr-tx small {
  font-size: 14.5px; color: var(--slate); line-height: 1.55;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin-top .3s var(--ease);
}
.ftr-tx small a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.ftr-arrow { color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ftr-item.active { border-left-color: var(--accent); }
.ftr-item.active .ftr-ic { color: var(--accent); }
.ftr-item.active .ftr-tx b { color: var(--accent); }
.ftr-item.active .ftr-tx small { max-height: 90px; opacity: 1; margin-top: 6px; }
.ftr-item.active .ftr-arrow { opacity: 1; transform: none; }

.ftr-pane {
  grid-column: 2; grid-row: 1 / span 6; align-self: start;
  position: sticky; top: calc(var(--nav-h) + 28px); display: none;
}
.ftr-pane.active { display: block; animation: mfIn .5s var(--ease) both; }
.ftr-card {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg);
  /* background: radial-gradient(120% 130% at 15% 0%, #2b2f4a 0%, #1a1c2b 48%, #0e0f16 100%); */
  color: #fff;
  display: grid; place-items: center; padding: clamp(24px, 2.6vw, 44px); text-align: center;
}
.ftr-card video, .ftr-card img { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  /* height: 100%;  */
  height: auto; 
  object-fit: cover; 
  z-index: 0; 
  border-radius: var(--radius-lg);
}
/* add class="fit" to a composed graphic (e.g. PNG with its own background)
   so it shows in full — contained and centered, never cover-cropped */
.ftr-card img.fit, .ftr-card video.fit { object-fit: contain; height: 100%;}
.features-cta { display: flex; justify-content: center; margin-top: clamp(44px, 5.5vw, 72px); }

/* ---------- Door Readers page — modern layout components ---------- */
/* 2. Unlock story — media pinned on the left, steps scroll past on the right */
.dr-story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 84px); align-items: start; margin-top: clamp(32px, 4.5vw, 52px); }
.dr-story-media { position: sticky; top: calc(var(--nav-h) + 24px); height: calc(100svh - var(--nav-h) - 48px); max-height: 660px; border-radius: var(--radius-lg); overflow: hidden; background: #0e0f16; }
.dr-story-pane { position: absolute; inset: 0; opacity: 0; transform: scale(1.045); transition: opacity .5s var(--ease), transform 1.1s var(--ease); }
.dr-story-pane.active { opacity: 1; transform: scale(1); }
.dr-story-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-steps { display: flex; flex-direction: column; }
.dr-step { min-height: clamp(300px, 52svh, 460px); display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 2.6vw, 36px) 0; border-top: 1px solid var(--line); }
.dr-step:first-child { border-top: 0; }
.dr-step h3 { margin: 0 0 12px; font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -0.02em; }
.dr-step p { margin: 0; color: var(--slate); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.65; max-width: 46ch; }
.dr-step-img { display: none; }
@media (min-width: 921px) {
  .dr-step { opacity: .38; transition: opacity .4s var(--ease); }
  .dr-step.active { opacity: 1; }
}

/* 3. Credentials — cinematic full-width band */
.dr-cine { margin-top: clamp(30px, 4vw, 48px); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 9; }
.dr-cine img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 4. Installation & operation — reuses the .intg2 interactive list (list left, visual right) */
#install .intg2 { margin-top: 0; }

/* 5. Temporary key + 2FA — immersive photo cards with overlaid copy */
.dr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
.dr-dcard { position: relative; min-height: clamp(460px, 60vh, 620px); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: flex-end; }
.dr-dcard-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.dr-dcard:hover .dr-dcard-bg { transform: scale(1.045); }
.dr-dcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,16,.16) 0%, rgba(10,11,16,.4) 46%, rgba(10,11,16,.9) 100%); }
.dr-dcard-body { position: relative; z-index: 1; padding: clamp(24px, 3vw, 40px); }
.dr-dcard-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; margin-bottom: 16px; }
.dr-dcard-ic svg { width: 22px; height: 22px; }
.dr-dcard-body h2 { margin: 0 0 10px; color: #fff; font-size: clamp(21px, 2.3vw, 27px); letter-spacing: -0.02em; line-height: 1.16; }
.dr-dcard-body p { margin: 0; color: rgba(255,255,255,.84); font-size: 15px; line-height: 1.62; }
/* mobile: no overlaid copy — image on top, text on a clean card below */
@media (max-width: 700px) {
  .dr-dcard { min-height: 0; display: flex; flex-direction: column; align-items: stretch; background: var(--paper); border: 1px solid var(--line); }
  .dr-dcard::after { display: none; }
  .dr-dcard-bg { position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .dr-dcard-body { padding: 20px 18px 24px; }
  .dr-dcard-ic { background: var(--accent-soft); border-color: transparent; color: var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none; margin-bottom: 12px; }
  .dr-dcard-body h2 { color: var(--ink); }
  .dr-dcard-body p { color: var(--slate); }
}

/* 8. Biometrics — contained dark feature panel (copy left, edge-to-edge image right) */
.dr-bio { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; background: var(--ink); color: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.dr-bio-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(30px, 5vw, 72px); }
.dr-bio-copy h2 { margin: 0 0 14px; color: #fff; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -0.02em; line-height: 1.12; }
.dr-bio-copy .lead { margin: 0; color: rgba(255,255,255,.82); font-size: clamp(15.5px, 1.7vw, 18px); line-height: 1.62; }
.dr-bio-copy .btn { margin-top: clamp(26px, 3.2vw, 36px); }
.dr-bio-media { position: relative; min-height: 340px; }
.dr-bio-media img, .dr-bio-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

/* Compare Models — balanced card padding, image top, CTA bottom-aligned */
#compare .eco-card { padding-bottom: clamp(26px, 3vw, 40px); }
/* fixed-height stage so both readers bottom-align and the product names sit on the same line */
#compare .eco-stage { height: clamp(300px, 32vw, 400px); margin-top: clamp(6px, 1.2vw, 14px); padding-bottom: clamp(14px, 2vw, 22px); }
#compare .eco-body { flex: 1 1 auto; }
#compare .eco-body .link-arrow { margin-top: auto; padding-top: clamp(16px, 2.2vw, 24px); }
#access-core .eco-stage img { max-height: clamp(170px, 19vw, 250px); }

@media (max-width: 920px) {
  .dr-story { grid-template-columns: 1fr; gap: 0; margin-top: clamp(12px, 3vw, 24px); }
  .dr-story-media { display: none; }
  .dr-step { min-height: 0; padding: clamp(26px, 6vw, 40px) 0; }
  .dr-step-img { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 18px; }
  .dr-step-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dr-cine { aspect-ratio: 4 / 3; }
  .dr-duo { grid-template-columns: 1fr; }
  .dr-dcard { min-height: clamp(400px, 60vw, 520px); }
  .dr-bio { grid-template-columns: 1fr; }
  .dr-bio-media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------- Product page: integration (editorial split + logo grid) ---------- */
.intg {
  display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.intg-copy h2 { font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.intg-copy .lead { margin-top: 20px; }
.intg-copy .btn { margin-top: clamp(24px, 3vw, 34px); }
.intg-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
/* right-side media slot (home IT-stack section) */
.intg-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.intg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 920px) {
  .intg { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 36px); }
}
.brand-tile {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 24px 28px; min-width: 0; height: 96px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.brand-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.brand-tile img { height: 26px; width: auto; max-width: 160px; object-fit: contain; display: block; }

/* ---------- Product detail: hero ---------- */
.phero { padding: calc(var(--nav-h) + clamp(36px, 6vw, 80px)) 0 clamp(56px, 7vw, 96px); text-align: center; }
.phero .wrap { display: flex; flex-direction: column; align-items: center; }
.phero-img { width: 100%; display: flex; justify-content: center; margin-bottom: clamp(28px, 4vw, 48px); }
.phero-img img { width: auto; height: auto; max-width: 100%; max-height: clamp(260px, 34vw, 440px); filter: drop-shadow(0 26px 34px rgba(45,49,66,.20)); }
.phero-type { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.phero-title { font-size: clamp(34px, 5vw, 40px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; margin: 0; }
.phero-desc { font-size: clamp(16px, 1.9vw, 18px); color: var(--slate); line-height: 1.55; margin: 18px 0 0; max-width: 58ch; }
.phero-highlights { display: flex; flex-wrap: wrap; justify-content: center; margin: clamp(28px, 4vw, 44px) 0 0; }
.phl { padding: 0 clamp(16px, 2.4vw, 30px); text-align: center; }
.phl + .phl { border-left: 1px solid var(--line); }
.phl b { display: block; font-size: clamp(15px, 1.5vw, 17px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.phl span { display: block; font-size: 13.5px; color: var(--slate); margin-top: 4px; }
.phero-cta { margin-top: clamp(32px, 4vw, 48px); }

/* ---------- Product detail: specification ---------- */
.spec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; }
.spec-head h2 { font-size: clamp(30px, 4.4vw, 54px); margin: 0; }
.spec-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(20px, 2.5vw, 28px); }
/* .spec-dim { flex: none; width: clamp(220px, 28vw, 340px); } */
.spec-dim { flex: none; width: clamp(220px, 28vw, 340px); display: flex; justify-content: flex-end; }
.spec-dim img { width: 100%; height: auto; display: block; }
.spec-dim img.acp { width: 100%; height: auto; max-height: 350px; object-fit: contain; display: block; }
/* near-square drawing: fill the column width and keep its own proportions */
.spec-dim img.fcd { width: 100%; height: auto; max-height: 400px; object-fit: contain; display: block; }
.spec-group { margin-top: clamp(44px, 5.5vw, 72px); }
.spec-group h3 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 clamp(18px, 2.2vw, 26px); }
.spec-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 96px); }
.spec-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.spec-row .k { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.spec-row .v { font-size: 14.5px; color: var(--slate); }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px clamp(40px, 5vw, 96px); }
.spec-list--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* mobile: one spec column — each row keeps label | value side by side at full width */
@media (max-width: 720px) {
  .spec-rows { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .spec-list { grid-template-columns: 1fr; }
}
.spec-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--slate); line-height: 1.5; }
.spec-ic { flex: none; color: var(--accent); margin-top: 2px; }
.spec-text { font-size: clamp(15px, 1.7vw, 17px); color: var(--slate); line-height: 1.6; margin: 0; max-width: 70ch; }
.spec-more { margin-top: clamp(36px, 4.5vw, 56px); }
.spec-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 600; font-size: 15px;
}
.spec-more > summary::-webkit-details-marker { display: none; }
.spec-more > summary svg { transition: transform .25s var(--ease); }
/* once expanded, the toggle disappears — the extra specs stay open */
.spec-more[open] > summary { display: none; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .concept-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .nav-links, .nav-right .btn { display: none; }
  .nav-toggle { display: block; }
  .steps { grid-template-columns: 1fr; gap: 28px; max-width: 440px; }
  /* hero: text to bottom-left, bottom scrim for legibility */
  .hs-inner { align-items: flex-end; }
  .hs-text { max-width: none; padding-bottom: clamp(64px, 12vh, 110px); }
  .hs-text h1 { font-size: clamp(30px, 8vw, 44px); max-width: 16ch; }
  .hs-slide::after {
    background: linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,.45) 26%, rgba(255,255,255,0) 52%);
  }
  .hs-dots { right: 14px; }
  .hs-ui { right: auto; left: 50%; top: clamp(92px, 15vh, 168px); transform: translateX(-50%); width: min(88%, 420px); }
  .hs-ui .ui-body { min-height: 200px; }
  .platform-intro { grid-template-columns: 1fr; gap: 32px; }
  /* video hero: anchor the title + CTA to the bottom-left on mobile */
  .hero-v { align-items: flex-end; min-height: 100svh; }
  /* higher specificity than .wrap so the bottom spacing is not reset on phones */
  .hero-v .hero-v-inner { padding-bottom: clamp(72px, 12vh, 120px); }
  .hero-v-cta { justify-content: flex-start; }
  .mf-split { grid-template-columns: 1fr; gap: 28px; }
  .mf-title { max-width: none; }
  .slide { flex: 0 0 88%; flex: 0 0 100%; }
  .mf-foot { gap: 18px; }
  .mf-progress { max-width: none; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .pwr { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
  .pwr-intro { position: static; }
  /* features become an accordion: each video appears right under its tapped header */
  .ftr { display: block; }
  .ftr-item { margin-bottom: 6px; }
  .ftr-pane { position: static; grid-row: auto; grid-column: auto; margin: 2px 0 16px; }
  .ftr-item .ftr-tx small { display: none; }
  .ftr-item .ftr-arrow { opacity: .45; transform: none; }
  .ftr-item.active .ftr-arrow { opacity: 1; transform: rotate(90deg); }
  .intg { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  /* stack the split panel: text on top, image below */
  .why2-panel.active { grid-template-columns: 1fr; }
  .why2-media { min-height: clamp(240px, 60vw, 360px); order: 1; }
  .why2-tabs { gap: 10px; }
  .feature, .feature.reverse .feature-media { grid-template-columns: 1fr; order: 0; }
  .feature.reverse .feature-text { order: 1; }
  .persona-grid, .products-grid { grid-template-columns: 1fr; }
  .eco-grid { display: block; max-width: 440px; margin-left: auto; margin-right: auto; }
  .eco-card { display: block; flex: none; width: 100% !important; margin-bottom: 24px; }   /* fill width when stacked */
  .eco-card:last-child { margin-bottom: 0; }
  .eco-body { display: block; }
  .scene-popup { left: 14px !important; right: 14px; top: auto !important; bottom: 14px; width: auto; }
  .popup-caret { display: none; }
  .scene-hint { bottom: auto; top: 16px; }
  .builtfor { grid-template-columns: 1fr; gap: 28px; }
  .bf-preview { order: 1; aspect-ratio: 16 / 10; }
  .bf-list { order: 2; }
  .bf-text p { max-height: 120px; opacity: 1; margin-top: 10px; } /* show all on mobile */
  /* mobile: no arrow — the active item shows a Learn more button instead */
  .bf-arrow { display: none; }
  .bf-item.active .bf-more {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    margin-top: 14px; padding: 10px 20px; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  }
  .footer-top { grid-template-columns: 1fr 1fr; }

  /* mobile menu panel */
  .nav-mobile {
    position: fixed; inset: var(--nav-h) 0 auto 0; background: #fff; color: var(--ink);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.3); padding: 18px 28px 28px;
    display: none; flex-direction: column; gap: 4px; z-index: 99;
  }
  .nav-mobile.open { display: flex; }
  .nav-mobile a { padding: 14px 0; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--line); }
  .nav-mobile .btn { margin-top: 16px; justify-content: center; }
  
  .why2-media {
    border-radius: var(--radius);;
  }

  .why2-tabs {
    margin: 0 auto clamp(40px, 5vw, 64px);
  }

  
  .spec-dim { width: clamp(90% , 28vw, 340px); justify-content: center; }

}
@media (min-width: 921px)
{
  .nav-mobile
  {
    display: none !important;
  }
  .phl
  {
    height: 60px;
    align-content: center;
  }
  
  .phero-img img.ac { width: 300px;}
}
/* Product hero highlights: single row on wide screens; below this they
   stack into a clean centered column so the divider never orphans on wrap */
@media (max-width: 1120px) {
  .phero-highlights { flex-direction: column; align-items: center; }
  .phl { height: auto; padding: 11px 0; }
  .phl + .phl { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .concept-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  /* footer: brand full-width, then the four link columns two-by-two */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* the trust logo marquee is expected to keep scrolling */
  .trust-track { animation: trustScroll 30s linear infinite !important; }
}

/* =========================================================
   Industry pages (Factory, …)
   ========================================================= */
/* reusable light image placeholder (swap for a real <img>) */
.img-ph { display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: var(--radius-lg); background: linear-gradient(135deg, #eef0f6, #e1e4ee); }
.img-fluid {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
}
/* Overview — centered heading, full-width image below */
.hero-v-head { text-align: left; }
.ov-media { margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 16 / 7; }
/* tighten the gap between Overview and Use Cases */
#overview { padding-bottom: clamp(36px, 5vw, 64px); }
#use-cases { padding-top: clamp(44px, 6vw, 76px); }

/* Use cases — image + title; description reveals on hover (kept clean at a glance) */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 5vw, 60px); }
.uc-card { display: flex; flex-direction: column; outline: none; }
/* .uc-card scoping matters: the Pass carousel styles .uc-media too (later in the file) */
.uc-card .uc-media { position: relative; aspect-ratio: 4 / 3.2; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; }
.uc-media .img-ph { border-radius: 0; }
.uc-media img { height: 100%; object-fit: cover; width: 100%;}
.uc-card h3 { font-size: clamp(18px, 1.4vw, 21px); margin: 0; display: flex; align-items: center; gap: 8px; }
.uc-card h3 svg { flex: none; transition: transform .2s var(--ease); }
a.uc-card:hover h3 svg { transform: translateX(4px); }
/* description sits over the image on a frosted layer, revealed on hover/focus */
.uc-overlay {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: clamp(20px, 2vw, 30px);
  background: rgba(18, 18, 24, .42);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.uc-overlay p { color: #fff; font-size: 15px; line-height: 1.6; margin: 0; }
.uc-card:hover .uc-overlay, .uc-card:focus-visible .uc-overlay { opacity: 1; }
/* touch devices have no hover — show the description as a caption so the image stays visible */
@media (hover: none) {
  .uc-overlay {
    opacity: 1; align-items: flex-end;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(to top, rgba(10,10,14,.82) 0%, rgba(10,10,14,.15) 58%, transparent 100%);
  }
}

/* How SentriTec helps — dark, airy 3-column grid (separation by whitespace) */
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(36px, 4.4vw, 80px); row-gap: clamp(48px, 6vw, 80px); margin-top: clamp(48px, 6vw, 76px); }
.help-item { max-width: 34ch; }
.help-ic { display: block; color: #aab0d6; margin-bottom: 22px; }
.help-item h3 { color: #fff; font-size: clamp(19px, 1.6vw, 22px); margin-bottom: 12px; }
.help-item p { color: rgba(255,255,255,.56); font-size: 15px; line-height: 1.6; margin: 0; }

@media (max-width: 920px) {
  .ov-media { aspect-ratio: 16 / 9; }
  .uc-grid { grid-template-columns: 1fr 1fr; }
  .help-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 5vw, 48px); }
}
@media (max-width: 600px) {
  .uc-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Contact page
   ========================================================= */
/* first section clears the fixed nav (no hero on this page) */
.contact-top { padding-top: calc(var(--nav-h) + clamp(36px, 5vw, 72px)); padding-bottom: clamp(56px, 8vw, 96px); }
.contact-form-sec { padding: clamp(56px, 8vw, 96px) 0; }
.cx-card small { display: block; margin-top: 10px; color: var(--slate); font-size: 13.5px; }
.cx-card small a { color: var(--accent); text-decoration: underline; }
.contact-top .section-head h1 { font-size: clamp(32px, 4.4vw, 54px); margin: 0; }

/* Contact Us — three dark cards */
.cx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 28px); margin-top: clamp(36px, 5vw, 56px); }
.cx-card {
  display: flex; flex-direction: column; min-height: 250px;
  background: linear-gradient(135deg, #eef0f6, #e1e4ee); color: var(--ink); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.cx-card:hover { background: linear-gradient(135deg, #e7e9f3, #d6dae8); transform: translateY(-3px); }
.cx-card h3 { color: var(--ink); font-size: clamp(20px, 1.8vw, 25px); margin: 0 0 12px; }
.cx-card p { color: var(--slate); font-size: 15px; line-height: 1.55; margin: 0; }
.cx-link {
  margin-top: auto; padding-top: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 600; font-size: 15px;
}
.cx-link svg { transition: transform .2s var(--ease); }
.cx-card:hover .cx-link svg { transform: translateX(4px); }
.cx-link--dark { color: var(--accent); margin-top: 0; padding-top: 0; }
.cx-link--dark:hover svg { transform: translateX(4px); }

/* hairline separator between contact sections */
.contact-sep { position: relative; }
.contact-sep::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
  width: min(100% - 56px, calc(var(--maxw) - 56px)); height: 1px; background: var(--line);
}

/* Still not sure — intro on the left (centered), form on the right */
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.cf-intro .lead { margin: 0; }
/* .cf-intro h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 14px; } */
.cf-intro h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 14px; }
.cf-media { margin-top: clamp(24px, 3vw, 36px); aspect-ratio: 16 / 9; }
.cf-form {
  display: grid; gap: 18px;
  background: #fff; border-radius: var(--radius-lg);
  padding: clamp(26px, 2.6vw, 40px);
  box-shadow: 0 18px 50px -26px rgba(22, 22, 24, .22);
}
.cf-privacy {
  justify-self: end; margin-top: 4px;
  font-size: 14px; font-weight: 600; color: var(--slate); text-decoration: underline;
}
.cf-privacy:hover { color: var(--ink); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field label { font-size: 13px; font-weight: 600; color: var(--slate); }
.cf-field input, .cf-field textarea {
  font: inherit; font-size: 15px; color: var(--ink); width: 100%;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #9aa0b4; }
.cf-field input:focus, .cf-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-submit { width: 100%; justify-content: center; margin-top: 4px; }

/* Office location — full width, info + map */
.loc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; margin-top: clamp(32px, 4vw, 48px); }
.loc-info h3 { font-size: clamp(20px, 1.8vw, 24px); margin: 0 0 16px; }
.loc-info h3 span { color: var(--slate); font-weight: 500; }
.loc-info address { font-style: normal; color: var(--slate); font-size: 16px; line-height: 1.7; margin: 0 0 18px; }
.loc-contact { margin: 22px 0 0; display: grid; gap: 10px; }
.loc-contact div { display: flex; gap: 10px; }
.loc-contact dt { color: var(--slate); min-width: 56px; }
.loc-contact dd { margin: 0; font-weight: 500; }
.loc-contact a:hover { color: var(--accent); }
.loc-map { aspect-ratio: 16 / 11; }

@media (max-width: 900px) {
  .cx-grid { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; }
  .cf-grid, .loc { grid-template-columns: 1fr; }
  .cf-media { aspect-ratio: 16 / 9; }
  .loc-map { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .cf-row { grid-template-columns: 1fr; }
}

/* =========================================================
   About page
   ========================================================= */
/* Title band (dark, centered) */
/* About page — the sections carry their own vertical rhythm
   (the base .section padding is disabled globally) */
#about, #evolution, #mission, #leadership { padding: clamp(64px, 9vw, 112px) 0; }

.about-hero {
  background: var(--ink); color: #fff; text-align: center;
  padding: calc(var(--nav-h) + clamp(64px, 11vw, 130px)) 0 clamp(64px, 11vw, 130px);
}
.about-hero .eyebrow.on-dark { margin-bottom: 22px; }
.about-hero h1 {
  font-size: clamp(34px, 5.4vw, 68px); line-height: 1.06; letter-spacing: -0.03em;
  max-width: 17ch; margin: 0 auto; color: #fff;
}
.hl { color: #aab0d6; }

/* About — text left, image right */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.about-split-text h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 20px; }
.about-split-text p { color: var(--slate); margin: 0 0 16px; }
.about-split-text p:last-child { margin-bottom: 0; }
.about-split-media { aspect-ratio: 4 / 3.4; }

/* Our Evolution — timeline */
.tl { margin-top: clamp(40px, 5vw, 64px); }
.tl-bar { position: relative; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); padding: 0 6px; }
.tl-rail { position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: rgba(255,255,255,.16); }
.tl-fill { position: absolute; left: 15px; top: 8px; height: 2px; width: 0; background: #aab0d6; transition: width .45s var(--ease); }
.tl-dots { position: relative; display: flex; justify-content: space-between; }
.tl-dot { background: none; border: 0; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tl-point { width: 18px; height: 18px; border-radius: 50%; background: #2a2f45; box-shadow: 0 0 0 4px var(--ink); transition: background .25s var(--ease), transform .25s var(--ease); }
.tl-dot.done .tl-point { background: #aab0d6; }
.tl-dot.active .tl-point { background: #fff; transform: scale(1.15); }
.tl-name { font-size: clamp(16px, 1.6vw, 19px); font-weight: 600; color: rgba(255,255,255,.5); transition: color .25s var(--ease); }
.tl-dot.active .tl-name { color: #fff; }

.tl-panels { position: relative; }
.tl-panel { display: none; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.tl-panel.active { display: grid; animation: tlFade .4s var(--ease) both; }
@keyframes tlFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tl-tag { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #aab0d6; margin-bottom: 12px; }
.tl-text h3 { font-size: clamp(24px, 2.6vw, 34px); color: #fff; margin: 0 0 14px; }
.tl-text p { color: rgba(255,255,255,.66); margin: 0; }
.tl-media { aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; }
.tl-media .img-ph { border-radius: 0; }
.tl-media img { width: 100%; height: 100%; object-fit: cover; }

/* Our Mission — centered statement */
.mission-inner { max-width: 920px; margin: 0 auto; text-align: center; }
.mission-inner h2 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.18; margin: 0 0 22px; }
.mission-inner .hl { color: var(--accent); }
.mission-inner .lead { margin: 0 auto; }

/* Senior leadership — carousel */
.lead-head { display: flex; align-items: center; justify-content: space-between; max-width: none; }
.lead-nav { display: flex; gap: 12px; }
.lead-arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.lead-arrow:hover { background: var(--paper-2); border-color: #d9dae1; }
.lead-arrow:disabled { opacity: .35; cursor: default; }
.lead-arrow:disabled:hover { background: #fff; border-color: var(--line); }
.lead-track {
  display: flex; gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(28px, 4vw, 44px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* full-bleed: first card aligns to the wrap, cards scroll off the screen edge */
  padding: 0 max(28px, calc((100% - var(--maxw)) / 2 + 28px)) 4px;
  scroll-padding-left: max(28px, calc((100% - var(--maxw)) / 2 + 28px));
  scrollbar-width: none; -ms-overflow-style: none;
}
.lead-track::-webkit-scrollbar { display: none; }
.lead-card { flex: 0 0 clamp(248px, 30%, 340px); scroll-snap-align: start; display: flex; flex-direction: column; }
/* .lead-photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; } */
.lead-photo { border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.lead-photo .img-ph { border-radius: 0; }
.lead-photo img { width: 100%; height: 100%; object-fit: cover; }
.lead-card h3 { font-size: clamp(18px, 1.5vw, 21px); margin: 0 0 4px; }
.lead-role { color: var(--slate); font-size: 15px; margin: 0 0 14px; }
.lead-more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--accent);
}
.lead-more svg { transition: transform .2s var(--ease); }
.lead-more:hover svg { transform: scale(1.12); }

/* leadership modal */
.lead-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.lead-modal.open { display: block; }
.lead-modal-backdrop { position: absolute; inset: 0; background: rgba(12,13,18,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.lead-modal-box {
  position: relative; z-index: 1; width: min(880px, calc(100% - 40px));
  max-height: 86vh; overflow: auto; margin: clamp(40px, 8vh, 100px) auto 40px;
  background: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 30px 80px -28px rgba(12,13,18,.5);
  animation: tlFade .3s var(--ease) both;
}
.lead-modal-close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; z-index: 2;
  display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper-2); color: var(--ink); transition: background .2s var(--ease);
}
.lead-modal-close:hover { background: #e7e9f0; }
.lm-grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 3.4vw, 40px); align-items: start; }
/* .lm-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; } */
.lm-photo { width: 100%; border-radius: var(--radius); overflow: hidden; }
.lm-photo .img-ph { border-radius: 0; }
.lm-photo img { width: 100%; height: 100%; object-fit: cover; }
.lm-content h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 4px; padding-right: 36px; }
.lm-content .lead-role { font-size: 16px; margin: 0 0 22px; }
.lm-content ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.lm-content li { position: relative; padding-left: 26px; color: var(--ink); line-height: 1.55; }
.lm-content li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}

@media (max-width: 920px) {
  .about-split { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  .about-split-media { aspect-ratio: 16 / 10; }
  .tl-panel { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 32px); }
  .tl-text { order: 1; }
  .tl-media { order: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .lm-grid { grid-template-columns: 1fr; }
  .lm-photo { width: 150px; }
}

/* ============================================================
   Sentritec One — platform page
   ============================================================ */
/* Hero reuses the home .hero-v component (full-width, full-height). */

/* Section rhythm — section 4 keeps normal padding; sections 2 & 3 fill the viewport. */
.one-control { padding: clamp(64px, 9vw, 112px) 0; overflow-x: clip; }
/* mobile carousel replaces the icon-tab stage on small screens */
.oc-carousel { display: none; }
@media (max-width: 860px) {
  .oc { display: none; }
  .oc-carousel {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 4px max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
    scroll-padding-left: max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
  }
  .oc-carousel::-webkit-scrollbar { display: none; }
  .oc-slide { flex: 0 0 min(84vw, 420px); scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
  .oc-slide-media { position: relative; aspect-ratio: 16 / 11; min-height: 200px; background: #1a1e2b; }
  .oc-slide-media img, .oc-slide-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .oc-slide-body { padding: 18px 18px 22px; }
  .oc-slide-body b { display: block; font-size: 16.5px; letter-spacing: -0.01em; margin-bottom: 8px; }
  .oc-slide-body p { margin: 0; color: var(--slate); font-size: 14.5px; line-height: 1.6; }
  .oc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
}
/* pagination dots — mobile only (the media query above turns them on) */
@media (min-width: 861px) {
  .oc-dots { display: none; }
}
.oc-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d3d5de; cursor: pointer; transition: background .25s var(--ease), width .25s var(--ease); }
.oc-dot.active { background: var(--accent); width: 22px; }

/* 2 & 3 — full-viewport sections: header (title left / subheading right) over a large media row */
.one-vh {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(72px, 10vh, 104px) 0;
}
.one-head { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(32px, 5vw, 80px); }
.one-head h2 { flex: 1 1 0; min-width: 0; margin: 0; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; line-height: 1.1; }
.one-head .lead { flex: 1 1 0; min-width: 0; margin: 0; color: var(--slate); font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.55; }

.one-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; 
  /* margin-top: clamp(32px, 4.5vw, 60px);   */
  margin-top: 30px;
}

/* media scales with the viewport height */
.one-media {
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line);
  height: clamp(360px, 56vh, 640px);
}
.one-media img { width: 100%; height: 100%; height: auto; object-fit: cover; display: block; }

/* every point shown at once (no accordion), evenly spaced with a divider between */
.one-list { display: flex; flex-direction: column; }
.one-litem { display: flex; gap: 16px; align-items: flex-start; padding: clamp(20px, 2.5vw, 30px) 0; border-top: 1px solid var(--line); }
.one-litem:first-child { border-top: 0; padding-top: 0; }
.one-litem-ic {
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.one-litem-tx b { display: block; font-size: clamp(17px, 1.7vw, 20px); letter-spacing: -0.01em; margin-bottom: 8px; }
.one-litem-tx p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.6; max-width: 46ch; }

/* 4. Control & Secure — icon tabs on top, media below, description card bottom-right */
.oc { 
  /* margin-top: clamp(40px, 5vw, 60px);  */
  margin-top: 0; 
  border: 1px solid var(--line); 
  border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.oc-tabs { display: flex; gap: 6px; padding: clamp(12px, 1.5vw, 18px); border-bottom: 1px solid var(--line); }
.oc-tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 8px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--slate); text-align: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.oc-tab-ic { display: inline-flex; color: var(--ink-2); transition: color .2s var(--ease); }
.oc-tab:hover { color: var(--ink); }
.oc-tab.active { background: var(--paper-2); color: var(--ink); }
.oc-tab.active .oc-tab-ic { color: var(--accent); }
/* Lockdown turns red only when active (emergency action) */
.oc-tab--lockdown.active { background: rgba(217,75,75,.12); color: #d94b4b; }
.oc-tab--lockdown.active .oc-tab-ic { color: #d94b4b; }

.oc-stage { position: relative; 
  /* min-height: clamp(320px, 44vw, 540px);  */
  min-height: clamp(320px, 44vw, 600px);
}
.oc-media { position: absolute; inset: 0; overflow: hidden; background: #1a1e2b; }
.oc-pane { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.oc-pane.active { opacity: 1; }
.oc-media img, .oc-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(120deg, rgba(12,14,22,0) 40%, rgba(12,14,22,.5) 100%),
    linear-gradient(0deg, rgba(12,14,22,.55) 0%, rgba(12,14,22,0) 45%);
}
.oc-cards {
  position: absolute; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px);
  width: min(360px, 78%);
}
.oc-card {
  display: none;
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 16px 18px;
  color: #fff; box-shadow: 0 20px 50px -24px rgba(0,0,0,.55);
}
.oc-card.active { display: block; animation: tlFade .35s var(--ease) both; }
.oc-card b { display: block; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 6px; color: #fff; }
.oc-card p { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.55; }

@media (max-width: 920px) {
  .one-head { flex-direction: column; gap: clamp(12px, 3vw, 20px); }
  .one-body { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
  .one-body .one-media { order: -1; height: auto; aspect-ratio: 16 / 11; }
}
@media (max-width: 620px) {
  .oc-tabs { overflow-x: auto; }
  .oc-tab { flex: 0 0 auto; min-width: 104px; }
  .oc-cards { width: auto; left: clamp(14px, 4vw, 20px); right: clamp(14px, 4vw, 20px); }
}

/* ============================================================
   Sentritec Pass — mobile app page
   ============================================================ */
.pass-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 18px; }
.pass-block { padding: clamp(64px, 9vw, 112px) 0; }
/* when a feature-stack is the only content (no section-head above it), drop its top margin */
.pass-block > .wrap > .feature-stack:first-child { margin-top: 0; }
.pass-block .section-head { max-width: 780px; margin: 0 auto; }
.pass-block .section-head .lead { margin: 16px auto 0; }

/* 1. Hero — full-bleed background image with copy overlaid on the left */
.pass-hero {
  position: relative; overflow: hidden; color: #fff;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
}
.pass-hero-bg { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: linear-gradient(135deg, #2b2f4a 0%, #14161f 100%); }
.pass-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pass-hero-ph { color: rgba(255,255,255,.4); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.pass-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8,9,14,.74) 0%, rgba(8,9,14,.42) 46%, rgba(8,9,14,.08) 100%); }
.pass-hero-inner { position: relative; z-index: 2; padding-top: var(--nav-h); padding-bottom: clamp(48px, 8vh, 100px); }
.pass-hero-copy { max-width: 620px; }
.pass-hero .pass-eyebrow { color: #b6bce0; }
.pass-hero-copy h1 { margin: 0; color: #fff; font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.03em; line-height: 1.05; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.pass-hero-copy .lead { margin-top: 18px; color: rgba(255,255,255,.85); }

.pass-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3vw, 34px); }
/* mobile: both store badges share one row */
@media (max-width: 700px) {
  .pass-badges { flex-wrap: nowrap; gap: 10px; }
  .pass-badges a, .pass-badges .pass-badge-off { flex: 1 1 0; min-width: 0; display: block; }
  .pass-badge-ph { width: 100%; min-width: 0; height: 52px; padding: 12px 16px; }
}
/* store listings not live yet — badges are dimmed, non-clickable, with a note */
.pass-badge-off { display: block; opacity: .45; cursor: default; user-select: none; }
.pass-badges-note { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.7); }
/* real badge artwork */
.pass-badge-img { height: 50px; width: auto; display: block; }
/* placeholder until the PNGs are added */
.pass-badge-ph { display: inline-flex; align-items: center; justify-content: center; 
    height: 60px;
    min-width: 160px;
    padding: 16px 40px;
    border: 1.5px solid #73808c;
    border-radius: 240px;
  color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }

/* 2. Modern unlocking — horizontal carousel of wide video cards */
/* header — title left, subheader right; split by ratio (no fixed widths) */
.unlock-head { display: flex; align-items: flex-start; gap: clamp(24px, 5vw, 64px); }
.unlock-head h2 { flex: 1 1 0; min-width: 0; margin: 0; }
.unlock-head .lead { flex: 1 1 0; min-width: 0; margin: 0 0 6px; }
#unlock { overflow-x: clip; }   /* keep the right-edge bleed from adding a page scrollbar */
.unlock-carousel { margin-top: clamp(34px, 4.5vw, 56px); }
.unlock-track {
  display: flex; gap: clamp(20px, 2.4vw, 28px); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* bleed to BOTH screen edges; the inner padding brings the cards back to the content
     column, so scrolled cards clip at the viewport edge (not mid-screen) and the last
     card ends with proper spacing instead of touching the screen edge */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  /* viewport-based value so padding and scroll-padding resolve to the SAME pixels
     (scroll-padding % resolves against the scrollport, so % here would misalign the snap) */
  padding: 0 max(28px, calc((100vw - var(--maxw)) / 2 + 28px)) 2px;
  scroll-padding-left: max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
}
.unlock-track::-webkit-scrollbar { display: none; }
/* one large card with the next peeking in; the peek fades out (see track mask) */
.uc { flex: 0 0 clamp(300px, 72%, 940px); scroll-snap-align: start; }
.uc-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 8.4; background: linear-gradient(160deg, #23273e 0%, #0f1119 100%); }
/* legibility scrim for the bottom-left copy — black rising from the bottom, gone by mid-card */
.uc-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 50%); }
/* mobile: the description moves out of the image and sits under the card title */
.uc-desc-m { display: none; }
@media (max-width: 700px) {
  .uc-media-in { display: none; }
  .uc-media::after { display: none; }
  .uc-desc-m { display: block; margin: 8px 0 0; color: var(--slate); font-size: 14.5px; line-height: 1.6; font-weight: 400; }
}
.uc-badge { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.uc-badge svg { width: 10px; height: 10px; }
/* description anchored to the bottom-left of the card */
.uc-media-in { position: absolute; left: clamp(22px, 3vw, 36px); right: clamp(22px, 3vw, 36px); bottom: clamp(20px, 2.6vw, 28px); z-index: 1; text-align: left; color: rgba(255,255,255,.85); max-width: 460px; }
.uc-media-in p { margin: 0; font-size: 15px; line-height: 1.55; }
.uc-cap { margin-top: 18px; font-size: clamp(18px, 1.9vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.unlock-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: clamp(20px, 2.5vw, 28px); }
.unlock-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.unlock-arrow:hover { background: var(--paper-2); border-color: var(--ink); }
.unlock-arrow:disabled { opacity: .4; cursor: default; }

/* 3. Security perimeter — centered icon-on-top columns with vertical dividers */
.perim-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: clamp(40px, 5vw, 60px) auto 0; max-width: 940px; }
.perim-item { text-align: center; padding: clamp(6px, 1.5vw, 12px) clamp(28px, 4vw, 56px); }
.perim-item + .perim-item { border-left: 1px solid var(--line); }
.perim-ic { display: inline-flex; color: var(--ink-2); margin-bottom: clamp(16px, 2vw, 22px); }
.perim-ic svg { width: 30px; height: 30px; }
.perim-item h3 { margin: 0 0 10px; font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.01em; }
.perim-item p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.6; }

/* 4 & 5. Split rows */
.pass-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.pass-split--rev .pass-split-media { order: -1; }
.pass-split-copy h2 { margin: 0; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; line-height: 1.1; }
.pass-split-copy .lead { margin-top: 16px; }
.pass-points { display: flex; flex-direction: column; margin-top: clamp(24px, 3vw, 36px); }
.pass-point { padding: clamp(18px, 2.2vw, 26px) 0; border-top: 1px solid var(--line); }
.pass-point:first-child { border-top: 0; padding-top: 0; }
.pass-point h3 { margin: 0 0 8px; font-size: clamp(17px, 1.7vw, 20px); letter-spacing: -0.01em; }
.pass-point p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.6; }
.api-split .pass-point { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 1.6vw, 20px); align-items: start; }
.pass-point-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); transition: background .25s var(--ease), color .25s var(--ease); }
.pass-point-ic svg { width: 23px; height: 23px; }
.api-split .pass-point:hover .pass-point-ic { background: var(--accent); color: #fff; }
.pass-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); border: 1px solid var(--line); }
.pass-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 6. CTA */
.pass-cta { background: var(--ink); color: #fff; padding: clamp(64px, 9vw, 110px) 0; }
.pass-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; }
.pass-cta h2 { margin: 0; color: #fff; }
.pass-cta .pass-badges { justify-content: flex-start; margin: 0; }
.pass-cta-dl .pass-badges-note { margin-top: 12px; text-align: center; }

/* Standardized section title & subheading sizes across the Pass page (hero excluded) */
.unlock-head h2,
.pass-block .section-head h2,
.pass-split-copy h2,
.guest-head h2,
.pass-cta h2,
.pass-block .intg2-head h2 {
  font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; line-height: 1.1;
}
.unlock-head .lead,
.pass-split-copy .lead,
.pass-block .section-head .lead,
.guest-head .lead,
.pass-block .intg2-head .lead {
  font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.55;
}

/* 4. Facial registration — full-viewport section with a large image */
.pass-vh { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.face-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); height: clamp(400px, 58vh, 640px); display: grid; place-items: center; }
.face-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-media-ph { color: var(--slate); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }

/* 5. Temporary guest keys — light, icon columns with dividers, full-width pass image */
.guest-sec { background: var(--paper-2); padding: clamp(64px, 9vw, 112px) 0; }
.guest-head { display: flex; align-items: flex-end; gap: clamp(24px, 5vw, 64px); }
.guest-head h2 { flex: 1 1 0; min-width: 0; margin: 0; }
.guest-head .lead { flex: 1 1 0; min-width: 0; margin: 0 0 6px; color: var(--slate); }
.guest-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: clamp(40px, 5vw, 60px); }
.guest-item { padding: 4px clamp(24px, 3vw, 48px); }
.guest-item:first-child { padding-left: 0; }
.guest-item + .guest-item { border-left: 1px solid var(--line); }
.guest-ic { display: inline-flex; color: var(--accent); margin-bottom: clamp(16px, 2vw, 22px); }
.guest-ic svg { width: 30px; height: 30px; }
.guest-item h3 { margin: 0 0 10px; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.01em; }
.guest-item p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.6; }
.guest-media { margin-top: clamp(44px, 5.5vw, 72px); border-radius: var(--radius-lg); overflow: hidden; }
.guest-media img { width: 100%; height: clamp(300px, 40vw, 560px); object-fit: cover; display: block; }

@media (max-width: 860px) {
  .pass-hero-scrim { background: linear-gradient(180deg, rgba(8,9,14,.5) 0%, rgba(8,9,14,.35) 40%, rgba(8,9,14,.72) 100%); }
  .unlock-head,
  .guest-head { display: block; }
  .unlock-head .lead,
  .guest-head .lead { margin: 14px 0 0; max-width: none; }
  .uc { flex-basis: 100%; }                 /* one full card per view */
  .pass-split { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  .pass-split--rev .pass-split-media { order: -1; }
  #facial.pass-vh { min-height: 0; }
  .face-media { height: auto; aspect-ratio: 4 / 3; }
  .guest-grid,
  .perim-grid { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 34px); }
  .guest-item, .perim-item { padding: 0; }
  .guest-item + .guest-item,
  .perim-item + .perim-item { border-left: 0; border-top: 1px solid var(--line); padding-top: clamp(26px, 5vw, 34px); }
  .pass-cta-inner { flex-direction: column; align-items: flex-start; gap: clamp(24px, 5vw, 32px); }
}
@media (max-width: 560px) {
  .perim-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Integrations page
   ============================================================ */
/* 2. Types of integration — centered icon-on-top columns with vertical dividers */
.int-types { display: grid; grid-template-columns: repeat(2, 1fr); margin: clamp(40px, 5vw, 60px) auto 0; max-width: 940px; }
.int-type { text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(6px, 1.5vw, 12px) clamp(28px, 4vw, 56px); }
.int-type + .int-type { border-left: 1px solid var(--line); }
.int-type-ic { display: inline-flex; color: var(--ink-2); margin-bottom: clamp(16px, 2vw, 22px); }
.int-type-ic svg { width: 36px; height: 36px; }
.int-type h3 { margin: 0 0 12px; font-size: clamp(19px, 2.1vw, 24px); letter-spacing: -0.01em; }
.int-type p { margin: 0 0 18px; color: var(--slate); font-size: 15.5px; line-height: 1.6; }
.int-type .link-arrow { margin-top: auto; color: var(--accent); }

/* 3. Native integrations — card grid */
.nat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); margin-top: clamp(40px, 5vw, 60px); }
.nat-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.nat-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.nat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nat-body { padding: clamp(22px, 2.4vw, 30px); }
.nat-body h3 { margin: 0 0 10px; font-size: clamp(17px, 1.8vw, 20px); letter-spacing: -0.01em; line-height: 1.25; }
.nat-body p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.6; }

/* shared button rows */
.int-btnrow { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 56px); }
.int-btnrow--left { justify-content: flex-start; margin-top: clamp(28px, 3vw, 36px); }

/* 4. API — copy + dark code block */
.api-split { align-items: stretch; }
.api-split .pass-points { margin-top: 0; }
.api-code { border-radius: var(--radius-lg); overflow: hidden; background: #0e1017; border: 1px solid #23283a; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.api-code-top { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #23283a; }
.api-code-top span { width: 11px; height: 11px; border-radius: 50%; background: #3a4055; }
.api-code-top em { margin-left: 10px; font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.5); letter-spacing: .02em; }
.api-code-body { flex: 1; 
  /* margin: 0;  */
  padding: clamp(18px, 2vw, 26px); overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; color: #cfd6e6; }
.api-code-body .c-m { color: #8ea2ee; }
.api-code-body .c-k { color: #7fd4c1; }
.api-code-body .c-s { color: #e6b980; }
.api-code-body .c-d { color: rgba(255,255,255,.4); }

/* 5. Security — 3-up icon columns with dividers */
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 60px); }
.sec-item { text-align: center; padding: clamp(6px, 1.5vw, 12px) clamp(24px, 3vw, 44px); }
.sec-item + .sec-item { border-left: 1px solid var(--line); }
.sec-ic { display: inline-flex; color: var(--ink-2); margin-bottom: clamp(16px, 2vw, 22px); }
.sec-item h3 { margin: 0 0 10px; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; }
.sec-item p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.6; }

/* 6. Final CTA — full-width black band, centered content */
#request { background: var(--ink); }
.int-final { display: flex; flex-direction: column; align-items: center; text-align: center; }
.int-final .section-head { max-width: 640px; padding-bottom: 0; }
.int-final .section-head h2 { color: #fff; }
.int-final .section-head .lead { color: rgba(255,255,255,.78); }
.int-final .btn { margin-top: clamp(24px, 3vw, 32px); }

@media (max-width: 920px) {
  .nat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .int-types { grid-template-columns: 1fr; row-gap: clamp(26px, 5vw, 34px); }
  .nat-grid { grid-template-columns: 1fr; }
  .sec-grid { grid-template-columns: 1fr; row-gap: clamp(26px, 5vw, 34px); }
  .int-type, .sec-item { padding: 0; }
  /* even air on both sides of the divider: row-gap above, padding below */
  .int-type + .int-type,
  .sec-item + .sec-item { border-left: 0; border-top: 1px solid var(--line); padding-top: clamp(26px, 5vw, 34px); }
}

/* ============================================================
   Integrations directory (partners) page
   ============================================================ */
.pt-hero { padding: calc(var(--nav-h) + clamp(40px, 5.5vw, 72px)) 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.pt-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pt-hero h1 { margin: 0; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.03em; line-height: 1.04; }
.pt-hero .lead { margin: 16px 0 0; max-width: 640px; font-size: clamp(16px, 1.7vw, 19px); color: var(--slate); }

.pt-section { padding: clamp(32px, 4vw, 56px) 0 clamp(64px, 9vw, 112px); }
.pt-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

/* left sidebar */
.pt-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
.pt-nav { display: flex; flex-direction: column; gap: 2px; }
.pt-nav a { display: block; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
/* parent level — top-level, dark & bold */
.pt-nav-link { padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.pt-nav-link:hover { background: var(--paper-2); }
.pt-nav-link.active { color: var(--accent); background: var(--accent-soft); }
/* child level — indented under its parent with a connector line, lighter & smaller */
.pt-nav-sub { margin: 2px 0 2px 16px; padding: 7px 12px 7px 16px; font-size: 13.5px; font-weight: 500; color: var(--slate); border-left: 2px solid var(--line); border-radius: 0 8px 8px 0; }
.pt-nav-sub:hover { color: var(--ink); background: var(--paper-2); }
.pt-nav-sub.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }

/* right content */
.pt-content { min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.pt-cat { scroll-margin-top: calc(var(--nav-h) + var(--anno-h, 0px) + 24px); }
.pt-cat-head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.02em; }
.pt-cat-head p { margin: 10px 0 0; color: var(--slate); font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; max-width: 680px; }
.pt-sub { scroll-margin-top: calc(var(--nav-h) + var(--anno-h, 0px) + 24px); margin: clamp(28px, 3.4vw, 40px) 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: clamp(18px, 2vw, 24px); margin-top: clamp(22px, 2.6vw, 30px); }

/* partner card */
.pt-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 2.4vw, 28px); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.pt-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); }
/* logo shown inside a white framed box (image-2 style) */
.pt-logo { width: 150px; max-width: 100%; height: 84px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); padding: 14px; font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: .02em; margin-bottom: 18px; overflow: hidden; object-fit: contain; }
.pt-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pt-name { margin: 0 0 8px; font-size: clamp(17px, 1.7vw, 19px); letter-spacing: -0.01em; }
.pt-desc { margin: 0 0 14px; color: var(--slate); font-size: 14.5px; line-height: 1.6; }
.pt-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.pt-tag { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 11px; }
.pt-more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--accent); }
.pt-more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.pt-more:hover svg { transform: translateX(3px); }

/* details modal */
.pt-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.pt-modal[hidden] { display: none; }
.pt-modal-overlay { position: absolute; inset: 0; background: rgba(12,13,18,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pt-modal-box { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 86vh; overflow-y: auto; background: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow); animation: tlFade .25s var(--ease) both; }
.pt-modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--paper-2); color: var(--slate); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.pt-modal-close:hover { background: var(--line); color: var(--ink); }
.pt-modal-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 32px); align-items: center; padding-bottom: clamp(22px, 3vw, 30px); border-bottom: 1px solid var(--line); }
.pt-modal-logo { display: block; width: 150px; max-width: 100%; height: 96px; border-radius: 12px; background: #fff; border: 1px solid var(--line); padding: 14px; overflow: hidden; }
.pt-modal-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pt-modal-title { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; }
.pt-modal-desc { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.6; }
.pt-modal-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.pt-modal-body { padding-top: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: clamp(22px, 3vw, 30px); }
.pt-modal-sec[hidden] { display: none; }
.pt-modal-sec h4 { margin: 0 0 10px; font-size: 18px; letter-spacing: -0.01em; }
.pt-modal-sec p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.7; }

@media (max-width: 860px) {
  .pt-layout { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 24px); }
  .pt-sidebar { position: static; }
  .pt-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .pt-nav a { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--ink); }
  .pt-nav-link, .pt-nav-sub { margin: 0; }
  .pt-nav a:hover { background: var(--paper-2); }
  .pt-nav a.active { color: #fff; background: var(--accent); border-color: var(--accent); }
  .pt-modal-head { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Find a Partner page (partner/find-partner.html) ---------- */
.fp-toolbar { padding-top: clamp(26px, 3.5vw, 40px); }
.fp-modes { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-mode { font: inherit; font-weight: 600; font-size: 14.5px; color: var(--slate); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 11px 24px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.fp-mode:hover { border-color: #c8cad3; color: var(--ink); }
.fp-mode.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.fp-search { display: flex; align-items: center; gap: 10px; flex: 0 1 440px; min-width: 280px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 18px; }
.fp-search:focus-within { border-color: var(--ink); }
.fp-search > svg { flex: none; color: var(--slate); }
.fp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); }
.fp-search .btn { border-radius: 999px; padding: 11px 26px; flex: none; }
.fp-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* pill dropdowns */
.fp-dd { position: relative; }
.fp-dd-btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; cursor: pointer; transition: border-color .2s var(--ease); }
.fp-dd-btn:hover { border-color: #c8cad3; }
.fp-dd.open .fp-dd-btn { border-color: var(--ink); }
.fp-dd-btn .car { transition: transform .2s var(--ease); flex: none; }
.fp-dd.open .fp-dd-btn .car { transform: rotate(180deg); }
.fp-dd-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; min-width: 230px; display: none; }
.fp-dd.open .fp-dd-panel { display: block; }
.fp-dd-panel--right { left: auto; right: 0; }
.fp-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.fp-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 14.5px; color: var(--ink); background: none; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.fp-opt:hover { background: var(--paper-2); }
.fp-opt.selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.fp-opt .tick { flex: none; width: 16px; height: 16px; opacity: 0; }
.fp-opt.selected .tick { opacity: 1; }

/* filter (checkbox groups) */
.fp-filter-panel { display: none; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: clamp(18px, 2.5vw, 34px); padding: clamp(18px, 2.4vw, 26px); width: min(720px, calc(100vw - 48px)); }
.fp-dd.open .fp-filter-panel { display: grid; }
.fp-fgroup h6 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.fp-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--slate); padding: 6px 0; cursor: pointer; }
.fp-check:hover { color: var(--ink); }
.fp-check input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--accent); cursor: pointer; }
.fp-badge { color: var(--slate); font-weight: 500; font-size: 13px; }
.fp-clear { font: inherit; font-size: 14px; font-weight: 600; color: var(--slate); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.fp-clear:hover { color: var(--ink); }

/* results bar + sort */
.fp-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: clamp(24px, 3.2vw, 36px); padding-top: clamp(18px, 2.4vw, 26px); }
.fp-count { font-size: 15px; color: var(--slate); }
.fp-count b { color: var(--ink); }
.fp-sort .fp-dd-btn { border: 0; background: none; padding: 6px 2px; font-weight: 500; color: var(--slate); }
.fp-sort .fp-dd-btn b { color: var(--ink); font-weight: 600; }
.fp-sort.open .fp-dd-btn, .fp-sort .fp-dd-btn:hover { border: 0; }

/* partner cards */
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(18px, 2vw, 24px); margin: clamp(22px, 3vw, 34px) 0 clamp(56px, 7vw, 88px); }
.fp-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 2.4vw, 28px); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.fp-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); }
.fp-card h3 { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 18px; letter-spacing: -0.01em; }
.fp-tier { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 16px; }
.fp-tier img { width: 28px; height: 28px; flex: none; object-fit: contain; }
.fp-label { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.fp-addr { margin: 0 0 12px; font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.fp-meta { margin: 0 0 6px; font-size: 14.5px; color: var(--slate); }
.fp-meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.fp-meta a:hover { color: var(--accent); }
.fp-empty { grid-column: 1 / -1; text-align: center; color: var(--slate); font-size: 15.5px; padding: clamp(40px, 6vw, 72px) 0; }

/* ---------- Legal document pages (privacy policy, terms, ...) ---------- */
.ld-sec { padding: calc(var(--nav-h) + clamp(44px, 6vw, 80px)) 0 clamp(72px, 9vw, 120px); }
.ld-doc { 
  /* max-width: 800px;  */
  margin: 0 auto; }
.ld-doc h1 { font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -0.02em; margin: 0 0 10px; }
.ld-updated { margin: 0 0 clamp(30px, 4vw, 44px); color: var(--slate); font-size: 14.5px; }
.ld-doc h2 { font-size: clamp(19px, 1.6vw, 21px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; margin: clamp(44px, 5.6vw, 58px) 0 12px; }
.ld-doc h3 { font-size: clamp(17px, 1.4vw, 18px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; margin: 36px 0 10px; }
.ld-doc p { margin: 0 0 16px; font-size: clamp(15px, 1.65vw, 17.5px); line-height: 1.7; color: #3f434f; }
.ld-doc a { color: var(--accent); }
.ld-doc a:hover { text-decoration: underline; }
.ld-doc ul { margin: 0 0 16px; padding-left: 24px; font-size: clamp(15px, 1.65vw, 17.5px); line-height: 1.7; color: #3f434f; }
.ld-doc li { margin-bottom: 8px; }

/* ---------- 404 page ---------- */
.nf-sec { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; padding: calc(var(--nav-h) + 64px) 0 96px; }
.nf-inner { text-align: center; max-width: 640px; margin: 0 auto; }
.nf-code { display: block; font-size: clamp(64px, 10vw, 104px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--accent); margin-bottom: 20px; }
.nf-inner h1 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em; margin-bottom: 14px; }
.nf-inner p { color: var(--slate); font-size: 16px; line-height: 1.7; max-width: 46ch; margin: 0 auto 32px; }
.nf-cta { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---------- Coming-soon pages (shared body: assets/js/coming-soon.js) ---------- */
.cs-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }

/* ---------- News / Blog / Docs — empty state (no content published yet) ---------- */
.nw-empty { text-align: center; padding: clamp(56px, 9vw, 110px) 0; }
.nw-empty h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.nw-empty p { color: var(--slate); font-size: 15.5px; line-height: 1.65; max-width: 52ch; margin: 0 auto; }

@media (max-width: 860px) {
  .fp-search { flex: 1 1 100%; }
  .fp-filter-panel { grid-template-columns: 1fr; width: min(360px, calc(100vw - 48px)); }
  .fp-dd-panel { min-width: 200px; }
}

/* search box inside a dropdown panel */
.fp-dd-search { display: flex; align-items: center; gap: 10px; margin: 6px 6px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.fp-dd-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fp-dd-search svg { color: var(--slate); flex: none; }
.fp-dd-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--ink); }
.fp-dd-search input::placeholder { color: #9aa0b4; }
.fp-dd-empty { padding: 12px 14px; font-size: 14px; color: var(--slate); list-style: none; }
#fpCountry .fp-dd-panel { min-width: 260px; }

/* Find a Partner — sticky filter rail + results layout */
.fpp-section { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 88px); }
.fpp-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.fpp-side { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); }
.fp-results-actions { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); flex-wrap: wrap; }
.fpp-side-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fpp-side-top h4 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.fpp-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.fpp-seg { display: flex; gap: 4px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 10px; }
.fpp-seg .fp-mode { flex: 1; border: 0; background: none; padding: 9px 8px; font-size: 13.5px; border-radius: 999px; }
.fpp-seg .fp-mode.active { background: var(--ink); color: #fff; }
.fpp-search { border-radius: 12px; padding: 0 14px; }
.fpp-search input { padding: 12px 0; }
.fpp-side .fp-dd { width: 100%; }
.fpp-side .fp-dd-btn { width: 100%; justify-content: space-between; border-radius: 12px; padding: 12px 14px; }
.fpp-side .fp-dd-panel { left: 0; right: 0; min-width: 0; }
.fpp-group .fp-check { padding: 5px 0; }
.fpp-main .fp-results-bar { margin-top: 0; border-top: 0; border-bottom: 1px solid var(--line); padding: 2px 0 16px; }
.fpp-main .fp-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: clamp(18px, 2.4vw, 26px) 0 0; }
@media (max-width: 920px) {
  .fpp-layout { grid-template-columns: 1fr; }
  .fpp-side { position: static; max-height: none; overflow: visible; padding-right: 0; }
}

/* apply page — searchable country combobox */
.pa-combo { position: relative; }
.pa-combo > input {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b5f6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.pa-combo > input[readonly] { cursor: pointer; background-color: #fff; }
.pa-combo-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: none; }
.pa-combo.open .pa-combo-panel { display: block; }
.pa-combo-panel .fp-list { max-height: 240px; }
.pa-combo-empty { padding: 12px 14px; font-size: 14px; color: var(--slate); list-style: none; }

/* ---------- Newsroom / Blog / Docs pages ---------- */
.pt-hero--center { text-align: center; border-bottom: 0; }
.pt-hero--center .lead { margin-left: auto; margin-right: auto; max-width: 62ch; }

/* banner hero — heading + subheading over a full-width background image */
.nw-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(80px, 11vw, 150px)) 0 clamp(56px, 8vw, 104px); color: #fff; }
.nw-hero-bg { position: absolute; inset: 0; }
.nw-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,16,.66) 0%, rgba(10,11,16,.34) 55%, rgba(10,11,16,.16) 100%); }
.nw-hero .wrap { position: relative; z-index: 1; }
.nw-hero h1 { margin: 0; color: #fff; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.02em; line-height: 1.08; text-shadow: 0 2px 28px rgba(0,0,0,.3); }
.nw-hero .lead { margin: 14px 0 0; max-width: 60ch; color: rgba(255,255,255,.88); font-size: clamp(15.5px, 1.7vw, 18px); line-height: 1.6; text-shadow: 0 1px 16px rgba(0,0,0,.3); }

/* featured carousel — one story at a time, image left / copy right, arrows bottom-right */
.nw-sec { padding: clamp(36px, 5vw, 64px) 0; }
.nw-feat { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.nw-slides { position: relative; min-height: clamp(260px, 30vw, 360px); }
.nw-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 1fr; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.nw-slide.active { opacity: 1; pointer-events: auto; }
.nw-slide-media { position: relative; overflow: hidden; }
.nw-slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-slide-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(22px, 3vw, 44px); padding-bottom: clamp(64px, 7vw, 84px); }
.nw-slide-body h3 { margin: 0; font-size: clamp(18px, 1.9vw, 24px); letter-spacing: -0.015em; line-height: 1.35; }
.nw-feat-nav { position: absolute; right: clamp(18px, 2.4vw, 28px); bottom: clamp(16px, 2.2vw, 24px); display: flex; gap: 10px; z-index: 2; }

/* article grid */
.nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 24px); }
.nw-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.nw-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); }
.nw-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.nw-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.nw-card:hover .nw-card-media img { transform: scale(1.04); }
.nw-card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2.2vw, 26px); }
.nw-card-body h3 { margin: 0; font-size: 16.5px; line-height: 1.45; letter-spacing: -0.01em; }
.nw-card-body time { font-size: 13.5px; color: var(--slate); }
.nw-card-body .link-arrow { margin-top: auto; font-size: 14.5px; color: var(--accent); }

/* documentation cards */
.dc-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 11px; }
/* fixed-ratio thumbnail box — the image centers inside and can never stretch the card */
.dc-media { position: relative; aspect-ratio: 16 / 10; background: var(--paper-2); overflow: hidden; }
.dc-media img { position: absolute; inset: 0; margin: auto; max-width: 70%; max-height: 76%; width: auto; height: auto; object-fit: contain; }

@media (max-width: 990px) { .nw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .nw-slides { min-height: 0; }
  .nw-slide { position: static; display: none; grid-template-columns: 1fr; }
  .nw-slide.active { display: grid; }
  .nw-slide-media { aspect-ratio: 16 / 9; }
  .nw-slide-media img { position: static; }
}
@media (max-width: 640px) { .nw-grid { grid-template-columns: 1fr; } }

/* ---------- API documentation shell (api.html) ---------- */
/* standalone docs shell — no site nav/footer, the sidebar brand links home */
.apid-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr) 240px; min-height: 100svh; }
.apid-side {
  position: sticky; top: 0; height: 100svh; overflow-y: auto;
  padding: 24px 16px 40px; background: var(--paper-2); border-right: 1px solid var(--line);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.apid-side::-webkit-scrollbar { width: 6px; }
.apid-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.apid-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; color: var(--ink); padding: 4px 8px 18px; }
.apid-brand img { width: 26px; height: 26px; }
.apid-search { display: flex; align-items: center; gap: 9px; margin: 0 4px 20px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.apid-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.apid-search svg { flex: none; color: var(--slate); }
.apid-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); }
.apid-search kbd { flex: none; font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--slate); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; background: var(--paper-2); }
.apid-label { display: block; margin: 18px 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--slate); }
.apid-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ink);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: background .15s var(--ease);
}
.apid-item:hover { background: #fff; }
.apid-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.apid-item .tag { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); background: var(--line); border-radius: 999px; padding: 3px 8px; }
.apid-main { padding: clamp(28px, 4vw, 56px) clamp(24px, 4.5vw, 80px) clamp(56px, 7vw, 96px); }
.apid-main h1 { margin: 0 0 12px; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; }
.apid-ver { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 12px; margin-bottom: clamp(22px, 3vw, 32px); }
/* base-url block (dark, Kisi-style) */
.apid-base { border-radius: 14px; overflow: hidden; border: 1px solid #232532; margin-bottom: clamp(26px, 3.4vw, 40px); }
.apid-base-head { background: #1a1c28; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; padding: 11px 18px; }
.apid-base-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: #0f1119; padding: 15px 18px; }
.apid-base-row b { color: #fff; font-size: 14px; }
.apid-base-row code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13.5px; color: #9fd0e8; background: rgba(255,255,255,.06); border-radius: 7px; padding: 5px 10px; }
/* coming-soon panel */
.apid-coming { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); background: linear-gradient(140deg, var(--accent-soft) 0%, #fff 55%); margin-bottom: clamp(30px, 4vw, 48px); }
.apid-coming-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; margin-bottom: 18px; }
.apid-coming h2 { margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; }
.apid-coming p { margin: 0; max-width: 62ch; color: var(--slate); font-size: 15.5px; line-height: 1.65; }
.apid-coming .btn { margin-top: 24px; margin-right: 10px; }
/* placeholder doc sections with skeleton lines */
/* each sidebar item maps to its own page; only the active one is shown */
.apid-page { display: none; }
.apid-page.active { display: block; animation: tlFade .3s var(--ease) both; }
.apid-note { display: flex; align-items: flex-start; gap: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; line-height: 1.55; color: var(--slate); margin-bottom: clamp(24px, 3vw, 36px); }
.apid-note svg { flex: none; color: var(--accent); margin-top: 1px; }
.apid-sec { padding-top: clamp(26px, 3.4vw, 40px); margin-top: clamp(26px, 3.4vw, 40px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 12px); }
.apid-sec h3 { margin: 0 0 16px; font-size: 20px; letter-spacing: -0.01em; }
.apid-skel { display: grid; gap: 12px; }
.apid-skel span { display: block; height: 13px; border-radius: 999px; background: linear-gradient(90deg, var(--paper-2) 25%, #ececf1 45%, var(--paper-2) 65%); background-size: 300% 100%; animation: apidShimmer 1.8s linear infinite; }
.apid-skel span:nth-child(1) { width: 92%; }
.apid-skel span:nth-child(2) { width: 78%; }
.apid-skel span:nth-child(3) { width: 85%; }
.apid-skel span:nth-child(4) { width: 55%; }
@keyframes apidShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* right rail — "On this page" */
.apid-toc { position: sticky; top: 0; height: max-content; max-height: 100svh; overflow-y: auto; padding: clamp(28px, 4vw, 56px) 28px clamp(28px, 4vw, 56px) 0; }
.apid-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.apid-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.45; color: var(--slate); transition: color .15s var(--ease), border-color .15s var(--ease); }
.apid-toc a:hover { color: var(--ink); }
.apid-toc a.active { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
@media (max-width: 1200px) {
  .apid-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .apid-toc { display: none; }
}
@media (max-width: 920px) {
  .apid-shell { grid-template-columns: 1fr; }
  .apid-side { position: static; height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Get Started page (get-started.html) ---------- */
.gs-sec { padding: calc(var(--nav-h) + clamp(40px, 6vw, 72px)) 0 clamp(64px, 8vw, 100px); }
.gs-sec .cf-grid { align-items: flex-start; }
.gs-intro h1 { margin: 0 0 14px; font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -0.02em; line-height: 1.1; }
.gs-intro .lead { margin: 0; }
.gs-points { margin-top: clamp(24px, 3vw, 36px); }

/* ---------- Partner Program page (partner.html) ---------- */
.pt-hero .btn { margin-top: clamp(22px, 3vw, 32px); }
.pp-copy p { margin: 0 0 16px; color: var(--slate); font-size: clamp(15px, 1.65vw, 17.5px); line-height: 1.7; }
.pp-copy p:last-child { margin-bottom: 0; }
/* philosophy: image under the title fills the left column to the height of the copy */
.pp-phil { align-items: stretch; }
.pp-phil .intg2-head-title { display: flex; flex-direction: column; }
.pp-phil-media { flex: 1; min-height: 220px; margin-top: clamp(20px, 2.6vw, 32px); border-radius: var(--radius-lg); overflow: hidden; }
.pp-phil-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 920px) {
  .pp-phil-media { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
}
.pp-list { margin-top: clamp(18px, 2.4vw, 26px); }
.pp-list .one-litem { padding: clamp(16px, 2vw, 24px) 0; }
.pp-list .one-litem:first-child { border-top: 0; padding-top: 0; }

/* ---------- Become a Partner page (partner/apply.html) ---------- */
.pa-hero {
  position: relative; overflow: hidden;
  padding-top: var(--nav-h); min-height: clamp(220px, 32vh, 320px);
  background: radial-gradient(120% 160% at 78% 30%, #2b2f4a 0%, #1a1c2b 46%, #0c0d12 100%);
}
.pa-hero svg { position: absolute; right: clamp(4%, 8vw, 12%); bottom: -22%; width: clamp(220px, 30vw, 380px); height: auto; color: rgba(255,255,255,.05); }
.pa-main { background: var(--paper-2); padding: clamp(36px, 5vw, 64px) 0 clamp(64px, 8vw, 104px); }
.pa-card {
  max-width: 980px; margin: 0 auto; background: #fff; border-radius: calc(var(--radius-lg) + 4px);
  box-shadow: 0 24px 60px -30px rgba(22, 22, 24, .25);
  padding: clamp(28px, 4.5vw, 60px);
}
.pa-card h1 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.02em; line-height: 1.1; }
.pa-sub { margin: 0 0 clamp(26px, 3.4vw, 38px); color: var(--slate); font-size: clamp(15px, 1.6vw, 17px); line-height: 1.65; max-width: 70ch; }

.pa-form { display: grid; gap: 20px; }
.pa-form select {
  font: inherit; font-size: 15px; color: var(--ink); width: 100%;
  padding: 13px 40px 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b5f6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pa-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pa-form select:invalid { color: #9aa0b4; }
.pa-form .req { color: #c4373c; }

.pa-fieldset { border: 0; margin: 0; padding: 0; }
.pa-fieldset legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--slate); }
.pa-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 18px; }
.pa-checks--2 { grid-template-columns: repeat(2, 1fr); }
.pa-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--slate); padding: 6px 0; cursor: pointer; }
.pa-check:hover { color: var(--ink); }
.pa-check input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--accent); cursor: pointer; }
.pa-radios { display: flex; gap: 22px; }
.pa-radios .pa-check input { border-radius: 50%; }

.pa-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--slate); cursor: pointer; padding-top: 4px; }
.pa-consent input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--accent); cursor: pointer; }
.pa-err { display: none; margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #c4373c; }
.pa-err.show { display: block; }
.pa-submit { width: 100%; justify-content: center; margin-top: 6px; padding: 17px 28px; font-size: 16px; }

/* success state */
.pa-success { text-align: center; padding: clamp(24px, 4vw, 48px) 0; }
.pa-success-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin: 0 auto 20px; }
.pa-success h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; }
.pa-success p { margin: 0 auto; max-width: 52ch; color: var(--slate); font-size: 15.5px; line-height: 1.65; }

@media (max-width: 860px) {
  .pa-checks, .pa-checks--2 { grid-template-columns: 1fr; }
  .pa-radios { flex-direction: column; gap: 4px; }
}