/* ============================================================
   PRINCE ROYAL PARKING
   Brand: Right Parking blue + yellow, on white (never black)
   ============================================================ */

:root{
  --blue:        #1E2A78;
  --blue-deep:   #131A52;
  --blue-bright: #2C3DC7;
  --yellow:      #FFC61E;
  --yellow-deep: #F0A800;

  --ink:    #17205E;
  --muted:  #6A73A6;
  --paper:  #F5F6FC;
  --line:   rgba(30,42,120,.13);
  --line-2: rgba(30,42,120,.07);

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --pad: clamp(20px, 5vw, 90px);
  --nav-h: 78px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:.95; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
em{ font-style:normal; color:var(--blue-bright); }
::selection{ background:var(--yellow); color:var(--blue-deep); }

/* ---------- shared bits ---------- */
.tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
}
.tag i{ width:7px; height:7px; border-radius:50%; background:var(--yellow); flex:none; box-shadow:0 0 0 4px rgba(255,198,30,.25); }
.tag--light{ color:var(--muted); }
.tag--onblue{ color:rgba(255,255,255,.72); }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:14.5px; letter-spacing:-.01em;
  padding:13px 22px; border-radius:100px; border:1.5px solid transparent;
  transition:transform .4s var(--ease), background-color .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn__arrow{ display:inline-block; transition:transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform:translate(3px,-3px); }
.btn--pill{ background:var(--blue); color:#fff; }
.btn--pill:hover{ background:var(--blue-bright); }
.btn--yellow{ background:var(--yellow); color:var(--blue-deep); padding:17px 30px; font-size:16px; }
.btn--yellow:hover{ background:#fff; }
.btn--ghost{ border-color:rgba(255,255,255,.32); color:#fff; padding:17px 30px; font-size:16px; }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.sec__head{ padding:0 var(--pad); max-width:1000px; }
.sec__head--wide{ max-width:1180px; }
.sec__title{ font-size:clamp(40px,6.4vw,92px); margin:22px 0 20px; }
.sec__title--xl{ font-size:clamp(42px,7.2vw,110px); }
.sec__lede{ color:var(--muted); font-size:clamp(16px,1.35vw,20px); max-width:62ch; line-height:1.55; }

.line{ display:block; overflow:hidden; }
.line__i{ display:block; }

/* word-mask splitter (injected by JS) */
.swm{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em; }
.sw{ display:inline-block; will-change:transform; }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:9999; background:#fff;
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{ display:grid; justify-items:center; gap:16px; width:min(320px,72vw); }
.loader__label{ font-family:var(--mono); font-size:11px; letter-spacing:.32em; color:var(--muted); }
.loader__bar{ width:100%; height:2px; background:var(--line); overflow:hidden; border-radius:2px; }
.loader__bar span{ display:block; height:100%; width:0%; background:var(--yellow); }
.loader__count{ font-family:var(--display); font-weight:800; font-size:13px; color:var(--blue); letter-spacing:.02em; }
.loader__count i{ font-style:normal; opacity:.45; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .4s, background-color .4s, transform .5s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line-2); }
.nav.is-hidden{ transform:translateY(-102%); }

.nav__brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.nav__mark{ flex:none; border-radius:11px; transition:transform .5s var(--ease); }
.nav__brand:hover .nav__mark{ transform:rotate(-8deg) scale(1.06); }
.nav__word{
  font-family:var(--display); font-weight:900; font-size:14px; line-height:.92;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--blue);
}

.nav__links{ display:flex; gap:30px; }
.nav__links a{
  font-size:14px; font-weight:600; color:var(--ink); position:relative; padding:4px 0;
  opacity:.78; transition:opacity .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--yellow); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__burger{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  background:#fff; cursor:pointer; padding:0; place-items:center; gap:5px;
}
.nav__burger i{ display:block; width:16px; height:2px; background:var(--blue); border-radius:2px; transition:transform .35s var(--ease); }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:880;
  background:#fff; border-bottom:1px solid var(--line);
  display:grid; padding:12px var(--pad) 26px;
  clip-path:inset(0 0 100% 0); transition:clip-path .55s var(--ease);
}
.drawer.is-open{ clip-path:inset(0 0 0 0); }
.drawer a{
  font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.03em;
  padding:11px 0; border-bottom:1px solid var(--line-2);
}
.drawer__ext{ color:var(--blue-bright); }

