/* v2.css — homepage + /offers. Loaded after shared.css; reuses its fonts
   (Bebas Neue, Inter) and colour variables (--blue, --ink, --rule …). */
.v2{
  --navy:#0F1D33; --navy-deep:#0B1628;
  --g1:#1A4A8A; --g2:#2563B8; --g3:#5BA3E0; --sky:#7EC8F0;
  --ease:cubic-bezier(.16,1,.3,1);
}
.v2 section{padding-block:104px}
.v2 .wrap{max-width:1240px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Type ── */
.v2-eyebrow{margin:0 0 14px;font:600 13px/1.3 'Inter';color:var(--blue-deep);letter-spacing:.01em}
.v2-h1,.v2-h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:-.01em;margin:0;text-wrap:balance}
.v2-h1{font-size:clamp(56px,7.4vw,96px);line-height:.92;color:#fff}
.v2-h1 .em{color:var(--sky)}
.v2-h1-ink{color:var(--ink)}
.v2-h1-ink .em{color:var(--blue);display:block}
.v2-h2{font-size:clamp(40px,5vw,68px);line-height:.95;color:var(--ink)}
.v2-h2 .em{color:var(--blue)}
.v2-lede{font:400 18px/1.6 'Inter';color:var(--ink-soft);margin:20px 0 0;max-width:52ch}
.v2-head{max-width:720px;margin-bottom:56px}
.v2-head-center{margin-inline:auto;text-align:center}
.v2-center{text-align:center;margin:40px 0 0}
.v2-narrow{max-width:860px}

/* Buttons: the shared .btn .btn-primary / .btn-white from shared.css. */
.v2-link{display:inline-block;font:600 14.5px/1.4 'Inter';color:var(--blue-deep);text-decoration:underline;
  text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.v2-link:hover{text-decoration-color:currentColor}
.v2-link-light{color:#BFE2F8}


/* ── Hero ── */
.v2-hero{background:var(--navy);color:#fff;padding:calc(96px + 72px) 0 96px;position:relative;overflow:hidden}
.v2-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 45%,rgba(37,99,184,.28),transparent 70%)}
.v2-hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.v2-hero-text{position:relative;z-index:2}
.v2-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:8px 14px;border-radius:999px;
  font:600 12.5px/1 'Inter';color:#CFE6F7;background:rgba(126,200,240,.10);border:1px solid rgba(126,200,240,.22)}
.v2-live{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:v2blink 1.6s ease-in-out infinite}
@keyframes v2blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(52,211,153,.55)}50%{opacity:.45;box-shadow:0 0 0 6px rgba(52,211,153,0)}}
.v2-hero-sub{font:400 19px/1.6 'Inter';color:rgba(255,255,255,.78);margin:26px 0 36px;max-width:44ch}
.v2-hero .v2-link{display:block;margin-top:22px;width:max-content;max-width:100%}

