/* Self-hosted webfonts — Space Grotesk & Inter, SIL Open Font License 1.1.
   Taken from Google Fonts and served from this repository so the page has no
   third-party asset dependency: if fonts.gstatic.com is blocked or goes away,
   nothing on the page changes.
   These are VARIABLE fonts — one file per subset covers the whole weight range,
   which is why there are six files and not twenty-eight. Only the subsets the
   site actually needs are shipped: latin, latin-ext (PL/DE/FR/PT/IT accents)
   and cyrillic, cyrillic-ext (RU). Greek and Vietnamese are deliberately absent.
   Space Grotesk has no Cyrillic coverage at all, so Russian headings fall back
   to Inter through the font stack — that was already the case with the CDN. */

/* Inter — cyrillic-ext */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Inter — cyrillic */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter — latin-ext */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — latin */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk — latin-ext */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk — latin */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#05060b;
  --bg-2:#0a0c16;
  --panel: rgba(255,255,255,0.045);
  --panel-strong: rgba(255,255,255,0.075);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text:#f4f5f9;
  /* Round 7: these were 0.68 / 0.46. Round 6 raised them only inside the 900px
     block, on the assumption that on desktop the aurora blobs sit at the edges.
     They don't — at 1440 the 520-640px blobs cover the content columns, and
     12.5px labels over the magenta/teal measured 2.2-2.4:1. */
  --text-dim: rgba(244,245,249,0.78);
  --text-dimmer: rgba(244,245,249,0.70);
  --violet:#8b5cf6;
  --cyan:#22d3ee;
  --magenta:#ec4899;
  --amber:#f59e0b;
  --grad: linear-gradient(120deg, var(--violet), var(--cyan) 55%, var(--magenta));
  --grad-soft: linear-gradient(120deg, rgba(139,92,246,0.9), rgba(34,211,238,0.9) 55%, rgba(236,72,153,0.9));
  --radius: 20px;
  --maxw: 1220px;
  --ease: cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(139,92,246,0.18);}
/* anchors must clear the fixed header, otherwise section titles land under it */
html{scroll-behavior:smooth;scroll-padding-top:92px;}
@media(max-width:900px){html{scroll-padding-top:74px;}}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.02em;
  margin:0;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
img,video{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
::selection{background:rgba(139,92,246,0.35);color:#fff;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% auto;
  animation:gradShift 8s ease infinite;
}
@keyframes gradShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ===== Aurora background ===== */
.aurora{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--bg);
}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:0.36;
  will-change:transform;
}
/* One scrim over the whole of main rather than per-section: a per-section scrim
   puts a visible step at every boundary. */
main{background:rgba(5,6,11,0.20);}
.aurora span:nth-child(1){width:640px;height:640px;background:var(--violet);top:-220px;left:-160px;animation:float1 22s ease-in-out infinite;}
.aurora span:nth-child(2){width:560px;height:560px;background:var(--cyan);top:10%;right:-220px;animation:float2 26s ease-in-out infinite;}
.aurora span:nth-child(3){width:520px;height:520px;background:var(--magenta);bottom:-200px;left:12%;animation:float3 24s ease-in-out infinite;}
.aurora span:nth-child(4){width:420px;height:420px;background:var(--amber);opacity:0.11;bottom:5%;right:8%;animation:float1 30s ease-in-out infinite reverse;}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,80px) scale(1.12);}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-70px,60px) scale(0.9);}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-70px) scale(1.08);}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main, header, footer, section{position:relative;z-index:2;}

/* ===== Glass utility ===== */
.glass{
  background:var(--panel);
  border:1px solid var(--border);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-radius:var(--radius);
}

/* ===== NAV ===== */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 0;
  transition:padding .4s var(--ease);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:10px 14px 10px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(8,9,16,0.55);
  border:1px solid var(--border);
  border-radius:100px;
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
header.nav.scrolled .nav-inner{
  background:rgba(6,7,13,0.78);
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.6);
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:-0.01em;white-space:nowrap;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 16px 2px rgba(139,92,246,0.7);}
.brand small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:10.5px;color:var(--text-dimmer);letter-spacing:0.04em;}

nav.links{display:flex;align-items:center;gap:2px;}
nav.links > a{
  padding:10px 14px;border-radius:100px;font-size:14.5px;color:var(--text-dim);
  background:none;border:none;transition:color .25s, background .25s;
  display:flex;align-items:center;gap:5px;
}
nav.links > a:hover{color:var(--text);background:rgba(255,255,255,0.06);}
.chev{font-size:10px;transition:transform .3s var(--ease);opacity:0.7;}

/* ---------- HEADER ENTRANCE ----------
   Driven by a class hard-coded in the markup rather than added by JS: the class is
   present at first paint, so `animation-fill-mode:both` holds the hidden start state
   with no flash of a fully-drawn header. Without JS, and without CSS animation
   support, the untouched rules above already render the finished state. */
