/* ── font ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:'InterV';
  src:url(assets/inter-variable.woff2) format('woff2'),
      url('https://rsms.me/inter/font-files/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:block;
}

/* ── tokens ───────────────────────────────────────────────────────── */
@property --u{syntax:"<length>";inherits:true;initial-value:1px}

:root{
  --w-display:400; --w-body:400; --w-brand:535; --w-nav:515;
  --w-action:620; --w-chip:420; --w-caption:400;
  --t-display:64; --lh-display:70; --ls-display:-.02em;
  --t-body:16; --lh-body:17.9; --ls-body:-.015em;
  --t-brand:21.2; --ls-brand:-.004em;
  --t-nav:15.75; --t-action:16; --t-chip:11.95; --t-badge:12.75; --t-plabel:12.6;
  --e-reveal:cubic-bezier(.16,1,.3,1);
  --e-settle:cubic-bezier(.22,1,.36,1);
}


/* type system (InterVariable) for the whole page */
body{
  font-family:'InterV',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 32;
}

/* ── section shell ────────────────────────────────────────────────── */
.hero-section{
  position:relative;
  color:#fff;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  font-size:min( max(calc(100vw / 14.4), calc(100svh / 8.62)), calc(100svh / 6.8), 175px );
  --u:.01em;
}

