/* Axor — one body of lit water. The axolotl swims through the whole page and the light changes with each scene. */

/* the scene colours are typed so the light can fade from one scene to the next */
@property --w0 { syntax: "<color>"; inherits: true; initial-value: #2a0f3d; }
@property --w1 { syntax: "<color>"; inherits: true; initial-value: #f06ec8; }
@property --w2 { syntax: "<color>"; inherits: true; initial-value: #9a5cff; }
@property --w3 { syntax: "<color>"; inherits: true; initial-value: #b0309a; }
@property --w4 { syntax: "<color>"; inherits: true; initial-value: #5b2bd0; }
@property --halo { syntax: "<color>"; inherits: true; initial-value: #9b5cff; }

:root {
  --plum: #21112F;
  --violet: #8950E8;
  --orchid: #E97BC8;
  --lavender: #D8C5F5;
  --paper: #FAF7FC;
  --deep-violet: #5a2fb0;

  --font-text: "Manrope", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, serif;

  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-sub: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --step-head: clamp(2.75rem, 1.4rem + 4.6vw, 6rem);
  --step-display: clamp(2.75rem, 6.3vw, 7rem);

  --margin: clamp(1rem, 3vw, 3.75rem);
  --gutter: clamp(1rem, 2vw, 2rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* chrome that floats over every scene */
  --glass-bg: rgba(44, 16, 62, 0.42);
  --glass-line: rgba(255, 235, 250, 0.3);
  --chrome-ink: var(--paper);

  /* the creature's pose; each scene sets its own */
  --cx: 0vw; --cy: 0vh; --cs: 1; --cr: 0deg; --co: 1; --cf: 1;

  /* scene light */
  --w0: #2a0f3d; --w1: #f06ec8; --w2: #9a5cff; --w3: #b0309a; --w4: #5b2bd0;
}

/* ---------- the scenes: light and pose ---------- */
html[data-scene="hero"]    { --w0: #2c0f40; --w1: #f070cc; --w2: #9b5cff; --w3: #b4339d; --w4: #5b2bd0; }
html[data-scene="intro"]   { --w0: #200c33; --w1: #c9479f; --w2: #6d35d8; --w3: #7d2378; --w4: #e97bc8;
  --cx: 31vw; --cy: 26vh; --cs: 0.62; --cr: -24deg; --co: 0.9; }
html[data-scene="services"]{ --w0: #1d0d3e; --w1: #8950e8; --w2: #d26bd8; --w3: #3d1d8f; --w4: #b07cf5;
  --cx: -22vw; --cy: 18vh; --cs: 0.58; --cr: -4deg; --co: 1; }
html[data-scene="calc"]    { --w0: #3b1d63; --w1: #f3b8f0; --w2: #9b74e0; --w3: #c96fc4; --w4: #fbe3ff;
  --cx: 27vw; --cy: 30vh; --cs: 1.25; --cr: -16deg; --co: 0.9;
  --glass-bg: rgba(255, 255, 255, 0.62); --glass-line: rgba(255, 255, 255, 0.9); --chrome-ink: var(--plum); }
html[data-scene="work"]    { --w0: #3f1147; --w1: #e45fb8; --w2: #9a4ee0; --w3: #7b1f74; --w4: #f08ad0;
  --cx: 30vw; --cy: 40vh; --cs: 1.9; --cr: -10deg; --co: 0.85; }
html[data-scene="process"] { --w0: #1c0f45; --w1: #7b4be6; --w2: #e97bc8; --w3: #2e1a7a; --w4: #a77df0;
  --cx: -4vw; --cy: 56vh; --cs: 0.95; --cr: 8deg; --cf: -1; --co: 0.5; }
html[data-scene="about"]   { --w0: #4a1550; --w1: #f08ad0; --w2: #a35de8; --w3: #c2449f; --w4: #6a2bd0;
  --cx: -30vw; --cy: 2vh; --cs: 0.95; --cr: -8deg; --co: 0.9; }
html[data-scene="faq"]     { --w0: #3a1e66; --w1: #f6c6f2; --w2: #a682e6; --w3: #d07ac9; --w4: #fff0ff;
  --cx: 33vw; --cy: -6vh; --cs: 0.6; --cr: 22deg; --co: 0.75;
  --glass-bg: rgba(255, 255, 255, 0.62); --glass-line: rgba(255, 255, 255, 0.9); --chrome-ink: var(--plum); }
html[data-scene="cta"]     { --w0: #4b1257; --w1: #ff7fd4; --w2: #a35cff; --w3: #d1389f; --w4: #6c2ce0;
  --cy: -6vh; --cs: 0.92; --co: 1; }
html[data-scene="foot"]    { --w0: #170a24; --w1: #8b3a9a; --w2: #5a2fb0; --w3: #3a1450; --w4: #e97bc8;
  --cy: 24vh; --cs: 0.75; --co: 0.35; }

/* ---------- the services: each one wears its own axolotl morph, and the water follows ---------- */
:root { --halo: #9b5cff; }
.world { transition: --w0 1.4s ease, --w1 1.4s ease, --w2 1.4s ease, --w3 1.4s ease, --w4 1.4s ease, --halo 1.3s ease; }
html[data-scene="services"][data-morph="zafiro"]    { --w0: #0a1036; --w1: #2b4fd6; --w2: #5a3fd0; --w3: #10206e; --w4: #d9b25a; --halo: #3a5cff; }
/* a black axolotl needs light behind it: the water brightens and the halo turns ivory */
html[data-scene="services"][data-morph="onix"]      { --w0: #3a2c52; --w1: #b9a6e6; --w2: #7b5fd0; --w3: #5a3f8a; --w4: #f3ecff; --halo: #efe6ff; }
html[data-scene="services"][data-morph="esmeralda"] { --w0: #06241e; --w1: #138a66; --w2: #3f3fae; --w3: #0b4a3c; --w4: #e3bb5c; --halo: #1fb184; }
html[data-scene="services"][data-morph="borgona"]   { --w0: #2a0715; --w1: #a3214f; --w2: #6a2a9a; --w3: #5a0f2c; --w4: #f2b49c; --halo: #c8335f; }
html[data-scene="services"][data-morph="champan"]   { --w0: #261807; --w1: #b98a3a; --w2: #6a3f8a; --w3: #4a3010; --w4: #ffe2a8; --halo: #e8c070; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: #1c0e2a; }
body { margin: 0; background: #1c0e2a; color: var(--paper); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 6rem; }
::selection { background: var(--orchid); color: var(--plum); }
:focus-visible { outline: 3px solid var(--orchid); outline-offset: 3px; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
.nums, .num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: 0.75rem 1rem; background: var(--paper); color: var(--plum); border-radius: 999px; }
.skip:focus { top: 1rem; }

.glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border: 1px solid var(--glass-line); color: var(--chrome-ink);
  transition: background-color 1.2s ease, border-color 1.2s ease, color 1.2s ease; }

/* ---------- the world: water, light, the creature ---------- */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos { position: absolute; inset: -6%; background: var(--w0);
  transform: translate3d(calc(var(--gx, 0) * -14px), calc(var(--gy, 0) * -14px), 0); transition: transform 1.2s var(--ease-out); }
.glow { position: absolute; border-radius: 50%; will-change: transform; }
.g1 { width: 72vmax; height: 72vmax; left: -24vmax; top: -30vmax; background: radial-gradient(closest-side, var(--w1), transparent); opacity: 0.85; animation: drift-a 44s ease-in-out infinite alternate; }
.g2 { width: 66vmax; height: 80vmax; right: -24vmax; top: -18vmax; background: radial-gradient(closest-side, var(--w2), transparent); opacity: 0.85; animation: drift-b 52s ease-in-out infinite alternate; }
.g3 { width: 80vmax; height: 56vmax; left: 4vmax; bottom: -34vmax; background: radial-gradient(closest-side, var(--w3), transparent); opacity: 0.8; animation: drift-c 39s ease-in-out infinite alternate; }
.g4 { width: 38vmax; height: 38vmax; left: 38vw; top: 18vh; background: radial-gradient(closest-side, var(--w4), transparent); opacity: 0.45; animation: drift-d 33s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-12vw, 14vh, 0) scale(0.9); } }
@keyframes drift-c { to { transform: translate3d(10vw, -12vh, 0) scale(1.1); } }
@keyframes drift-d { 0% { transform: translate3d(-20vw, 8vh, 0) scale(0.8); } 100% { transform: translate3d(22vw, -12vh, 0) scale(1.25); } }

/* shafts of light falling through the water */
.beam { position: absolute; top: -20vh; height: 150vh; border-radius: 50%; mix-blend-mode: screen; transform-origin: 50% 0; will-change: transform, opacity;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 230, 250, 0.3), rgba(255, 210, 245, 0.07) 55%, transparent 80%); }
.b1 { left: 8vw; width: 11vw; animation: sway-a 34s ease-in-out infinite alternate; }
.b2 { left: 70vw; width: 16vw; animation: sway-b 46s ease-in-out infinite alternate; opacity: 0.7; }
.b3 { left: 44vw; width: 6vw; animation: sway-c 27s ease-in-out infinite alternate; opacity: 0.5; }
@keyframes sway-a { 0% { transform: rotate(14deg); opacity: 0.35; } 100% { transform: rotate(4deg); opacity: 0.85; } }
@keyframes sway-b { 0% { transform: rotate(-16deg); opacity: 0.8; } 100% { transform: rotate(-5deg); opacity: 0.3; } }
@keyframes sway-c { 0% { transform: rotate(6deg); opacity: 0.15; } 100% { transform: rotate(-6deg); opacity: 0.6; } }

/* particles in suspension, some in focus, some not */
.motes { position: absolute; inset: 0; }
.motes span { position: absolute; bottom: -4vh; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 252, 0.95), rgba(255, 210, 245, 0) 70%);
  animation: rise var(--t, 30s) linear var(--delay, 0s) infinite; will-change: transform, opacity; }
@keyframes rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--o, 0.7); }
  50% { transform: translate3d(var(--sway, 3vw), -55vh, 0); }
  88% { opacity: var(--o, 0.7); }
  100% { transform: translate3d(0, -112vh, 0); opacity: 0; }
}

.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(20, 6, 30, 0.35)); }

.creature { position: absolute; left: 50%; top: 50%; margin: 0; height: min(150svh, 190vw); aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%) translate3d(var(--cx), var(--cy), 0) rotate(var(--cr)) scale(calc(var(--cs) * var(--cf)), var(--cs));
  opacity: var(--co); mix-blend-mode: screen; /* without WebGL the footage is shown as is: screen drops its black */
  transition: transform 1.9s var(--ease-in-out), opacity 1.4s ease; transform-origin: 50% 46%; will-change: transform, opacity; }
/* the 3D axolotl (axolotl3d.js): a full-screen canvas in the water; the video version steps aside */
.axolotl-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.has-3d .creature, .has-3d .closeup { display: none; }
/* camera.js drives the pose every frame, in step with the scroll */
.cam-js .creature { transition: none; }
.creature-depth { width: 100%; height: 100%;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 900ms var(--ease-out); }
/* morph.js swims .float on every frame (idle path + scroll lean). Until it runs, or if it can't, a CSS swim stands in */
.float { position: relative; width: 100%; height: 100%; will-change: transform; animation: swim-css 11s ease-in-out infinite; }
@keyframes swim-css {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(4%, -3%, 0) rotate(4deg); }
  50% { transform: translate3d(-1%, -5%, 0) rotate(-2deg); }
  75% { transform: translate3d(-4%, -1%, 0) rotate(-5deg); }
}
.creature-img, .creature-bloom { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.creature-bloom { z-index: 2; filter: blur(36px) saturate(1.6); opacity: 0.45; transform: scale(1.05); mix-blend-mode: screen; animation: breathe 6s ease-in-out infinite; }
.creature-video { z-index: 1; opacity: 0; transition: opacity 600ms ease; background: #000; }
.creature-video.is-playing { opacity: 1; }
@keyframes breathe { 50% { opacity: 0.62; transform: scale(1.09); } }

/* helper videos only feed the shader: never shown, whatever happens to WebGL */
.creature-aux { opacity: 0.001 !important; pointer-events: none; }
/* recoloured live: the canvas carries its own transparency, so the screen blend is no longer needed */
.creature.has-gl { mix-blend-mode: normal; }
.creature.has-gl .creature-img, .creature.has-gl .creature-bloom { opacity: 0 !important; animation: none; }
.creature.has-gl .creature-video { opacity: 0.001 !important; }
/* its glow is drawn by the shader: a CSS drop-shadow here would be re-rasterised on every video frame */
.creature-gl { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }
.halo { position: absolute; left: 50%; top: 44%; width: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 70%, transparent), color-mix(in srgb, var(--halo) 22%, transparent) 55%, transparent);
  opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
html[data-scene="services"] .halo { opacity: 0.85; }
html[data-scene="services"][data-morph="onix"] .halo { opacity: 1; }


/* the close-up: its own footage of the face, shown only in the work scene; edges feathered so the frame never shows */
.closeup { position: absolute; right: 3vw; top: 50%; width: min(78vw, 150vh); aspect-ratio: 16 / 9; margin: 0; mix-blend-mode: screen; opacity: 0;
  transform: translateY(-46%) scale(0.92); transition: opacity 1.4s ease, transform 1.9s var(--ease-in-out);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.closeup video { width: 100%; height: 100%; object-fit: cover; background: #000; }
html[data-scene="work"] .closeup { opacity: 0; }


/* ---------- chrome: pill nav, language, index ---------- */
.nav-wrap { position: fixed; inset: 1.25rem var(--margin) auto; z-index: 20; display: flex; justify-content: center; pointer-events: none; }
.pill-nav { pointer-events: auto; display: flex; align-items: center; gap: 1.6rem; padding: 0.45rem 0.5rem 0.45rem 1.4rem; border-radius: 999px; font-size: 1rem; font-weight: 500;
  background: var(--glass-bg); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border: 1px solid var(--glass-line); color: var(--chrome-ink);
  transition: background-color 1.2s ease, border-color 1.2s ease, color 1.2s ease; }
.pill-mark { display: flex; }
.symbol { width: 2.6rem; height: auto; transition: transform 400ms var(--ease-out), filter 1.2s ease; }
html[data-scene="calc"] .symbol, html[data-scene="faq"] .symbol { filter: brightness(0.3) saturate(2) hue-rotate(10deg); }
@media (hover: hover) and (pointer: fine) { .pill-mark:hover .symbol { transform: rotate(-8deg) scale(1.08); } }
.pill-sep { width: 1px; height: 1.6rem; background: currentColor; opacity: 0.3; }
.pill-link { text-decoration: none; opacity: 0.86; transition: opacity 180ms ease; }
@media (hover: hover) and (pointer: fine) { .pill-link:hover { opacity: 1; } }
.pill-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.3rem; border-radius: 999px; border: 1px solid currentColor; text-decoration: none; font-weight: 700; transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pill-cta:hover { background: var(--chrome-ink); color: var(--w0); } }
.pill-cta:active, .ghost:active, .button:active { transform: scale(0.97); }
.lang { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: auto; min-width: 3.25rem; min-height: 3.25rem; padding: 0 1rem; border-radius: 999px; font-weight: 700; font-size: var(--step-small);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--glass-line); color: var(--chrome-ink); transition: background-color 400ms ease, color 1.2s ease; }
@media (hover: hover) and (pointer: fine) { .lang:hover { background: rgba(137, 80, 232, 0.45); } }

.scene-index { position: fixed; left: var(--margin); bottom: 2rem; z-index: 20; padding: 0.9rem 1rem; border-radius: 20px; font-size: 0.875rem; }
.scene-index ol { display: grid; gap: 0.15rem; }
.scene-index a { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.8rem 0.3rem 0.5rem; border-radius: 999px; text-decoration: none; opacity: 0.62; border: 1px solid transparent;
  transition: opacity 300ms ease, border-color 300ms ease, background-color 300ms ease; }
@media (hover: hover) and (pointer: fine) { .scene-index a:hover { opacity: 1; } }
.scene-index a.is-current { opacity: 1; border-color: currentColor; font-weight: 700; }
.dots { width: 0.6rem; height: 0.6rem; flex: none; opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 0 / 50% 50%; }
.scene-index a.is-current .dots { opacity: 1; }

/* ---------- scenes: shared ---------- */
main, .foot { position: relative; z-index: 1; }
.scene { position: relative; min-height: 100svh; padding: clamp(7rem, 14vh, 10rem) var(--margin) clamp(5rem, 10vh, 8rem); }
.head { font-size: var(--step-head); line-height: 1; letter-spacing: -0.035em; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.5rem; padding: 0 1.75rem; border-radius: 999px; border: 1.5px solid currentColor; text-decoration: none; font-weight: 700;
  transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--paper); color: var(--plum); border-color: var(--paper); } }