/* Globe */
.v2-globe{position:relative;width:100%;max-width:620px;aspect-ratio:1;justify-self:end;user-select:none;-webkit-user-select:none}
.v2-globe > div{position:absolute!important;inset:0}           /* cobe's wrapper */
.v2-globe canvas{position:absolute;inset:0;display:block}
.globe-gl{opacity:0;transition:opacity .8s ease;cursor:grab}
.v2-globe.is-dragging .globe-gl{cursor:grabbing}
.globe-dots{pointer-events:none;opacity:0;transition:opacity .8s ease}
.globe-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .8s ease}
.v2-globe.is-ready .globe-gl,.v2-globe.is-ready .globe-dots{opacity:1}
.v2-globe.is-ready .globe-fallback{opacity:0}
.globe-origin,.globe-tip{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.globe-origin{display:flex;align-items:center;gap:8px;font:600 12.5px/1 'Inter';color:#fff;opacity:0;
  transition:opacity .3s;margin:-6px 0 0 -6px;text-shadow:0 1px 6px rgba(11,22,40,.9)}
.globe-origin.flip{flex-direction:row-reverse;translate:calc(-100% + 12px) 0}
.globe-origin i{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(126,200,240,.8);animation:v2pulse 2s ease-out infinite}
@keyframes v2pulse{0%{box-shadow:0 0 0 0 rgba(126,200,240,.8)}100%{box-shadow:0 0 0 14px rgba(126,200,240,0)}}
.globe-tip{margin:-44px 0 0;translate:-50% 0;padding:8px 12px;border-radius:10px;white-space:nowrap;
  font:500 12.5px/1 'Inter';color:#fff;background:rgba(11,22,40,.9);border:1px solid rgba(126,200,240,.35)}

/* ── Stats strip ── */
.v2 .v2-stats{padding-block:0;border-bottom:1px solid var(--rule)}
.v2-stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.v2-stats li{padding:26px 20px;font:400 14.5px/1.45 'Inter';color:var(--ink-soft);text-align:center}
.v2-stats li + li{border-left:1px solid var(--rule)}
.v2-stats b{color:var(--ink);font-weight:600}

/* ── How it works: 4 steps + scroll-filled line ── */
.v2-steps-wrap{position:relative}
.v2-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.v2-steps-line{position:absolute;left:12.5%;right:12.5%;top:27px;height:2px;background:var(--rule);overflow:hidden}
.v2-steps-line span{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(1)}
.v2-steps li{position:relative;text-align:center}
.v2-step-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--blue);color:#fff;box-shadow:0 0 0 8px #fff,0 10px 24px -10px rgba(46,123,183,.8);position:relative}
.v2-step-day{display:block;margin:22px 0 6px;font:700 12px/1 'Inter';letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.v2-steps h3{font:600 19px/1.3 'Inter';margin:0 0 8px;color:var(--ink)}
.v2-steps p{font:400 15px/1.55 'Inter';color:var(--ink-soft);margin:0 auto;max-width:26ch}

/* ── Our work ── */
.v2-tint{background:var(--blue-softer)}
.v2-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.v2-card{background:#fff;border:1px solid var(--rule);border-radius:20px;overflow:hidden}
.v2-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:#DCE9F4}
.v2-card-body{padding:22px 24px 26px}
.v2-card-tag{margin:0;font:500 13.5px/1.4 'Inter';color:var(--ink-soft)}
.v2-card-result{margin:8px 0;font:400 40px/1 'Bebas Neue';color:var(--blue)}
.v2-card-line{margin:0;font:400 15px/1.5 'Inter';color:var(--ink)}

/* ── Why: sticky title + comparison table ── */
.v2-why{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.v2-why-title{position:sticky;top:140px}
.v2-table{border:1px solid var(--rule);border-radius:20px;overflow:hidden;background:#fff}
.v2-tr{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:16px;padding:18px 24px;border-top:1px solid var(--rule);
  font:400 15px/1.45 'Inter';color:var(--ink-soft)}
.v2-tr [role=rowheader]{font-weight:600;color:var(--ink)}
.v2-th{background:var(--navy);color:#fff;border-top:0;font-weight:600}
.v2-th span:nth-child(2){color:var(--sky)}
.v2-good{color:var(--blue-deep);font-weight:600}

/* ── Calculator banner ── */
.v2 .v2-sec-tight{padding-block:40px}
.v2-calc{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:48px 52px;border-radius:24px;color:#fff;background:linear-gradient(120deg,var(--g1),var(--g2) 55%,var(--g3))}
.v2-calc h2{margin:0;font:400 clamp(34px,4vw,52px)/.95 'Bebas Neue'}
.v2-calc p{margin:12px 0 0;font:400 17px/1.55 'Inter';color:rgba(255,255,255,.85);max-width:46ch}

/* ── On the ground ── */
.v2-footage{aspect-ratio:16/7;border-radius:24px;overflow:hidden;
  background:linear-gradient(rgba(15,29,51,.72),rgba(15,29,51,.82)),url(/assets/video/ground.jpg) center/cover,var(--navy);
  display:grid;place-content:center;justify-items:center;gap:18px;color:#fff}
.v2-play{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);padding-left:4px}
.v2-footage p{margin:0;font:500 15px/1.4 'Inter';color:rgba(255,255,255,.8)}

/* ── Sprint box ── */
.v2-sprint{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:36px 40px;border:1.5px solid var(--rule);border-radius:22px;background:#fff}
.v2-sprint h2{margin:0;font:400 38px/1 'Bebas Neue';color:var(--ink)}
.v2-sprint p{margin:8px 0 0;font:500 16px/1.5 'Inter';color:var(--ink-soft)}

/* ── FAQ accordion ── */
.v2-faq{border-top:1px solid var(--rule)}
.v2-faq-item{border-bottom:1px solid var(--rule)}
.v2-faq h3{margin:0}
.v2-faq button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;cursor:pointer;font:600 18px/1.4 'Inter';color:var(--ink)}
.v2-faq button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.v2-faq-ic{flex:none;width:14px;height:14px;position:relative}
.v2-faq-ic::before,.v2-faq-ic::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--blue);transition:transform .3s var(--ease)}
.v2-faq-ic::after{transform:rotate(90deg)}
.is-open .v2-faq-ic::after{transform:rotate(0)}
.v2-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.v2-faq-a > div{overflow:hidden}
.is-open .v2-faq-a{grid-template-rows:1fr}
.v2-faq-a p{margin:0;padding:0 4px 24px;font:400 16px/1.65 'Inter';color:var(--ink-soft);max-width:68ch}

/* ── Closing ── */
.v2 .v2-close{background:var(--navy);color:#fff;text-align:center;padding-block:120px}
.v2-close .v2-h2{color:#fff;font-size:clamp(46px,6vw,84px)}
.v2-close .v2-h2 .em{color:var(--sky)}
.v2-close .btn{margin-top:36px}
.v2-close .v2-link{display:block;width:max-content;margin:20px auto 0}

/* ── Footer (shared with the React pages via shared.css) is in shared.css ── */

/* ── /offers ── */
.v2-hero-light{background:linear-gradient(180deg,#fff,var(--blue-softer));color:var(--ink)}
.v2-hero-light::before{display:none}
.v2-hero-light .v2-hero-sub{color:var(--ink-soft)}
.v2-hero-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.v2-note{font:500 15px/1.4 'Inter';color:var(--ink-soft)}

.v2-orbit{position:relative;width:min(440px,100%);aspect-ratio:1;justify-self:center;--r:42%}
.v2-orbit-ring{position:absolute;inset:8%;border-radius:50%;border:1.5px dashed rgba(46,123,183,.35)}
.v2-orbit-core{position:absolute;inset:32%;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:var(--navy);color:#fff;font:400 clamp(20px,2.4vw,28px)/1 'Bebas Neue';letter-spacing:.02em;
  box-shadow:0 20px 50px -20px rgba(15,29,51,.6)}
.v2-orbit-arm{position:absolute;inset:0;transform:rotate(var(--a));animation:v2orbit 28s linear infinite}
.v2-orbit-arm b{position:absolute;left:50%;top:8%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--blue);font:400 28px/1 'Bebas Neue';
  border:1.5px solid var(--rule);box-shadow:0 12px 30px -14px rgba(46,123,183,.6);
  transform:rotate(calc(-1 * var(--a)));animation:v2counter 28s linear infinite}
@keyframes v2orbit{to{transform:rotate(calc(var(--a) + 360deg))}}
@keyframes v2counter{to{transform:rotate(calc(-1 * var(--a) - 360deg))}}

.v2-get{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.v2-get-card{padding:30px 28px;border:1px solid var(--rule);border-radius:20px;background:#fff}
.v2-get-card .v2-step-ic{width:48px;height:48px;box-shadow:none}
.v2-get-card h3{font:600 18px/1.3 'Inter';margin:20px 0 8px;color:var(--ink)}
.v2-get-card p{font:400 15px/1.55 'Inter';margin:0;color:var(--ink-soft)}

.v2-price{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.v2-price-card{padding:40px;border-radius:24px;background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column}
.v2-price-card h3{margin:0;font:600 18px/1.3 'Inter';color:var(--ink)}
.v2-price-card .v2-price-num{margin:14px 0 12px;font:400 72px/.9 'Bebas Neue';color:var(--blue)}
.v2-price-card p{margin:0;font:400 16px/1.55 'Inter';color:var(--ink-soft)}
.v2-price-card .v2-price-credit{margin-top:auto;padding-top:22px;border-top:1px solid var(--rule);font-weight:600;color:var(--blue-deep)}
.v2-price-card p + .v2-price-credit{margin-top:28px}
.v2-price-dark{background:var(--navy);border-color:var(--navy)}
.v2-price-dark h3{color:#fff}
.v2-price-dark .v2-price-card .v2-price-num,.v2-price-card.v2-price-dark .v2-price-num{color:var(--sky)}
.v2-price-dark p{color:rgba(255,255,255,.75)}
.v2-price-dark .v2-price-credit{color:var(--sky);border-color:rgba(255,255,255,.15)}
.v2-price-foot{text-align:center;margin:28px 0 0;font:500 15px/1.5 'Inter';color:var(--ink-soft)}

.v2-risk{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.v2-vline{list-style:none;margin:0;padding:0 0 0 40px;position:relative}
.v2-vline::before,.v2-vline::after{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--rule)}
.v2-vline::after{background:var(--blue);transform-origin:top;transform:scaleY(1)}
.v2-vline li{position:relative;padding-bottom:36px}
.v2-vline li:last-child{padding-bottom:0}
.v2-vline li::before{content:"";position:absolute;left:-36px;top:4px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);z-index:1}
.v2-vline h3{margin:0 0 6px;font:600 18px/1.3 'Inter';color:var(--ink)}
.v2-vline p{margin:0;font:400 15.5px/1.6 'Inter';color:var(--ink-soft)}

.v2-fit{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v2-fit-box{padding:34px 36px;border-radius:22px;border:1px solid var(--rule)}
.v2-fit-yes{background:var(--blue-softer)}
.v2-fit-box h3{margin:0 0 16px;font:600 19px/1.3 'Inter';color:var(--ink)}
.v2-fit-box ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.v2-fit-box li{position:relative;padding-left:30px;font:400 16px/1.5 'Inter';color:var(--ink-soft)}
.v2-fit-box li::before{position:absolute;left:0;top:0;font-weight:700}
.v2-fit-yes li::before{content:"✓";color:var(--blue)}
.v2-fit-no li::before{content:"✕";color:#B4404A}
.v2-svc{margin-top:24px;padding:26px 30px;border-radius:18px;border:1px dashed var(--rule)}
.v2-svc h3{margin:0 0 8px;font:600 16px/1.3 'Inter';color:var(--ink)}
.v2-svc p{margin:0;font:400 15px/1.7 'Inter';color:var(--ink-soft)}
.v2-svc b{color:var(--ink);font-weight:600}

/* ── Motion ──
   One curve (--ease), one-time reveals: content eases in once as it reaches
   the screen (v2.js adds .in), with a short stagger via --i. The hero plays a
   single load sequence. Content is never hidden without JS (.reveal-on is set
   by script), and nothing moves under prefers-reduced-motion. */
.v2{--ease:cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion: no-preference){
  .reveal-on .rv2{opacity:0;transform:translateY(18px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
  .reveal-on .rv2-slide{opacity:0;transform:translateY(10px);
    transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
  .reveal-on .rv2.in,.reveal-on .rv2-slide.in{opacity:1;transform:none}
  .reveal-on .v2-steps-line span{transform:scaleX(0);transition:transform 1.4s var(--ease) .25s}
  .reveal-on .v2-steps-wrap.in .v2-steps-line span{transform:scaleX(1)}
  .reveal-on .v2-vline::after{transform:scaleY(0);transition:transform 1.6s var(--ease) .2s}
  .reveal-on .v2-vline.in::after{transform:scaleY(1)}
  /* Hero: one orchestrated load sequence. */
  .v2-hero-text > *{animation:v2in .8s var(--ease) both}
  .v2-hero-text > :nth-child(1){animation-delay:.05s}
  .v2-hero-text > :nth-child(2){animation-delay:.14s}
  .v2-hero-text > :nth-child(3){animation-delay:.26s}
  .v2-hero-text > :nth-child(4){animation-delay:.36s}
  .v2-hero-text > :nth-child(5){animation-delay:.44s}
  .v2-hero-row{animation-delay:.36s}
  .v2-globe,.v2-orbit{animation:v2fade 1.2s var(--ease) .3s both}
}
@keyframes v2in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes v2fade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .v2 *,.v2 *::before,.v2 *::after{animation:none!important;transition:none!important}
}

/* ── Tablet ── */
@media (max-width:1024px){
  .v2 section{padding-block:96px}
  .v2-hero{padding:calc(96px + 48px) 0 72px}
  .v2-hero-grid{grid-template-columns:1fr;gap:24px}
  .v2-globe{justify-self:center;max-width:520px}
  .v2-steps{grid-template-columns:repeat(2,1fr);row-gap:48px}
  .v2-steps-line{display:none}
  .v2-cards,.v2-get{grid-template-columns:repeat(2,1fr)}
  .v2-why,.v2-risk{grid-template-columns:1fr;gap:40px}
  .v2-why-title{position:static}
  .v2-stats ul{grid-template-columns:repeat(2,1fr)}
  .v2-stats li:nth-child(3){border-left:0}
  .v2-stats li:nth-child(n+3){border-top:1px solid var(--rule)}
  .v2-orbit{width:min(360px,80%)}
}
/* ── Phone ── */
@media (max-width:640px){
  .v2 section{padding-block:72px}
  .v2 .v2-sec-tight{padding-block:24px}
  .v2-hero{padding:calc(80px + 32px) 0 48px}
  .v2-hero-sub{font-size:17px;margin:20px 0 28px}
  .v2-globe{max-width:340px}
  .globe-tip{display:none}
  .v2-head{margin-bottom:40px}
  .v2-steps,.v2-cards,.v2-get,.v2-price,.v2-fit{grid-template-columns:1fr}
  .v2-stats li{padding:18px 12px;font-size:13.5px}
  .v2-tr{grid-template-columns:1fr 1fr;padding:16px 18px;font-size:14px;row-gap:4px}
  .v2-tr [role=rowheader]{grid-column:1 / -1}
  .v2-th [role=columnheader]:first-child{display:none}
  .v2-calc,.v2-sprint{padding:30px 24px}
  .v2-calc .btn,.v2-sprint .btn{width:100%;justify-content:center}
  .v2-footage{aspect-ratio:4/3}
  .v2-price-card{padding:30px 26px}
  .v2-faq button{font-size:16.5px}
  .v2-hero .btn{width:100%;justify-content:center}
}

/* Comfortable tap targets for text links (44px) without shifting the layout. */
.v2-link{padding-block:12px;margin-block:-12px}
.v2-hero .v2-link{margin-top:10px;margin-bottom:-12px}
.v2-close .v2-link{margin-top:8px}

/* ═════ Brought back from the previous design, adapted ═════ */

/* Hero aurora: slow drifting light behind the headline and globe. */
.v2-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.v2-aurora span{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;opacity:.5}
.v2-aurora span:nth-child(1){width:560px;height:560px;left:-160px;top:-200px;background:radial-gradient(circle,#2563B8,transparent 66%)}
.v2-aurora span:nth-child(2){width:680px;height:680px;right:-200px;top:-120px;background:radial-gradient(circle,#1A4A8A,transparent 66%);opacity:.65}
.v2-aurora span:nth-child(3){width:520px;height:520px;left:40%;top:45%;background:radial-gradient(circle,#5BA3E0,transparent 64%);opacity:.22}
.v2-aurora-light span{opacity:.35}
.v2-aurora-light span:nth-child(1){background:radial-gradient(circle,#7EC8F0,transparent 66%)}
.v2-aurora-light span:nth-child(2){background:radial-gradient(circle,#5BA3E0,transparent 66%);opacity:.3}
.v2-hero-grid{z-index:1}

/* How it works: a "shipment" travels the line and lights each step in turn. */
.v2-steps-cursor{position:absolute;top:28px;left:12.5%;z-index:2;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--blue);border:3px solid #fff;box-shadow:0 3px 10px -1px rgba(46,123,183,.7);opacity:0;
  transition:left .9s var(--ease),opacity .4s var(--ease)}
.v2-steps-cursor::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--blue);opacity:0}
.v2-steps-wrap.is-live .v2-steps-cursor{opacity:1}
.v2-steps-wrap[data-step="0"] .v2-steps-cursor{left:12.5%}
.v2-steps-wrap[data-step="1"] .v2-steps-cursor{left:37.5%}
.v2-steps-wrap[data-step="2"] .v2-steps-cursor{left:62.5%}
.v2-steps-wrap[data-step="3"] .v2-steps-cursor{left:87.5%}
.v2-steps .v2-step-ic{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .5s var(--ease)}
.v2-steps li.is-now .v2-step-ic{transform:scale(1.12);background:var(--blue-deep);
  box-shadow:0 0 0 8px #fff,0 0 0 11px rgba(46,123,183,.22),0 14px 28px -10px rgba(46,123,183,.9)}
.v2-steps li h3,.v2-steps li p{transition:color .4s var(--ease)}
.v2-steps-wrap.is-live li:not(.is-now) p{color:var(--ink-mute)}

/* Why Kawini: dotted backdrop that drifts slowly, and a scanner on the table. */
.v2-why-sec{position:relative;overflow:clip}
.v2-why-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(46,123,183,.13) 1px,transparent 1.3px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 25% 45%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 25% 45%,#000,transparent 75%)}
.v2-why-sec::after{content:"";position:absolute;inset:-12%;pointer-events:none;
  background:radial-gradient(circle at 22% 30%,rgba(46,123,183,.12),transparent 42%),radial-gradient(circle at 80% 72%,rgba(91,164,207,.14),transparent 46%)}
.v2-why-sec .wrap{position:relative;z-index:1}
.v2-table{position:relative}
.v2-scan{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:20px;overflow:hidden}
.v2-scan i{position:absolute;width:16px;height:16px;border:2px solid var(--sky,#7EC8F0);opacity:0;transition:opacity .4s var(--ease) .1s}
.v2-scan .tl{top:10px;left:10px;border-width:2px 0 0 2px;border-radius:3px 0 0 0}
.v2-scan .tr{top:10px;right:10px;border-width:2px 2px 0 0;border-radius:0 3px 0 0}
.v2-scan .bl{bottom:10px;left:10px;border-width:0 0 2px 2px;border-radius:0 0 0 3px;border-color:var(--blue)}
.v2-scan .br{bottom:10px;right:10px;border-width:0 2px 2px 0;border-radius:0 0 3px 0;border-color:var(--blue)}
.v2-scan b{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--blue) 20%,#fff 50%,var(--blue) 80%,transparent);
  box-shadow:0 0 20px 6px rgba(46,123,183,.45)}
.v2-table.in .v2-scan i{opacity:.8}

/* On the ground: real looping footage. */
.v2-footage{position:relative;place-content:end start;justify-items:start;padding:24px}
.v2-footage-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.v2-footage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(11,22,40,.55),transparent 45%)}
.v2-footage-cap{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;margin:0;
  padding:9px 14px;border-radius:999px;background:rgba(11,22,40,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:600 13px/1 'Inter'!important;color:#fff!important}

/* Our work: photo eases in a touch on hover (mouse only). */
.v2-card{overflow:hidden}
.v2-card img{transition:transform .9s var(--ease)}
@media (hover:hover){.v2-card:hover img{transform:scale(1.04)}}

@media (prefers-reduced-motion: no-preference){
  .v2-aurora span:nth-child(1){animation:v2auroraA 22s ease-in-out infinite}
  .v2-aurora span:nth-child(2){animation:v2auroraB 28s ease-in-out infinite}
  .v2-aurora span:nth-child(3){animation:v2auroraC 32s ease-in-out infinite}
  .v2-steps-wrap.is-live .v2-steps-cursor::after{animation:v2ping 1.6s ease-out infinite}
  .v2-why-sec::after{animation:v2drift 22s ease-in-out infinite alternate}
  .v2-table.in .v2-scan b{animation:v2scan 1.6s cubic-bezier(.25,.46,.45,.94) .15s both}
}
@keyframes v2auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,70px) scale(1.15)}}
@keyframes v2auroraB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,60px) scale(1.1)}}
@keyframes v2auroraC{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-40%,-50px) scale(1.18)}}
@keyframes v2ping{0%{transform:scale(.5);opacity:.6}100%{transform:scale(1.8);opacity:0}}
@keyframes v2drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(28px,-24px) scale(1.08)}}
@keyframes v2scan{0%{top:56px;opacity:0}12%{opacity:.95}80%{opacity:.95}100%{top:calc(100% - 20px);opacity:0}}
@media (max-width:1024px){.v2-steps-cursor{display:none}}
@media (max-width:640px){.v2-aurora span{filter:blur(70px)}.v2-aurora span:nth-child(2){width:420px;height:420px}}
/* Tracker: the line fills up to the current step; the active icon pulses. */
.v2-steps-cursor{display:none}
.reveal-on .v2-steps-wrap.in.is-live .v2-steps-line span,.v2-steps-wrap.is-live .v2-steps-line span{transform:scaleX(var(--p,0));transition:transform .9s var(--ease)}
.v2-steps li .v2-step-ic::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--blue);opacity:0;pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  .v2-steps li.is-now .v2-step-ic::after{animation:v2ping 1.8s ease-out infinite}
}
