/* Homepage art direction approved from the visual concept. */
@media(min-width:1181px){
  .site-header .nav{width:min(1510px,calc(100% - 52px))}
}

.hero-immersive{
  width:min(1510px,calc(100% - 52px));
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(470px,.78fr) minmax(760px,1.22fr);
  gap:clamp(38px,4vw,66px);
  align-items:center;
  padding:68px 0 92px;
  overflow:visible;
}
.hero-immersive::before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-5%;
  top:8%;
  width:58%;
  height:78%;
  border-radius:50%;
  background:
    radial-gradient(circle at 64% 76%,rgba(12,155,114,.105),transparent 34%),
    radial-gradient(circle at 28% 20%,rgba(78,128,255,.055),transparent 38%);
  filter:blur(2px);
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:6;
  min-width:0;
  max-width:575px;
}
.hero-copy .kicker{margin-bottom:18px}
.hero-copy h1{
  max-width:575px;
  font-size:clamp(56px,4.9vw,78px);
  line-height:.99;
  letter-spacing:-.047em;
  text-wrap:balance;
}
.hero-copy .hero-lede{
  max-width:555px;
  margin-top:24px;
  color:#5d6d83;
  font-size:clamp(17px,1.35vw,19px);
  line-height:1.66;
}
.hero-copy .actions{margin-top:27px;gap:12px}
.hero-copy .button{min-height:48px;padding-inline:20px;border-radius:12px}
.hero-copy .button.primary{box-shadow:0 14px 30px rgba(8,19,41,.15)}

/* Keep the canonical translated copy in the DOM; render it as the compact concept row below. */
.hero-onboarding-source,
.audience-strip-source{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}
.hero-benefits{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:12px 20px;
  max-width:575px;
  margin-top:20px;
}
.hero-benefit{
  display:inline-flex;
  align-items:flex-start;
  gap:7px;
  color:#6b7a8f;
  font-size:12.5px;
  font-weight:650;
  line-height:1.45;
}
.hero-benefit--1,.hero-benefit--3{white-space:nowrap}
.hero-benefit--2{max-width:245px}
.hero-benefit .hero-mini-icon{flex:0 0 auto;margin-top:1px}
.hero-mini-icon{
  width:18px;
  height:18px;
  fill:none;
  stroke:#12aa7c;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Friendly training-scope card from the approved concept. */
.hero-audience-card{
  width:min(100%,590px);
  margin-top:28px;
  padding:16px 19px 15px;
  border:1px solid rgba(207,218,230,.92);
  border-radius:17px;
  background:rgba(255,255,255,.78);
  box-shadow:0 14px 36px rgba(8,19,41,.055),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
}
.audience-heading{
  margin:0 0 11px;
  color:#44536b;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:-.01em;
}
.audience-primary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 17px;
}
.audience-primary .audience-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#52627a;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.audience-primary .hero-mini-icon{
  width:18px;
  height:18px;
  stroke:#4a7572;
  stroke-width:1.6;
}
.audience-secondary{
  display:flex;
  flex-wrap:wrap;
  gap:5px 0;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid rgba(216,226,237,.74);
  color:#7b889a;
  font-size:11.5px;
  font-weight:620;
}
.audience-secondary .audience-item{display:inline-flex;align-items:center}
.audience-secondary .audience-item:not(:last-child)::after{
  content:"·";
  margin:0 8px;
  color:#a9b4c2;
  font-weight:800;
}

