:root{--green:#004f43;--green2:#0b6759;--ink:#073f37;--text:#294b46;--muted:#72827f;--gold:#c9a451;--line:#d9e1de}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Tajawal",Arial,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}img{display:block;max-width:100%}a{text-decoration:none;color:inherit}button{font:inherit}.container{width:min(1440px,calc(100% - 64px));margin-inline:auto}
.site-header{height:86px;background:#fff;position:relative;z-index:30}.header-inner{height:86px;display:flex;align-items:center;gap:24px}.brand-cluster{display:flex;align-items:center;gap:14px;min-width:430px}.vision-logo{width:118px;height:62px;object-fit:contain}.header-sep{width:1px;height:52px;background:#879894}.institute-brand{display:flex;align-items:center;gap:10px}.brand-mark{width:52px;height:52px}.brand-mark svg{width:100%;height:100%}.brand-copy{line-height:1.12}.brand-copy strong{font-size:15px;font-weight:900}.brand-copy small{display:block;font-size:9px;color:#54706b;margin-top:4px}.main-nav{display:flex;align-items:center;justify-content:center;gap:34px;flex:1}.main-nav a{font-size:13px;font-weight:700;color:#1e403a;padding:31px 0 24px;position:relative;white-space:nowrap}.main-nav a:after{content:"";position:absolute;bottom:18px;right:0;width:0;height:2px;background:var(--green);transition:.2s}.main-nav a.active:after,.main-nav a:hover:after{width:100%}.header-actions{display:flex;align-items:center;gap:12px;direction:ltr;min-width:245px;justify-content:flex-end}.icon-btn,.lang-btn,.menu-toggle{border:0;background:none;cursor:pointer;color:#123e38}.icon-btn{width:34px;height:34px;padding:7px}.icon-btn svg{width:100%;height:100%}.lang-btn{font-size:13px;font-weight:800}.login-btn{height:44px;padding:0 20px;border-radius:18px;background:var(--green);color:#fff;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;direction:rtl}.login-btn svg{width:18px}.menu-toggle{display:none}
.hero{height:505px;position:relative;overflow:hidden;border-bottom-left-radius:58px;background:linear-gradient(102deg,#eef3f0 0%,#fbfaf5 44%,#fff 77%)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 58% 30%,rgba(229,206,147,.24),transparent 32%);pointer-events:none}.hero-glow{display:none}.hero-grid{height:100%;display:grid;grid-template-columns:52% 48%;gap:0;position:relative;z-index:2}.hero-copy{grid-column:1;direction:rtl;text-align:right;padding:54px 0 90px 18px;align-self:start}.eyebrow{display:none}.hero-copy h1{font-size:52px;line-height:1.04;letter-spacing:-1.7px;margin:0;color:#004a40;font-weight:900}.hero-copy h2{font-size:21px;margin:17px 0 12px;font-weight:500;color:#173f3a}.hero-desc{font-size:16px;line-height:1.75;color:#35534f;margin:0;max-width:620px;margin-right:0}.hero-cta{display:flex;gap:15px;margin-top:25px}.btn{height:48px;border-radius:12px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:800;font-size:14px}.btn svg{width:17px}.btn-primary{background:var(--green);color:#fff;min-width:180px}.btn-outline{border:1.5px solid #66827d;color:var(--green);background:rgba(255,255,255,.72);min-width:180px}.hero-visual{grid-column:2;grid-row:1;position:absolute;left:calc((100vw - min(1440px,calc(100vw - 64px)))/-2);bottom:0;width:calc(54vw + 80px);height:100%;display:flex;align-items:flex-end;justify-content:flex-start;direction:ltr;pointer-events:none}.hero-visual img{width:100%;max-width:none;height:auto;transform:none;filter:none}.hero-visual-caption{position:absolute;left:4.5%;bottom:205px;color:#fff;text-align:left;text-shadow:0 2px 12px rgba(0,0,0,.5);line-height:1.25}.hero-visual-caption strong,.hero-visual-caption span{display:block;font-size:17px;font-weight:800}.hero-visual-caption small{display:block;font-size:10px;margin-top:8px}.hero-bottom{position:absolute;left:0;right:0;bottom:28px;z-index:5;display:flex;align-items:center;justify-content:space-between;direction:ltr}.stats-panel{display:grid;grid-template-columns:repeat(4,1fr);width:760px;border-radius:17px;overflow:hidden;background:rgba(19,64,57,.72);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2)}.stat-card{height:84px;padding:14px 17px;display:flex;align-items:center;justify-content:center;gap:13px;color:#fff;border-right:1px solid rgba(255,255,255,.15);direction:rtl}.stat-card:last-child{border-right:0}.stat-icon{width:38px;height:38px;border:1px solid rgba(143,224,205,.35);border-radius:50%;display:grid;place-items:center;color:#8fe0cd}.stat-icon svg{width:22px}.stat-card strong{font-size:22px;line-height:1;display:block}.stat-card span{font-size:12px;display:block;margin-top:7px}.hero-note{display:flex;align-items:center;gap:14px;color:#294640;text-align:right;direction:ltr;margin-right:12px}.hero-note .line{width:42px;height:1px;background:#738985}.hero-note p{font-size:14px;line-height:1.4;margin:0;direction:rtl}
.devices-section{height:280px;padding:32px 0 20px;background:#fff}.section-heading{text-align:center;margin-bottom:22px}.section-heading h3{font-size:27px;margin:0 0 5px;font-weight:900;color:#06483f}.section-heading p{margin:0;color:#72817f;font-size:13px}.device-track{direction:ltr;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.device-card{direction:rtl;height:145px;background:#fff;border:1px solid #edf0ef;border-radius:13px;padding:10px 8px;text-align:center;box-shadow:0 8px 22px rgba(14,66,57,.035)}.device-img{height:88px;display:flex;align-items:center;justify-content:center}.device-img img{max-height:84px;max-width:90%;object-fit:contain}.device-card strong{font-size:14px;display:block;color:#123d37}.device-card span{font-size:11px;color:#365b54;display:block;margin-top:3px;white-space:nowrap}.section-rule{height:17px;margin-top:10px;position:relative}.section-rule:before{content:"";position:absolute;left:3.5%;right:3.5%;top:7px;height:1px;background:#c9d1cf}.section-rule span{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:38px;height:3px;background:var(--green);border-radius:4px}
.vision-section{height:300px;display:grid;grid-template-columns:55% 45%;direction:ltr;overflow:hidden;background:linear-gradient(90deg,#eef5f6 0,#fff 64%)}.vision-visual{grid-column:1;position:relative;overflow:hidden;direction:ltr}.vision-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 56%,rgba(255,255,255,.96) 100%);pointer-events:none}.vision-visual img{position:absolute;left:0;bottom:0;width:110%;height:100%;object-fit:cover;object-position:left bottom}.vision-quote{position:absolute;z-index:3;left:7%;bottom:38px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);max-width:300px}.vision-quote strong{font-size:20px;line-height:1.55}.vision-quote small{display:block;font-size:10px;margin-top:8px}.quote-mark{font-size:46px;color:#e4c477;line-height:.6}.quote-mark.end{float:right}.vision-copy{grid-column:2;direction:rtl}.container-side{width:90%;max-width:610px;margin:auto;padding:34px 0 25px;text-align:right}.section-kicker{display:flex;align-items:center;gap:12px;color:#c29d45;font-size:12px}.section-kicker span{width:29px;height:1px;background:#c29d45}.vision-copy h3{font-size:29px;margin:9px 0 10px;font-weight:900;color:#06483f}.vision-copy>p{font-size:14px;line-height:1.75;color:#617471;margin:0}.vision-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.vision-pillars article{height:91px;background:#fff;border:1px solid #edf0ee;border-radius:12px;padding:11px 8px;text-align:center;box-shadow:0 8px 20px rgba(18,74,65,.04)}.pillar-icon{width:25px;height:25px;margin:0 auto 5px;color:var(--green)}.pillar-icon svg{width:100%;height:100%}.vision-pillars strong{display:block;font-size:13px}.vision-pillars small{display:block;font-size:10px;color:#657873;margin-top:2px}
.site-footer{height:96px;background:#005447;color:#fff;position:relative;overflow:hidden}.site-footer:before{content:"";position:absolute;inset:0;opacity:.09;background-image:radial-gradient(circle at 20% 20%,transparent 0 12px,rgba(255,255,255,.18) 12.5px 13px,transparent 13.5px);background-size:72px 72px}.footer-inner{height:96px;display:grid;grid-template-columns:260px 1fr 250px;align-items:center;gap:28px;position:relative;z-index:2;direction:rtl}.footer-slogan{display:flex;align-items:center;gap:12px}.palm-symbol{font-size:29px}.footer-slogan strong{display:block;font-size:13px}.footer-slogan small{display:block;font-size:10px;margin-top:4px}.footer-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}.footer-links a{font-size:11px;opacity:.95}.socials{display:flex;gap:9px;direction:ltr}.socials a{width:31px;height:31px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;font-size:11px}
@media(max-width:1180px){.container{width:min(1100px,calc(100% - 40px))}.brand-cluster{min-width:auto}.brand-copy{display:none}.main-nav{gap:16px}.main-nav a{font-size:12px}.header-actions{min-width:auto}.hero-copy h1{font-size:44px}.hero-visual{left:-20px;width:57vw}.stats-panel{width:680px}.device-track{gap:8px}.device-card span{font-size:10px}}
@media(max-width:960px){.site-header,.header-inner{height:74px}.main-nav{position:absolute;top:74px;right:16px;left:16px;background:#fff;border:1px solid #e8eeeb;border-radius:16px;padding:14px;display:none;grid-template-columns:1fr 1fr;box-shadow:0 18px 50px rgba(9,68,59,.1)}.main-nav.open{display:grid}.main-nav a{padding:12px}.main-nav a:after{display:none}.menu-toggle{display:block;width:40px}.vision-logo{width:82px}.brand-mark{width:42px}.hero{height:auto;min-height:760px;border-bottom-left-radius:36px}.hero-grid{display:flex;flex-direction:column;height:auto}.hero-copy{order:1;width:100%;padding:34px 0 10px;text-align:center}.hero-copy h1{font-size:43px}.hero-desc{margin-inline:auto}.hero-cta{justify-content:center}.hero-visual{order:2;position:relative;left:auto;bottom:auto;width:110%;height:390px;margin-left:-5%}.hero-visual img{position:absolute;bottom:0;width:100%}.hero-visual-caption{left:8%;bottom:120px}.hero-bottom{position:relative;bottom:auto;padding-bottom:24px;margin-top:-35px;display:block}.stats-panel{width:100%}.hero-note{display:none}.devices-section{height:auto;padding:34px 0}.device-track{grid-template-columns:repeat(4,1fr)}.device-card{height:150px}.vision-section{height:auto;grid-template-columns:1fr}.vision-visual{grid-column:1;min-height:320px;order:2}.vision-copy{grid-column:1;order:1}.site-footer{height:auto}.footer-inner{height:auto;min-height:120px;grid-template-columns:1fr;text-align:center;padding:22px 0}.footer-slogan,.socials{justify-content:center}}
@media(max-width:640px){.container{width:calc(100% - 24px)}.vision-logo,.header-sep{display:none}.brand-copy{display:block}.brand-copy small{display:none}.login-btn span{display:none}.login-btn{width:42px;padding:0;justify-content:center}.hero{min-height:700px}.hero-copy h1{font-size:34px}.hero-copy h2{font-size:17px}.hero-desc{font-size:14px}.hero-cta{flex-direction:column}.btn{width:100%}.hero-visual{height:280px;width:135%;margin-left:-17.5%}.hero-visual-caption{display:none}.hero-bottom{margin-top:-10px}.stats-panel{grid-template-columns:repeat(2,1fr)}.stat-card{height:76px}.device-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.device-card{min-width:150px;scroll-snap-align:start}.vision-pillars{grid-template-columns:1fr}.vision-visual{min-height:270px}.vision-copy h3{font-size:25px}.footer-links{gap:12px}}

/* ===== V5: DESKTOP HERO REBUILD — matched to approved composition ===== */
@media (min-width:1201px){
  .site-header,.header-inner{height:82px}
  .site-header .container{width:min(1370px,calc(100% - 80px))}
  .header-inner{gap:20px}
  .brand-cluster{min-width:385px;gap:12px}
  .vision-logo{width:108px;height:58px}
  .brand-mark{width:50px;height:50px}
  .brand-copy strong{font-size:14px}
  .brand-copy small{font-size:8px}
  .main-nav{gap:29px}
  .main-nav a{font-size:12.5px;padding-top:30px;padding-bottom:23px}
  .header-actions{min-width:230px}
  .login-btn{height:42px;border-radius:17px;padding:0 18px}

  .hero{height:548px;border-bottom-left-radius:56px;background:#f7f9f6;isolation:isolate}
  .hero:before{display:none}
  .hero:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 44%,rgba(255,255,255,.28) 55%,rgba(255,255,255,.82) 68%,#fff 79%,#fff 100%)}
  .hero>.container.hero-grid{height:100%;display:block;position:relative;z-index:4;width:min(1370px,calc(100% - 80px))}

  .hero-visual{position:absolute;z-index:1;left:0;bottom:-2px;width:69vw;max-width:1160px;height:100%;display:block;overflow:visible;pointer-events:none}
  .hero-visual img{position:absolute;left:0;bottom:-12px;width:100%;height:auto;max-width:none;transform:none;filter:none}
  .hero-visual-caption{left:4.2%;bottom:210px;z-index:3}
  .hero-visual-caption strong,.hero-visual-caption span{font-size:16px}
  .hero-visual-caption small{font-size:9px;line-height:1.35;margin-top:7px}

  .hero-copy{position:relative;z-index:5;width:48%;max-width:615px;margin-left:auto;margin-right:0;padding:54px 0 0;text-align:right;direction:rtl}
  .hero-copy h1{font-size:50px;line-height:1.05;letter-spacing:-1.4px;margin:0;color:#004d42}
  .hero-copy h2{font-size:20px;line-height:1.5;margin:16px 0 10px;color:#173f39;font-weight:500}
  .hero-desc{font-size:15px;line-height:1.82;max-width:590px;color:#385650}
  .hero-cta{margin-top:22px;gap:14px;justify-content:flex-start}
  .btn{height:46px;border-radius:11px;font-size:13.5px;padding:0 24px}
  .btn-primary,.btn-outline{min-width:176px}

  .hero-bottom{z-index:7;bottom:30px;width:min(1370px,calc(100% - 80px));left:50%;right:auto;transform:translateX(-50%);padding:0;display:block}
  .stats-panel{position:absolute;left:0;bottom:0;width:min(900px,62vw);height:84px;grid-template-columns:repeat(4,1fr);border-radius:16px;background:rgba(17,63,56,.78);backdrop-filter:blur(11px);box-shadow:0 14px 28px rgba(10,49,43,.10)}
  .stat-card{height:84px;padding:12px 16px;gap:12px}
  .stat-card strong{font-size:21px}
  .stat-card span{font-size:11.5px;margin-top:6px}
  .stat-icon{width:37px;height:37px}
  .hero-note{position:absolute;right:0;bottom:10px;margin:0;gap:13px}
  .hero-note p{font-size:13px;line-height:1.45}
  .hero-note .line{width:40px}
}

@media (min-width:1500px){
  .hero-visual{width:67vw;max-width:1180px}
  .hero-copy{padding-top:58px;max-width:610px}
  .hero-copy h1{font-size:51px}
  .stats-panel{width:900px}
}

/* ===== V6: FINAL HERO FEATHER + TEXT LEGIBILITY ===== */
@media (min-width:1201px){
  .hero{background:#f7f9f6;overflow:hidden;}

  /* remove the broad overlay from V5: feather is applied to the image itself */
  .hero:after{display:none !important;}

  .hero>.container.hero-grid{
    width:min(1370px,calc(100% - 80px));
    height:100%;
    position:relative;
    z-index:3;
  }

  .hero-visual{
    left:0;
    bottom:0;
    width:74vw;
    max-width:1240px;
    height:100%;
    z-index:1;
    overflow:visible;
    -webkit-mask-image:linear-gradient(to right,
      #000 0%,
      #000 58%,
      rgba(0,0,0,.96) 64%,
      rgba(0,0,0,.78) 70%,
      rgba(0,0,0,.48) 76%,
      rgba(0,0,0,.18) 82%,
      transparent 88%);
    mask-image:linear-gradient(to right,
      #000 0%,
      #000 58%,
      rgba(0,0,0,.96) 64%,
      rgba(0,0,0,.78) 70%,
      rgba(0,0,0,.48) 76%,
      rgba(0,0,0,.18) 82%,
      transparent 88%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }

  .hero-visual img{
    left:0;
    bottom:-8px;
    width:100%;
    height:calc(100% + 8px);
    object-fit:cover;
    object-position:left bottom;
  }

  /* a subtle white veil behind copy, not a visible card */
  .hero-copy{
    width:47%;
    max-width:610px;
    padding:48px 0 0;
    margin-left:auto;
    margin-right:0;
    position:relative;
    z-index:8;
  }
  .hero-copy:before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-38px;
    right:-42px;
    bottom:-40px;
    left:-180px;
    background:linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.60) 28%,
      rgba(255,255,255,.92) 48%,
      #fff 69%,
      #fff 100%);
    pointer-events:none;
  }

  .hero-copy h1{
    font-size:49px;
    line-height:1.08;
    letter-spacing:-1.1px;
    color:#034f45;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
  }
  .hero-copy h2{
    font-size:19px;
    margin:16px 0 10px;
    color:#173f39;
  }
  .hero-desc{
    max-width:560px;
    font-size:14.5px;
    line-height:1.9;
    color:#3d5a55;
  }
  .hero-cta{margin-top:20px;}

  .hero-bottom{
    bottom:27px;
    width:min(1370px,calc(100% - 80px));
    z-index:10;
  }
  .stats-panel{
    left:0;
    width:min(865px,60vw);
    height:82px;
    background:rgba(18,64,56,.84);
    backdrop-filter:blur(10px);
  }
  .stat-card{height:82px;}
  .hero-note{right:6px;bottom:10px;z-index:10;}
}

@media (min-width:1500px){
  .hero-visual{width:72vw;max-width:1270px;}
  .hero-copy{max-width:620px;padding-top:50px;}
  .hero-copy h1{font-size:50px;}
  .stats-panel{width:880px;}
}

/* ===== V8: HERO LOCK — viewport composition matched to approved reference ===== */
@media (min-width:1201px){
  .hero{height:548px;background:linear-gradient(90deg,#eef3f0 0%,#f7f7f1 52%,#fff 100%);overflow:hidden;border-bottom-left-radius:58px;}
  .hero>.container.hero-grid{width:min(1370px,calc(100% - 80px));height:100%;position:relative;z-index:3;}

  /* Visual must start at viewport edge, not at container edge */
  .hero-visual{
    position:absolute;
    left:calc((100vw - min(1370px,calc(100vw - 80px)))/-2);
    bottom:0;
    width:72vw;
    max-width:none;
    height:100%;
    z-index:1;
    overflow:visible;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 54%,rgba(0,0,0,.98) 59%,rgba(0,0,0,.86) 64%,rgba(0,0,0,.58) 70%,rgba(0,0,0,.28) 76%,rgba(0,0,0,.08) 82%,transparent 88%);
    mask-image:linear-gradient(to right,#000 0%,#000 54%,rgba(0,0,0,.98) 59%,rgba(0,0,0,.86) 64%,rgba(0,0,0,.58) 70%,rgba(0,0,0,.28) 76%,rgba(0,0,0,.08) 82%,transparent 88%);
  }
  .hero-visual img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:left center;}

  /* No card/rectangle behind copy */
  .hero-copy{width:46%;max-width:610px;padding:52px 0 0;margin-left:auto;margin-right:0;position:relative;z-index:8;}
  .hero-copy:before{display:none!important;}
  .hero-copy h1{font-size:50px;line-height:1.06;letter-spacing:-1.2px;}
  .hero-copy h2{font-size:20px;margin:16px 0 11px;}
  .hero-desc{font-size:15px;line-height:1.82;max-width:590px;color:#35534f;}
  .hero-cta{margin-top:23px;}

  /* stats begin from viewport edge as in approved design */
  .hero-bottom{bottom:28px;width:min(1370px,calc(100% - 80px));left:50%;right:auto;transform:translateX(-50%);z-index:10;}
  .stats-panel{position:relative;left:calc((100vw - min(1370px,calc(100vw - 80px)))/-2);width:760px;height:84px;background:rgba(19,64,57,.76);backdrop-filter:blur(12px);}
  .stat-card{height:84px;}
  .hero-note{right:0;bottom:8px;}
}
@media (min-width:1500px){
  .hero-visual{width:71vw;}
  .hero-copy{padding-top:50px;max-width:620px;}
  .hero-copy h1{font-size:51px;}
  .stats-panel{width:790px;}
}

/* ===== V9: HERO SCALE / FEATHER CORRECTION ===== */
@media (min-width:1201px){
  .hero{height:548px;background:linear-gradient(90deg,#eef3f0 0%,#f8f8f3 48%,#fff 82%);}
  .hero-visual{
    left:calc((100vw - min(1370px,calc(100vw - 80px)))/-2);
    width:61vw;
    max-width:1100px;
    height:100%;
    bottom:0;
    overflow:visible;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 57%,rgba(0,0,0,.96) 63%,rgba(0,0,0,.78) 70%,rgba(0,0,0,.48) 77%,rgba(0,0,0,.20) 84%,rgba(0,0,0,.05) 90%,transparent 96%);
    mask-image:linear-gradient(to right,#000 0%,#000 57%,rgba(0,0,0,.96) 63%,rgba(0,0,0,.78) 70%,rgba(0,0,0,.48) 77%,rgba(0,0,0,.20) 84%,rgba(0,0,0,.05) 90%,transparent 96%);
  }
  .hero-visual img{
    left:0;
    bottom:0;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:left bottom;
  }
  .hero-copy{width:43%;max-width:575px;padding-top:48px;}
  .hero-copy h1{font-size:49px;line-height:1.06;}
  .hero-copy h2{font-size:19px;margin-top:15px;}
  .hero-desc{font-size:14.5px;line-height:1.8;}
  .hero-bottom{bottom:29px;}
  .stats-panel{left:calc((100vw - min(1370px,calc(100vw - 80px)))/-2);width:740px;}
}
@media (min-width:1500px){
  .hero-visual{width:61vw;max-width:1120px;}
  .hero-copy{max-width:590px;padding-top:49px;}
  .stats-panel{width:760px;}
}

/* ===== V10: HERO BALANCE — full-width reference composition ===== */
@media (min-width:1201px){
  .hero{height:548px;background:linear-gradient(90deg,#eef3f0 0%,#f7f7f1 48%,#fff 100%);}
  .hero>.container.hero-grid{width:100%;max-width:none;margin:0;height:100%;position:relative;}

  .hero-visual{
    left:0;bottom:0;width:67%;max-width:none;height:100%;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 62%,rgba(0,0,0,.98) 68%,rgba(0,0,0,.88) 74%,rgba(0,0,0,.62) 80%,rgba(0,0,0,.34) 86%,rgba(0,0,0,.12) 91%,transparent 97%);
    mask-image:linear-gradient(to right,#000 0%,#000 62%,rgba(0,0,0,.98) 68%,rgba(0,0,0,.88) 74%,rgba(0,0,0,.62) 80%,rgba(0,0,0,.34) 86%,rgba(0,0,0,.12) 91%,transparent 97%);
  }
  .hero-visual img{left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;}

  .hero-copy{position:absolute;top:0;right:6.2%;width:43%;max-width:650px;margin:0;padding:48px 0 0;z-index:8;}
  .hero-copy h1{font-size:50px;line-height:1.06;}
  .hero-copy h2{font-size:20px;margin:16px 0 11px;}
  .hero-desc{font-size:15px;line-height:1.82;max-width:610px;}
  .hero-cta{margin-top:22px;}

  .hero-bottom{left:0;right:0;transform:none;width:100%;max-width:none;bottom:28px;padding:0 6.2%;}
  .stats-panel{position:absolute;left:0;bottom:0;width:46%;min-width:700px;max-width:820px;height:84px;}
  .hero-note{right:6.2%;bottom:8px;}
}
@media (min-width:1500px){
  .hero-copy{right:6.5%;width:42%;max-width:660px;padding-top:50px;}
  .hero-copy h1{font-size:51px;}
  .hero-visual{width:68%;}
  .stats-panel{width:46%;max-width:840px;}
  .hero-note{right:6.5%;}
}

/* ===== V11 FINAL HERO LOCK — approved reference proportions ===== */
@media (min-width:1201px){
  .hero{
    height:548px;
    background:linear-gradient(90deg,#eef3f0 0%,#f7f7f2 58%,#fff 100%);
    overflow:hidden;
    border-bottom-left-radius:58px;
  }
  .hero>.container.hero-grid{width:100%;max-width:none;margin:0;height:100%;position:relative;}

  /* Image occupies the scene, then dissolves softly beneath the copy — no visible box */
  .hero-visual{
    left:0;bottom:0;width:79%;max-width:none;height:100%;overflow:visible;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 55%,rgba(0,0,0,.98) 61%,rgba(0,0,0,.90) 68%,rgba(0,0,0,.72) 75%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.25) 89%,rgba(0,0,0,.08) 95%,transparent 100%);
    mask-image:linear-gradient(to right,#000 0%,#000 55%,rgba(0,0,0,.98) 61%,rgba(0,0,0,.90) 68%,rgba(0,0,0,.72) 75%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.25) 89%,rgba(0,0,0,.08) 95%,transparent 100%);
  }
  .hero-visual img{left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:left bottom;}

  .hero-copy{position:absolute;top:0;right:4.2%;width:43.5%;max-width:650px;margin:0;padding:48px 0 0;z-index:8;background:transparent;}
  .hero-copy:before{display:none!important;}
  .hero-copy h1{font-size:50px;line-height:1.06;letter-spacing:-1.2px;}
  .hero-copy h2{font-size:20px;margin:16px 0 11px;}
  .hero-desc{font-size:15px;line-height:1.82;max-width:610px;color:#35534f;}
  .hero-cta{margin-top:22px;}

  /* Reference has the statistics bar spanning most of the image, not a short left block */
  .hero-bottom{left:0;right:0;transform:none;width:100%;max-width:none;bottom:28px;padding:0 4.2%;}
  .stats-panel{position:absolute;left:0;bottom:0;width:62%;min-width:0;max-width:none;height:84px;background:rgba(18,61,54,.82);backdrop-filter:blur(12px);}
  .stat-card{height:84px;}
  .hero-note{right:4.2%;bottom:8px;}
}
@media (min-width:1500px){
  .hero-copy{right:4.8%;width:42.5%;max-width:665px;padding-top:50px;}
  .hero-copy h1{font-size:51px;}
  .hero-visual{width:80%;}
  .stats-panel{width:62.5%;}
  .hero-note{right:4.8%;}
}