/* ── background ───────────────────────────────────────────────────── */
.hero-section__bg{position:absolute;inset:0;z-index:0;background:#0b8ed2}
.hero-section__bg video{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  display:block;
}

/* ── stage ────────────────────────────────────────────────────────── */
.hero-section .stage{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;
  padding:calc(30.96*var(--u)) calc(32*var(--u)) calc(114.82*var(--u));
}
.hero-section .sp,
.hero-section .vsp{flex-basis:0;min-width:calc(12*var(--u))}
.hero-section .sp-a{flex-grow:1.5563}
.hero-section .sp-b{flex-grow:1}
.hero-section .vsp{min-width:0;min-height:calc(16*var(--u))}
.hero-section .vsp-a{flex-grow:2.4467}
.hero-section .vsp-b{flex-grow:1}

/* ── header ───────────────────────────────────────────────────────── */
.hero-section .head{
  display:flex;align-items:center;
  height:calc(41.76*var(--u));
  flex:none;
}
.hero-section .logo{
  display:flex;align-items:center;gap:calc(9.46*var(--u));
  position:relative;top:calc(.28*var(--u));
}
.hero-section .mark{
  width:calc(22*var(--u));height:calc(22*var(--u));flex:none;
  border-radius:calc(6*var(--u));object-fit:cover;
  box-shadow:0 calc(2*var(--u)) calc(8*var(--u)) rgba(3,58,92,.28), inset 0 0 0 1px rgba(255,255,255,.35);
}
.hero-section .nav-x{display:flex;align-items:center;color:#fff;opacity:.9;transition:opacity .18s ease}
.hero-section .nav-x:hover{opacity:1}
.hero-section .nav-x svg{width:calc(16*var(--u));height:calc(16*var(--u));display:block}
.hero-section .brand{
  font-size:calc(var(--t-brand)*var(--u));
  font-weight:var(--w-brand);
  letter-spacing:var(--ls-brand);
  white-space:nowrap;
  line-height:1;
}
.hero-section .nav{
  display:flex;align-items:center;gap:calc(23.9*var(--u));
  font-size:calc(var(--t-nav)*var(--u));
  font-weight:var(--w-nav);
  white-space:nowrap;
}
.hero-section .nav a{transition:opacity .18s ease}
.hero-section .nav a:hover{opacity:.74}
.hero-section .cta{
  display:flex;align-items:center;justify-content:center;
  width:calc(189.72*var(--u));height:calc(41.76*var(--u));
  border-radius:calc(20.88*var(--u));
  background:#fff;color:#000;
  font-size:calc(var(--t-action)*var(--u));
  font-weight:var(--w-action);
  letter-spacing:-.024em;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(3,58,92,.10);
  transition:transform .18s ease, box-shadow .18s ease;
}
.hero-section .cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(3,58,92,.20)}
.hero-section .menu-btn{display:none}

/* ── hero copy ────────────────────────────────────────────────────── */
.hero-section .hero{flex:none}
.hero-section .badge{
  position:relative;
  width:calc(291.06*var(--u));height:calc(23.94*var(--u));
  border-radius:calc(11.97*var(--u));
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  backdrop-filter:blur(10px) saturate(115%);
}
.hero-section .badge::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(155deg, rgba(112,242,255,.98) 0%, rgba(104,234,255,.95) 42%, rgba(87,218,255,.88) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.hero-section .chip{
  position:absolute;left:calc(4.14*var(--u));top:calc(3.7*var(--u));
  width:calc(41.76*var(--u));height:calc(16.6*var(--u));
  border-radius:calc(8.3*var(--u));
  background:#fff;color:#1591d6;
  font-size:calc(var(--t-chip)*var(--u));
  font-weight:var(--w-chip);
  display:flex;align-items:center;justify-content:center;
}
.hero-section .txt{
  position:absolute;left:calc(53.3*var(--u));top:0;height:100%;
  display:flex;align-items:center;
  font-size:calc(var(--t-badge)*var(--u));
  font-weight:400;
  letter-spacing:.001em;
  color:rgba(255,255,255,.96);
  white-space:nowrap;
}
.hero-section h1{
  margin:calc(23.62*var(--u)) 0 0;
  width:min(calc(800*var(--u)),100%);
  font-size:calc(var(--t-display)*var(--u));
  line-height:calc(var(--lh-display)*var(--u));
  font-weight:var(--w-display);
  letter-spacing:var(--ls-display);
}
.hero-section h1 br{display:none}
.hero-section .ln{display:block;overflow:clip;overflow-clip-margin:calc(6*var(--u))}
.hero-section .ln-i{display:block}
.hero-section .lede{
  margin:calc(5.49*var(--u)) 0 0;
  color:#fff;
  width:min(calc(478*var(--u)),100%);
  font-size:calc(var(--t-body)*var(--u));
  line-height:calc(var(--lh-body)*var(--u));
  font-weight:var(--w-body);
  letter-spacing:var(--ls-body);
}
.hero-section .actions{
  display:flex;align-items:center;
  margin-top:calc(23.27*var(--u));
  gap:calc(16.2*var(--u));
}
.hero-section .btn{
  display:flex;align-items:center;justify-content:center;
  height:calc(41.76*var(--u));
  border-radius:calc(20.88*var(--u));
  font-size:calc(var(--t-action)*var(--u));
  font-weight:var(--w-action);
  letter-spacing:-.026em;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease;
}
.hero-section .btn:hover{transform:translateY(-1px)}
.hero-section .btn-light{
  width:calc(140.94*var(--u));
  background:#fff;color:#000;
  box-shadow:0 1px 2px rgba(3,58,92,.10);
}
.hero-section .btn-light:hover{box-shadow:0 6px 18px rgba(3,58,92,.20)}
.hero-section .btn-dark{
  width:calc(124.74*var(--u));
  background:#000;color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.16);
}
.hero-section .btn-dark:hover{box-shadow:0 6px 18px rgba(0,0,0,.26)}

/* ── partners ─────────────────────────────────────────────────────── */
.hero-section .partners{flex:none}
.hero-section .plabel{
  font-size:calc(var(--t-plabel)*var(--u));
  font-weight:var(--w-caption);
  letter-spacing:.0005em;
  color:rgba(255,255,255,.86);
}
.hero-section .plogos{
  margin-top:calc(16.91*var(--u));
  margin-left:calc(.45*var(--u));
  display:flex;align-items:flex-start;
  color:rgba(193,238,255,.9);
}
.hero-section .pl{
  display:block;width:auto;height:calc(64*var(--u));
  margin-right:calc(20*var(--u));opacity:.92;
  filter:drop-shadow(0 calc(6*var(--u)) calc(10*var(--u)) rgba(3,58,92,.28));
}
.hero-section .pl:last-child{margin-right:0}

/* ── portrait artboard (390 × 844) ────────────────────────────────── */
@media (max-aspect-ratio: 1/1){
  .hero-section{
    font-size:min( calc(100vw / 3.9), calc((100vw + 780px) / 11.7), calc(100svh / 4.70) );
    --u:.01em;
  }
  .hero-section__bg video{
    object-position:50% 100%;
    transform:scale(1.26);
    transform-origin:50% 100%;
  }
  .hero-section__bg::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg, rgba(4,86,140,.26) 0%, rgba(4,86,140,0) 18%, rgba(4,86,140,0) 40%, rgba(5,90,145,.22) 62%, rgba(6,94,150,.34) 100%);
  }
  .hero-section .stage{
    padding:calc(22*var(--u)) calc(20*var(--u)) calc(26*var(--u));
  }
  .hero-section .sp{display:none}
  .hero-section .vsp{min-height:calc(10*var(--u))}
  .hero-section .vsp-a{flex-grow:3}
  .hero-section .vsp-b{flex-grow:1}

  .hero-section .head{height:calc(40*var(--u));justify-content:space-between}
  .hero-section .logo{top:0;gap:calc(9*var(--u))}
  
  .hero-section .nav{display:none}
  .hero-section .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:calc(20*var(--u));right:calc(20*var(--u));top:calc(66*var(--u));
    padding:calc(8*var(--u));
    border-radius:calc(16*var(--u));
    background:rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(16px) saturate(120%);
    backdrop-filter:blur(16px) saturate(120%);
    box-shadow:0 12px 34px rgba(3,58,92,.22);
    z-index:5;
  }
  .hero-section .nav.open::before{
    content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(155deg, rgba(112,242,255,.98) 0%, rgba(104,234,255,.95) 42%, rgba(87,218,255,.88) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
  }
  .hero-section .nav.open a{
    padding:calc(11*var(--u)) calc(12*var(--u));
    border-radius:calc(10*var(--u));
  }
  .hero-section .cta{display:none}
  .hero-section .menu-btn{
    display:flex;align-items:center;justify-content:center;
    width:calc(40*var(--u));height:calc(40*var(--u));
    border-radius:50%;
    background:rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(150,240,255,.6);
  }

  .hero-section .badge{
    width:auto;max-width:100%;
    height:calc(28*var(--u));
    border-radius:calc(14*var(--u));
    padding:0 calc(12*var(--u)) 0 calc(4*var(--u));
    display:inline-flex;align-items:center;
    gap:calc(8*var(--u));
  }
  .hero-section .chip{
    position:static;
    width:auto;height:calc(20*var(--u));
    border-radius:calc(10*var(--u));
    padding:0 calc(9*var(--u));
    font-size:calc(12*var(--u));
  }
  .hero-section .txt{
    position:static;height:auto;
    font-size:calc(12.5*var(--u));
    white-space:nowrap;
  }
  .hero-section h1{
    width:calc(344*var(--u));
    margin-top:calc(18*var(--u));
    font-size:calc(34*var(--u));
    line-height:calc(36.7*var(--u));
    letter-spacing:-.022em;
  }
  .hero-section h1 br{display:none}
  .hero-section .ln,
  .hero-section .ln-i{display:inline;overflow:visible}
  .hero-section .lede{
    width:calc(350*var(--u));
    margin-top:calc(14*var(--u));
    font-size:calc(15*var(--u));
    line-height:calc(21.75*var(--u));
    color:rgba(255,255,255,.95);
  }
  .hero-section .actions{margin-top:calc(22*var(--u));gap:calc(12*var(--u))}
  .hero-section .btn{
    height:calc(46*var(--u));
    border-radius:calc(23*var(--u));
    font-size:calc(15.5*var(--u));
    padding:0 calc(26*var(--u));
    width:auto;
  }
  .hero-section .plogos{
    margin-top:calc(14*var(--u));
    margin-left:0;
    flex-wrap:nowrap;
    align-items:center;
    gap:calc(10*var(--u));
  }
  .hero-section .pl{margin:0 !important;height:calc(46*var(--u))}
}

