/* =========================================================
   Vibrome / Level 42 AI — landing
   Built from Figma: Level 42 — Website — Brand (11230:24832)
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --black:#222222;
  --ink-1:#434a54;
  --ink-2:#6a727d;
  --ink-3:#9ba7b1;
  --line:#d5dde3;
  --line-soft:#cdd8ea;
  --white:#ffffff;
  --bg-gray:#f4f4f4;
  --bg-soft:#eef2f9;
  --blue:#0056d6;
  --blue-2:#1663d8;
  --red:#c1311a;
  --green:#07bb4f;
  --footer:#14100f;

  --container:1364px;
  --pad:24px;

  --shadow-lg:0 36px 48px 0 rgba(52,87,140,.2);
  --shadow-btn:0 4px 6px rgba(0,123,255,.35);

  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-num:'Lilita One',var(--font-body);
  --font-brand:'Montserrat',var(--font-body);

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:90px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,p,figure,address{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup{font-size:.55em;vertical-align:super;line-height:0}
address{font-style:normal}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.container{
  width:100%;max-width:calc(var(--container) + var(--pad) * 2);
  margin-inline:auto;padding-inline:var(--pad);
}

/* ---------- typography helpers ---------- */
.accent{color:var(--red)}
.green{color:var(--green);font-weight:700}
.blue{color:var(--blue-2);font-weight:600}

.section{padding:clamp(64px,7.5vw,120px) 0}
.section--white{background:var(--white)}
.section--gray{background:var(--bg-gray)}

.section__head{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  max-width:744px;margin-inline:auto;text-align:center;
}
.section__head--wide{max-width:none;align-items:flex-start;text-align:left}

.section__title{
  font-family:var(--font-display);
  font-weight:700;font-variation-settings:"wdth" 100;
  font-size:clamp(28px,2.9vw,44px);
  line-height:1.25;letter-spacing:-.01em;color:var(--black);
}
.section__title--left{text-align:left;max-width:960px;margin-inline:auto;width:100%}
/* CXR heading: force two balanced lines on desktop */
#cxr .section__head{max-width:1120px}
#cxr .section__title{max-width:1120px;margin-inline:auto}
#cxr .section__lead{max-width:744px;margin-inline:auto}
.brk-desktop{display:inline}
@media (max-width:1120px){
  #cxr .section__head,#cxr .section__title{max-width:744px}
  .brk-desktop{display:none}
}

.section__lead{
  font-size:clamp(17px,1.15vw,20px);
  line-height:1.7;color:var(--ink-1);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  padding:24px 32px;border-radius:50px;
  font-size:16px;font-weight:600;line-height:1.4;
  text-transform:uppercase;letter-spacing:.02em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s;
  will-change:transform;
}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-btn)}
.btn--primary:hover{background:#0049b8;transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,86,214,.35)}
.btn--white{background:#fff;color:var(--ink-1)}
.btn--white:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(52,87,140,.18)}
.btn--white img{width:24px;height:24px;transition:transform .35s var(--ease)}
.btn--white:hover img{transform:scale(1.15)}
.btn:active{transform:translateY(-1px)}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s;
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);padding-block:16px;
}
.header__logo img{width:clamp(200px,18.2vw,262px);height:auto}

/* glass state */
.header.is-stuck{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(52,87,140,.12),0 12px 32px rgba(52,87,140,.08);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header.is-stuck{background:rgba(255,255,255,.94)}
}
.header{will-change:background-color}

