/* ============================================================
   Winwise Technologies — landing
   Palette derived from the logo: blue #003AF6 on near-black.
   Geometry derived from the mark: every angle in this file is
   the chevron's 20.4deg, or its mirror.
   ============================================================ */

:root{
  --page-bg:#05070C;

  /* colour */
  --ink:        #05070C;   /* page ground */
  --ink-2:      #0A0F1A;   /* raised surface */
  --ink-3:      #121A29;   /* hairline / border */
  --blue:       #003AF6;   /* exact logo blue */
  --blue-lift:  #4B7BFF;   /* readable blue on dark */
  --blue-haze:  #0A1C55;   /* deep glow */
  --paper:      #F2F4F8;   /* light band ground */
  --paper-2:    #FFFFFF;
  --fog:        #8B97AE;   /* muted body on dark */
  --fog-2:      #5A6479;   /* fainter */
  --slate:      #47536A;   /* muted body on light */

  /* type */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* metrics */
  --wrap: 1240px;
  --gut: 28px;
  --chev: 20.4deg;         /* the mark's arm angle */
  --notch: 22px;           /* card corner cut */
  --ease: cubic-bezier(.22,.68,.24,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--page-bg,var(--ink));
  color:#EAEEF6;
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue-lift);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:12px 18px;font-family:var(--mono);font-size:13px;
}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- shared type ---------- */
.eyebrow{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fog);
}
.tick{width:14px;height:11px;flex:none;color:currentColor;opacity:.9}
.eyebrow .tick{color:#fff;opacity:.7}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--blue);
  --fg:#fff;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;
  font-family:var(--mono);
  font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg);
  background:var(--bg);
  /* chevron notch, bottom-right — the mark's angle */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  will-change:transform;
}
.btn span{position:relative;z-index:1}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn:hover{transform:translate(2px,-2px)}
.btn:hover::after{transform:translateX(120%)}

.btn--ghost{--bg:transparent;--fg:#EAEEF6;box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn--ghost:hover{--fg:#fff;box-shadow:inset 0 0 0 1px var(--blue-lift)}
.btn--dark{background:var(--band-fg);color:var(--band-bg)}
.btn--sm{padding:12px 20px;font-size:11.5px}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:32px;
}
.nav__rule{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ink-3) 12%,var(--ink-3) 88%,transparent);
  opacity:0;transition:opacity .4s var(--ease);
}
.nav.is-stuck{background:rgba(5,7,12,.72);backdrop-filter:blur(14px) saturate(1.4)}
.nav.is-stuck .nav__rule{opacity:1}

.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand__mark{width:34px;height:27px;color:#fff;flex:none;transition:transform .5s var(--ease)}
.brand:hover .brand__mark{transform:translate(2px,-2px)}
.brand__mark--lg{width:52px;height:42px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:16px;letter-spacing:.02em;
}
.brand__sub{
  font-family:var(--mono);font-size:8.5px;font-weight:400;
  letter-spacing:.34em;color:var(--fog-2);margin-top:4px;
}

.nav__links{display:flex;gap:30px}
.nav__links a{
  font-size:14.5px;color:var(--fog);position:relative;padding-block:4px;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--blue-lift);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}

.burger{display:none;width:34px;height:34px;position:relative}
.burger span{
  position:absolute;left:7px;width:20px;height:1.5px;background:#fff;
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.mobnav{
  position:fixed;inset:78px 0 auto 0;z-index:99;
  background:rgba(5,7,12,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--ink-3);
  padding:12px var(--gut) 26px;
  display:flex;flex-direction:column;
}
.mobnav[hidden]{display:none}
.mobnav a{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 600;
  font-size:24px;padding:14px 0;border-bottom:1px solid var(--ink-3);
}
.mobnav a:last-child{color:var(--blue-lift);border-bottom:0}

/* ============================================================
   HERO — the signature: a chevron beam of light
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:150px 0 70px;
  overflow:hidden;
  isolation:isolate;
}
/* engineering grid, very faint */
.hero__grid{
  position:absolute;inset:0;z-index:-3;
  transform:translate3d(0,var(--py,0),0);
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 88% at 22% 34%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(120% 88% at 22% 34%,#000 12%,transparent 76%);
}
/* the beam: a shaft of blue raked along the chevron's arm angle */
.hero__beam{
  position:absolute;z-index:-2;
  top:-46%;right:2%;
  width:min(30vw,430px);height:196%;
  background:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,58,246,.03) 30%,
      rgba(0,58,246,.42) 49%,
      rgba(0,58,246,.42) 52%,
      rgba(75,123,255,.10) 62%,
      transparent 100%);
  transform:rotate(var(--chev));
  filter:blur(26px);
  opacity:0;
  animation:beam 1.9s .55s var(--ease) forwards;
}
/* second, tighter core beam so it reads as a hard edge not a blob */
.hero__beam::after{
  content:"";position:absolute;left:49.5%;top:0;width:2px;height:100%;
  background:linear-gradient(to bottom,transparent 8%,rgba(150,185,255,.95) 38%,rgba(0,58,246,.55) 66%,transparent 92%);
  filter:blur(.6px);
}
.hero__bloom{
  position:absolute;z-index:-2;
  top:14%;right:6%;
  width:min(26vw,340px);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(0,58,246,.34),transparent 66%);
  filter:blur(30px);
  opacity:0;
  animation:beam 2.2s .35s var(--ease) forwards;
}
@keyframes beam{to{opacity:1}}