@keyframes navPill{from{opacity:0;transform:translateY(-18px) scaleX(.94);}to{opacity:1;transform:none;}}
@keyframes navItem{from{opacity:0;transform:translateY(-14px);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
@keyframes navDot{0%{transform:scale(0);box-shadow:0 0 0 0 rgba(139,92,246,0);}
  60%{transform:scale(1.5);box-shadow:0 0 26px 7px rgba(139,92,246,0.75);}
  100%{transform:scale(1);box-shadow:0 0 16px 2px rgba(139,92,246,0.7);}}
/* one pass of light across the pill, after the items have landed */
@keyframes navSheen{from{background-position:180% 0;}to{background-position:-80% 0;}}

header.nav.nav-lit .nav-inner{animation:navPill .95s var(--ease) both;transform-origin:50% 0;}
header.nav.nav-lit .brand>span{animation:navItem .8s var(--ease) .22s both;}
header.nav.nav-lit .brand .dot{animation:navDot .9s cubic-bezier(.2,.9,.3,1) .1s both;}
header.nav.nav-lit nav.links>a{animation:navItem .78s var(--ease) both;}
header.nav.nav-lit nav.links>a:nth-child(1){animation-delay:.34s;}
header.nav.nav-lit nav.links>a:nth-child(2){animation-delay:.42s;}
header.nav.nav-lit nav.links>a:nth-child(3){animation-delay:.50s;}
header.nav.nav-lit nav.links>a:nth-child(4){animation-delay:.58s;}
header.nav.nav-lit nav.links>a:nth-child(5){animation-delay:.66s;}
header.nav.nav-lit nav.links>a:nth-child(6){animation-delay:.74s;}
/* The right-hand group holds the only conversion CTA on the first screen, so its ladder
   overlaps the tail of the links rather than queueing behind it: at .80/.88/.96 with a
   .78s duration the button did not finish landing until ~1.74s, which is a long time for
   a primary CTA to be invisible. Starting at .58 and shortening the travel puts it fully
   on screen by ~1.42s while still reading as one continuous left-to-right sweep. */
header.nav.nav-lit .nav-right>*{animation:navItem .68s var(--ease) both;}
header.nav.nav-lit .nav-right>*:nth-child(1){animation-delay:.58s;}
header.nav.nav-lit .nav-right>*:nth-child(2){animation-delay:.66s;}
header.nav.nav-lit .nav-right>*:nth-child(3){animation-delay:.74s;}
/* The sheen must be clipped to the pill's rounded shape, but `overflow:hidden` on
   `.nav-inner` is not an option: `.lang-menu` is an absolutely-positioned child that
   hangs *below* the pill, and hiding the overflow amputates the whole dropdown. So the
   pseudo-element covers exactly the pill box, inherits its border-radius (which clips
   its own background), and the light travels by moving the background-position inside
   that fixed box rather than by translating the box itself. */
.nav-inner{position:relative;}
.nav-inner::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border-radius:inherit;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,0.13) 46%,rgba(190,220,255,0.19) 52%,transparent 64%);
  background-size:260% 100%;background-repeat:no-repeat;background-position:180% 0;}
header.nav.nav-lit .nav-inner::before{animation:navSheen 1.5s cubic-bezier(.3,.6,.2,1) 1.05s 1 both;}

/* nav hover: a gradient rule wipes out from the centre instead of a flat tint */
nav.links>a{position:relative;}
nav.links>a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .38s cubic-bezier(.16,.84,.28,1);}
nav.links>a:hover::after,nav.links>a:focus-visible::after{transform:scaleX(1);}

.nav-right{display:flex;align-items:center;gap:8px;}
.lang-switch{position:relative;}
.lang-btn{
  display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:100px;
  background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text);
  font-size:13.5px;font-weight:500;
}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:184px;padding:8px;
  max-height:70vh;overflow-y:auto;
  /* `.glass` is a 4.5%-white wash: over the hero headline, blur alone leaves the
     giant glyphs showing straight through the panel. A dropdown needs to read as
     a surface, not a filter — own near-opaque dark fill, blur only for the edges. */
  background:linear-gradient(180deg, rgba(14,16,26,0.965), rgba(9,10,18,0.975));
  border:1px solid rgba(255,255,255,0.13);
  backdrop-filter:blur(34px) saturate(150%);
  -webkit-backdrop-filter:blur(34px) saturate(150%);
  opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow:0 24px 60px -18px rgba(0,0,0,0.6);
}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.lang-switch.open .chev{transform:rotate(180deg);}
.lang-menu button{
  width:100%;text-align:left;padding:9px 10px;border-radius:10px;background:none;border:none;color:var(--text-dim);
  font-size:13.5px;display:flex;align-items:center;gap:8px;transition:background .2s,color .2s;
}
.lang-menu button:hover{background:rgba(255,255,255,0.07);color:var(--text);}
.lang-menu button.active{color:var(--text);background:rgba(139,92,246,0.16);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:100px;font-size:14.5px;font-weight:600;border:none;
  white-space:nowrap;transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
}
.btn-primary{background:var(--grad);background-size:180% auto;color:#08060f;box-shadow:0 8px 30px -6px rgba(139,92,246,0.55);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px -8px rgba(139,92,246,0.7);background-position:100% 50%;}
.btn-ghost{background:rgba(255,255,255,0.05);border:1px solid var(--border-strong);color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px);}
.btn-sm{padding:10px 18px;font-size:13.5px;}

.burger{display:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid var(--border);align-items:center;justify-content:center;}
.burger span{display:block;width:16px;height:1.5px;background:var(--text);position:relative;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--text);transition:transform .3s;}
.burger span::before{top:-5px;}
.burger span::after{top:5px;}

/* ===== SECTION SHELL ===== */
section{padding:120px 0;}
h1,h2,h3,h4,p,li,.eyebrow,.lbl{overflow-wrap:break-word;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:100px;max-width:100%;
  font-size:12.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:22px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);}