.button-ink { background: var(--plum); color: var(--paper); border-color: var(--plum); }
@media (hover: hover) and (pointer: fine) { .button-ink:hover { background: var(--deep-violet); border-color: var(--deep-violet); color: var(--paper); } }
.button-big { min-height: 4rem; padding: 0 2.25rem; font-size: 1.125rem; background: var(--paper); color: var(--plum); border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .button-big:hover { background: transparent; color: var(--paper); } }
.button { padding-right: 0.45rem; }
.button::after { content: "↗"; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-left: 0.6rem; border-radius: 12px; background: var(--paper); color: var(--plum); font-weight: 700;
  transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .button:hover::after { transform: rotate(45deg); } }
.button-ink::after { background: var(--paper); color: var(--plum); }
@media (hover: hover) and (pointer: fine) { .button-big::after, .button:hover::after { background: var(--plum); color: var(--paper); } }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: rgba(250, 247, 252, 0.4); transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }
.link-plain { text-decoration: none; }

/* ---------- 1. hero ---------- */
.hero { padding: 0; }
.hero-title { position: absolute; left: var(--margin); right: var(--margin); top: 41%; z-index: 2; text-align: center; font-weight: 600;
  font-size: var(--step-display); line-height: 1.02; letter-spacing: -0.035em; text-shadow: 0 4px 40px rgba(28, 14, 42, 0.4);
  transform: translateY(calc(var(--sp, 0) * -60px)); opacity: calc(1 - var(--sp, 0) * 1.3); }
.hero-title .serif { font-size: 1.16em; letter-spacing: -0.005em; }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.lines [data-line] { display: block; }
.hero-side { position: absolute; right: var(--margin); bottom: 3.5rem; z-index: 2; width: min(25rem, 30vw); display: grid; gap: 1.5rem; justify-items: start; }
.hero-side p { font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 2px 20px rgba(28, 14, 42, 0.5); }
.ghost { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.5rem; padding: 0 1.75rem; border-radius: 999px; border: 1.5px solid var(--paper); color: var(--paper); text-decoration: none; font-weight: 700;
 transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ghost:hover { background: var(--paper); color: var(--plum); } }
.explore { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: 0.35rem; font-size: var(--step-small); text-decoration: none; }
.chev { position: relative; width: 0.9rem; height: 1.2rem; }
.explore { opacity: calc(1 - var(--sp, 0) * 2.5); }
.chev::before, .chev::after { content: ""; position: absolute; left: 50%; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(-50%) rotate(45deg); }
.chev::before { top: 0; opacity: 0.5; }
.chev::after { top: 0.4rem; }

