/* Self-hosted, unmodified SIL Open Font License fonts. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}
:root {
  --bg: #080d16;
  --surface: #111b29;
  --line: #273c51;
  --text: #f3f7fb;
  --muted: #a4b6c9;
  --cyan: #52dbff;
  --mint: #64f3b8;
  --rose: #ed4e71;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    15px/1.65 "DM Sans",
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}
.wrap {
  max-width: 1320px;
  margin: auto;
  padding: 0 36px;
}
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #080d16f2;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #ffffff1c;
}
.headerinner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 88px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.mark {
  font:
    900 21px "Outfit",
    sans-serif;
  background: linear-gradient(130deg, #fa6882, #d52e5a);
  padding: 10px 12px;
  border-radius: 10px;
  letter-spacing: -1px;
}
.brandwords strong {
  display: block;
  font:
    800 19px "Outfit",
    sans-serif;
  letter-spacing: 0.4px;
}
.brandwords small {
  display: block;
  font-size: 9px;
  letter-spacing: 2.1px;
  color: #a6b8c9;
  font-weight: 700;
}
.links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.links a {
  font-size: 12px;
  color: #a9bed2;
  font-weight: 700;
  white-space: nowrap;
}
.links a:hover,
.links a[aria-current="page"] {
  color: white;
}
.headercta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 13px 19px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15px;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.headercta,
.button.primary {
  background: linear-gradient(120deg, #f55b7a, #d9345e);
  color: white;
}
.button.outline {
  border: 1px solid #45627b;
  color: white;
}
.button:hover,
.headercta:hover {
  transform: translateY(-2px);
}
.menu {
  display: none;
  background: transparent;
  color: white;
  border: 1px solid #3a5267;
  border-radius: 8px;
  padding: 8px 12px;
}
.eyebrow {
  color: var(--cyan);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 11px;
}
.hero {
  padding: 96px 0 70px;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  align-items: center;
  gap: 50px;
}
.hero h1,
.pagehero h1 {
  font:
    800 clamp(45px, 5.5vw, 82px)/1.04 "Outfit",
    sans-serif;
  letter-spacing: -2.8px;
  margin: 17px 0 23px;
}
.hero h1 em,
.pagehero h1 em {
  color: var(--cyan);
  font-style: normal;
}
.lead {
  font-size: 18px;
  color: #b6c8d8;
  max-width: 610px;
  line-height: 1.8;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.heroimg {
  position: relative;
  min-height: 460px;
  border: 1px solid #365269;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #17354b, #091522);
}
.heroimg img,
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.heroimg:after,
.photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #08121c9e, transparent 60%);
  pointer-events: none;
}
.photolabel {
  position: absolute;
  z-index: 2;
  bottom: 25px;
  left: 25px;
  color: white;
  font:
    700 12px "Outfit",
    sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.section {
  padding: 82px 0;
  border-top: 1px solid #ffffff12;
}
.section h2 {
  font:
    800 clamp(32px, 3.7vw, 54px)/1.1 "Outfit",
    sans-serif;
  letter-spacing: -1.5px;
  margin: 15px 0 20px;
}
.sectionintro {
  max-width: 770px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
  margin-top: 36px;
}
.card {
  border: 1px solid #2a4258;
  background: linear-gradient(145deg, #142437, #101b29);
  border-radius: 16px;
  overflow: hidden;
}
.card .photo {
  height: 215px;
  position: relative;
  background: #173145;
}
.cardbody {
  padding: 26px;
}
.card h3 {
  font:
    800 23px "Outfit",
    sans-serif;
  margin: 0 0 11px;
}
.card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  min-height: 73px;
}
.textlink {
  color: var(--cyan);
  font-weight: 800;
  font-size: 12px;
}
.textlink:hover {
  text-decoration: underline;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: center;
}
.quote {
  border-left: 4px solid var(--rose);
  padding: 16px 0 16px 28px;
  font:
    700 clamp(26px, 3vw, 42px)/1.22 "Outfit",
    sans-serif;
  letter-spacing: -0.7px;
}
.photo {
  position: relative;
  border-radius: 17px;
  overflow: hidden;
  min-height: 360px;
  border: 1px solid #365269;
}
.pagehero {
  padding: 86px 0 58px;
  max-width: 940px;
}
.pagehero p {
  max-width: 780px;
}
.details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 35px;
}
.detail {
  padding: 30px;
  border: 1px solid #2a4157;
  border-radius: 15px;
  background: #101d2c;
}
.detail .num {
  color: var(--rose);
  font:
    800 14px "Outfit",
    sans-serif;
}
.detail h3 {
  font:
    800 24px "Outfit",
    sans-serif;
  margin: 10px 0;
}
.detail p {
  color: var(--muted);
  font-size: 14px;
}
.darkband {
  padding: 55px;
  border: 1px solid #35556a;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 90% 5%, #1c53645e, transparent 60%), #101e2e;
}
.darkband h2 {
  font:
    800 clamp(32px, 4vw, 52px)/1.13 "Outfit",
    sans-serif;
  max-width: 780px;
  margin: 12px 0;
}
.darkband p {
  color: var(--muted);
  max-width: 760px;
}
.productmock {
  border: 1px solid #3a5970;
  background: #0b1522;
  border-radius: 18px;
  padding: 17px;
  box-shadow: 0 35px 70px #0006;
}
.mockhead {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #2c4358;
  padding: 5px 5px 17px;
  align-items: center;
}
.mockhead strong {
  font:
    800 20px "Outfit",
    sans-serif;
}
.mocktag {
  font-size: 10px;
  color: var(--mint);
  background: #15352e;
  padding: 7px 10px;
  border-radius: 7px;
}
.mockstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 15px 0;
}
.mockstat {
  background: #172a3b;
  padding: 13px;
  border: 1px solid #2b4558;
  border-radius: 10px;
}
.mockstat small {
  display: block;
  color: #9bb3c6;
  font-size: 9px;
  letter-spacing: 0.5px;
}
.mockstat b {
  font:
    800 27px "Outfit",
    sans-serif;
}
.mockrow {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 9px;
  border-bottom: 1px solid #2b3e50;
  font-size: 12px;
}
.mockrow small {
  color: #96b0c5;
}
.status {
  font-size: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #184759;
  color: #65dcfa;
  white-space: nowrap;
}
.status.ready {
  background: #164839;
  color: #7de6b2;
}
.status.wait {
  background: #4d3521;
  color: #ffc48a;
}
.fine {
  font-size: 11px;
  color: #829aaf;
  margin-top: 15px;
}
.foot {
  border-top: 1px solid #263a4e;
  padding: 36px 0 45px;
  margin-top: 55px;
  color: #96aabe;
  font-size: 12px;
}
.footinner {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.footlinks {
  display: flex;
  gap: 19px;
  flex-wrap: wrap;
}
.contactgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
}
.form {
  background: #111f30;
  border: 1px solid #30495e;
  border-radius: 16px;
  padding: 32px;
}
.form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin: 17px 0 7px;
}
.form input,
.form textarea,
.form select {
  width: 100%;
  background: #0a1624;
  color: white;
  border: 1px solid #3d5569;
  border-radius: 9px;
  padding: 13px;
  font: inherit;
}
.form textarea {
  min-height: 135px;
}
.form button {
  border: 0;
  cursor: pointer;
  margin-top: 20px;
}
.note {
  font-size: 12px;
  color: #9cb1c4;
}
.listlines {
  display: grid;
  gap: 17px;
  margin-top: 28px;
}
.listlines div {
  padding-bottom: 15px;
  border-bottom: 1px solid #2a3e50;
  color: #c2d0de;
}
.listlines strong {
  color: white;
}
.tag {
  display: inline-block;
  border: 1px solid #42657a;
  color: #9bcde0;
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 800;
  margin: 0 7px 10px 0;
}
.mini {
  font-size: 12px;
  color: #9ab0c5;
}
.hidden {
  display: none !important;
}
@media (max-width: 1200px) {
  .links {
    gap: 11px;
  }
  .links a {
    font-size: 11px;
  }
  .hero {
    gap: 25px;
  }
}
@media (max-width: 900px) {
  .menu {
    display: block;
    margin-left: auto;
  }
  .links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 87px;
    background: #0d1826;
    border-bottom: 1px solid #35516a;
    padding: 20px 30px;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
  }
  .links.open {
    display: flex;
  }
  .headercta {
    display: none;
  }
  .hero,
  .split,
  .contactgrid {
    grid-template-columns: 1fr;
  }
  .heroimg {
    min-height: 360px;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .wrap {
    padding: 0 20px;
  }
  .headerinner {
    min-height: 76px;
  }
  .links {
    top: 75px;
  }
  .hero {
    padding: 65px 0 45px;
  }
  .hero h1,
  .pagehero h1 {
    font-size: 45px;
    letter-spacing: -1.5px;
  }
  .pagehero {
    padding: 60px 0 35px;
  }
  .section {
    padding: 57px 0;
  }
  .cards,
  .details {
    grid-template-columns: 1fr;
  }
  .heroimg {
    min-height: 270px;
  }
  .darkband {
    padding: 28px;
  }
  .photo {
    min-height: 250px;
  }
  .brandwords strong {
    font-size: 16px;
  }
  .brandwords small {
    letter-spacing: 1.2px;
  }
  .mark {
    font-size: 18px;
  }
}
/* Product gallery — actual prototype captures */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 34px 0;
}
.gallery-card {
  background: #101d2c;
  border: 1px solid #314b61;
  border-radius: 17px;
  overflow: hidden;
}
.gallery-image {
  height: 290px;
  position: relative;
  background: #09121e;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.25s;
}
.gallery-card:hover .gallery-image img {
  transform: scale(1.025);
}
.zoom-label {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #09131fe8;
  border: 1px solid #4c7187;
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.6px;
  font-weight: 800;
}
.gallery-copy {
  padding: 21px 24px 25px;
}
.gallery-stage {
  color: #70e5d0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 800;
}
.gallery-copy h3 {
  font:
    800 23px "Outfit",
    sans-serif;
  margin: 8px 0;
}
.gallery-copy p {
  color: #a4b6c9;
  font-size: 13px;
  margin: 0;
}
.heroimg img {
  object-fit: contain;
  background: #0b1623;
}
.card .photo img[src^="assets/product/"] {
  object-fit: cover;
  object-position: top;
}
.gallery-image:has(img[src*="customer-mobile"]) img {
  object-fit: contain;
}
@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-image {
    height: 255px;
  }
}