.section-head{max-width:680px;margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,4vw,44px);}
.section-head p{margin-top:16px;font-size:17px;color:var(--text-dim);max-width:560px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.stagger > *{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.stagger.is-visible > *{opacity:1;transform:translateY(0);}
.stagger.is-visible > *:nth-child(1){transition-delay:.03s;}
.stagger.is-visible > *:nth-child(2){transition-delay:.11s;}
.stagger.is-visible > *:nth-child(3){transition-delay:.19s;}
.stagger.is-visible > *:nth-child(4){transition-delay:.27s;}
.stagger.is-visible > *:nth-child(5){transition-delay:.35s;}
.stagger.is-visible > *:nth-child(6){transition-delay:.43s;}

/* ===== HERO ===== */
.hero{padding:190px 0 100px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;}
.hero>.container{width:100%;}
.hero-inner{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(38px,5.4vw,68px);}
.hero .lead{font-size:18px;color:var(--text-dim);margin-top:22px;max-width:520px;}
.hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.hero-visual{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--border-strong);
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.7);
}
.hero-visual video{width:100%;height:100%;object-fit:cover;transform:scale(1.02);background:linear-gradient(135deg, #2a1a4d, #123a45 55%, #401a35);opacity:0;transition:opacity 1s var(--ease);}
.hero-visual video.loaded{opacity:1;}
.hero-visual .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,6,11,0.1) 0%, rgba(5,6,11,0.15) 45%, rgba(5,6,11,0.92) 100%), linear-gradient(120deg, rgba(139,92,246,0.28), rgba(34,211,238,0.08));}
.hero-visual .badge{
  position:absolute;left:20px;bottom:20px;right:20px;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.hero-visual .badge .b-num{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;}
.hero-visual .badge .b-label{font-size:11.5px;color:var(--text-dimmer);text-transform:uppercase;letter-spacing:0.05em;margin-top:2px;}

.stats-strip{margin-top:80px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.stat-cell{background:rgba(8,9,16,0.7);padding:26px 22px;text-align:center;min-width:0;}
.stat-cell .lbl,.stat-cell .num{overflow-wrap:anywhere;}
.stat-cell .num{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:700;}
.stat-cell .lbl{margin-top:6px;font-size:12.5px;color:var(--text-dimmer);letter-spacing:0.02em;}

/* ===== SERVICES ===== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.svc-card{padding:30px 26px;position:relative;overflow:hidden;transition:transform .4s var(--ease), border-color .4s;}
.svc-card:hover{transform:translateY(-6px);border-color:var(--border-strong);}
.svc-card .icon{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(139,92,246,0.25), rgba(34,211,238,0.18));
  border:1px solid var(--border-strong);font-size:22px;margin-bottom:20px;
}
.svc-card h3{font-size:18.5px;margin-bottom:10px;}
.svc-card p{font-size:14.5px;color:var(--text-dim);}
.svc-card .idx{position:absolute;top:22px;right:26px;font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--text-dimmer);}

/* ===== COVERAGE ===== */
.cov-wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:52px;align-items:center;}
.globe-frame{position:relative;border-radius:50%;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--border-strong);
  box-shadow:0 0 0 1px rgba(255,255,255,0.03), 0 40px 100px -30px rgba(139,92,246,0.35);
}
.globe-frame video{width:100%;height:100%;object-fit:cover;background:radial-gradient(circle at 40% 35%, #241a4d, #05060b 70%);opacity:0;transition:opacity 1s var(--ease);}
.globe-frame video.loaded{opacity:1;}
.globe-frame::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 20%, rgba(139,92,246,0.15), transparent 55%), linear-gradient(180deg, rgba(5,6,11,0) 40%, rgba(5,6,11,0.75) 100%);}
.ring{position:absolute;border:1px solid rgba(139,92,246,0.25);border-radius:50%;animation:spin 40s linear infinite;}
.ring.r1{inset:-30px;}
.ring.r2{inset:-60px;border-color:rgba(34,211,238,0.16);animation-duration:60s;animation-direction:reverse;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.cov-chips{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;}
.cov-chip{padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;color:var(--text-dim);}
.region-block{margin-top:26px;}
.region-block h4{font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dimmer);margin-bottom:12px;font-family:'Inter',sans-serif;font-weight:600;}
.country-grid{display:flex;flex-wrap:wrap;gap:8px;}
.country-tag{
  padding:8px 13px;border-radius:100px;font-size:13.5px;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);transition:transform .3s var(--ease), background .3s, border-color .3s;
}
.country-tag:hover{transform:translateY(-2px);background:rgba(255,255,255,0.08);border-color:var(--border-strong);}

/* ===== CASE STUDY ===== */
.case-wrap{padding:52px;position:relative;overflow:hidden;}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.case-video{border-radius:18px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--border-strong);}
.case-video video{width:100%;height:100%;object-fit:cover;background:linear-gradient(160deg, #3a1a45, #12203f 60%, #1a3a3a);opacity:0;transition:opacity 1s var(--ease);}
.case-video video.loaded{opacity:1;}
.case-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;}
.case-stat{padding:20px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:16px;}
.case-stat .num{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:700;}
.case-stat .lbl{font-size:12.5px;color:var(--text-dimmer);margin-top:4px;}
.case-list{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
.case-list li{display:flex;gap:12px;font-size:14.5px;color:var(--text-dim);align-items:flex-start;}
.case-list li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--grad);margin-top:8px;}

/* ===== PROCESS ===== */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;}
.timeline::before{content:"";position:absolute;top:26px;left:5%;right:5%;height:1px;background:var(--border);}
.tl-step{position:relative;padding:0 6px;}
.tl-num{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;
  background:var(--bg-2);border:1px solid var(--border-strong);margin-bottom:22px;position:relative;z-index:2;
}
.tl-step:nth-child(odd) .tl-num{background:linear-gradient(135deg, rgba(139,92,246,0.25), rgba(34,211,238,0.14));}
.tl-step h3{font-size:16.5px;margin-bottom:8px;}
.tl-step p{font-size:13.8px;color:var(--text-dim);}