/* ---------- 2. intro ---------- */
.intro .board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; min-height: calc(100svh - 14rem); }
.tile-a { grid-column: 1 / span 7; }
.slogan { font-size: clamp(3.25rem, 1.6rem + 6.4vw, 8.5rem); line-height: 0.95; letter-spacing: -0.045em; }
.slogan > span:last-child { font-family: var(--font-serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; color: #ffd2f0; }
.tile-b { grid-column: 9 / span 4; justify-self: end; align-self: start; }
.tile-word { font-size: clamp(4.5rem, 2rem + 9vw, 11rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  color: #ffd2f0; }
.tile-c { grid-column: 1 / span 3; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255, 235, 250, 0.45); box-shadow: 0 0 0 10px rgba(255, 235, 250, 0.06), 0 30px 80px rgba(20, 6, 30, 0.45); }
.tile-c img { width: 100%; height: 100%; object-fit: cover; }
.tile-text { grid-column: 2 / span 8; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; background: rgba(46, 14, 64, 0.62); border: 1px solid rgba(255, 235, 250, 0.28); }
.statement-text { font-size: var(--step-sub); line-height: 1.35; letter-spacing: -0.01em; }

/* ---------- 3. services ---------- */
.features .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.features-aside { grid-column: 1 / span 4; position: sticky; top: 8rem; align-self: start; height: calc(100svh - 10rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.features-title { font-size: clamp(2.5rem, 1rem + 2.7vw, 4.4rem); line-height: 1; letter-spacing: -0.035em; text-shadow: 0 4px 40px rgba(28, 14, 42, 0.5); }
.morph-tag { align-self: start; display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.9rem; align-items: baseline; padding: 0.9rem 1.2rem; border-radius: 20px;
  background: rgba(44, 16, 62, 0.8); border: 1px solid rgba(255, 235, 250, 0.3);
  transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out); }
.morph-tag.is-swapping { opacity: 0; translate: 0 6px; }
.morph-num { grid-row: span 2; font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums; opacity: 0.75; }
.morph-name { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 2.2rem; line-height: 1; }
.morph-why { font-size: var(--step-small); opacity: 0.85; }
.cap { transition: border-color 500ms ease, background-color 500ms ease; }
.cap.is-current { border-color: rgba(255, 235, 250, 0.6); background: rgba(50, 17, 70, 0.7); }
.cap-morph { display: inline-flex; align-items: center; gap: 0.55rem; margin: -0.4rem 0 1.25rem; padding: 0.3rem 0.8rem 0.3rem 0.35rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid rgba(255, 235, 250, 0.3); background: rgba(44, 16, 62, 0.35); }
.swatch { width: 1.25rem; height: 1.25rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.sw-zafiro    { background: radial-gradient(circle at 35% 30%, #f0cb72, #1c3fa6 45%, #020a22); }
.sw-onix      { background: radial-gradient(circle at 35% 30%, #f5f2f7, #121116 50%, #020203); }
.sw-esmeralda { background: radial-gradient(circle at 35% 30%, #f1cf7a, #0e6e4e 45%, #01150e); }
.sw-borgona   { background: radial-gradient(circle at 35% 30%, #f8cab4, #7d1638 45%, #170209); }
.sw-champan   { background: radial-gradient(circle at 35% 30%, #fff6dc, #c9a14a 50%, #151217); }
.capabilities { grid-column: 5 / span 8; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); counter-reset: cap; }
.cap { padding: clamp(1.25rem, 2.6vw, 2.25rem); border-radius: 28px; background: rgba(40, 13, 58, 0.62); border: 1px solid rgba(255, 235, 250, 0.28); }
.cap-title { font-size: var(--step-sub); letter-spacing: -0.02em; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.8rem; counter-increment: cap; }
.cap-title::before { content: counter(cap); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 12px; font-size: 1rem; border: 1px solid rgba(255, 235, 250, 0.45); background: rgba(255, 240, 252, 0.1); }
.cap-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: center; }
.cap-flip .ui { order: 2; }
.cap-list { display: grid; gap: 0.7rem; }
.cap-list li { position: relative; padding-left: 1.4rem; line-height: 1.4; }
.cap-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--orchid); }

/* interface fragments: frosted windows of the product, plum ink on paper */
.ui { background: rgba(250, 247, 252, 0.93); color: var(--plum); border-radius: 18px; padding: 1rem; font-size: 0.875rem; line-height: 1.4; box-shadow: 0 24px 60px rgba(20, 6, 30, 0.35); display: grid; gap: 0.6rem; }
.ui-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.8125rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(33, 17, 47, 0.12); }
.ui-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #2fbf71; }
.ui-dot.live { background: #e0457b; }
.bubble { max-width: 85%; padding: 0.55rem 0.8rem; border-radius: 14px; }
.bubble.in { background: #ece3f8; justify-self: start; border-bottom-left-radius: 4px; }
.bubble.out { background: var(--deep-violet); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.ui-foot { font-size: 0.75rem; color: #4a3560; text-align: right; }
.call { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.8rem; }
.call dt { font-weight: 700; color: var(--deep-violet); }
.ui-summary { display: grid; gap: 0.2rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: #fbe8f5; }
.ui-summary b { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a1f5c; }
.ui-crm table { width: 100%; border-collapse: collapse; }
.ui-crm th { text-align: left; font-size: 0.75rem; color: #4a3560; font-weight: 600; padding: 0.35rem 0.3rem; }
.ui-crm td { padding: 0.45rem 0.3rem; border-top: 1px solid rgba(33, 17, 47, 0.08); }
.ui-crm .num { text-align: right; }
.ui-crm tfoot td { font-weight: 800; border-top: 1.5px solid var(--plum); }
.pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.pill.s1 { background: #ece3f8; color: var(--deep-violet); }
.pill.s2 { background: #fbe8f5; color: #7a1f5c; }
.pill.s3 { background: #dff5e9; color: #17643b; }
.flow { display: grid; gap: 0.5rem; }
.flow li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; background: #f3edfa; }
.flow b { color: var(--deep-violet); }
.flow li.done { background: #fbe8f5; }
.flow li.done b { color: #7a1f5c; }
.ui-bar { display: flex; align-items: center; gap: 0.35rem; }
.ui-bar span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #d9cdea; }
.ui-bar em { margin-left: 0.6rem; font-style: normal; font-size: 0.75rem; color: #4a3560; padding: 0.15rem 0.7rem; border-radius: 999px; background: #efe8f7; }
.site { display: grid; gap: 0.5rem; padding: 1.2rem; border-radius: 12px; background: linear-gradient(135deg, #2c0f40, #5a2fb0); color: var(--paper); }
.site-name { font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.site-h { font-family: var(--font-serif); font-weight: 400; font-size: 1.65rem; line-height: 1.05; }
.site-btn { justify-self: start; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--orchid); color: var(--plum); font-weight: 700; }
.site-note { font-size: 0.75rem; opacity: 0.85; }

/* ---------- liquid glass ---------- */
/* clear film over the water: strong blur with saturation, almost no tint, a bright specular rim on top,
   a softer one underneath and a faint inner glow. One recipe for every floating control. */
.lg, .pill-nav, .lang, .scene-index, .skill-dot, .skill-card, .morph-tag {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.09)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.06) !important; backdrop-filter: blur(16px) saturate(1.8) brightness(1.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.65), inset 0 -1px 0.5px rgba(255, 255, 255, 0.16), inset 0 0 22px rgba(255, 255, 255, 0.07), 0 10px 30px rgba(16, 4, 30, 0.28) !important;
  position: relative; isolation: isolate; }
.lg::before, .pill-nav::before, .lang::before, .scene-index::before, .skill-dot::before, .skill-card::before, .morph-tag::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 70% at 25% 0%, rgba(255, 255, 255, 0.22), transparent 55%); }
html[data-scene="calc"] .pill-nav, html[data-scene="faq"] .pill-nav, html[data-scene="calc"] .lang, html[data-scene="faq"] .lang,
html[data-scene="calc"] .scene-index, html[data-scene="faq"] .scene-index { background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45)) !important; }
.lang { position: absolute; }
.scene-index { position: fixed; }

/* ---------- 3b. skills: a button per skill, a live demo of each ---------- */
html[data-scene="skills"] { --w0: #1e0b36; --w1: #8950e8; --w2: #e97bc8; --w3: #2d1470; --w4: #b07cf5; }
.skills-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; min-height: calc(100svh - 14rem); }
.skills-intro { grid-column: 1 / span 5; display: grid; gap: 1.25rem; align-content: start; }
.skills-title { font-size: clamp(2.4rem, 0.6rem + 3.4vw, 4.4rem); line-height: 1; letter-spacing: -0.035em; }
.skills-title > span:last-child { font-family: var(--font-serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; }
.skills-hint { opacity: 0.85; }
.skill-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.25rem; }
.skill-tab { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-width: 0; min-height: 2.85rem; padding: 0.45rem 0.85rem; border-radius: 14px; text-align: left; color: var(--paper); font-weight: 600; font-size: 0.9375rem; line-height: 1.15; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.45);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out); }
.skill-tab:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .skill-tab:hover { border-color: rgba(255, 255, 255, 0.4); } }
.skill-tab-n { font-size: 0.8125rem; font-variant-numeric: tabular-nums; opacity: 0.6; }
.skill-tab.is-on { background: rgba(255, 255, 255, 0.92); color: var(--plum); border-color: transparent; }
.skill-tab.is-on .skill-tab-n { opacity: 0.8; }
.skill-stage { grid-column: 7 / span 6; position: relative; display: grid; gap: 1.25rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: 30px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.08)); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.24); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.6), inset 0 -1px 0.5px rgba(255, 255, 255, 0.14), 0 20px 60px rgba(16, 4, 30, 0.35); }
.skill-k { font-size: 0.875rem; font-weight: 700; opacity: 0.65; font-variant-numeric: tabular-nums; }
.skill-h { font-size: var(--step-sub); letter-spacing: -0.02em; line-height: 1.1; margin: 0.25rem 0 0.4rem; }
.skill-p { line-height: 1.5; opacity: 0.9; max-width: 36rem; }
.skill-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); }
.skill-progress span { display: block; height: 100%; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: 0 50%; }
.skill-progress span.is-run { animation: skill-run 6.5s linear forwards; }
@keyframes skill-run { to { transform: scaleX(1); } }
/* the demos: small, real-looking interface fragments, plum ink on paper */
.skill-demo { min-height: 15.5rem; padding: 1.1rem; border-radius: 20px; background: rgba(250, 247, 252, 0.95); color: var(--plum); font-size: 0.9rem; line-height: 1.4; box-shadow: 0 18px 50px rgba(16, 4, 30, 0.3); }
.skill-demo > div { display: grid; gap: 0.55rem; }
.d-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.8125rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(33, 17, 47, 0.12); }
.d-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #2fbf71; } .d-dot.live { background: #e0457b; }
.d-b { max-width: 82%; padding: 0.5rem 0.8rem; border-radius: 14px; }
.d-b.in { background: #ece3f8; justify-self: start; border-bottom-left-radius: 4px; }
.d-b.out { background: var(--deep-violet); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.d-foot { font-size: 0.75rem; color: #4a3560; text-align: right; }
.d-wave { display: flex; align-items: center; gap: 3px; height: 3rem; }
.d-wave i { flex: 1; border-radius: 3px; background: var(--deep-violet); height: 30%; animation: d-wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -73ms); }
@keyframes d-wave { to { height: 95%; } }
.d-line b { color: var(--deep-violet); margin-right: 0.4rem; }
.d-sum { padding: 0.55rem 0.75rem; border-radius: 12px; background: #fbe8f5; color: #7a1f5c; font-weight: 600; font-size: 0.8125rem; }
.d-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.d-day { display: grid; gap: 0.35rem; text-align: center; } .d-day b { font-size: 0.75rem; color: #4a3560; }
.d-slot { height: 1.7rem; border-radius: 8px; background: #e6dcf2; } .d-slot.is-free { background: #f3eefa; border: 1px dashed #cdbfe2; }
.d-slot.is-new { background: var(--deep-violet); box-shadow: 0 0 0 3px rgba(90, 47, 176, 0.25); }
.d-step { display: grid; grid-template-columns: 3.6rem 1fr; gap: 0.6rem; padding: 0.5rem 0.65rem; border-radius: 10px; background: #f3edfa; }
.d-step b { color: var(--deep-violet); } .d-step.is-done { background: #dff5e9; } .d-step.is-done b { color: #17643b; }
.d-lead { display: grid; grid-template-columns: 1fr 5rem 2rem; grid-template-rows: auto auto; gap: 0.15rem 0.6rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid rgba(33, 17, 47, 0.08); }
.d-lead em { grid-column: 1 / -1; font-style: normal; font-size: 0.75rem; color: #4a3560; }
.d-bar { height: 0.45rem; border-radius: 99px; background: #ece3f8; overflow: hidden; } .d-bar i { display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, var(--deep-violet), var(--orchid)); }
.d-crm table { width: 100%; border-collapse: collapse; } .d-crm th { text-align: left; font-size: 0.75rem; color: #4a3560; font-weight: 600; padding: 0.3rem; }
.d-crm td { padding: 0.45rem 0.3rem; border-top: 1px solid rgba(33, 17, 47, 0.08); } .d-crm td:last-child, .d-crm th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.d-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .d-kpis p { display: grid; font-size: 0.75rem; color: #4a3560; }
.d-kpis b { font-size: 1.4rem; color: var(--plum); letter-spacing: -0.02em; }
.d-chart { display: flex; align-items: end; gap: 0.5rem; height: 6.5rem; padding-top: 0.5rem; }
.d-chart i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--orchid), var(--deep-violet)); }
.d-hub-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; padding: 0.4rem 0; }
.d-tool { display: grid; place-items: center; min-height: 2.6rem; border-radius: 12px; background: #f3edfa; font-weight: 600; font-size: 0.8125rem; }
.d-core { grid-column: 1 / -1; display: grid; place-items: center; min-height: 2.8rem; border-radius: 14px; background: var(--deep-violet); color: #fff; font-weight: 800; letter-spacing: 0.02em; }

/* the stage keeps one height whichever skill is showing, so nothing below it jumps */
.skill-stage { align-content: start; }
.skill-h { min-height: 1.1em; }
.skill-p { min-height: 3em; }
.skill-demo { height: 17.5rem; min-height: 0; overflow: hidden; }
.d-fields { display: grid; gap: 0.4rem; }
.d-fields span { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: #f3edfa; font-weight: 600; }
.d-fields em { font-style: normal; font-weight: 500; color: #4a3560; }
.d-total { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0.75rem; border-radius: 12px; background: var(--deep-violet); color: #fff; }
.d-total b { font-size: 1.25rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.d-url { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.6rem; border-radius: 10px; background: #ece3f8; font-size: 0.75rem; color: #4a3560; }
.d-url i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #cdbfe2; } .d-url span { margin-left: 0.4rem; }
.d-hero { display: grid; gap: 0.15rem; padding: 0.9rem; border-radius: 12px; background: linear-gradient(135deg, var(--deep-violet), var(--orchid)); color: #fff; }
.d-hero b { font-size: 1.05rem; } .d-hero span { font-size: 0.75rem; opacity: 0.9; }
.d-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.d-shop span { display: grid; gap: 0.3rem; font-weight: 700; font-size: 0.8125rem; } .d-shop i { display: block; height: 2.6rem; border-radius: 10px; background: var(--c); }
.d-search { padding: 0.5rem 0.75rem; border-radius: 99px; background: #ece3f8; color: #4a3560; font-size: 0.8125rem; }
.d-rec { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.2rem; border-bottom: 1px solid rgba(33, 17, 47, 0.08); }
.d-rec i { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #ece3f8; font-style: normal; font-weight: 800; color: var(--deep-violet); }
.d-rec span { display: grid; font-size: 0.75rem; color: #4a3560; } .d-rec b { font-size: 0.875rem; color: var(--plum); }
.d-rec.is-due i { background: #fbe8f5; color: #7a1f5c; } .d-rec.is-new i { background: var(--deep-violet); color: #fff; }
.d-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.d-posts span { display: grid; place-items: end start; aspect-ratio: 1; max-height: 4.6rem; width: 100%; padding: 0.4rem; border-radius: 10px; background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); color: #fff; font-size: 0.6875rem; font-weight: 700; }
.skill-stage.is-playing .d-shop span, .skill-stage.is-playing .d-posts span { animation: d-in 420ms var(--ease-out) both; animation-delay: calc(200ms + var(--k) * 70ms); }

/* each demo plays in once when its skill is chosen */
.skill-stage.is-playing .skill-demo > div > * { animation: d-in 520ms var(--ease-out) both; }
.skill-stage.is-playing .skill-demo > div > *:nth-child(2) { animation-delay: 90ms; } .skill-stage.is-playing .skill-demo > div > *:nth-child(3) { animation-delay: 300ms; }
.skill-stage.is-playing .skill-demo > div > *:nth-child(4) { animation-delay: 560ms; } .skill-stage.is-playing .skill-demo > div > *:nth-child(5) { animation-delay: 820ms; }
.skill-stage.is-playing .skill-demo > div > *:nth-child(6) { animation-delay: 1050ms; }
.skill-stage.is-playing .d-bar i, .skill-stage.is-playing .d-chart i { animation: d-grow 900ms var(--ease-expo) both; animation-delay: calc(300ms + var(--k, 0) * 70ms); }
.skill-stage.is-playing .d-tool { animation: d-in 420ms var(--ease-out) both; animation-delay: calc(150ms + var(--k) * 60ms); }
.skill-stage.is-playing .skill-stage-head > * { animation: d-in 420ms var(--ease-out) both; }
@keyframes d-in { from { opacity: 0; translate: 0 8px; } }
@keyframes d-grow { from { transform: scaleY(0); } }
.d-bar i { transform-origin: 0 50%; } .d-chart i { transform-origin: 50% 100%; }
.skill-stage.is-playing .d-bar i { animation-name: d-grow-x; } @keyframes d-grow-x { from { transform: scaleX(0); } }
@media (max-width: 1100px) {
  .skills-intro, .skill-stage { grid-column: 1 / -1; }
  .skill-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .skills-wrap { min-height: 0; gap: 1rem; }
  .skills-intro { gap: 0.75rem; }
  .skill-tabs { display: flex; overflow-x: auto; gap: 0.45rem; scroll-snap-type: x proximity; overscroll-behavior-x: contain; margin-inline: calc(var(--margin) * -1); padding: 0.15rem var(--margin); scroll-padding-inline: var(--margin);
    scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 var(--margin), #000 calc(100% - var(--margin)), transparent); mask: linear-gradient(90deg, transparent, #000 var(--margin), #000 calc(100% - var(--margin)), transparent); }
  .skill-tabs::-webkit-scrollbar { display: none; }
  .skill-tab { flex: none; width: auto; scroll-snap-align: center; min-height: 2.75rem; padding: 0 0.95rem; white-space: nowrap; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.1); }
  .skill-tab.is-on { background: rgba(255, 255, 255, 0.92); }
  .skill-stage { padding: 1.15rem; border-radius: 24px; gap: 0.9rem; }
  .skill-h { font-size: 1.35rem; }
  .skill-p { font-size: 0.9375rem; min-height: 4.4em; }
  .skill-demo { height: 16.5rem; padding: 0.9rem; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { .skill-stage.is-playing * { animation: none !important; } }

/* ---------- 4. calculator (a light scene) ---------- */
.calc { color: var(--plum); display: grid; align-items: center; }
/* light scenes are a frosted sheet over the water: dark ink only ever sits on the sheet, white ink only on the water */
.calc, .faq { background: rgba(226, 212, 247, 0.93);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); }
.calc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.calc-intro { grid-column: 1 / span 6; display: grid; gap: 1.5rem; }
.calc-sub { max-width: 32rem; }
.calc-form { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 2.6vw, 2rem); border-radius: 28px; background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.85); }
.calc-field { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1rem; align-items: baseline; }
.calc-label { font-weight: 600; }
.calc-value { font-weight: 800; font-size: var(--step-sub); font-variant-numeric: tabular-nums; }
.calc-field input { grid-column: 1 / -1; width: 100%; accent-color: var(--deep-violet); height: 2rem; }
.calc-result { grid-column: 8 / span 5; display: grid; gap: 1.25rem; justify-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.85); margin-top: clamp(0rem, 8vh, 6rem); }
.calc-big { font-size: var(--step-sub); font-weight: 700; line-height: 1.1; }
.calc-big .nums { display: block; font-size: clamp(4rem, 2rem + 6vw, 8rem); letter-spacing: -0.05em; line-height: 0.95;
  color: var(--deep-violet); }
.calc-line { line-height: 1.5; }

/* ---------- 5. portfolio ---------- */
.work-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; }
.work-head .work-title { grid-column: 1 / span 7; }
.work-sub { grid-column: 8 / span 5; }
.work-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { min-height: 2.75rem; padding: 0 1.2rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: var(--paper);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.24); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.55); transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out); }
.chip:active { transform: scale(0.97); }
.chip.is-on { background: rgba(255, 255, 255, 0.92); color: var(--plum); }
.work .work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--gutter); align-items: stretch; }
.pcard { opacity: 0; translate: 0 14px; }
.work-grid.is-in .pcard { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease-out), translate 600ms var(--ease-expo); transition-delay: calc(var(--n, 0) * 45ms); }
.pcard-btn { position: relative; display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; text-align: left; text-decoration: none; color: var(--paper); border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.08)); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.6), 0 12px 32px rgba(16, 4, 30, 0.28); transition: transform 300ms var(--ease-out), border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pcard-btn:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.5); } .pcard-btn:hover .pcard-go { transform: rotate(45deg); } }
.pcard-btn:active { transform: scale(0.985); }
.pcard-media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, hsl(var(--h) 80% 70% / 0.55), transparent 60%), linear-gradient(140deg, hsl(var(--h) 60% 35% / 0.8), hsl(calc(var(--h) + 40) 55% 22% / 0.85)); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; }
.pcard-mono { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); letter-spacing: -0.02em; opacity: 0.95; }
.pcard-body { display: grid; gap: 0.3rem; padding: 1.1rem 1.25rem 1.3rem; }
.pcard-cat { font-size: 0.8125rem; opacity: 0.75; }
.pcard-name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; padding-right: 2.5rem; }
.pcard-go { position: absolute; right: 1rem; bottom: 1.1rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 10px; background: var(--paper); color: var(--plum); font-weight: 700; transition: transform 200ms var(--ease-out); }
.pcard-yours .pcard-btn { grid-template-rows: 1fr; min-height: 12rem; background: linear-gradient(160deg, rgba(233, 123, 200, 0.3), rgba(137, 80, 232, 0.25)); }
.pcard-yours .pcard-name { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 2.6rem; }
.pcard-yours .pcard-body { align-content: end; }
/* the detail panel */
.project-sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(16, 4, 30, 0.55); opacity: 0; transition: opacity 240ms var(--ease-out); }
.project-sheet.is-open { opacity: 1; }
.project-sheet[hidden], .skill-card[hidden], .project-visit[hidden] { display: none !important; }
.project-panel { position: relative; width: min(46rem, 100%); max-height: calc(100svh - 2rem); overflow: auto; display: grid; gap: 0.8rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 28px;
  background: linear-gradient(160deg, rgba(60, 22, 84, 0.86), rgba(36, 12, 54, 0.92)); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.26); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.55), 0 30px 80px rgba(10, 0, 20, 0.5); translate: 0 16px; scale: 0.98; transition: translate 300ms var(--ease-out), scale 300ms var(--ease-out); }
.project-sheet.is-open .project-panel { translate: 0 0; scale: 1; }
.project-media { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 20% 10%, hsl(var(--h) 80% 70% / 0.55), transparent 60%), linear-gradient(140deg, hsl(var(--h) 60% 35% / 0.85), hsl(calc(var(--h) + 40) 55% 22% / 0.9)); }
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-cat { font-size: 0.875rem; opacity: 0.75; margin-top: 0.4rem; }
.project-name { font-size: var(--step-sub); letter-spacing: -0.02em; line-height: 1.1; }
.project-place { font-size: var(--step-small); opacity: 0.8; }
.project-place:empty { display: none; }
.project-text { line-height: 1.5; }
.project-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.project-tags li { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); }
.project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.4rem; }
.project-visit { padding: 0 1.6rem; }
.project-close { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 999px; font-size: 1.4rem; background: rgba(20, 6, 30, 0.55); border: 1px solid rgba(255, 255, 255, 0.3); }
@media (max-width: 1100px) { .work-head .work-title, .work-sub { grid-column: 1 / -1; } }
@media (max-width: 720px) { .project-sheet { place-items: end center; padding: 0.5rem; } .project-panel { border-radius: 24px 24px 18px 18px; } }

/* ---------- 4b. packages ---------- */
html[data-scene="pricing"] { --w0: #1c0b33; --w1: #8950e8; --w2: #e97bc8; --w3: #2d1470; --w4: #b07cf5; }
.pricing { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-content: center; }
.pricing-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; }
.pricing-head .head { grid-column: 1 / span 6; }
.pricing-sub { grid-column: 8 / span 5; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.5rem, 2.4vw, 2.1rem); border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.07));
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.6), inset 0 -1px 0.5px rgba(255, 255, 255, 0.14), 0 14px 40px rgba(16, 4, 30, 0.3); position: relative; }
.plan-featured { border-color: rgba(255, 255, 255, 0.5); background: linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(233, 123, 200, 0.12) 50%, rgba(137, 80, 232, 0.16)); }
.plan-badge { position: absolute; top: -0.85rem; left: 1.5rem; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; background: var(--paper); color: var(--plum); }
.plan-name { font-size: var(--step-sub); letter-spacing: -0.02em; line-height: 1.1; }
.plan-for { opacity: 0.88; line-height: 1.4; min-height: 2.8em; }
.plan-price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.4rem; }
.plan-amount { font-size: clamp(2.4rem, 1.4rem + 2.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-cur { font-weight: 700; opacity: 0.8; }
.plan-note { font-size: var(--step-small); opacity: 0.75; margin-top: -0.4rem; }
.plan-list { display: grid; gap: 0.55rem; margin: 0.4rem 0 0.6rem; }
.plan-list li { position: relative; padding-left: 1.5rem; line-height: 1.4; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--orchid); border-bottom: 2px solid var(--orchid); transform: rotate(-45deg); }
.plan-pay { align-self: stretch; justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; border-radius: 999px; text-decoration: none; font-weight: 700;
  background: var(--paper); color: var(--plum); margin-top: auto; transition: transform 140ms var(--ease-out), background-color 200ms ease; }
.plan-pay:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .plan-pay:hover { background: #ffe6f6; } }
.plan:not(.plan-featured) .plan-pay { background: transparent; color: var(--paper); border: 1.5px solid rgba(255, 255, 255, 0.7); }
@media (hover: hover) and (pointer: fine) { .plan:not(.plan-featured) .plan-pay:hover { background: var(--paper); color: var(--plum); } }
.plan-talk { align-self: center; justify-self: center; font-size: var(--step-small); }
.plans-custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.plan-wide { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; }
.plan-side { display: grid; gap: 0.8rem; justify-items: stretch; min-width: 13rem; }
.plan-price-quote { font-weight: 700; font-size: 1.15rem; margin: 0; }
.plan-list-inline { grid-template-columns: 1fr 1fr; gap: 0.45rem 1.25rem; font-size: var(--step-small); }
.plan-software { background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(137, 80, 232, 0.14) 55%, rgba(233, 123, 200, 0.1)); }
.pricing-fine { font-size: var(--step-small); opacity: 0.75; }
@media (max-width: 1100px) {
  .pricing-head .head, .pricing-sub { grid-column: 1 / -1; }
  .plans { grid-template-columns: 1fr; max-width: 34rem; }
  .plans-custom { grid-template-columns: 1fr; }
  .plan-featured { order: -1; }
}
@media (max-width: 720px) {
  .plan-wide { grid-template-columns: 1fr; }
  .plan-list-inline { grid-template-columns: 1fr; }
  .plan-for { min-height: 0; }
}

/* ---------- 5. work ---------- */
.work { display: grid; align-content: center; gap: 2.5rem; }
.work-title { font-size: var(--step-head); line-height: 1; letter-spacing: -0.035em; }
.work-list { grid-column: 1 / span 7; display: grid; }
.work-link { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; text-decoration: none; border-bottom: 1px solid rgba(255, 235, 250, 0.25); }
.work-name { font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; opacity: 0.62; text-shadow: 0 2px 30px rgba(28, 14, 42, 0.55); transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.work-meta { font-size: var(--step-small); white-space: nowrap; padding: 0.3rem 0.8rem; border-radius: 10px; border: 1px solid rgba(255, 235, 250, 0.4); background: rgba(44, 16, 62, 0.78); }
.work-item.is-active .work-name { opacity: 1; transform: translateX(0.5rem); }
.work-item:last-child .work-name { font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.work-card-phone { display: none; }
.work-frame { grid-column: 9 / span 4; position: relative; aspect-ratio: 4 / 5; }
.work-frame .work-card { position: absolute; inset: 0; display: grid; align-content: end; gap: 0.75rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255, 235, 250, 0.35);
  opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 500ms ease, transform 700ms var(--ease-out); }
.work-frame .work-card.is-active { opacity: 1; transform: none; }
.work-card.c0 { background: radial-gradient(circle at 25% 20%, rgba(255, 140, 210, 0.55), transparent 55%), rgba(255, 240, 252, 0.1); }
.work-card.c1 { background: radial-gradient(circle at 75% 25%, rgba(170, 120, 255, 0.55), transparent 55%), rgba(255, 240, 252, 0.1); }
.work-card.c2 { background: radial-gradient(circle at 30% 30%, rgba(233, 123, 200, 0.5), transparent 50%), radial-gradient(circle at 80% 70%, rgba(137, 80, 232, 0.55), transparent 55%), rgba(255, 240, 252, 0.1); }
.work-card.c3 { background: radial-gradient(circle at 50% 30%, rgba(255, 210, 240, 0.5), transparent 55%), rgba(255, 240, 252, 0.12); }
.wc-name { font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.c3 .wc-name { font-family: var(--font-serif); font-style: italic; font-weight: 300; }

/* ---------- 6. process ---------- */
.process { display: grid; align-content: center; gap: 3rem; }
.process-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; }
.process-intro .head { grid-column: 1 / span 6; }
.process-sub { grid-column: 8 / span 5; }
.accordion { display: flex; gap: 0.75rem; height: clamp(26rem, 58vh, 34rem); }
.stage { position: relative; flex: 1; min-width: 0; border-radius: 28px; overflow: hidden; background: rgba(40, 13, 58, 0.55); border: 1px solid rgba(255, 235, 250, 0.28);
 transition: flex-grow 700ms var(--ease-in-out), background-color 400ms ease; }
.stage.is-open { flex-grow: 3.4; background: rgba(48, 16, 68, 0.66); }
.stage-tab { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.5rem; text-align: left; font-weight: 700; font-size: var(--step-sub); letter-spacing: -0.02em; z-index: 1; }
.stage-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.stage.is-open .stage-tab { pointer-events: none; opacity: 0; }
.stage-body { position: absolute; inset: 0; display: grid; align-content: end; gap: 1rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); opacity: 0; transition: opacity 300ms ease; }
.stage.is-open .stage-body { opacity: 1; transition: opacity 500ms ease 350ms; }
.stage-name { font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem); letter-spacing: -0.03em; line-height: 1; }
.stage-body p { max-width: 34rem; }
.stage-photo { position: relative; border-radius: 18px; overflow: hidden; }
.stage-photo img { width: 100%; object-fit: cover; aspect-ratio: 16 / 6; }
.stage-photo figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(33, 17, 47, 0.6); }
.stage::before { position: absolute; top: 1.25rem; left: 1.5rem; font-size: 0.875rem; font-weight: 700; opacity: 0.8; }
.st1::before { content: "01"; } .st2::before { content: "02"; } .st3::before { content: "03"; } .st4::before { content: "04"; }

