:root{
  --bg:#ffffff;
  --text:#0a0a0a;
  --muted:#1a1a1a;
  --blue:#006cd2;
  --blue-dark:#0053a3;
  --headline-muted:#6b7378;
  --glass:rgba(0,0,0,0.13);
  --glass-blur:18px;
  --glass-light:rgba(255,255,255,0.28);
  --radius:0;
  --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad-x:clamp(20px,3.52vw,64px);
  --nav-top:clamp(16px,2.05vw,28px);
  --btn-icon:36px;
  --btn-pad-y:12px;
  --btn-pad-x:22px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;cursor:pointer}
[hidden]{display:none}

/* ---------- shell ---------- */
.page{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:var(--nav-top) var(--pad-x) clamp(28px,4.9vw,48px);
}
.bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:#ffffff;
  pointer-events:none;
  overflow:hidden;
}
.bg-fill{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:
    radial-gradient(120% 70% at 12% 4%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#ffffff 0%,#f2f5f8 30%,#c8d5e0 48%,#3d5f7d 68%,#16324a 84%,#0b1a26 100%);
}
.nav,.hero,.lede,.mobile-menu{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:clamp(16px,2.5vw,40px);
}
.nav__links{
  justify-self:start;
  display:flex;
  gap:clamp(12px,1.9vw,32px);
  padding:24px clamp(12px,2.1vw,34px);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  border-radius:var(--radius);
}
.nav__link{
  position:relative;
  font-size:clamp(13px,1.37vw,15px);
  font-weight:500;
  letter-spacing:-0.01em;
  color:#0a0a0a;
  line-height:1;
  white-space:nowrap;
  padding-bottom:2px;
  transition:color .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1);
  animation:link-in .55s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:var(--d);
}
.nav__link:hover{color:var(--blue);transform:translateY(-2px)}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:3px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.nav__link:hover::after{transform:scaleX(1)}

.logo{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  font-size:clamp(13px,1.45vw,19px);
  font-weight:600;
  letter-spacing:-0.028em;
  line-height:1;
  color:#0a0a0a;
  white-space:nowrap;
  transition:transform .35s cubic-bezier(.16,1,.3,1),color .35s cubic-bezier(.16,1,.3,1);
  animation:mark-in .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.04s;
}
.logo:hover{transform:scale(1.1)}

.nav .btn--nav{justify-self:end;animation:wipe-right .65s cubic-bezier(.16,1,.3,1) backwards;animation-delay:.16s}

.nav__burger{
  display:none;
  width:36px;
  height:36px;
  background:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  justify-self:end;
  transition:transform .22s cubic-bezier(.16,1,.3,1);
  animation:link-in .5s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.16s;
}
.nav__burger span{
  display:block;
  width:18px;
  height:1.5px;
  background:#0a0a0a;
  transition:width .22s cubic-bezier(.16,1,.3,1),background .22s cubic-bezier(.16,1,.3,1);
}
.nav__burger:hover{transform:scale(1.08)}
.nav__burger:hover span{background:var(--blue)}
.nav__burger:hover span:first-child,
.nav__burger:hover span:last-child{width:14px}

/* ---------- mobile menu ---------- */
.mobile-menu{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:1.25rem 0 .5rem;
}
.mobile-menu__links{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  padding:16px 20px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
}
.mobile-menu__links a{font-size:1.05rem;font-weight:500;letter-spacing:-0.01em}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:58px;
  border-radius:var(--radius);
  padding:var(--btn-pad-y) 10px var(--btn-pad-y) var(--btn-pad-x);
  gap:18px;
  font-size:16px;
  font-weight:500;
  letter-spacing:-0.015em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.btn:hover::before{transform:scaleX(1)}
.btn span,.btn .btn__icon{position:relative;z-index:1}
.btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--btn-icon);
  height:var(--btn-icon);
  transition:background .28s cubic-bezier(.16,1,.3,1),color .28s cubic-bezier(.16,1,.3,1);
}
.btn__icon svg{width:14px;height:14px;display:block}

