/* ==========================================================================
   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; }

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

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) ------------------- */
.nav { 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; }

/* --- 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;
}

/* 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: 10px; font-weight: 500; line-height: 20px; letter-spacing: -.1px; 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) */
.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;
  overflow: hidden;
  transform: scaleX(-1);
  filter: drop-shadow(13px 6px 14.6px rgba(0, 0, 0, .25));
}
.device__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.device__screen {
  position: absolute;
  left: 26.799%; top: 2.381%;
  width: 46.459%; height: 122.983%;
  transform: scaleX(-1);
  -webkit-mask-image: var(--mask-device);
          mask-image: var(--mask-device);
  -webkit-mask-size: 215.244% 81.313%;
          mask-size: 215.244% 81.313%;
  -webkit-mask-position: 49.946% -10.360%;
          mask-position: 49.946% -10.360%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.device__screen img { width: 100%; height: 100%; max-width: none; }

/* 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%; }
  .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__inner { flex-wrap: wrap; gap: 16px; }
  .nav__links { gap: 20px; }
  .nav__logo img { width: 104px; height: 52.5px; }
  .why-card, .capability { padding: 24px; }
  .contact-form { padding: 24px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn--block { width: 100%; }
}