.hero__in{position:relative;z-index:1}

.hero__eyebrow{margin-bottom:34px}

.hero__h1{
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(3.3rem,10.4vw,9.4rem);
  line-height:.88;
  letter-spacing:-.028em;
  text-transform:none;
  margin-bottom:36px;
}
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__h1 .line > span{display:block}
.hero__h1 .dot{
  font-style:normal;
  color:var(--blue-lift);
  margin-left:-.05em;
}

.hero__sub{
  max-width:47ch;
  font-size:clamp(1.02rem,1.55vw,1.24rem);
  line-height:1.62;
  color:var(--fog);
  margin-bottom:44px;
}
.hero__sub em{font-style:normal;color:#DDE4F1;display:block;margin-top:6px}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:78px}

.hero__list{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--ink-3);
}
.hero__list li{flex:1 1 240px;border-right:1px solid var(--ink-3)}
.hero__list li:last-child{border-right:0}
.hero__list a{
  display:block;padding:20px 22px 20px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fog-2);transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.hero__list li + li a{padding-left:22px}
.hero__list a:hover{color:#fff}

/* ---------- entrance choreography ---------- */
[data-anim]{opacity:0}
.is-ready [data-anim]{animation:rise .95s var(--ease) forwards}
.is-ready [data-anim="1"]{animation-delay:.10s}
.is-ready [data-anim="2"]{animation-delay:.20s}
.is-ready [data-anim="3"]{animation-delay:.29s}
.is-ready [data-anim="4"]{animation-delay:.38s}
.is-ready [data-anim="5"]{animation-delay:.56s}
.is-ready [data-anim="6"]{animation-delay:.66s}
.is-ready [data-anim="7"]{animation-delay:.76s}
@keyframes rise{
  from{opacity:0;transform:translate3d(0,90%,0)}
  to{opacity:1;transform:none}
}
/* headline lines slide up inside their clipping mask */
.hero__h1 .line > span{opacity:0}
.is-ready .hero__h1 .line > span{animation:rise 1.05s var(--ease) forwards}
.is-ready .line[data-anim="2"] > span{animation-delay:.20s}
.is-ready .line[data-anim="3"] > span{animation-delay:.29s}
.is-ready .line[data-anim="4"] > span{animation-delay:.38s}
.is-ready .hero__h1 .line{opacity:1;animation:none}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  border-block:1px solid var(--ink-3);
  padding:19px 0;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker__set{display:flex;align-items:center;gap:26px;padding-right:26px}
.ticker__set span{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog-2);white-space:nowrap;
}
.ticker__set .tick{width:13px;height:10px;color:var(--blue);opacity:1}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{padding:118px 0}

.shead{max-width:820px;margin-bottom:62px}
.shead__h{
  font-family:var(--display);
  font-variation-settings:'wdth' 104,'wght' 700;
  font-size:clamp(2.05rem,4.6vw,3.5rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:22px 0 20px;
}
.shead__p{max-width:56ch;color:var(--fog);font-size:1.03rem}

.shead--split{
  max-width:none;
  display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:end;
}
.shead--split .shead__h{margin-bottom:0}

/* ============================================================
   SERVICES
   ============================================================ */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-3)}

.card{
  position:relative;
  background:var(--ink);
  padding:40px 34px 38px;
  transition:background .45s var(--ease);
  /* the chevron notch, bottom-right */
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%);
}
.card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.card:hover{background:var(--ink-2)}
.card:hover::before{transform:scaleX(1)}

