/* =====================================================================
   TechXLNS home — Figma frame "home" #299:1916
   File JQvProUWUMCH68BgmpdnXR · 1440 × 4444 · bg #F2FAFF
   Absolute layout matches Figma (layout mode: none).
   ===================================================================== */

:root {
  --light-blue: #f2faff;
  --dark-blue:  #282974;
  --grey:       #535261;
  --blue:       #049ffe;
  --black:      #000000;
  --card-body:  #d9d9d9;
  --medxlns:    #044ed5;
  --vms:        #492e81;
  --appointiq:  #8caf5b;
  --input-bg:     #f8fafc;
  --input-border: #e2e8f0;
  --placeholder:  #94a3b8;
  /* Set by figma-home.js; used to keep strokes crisp when the stage is scaled */
  --stage-scale: 1;

  --shadow-nav:     0px 4px 14.6px 1px rgba(0, 0, 0, 0.24);
  --shadow-who:     0px 4px 14.6px 1px rgba(173, 233, 246, 1);
  --shadow-svc:     0px 4px 10px 0px rgba(36, 37, 110, 1);
  --shadow-prod:    0px 4px 22.2px 0px rgba(36, 37, 110, 1);
  --shadow-contact: 0px 4px 4px 0px rgba(242, 250, 255, 1);
  --shadow-footer: 0px 4px 14.6px 1px rgba(173, 233, 246, 0.9);

  --gradient-rule: linear-gradient(90deg,
      rgba(242, 250, 255, 1) 0%,
      rgba(40, 41, 116, 1) 51%,
      rgba(242, 250, 255, 1) 100%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--light-blue);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  /* Avoid iOS rubber-band revealing empty sides of the scaled stage */
  overscroll-behavior-x: none;
}

[data-feature]:not(.is-on) { display: none !important; }

.viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.stage {
  position: relative;
  width: 1440px;
  height: 4480px;
  margin: 0 auto;
  transform-origin: top center;
  background: var(--light-blue);
  --pointer-x: 50%;
  --pointer-y: 360px;
  /* Keep the unscaled stage box from forcing horizontal page scroll */
  max-width: none;
}

.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle 360px at var(--pointer-x) var(--pointer-y),
    rgba(80, 205, 255, 0.22) 0%,
    rgba(99, 214, 255, 0.13) 36%,
    rgba(140, 226, 255, 0.055) 62%,
    rgba(242, 250, 255, 0) 100%);
  transition: opacity 0.2s ease;
}

/* ---- Blue atmosphere glows (#049FFE, blur 110.95, opacity .05) ---- */

.glow {
  position: absolute;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.05;
  filter: blur(110.95px);
  pointer-events: none;
}
.glow-1 { left: -836px;    top: 1349px;    width: 1173.15px; height: 1171.54px; }
.glow-2 { left: 1053px;    top: 1988px;    width: 941.73px;  height: 1080.36px; }
.glow-3 { left: -435.7px;  top: 2499.52px; width: 1173.07px; height: 1113.26px; }
.glow-4 { left: 977px;     top: 2670px;    width: 941.73px;  height: 1080.36px; }
.glow-5 { left: -723px;    top: 2663px;    width: 1173.07px; height: 1113.26px; }
/* Soft cyan wash behind hero title (right side), matching Figma atmosphere */
.glow-hero {
  left: 780px;
  top: 240px;
  width: 640px;
  height: 480px;
  background: #7ec8ff;
  opacity: 0.22;
  filter: blur(120px);
}

/* ---- Navigation  #299:2384  1120×72 @ 163,54 ---- */

.nav {
  position: absolute;
  top: 54px;
  left: 163px;
  width: 1120px;
  height: 72px;
  z-index: 60;
}

