/* Purpose Tech. Tokens come straight from the Brilliant canvas (Frame 8 / Tablet 768 / Mobile 390). */

@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --brand: #514eff;
  --brand-hi: #6e6cff;
  --brand-lo: #1f1ca8;
  --brand-soft: #8a88ff;
  --lilac: #c9cbff;
  --dot: #cfcbff;
  --toggle: #eeedff;
  --field: #f5f5ff;
  --ink: #120a26;
  --heading: #14123a;
  --body: #5f5d7a;
  --muted: #5b5670;
  --line: rgba(20, 18, 58, 0.08);
  --line-brand: rgba(81, 78, 255, 0.18);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --content: 1119px;
  --gutter: 112px;
  --radius-card: 20px;

  --shade: linear-gradient(180deg, rgba(110, 108, 255, 0.5) 0%, rgba(81, 78, 255, 0) 50%, rgba(31, 28, 168, 0.6) 100%);
  --gloss: radial-gradient(40% 70% at 22% 10%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
.icon { width: 1em; height: 1em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; transition: top 160ms var(--ease-out); }
.skip-link:focus { top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 24px; border-radius: 999px;
  font-size: 18px; line-height: 1.21; white-space: nowrap;
  transition-property: transform, box-shadow, background-color;
  transition-duration: 160ms; transition-timing-function: var(--ease-out);
}
.btn .icon { font-size: 1.1em; }
.btn:active { transform: scale(0.97); }
.btn--lg { padding: 14px 28px; font-size: 24px; }
.btn--sm { padding: 12px 24px; font-size: 16px; font-weight: 500; }
.btn--primary {
  color: #fff;
  background: var(--gloss), var(--shade), var(--brand);
  box-shadow: inset 4px 3px 7px rgba(255, 255, 255, 0.85), inset 0 0 0 1.4px rgba(255, 255, 255, 0.35), 0 8px 18px rgba(81, 78, 255, 0.35);
}
.btn--light {
  color: var(--brand);
  background:
    radial-gradient(40% 70% at 22% 10%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(201, 203, 255, 0.55) 100%), #fff;
  box-shadow: inset 4px 3px 7px #fff, inset 0 0 0 1px var(--line-brand), 0 8px 18px rgba(81, 78, 255, 0.18);
}
.btn--ghost { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, 0.55); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover { box-shadow: inset 4px 3px 7px rgba(255, 255, 255, 0.85), inset 0 0 0 1.4px rgba(255, 255, 255, 0.35), 0 12px 24px rgba(81, 78, 255, 0.45); }
  .btn--ghost:hover { background: rgba(255, 255, 255, 0.16); }
}

.round-btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; font-size: 20px;
  transition-property: transform, box-shadow; transition-duration: 160ms; transition-timing-function: var(--ease-out);
}
.round-btn--sm { width: 40px; height: 40px; font-size: 18px; }
.round-btn--light { color: var(--brand); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(201, 203, 255, 0.55) 100%), #fff; box-shadow: inset 4px 3px 7px #fff, inset 0 0 0 1px var(--line-brand), 0 8px 18px rgba(81, 78, 255, 0.18); }
.round-btn--primary { color: #fff; background: var(--gloss), var(--shade), var(--brand); box-shadow: inset 4px 3px 7px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(81, 78, 255, 0.18); }
.round-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .round-btn:hover { transform: translateY(-1px); } }

/* Preheader */
.preheader {
  position: relative; height: 44px; overflow: hidden;
  background: linear-gradient(90deg, var(--brand-lo) 0%, var(--brand) 50%, var(--brand-lo) 100%);
}
.preheader__confetti { position: absolute; top: 0; width: 360px; height: 44px; background: url("../img/confetti.svg") no-repeat; }
.preheader__confetti--left { left: 0; }
.preheader__confetti--right { right: 0; transform: scaleX(-1); }
.preheader__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; height: 100%; padding: 0 16px; }
.preheader__icon { font-size: 18px; color: var(--lilac); }
.preheader__copy { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.preheader__claim {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 14px; border-radius: 999px;
  background: #fff; color: var(--brand); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(18, 10, 38, 0.2);
  transition: transform 160ms var(--ease-out);
}
.preheader__claim .icon { font-size: 14px; }
.preheader__claim:active { transform: scale(0.96); }

/* Hero */
.hero { position: relative; height: 780px; isolation: isolate; }
.hero__ring {
  position: absolute; z-index: -2; left: 50%; top: 190px; width: 1171px; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; box-shadow: inset 0 0 0 18px var(--brand); filter: blur(80px);
}
.hero__clouds {
  position: absolute; z-index: -1; left: 0; right: 0; top: 236px; height: 755px;
  background: url("../img/clouds.webp") center / cover no-repeat; mix-blend-mode: multiply;
}
.topbar { position: absolute; inset: 18px 29px auto; display: flex; justify-content: space-between; align-items: flex-start; z-index: 3; }
.topbar__logo .logo { width: 49px; height: 57px; }

.notch-btn {
  display: block;
  --notch-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative; width: 250px; height: 57px; color: #fff;
  filter: drop-shadow(0 8px 9px rgba(81, 78, 255, 0.35));
  transition: transform 160ms var(--notch-ease), filter 200ms var(--notch-ease);
}
.notch-btn__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Exit is quicker than enter, so leaving never feels sluggish. */
.notch-btn__path { transition: d 200ms var(--notch-ease); }
.notch-btn__label { position: absolute; left: 28px; top: 14px; font-size: 24px; line-height: 29px; transition: transform 200ms var(--notch-ease); }
.notch-btn__arrow { position: absolute; left: 209.5px; top: 16.5px; width: 1em; height: 1em; font-size: 24px; overflow: hidden; transition: translate 200ms var(--notch-ease); }
.notch-btn__arrow .icon { position: absolute; inset: 0; transition: transform 200ms var(--notch-ease), opacity 200ms var(--notch-ease); }
.notch-btn__arrow-in { transform: translate(-100%, 100%); opacity: 0; }
.notch-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .notch-btn:hover { filter: drop-shadow(0 12px 14px rgba(81, 78, 255, 0.45)); }
  /* The pinch closes and the left end pulls in, so the merged pill wraps label and arrow with 28px padding each side.
     Same command list as the rest shape so the browser can tween it; the right edge stays on the page margin. */
  .notch-btn:hover .notch-btn__path {
    d: path("M55.5 0L156.56 0C161.25 0 165.87 0 170 0C176.7 0 180.01 0 188.01 0C196.01 0 199.3 0 206 0C215 0 233.5 0.4 241.6 8.4C252.7 19.5 252.7 37.5 241.6 48.6C233.5 56.6 215 57 206 57C199.3 57 196.01 57 188.01 57C180.01 57 176.7 57 170 57C165.87 57 161.25 57 156.56 57L55.5 57C39.76 57 27 44.24 27 28.5C27 12.76 39.76 0 55.5 0Z");
    transition-duration: 320ms;
  }
  .notch-btn:hover .notch-btn__label { transform: translateX(1.125em); transition-duration: 320ms; }
  .notch-btn:hover .notch-btn__arrow { translate: -0.48em 0; transition-duration: 320ms; }
  .notch-btn:hover .notch-btn__arrow-out { transform: translate(100%, -100%); opacity: 0; }
  .notch-btn:hover .notch-btn__arrow-in { transform: none; opacity: 1; transition-duration: 320ms; transition-delay: 60ms; }
}

.hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 126px; text-align: center; }
.hero__title { display: flex; flex-direction: column; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; color: var(--ink); }
.hero__wordmark { width: 440px; height: auto; margin-bottom: 12px; }
.hero__line { display: block; font-size: 50px; }
.hero__line--pill { display: flex; align-items: center; gap: 0.29em; font-size: 52px; }
/* The canvas irid shader runs in .lift-pill__shader (js/irid.js); ::before is the static no-WebGL fallback,
   ::after carries the canvas's tint, gloss, inner shadows and rim. */
.lift-pill {
  position: relative; display: inline-block; width: 2.077em; height: 1.519em; flex: none; isolation: isolate;
  border-radius: 999px; overflow: hidden; background: #1a1033;
  box-shadow: 0 0.145em 0.362em rgba(255, 79, 163, 0.25), 0 0.434em 1.013em rgba(46, 197, 255, 0.2);
}
.lift-pill::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 79, 163, 0.9) 0 18%, transparent 42%),
    radial-gradient(circle at 70% 65%, rgba(46, 197, 255, 0.85) 0 16%, transparent 40%),
    conic-gradient(from 0deg, #ff4fa3, #ffb224, #2ec5ff, #7b5cff, #ff4fa3);
  filter: blur(0.14em) saturate(1.2);
}
.lift-pill__shader { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 400ms var(--ease-out); }
.lift-pill__shader.is-live { opacity: 1; }
.lift-pill::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 45%, rgba(26, 11, 61, 0.4) 100%),
    rgba(20, 8, 46, 0.38);
  box-shadow: inset 0 0.072em 0.108em rgba(255, 255, 255, 0.75), inset 0 -0.108em 0.217em #2a0e55, inset 0 0 0 0.043em rgba(255, 255, 255, 0.4);
}
.lift-pill span {
  position: absolute; left: 0.506em; top: 0.108em; font: 400 0.868em/1.5 "Anton", Impact, sans-serif; letter-spacing: 0; color: #fff;
  text-shadow: 0 1.88px 1.88px rgba(14, 5, 36, 0.7), 0 0 11.29px rgba(14, 5, 36, 0.5);
}
.hero__ctas { display: flex; gap: 16px; margin-top: 75px; }

