/* ═══════════════════════════════════════════════════════════════════════════
   2G Consulting — design system
   ---------------------------------------------------------------------------
   Built on the oceans-group / imodirect design language (see
   /opt/projects/_shared/design-library). Palette, not template: the design
   objects, the feeling and the motion are carried over; the page keeps 2G's own
   structure and content.

   THE ONE STRUCTURAL RULE
   The page alternates dark and light bands, and which one a section gets is not
   decoration — it encodes what the section is about:

     dark  bands = infrastructure and sovereignty   (hero, film, reach, podcast)
     light bands = advisory and people              (about, services, industries,
                                                     insights, references, contact)

   Every component below is written against SEMANTIC variables (--bg, --surface,
   --text, --muted, --line, --glass …). The band sets those variables; the
   components never know which theme they are in. That is what lets one card,
   one button and one eyebrow work in both without a second copy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Brand tokens ─────────────────────────────────────────────────────── */
:root{
  /* Navy surfaces — from the design library. Never pure black. */
  --navy:      #050D18;
  --navy-2:    #0A1526;
  --navy-3:    #101F38;

  /* 2G blue — the client's own accent, kept exactly. */
  --cyan:      #2EB5FF;
  --cyan-br:   #7FD4FF;
  --electric:  #1C7ED6;
  --cyan-deep: #0E5C9E;

  /* Paper surfaces */
  --paper:     #FFFFFF;
  --paper-2:   #F2F7FD;
  --paper-3:   #E3EDF8;

  /* Ink */
  --ink:       #0A0F1C;
  --ink-2:     #3B4A5F;
  --ink-3:     #6B7C93;

  --grad-brand: linear-gradient(135deg,#7FD4FF 0%,#2EB5FF 45%,#1C7ED6 100%);
  --grad-cta:   linear-gradient(135deg,#1C7ED6 0%,#2EB5FF 100%);

  --shell: 78rem;      /* content width */
  --gutter: 1.25rem;

  /* Legacy aliases — the admin panel and the API-rendered cards still emit the
     old token names. Mapped here so nothing has to be touched twice. */
  --pri:  var(--cyan);
  --prid: var(--electric);
  --dark: var(--ink);
  --mid:  var(--ink-3);
  --d3:   var(--ink-2);
  --lite: var(--paper-3);
  --bgs:  var(--paper-2);
  --bgl:  var(--paper-2);

  --ease: cubic-bezier(.23,1,.32,1);
}

/* ── 2. Bands — the theme mechanism ──────────────────────────────────────── */
.band{
  position:relative;
  background:var(--bg);
  color:var(--text);
  padding-block:clamp(4rem,9vw,7rem);
  overflow:clip;                      /* contains the ambient glows */
}
.band--dark{
  --bg:var(--navy);
  --surface:rgba(255,255,255,.045);
  --surface-2:var(--navy-2);
  --text:#EAF2FC;
  --muted:#93A7C4;
  --faint:#61748F;
  --line:rgba(126,178,232,.16);
  --line-strong:rgba(126,178,232,.32);
  --glass:rgba(255,255,255,.055);
  --glass-brd:rgba(126,178,232,.16);
  --accent:var(--cyan);
  --accent-ink:var(--cyan-br);
  --shadow:0 26px 60px -32px rgba(0,0,0,.85);
}
.band--light{
  --bg:var(--paper);
  --surface:var(--paper-2);
  --surface-2:var(--paper-3);
  --text:var(--ink);
  --muted:var(--ink-3);
  --faint:#96A5B8;
  --line:rgba(10,15,28,.10);
  --line-strong:rgba(10,15,28,.18);
  --glass:rgba(255,255,255,.72);
  --glass-brd:rgba(10,15,28,.08);
  --accent:var(--electric);
  --accent-ink:var(--electric);
  --shadow:0 24px 55px -32px rgba(10,25,50,.30);
}
.band--tint{ --bg:var(--paper-2); --surface:#fff; --surface-2:var(--paper-3); }
.band--flush{ padding-block:0; }
.band--tight{ padding-block:clamp(2.5rem,5vw,4rem); }

/* AURORA — near-white with soft coloured light blobs, modeled on the oc-ans.de
   light theme around the globe. Deliberately NOT a coloured slab: the base is
   the same white as the neighbouring bands, so there is no seam anywhere, and
   the colour lives only in diffuse blobs that fade out long before any edge. */
.band--aurora{
  --bg:#FAFCFF;
  --surface:#fff;
  --surface-2:var(--paper-2);
  --text:var(--ink);
  --muted:var(--ink-3);
  --faint:#8FA1B8;
  --line:rgba(10,15,28,.08);
  --line-strong:rgba(10,15,28,.16);
  --glass:rgba(255,255,255,.7);
  --glass-brd:rgba(10,15,28,.07);
  --accent:var(--electric);
  --accent-ink:var(--electric);
  --shadow:0 24px 55px -32px rgba(10,25,50,.22);
  background:var(--bg);
}
/* The blobs. Two layers, both heavily blurred and inset from the band edges so
   nothing can touch a boundary and draw a line. */
.band--aurora::before,.band--aurora::after{
  content:''; position:absolute; pointer-events:none; z-index:0;
  inset:-12% -8%;
  filter:blur(60px);
}
.band--aurora::before{
  background:
    radial-gradient(28% 34% at 16% 26%, rgba(46,181,255,.42),  transparent 70%),
    radial-gradient(24% 30% at 78% 18%, rgba(28,126,214,.34),  transparent 72%),
    radial-gradient(30% 32% at 62% 78%, rgba(127,212,255,.44), transparent 70%);
}
.band--aurora::after{
  background:
    radial-gradient(22% 26% at 38% 60%, rgba(96,168,255,.30), transparent 72%),
    radial-gradient(26% 24% at 92% 62%, rgba(46,181,255,.28), transparent 74%),
    radial-gradient(20% 24% at 6%  74%, rgba(28,126,214,.24), transparent 74%);
}

/* PHOTO BAND — a photographic background washed out and masked to nothing at
   both edges, so the band has no visible seam with its neighbours. Modeled on
   the cloud&more "in Numbers" treatment. */
.band--photo{ isolation:isolate; }
.band__photo{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.band__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:.32;
  /* fade to nothing top and bottom → no edge against the adjacent bands */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%);
}
/* Veil that lifts the photo so text stays readable and the whole band reads light. */
.band__photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--bg) 0%, rgba(255,255,255,.62) 22%, rgba(255,255,255,.52) 50%,
    rgba(255,255,255,.66) 78%, var(--bg) 100%);
}

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
@media(min-width:640px){ .shell{ --gutter:2rem; } }

