:root{--bg:#020817;--line:#12304a;--cyan:#52d8ff;--blue:#2389ff;--text:#f5f8ff;--muted:#a8b7cf}body{background:var(--bg);color:var(--text)}main{overflow:hidden}.ind-hero{height:min(850px,calc(100vh - 96px));min-height:680px;position:relative;display:flex;align-items:center;border-bottom:1px solid var(--line)}.ind-hero>img,.response>img,.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.veil,.cta-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,23,.98) 0%,rgba(2,8,23,.86) 34%,rgba(2,8,23,.2) 72%),linear-gradient(0deg,rgba(2,8,23,.72),transparent 45%)}[dir=rtl] .veil,[dir=rtl] .cta-shade{background:linear-gradient(270deg,rgba(2,8,23,.98) 0%,rgba(2,8,23,.86) 34%,rgba(2,8,23,.2) 72%),linear-gradient(0deg,rgba(2,8,23,.72),transparent 45%)}.hero-copy{position:relative;z-index:2;width:min(760px,45vw);margin-inline-start:6.5vw}.eyebrow,.kicker,.response-copy>span,.cta-copy>span{font-weight:700;font-size:14px;letter-spacing:.25em;color:var(--cyan)}.eyebrow i{display:inline-block;width:7px;height:7px;background:#20dfc0;border-radius:50%;margin:0 18px}.hero-copy h1,.copy h2,.section-head h2,.response h2,.value h2,.cta h2{font-size:clamp(48px,4.7vw,86px);line-height:1.08;margin:24px 0 22px;font-weight:700}.hero-copy em,.copy em,.section-head em,.response em,.value em,.cta em{font-style:normal;color:var(--cyan)}.hero-copy p,.copy p,.card p,.response p,.value p,.cta p{color:var(--muted);font-size:19px;line-height:1.9}.hero-actions{display:flex;gap:14px;margin-top:28px}.primary,.ghost{padding:17px 26px;border-radius:14px;font-weight:700;text-decoration:none}.primary{background:#237df4;color:white}.ghost{border:1px solid #27435e;color:white}.hero-note{position:absolute;z-index:2;bottom:8%;margin-inline-start:6.5vw;border-inline-start:2px solid var(--cyan);padding-inline-start:18px;display:grid;gap:5px}.hero-note span{color:var(--muted)}.story,.passive{max-width:1500px;margin:auto;padding:150px 6vw;display:grid;grid-template-columns:1fr 1.1fr;gap:7vw;align-items:center}.num{display:inline-grid;place-items:center;width:54px;height:54px;border:1px solid #173855;border-radius:50%;color:#59b9ff;margin-inline-end:18px}.visual{border:1px solid #153a58;border-radius:32px;overflow:hidden;position:relative}.visual img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}.scenarios{padding:120px 6vw 150px;max-width:1700px;margin:auto}.section-head{text-align:center;max-width:1100px;margin:0 auto 70px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{height:620px;border-radius:28px;overflow:hidden;position:relative;border:1px solid #153a58}.card img{width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,8,23,.98),rgba(2,8,23,.05) 68%)}.card-copy{position:absolute;bottom:0;padding:34px}.card-copy>span{color:var(--cyan);font-weight:700;font-size:12px;letter-spacing:.2em}.card h3{font-size:28px;margin:12px 0}.card p{font-size:16px;margin:0}.passive{border-top:1px solid #0d2940;border-bottom:1px solid #0d2940}.passive .visual:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 45%,rgba(65,194,255,.18) 50%,transparent 55%);transform:translateX(-120%);animation:scan 5s infinite}.mini{display:flex;gap:18px;align-items:center;margin-top:30px;color:#dcecff}.mini i{width:5px;height:5px;background:#21d9c2;border-radius:50%}@keyframes scan{60%,100%{transform:translateX(120%)}}.response,.cta{height:700px;position:relative;display:flex;align-items:center;border-bottom:1px solid #14324c}.response-copy,.cta-copy{position:relative;z-index:2;width:min(700px,42vw);margin-inline-start:8vw}.value{padding:150px 7vw;text-align:center}.value-inner{max-width:1100px;margin:auto}.value p{max-width:800px;margin:20px auto}.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:900px){.ind-hero{min-height:760px}.hero-copy,.response-copy,.cta-copy{width:auto;margin:0 7vw}.hero-copy h1,.copy h2,.section-head h2,.response h2,.value h2,.cta h2{font-size:42px}.story,.passive{grid-template-columns:1fr;padding:90px 6vw}.cards{grid-template-columns:1fr}.card{height:520px}.response,.cta{height:650px}.hero-note{display:none}.hero-copy p,.copy p{font-size:17px}}@media(max-width:600px){.hero-actions{flex-direction:column;align-items:stretch}.ind-hero{min-height:720px}.ind-hero>img{object-position:65% center}.eyebrow{font-size:10px}.hero-copy h1,.copy h2,.section-head h2,.response h2,.value h2,.cta h2{font-size:34px}.response-copy,.cta-copy{width:86vw}.mini{flex-wrap:wrap}}


/* =========================================================
   INDIVIDUALS HERO — PREMIUM FAMILY / PEACE OF MIND
   Hero only. Header, footer and completed sections untouched.
   ========================================================= */
.ind-hero{
  min-height:700px;
  height:min(790px,calc(100vh - 96px));
  overflow:hidden;
  isolation:isolate;
}
.ind-hero>img{
  inset:-3%;
  width:106%;
  height:106%;
  object-position:center 50%;
  filter:brightness(1.04) saturate(1.06) contrast(1.025) warmth(1);
  transform:scale(1.015);
  will-change:transform,filter;
  animation:indHeroBreath 12s ease-in-out infinite alternate;
}
.ind-hero .veil{
  z-index:1;
  background:
    radial-gradient(circle at 61% 46%,rgba(255,194,118,.105),transparent 21%),
    radial-gradient(circle at 73% 42%,rgba(74,205,255,.10),transparent 27%),
    linear-gradient(90deg,rgba(2,8,23,.92) 0%,rgba(2,8,23,.70) 34%,rgba(2,8,23,.15) 67%,rgba(2,8,23,.06) 100%),
    linear-gradient(0deg,rgba(2,8,23,.50),transparent 46%);
}
[dir=rtl] .ind-hero .veil{
  background:
    radial-gradient(circle at 39% 46%,rgba(255,194,118,.105),transparent 21%),
    radial-gradient(circle at 27% 42%,rgba(74,205,255,.10),transparent 27%),
    linear-gradient(270deg,rgba(2,8,23,.92) 0%,rgba(2,8,23,.70) 34%,rgba(2,8,23,.15) 67%,rgba(2,8,23,.06) 100%),
    linear-gradient(0deg,rgba(2,8,23,.50),transparent 46%);
}
.hero-copy{
  width:min(670px,43vw);
  margin-inline-start:6.2vw;
}
.hero-copy .eyebrow{
  font-size:11px;
  letter-spacing:.22em;
  opacity:.92;
}
.hero-copy h1{
  max-width:670px;
  margin:18px 0 18px;
  font-size:clamp(40px,3.65vw,62px);
  line-height:1.14;
  letter-spacing:-.025em;
  text-wrap:balance;
}
[dir=rtl] .hero-copy h1{
  line-height:1.30;
  letter-spacing:0;
  font-size:clamp(38px,3.35vw,56px);
}
.hero-copy h1 em{
  background:linear-gradient(90deg,#8de9ff,#55d8ff 46%,#399eff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:180% 100%;
  animation:indHeroTextGlow 4.5s ease-in-out infinite alternate;
}
.hero-copy p{
  max-width:620px;
  margin:0;
  color:#c2cee0;
  font-size:16px;
  line-height:1.85;
}
.hero-actions{
  margin-top:24px;
  gap:12px;
  align-items:center;
}
.hero-actions .primary,
.hero-actions .ghost{
  position:relative;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:15px;
  font-size:14px;
  overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
.hero-actions .primary{
  background:linear-gradient(135deg,#268cff,#2368e9);
  border:1px solid rgba(141,220,255,.34);
  box-shadow:0 13px 32px rgba(35,111,238,.25),inset 0 1px 0 rgba(255,255,255,.20);
}
.hero-actions .primary:before{
  content:"";
  position:absolute;
  top:-130%;left:-45%;
  width:30%;height:360%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:rotate(18deg);
  transition:left .7s ease;
}
.hero-actions .primary:hover:before{left:125%}
.hero-actions .primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(35,111,238,.34),0 0 26px rgba(73,197,255,.11);
}
.hero-actions .ghost{
  background:rgba(5,18,38,.32);
  border:1px solid rgba(125,193,231,.25);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#e8f3ff;
}
.hero-actions .ghost:hover{
  transform:translateY(-2px);
  border-color:rgba(90,215,255,.50);
  background:rgba(14,42,70,.42);
}

/* Live visual layer around the elevator */
.hero-live{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.hero-sensor{
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  background:#62dcff;
  box-shadow:0 0 13px #45caff;
  opacity:.72;
  animation:indSensorPulse 3s ease-out infinite;
}
[dir=ltr] .hero-sensor.s1{left:63%;top:31%}
[dir=ltr] .hero-sensor.s2{left:72%;top:48%;animation-delay:-1s}
[dir=ltr] .hero-sensor.s3{left:66%;top:66%;animation-delay:-2s}
[dir=rtl] .hero-sensor.s1{right:63%;top:31%}
[dir=rtl] .hero-sensor.s2{right:72%;top:48%;animation-delay:-1s}
[dir=rtl] .hero-sensor.s3{right:66%;top:66%;animation-delay:-2s}
.hero-data-line{
  position:absolute;
  height:1px;
  width:11%;
  opacity:.32;
  background:linear-gradient(90deg,transparent,#62dcff,transparent);
  filter:drop-shadow(0 0 6px rgba(98,220,255,.6));
  animation:indDataFlow 4.2s ease-in-out infinite;
}
[dir=ltr] .hero-data-line.dl1{left:61%;top:39%;transform:rotate(-12deg)}
[dir=ltr] .hero-data-line.dl2{left:67%;top:59%;transform:rotate(9deg);animation-delay:-2s}
[dir=rtl] .hero-data-line.dl1{right:61%;top:39%;transform:rotate(12deg)}
[dir=rtl] .hero-data-line.dl2{right:67%;top:59%;transform:rotate(-9deg);animation-delay:-2s}
.hero-status{
  position:absolute;
  top:25%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(101,216,255,.20);
  background:rgba(3,14,31,.40);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#dcecff;
  font-weight:600;font-size:9px;line-height:1;
  letter-spacing:.14em;
  opacity:.72;
}
[dir=ltr] .hero-status{left:68%}
[dir=rtl] .hero-status{right:68%}
.hero-status i{
  width:6px;height:6px;border-radius:50%;
  background:#28dfbd;
  box-shadow:0 0 12px #28dfbd;
}
.hero-copy.reveal.visible{
  animation:indHeroCopyIn .85s cubic-bezier(.2,.78,.2,1) both;
}

@keyframes indHeroBreath{
  from{transform:scale(1.015) translate3d(0,0,0);filter:brightness(1.04) saturate(1.06) contrast(1.025)}
  to{transform:scale(1.055) translate3d(-.35%,-.25%,0);filter:brightness(1.10) saturate(1.09) contrast(1.02)}
}
@keyframes indHeroTextGlow{
  from{background-position:100% 50%}
  to{background-position:0% 50%}
}
@keyframes indSensorPulse{
  0%{box-shadow:0 0 0 0 rgba(98,220,255,.38),0 0 13px #45caff}
  70%{box-shadow:0 0 0 12px rgba(98,220,255,0),0 0 19px #45caff}
  100%{box-shadow:0 0 0 0 rgba(98,220,255,0),0 0 13px #45caff}
}
@keyframes indDataFlow{
  0%,100%{opacity:.15;filter:drop-shadow(0 0 3px rgba(98,220,255,.3))}
  50%{opacity:.58;filter:drop-shadow(0 0 9px rgba(98,220,255,.8))}
}
@keyframes indHeroCopyIn{
  from{opacity:0;transform:translateY(26px);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
@media(max-width:900px){
  .hero-copy{width:auto;margin-inline:7vw}
  .hero-live{opacity:.68}
  .hero-status{display:none}
}
@media(max-width:600px){
  .ind-hero{min-height:700px}
  .ind-hero .veil,
  [dir=rtl] .ind-hero .veil{
    background:linear-gradient(0deg,rgba(2,8,23,.94) 0%,rgba(2,8,23,.68) 52%,rgba(2,8,23,.12) 100%);
  }
  .hero-copy{align-self:flex-end;margin-bottom:62px}
  .hero-copy h1,[dir=rtl] .hero-copy h1{font-size:34px}
  .hero-copy p{font-size:15px}
  .hero-live{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ind-hero>img,.hero-copy h1 em,.hero-sensor,.hero-data-line,.hero-copy.reveal.visible{
    animation:none!important;
  }
}


/* =========================================================
   HERO ALIGNMENT V2 — same visual composition in AR / EN
   ========================================================= */
.hero-live,
.hero-sensor,
.hero-data-line,
.hero-status{
  display:none!important;
}

/* Keep image warm and elevator clearly visible */
.ind-hero>img{
  filter:brightness(1.10) saturate(1.07) contrast(1.02)!important;
}

/* Both languages use the same physical copy area.
   Direction changes text flow only — not the composition. */
.ind-hero .hero-copy,
[dir="rtl"] .ind-hero .hero-copy,
[dir="ltr"] .ind-hero .hero-copy{
  position:relative;
  z-index:3;
  width:min(690px,42vw)!important;
  margin-inline-start:6.2vw!important;
  margin-inline-end:0!important;
  transform:translateY(58px);
  align-self:center;
}

/* RTL mirrors the block to the right while keeping identical sizing/vertical rhythm */
[dir="rtl"] .ind-hero .hero-copy{
  margin-inline-start:0!important;
  margin-inline-end:6.2vw!important;
}

/* Slightly smaller heading so neither language overwhelms the elevator */
.ind-hero .hero-copy h1{
  max-width:690px!important;
  font-size:clamp(38px,3.25vw,56px)!important;
  line-height:1.13!important;
  margin:16px 0 17px!important;
}
[dir="rtl"] .ind-hero .hero-copy h1{
  font-size:clamp(37px,3.05vw,53px)!important;
  line-height:1.30!important;
}
.ind-hero .hero-copy p{
  max-width:610px!important;
  font-size:15.5px!important;
  line-height:1.8!important;
}
.ind-hero .hero-actions{
  margin-top:22px!important;
}

/* Text-side shading only; center/elevator stays luminous */
.ind-hero .veil{
  background:
    radial-gradient(circle at 69% 46%,rgba(255,196,125,.10),transparent 23%),
    linear-gradient(90deg,rgba(2,8,23,.89) 0%,rgba(2,8,23,.66) 31%,rgba(2,8,23,.22) 55%,rgba(2,8,23,.05) 100%)!important;
}
[dir="rtl"] .ind-hero .veil{
  background:
    radial-gradient(circle at 31% 46%,rgba(255,196,125,.10),transparent 23%),
    linear-gradient(270deg,rgba(2,8,23,.89) 0%,rgba(2,8,23,.66) 31%,rgba(2,8,23,.22) 55%,rgba(2,8,23,.05) 100%)!important;
}

@media(max-width:900px){
  .ind-hero .hero-copy,
  [dir="rtl"] .ind-hero .hero-copy,
  [dir="ltr"] .ind-hero .hero-copy{
    width:auto!important;
    margin-inline:7vw!important;
    transform:translateY(34px);
  }
}
@media(max-width:600px){
  .ind-hero .hero-copy,
  [dir="rtl"] .ind-hero .hero-copy,
  [dir="ltr"] .ind-hero .hero-copy{
    transform:none;
  }
}


/* =========================================================
   HERO SAME-LAYOUT V3
   Same physical copy position in Arabic and English.
   RTL changes text flow only — never the hero geometry.
   ========================================================= */

/* Kill every earlier RTL geometry override */
.ind-hero .hero-copy,
[dir="ltr"] .ind-hero .hero-copy,
[dir="rtl"] .ind-hero .hero-copy{
  position:relative!important;
  z-index:4!important;

  width:min(690px,42vw)!important;
  max-width:690px!important;

  margin-left:6.2vw!important;
  margin-right:auto!important;
  margin-inline-start:unset!important;
  margin-inline-end:unset!important;

  transform:translateY(72px)!important;
  align-self:center!important;
}

/* Same block — only typography direction changes */
[dir="ltr"] .ind-hero .hero-copy{
  direction:ltr!important;
  text-align:left!important;
}

[dir="rtl"] .ind-hero .hero-copy{
  direction:rtl!important;
  text-align:right!important;
}

/* Same physical overlay in BOTH languages.
   Keep left/text side darker and elevator brighter. */
.ind-hero .veil,
[dir="ltr"] .ind-hero .veil,
[dir="rtl"] .ind-hero .veil{
  background:
    radial-gradient(circle at 72% 47%,rgba(255,198,132,.12),transparent 23%),
    radial-gradient(circle at 76% 42%,rgba(66,205,255,.07),transparent 28%),
    linear-gradient(90deg,
      rgba(2,8,23,.90) 0%,
      rgba(2,8,23,.70) 28%,
      rgba(2,8,23,.43) 43%,
      rgba(2,8,23,.15) 61%,
      rgba(2,8,23,.04) 100%
    )!important;
}

/* Equal title width and visual rhythm */
.ind-hero .hero-copy h1,
[dir="ltr"] .ind-hero .hero-copy h1,
[dir="rtl"] .ind-hero .hero-copy h1{
  width:100%!important;
  max-width:680px!important;
  margin:15px 0 18px!important;
}

[dir="ltr"] .ind-hero .hero-copy h1{
  font-size:clamp(37px,3.12vw,54px)!important;
  line-height:1.16!important;
}

[dir="rtl"] .ind-hero .hero-copy h1{
  font-size:clamp(36px,2.9vw,51px)!important;
  line-height:1.34!important;
}

/* Keep description in the same visual column */
.ind-hero .hero-copy p,
[dir="ltr"] .ind-hero .hero-copy p,
[dir="rtl"] .ind-hero .hero-copy p{
  width:100%!important;
  max-width:610px!important;
  margin-left:0!important;
  margin-right:0!important;
  font-size:15.5px!important;
  line-height:1.82!important;
}

/* Same buttons geometry; RTL only reverses reading/order naturally */
.ind-hero .hero-actions{
  width:100%!important;
  max-width:610px!important;
  margin-top:22px!important;
  justify-content:flex-start!important;
}

[dir="rtl"] .ind-hero .hero-actions{
  justify-content:flex-start!important;
}

/* Explicitly remove any old visual circles / awareness overlays */
.ind-hero .hero-live,
.ind-hero .hero-sensor,
.ind-hero .hero-data-line,
.ind-hero .hero-status{
  display:none!important;
}

/* Desktop image stays identical regardless of language */
.ind-hero>img,
[dir="ltr"] .ind-hero>img,
[dir="rtl"] .ind-hero>img{
  object-position:center 50%!important;
  filter:brightness(1.10) saturate(1.07) contrast(1.02)!important;
}

/* Tablet */
@media(max-width:1100px){
  .ind-hero .hero-copy,
  [dir="ltr"] .ind-hero .hero-copy,
  [dir="rtl"] .ind-hero .hero-copy{
    width:min(620px,48vw)!important;
    margin-left:5vw!important;
    margin-right:auto!important;
    transform:translateY(56px)!important;
  }

  [dir="ltr"] .ind-hero .hero-copy h1{
    font-size:clamp(34px,4vw,48px)!important;
  }

  [dir="rtl"] .ind-hero .hero-copy h1{
    font-size:clamp(33px,3.7vw,46px)!important;
  }
}

/* Mobile can stack, but still no RTL mirroring */
@media(max-width:760px){
  .ind-hero .hero-copy,
  [dir="ltr"] .ind-hero .hero-copy,
  [dir="rtl"] .ind-hero .hero-copy{
    width:auto!important;
    max-width:none!important;
    margin-left:6vw!important;
    margin-right:6vw!important;
    transform:none!important;
    align-self:flex-end!important;
    margin-bottom:54px!important;
  }

  .ind-hero .veil,
  [dir="ltr"] .ind-hero .veil,
  [dir="rtl"] .ind-hero .veil{
    background:
      linear-gradient(0deg,
        rgba(2,8,23,.94) 0%,
        rgba(2,8,23,.76) 44%,
        rgba(2,8,23,.23) 72%,
        rgba(2,8,23,.06) 100%
      )!important;
  }

  .ind-hero .hero-actions,
  [dir="rtl"] .ind-hero .hero-actions{
    max-width:none!important;
    flex-wrap:wrap!important;
  }
}


/* =========================================================
   INDIVIDUALS HERO — PREMIUM UNIFIED V4
   Arabic and English occupy the SAME physical area:
   over the elevator side. Only text direction changes.
   ========================================================= */

.ind-hero{
  min-height:700px!important;
  height:min(790px,calc(100vh - 96px))!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  isolation:isolate!important;
}

/* Image remains the hero — warmer family side + brighter elevator */
.ind-hero>img,
[dir="ltr"] .ind-hero>img,
[dir="rtl"] .ind-hero>img{
  position:absolute!important;
  inset:-2%!important;
  width:104%!important;
  height:104%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:scale(1.018)!important;
  filter:brightness(1.09) saturate(1.06) contrast(1.025)!important;
  animation:individualsHeroDrift 14s ease-in-out infinite alternate!important;
}

/* One fixed lighting treatment for both languages.
   Left family stays warm and readable, elevator gets a soft premium lift. */
.ind-hero .veil,
[dir="ltr"] .ind-hero .veil,
[dir="rtl"] .ind-hero .veil{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 77% 45%,rgba(74,205,255,.11),transparent 23%),
    radial-gradient(circle at 29% 48%,rgba(255,188,112,.055),transparent 27%),
    linear-gradient(90deg,
      rgba(2,8,23,.23) 0%,
      rgba(2,8,23,.18) 40%,
      rgba(2,8,23,.32) 58%,
      rgba(2,8,23,.68) 77%,
      rgba(2,8,23,.84) 100%
    )!important;
}

/* Soft animated highlight on elevator glass — no circle, no badge. */
.ind-hero .elevator-light{
  position:absolute;
  z-index:2;
  top:6%;
  right:8.5%;
  width:34%;
  height:86%;
  pointer-events:none;
  opacity:.64;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 37%,
      rgba(116,220,255,.035) 44%,
      rgba(182,237,255,.12) 50%,
      rgba(86,195,255,.04) 56%,
      transparent 64%,
      transparent 100%
    );
  transform:translateX(-16%);
  animation:elevatorGlassSweep 7.5s ease-in-out infinite;
  mix-blend-mode:screen;
}

/* SAME physical block in AR and EN: right/elevator side */
.ind-hero .hero-copy,
[dir="ltr"] .ind-hero .hero-copy,
[dir="rtl"] .ind-hero .hero-copy{
  position:absolute!important;
  z-index:4!important;
  top:50%!important;
  right:5.4vw!important;
  left:auto!important;
  width:min(650px,39vw)!important;
  max-width:650px!important;
  margin:0!important;
  margin-inline:0!important;
  transform:translateY(-40%)!important;

  padding:28px 30px 26px!important;
  border:1px solid rgba(115,188,226,.11)!important;
  border-radius:26px!important;
  background:
    linear-gradient(135deg,rgba(3,13,29,.46),rgba(3,13,29,.26))!important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}

/* Direction changes; geometry does not */
[dir="ltr"] .ind-hero .hero-copy{
  direction:ltr!important;
  text-align:left!important;
}
[dir="rtl"] .ind-hero .hero-copy{
  direction:rtl!important;
  text-align:right!important;
}

.ind-hero .hero-copy .eyebrow{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 14px!important;
  font-size:10px!important;
  line-height:1.2!important;
  letter-spacing:.20em!important;
  color:#6fe0ff!important;
  white-space:nowrap!important;
}
[dir="rtl"] .ind-hero .hero-copy .eyebrow{
  justify-content:flex-start!important;
}

/* Better editorial hierarchy: 2 balanced statements, not a giant wall of type */
.ind-hero .hero-copy h1,
[dir="ltr"] .ind-hero .hero-copy h1,
[dir="rtl"] .ind-hero .hero-copy h1{
  width:100%!important;
  max-width:none!important;
  margin:0 0 18px!important;
  font-weight:700!important;
  text-wrap:balance!important;
  letter-spacing:-.02em!important;
}

[dir="ltr"] .ind-hero .hero-copy h1{
  font-size:clamp(34px,2.55vw,48px)!important;
  line-height:1.13!important;
}
[dir="rtl"] .ind-hero .hero-copy h1{
  font-size:clamp(34px,2.48vw,47px)!important;
  line-height:1.30!important;
  letter-spacing:0!important;
}

/* Accent sentence feels like a second thought, not one continuous giant headline */
.ind-hero .hero-copy h1 em{
  display:block!important;
  margin-top:8px!important;
  font-style:normal!important;
  background:linear-gradient(90deg,#7ee7ff,#56d5ff 48%,#3597ff)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

.ind-hero .hero-copy p{
  width:100%!important;
  max-width:570px!important;
  margin:0!important;
  font-size:15px!important;
  line-height:1.85!important;
  color:#c2cfe0!important;
}

/* Premium actions — compact, equal height, less bulky */
.ind-hero .hero-actions{
  width:100%!important;
  max-width:570px!important;
  margin-top:22px!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  justify-content:flex-start!important;
}

.ind-hero .hero-actions .primary,
.ind-hero .hero-actions .ghost{
  min-height:50px!important;
  padding:0 18px!important;
  border-radius:14px!important;
  font-size:13.5px!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

.ind-hero .hero-actions .primary{
  background:linear-gradient(135deg,#2c91ff,#2469e9)!important;
  border:1px solid rgba(135,218,255,.30)!important;
  box-shadow:
    0 12px 28px rgba(36,105,233,.24),
    inset 0 1px 0 rgba(255,255,255,.19)!important;
}

.ind-hero .hero-actions .ghost{
  background:rgba(5,18,38,.38)!important;
  border:1px solid rgba(128,190,225,.24)!important;
  color:#eef7ff!important;
  backdrop-filter:blur(8px)!important;
}

/* No old visual gadgets */
.ind-hero .hero-live,
.ind-hero .hero-sensor,
.ind-hero .hero-data-line,
.ind-hero .hero-status{
  display:none!important;
}

/* reveal, slightly slower / more premium */
.ind-hero .hero-copy.reveal.visible{
  animation:individualsHeroCopy 900ms cubic-bezier(.19,.77,.22,1) both!important;
}

@keyframes individualsHeroDrift{
  from{transform:scale(1.018) translate3d(0,0,0)}
  to{transform:scale(1.05) translate3d(-.25%,-.15%,0)}
}

@keyframes elevatorGlassSweep{
  0%,20%{transform:translateX(-24%);opacity:.12}
  48%{opacity:.62}
  72%,100%{transform:translateX(22%);opacity:.12}
}

@keyframes individualsHeroCopy{
  from{opacity:0;filter:blur(5px);transform:translateY(-34%) translateX(18px)}
  to{opacity:1;filter:none;transform:translateY(-40%) translateX(0)}
}

/* Desktop refinements */
@media(max-width:1180px){
  .ind-hero .hero-copy,
  [dir="ltr"] .ind-hero .hero-copy,
  [dir="rtl"] .ind-hero .hero-copy{
    right:4.2vw!important;
    width:min(600px,44vw)!important;
    padding:24px 25px 23px!important;
  }
  [dir="ltr"] .ind-hero .hero-copy h1{
    font-size:clamp(32px,3.1vw,43px)!important;
  }
  [dir="rtl"] .ind-hero .hero-copy h1{
    font-size:clamp(32px,3vw,42px)!important;
  }
}

/* Tablet / mobile: stack over lower part without language mirroring */
@media(max-width:820px){
  .ind-hero{
    min-height:760px!important;
  }

  .ind-hero .veil,
  [dir="ltr"] .ind-hero .veil,
  [dir="rtl"] .ind-hero .veil{
    background:
      linear-gradient(0deg,
        rgba(2,8,23,.94) 0%,
        rgba(2,8,23,.78) 43%,
        rgba(2,8,23,.19) 70%,
        rgba(2,8,23,.05) 100%
      )!important;
  }

  .ind-hero .hero-copy,
  [dir="ltr"] .ind-hero .hero-copy,
  [dir="rtl"] .ind-hero .hero-copy{
    top:auto!important;
    bottom:38px!important;
    right:6vw!important;
    left:6vw!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    padding:21px 20px 20px!important;
  }

  .ind-hero .hero-copy.reveal.visible{
    animation:none!important;
  }

  .ind-hero .elevator-light{
    display:none!important;
  }

  .ind-hero .hero-actions{
    flex-wrap:wrap!important;
  }
}

@media(max-width:560px){
  .ind-hero .hero-copy h1,
  [dir="ltr"] .ind-hero .hero-copy h1,
  [dir="rtl"] .ind-hero .hero-copy h1{
    font-size:31px!important;
  }
  .ind-hero .hero-copy p{
    font-size:14px!important;
  }
  .ind-hero .hero-actions .primary,
  .ind-hero .hero-actions .ghost{
    width:100%!important;
  }
}


/* =========================================================
   INDIVIDUALS — SECTION 01 / REMOTE AWARENESS — PREMIUM V6
   ========================================================= */
.story#peace{
  max-width:1600px!important;
  padding:138px 6vw 150px!important;
  grid-template-columns:minmax(0,.92fr) minmax(620px,1.18fr)!important;
  gap:7vw!important;
  position:relative!important;
}
.story#peace:before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  left:1%;top:17%;
  background:radial-gradient(circle,rgba(35,137,255,.075),transparent 68%);
  filter:blur(8px);
  pointer-events:none;
}
.story#peace .copy{
  max-width:650px;
  position:relative;
  z-index:2;
}
.story#peace .kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px!important;
  letter-spacing:.18em!important;
  margin-bottom:16px;
  color:#61dcff!important;
}
.story#peace .kicker:before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:#27dfc0;
  box-shadow:0 0 14px rgba(39,223,192,.7);
}
.story#peace .copy h2{
  font-size:clamp(44px,4vw,72px)!important;
  line-height:1.10!important;
  margin:18px 0 24px!important;
  letter-spacing:-.028em;
  text-wrap:balance;
}
[dir="rtl"] .story#peace .copy h2{
  font-size:clamp(43px,3.75vw,68px)!important;
  line-height:1.26!important;
  letter-spacing:0;
}
.story#peace .copy h2 em{
  display:block;
  margin-top:7px;
  background:linear-gradient(90deg,#7de7ff,#55d4ff 45%,#2e94ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.story#peace .copy p{
  max-width:610px;
  font-size:18px!important;
  line-height:1.9!important;
  color:#aebdd2!important;
  margin:0;
}

/* Stronger image card */
.story#peace .visual{
  min-height:565px;
  border-radius:34px!important;
  border:1px solid rgba(82,216,255,.26)!important;
  background:#061226;
  box-shadow:
    0 38px 90px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 45px rgba(35,137,255,.075)!important;
  overflow:hidden!important;
  isolation:isolate;
  transform:translateZ(0);
}
.story#peace .visual:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,10,24,.02),rgba(3,10,24,.17)),
    radial-gradient(circle at 68% 44%,rgba(83,211,255,.10),transparent 28%);
}
.story#peace .visual:after{
  content:"";
  position:absolute;
  z-index:3;
  top:-18%;left:-34%;
  width:28%;height:140%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(165,232,255,.16),transparent);
  transform:rotate(12deg);
  animation:peaceCardSweep 7.8s ease-in-out infinite;
}
.story#peace .visual img{
  height:100%!important;
  min-height:565px!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:brightness(1.06) saturate(1.08) contrast(1.025);
  transform:scale(1.025);
  animation:peaceImageBreath 13s ease-in-out infinite alternate;
  will-change:transform,filter;
}
.story#peace .visual:hover{
  border-color:rgba(82,216,255,.44)!important;
  box-shadow:
    0 44px 105px rgba(0,0,0,.39),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 58px rgba(35,137,255,.11)!important;
}
.story#peace .copy.reveal.visible{
  animation:peaceCopyIn .85s cubic-bezier(.2,.75,.2,1) both;
}
.story#peace .visual.reveal.visible{
  animation:peaceVisualIn .95s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes peaceImageBreath{
  from{transform:scale(1.025) translate3d(0,0,0);filter:brightness(1.04) saturate(1.06)}
  to{transform:scale(1.065) translate3d(-.35%,-.2%,0);filter:brightness(1.10) saturate(1.10)}
}
@keyframes peaceCardSweep{
  0%,28%{left:-34%;opacity:0}
  42%{opacity:.72}
  67%,100%{left:122%;opacity:0}
}
@keyframes peaceCopyIn{
  from{opacity:0;transform:translateY(24px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes peaceVisualIn{
  from{opacity:0;transform:translateY(34px) scale(.975);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
@media(max-width:1000px){
  .story#peace{grid-template-columns:1fr!important;padding:100px 6vw!important;gap:44px!important}
  .story#peace .copy{max-width:760px}
  .story#peace .visual{min-height:480px}
  .story#peace .visual img{min-height:480px!important}
}
@media(max-width:600px){
  .story#peace{padding:78px 6vw!important}
  .story#peace .copy h2,[dir="rtl"] .story#peace .copy h2{font-size:36px!important}
  .story#peace .copy p{font-size:16px!important}
  .story#peace .visual{min-height:360px;border-radius:24px!important}
  .story#peace .visual img{min-height:360px!important}
}
@media(prefers-reduced-motion:reduce){
  .story#peace .visual img,.story#peace .visual:after,.story#peace .copy.reveal.visible,.story#peace .visual.reveal.visible{animation:none!important}
}


/* =========================================================
   SCENARIOS — LIVE IMAGE CARDS V7
   Makes the existing three images feel alive without
   changing approved copy, layout, header or footer.
   ========================================================= */

.scenarios .cards{
  perspective:1400px;
}

.scenario-card{
  isolation:isolate;
  transform-style:preserve-3d;
  transition:
    transform .55s cubic-bezier(.2,.75,.2,1),
    border-color .45s ease,
    box-shadow .55s ease;
  box-shadow:
    0 22px 65px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);
  background:#06101f;
}

.scenario-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:3;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 39%,
      rgba(116,220,255,.04) 45%,
      rgba(173,237,255,.22) 50%,
      rgba(73,188,255,.05) 55%,
      transparent 61%,
      transparent 100%);
  transform:translateX(-125%);
  animation:scenarioSheen 8s ease-in-out infinite;
  mix-blend-mode:screen;
}

.scenario-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at var(--mx,70%) var(--my,35%),
      rgba(82,216,255,.13),
      transparent 30%);
  opacity:.22;
  transition:opacity .35s ease;
}

