section[id]{scroll-margin-top:100px}
.nav-links a:focus-visible,.btn:focus-visible,.poster-card:focus-visible,.slide:focus-visible,.side-item:focus-visible,.dialog-close:focus-visible{outline:3px solid #2d55ff;outline-offset:4px}
dialog{border:1px solid #dbe3f0;border-radius:28px;padding:32px;max-width:420px;width:calc(100% - 40px);font-family:Inter,system-ui,sans-serif;color:#0d1324;box-shadow:0 26px 90px #0a102033}
dialog::backdrop{background:#0b1020a6;backdrop-filter:blur(5px)}
dialog h2{font-family:'Space Grotesk',sans-serif;margin:0 30px 12px 0;font-size:28px;letter-spacing:-.04em}
dialog p{color:#65718b;line-height:1.6;margin-bottom:24px}
.dialog-close{position:absolute;top:13px;right:15px;background:none;border:0;font-size:28px;cursor:pointer;color:#65718b}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.btn,.poster-card{transition:none}}

/* Keep the mobile layout within the screen, including safe areas on iPhone. */
#top{scroll-margin-top:84px}
.hero-grid>*,.info-strip>*,.final-card>*,.phone,.screen{min-width:0}
.hero-copy::after{pointer-events:none}
.nav-toggle{display:none;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:13px;background:#fff;color:#233252;cursor:pointer}
.nav-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.carousel,.poster-carousel,.steps{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.tabs{scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}

@media(max-width:980px){
  .nav-in{position:relative}
  .nav-toggle{display:inline-flex}
  .nav[data-menu-open="true"] .nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:absolute;top:calc(100% + 8px);left:0;right:0;max-width:none;padding:8px;gap:4px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-lg);white-space:normal}
  .nav-links a{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
  .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding-bottom:0}
  .step{min-width:0}
}

@media(max-width:620px){
  body{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  .wrap{width:calc(100% - 32px)}
  .nav-in{gap:8px;padding-top:10px;padding-bottom:10px}
  .brand{gap:6px;flex:0 0 auto;min-height:44px}
  .brand img{width:34px;height:34px}
  .brand strong{font-size:19px}
  .nav-right{gap:7px}
  .language-picker{height:44px;padding:0 7px}
  .language-picker select{width:96px;max-width:96px}
  .nav-toggle{width:44px;height:44px}
  .hero{padding-top:16px}
  .hero-grid{gap:14px}
  .hero-copy{padding:20px;border-radius:24px}
  .badge{font-size:10.5px;padding:8px 10px;gap:8px}
  .badge::before{flex:0 0 auto}
  h1{font-size:clamp(32px,9vw,42px);line-height:1.05;letter-spacing:-.05em;margin:16px 0}
  h1 span{display:block}
  .sub{font-size:15px;line-height:1.55;margin-bottom:18px}
  .cta-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:16px}
  .cta-row .btn{width:100%;min-height:50px;padding:12px 16px}
  .mini-row{gap:8px}
  .mini{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 12px;border-radius:14px}
  .mini b{flex:0 0 100px;font-size:12px;line-height:1.3;margin:0}
  .mini span{font-size:11.5px;line-height:1.4}
  .hero-phone{padding:12px;border-radius:24px}
  .phone{width:100%;max-width:350px;padding:10px}
  .screen{padding:12px}
  .hero-img img{height:190px}
  .hero-img div{padding:14px}
  .hero-img h3{font-size:21px;line-height:1.08}
  .thumb-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .thumb,.thumb img{min-height:96px;height:96px}
  .thumb b,.thumb span{left:8px;right:8px}
  .thumb b{font-size:10.5px;line-height:1.1;bottom:25px}
  .thumb span{font-size:9.5px}
  .stats-grid{gap:10px}
  .stat{padding:16px}
  .stat b{font-size:25px}
  .stat span{font-size:11.5px;line-height:1.4}
  .section{padding:18px 0}
  .section-head h2{font-size:30px;line-height:1.07}
  .section-head p{font-size:14px;line-height:1.5}
  .carousel,.poster-carousel{margin-right:0;gap:12px;scroll-padding-inline:1px}
  .slide,.slide.wide{flex-basis:min(82vw,320px)}
  .slide-body{padding:16px}
  .slide h3{font-size:22px;line-height:1.15}
  .poster-card{flex-basis:clamp(124px,36vw,158px);height:212px}
  .dark-card{padding:22px;border-radius:24px;min-height:0}
  .dark-card h2{font-size:34px;line-height:1.04}
  .side-item{border-radius:22px}
  .side-item h3{font-size:20px;line-height:1.15}
  .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;padding:0}
  .step{min-width:0;padding:14px;border-radius:20px}
  .step h3{font-size:17px;line-height:1.15}
  .step p{font-size:12px;line-height:1.5}
  .num{margin-bottom:10px}
  .final{padding:20px 0 28px}
  .final-card{width:calc(100% - 32px);padding:22px;border-radius:24px}
  .final-card h2{font-size:34px;line-height:1.05}
  .final-card>div:last-child{min-width:0;width:100%}
  .final-card .btn{width:100%;min-height:50px;padding:12px 16px}
  .final-mini{justify-content:center}
  footer{padding-bottom:20px}
  .mobile-bar{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:8px;border-radius:20px}
  .mobile-bar .btn{min-height:52px;border-radius:14px}
  dialog{max-height:calc(100dvh - 40px);overflow:auto;padding:24px}
}

@media(max-width:359px){
  .wrap,.final-card{width:calc(100% - 24px)}
  .nav-in{gap:6px}
  .brand img{width:28px;height:30px}
  .brand strong{font-size:17px}
  .nav-right{gap:6px}
  .language-picker{gap:3px;padding:0 6px}
  .language-picker select{width:90px;max-width:90px;font-size:10px}
  .nav-toggle{width:44px}
  .hero-copy{padding:16px}
  .mini b{flex-basis:86px}
  .hero-img h3{font-size:19px}
  .hero-img p{font-size:11px}
  .section-head h2{font-size:28px}
}

@media(hover:none){.btn:hover,.poster-card:hover,.slide:hover{transform:none}}