/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --color-bg: #141936;
  --color-text: #f4f1ff;
  --color-muted: #9aa1c8;
  --color-accent: #4ee6d2;
  --color-subtle: #7b82ac;
  --color-slogan: #8f9cae;
  --color-nav: #e8e9ef;

  --font-display: "Russo One", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-ui: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
}

a {
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* In-page links land a little below the top edge */
section[id] {
  scroll-margin-top: 24px;
}

/* Sections receive focus after a link jump (for screen readers); no ring needed */
[tabindex="-1"]:focus {
  outline: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  max-width: 1200px;
  height: 64px;
  margin: 24px auto 0;
  padding: 0 32px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  background: rgba(8, 10, 15, 0.4);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-wolf {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: auto;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
}

.logo-wordmark {
  display: block;
  width: 150px;
  height: auto;
}

.logo-slogan {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 7.1px;
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: var(--color-slogan);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex: 1;
}

.nav-links a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-nav);
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--color-muted);
}

.nav-btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1px solid rgba(123, 140, 255, 0.6);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #d8dfff 45%, #7b8cff 100%);
  box-shadow:
    0 0 20px rgba(42, 60, 222, 0.42),
    0 0 15px rgba(42, 60, 222, 0.47);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  color: #0b0e14;
}

.nav-btn-custom:hover {
  border-color: var(--color-text);
  background: #c2bdd7;
  box-shadow: none;
}

.nav-toggle {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* line the bars up with the header's inner edge */
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-nav);
  cursor: pointer;
}

.nav-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.nav-toggle span:nth-child(1) {
  top: 15px;
}
.nav-toggle span:nth-child(2) {
  top: 21px;
}
.nav-toggle span:nth-child(3) {
  top: 27px;
}

header.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
header.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
header.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .logo {
    gap: 10px;
  }
  .logo-wolf {
    width: 38px;
  }
  .logo-wordmark {
    width: 145px;
  }
  .logo-slogan {
    font-size: 7px;
  }
}

@media (max-width: 768px) {
  header {
    max-width: calc(100% - 40px);
    padding: 10px 20px;
  }

  header nav {
    gap: 12px;
  }

  .logo {
    gap: 8px;
  }
  .logo-wolf {
    width: 30px;
  }

  .logo-wordmark {
    width: 125px;
  }
  .logo-slogan {
    font-size: 6px;
  }

  .nav-links {
    gap: 14px;
  }

  .nav-links a {
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .logo {
    gap: 10px;
  }

  .logo-wolf {
    width: 28px;
  }

  .logo-text {
    width: 100px;
    gap: 4px;
  }

  .logo-wordmark {
    width: 100%;
  }

  .logo-slogan {
    font-size: 3.5px;
    letter-spacing: 0.3px;
    text-align: center;
  }

  .nav-btn-custom {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  /* The links become a dropdown under the header */
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    background: #0e1230; /* solid: backdrop blur doesn't work inside the blurred header */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s linear 0.18s;
  }

  header.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav-links a {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 16px;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-toggle span {
    transition: none;
  }
}

@media (max-width: 480px) {
  header {
    margin-top: 10px;
    padding: 8px 14px;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100vh - 100px);
  padding: 100px 0 80px;
}

.hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px; /* matches the header so the headline lines up with the logo */
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  flex: 1;
  max-width: 900px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 60px;
  line-height: 70.85px;
  letter-spacing: -0.011em;
  white-space: nowrap;
  color: var(--color-text);
}

.rubik-meaning {
  display: inline-block;
  margin-top: -0.0735em;
  padding-right: 0.1176em;
  padding-bottom: 0.1765em;
  font-family: "Rubik Doodle Shadow", cursive;
  font-weight: 400; /* keep at 400 so the hollow hatch lines render */
  font-size: 1.133em;
  letter-spacing: -0.0097em;
  vertical-align: middle;
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    #6c8cf5 50%,
    #a177e8 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.description {
  max-width: 720px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18.1px;
  line-height: 29.8px;
  color: var(--color-muted);
}

.wordmark-img {
  position: relative;
  top: 1px;
  height: 13px;
  width: auto;
  margin-right: 2px;
  vertical-align: baseline;
}

.slogan-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(154, 161, 200, 0.25);
  border-radius: 50px;
}