/* ---------- hamburger + hover panel ---------- */
.nav{position:relative}
.nav__toggle{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;padding:12px;border-radius:999px;
  background-image:linear-gradient(-87.67deg,rgba(239,248,255,.48) 10.4%,rgba(255,255,255,.48) 94.4%);
  box-shadow:0 2px 14px rgba(52,87,140,.14);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.header.is-stuck .nav__toggle{background-image:linear-gradient(-87.67deg,#eff8ff 10.4%,#fff 94.4%)}
.nav__toggle img{width:36px;height:36px;transition:transform .4s var(--ease)}
.nav:hover .nav__toggle,
.nav__toggle[aria-expanded="true"]{transform:scale(1.06);box-shadow:0 8px 26px rgba(52,87,140,.22)}
.nav:hover .nav__toggle img,
.nav__toggle[aria-expanded="true"] img{transform:rotate(90deg)}

.nav__panel{
  position:absolute;top:calc(100% + 14px);right:0;
  width:340px;padding:28px;border-radius:24px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 28px 60px rgba(20,26,40,.18);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);
  transform-origin:top right;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s;
}
.nav:hover .nav__panel,
.nav:focus-within .nav__panel,
.nav.is-open .nav__panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* invisible bridge so the pointer can travel to the panel */
.nav__panel::before{content:"";position:absolute;inset:-16px -4px auto;height:20px}

.nav__eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:14px;
}
.nav__list li+li{border-top:1px solid rgba(52,87,140,.12)}
.nav__list a{
  display:flex;align-items:baseline;gap:12px;
  padding:12px 6px;font-size:17px;font-weight:500;color:var(--black);
  border-radius:10px;transition:color .25s,background-color .25s,padding-left .25s var(--ease);
}
.nav__list a:hover{color:var(--blue);background:rgba(0,86,214,.06);padding-left:14px}
.nav__idx{
  font-family:var(--font-num);font-size:13px;color:var(--ink-3);
  letter-spacing:.06em;transition:color .25s;
}
.nav__list a:hover .nav__idx{color:var(--blue)}
.nav__cta{width:100%;margin-top:20px;padding:16px 24px;font-size:14px}

/* =========================================================
   1 · HERO
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  min-height:min(1084px,100svh);
  display:flex;align-items:center;
  padding-top:var(--header-h);
  background-image:linear-gradient(119.38deg,#edeff3 3.37%,#c6cfd9 94.43%);
}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__device{
  position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:center center;
  animation:heroFloat 14s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-14px,0) scale(1.012)}
}

.hero__content{position:relative;display:flex;flex-direction:column;gap:clamp(48px,7vw,120px);padding-block:60px}
.hero__text{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,32px);max-width:558px}

.hero__title{
  font-family:var(--font-display);font-weight:700;font-variation-settings:"wdth" 100;
  font-size:clamp(38px,4.6vw,67px);line-height:1.1;letter-spacing:-.015em;
  color:var(--black);
}
.hero__lead{
  font-size:clamp(18px,1.5vw,20px);line-height:1.45;color:var(--ink-1);
  max-width:558px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:clamp(10px,1.9vw,28px)}

.hero__badges{display:flex;gap:24px}
.badge{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:144px;text-align:center;
  font-size:clamp(15px,1.05vw,18px);line-height:1.4;color:var(--ink-2);
}
.badge img{width:64px;height:64px;transition:transform .45s var(--ease)}
.badge:hover img{transform:translateY(-6px) scale(1.06)}

/* --- imPulse UNA card, right side of the hero --- */
.hero__card{
  position:absolute;top:clamp(300px,40%,468px);right:var(--pad);
  z-index:2;width:min(393px,32vw);
  display:flex;flex-direction:column;align-items:center;gap:28px;
  padding:48px;border-radius:24px;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .3s;
}
.hero__card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.82);
  box-shadow:0 30px 60px rgba(52,87,140,.18);
}
.hero__card-media{
  position:relative;display:block;width:100%;aspect-ratio:271/212;
  filter:drop-shadow(0 3.65px 40px rgba(81,170,248,.42))
         drop-shadow(0 2px 10px rgba(81,170,248,.28));
}
.hero__card-media img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform .6s var(--ease);
}
.hero__card:hover .hero__card-media img{transform:scale(1.05)}
.hero__card-text{display:flex;flex-direction:column;align-items:center;gap:13px;width:100%}
.hero__card-name{
  font-family:var(--font-brand);font-weight:600;
  font-size:clamp(22px,2.3vw,32px);line-height:1.37;color:var(--black);
  text-align:center;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(34,34,34,.35);
  transition:text-decoration-color .3s;
}
.hero__card:hover .hero__card-name{text-decoration-color:currentColor}
.hero__card-name sup{font-weight:300}
.hero__card-una{color:#328ffd;font-weight:500}
.hero__card-rule{width:39px;height:1px}
.hero__card-tag{
  font-family:var(--font-brand);font-weight:300;
  font-size:clamp(14px,1.2vw,18px);line-height:1.31;
  letter-spacing:.08em;text-transform:uppercase;color:var(--black);text-align:center;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero__card{background:rgba(255,255,255,.9)}
}

/* =========================================================
   2 · DEVICE (video)
   ========================================================= */
.device{
  position:relative;overflow:hidden;background:#fff;
  min-height:clamp(560px,60vw,1160px);
  display:flex;align-items:stretch;justify-content:center;
}
.device__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* =========================================================
   3 · CARE CASCADE  (single image from Figma)
   ========================================================= */
#cascade .section__title{text-align:center}
.cascade-figure{
  margin:60px auto 0;max-width:1362px;
}
.cascade-figure img{
  width:100%;height:auto;display:block;
}

/* =========================================================
   4 · SEVERITY SPECTRUM
   ========================================================= */
.spectrum{
  margin-top:60px;background:#fff;border-radius:24px;overflow:hidden;
}
.spectrum__row{position:relative;display:flex;align-items:stretch}
.spectrum__col{
  flex:1 1 0;min-width:0;height:529px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:0 0 32px;background:#fff;
  border-right:1px solid var(--line);
}
.spectrum__col:last-of-type{border-right:0}

.spectrum__media{
  position:relative;width:100%;height:379px;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* match each column's image backdrop so the baked-in panel blends seamlessly */
.spectrum__col:nth-child(2) .spectrum__media{background:#f1f4ed}
.spectrum__col:nth-child(3) .spectrum__media{background:#fdf1f1}
.spectrum__media img{
  width:100%;height:100%;object-fit:contain;object-position:center;
}

.spectrum__title{font-size:clamp(20px,1.7vw,26px);font-weight:700;line-height:1.4;color:var(--black);text-align:center}
.spectrum__text{
  max-width:82%;font-size:clamp(16px,1.3vw,20px);font-weight:500;line-height:1.4;
  color:var(--ink-1);text-align:center;
}

.chev{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:100px;
  background:#fff;border:3px solid rgba(0,86,214,.4);box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease),border-color .3s;
}
.chev img{width:40px;height:40px}
.chev--a,.chev--b{position:absolute;top:197px;z-index:3}
.chev--a{left:calc(33.333% - 36px)}
.chev--b{left:calc(66.667% - 36px)}
.spectrum:hover .chev,.flow:hover .chev{border-color:rgba(0,86,214,.7)}
.chev--a{animation:chevNudge 3.2s ease-in-out infinite}
.chev--b{animation:chevNudge 3.2s ease-in-out .4s infinite}
@keyframes chevNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

.spectrum__foot{display:flex;flex-direction:column;align-items:center;gap:24px;padding-bottom:32px}
.spectrum__scale{
  width:100%;height:19px;
  background:linear-gradient(90deg,#84ca50 6.05%,#f0873a 56.02%,#fd3b3d 100%);
}
.spectrum__caption{
  max-width:718px;text-align:center;
  font-size:clamp(18px,1.5vw,22px);font-weight:700;line-height:1.7;color:var(--ink-1);
}

.personal{
  display:flex;align-items:center;margin-top:36px;
  background:#fff;border-radius:24px;overflow:hidden;
}
.personal__text{
  flex:0 0 407px;max-width:407px;
  display:flex;flex-direction:column;gap:16px;padding:32px;
}
.personal__title{font-size:clamp(22px,1.9vw,28px);font-weight:700;line-height:1.4;color:var(--black)}
.personal__desc{font-size:clamp(16px,1.35vw,20px);font-weight:500;line-height:1.4;color:var(--ink-1)}
.personal__media{
  position:relative;flex:1 1 0;min-width:0;height:253px;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--line);
}
.personal__media img{max-width:100%;max-height:100%;object-fit:contain}

/* =========================================================
   5 · VIBROME GenAI CXR
   ========================================================= */
.flow{
  display:flex;align-items:center;justify-content:center;
  gap:16px;margin-top:60px;
}
.phone{
  position:relative;flex:0 1 266px;
  width:clamp(150px,19vw,266px);aspect-ratio:266/552;
  background:url("../assets/img/phone-frame.png") center/207.32% 100% no-repeat;
  transition:transform .5s var(--ease);
}
.phone:hover{transform:translateY(-10px)}
.phone__media{
  position:absolute;object-fit:cover;border-radius:2px;
  left:6.02%;top:10.33%;width:88.35%;height:77.9%;
}
.phone:nth-of-type(2) .phone__media{left:6.39%;width:87.59%}
.phone__media--charts{left:3.76%;top:9.78%;width:92.86%;height:77.9%;background:#000}
.phone__cxr{position:absolute;object-fit:cover;left:6.39%;width:86.47%;height:32.79%}
.phone__cxr--1{top:10.51%}
.phone__cxr--2{top:43.84%;width:86.84%}
.phone__logo{position:absolute;left:15.41%;top:79.71%;width:68.42%;height:auto}
.chev--flow{flex:0 0 auto;animation:chevNudge 3s ease-in-out infinite}
.chev--flow:nth-of-type(2){animation-delay:.3s}

/* =========================================================
   6 · GUIDED EXAMINATION
   ========================================================= */
.exam{margin-top:60px}
.exam__frame{
  position:relative;width:100%;aspect-ratio:1368/722;
  min-height:420px;border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:0 24px 60px rgba(52,87,140,.14);
  border:1px solid var(--line);
}
.exam__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.exam__placeholder{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:#fff;color:var(--ink-2);font-size:15px;
  transition:opacity .5s var(--ease),visibility .5s;
}
.exam__frame.is-ready .exam__placeholder{opacity:0;visibility:hidden}
.exam__spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--blue);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.exam__note{margin-top:16px;text-align:center;font-size:15px;color:var(--ink-2)}
.exam__note a{color:var(--blue);font-weight:600}
.exam__note a:hover{text-decoration:underline}

/* =========================================================
   7 · PRODUCT FAMILY
   ========================================================= */
.section--family{padding-bottom:clamp(64px,7vw,112px)}
/* --- Product family: heading left (with divider) + brand image right --- */
.family__row{
  display:flex;align-items:center;gap:clamp(32px,4vw,60px);margin-top:60px;
}
.family__intro{
  flex:none;width:355px;max-width:32%;
  border-right:2px solid rgba(0,0,0,.1);
  padding-right:clamp(24px,3vw,48px);
}
.family__heading{
  font-family:var(--font-display);font-weight:700;font-variation-settings:"wdth" 100;
  font-size:clamp(30px,3.4vw,44px);line-height:1.4;color:var(--black);
}
.family__media{flex:1 1 0;min-width:0}
.family__media img{width:100%;height:auto;display:block}

/* =========================================================
   8 · FAQ
   ========================================================= */
.section--faq{padding-bottom:clamp(64px,7vw,112px)}
.faq{max-width:960px;margin:60px auto 0}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:center;gap:20px;
  padding:36px 0;cursor:pointer;list-style:none;
  font-size:clamp(19px,1.5vw,22px);font-weight:600;line-height:1.5;
  letter-spacing:-.015em;color:var(--black);
  transition:color .25s;
}
.faq__item[open] .faq__q{font-size:clamp(20px,1.6vw,24px);padding-bottom:15px}
.faq__q::-webkit-details-marker{display:none}
.faq__q span{flex:1 1 auto;min-width:0}
.faq__q:hover{color:var(--blue)}
.faq__icon{
  flex:0 0 24px;width:24px;height:24px;
  background:url("../assets/img/icon-plus.svg") center/contain no-repeat;
  transition:transform .35s var(--ease),opacity .2s;
}
.faq__item[open] .faq__icon{background-image:url("../assets/img/icon-minus.svg");transform:rotate(180deg)}
.faq__a{padding-bottom:36px}
.faq__a p{
  font-size:clamp(16px,1.2vw,18px);line-height:1.85;letter-spacing:-.015em;color:var(--ink-2);
}
.faq__item[open] .faq__a{animation:faqOpen .4s var(--ease) both}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =========================================================
   9 · CTA
   ========================================================= */
.cta{overflow:hidden}
.cta__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:60px}
.cta__wave{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:134vw;min-width:1200px;max-width:none;height:auto;pointer-events:none;
  opacity:.9;
}
.cta__inner .btn{position:relative;z-index:1}
.reveal-in .cta__wave{animation:waveIn 1.4s var(--ease) both}
@keyframes waveIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:.9;transform:translateX(-50%)}}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--footer);color:#fff;padding:64px 0}
.footer__top{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap}
.footer__brand{display:flex;flex-direction:column;gap:48px}
.footer__brand img{width:312px;height:auto}
.footer__powered{font-size:14px;line-height:1.45;color:var(--ink-3)}
.footer__contacts{display:flex;gap:clamp(40px,8vw,120px);align-items:flex-end;font-size:16px;line-height:1.6}
.footer__contacts a{transition:color .25s}
.footer__contacts a:hover{color:#7fb0ff}
.footer__rule{height:1px;border:0;background:rgba(255,255,255,.18);margin:36px 0}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__copy,.footer__legal{font-size:14px;line-height:1.45;color:var(--ink-3)}
.footer__social{display:flex;gap:24px}
.footer__social img{width:36px;height:36px;transition:transform .35s var(--ease),opacity .25s}
.footer__social a:hover img{transform:translateY(-4px) scale(1.08)}

/* =========================================================
   MODALS (video + request form)
   ========================================================= */
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(12,16,24,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);
}
.modal.is-open .modal__backdrop{opacity:1}
.modal__box{
  position:relative;z-index:1;width:100%;
  opacity:0;transform:translateY(16px) scale(.98);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.modal.is-open .modal__box{opacity:1;transform:none}
.modal__box--video{max-width:1100px}
.modal__box--form{
  max-width:760px;max-height:calc(100vh - 48px);overflow-y:auto;
  background:#fff;border-radius:24px;padding:clamp(28px,4vw,48px);
  box-shadow:0 40px 90px rgba(10,16,30,.4);
}
.modal__close{
  position:absolute;top:0;right:0;transform:translate(0,-46px);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;
  transition:background-color .25s,transform .25s var(--ease);
}
.modal__close:hover{background:rgba(255,255,255,.28);transform:translate(0,-46px) rotate(90deg)}
.modal__box--form .modal__close{
  transform:none;top:16px;right:16px;
  background:var(--bg-gray);color:var(--ink-1);
}
.modal__box--form .modal__close:hover{background:var(--line);transform:rotate(90deg)}
.modal__player{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:16px;overflow:hidden;background:#000;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.modal__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- request form ---- */
.rform__head{margin-bottom:28px;padding-right:48px}
.rform__title{
  font-family:var(--font-display);font-weight:700;font-variation-settings:"wdth" 100;
  font-size:clamp(24px,2.4vw,32px);line-height:1.25;color:var(--black);
}
.rform__lead{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.rform__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field--wide{grid-column:1 / -1}
.field__label{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-1)}
.field__label i{color:var(--red);font-style:normal}
.field__input{
  width:100%;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:15px;color:var(--black);
  transition:border-color .25s,box-shadow .25s;
}
.field__input::placeholder{color:#b3bcc6}
.field__input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,86,214,.14)}
.field__input--area{resize:vertical;min-height:84px;line-height:1.5}
select.field__input{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a727d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.field.is-invalid .field__input{border-color:var(--red);box-shadow:0 0 0 3px rgba(193,49,26,.12)}
.field__err{font-size:12.5px;color:var(--red);min-height:0}
.field.is-invalid .field__err{min-height:16px}

.consent{display:flex;align-items:flex-start;gap:11px;margin-top:20px;font-size:14px;line-height:1.5;color:var(--ink-1);cursor:pointer}
.consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--blue);flex:none;cursor:pointer}
.consent i{color:var(--red);font-style:normal}
.consent.is-invalid span{color:var(--red)}