/* Ambient glow — one per dark band, never more. */
.glow{
  position:absolute; pointer-events:none; border-radius:50%;
  filter:blur(90px); opacity:.5; z-index:0;
}
.glow--tl{ top:-14rem; left:-10rem; width:34rem; height:34rem; background:rgba(46,181,255,.16); }
.glow--br{ bottom:-16rem; right:-12rem; width:38rem; height:38rem; background:rgba(28,126,214,.16); }
.band--light .glow{ opacity:.5; filter:blur(80px); }
.band--light .glow--tl{ background:rgba(46,181,255,.14); }
.band--light .glow--br{ background:rgba(28,126,214,.10); }
/* Only the content wrapper is lifted above the glow. Deliberately NOT
   `.band > *`: that outranks the absolutely-positioned decorations (hero image,
   grid overlay) and drops them back into flow. */
.shell{ position:relative; z-index:1; }

/* No seams. Bands butt against each other with nothing drawn between them;
   where a colour actually changes, the band itself fades into its neighbour. */

/* ── 3. Base + type ──────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; scroll-padding-top:5.5rem; }
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--navy); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-size:1rem; line-height:1.6;
}
img,svg,video,canvas{ display:block; max-width:100%; }

/* Display face: heavy Jakarta, tight. */
.h1,.h2,.h3{ font-weight:800; letter-spacing:-.028em; line-height:1.06; color:var(--text); }
/* Sized so the longest line, "AI and operations.", stays unbroken in the hero
   column at every width: the column is 478px at 1024 and 588px from 1280 up,
   which caps the display size at about 55px and 69px respectively. */
.h1{ font-size:clamp(2.6rem,5.2vw,4.2rem); }
/* Phones: the headline's longest line is "AI and operations." and it has to stay
   on one line, so the display size follows the viewport instead of sitting on a
   2.6rem floor that no longer fits. */
@media(max-width:520px){ .h1{ font-size:clamp(1.9rem,7.9vw,2.6rem); } }
.h2{ font-size:clamp(2rem,4.4vw,3.15rem); line-height:1.1; }
.h3{ font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.25; letter-spacing:-.02em; }

.lede{ font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.68; color:var(--muted); }
.body{ color:var(--muted); line-height:1.72; }
.small{ font-size:.875rem; line-height:1.65; color:var(--muted); }

/* Utility face: monospace. Deliberate — this is an infrastructure story, and
   regions, coordinates and measurements belong in the instrument register.
   System stack, so it costs no network request. */
