/* ==========================================================================
   ACB Technologies — static site
   Source of truth: Figma "ACB Technologies" (file DI4jos6wVn2qsLYFFiGpEo),
   section 1:43 -> frames 1:168 home, 1:407 about, 1:579 products, 1:799 contact.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  /* Figma variables */
  --secondary-900: #13273e;
  --primary-500:   #dfa534;
  --white-100:     #ffffff;

  /* Raw palette used throughout the design */
  --accent:     #2f6da3;
  --muted:      #5a6b80;
  --surface:    #f7f8fa;
  --border:     #e4e5e6;
  --tint-35:    rgba(232, 238, 245, .35);
  --tint-50:    rgba(232, 238, 245, .5);
  --nav-hover:  rgba(68, 170, 136, .67);

  --gutter: 80px;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Clears the sticky header when an in-page anchor is jumped to. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 152px; }

body {
  margin: 0;
  background: var(--white-100);
  color: var(--secondary-900);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
p   { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul  { margin: 0; padding: 0; list-style: none; }
a   { color: inherit; }

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Absolutely-positioned Figma "scenes": the aspect ratio is locked so every
   child can be expressed as a percentage and the whole scene scales as one
   unit. cqw keeps any type inside a scene in step with it. */
.scene {
  position: relative;
  container-type: inline-size;
  max-width: 100%;
  flex: none;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: 0;
  border-radius: 6px;
  background: var(--secondary-900);
  color: var(--white-100);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
/* Figma documents the inverted hover on "Submit Button / Hover" (1:938); the
   inset rule keeps the light fill legible on the light form card. */
.btn:hover,
.btn:focus-visible {
  background: var(--surface);
  color: var(--secondary-900);
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn--block { width: 500px; max-width: 100%; padding: 14px 28px; }
.btn--sm { height: 40px; padding: 0 12px; font-size: 14px; line-height: 20px; letter-spacing: -.14px; }

/* --- Eyebrow ------------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
}
.eyebrow--lg {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: .28px;
  text-transform: none;
}

/* --- Navigation header (1:169 / 1:408 / 1:580 / 1:800) ------------------- */
/* The bar follows the page instead of scrolling away with it. It is opaque
   navy against every section it passes over, so it needs no scrolled state
   to stay readable — only a stacking order above the hero scenes, whose
   positioned children would otherwise paint over it. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--secondary-900);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.nav__logo {
  display: flex;
  padding: 10.482px;
  border-radius: 6.289px;
  overflow: hidden;
}
.nav__logo img { width: 130.884px; height: 66.107px; }
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--white-100);
  text-decoration: none;
  transition: color .15s ease;
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--nav-hover); }
.nav__link[aria-current="page"] { font-weight: 600; }

/* Mobile menu control. Off at desktop widths and only ever revealed once
   js/nav.js has flagged the document, so with scripting off the header keeps
   the inline menu rather than a panel nothing can open. */
.nav__toggle {
  display: none;
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--white-100);
  cursor: pointer;
}
.nav__toggle:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.nav__toggle-bars {
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
  margin: 0 auto;
}
.nav__toggle-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .18s ease;
}
.nav__toggle-bars i:nth-child(1) { top: 0; }
.nav__toggle-bars i:nth-child(2) { top: 7px; }
.nav__toggle-bars i:nth-child(3) { top: 14px; }
/* Open: the outer bars meet in the middle and cross. */
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__scrim { display: none; }

/* --- Footer (1:250 / 1:491 / 1:535 / 1:874) ------------------------------ */
.footer { background: var(--secondary-900); color: var(--white-100); }
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.footer__logo {
  display: flex;
  padding: 6.489px;
  border-radius: 3.893px;
  overflow: hidden;
}
.footer__logo img { width: 81.023px; height: 40.923px; }
.footer__cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.footer__about { display: flex; flex-direction: column; gap: 22px; width: 400px; }
.footer__blurb     { font-size: 14px; line-height: 22px; opacity: .7; }
.footer__copyright { font-size: 13px; opacity: .5; }
.footer__col { display: flex; flex-direction: column; gap: 5px; }
.footer__col--nav   { width: 180px; }
.footer__col--creds { width: 340px; }
.footer__heading { font-size: 15px; font-weight: 700; }
.footer__link { font-size: 14px; opacity: .7; text-decoration: none; }
.footer__link:hover { opacity: 1; }
.footer__cred {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: .8;
}
.footer__cred img { width: 16px; height: 16px; flex: none; }
.footer__cred a { text-decoration: underline; text-underline-position: from-font; }
.footer__rule { width: 100%; height: 1px; background: rgba(255, 255, 255, .1); }
.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  font-size: 13px;
}
.footer__legal-links { display: flex; gap: 24px; }
.footer__legal span,
.footer__legal a { opacity: .5; text-decoration: none; }

/* ==========================================================================
   HOME (1:168)
   ========================================================================== */

/* Hero (1:185) */
.hero { background: var(--surface); }
.hero__inner {
  display: flex;
  align-items: center;
  gap: 50px;
  padding-top: 120px;
  padding-bottom: 120px;
}
.hero__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hero__title { font-size: 56px; line-height: 64px; }
.hero__lede  { font-size: 18px; line-height: 30px; color: var(--muted); }

/* acb-hero-container (1:191) — 695.717 x 347.858 */
.hero-scene {
  width: 695.717px;
  aspect-ratio: 695.717 / 347.858;
  background: var(--tint-35);
  border-radius: 8.696px;
  overflow: hidden;
}
.hero-scene__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 60.369%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.hero-scene__grid {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--muted);
  opacity: .06;
}
.hero-scene__hub {
  position: absolute;
  left: 50%; top: 47.126%;
  width: 13.799%; height: 27.598%;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  background: linear-gradient(to bottom, #13273e, #1a3352);
  box-shadow: 0 24px 48px rgba(19, 39, 62, .05), 0 10px 20px rgba(19, 39, 62, .1);
}
.hero-scene__card {
  position: absolute;
  left: 70.123%; top: 55.175%;
  width: 18.973%; height: 25.298%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  background: var(--white-100);
  filter: drop-shadow(0 8px 9px rgba(19, 39, 62, .08));
}
.hero-scene__card-head { width: 100%; height: 18px; border-radius: 6px; background: var(--accent); flex: none; }
.hero-scene__bar { height: 6px; border-radius: 3px; background: #eaedf1; flex: none; }
.hero-scene__bar--wide   { width: 80px; }
.hero-scene__bar--narrow { width: 44px; }
.hero-scene__square { width: 18px; height: 18px; border-radius: 4px; background: #eaedf1; flex: none; }
.hero-scene__slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--muted);
  transform: translate(-50%, -50%);
}
.hero-scene__slot > i { display: block; background: var(--white-100); border-radius: 8px; }
.hero-scene__slot--a { left: 50%;     top: 81.622%; width: 10.349%; height: 20.698%; border-style: dashed; border-radius: 12px; opacity: .85; }
.hero-scene__slot--b { left: 29.302%; top: 54.025%; width: 9.199%;  height: 18.398%; border-radius: 12px; opacity: .9; }
.hero-scene__slot--c { left: 30.452%; top: 82.772%; width: 11.499%; height: 22.998%; border-radius: 40px; opacity: .9; }
.hero-scene__slot--a > i { width: 38.889%; height: 38.889%; }
.hero-scene__slot--b > i { width: 37.5%;   height: 37.5%; }
.hero-scene__slot--c > i { width: 35%;     height: 35%; }
.hero-scene__conn {
  position: absolute;
  background: var(--muted);
  transform: translate(-50%, -50%);
}
.hero-scene__conn--1 { left: 56.899%; top: 55.175%; width: 13.224%; height: 1px;     opacity: .28; }
.hero-scene__conn--2 { left: 43.101%; top: 55.175%; width: 13.224%; height: 1px;     opacity: .22; }
.hero-scene__conn--3 { left: 50%;     top: 65.810%; width: 1px;     height: 15.811%; opacity: .18; }
.hero-scene__conn--4 { left: 43.101%; top: 65.810%; width: 13.224%; height: 1px;     opacity: .20; }
.hero-scene__junction {
  position: absolute;
  width: .359%; height: .719%;
  transform: translate(-50%, -50%);
}
.hero-scene__junction--1 { left: 56.863%; top: 55.103%; }
.hero-scene__junction--2 { left: 43.065%; top: 55.103%; }
.hero-scene__junction--3 { left: 49.964%; top: 65.738%; }
.hero-scene__junction--4 { left: 43.065%; top: 65.738%; }
.hero-scene__decor { position: absolute; }
.hero-scene__decor--ring       { left: 74.742%; top: 11.499%; width: 1.437%; height: 3.840%; }
.hero-scene__decor--ring-inner { left: 74.742%; top: 11.499%; width: .862%;  height: 1.725%; }
.hero-scene__decor--plus-h     { left: 17.249%; top: 80.492%; width: 1.150%; height: 1px; }
.hero-scene__decor--plus-v     { left: 17.249%; top: 80.492%; width: 1.150%; height: 1px;
                                 transform-origin: 0 50%; transform: rotate(90deg); }

/* Product Spotlight (1:223) */
.spotlight { background: var(--white-100); }
.spotlight__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-top: 120px;
  padding-bottom: 120px;
}
.spotlight__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.spotlight__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 540px; }
.spotlight__title { font-size: 40px; line-height: 48px; }
.spotlight__body  { font-size: 16px; line-height: 26px; color: var(--muted); }
.spotlight__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 400px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.spotlight__status { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.spotlight__status img { width: 8px; height: 8px; }

/* Product Showcase / KeyRing (1:236 & 1:765) */
.showcase {
  position: relative;
  width: 100%;
  aspect-ratio: 1292.1459 / 531.9292;
  border-radius: 24.03px;
  background: var(--tint-50);
}
.showcase--tint-35 { background: var(--tint-35); }
.showcase__frame {
  position: absolute;
  left: -2.65625%;
  width: 105.3125%;
  top: 7.768%;
  height: 84.575%;
}
.showcase__shot {
  position: absolute;
  top: 0;
  width: 15.284%;
  height: 100%;
  border-radius: 12.376px;
  overflow: hidden;
}
.showcase__shot--left  { left: 26.187%; }
.showcase__shot--right { left: 58.531%; }
.showcase__shot--left img {
  position: absolute;
  left: -9.01%; top: .09%;
  width: 117.72%; height: 293.24%;
  max-width: none;
}
.showcase__shot--right img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.showcase__fade { position: absolute; }
.showcase__fade--left {
  left: -2.898%; top: -.016%;
  width: 64.284%; height: 100%;
  background: linear-gradient(to right, #fff 11.053%, rgba(255, 255, 255, 0) 81.842%);
}
.showcase__fade--right {
  right: 1.558%; top: -8.434%;
  width: 62.516%; height: 97.249%;
  background: linear-gradient(to left, #fff 11.053%, rgba(255, 255, 255, 0) 81.842%);
}
.showcase__phone {
  position: absolute;
  left: 50%; top: 50%;
  width: 40.681%; height: 122.475%;
  transform: translate(-50%, -50%);
}
.showcase__phone-body {
  position: absolute;
  left: 0; top: 1.213%;
  width: 100%; height: 98.787%;
  object-fit: cover;
  filter: drop-shadow(-11px 3px 13.4px rgba(0, 0, 0, .25));
}
.showcase__phone-screen {
  position: absolute;
  left: .077%; top: 0;
  width: 99.923%; height: 100%;
  overflow: hidden;
  -webkit-mask-image: var(--mask-phone);
          mask-image: var(--mask-phone);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.showcase__phone-screen img {
  position: absolute;
  left: 19.760%; top: 5.389%;
  width: 60.629%; height: 130.838%;
  max-width: none;
}

/* The small-screen deck. js/deck.js turns it on; see the drawer breakpoint. */
.deck { display: none; }

/* Why Choose ACB (1:237) */
.why {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.why__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  padding-top: 120px;
  padding-bottom: 120px;
}
.why__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.why__title { font-size: 36px; width: 480px; }
.why__lede  { font-size: 16px; line-height: 26px; color: var(--muted); width: 600px; }
.why__grid { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.why-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white-100);
}
.why-card__meta { display: flex; align-items: center; justify-content: space-between; }
.why-card__num  { font-size: 14px; font-weight: 700; color: var(--accent); }
.why-card__rule { width: 24px; height: 1px; background: var(--border); }
.why-card__title { font-size: 18px; }
.why-card__body  { font-size: 15px; line-height: 22px; color: var(--muted); }

/* ==========================================================================
   ABOUT (1:407)
   ========================================================================== */
.about-hero { background: var(--surface); }
.about-hero__inner { display: flex; justify-content: center; padding-top: 64px; padding-bottom: 64px; }
.about-hero__layout {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 48px 80px;
  overflow: hidden;
}
.about-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 417px; }
.about-hero__title { font-size: 48px; line-height: 56px; letter-spacing: -.48px; }
.about-hero__note  { font-size: 16px; font-weight: 500; line-height: 26px; letter-spacing: -.16px; opacity: .7; }

/* Hero Visual (1:426) — 520 x 440 */
.about-scene {
  width: 520px;
  aspect-ratio: 520 / 440;
  background: var(--tint-50);
  overflow: hidden;
}
.about-scene__rule {
  position: absolute;
  left: 0; width: 100%; height: 1px;
  background: var(--muted);
  opacity: .05;
}
.about-scene__rule--1 { top: 33.182%; }
.about-scene__rule--2 { top: 66.591%; }
.about-scene__stack {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 38.462%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.about-scene__group { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.about-scene__block {
  width: 60%;
  aspect-ratio: 1;
  border-radius: 20px;
  background: var(--secondary-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white-100);
  font-size: 1.7308cqw;
}
.about-scene__block span { opacity: .7; }
.about-scene__connector { width: 1px; background: var(--muted); opacity: .25; }
.about-scene__connector--lg { height: 32px; }
.about-scene__connector--sm { height: 24px; }
.about-scene__badge {
  width: 50%;
  height: 24px;
  border-radius: 12px;
  background: #ebf1f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9231cqw;
  font-weight: 600;
  color: var(--secondary-900);
  opacity: .6;
}
.about-scene__card {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  background: var(--white-100);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(255, 255, 255, .8), 0 6px 16px rgba(19, 39, 62, .08);
}
.about-scene__card-head {
  height: 24px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1154cqw;
  font-weight: 700;
  color: var(--white-100);
  flex: none;
}
.about-scene__card-body {
  flex: 1 0 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px;
}
.about-scene__line { width: 80%; height: 5px; border-radius: 3px; background: #e5e7eb; flex: none; }
.about-scene__logo {
  position: absolute;
  left: 42.981%; top: 13.393%;
  width: 14.111%;
  padding: .975%;
  border-radius: 3.041px;
  background: var(--secondary-900);
  overflow: hidden;
}
.about-scene__slot {
  position: absolute;
  top: 63.636%;
  width: 7.692%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #ebedf0;
  opacity: .4;
}
.about-scene__slot--left  { left: 7.692%; }
.about-scene__slot--right { left: 84.615%; }

/* Mission (1:456) */
.mission__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 64px;
  padding-bottom: 64px;
  overflow: hidden;
}
.mission__title { font-size: 32px; letter-spacing: -.32px; }
.mission__body {
  width: 800px;
  max-width: 100%;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -.2px;
  text-align: center;
}

/* Why Choose Us (1:459) */
.values__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 64px;
  padding-bottom: 64px;
  overflow: hidden;
}
.values__title { font-size: 32px; line-height: 28px; letter-spacing: -.32px; }
.values__grid { display: flex; align-items: stretch; gap: 32px; width: 100%; }
.value-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 192px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.value-card__title { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.2px; }
.value-card__body  { font-size: 16px; line-height: 28px; letter-spacing: -.16px; opacity: .7; }

/* Founder (1:473) */
.founder__inner { display: flex; gap: 64px; padding-top: 64px; padding-bottom: 64px; }
.founder__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.founder__title { font-size: 32px; line-height: 28px; letter-spacing: -.32px; }
.founder__body  { font-size: 16px; line-height: 28px; letter-spacing: -.16px; }

/* ==========================================================================
   PRODUCTS (1:579)
   ========================================================================== */
.product-hero { background: var(--surface); }
.product-hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.product-hero__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.product-hero__title { font-size: 48px; line-height: 56px; letter-spacing: -.48px; }
.product-hero__body  { font-size: 16px; line-height: 26px; }
.product-hero__cta   { padding-top: 12px; }

/* Hero Visual + floating device (1:604 / 1:605)

   assets/img/iphone-frame.* and the --mask-device silhouette are two renders
   of the same 1:1 camera, so the mask lines up with the glass exactly when
   both fill .device edge to edge. Everything below is anchored to that: the
   mask decides what is screen, which is what keeps the artwork from spilling
   over the bezel.

   .device is mirrored so the phone shows its right-hand rail. The mirror
   applies to the mask too — that is deliberate, it keeps mask and frame in
   step — so the screen artwork is pre-flipped and the shadow's x offset is
   written negated, both landing the right way round after the mirror. */
.device-scene {
  width: 520px;
  aspect-ratio: 520 / 440;
  background: var(--tint-35);
  border-radius: 12px;
}
.device {
  position: absolute;
  left: 13.854%; top: 4.302%;
  width: 75.605%;
  aspect-ratio: 1;
  transform: scaleX(-1);
  filter: drop-shadow(-2.7cqw 3.5cqw 5.8cqw rgba(19, 39, 62, .28));
}
.device__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.device__screen {
  position: absolute;
  inset: 0;
  /* Brand navy under the artwork: a screen image that does not quite reach an
     edge falls back to it rather than exposing the bezel underneath. */
  background: var(--secondary-900);
  -webkit-mask-image: var(--mask-device);
          mask-image: var(--mask-device);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* The frame is a perspective render, so the artwork is projected to match
   rather than pasted on flat. The box is the screen plane at true size,
   centred on the glass; perspective() + rotateY() then foreshorten it onto
   the same trapezoid the mask cuts — measured off that mask, whose far (right)
   edge renders 344/359 the height of the near one. scaleX(-1) pre-flips the
   artwork so it reads correctly once .device mirrors it. cqw keeps the
   vanishing point in step as the scene scales. */
.device__screen img {
  position: absolute;
  left: 30.243%; top: 5.898%;
  width: 40.515%; height: 87.825%;
  max-width: none;
  object-fit: cover;
  transform: perspective(384cqw) rotateY(32.3deg) scaleX(-1);
}

/* Product Spotlight (1:681) */
.meet__inner {
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding-top: 64px;
  padding-bottom: 80px;
  overflow: hidden;
}
.meet__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 0 80px;
}
.meet__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 540px; max-width: 100%; }
.meet__title { font-size: 40px; line-height: 48px; text-align: center; }
.meet__body  { font-size: 16px; line-height: 26px; color: var(--muted); text-align: center; }

/* Keyring feature panel (1:694) — 652.847 x 326.071 */
.features {
  width: 652.847px;
  aspect-ratio: 652.847 / 326.071;
  border-radius: 10.564px;
  background: var(--secondary-900);
  overflow: hidden;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}
.features__glow {
  position: absolute;
  right: -21.512%; top: -21.931%;
  width: 79.462%; height: 184.505%;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: exclusion;
  pointer-events: none;
}
.features__glow img {
  width: 77.804cqw; height: 50.949cqw;
  max-width: none;
  transform: rotate(115.48deg);
  object-fit: cover;
  object-position: bottom;
  opacity: .6;
}
.features__noise {
  position: absolute;
  left: 0; right: 20%; top: 47.083%;
  height: 94.168%;
  transform: translateY(-50%);
  background-image: url(../assets/img/noise.png);
  background-size: 101.134cqw 101.134cqw;
  background-position: top left;
  opacity: .06;
  pointer-events: none;
}
.features__head {
  position: absolute;
  left: 15.480%; top: 10.691%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .647cqw;
}
.features__tag {
  padding: .701cqw .863cqw;
  font-size: 1.2945cqw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.169px;
  color: var(--primary-500);
}
.features__title {
  width: 69.040cqw;
  font-size: 2.5889cqw;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.5071px;
  text-align: center;
  color: var(--white-100);
}
.features__grid {
  position: absolute;
  left: 11.008%; top: 36.192%;
  display: grid;
  grid-template-columns: repeat(3, 24.811cqw);
  gap: 1.726cqw;
}
.feature {
  /* content box 122.071px wide inside a 161.979px card (Figma 1:706 / 1:707) */
  height: 12.406cqw;
  padding: 2.040cqw 4.386cqw 2.040cqw 1.726cqw;
  border-radius: 10.564px;
  background: var(--white-100);
  display: flex;
  flex-direction: column;
  gap: 1.294cqw;
}
.feature img { width: 4.077cqw; height: 4.077cqw; }
.feature p {
  font-size: 1.4023cqw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.2747px;
  color: #010205;
}

/* What We Do (1:766) */
.capabilities__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.capabilities__title { font-size: 32px; line-height: 38px; }
.capabilities__grid { display: flex; align-items: stretch; gap: 24px; width: 100%; }
.capability {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.capability__meta { display: flex; align-items: center; justify-content: space-between; }
.capability__num  { font-size: 14px; font-weight: 700; color: var(--accent); }
.capability__rule { width: 32px; height: 1px; background: var(--border); }
.capability__title { font-size: 20px; }
.capability__body  { font-size: 15px; line-height: 24px; color: var(--muted); }

/* Built by ACB (1:793) */
.built { background: var(--surface); }
.built__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 80px;
  padding-bottom: 120px;
  text-align: center;
}
.built__title { font-size: 28px; }
.built__body  { width: 650px; max-width: 100%; font-size: 16px; }

/* ==========================================================================
   CONTACT (1:799)
   ========================================================================== */
.contact-hero { background: var(--surface); }
.contact-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 100px;
  padding-bottom: 100px;
}
.contact-hero__title { font-size: 56px; line-height: 64px; }
.contact-hero__lede  { width: 680px; max-width: 100%; font-size: 18px; line-height: 30px; color: var(--muted); }

.contact__inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding-top: 100px;
  padding-bottom: 100px;
}
.contact__info {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.contact__title { font-size: 28px; }
.contact__items { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.contact-item { display: flex; align-items: center; gap: 16px; }
.contact-item__icon {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-item__icon img { width: 16px; height: 16px; }
.contact-item__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.contact-item__value { font-size: 16px; font-weight: 500; margin-top: 4px; }
.contact-item__value a { color: var(--accent); font-weight: 600; text-decoration: none; }
.contact-item__value a:hover { text-decoration: underline; }

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 580px;
  max-width: 100%;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.contact-form__title { font-size: 22px; width: 100%; }
.contact-form__fields { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.field input,
.field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white-100);
  color: var(--secondary-900);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}
.field input { height: 44px; }
.field textarea { height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: .6; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Success state (1:918) */
.form-success {
  width: 100%;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white-100);
  font-size: 14px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .spotlight__copy { width: auto; flex: 1 1 0; min-width: 0; }
  .why__title, .why__lede { width: auto; flex: 1 1 0; min-width: 0; }
  .spotlight__aside { width: 360px; flex: none; }
}

@media (max-width: 1024px) {
  :root { --gutter: 40px; }
  .hero__inner,
  .about-hero__layout,
  .product-hero__inner,
  .contact__inner,
  .founder__inner { flex-direction: column; align-items: flex-start; }
  .about-hero__layout { padding: 24px 0; }
  .hero__title,
  .contact-hero__title { font-size: 44px; line-height: 52px; }
  .about-hero__title,
  .product-hero__title { font-size: 40px; line-height: 48px; }
  .about-hero__content,
  .contact-form { width: 100%; }
  /* Stacked, the copy leads and the decorative diagram follows it —
     side by side the diagram sits left, but above the heading it just
     pushes the page's first words off the screen. */
  .about-hero__content { order: -1; }
  .spotlight__head,
  .why__head { flex-direction: column; }
  .spotlight__aside { width: 100%; }
  .values__grid,
  .capabilities__grid { flex-wrap: wrap; }
  .value-card,
  .capability { flex: 1 1 260px; }
  .footer__cols { flex-wrap: wrap; gap: 32px; }
  .footer__about { width: 100%; }
  .meet__head { padding: 0; }
  .meet__inner { gap: 64px; }
}

@media (max-width: 700px) {
  :root { --gutter: 24px; }
  .hero__inner,
  .spotlight__inner,
  .why__inner { padding-top: 64px; padding-bottom: 64px; }
  .contact-hero__inner,
  .contact__inner { padding-top: 56px; padding-bottom: 56px; }
  .hero__title,
  .contact-hero__title { font-size: 34px; line-height: 42px; }
  .about-hero__title,
  .product-hero__title,
  .spotlight__title,
  .meet__title { font-size: 30px; line-height: 38px; }
  .why__title,
  .mission__title,
  .values__title,
  .founder__title,
  .capabilities__title { font-size: 26px; line-height: 34px; }
  .nav__logo img { width: 104px; height: 52.5px; }
  /* Scripting off: the menu stays inline and wraps under the logo. */
  .nav__inner { flex-wrap: wrap; gap: 16px; }
  .nav__links { gap: 20px; }

  /* --- Mobile drawer ----------------------------------------------------
     The header collapses to logo + toggle and the menu becomes a panel off
     the right edge. .nav already carries z-index, so the panel and its
     backdrop sit inside that stacking context and clear the page without
     numbers of their own competing with anything else. .nav is sticky, not
     transformed, so these stay fixed to the viewport. */
  .js-nav .nav__inner { flex-wrap: nowrap; gap: 16px; }
  .js-nav .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }

  .js-nav .nav__panel {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(78vw, 320px);
    /* Clears the header so the first link never sits under the toggle. */
    padding: 116px 24px 32px;
    background: var(--secondary-900);
    box-shadow: -18px 0 44px rgba(0, 0, 0, .35);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility 0s .28s;
  }
  .acb-nav-open .nav__panel {
    visibility: visible;
    transform: none;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility 0s;
  }

  .js-nav .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .js-nav .nav__link {
    display: block;
    padding: 14px 12px;
    border-radius: 8px;
    font-size: 17px;
    line-height: 24px;
  }
  .js-nav .nav__link:hover,
  .js-nav .nav__link:focus-visible { background: rgba(255, 255, 255, .07); }
  /* wp.css sets the focus ring 6px clear of an inline link; against a
     full-width row it wants to hug the tap target instead. Current-page
     and hover colours are left to wp.css, which already owns them. */
  .js-nav .nav__link:focus-visible { outline-offset: -2px; }

  .js-nav .nav__scrim {
    display: block;
    position: fixed;
    z-index: 1;
    inset: 0;
    background: rgba(6, 15, 26, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s .28s;
  }
  .acb-nav-open .nav__scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility 0s;
  }

  /* Hold the page still behind the drawer. Applied to the root rather than
     the body so the scroll position survives and .nav keeps sticking. */
  .acb-nav-open { overflow: hidden; }
  .why-card, .capability { padding: 24px; }
  .contact-form { padding: 24px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn--block { width: 100%; }

  /* --- Legibility of the fixed-ratio scenes ------------------------------
     These blocks are Figma scenes: a locked aspect ratio with every child in
     percentages and every type size in cqw, so the whole thing scales as one
     unit. That is what keeps them faithful on a wide screen, and exactly what
     breaks them on a phone — at ~342px the feature labels land near 4px. The
     rules below take the scenes off that scale where real words are involved. */

  /* About diagram: decorative, so the geometry is left alone and only the
     labels come off cqw — enough to read, nothing moves. */
  .about-scene__block     { font-size: 10px; }
  .about-scene__badge     { font-size: 11px; }
  .about-scene__card-head { font-size: 11px; }

  /* Device showcase. The strip is one wide composition — three devices
     overlapping — and there is no size at which it both fits a phone and stays
     readable, so on small screens it hands over to the deck below and the two
     are swapped by the class js/deck.js sets. Without scripting the strip stays
     and keeps its own horizontal scroll, so the screens are reachable either
     way. */
  .js-deck .showcase-rail { display: none; }
  .js-deck .deck { display: block; }

  .showcase-rail {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  .showcase { width: 720px; max-width: none; flex: none; }

  /* --- Deck --------------------------------------------------------------
     A coverflow: the active device square to the viewer, its neighbours turned
     back into the scene. Cards are wider than the stage because the phone art
     only fills 45% of its square canvas — the stage clips the empty rest, and
     what shows of a neighbour is the device itself. */
  /* Capped like any other device mockup: the card is a share of the stage,
     so an uncapped stage would put a 700px handset on a small tablet. */
  .deck {
    /* width is spelled out because the auto margins below opt this out of
       the flex column's stretch, and the stage has only absolutely
       positioned children to size itself from otherwise. */
    width: 100%;
    max-width: 380px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }
  .deck__stage {
    position: relative;
    /* Height tracks the card so the margin above and below the device stays
       the same at every width. */
    aspect-ratio: 1 / 1.28;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
  }
  .deck--dragging .deck__stage { cursor: grabbing; }
  .deck__track {
    position: absolute;
    inset: 0;
    /* --drag is the live nudge while a finger is down; it settles back to 0. */
    transform: translateX(calc(var(--drag, 0) * 26%));
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  }
  .deck--dragging .deck__track { transition: none; }

  /* Centred by its own box rather than by translate(-50%). A card 118% of
     the stage lands on a fractional pixel when a percentage translate centres
     it — -201.773px at a 390px viewport — and a fractional offset inside a 3D
     context is resampled by the compositor. That is the softness that arrives
     the moment a card settles: in motion it is promoted and redrawn every
     frame, so it looks sharp, then blurs once it comes to rest. Laid out this
     way the active card needs no transform at all. */
  .deck__card {
    position: absolute;
    left: -9%;
    right: -9%;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1),
                opacity .45s ease,
                filter .45s ease;
  }
  .deck--dragging .deck__card { transition: none; }
  /* Held on permanently, and that is deliberate. A promoted card is drawn
     into its own layer at device resolution; an unpromoted one is painted
     into whatever surface the stage's clip and the shadow's filter produce,
     and comes back softer. That is why the screens look right under a finger
     and settle blurry — dragging promotes them and letting go drops it again.
     Pinning the promotion would be a mistake if the cards changed size, since
     the layer would keep the scale it was last drawn at; none of them scale,
     so there is nothing to go stale and the sharp rendering simply stays. */
  .deck__card { will-change: transform; }

  .deck__card.is-active {
    z-index: 3;
    opacity: 1;
    /* No transform, no 3D context, no resampling. */
    transform: none;
  }
  .deck__card.is-prev,
  .deck__card.is-next {
    z-index: 2;
    opacity: .72;
    filter: saturate(.85);
    cursor: pointer;
  }
  /* Offsets are a share of the card, not the stage, so the neighbours keep
     the same slice on screen at every width. ~48% puts about 60px of each
     device past the edge of the stage. */
  .deck__card.is-prev {
    transform: translateX(-48.3%) perspective(1100px) rotateY(34deg);
  }
  .deck__card.is-next {
    transform: translateX(48.3%) perspective(1100px) rotateY(-34deg);
  }
  /* Parked off-scene, on the side it belongs to. */
  .deck__card.is-far {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(var(--side, 1) * 132%)) perspective(1100px) rotateY(calc(var(--side, 1) * -46deg));
  }

  /* Same square-canvas device as the strip's centre phone: the body art and
     the --mask-phone silhouette are one render, so they line up when both fill
     the box edge to edge. */
  .deck__device {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
  }
  /* The shadow hangs off the body artwork, never off a wrapper holding the
     screen — the same place the wide strip puts it. A filter rasterises its
     whole subtree into one surface, so shadowing the wrapper would put the
     screenshot inside that surface and hand its resolution to the compositor.
     That is the softness that appears at rest and lifts while a card is being
     swiped: dragging relayers the card and it gets redrawn. Cast from the body
     alone, the screenshot is painted directly and stays crisp either way. */
  .deck__body {
    position: absolute;
    left: 0; top: 1.213%;
    width: 100%; height: 98.787%;
    object-fit: cover;
    filter: drop-shadow(-6px 10px 22px rgba(19, 39, 62, .28));
  }
  .deck__screen {
    position: absolute;
    left: .077%; top: 0;
    width: 99.923%; height: 100%;
    overflow: hidden;
    -webkit-mask-image: var(--mask-phone);
            mask-image: var(--mask-phone);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
  /* Mapped straight onto the glass. The strip inherits Figma values that
     blow the screen up about 1.48x and anchor it top-left, which crops ~16%
     off each side — fine where the device is small, but at this size it cuts
     visibly into the UI, and showcase-right is an edge-to-edge mockup with no
     side padding to give up at all. These are the mask's own bounds, so each
     screen sits in the glass whole.

     cover only has work to do for the long settings capture, which is far
     taller than a screen and is taken from the top; the other two already
     match the glass to within about 1%. */
  .deck__screen img {
    position: absolute;
    left: 29.286%; top: 5.489%;
    width: 40.952%; height: 89.021%;
    max-width: none;
    object-fit: cover;
    object-position: top center;
  }
  /* The centre phone gets the design's own framing — the same numbers the
     wide strip uses. Its mockup carries about 13% page padding each side and
     a third of a screen below the fold; cropping both is what seats the UI
     edge to edge in the glass. The other two slots are single screens with
     no padding to give up, so they fill the glass instead. */
  .deck__card--device .deck__screen img {
    left: 19.760%; top: 5.389%;
    width: 60.629%; height: 130.838%;
  }
  /* The settings capture is a whole page rather than a screen, and its UI is
     drawn smaller against its own width — filling the glass with it leaves the
     rows noticeably finer than the neighbouring screens. It carries 7.38% of
     page padding down each side; taking exactly that off and no more brings it
     to the same scale as the others (0.421 against 0.417) without touching a
     pixel of content. Width 40.952 x 1.173 = 48.04, re-centred on the glass. */
  .deck__card--page .deck__screen img {
    left: 25.74%;
    width: 48.04%;
  }

  .deck__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 18px;
  }
  .deck__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--secondary-900);
    opacity: .22;
    cursor: pointer;
    transition: opacity .3s ease, background-color .3s ease, width .3s ease;
  }
  .deck__dot.is-on {
    width: 22px;
    border-radius: 4px;
    background: var(--primary-500);
    opacity: 1;
  }
  .deck__dot:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 3px;
  }
}

/* The Keyring feature panel is a 652.847px scene, so it starts being squeezed
   as soon as its column is narrower than that plus the gutters (652.847 + 2 x
   40 = 733px) — and squeezing it shrinks cqw type that is real product copy.
   Below that it stops being a scene and lays out as an ordinary card, which is
   why this sits above the phone breakpoint rather than inside it. */
@media (max-width: 760px) {
  /* Keyring feature panel: real product copy, so it stops being a scaled
     scene here and lays out as an ordinary card with px type. Every cqw
     value above is restated; the container itself stays a query container so
     the decorative glow and noise keep tracking the panel's width. */
  .features {
    width: 100%;
    aspect-ratio: auto;
    padding: 28px 20px 32px;
  }
  .features__head {
    position: static;
    gap: 6px;
    margin-bottom: 22px;
  }
  .features__tag {
    padding: 0;
    font-size: 12px;
    letter-spacing: .4px;
  }
  .features__title {
    width: auto;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -.2px;
  }
  .features__grid {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .feature {
    height: auto;
    padding: 14px 12px;
    gap: 8px;
    border-radius: 12px;
  }
  .feature img { width: 22px; height: 22px; }
  .feature p { font-size: 13px; line-height: 1.35; }
  .features__noise { right: 0; }
}