/* ============================================================
   HERO
   ============================================================ */
/* Straight vertical sequence: title, then the facade, then everything else.
   Nothing sits between the title and the image. */
.hero{
  position:relative; padding:calc(var(--nav-h) + clamp(20px,5vh,64px)) var(--pad) clamp(40px,6vw,72px);
  display:grid; overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:100% 90px, 8.333vw 100%;
  mask-image:radial-gradient(120% 80% at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 45%, #000 25%, transparent 78%);
}

/* ---- 1. title ----
   One line instead of two: exactly half the height of the stacked lockup, and
   it still spans the full width — with the glyphs left completely undistorted.
   No scaleY. The size is tuned in vw so the line fills the measure; the max
   in px stops it outgrowing the container on very wide screens. */
/* The facade stays in front for good — the title lives behind it, both while
   it rises and at rest, so the roofline always cuts across the type.
   `top` lifts the title without touching layout, so the facade below does not
   move with it. */
.hero__titlewrap{
  position:relative; z-index:1; display:grid;
  top:clamp(-58px,-3.4vw,-18px);
}
.hero__type{
  position:relative; z-index:2;
  /* 12.5vw makes the line span the full measure: between 400px and 1800px
     viewport --pad is 5vw, so the content box is exactly 90vw and a vw-based
     size fills it identically at every width — no breakpoint overrides.
     The px cap stops it outgrowing the facade image on very wide screens. */
  font-size:clamp(28px,12.5vw,208px); line-height:.88; letter-spacing:-.045em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--blue); pointer-events:none;
}
/* ROYAL steps off PRINCE's baseline. A transform, not a margin — layout
   height stays identical, so the facade below does not shift down with it. */
.hero__type-royal{ display:inline-block; transform:translateY(.5em); }
/* the reveal mask has to grow to clear the stepped word, then hand the space
   straight back so the block still measures exactly one line */
.hero__type .line{ padding-bottom:.72em; margin-bottom:-.72em; }

/* ---- 2. the facade, tucked up under the title ---- */
.hero__stage{
  position:relative; z-index:2; display:grid; place-items:center;
  margin-top:clamp(-208px,-13vw,-44px);
  will-change:transform;
}
.hero__img{
  width:min(104%, 1500px); max-width:none; height:auto;
  will-change:transform;
}
/* softens the facade's hard bottom crop into the page */
.hero__stage::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:12%;
  background:linear-gradient(to top, #fff, rgba(255,255,255,0));
  pointer-events:none;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ background:var(--yellow); overflow:hidden; padding:15px 0; }
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__track span{
  font-family:var(--display); font-weight:900; font-size:clamp(22px,3.1vw,44px);
  letter-spacing:-.03em; color:var(--blue-deep); white-space:nowrap; padding-right:.4em;
}
.marquee__track i{ font-style:normal; color:#fff; font-size:.62em; vertical-align:middle; margin:0 .12em; }

/* ============================================================
   LEGACY
   ============================================================ */
.legacy{ padding:clamp(90px,13vw,180px) var(--pad); max-width:1240px; margin-inline:auto; }
.legacy__text{
  font-family:var(--display); font-weight:600; letter-spacing:-.028em;
  font-size:clamp(24px,3.5vw,50px); line-height:1.24; margin:32px 0 44px;
}
.legacy__text .w{ color:rgba(23,32,94,.17); transition:color .1s linear; }
.legacy__text b{ font-weight:800; color:var(--blue-bright); }
.legacy__text .w b{ color:inherit; }

.linkline{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:700; font-size:clamp(15px,1.3vw,19px); color:var(--blue);
  border-bottom:2px solid var(--yellow); padding-bottom:6px;
}
.linkline svg{ transition:transform .4s var(--ease); }
.linkline:hover svg{ transform:translateX(6px); }

/* ============================================================
   THE STACK — pinned scroll story
   ============================================================ */
.stack{ background:var(--paper); }
.stack__pin{
  height:100svh; display:grid; grid-template-rows:auto 1fr;
  padding:calc(var(--nav-h) + 22px) var(--pad) 34px; overflow:hidden;
}
.stack__head{ display:flex; align-items:baseline; gap:26px; flex-wrap:wrap; margin-bottom:10px; }
.stack__title{ font-size:clamp(26px,3.4vw,46px); }

.stack__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(24px,4vw,70px); align-items:center; min-height:0;
}