.mono{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.eyebrow{ display:inline-block; color:var(--accent-ink); margin-bottom:1rem; }
.band--light .eyebrow{ color:var(--electric); }

/* Gradient text — the library's headline accent. */
.gt{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.band--light .gt{ background:linear-gradient(135deg,#1C7ED6 0%,#2EB5FF 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Keyword highlight */
.kw{ color:var(--accent-ink); }
.band--light .kw{ color:var(--electric); }

/* Two-column split used by About, Film and Contact. */
.split{ display:grid; gap:3.5rem; align-items:center; }
@media(min-width:1024px){ .split{ grid-template-columns:1fr 1fr; gap:4rem; } }
.split--top{ align-items:start; }
.duo{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); }

.section-head{ max-width:44rem; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head .h2{ margin-bottom:1rem; }

/* ── 4. Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:.9rem; line-height:1;
  padding:.95rem 1.7rem; border-radius:.8rem; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-pri{ background:var(--grad-cta); color:#fff; box-shadow:0 18px 40px -18px rgba(28,126,214,.75); }
.btn-pri:hover{ box-shadow:0 26px 55px -18px rgba(28,126,214,.9); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.btn-quiet{ background:transparent; color:var(--accent-ink); padding:0; border:0; font-size:.85rem; }
.btn-quiet:hover{ transform:none; text-decoration:underline; }
.btn-lg{ padding:1.05rem 2.1rem; font-size:.95rem; }
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:.35rem;
}

/* ── 5. Cards ────────────────────────────────────────────────────────────── */
.card{
  position:relative; border-radius:1.25rem; padding:1.75rem;
  background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card--hover:hover{ transform:translateY(-5px); border-color:var(--accent); }
.band--light .card{ background:#fff; box-shadow:0 18px 44px -30px rgba(10,25,50,.35); }
.card__icon{
  width:2.9rem; height:2.9rem; border-radius:.85rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  color:var(--accent-ink);
}
.card__icon svg{ width:1.25rem; height:1.25rem; }
.card .h3{ margin-bottom:.55rem; }

/* Bullet list with accent dots */
.ticks{ display:grid; gap:.75rem; }
.ticks--2col{ grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.75rem 1.5rem; }
.tick{ display:flex; align-items:flex-start; gap:.7rem; font-size:.9rem; color:var(--muted); }
.tick::before{
  content:''; flex-shrink:0; width:.45rem; height:.45rem; margin-top:.55rem;
  border-radius:50%; background:var(--accent);
}

/* ── 6. Reveal on scroll ─────────────────────────────────────────────────── */
.rev{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rev.in{ opacity:1; transform:none; }
.d1{ transition-delay:.09s } .d2{ transition-delay:.18s } .d3{ transition-delay:.27s } .d4{ transition-delay:.36s }

/* ── 7. Navigation ───────────────────────────────────────────────────────── */
#navbar{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:rgba(5,13,24,.82);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(126,178,232,.14);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem; }
.nav__logo img{ height:2.6rem; width:auto; }
.nav__links{ display:none; align-items:center; gap:1.9rem; }
.nav__links a{
  font-size:.875rem; font-weight:500; color:#A9BCD6; text-decoration:none;
  transition:color .2s; position:relative; padding-block:.3rem;
}
.nav__links a:hover{ color:#fff; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--cyan); transition:right .3s var(--ease);
}
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:none; }
.nav__burger{
  display:inline-flex; padding:.55rem; border-radius:.7rem; border:1px solid rgba(126,178,232,.2);
  background:transparent; color:#fff; cursor:pointer; transition:background .2s;
}
.nav__burger:hover{ background:rgba(255,255,255,.08); }
.nav__burger svg{ width:1.4rem; height:1.4rem; }
@media(min-width:1024px){
  .nav__links,.nav__cta{ display:flex; }
  .nav__burger{ display:none; }
}
#mob{ display:none; border-top:1px solid rgba(126,178,232,.14); background:var(--navy-2); }
#mob.open{ display:block; }
#mob .shell{ display:flex; flex-direction:column; gap:.25rem; padding-block:.75rem 1.25rem; }
#mob a{
  padding:.85rem 1rem; border-radius:.7rem; font-size:.9rem; font-weight:500;
  color:#A9BCD6; text-decoration:none; transition:background .2s,color .2s;
}
#mob a:hover{ background:rgba(255,255,255,.06); color:#fff; }
#mob .btn{ margin-top:.5rem; }

/* ── 8. Hero ─────────────────────────────────────────────────────────────── */
.hero{
  position:relative; padding-top:clamp(8rem,14vw,11rem); padding-bottom:clamp(4rem,7vw,6rem);
  overflow:clip;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#050D18; }
.hero__bg img,.hero__bg video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center center;
}
/* The still sits ON TOP of the clip and fades away once the clip is genuinely
   running. That ordering matters: if anything at all goes wrong - the reveal
   never fires, a transition is throttled, the device refuses to autoplay - what
   stays on screen is the still, which is the state we want. It also physically
   covers the clip, so an iOS start-playback button cannot show through.
   The clip itself is never hidden, so nothing depends on a class arriving. */
.hero__bg video{ z-index:0; }
.hero__poster{ z-index:1; opacity:1; transition:opacity .9s var(--ease); }
.hero__poster.is-hidden{ opacity:0; }
/* iOS paints its own start-playback button over an inline clip it did not
   autoplay. Nothing here is meant to be operated, so take the controls away. */
.hero__bg video::-webkit-media-controls,
.hero__bg video::-webkit-media-controls-start-playback-button,
.hero__bg video::-webkit-media-controls-panel{
  display:none !important; -webkit-appearance:none; appearance:none; opacity:0;
}
/* The clip is a bright daylight shot, so it needs a heavy scrim: a flat navy
   base for legibility plus a directional wash that keeps the right side (where
   the glass cards sit) a little more open. */
.hero__bg::after{
  /* above both the still and the clip: giving the media a z-index of its own
     would otherwise lift it over this scrim and the headline loses contrast */
  content:''; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(105deg,rgba(4,10,20,.74) 0%,rgba(4,10,20,.62) 42%,rgba(6,26,52,.42) 72%,rgba(8,34,68,.34) 100%),
    linear-gradient(to bottom,rgba(5,13,24,.46) 0%,rgba(5,13,24,.10) 35%,rgba(5,13,24,.40) 100%);
}
/* Reduced motion → keep the poster still, drop the moving clip entirely. */
@media(prefers-reduced-motion:reduce){ .hero__bg video{ display:none !important; } }
.hero__grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(rgba(46,181,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(46,181,255,.05) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 100%);
}
.hero .shell{ position:relative; z-index:2; }
/* The clip is busier than a flat image — lift the supporting copy so it keeps
   its contrast over the moving background. */
.hero .lede{ color:rgba(255,255,255,.88); }
.hero .card .small{ color:rgba(255,255,255,.78); }
.hero .fact__lbl{ color:rgba(255,255,255,.68); }
.hero__cols{ display:grid; gap:3.5rem; align-items:center; }
@media(min-width:1024px){ .hero__cols{ grid-template-columns:1.05fr .95fr; gap:4rem; } }

.pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1rem; border-radius:999px;
  background:rgba(46,181,255,.12); border:1px solid rgba(46,181,255,.28);
  color:var(--cyan);
}
.pill__dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--cyan); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.55); opacity:.5 } }

