:root{--blue:#154dff;--ink:#101216;--paper:#f4f3ef}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--blue);color:#fff;font-family:Inter,Arial,Helvetica,sans-serif}
.topbar{position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(22px,5vw,72px);background:rgba(244,243,239,.94);border-bottom:1px solid rgba(16,18,22,.12);backdrop-filter:blur(14px)}
.brand{font-size:23px;font-weight:900;letter-spacing:.18em;color:var(--blue)}
.login-link{color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;border-bottom:1px solid}
.slide{height:100svh;padding:130px clamp(24px,7vw,108px) 70px;display:flex;align-items:center}
.hero{position:relative;background:var(--blue);color:#fff;justify-content:space-between;overflow:hidden}
.hero-copy{position:relative;z-index:2;max-width:800px}
.eyebrow{margin:0 0 22px;color:#bcd0ff;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.hero h1{font-size:clamp(76px,14vw,205px);line-height:.76;letter-spacing:-.075em;margin:0}
.hero h1 span{font-size:.36em;letter-spacing:.2em}
.lead{max-width:620px;font-size:clamp(23px,3vw,44px);line-height:1.12;margin:44px 0 0}
.hero-mark{width:min(35vw,460px);aspect-ratio:1;border:2px solid rgba(255,255,255,.28);border-radius:50%;display:grid;place-items:center;transform:translateX(18%)}
.hero-mark span{font-size:clamp(130px,20vw,300px);font-weight:900;opacity:.22}
@media(max-width:760px){.topbar{padding:15px 20px}.brand{font-size:19px}.login-link{font-size:12px}.slide{height:100svh;padding:105px 22px 55px}.hero-mark{position:absolute;right:-28%;width:90vw}.hero h1{font-size:clamp(76px,22vw,96px)}.lead{max-width:360px;font-size:27px}}

@media(max-width:760px){
  html,body{height:auto;min-height:100%;overflow:auto}
  .topbar{padding:6px 20px;gap:12px}
  .login-link{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;text-decoration:underline;text-underline-offset:4px}
  .slide{height:auto;min-height:100svh}
}
@media(max-height:500px) and (orientation:landscape){
  html,body{height:auto;overflow:auto}
  .slide{height:auto;min-height:100svh;padding-top:90px;padding-bottom:30px}
  .hero h1{font-size:64px}
  .lead{margin-top:24px;font-size:23px}
}
@media(max-height:500px) and (orientation:landscape){.topbar{padding:6px 20px}.login-link{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;text-decoration:underline;text-underline-offset:4px}}