/* Sharp, responsive hero: clean vector artwork and original full-resolution cutout. */
.hero { padding: 24px 0 10px; background: linear-gradient(180deg,#fafbff 0%,#fff 100%); }
.hero .hero-frame {
  position:relative; isolation:isolate; display:flex; align-items:center;
  width:min(1440px,calc(100% - 48px)); min-height:506px;
  margin:0 auto; padding:0; overflow:hidden; border-radius:30px;
  border:1px solid #e8eafc; box-shadow:0 18px 48px rgba(53,54,126,.085);
  background:#f2f4ff url('images/hero-clean-background.svg') center center / 100% 100% no-repeat;
}
.hero .hero-frame::before,.hero .hero-frame::after {content:none!important;}
/* Artwork sits in its own right-hand layer. No cover, stretching or enlargement. */
.hero .hero-panorama { display:none!important; }
.hero .hero-girl {
  position:absolute; z-index:2; bottom:0; right:15px;
  height:auto; width:min(43.3%,610px); max-width:none;
  aspect-ratio:1303 / 1086; object-fit:contain; object-position:bottom right;
  transform:none; filter:drop-shadow(0 13px 20px rgba(49,47,122,.10));
  pointer-events:none; user-select:none;
}
.hero .hero-wash{display:none!important}
.hero .hero-content{
  z-index:3; position:relative; box-sizing:border-box;
  padding:50px 0 46px clamp(35px,4.9vw,76px);
  width:min(645px,53%); max-width:none;
}
.hero .hero-content .eyebrow {margin-bottom:22px;background:rgba(255,255,255,.86);}
.hero h1 {font-size:clamp(48px,4.1vw,65px);line-height:1.09;letter-spacing:-.063em;white-space:normal;margin-bottom:18px;}
.hero .hero-content>p {font-size:15px;line-height:1.74;max-width:430px;color:#536383;}
.hero .hero-actions{margin-top:25px;gap:19px}
.hero .hero-proof{margin-top:27px;color:#65718b}
@media(max-width:1280px){
  .hero .hero-frame {min-height:475px;}
  .hero .hero-girl {width:min(45%,565px);right:0;}
  .hero .hero-content {width:55%;}
  .hero h1 {font-size:clamp(46px,4.4vw,61px);}
}
@media(max-width:1000px){
  .hero .hero-frame{min-height:440px;}
  .hero .hero-girl{width:46%;right:-6px;}
  .hero .hero-content{padding-left:36px;width:56%;}
  .hero h1{font-size:clamp(41px,4.5vw,54px);}
  .hero .hero-content>p{font-size:13px;max-width:365px;}
  .hero .hero-actions{gap:11px;}
  .hero .hero-proof{font-size:10px;}
}


/* Tablet: editorial split composition, never squish the full desktop image. */
.hero .hero-girl-mobile{display:none}
@media (min-width:651px) and (max-width:900px){
  .hero{padding:16px 0 8px}
  .hero .hero-frame{width:calc(100% - 34px);min-height:425px;display:flex;align-items:center;border-radius:24px;background-size:100% 100%}
  .hero .hero-content{width:54%;max-width:none;padding:45px 0 45px 34px;z-index:3}
  .hero .hero-content .eyebrow{font-size:8px;letter-spacing:.08em;padding:8px 9px;margin-bottom:18px;white-space:normal}
  .hero h1{font-size:clamp(37px,5.15vw,47px);line-height:1.08;white-space:normal;margin-bottom:16px}
  .hero .hero-content>p{font-size:12.5px;line-height:1.68;max-width:335px}
  .hero .hero-actions{gap:10px;flex-wrap:wrap;margin-top:22px}
  .hero .hero-actions .button{padding:12px 13px;font-size:11px}
  .hero .text-button{font-size:11px;gap:8px}
  .hero .play-bubble{width:33px;height:33px}
  .hero .hero-proof{font-size:10px;margin-top:22px;max-width:310px}
  .hero .hero-girl-desktop{display:block;position:absolute;bottom:0;top:auto;right:0;width:45%;height:auto;object-fit:contain;max-width:none;filter:drop-shadow(0 12px 19px rgba(57,56,125,.08));z-index:2}
  .hero .hero-girl-mobile{display:none!important}
}

/* Phone: genuinely different art direction using the dedicated portrait mobile composition.
   The image has been artistically cropped and faded at top; no CSS stretching or distorted faces. */
@media (max-width:650px){
  .hero{padding:10px 0 7px;background:#fff}
  .hero .hero-frame{
    width:calc(100% - 20px); min-height:0; height:auto;
    display:flex; flex-direction:column; align-items:stretch;
    padding:0; margin:0 auto; overflow:hidden; isolation:isolate;
    border:1px solid #e2e7fa; border-radius:24px;
    background:
      radial-gradient(ellipse 85% 55% at 88% 42%,rgba(188,180,255,.35),transparent 70%),
      radial-gradient(ellipse 100% 48% at 14% 95%,rgba(135,198,255,.28),transparent 68%),
      linear-gradient(180deg,#f9faff 0%,#eff2ff 44%,#d4daff 100%);
    box-shadow:0 15px 32px rgba(47,51,124,.075);
  }
  .hero .hero-frame::before,.hero .hero-frame::after{content:none!important;display:none!important}
  .hero .hero-content{
    box-sizing:border-box;order:1;position:relative;z-index:3;display:flex;flex-direction:column;
    align-items:center;text-align:center;width:100%;max-width:none;
    padding:29px 20px 0;
  }
  .hero .hero-content .eyebrow{
    font-size:9px;letter-spacing:.085em;line-height:1.25;margin:0 0 17px;
    padding:8px 12px;max-width:100%;white-space:normal;background:rgba(255,255,255,.78);
    border-color:#d9ddfc;
  }
  .hero h1{
    font-size:clamp(34px,9vw,45px);line-height:1.08;letter-spacing:-.065em;font-weight:800;
    white-space:normal;margin:0 0 13px;max-width:100%;
  }
  .hero .hero-content>p{
    margin:0;max-width:380px;font-size:13.5px;line-height:1.64;color:#586681;
  }
  .hero .hero-actions{
    display:flex;align-items:center;justify-content:center;flex-direction:row;flex-wrap:wrap;
    gap:12px;margin:19px 0 0;max-width:100%;
  }
  .hero .hero-actions .button{
    min-height:44px;padding:11px 16px;font-size:12px;border-radius:11px;
  }
  .hero .text-button{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;white-space:nowrap}
  .hero .play-bubble{width:34px;height:34px}
  .hero .hero-proof{display:none!important}
  .hero .hero-girl-desktop{display:none!important}
  .hero .hero-girl-mobile{
    order:2;display:block!important;position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
    width:100%!important;height:auto!important;max-width:none!important;aspect-ratio:auto!important;
    margin:-2px 0 0!important;padding:0!important;
    align-self:stretch;object-fit:contain;object-position:center bottom;
    transform:none!important;filter:none!important;pointer-events:none;user-select:none;z-index:2;
  }
}
@media(max-width:360px){
  .hero .hero-frame{width:calc(100% - 14px);border-radius:20px}
  .hero .hero-content{padding:25px 13px 0}
  .hero .hero-content .eyebrow{font-size:8px;margin-bottom:15px;padding:7px 9px}
  .hero h1{font-size:clamp(30px,9.2vw,34px);margin-bottom:12px}
  .hero .hero-content>p{font-size:12.5px;line-height:1.59}
  .hero .hero-actions{gap:8px;margin-top:16px}
  .hero .hero-actions .button{padding:10px 11px;font-size:10.5px;min-height:41px}
  .hero .text-button{font-size:10.3px;gap:6px}
  .hero .play-bubble{width:31px;height:31px}
}
/* Mid-size phones/small tablets: keep the illustration compact rather than filling an entire screen. */
@media (min-width:541px) and (max-width:650px){
  .hero .hero-content{padding-top:34px}
  .hero .hero-girl-mobile{width:min(84%,500px)!important;align-self:center;}
}