.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.hero__facts{ display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:1.4rem 2.75rem; margin-top:2.75rem; }
.fact{ display:flex; align-items:center; gap:.75rem; }
.fact__ic{
  width:2.4rem; height:2.4rem; border-radius:.75rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(46,181,255,.12); border:1px solid rgba(46,181,255,.24); color:var(--cyan);
}
.fact__ic svg{ width:1.15rem; height:1.15rem; }
.fact__val{ font-size:1.4rem; font-weight:800; color:#fff; line-height:1; letter-spacing:-.02em; }
.fact__lbl{ display:block; margin-top:.4rem; color:rgba(255,255,255,.5); }

/* Hero side stack — offset glass cards */
.hero__side{ display:none; }
@media(min-width:1024px){ .hero__side{ display:grid; gap:1rem; } }
.hero__side .card{ padding:1.4rem 1.5rem; }
.hero__side .card:nth-child(even){ margin-left:2.5rem; }
.hero__side .card > div{ display:flex; align-items:flex-start; gap:1rem; }

/* ── 9. Marquee banner ───────────────────────────────────────────────────── */
/* The chips run directly on the section background — no plate, no rules. */
.banner{ padding-block:1.75rem; background:none; border:0; }
.banner__eyebrow{ text-align:center; color:var(--faint); margin-bottom:1rem; }
.banner__vp{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.banner__row{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
.banner:hover .banner__row,.banner:focus-within .banner__row{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.banner__group{ display:flex; align-items:center; gap:1rem; padding-right:1rem; list-style:none; }
.banner__item{
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
  padding:.6rem 1.1rem; border-radius:999px;
  border:1px solid var(--glass-brd); background:var(--glass);
  color:var(--text); font-size:.85rem; font-weight:600;
}
.banner__item svg{ width:1rem; height:1rem; color:var(--accent); flex-shrink:0; }
.banner--slow .banner__row{ animation-duration:60s; }
@media(prefers-reduced-motion:reduce){
  .banner__row{ animation:none; width:100%; justify-content:center; flex-wrap:wrap; }
  .banner__group[aria-hidden="true"]{ display:none; }
}

/* ── 10. Globe + film, side by side ──────────────────────────────────────── */
/* The film and the reach are one section in two columns: what we stand for on
   the left, where it actually runs on the right. */
/* Film and globe never sit beside each other: the section staggers instead.
   The film takes the left half with its copy on the right, the globe block
   mirrors that, so the two media run diagonally down the band and each one
   keeps a whole column to itself. */
.reach{ display:flex; flex-direction:column; gap:4.5rem; }
.reach__block{ width:100%; max-width:72rem; margin-inline:auto; }
.reach__copy{ margin-top:2rem; }
.reach__copy .h3{ margin-bottom:.75rem; }
.reach__kicker{ margin-bottom:.85rem; color:var(--accent-ink); }
@media(min-width:960px){
  .reach__block{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:4rem; align-items:center;
  }
  .reach__copy{ margin-top:0; }
  /* mirrored block: copy left, globe right, without reordering the markup */
  .reach__block--mirror > .globe-stage{ grid-column:2; grid-row:1; }
  .reach__block--mirror > .reach__copy{ grid-column:1; grid-row:1; }
}
.globe-stage{ position:relative; width:100%; aspect-ratio:1; max-width:30rem; margin-inline:auto; }
.globe-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.globe-pin{
  position:absolute; left:0; top:0; z-index:2; pointer-events:none;
  display:flex; align-items:center; gap:.5rem; white-space:nowrap;
  padding:.42rem .75rem; border-radius:.6rem;
  border:1px solid rgba(46,181,255,.45); background:rgba(5,13,24,.86);
  box-shadow:0 6px 22px -8px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#F2F8FF; opacity:0;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.82rem; font-weight:700; letter-spacing:.05em;
}
.globe-pin__flag{ font-size:1rem; line-height:1; }
@media(max-width:560px){
  .globe-pin{ font-size:.72rem; padding:.32rem .6rem; }
  .globe-pin__flag{ font-size:.85rem; }
}
.reach__nodes{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:2rem; }
.node{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem;
  border-radius:.8rem; border:1px solid var(--glass-brd); background:var(--glass);
}
.node__flag{ font-size:1.1rem; line-height:1; }
.node__name{ font-size:.85rem; font-weight:700; color:var(--text); }
.node__meta{ display:block; margin-top:.15rem; color:var(--faint); font-size:.7rem; }

/* ── 11. Brand film ──────────────────────────────────────────────────────── */
.film{ display:grid; gap:3rem; align-items:center; }
@media(min-width:1024px){ .film{ grid-template-columns:1fr 1fr; gap:4rem; } }
.film-frame{
  position:relative; border-radius:1.4rem; overflow:hidden; background:#000;
  border:1px solid rgba(46,181,255,.22);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.9);
}
.film-frame video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#000; }
.film-cover{
  position:absolute; inset:0; width:100%; margin:0; padding:0; border:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; cursor:pointer; transition:opacity .35s var(--ease);
}
.film-cover::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(5,13,24,.5) 0%,rgba(5,13,24,.05) 45%,rgba(5,13,24,.2) 100%);
}
.film-cover[hidden]{ display:none; }
.film-play{
  position:relative; width:5rem; height:5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(46,181,255,.2); border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 48px rgba(46,181,255,.5);
  transition:transform .3s var(--ease), background .3s;
}
.film-play svg{ width:1.9rem; height:1.9rem; color:#fff; margin-left:.22rem; }
.film-cover:hover .film-play{ transform:scale(1.09); background:rgba(46,181,255,.34); }
.film-dur,.film-tag{
  position:absolute; display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .6rem; border-radius:.5rem; line-height:1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.film-dur{
  right:.9rem; bottom:.9rem; background:rgba(5,13,24,.7);
  border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.92);
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
}
.film-dur svg{ width:.75rem; height:.75rem; opacity:.75; }
.film-tag{
  left:.9rem; top:.9rem; background:rgba(5,13,24,.62);
  border:1px solid rgba(46,181,255,.32); color:var(--cyan);
}

/* ── 12. Podcast ─────────────────────────────────────────────────────────── */
/* The episode rail. Was a 3-up grid; scrolls sideways now so the season can
   grow past three without the layout having an opinion about it. Three cards
   fit exactly at >=880px, one-and-a-peek below — the sliver of the next card
   is the affordance that says "there is more this way". */
.pod-railwrap{ position:relative; }
.pod-rail{
  display:flex; gap:1.5rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  /* Top pad clears the card's focus ring, bottom pad clears the scrollbar. */
  padding:.4rem .15rem 1.35rem;
  margin-inline:-.15rem;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--accent) 45%,transparent) transparent;
}
.pod-rail:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:1.25rem; }
.pod-rail::-webkit-scrollbar{ height:6px; }
.pod-rail::-webkit-scrollbar-track{ background:transparent; }
.pod-rail::-webkit-scrollbar-thumb{
  border-radius:999px; background:color-mix(in srgb,var(--accent) 38%,transparent);
}
.pod-rail::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--accent) 62%,transparent); }