.rform__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.rform__foot .btn{padding:17px 34px}
.rform__note{font-size:13.5px;color:var(--ink-2)}
.rform__status{margin-top:14px;font-size:14px;color:var(--red);line-height:1.5}
.rform.is-sending .btn{opacity:.6;pointer-events:none}

.rform__done{text-align:center;padding:16px 0 8px}
.rform__done h3{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--black);margin-bottom:10px}
.rform__done p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:420px;margin:0 auto 26px}
.rform__tick{
  width:64px;height:64px;margin:0 auto 20px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,187,79,.12);color:var(--green);
  animation:tickIn .5s var(--ease) both;
}
@keyframes tickIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

body.is-locked{overflow:hidden}

@media (max-width:640px){
  .modal{padding:14px}
  .rform__grid{grid-template-columns:1fr}
  .modal__box--form{max-height:calc(100dvh - 28px);border-radius:20px}
  .modal__close{transform:translate(0,-40px)}
  .modal__close:hover{transform:translate(0,-40px) rotate(90deg)}
  .rform__head{padding-right:40px}
  .rform__foot{flex-direction:column;align-items:stretch}
  .rform__foot .btn{width:100%}
  .rform__note{text-align:center}
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal[data-delay="1"]{transition-delay:.1s}
.js .reveal[data-delay="2"]{transition-delay:.2s}
.js .reveal[data-delay="3"]{transition-delay:.3s}
.js .reveal.reveal-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1440px){
  :root{--pad:32px}
}