/* --- visual --- */
.stack__visual{ position:relative; height:100%; min-height:0; display:flex; align-items:center; gap:18px; }
.frames{
  position:relative; flex:1; height:100%; min-height:0; overflow:hidden;
  display:grid; place-items:center;
}
.frames__scaler{
  position:relative; width:100%; height:100%;
  transform-origin:50% 100%; will-change:transform;
}
.frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
  will-change:opacity;
}
.frames__scan{
  position:absolute; left:0; right:0; height:2px; top:0; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, var(--yellow), transparent);
  box-shadow:0 0 22px 4px rgba(255,198,30,.55);
}

.rail{ display:grid; gap:9px; align-content:center; flex:none; }
.rail i{
  display:block; width:3px; height:24px; border-radius:3px;
  background:rgba(30,42,120,.16); transition:background-color .45s var(--ease), height .45s var(--ease);
}
.rail i.is-on{ background:var(--yellow); height:38px; }
.rail i.is-past{ background:var(--blue); }

/* --- copy --- */
.stack__copy{ position:relative; display:grid; align-content:center; min-height:0; }
.steps{ position:relative; min-height:clamp(330px,46vh,430px); }
.step{
  position:absolute; inset:0; display:grid; align-content:center; gap:14px;
  max-width:54ch;
}
.step__ghost{
  position:absolute; right:0; top:-14px; font-family:var(--display); font-weight:900;
  font-size:clamp(110px,15vw,210px); line-height:.8; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1.5px rgba(30,42,120,.11); pointer-events:none; z-index:0;
}
.step__level{
  position:relative; z-index:1; font-family:var(--mono); font-size:11px;
  letter-spacing:.24em; color:var(--blue-bright);
}
.step__title{ position:relative; z-index:1; font-size:clamp(34px,4.6vw,68px); letter-spacing:-.045em; }
.step__body{ position:relative; z-index:1; color:var(--muted); font-size:clamp(15px,1.25vw,18.5px); line-height:1.62; max-width:46ch; }

.chips{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chips li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border:1px solid var(--line); border-radius:100px; color:var(--blue);
  background:rgba(255,255,255,.72);
}

.stack__counter{
  position:absolute; right:0; bottom:-4px;
  font-family:var(--display); font-weight:900; font-size:15px; letter-spacing:.02em; color:var(--blue);
}
.stack__counter i{ font-style:normal; color:var(--muted); font-weight:600; }

/* --- payoff --- */
.stack__payoff{
  padding:clamp(90px,14vw,190px) var(--pad); text-align:center; background:var(--paper);
}
.payoff__type{
  font-size:clamp(42px,9.5vw,158px); letter-spacing:-.055em; line-height:.86; color:var(--blue);
}
.payoff__type .line:nth-child(2) .line__i{ color:var(--yellow-deep); }
.payoff__sub{ margin-top:26px; color:var(--muted); font-size:clamp(15px,1.3vw,19px); }

/* ============================================================
   PROJECTS
   ============================================================ */
.projects{ padding:clamp(90px,13vw,180px) 0; }
.pgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,32px);
  padding:clamp(44px,6vw,80px) var(--pad) 0;
}
.pcard{ position:relative; will-change:transform; }
.pcard__media{
  position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio:4/5; background:var(--paper);
}
.pcard__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.pcard:hover .pcard__media img{ transform:scale(1.045); }
.pcard__media::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(30,42,120,.5), transparent 55%);
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none; border-radius:16px;
}
.pcard:hover .pcard__media::after{ opacity:1; }

.pcard__live{
  position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--blue-deep);
  background:var(--yellow); padding:6px 12px; border-radius:100px;
}
.pcard__live i{ width:6px; height:6px; border-radius:50%; background:var(--blue); animation:pulse2 1.8s infinite; }
@keyframes pulse2{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }

.pcard__body{ position:relative; padding:22px 4px 0; }
.pcard__idx{
  position:absolute; right:6px; top:12px; font-family:var(--display); font-weight:900;
  font-size:54px; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.4px rgba(30,42,120,.16);
}
.pcard__body h3{ font-size:clamp(24px,2.3vw,34px); margin-bottom:10px; letter-spacing:-.04em; }
.pcard__body p{ color:var(--muted); font-size:15.5px; line-height:1.6; max-width:38ch; }
.pcard__meta{ display:flex; gap:26px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line-2); }
.pcard__meta dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.pcard__meta dd{ font-family:var(--display); font-weight:700; font-size:14.5px; margin-top:4px; }