/* Cards keep their own size instead of being squeezed by the flex line, and the
   line is deliberately a peek too short: whatever the width, the next card is
   half in view. That sliver is the affordance — arrows and fades only confirm
   what it already said. --pod-peek is how much of it stays visible. */
.pod-rail{ --pod-peek:3.25rem; }
.pod-card{
  position:relative; overflow:hidden; scroll-snap-align:start;
  flex:0 0 calc(100% - var(--pod-peek));
  /* Column so the body can fill the card; the description takes the slack, which
     lands every transport and meta row on the same baseline across the rail. */
  display:flex; flex-direction:column;
}
@media(min-width:600px){ .pod-card{ flex-basis:calc((100% - 1.5rem - var(--pod-peek))/2); } }
@media(min-width:880px){ .pod-card{ flex-basis:calc((100% - 3rem - var(--pod-peek))/3); } }

/* Edge fades: only drawn on the side that still has content off-screen, so a
   rail that fits entirely on screen shows none of this. */
.pod-railwrap::before,.pod-railwrap::after{
  content:""; position:absolute; top:0; bottom:1.35rem; width:3.5rem; z-index:2;
  pointer-events:none; opacity:0; transition:opacity .25s ease;
}
.pod-railwrap::before{ left:-.15rem; background:linear-gradient(90deg,var(--bg),transparent); }
.pod-railwrap::after{ right:-.15rem; background:linear-gradient(270deg,var(--bg),transparent); }
.pod-railwrap.can-prev::before,.pod-railwrap.can-next::after{ opacity:1; }

/* Arrows: pointer-only affordance. Touch has the swipe, keyboard has the rail
   itself in the tab order, so neither needs these. */
.pod-nav{
  position:absolute; top:calc(50% - .5rem); transform:translateY(-50%); z-index:3;
  display:none; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:50%; cursor:pointer;
  background:rgba(5,13,24,.82); color:#fff;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .2s,transform .2s,opacity .2s;
}
.pod-nav svg{ width:1.15rem; height:1.15rem; }
.pod-nav:hover{ background:color-mix(in srgb,var(--accent) 34%,rgba(5,13,24,.82)); transform:translateY(-50%) scale(1.08); }
.pod-nav--prev{ left:-.85rem; }
.pod-nav--next{ right:-.85rem; }
@media(hover:hover) and (pointer:fine) and (min-width:880px){
  .pod-railwrap.can-prev .pod-nav--prev,
  .pod-railwrap.can-next .pod-nav--next{ display:inline-flex; }
}
.pod-body{
  flex:1; display:flex; flex-direction:column;
  filter:blur(6px); opacity:.72; user-select:none; transition:filter .4s ease;
}
.pod-card:hover .pod-body{ filter:blur(4.5px); }
.pod-card--live{ border-color:color-mix(in srgb,var(--accent) 34%,transparent); }
.pod-card--live .pod-body,.pod-card--live:hover .pod-body{ filter:none; opacity:1; user-select:auto; }
.pod-ep{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; min-height:1.6rem;
  color:var(--accent-ink); margin-bottom:.85rem;
}
.pod-title{ margin-bottom:.6rem; }
.pod-desc{ flex:1; color:var(--muted); font-size:.875rem; line-height:1.65; margin-bottom:1.1rem; }
.pod-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .9rem; padding-top:.9rem;
  border-top:1px solid var(--line); color:var(--faint); font-size:.72rem; font-weight:600;
}
.pod-meta span{ display:inline-flex; align-items:center; gap:.35rem; }
/* Who you hear, under the title. It sits above .pod-desc on purpose: the
   description takes the slack, so this line may wrap at any rail width without
   moving the transport or the meta row out of line with the other cards. */
.pod-cast{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .85rem;
  margin:-.1rem 0 .8rem; color:var(--faint); font-size:.68rem; font-weight:600;
}
.pod-cast span{ display:inline-flex; align-items:center; gap:.35rem; }
.pod-cast svg{ width:.8rem; height:.8rem; }
.pod-meta svg{ width:.8rem; height:.8rem; }
.pod-live-badge{
  display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .5rem; border-radius:.4rem;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  font-size:.6rem; letter-spacing:.1em;
}
.pod-live-badge .dot,.pod-soon .dot{ width:.32rem; height:.32rem; border-radius:50%; background:var(--accent); flex-shrink:0; }
.pod-veil{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center,rgba(5,13,24,.3),rgba(5,13,24,.62)); pointer-events:none;
}
.pod-soon{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.05rem; border-radius:999px;
  background:rgba(5,13,24,.78); border:1px solid rgba(46,181,255,.42);
  box-shadow:0 0 28px rgba(46,181,255,.24);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-size:.7rem; letter-spacing:.16em;
}
.pod-wave{ display:inline-flex; align-items:flex-end; gap:3px; height:1.6rem; }
.pod-wave i{ display:block; width:3px; height:10px; border-radius:2px; background:var(--accent);
  opacity:.55; animation:podwave 1.5s ease-in-out infinite; }