/* ---------- 7. about ---------- */
.about { display: grid; align-items: center; }
.about-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); align-items: center; }
.about-title { grid-column: 6 / span 7; font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.035em; }
.about-title > span:last-child { font-family: var(--font-serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; }
.about-block { grid-column: 6 / span 7; display: grid; gap: 1.75rem; justify-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; background: rgba(40, 12, 50, 0.64); border: 1px solid rgba(255, 235, 250, 0.28); }
.about-lead { font-size: var(--step-sub); line-height: 1.35; letter-spacing: -0.01em; }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; width: 100%; }
.about-facts li { display: grid; gap: 0.35rem; align-content: start; padding-top: 1rem; border-top: 1px solid rgba(255, 235, 250, 0.3); }
.about-facts span { font-size: var(--step-small); line-height: 1.45; }

/* ---------- 8. faq (a light scene) ---------- */
.faq { color: var(--plum); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem var(--gutter); align-content: center; }
.faq-head { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.faq-title { font-size: var(--step-head); line-height: 1; letter-spacing: -0.035em; }
.band { grid-column: span 6; display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: 24px; background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.85); }
.band h3 { font-size: 1.25rem; letter-spacing: -0.015em; }

/* ---------- 9. cta ---------- */
.cta { display: grid; place-content: center; justify-items: center; text-align: center; gap: 2.5rem; }
.cta-title { font-size: clamp(3.5rem, 1.5rem + 8vw, 10rem); line-height: 0.95; letter-spacing: -0.045em; text-shadow: 0 6px 50px rgba(28, 14, 42, 0.45); }
.cta-title > span:last-child { font-family: var(--font-serif); font-style: italic; font-weight: 300; letter-spacing: -0.01em; }
.cta-row { display: grid; justify-items: center; gap: 1.5rem; max-width: 36rem; padding: 1.75rem 2rem; border-radius: 28px; background: rgba(44, 16, 62, 0.7); border: 1px solid rgba(255, 235, 250, 0.28); }
.cta-sub { font-weight: 500; }

