/* v3 — responsive hero reconstruction.
   The device composition is now intrinsic to its own grid cell.
   No fixed 670px canvas, scale() breakpoint hacks, or overlapping labels.
   Direction of the devices is always LTR, while copy follows locale. */
.hero {
  padding-top:clamp(50px,5vw,76px);
  padding-bottom:26px;
  overflow-x:clip;
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr);
  gap:clamp(26px,3.4vw,56px);
  align-items:center;
  min-height:0;
  position:relative;
}
.hero-copy {
  min-width:0;
  width:100%;
  max-width:560px;
  padding:0;
  position:relative;
  z-index:2;
}
.hero h1 {
  font-size:clamp(46px,4.85vw,72px);
  line-height:1.12;
  letter-spacing:-.052em;
  white-space:normal;
  max-width:100%;
  margin:19px 0 20px;
}
.hero-description {max-width:540px;font-size:17px;line-height:1.68;}
.hero-buttons {margin-top:25px;gap:11px;}
.hero-proofs {
  display:flex;
  flex-wrap:wrap;
  grid-template-columns:none;
  gap:12px 19px;
  max-width:100%;
  margin-top:26px;
}
.hero-proofs>span {white-space:normal;}
.hero-visual {
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio: 1.22;
  min-width:0;
  max-width:100%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:32px;
  background:radial-gradient(circle at 70% 30%,rgba(117,124,230,.10) 0%,transparent 48%),
             radial-gradient(circle at 25% 70%,rgba(63,211,217,.10) 0%,transparent 48%),
             linear-gradient(150deg,rgba(248,250,255,.45),rgba(235,244,255,.65));
  border:1px solid rgba(193,206,235,.45);
}
.device-stage {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  transform:none!important;
  transform-origin:center;
  direction:ltr;
  perspective:1400px;
  overflow:visible;
}
.stage-halo-a {width:76%;height:75%;right:0;top:15%;}
.stage-halo-b {width:56%;height:58%;left:2%;bottom:3%;}
.orbit-one {width:95%;height:62%;top:15%;left:3%;}
.orbit-two {width:73%;height:79%;top:9%;left:23%;}
.stage-grid {inset:8% 5% 6% 5%;}
.mac-device {
  position:absolute;
  width:79%;
  top:31%;
  left:19%;
  right:auto;
  bottom:auto;
  max-width:none;
  transform:rotate(-1deg);
  filter:drop-shadow(0 16px 21px rgba(35,58,106,.16));
  z-index:2;
}
.mac-bezel {border-width:clamp(5px,.7vw,8px);border-bottom-width:clamp(7px,1vw,11px);}
.mac-chin {height:12px;margin:0 -2.6%;}
.mac-foot {height:4px;margin:-9px auto 0;}
.phone-device {
  position:absolute;
  width:25%;
  height:auto;
  aspect-ratio:1320 / 2868;
  top:18%;
  left:3.5%;
  right:auto;
  bottom:auto;
  border-width:clamp(5px,.64vw,7px);
  border-radius:clamp(20px,2.5vw,30px);
  box-shadow:0 0 0 1px #9aaaca,0 18px 23px rgba(28,52,102,.22);
  transform:rotate(-3deg);
  overflow:hidden;
  z-index:4;
}
.phone-screen {height:100%;border-radius:inherit;}
.phone-screen img {width:100%;height:100%;object-fit:fill;}
.phone-speaker {height:11px;width:36%;left:32%;}
/* These feature claims already appear as readable proof points in the copy.
   Hide their floating duplicates instead of letting them cover the actual UI. */
.float-note {display:none!important;}
.hero-platform-note {
  position:absolute;
  top:9%;
  right:5%;
  left:auto;
  bottom:auto;
  z-index:5;
  padding:9px 12px;
  max-width:70%;
  text-align:center;
  background:rgba(247,247,255,.95);
  font-size:11px;
  line-height:1.4;
  box-shadow:0 6px 18px rgba(65,74,130,.08);
}
.hero-footer {margin-top:30px;}
/* Explicit RTL treatment: the first grid column begins at the right;
   media doesn't inherit RTL direction and cannot cover the copy. */