/* ===== WHY US ===== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.why-card{padding:28px 22px;text-align:left;min-width:0;}
.why-card h3,.why-card p{overflow-wrap:anywhere;}
.why-card .num-lg{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;opacity:0.9;}
.why-card h3{font-size:16px;margin:14px 0 8px;}
.why-card p{font-size:13.8px;color:var(--text-dim);}

/* ===== CONTACT ===== */
.contact-wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:52px;}
.contact-info-card{padding:34px;background:rgba(12,14,24,0.4);border-color:rgba(255,255,255,0.13);}
.info-row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);}
/* :last-child never matches here — .entity-block is the card's last child, so the
   final info row kept its rule and sat a few px above the entity block's own
   border-top. Two rules with empty space between them read as a missing row. */
.info-row:last-of-type{border-bottom:none;}
.info-row .ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,0.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none;font-size:16px;}
.info-row .lbl{font-size:11.5px;color:var(--text-dimmer);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;}
.info-row .val{font-size:15px;font-weight:500;}
.entity-block{margin-top:22px;padding-top:22px;border-top:1px solid var(--border);font-size:13.3px;color:var(--text-dim);line-height:1.7;}
.entity-block strong{color:var(--text);display:block;font-size:14.5px;margin-bottom:4px;}

.form-card{padding:34px;background:rgba(12,14,24,0.44);border-color:rgba(255,255,255,0.13);}
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;color:var(--text-dimmer);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.04em;}
.field input, .field textarea{
  width:100%;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,0.04);
  border:1px solid var(--border);color:var(--text);font-size:14.5px;font-family:inherit;transition:border-color .25s, background .25s;
}
/* iOS Safari zooms the whole page in when a focused field is under 16px and
   never zooms back out — on the contact form that is the worst place for it. */
@media(max-width:900px){
  .field input, .field textarea{font-size:16px;padding:15px 16px;}
  .field label{font-size:13px;}
}
.field input:focus, .field textarea:focus{outline:none;border-color:rgba(139,92,246,0.6);background:rgba(255,255,255,0.06);}
.field textarea{min-height:110px;resize:vertical;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-success{
  display:none;margin-top:16px;padding:14px 16px;border-radius:12px;
  background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.35);font-size:13.8px;
}
.form-success.show{display:block;}
.form-error{
  display:none;margin-top:16px;padding:14px 16px;border-radius:12px;
  background:rgba(236,72,153,0.1);border:1px solid rgba(236,72,153,0.35);font-size:13.8px;
}
.form-error.show{display:block;}
.btn.is-loading{opacity:0.7;pointer-events:none;}

/* ===== FOOTER ===== */
footer{padding:70px 0 34px;border-top:1px solid var(--border);}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:44px;}
.footer-tagline{margin-top:16px;font-size:14px;color:var(--text-dim);max-width:340px;}
.footer-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dimmer);margin-bottom:16px;}
.footer-col a{display:block;padding:6px 0;font-size:14.5px;color:var(--text-dim);transition:color .2s;}
.footer-col a:hover{color:var(--text);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:12.5px;color:var(--text-dimmer);}

/* ===== FULL-BLEED VIDEO BAND ===== */
.band{position:relative;overflow:hidden;padding:0;background:linear-gradient(120deg,#140f30,#0a2030 55%,#2a0f26);display:flex;align-items:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:linear-gradient(140deg,#1a1440,#0b2438 55%,#3a1330);opacity:0;transition:opacity 1.2s var(--ease);}
.band video.loaded{opacity:.97;}
/* Type is left-aligned here, so the wash stays weighted left and the right half of
   the frame is left almost untouched. */
/* Measured, not eyeballed. Brightening the clip pushed the worst-case background under
   the left-hand copy to ~(142,138,130), which drops 17px text at 0.8 alpha to 3.2:1.
   The wash therefore holds a dark plateau across the whole text column (roughly 0–55%
   of the width) and only opens up to the right of it, where nothing is set. */
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,11,0.88) 0%,rgba(5,6,11,0.80) 40%,rgba(5,6,11,0.44) 78%,rgba(5,6,11,0.16) 100%),linear-gradient(180deg,rgba(5,6,11,0.14),rgba(5,6,11,0.32));}
.band .container{position:relative;z-index:2;padding-top:96px;padding-bottom:96px;}
.band h2{font-size:clamp(25px,3.5vw,42px);max-width:780px;line-height:1.16;text-shadow:0 2px 24px rgba(0,0,0,0.6);}
.band p{margin-top:18px;font-size:17px;color:var(--text);opacity:.88;max-width:620px;text-shadow:0 1px 16px rgba(0,0,0,0.55);}
.band .btn{margin-top:32px;}