.stack { position: absolute; z-index: 1; left: -10px; top: 540px; width: 320px; height: 240px; }
.stack__chip {
  position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; font-size: 24px; color: var(--c);
  background: #fff; box-shadow: inset 0 -4px 10px var(--lilac), inset 0 0 0 1px rgba(81, 78, 255, 0.12), 0 8px 18px rgba(81, 78, 255, 0.18);
  rotate: var(--r);
}
@media (prefers-reduced-motion: no-preference) {
  .stack__chip { animation: float 6s var(--ease-in-out) calc(var(--i) * -0.7s) infinite alternate; }
}
@keyframes float { to { translate: 0 -6px; } }
/* Saturn halo: the canvas's hidden Orb and Orbit ellipse fade in and the chips ride the ring (js: initOrbit). */
.stack { cursor: default; }
.stack__ring {
  position: absolute; left: 30px; top: 82px; width: 260px; height: 76px; border-radius: 50%;
  border: 1.5px solid rgba(81, 78, 255, 0.25); opacity: 0; scale: 0.85;
  transition: opacity 300ms var(--ease-out), scale 400ms var(--ease-out); pointer-events: none;
}
.stack__orb {
  position: absolute; z-index: 5; left: 140px; top: 100px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(80% 80% at 35% 30%, #fff 0%, var(--brand-soft) 55%, #3a37d6 100%);
  box-shadow: inset -4px -6px 14px rgba(255, 255, 255, 0.9), 0 14px 32px rgba(81, 78, 255, 0.35);
  opacity: 0; scale: 0.4; transition: opacity 300ms var(--ease-out), scale 450ms var(--ease-out); pointer-events: none;
}
.stack.is-orbit .stack__ring { opacity: 1; scale: 1; }
.stack.is-orbit .stack__orb { opacity: 1; scale: 1; }
.stack.is-orbit .stack__chip { animation: none; }
.stack__chip { z-index: 10; will-change: transform; }
.hero__devices { position: absolute; z-index: 1; right: 10px; top: 500px; width: 368px; height: auto; }

/* Shared section head */
.section-head { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; text-align: center; }
.section-head h2, .faq__intro h2 { font-size: 40px; font-weight: 600; line-height: 1.2; letter-spacing: -0.8px; color: var(--heading); }
.section-head p, .faq__intro > p { font-size: 17px; line-height: 1.5; color: var(--body); }

/* Matrix rain */
.rain { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rain span {
  position: absolute; left: var(--x); width: 10px; white-space: pre;
  font: 500 var(--s) / 1.15 "JetBrains Mono", ui-monospace, monospace;
  background: linear-gradient(180deg, rgba(138, 136, 255, var(--o)) 0%, rgba(81, 78, 255, calc(var(--o) * 0.45)) 20%, rgba(81, 78, 255, 0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rain--up { bottom: 0; height: 480px; }
.rain--up span { bottom: -48px; }
.rain--down { top: 0; height: 100%; }
.rain--down span { top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rain span { animation: rain-flicker 4s steps(4) var(--d) infinite; }
}
@keyframes rain-flicker { 50% { opacity: 0.6; } }

/* Services */
.services {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 56px;
  padding: 96px var(--gutter); background: #fff; border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 48px rgba(81, 78, 255, 0.1);
}
.services__arrow { position: absolute; left: 50%; top: -41px; width: 82px; height: 82px; translate: -50% 0; z-index: 3; }
.services .section-head, .services__grid { position: relative; z-index: 1; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: var(--content); margin: 0 auto; }
.service {
  display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--radius-card);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.service__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.service__top img { width: 64px; height: 64px; }
.service h3 { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--heading); }
.service p { font-size: 16px; line-height: 1.55; color: var(--body); }
.service--featured {
  background: linear-gradient(180deg, rgba(110, 108, 255, 0.5) 0%, rgba(81, 78, 255, 0) 50%, rgba(31, 28, 168, 0.6) 100%), var(--brand);
  box-shadow: inset 2px 2px 8px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 12px 28px rgba(81, 78, 255, 0.3);
}
.service--featured h3 { color: #fff; }
.service--featured p { color: rgba(255, 255, 255, 0.8); }
.service__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; background: #fff; color: var(--brand); font-size: 18px; transition: transform 160ms var(--ease-out); }
.service__go:active { transform: scale(0.92); }
/* The arrow link stretches over the whole featured card, so the card is one big target with a single link. */
.service--featured { position: relative; cursor: pointer; }
.service--featured .service__go::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.service--featured .service__go:focus-visible { outline: none; }
.service--featured:has(.service__go:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
/* No transform on the link while pressed: it would shrink the stretched hit area back to the circle. */
.service--featured .service__go:active { transform: none; }
.service--featured:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .service:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-brand), 0 12px 28px rgba(81, 78, 255, 0.12); }
  .service--featured:hover { box-shadow: inset 2px 2px 8px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 16px 34px rgba(81, 78, 255, 0.4); }
}

/* Gallery */
.gallery { position: relative; overflow: clip; padding-top: 80px; background: #fff; }
.gallery .section-head { position: relative; z-index: 1; padding: 0 24px; }
.carousel {
  --spread: 455px; --lift: 77.5px; --far-lift: 175px; --tilt: 6.17deg; --far-tilt: 18deg; --card-scale: 1;
  position: relative; height: 499px; margin-top: 30px; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain;
}
.carousel__track { position: absolute; inset: 0; }
.project {
  --tx: 0px; --ty: 0px; --rot: 0deg;
  position: absolute; left: 50%; top: 15px; width: 399px; height: 329px; margin-left: -199.5px;
  border-radius: 24px; overflow: hidden; background: var(--toggle);
  box-shadow: 0 20px 44px rgba(81, 78, 255, 0.22);
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--card-scale));
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out), opacity 400ms var(--ease-out);
  cursor: grab;
}
.carousel.is-dragging .project { transition: none; cursor: grabbing; }
.project img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.project[data-slot="0"] { z-index: 3; opacity: 1; pointer-events: auto; }
.project[data-slot="-1"], .project[data-slot="1"] { z-index: 2; opacity: 1; pointer-events: auto; box-shadow: 0 18px 40px rgba(81, 78, 255, 0.18); }
/* Only the three cards in view show. Every other slot (any project count) waits invisible, so nothing shows behind and the wrap-around jump is hidden. */
.js .project:not([data-slot="-1"], [data-slot="0"], [data-slot="1"]) { z-index: 0; opacity: 0; pointer-events: none; transition-duration: 600ms, 600ms, 150ms; }
.project[data-slot="-1"] { --tx: calc(var(--spread) * -1); --ty: var(--lift); --rot: calc(var(--tilt) * -1); }
.project[data-slot="1"] { --tx: var(--spread); --ty: var(--lift); --rot: var(--tilt); }
.project[data-slot="-2"] { --tx: calc(var(--spread) * -2.07); --ty: var(--far-lift); --rot: calc(var(--far-tilt) * -1); }
.project[data-slot="2"] { --tx: calc(var(--spread) * 2.07); --ty: var(--far-lift); --rot: var(--far-tilt); }
.project__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 104px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px 0 24px; background: linear-gradient(180deg, rgba(30, 27, 107, 0) 0%, rgba(30, 27, 107, 0.82) 45%, rgba(30, 27, 107, 0.94) 100%);
}
.project__bar h3 { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; color: #fff; }
.project__bar > div { min-width: 0; }
.project__bar h3, .project__bar p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project__bar p { margin-top: 4px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.project__visit { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 24px; background: var(--brand); color: #fff; font-size: 20px; box-shadow: 0 6px 18px rgba(81, 78, 255, 0.45); }
.carousel__nav { position: absolute; left: 50%; top: 371px; translate: -50% 0; display: flex; gap: 12px; z-index: 6; }
.carousel__dots { position: absolute; left: 50%; top: 435px; translate: -50% 0; display: flex; align-items: center; gap: 8px; z-index: 4; }
.carousel__play {
  position: absolute; z-index: 6; left: 50%; top: 427px; margin-left: 66px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 12px; color: var(--brand); background: var(--toggle); font-size: 11px; transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.carousel__play .icon { grid-area: 1 / 1; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
.carousel__play-icon { opacity: 0; transform: scale(0.6); }
.carousel__play[aria-pressed="true"] .carousel__pause-icon { opacity: 0; transform: scale(0.6); }
.carousel__play[aria-pressed="true"] .carousel__play-icon { opacity: 1; transform: none; }
.carousel__play:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) { .carousel__play:hover { background: var(--dot); } }
.carousel__dots button { position: relative; width: 8px; height: 8px; border-radius: 4px; background: var(--dot); transition: width 300ms var(--ease-out), background-color 300ms var(--ease-out); }
.carousel__dots button::after { content: ""; position: absolute; inset: -10px -4px; }
.carousel__dots button[aria-selected="true"] { width: 28px; background: var(--brand); }
.carousel__cursor {
  position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 96px; height: 96px; border-radius: 48px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(81, 78, 255, 0.45); pointer-events: none;
  left: calc(50% + 371.7px); top: 363px; transition: opacity 200ms var(--ease-out);
}
.carousel.is-tracking .carousel__cursor { left: 0; top: 0; }
.carousel.is-over-ui .carousel__cursor { opacity: 0; }
.carousel__cursor .icon { font-size: 12px; }
@media not ((hover: hover) and (pointer: fine)) { .carousel__cursor { display: none; } }

/* FAQ */
.faq { position: relative; z-index: 1; display: flex; gap: 80px; max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto; padding: 40px var(--gutter) 96px; }
.faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 0 0 380px; }
.faq__mark { width: 180px; height: 180px; margin: 24px 0 0 -47px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.faq-item { border-radius: var(--radius-card); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 250ms var(--ease-out); }
.faq-item.is-open { box-shadow: inset 0 0 0 1px var(--line-brand), 0 8px 24px rgba(81, 78, 255, 0.1); }
.faq-item h3 { font: inherit; }
.faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 84px;
  padding: 24px 28px; text-align: left; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--heading); border-radius: var(--radius-card);
}
.faq-item.is-open .faq-item__q { padding-bottom: 12px; min-height: 0; }
.faq-item__toggle { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 18px; background: var(--toggle); transition: background-color 250ms var(--ease-out); }
/* Plus and minus are the same dots: each circle tweens between its two positions, staggered so the swap reads as particles regrouping. */
.particles { width: 24px; height: 24px; overflow: visible; fill: var(--brand); transition: fill 250ms var(--ease-out); }
.particles circle {
  --wave: var(--pd); transform-origin: 0 0; transform: translate(var(--x), var(--y)); opacity: var(--o);
  transition: transform 280ms var(--ease-out) calc(var(--i) * 12ms), opacity 200ms var(--ease-out) calc(var(--i) * 12ms);
}
.faq-item.is-open .faq-item__toggle { background: var(--brand); }
.faq-item.is-open .particles { fill: #fff; }
.faq-item.is-open .particles circle { transform: translate(var(--mx), var(--my)) scale(var(--ms)); opacity: var(--mo); --wave: var(--md); }
/* Always alive: each dot drifts on its own clock (`translate` stacks on top of the state transform), and a brightness wave
   runs through them, out from the centre on the plus, left to right along the bar on the minus. */
@media (prefers-reduced-motion: no-preference) {
  .particles circle {
    animation: particle-drift var(--t) ease-in-out var(--w) infinite alternate, particle-wave 1.4s ease-in-out var(--wave) infinite;
  }
}
@keyframes particle-drift {
  0% { translate: calc(var(--j) * -1) calc(var(--j) * 0.5); }
  50% { translate: calc(var(--j) * 0.6) calc(var(--j) * -1); }
  100% { translate: var(--j) calc(var(--j) * 0.7); }
}
@keyframes particle-wave { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: 0.4; } }
.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease-out); }
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p { padding: 0 28px 24px; font-size: 16px; line-height: 1.55; color: var(--body); max-width: 603px; }
@media (hover: hover) and (pointer: fine) { .faq-item:not(.is-open):hover { box-shadow: inset 0 0 0 1px var(--line-brand); } }