.nav-plate {
  position: absolute;
  left: -30px;
  top: -8px;
  width: 1180px;
  height: 87px;
  border-radius: 51px;
  background: rgba(0, 0, 0, 0);
  box-shadow: var(--shadow-nav);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-logo {
  position: absolute;
  left: 16px;
  top: 7px;
  width: 94px;
  height: 50px;
}
.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-links {
  position: absolute;
  left: 362px;
  top: 22px;
  width: 396px;
  height: 27px;
}

.nav-links a {
  position: absolute;
  top: 0;
  height: 27px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.nav-links a[data-nav="home"]     { left: 0;     width: 44px; }
.nav-links a[data-nav="services"] { left: 75px;  width: 62px; }
.nav-links a[data-nav="products"] { left: 168px; width: 64px; }
.nav-links a[data-nav="blog"]     { left: 263px; width: 33px; }
.nav-links a[data-nav="about"]    { left: 327px; width: 69px; }

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 1.5px;
  background: var(--dark-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s var(--ease);
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--dark-blue); }
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-links a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}

.nav-cta { position: absolute; left: 907px; top: 15px; }

/* ---- CTA pills (Contact / Submit = navy; Explore = ice) ---- */

.pill {
  position: relative;
  display: block;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: box-shadow 0.25s var(--ease);
}
.pill:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pill-dark::before,
.pill-dark::after { content: none !important; }

.pill-lg { width: 197px; height: 42px; border-radius: 34px; }
.pill-sm { width: 138px; height: 28px; border-radius: 34px; }

.pill-dark {
  background: #282974;
  color: var(--light-blue);
}
.pill-dark:hover { box-shadow: 0 8px 20px rgba(40, 41, 116, 0.35); }

.pill-light {
  background: var(--light-blue);
  color: var(--dark-blue);
}
.pill-light:hover { box-shadow: 0 6px 16px rgba(36, 37, 110, 0.28); }

.pill-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  z-index: 5;
  color: inherit;
  pointer-events: none;
}
.pill-lg .pill-label { font-size: 15px; }
.pill-sm .pill-label { font-size: 11px; }