/* Product composition: desktop is the anchor, phone overlaps only the lower content area. */
.hero-visual{
  position:relative;
  min-width:0;
  align-self:center;
  z-index:3;
}
.hero-visual::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-3%;
  bottom:-6%;
  width:46%;
  height:42%;
  opacity:.48;
  background-image:radial-gradient(circle,rgba(12,155,114,.34) 1.2px,transparent 1.3px);
  background-size:13px 13px;
  mask-image:linear-gradient(145deg,transparent 0%,#000 28%,#000 75%,transparent 100%);
  pointer-events:none;
}
.hero-visual .caption{display:none}
.hero-immersive .hero-product-showcase{
  position:relative;
  isolation:isolate;
  display:block;
  width:118%;
  min-height:650px;
  margin:0 0 0 -4%;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.hero-immersive .hero-product-showcase::before{
  content:"";
  position:absolute;
  z-index:0;
  left:7%;
  right:6%;
  bottom:3%;
  height:18%;
  border-radius:50%;
  background:rgba(8,19,41,.12);
  filter:blur(48px);
  transform:translateY(30%);
  pointer-events:none;
}
.hero-immersive .hero-product-showcase::after{content:none}
.hero-immersive .hero-progress-shot{
  position:absolute;
  z-index:2;
  left:-2%;
  top:1%;
  width:108%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  transform:rotate(-.7deg);
  transform-origin:center;
}
.hero-immersive .hero-progress-shot .product-label{
  position:absolute;
  z-index:5;
  left:20px;
  top:18px;
  margin:0;
  padding:8px 11px;
  border:1px solid rgba(214,225,236,.95);
  border-radius:11px;
  background:rgba(255,255,255,.94);
  color:#5b6b80;
  box-shadow:0 9px 22px rgba(8,19,41,.09);
  backdrop-filter:blur(14px);
}
.hero-immersive .hero-progress-shot img{
  width:100%;
  height:auto;
  padding:0;
  border:1px solid rgba(191,205,220,.8);
  border-radius:24px;
  background:#fff;
  box-shadow:0 34px 76px rgba(8,19,41,.19),0 0 0 1px rgba(255,255,255,.72) inset;
  filter:saturate(1.015) contrast(1.005);
}
.hero-immersive .hero-mobile-shot{
  position:absolute;
  z-index:5;
  right:8%;
  bottom:-11%;
  width:23%;
  max-width:none;
  margin:0;
  transform:rotate(1.15deg);
  filter:drop-shadow(0 30px 42px rgba(8,19,41,.25));
}
.hero-immersive .hero-mobile-shot::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:12% -22% -8% -22%;
  border-radius:50%;
  background:rgba(16,170,124,.09);
  filter:blur(28px);
}
.hero-immersive .hero-mobile-shot .product-label{
  position:absolute;
  z-index:7;
  left:86%;
  top:24px;
  margin:0;
  padding:7px 10px;
  border:1px solid rgba(214,225,236,.92);
  border-radius:10px;
  background:rgba(255,255,255,.95);
  color:#5b6b80;
  white-space:nowrap;
  box-shadow:0 9px 22px rgba(8,19,41,.09);
  transform:none;
  backdrop-filter:blur(12px);
}
.hero-immersive .hero-mobile-shot img{width:100%;height:auto}

/* Database screenshots: click for one clean enlarged view, no custom zoom controls. */
.database-zoom-shot{
  position:relative;
  overflow:hidden;
  background:#fff;
  cursor:zoom-in;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.database-zoom-shot img{
  transform:none;
  transition:transform .18s ease,filter .18s ease;
  will-change:auto;
}
.database-zoom-shot::after{
  content:"⌕";
  position:absolute;
  z-index:3;
  right:14px;
  top:14px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:11px;
  background:rgba(8,19,41,.91);
  color:#fff;
  font-size:21px;
  font-weight:900;
  box-shadow:0 9px 22px rgba(8,19,41,.2);
  pointer-events:none;
}
.database-zoom-shot:focus-visible{
  outline:3px solid rgba(12,155,114,.38);
  outline-offset:4px;
}
@media(hover:hover) and (pointer:fine){
  .database-zoom-shot:hover{
    transform:translateY(-3px);
    border-color:#bdcad8;
    box-shadow:0 28px 66px rgba(8,19,41,.13);
  }
  .database-zoom-shot:hover img{transform:scale(1.01);filter:saturate(1.03)}
}

body.lightbox-open{overflow:hidden}
.image-lightbox{
  inset:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  overflow:hidden;
}
.image-lightbox:not([open]){display:none}
.image-lightbox::backdrop{
  background:rgba(5,10,20,.84);
  backdrop-filter:blur(10px) saturate(.9);
}
.image-lightbox-stage{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,44px);
  cursor:zoom-out;
}
.image-lightbox-stage img{
  display:block;
  width:auto;
  height:auto;
  max-width:min(96vw,2048px);
  max-height:92dvh;
  border-radius:14px;
  background:#fff;
  box-shadow:0 34px 90px rgba(0,0,0,.46);
  cursor:default;
}