@media (max-width:1200px){
  .personal__text{flex-basis:340px;max-width:340px}
  .chev--a,.chev--b{top:170px;transform:scale(.85)}

  .hero__card{
    position:static;width:min(393px,100%);margin-top:8px;
    padding:32px;gap:26px;
  }
  .hero__content{align-items:flex-start}
}

/* phone flow gets its 2x2 grid earlier than the rest of the tablet rules */
@media (max-width:1100px){
  .flow{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 20px;justify-items:center;align-items:center;
  }
  .phone{flex:none;width:min(100%,266px)}
  .chev--flow{display:none}
}

@media (max-width:1000px){
  .hero{min-height:auto;padding-block:calc(var(--header-h) + 40px) 60px}
  .hero__device{object-position:center center;opacity:.5}
  .hero__content{padding-block:20px}
  .hero__text{max-width:min(558px,100%)}

  /* spectrum → stacked, arrows interleaved between the cards */
  .spectrum__row{flex-direction:column;gap:0}
  .spectrum__col{
    height:auto;padding-top:0;padding-bottom:36px;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .spectrum__col:last-of-type{border-bottom:0}
  .spectrum__media{height:clamp(220px,44vw,340px)}
  .spectrum__row > div:nth-of-type(1){order:1}
  .chev--a{order:2}
  .spectrum__row > div:nth-of-type(2){order:3}
  .chev--b{order:4}
  .spectrum__row > div:nth-of-type(3){order:5}
  .chev--a,.chev--b{
    position:static;left:auto;top:auto;
    transform:rotate(90deg) scale(.8);
    margin:-20px auto;animation:none;
  }

  .personal{flex-direction:column;align-items:stretch}
  .personal__text{flex-basis:auto;max-width:none}
  .personal__media{
    flex:none;height:auto;overflow:visible;
    border-right:0;border-top:1px solid var(--line);
    padding:20px;
  }
  .personal__media img{width:100%;height:auto;max-height:none}

  .family__row{flex-direction:column;align-items:stretch;gap:24px}
  .family__intro{width:auto;max-width:none;border-right:0;padding-right:0}
}

@media (max-width:900px){
  
  .flow{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 20px;justify-items:center;align-items:center;
  }
  .phone{flex:none;width:min(100%,250px)}
  .chev--flow{display:none}

  .footer__top{flex-direction:column;align-items:flex-start;gap:36px}
  .footer__brand{gap:28px}
  .footer__contacts{flex-direction:column;align-items:flex-start;gap:20px}
}

@media (max-width:768px){
  :root{--pad:20px;--header-h:84px}

  .nav__panel{
    position:fixed;top:var(--header-h);right:10px;left:10px;width:auto;
    max-height:calc(100svh - var(--header-h) - 20px);overflow-y:auto;
  }
  /* on touch devices hover must not open the panel — click only */
  .nav:hover .nav__panel{opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97)}
  .nav.is-open .nav__panel{opacity:1;visibility:visible;transform:none}
  .nav__toggle{width:52px;height:52px;padding:9px}
  .nav__toggle img{width:34px;height:34px}

  .btn{padding:18px 26px;font-size:14px;gap:12px}
  .hero__actions{gap:14px}
  .hero__actions .btn{flex:1 1 100%}
  .hero__badges{gap:8px;flex-wrap:nowrap;justify-content:space-between}
  .badge{width:auto;flex:1 1 0;min-width:0;font-size:14px}
  .badge img{width:48px;height:48px}

  .device__caption{padding-top:clamp(160px,58vw,420px);font-size:15px}

  .section__head{gap:16px}
  .spectrum,.flow,.exam,.family,.faq,.cascade-figure{margin-top:36px}

  .spectrum__text{max-width:100%;padding-inline:20px}
  .personal__text{padding:24px}

  .flow{gap:24px 14px}
  .phone{width:min(100%,220px)}

  .exam__frame{aspect-ratio:3/4;min-height:0}


  .faq__q{padding:24px 0;gap:14px}
  .faq__item[open] .faq__q{padding-bottom:8px}
  .faq__a{padding-bottom:24px}

  .cta__wave{width:280vw}

  .footer{padding:48px 0}
  .footer__brand img{width:240px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:20px}
  .footer__social{gap:18px}
}

@media (max-width:520px){
  .hero__badges{flex-wrap:nowrap;gap:6px}
  .badge{flex:1 1 0;min-width:0;font-size:12px;gap:8px}
  .badge img{width:40px;height:40px}
  .flow{grid-template-columns:minmax(0,1fr);gap:24px}
  .phone{width:min(100%,260px)}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .hero__device{animation:none}
}

/* print-ish safety */
@media (max-width:340px){
  .header__logo img{width:150px}
}

/* ============ Light media protection ============ */
/* deter drag / long-press-save / selection on media without hurting layout */
img, video, picture{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-user-drag:none; -khtml-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;              /* iOS: no "Save Image" popover */
  pointer-events:none;                     /* images aren't interactive targets */
}
/* re-enable pointer events where an image must stay clickable/hoverable */
a img, button img, .hero__card img, .flow img, .chev img, .nav__toggle img,
.header__logo img, .footer__brand img, .footer__social img{
  pointer-events:auto;
}