.pill-dark .pill-label { color: #f2faff; }
.pill-light .pill-label { color: var(--dark-blue); }

/*
  Pill hover — soft luminous curved light bands (ellipse rims).
  FULL pass-through: outside below → through pill → outside above.
  Mouse-leave reverses the same transform path.
  (Transform values / timing intentionally unchanged — visual soft-glow only.)
*/
.pill .arc {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0;
  pointer-events: none;
  will-change: transform;
}

/* Soft dual curved lines (two concentric feathered rims) — light cyan on navy pills */
.pill-dark .arc-primary {
  z-index: 2;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle closest-side,
    transparent 0%,
    transparent 68%,
    /* lower curved line */
    rgba(168, 208, 240, 0.06) 72%,
    rgba(168, 208, 240, 0.5) 75.5%,
    rgba(210, 232, 250, 0.92) 78.5%,
    rgba(168, 208, 240, 0.45) 81.5%,
    transparent 84.5%,
    /* upper curved line — navy gap between the two */
    rgba(168, 208, 240, 0.08) 88%,
    rgba(168, 208, 240, 0.55) 90.5%,
    rgba(220, 238, 252, 0.95) 92.5%,
    rgba(168, 208, 240, 0.4) 95%,
    transparent 100%
  );
  filter: blur(2.4px);
  /* Fully below the clipped pill */
  transform: translate(-50%, -50%) translateY(275px);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Wider soft outer glow — follows the same path, adds luminous depth */
.pill-dark .arc-secondary {
  z-index: 1;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle closest-side,
    transparent 0%,
    transparent 70%,
    rgba(168, 208, 240, 0.05) 78%,
    rgba(168, 208, 240, 0.28) 86%,
    rgba(168, 208, 240, 0.35) 91%,
    rgba(168, 208, 240, 0.12) 96%,
    transparent 100%
  );
  filter: blur(9px);
  opacity: 0.7;
  /* Slightly deeper park; keeps dual-arc offset during travel */
  transform: translate(-50%, -50%) translateY(280px);
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Explore (ice) pills — same motion; navy-tinted arcs so they read on light bg */
.pill-light .arc-primary {
  z-index: 2;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle closest-side,
    transparent 0%,
    transparent 68%,
    rgba(40, 41, 116, 0.04) 72%,
    rgba(40, 41, 116, 0.28) 75.5%,
    rgba(72, 90, 170, 0.55) 78.5%,
    rgba(40, 41, 116, 0.22) 81.5%,
    transparent 84.5%,
    rgba(40, 41, 116, 0.05) 88%,
    rgba(40, 41, 116, 0.32) 90.5%,
    rgba(90, 110, 190, 0.58) 92.5%,
    rgba(40, 41, 116, 0.2) 95%,
    transparent 100%
  );
  filter: blur(2.4px);
  transform: translate(-50%, -50%) translateY(275px);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.pill-light .arc-secondary {
  z-index: 1;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle closest-side,
    transparent 0%,
    transparent 70%,
    rgba(40, 41, 116, 0.03) 78%,
    rgba(40, 41, 116, 0.16) 86%,
    rgba(4, 159, 254, 0.22) 91%,
    rgba(40, 41, 116, 0.08) 96%,
    transparent 100%
  );
  filter: blur(9px);
  opacity: 0.75;
  transform: translate(-50%, -50%) translateY(280px);
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

.pill:hover .arc-primary,
.pill:focus-visible .arc-primary,
.pill:active .arc-primary,
.prod-card:hover .pill-light .arc-primary,
.prod-card:focus-within .pill-light .arc-primary {
  /* Fully above the clipped pill — no frozen mid-button arcs */
  transform: translate(-50%, -50%) translateY(110px);
}

.pill:hover .arc-secondary,
.pill:focus-visible .arc-secondary,
.pill:active .arc-secondary,
.prod-card:hover .pill-light .arc-secondary,
.prod-card:focus-within .pill-light .arc-secondary {
  transform: translate(-50%, -50%) translateY(115px);
}

@media (prefers-reduced-motion: reduce) {
  .pill .arc {
    transition: none !important;
  }
  .pill:hover .arc-primary,
  .pill:focus-visible .arc-primary,
  .pill:active .arc-primary,
  .prod-card:hover .pill-light .arc-primary,
  .prod-card:focus-within .pill-light .arc-primary {
    transform: translate(-50%, -50%) translateY(110px);
  }
  .pill:hover .arc-secondary,
  .pill:focus-visible .arc-secondary,
  .pill:active .arc-secondary,
  .prod-card:hover .pill-light .arc-secondary,
  .prod-card:focus-within .pill-light .arc-secondary {
    transform: translate(-50%, -50%) translateY(115px);
  }
}

/* ---- Mobile / iPad hardening (stage still scales via JS) ---- */
@media (max-width: 1440px) {
  .viewport {
    /* Clip the 1440px stage after CSS transform scale */
    overflow: hidden;
  }
}

@media (hover: none) and (pointer: coarse) {
  /* Clear sticky :hover states on touch after tap by relying on :active for feedback */
  .nav-links a:hover::after { transform: scaleX(0); }
  .nav-links a.is-active::after { transform: scaleX(1); }

  .field-input,
  textarea.field-input {
    /* Prevent iOS zoom on focus (computed size, not visual after scale) */
    font-size: 16px;
  }

  .pill,
  .nav-links a,
  .highlight-card,
  .svc-card,
  .prod-card,
  .footer-link,
  .footer-social a {
    -webkit-tap-highlight-color: rgba(4, 159, 254, 0.18);
    touch-action: manipulation;
  }
}

/* ---- Hero  #299:2360 / #299:2344 ---- */

.hero-title {
  position: absolute;
  top: 352px;
  left: 236px;
  width: 929px;
  height: 148px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--dark-blue);
}
.hero-title .solid {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--dark-blue);
}
.hero-title .outline {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-top: 2px;
  line-height: 1.08;
  /* Page-blue fill (not white) so hollow letters match the background */
  color: var(--light-blue);
  -webkit-text-fill-color: var(--light-blue);
  -webkit-text-stroke: calc(2.4px / var(--stage-scale)) #282974;
  paint-order: stroke fill;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.hero-sub {
  position: absolute;
  top: 522px;
  left: 366px;
  width: 707px;
  z-index: 2;
  font-weight: 400;
  font-size: 18px;
  line-height: 24.63px;
  text-align: center;
  color: #454452;
}

/* ---- Vision / Mission highlight cards shown in the prototype ---- */

.vision-mission {
  position: absolute;
  left: 220px;
  top: 650px;
  width: 1000px;
  height: 280px;
}

.highlight-card {
  position: absolute;
  top: 0;
  width: 470px;
  height: 280px;
  padding: 48px 42px 34px;
  border-radius: 40px;
  background: var(--dark-blue);
  box-shadow: var(--shadow-prod);
  color: var(--light-blue);
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.32s var(--ease), transform 0.32s var(--ease);
}
.vision-card { left: 0; }
.mission-card { right: 0; }
.highlight-card:hover,
.highlight-card:focus-visible,
.highlight-card.is-selected {
  transform: translateY(-2px);
  box-shadow:
    0 15px 22px -5px rgba(36, 37, 110, 0.42),
    0 4px 22.2px 0 rgba(36, 37, 110, 0.78);
}

.highlight-card h2 {
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 700;
  line-height: 32px;
}
.highlight-card p {
  color: #edf7ff;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

/* ---- Who we are  #299:2351  1120×341 @ 160,1151 ---- */

.who {
  position: absolute;
  left: 160px;
  top: 1151px;
  width: 1120px;
  height: 380px;
  border-radius: 51px;
  background: rgba(217, 217, 217, 0.28);
  box-shadow: 0 12px 36px rgba(173, 233, 246, 0.34);
  scroll-margin-top: 150px;
}

.who-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--dark-blue);
  text-align: center;
}