html[dir="rtl"] .hero-grid {direction:rtl;}
html[dir="rtl"] .hero-copy {direction:rtl;text-align:right;}
html[dir="rtl"] .hero h1 {
  font-size:clamp(43px,4.5vw,67px);
  line-height:1.30;
  letter-spacing:-.026em;
  overflow-wrap:break-word;
}
html[dir="rtl"] .hero-description {font-size:16px;line-height:1.8;}
html[dir="rtl"] .hero-proofs {display:flex;flex-wrap:wrap;grid-template-columns:none;}
html[dir="rtl"] .hero-visual,
html[dir="rtl"] .device-stage {direction:ltr;}
html[dir="rtl"] .hero-platform-note {direction:rtl;}
/* Tablets, narrower windows and browser zoom: switch to a stacked composition.
   The phone/laptop scale automatically with the stage, no pixel breakpoints. */
@media (max-width:1120px) {
  .hero-grid {display:flex;flex-direction:column;gap:28px;}
  .hero-copy {width:100%;max-width:770px;margin:auto;text-align:center;padding:0;}
  .hero-copy .eyebrow {justify-content:center;}
  .hero h1 {font-size:clamp(52px,6.4vw,75px);}
  .hero-description {max-width:670px;margin:0 auto;}
  .hero-buttons,.hero-proofs {justify-content:center;}
  .hero-visual {width:min(100%,760px);max-width:760px;margin:0 auto;aspect-ratio:1.35;min-height:0;height:auto;}
  .mac-device {top:26%;}
  html[dir="rtl"] .hero-copy {text-align:center;}
  html[dir="rtl"] .hero h1 {font-size:clamp(48px,6vw,68px);}
}
@media (max-width:640px) {
  .hero {padding-top:35px;padding-bottom:15px;}
  .hero-grid {gap:21px;}
  .hero-copy {width:100%;min-width:0;}
  .hero h1 {font-size:clamp(42px,10.2vw,56px);line-height:1.15;margin:15px 0;}
  .hero-description {font-size:15px;line-height:1.7;}
  .hero-buttons {margin-top:21px;}
  .hero-proofs {margin-top:22px;gap:10px 12px;}
  .hero-visual {
    width:100%;max-width:100%;
    min-height:0;height:auto;
    aspect-ratio:1.12;
    border-radius:22px;
    margin:0 auto;
  }
  .mac-device {top:32%;width:79%;left:19%;}
  .phone-device {top:21%;width:25%;left:3%;border-width:4px;border-radius:16px;}
  .phone-speaker {height:7px;}
  .mac-bezel {border-width:4px;border-bottom-width:6px;border-radius:8px 8px 3px 3px;}
  .mac-chin {height:7px;}
  .hero-platform-note {font-size:9px;top:9%;right:3%;padding:5px 8px;max-width:72%;}
  .hero-footer {margin-top:18px;}
  html[dir="rtl"] .hero-copy {text-align:right;}
  html[dir="rtl"] .hero-copy .eyebrow {justify-content:flex-start;}
  html[dir="rtl"] .hero h1 {font-size:clamp(42px,10vw,55px);line-height:1.34;letter-spacing:-.015em;}
  html[dir="rtl"] .hero-buttons,.hero-proofs {justify-content:flex-start;}
}
@media (max-width:380px) {
  .hero h1 {font-size:40px;}
  html[dir="rtl"] .hero h1 {font-size:39px;}
  .hero-platform-note {font-size:8px;}
}
@media (prefers-reduced-motion:reduce) {
  .mac-device,.phone-device,.device-stage {transition:none!important;animation:none!important;}
}