/* Ruhehoehe oben: bei prefers-reduced-motion laeuft die Animation nicht und die
   Balken haetten sonst gar keine Hoehe. */
@keyframes podwave{ 0%,100%{ height:6px; opacity:.4 } 50%{ height:24px; opacity:.9 } }

/* ── Podcast teaser (About column) ───────────────────────────────────────────
   Sits where the decorative AI photo used to sit. Same footprint, but it now
   does a job: the photo became the cover art and the card points at the podcast
   band further down the page. */
.pod-teaser{
  position:relative; display:block; border-radius:1.35rem; overflow:hidden;
  box-shadow:0 30px 70px -35px rgba(10,25,50,.5);
  color:#fff; text-decoration:none;
}
.pod-teaser img{
  width:100%; height:20rem; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
/* Scrim: dark enough at the bottom to carry white type over any photo */
.pod-teaser::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(5,13,24,.94) 0%,rgba(5,13,24,.60) 44%,
                             rgba(5,13,24,.16) 100%);
}
.pod-teaser__head{
  /* right inset leaves room for the AI badge in the corner */
  position:absolute; z-index:2; top:1.15rem; left:1.35rem; right:9rem;
  display:flex; align-items:center; gap:.6rem;
}
.pod-teaser .pod-wave{ height:1.1rem; }
.pod-teaser .pod-wave i{ background:var(--cyan-br); }
.pod-teaser__label{ color:var(--cyan-br); font-size:.7rem; }
/* right inset keeps the copy clear of the play button */
.pod-teaser__body{ position:absolute; z-index:2; left:1.35rem; right:5.9rem; bottom:1.3rem; }
.pod-teaser__kick{ display:block; color:rgba(255,255,255,.6); font-size:.68rem;
  margin-bottom:.45rem; }
.pod-teaser__title{ display:block; font-size:1.3rem; font-weight:700; line-height:1.25;
  letter-spacing:-.01em; }
.pod-teaser__cta{ display:inline-block; margin-top:.8rem; font-size:.85rem; font-weight:600;
  color:var(--cyan-br); }
.pod-teaser__play{
  position:absolute; z-index:2; right:1.35rem; bottom:1.35rem;
  width:3.4rem; height:3.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(46,181,255,.22); border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 40px rgba(46,181,255,.45);
  transition:transform .3s var(--ease), background .3s;
}
.pod-teaser__play svg{ width:1.3rem; height:1.3rem; margin-left:.16rem; color:#fff; }
.pod-teaser:hover img{ transform:scale(1.04); }
.pod-teaser:hover .pod-teaser__play{ transform:scale(1.08); background:rgba(46,181,255,.36); }
@media(max-width:560px){
  .pod-teaser img{ height:16rem; }
  .pod-teaser__title{ font-size:1.15rem; }
  /* the badge is smaller here too, so the label can reclaim some room */
  .pod-teaser__head{ right:7rem; }
  .pod-teaser__label{ font-size:.6rem; letter-spacing:.1em; }
}

/* Audio transport */
.pod-player{ display:flex; align-items:center; gap:.85rem; margin:1.15rem 0 .3rem; }
.pod-pp{
  flex-shrink:0; width:2.75rem; height:2.75rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  color:var(--accent-ink); cursor:pointer;
  transition:transform .25s var(--ease), background .25s;
}
.pod-pp:hover{ transform:scale(1.08); background:color-mix(in srgb,var(--accent) 30%,transparent); }
.pod-pp svg{ width:1.1rem; height:1.1rem; }
.pod-pp .ic-pause{ display:none; }
.pod-pp[aria-pressed="true"] .ic-play{ display:none; }
.pod-pp[aria-pressed="true"] .ic-pause{ display:block; }
.pod-seekwrap{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.4rem; }
.pod-seek{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:3px; cursor:pointer; outline:none;
  background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--pct,0%),
             var(--line-strong) var(--pct,0%),var(--line-strong) 100%);
}
.pod-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%;
  background:var(--accent); border:none; box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent); cursor:pointer;
}
.pod-seek::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--accent); border:none;
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent); cursor:pointer;
}
.pod-time{
  display:flex; justify-content:space-between; color:var(--faint);
  font-size:.7rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1;
}

/* ── 13. Services flow ───────────────────────────────────────────────────── */
.svc-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media(min-width:640px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .svc-grid{ grid-template-columns:repeat(4,1fr); } }
.svc{ display:flex; flex-direction:column; gap:1rem; height:100%; }
.svc__step{ color:var(--faint); }

/* ── 14. Industries ──────────────────────────────────────────────────────── */
.ind-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media(min-width:640px){ .ind-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .ind-grid{ grid-template-columns:repeat(4,1fr); } }
.ind{
  position:relative; border-radius:1.35rem; overflow:hidden;
  border:1px solid var(--glass-brd); background:#fff;
  box-shadow:0 20px 48px -30px rgba(10,25,50,.4);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.ind:hover{ transform:translateY(-7px); box-shadow:0 34px 70px -30px rgba(10,25,50,.5); }
.ind__img{ position:relative; height:13.5rem; overflow:hidden; }
.ind__img img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.ind:hover .ind__img img{ transform:scale(1.07); }
.ind__img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,#fff 2%,rgba(255,255,255,.86) 18%,rgba(255,255,255,0) 52%,rgba(10,15,28,.30) 100%);
}
.ind__badge{
  position:absolute; left:1rem; top:1rem; z-index:2;
  padding:.35rem .7rem; border-radius:.5rem;
  background:rgba(5,13,24,.7); border:1px solid rgba(46,181,255,.32);
  color:var(--cyan); backdrop-filter:blur(6px);
}
.ind__body{ position:relative; z-index:2; padding:0 1.5rem 1.6rem; margin-top:-1.75rem; }
.ind__body .h3{ color:var(--ink); margin-bottom:.5rem; }
.ind__body p{ color:var(--ink-3); font-size:.85rem; line-height:1.65; }