/* ── entrance ─────────────────────────────────────────────────────── */
@keyframes ent-line{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes ent-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes ent-settle{from{opacity:0;transform:translateY(calc(10*var(--u))) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: no-preference){
  .js-entrance .hero-section .logo,
  .js-entrance .hero-section .nav a,
  .js-entrance .hero-section .cta,
  .js-entrance .hero-section .badge,
  .js-entrance .hero-section .ln-i,
  .js-entrance .hero-section .lede,
  .js-entrance .hero-section .btn,
  .js-entrance .hero-section .plabel,
  .js-entrance .hero-section .pl{will-change:transform,opacity}

  .js-entrance .hero-section .logo{--rise:calc(10*var(--u));animation:ent-rise .70s var(--e-settle) 0s both}

  .js-entrance .hero-section .nav a{--rise:calc(10*var(--u));animation:ent-rise .55s var(--e-settle) both}
  .js-entrance .hero-section .nav a:nth-child(1){animation-delay:.060s}
  .js-entrance .hero-section .nav a:nth-child(2){animation-delay:.095s}
  .js-entrance .hero-section .nav a:nth-child(3){animation-delay:.130s}
  .js-entrance .hero-section .nav a:nth-child(4){animation-delay:.165s}
  .js-entrance .hero-section .nav a:nth-child(5){animation-delay:.200s}
  .js-entrance .hero-section .nav a:nth-child(6){animation-delay:.235s}

  .js-entrance .hero-section .cta{animation:ent-settle .60s var(--e-settle) .18s both}
  .js-entrance .hero-section .badge{--rise:calc(12*var(--u));animation:ent-rise .60s var(--e-settle) .22s both}

  .js-entrance .hero-section .ln:nth-of-type(1) .ln-i{animation:ent-line .95s var(--e-reveal) .34s both}
  .js-entrance .hero-section .ln:nth-of-type(2) .ln-i{animation:ent-line .95s var(--e-reveal) .42s both}
  .js-entrance .hero-section .ln:nth-of-type(3) .ln-i{animation:ent-line .95s var(--e-reveal) .50s both}

  .js-entrance .hero-section .lede{--rise:calc(12*var(--u));animation:ent-rise .70s var(--e-settle) .68s both}
  .js-entrance .hero-section .actions .btn:nth-child(1){animation:ent-settle .60s var(--e-settle) .84s both}
  .js-entrance .hero-section .actions .btn:nth-child(2){animation:ent-settle .60s var(--e-settle) .90s both}

  .js-entrance .hero-section .plabel{--rise:calc(8*var(--u));animation:ent-rise .60s var(--e-settle) 1.00s both}
  .js-entrance .hero-section .pl{--rise:calc(8*var(--u));animation:ent-rise .60s var(--e-settle) both}
  .js-entrance .hero-section .pl:nth-child(1){animation-delay:1.06s}
  .js-entrance .hero-section .pl:nth-child(2){animation-delay:1.11s}
  .js-entrance .hero-section .pl:nth-child(3){animation-delay:1.16s}
  .js-entrance .hero-section .pl:nth-child(4){animation-delay:1.21s}

  @media (max-aspect-ratio: 1/1){
    .js-entrance .hero-section .ln-i{animation:none}
    .js-entrance .hero-section h1{--rise:calc(14*var(--u));animation:ent-rise .75s var(--e-reveal) .34s both}
  }
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}