@media(max-width:1180px){
  .hero-immersive{
    width:min(1320px,calc(100% - 40px));
    min-height:0;
    grid-template-columns:1fr;
    gap:42px;
    padding:56px 0 94px;
  }
  .hero-copy{max-width:820px;margin-inline:auto}
  .hero-copy h1{max-width:780px}
  .hero-copy .hero-lede{max-width:700px}
  .hero-benefits{max-width:760px}
  .hero-audience-card{max-width:720px}
  .hero-visual{width:100%;max-width:1080px;margin-inline:auto}
  /* Keep the two screenshots on one proportional canvas. The previous fixed
     650px height made the desktop scale with width while the phone stayed
     anchored to an unrelated bottom edge, so they drifted apart on tablets. */
  .hero-immersive .hero-product-showcase{
    width:100%;
    min-height:0;
    aspect-ratio:758 / 562;
    margin:0;
  }
  .hero-immersive .hero-progress-shot{left:0;top:0;width:100%}
  .hero-immersive .hero-mobile-shot{right:6%;top:39.5%;bottom:auto;width:22%}
  .hero-immersive .hero-mobile-shot .product-label{
    left:auto;
    right:72%;
    top:14px;
    font-size:clamp(9px,1.25vw,11px);
    transform:none;
  }
}

@media(max-width:760px){
  .hero-immersive{
    width:min(100% - 26px,1320px);
    gap:34px;
    padding-top:44px;
    padding-bottom:78px;
  }
  .hero-copy h1{font-size:clamp(44px,12vw,60px)}
  .hero-copy .hero-lede{font-size:17px}
  .hero-benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
  .hero-benefit--2{max-width:none;grid-column:1/-1}
  .hero-audience-card{padding:15px 16px}
  .audience-primary{gap:9px 14px}
  .hero-immersive .hero-product-showcase{min-height:0;aspect-ratio:758 / 562}
  .hero-immersive .hero-progress-shot{left:0;top:0;width:100%;transform:rotate(-.35deg)}
  .hero-immersive .hero-progress-shot .product-label{left:12px;top:12px;font-size:10px}
  .hero-immersive .hero-progress-shot img{border-radius:16px}
  .hero-immersive .hero-mobile-shot{right:6%;top:39.5%;bottom:auto;width:22%;transform:rotate(.8deg)}
  .hero-immersive .hero-mobile-shot .product-label{left:auto;right:72%;top:14px;font-size:9px;transform:none}
}

@media(max-width:650px){
  .hero-benefits{grid-template-columns:1fr}
  .hero-benefit--2{grid-column:auto}
  .hero-benefit--1,.hero-benefit--3{white-space:normal}
  .audience-primary{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
  .audience-primary .audience-item{white-space:normal}
  .audience-secondary{line-height:1.7}
  .database-zoom-shot{overflow:hidden}
  .database-zoom-shot img{width:100%;max-width:100%;height:auto;transform:none!important;transition:none}
  .database-zoom-shot::after{right:10px;top:10px;width:34px;height:34px}

  /* The desktop/phone overlap is intentionally a desktop composition. On a
     phone it makes the hero extremely tall and can visually cover the next
     section. Keep both screenshots, but put them back into normal document
     flow so the homepage has a predictable mobile height. */
  .hero-immersive{gap:28px;padding-top:34px;padding-bottom:54px}
  .hero-visual{max-width:100%;overflow:hidden}
  .hero-visual::after{display:none}
  .hero-immersive .hero-product-showcase{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    min-height:0;
    aspect-ratio:auto;
    width:100%;
    margin:0;
  }
  .hero-immersive .hero-product-showcase::before{display:none}
  .hero-immersive .hero-progress-shot{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    transform:none;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
  }
  .hero-immersive .hero-progress-shot img{
    width:720px;
    min-width:720px;
    max-width:none;
    height:auto;
  }
  .hero-immersive .hero-mobile-shot{
    position:relative;
    right:auto;
    top:auto;
    bottom:auto;
    width:min(58%,260px);
    justify-self:center;
    transform:none;
    filter:drop-shadow(0 20px 30px rgba(8,19,41,.18));
  }
  .hero-immersive .hero-mobile-shot::before{display:none}
  .hero-immersive .hero-mobile-shot .product-label{
    left:50%;
    right:auto;
    top:12px;
    transform:translateX(-50%);
  }
}

@media(prefers-reduced-motion:reduce){
  .database-zoom-shot,.database-zoom-shot img{transition:none}
  .hero-immersive .hero-progress-shot,.hero-immersive .hero-mobile-shot{transform:none}
}