.card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:56px}
.card__idx{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-lift);
}
.card__arrow{
  font-size:17px;color:var(--fog-2);
  transition:transform .45s var(--ease),color .45s var(--ease);
}
.card:hover .card__arrow{transform:translate(4px,-4px);color:#fff}

.card__h{
  font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 620;
  font-size:1.4rem;line-height:1.18;letter-spacing:-.012em;
  margin-bottom:16px;
}
.card__p{color:var(--fog);font-size:.965rem;margin-bottom:28px}

.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fog-2);padding:6px 10px;box-shadow:inset 0 0 0 1px var(--ink-3);
}

/* ============================================================
   LIGHT BAND — jewellery billing
   ============================================================ */
.band{
  /* Namespaced: .btn declares its own --bg/--fg and would shadow these. */
  --band-bg:#05070C;
  --band-fg:#EAEEF6;
  --band-mut:#8B97AE;
  --band-rule:#121A29;
  background:var(--band-bg);
  color:var(--band-fg);
  position:relative;
  /* a shallow chevron cut into the top edge — the mark, 500x scale */
  clip-path:polygon(0 0,50% 3.2vw,100% 0,100% 100%,0 100%);
  margin-top:-1px;
  padding-top:clamp(96px,11vw,150px);
}
.band .eyebrow{color:var(--band-mut)}
.band .eyebrow .tick{color:var(--band-fg);opacity:.75}
.band .shead__p{color:var(--band-mut)}

.band__grid{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:start;
}
.band__left{position:sticky;top:112px}
.band__left .shead__h{margin:22px 0 20px}

.specs{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:transparent;
}
.spec{
  background:var(--band-bg);
  box-shadow:0 0 0 1px var(--band-rule);
  padding:32px 26px 34px;
  position:relative;
  transition:background .4s var(--ease);
}
.spec::before{
  content:"";position:absolute;left:26px;top:0;width:24px;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.spec:hover{filter:brightness(1.04)}
.spec:hover::before{transform:scaleX(1)}
.spec h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 640;
  font-size:1.03rem;line-height:1.25;margin-bottom:11px;
}
.spec p{color:var(--band-mut);font-size:.9rem;line-height:1.55}

.band__foot{
  margin-top:46px;padding-top:34px;border-top:1px solid #D8DEE9;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
}
.band__foot{border-top-color:var(--band-rule)}
.band__logo{width:196px;height:auto;transform:translate3d(0,var(--py,0),0)}
.band__note{color:var(--band-mut);font-size:.965rem;max-width:52ch}
/* the wordmark is black-on-white art, so it only earns its place once the band is light */
.band__logo{opacity:var(--bandp,0)}
.band__h{font-size:clamp(1.9rem,3.4vw,2.9rem)}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink-3);
}
.step{
  padding:30px 26px 40px 0;
  border-right:1px solid var(--ink-3);
  position:relative;
}
.step:last-child{border-right:0}
.step + .step{padding-left:26px}
.step::before{
  content:"";position:absolute;left:0;top:-1px;width:0;height:1px;
  background:var(--blue);transition:width .6s var(--ease);
}
.step + .step::before{left:0}
.step:hover::before{width:100%}
.step__n{
  display:block;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--blue-lift);margin-bottom:30px;
}
.step__b h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 108,'wght' 700;
  font-size:1.55rem;letter-spacing:-.012em;margin-bottom:12px;
}
.step__b p{color:var(--fog);font-size:.955rem}

/* ============================================================
   COMPANY
   ============================================================ */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.why__item{position:relative;padding-top:26px;border-top:1px solid var(--ink-3)}
.why__item::before{
  content:"";position:absolute;left:0;top:-1px;width:38px;height:1px;background:var(--blue);
}
.why__item h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 102,'wght' 640;
  font-size:1.18rem;line-height:1.22;margin-bottom:13px;
}
.why__item p{color:var(--fog);font-size:.965rem}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{position:relative;overflow:hidden;isolation:isolate}
.contact__beam{
  position:absolute;z-index:-1;
  bottom:-70%;left:-10%;
  width:min(56vw,760px);height:180%;
  background:linear-gradient(to right,transparent,rgba(0,58,246,.26) 50%,transparent);
  transform:rotate(calc(var(--chev) * -1 + var(--sweep,0deg))) translateY(var(--py,0));
  filter:blur(60px);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 74%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 74%,transparent 100%);
}
.contact__in{
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start;
}
.contact__h{
  font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 780;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:.94;letter-spacing:-.026em;
  margin:22px 0 22px;
}
.contact__p{color:var(--fog);max-width:44ch;font-size:1.05rem;margin-bottom:34px}

.channels{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.channels__note{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fog-2);
  padding:14px 18px;box-shadow:inset 0 0 0 1px var(--ink-3);
}