.who-body {
  position: absolute;
  left: 84px;
  top: 148px;
  width: 951px;
  height: 190px;
  font-weight: 300;
  font-size: 24px;
  line-height: 34px;
  text-align: center;
  color: var(--grey);
  white-space: pre-wrap;
}

/* ---- Section titles (component "ser", opacity .76) ---- */

.sec-heading {
  position: absolute;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.76;
  font-weight: 700;
  font-size: 64px;
  color: var(--dark-blue);
  white-space: nowrap;
}
#services { left: 517px; top: 1680px; width: 407px; }
#products { left: 528px; top: 2340px; width: 385px; }

.sec-sub {
  position: absolute;
  width: 588px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 300;
  font-size: 15px;
  line-height: 24.63px;
  color: var(--black);
}
.sec-sub-svc  { left: 426px; top: 1758px; }
.sec-sub-prod { left: 424px; top: 2413px; }

.rule {
  position: absolute;
  width: 1124px;
  height: 3px;
  border: 0;
  background: var(--gradient-rule);
}
.rule-svc  { left: 159px; top: 1817px; }
.rule-prod { left: 156px; top: 2475px; }

/* ---- Service cards  360×83, radius 20, navy shadow ---- */

.svc-card {
  position: absolute;
  width: 360px;
  height: 83px;
  border-radius: 20px;
  background: var(--light-blue);
  box-shadow: var(--shadow-svc);
  text-decoration: none;
  display: block;
  transition: background-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.svc-ai { left: 157px; top: 1905px; }
.svc-pe { left: 544px; top: 1902px; }
.svc-cs { left: 924px; top: 1902px; }
.svc-do { left: 157px; top: 2017px; }
.svc-ei { left: 544px; top: 2012px; }
.svc-tc { left: 924px; top: 2012px; }
.svc-dt { left: 544px; top: 2122px; }

.svc-card h3 {
  position: absolute;
  left: 48px;
  top: 17px;
  height: 25px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: var(--dark-blue);
  transition: color 0.28s var(--ease);
}
.svc-card p {
  position: absolute;
  left: 48px;
  top: 42px;
  height: 23px;
  display: flex;
  align-items: center;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--grey);
  transition: color 0.28s var(--ease);
}
.svc-card:hover,
.svc-card:focus-visible {
  background: var(--dark-blue);
  box-shadow: var(--shadow-svc);
  outline: none;
}
.svc-card:hover h3,
.svc-card:focus-visible h3 { color: var(--light-blue); }
.svc-card:hover p,
.svc-card:focus-visible p { color: var(--card-body); }