/* ---------- footer ---------- */
.foot { min-height: auto; padding-top: clamp(5rem, 10vh, 8rem); padding-bottom: 2rem; display: grid; gap: 3rem; background: linear-gradient(180deg, transparent, rgba(16, 6, 26, 0.75) 30%); }
.foot-name { font-size: clamp(7rem, 30vw, 30rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.8; text-align: center;
  color: #c27be0; }
.foot-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.places { grid-column: 1 / span 4; display: grid; gap: 0.4rem; font-size: var(--step-sub); font-weight: 600; }
.foot-cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.foot-cols ul { display: grid; gap: 0.5rem; align-content: start; }
.foot-h { font-weight: 800; margin-bottom: 0.3rem; }
.credits { font-size: 0.8125rem; line-height: 1.6; opacity: 0.8; max-width: 70rem; }
.credits a { text-underline-offset: 0.2em; }
.foot-legal { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step-small); padding-top: 1.25rem; border-top: 1px solid rgba(255, 235, 250, 0.2); }

/* ---------- entrances ---------- */
.js [data-line] { transform: translateY(105%); animation: line-in 1s var(--ease-expo) forwards; animation-delay: calc(150ms + var(--i, 0) * 90ms); }
@keyframes line-in { to { transform: none; } }
.js [data-rise] { opacity: 0; animation: rise-in 800ms var(--ease-out) forwards; animation-delay: calc(250ms + (var(--i, 0) - 5) * 90ms + 300ms); }
@keyframes rise-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.js .float { opacity: 0; animation: appear 1.6s var(--ease-out) 100ms forwards, swim-css 11s ease-in-out 1.7s infinite; }
.swim-js .float { animation: appear 1.6s var(--ease-out) 100ms forwards; }
@keyframes appear { from { opacity: 0; scale: 0.94; translate: 0 5%; } to { opacity: 1; scale: 1; translate: 0 0; } }
/* entrances (main.js wireReveals). Hidden states exist only once the script has armed them (.reveals),
   so nothing stays invisible if it fails. Stagger --d comes from what arrives together. */
.reveals [data-reveal=""] {
  opacity: 0; translate: 0 22px; transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 80ms); }