.wolf-icon {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  object-fit: contain;
}

.slogan-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--color-slogan);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

/* Image buttons: the hover image replaces the default one */
.btn-asset-wrap {
  display: inline-block;
  line-height: 0;
  cursor: pointer;
}

.btn-asset-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-height: 48px;
  pointer-events: none;
}

.btn-asset-wrap .btn-hover {
  display: none;
}

.btn-asset-wrap:is(:hover, :focus-visible) .btn-default {
  display: none;
}

.btn-asset-wrap:is(:hover, :focus-visible) .btn-hover {
  display: block;
}

.hero-artwork {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 45%;
  margin-top: -320px;
  margin-right: -160px;
}

.artwork-img {
  display: block;
  width: 600px;
  max-width: none; /* let it grow past its column */
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .hero {
    min-height: 0;
    padding: 48px 0 64px;
  }

  .hero-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .hero-content {
    max-width: 100%;
  }

  /* colored lines are desktop-only */
  .hero-artwork {
    display: none;
  }
}

@media (max-width: 768px) {
  .btn-asset-wrap img {
    max-height: 44px;
  }

  .hero {
    padding: 32px 0 48px;
  }

  .hero-grid {
    gap: 36px;
    padding: 0 20px;
  }

  .hero h1 {
    /* biggest size that keeps the longest line on screen */
    font-size: clamp(24px, calc((100vw - 40px) / 11), 44px);
    line-height: 1.18;
  }

  .description {
    max-width: 100%;
    font-size: 14px;
  }

  .slogan-badge {
    padding: 6px 14px;
  }

  .wolf-icon {
    width: 20px;
    height: 20px;
  }

  .slogan-text {
    font-size: 12px;
  }

  /* Both buttons stay on one row and shrink together (214 : 190 is their natural ratio) */
  .hero-actions {
    width: 100%;
    gap: 12px;
  }

  .btn-asset-wrap {
    min-width: 0;
  }

  .btn-asset-wrap:nth-child(1) {
    flex: 214 1 0;
    max-width: 214px;
  }

  .btn-asset-wrap:nth-child(2) {
    flex: 190 1 0;
    max-width: 190px;
  }

  .btn-asset-wrap img {
    width: 100%;
    max-height: none;
  }
}

/* ==========================================================================
   Approach
   ========================================================================== */
.approach {
  padding: 60px 24px 120px;
}

.approach-container {
  max-width: 1166px;
  margin: 0 auto;
}

.approach-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.approach-left {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 644px;
  padding: 51px 0 0 4px;
}

.approach-headline {
  max-width: 640px;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 50px;
  line-height: 48px;
  letter-spacing: -0.384px;
  color: var(--color-text);
}

.approach-text {
  max-width: 640px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16.3px;
  line-height: 27px;
  color: var(--color-muted);
}

.approach-right {
  flex: 0 0 auto;
}

.approach-visual {
  width: 347px;
  height: 347px;
  overflow: visible;
}

.approach-globe,
.approach-globe svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.approach-comparison {
  margin-top: 47px;
}

@media (max-width: 1024px) {
  .approach-top {
    flex-direction: column;
    gap: 32px;
  }

  .approach-left {
    max-width: 100%;
    padding: 0;
  }

  .approach-headline {
    font-size: clamp(30px, 6vw, 50px);
    line-height: 1.1;
  }

  .approach-break {
    display: none;
  }

  .approach-right {
    align-self: center;
  }

  .approach-visual {
    width: 260px;
    height: 260px;
  }

  .approach-comparison {
    margin-top: 40px;
  }
}

@media (max-width: 480px) {
  .approach {
    padding: 40px 20px 80px;
  }
}

/* ==========================================================================
   Comparison panel
   Desktop: the SVG draws the frame, dividers, dashes, dots and wordmark.
   Text is HTML laid over it. --u is one unit of the 1102px-wide SVG, so
   everything scales with the panel width.
   ========================================================================== */
.compare-panel {
  position: relative;
  container-type: inline-size;
  width: min(1000px, 100%);
  margin-left: 38px; /* lines the card edge up with the text edge */
  aspect-ratio: 1102 / 316;
  background: url("assets/approach/comparison.svg") center / 100% 100% no-repeat;
}