/* ===== PROCESS VIDEO STRIP ===== */
.proc-strip{position:relative;height:180px;background:linear-gradient(120deg,#221a45,#102c3e 55%,#3a1330);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);margin-bottom:48px;}
.proc-strip video{width:100%;height:100%;object-fit:cover;background:linear-gradient(120deg,#221a45,#102c3e);opacity:0;transition:opacity 1.2s var(--ease);}
/* No type sits on this strip — it is pure texture, so it can run nearly clean. */
.proc-strip video.loaded{opacity:.96;}
.proc-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,11,0.12),rgba(5,6,11,0.58)),linear-gradient(90deg,rgba(139,92,246,0.16),rgba(34,211,238,0.07));}

/* ===== CONTACT BACKGROUND VIDEO ===== */
#contact{position:relative;overflow:hidden;}
#contact .bg-video{position:absolute;inset:0;z-index:0;}
#contact .bg-video video{width:100%;height:100%;object-fit:cover;background:#05060b;opacity:0;transition:opacity 1.6s var(--ease);}
#contact .bg-video video.loaded{opacity:.92;}
/* The eyebrow and form labels sit right under the radial's bright centre, so the inner
   stop cannot stay near-clear the way the hero's can — there the only thing over the
   footage is 38-72px white. */
#contact .bg-video::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 10%,rgba(5,6,11,0.56),rgba(5,6,11,0.72) 70%),linear-gradient(180deg,rgba(5,6,11,0.24),rgba(5,6,11,0.48));}
#contact>.container{position:relative;z-index:1;}
#contact .section-head h2,#contact .section-head p{text-shadow:0 2px 22px rgba(0,0,0,0.65);}
#contact .field input,#contact .field textarea{background:rgba(255,255,255,0.05);}
.form-note{margin-top:16px;font-size:13px;line-height:1.55;color:var(--text-dimmer);}

/* ===== responsive ===== */
@media(max-width:900px){
  /* The aurora blobs are 520–640px wide, so on a phone they cover the whole
     column and every paragraph sits on saturated colour. Damp them down and
     lift the dimmest text, or small grey copy loses contrast. */
  /* Measured: 13px labels sat at 3.2:1 where the cyan blob crossed them. Damp
     the blobs, add one flat scrim, lift the dimmest text — enough to clear AA
     (worst case ~5:1) without draining the colour out of the page. */
  .aurora span{opacity:0.3;}
  .aurora span:nth-child(4){opacity:0.1;}
  :root{--text-dim:rgba(244,245,249,0.8);--text-dimmer:rgba(244,245,249,0.72);}
  footer{background:linear-gradient(to bottom, rgba(5,6,11,0.35), rgba(5,6,11,0.82));}
  .stat-cell{background:rgba(8,9,16,0.88);}
  /* on desktop this cell is a white 3% lift; on a phone it sits on the blob and
     lifting it is exactly wrong — tint dark instead. */
  .case-stat{background:rgba(8,9,16,0.55);}
  /* scrim on main, not per-section: a per-section scrim leaves a hard step at
     every section boundary. main covers them all with no seam. */
  main{background:rgba(5,6,11,0.22);}
  nav.links{display:none;}
  .burger{display:flex;flex:none;}
  .nav-right .btn-primary{display:none;}
  /* the language switch stays in the header: on an 8-language site it must be
     discoverable without opening the menu. Compact form below. */
  .nav-right .lang-switch{display:block;}
  .nav-right .lang-btn{padding:8px 10px;font-size:13px;gap:5px;min-height:42px;}
  .burger{min-height:42px;min-width:42px;}
  .nav-right .lang-menu{right:-42px;}
  .nav-inner{padding:10px 10px 10px 18px;gap:10px;}
}
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1;aspect-ratio:16/10;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .cov-wrap{grid-template-columns:1fr;}
  .globe-frame{max-width:340px;margin:0 auto;}
  .case-grid{grid-template-columns:1fr;}
  .timeline{grid-template-columns:repeat(2,1fr);row-gap:36px;}
  .timeline::before{display:none;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .contact-wrap{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:720px){
  .brand small{display:none;}
  .nav-inner{padding:8px 8px 8px 16px;gap:8px;}
  section{padding:80px 0;}
  .hero{padding:150px 0 60px;}
  .svc-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .form-row-2{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr;gap:30px;}
  .case-wrap{padding:26px;}
}
@media(max-width:720px){
  .band .container{padding-top:64px;padding-bottom:64px;}
  .proc-strip{height:130px;margin-bottom:34px;}
}
@media(max-width:480px){
  h1,h2,h3,p{hyphens:auto;}
  .hero h1{font-size:clamp(30px,8.4vw,44px);}
  .section-head h2{font-size:clamp(24px,7vw,36px);}
}
@media(max-width:560px){
  .timeline{grid-template-columns:1fr;row-gap:26px;}
  .why-grid{grid-template-columns:1fr;}
  .tl-step{padding:0;}
}
/* Touch sizing and legibility floors. Small uppercase labels read fine on a
   desktop monitor and turn to grit on a phone; links need a real tap area. */
@media(max-width:900px){
  /* NB: this list named `.hero-visual .badge .b-label` until round 7 renamed the
     hero badge to `.hero-badge`. The selector then matched nothing and the label
     silently inherited 12.5px from `.hero-badge`, dropping back under the floor.
     Direct rule beats inheritance, so this wins regardless of block order. */
  .hero-badge .b-label,.info-row .lbl,.eyebrow,.stat-cell .lbl,
  .case-stat .lbl,.region-block h4,.footer-col h4,.footer-bottom p{font-size:13px;}
  .footer-col a{padding:11px 0;font-size:15px;}
  /* long German/Polish compounds break mid-word in narrow cells; hyphenate
     instead of splitting ("Expresszustel-lung", not "Expresszustellu ng") */
  .stat-cell .lbl,.case-stat .lbl,.tl-step h3,.why-card h3,.svc-card h3{hyphens:auto;-webkit-hyphens:auto;}
  .info-row{padding:18px 0;}
  .info-row .val{display:inline-block;padding:5px 0;}
  .info-row .val a,a.contact-link{display:inline-block;padding:9px 0;}
  .brand{padding:9px 0;}
  .drawer-panel a{padding:15px 6px;}
}
@media(max-width:400px){
  .brand{font-size:15px;}
  .container{padding-left:16px;padding-right:16px;}
  .case-wrap{padding:20px;}
  .case-stat{padding:16px;}
  .why-card{padding:24px 18px;}
  .form-card,.contact-info-card{padding:24px;}
}
/* grid children must be allowed to shrink, or long words widen the whole page */
.tl-step,.case-stat,.stat-cell,.why-card,.svc-card,.footer-col,.info-row,.form-card,.contact-info-card{min-width:0;}
.case-stat .lbl,.tl-step h3,.tl-step p,.info-row .val{overflow-wrap:anywhere;}
.why-card .num-lg{font-size:clamp(26px,7.4vw,34px);}
.drawer-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
.drawer-lang button{
  flex:1 1 27%;min-height:46px;padding:10px 8px;border-radius:12px;background:rgba(255,255,255,0.05);border:1px solid var(--border);
  color:var(--text-dim);font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;
}
.drawer-lang button.active{color:var(--text);background:rgba(139,92,246,0.18);border-color:var(--border-strong);}

/* mobile drawer */
.mobile-drawer{
  position:fixed;inset:0;z-index:150;background:rgba(5,6,11,0.75);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s, visibility .35s;
}
.mobile-drawer.open{opacity:1;visibility:visible;}
.drawer-panel{
  position:absolute;top:14px;right:14px;left:14px;padding:26px;
  /* same reasoning as `.lang-menu`: a menu is a surface, not a filter. The drawer sits
     over a 0.75 scrim so it was never as transparent as the language list, but it
     inherits the same 4.5%-white `.glass` wash and should read the same way. */
  background:linear-gradient(180deg, rgba(14,16,26,0.965), rgba(9,10,18,0.975));
  border:1px solid rgba(255,255,255,0.13);
  backdrop-filter:blur(34px) saturate(150%);
  -webkit-backdrop-filter:blur(34px) saturate(150%);
  max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-14px);transition:transform .35s var(--ease);
}
.mobile-drawer.open .drawer-panel{transform:translateY(0);}
.drawer-panel a{display:block;padding:13px 6px;font-size:17px;border-bottom:1px solid var(--border);}
/* the header CTA is hidden on phones, so the drawer has to carry it */
.drawer-panel a.drawer-cta{display:block;margin-top:20px;padding:15px 18px;text-align:center;border-bottom:none;font-size:16px;}
.drawer-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}