.addr{
  font-style:normal;
  background:var(--ink-2);
  padding:36px 34px 34px;
  box-shadow:inset 0 0 0 1px var(--ink-3);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%);
}
.addr__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-lift);margin-bottom:20px;
}
.addr__body{font-size:1.06rem;line-height:1.85;color:#D5DDEC}
.addr__map{
  display:inline-flex;align-items:center;gap:7px;margin-top:26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fog);border-bottom:1px solid var(--ink-3);padding-bottom:5px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.addr__map:hover{color:#fff;border-color:var(--blue-lift)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--ink-3);padding-top:64px}
.foot__in{
  display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:48px;
  padding-bottom:56px;
}
.foot__tag{color:var(--fog);font-size:.97rem;margin-top:20px;max-width:34ch}
.foot__label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fog-2);margin-bottom:18px;
}
.foot__nav{display:flex;flex-direction:column;gap:11px}
.foot__nav a{font-size:.965rem;color:var(--fog);transition:color .3s var(--ease)}
.foot__nav a:hover{color:#fff}
.foot__meta p:not(.foot__label){color:var(--fog);font-size:.965rem;line-height:1.7}

.foot__bar{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:24px;border-top:1px solid var(--ink-3);
}
.foot__bar p{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fog-2);
}

/* ============================================================
   SCROLL REVEAL — travels along the chevron axis, not straight up
   ============================================================ */
.reveal{opacity:1}
html.js .reveal{opacity:0;will-change:transform,opacity}
/* perspective must sit on the direct parent for the reveal's rotateX to read */
.wrap,.svc,.specs,.steps,.why,.contact__in{perspective:1500px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .svc{grid-template-columns:repeat(2,1fr)}
  .card:last-child{grid-column:1 / -1}
  .specs{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2){border-right:0}
  .step:nth-child(3),.step:nth-child(4){border-top:1px solid var(--ink-3);padding-top:30px}
  .steps .step:nth-child(odd){padding-left:0}
  .why{grid-template-columns:1fr;gap:34px}
  .contact__in{grid-template-columns:1fr;gap:48px}
  .foot__in{grid-template-columns:1fr 1fr;gap:40px}
  .foot__brand{grid-column:1 / -1}
}

@media (max-width:860px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
  .shead--split{grid-template-columns:1fr;gap:26px;align-items:start}
  .band__foot{grid-template-columns:1fr;gap:26px;justify-items:start}
  .hero__list li{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--ink-3)}
  .hero__list li:last-child{border-bottom:0}
  .hero__list li + li a{padding-left:0}
}

@media (max-width:640px){
  :root{--gut:20px;--notch:16px}
  body{font-size:16px}
  .section{padding:84px 0}
  .hero{padding:132px 0 56px;min-height:auto}
  .hero__cta{margin-bottom:56px}
  .hero__cta .btn{flex:1 1 100%}
  .svc{grid-template-columns:1fr}
  .card:last-child{grid-column:auto}
  .specs{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;padding:26px 0 30px}
  .step + .step{padding-left:0;border-top:1px solid var(--ink-3)}
  .step__n{margin-bottom:16px}
  .foot__in{grid-template-columns:1fr}
  .band{clip-path:polygon(0 0,50% 5vw,100% 0,100% 100%,0 100%)}
}

/* ============================================================
   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;
  }
  [data-anim],.hero__h1 .line > span,.reveal{opacity:1;transform:none}
  .hero__beam,.hero__bloom{opacity:1}
  .ticker__track{animation:none}
}


/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none;
}
.progress__bar{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--blue),var(--blue-lift));
  transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 12px rgba(0,58,246,.7);
}

/* ============================================================
   THE 3D MARK
   ============================================================ */
.mark3d{
  position:absolute;z-index:-1;
  top:50%;right:2.5%;
  width:min(40vw,560px);
  aspect-ratio:1.32;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity 1.4s var(--ease) .3s;
}
.mark3d.is-live{opacity:1}
.mark3d canvas{display:block;width:100%;height:100%}

/* ============================================================
   HEADINGS THAT HINGE IN, CHARACTER BY CHARACTER
   ============================================================ */
.is-split{perspective:700px}
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.ch > span{
  display:inline-block;
  opacity:0;
  transform:translateY(.42em) rotateX(-62deg);
  transform-origin:50% 100%;
  transition:transform .8s var(--ease),opacity .55s var(--ease);
  will-change:transform,opacity;
}
.is-split.lit .ch > span{opacity:1;transform:none}

/* ============================================================
   TILT SURFACES
   ============================================================ */