.compare-left,
.compare-right {
  --u: calc(100cqw / 1102);
  position: absolute;
  top: calc(var(--u) * 42.66);
  width: calc(var(--u) * 458.96);
}

.compare-left {
  left: calc(var(--u) * 52.93);
  opacity: 0.72;
}

.compare-right {
  left: calc(var(--u) * 589.91);
  /* room for the wordmark drawn in the SVG */
  padding-top: calc(var(--u) * 48.49);
}

.compare-heading {
  margin-bottom: calc(var(--u) * 28);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(var(--u) * 16.1828);
  line-height: calc(var(--u) * 20);
  letter-spacing: calc(var(--u) * -0.1618);
  color: var(--color-muted);
}

.compare-list {
  list-style: none;
}

.compare-item {
  position: relative;
  padding-left: calc(var(--u) * 21.1918);
}

.compare-left .compare-item + .compare-item {
  margin-top: calc(var(--u) * 14.64);
}

.compare-right .compare-item + .compare-item {
  margin-top: calc(var(--u) * 14.55);
}

.compare-item-text {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 14.8342);
  line-height: calc(var(--u) * 23);
}

.compare-left .compare-item-text {
  color: var(--color-muted);
}

.compare-right .compare-item-text {
  color: var(--color-text);
}

/* Already drawn by the SVG on desktop */
.compare-item-dash,
.compare-item-dot {
  display: none;
}

/* Wordmark is in the SVG too: keep it for screen readers only */
.compare-wordmark {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tablet / mobile: stacked layout with a CSS-built frame */
@media (max-width: 1024px) {
  .compare-panel {
    container-type: normal;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    aspect-ratio: auto;
    border: 1px solid rgba(210, 234, 255, 0.35);
    border-radius: 12px;
    background:
      linear-gradient(
        180deg,
        rgba(0, 115, 255, 0) 0%,
        rgba(13, 162, 255, 0.4) 100%
      ),
      var(--color-bg);
    box-shadow:
      inset 0 0.6px 1px 0.7px #d2eaff,
      0 10px 13px rgba(87, 177, 255, 0.22),
      0 4px 5px rgba(87, 177, 255, 0.15);
  }

  .compare-left,
  .compare-right {
    --u: 1px; /* back to plain pixels */
    position: static;
    width: auto;
    padding: 38.53px;
  }

  .compare-left {
    border-bottom: 1px solid rgba(87, 177, 255, 0.25);
  }

  .compare-wordmark {
    position: static;
    display: block;
    width: auto;
    height: 16px;
    margin: 0 0 18.49px;
    overflow: visible;
    clip-path: none;
  }

  .compare-item-dash,
  .compare-item-dot {
    position: absolute;
    left: 0;
    display: block;
  }

  .compare-item-dash {
    top: 9.44px;
    width: 7.71px;
    height: 1.44px;
    background: var(--color-subtle);
  }

  .compare-item-dot {
    top: 7.51px;
    width: 5.78px;
    height: 5.78px;
    border-radius: 2.89px;
    background: var(--color-accent);
    box-shadow: 0 0 7.7px var(--color-accent);
  }
}

@media (max-width: 480px) {
  .compare-left,
  .compare-right {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   Capabilities
   Desktop: laid out on the Figma grid. --u is one unit of the 1147px-wide
   frame, so positions and type scale with the container width.
   ========================================================================== */
.capabilities {
  padding: 40px 24px 120px;
}

.capabilities-container {
  container-type: inline-size;
  max-width: 1147px;
  margin: 0 auto;
}

.capabilities-stage {
  --u: calc(100cqw / 1147);
  position: relative;
  aspect-ratio: 1147 / 646.36;
}

.capabilities-headline {
  position: absolute;
  top: 0;
  left: calc(var(--u) * 99.59);
  width: calc(var(--u) * 528.69);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 31.7212);
  line-height: calc(var(--u) * 40);
  letter-spacing: calc(var(--u) * -0.317212);
  color: var(--color-text);
}

.capabilities-intro {
  position: absolute;
  top: calc(var(--u) * 96.56);
  left: calc(var(--u) * 99.59);
  width: calc(var(--u) * 528.69);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 14.8693);
  line-height: calc(var(--u) * 22);
  color: var(--color-muted);
}

.capabilities-steps {
  position: absolute;
  top: calc(var(--u) * 174.04);
  left: 0;
  width: calc(var(--u) * 810.65);
  height: calc(var(--u) * 472.32);
}

.capabilities-lines {
  position: absolute;
  top: calc(var(--u) * -59.69);
  left: calc(var(--u) * 35.85);
  width: calc(var(--u) * 77.84);
  height: calc(var(--u) * 565.79);
  pointer-events: none;
  user-select: none;
}

.capabilities-figure {
  position: absolute;
  top: calc(var(--u) * 148.17);
  left: calc(var(--u) * 825.54);
  width: calc(var(--u) * 321.46);
  height: calc(var(--u) * 353.61);
  pointer-events: none;
  user-select: none;
}

.capabilities-list {
  list-style: none;
}

/* Only used in the single-column layout */
.capabilities-lines-phone {
  display: none;
}

/* Each row lines up with a glowing node on the circuit SVG.
   Positions are unitless on purpose: they get multiplied by --u below. */
.capability:nth-child(1) {
  --title-top: 28.86;
  --text-top: 22.74;
  --text-width: 450;
}
.capability:nth-child(2) {
  --title-top: 127.44;
  --text-top: 127.69;
  --text-width: 475;
}
.capability:nth-child(3) {
  --title-top: 238.96;
  --text-top: 239.21;
  --text-width: 450;
}
.capability:nth-child(4) {
  --title-top: 334.74;
  --text-top: 334.99;
  --text-width: 440;
}
.capability:nth-child(5) {
  --title-top: 420.91;
  --text-top: 421.16;
  --text-width: 466;
}

.capability-title {
  position: absolute;
  top: calc(var(--u) * var(--title-top));
  left: calc(var(--u) * 115.43);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 15.6533);
  line-height: calc(var(--u) * 22);
  letter-spacing: calc(var(--u) * -0.156533);
  white-space: nowrap;
  color: var(--color-text);
}