.reveals [data-reveal=""].is-in { opacity: 1; translate: 0 0; }
/* mask: the heading wipes up out of its own box */
/* padding gives descenders and italics room inside the clip; the negative margin keeps the layout unchanged */
[data-reveal="mask"] { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.reveals [data-reveal="mask"] { clip-path: inset(0 0 100% 0); translate: 0 0.3em; transition: clip-path 1s var(--ease-expo), translate 1s var(--ease-expo); transition-delay: calc(var(--d, 0) * 80ms); }
.reveals [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); translate: 0 0; }
.reveals [data-reveal="mask"].is-done, .reveals [data-reveal="lines"].is-done .rl, .reveals [data-reveal="chars"].is-done { clip-path: none; overflow: visible; }
/* lines: each line rises from its own mask, 90ms apart */
.rl { display: block; overflow-x: visible; overflow-y: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
/* once revealed, nothing clips the glyphs (italic overhangs, long words) */
.reveals [data-reveal].revealed, .reveals [data-reveal].revealed .rl { clip-path: none; overflow: visible; }
.rl-in { display: block; }
.reveals [data-reveal="lines"] .rl-in { translate: 0 105%; transition: translate 1s var(--ease-expo); transition-delay: calc(var(--d, 0) * 80ms + var(--l, 0) * 90ms); }
.reveals [data-reveal="lines"].is-in .rl-in { translate: 0 0; }
/* chars: the footer wordmark, letter by letter */
.rc { display: inline-block; }
.reveals [data-reveal="chars"] { overflow: clip; }
.reveals [data-reveal="chars"] .rc { translate: 0 100%; transition: translate 1.1s var(--ease-expo); transition-delay: calc(var(--c) * 40ms); }
.reveals [data-reveal="chars"].is-in .rc { translate: 0 0; }
/* open: the picture opens from its centre and settles */
.reveals [data-reveal="open"] { clip-path: circle(0% at 50% 50%); transition: clip-path 1.2s var(--ease-in-out); }
.reveals [data-reveal="open"].is-in { clip-path: circle(75% at 50% 50%); }
.reveals [data-reveal="open"] img { scale: 1.25; transition: scale 1.6s var(--ease-expo); }
.reveals [data-reveal="open"].is-in img { scale: 1; }
/* items: a list arrives item by item */
.reveals [data-reveal="items"] > * { opacity: 0; translate: 0 18px; transition: opacity 600ms var(--ease-out), translate 800ms var(--ease-expo); transition-delay: calc(var(--n, 0) * 70ms); }
.reveals [data-reveal="items"].is-in > * { opacity: 1; translate: 0 0; }
.reveals .accordion[data-reveal="items"] > * { translate: 48px 0; }
.reveals .accordion[data-reveal="items"].is-in > * { translate: 0 0; }
/* the service fragments play out what they show */
.reveals .cap .seq { opacity: 0; translate: 0 8px; transition: opacity 420ms var(--ease-out), translate 520ms var(--ease-out); transition-delay: var(--q, 0ms); }
.reveals .cap .bubble.in.seq { translate: -10px 4px; }
.reveals .cap .bubble.out.seq { translate: 10px 4px; }
.reveals .cap.is-in .seq { opacity: 1; translate: 0 0; }
.reveals .cap .flow li.done.seq { transition-property: opacity, translate, background-color; }

/* while the gate is up nothing on the page starts: the hero plays its entrance after "Entrar" */
.gate-open { overflow: hidden; }
.gate-open [data-line], .gate-open [data-rise], .gate-open .float { animation-play-state: paused; }

/* ---------- entry gate ---------- */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 1.25rem; background: #120821; color: var(--paper);
  transition: opacity 1s var(--ease-out), visibility 0s linear 1s; }
html:not(.gate-open) .gate:not(.is-leaving) { display: none; }
.gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.gate.is-leaving .gate-mark { transform: scale(1.08); filter: blur(6px); }
.gate-mark { position: relative; display: grid; place-items: center; transition: transform 1s var(--ease-out), filter 1s var(--ease-out); }
.gate-lines { position: absolute; width: min(34rem, 92vw); height: auto; left: 50%; top: 50%; translate: -50% -50%; overflow: visible; }
.gate-lines path { fill: none; stroke: rgba(216, 197, 245, 0.5); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: gate-draw 1.1s var(--ease-expo) forwards; animation-delay: calc(var(--k) * 60ms); transform-box: view-box; }
@keyframes gate-draw { to { stroke-dashoffset: 0; } }
.gate-word { position: relative; font-size: clamp(4rem, 3rem + 7vw, 9rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1;
  background: linear-gradient(100deg, #c26ff0, #8950e8 55%, #e97bc8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-pct { font-size: 0.8125rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; opacity: 0.75; transition: opacity 400ms ease; }
.gate.is-ready .gate-pct { opacity: 0; }

/* ---------- the water surface the camera passes through ---------- */
.surface { position: absolute; left: -10%; right: -10%; top: 0; height: 170vh; transform: translate3d(0, var(--sy, 120vh), 0); will-change: transform; pointer-events: none;
  border-radius: 50% 50% 0 0 / 5vh 5vh 0 0;
  background: linear-gradient(180deg, rgba(255, 225, 250, 0.35) 0, rgba(62, 18, 104, 0.82) 0.8vh, rgba(36, 10, 66, 0.78) 30vh, rgba(26, 8, 48, 0.5) 90vh, transparent 165vh);
  box-shadow: 0 -6px 50px rgba(255, 170, 235, 0.35); }
.surface::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 250, 0.7) 30%, rgba(255, 230, 250, 0.2) 55%, rgba(255, 230, 250, 0.6) 75%, transparent);
  background-size: 100% 100%; }


/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .scene-index { display: none; }
  .tile-a { grid-column: 1 / -1; }
  .tile-b { grid-column: 7 / -1; }
  .tile-c { grid-column: 1 / span 5; }
  .tile-text { grid-column: 1 / -1; }
  .features-aside { grid-column: 1 / -1; position: static; height: auto; }
  /* no side column here: open water between the services, where the axolotl swims alone and changes */
  .capabilities { gap: 68svh; padding-top: 58svh; padding-bottom: 8svh; }
  html[data-scene="services"] { --cx: 0vw; --cy: 2vh; --cs: 0.6; --cr: -4deg; }
  .cap { background: rgba(40, 14, 56, 0.62); }
  .cap.is-current { background: rgba(48, 18, 66, 0.68); }
  .morph-tag { position: fixed; left: 50%; bottom: 1rem; z-index: 15; translate: -50% 12px; opacity: 0; pointer-events: none; white-space: nowrap;
    transition: opacity 300ms var(--ease-out), translate 300ms var(--ease-out); }
  html[data-scene="services"] .morph-tag { opacity: 1; translate: -50% 0; }
  html[data-scene="services"] .morph-tag.is-swapping { opacity: 0; translate: -50% 6px; }
  html[data-scene="services"] .morph-tag.is-covered { opacity: 0; translate: -50% 10px; }
  .capabilities { grid-column: 1 / -1; }
  .calc-intro, .calc-result { grid-column: 1 / -1; margin-top: 0; }
  .work-list { grid-column: 1 / -1; }
  .work-frame { display: none; }
  .process-intro .head, .process-sub { grid-column: 1 / -1; }
  .about-title, .about-block { grid-column: 4 / -1; }
  .band { grid-column: 1 / -1; }
  .places, .foot-cols { grid-column: 1 / -1; }
  .hero-side { width: min(25rem, 44vw); }
}

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .nav-wrap { inset: 0.75rem 1rem auto; justify-content: flex-start; }
  .pill-nav { gap: 0.9rem; padding: 0.35rem 0.4rem 0.35rem 1rem; }
  .pill-link, .pill-sep { display: none; }
  .symbol { width: 2.2rem; }
  .pill-cta { padding: 0.6rem 1rem; }
  .lang { min-width: 3rem; min-height: 3rem; }
  .creature { height: min(125svh, 205vw); }
  html[data-scene="intro"]    { --cx: 26vw; --cy: 30vh; --cs: 0.55; --co: 0.7; }
  html[data-scene="services"] { --cx: 0vw; --cy: -1vh; --cs: 0.74; }
  .morph-name { font-size: 1.5rem; }
  html[data-scene="calc"]     { --cx: 10vw; --cy: 34vh; --cs: 1.2; }
  .closeup { right: auto; left: 50%; top: auto; bottom: -6vh; width: 190vw; transform: translateX(-50%) scale(0.92); }
  html[data-scene="work"] .closeup { opacity: 0; }
  html[data-scene="process"]  { --cx: 0vw; --cy: 42vh; --cs: 0.8; --co: 0.4; }
  html[data-scene="about"]    { --cx: 18vw; --cy: -20vh; --cs: 0.6; }
  html[data-scene="faq"]      { --cx: 26vw; --cy: -30vh; --cs: 0.45; }
  .hero-title { top: 36%; font-size: clamp(2.6rem, 11.5vw, 3.5rem); }
  .hero-side { left: 1rem; right: 1rem; bottom: 4.75rem; width: auto; gap: 1.1rem; }
  .hero-side p { font-size: 1rem; }
  .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(28, 10, 42, 0.6)); }
  .intro .board { min-height: 0; }
  .tile-a, .tile-b, .tile-c, .tile-text { grid-column: 1 / -1; }
  .tile-b { justify-self: start; }
  .tile-c { width: 62%; }
  .cap-row { grid-template-columns: 1fr; }
  .cap-flip .ui { order: 0; }
  .work-link { flex-direction: column; gap: 0.5rem; }
  .work-name { opacity: 1; text-shadow: 0 2px 24px rgba(28, 14, 42, 0.5); }
  .accordion { flex-direction: column; height: auto; }
  .stage { flex: none; min-height: 4.5rem; }
  .stage.is-open { flex: none; }
  .stage-tab { position: relative; padding: 1.4rem 1.5rem 1.4rem 4rem; align-items: center; }
  .stage-tab span { writing-mode: horizontal-tb; transform: none; }
  .stage.is-open .stage-tab { display: none; }
  .stage-body { position: relative; inset: auto; display: none; padding-top: 3.25rem; }
  .stage.is-open .stage-body { display: grid; }
  .stage::before { top: 1.65rem; }
  .stage.is-open::before { top: 1.25rem; }
  .about-title, .about-block { grid-column: 1 / -1; }
  .about-facts { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-legal { flex-direction: column; }
}

/* ---------- reduced motion: the light stays, nothing drifts ---------- */
/* reduce-motion: the water and the axolotl keep moving (they are the brand), but calmer; nothing slides or jumps */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .creature { transition: opacity 600ms ease; }
  .beam { animation: none; }
  .js [data-reveal] { transition: opacity 400ms ease; transform: none; }
  .js [data-line] { animation-duration: 1ms; }
  .motes { display: none; }
}

/* on wide screens the index keeps its own lane at the left */
@media (min-width: 1101px) {
  .scene:not(.hero) { padding-left: calc(var(--margin) + 10.5rem); }
  .skills-stage { padding-left: calc(var(--margin) + 10.5rem); }
}

/* ---------- phones: feel like an app ---------- */
button, a, [role="tab"], summary, label { touch-action: manipulation; }
button, .skill-tab, .chip, .pill-cta { -webkit-user-select: none; user-select: none; }
@media (max-width: 720px) {
  .nav-wrap { top: max(0.75rem, env(safe-area-inset-top)); }
  .hero-side { bottom: max(4.75rem, calc(env(safe-area-inset-bottom) + 3.5rem)); }
  /* glass is expensive on phones: a lighter blur keeps scrolling smooth */
  .lg, .pill-nav, .lang, .skill-stage, .plan, .pcard { -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); }
  .work-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); overscroll-behavior-x: contain; }
  .work-filters::-webkit-scrollbar { display: none; }
  .work-filters > * { flex: none; }
}