/* ---- Product cards  360×512, fill #282974, radius 40 ---- */

.prod-card {
  position: absolute;
  top: 2571px;
  width: 360px;
  height: 512px;
  border-radius: 40px;
  background: var(--dark-blue);
  box-shadow: var(--shadow-prod);
  --product-color: var(--dark-blue);
  transition: background-color 0.38s var(--ease), box-shadow 0.38s var(--ease);
}
.prod-med { left: 116px; --product-color: var(--medxlns); }
.prod-vms {
  left: 540px;
  --product-color: var(--vms);
}
.prod-aiq { left: 964px; --product-color: var(--appointiq); }

.prod-card:hover,
.prod-card:focus-within {
  background-color: var(--product-color);
  box-shadow: var(--shadow-prod);
}

.prod-body {
  position: absolute;
  left: 28px;
  top: 39px;
  width: 303px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prod-body h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: var(--light-blue);
}
.prod-tagline {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--light-blue);
}
.prod-body p:not(.prod-tagline) {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #edf7ff;
  white-space: pre-line;
}
.prod-card .pill-sm { position: absolute; left: 28px; top: 437px; }
.prod-card .pill-light::before {
  content: none;
}
.prod-card:hover .pill-light,
.prod-card:focus-within .pill-light {
  color: var(--dark-blue);
}

/* ---- Challenge  #299:2345 / #299:2355 ---- */

.challenge-title {
  position: absolute;
  top: 3187px;
  left: 280px;
  width: 920px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  white-space: nowrap;
  color: var(--dark-blue);
}
.challenge-sub {
  position: absolute;
  top: 3257px;
  left: 523px;
  width: 364px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  line-height: 24.63px;
  color: var(--grey);
}

/* ---- Contact  #299:2334  1240×599 @ 97,3396 ---- */

.contact {
  position: absolute;
  left: 97px;
  top: 3396px;
  width: 1240px;
  height: 599px;
  border-radius: 40px;
  background: rgba(217, 217, 217, 0.28);
  box-shadow: 0 12px 36px rgba(173, 233, 246, 0.34);
}

.contact-title {
  position: absolute;
  left: 380px;
  top: 70px;
  width: 480px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 50px;
  white-space: nowrap;
  color: var(--dark-blue);
}

.field-label {
  position: absolute;
  height: 20px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--dark-blue);
}
.field-input {
  position: absolute;
  height: 50px;
  padding: 0 20px;
  border-radius: 40px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.72);
  box-shadow: 0 4px 14px rgba(40, 41, 116, 0.05);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-blue);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
textarea.field-input {
  padding: 13px 20px;
  height: 76px;
  resize: none;
  overflow: auto;
}
.field-input::placeholder { color: var(--placeholder); }
.field-input:hover { border-color: rgba(4, 159, 254, 0.45); }
.field-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(4, 159, 254, 0.18);
}

.lbl-name    { left: 170px; top: 177px; width: 84px;  }
.in-name     { left: 149px; top: 205px; width: 482px; }
.lbl-email   { left: 704px; top: 177px; width: 104px; }
.in-email    { left: 687px; top: 205px; width: 482px; }
.lbl-company { left: 171px; top: 275px; width: 114px; }
.in-company  { left: 149px; top: 303px; width: 482px; }
.lbl-phone   { left: 704px; top: 275px; width: 109px; }
.in-phone    { left: 687px; top: 303px; width: 482px; }
.lbl-desc    { left: 254px; top: 387px; width: 80px;  }
.in-desc     { left: 235px; top: 415px; width: 841px; }