.capability-text {
  position: absolute;
  top: calc(var(--u) * var(--text-top));
  left: calc(var(--u) * 335.8);
  width: calc(var(--u) * var(--text-width));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 13.7294);
  line-height: calc(var(--u) * 23);
  color: var(--color-muted);
}

/* Tablet / mobile: single column, with the circuit line beside the list */
@media (max-width: 1100px) {
  .capabilities-stage {
    --u: 1px; /* back to plain pixels */
    display: flex;
    flex-direction: column;
    gap: 20px;
    aspect-ratio: auto;
  }

  .capabilities-headline,
  .capabilities-intro,
  .capabilities-steps,
  .capability-title,
  .capability-text {
    position: static;
    width: auto;
    height: auto;
  }

  .capabilities-headline {
    font-size: clamp(26px, 5vw, 31.72px);
  }

  .capabilities-lines {
    display: none;
  }

  .capabilities-steps {
    --s: 1.4; /* size of the circuit line; script.js refines it */
    position: relative;
    top: auto;
    left: auto;
    margin-top: 12px;
  }

  /* script.js scales the line evenly through --s so the nodes stay round and
     meet the titles. The empty left part of the file is cropped off. */
  .capabilities-lines-phone {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(41px * var(--s));
    height: calc(566px * var(--s));
    overflow: hidden;
    pointer-events: none;
    user-select: none;
  }

  .capabilities-lines-phone img {
    display: block;
    width: calc(78px * var(--s));
    height: 100%;
    max-width: none;
    margin-left: calc(-37px * var(--s));
  }

  .capabilities-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* minimum: script.js adds the rest so each title meets its node */
    padding-left: calc(41px * var(--s) + 14px);
  }

  .capability {
    position: relative;
  }

  .capability-title {
    margin-bottom: 6px;
  }

  .capabilities-figure {
    position: static;
    align-self: center;
    width: 240px;
    height: auto;
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .capabilities {
    padding: 24px 20px 80px;
  }

  .capability-title {
    white-space: normal;
  }
}

/* ==========================================================================
   Experience card
   Desktop: the SVG draws the card, the cubes SVG draws the numbers, and the
   text is laid over both. --u is one unit of the 1464px-wide Figma frame.
   ========================================================================== */
.experience {
  padding: 0 24px 80px;
}

.experience-container {
  container-type: inline-size;
  max-width: 1464px;
  margin: 0 auto;
}