/* ---------- conversion: proof above the fold, one strong CTA, client logos ---------- */
html, body { overflow-x: clip; }
.hero-proof { display: flex; align-items: baseline; gap: 0.7rem; text-transform: none !important; letter-spacing: 0 !important; }
.hero-proof b { font-size: clamp(2.4rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.hero-proof span { font-size: 1rem; font-weight: 600; line-height: 1.25; max-width: 15rem; }
.cta-main { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.6rem; padding: 0 1.9rem; border-radius: 999px; background: var(--paper); color: var(--plum); text-decoration: none; font-weight: 800; font-size: 1.0625rem;
  box-shadow: 0 10px 34px rgba(16, 4, 30, 0.35), inset 0 -2px 0 rgba(33, 17, 47, 0.08); transition: transform 160ms var(--ease-out), box-shadow 200ms ease; }
.cta-main:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cta-main:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(16, 4, 30, 0.45); } }
.trust { position: relative; z-index: 2; padding: 2.25rem 0 1.5rem; display: grid; gap: 1rem; }
.trust-k { padding-inline: var(--margin); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; text-align: center; }
.trust-track { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.trust-row { display: flex; width: max-content; gap: clamp(2.5rem, 5vw, 4.5rem); padding-inline: 2rem; animation: trust-slide 38s linear infinite; }
.trust-row li { flex: none; font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem); opacity: 0.82; white-space: nowrap; }
.tw-1 { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.tw-2 { font-weight: 800; letter-spacing: 0.18em; font-size: 0.9em !important; }
.tw-3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.02em; }
.tw-4 { font-weight: 700; letter-spacing: -0.03em; }
.tw-5 { font-weight: 300; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9em !important; }
.tw-6 { font-weight: 800; letter-spacing: 0.3em; }
.tw-7 { font-weight: 800; font-style: italic; letter-spacing: -0.02em; }
.tw-8 { font-family: var(--font-serif); font-weight: 300; letter-spacing: 0.08em; }
@keyframes trust-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
.plan-kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; margin-bottom: -0.35rem; }
.plan-from { font-size: 0.875rem; font-weight: 600; opacity: 0.75; letter-spacing: 0; }
@media (max-width: 720px) {
  .hero-proof b { font-size: 2.6rem; }
  .cta-main { width: 100%; justify-content: center; }
}
.hero-side { gap: 1.1rem; }
.hero-side p:not(.hero-proof) { font-size: 0.8125rem; }
@media (min-width: 721px) { .hero-side { bottom: 2.75rem; } }
@media (max-width: 720px) {
  /* on a phone the fold keeps only what converts: the promise, the proof and the button */
  .hero-side p:not(.hero-proof) { display: none; }
  .hero-side { bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.25rem)); }
}

/* interactive booking in #contacto */
.cta { gap: 2rem; }
.book { width: min(100%, 46rem); text-align: left; }
.book-card { display: grid; gap: 0.9rem; padding: clamp(1.1rem, 3vw, 2rem); border-radius: 28px; color: var(--paper);
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)), rgba(44, 16, 62, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 235, 250, 0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.book-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
.book-k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; margin-top: 0.4rem; }
.book-chips, .book-times { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.book-days { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.25rem; overscroll-behavior-x: contain; scrollbar-width: none; }
.book-days::-webkit-scrollbar { display: none; }
.book-chip, .book-time, .book-day { font: inherit; color: inherit; cursor: pointer; border: 1px solid rgba(255, 235, 250, 0.3); background: rgba(255,255,255,0.06);
  transition: background-color 200ms ease, color 200ms ease, transform 200ms var(--ease-out); touch-action: manipulation; }
.book-chip, .book-time { padding: 0.55rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.9375rem; min-height: 2.75rem; }
.book-day { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 0.1rem; min-width: 4.1rem; padding: 0.55rem 0.5rem; border-radius: 18px; }
.bd-w, .bd-m { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.bd-n { font-size: 1.4rem; line-height: 1.1; }
.book [aria-pressed="true"] { background: var(--paper); color: var(--plum); border-color: var(--paper); }
.book button:disabled { opacity: 0.35; cursor: not-allowed; }
.book-tz { font-size: 0.8125rem; opacity: 0.7; }
.book-form { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.book-form input { font: inherit; font-size: 1rem; color: var(--paper); min-height: 3rem; padding: 0 1rem; border-radius: 14px; border: 1px solid rgba(255, 235, 250, 0.3); background: rgba(255,255,255,0.07); }
.book-form input::placeholder { color: rgba(250, 247, 252, 0.6); }
.book-form input:focus-visible, .book button:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
.book-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; margin-top: 0.4rem; }
.book-sum { font-weight: 700; }
.book-go { font: inherit; font-weight: 800; cursor: pointer; min-height: 3.5rem; padding: 0 1.9rem; border-radius: 999px; border: 0; background: var(--paper); color: var(--plum); touch-action: manipulation; transition: transform 200ms var(--ease-out), opacity 200ms; }
.book-go:active { transform: scale(0.97); }
.book-note { font-size: 0.875rem; min-height: 1.2em; }
@media (hover: hover) and (pointer: fine) { .book-chip:hover:not([aria-pressed="true"]), .book-time:hover:not([aria-pressed="true"]), .book-day:hover:not(:disabled):not([aria-pressed="true"]) { background: rgba(255,255,255,0.2); } .book-go:hover:not(:disabled) { transform: translateY(-2px); } }
@media (max-width: 720px) { .book-go { width: 100%; } .book-card { -webkit-backdrop-filter: blur(10px) saturate(1.8); backdrop-filter: blur(10px) saturate(1.8); } }

/* services = where the visitor interacts */
.cap-book { font: inherit; font-weight: 700; cursor: pointer; justify-self: start; margin-top: 0.9rem; min-height: 2.9rem; padding: 0 1.25rem; border-radius: 999px; color: var(--paper); background: rgba(255,255,255,0.1); border: 1px solid rgba(255, 235, 250, 0.4); touch-action: manipulation; transition: background-color 200ms, color 200ms; }
@media (hover: hover) and (pointer: fine) { .cap-book:hover { background: var(--paper); color: var(--plum); } }
.cap-list + .cap-book { align-self: end; }
.agenda { display: grid; justify-items: center; gap: 0.75rem; margin-top: clamp(3rem, 8vh, 6rem); text-align: center; scroll-margin-top: 6rem; }
.agenda-title { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; max-width: 22ch; }
.agenda-sub { font-size: var(--step-body); opacity: 0.85; max-width: 34rem; margin-bottom: 1rem; }
.cta { padding-block: clamp(5rem, 10vh, 8rem); min-height: 0; }

/* copy always reads: balanced headings, no orphans, no overflow */
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p, li { text-wrap: pretty; overflow-wrap: break-word; }
.cap-list li, .plan-list li, .skill-p, .cta-sub, .pricing-sub, .work-sub { line-height: 1.5; }

/* enterprise / custom cards: one clear main button, one quiet alternative */
.plan-side { min-width: 0; width: min(100%, 15rem); gap: 0.6rem; }
.plan-wide .plan-pay { min-height: var(--btn-h); padding-inline: 1.25rem; text-align: center; white-space: normal; line-height: 1.15; }
.plan-wide .plan-pay-main, .plan-wide:not(.plan-featured) .plan-pay-main { background: var(--paper); color: var(--plum); border: 1.5px solid var(--paper); }
.plan-wide .plan-pay-alt, .plan-wide:not(.plan-featured) .plan-pay-alt { background: transparent; color: var(--paper); border: 1.5px solid rgba(255,255,255,0.45); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .plan-wide .plan-pay-main:hover { background: #ffe6f6; } .plan-wide .plan-pay-alt:hover { background: rgba(255,255,255,0.14); color: var(--paper); } }
@media (max-width: 720px) { .plan-side { width: 100%; grid-template-columns: 1fr 1fr; } .plan-side .plan-price { grid-column: 1 / -1; } }
@media (max-width: 400px) { .plan-side { grid-template-columns: 1fr; } }

/* one button system: same height, type, radius and padding everywhere */
:root { --btn-h: 3.5rem; --btn-h-sm: 2.75rem; --btn-px: 1.5rem; }
.cta-main, .button, .button-big, .plan-pay, .book-go, .pill-cta { box-sizing: border-box; min-height: var(--btn-h); font-size: 1rem; font-weight: 700; line-height: 1.15; border-radius: 999px; text-align: center; justify-content: center; align-items: center; gap: 0.5rem; }
.cta-main, .button-big, .plan-pay, .book-go { padding-inline: var(--btn-px); }
.button-big { font-size: 1rem; }
.cap-book, .book-chip, .book-time, .chip { box-sizing: border-box; min-height: var(--btn-h-sm); font-size: 0.9375rem; }
.cap-book { padding-inline: 1.1rem; }
/* groups: buttons in a row share the width and line up */
.plan-side .plan-pay, .project-actions .plan-pay { width: 100%; }
.book-foot .book-go { flex: 0 1 15rem; }
@media (max-width: 720px) { .book-foot .book-go { flex-basis: 100%; } .cta-main, .plan-pay, .button, .button-big { width: 100%; } }
.pill-cta { min-height: 0; font-size: inherit; }

/* client logos: all white, balanced by shape (wide wordmarks shorter, round marks taller) */
.trust { z-index: 3; background: linear-gradient(180deg, transparent, rgba(20, 8, 34, 0.55) 30%, rgba(20, 8, 34, 0.55) 70%, transparent); }
.trust-row { align-items: center; gap: clamp(2.75rem, 5vw, 4.75rem); }
.trust-row li { display: flex; align-items: center; opacity: 0.85; }
.trust-row img { display: block; width: auto; height: 2.6rem; }
.trust-row .l-sm img { height: 1.7rem; } .trust-row .l-md img { height: 2.5rem; } .trust-row .l-lg img { height: 2.9rem; } .trust-row .l-xl img { height: 3.3rem; }
@media (max-width: 720px) { .trust-row img { height: 2rem; } .trust-row .l-sm img { height: 1.3rem; } .trust-row .l-md img { height: 1.9rem; } .trust-row .l-lg img { height: 2.2rem; } .trust-row .l-xl img { height: 2.5rem; } }
/* where we do business: one glass pill, round flags stacked like avatars */
.trust-flags { display: flex; justify-content: center; padding-inline: var(--margin); margin-top: 0.4rem; }
.trust-flags { --pill: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)); }
.flag-text, .flag-stack { margin: 0; }
.trust-flags > * { position: relative; }
.trust-flags { gap: 0; }
.trust-flags::before { content: none; }
.trust-flags .flag-stack { display: inline-flex; padding-right: 0.75rem; }
.trust-flags .flag { display: block; width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; margin-left: -0.5rem;
  box-shadow: 0 0 0 2px rgba(30, 12, 48, 0.9), 0 6px 14px rgba(10, 4, 20, 0.45); }
.trust-flags .flag:first-child { margin-left: 0; }
.trust-flags > .flag-stack, .trust-flags > .flag-text { align-self: center; }
.trust-flags { width: max-content; max-width: calc(100% - 2 * var(--margin)); margin-inline: auto; padding: 0.45rem 1.1rem 0.45rem 0.5rem; border-radius: 999px;
  background: var(--pill); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.5), 0 10px 30px rgba(10, 4, 20, 0.3); align-items: center; }
.flag-text { font-size: 0.875rem; line-height: 1.3; opacity: 0.95; }
.flag-text > span:first-child { opacity: 0.7; margin-right: 0.15rem; }
.flag-text b { font-weight: 700; }
.flag-sep { margin: 0 0.45rem; opacity: 0.45; }
@media (max-width: 720px) { .trust-flags { border-radius: 22px; padding: 0.5rem 0.9rem 0.5rem 0.5rem; } .flag-text { font-size: 0.8125rem; } .trust-flags .flag { width: 1.5rem; height: 1.5rem; } }

/* phones: the flags pill reads in two clean lines; the portfolio goes two-up so it's not an endless scroll */
.flag-text b { white-space: nowrap; }
.pcard-media img { object-position: left center; }
@media (max-width: 720px) {
  .trust-flags { border-radius: 20px; }
  .flag-text > span:first-child { display: block; margin: 0 0 0.1rem; font-size: 0.75rem; }
  .work .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .pcard-btn { border-radius: 18px; }
  .pcard-media { aspect-ratio: 1 / 1; }
  .pcard-mono { font-size: 2.6rem; }
  .pcard-body { padding: 0.75rem 0.8rem 0.9rem; gap: 0.2rem; }
  .pcard-cat { font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcard-name { font-size: 0.95rem; padding-right: 0; }
  .pcard-go { top: 0.6rem; right: 0.6rem; bottom: auto; width: 1.9rem; height: 1.9rem; border-radius: 9px; }
  .pcard-yours .pcard-btn { min-height: 0; }
  .pcard-yours .pcard-name { font-size: 1.6rem; }
}

/* language: one glass pill, three choices (ES · EN · FR); the active one is a solid chip */
.lang-switch { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: auto; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.24); box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.6), 0 10px 30px rgba(16, 4, 30, 0.3); }
.lang-switch button { font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--paper); background: transparent; border: 0; cursor: pointer;
  min-width: 2.6rem; min-height: 2.5rem; padding: 0 0.6rem; border-radius: 999px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out); }