/* CTA */
.cta { padding: 24px 40px 0; }
.cta__card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 48px;
  max-width: 1263px; margin: 0 auto; padding: 80px 72px 140px; border-radius: 32px; color: #fff;
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(150deg, var(--brand-hi) 0%, var(--brand) 45%, var(--brand-lo) 100%);
  box-shadow: inset 0 2px 10px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 24px 60px rgba(81, 78, 255, 0.3);
}
.cta__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cta__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 720px; text-align: center; }
.cta__copy h2 { font-size: 48px; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; }
.cta__copy p { max-width: 560px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.cta__buttons { display: flex; gap: 16px; }
.cta__flash { width: 100%; max-width: 560px; text-align: center; }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: var(--content); }
.contact-cards li {
  display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.contact-cards li > span:not(.badge) { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-cards small { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.contact-cards a, .contact-cards strong { font-size: 18px; font-weight: 600; line-height: 1.22; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .contact-cards a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.badge { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; background: #fff; color: var(--brand); font-size: 20px; box-shadow: inset 0 -4px 10px var(--lilac); }
.cta__blocks {
  position: absolute; left: 0; right: 0; bottom: 0; height: 380px; z-index: -1;
  background: url("../img/pixel-blocks.webp") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 45%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 45%, #000 100%);
}
.newsletter {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; max-width: var(--content);
  padding: 32px 32px 32px 40px; border-radius: 24px; background: #fff; color: var(--heading);
  box-shadow: 0 12px 32px rgba(31, 28, 168, 0.25);
}
.newsletter__copy { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.newsletter__copy h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; }
.newsletter__copy p { font-size: 15px; line-height: 1.5; color: var(--body); }
.newsletter__field { display: flex; align-items: center; gap: 8px; width: 480px; max-width: 100%; padding: 6px 6px 6px 24px; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-brand); transition: box-shadow 160ms var(--ease-out); }
.newsletter__field:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand); }
.newsletter__field input[type="email"] { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; color: var(--heading); outline: none; }
.newsletter__field input::placeholder { color: #9a98b5; }
.form-status { min-height: 0; font-size: 14px; line-height: 1.4; }
.form-status:not(:empty) { margin-top: 10px; }
.form-status.is-ok { color: #0f7a4f; }
.form-status.is-error { color: #c0244d; }
.cta .form-status.is-ok, .cta .form-status.is-error { font-weight: 500; }
.cta__flash .form-status { color: #fff; }

/* Footer */
.footer { max-width: 1343px; margin: 0 auto; padding: 96px 40px 40px; display: flex; flex-direction: column; gap: 64px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.footer__brand { display: flex; flex-direction: column; gap: 20px; flex: 1 0 0; min-width: 280px; max-width: 400px; }
.footer__name { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); }
.footer__brand > p:not(.footer__name) { font-size: 15px; line-height: 1.5; color: var(--muted); }
.socials { display: flex; gap: 10px; }
.socials a, .socials > li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #fff; color: var(--brand); font-size: 18px; box-shadow: inset 0 -4px 10px var(--lilac), inset 0 0 0 1px rgba(81, 78, 255, 0.12); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .socials a:hover { transform: translateY(-2px); } }
.footer__links { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.footer__links > div { display: flex; flex-direction: column; gap: 14px; }
.footer__links h2 { font-size: 14px; font-weight: 600; color: var(--ink); }
.footer__links a, .footer__links span { font-size: 15px; color: var(--muted); transition: color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer__links a:hover { color: var(--brand); } }
.footer__wordmark { position: relative; font-size: clamp(52px, 14.6vw, 196px); }
.footer__wordmark p {
  font-weight: 800; line-height: 1; letter-spacing: -0.041em; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, #c9c7ee 0%, #e2e1f8 30%, #efeefc 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 -2px 1px rgba(31, 28, 168, 0.35)) drop-shadow(0 2px 0 #fff);
}
.footer__frame {
  position: absolute; left: -0.038em; right: -0.038em; top: 0; bottom: -0.194em;
  border: 1px dashed rgba(81, 78, 255, 0.3);
  background:
    linear-gradient(var(--brand), var(--brand)) top center / 1.5px 12px no-repeat,
    linear-gradient(var(--brand), var(--brand)) bottom center / 1.5px 12px no-repeat,
    linear-gradient(var(--brand), var(--brand)) left center / 12px 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) right center / 12px 1.5px no-repeat;
}
.footer__frame i { position: absolute; width: 28px; height: 28px; border: 0 solid var(--brand); }
.footer__frame i:nth-child(1) { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.footer__frame i:nth-child(2) { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.footer__frame i:nth-child(3) { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.footer__frame i:nth-child(4) { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(81, 78, 255, 0.14); font-size: 14px; color: var(--muted); }
.footer__legal { display: flex; gap: 28px; }
.footer__top-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--brand); }

/* Start a project page (canvas: "Start a project page") */
.page-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 29px 0; }
.btn--md { padding: 14px 28px; font-size: 20px; }
.start { padding: 0 40px; }
.start__hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 40px;
  max-width: 1263px; margin: 31px auto 0; padding: 80px 72px 150px; border-radius: 32px; color: #fff;
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(150deg, var(--brand-hi) 0%, var(--brand) 45%, var(--brand-lo) 100%);
  box-shadow: inset 0 2px 10px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 24px 60px rgba(81, 78, 255, 0.3);
}
.start__hero .cta__copy { max-width: 760px; }
.start__hero h1 { font-size: 56px; font-weight: 800; line-height: 1.08; letter-spacing: -1.8px; }
.start__hero .cta__copy p { max-width: 600px; font-size: 18px; }
.contact-cards--row li { flex-direction: row; align-items: center; gap: 16px; padding: 20px 24px; }
.start__blocks {
  position: absolute; left: 0; right: 0; bottom: 0; height: 210px; z-index: -1;
  background: url("../img/pixel-blocks.webp") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 60%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 60%, #000 100%);
}
.start__body { display: flex; align-items: flex-start; gap: 32px; max-width: var(--content); margin: 78px auto 0; }
.enquiry {
  flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 40px; border-radius: 24px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 32px rgba(81, 78, 255, 0.1);
}
.enquiry__head { display: flex; flex-direction: column; gap: 8px; }
.enquiry__head h2 { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.6px; color: var(--heading); }
.enquiry__head p { font-size: 16px; line-height: 1.55; color: var(--body); }
.enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { padding: 0; font-size: 14px; font-weight: 600; color: var(--heading); }
legend.field__label { margin-bottom: 12px; }
.field__hint { font-weight: 400; color: #9a98b5; }
.field input:not([type="radio"]), .field textarea {
  width: 100%; height: 52px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--field); font-size: 16px; color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--line-brand); outline: none; transition: box-shadow 160ms var(--ease-out);
}
.field textarea { height: auto; min-height: 150px; padding: 16px 18px; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9a98b5; }
.field input:not([type="radio"]):focus, .field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 500; color: var(--heading); box-shadow: inset 0 0 0 1px rgba(20, 18, 58, 0.12);
  transition-property: background-color, color, box-shadow, transform; transition-duration: 160ms; transition-timing-function: var(--ease-out);
}
.chip__check { display: none; font-size: 16px; }
.chip input:checked + span {
  color: #fff; background: var(--shade), var(--brand);
  box-shadow: inset 3px 2px 6px rgba(255, 255, 255, 0.85), 0 6px 14px rgba(81, 78, 255, 0.3);
}
.chip input:checked + span .chip__check { display: block; }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
.chip input:active + span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked):hover + span { box-shadow: inset 0 0 0 1px var(--line-brand); } }
.enquiry__submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.enquiry__note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--body); }
.enquiry .form-status:not(:empty) { margin-top: -12px; }
.start__side { flex: 2 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.steps { display: flex; flex-direction: column; gap: 24px; padding: 28px; border-radius: var(--radius-card); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.steps h2, .call-card h2 { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--heading); }
.steps ol { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 16px; }
.steps__n { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 18px; background: var(--toggle); color: var(--brand); font-size: 15px; font-weight: 600; }
.steps h3 { font-size: 17px; font-weight: 600; color: var(--heading); }
.steps p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--body); }
.call-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: var(--radius-card);
  background: var(--shade), var(--brand);
  box-shadow: inset 2px 2px 8px #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 12px 28px rgba(81, 78, 255, 0.3);
}
.call-card .badge { margin-bottom: 8px; }
.call-card h2 { color: #fff; }
.call-card p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); margin-bottom: 8px; }