.experience-card {
  --u: calc(100cqw / 1464);
  position: relative;
  aspect-ratio: 1464 / 350;
  background: url("assets/blocks/background.svg") center / 100% 100% no-repeat;
}

.experience-quote {
  position: absolute;
  top: calc(var(--u) * 89);
  left: calc(var(--u) * 54);
  width: calc(var(--u) * 535);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 30.4);
  line-height: calc(var(--u) * 43);
  white-space: nowrap;
  color: var(--color-text);
}

.experience-highlight {
  color: #57bead;
}

.experience-cubes {
  position: absolute;
  top: calc(var(--u) * 18);
  left: calc(var(--u) * 663);
  width: calc(var(--u) * 192.4);
  height: calc(var(--u) * 297.34);
  pointer-events: none;
  user-select: none;
}

.experience-stats {
  list-style: none;
}

.experience-stat-text {
  position: absolute;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: calc(var(--u) * 24);
  color: var(--color-muted);
}

.experience-stat:nth-child(1) .experience-stat-text {
  top: calc(var(--u) * 68);
  left: calc(var(--u) * 855);
  width: calc(var(--u) * 540);
}

.experience-stat:nth-child(2) .experience-stat-text {
  top: calc(var(--u) * 147);
  left: calc(var(--u) * 838);
  width: calc(var(--u) * 455);
}

.experience-stat:nth-child(3) .experience-stat-text {
  top: calc(var(--u) * 232);
  left: calc(var(--u) * 861);
  width: calc(var(--u) * 433);
}

/* These two are single lines in the design */
.experience-stat:nth-child(n + 2) .experience-stat-text {
  white-space: nowrap;
}

/* The numbers are drawn on the cubes, so keep them for screen readers only */
.experience-stat-value {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tablet / mobile: stacked, CSS-built card */
@media (max-width: 1100px) {
  .experience-card {
    --u: 1px; /* back to plain pixels */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    aspect-ratio: auto;
    padding: 40px 28px;
    border: solid rgba(244, 241, 255, 0.1);
    border-width: 0.8px 0;
    border-radius: 26px;
    background: #1b2148;
  }

  .experience-quote {
    position: static;
    width: auto;
    font-size: clamp(22px, 4.5vw, 30.4px);
    line-height: 1.41;
    white-space: normal;
  }

  .experience-break {
    display: none;
  }

  .experience-cubes {
    position: static;
    width: 160px;
    height: auto;
  }

  .experience-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 540px;
  }

  .experience-stat {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }

  .experience-stat-value {
    position: static;
    flex: 0 0 72px;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
    color: var(--color-accent);
  }

  .experience-stat:nth-child(n) .experience-stat-text {
    position: static;
    width: auto;
    font-size: 16px;
    line-height: 24px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .experience {
    padding: 0 20px 56px;
  }

  .experience-card {
    padding: 32px 20px;
  }
}

/* ==========================================================================
   Process
   Desktop: laid out on the Figma grid. --u is one unit of the 1180px-wide
   frame, so positions and type scale with the container width.
   ========================================================================== */
.process {
  padding: 40px 24px 80px;
}

.process-container {
  container-type: inline-size;
  max-width: 1180px;
  margin: 0 auto;
}

.process-stage {
  --u: calc(100cqw / 1180);
  position: relative;
  aspect-ratio: 1180 / 480; /* trimmed to the cards' bottom edge */
}

.process-headline {
  position: absolute;
  top: 0;
  left: calc(var(--u) * 32);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 38.4);
  line-height: calc(var(--u) * 48);
  letter-spacing: calc(var(--u) * -0.384);
  white-space: nowrap;
  color: var(--color-text);
}

.process-intro {
  position: absolute;
  top: calc(var(--u) * 125);
  left: calc(var(--u) * 32);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 16.3);
  line-height: calc(var(--u) * 27);
  white-space: nowrap;
  color: var(--color-muted);
}

.process-steps {
  list-style: none;
}

.process-step {
  position: absolute;
  top: calc(var(--u) * 371.7);
  left: calc(var(--u) * var(--x));
  width: calc(var(--u) * 350.7);
  height: calc(var(--u) * 105.1);
  background: var(--card-bg) center / 100% 100% no-repeat;
}