.scenario-card img{
  position:relative;
  z-index:0;
  transform:scale(1.025);
  filter:brightness(.96) saturate(1.04) contrast(1.025);
  will-change:transform,filter;
  animation:scenarioImageBreath 11s ease-in-out infinite alternate;
  transition:
    transform .75s cubic-bezier(.2,.75,.2,1),
    filter .55s ease;
}

.scenario-card:nth-child(2) img{animation-delay:-3.5s}
.scenario-card:nth-child(3) img{animation-delay:-7s}

.scenario-card .shade{
  z-index:2;
  background:
    linear-gradient(0deg,
      rgba(2,8,23,.985) 0%,
      rgba(2,8,23,.79) 31%,
      rgba(2,8,23,.12) 72%,
      rgba(2,8,23,.03) 100%);
}

.scenario-card .card-copy{
  z-index:5;
  transform:translateZ(24px);
}

.scenario-card:hover{
  transform:translateY(-9px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  border-color:rgba(76,199,255,.42);
  box-shadow:
    0 34px 82px rgba(0,0,0,.33),
    0 0 42px rgba(45,164,255,.07),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.scenario-card:hover::after{opacity:.72}
.scenario-card:hover img{
  transform:scale(1.075);
  filter:brightness(1.055) saturate(1.09) contrast(1.02);
}

/* Tiny ambient signal points. */
.card-live{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}

.card-live span{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5fe2ff;
  box-shadow:0 0 13px rgba(77,212,255,.9);
  opacity:.0;
  animation:scenarioPulse 5.2s ease-in-out infinite;
}

.card-live span:nth-child(1){left:17%;top:25%}
.card-live span:nth-child(2){right:18%;top:41%;animation-delay:-1.7s}
.card-live span:nth-child(3){left:52%;top:57%;animation-delay:-3.4s}

/* Elderly: calm warm/cyan breathing light around elevator area. */
.elderly-card::after{
  background:
    radial-gradient(circle at var(--mx,76%) var(--my,40%),
      rgba(80,213,255,.14),
      transparent 28%),
    radial-gradient(circle at 67% 55%,
      rgba(255,190,116,.055),
      transparent 34%);
}

/* Emergency: one discreet amber pulse to suggest attention, not danger. */
.emergency-card .card-live span:nth-child(2){
  width:8px;
  height:8px;
  background:#ffb64d;
  box-shadow:0 0 14px rgba(255,178,69,.92);
  animation:scenarioAmberPulse 3.4s ease-in-out infinite;
}
.emergency-card::after{
  background:
    radial-gradient(circle at var(--mx,72%) var(--my,50%),
      rgba(86,215,255,.14),
      transparent 28%),
    radial-gradient(circle at 79% 52%,
      rgba(255,164,57,.065),
      transparent 24%);
}

/* Everyday family: warmer movement and softer light. */
.family-card img{
  filter:brightness(.99) saturate(1.04) contrast(1.02);
}
.family-card::after{
  background:
    radial-gradient(circle at var(--mx,68%) var(--my,42%),
      rgba(83,210,255,.11),
      transparent 30%),
    radial-gradient(circle at 38% 48%,
      rgba(255,199,132,.065),
      transparent 36%);
}

/* Copy rises very slightly on hover, giving depth without moving layout. */
.scenario-card .card-copy{
  transition:transform .55s cubic-bezier(.2,.75,.2,1);
}
.scenario-card:hover .card-copy{
  transform:translateZ(34px) translateY(-4px);
}

/* Heading area entrance remains restrained and premium. */
.scenarios .section-head.visible .num,
.scenarios .section-head.visible .kicker{
  animation:scenarioHeadSmall .65s ease both;
}
.scenarios .section-head.visible h2{
  animation:scenarioHeadTitle .85s cubic-bezier(.2,.78,.2,1) both .08s;
}

@keyframes scenarioImageBreath{
  from{transform:scale(1.025) translate3d(0,0,0)}
  to{transform:scale(1.055) translate3d(-.35%,-.22%,0)}
}

@keyframes scenarioSheen{
  0%,58%{transform:translateX(-125%);opacity:0}
  64%{opacity:.55}
  78%{transform:translateX(125%);opacity:.18}
  100%{transform:translateX(125%);opacity:0}
}

@keyframes scenarioPulse{
  0%,100%{opacity:0;transform:scale(.7)}
  28%{opacity:.18}
  43%{opacity:.9;transform:scale(1)}
  58%{opacity:.12;transform:scale(1.45)}
}

@keyframes scenarioAmberPulse{
  0%,100%{opacity:.16;transform:scale(.85);box-shadow:0 0 8px rgba(255,178,69,.35)}
  48%{opacity:.95;transform:scale(1.08);box-shadow:0 0 20px rgba(255,178,69,.9)}
}

@keyframes scenarioHeadSmall{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

@keyframes scenarioHeadTitle{
  from{opacity:0;transform:translateY(24px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}

@media(max-width:900px){
  .scenario-card:hover{
    transform:translateY(-5px);
  }
}

@media(hover:none){
  .scenario-card:hover{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .scenario-card,
  .scenario-card img,
  .scenario-card::before,
  .card-live span,
  .scenarios .section-head.visible *{
    animation:none!important;
    transition:none!important;
  }
}


/* SCENARIOS TITLE — PREMIUM HIERARCHY V8 */
.scenarios .section-head{
  max-width:1180px;
  margin-bottom:82px;
}
.scenarios .scenario-title{
  margin-top:30px;
  line-height:1.06;
  font-size:clamp(48px,4.15vw,74px);
  font-weight:650;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.scenarios .scenario-title em{
  display:block;
  margin-top:22px;
  font-size:1.13em;
  line-height:1.04;
  font-weight:720;
  letter-spacing:-.045em;
  color:var(--cyan);
}
[dir="rtl"] .scenarios .scenario-title,
[dir="rtl"] .scenarios .scenario-title em{
  letter-spacing:-.025em;
}
[dir="ltr"] .scenarios .scenario-title{
  max-width:980px;
  margin-inline:auto;
  margin-top:30px;
}
@media(max-width:900px){
  .scenarios .section-head{margin-bottom:58px}
  .scenarios .scenario-title{font-size:clamp(38px,7vw,52px)}
  .scenarios .scenario-title em{margin-top:15px}
}
@media(max-width:600px){
  .scenarios .scenario-title{font-size:34px;line-height:1.1}
  .scenarios .scenario-title em{font-size:1.06em;margin-top:13px}
}

/* =========================================================
   Section 03 — Passive monitoring / premium balance v9
   Keep the visual and message at equal visual weight.
   ========================================================= */
.passive{
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(54px,5.5vw,96px);
  padding-top:clamp(110px,8vw,145px);
  padding-bottom:clamp(110px,8vw,145px);
}
.passive .copy{
  max-width:620px;
}
.passive .copy h2{
  font-size:clamp(42px,3.25vw,60px);
  line-height:1.12;
  letter-spacing:-.025em;
  margin:26px 0 24px;
  text-wrap:balance;
}
[dir="rtl"] .passive .copy h2{
  font-size:clamp(43px,3.15vw,59px);
  line-height:1.18;
  letter-spacing:0;
}
.passive .copy p{
  max-width:590px;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.9;
  margin-top:0;
}
.passive .visual{
  width:100%;
  box-shadow:0 28px 80px rgba(0,0,0,.24),0 0 0 1px rgba(82,216,255,.025) inset;
}
.passive .visual img{
  aspect-ratio:16/10;
}
.passive .mini{
  margin-top:26px;
  font-size:15px;
}
@media (max-width:1100px){
  .passive{gap:46px}
  .passive .copy h2{font-size:clamp(38px,4.4vw,50px)}
  [dir="rtl"] .passive .copy h2{font-size:clamp(39px,4.35vw,50px)}
}
@media (max-width:900px){
  .passive{grid-template-columns:1fr;gap:42px}
  .passive .copy{max-width:720px}
  .passive .copy h2,[dir="rtl"] .passive .copy h2{font-size:clamp(36px,7vw,48px)}
}


/* =========================================================
   RESPONSE SECTION — CENTERED HUMAN CONNECTION V10
   Focuses equally on homeowner (left) and maintenance (right)
   while the message sits in the center like the approved reference.
   ========================================================= */
.response.response-centered{
  position:relative!important;
  min-height:760px!important;
  height:min(820px,88vh)!important;
  overflow:hidden!important;
  border-top:1px solid rgba(73,190,255,.10)!important;
  border-bottom:1px solid rgba(73,190,255,.10)!important;
  isolation:isolate!important;
}

.response.response-centered>img{
  position:absolute!important;
  inset:-2%!important;
  width:104%!important;
  height:104%!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:0!important;
  filter:brightness(.93) saturate(1.04) contrast(1.03)!important;
  transform:scale(1.015)!important;
  animation:responseCinematic 14s ease-in-out infinite alternate!important;
}

.response.response-centered .veil{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    linear-gradient(90deg,
      rgba(2,8,23,.13) 0%,
      rgba(2,8,23,.24) 20%,
      rgba(2,8,23,.82) 39%,
      rgba(2,8,23,.94) 50%,
      rgba(2,8,23,.82) 61%,
      rgba(2,8,23,.24) 80%,
      rgba(2,8,23,.13) 100%
    )!important;
}

.response-centered .response-center-panel{
  position:absolute!important;
  z-index:4!important;
  top:50%!important;
  left:50%!important;
  width:min(680px,38vw)!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
  padding:26px 26px 24px!important;
}

.response-centered .response-topline{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:14px!important;
  margin-bottom:18px!important;
}

.response-centered .response-num{
  width:54px!important;
  height:54px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(77,193,255,.28)!important;
  border-radius:50%!important;
  font-size:14px!important;
  color:#54cfff!important;
  background:rgba(5,18,38,.28)!important;
  box-shadow:inset 0 0 24px rgba(48,158,255,.03)!important;
}

.response-centered .response-kicker{
  font-size:11px!important;
  font-weight:750!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  color:#5ddcff!important;
}

[dir="rtl"] .response-centered .response-kicker{
  letter-spacing:.04em!important;
  text-transform:none!important;
}

.response-centered h2{
  margin:0!important;
  font-size:clamp(39px,3.05vw,56px)!important;
  line-height:1.10!important;
  font-weight:690!important;
  letter-spacing:-.035em!important;
  color:#f4f8ff!important;
  text-wrap:balance!important;
}

[dir="rtl"] .response-centered h2{
  line-height:1.27!important;
  letter-spacing:-.015em!important;
}

.response-centered h2 em{
  display:block!important;
  margin-top:10px!important;
  font-style:normal!important;
  font-size:1.02em!important;
  background:linear-gradient(90deg,#74e2ff,#4fd2ff 48%,#2c91ff)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

.response-centered .response-rule{
  width:52px!important;
  height:2px!important;
  margin:24px auto 20px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#45d6ff,transparent)!important;
  box-shadow:0 0 18px rgba(69,214,255,.42)!important;
}

.response-centered p{
  width:min(560px,100%)!important;
  margin:0 auto!important;
  font-size:15px!important;
  line-height:1.9!important;
  color:#bac8db!important;
}

.response-centered .response-benefits{
  margin:28px auto 0!important;
  width:min(520px,100%)!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:0!important;
  align-items:stretch!important;
}

.response-centered .response-benefit{
  position:relative!important;
  min-height:92px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
}

.response-centered .response-benefit:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  top:14px!important;
  bottom:14px!important;
  right:0!important;
  width:1px!important;
  background:linear-gradient(180deg,transparent,rgba(72,205,255,.48),transparent)!important;
}

[dir="rtl"] .response-centered .response-benefit:not(:last-child)::after{
  right:auto!important;
  left:0!important;
}

.response-centered .response-icon{
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(76,197,255,.35)!important;
  color:#56dbff!important;
  font-size:18px!important;
  background:rgba(4,17,38,.40)!important;
  box-shadow:0 0 20px rgba(51,173,255,.05)!important;
}

.response-centered .response-benefit b{
  font-size:12px!important;
  line-height:1.35!important;
  color:#d6e4f3!important;
  font-weight:600!important;
}

.response-centered .response-center-panel.visible{
  animation:responseCenterReveal .95s cubic-bezier(.2,.78,.2,1) both!important;
}

@keyframes responseCinematic{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to{transform:scale(1.045) translate3d(-.18%,-.10%,0)}
}

@keyframes responseCenterReveal{
  from{opacity:0;filter:blur(5px);transform:translate(-50%,-45%)}
  to{opacity:1;filter:none;transform:translate(-50%,-50%)}
}

@media(max-width:1100px){
  .response-centered .response-center-panel{
    width:min(650px,46vw)!important;
  }
  .response-centered h2{
    font-size:clamp(34px,4vw,47px)!important;
  }
}

@media(max-width:820px){
  .response.response-centered{
    min-height:780px!important;
  }
  .response.response-centered .veil{
    background:
      linear-gradient(0deg,
        rgba(2,8,23,.94) 0%,
        rgba(2,8,23,.82) 50%,
        rgba(2,8,23,.18) 100%
      )!important;
  }
  .response-centered .response-center-panel{
    top:auto!important;
    bottom:28px!important;
    left:6vw!important;
    right:6vw!important;
    width:auto!important;
    transform:none!important;
    padding:20px 16px!important;
  }
  .response-centered .response-center-panel.visible{
    animation:none!important;
  }
  .response-centered h2{
    font-size:34px!important;
  }
}

@media(max-width:560px){
  .response-centered .response-benefits{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .response-centered .response-benefit{
    min-height:auto!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    padding:8px 0!important;
  }
  .response-centered .response-benefit::after{
    display:none!important;
  }
  .response-centered .response-icon{
    width:34px!important;
    height:34px!important;
  }
}


/* =========================================================
   RESPONSE V11 — approved cinematic balance
   Keep both people clearly visible; warm gold architectural lines
   frame the centered message without changing the source image.
   ========================================================= */
.response.response-centered>img{
  filter:brightness(1.08) saturate(1.08) contrast(1.04)!important;
  object-position:center center!important;
}
.response.response-centered .veil{
  background:
    linear-gradient(90deg,
      rgba(2,8,23,.05) 0%,
      rgba(2,8,23,.10) 24%,
      rgba(2,8,23,.74) 38%,
      rgba(2,8,23,.92) 50%,
      rgba(2,8,23,.73) 62%,
      rgba(2,8,23,.08) 77%,
      rgba(2,8,23,.02) 100%)!important;
}
.response.response-centered::before,
.response.response-centered::after{
  content:"";
  position:absolute;
  z-index:3;
  top:8%;
  bottom:7%;
  width:2px;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,210,129,.28) 7%,
    rgba(255,190,83,.98) 22%,
    rgba(255,231,176,.96) 50%,
    rgba(255,176,65,.95) 79%,
    transparent 100%);
  box-shadow:0 0 7px rgba(255,184,69,.72),0 0 24px rgba(255,156,39,.28);
  opacity:.92;
}
.response.response-centered::before{left:30.2%;}
.response.response-centered::after{right:30.2%;}
.response-centered .response-center-panel{width:min(650px,35vw)!important;}
.response-centered p{width:min(540px,100%)!important;}
@media(max-width:1100px){
  .response.response-centered::before{left:28%;}
  .response.response-centered::after{right:28%;}
}
@media(max-width:820px){
  .response.response-centered::before,.response.response-centered::after{display:none;}
}


/* =========================================================
   SECTION 04 — PREMIUM STAGGERED VALUE REVEAL V12
   Balanced Arabic/English scale + elegant entrance sequence.
   ========================================================= */
.value.value-premium{
  position:relative;
  padding:132px 7vw 142px;
  min-height:690px;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
  border-top:1px solid rgba(75,185,245,.07);
  background:
    radial-gradient(circle at 50% 42%,rgba(40,137,234,.055),transparent 34%),
    #020817;
}

.value-premium .value-inner{
  width:min(1040px,88vw);
  margin:auto;
}

/* The master reveal container becomes visible without moving as one block;
   its children handle the stagger independently. */
.value-premium .value-inner.reveal{
  opacity:1;
  transform:none;
  transition:none;
}

.value-premium .num,
.value-premium .kicker,
.value-premium h2,
.value-premium h2 em,
.value-premium .value-inner>p:last-child{
  opacity:0;
  will-change:transform,opacity,filter;
}

.value-premium .num{
  margin:0 auto 25px;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
}

.value-premium .kicker{
  margin:0 auto 28px;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.23em;
  color:#8f9db1;
}

[dir="rtl"] .value-premium .kicker{
  letter-spacing:.025em;
}

.value-premium h2{
  max-width:980px;
  margin:0 auto;
  font-size:clamp(43px,4.15vw,69px);
  line-height:1.10;
  font-weight:680;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.value-premium h2 em{
  display:block;
  margin-top:17px;
  font-size:.94em;
  line-height:1.08;
  font-weight:720;
  letter-spacing:-.04em;
  background:linear-gradient(90deg,#79e3ff 0%,#50d3ff 48%,#2f96ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

[dir="rtl"] .value-premium h2{
  max-width:930px;
  font-size:clamp(42px,3.85vw,65px);
  line-height:1.28;
  letter-spacing:-.015em;
}

[dir="rtl"] .value-premium h2 em{
  margin-top:13px;
  font-size:.96em;
  line-height:1.25;
  letter-spacing:-.015em;
}

.value-premium .value-inner>p:last-child{
  max-width:760px;
  margin:32px auto 0;
  color:#aab9cf;
  font-size:17px;
  line-height:1.9;
}

/* Stagger: number -> kicker -> white statement -> cyan statement -> description */
.value-premium .value-inner.visible .num{
  animation:valueNumIn .55s cubic-bezier(.2,.78,.2,1) both;
}
.value-premium .value-inner.visible .kicker{
  animation:valueKickerIn .62s cubic-bezier(.2,.78,.2,1) .10s both;
}
.value-premium .value-inner.visible h2{
  animation:valueTitleIn .78s cubic-bezier(.16,.82,.22,1) .20s both;
}
.value-premium .value-inner.visible h2 em{
  animation:valueAccentIn .82s cubic-bezier(.16,.82,.22,1) .43s both;
}
.value-premium .value-inner.visible>p:last-child{
  animation:valueDescIn .72s ease .68s both;
}

@keyframes valueNumIn{
  from{opacity:0;transform:translateY(15px) scale(.92);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes valueKickerIn{
  from{opacity:0;transform:translateY(14px);letter-spacing:.34em}
  to{opacity:1;transform:none}
}
@keyframes valueTitleIn{
  from{opacity:0;transform:translateY(28px);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes valueAccentIn{
  from{opacity:0;transform:translateY(22px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes valueDescIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .value.value-premium{padding:100px 6vw 110px;min-height:620px}
  .value-premium h2{font-size:clamp(38px,6vw,50px)}
  [dir="rtl"] .value-premium h2{font-size:clamp(37px,5.7vw,49px)}
  .value-premium .value-inner>p:last-child{font-size:16px;margin-top:27px}
}

@media(max-width:600px){
  .value.value-premium{padding:82px 6vw 90px;min-height:560px}
  .value-premium .kicker{font-size:11px;margin-bottom:22px}
  .value-premium h2,
  [dir="rtl"] .value-premium h2{font-size:34px}
  .value-premium h2 em{margin-top:12px}
  .value-premium .value-inner>p:last-child{font-size:14.5px;line-height:1.8}
}

@media(prefers-reduced-motion:reduce){
  .value-premium .num,
  .value-premium .kicker,
  .value-premium h2,
  .value-premium h2 em,
  .value-premium .value-inner>p:last-child{
    opacity:1!important;
    animation:none!important;
    transform:none!important;
    filter:none!important;
  }
}


/* =========================================================
   FINAL CTA — UNIFIED AR / EN COMPOSITION V13
   Both languages use the SAME left-side card.
   Elevator + family remain clearly visible on the right.
   ========================================================= */

.cta.cta-unified{
  position:relative!important;
  min-height:720px!important;
  height:min(820px,88vh)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border-top:1px solid rgba(58,175,255,.10)!important;
  border-bottom:1px solid rgba(58,175,255,.12)!important;
}

/* Keep the family and elevator visible as the visual hero. */
.cta.cta-unified>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:0!important;
  filter:brightness(1.03) saturate(1.04) contrast(1.02)!important;
  transform:scale(1.01)!important;
  animation:ctaFinalCinematic 15s ease-in-out infinite alternate!important;
}

/* Darken only the text side; do not bury the elevator/family. */
.cta.cta-unified .cta-shade{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    linear-gradient(90deg,
      rgba(2,8,23,.98) 0%,
      rgba(2,8,23,.94) 24%,
      rgba(2,8,23,.80) 38%,
      rgba(2,8,23,.32) 53%,
      rgba(2,8,23,.06) 70%,
      rgba(2,8,23,.02) 100%
    ),
    linear-gradient(0deg,
      rgba(2,8,23,.46) 0%,
      transparent 42%
    )!important;
}

/* Critical: Arabic uses the SAME physical side as English. */
[dir="rtl"] .cta.cta-unified .cta-shade{
  background:
    linear-gradient(90deg,
      rgba(2,8,23,.98) 0%,
      rgba(2,8,23,.94) 24%,
      rgba(2,8,23,.80) 38%,
      rgba(2,8,23,.32) 53%,
      rgba(2,8,23,.06) 70%,
      rgba(2,8,23,.02) 100%
    ),
    linear-gradient(0deg,
      rgba(2,8,23,.46) 0%,
      transparent 42%
    )!important;
}

/* Premium glass copy card. */
.cta.cta-unified .cta-copy{
  position:relative!important;
  z-index:4!important;
  width:min(590px,37vw)!important;
  margin-left:7vw!important;
  margin-right:0!important;
  padding:34px 36px 36px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;

  border:1px solid rgba(88,190,255,.16)!important;
  border-radius:26px!important;
  background:
    linear-gradient(145deg,rgba(4,14,31,.76),rgba(3,11,27,.52))!important;
  backdrop-filter:blur(13px)!important;
  -webkit-backdrop-filter:blur(13px)!important;

  box-shadow:
    0 26px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* Arabic text stays RTL INSIDE the same left-side card. */
[dir="rtl"] .cta.cta-unified .cta-copy{
  direction:rtl!important;
  text-align:right!important;
  align-items:stretch!important;
  margin-left:7vw!important;
  margin-right:0!important;
}

/* English remains left aligned in the same card. */
[dir="ltr"] .cta.cta-unified .cta-copy{
  direction:ltr!important;
  text-align:left!important;
  align-items:flex-start!important;
}

.cta.cta-unified .cta-copy>span{
  display:block!important;
  margin:0 0 18px!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.22em!important;
  color:#5edcff!important;
  text-transform:uppercase!important;
}

[dir="rtl"] .cta.cta-unified .cta-copy>span{
  width:100%!important;
  text-align:right!important;
  letter-spacing:.08em!important;
}

.cta.cta-unified h2{
  width:100%!important;
  margin:0!important;
  font-size:clamp(42px,3.5vw,62px)!important;
  line-height:1.08!important;
  font-weight:700!important;
  letter-spacing:-.04em!important;
  text-wrap:balance!important;
}

[dir="rtl"] .cta.cta-unified h2{
  line-height:1.20!important;
  letter-spacing:-.018em!important;
}

.cta.cta-unified h2 em{
  display:block!important;
  margin-top:9px!important;
  font-style:normal!important;
  background:linear-gradient(90deg,#72e4ff 0%,#4fd0ff 48%,#278cff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

.cta.cta-unified p{
  width:100%!important;
  max-width:520px!important;
  margin:24px 0 0!important;
  font-size:16px!important;
  line-height:1.85!important;
  color:#b6c4d8!important;
}

[dir="rtl"] .cta.cta-unified p{
  margin-left:auto!important;
  margin-right:0!important;
}

.cta.cta-unified .primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  margin-top:28px!important;
  min-width:168px!important;
  padding:15px 23px!important;
  border-radius:14px!important;
  border:1px solid rgba(110,205,255,.34)!important;
  background:
    linear-gradient(135deg,#2e91ff 0%,#216eea 70%,#1c5ed2 100%)!important;
  box-shadow:
    0 13px 34px rgba(27,112,235,.24),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
  transition:transform .3s ease,box-shadow .3s ease,filter .3s ease!important;
}

.cta.cta-unified .primary:hover{
  transform:translateY(-3px)!important;
  filter:brightness(1.08)!important;
  box-shadow:
    0 18px 42px rgba(34,126,255,.34),
    0 0 26px rgba(76,193,255,.10),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
}

/* Tiny luminous edge to tie the card to the elevator lighting. */
.cta.cta-unified .cta-copy::after{
  content:""!important;
  position:absolute!important;
  left:34px!important;
  right:34px!important;
  bottom:-1px!important;
  height:1px!important;
  background:linear-gradient(90deg,
    transparent,
    rgba(80,214,255,.55),
    rgba(66,148,255,.30),
    transparent
  )!important;
  box-shadow:0 0 14px rgba(69,195,255,.18)!important;
}

/* Reveal sequence for a premium closing. */
.cta.cta-unified .cta-copy.visible>span{
  animation:ctaFinalUp .55s ease both!important;
}
.cta.cta-unified .cta-copy.visible h2{
  animation:ctaFinalUp .75s cubic-bezier(.2,.78,.2,1) both .08s!important;
}
.cta.cta-unified .cta-copy.visible p{
  animation:ctaFinalUp .68s ease both .19s!important;
}
.cta.cta-unified .cta-copy.visible .primary{
  animation:ctaFinalUp .68s ease both .28s!important;
}

@keyframes ctaFinalCinematic{
  from{transform:scale(1.01) translate3d(0,0,0)}
  to{transform:scale(1.035) translate3d(-.16%,-.08%,0)}
}

@keyframes ctaFinalUp{
  from{opacity:0;transform:translateY(20px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}

@media(max-width:1100px){
  .cta.cta-unified .cta-copy{
    width:min(570px,43vw)!important;
    margin-left:5vw!important;
  }
  [dir="rtl"] .cta.cta-unified .cta-copy{
    margin-left:5vw!important;
  }
  .cta.cta-unified h2{
    font-size:clamp(38px,4.2vw,52px)!important;
  }
}

@media(max-width:820px){
  .cta.cta-unified{
    min-height:790px!important;
    height:auto!important;
    align-items:flex-end!important;
    padding-bottom:34px!important;
  }

  .cta.cta-unified>img{
    object-position:62% center!important;
  }

  .cta.cta-unified .cta-shade,
  [dir="rtl"] .cta.cta-unified .cta-shade{
    background:
      linear-gradient(0deg,
        rgba(2,8,23,.97) 0%,
        rgba(2,8,23,.86) 44%,
        rgba(2,8,23,.20) 77%,
        rgba(2,8,23,.04) 100%
      )!important;
  }

  .cta.cta-unified .cta-copy,
  [dir="rtl"] .cta.cta-unified .cta-copy{
    width:auto!important;
    margin:0 6vw!important;
    padding:26px 24px 28px!important;
  }
}

@media(max-width:560px){
  .cta.cta-unified{
    min-height:760px!important;
  }

  .cta.cta-unified h2{
    font-size:34px!important;
  }

  .cta.cta-unified p{
    font-size:15px!important;
    line-height:1.75!important;
  }

  .cta.cta-unified .primary{
    width:100%!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .cta.cta-unified>img,
  .cta.cta-unified .cta-copy.visible>*{
    animation:none!important;
  }
}

/* V14 FIX — lock Arabic + English final CTA card to identical physical position */
.cta.cta-unified{
  justify-content:flex-start!important;
  direction:ltr!important;
}
.cta.cta-unified .cta-copy,
[dir="rtl"] .cta.cta-unified .cta-copy,
[dir="ltr"] .cta.cta-unified .cta-copy{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  margin-left:7vw!important;
  margin-right:0!important;
  transform:none!important;
}
[dir="rtl"] .cta.cta-unified .cta-copy{
  direction:rtl!important;
  text-align:right!important;
}
[dir="ltr"] .cta.cta-unified .cta-copy{
  direction:ltr!important;
  text-align:left!important;
}
@media(max-width:1100px){
  .cta.cta-unified .cta-copy,
  [dir="rtl"] .cta.cta-unified .cta-copy,
  [dir="ltr"] .cta.cta-unified .cta-copy{
    margin-left:5vw!important;
    margin-right:0!important;
  }
}
@media(max-width:820px){
  .cta.cta-unified .cta-copy,
  [dir="rtl"] .cta.cta-unified .cta-copy,
  [dir="ltr"] .cta.cta-unified .cta-copy{
    margin-left:6vw!important;
    margin-right:6vw!important;
  }
}