.contact-submit { position: absolute; left: 525px; top: 504px; }

.form-error {
  position: absolute;
  left: 149px;
  top: 560px;
  width: 900px;
  font-size: 13px;
  color: #c02626;
  min-height: 18px;
}

/* ---- Footer  #299:2382  1399×380 @ 20,4032 ---- */

.footer {
  position: absolute;
  left: 20px;
  top: 4032px;
  width: 1399px;
  height: 380px;
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.footer-plate {
  position: absolute;
  left: -13px;
  top: -10px;
  width: 1377px;
  height: 380px;
  border-radius: 51px;
  /* Left → right fade: denser frost on left, blends into page on right */
  background: linear-gradient(
    90deg,
    rgba(217, 217, 217, 0.48) 0%,
    rgba(217, 217, 217, 0.32) 28%,
    rgba(217, 217, 217, 0.16) 62%,
    rgba(217, 217, 217, 0.05) 100%
  );
  border: 0;
  box-shadow: 0 12px 36px rgba(173, 233, 246, 0.34);
  z-index: 0;
  pointer-events: none;
}

.footer-logo {
  position: absolute;
  left: 68px;
  top: 40px;
  width: 94px;
  height: 50px;
  display: block;
  z-index: 1;
}
.footer-logo img { width: 100%; height: 100%; object-fit: contain; }

.footer-addr {
  position: absolute;
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 24.63px;
  letter-spacing: -0.06em;
  color: var(--grey);
  white-space: pre-wrap;
  z-index: 1;
}
.addr-head { left: 68px;  top: 170px; width: 153px; height: 124px; }
.addr-cbe  { left: 242px; top: 196px; width: 329px; height: 99px;  }

.footer-link {
  position: absolute;
  height: 25px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 24.63px;
  letter-spacing: -0.06em;
  color: var(--dark-blue);
  text-decoration: none;
  z-index: 1;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
}
.footer-link:hover { opacity: 0.65; text-decoration: underline; }
.link-terms   { left: 979px; top: 210px; width: 150px; }
.link-privacy { left: 979px; top: 235px; width: 110px; }

.footer-social a {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-blue);
  z-index: 1;
  transition: transform 0.22s var(--ease), color 0.22s var(--ease), opacity 0.22s var(--ease);
}
.footer-social a:hover { transform: translateY(-2px); color: var(--blue); }
.footer-social svg { width: 100%; height: 100%; fill: currentColor; }
.soc-yt { left: 979px;  top: 270px; width: 23px; height: 23px; }
.soc-tw { left: 1015px; top: 268px; width: 22px; height: 23px; }
.soc-li { left: 1049px; top: 272px; width: 23px; height: 23px; }

.footer-rule {
  position: absolute;
  left: 32px;
  top: 314px;
  width: 1309px;
  height: 1px;
  background: var(--grey);
  opacity: 0.45;
  z-index: 1;
}
.footer-copy {
  position: absolute;
  left: 560px;
  top: 322px;
  width: 300px;
  height: 25px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  font-size: 16px;
  line-height: 24.63px;
  letter-spacing: -0.06em;
  color: var(--grey);
  white-space: nowrap;
  z-index: 1;
}

/* Vision + Mission rise together from below (no blink, no stagger) */
.vision-mission .highlight-card {
  opacity: 1;
  transform: translateY(220px);
  transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.32s var(--ease);
}
.vision-mission.is-visible .highlight-card {
  transform: translateY(0);
}
.vision-mission.is-visible .highlight-card:hover,
.vision-mission.is-visible .highlight-card:focus-visible,
.vision-mission.is-visible .highlight-card.is-selected {
  transform: translateY(-2px);
}

.challenge-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

/* ---- Contact section heading: match challenge boldness ---- */
.contact-title {
  font-weight: 700;
}

/* ---- Contact form: prevent label wrapping ---- */
.lbl-company,
.lbl-phone {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .vision-mission .highlight-card,
  .vision-mission.is-visible .highlight-card,
  .footer,
  .footer.is-visible {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}