/* Per-card values. Unitless on purpose: they get multiplied by --u. */
.process-step:nth-child(1) {
  --x: 32;
  --wolf-x: 123.1;
  --wolf-y: -130.1;
  --text-x: 14;
  --text-y: 45;
  --text-w: 323;
  --tint: 56, 253, 182;
  --text-color: #afafaf;
  --card-bg: url("assets/process/background_green.svg");
}

.process-step:nth-child(2) {
  --x: 414.66;
  --wolf-x: 126.5;
  --wolf-y: -144.6;
  --text-x: 19.34;
  --text-y: 28.3;
  --text-w: 311;
  --tint: 30, 214, 255;
  --text-color: #aaaec0;
  --card-bg: url("assets/process/background_blue.svg");
}

.process-step:nth-child(3) {
  --x: 797.32;
  --wolf-x: 126.8;
  --wolf-y: -144.6;
  --text-x: 16.68;
  --text-y: 28.3;
  --text-w: 327;
  --tint: 161, 98, 247;
  --text-color: #acb0ca;
  --card-bg: url("assets/process/background_purple.svg");
}

.process-wolf {
  position: absolute;
  top: calc(var(--u) * var(--wolf-y));
  left: calc(var(--u) * var(--wolf-x));
  width: calc(var(--u) * 93);
  height: calc(var(--u) * 96);
  pointer-events: none;
}

.process-step-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: calc(var(--u) * 17.3);
  line-height: calc(var(--u) * 22);
  letter-spacing: calc(var(--u) * -0.173);
  text-align: center;
  color: var(--color-text);
}

.process-step-text {
  position: absolute;
  top: calc(var(--u) * var(--text-y));
  left: calc(var(--u) * var(--text-x));
  width: calc(var(--u) * var(--text-w));
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 15);
  line-height: calc(var(--u) * 24);
  color: var(--text-color);
}

/* Tablet: three compact cards in a row */
@media (max-width: 1100px) {
  .process-stage {
    --u: 1px; /* back to plain pixels */
    display: flex;
    flex-direction: column;
    gap: 16px;
    aspect-ratio: auto;
  }

  .process-headline,
  .process-intro {
    position: static;
    white-space: normal;
  }

  .process-headline {
    font-size: clamp(28px, 5vw, 38.4px);
    line-height: 1.25;
  }

  .process-break {
    display: none;
  }

  .process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
  }

  .process-step:nth-child(n) {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    padding: 0 20px 24px;
    border-radius: 8px;
    background: linear-gradient(
      180deg,
      rgba(var(--tint), 0) 0%,
      rgba(var(--tint), 0.4) 100%
    );
  }

  .process-wolf {
    position: static;
    width: 80px;
    height: auto;
    margin-bottom: 8px;
  }

  .process-step-title {
    position: static;
    margin-bottom: 12px;
  }

  .process-step-text {
    position: static;
    width: auto;
  }
}

/* Mobile: one card per row */
@media (max-width: 760px) {
  .process-steps {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .process {
    padding: 24px 20px 80px;
  }
}

/* ==========================================================================
   Contact
   Desktop: laid out on the Figma grid. --u is one unit of the 1428px-wide
   card. The glass card and the email box are plain CSS (the exported
   background SVG uses blend modes that browsers render as flat grey).
   ========================================================================== */
.contact {
  padding: 0 24px 80px;
}

.contact-container {
  container-type: inline-size;
  max-width: 1428px;
  margin: 0 auto;
}

.contact-card {
  --u: calc(100cqw / 1428);
  position: relative;
  aspect-ratio: 1428 / 406.39;
  border: 1px solid rgba(244, 241, 255, 0.12);
  border-radius: calc(var(--u) * 30.71);
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.07), transparent 22%),
    radial-gradient(
      circle at 100% 100%,
      rgba(255, 255, 255, 0.05),
      transparent 22%
    ),
    radial-gradient(
      53.84% 82.28% at 85% 20%,
      rgba(161, 119, 232, 0.2) 0%,
      rgba(161, 119, 232, 0) 60%
    );
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.5),
    inset 3px 3px 1px -3px rgba(255, 255, 255, 0.5),
    inset -3px -3px 1px -3px rgba(255, 255, 255, 0.35);
}

/* Reflective edge: the rim is brightest at the top-left and bottom-right corners */
.contact-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.04) 16%,
    rgba(255, 255, 255, 0.04) 84%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