/* Founder profile — editorial treatment */
.founder-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.founder-portrait {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #142336;
  border: 1px solid #31465d;
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: clamp(400px, 49vw, 630px);
  object-fit: cover;
  object-position: center 22%;
}
.founder-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 35px 22px 20px;
  background: linear-gradient(transparent, #08111cdd);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}
.founder-story h2 {
  font-size: clamp(34px, 4vw, 57px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  margin: 16px 0;
}
.founder-story h2 em {
  font-style: normal;
  color: #52dbff;
}
.founder-story p {
  font-size: 15px;
  line-height: 1.85;
  color: #adc2d4;
  margin: 15px 0;
}
.founder-story .founder-role {
  color: #fff;
  font-weight: 700;
}
.founder-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid #33465a;
  margin-top: 26px;
  padding-top: 23px;
}
.founder-proof div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.founder-proof strong {
  font-size: 24px;
  color: #fff;
}
.founder-proof span {
  font-size: 11px;
  line-height: 1.5;
  color: #9fb5c9;
}
@media (max-width: 760px) {
  .founder-layout {
    grid-template-columns: 1fr;
  }
  .founder-portrait img {
    height: 460px;
  }
  .founder-proof {
    gap: 8px;
  }
}

/* A.D.D. Visual Edition: distinct, self-hosted architectural illustrations */
.heroimg img {
  object-fit: cover;
  background: #10263a;
}
.photo img,
.card .photo img[src*="/visuals/"] {
  object-fit: cover;
  object-position: center;
}
.card .photo {
  height: 235px;
}
.card .photo img {
  transition: transform 0.35s ease;
}
.card:hover .photo img {
  transform: scale(1.04);
}
.card {
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.card:hover {
  border-color: #5e91a7;
  transform: translateY(-3px);
}
.heroimg {
  box-shadow: 0 32px 95px #0007;
}
.gallery-card {
  transition: border-color 0.2s;
}
.gallery-card:hover {
  border-color: #65b3c9;
}
.experience-card {
  border: 1px solid #3a6178;
  border-radius: 22px;
  min-height: 420px;
  padding: 42px;
  background:
    radial-gradient(ellipse at 85% 15%, #25576a80, transparent 50%),
    linear-gradient(145deg, #152a3d, #0b1726);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 35px 70px #0005;
}
.experience-kicker {
  font-size: 11px;
  color: #67e6d0;
  font-weight: 800;
  letter-spacing: 2px;
}
.experience-num {
  font:
    800 68px Outfit,
    sans-serif;
  color: #fff;
  margin-top: 22px;
}
.experience-num span {
  font-size: 23px;
  color: #6d9eb1;
}
.experience-card h3 {
  font:
    800 clamp(26px, 3vw, 42px)/1.12 Outfit,
    sans-serif;
  letter-spacing: -1px;
  margin: 6px 0 18px;
}
.experience-card p {
  color: #b5c9d7;
  font-size: 15px;
  max-width: 450px;
}
.experience-line {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: #7bd5e8;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 800;
  margin-top: 22px;
}
.experience-foot {
  border-top: 1px solid #3b576c;
  margin-top: 27px;
  padding-top: 18px;
  color: #93adbf;
  font-size: 10px;
  letter-spacing: 1px;
}
.gallery-grid {
  gap: 20px;
}
.gallery-image {
  height: 270px;
}
@media (max-width: 620px) {
  .experience-card {
    padding: 28px;
    min-height: 360px;
  }
  .gallery-image {
    height: 230px;
  }
}

/* A.D.D. premium visual system */
.card .photo {
  height: 255px;
  overflow: hidden;
  background: #091524;
  border-bottom: 1px solid #29485e;
}
.card .photo img,
.card .photo img[src*="/premium/"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card .photo:after {
  display: none;
}
.card .photolabel {
  display: none;
}
.card .cardbody {
  padding: 24px 26px 28px;
}
.card h3 {
  font-size: 22px;
  line-height: 1.15;
  min-height: 28px;
}
.card {
  box-shadow: 0 14px 40px #0002;
}
.photo:has(img[src*="/premium/"]) {
  background: #0b1727;
}
.photo img[src*="/premium/"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.photo:has(img[src*="/premium/"]) .photolabel {
  bottom: 18px;
  left: 18px;
  padding: 8px 12px;
  border-radius: 7px;
  background: #071524c9;
  font-size: 10px;
  letter-spacing: 1px;
}
.heroimg img[src*="/premium/"] {
  object-fit: cover;
}
@media (max-width: 1050px) {
  .links {
    gap: 9px;
  }
  .links a {
    font-size: 10px;
  }
  .headerinner {
    gap: 13px;
  }
}
@media (max-width: 900px) {
  .links a {
    font-size: 13px;
  }
}

.demo-brand-banner {
  background: #0c2538;
  border-bottom: 1px solid #225773;
  color: #e8f9ff;
}
.demo-brand-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 12px;
  letter-spacing: 0.07em;
}
.demo-brand-inner strong {
  color: #64dfff;
  margin-left: 8px;
}
.demo-brand-inner a {
  color: #64dfff;
  font-weight: 700;
  text-decoration: none;
}
.demo-feature-card {
  margin: 36px 0 60px;
  padding: 32px;
  border: 1px solid #2b6077;
  background: linear-gradient(130deg, #102b3e, #0a1422);
  border-radius: 18px;
}
.demo-feature-card h2 {
  font-size: clamp(21px, 3vw, 35px);
  margin: 12px 0;
}
.demo-feature-card p {
  color: #a9c2d6;
  max-width: 690px;
}
.demo-feature-card .button {
  margin-top: 10px;
}
@media (max-width: 680px) {
  .demo-brand-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* A.D.D. unified navigation and demo-first edition */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(8, 13, 22, 0.96);
  backdrop-filter: blur(16px);
}
.header .links a[aria-current="page"] {
  color: #52dbff !important;
  border-bottom: 2px solid #52dbff;
}
.add-demo-feature {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 36px;
  align-items: center;
  margin: 28px auto 48px;
  padding: 36px;
  border: 1px solid #24425b;
  border-radius: 22px;
  background: linear-gradient(120deg, #102339, #091521);
}
.add-demo-feature h2,
.add-teaser h2,
.add-packages h2 {
  font-size: clamp(28px, 3vw, 45px);
  line-height: 1.14;
  letter-spacing: -0.04em;
  margin: 14px 0;
}
.add-demo-feature h2 em {
  color: #52dbff;
  font-style: normal;
}
.add-demo-feature p,
.add-teaser p,
.add-packages p {
  color: #b6c7d9;
  line-height: 1.65;
}
.add-demo-feature small {
  display: block;
  color: #7e96aa;
  margin-top: 18px;
}
.add-demo-visual {
  position: relative;
}
.add-demo-visual img,
.add-teaser img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #34506a;
  border-radius: 12px;
  box-shadow: 0 18px 60px #0008;
}
.add-demo-tag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 10px 14px;
  background: #0a1a2deb;
  border: 1px solid #52dbff66;
  border-radius: 8px;
  color: #e5faff;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 800;
}
.add-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  align-items: center;
  margin: 30px auto;
  padding: 30px;
  border-radius: 20px;
  background: #102136;
  border: 1px solid #2b4860;
}
.add-packages {
  margin: 70px auto;
  padding: 36px 0;
}
.add-package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.add-package-grid article {
  border: 1px solid #2c4862;
  border-radius: 14px;
  padding: 24px;
  background: #101f30;
  display: flex;
  flex-direction: column;
}
.add-package-grid article span {
  color: #55d6f6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.add-package-grid article h3 {
  margin: 15px 0 8px;
  font-size: 21px;
}
.add-package-grid article p {
  font-size: 14px;
  flex: 1;
}
.add-package-grid article a {
  color: #62dfff;
  font-weight: 800;
  text-decoration: none;
  margin-top: 15px;
}
.add-disclaimer {
  font-size: 12px;
  color: #94aabe !important;
}
.si {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
}
.si .btn {
  margin-right: 12px;
}
.footergrid {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footergrid a {
  color: #b7cde0;
}
.footergrid p {
  color: #96aabe;
}
.wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 950px) {
  .add-package-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .add-demo-feature,
  .add-teaser {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .add-package-grid {
    grid-template-columns: 1fr;
  }
  .add-demo-feature,
  .add-teaser {
    padding: 18px;
  }
  .headerinner {
    gap: 10px;
  }
  .headercta {
    font-size: 12px;
  }
}

/* V2.1: keep the primary navigation CTA compact and on one line */
.header .headercta {
  white-space: nowrap;
  flex-shrink: 0;
  min-width: max-content;
  padding: 12px 17px;
  line-height: 1.15;
  text-align: center;
  border-radius: 10px;
  box-sizing: border-box;
}
@media (min-width: 1050px) {
  .headerinner {
    gap: 16px;
  }
  .header .links {
    gap: clamp(9px, 1vw, 18px);
  }
}

/* Mobile Executive Intelligence - public marketing section */
.mobile-executive {
  margin: 70px 0 95px;
  padding: clamp(28px, 5vw, 64px);
  background: linear-gradient(130deg, #10283e 0%, #0a1728 62%, #0b2030 100%);
  border: 1px solid #2a4a60;
  border-radius: 25px;
  overflow: hidden;
}
.mobile-exec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(290px, 0.85fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
}
.mobile-exec-copy h2 {
  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  max-width: 690px;
  margin: 18px 0;
}
.mobile-exec-copy h2 em {
  color: #52dbff;
  font-style: normal;
}
.mobile-mantra {
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 800;
  color: #61f0c2;
  margin: 12px 0 24px;
}
.mobile-exec-copy .lead {
  font-size: 17px;
  line-height: 1.7;
  color: #c0d3e4;
  max-width: 630px;
}
.mobile-benefits {
  display: grid;
  gap: 17px;
  margin: 30px 0;
}
.mobile-benefits > div {
  border-left: 3px solid #52dbff;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}
.mobile-benefits strong {
  font-size: 16px;
  color: #fff;
}
.mobile-benefits span {
  font-size: 14px;
  line-height: 1.55;
  color: #a8c0d2;
}
.mobile-disclaimer {
  font-size: 12px;
  color: #9cb6c9;
  line-height: 1.6;
  max-width: 560px;
  margin-top: 22px;
}
.mobile-device-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mobile-device {
  width: min(100%, 365px);
  border: 7px solid #294357;
  border-radius: 40px;
  padding: 10px;
  background: #050e18;
  box-shadow:
    0 28px 80px #0009,
    0 0 70px #2ac7e31a;
  position: relative;
}
.mobile-notch {
  width: 100px;
  height: 16px;
  background: #050e18;
  border-radius: 0 0 16px 16px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.mobile-screen {
  background: #0c1e30;
  border-radius: 26px;
  padding: 32px 17px 20px;
  color: #fff;
}
.mobile-topline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #59ddf8;
  font-weight: 800;
}
.mobile-topline span:last-child {
  font-size: 9px;
  color: #60ebbd;
  letter-spacing: 0;
}
.mobile-screen h3 {
  font-size: 23px;
  line-height: 1.2;
  margin: 21px 0 5px;
}
.mobile-store {
  font-size: 12px;
  color: #a1b9cd;
  margin: 0 0 18px;
}
.mobile-stats-three,
.mobile-stats-two {
  display: grid;
  gap: 8px;
}
.mobile-stats-three {
  grid-template-columns: repeat(3, 1fr);
}
.mobile-stats-two {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 9px;
}
.mobile-stats-three > div,
.mobile-stats-two > div {
  background: #1b354c;
  border: 1px solid #2b4860;
  border-radius: 10px;
  padding: 13px 10px;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.mobile-screen small {
  color: #a4bdd1;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.mobile-stats-three strong {
  font-size: 27px;
}
.mobile-stats-two strong {
  font-size: 17px;
  white-space: nowrap;
}
.mobile-total {
  background: #17443f;
  border: 1px solid #2e7668;
  border-radius: 12px;
  margin-top: 9px;
  padding: 18px;
  display: grid;
  gap: 7px;
}
.mobile-total > strong {
  font-size: 35px;
  letter-spacing: -0.03em;
  color: #65efc3;
}
.mobile-total > span {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #c1d7d6;
}
.mobile-total > span b {
  color: #fff;
}
.mobile-day {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 15px 2px;
}
.mobile-day > span {
  color: #62efbd;
  font-size: 20px;
}
.mobile-day div {
  display: grid;
  gap: 3px;
}
.mobile-day b {
  font-size: 13px;
}
.mobile-day small {
  font-size: 11px;
}
.mobile-actions {
  display: flex;
  border-top: 1px solid #29455b;
  padding-top: 13px;
  justify-content: space-around;
  color: #a5c4d9;
  font-size: 12px;
}
.mobile-actions span:first-child {
  color: #54dbf7;
  font-weight: 800;
}
.device-caption {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #93b2c6;
  text-align: center;
}
@media (max-width: 850px) {
  .mobile-exec-grid {
    grid-template-columns: 1fr;
  }
  .mobile-device-wrap {
    margin-top: 10px;
  }
  .mobile-executive {
    margin: 45px 0;
    padding: 25px 18px;
  }
  .mobile-exec-copy h2 {
    font-size: 39px;
  }
}
@media (max-width: 390px) {
  .mobile-stats-two strong {
    font-size: 15px;
  }
  .mobile-total > strong {
    font-size: 30px;
  }
}

/* Fixed Operations Executive mobile concept */
.fixed-executive {
  padding-top: 90px;
  padding-bottom: 90px;
}
.fixed-head {
  max-width: 900px;
  margin-bottom: 36px;
}
.fixed-head h2 {
  max-width: 900px;
}
.fixed-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(300px, 1fr);
  gap: clamp(35px, 7vw, 105px);
  align-items: center;
}
.fixed-phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fixed-phone {
  width: min(100%, 365px);
  border: 8px solid #26364b;
  border-radius: 38px;
  padding: 23px 18px 16px;
  background: linear-gradient(160deg, #101e30, #091321);
  color: #eaf4ff;
  box-shadow:
    0 24px 70px #0007,
    0 0 0 1px #56718b;
}
.fixed-phone-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.07em;
}
.fixed-phone-top strong {
  color: #fff;
}
.fixed-phone-top strong span {
  color: #54d5f0;
}
.fixed-phone-top > span {
  font-size: 9px;
  color: #6de5c2;
}
.fixed-phone-heading {
  margin: 27px 0 18px;
}
.fixed-phone-heading > span {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #57d8ee;
}
.fixed-phone-heading h3 {
  font-size: 25px;
  line-height: 1.15;
  color: #fff;
  margin: 6px 0;
}
.fixed-phone-heading p {
  font-size: 11px;
  color: #a6bcd0;
  margin: 0;
}
.fixed-main-kpi {
  border: 1px solid #286578;
  border-radius: 15px;
  padding: 18px;
  background: #123449;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fixed-main-kpi small,
.fixed-kpi-pair small,
.fixed-ro small,
.fixed-secondary small {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #a8c1d3;
}
.fixed-main-kpi strong {
  font-size: 36px;
  line-height: 1.15;
  color: #6cf0c4;
}
.fixed-main-kpi span {
  font-size: 11px;
  color: #b3c7d7;
}
.fixed-kpi-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 11px 0;
}
.fixed-kpi-pair > div,
.fixed-secondary > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 11px;
  background: #182c41;
  border-radius: 12px;
}
.fixed-kpi-pair strong {
  font-size: 21px;
  color: #fff;
}
.fixed-ro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #182c41;
  border-radius: 12px;
  padding: 14px;
}
.fixed-ro > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fixed-ro strong {
  font-size: 32px;
  color: #fff;
}
.fixed-ro > span {
  font-size: 30px;
  color: #5ddcf3;
}
.fixed-phone-subhead {
  margin: 20px 0 10px;
  color: #a9c4d6;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.fixed-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fixed-secondary strong {
  font-size: 18px;
  color: #fff;
}
.fixed-phone-nav {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid #29465b;
  margin-top: 18px;
  padding-top: 14px;
  font-size: 11px;
  color: #a4b8c8;
}
.fixed-phone-nav b {
  color: #65def2;
}
.fixed-copy h3 {
  font-size: clamp(26px, 3vw, 43px);
  line-height: 1.1;
  margin: 12px 0 18px;
}
.fixed-copy > p {
  max-width: 540px;
}
.fixed-points {
  display: grid;
  gap: 14px;
  margin: 25px 0 30px;
}
.fixed-points > div {
  border-left: 2px solid #48d3ec;
  padding: 4px 0 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fixed-points b {
  font-size: 16px;
}
.fixed-points span {
  color: #a7b8c7;
  font-size: 14px;
  line-height: 1.6;
}
.fixed-copy .mobile-disclaimer {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.6;
}
.fixed-phone-wrap .device-caption {
  margin-top: 18px;
  text-align: center;
}
@media (max-width: 820px) {
  .fixed-executive {
    padding-top: 55px;
    padding-bottom: 55px;
  }
  .fixed-grid {
    grid-template-columns: 1fr;
  }
  .fixed-copy {
    order: -1;
  }
  .fixed-phone {
    width: min(100%, 365px);
  }
}

/* Launch polish: retain the original visual system and unify its components. */
:root {
  --body-font: "DM Sans", system-ui, sans-serif;
  --heading-font: "Outfit", system-ui, sans-serif;
}
body {
  font-family: var(--body-font);
  font-size: 16px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--heading-font);
  text-wrap: balance;
}
h1,
h2,
h3,
p,
a,
span {
  overflow-wrap: break-word;
}
h1 em,
h2 em {
  color: var(--cyan);
  font-style: normal;
}
img {
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: #52dbff33;
}
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}
#main {
  scroll-margin-top: 110px;
}
#main:focus {
  outline: none;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 500;
  padding: 12px 18px;
  border-radius: 8px;
  background: #fff;
  color: #080d16;
  font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.headerinner {
  position: relative;
  gap: 16px;
}
.header .links {
  gap: 13px;
}
.header .links a {
  font-size: 11px;
  padding: 12px 0;
}
.headercta,
.button {
  min-height: 44px;
  font-family: var(--body-font);
  font-size: 13px;
  line-height: 1.4;
}
.headercta,
.button.primary {
  background: linear-gradient(120deg, #c32b53, #aa1c43);
}
.mark {
  background: linear-gradient(130deg, #c32b53, #aa1c43);
}
.menu {
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.brand,
.headercta,
.menu {
  flex-shrink: 0;
}
.footerbrand {
  max-width: 340px;
}
.footerbrand > p {
  margin: 10px 0;
}
.foot {
  font-size: 13px;
}
.footinner {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  align-items: start;
  gap: 32px;
}
.footlinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
}
.footlinks a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footlinks a:hover,
.note a:hover {
  color: #fff;
  text-decoration: underline;
}
.footerend {
  text-align: right;
}
.footerend p {
  font-size: 12px;
}
.sales-hero {
  padding-top: 72px;
  padding-bottom: 30px;
}
.sales-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 64px;
}
.sales-features h3 {
  margin-top: 0;
}
.sales-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 30px;
}
.sales-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  border: 1px solid #314b61;
}
.sales-content .section {
  padding-top: 55px;
}
.sales-gallery .note {
  margin-top: 12px;
}
.add-teaser {
  margin-bottom: 40px;
}
.add-teaser h2 {
  font-family: var(--heading-font);
}
.add-demo-visual img {
  height: auto;
}
.card .photo {
  min-height: 0;
}
.heroimg img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.heroimg {
  aspect-ratio: 1.1;
}
.photo img {
  height: auto;
}
.card .photo img {
  height: 100%;
}
.gallery-image img {
  height: 100%;
}
.form-title {
  font-size: 28px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}
.form {
  min-width: 0;
}
.form input,
.form select,
.form textarea {
  font-size: 16px;
}
.form textarea {
  resize: vertical;
}
.form label span {
  font-weight: 400;
}
.form .consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 22px;
}
.form .consent input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 1px 0;
  accent-color: #c32b53;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.form-actions .button {
  border: 1px solid transparent;
}
.form-actions .button.outline {
  border-color: #7896ae;
}
.form button:disabled {
  cursor: wait;
  opacity: 0.75;
}
.form-status {
  min-height: 48px;
  margin-top: 20px;
}
.form-status,
#inquiry-privacy {
  color: #bdd0df;
}
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#direct-contact a {
  color: var(--cyan);
  text-decoration: underline;
}
#inquiry-text {
  min-height: 220px;
}
.mobile-device,
.fixed-phone {
  font-variant-numeric: tabular-nums;
}
.mobile-device-wrap,
.fixed-phone-wrap {
  min-width: 0;
}
.mobile-screen h3,
.fixed-phone h3 {
  text-wrap: initial;
}
.mobile-topline,
.fixed-phone-top {
  flex-wrap: wrap;
  row-gap: 6px;
}
.mobile-store,
.fixed-phone-heading p {
  color: #c3d5e5;
}
.device-caption {
  color: #b6cadb;
  line-height: 1.6;
}
.mobile-stats-three > div,
.mobile-stats-two > div {
  padding: 13px 9px;
}
.mobile-screen small,
.fixed-main-kpi small,
.fixed-kpi-pair small,
.fixed-ro small,
.fixed-secondary small {
  color: #c0d4e5;
}
.fixed-secondary > div {
  min-width: 0;
}
.fixed-phone {
  max-width: 365px;
}
.mobile-exec-grid > *,
.fixed-grid > *,
.split > *,
.contactgrid > * {
  min-width: 0;
}
@media (max-width: 1200px) {
  .headerinner {
    min-height: 80px;
  }
  .menu {
    display: block;
    order: 3;
    margin-left: 0;
  }
  .header .headercta {
    display: inline-flex;
    order: 2;
    margin-left: auto;
    padding: 10px 14px;
  }
  .header .links {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    margin: 0;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px;
    background: #0d1826;
    border: 1px solid #35516a;
    border-radius: 0 0 12px 12px;
  }
  .header .links.open {
    display: flex;
  }
  .header .links a {
    font-size: 14px;
    min-height: 46px;
    padding: 11px 4px;
  }
  .footinner {
    grid-template-columns: 1fr 1fr;
  }
  .footerend {
    grid-column: 1 / -1;
    text-align: left;
  }
}
@media (max-width: 850px) {
  .sales-features {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mobile-exec-grid {
    grid-template-columns: 1fr;
  }
  .mobile-exec-copy h2 {
    font-size: clamp(32px, 6vw, 46px);
  }
  .mobile-executive {
    padding: 28px 22px;
  }
  .mobile-benefits {
    margin: 24px 0;
  }
}
@media (max-width: 620px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .headerinner {
    gap: 10px;
    min-height: 76px;
  }
  .brandwords {
    display: none;
  }
  .header .headercta {
    font-size: 12px;
    padding: 10px 12px;
  }
  .header .links {
    left: 0;
    right: 0;
  }
  .menu {
    font-size: 13px;
    padding: 8px 10px;
  }
  .hero h1,
  .pagehero h1 {
    font-size: clamp(36px, 9.5vw, 49px);
    line-height: 1.08;
    letter-spacing: -1.5px;
  }
  .hero {
    padding-top: 44px;
  }
  .pagehero {
    padding-top: 48px;
  }
  .section h2 {
    font-size: clamp(29px, 7.5vw, 38px);
  }
  .add-demo-feature,
  .add-teaser {
    margin: 22px 0 30px;
    padding: 22px 20px;
    border-radius: 16px;
  }
  .add-demo-feature h2,
  .add-teaser h2 {
    font-size: 30px;
  }
  .add-demo-tag {
    position: static;
    margin-top: 10px;
    font-size: 10px;
    text-align: center;
  }
  .heroimg {
    min-height: 280px;
    aspect-ratio: 1.1;
  }
  .heroimg .photolabel {
    left: 18px;
    right: 18px;
    font-size: 10px;
  }
  .sales-gallery {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sales-features {
    margin-top: 25px;
    margin-bottom: 45px;
  }
  .sales-features .detail {
    padding: 24px;
  }
  .footinner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footlinks {
    gap: 2px 20px;
  }
  .footerend {
    grid-column: auto;
  }
  .form {
    padding: 24px 20px;
  }
  .contactgrid {
    gap: 28px;
  }
  .mobile-executive {
    padding: 26px 16px;
    margin: 40px 0;
  }
  .mobile-device {
    border-width: 5px;
    padding: 7px;
    border-radius: 34px;
  }
  .mobile-screen {
    padding: 29px 12px 18px;
    border-radius: 24px;
  }
  .mobile-stats-two strong {
    font-size: 18px;
  }
  .mobile-total {
    padding: 16px 12px;
  }
  .mobile-total > strong {
    font-size: 32px;
  }
  .mobile-exec-copy .lead {
    font-size: 16px;
  }
  .fixed-phone {
    padding: 23px 14px 16px;
    border-width: 6px;
    border-radius: 32px;
  }
  .fixed-head h2 {
    line-height: 1.15;
  }
  .fixed-copy h3 {
    line-height: 1.2;
  }
  .fixed-secondary {
    gap: 8px;
  }
  .fixed-secondary > div {
    padding: 12px 9px;
  }
  .fixed-phone-nav {
    font-size: 11px;
  }
  .mockhead {
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
  .mockrow {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .mockrow > small {
    grid-column: 1;
  }
  .mockrow .status {
    grid-column: 2;
    grid-row: auto;
  }
  .mockhead strong {
    font-size: 19px;
  }
  .founder-portrait img {
    height: auto;
    max-height: 520px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .button:hover,
  .headercta:hover,
  .card:hover,
  .card:hover .photo img,
  .gallery-card:hover .gallery-image img {
    transform: none;
  }
}
.icon-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  flex-shrink: 0;
  margin-left: 0.35em;
}
.fixed-ro > .icon-arrow {
  width: 24px;
  height: 24px;
  color: var(--cyan);
}
.phone-disclosure {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid #3f5b70;
  font: 700 9px/1.6 var(--body-font);
  letter-spacing: 0.07em;
  color: #c0d4e5;
  text-align: center;
}
.heroimg {
  aspect-ratio: auto;
  min-width: 0;
}
html:not(.js) .menu {
  display: none;
}
@media (max-width: 1200px) {
  html:not(.js) .headerinner {
    flex-wrap: wrap;
  }
  html:not(.js) .header .links {
    display: flex;
    position: static;
    order: 4;
    width: 100%;
    max-height: none;
  }
}

/* Final homepage refinement: existing brand, more direct hierarchy. */
.home .hero {
  padding: 56px 0 48px;
  gap: 36px;
}
.home .section {
  padding: 54px 0;
}
.home .mobile-executive {
  margin: 24px 0 30px;
  padding: 40px 44px;
}
.home .mobile-exec-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 40px;
}
.home .fixed-executive {
  padding-top: 42px;
  padding-bottom: 50px;
}
.home .fixed-head {
  margin-bottom: 28px;
}
.home .personalized-demo {
  margin: 22px 0 34px;
  padding: 34px;
}
.home .personalized-demo h2 {
  font-family: var(--heading-font);
}
.home .foot {
  margin-top: 24px;
}
.founder-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.5fr);
  gap: 42px;
  align-items: center;
}
.founder-intro-portrait {
  max-width: 290px;
  border: 1px solid #31465d;
  border-radius: 20px;
  overflow: hidden;
  background: #142336;
}
.founder-intro-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 22%;
}
.founder-intro-copy {
  min-width: 0;
}
.founder-intro-copy p {
  color: var(--muted);
  max-width: 720px;
}
.founder-intro-copy .founder-intro-name {
  color: var(--text);
  font-weight: 700;
}
.founder-intro-copy h2 {
  font-size: clamp(30px, 3.2vw, 43px);
}
#contactform {
  scroll-margin-top: 110px;
}
@media (min-width: 1000px) {
  .home .mobile-device,
  .home .fixed-phone {
    width: min(100%, 410px);
    max-width: 410px;
  }
  .home .mobile-screen {
    padding: 34px 20px 22px;
  }
  .home .mobile-screen h3,
  .home .fixed-phone-heading h3 {
    font-size: 27px;
  }
  .home .mobile-screen small,
  .home .fixed-phone small {
    font-size: 11px;
  }
  .home .mobile-stats-three strong {
    font-size: 30px;
  }
  .home .mobile-stats-two strong {
    font-size: 21px;
  }
  .home .mobile-total > strong,
  .home .fixed-main-kpi strong {
    font-size: 40px;
  }
  .home .mobile-store,
  .home .fixed-phone-heading p {
    font-size: 13px;
  }
  .home .fixed-kpi-pair strong {
    font-size: 24px;
  }
  .home .phone-disclosure {
    font-size: 10px;
  }
}
@media (max-width: 900px) {
  .home .hero {
    gap: 28px;
  }
  .founder-intro {
    gap: 28px;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }
}
@media (max-width: 850px) {
  .home .mobile-exec-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .home .mobile-executive {
    padding: 30px 24px;
  }
}
@media (max-width: 620px) {
  .home .hero {
    padding-top: 32px;
    padding-bottom: 36px;
  }
  .home .section {
    padding: 36px 0;
  }
  .home .mobile-executive {
    padding: 28px 16px;
    margin: 20px 0 24px;
  }
  .home .fixed-executive {
    padding-top: 34px;
    padding-bottom: 36px;
  }
  .home .personalized-demo {
    margin: 12px 0 24px;
    padding: 24px 20px;
  }
  .founder-intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .founder-intro-portrait {
    width: 190px;
    max-width: 100%;
  }
  .founder-intro-copy h2 {
    margin-top: 12px;
  }
  .home .heroimg {
    min-height: 250px;
  }
}