.lang-switch button.is-on { background: var(--paper); color: var(--plum); }
.lang-switch button:active { transform: scale(0.94); }
.lang-switch button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lang-switch button:not(.is-on):hover { background: rgba(255,255,255,0.16); } }
.foot-langs { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
@media (max-width: 720px) { .lang-switch { padding: 3px; } .lang-switch button { min-width: 2.25rem; min-height: 2.4rem; padding: 0 0.45rem; font-size: 0.75rem; } }
.hero-proof b { white-space: nowrap; }
@media (max-width: 720px) { .trust-flags .flag { margin-left: -0.3rem; } .trust-flags .flag:first-child { margin-left: 0; } .trust-flags .flag-stack { padding-right: 0.6rem; } }

/* gate background: a slow aurora of light. Two big blurred layers drift and turn (transform only, so it stays smooth) */
.gate { overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 110%, #2a0f4a 0%, #120821 55%, #0b0516 100%); }
.gate::before, .gate::after { content: ""; position: absolute; inset: -35%; z-index: -1; pointer-events: none; filter: blur(60px); will-change: transform; }
.gate::before { background:
    radial-gradient(28% 30% at 22% 30%, rgba(233, 123, 200, 0.55), transparent 70%),
    radial-gradient(32% 34% at 78% 26%, rgba(137, 80, 232, 0.6), transparent 70%),
    radial-gradient(30% 30% at 60% 78%, rgba(91, 124, 255, 0.4), transparent 70%);
  animation: aurora-a 22s ease-in-out infinite alternate; }
.gate::after { background:
    radial-gradient(22% 26% at 35% 70%, rgba(216, 197, 245, 0.35), transparent 70%),
    radial-gradient(26% 22% at 70% 55%, rgba(233, 123, 200, 0.35), transparent 70%),
    conic-gradient(from 210deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.07) 40deg, transparent 90deg, transparent 360deg);
  mix-blend-mode: screen; animation: aurora-b 30s ease-in-out infinite alternate; }
@keyframes aurora-a { 0% { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(5%, 3%, 0) rotate(14deg) scale(1.08); } 100% { transform: translate3d(-3%, 6%, 0) rotate(-10deg) scale(0.96); } }
@keyframes aurora-b { 0% { transform: translate3d(5%, 4%, 0) rotate(0deg); } 50% { transform: translate3d(-6%, -2%, 0) rotate(-22deg); } 100% { transform: translate3d(3%, -6%, 0) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .gate::before, .gate::after { animation-duration: 90s; } }
@media (max-width: 720px) { .gate::before, .gate::after { filter: blur(40px); } }

/* ---------- review fixes (oct 2026): booking, services, phone ---------- */
/* services: the booking button always closes the card, under the demo and the list, on every card */
.cap-book { grid-column: 1 / -1; order: 3; }
.cap-list + .cap-book { align-self: auto; }
/* the booking gets the stage: the colour name leaves and the axolotl steps back behind the form */
.morph-tag.is-away, html[data-scene="services"] .morph-tag.is-away { opacity: 0; pointer-events: none; }
.creature-depth { transition: transform 900ms var(--ease-out), opacity 700ms ease; }
html.creature-dim .creature-depth { opacity: 0.15; }
.agenda-title, .agenda-sub { text-shadow: 0 2px 28px rgba(20, 8, 32, 0.85); }
.book-plan { justify-self: start; margin-top: -0.4rem; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.875rem; font-weight: 700; background: var(--paper); color: var(--plum); }

@media (max-width: 720px) {
  /* sections sit closer: no full-screen minimum and tighter top and bottom, so no screen is left empty */
  .scene:not(.hero) { min-height: 0; padding-top: 5rem; padding-bottom: 3rem; }
  /* open water between the services: enough to watch the colour change, not a whole empty screen each time */
  .capabilities { gap: 38svh; padding-top: 34svh; padding-bottom: 4svh; }
  /* headlines that cross the axolotl keep a dark halo so they stay readable over its body */
  .hero-title, .features-title, .skills-title, #pricing-title, .pricing-sub, .about-title, .work-title, .cta-title, .agenda-title {
    text-shadow: 0 2px 22px rgba(20, 8, 32, 0.8), 0 0 3px rgba(20, 8, 32, 0.55); }
  /* footer: the contact column takes the whole row so "Español · English · Français" stays on one line */
  .foot-cols ul:last-child { grid-column: 1 / -1; }
  .foot-langs { flex-wrap: nowrap; white-space: nowrap; }
}

/* ---------- packages: one row you slide through (no prices; from solo business to company) ---------- */
.plans-wrap { display: grid; gap: 1.1rem; min-width: 0; }
.pricing .plans { display: flex; grid-template-columns: none; gap: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: 0; padding: 1.1rem 0.25rem 0.5rem; margin: -1.1rem -0.25rem 0; scrollbar-width: none; outline: none; }
.pricing .plans::-webkit-scrollbar { display: none; }
.pricing .plans:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); border-radius: 28px; }
.pricing .plan { position: relative; flex: 0 0 calc((100% - 2 * var(--gutter)) / 3); scroll-snap-align: start; gap: 0.75rem; }
.pricing .plan-for { min-height: 0; }
.pricing .plan-kind { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orchid); opacity: 1; margin: 0; }
.pricing .plan-list { margin: 0.2rem 0 auto; }
.pricing .plan-pay { margin-top: 0.6rem; }
.plans-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plans-dots { display: flex; gap: 0.45rem; }
.plans-dot { width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: width 260ms var(--ease-out), background-color 200ms ease; }
.plans-dot.is-on { width: 1.6rem; background: var(--paper); }
.plans-dot[hidden] { display: none; }
.plans-arrow { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08);
  color: var(--paper); font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: background-color 200ms ease, opacity 200ms ease, transform 140ms var(--ease-out); }
.plans-arrow:active { transform: scale(0.94); }
.plans-arrow:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .plans-arrow:not(:disabled):hover { background: var(--paper); color: var(--plum); } }
@media (max-width: 1100px) { .pricing .plan { flex-basis: calc((100% - var(--gutter)) / 2); } }
@media (max-width: 720px) {
  .pricing .plans { margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); scroll-padding-inline: var(--margin); gap: 0.85rem; }
  .pricing .plan { flex-basis: 84%; padding: 1.3rem; }
  .plans-arrow { display: none; }
  .plans-nav { justify-content: center; }
}

/* ---------- FAQ: plain lines that open, no boxes ---------- */
.faq .qa { grid-column: 1 / -1; border-top: 1px solid rgba(33, 17, 47, 0.18); }
.faq .qa:last-of-type { border-bottom: 1px solid rgba(33, 17, 47, 0.18); }
.faq .qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer;
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); font-weight: 700; letter-spacing: -0.015em; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.faq .qa summary::-webkit-details-marker { display: none; }
.faq .qa summary::after { content: ""; flex: none; width: 0.9rem; height: 0.9rem; background:
  linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform 260ms var(--ease-out); }
.faq .qa[open] summary::after { transform: rotate(45deg); }
.faq .qa p { max-width: 62ch; padding: 0 0 1.4rem; line-height: 1.6; opacity: 0.85; }
@media (min-width: 1101px) { .faq .faq-head { grid-column: 1 / span 4; align-self: start; } .faq .qa { grid-column: 6 / span 7; } .faq { align-content: start; } }
@media (hover: hover) and (pointer: fine) { .faq .qa summary:hover { opacity: 0.75; } }

/* ---------- footer: one tidy grid, everything aligned at the top ---------- */
.foot-row { align-items: start; }
.places { font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); gap: 0.25rem; }
.foot-cols { gap: 1.5rem var(--gutter); }
.foot-cols ul { gap: 0.6rem; }
.foot-cols a, .foot-cols button { font-size: 1rem; }
.foot-langs { flex-wrap: wrap; white-space: normal; gap: 0.25rem 0.4rem; }
@media (max-width: 720px) {
  .foot-row { gap: 2rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-cols ul:last-child { grid-column: 1 / -1; }
  .foot-name { font-size: 34vw; }
}
/* packages: the ladder reads in order (solo → company) and each slide stays compact */
.pricing .plan { order: 0 !important; padding: clamp(1.25rem, 1.8vw, 1.6rem); }
.pricing .plan-name { font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem); }
.pricing .plan-for { font-size: 0.95rem; }
.pricing .plan-list { gap: 0.4rem; font-size: 0.9375rem; }
.pricing .plan-pay { min-height: 3rem; }
/* FAQ on desktop: the heading sits on the left for all questions, in words that fit */
@media (min-width: 1101px) {
  .faq .faq-head { grid-column: 1 / span 5; grid-row: 1 / span 6; position: sticky; top: 7rem; }
  .faq .faq-title { font-size: clamp(2.6rem, 1.4rem + 2.6vw, 4.2rem); overflow-wrap: normal; word-break: normal; hyphens: none; }
  .faq .qa { grid-column: 6 / span 7; }
}
/* footer: the contact column has room for the three languages on one line */
@media (min-width: 721px) { .foot-cols { grid-template-columns: 1.1fr 0.8fr 1.4fr; } .foot-langs { flex-wrap: nowrap; white-space: nowrap; } }
.plans-nav[hidden] { display: none !important; }

/* booking: the whole closing block sits on the true centre of the page (the side index floats over it, it doesn't push it) */
@media (min-width: 1101px) { .cta.scene { padding-left: var(--margin); padding-right: var(--margin); } }
.cta .agenda { width: 100%; justify-items: center; }
.cta .book { width: min(100%, 44rem); margin-inline: auto; }
/* the calendar shows every day and hour at once: no sideways scrolling, nothing cut off */
@media (min-width: 721px) {
  .book-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; overflow: visible; }
  .book-day { min-width: 0; }
  .book-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .book-time { width: 100%; }
}
@media (max-width: 720px) { .book-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; } .book-time { padding-inline: 0.2rem; } }