.btn--nav{background:var(--blue);color:#fff}
.btn--nav::before{background:#004a96}
.btn--nav .btn__icon{background:var(--blue-dark);color:#fff}
.btn--nav:hover .btn__icon{background:#fff;color:var(--blue)}

.btn--light{background:#fff;color:var(--blue)}
.btn--light::before{background:#e8f2fb}
.btn--light .btn__icon{background:var(--blue);color:#fff}
.btn--light:hover .btn__icon{background:#fff;color:var(--blue)}

.btn--ghost{
  padding:12px 26px;
  color:#0a0a0a;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
}
.btn--ghost::before{background:rgba(255,255,255,.78);z-index:0}
.btn--ghost:hover{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}

/* ---------- hero ---------- */
.hero{margin-top:clamp(52px,10.15vh,92px);max-width:none}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:clamp(34px,3.6vw,42px);
  padding:0 18px 0 14px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(0,108,210,.2);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  color:var(--muted);
  font-size:clamp(13px,1.35vw,15px);
  font-weight:500;
  letter-spacing:-0.01em;
}
.badge__mark{
  width:14px;
  height:14px;
  background:#fff;
  border:2px solid var(--blue);
  flex:none;
}

.headline{
  margin-top:clamp(22px,2.8vw,36px);
  font-size:calc(clamp(2.9rem,5.9vw,5rem) + 3px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-0.038em;
}
.headline__mask{display:block;overflow:hidden}
.headline__rise{
  display:block;
  animation:type-rise .85s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:var(--d);
}
.headline__line{white-space:nowrap}
.headline__muted{color:var(--headline-muted);font-weight:600}

.headline__accent{
  position:relative;
  color:var(--headline-muted);
  display:inline-block;
}
.headline__accent::before,
.headline__accent::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  white-space:pre;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 72px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 72px),transparent 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:0% 100%;
  mask-size:0% 100%;
  animation:accent-fill 1.05s cubic-bezier(.4,0,.2,1) forwards;
}
.headline__accent::before{color:#7eb6ee;animation-delay:.7s}
.headline__accent::after{color:var(--blue);animation-delay:1.08s}

.actions{
  display:flex;
  gap:12px;
  margin-top:clamp(28px,3.4vw,42px);
}

/* ---------- lede ---------- */
.lede{
  margin-top:auto;
  max-width:700px;
  overflow:hidden;
  color:#ffffff;
  font-size:clamp(17px,1.8vw,20px);
  font-weight:300;
  line-height:1.5;
  letter-spacing:-0.01em;
}
.lede__rise{
  display:block;
  animation:type-rise .9s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:var(--d);
}

/* ---------- entrance ---------- */
.wipe{animation:wipe-left .7s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d)}

@keyframes link-in{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
@keyframes mark-in{from{opacity:0;transform:translate3d(-12px,8px,0)}to{opacity:1;transform:none}}
@keyframes type-rise{from{transform:translate3d(0,118%,0)}to{transform:translate3d(0,0,0)}}
@keyframes wipe-left{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wipe-right{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes accent-fill{
  from{-webkit-mask-size:0% 100%;mask-size:0% 100%}
  to{-webkit-mask-size:calc(100% + 72px) 100%;mask-size:calc(100% + 72px) 100%}
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  html,body{overflow:auto}
  .page{height:auto;min-height:100vh;min-height:100dvh}
  .nav__links,.nav > .btn--nav{display:none}
  .nav{grid-template-columns:auto 1fr auto}
  .logo{justify-self:start}
  .nav__burger{display:flex}
  .hero{margin-top:48px}
  .headline{font-size:calc(clamp(2.75rem,10vw,3.85rem) + 3px)}
  .headline__line{white-space:normal}
  .actions{flex-wrap:wrap}
  .lede{width:100%;max-width:700px;margin-top:64px}
}
@media (min-width:821px){
  .mobile-menu{display:none}
}
@media (max-height:700px) and (min-width:821px){
  .hero{margin-top:36px}
  .headline{font-size:calc(clamp(2.75rem,7.2vh,4.15rem) + 3px)}
}

@media (prefers-reduced-motion:reduce){
  .nav__link,.logo,.nav .btn--nav,.nav__burger,.headline__rise,.lede__rise,.wipe{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
  }
  .headline__accent{color:var(--blue)}
  .headline__accent::before,.headline__accent::after{content:none;animation:none!important}
}