/* Request Demo: extend the existing form without changing the site design. */
.demo-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}
.demo-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.demo-field input,
.demo-field select,
.demo-field textarea {
  min-width: 0;
}
#delivery-note a {
  color: var(--cyan);
  text-decoration: underline;
}
#phone-hint {
  font-size: 12px;
  margin: 10px 0 0;
}
.demo-success {
  border: 1px solid #387c6c;
  border-radius: 14px;
  background: #12302f;
  padding: 24px;
  margin-top: 24px;
}
.demo-success h3 {
  font-size: 25px;
  line-height: 1.2;
  margin: 12px 0;
}
.demo-success p {
  color: #c5d9de;
  line-height: 1.65;
}
.demo-success .eyebrow {
  color: var(--mint);
}
.form .button:disabled {
  cursor: default;
}
.form[aria-busy="true"] .button:disabled {
  cursor: wait;
}
@media (min-width: 1201px) {
  .demo-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 621px) and (max-width: 900px) {
  .demo-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .demo-success {
    padding: 20px;
  }
}
#demo-success {
  scroll-margin-top: 110px;
}
.form-actions .button.outline {
  background: #102136;
}
/* Keep optimized screenshot wrappers identical to the original image layout. */
picture {
  display: block;
  max-width: 100%;
}
.gallery-image picture {
  width: 100%;
  height: 100%;
}
/* Keep the Solutions capability cards aligned with the shared page gutters. */
.add-packages.wrap {
  padding: 36px;
}
@media (max-width: 620px) {
  .add-packages.wrap {
    padding: 28px 20px;
  }
}
.sales-hero.wrap {
  padding-left: 36px;
  padding-right: 36px;
}
@media (max-width: 620px) {
  .sales-hero.wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}