.card,.spec,.addr{transform-style:preserve-3d;will-change:transform}
.glare{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(90,135,255,.16),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);
}
.card:hover .glare,.addr:hover .glare{opacity:1}
.spec .glare{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(0,58,246,.11),transparent 62%);
}
.spec:hover .glare{opacity:1}

/* ============================================================
   PROCESS RAIL — fills as the section is read
   ============================================================ */
.steps{position:relative}
.steps__rail{
  position:absolute;left:0;top:-1px;width:100%;height:1px;
  background:linear-gradient(90deg,var(--blue),var(--blue-lift));
  transform:scaleX(var(--rail,0));transform-origin:left;
  box-shadow:0 0 10px rgba(0,58,246,.55);
}

@media (max-width:1080px){
  .mark3d{width:min(48vw,420px);right:1.5%;top:56%}
}

@media (prefers-reduced-motion:reduce){
  .ch > span{opacity:1;transform:none}
  .glare{display:none}
  .steps__rail{transform:scaleX(1)}
}

/* ============================================================
   THE GATE
   A full screen that splits along the mark's own chevron and
   draws apart as you scroll, uncovering the statement behind.
   ============================================================ */
.gate{
  position:relative;
  height:225vh;                 /* the scroll budget the split consumes */
  background:var(--ink);
}
.gate__sticky{
  position:sticky;top:0;
  height:100vh;
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
}

/* the two halves of the screen */
.gate__panel{
  position:absolute;inset:0;z-index:3;
  background:
    radial-gradient(90% 120% at 78% 26%,rgba(0,58,246,.22),transparent 58%),
    linear-gradient(178deg,#0C1524 0%,#070B14 58%,#05070C 100%);
  will-change:transform;
}
/* the seam: the mark's own angle, lit, so the parting is unmistakable */
.gate__seam{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gate__seam polyline{
  fill:none;stroke:#6E96FF;stroke-width:2.5;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 14px rgba(75,123,255,.95));
}
.gate__panel--top{
  /* lower edge is a chevron pointing down — the mark, screen-wide */
  clip-path:polygon(0 0,100% 0,100% 34%,50% 62%,0 34%);
}
.gate__panel--btm{
  clip-path:polygon(0 34%,50% 62%,100% 34%,100% 100%,0 100%);
}

/* the mark, sitting in the seam, shrinking as the halves part */
.gate__mark{
  position:absolute;z-index:4;
  top:50%;left:50%;
  width:132px;height:107px;
  margin:-53px 0 0 -66px;
  color:#fff;
  filter:drop-shadow(0 0 34px rgba(0,58,246,.85));
  will-change:transform,opacity;
}

/* what the split uncovers */
.gate__behind{
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  background:
    radial-gradient(70% 90% at 50% 46%,rgba(0,58,246,.24),transparent 68%),
    #03050A;
}
.gate__behind-in{text-align:center;will-change:transform,opacity}
.gate__eyebrow{justify-content:center;margin-bottom:30px}

.gate__h{
  font-family:var(--display);
  font-variation-settings:'wdth' 106,'wght' 760;
  font-size:clamp(2.1rem,5.6vw,4.5rem);
  line-height:1.0;
  letter-spacing:-.026em;
  margin-bottom:30px;
}
.gate__h span{display:block}
.gate__h .lit{color:var(--blue-lift)}

.gate__p{
  max-width:48ch;margin-inline:auto;
  color:var(--fog);font-size:1.06rem;
}

/* ============================================================
   PROCESS — pinned. The page stops; only the stage moves.
   ============================================================ */
.proc{position:relative;height:355vh}
.proc__sticky{
  position:sticky;top:0;
  height:100vh;
  overflow:hidden;
  display:flex;align-items:center;
  isolation:isolate;
}
/* the colour that shifts from stage to stage */
.proc__bg{
  position:absolute;inset:0;z-index:-1;
  background:var(--stage-bg,#05070C);
  transition:background .8s var(--ease);
}
.proc__bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(62% 74% at var(--stage-x,76%) 42%,rgba(0,58,246,.30),transparent 66%);
  transition:background .8s var(--ease);
}
.proc__in{width:100%;position:relative}

.proc__head{margin-bottom:clamp(34px,6vh,72px)}
.proc__h{
  font-family:var(--display);
  font-variation-settings:'wdth' 104,'wght' 700;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  letter-spacing:-.02em;line-height:1.05;
  margin-top:20px;
}

.proc__stack{position:relative;min-height:clamp(230px,34vh,330px)}
.pstage{
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(28px,5vw,80px);align-items:center;
  opacity:0;
  transform:translate3d(0,44px,0);
  transition:opacity .55s var(--ease),transform .7s var(--ease);
  pointer-events:none;
}
.pstage.is-on{opacity:1;transform:none;pointer-events:auto}

.pstage__ghost{
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(6rem,15vw,13rem);
  line-height:.8;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(120,160,255,.42);
  display:block;
}
.pstage__n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-lift);display:block;margin-bottom:18px;
}
.pstage__body h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 760;
  font-size:clamp(2.1rem,4.4vw,3.4rem);
  letter-spacing:-.024em;line-height:1;margin-bottom:18px;
}
.pstage__body p{color:var(--fog);font-size:clamp(1rem,1.5vw,1.16rem);max-width:46ch}