.pvideo{ padding:clamp(50px,7vw,96px) var(--pad) 0; margin:0; }
.pvideo__cap{
  display:flex; align-items:baseline; gap:clamp(12px,2vw,28px);
  flex-wrap:wrap; margin-bottom:clamp(16px,2vw,26px);
}
.pvideo__cap p{ color:var(--muted); font-size:clamp(15px,1.3vw,18px); }
.pvideo__cap b{ font-weight:600; color:var(--blue); white-space:nowrap; }
.pvideo video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; border-radius:20px; background:var(--paper);
}

/* ============================================================
   PAYMENTS  (blue break)
   ============================================================ */
.pay{ background:var(--blue-deep); color:#fff; overflow:hidden; }
.pay__inner{ padding:clamp(90px,13vw,180px) var(--pad); }
/* The mask and every word share one line-height, so their boxes are identical
   and flex-start alignment lands the baselines exactly. 1.25 leaves room for
   the descender in "FASTag" — a 1em mask would clip the g. */
.pay__type{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:clamp(12px,1.8vw,28px);
  margin:26px 0 34px; font-size:clamp(44px,9vw,152px); letter-spacing:-.055em; color:#fff;
  line-height:1.25;
}
.pay__static{ opacity:.42; line-height:1.25; }
.roller{ display:block; height:1.25em; overflow:hidden; position:relative; }
.roller__list{ display:block; will-change:transform; }
.roller__list b{ display:block; height:1.25em; line-height:1.25; color:var(--yellow); font-weight:900; }

.pay__lede{ color:rgba(255,255,255,.62); font-size:clamp(16px,1.4vw,21px); max-width:60ch; line-height:1.6; }

.pay__ticker{
  margin:clamp(48px,6vw,80px) calc(var(--pad) * -1) clamp(44px,5vw,70px);
  padding:16px 0; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13);
  overflow:hidden;
}
.pay__track{ display:flex; width:max-content; will-change:transform; }
.pay__track span{
  font-family:var(--mono); font-size:clamp(13px,1.5vw,20px); letter-spacing:.06em;
  color:rgba(255,255,255,.78); white-space:nowrap;
}

.pay__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,26px); }
.paycard{
  padding:26px 24px 28px; border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background:rgba(255,255,255,.035); transition:background-color .45s, transform .55s var(--ease), border-color .45s;
}
.paycard:hover{ background:rgba(255,255,255,.075); border-color:rgba(255,198,30,.5); transform:translateY(-5px); }
.paycard__n{
  display:block; font-family:var(--display); font-weight:900; font-size:clamp(38px,4vw,58px);
  letter-spacing:-.05em; color:var(--yellow); line-height:1;
}
.paycard h4{ font-size:19px; margin:14px 0 8px; letter-spacing:-.03em; }
.paycard p{ color:rgba(255,255,255,.55); font-size:14.5px; line-height:1.55; }

/* ============================================================
   SPLIT SECTIONS (security)
   ============================================================ */
.sec-split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,80px);
  align-items:center; padding:clamp(90px,13vw,180px) var(--pad);
}
.sec-split__copy .big{ font-size:clamp(42px,6.6vw,100px); margin:22px 0 22px; letter-spacing:-.05em; }