.contact-signature {
  position: absolute;
  top: calc(var(--u) * 11);
  left: calc(var(--u) * 511);
  width: calc(var(--u) * 309);
  height: calc(var(--u) * 352);
  pointer-events: none;
  user-select: none;
}

.contact-headline {
  position: absolute;
  top: calc(var(--u) * 93.15);
  left: calc(var(--u) * 82.92);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 45.0406);
  line-height: calc(var(--u) * 59);
  letter-spacing: calc(var(--u) * -0.450406);
  white-space: nowrap;
  color: var(--color-text);
}

.contact-text {
  position: absolute;
  top: calc(var(--u) * 176.58);
  left: calc(var(--u) * 83.17);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 20.473);
  line-height: calc(var(--u) * 33);
  white-space: nowrap;
  color: var(--color-muted);
}

.contact-box {
  position: absolute;
  top: calc(var(--u) * 93.15);
  left: calc(var(--u) * 823.01);
  width: calc(var(--u) * 522.06);
  height: calc(var(--u) * 220.08);
  border: 1.28px solid rgba(244, 241, 255, 0.18);
  border-radius: calc(var(--u) * 20.47);
  background: var(--color-bg);
}

.contact-label {
  position: absolute;
  top: calc(var(--u) * 38.13);
  left: calc(var(--u) * 36.85);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 15.9945);
  line-height: calc(var(--u) * 19);
  color: var(--color-subtle);
}

.contact-email {
  position: absolute;
  top: calc(var(--u) * 82.42);
  left: calc(var(--u) * 37.11);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(var(--u) * 21.4966);
  line-height: calc(var(--u) * 28);
  white-space: nowrap;
  color: var(--color-text);
}

.contact-button {
  position: absolute;
  top: calc(var(--u) * 132.32);
  left: calc(var(--u) * 101.08);
  width: calc(var(--u) * 319.89);
  height: calc(var(--u) * 52.46);
  line-height: 0;
}

.contact-button img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The hover image replaces the default one (also on keyboard focus) */
.contact-button .btn-hover {
  display: none;
}

.contact-button:is(:hover, :focus-visible) .btn-default {
  display: none;
}

.contact-button:is(:hover, :focus-visible) .btn-hover {
  display: block;
}

/* Tablet / mobile: stacked, CSS-built card */
@media (max-width: 1100px) {
  .contact-card {
    --u: 1px; /* back to plain pixels */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    aspect-ratio: auto;
    padding: 48px 40px;
  }

  /* Sits behind the text, like on desktop */
  .contact-signature {
    top: 6px;
    left: 50%;
    width: 250px;
    height: auto;
    transform: translateX(-50%);
  }

  .contact-label,
  .contact-email,
  .contact-button {
    position: static;
    width: auto;
    height: auto;
  }

  /* Relative (not static) so they paint above the signature */
  .contact-headline,
  .contact-text,
  .contact-box {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
  }

  .contact-headline {
    font-size: clamp(30px, 6vw, 45px);
    line-height: 1.3;
    white-space: normal;
  }

  .contact-text {
    font-size: clamp(16px, 2.4vw, 20.5px);
    line-height: 1.6;
    white-space: normal;
  }

  .contact-break {
    display: none;
  }

  .contact-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 522px;
    margin-top: 12px;
    padding: 36px;
  }

  .contact-email {
    font-size: clamp(16px, 4.4vw, 21.5px);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .contact-button {
    align-self: center;
    width: 100%;
    max-width: 320px;
  }

  .contact-button img {
    height: auto;
  }
}

@media (max-width: 480px) {
  .contact {
    padding: 0 20px 56px;
  }

  .contact-card {
    padding: 32px 20px;
  }

  .contact-box {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  padding: 48px 24px 40px;
  border-top: 0.8px solid rgba(244, 241, 255, 0.1);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px; /* same inset as the section headings */
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo {
  display: block;
  flex-shrink: 0;
  width: 31.64px;
  height: auto;
}

.footer-copy {
  padding-bottom: 1.6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.1px;
  line-height: 17px;
  color: var(--color-subtle);
}

.footer-slogan {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13.1px;
  line-height: 17px;
  color: var(--color-subtle);
}

@media (max-width: 768px) {
  .footer {
    padding: 40px 20px 32px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
  }
}