/* =====================================================================
   v2 — cinematic hero, centred composition, scroll choreography
   Appended last so it overrides the base sheet at equal specificity.
   ===================================================================== */

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:rgba(255,255,255,0.05);pointer-events:none;}
.scroll-progress i{display:block;height:100%;width:0;background:var(--grad);background-size:200% auto;
  box-shadow:0 0 14px rgba(139,92,246,0.75);animation:gradShift 8s ease infinite;}

/* ---------- HERO: full-bleed footage, centred type ---------- */
.hero{
  padding:170px 0 96px;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;overflow:hidden;
}
.hero>.container{position:relative;z-index:2;width:100%;}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(150deg,#1b1142 0%,#0a1c33 46%,#2b0f28 100%);}
.hero-bg video{
  position:absolute;top:50%;left:50%;width:100%;height:100%;
  object-fit:cover;transform:translate(-50%,-50%) scale(1.14);
  opacity:0;transition:opacity 1.6s var(--ease);will-change:transform;
}
.hero-bg video.loaded{opacity:.84;}
/* The scrim earns its keep only where type actually sits. Previously it opened at
   0.88 black across the whole top edge, which killed the footage exactly where the
   frame is most interesting; the headline is 38-72px white and needs almost none of
   it. Keep a soft pool behind the centre column, let the edges breathe. */
.hero-scrim{position:absolute;inset:0;background:
  radial-gradient(ellipse 78% 52% at 50% 52%, rgba(5,6,11,0.50), rgba(5,6,11,0.10) 72%, rgba(5,6,11,0) 100%),
  radial-gradient(ellipse 96% 70% at 50% 46%, rgba(5,6,11,0.04), rgba(5,6,11,0.52) 80%),
  linear-gradient(180deg, rgba(5,6,11,0.66) 0%, rgba(5,6,11,0.10) 22%, rgba(5,6,11,0.34) 64%, var(--bg) 100%);}
.hero-inner{display:block;max-width:960px;margin:0 auto;}
.hero h1{font-size:clamp(38px,5.6vw,72px);}
.hero .lead{font-size:18.5px;color:rgba(244,245,249,0.9);margin:24px auto 0;max-width:660px;
  text-shadow:0 1px 22px rgba(0,0,0,0.62);}
.hero .eyebrow{background:rgba(255,255,255,0.05);border:1px solid var(--border);
  color:rgba(244,245,249,0.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.hero-ctas{justify-content:center;margin-top:38px;}
.hero-badge{display:inline-flex;align-items:center;gap:11px;margin-top:30px;padding:10px 20px;
  border-radius:100px;font-size:13px;}
.hero-badge .b-dot{width:7px;height:7px;border-radius:50%;background:var(--grad);flex:none;
  box-shadow:0 0 0 4px rgba(139,92,246,0.16);animation:pulseDot 2.6s ease-in-out infinite;}
.hero-badge .b-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14.5px;}
.hero-badge .b-label{color:var(--text-dim);}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px rgba(139,92,246,0.16);}50%{box-shadow:0 0 0 8px rgba(139,92,246,0.04);}}
.hero h1,.hero .lead,.hero .eyebrow{text-wrap:balance;}
.stats-strip{margin-top:76px;position:relative;z-index:2;}
.stat-cell{background:rgba(8,9,16,0.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3;
  width:26px;height:42px;border:1px solid var(--border-strong);border-radius:14px;
  display:flex;justify-content:center;padding-top:8px;background:rgba(8,9,16,0.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.scroll-cue span{width:3px;height:8px;border-radius:2px;background:var(--grad);}
.scroll-cue span{animation:cueDrop 2s var(--ease) infinite;}
@keyframes cueDrop{0%{opacity:0;transform:translateY(0);}25%{opacity:1;}70%{opacity:1;transform:translateY(15px);}100%{opacity:0;transform:translateY(17px);}}

/* ---------- centred, proportional composition ---------- */
.section-head.center{max-width:780px;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:62px;}
.section-head.center p{margin-left:auto;margin-right:auto;max-width:640px;}
section{padding:132px 0;}

.svc-grid{gap:22px;}
/* Service cards keep a left rag: their copy runs 3-5 lines, and centring long
   body text next to a centred heading is what makes a grid look ragged. The
   short-copy .why-card grid below is centred instead. */
.svc-card{display:flex;flex-direction:column;position:relative;text-align:left;}
.svc-card p{margin-top:2px;}
/* The info card and the form sit in the same row: let the registered-entity
   block fall to the bottom so the shorter column fills its box instead of
   leaving a void under the text. */
.contact-info-card{display:flex;flex-direction:column;}
.contact-info-card .entity-block{margin-top:auto;}

.cov-wrap{grid-template-columns:1fr 1fr;gap:60px;}
.globe-frame{max-width:430px;margin:0 auto;
  background:radial-gradient(circle at 40% 35%, #241a4d, #05060b 70%);}
.cov-chips{justify-content:center;margin-top:22px;}
.region-block h4{text-align:center;}
.country-grid{justify-content:center;}

.case-grid{grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.case-video{background:linear-gradient(160deg,#3a1a45,#12203f 60%,#1a3a3a);}
.case-list li{text-align:left;}
.case-stat{text-align:center;}

.timeline{gap:20px;perspective:1000px;}
.timeline::before{display:none;}
/* ---------- TIMELINE RAIL ----------
   The rail reads as a route being drawn, not as a progress bar: a dim track, a bright
   gradient that grows with scroll, a travelling sheen inside that gradient, and a
   comet head pinned to the leading edge. Width is driven from the scroll handler. */
.tl-rail{position:absolute;top:25px;left:12.5%;right:12.5%;height:3px;border-radius:3px;z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,0.05),rgba(255,255,255,0.11),rgba(255,255,255,0.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);overflow:visible;}
.tl-fill{position:absolute;top:0;left:0;bottom:0;width:0;border-radius:3px;
  background:linear-gradient(90deg,#8b5cf6,#22d3ee 42%,#8b5cf6 68%,#f472b6);
  background-size:220% 100%;
  box-shadow:0 0 14px rgba(139,92,246,0.65), 0 0 34px rgba(34,211,238,0.28);
  animation:railFlow 6s linear infinite;
  transition:width .12s linear;}
@keyframes railFlow{from{background-position:0 0;}to{background-position:-220% 0;}}
/* comet head — only shows once the fill has actually started moving */
.tl-fill::after{content:"";display:none;position:absolute;right:-5px;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translateY(-50%);background:#e9f6ff;
  box-shadow:0 0 10px 2px rgba(255,255,255,0.85),0 0 26px 8px rgba(34,211,238,0.55),0 0 46px 16px rgba(139,92,246,0.32);
  animation:cometPulse 1.6s ease-in-out infinite;}
.tl-fill.go::after{display:block;}
@keyframes cometPulse{0%,100%{opacity:.85;transform:translateY(-50%) scale(1);}50%{opacity:1;transform:translateY(-50%) scale(1.28);}}

/* nodes light up as the fill sweeps past them (class added by the scroll handler) */
.tl-num{transition:background .55s var(--ease), border-color .55s var(--ease),
  box-shadow .55s var(--ease), transform .55s cubic-bezier(.16,.84,.28,1);}
.tl-num::before{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(139,92,246,0.55);opacity:0;transform:scale(.82);
  transition:opacity .5s var(--ease), transform .5s var(--ease);}
.tl-step .tl-num.lit{border-color:rgba(167,139,250,0.75);transform:scale(1.07);
  background:linear-gradient(135deg,rgba(139,92,246,0.5),rgba(34,211,238,0.28));
  box-shadow:0 0 0 1px rgba(167,139,250,0.35),0 10px 34px -8px rgba(139,92,246,0.75);}
.tl-num.lit::before{opacity:1;transform:scale(1);animation:nodeRing 2.4s var(--ease) infinite;}
@keyframes nodeRing{0%{opacity:.85;transform:scale(1);}70%{opacity:0;transform:scale(1.5);}100%{opacity:0;transform:scale(1.5);}}

.tl-step{text-align:center;display:flex;flex-direction:column;align-items:center;}
.tl-num{margin-left:auto;margin-right:auto;}
/* Alignment: headings wrap to one line in some languages and two in others, which used
   to push each column's paragraph to a different baseline and made the row look ragged.
   Reserving two lines of heading height locks every paragraph to the same start line;
   `balance`/`pretty` stop the last line from collapsing to a single orphan word. */
/* NB: no flex/grid here — `text-wrap:balance` does not apply to the anonymous box a
   flex container wraps its text in, and balancing is the whole point of the rule. */
.tl-step h3{text-wrap:balance;line-height:1.35;min-height:2.7em;margin-bottom:10px;}
.tl-step p{text-wrap:pretty;max-width:30ch;margin-left:auto;margin-right:auto;}

.why-grid{gap:20px;perspective:1000px;}
.why-card{text-align:center;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;}
.svc-grid{perspective:1200px;}

.contact-wrap{grid-template-columns:1fr 1fr;gap:30px;align-items:stretch;}
#contact .bg-video{background:linear-gradient(160deg,#0b1230,#05060b 60%,#1a1030);}

/* pointer-tracked glow on cards */
.svc-card::after,.why-card::after{content:"";position:absolute;inset:0;border-radius:inherit;
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,0.20), transparent 62%);}
.svc-card:hover::after,.why-card:hover::after{opacity:1;}

/* ---------- reveal choreography ---------- */
.reveal{transform:translateY(38px);}
.reveal[data-rv="up"]{opacity:0;transform:translateY(42px);}
.reveal[data-rv="up"].is-visible{opacity:1;transform:none;}

.stagger{perspective:1100px;}
.stagger > *{transform:translateY(48px) rotateX(-11deg) scale(.965);filter:blur(5px);transform-origin:50% 0%;
  transition:opacity .85s var(--ease), transform .95s var(--ease), filter .8s var(--ease);}
.stagger.is-visible > *{transform:none;filter:none;}
.stagger.is-visible > *:nth-child(1){transition-delay:.02s;}
.stagger.is-visible > *:nth-child(2){transition-delay:.09s;}
.stagger.is-visible > *:nth-child(3){transition-delay:.16s;}
.stagger.is-visible > *:nth-child(4){transition-delay:.23s;}
.stagger.is-visible > *:nth-child(5){transition-delay:.30s;}
.stagger.is-visible > *:nth-child(6){transition-delay:.37s;}
.stagger.is-visible > *:nth-child(7){transition-delay:.44s;}
.stagger.is-visible > *:nth-child(8){transition-delay:.51s;}
/* the rail is decorative, it must not be staggered like a card */
.timeline > .tl-rail{opacity:1 !important;transform:none !important;filter:none !important;transition:none;}

/* word-by-word headline reveal */
h1,.section-head h2,.band h2{perspective:900px;}
/* Deliberately slow. At 0.052s stagger and 0.8s travel the reveal was over before
   the eye caught it — it read as a load hiccup rather than as motion. Longer travel,
   wider stagger and more distance to cover make each word legible as it lands. */
.w{display:inline-block;max-width:100%;overflow-wrap:anywhere;hyphens:auto;
  opacity:0;transform:translateY(0.92em) rotateX(-78deg) scale(0.94);transform-origin:50% 100%;filter:blur(11px);
  transition:opacity 1.15s var(--ease), transform 1.25s cubic-bezier(.16,.84,.28,1), filter 1.05s var(--ease);
  transition-delay:var(--d,0s);}
.w.in{opacity:1;transform:none;filter:none;}
.gw{background:var(--grad);background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:gradShift 8s ease infinite;}

/* footage wipes in from the bottom edge */
[data-vfx]:not(.hero-bg) video{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s var(--ease), opacity 1.2s var(--ease);}
[data-vfx]:not(.hero-bg).vfx-in video{clip-path:inset(0 0 0 0);}

/* counters land with a small pop */
.num.pop{animation:numPop .5s var(--ease);}
@keyframes numPop{0%{transform:scale(.86);}60%{transform:scale(1.04);}100%{transform:scale(1);}}

/* country tags cascade */
.country-tag{opacity:0;transform:translateY(14px) scale(.94);
  transition:opacity .5s var(--ease), transform .55s var(--ease), background .3s, border-color .3s;}
.country-tag.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .cov-wrap,.case-grid,.contact-wrap{grid-template-columns:1fr;}
  .tl-rail{display:none;}
}
@media(max-width:900px){
  .hero{padding:132px 0 78px;}
  .hero .lead{font-size:16.5px;margin-top:20px;}
  .hero-ctas{margin-top:30px;}
  .hero-ctas .btn{flex:1 1 100%;}
  .hero-badge{margin-top:24px;padding:9px 16px;font-size:12.5px;gap:9px;}
  .stats-strip{margin-top:52px;}
  .scroll-cue{display:none;}
  section{padding:92px 0;}
  .section-head.center{margin-bottom:44px;}
  .hero-bg video.loaded{opacity:.70;}
  /* 3D and blur are expensive on phones and the depth reads as jitter on a
     small screen — keep the motion, drop the perspective and the filter. */
  .stagger > *{transform:translateY(30px);filter:none;}
  .w{transform:translateY(0.7em) scale(0.96);filter:none;}
  .svc-card::after,.why-card::after{display:none;}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(30px,8.4vw,40px);}
}

/* motion is decoration; if the visitor asked for less, everything lands static */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal[data-rv="up"],.stagger > *,.w,.country-tag{
    opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  [data-vfx] video{clip-path:none !important;}
  .hero-bg video{transform:translate(-50%,-50%) scale(1.02) !important;}
  .aurora span,.scroll-cue span,.hero-badge .b-dot,.ring{animation:none !important;}
  /* the header entrance is fill-mode:both, so killing the animation alone would freeze
     it on the hidden start frame — the properties have to be reset explicitly too */
  header.nav.nav-lit .nav-inner,header.nav.nav-lit .brand>span,header.nav.nav-lit .brand .dot,
  header.nav.nav-lit nav.links>a,header.nav.nav-lit .nav-right>*,header.nav.nav-lit .nav-inner::before,
  .tl-fill::after,.tl-num.lit::before{
    animation:none !important;opacity:1 !important;transform:none !important;filter:none !important;}
  html{scroll-behavior:auto;}
}