.bars{ display:grid; gap:16px; margin:44px 0; max-width:520px; }
.bars li{ display:grid; grid-template-columns:1fr 130px auto; align-items:center; gap:16px; }
.bars__k{ font-size:14.5px; font-weight:600; }
.bars__bar{ display:block; height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.bars__bar i{ display:block; height:100%; width:0%; background:var(--yellow); border-radius:4px; }
.bars__v{ font-family:var(--display); font-weight:800; font-size:14px; color:var(--blue); min-width:56px; text-align:right; }

.ticks{ display:grid; gap:12px; max-width:56ch; }
.ticks li{ position:relative; padding-left:28px; color:var(--muted); font-size:15.5px; line-height:1.55; }
.ticks li::before{
  content:''; position:absolute; left:0; top:.55em; width:11px; height:11px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 0 3px rgba(255,198,30,.22);
}

.scanwrap{ position:relative; border-radius:20px; overflow:hidden; background:#fff; }
.scanwrap__img{ width:100%; display:block; }
/* faint monitor grid — reads as a control-room feed without dimming the render */
.scanwrap__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(30,42,120,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(30,42,120,.055) 1px, transparent 1px);
  background-size:100% 48px, 48px 100%;
}
.scanwrap__line{
  position:absolute; left:0; right:0; height:70px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(255,198,30,.22), transparent);
  animation:scan 3.6s linear infinite;
}
@keyframes scan{ 0%{ top:-70px; } 100%{ top:100%; } }
.scanwrap__rec{
  position:absolute; top:16px; right:16px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:#fff;
  background:var(--blue); padding:7px 13px; border-radius:100px;
}
.scanwrap__rec i{ width:8px; height:8px; border-radius:50%; background:#FF5252; animation:pulse2 1.4s infinite; }

/* ============================================================
   MAINTENANCE
   ============================================================ */
.maint{ padding:clamp(90px,13vw,180px) 0; background:var(--paper); }

.maint__hero{
  margin:clamp(46px,6vw,84px) 0 0; padding:0 var(--pad); text-align:center;
}
.maint__hero img{
  width:100%; max-width:760px; margin-inline:auto; will-change:transform;
}
.maint__hero figcaption{
  margin:22px auto 0; max-width:54ch; font-size:15px; line-height:1.6; color:var(--muted);
}
.maint__hero figcaption span{ font-family:var(--display); font-weight:800; color:var(--ink); }

.maint__cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,30px);
  padding:clamp(50px,7vw,90px) var(--pad) 0; align-items:start;
}
.maint__col{ display:grid; gap:clamp(16px,2vw,30px); will-change:transform; }
.mcard{
  background:#fff; border:1px solid var(--line-2); border-radius:18px; padding:28px 26px 30px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mcard:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(30,42,120,.09); }
.mcard--accent{ background:var(--blue); border-color:var(--blue); }
.mcard--accent h4{ color:#fff; }
.mcard--accent p{ color:rgba(255,255,255,.6); }
.mcard--accent .mcard__n{ color:var(--yellow); }
.mcard__n{ font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--blue-bright); }
.mcard h4{ font-size:clamp(21px,2vw,28px); margin:12px 0 10px; letter-spacing:-.035em; }
.mcard p{ color:var(--muted); font-size:15px; line-height:1.6; }

/* ============================================================
   PARTNERSHIP
   ============================================================ */
.partner{ padding:clamp(90px,13vw,180px) var(--pad); }
.partner__hook{ max-width:1300px; margin-inline:auto; }
.partner__type{
  font-size:clamp(44px,10.5vw,180px); line-height:.84; letter-spacing:-.06em; color:var(--blue);
}
.partner__type .line:nth-child(2){ padding-left:6vw; }
.partner__type .line:nth-child(3){ padding-left:2vw; }
.partner__type .line:nth-child(4){ padding-left:10vw; }
.partner__type em{ color:var(--yellow-deep); }
.partner__sub{ margin-top:34px; color:var(--muted); font-size:clamp(16px,1.4vw,21px); max-width:52ch; }

.flow{ position:relative; max-width:1000px; margin:clamp(60px,9vw,130px) auto 0; padding-left:clamp(60px,9vw,130px); }
.flow__spine{
  position:absolute; left:clamp(22px,3.4vw,48px); top:12px; bottom:12px; width:2px;
  background:var(--line);
}
.flow__spine i{
  position:absolute; inset:0; background:var(--yellow); transform:scaleY(0); transform-origin:top;
  display:block;
}
.flowstep{ position:relative; display:grid; gap:10px; padding:clamp(26px,3.4vw,46px) 0; }
.flowstep__n{
  position:absolute; left:calc(clamp(60px,9vw,130px) * -1); top:clamp(26px,3.4vw,46px);
  width:clamp(46px,6.8vw,96px); text-align:center;
  font-family:var(--display); font-weight:900; font-size:clamp(15px,1.5vw,21px);
  color:var(--blue); background:#fff; padding:6px 0; letter-spacing:-.02em;
}
.flowstep h3{ font-size:clamp(26px,3.6vw,54px); letter-spacing:-.045em; margin-bottom:12px; }
.flowstep p{ color:var(--muted); font-size:clamp(15px,1.3vw,18.5px); line-height:1.6; max-width:52ch; }

/* ============================================================
   CTA
   ============================================================ */
.cta{
  background:var(--blue); color:#fff; text-align:center;
  padding:clamp(90px,13vw,180px) var(--pad);
}
.cta__type{ font-size:clamp(38px,6.6vw,104px); letter-spacing:-.05em; margin:24px 0 24px; color:#fff; }
.cta__type em{ color:var(--yellow); }
.cta__lede{ color:rgba(255,255,255,.62); font-size:clamp(16px,1.35vw,20px); max-width:56ch; margin-inline:auto; line-height:1.6; }
.cta__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:44px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding:clamp(60px,8vw,110px) var(--pad) 26px; }
.foot__top{ display:grid; grid-template-columns:1fr 1.2fr; gap:50px; padding-bottom:clamp(50px,7vw,90px); }
.foot__brand{ display:flex; gap:14px; align-items:flex-start; }
.foot__brand p{ font-size:15px; color:var(--muted); line-height:1.55; }
.foot__brand b{ font-family:var(--display); font-weight:800; font-size:17px; color:var(--ink); letter-spacing:-.02em; }
.foot__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.foot__nav h5{ font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.foot__nav a{ display:block; font-size:15px; font-weight:600; padding:5px 0; opacity:.8; transition:opacity .3s, transform .35s var(--ease); }
.foot__nav a:hover{ opacity:1; transform:translateX(4px); color:var(--blue-bright); }

.foot__giant{ display:block; text-align:center; padding:clamp(10px,2vw,26px) 0 clamp(24px,3vw,40px); }
.foot__giant span{
  display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(42px,12.6vw,215px); line-height:.9; letter-spacing:-.055em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.6px rgba(30,42,120,.3);
  background:linear-gradient(90deg, var(--blue) 50%, transparent 50%);
  background-size:200% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
}

.foot__bar{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--muted);
}
.foot__bar a{ color:var(--blue-bright); border-bottom:1px solid currentColor; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .pay__cards{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__burger{ display:grid; }
  .nav .btn--pill{ display:none; }


  .stack__grid{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:16px; }
  .stack__visual{ min-height:0; }
  .steps{ min-height:290px; }
  .step__ghost{ font-size:110px; top:-24px; }
  .rail{ display:none; }

  .pgrid{ grid-template-columns:1fr 1fr; }
  .pgrid .pcard:last-child{ grid-column:1 / -1; max-width:520px; }

  .sec-split{ grid-template-columns:1fr; }
  .sec-split__media{ max-width:540px; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .hero{ min-height:auto; padding-bottom:40px; }
  .hero__stage{ margin-top:clamp(-30px,-4vw,-8px); }
  .hero__img{ width:min(122%, 720px); }

  .stack__pin{ padding-top:calc(var(--nav-h) + 10px); padding-bottom:20px; }
  .stack__head{ margin-bottom:4px; gap:10px; }
  .stack__head .stack__title{ font-size:22px; }
  .stack__grid{ gap:8px; }
  .steps{ min-height:250px; }
  .step{ gap:9px; }
  .step__title{ font-size:clamp(26px,7.6vw,38px); }
  .step__body{ font-size:14.5px; line-height:1.5; }
  .step__ghost{ font-size:82px; top:-16px; }
  .chips{ gap:6px; }
  .chips li{ font-size:9.5px; padding:5px 10px; }
  .stack__counter{ bottom:-14px; font-size:13px; }

  .pgrid{ grid-template-columns:1fr; }
  .pgrid .pcard:last-child{ max-width:none; }
  .pay__cards{ grid-template-columns:1fr; }
  .maint__cols{ grid-template-columns:1fr; }
  .maint__col{ transform:none !important; }
  .bars li{ grid-template-columns:1fr 80px auto; gap:10px; }

  .partner__type .line{ padding-left:0 !important; }
  .flow{ padding-left:clamp(46px,14vw,70px); }
  .flow__spine{ left:14px; }
  .flowstep__n{ left:calc(clamp(46px,14vw,70px) * -1); width:clamp(34px,10vw,52px); font-size:13px; }

  .foot__top{ grid-template-columns:1fr; gap:36px; }
  .foot__nav{ grid-template-columns:1fr 1fr; }
  .foot__bar{ flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .scanwrap__line{ display:none; }
}