/* ==========================================================================
   RelAI — liquid glass theme
   ========================================================================== */

/* Palette is taken from the globe video: deep-space navy, one cyan accent,
   and the warm city-light orange used once (behind the contact section). */
:root {
  --bg: #050a18;
  --panel: #0b1428;
  --panel-2: #0f1b35;
  --line: rgba(150, 180, 230, 0.13);
  --line-strong: rgba(150, 180, 230, 0.26);
  --ink: #e8eef8;
  --muted: #9aaacb;
  --dim: #7385ab;
  --cyan: #4fe3ff;
  --cyan-ink: #04121f; /* text on cyan */
  --ember: #ff8a3d;

  --glass-fill: rgba(11, 20, 40, 0.62);
  --glass-edge: var(--line-strong);
  --glass-blur: blur(16px) saturate(150%);

  /* Shape rule: interactive controls are pills, panels 20px, inputs 12px. */
  --r-lg: 20px;
  --r-md: 12px;
  --page: min(1180px, calc(100% - 32px));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Exo 2", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

::selection { background: rgba(79, 227, 255, 0.28); color: #fff; }
html { scrollbar-color: #22345a var(--bg); color-scheme: dark; }
input, textarea { caret-color: var(--cyan); }

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

/* clip (not hidden) so the pinned hero's position: sticky keeps working */
html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.intro-playing { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }

/* ---------- Ambient backdrop (gives the glass something to refract) ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, #08112a 0%, var(--bg) 45%);
}
/* old violet orbs (scroll.html still has the markup) */
.orb { display: none; }

/* ---------- Liquid glass primitive ---------- */

/* Panels are solid navy with a hairline edge. Real blur is kept only where a panel
   sits over the moving globe (nav, hero tiles, pill buttons). Web approximation of
   "liquid glass", not Apple's material. */
.glass {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.glass--pill {
  background: var(--glass-fill);
  border-color: var(--line-strong);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
.glass--pill { border-radius: 999px; }
@media (prefers-reduced-transparency: reduce) {
  .glass--pill { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Chromium: real refraction through an SVG displacement filter */
.refract .liquid {
  -webkit-backdrop-filter: blur(3px) url(#liquid) blur(10px) saturate(180%);
          backdrop-filter: blur(3px) url(#liquid) blur(10px) saturate(180%);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font: 600 15px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.3s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--primary {
  color: var(--cyan-ink);
  background: var(--cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px -10px rgba(0, 0, 0, 0.7);
}
.btn--primary:hover { background: #7aebff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 24px -12px rgba(0, 0, 0, 0.8); }
.btn--glass { color: var(--ink); }
.btn--glass:hover { border-color: rgba(150, 180, 230, 0.45); }
.btn--small { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- Intro ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 0.9s ease, visibility 0.9s;
}
.intro__video {
  width: min(100vw, 100vh * 0.7375);
  height: auto;
  aspect-ratio: 1236 / 1676;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 55%, transparent 100%);
}
.intro__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #bfe9ff 25%, rgba(100, 140, 255, 0.4) 55%, transparent 80%);
  opacity: 0;
  pointer-events: none;
}
.intro--flash .intro__flash { animation: flash 0.9s ease-out forwards; }
@keyframes flash {
  0% { opacity: 0; transform: scale(0.6); }
  35% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.6); }
}
.intro--out { opacity: 0; visibility: hidden; }
.intro__skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 10px 20px;
  color: var(--ink);
  font: 500 14px var(--font-body);
  cursor: pointer;
}

/* ---------- Nav ---------- */

/* No bar: the logo mark top-left, the "Let's talk" button top-right. */
.nav-wrap {
  position: fixed;
  top: 20px;
  left: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.8s ease 0.6s, transform 0.8s var(--ease-out) 0.6s;
}
.is-ready .nav-wrap { opacity: 1; transform: none; }
.site-logo,
.nav-cta { pointer-events: auto; }
/* "Let's talk": the gradient-fill pill from the client's reference sheet */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 18px 0 24px;
  border-radius: 999px;
  color: #fff;
  font: 600 15px/1 var(--font-body);
  white-space: nowrap;
  background: linear-gradient(100deg, #4fc8ff 0%, #6a82ff 50%, #9a5cff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 24px rgba(106, 130, 255, 0.55), 0 0 56px rgba(154, 92, 255, 0.25);
  transition: filter 0.25s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.nav-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transition: transform 0.3s var(--ease-out); }
.nav-cta:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 32px rgba(106, 130, 255, 0.75), 0 0 76px rgba(154, 92, 255, 0.35); }
.nav-cta:hover svg { transform: translate(2px, -2px); }
.nav-cta:active { transform: scale(0.97); }
.nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.site-logo { display: block; border-radius: 12px; transition: transform 0.3s var(--ease-out); }
.site-logo:hover { transform: scale(1.06); }
.site-logo img { width: 44px; height: auto; filter: drop-shadow(0 4px 14px rgba(5, 10, 24, 0.85)); }

/* Logo glitch (after the client's GlItCHs.mp4). Every layer is the logo itself:
   slices of it jump sideways, red/cyan copies of it split apart, and the blocky
   "8888" corruption is drawn only inside the logo's own shape (masked by it).
   Nothing is drawn around the logo. main.js drives it; at rest all layers hide. */
.glitch { position: relative; display: block; isolation: isolate; }
.glitch__base { position: relative; z-index: 1; }
.glitch__slice,
.glitch__ch,
.glitch__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.glitch__slice { z-index: 2; }
.glitch__ch {
  z-index: 3;
  mix-blend-mode: screen;
  -webkit-mask: url(assets/relai-logo.png) center / contain no-repeat;
          mask: url(assets/relai-logo.png) center / contain no-repeat;
}
.glitch__ch--r { background: #ff3d5a; }
.glitch__ch--c { background: #4fe3ff; }
.glitch__noise {
  z-index: 4;
  -webkit-mask: url(assets/relai-logo.png) center / contain no-repeat;
          mask: url(assets/relai-logo.png) center / contain no-repeat;
}
.glitch.is-glitching .glitch__slice,
.glitch.is-glitching .glitch__ch,
.glitch.is-glitching .glitch__noise { opacity: 1; }
.glitch.is-glitching .glitch__base { filter: drop-shadow(0 4px 14px rgba(5, 10, 24, 0.85)) contrast(1.25) saturate(1.4); }

/* ---------- Hero ---------- */

/* Hero + services are one long scroll. The globe canvas and its shade stick to the screen
   (sticky, with a negative margin so they take no space) while the intro and then each
   service flow up over them. main.js scrubs the video and fades the text by position. */
.hero-track { position: relative; }
.hero {
  --p: 0; /* 0→1 as the headline and buttons clear away */
  --g: 0; /* 0→1 across the whole globe video */
  position: relative;
  overflow: clip;
}
.hero__globe,
.hero__shade {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  pointer-events: none;
}
.hero__globe { max-width: none; opacity: 0; transition: opacity 1.4s ease; }
.is-ready .hero__globe { opacity: 1; }
/* darkens the middle behind the headline at first; once the services start flowing,
   the left side darkens instead so their words stay readable over the globe */
.hero__shade {
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(5, 10, 24, calc(0.62 * (1 - var(--p)))) 0%, transparent 100%),
    linear-gradient(90deg, rgba(5, 10, 24, calc(0.8 * var(--p))) 0%, rgba(5, 10, 24, calc(0.45 * var(--p))) 42%, transparent 68%),
    linear-gradient(180deg, rgba(5, 10, 24, 0.6) 0%, transparent 18%, transparent 80%, var(--bg) 100%);
}
.hero__intro {
  position: relative;
  z-index: 2;
  min-height: max(100vh, 640px);
  min-height: max(100svh, 640px);
  display: grid;
  place-items: center;
  padding: 110px 16px 80px;
}
.hero__stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(calc(var(--p) * -60px)) scale(calc(1 - var(--p) * 0.12));
  opacity: calc(1 - var(--p));
}
.hero__title {
  font-size: clamp(68px, 10vw, 136px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--ink);
  text-shadow: 0 8px 40px rgba(5, 10, 24, 0.85);
}
.hero__title span { color: var(--cyan); }
.hero__tagline {
  margin-top: 10px;
  font: 500 clamp(20px, 2.4vw, 30px) var(--font-display);
  letter-spacing: -0.01em;
  color: #cfdaf0;
  text-shadow: 0 2px 20px rgba(5, 10, 24, 0.95);
}
.hero__lead {
  max-width: 520px;
  margin-top: 16px;
  color: #c9d4f2;
  font-size: 16px;
  text-shadow: 0 2px 18px rgba(5, 2, 13, 0.95);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.hero__title,
.hero__tagline,
.hero__lead,
.hero__ctas {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.is-ready .hero__title { opacity: 1; transform: none; transition-delay: 0.35s; }
.is-ready .hero__tagline { opacity: 1; transform: none; transition-delay: 0.5s; }
.is-ready .hero__lead { opacity: 1; transform: none; transition-delay: 0.65s; }
.is-ready .hero__ctas { opacity: 1; transform: none; transition-delay: 0.8s; }


/* ---------- Hero service buttons (pills, styled after the client's reference sheet) ---------- */

.tiles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tile {
  --tx: 0px;
  --ty: 0px;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 232px;
  height: 62px;
  padding: 0 22px 0 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  color: #fff;
  font: 600 16px/1 var(--font-body);
  letter-spacing: 0.005em;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(0.85);
  transition: opacity 0.8s ease, transform 1s var(--ease-out), filter 0.25s ease, box-shadow 0.3s ease;
}
.tile--tl { left: 7%; top: 25%; --tx: 120px; --ty: 60px; }
.tile--tr { right: 7%; top: 25%; --tx: -120px; --ty: 60px; }
.tile--bl { left: 7%; top: 66%; --tx: 120px; --ty: -60px; }
.tile--br { right: 7%; top: 66%; --tx: -120px; --ty: -60px; }
.is-ready .tile {
  opacity: calc(1 - var(--p) * 1.2);
  transform: translate(calc(var(--tx) * var(--p) * 1.5), calc(var(--ty) * var(--p) * 1.5)) scale(calc(1 - var(--p) * 0.2));
}
.is-ready .tile--tl { transition-delay: 0.7s; }
.is-ready .tile--tr { transition-delay: 0.8s; }
.is-ready .tile--bl { transition-delay: 0.9s; }
.is-ready .tile--br { transition-delay: 1s; }
.is-settled .tile { transition-delay: 0s !important; transition-duration: 0.15s, 0.15s, 0.25s, 0.3s; }
.tile:hover { filter: brightness(1.15); }
.tile:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.tile__label { position: relative; }
.tile__icon { position: relative; display: grid; place-items: center; }
.tile__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* AI Services: gradient fill */
.tile--gradient {
  background: linear-gradient(100deg, #4fc8ff 0%, #6a82ff 50%, #9a5cff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 26px rgba(106, 130, 255, 0.55), 0 0 60px rgba(154, 92, 255, 0.25);
}
.tile--gradient:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 34px rgba(106, 130, 255, 0.75), 0 0 80px rgba(154, 92, 255, 0.35); }

/* Website Design: rainbow outline */
.tile--rainbow {
  background:
    linear-gradient(rgba(6, 10, 24, 0.82), rgba(6, 10, 24, 0.82)) padding-box,
    linear-gradient(90deg, #4fe3ff 0%, #ff6ad5 55%, #ffb24d 100%) border-box;
  box-shadow: 0 0 22px rgba(255, 106, 213, 0.22), 0 0 40px rgba(79, 227, 255, 0.12);
}
.tile--rainbow .tile__icon { color: #ff7fc4; }
.tile--rainbow:hover { box-shadow: 0 0 28px rgba(255, 106, 213, 0.38), 0 0 50px rgba(79, 227, 255, 0.2); }

/* Marketing: frosted glass */
.tile--frost {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border-color: rgba(230, 236, 255, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -10px 18px -12px rgba(255, 255, 255, 0.2), 0 0 24px rgba(200, 215, 255, 0.18);
}
.tile--frost .tile__icon { color: #e3d2ff; }

/* IT Support: gold outline */
.tile--gold {
  background: rgba(12, 9, 4, 0.7);
  border-color: #e3a84f;
  box-shadow: 0 0 20px rgba(227, 168, 79, 0.42), inset 0 0 14px rgba(227, 168, 79, 0.14);
}
.tile--gold .tile__icon { color: #f2b766; }
.tile--gold:hover { box-shadow: 0 0 28px rgba(227, 168, 79, 0.6), inset 0 0 16px rgba(227, 168, 79, 0.2); }

@media (prefers-reduced-transparency: reduce) {
  .tile--frost { background: #1a2340; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* ---------- Sections ---------- */

.section { width: var(--page); margin: 0 auto; padding: 120px 0; }
.section__head { max-width: 720px; margin: 0 0 56px; }
h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
h3 { font-weight: 600; letter-spacing: -0.01em; }
.section__lead { margin-top: 18px; max-width: 60ch; color: var(--muted); font-size: 18px; }
.grad { color: var(--cyan); }

/* One entrance motion, from a nearly-visible start, eased out. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* Services as words flowing over the globe. --d is the block's signed distance from the
   middle of the screen (-1 above .. 1 below) and --v its visibility; both set by main.js. */
.flows { position: relative; z-index: 2; padding-bottom: 20vh; }
.flow {
  --d: 0;
  --v: 1;
  width: var(--page);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: var(--v);
  scroll-margin-top: 0;
}
.flow > * { max-width: 620px; transform: translateY(calc(var(--d) * 70px)); }
.flow h2,
.flow h3 {
  font-size: clamp(40px, 5.6vw, 78px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 6px 34px rgba(5, 10, 24, 0.9);
}
.flow--head h2 { font-size: clamp(36px, 4.6vw, 64px); }
.flow p {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(17px, 1.4vw, 20px);
  color: #cdd8ef;
  text-shadow: 0 2px 18px rgba(5, 10, 24, 0.95);
}
.flow h3 + p { transform: translateY(calc(var(--d) * 110px)); }
.flow__list {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 40px;
  transform: none;
}
/* each word drifts at its own speed, so the list ripples as it passes */
.flow__list li {
  --k: 0;
  font: 500 16px var(--font-body);
  color: #e3eaf8;
  text-shadow: 0 2px 14px rgba(5, 10, 24, 0.95);
  transform: translateY(calc(var(--d) * (140px + var(--k) * 26px)));
}
.flow__list li:nth-child(2) { --k: 1; }
.flow__list li:nth-child(3) { --k: 2; }
.flow__list li:nth-child(4) { --k: 3; }
.flow__list li:nth-child(5) { --k: 4; }
.flow__list li:nth-child(6) { --k: 5; }
/* Process: a connected timeline rather than another row of cards */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: 34px; }
.steps::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--line-strong) 45%, var(--line) 100%);
}
.step { position: relative; }
.step::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--cyan);
}
.step__num { display: block; font: 600 13px var(--font-body); font-variant-numeric: tabular-nums; color: var(--dim); letter-spacing: 0.06em; margin-bottom: 12px; }
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; max-width: 32ch; }

/* About */
.about { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.about__copy p { margin-top: 18px; max-width: 58ch; color: var(--muted); font-size: 17px; }
.about__copy h2 + p { margin-top: 24px; }
.about__panel { padding: 36px 36px 20px; display: grid; gap: 20px; justify-items: start; }
.about__logo { width: 72px; height: auto; }
.pillars { display: grid; width: 100%; }
.pillars li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.pillars b { font: 600 18px var(--font-display); letter-spacing: -0.01em; }
.pillars span { color: var(--muted); font-size: 15px; }

/* Contact: the one warm moment, echoing the globe's city lights */
.contact__card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; padding: 56px; overflow: hidden; }
.contact__card::before {
  content: "";
  position: absolute;
  inset: auto auto -40% -20%;
  width: 70%;
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 61, 0.16) 0%, rgba(255, 138, 61, 0.05) 40%, transparent 70%);
  pointer-events: none;
}
.contact__intro p { margin-top: 16px; max-width: 42ch; color: var(--muted); font-size: 17px; }
.contact__ways { display: grid; gap: 14px; align-content: center; }
.way {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: rgba(3, 8, 20, 0.45);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.3s var(--ease-out);
}
.way:hover { border-color: var(--cyan); background: rgba(79, 227, 255, 0.06); transform: translateY(-1px); }
.way:active { transform: scale(0.99); }
.way__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(79, 227, 255, 0.12);
}
.way__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.way__text { display: grid; gap: 4px; min-width: 0; }
.way__text small { font-size: 13.5px; color: var(--muted); }
.way__text b {
  font: 600 clamp(17px, 2vw, 22px) var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Footer */
.footer {
  width: var(--page);
  margin: 0 auto;
  padding: 36px 0 48px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--dim);
  font-size: 14px;
}
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img { width: 30px; height: auto; }
.footer__brand b { display: block; font: 600 18px var(--font-display); color: var(--ink); }
.footer__brand b span { color: var(--cyan); }
.footer__brand small { color: var(--dim); }
.footer__tag { font-family: var(--font-display); color: var(--muted); }
.footer__link { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; }
.footer__link:hover { color: var(--cyan); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .tile--tl, .tile--bl { left: 3%; }
  .tile--tr, .tile--br { right: 3%; }
}

@media (max-width: 900px) {
  /* phones/tablets: intro stacks normally; the services still flow over the sticky globe */
  .hero__intro { display: block; min-height: 0; padding: 110px 16px 48px; }
  .hero__globe {
    -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 20%, #000 80%, transparent 96%);
            mask-image: linear-gradient(180deg, transparent 4%, #000 20%, #000 80%, transparent 96%);
  }
  .hero__stage { transform: none; opacity: 1; }
  .flow { width: auto; padding: 0 20px; min-height: 92svh; }
  .flow__list { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .flow__list li { font-size: 14.5px; }
  .is-ready .tile { opacity: 1; transform: none; }
  .tiles {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 170px));
    justify-content: center;
    gap: 18px 14px;
    margin-top: 44px;
  }
  .tile { position: relative; left: auto; right: auto; top: auto; width: 100%; min-width: 0; height: 52px; padding: 0 16px 0 18px; gap: 10px; font-size: 14px; }
  .tile__icon svg { width: 20px; height: 20px; }
  /* timeline turns vertical: line runs down the left edge */
  .steps { grid-template-columns: 1fr; gap: 32px; padding: 0 0 0 30px; }
  .steps::before { top: 6px; bottom: 6px; left: 5px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--cyan), var(--line) 80%); }
  .step::before { top: 3px; left: -30px; }
  .about, .contact__card { grid-template-columns: 1fr; }
  .about { gap: 40px; }
  .contact__card { padding: 32px 24px; gap: 32px; }
}

@media (max-width: 600px) {
  .nav-wrap { top: 14px; left: 16px; right: 16px; }
  .site-logo img { width: 38px; }
  .nav-cta { height: 42px; padding: 0 14px 0 18px; gap: 9px; font-size: 14px; }
  .nav-cta svg { width: 18px; height: 18px; }
  .section { padding: 80px 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}