/* ── 15. Facts ───────────────────────────────────────────────────────────── */
/* No frame, no dividers, no cards — the numbers sit directly on the band and
   the aurora background does the work. */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:3rem 2rem; }
@media(min-width:900px){ .stats{ grid-template-columns:repeat(4,1fr); gap:2.5rem; } }
.stat{ text-align:center; }
.stat__val{
  font-size:clamp(2.8rem,5.4vw,4.1rem); font-weight:800;
  color:var(--text); letter-spacing:-.045em; line-height:1;
}
.stat__val .gt{ display:inline-block; }
.stat__lbl{ margin-top:.9rem; color:var(--accent-ink); }
.stat__note{ margin-top:.5rem; font-size:.82rem; line-height:1.55; color:var(--muted); }

/* ── 15b. Partner card ───────────────────────────────────────────────────── */
.partner{
  display:grid; gap:2rem; align-items:center;
  padding:2.25rem; border-radius:1.5rem;
  border:1px solid var(--glass-brd); background:var(--glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
@media(min-width:820px){ .partner{ grid-template-columns:1fr auto; gap:3rem; } }
.partner__mark{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem;
  color:var(--accent-ink);
}
.partner__mark svg{ width:1.1rem; height:1.1rem; }
.partner .h3{ margin-bottom:.65rem; }
.partner p{ color:var(--muted); font-size:.95rem; line-height:1.7; max-width:44rem; }

/* ── 16. Forms ───────────────────────────────────────────────────────────── */
.field{ display:block; }
.field__label{ display:block; margin-bottom:.45rem; color:var(--ink-2); font-size:.78rem; font-weight:700; }
.finp{
  width:100%; padding:.8rem 1rem; border-radius:.7rem;
  border:1px solid var(--paper-3); background:#fff; color:var(--ink);
  font-family:inherit; font-size:.9rem; transition:border-color .2s, box-shadow .2s;
}
.finp::placeholder{ color:#A7B4C6; }
.finp:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(46,181,255,.18); }
textarea.finp{ resize:vertical; min-height:7rem; }
.form-note{ text-align:center; font-size:.85rem; font-weight:600; padding:.85rem; border-radius:.7rem; }
.form-note--ok{ background:#ECFDF3; color:#186B3E; border:1px solid #A9E5C1; }
.form-note--err{ background:#FEF2F2; color:#A62121; border:1px solid #F3B4B4; }
.hidden{ display:none !important; }

.contact-line{ display:flex; align-items:center; gap:1rem; }
.contact-line__ic{
  width:2.9rem; height:2.9rem; border-radius:.8rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#E9F4FF,#D6EAFF); color:var(--electric);
}
.contact-line__ic svg{ width:1.2rem; height:1.2rem; }
.contact-line__k{ font-size:.72rem; color:var(--ink-3); }
.contact-line__v{ font-weight:700; color:var(--ink); text-decoration:none; }
a.contact-line__v:hover{ color:var(--electric); }

/* ── 17. Closing band — partner + CTA ────────────────────────────────────── */
/* Same treatment as the facts band: near-white with soft blue blobs, no slab of
   colour. Partner note and CTA share the one band so nothing sits between them. */
.band--closing{ padding-block:0; }
.closing__partner{ padding-block:clamp(3.5rem,7vw,5rem) clamp(2rem,4vw,3rem); }
.closing__cta{ padding-block:clamp(2rem,4vw,3rem) clamp(3.5rem,7vw,5.5rem); }

.cta-band .shell{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.cta-band p{ color:var(--muted); font-size:1.05rem; margin-top:.6rem; }

/* ── Mobile: headings and copy centred ───────────────────────────────────────
   On a phone every band is one column, and left-aligned headings over a narrow
   measure leave a ragged edge. Headings and their descriptions centre; anything
   that is a list, a card or a form keeps its left edge, because centred bullet
   lists and centred form labels are hard to scan. */
@media(max-width:767px){
  .band{ text-align:center; }
  .band .card,.band .ind,.band .pod-teaser,.band .node,.band .fact,
  .band .ticks,.band .tick,.band .contact-line,.band .banner,
  .band form,.band .form-note,.band .empty-state{ text-align:left; }
  /* rows of buttons follow the heading they belong to */
  .hero__actions,.cta-band .shell{ justify-content:center; }
  .hero__facts{ justify-content:center; }
  .partner{ justify-items:center; }
  /* Tick lists keep their left edge but the block as a whole is centred, so a
     short list no longer hangs off to one side under a centred heading. */
  .band .ticks{ width:fit-content; max-width:100%; margin-inline:auto;
    justify-items:start; }
  /* ... but not inside a card: there the list belongs to the card's own left
     edge, not to a centred heading. */
  .band .card .ticks,.band .ind .ticks{ width:auto; margin-inline:0; }
  /* Photographic bands: the veil that keeps the desktop band light swallows the
     picture almost entirely on a phone, where the photo is scaled down. Let more
     of it through and lift the image itself. */
  .band__photo img{ opacity:.5; }
  .band__photo::after{
    background:linear-gradient(180deg,
      var(--bg) 0%, rgba(255,255,255,.44) 20%, rgba(255,255,255,.32) 50%,
      rgba(255,255,255,.48) 80%, var(--bg) 100%);
  }
}

/* ── AI disclosure badge ─────────────────────────────────────────────────────
   Every photographic and illustrative image on this site is AI generated, and
   says so. The badge sits inside the image frame, never over the copy, and is
   readable on both the dark and the light bands because it carries its own
   scrim. Not applied to the logo, the flag glyphs, client logos or the globe,
   none of which are generated imagery. */
.ai-badge{
  position:absolute; z-index:4; pointer-events:none;
  display:inline-flex; align-items:center; gap:.32rem;
  padding:.24rem .5rem .24rem .42rem; border-radius:.42rem;
  background:rgba(5,13,24,.7); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  color:rgba(255,255,255,.88); white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.ai-badge svg{ width:.78rem; height:.78rem; flex-shrink:0; opacity:.85; }
.ai-badge--tr{ top:.7rem; right:.7rem; }
.ai-badge--br{ bottom:.7rem; right:.7rem; }
.ai-badge--bl{ bottom:.7rem; left:.7rem; }
@media(max-width:560px){
  .ai-badge{ font-size:.55rem; padding:.2rem .42rem .2rem .34rem; }
  .ai-badge svg{ width:.68rem; height:.68rem; }
}

/* ── 18. Footer ──────────────────────────────────────────────────────────── */
.footer{ background:var(--navy); color:#93A7C4; padding-block:4rem 2rem; border-top:1px solid rgba(126,178,232,.14); }
.footer__cols{ display:grid; gap:2.5rem; grid-template-columns:1fr; margin-bottom:3rem; }
@media(min-width:640px){ .footer__cols{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .footer__cols{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer h4{ color:#EAF2FC; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer ul{ list-style:none; display:grid; gap:.6rem; }
.footer a{ color:#93A7C4; text-decoration:none; font-size:.875rem; transition:color .2s; }
.footer a:hover{ color:var(--cyan); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-top:1.75rem; border-top:1px solid rgba(126,178,232,.12); font-size:.8rem;
}

/* ── 19. Case-study detail overlay ───────────────────────────────────────── */
.mover{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:1.25rem;
  background:rgba(5,13,24,.8); backdrop-filter:blur(6px);
}
.mover.open{ display:flex; }
.mover__panel{
  width:100%; max-width:46rem; max-height:88vh; overflow:auto;
  background:#fff; border-radius:1.25rem; box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.mover__head{
  position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; gap:1rem;
  justify-content:space-between; padding:1.5rem; background:#fff; border-bottom:1px solid var(--paper-3);
}
.mover__x{
  flex-shrink:0; width:2.25rem; height:2.25rem; border-radius:.6rem; border:1px solid var(--paper-3);
  background:#fff; color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.mover__x:hover{ background:var(--paper-2); color:var(--ink); }

/* Markdown from the admin panel */
.mdc{ color:var(--ink-2); font-size:.925rem; line-height:1.75; }
.mdc h1,.mdc h2,.mdc h3{ color:var(--ink); font-weight:800; letter-spacing:-.02em; margin:1.4rem 0 .6rem; }
.mdc h1{ font-size:1.4rem } .mdc h2{ font-size:1.2rem } .mdc h3{ font-size:1.05rem }
.mdc p{ margin-bottom:.9rem; }
.mdc ul,.mdc ol{ margin:0 0 .9rem 1.2rem; display:grid; gap:.35rem; }
.mdc a{ color:var(--electric); text-decoration:underline; }
.mdc strong{ color:var(--ink); font-weight:700; }
.mdc code{ background:var(--paper-2); padding:.1rem .35rem; border-radius:.3rem; font-size:.85em; }
.mdc blockquote{ border-left:3px solid var(--cyan); padding-left:1rem; color:var(--ink-3); font-style:italic; }
.cs-clamp{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 20. API-rendered cards (case studies + references) ──────────────────── */
/* align-items:start so a long quote doesn't stretch its neighbour into a tall
   empty card — testimonial lengths vary a lot. */
.cs-grid,.ref-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; align-items:start; }
@media(min-width:768px){ .cs-grid,.ref-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .cs-grid,.ref-grid{ grid-template-columns:repeat(3,1fr); } }
.cs-tag{
  display:inline-block; margin-bottom:.75rem; padding:.3rem .7rem; border-radius:999px;
  background:rgba(46,181,255,.1); color:var(--electric);
}
.cs-metric{
  display:flex; align-items:flex-end; gap:.5rem; margin-bottom:1rem;
  padding:.85rem 1rem; border-radius:.8rem; background:var(--paper-2);
}
.cs-metric__v{ font-size:1.8rem; font-weight:800; color:var(--electric); line-height:1; letter-spacing:-.03em; }
.cs-metric__l{ font-size:.8rem; color:var(--ink-3); padding-bottom:.15rem; }
.cs-logo,.ref-logo{
  width:3.2rem; height:3.2rem; border-radius:.75rem; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--paper-2);
}
.cs-logo img,.ref-logo img{ max-width:100%; max-height:100%; object-fit:contain; padding:.25rem; }
.ref-quote{ border-left:2px solid var(--cyan); padding-left:1rem; font-style:italic; color:var(--ink-2); font-size:.9rem; line-height:1.7; }
.ref-name{ font-weight:700; color:var(--ink); font-size:.875rem; }
.ref-title{ font-size:.75rem; color:var(--ind-3,var(--ink-3)); }
.ref-industry{
  display:inline-block; margin-top:.35rem; padding:.15rem .55rem; border-radius:999px;
  background:rgba(46,181,255,.1); color:var(--electric); font-size:.7rem; font-weight:600;
}
.empty-state{ text-align:center; padding:4rem 1rem; }
.empty-state__ic{
  width:3.5rem; height:3.5rem; margin:0 auto 1rem; border-radius:1rem;
  border:2px dashed var(--paper-3); display:flex; align-items:center; justify-content:center; color:var(--ink-3);
}

/* ── 21. Misc ────────────────────────────────────────────────────────────── */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.spin{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rev{ opacity:1; transform:none; }
}