/* Error page */
.error-page { display: grid; place-content: center; justify-items: center; gap: 16px; min-height: 100dvh; padding: 24px; text-align: center; }
.error-page__code { font-size: 96px; font-weight: 800; letter-spacing: -3px; color: var(--brand); }
.error-page h1 { font-size: 32px; font-weight: 600; color: var(--heading); }

/* ── States: loading, errors, success, empty, copy, toasts (all from the existing kit) ── */

/* Buttons: label and spinner share one cell so the width never jumps. */
.btn { position: relative; }
.btn__label { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex-wrap: nowrap; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
.btn__spinner {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; opacity: 0; transform: scale(0.6);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .btn__label { opacity: 0; transform: translateY(-4px); }
.btn[aria-busy="true"] .btn__spinner { opacity: 1; transform: none; animation: spin 700ms linear infinite; }
.btn.is-done { pointer-events: none; }
@keyframes spin { to { rotate: 360deg; } }

/* Invalid submit: one short shake, horizontal only. */
.is-shaking { animation: shake 320ms var(--ease-out); }
@keyframes shake { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

/* Field errors */
.field__error {
  display: flex; align-items: flex-start; gap: 6px; min-height: 0; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: #c0244d;
}
.field__error:empty { display: none; }
.field__error .icon { flex: none; margin-top: 1px; font-size: 15px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #c0244d; background: #fff7f9; }
.field__label--split { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__count { font-size: 13px; font-weight: 400; color: #9a98b5; font-variant-numeric: tabular-nums; transition: color 160ms var(--ease-out); }
.field__count.is-warn { color: #c0244d; }

/* Chips: the check pops in from a small scale, never from zero. */
.chip input:checked + span .chip__check { animation: pop 200ms var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }

/* Enquiry success */
.enquiry__success { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 8px 0; }
.enquiry__success[hidden] { display: none; }
.enquiry.is-sent > :not(.enquiry__success) { display: none; }
.enquiry__success h2 { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.6px; color: var(--heading); outline: none; }
.enquiry__success p { max-width: 520px; font-size: 16px; line-height: 1.55; color: var(--body); }
.enquiry__success-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.success-check { width: 64px; height: 64px; padding: 6px; border-radius: 50%; background: var(--toggle); }
.success-check circle { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 500ms var(--ease-out) forwards; }
.success-check path { fill: none; stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw 300ms var(--ease-out) 350ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.enquiry.is-sent .enquiry__success { animation: rise 400ms var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* Newsletter done */
.newsletter__field.is-done { box-shadow: inset 0 0 0 1.5px var(--brand); }
.newsletter__field.is-done input { color: var(--body); }
.newsletter__field input[aria-invalid="true"] { color: #c0244d; }
.newsletter__field:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px #c0244d; }

/* Copy buttons on contact cards */
.contact-cards li { position: relative; }
.copy-btn {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; margin-left: auto; border-radius: 18px;
  color: #fff; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); font-size: 16px;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (min-width: 1101px) { .cta .copy-btn { position: absolute; top: 20px; right: 20px; } }
.copy-btn .icon { grid-area: 1 / 1; transition: opacity 150ms var(--ease-out), transform 200ms var(--ease-out); }
.copy-btn__done { opacity: 0; transform: scale(0.6); }
.copy-btn.is-copied .copy-btn__copy { opacity: 0; transform: scale(0.6); }
.copy-btn.is-copied .copy-btn__done { opacity: 1; transform: none; }
.copy-btn:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .copy-btn:hover { background: rgba(255, 255, 255, 0.2); } }

/* Toasts */
.toasts { position: fixed; z-index: 60; left: 50%; bottom: 24px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 500; box-shadow: 0 12px 32px rgba(18, 10, 38, 0.3);
  opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out);
}
.toast .badge { width: 24px; height: 24px; font-size: 13px; box-shadow: none; }
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(6px); transition-duration: 150ms; }
.toast--error .badge { color: #c0244d; }

/* Image loading: shimmer until the picture arrives, quiet fallback if it fails. */
.project::before, .service__top img.is-loading {
  background: linear-gradient(100deg, var(--toggle) 30%, #f7f6ff 50%, var(--toggle) 70%) 0 0 / 200% 100%;
}
.project::before { content: ""; position: absolute; inset: 0; z-index: 0; animation: shimmer 1.4s linear infinite; transition: opacity 300ms var(--ease-out); }
.project.is-loaded::before, .project.is-broken::before { opacity: 0; animation: none; }
.project img { position: relative; z-index: 0; opacity: 0; transition: opacity 400ms var(--ease-out); }
.project.is-loaded img { opacity: 1; }
.project.is-broken { background: linear-gradient(150deg, var(--brand-hi), var(--brand-lo)); }
.no-js .project img, .project:not([data-watch]) img { opacity: 1; }
.project__bar { z-index: 1; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Empty gallery */
.empty-card {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 520px; margin: 48px auto 96px;
  padding: 40px 32px; border-radius: 24px; background: #fff; text-align: center; box-shadow: inset 0 0 0 1px var(--line), 0 12px 32px rgba(81, 78, 255, 0.1);
}
.empty-card .badge { width: 52px; height: 52px; font-size: 24px; margin-bottom: 4px; }
.empty-card h3 { font-size: 22px; font-weight: 600; color: var(--heading); }
.empty-card p { font-size: 16px; line-height: 1.55; color: var(--body); margin-bottom: 8px; }

/* Error pages */
.error-page { min-height: calc(100dvh - 80px); }
.badge--lg { width: 64px; height: 64px; font-size: 28px; }
.error-page__mark { width: 140px; height: 140px; margin-bottom: -8px; }
.error-page__line { max-width: 460px; font-size: 17px; line-height: 1.5; color: var(--body); }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* Cookie consent (UK GDPR / PECR): analytics cookie only after "Accept" */
.cookies {
  position: fixed; z-index: 55; left: 24px; bottom: 24px; width: min(400px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 14px;
  padding: 22px; border-radius: 20px; background: #fff; color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px rgba(31, 28, 168, 0.18);
  opacity: 0; transform: translateY(12px); transition: opacity 240ms var(--ease-out), transform 280ms var(--ease-out);
}
.cookies[hidden] { display: none; }
.cookies.is-in { opacity: 1; transform: none; }
.cookies.is-out { opacity: 0; transform: translateY(8px); transition-duration: 150ms; }
.cookies__head { display: flex; align-items: center; gap: 12px; }
.cookies__head .badge { width: 40px; height: 40px; font-size: 18px; }
.cookies h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }
.cookies > p { font-size: 14px; line-height: 1.55; color: var(--body); }
.cookies__custom { display: flex; flex-direction: column; gap: 4px; padding: 6px 14px; border-radius: 14px; background: var(--field); }
.cookies__custom[hidden] { display: none; }
.cookies__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.cookies__row + .cookies__row { border-top: 1px solid var(--line); }
.cookies__row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.cookies__row strong { font-size: 14px; font-weight: 600; }
.cookies__row small { font-size: 12px; color: var(--body); }
.cookies__always { font-size: 12px; font-weight: 600; color: var(--brand); }
.cookies__switch { appearance: none; position: relative; width: 36px; height: 20px; flex: none; margin: 0; border-radius: 10px; background: var(--lilac); cursor: pointer; transition: background-color 200ms var(--ease-out); }
.cookies__switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ease-out); }
.cookies__switch:checked { background: var(--brand); }
.cookies__switch:checked::after { transform: translateX(16px); }
.cookies__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cookies__actions .btn--sm { padding: 10px 18px; font-size: 15px; }
.cookies__link, .footer__cookie-link { font-size: 14px; font-weight: 500; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.cookies__link { margin-left: auto; }
.footer__cookie-link { color: var(--muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer__cookie-link:hover { color: var(--brand); } }
@media (max-width: 640px) {
  .cookies { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px; }
  .cookies__actions .btn--sm { flex: 1; }
  .cookies__link { margin-left: 0; }
}

/* Scroll reveals (only when JS is running, so content never hides without it) */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Tablet (canvas: Tablet 768) */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .services { padding: 80px var(--gutter); }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .rain--up span:nth-child(2n), .rain--down span:nth-child(2n) { display: none; }
  .carousel { --spread: 435px; }
  .faq { flex-direction: column; gap: 40px; padding: 40px var(--gutter) 80px; }
  .faq__intro { position: relative; flex: none; padding-right: 170px; }
  .faq__intro > p { max-width: 440px; }
  .faq__mark { position: absolute; right: 0; top: 0; width: 150px; height: 150px; margin: 0; }
  .cta { padding: 24px 24px 0; }
  .cta__card { padding: 64px 40px 120px; }
  .contact-cards { grid-template-columns: 1fr; gap: 12px; }
  .contact-cards li { flex-direction: row; align-items: center; gap: 16px; padding: 20px; }
  .newsletter { flex-direction: column; align-items: stretch; gap: 20px; }
  .newsletter__field { width: 100%; }
  .footer { padding: 96px 24px 40px; }
}

@media (max-width: 1100px) {
  .start { padding: 0 24px; }
  .start__hero { padding: 64px 40px 140px; }
  .start__body { flex-direction: column; align-items: stretch; margin-top: 56px; }
  .start__side { flex-direction: row; }
  .start__side > * { flex: 1 1 0; }
}

@media (max-width: 860px) {
  .preheader__more { display: none; }
}

/* Mobile (canvas: Mobile 390) */
@media (max-width: 640px) {
  .preheader__inner { gap: 8px; }
  .preheader__copy { font-size: 12px; }
  .preheader__confetti--right { display: none; }
  .preheader__confetti--left { opacity: 0.45; }

  .hero { height: 516px; }
  .hero__ring { width: 640px; top: 76px; }
  .hero__clouds { top: 246px; height: 330px; }
  .topbar { inset: 18px 20px auto; }
  .topbar__logo .logo { width: 34px; height: 40px; }
  .notch-btn { width: 170px; height: 38.8px; }
  .notch-btn__label { left: 19px; top: 9.5px; font-size: 16.3px; line-height: 20px; }
  .notch-btn__arrow { left: 142.5px; top: 11.2px; font-size: 16.3px; }
  .hero__content { padding-top: 86px; }
  .hero__wordmark { width: 300px; margin-bottom: 4px; }
  .hero__title { gap: 7px; letter-spacing: -0.9px; }
  .hero__line { font-size: min(29.2px, 7.4vw); }
  .hero__line--pill { font-size: min(30.4px, 7.7vw); }
  .hero__ctas { margin-top: 25px; gap: 13px; }
  .hero__ctas .btn--lg { padding: 11px 23px; font-size: 19.3px; }
  .stack { left: -6px; top: 346px; scale: 0.625; transform-origin: 0 0; }
  .hero__devices { width: 190px; top: 356px; }

  .services { gap: 40px; padding: 64px 20px; }
  .services__grid { grid-template-columns: 1fr; gap: 12px; }
  .section-head h2, .faq__intro h2 { font-size: 30px; letter-spacing: -0.6px; }
  .section-head p, .faq__intro > p { font-size: 15px; }
  .rain--up { display: none; }
  .rain--down span:nth-child(3n) { display: none; }

  .gallery { padding-top: 56px; }
  .rain--down { height: 240px; opacity: 0.5; }
  .carousel { --spread: 302px; --lift: 25px; --far-lift: 60px; --card-scale: 0.777; height: 372px; margin-top: 20px; }
  .project { top: -20px; }
  .carousel__nav { top: 290px; }
  .carousel__dots { top: 352px; }
  .carousel__play { top: 344px; }

  .faq { padding: 32px 20px 64px; gap: 32px; }
  .faq__intro { padding-right: 0; }
  .faq__intro h2 { max-width: 240px; }
  .faq__mark { left: auto; right: 0; top: 0; width: 96px; height: 96px; }
  .faq-item__q { padding: 20px; font-size: 18px; min-height: 0; }
  .faq-item__a p { padding: 0 20px 20px; font-size: 15px; }

  .cta { padding: 16px 12px 0; }
  .cta__card { gap: 32px; padding: 48px 20px 100px; border-radius: 28px; }
  .cta__copy h2 { font-size: 28px; letter-spacing: -0.8px; }
  .cta__copy p { font-size: 15px; }
  .cta__buttons { flex-direction: column; width: 100%; gap: 12px; }
  .cta__buttons .btn { width: 100%; }
  .cta__buttons .btn--lg { padding: 13px 24px; font-size: 20px; }
  .newsletter { padding: 24px; }
  .newsletter__field { padding-left: 16px; }
  .newsletter__field input[type="email"] { font-size: 15px; }
  .newsletter__field .btn { padding: 11px 16px; font-size: 15px; }

  .footer { padding: 64px 20px 32px; gap: 40px; }
  .footer__brand { min-width: 0; }
  .footer__links { gap: 32px 40px; }
  .footer__wordmark { font-size: min(52px, 13.4vw); }
}

@media (max-width: 640px) {
  .page-top { padding: 18px 20px 0; }
  .page-top .btn { padding: 10px 16px; font-size: 15px; }
  .page-top .logo { width: 34px; height: 40px; }
  .start { padding: 0 12px; }
  .start__hero { margin-top: 24px; gap: 32px; padding: 48px 20px 120px; border-radius: 28px; }
  .start__hero h1 { font-size: 32px; letter-spacing: -0.9px; }
  .start__hero .cta__copy p { font-size: 15px; }
  .start__body { margin-top: 40px; }
  .start__side { flex-direction: column; }
  .enquiry { padding: 24px; gap: 24px; }
  .enquiry__row { grid-template-columns: 1fr; }
  .enquiry__head h2 { font-size: 24px; }
  .enquiry__submit .btn { width: 100%; }
}

/* Small phones (320 to 380) */
@media (max-width: 380px) {
  .preheader__icon { display: none; }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn--lg { padding: 10px 18px; font-size: 16px; }
  .notch-btn { scale: 0.9; transform-origin: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}