.proc__rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(34px,6vh,70px);
  border-top:1px solid var(--ink-3);
}
.proc__rail li{padding:18px 18px 0 0}
.proc__rail li i{
  display:block;height:2px;width:100%;
  background:var(--ink-3);
  margin-bottom:14px;margin-top:-19px;
  position:relative;overflow:hidden;
}
.proc__rail li i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-lift));
  transform:scaleX(var(--fill,0));transform-origin:left;
  transition:transform .35s linear;
}
.proc__rail li span{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fog-2);transition:color .4s var(--ease);
}
.proc__rail li.is-on span{color:#fff}

/* ============================================================
   GATE + PROCESS, small screens
   ============================================================ */
@media (max-width:1080px){
  .band__grid{grid-template-columns:1fr;gap:44px}
  .band__left{position:static}
  .pstage{grid-template-columns:1fr;gap:14px;align-content:center}
  .pstage__ghost{font-size:clamp(4.5rem,20vw,8rem)}
}

@media (max-width:640px){
  .gate{height:200vh}
  .gate__mark{width:92px;height:75px;margin:-37px 0 0 -46px}
  .specs{grid-template-columns:1fr}
  .proc{height:340vh}
  .proc__rail{grid-template-columns:repeat(4,1fr)}
  .proc__rail li{padding-right:8px}
  .proc__rail li span{font-size:9px;letter-spacing:.08em}
}

/* ============================================================
   REDUCED MOTION — unpin everything, show it all at once
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .gate{height:auto}
  .gate__sticky{position:static;height:auto;padding:120px 0}
  .gate__panel,.gate__mark{display:none}
  .gate__behind{position:static}

  .proc{height:auto}
  .proc__sticky{position:static;height:auto;padding:100px 0;display:block}
  .proc__stack{min-height:0;display:grid;gap:56px}
  .pstage{position:static;opacity:1;transform:none;pointer-events:auto}
  .proc__rail li i::after{transform:scaleX(1)}
}

/* ============================================================
   HERO HAND-OFF — the hero recedes instead of simply scrolling away
   ============================================================ */
.hero__in{
  transform:translate3d(var(--hx,0px),calc(var(--hy,0px) + var(--hs,0px)),0);
  opacity:var(--ho,1);
}

@media (prefers-reduced-motion:reduce){
  .deck{height:auto}
  .deck__sticky{position:static;height:auto;padding:100px 0}
  .deck__in{grid-template-columns:1fr;gap:44px}
  .deck__stage{height:auto;min-height:0;display:grid;gap:22px}
  .dcard{position:static;opacity:1 !important;transform:none !important}
  .band{--band-bg:#F2F4F8;--band-fg:#0B1220;--band-mut:#47536A;--band-rule:#D8DEE9}
  .band__logo{opacity:1}
}

/* ============================================================
   NAV — inverts while the light band is behind it, so the bar
   belongs to whatever section it is sitting on.
   ============================================================ */
.nav.is-light.is-stuck{background:rgba(242,244,248,.82)}
.nav.is-light .nav__rule{
  background:linear-gradient(90deg,transparent,#CBD3E0 12%,#CBD3E0 88%,transparent);
}
.nav.is-light .brand__mark{color:#0B1220}
.nav.is-light .brand__name{color:#0B1220}
.nav.is-light .brand__sub{color:#7A8698}
.nav.is-light .nav__links a{color:#4A5568}
.nav.is-light .nav__links a:hover{color:#05070C}
.nav.is-light .burger span{background:#0B1220}
.nav .brand__mark,.nav .brand__name,.nav .brand__sub,.nav .nav__links a{
  transition:color .45s var(--ease);
}

/* ============================================================
   MOBILE CORRECTIONS
   ============================================================ */
/* The eyebrow glyph should sit on the first line's cap height,
   not float in the middle of a wrapped label. */
.eyebrow{align-items:flex-start}
.eyebrow .tick{margin-top:.32em}

@media (max-width:700px){
  /* On a phone the headline already carries the hero, and the WebGL mark
     sits straight behind the buttons. Drop it: better reading, less battery. */
  .mark3d{display:none}
  .hero__beam{width:min(62vw,340px);right:-8%}
}

/* ============================================================
   COMPANY — a deck held in perspective. Scrolling lifts the
   front card away toward the reader and floats the next up.
   ============================================================ */
.deck{position:relative;height:330vh}
.deck__sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
}
.deck__in{
  width:100%;
  display:grid;grid-template-columns:.86fr 1.14fr;
  gap:clamp(36px,6vw,90px);align-items:center;
}

.deck__side{position:relative;z-index:5}
.deck__h{
  font-family:var(--display);
  font-variation-settings:'wdth' 104,'wght' 700;
  font-size:clamp(1.8rem,3.5vw,2.9rem);
  line-height:1.03;letter-spacing:-.022em;
  margin:20px 0 20px;
}
.deck__p{color:var(--fog);max-width:40ch;margin-bottom:38px}

.deck__idx{border-top:1px solid var(--ink-3)}
.deck__idx li{
  display:flex;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--ink-3);
  color:var(--fog-2);
  transition:color .45s var(--ease),padding-left .45s var(--ease);
}
.deck__idx li b{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:inherit;
}
.deck__idx li span{font-size:.95rem}
.deck__idx li.is-on{color:#fff;padding-left:12px}
.deck__idx li.is-on b{color:var(--blue-lift)}

/* the stage */
.deck__stage{
  position:relative;
  height:clamp(340px,52vh,440px);
  perspective:1250px;
  perspective-origin:50% 46%;
}
.dcard{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:clamp(30px,3.4vw,46px);
  background:linear-gradient(160deg,#111B2E 0%,#0A1120 52%,#070C17 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120,160,255,.16),
    0 40px 90px -30px rgba(0,0,0,.9);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
/* a lit edge along the top of the card that is currently in front */
.dcard::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--blue-lift),transparent);
  opacity:var(--front,0);
  transition:opacity .4s var(--ease);
}
.dcard__n{
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(3.4rem,6vw,5.2rem);
  line-height:.82;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(120,160,255,.5);
  margin-bottom:auto;
}
.dcard h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 106,'wght' 700;
  font-size:clamp(1.5rem,2.5vw,2.1rem);
  line-height:1.08;letter-spacing:-.018em;
  margin:34px 0 14px;
}
.dcard p{color:var(--fog);font-size:clamp(.97rem,1.3vw,1.08rem);max-width:48ch}
.dcard__tag{
  align-self:flex-start;margin-top:24px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-lift);
  padding:8px 12px;box-shadow:inset 0 0 0 1px rgba(120,160,255,.28);
}

@media (max-width:1080px){
  .deck__in{grid-template-columns:1fr;gap:34px}
  .deck__idx{display:none}
  .deck__stage{height:clamp(320px,46vh,400px)}
  .deck__p{margin-bottom:0}
}
@media (max-width:860px){
  /* One screen has to hold the heading and a card, so the intro drops out —
     the cards say the same thing at more length. */
  .deck{height:290vh}
  .deck__p{display:none}
  .deck__h{font-size:clamp(1.5rem,6.4vw,2.1rem);margin:16px 0 0}
  .deck__in{gap:26px;align-content:center}
  /* Narrow screens stack the copy above the deck, so the departing card
     would ride up over the heading. Clip it: the card leaves through the
     top of its own frame instead. */
  .deck__stage{height:min(54vh,400px);overflow:hidden}
  .dcard{padding:26px 24px 28px}
  .dcard h3{margin:26px 0 12px}
  .dcard__n{font-size:3rem}
  .dcard{clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
}

/* ============================================================
   THE TEAR
   A section's ground is two plates with a ragged edge between
   them. Scrolling pulls the plates apart and light comes
   through the gap. The plates are painted in the page's live
   ground colour, so the seam is invisible until it opens.
   ============================================================ */
.has-rift{position:relative;isolation:isolate}

.rift{position:absolute;inset:0;z-index:-1;overflow:hidden}

.rift__glow{
  position:absolute;inset:0;
  opacity:var(--rift,0);
}
.rift--x .rift__glow{
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
}

.rift__half{
  position:absolute;inset:0;
  background:var(--page-bg,var(--ink));
  will-change:transform;
}

/* ---- vertical tear: the plates part left and right ---- */
.rift--x .rift__glow{
  background:
    linear-gradient(90deg,transparent 48.7%,rgba(160,195,255,.95) 49.85%,
                    rgba(0,58,246,.5) 50.3%,transparent 51.4%),
    radial-gradient(9% 52% at 50% 50%,rgba(0,58,246,.40),transparent 76%);
  filter:blur(2px);
}
.rift--x .rift__half--l{
  clip-path:polygon(50.11% 0.0%,49.19% 1.88%,49.96% 3.5%,49.07% 5.59%,49.9% 6.84%,49.09% 8.2%,49.82% 9.57%,49.08% 11.0%,49.86% 12.66%,49.03% 13.84%,49.96% 15.48%,49.34% 17.31%,49.81% 18.83%,49.31% 20.65%,50.1% 22.15%,49.4% 23.55%,50.17% 25.48%,49.04% 27.54%,50.14% 29.18%,49.12% 31.08%,50.09% 32.32%,49.29% 33.53%,50.0% 34.63%,48.98% 36.21%,50.02% 37.79%,49.39% 39.26%,50.22% 41.23%,48.93% 42.57%,49.82% 44.05%,49.06% 45.86%,49.91% 47.08%,49.3% 48.59%,49.92% 50.15%,48.94% 51.93%,50.12% 53.23%,48.97% 55.09%,50.02% 56.25%,48.93% 58.01%,49.9% 59.55%,49.01% 60.73%,50.0% 62.12%,49.24% 63.33%,50.12% 65.31%,49.26% 66.48%,49.76% 68.21%,49.26% 69.69%,50.24% 71.74%,49.23% 73.41%,49.87% 75.47%,48.95% 77.08%,50.1% 78.96%,49.02% 80.27%,50.15% 81.89%,49.09% 83.13%,49.9% 84.74%,49.3% 86.72%,50.09% 88.78%,49.07% 90.56%,49.98% 92.17%,48.95% 93.74%,49.84% 95.69%,49.4% 97.25%,50.21% 98.86%,49.6% 100.0%,-30% 100%,-30% 0%);
  transform:translate3d(calc(var(--rift,0) * -2.1vw),0,0);
}
.rift--x .rift__half--r{
  clip-path:polygon(50.11% 0.0%,49.19% 1.88%,49.96% 3.5%,49.07% 5.59%,49.9% 6.84%,49.09% 8.2%,49.82% 9.57%,49.08% 11.0%,49.86% 12.66%,49.03% 13.84%,49.96% 15.48%,49.34% 17.31%,49.81% 18.83%,49.31% 20.65%,50.1% 22.15%,49.4% 23.55%,50.17% 25.48%,49.04% 27.54%,50.14% 29.18%,49.12% 31.08%,50.09% 32.32%,49.29% 33.53%,50.0% 34.63%,48.98% 36.21%,50.02% 37.79%,49.39% 39.26%,50.22% 41.23%,48.93% 42.57%,49.82% 44.05%,49.06% 45.86%,49.91% 47.08%,49.3% 48.59%,49.92% 50.15%,48.94% 51.93%,50.12% 53.23%,48.97% 55.09%,50.02% 56.25%,48.93% 58.01%,49.9% 59.55%,49.01% 60.73%,50.0% 62.12%,49.24% 63.33%,50.12% 65.31%,49.26% 66.48%,49.76% 68.21%,49.26% 69.69%,50.24% 71.74%,49.23% 73.41%,49.87% 75.47%,48.95% 77.08%,50.1% 78.96%,49.02% 80.27%,50.15% 81.89%,49.09% 83.13%,49.9% 84.74%,49.3% 86.72%,50.09% 88.78%,49.07% 90.56%,49.98% 92.17%,48.95% 93.74%,49.84% 95.69%,49.4% 97.25%,50.21% 98.86%,49.6% 100.0%,130% 100%,130% 0%);
  transform:translate3d(calc(var(--rift,0) * 2.1vw),0,0);
}

@media (max-width:640px){
  .rift--x .rift__half--l{transform:translate3d(calc(var(--rift,0) * -6vw),0,0)}
  .rift--x .rift__half--r{transform:translate3d(calc(var(--rift,0) * 6vw),0,0)}
}

/* ============================================================
   DECK AURA
   A soft light sitting behind the stack, moving with whichever
   card is in front. No edges — the depth comes from the cards.
   ============================================================ */
.deck__aura{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 52% at var(--ax,66%) var(--ay,48%),
                    rgba(0,58,246,.34),transparent 68%),
    radial-gradient(70% 60% at 18% 78%,rgba(0,58,246,.12),transparent 72%);
  filter:blur(28px);
  transition:background 1.1s var(--ease);
}
.deck__sticky{isolation:isolate}