:root {
    --ink: #060f22;
    --petrol: #0b2e3c;
    --navy: #0f1d40;
    --teal: #36d6c6;
    --lav: #b8a7ee;
    --violet: #8b6cff;
    --sky: #7fd3ff;
    --pink: #f2a6dc;
    --paper: #f3efe7;
    --text: #eef2fb;
    --muted: #98a6c4;
    --line: rgba(238, 242, 251, .12);
    --grad: linear-gradient(110deg, var(--teal), var(--violet));
    --grad-soft: linear-gradient(110deg, var(--sky), var(--lav));
    --gutter: clamp(16px, 4vw, 56px);
    --mark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M50.09 50.00 L50.09 50.00 L50.09 49.99 L50.09 49.99 L50.09 49.98 L50.09 49.98 L50.09 49.97 L50.09 49.97 L50.09 49.96 L50.09 49.96 L50.09 49.95 L50.09 49.95 L50.09 49.94 L50.09 49.93 L50.08 49.93 L50.08 49.92 L50.08 49.92 L50.08 49.91 L50.07 49.91 L50.07 49.90 L50.07 49.90 L50.06 49.89 L50.06 49.89 L50.05 49.88 L50.05 49.88 L50.04 49.88 L50.04 49.87 L50.03 49.87 L50.02 49.87 L50.02 49.86 L50.01 49.86 L50.00 49.86 L50.00 49.85 L49.99 49.85 L49.98 49.85 L49.97 49.85 L49.96 49.85 L49.96 49.85 L49.95 49.85 L49.94 49.85 L49.93 49.85 L49.92 49.85 L49.91 49.85 L49.91 49.86 L49.90 49.86 L49.89 49.86 L49.88 49.87 L49.87 49.87 L49.86 49.87 L49.86 49.88 L49.85 49.89 L49.84 49.89 L49.83 49.90 L49.82 49.91 L49.82 49.91 L49.81 49.92 L49.80 49.93 L49.80 49.94 L49.79 49.95 L49.78 49.96 L49.78 49.97 L49.77 49.98 L49.77 49.99 L49.77 50.00 L49.76 50.01 L49.76 50.03 L49.76 50.04 L49.76 50.05 L49.76 50.06 L49.76 50.08 L49.76 50.09 L49.76 50.10 L49.76 50.12 L49.76 50.13 L49.77 50.15 L49.77 50.16 L49.77 50.17 L49.78 50.19 L49.79 50.20 L49.79 50.22 L49.80 50.23 L49.81 50.24 L49.82 50.26 L49.83 50.27 L49.84 50.28 L49.85 50.29 L49.87 50.30 L49.88 50.31 L49.89 50.33 L49.91 50.34 L49.93 50.34 L49.94 50.35 L49.96 50.36 L49.98 50.37 L50.00 50.37 L50.01 50.38 L50.03 50.39 L50.05 50.39 L50.07 50.39 L50.10 50.39 L50.12 50.39 L50.14 50.39 L50.16 50.39 L50.18 50.39 L50.20 50.39 L50.23 50.38 L50.25 50.38 L50.27 50.37 L50.29 50.36 L50.32 50.35 L50.34 50.34 L50.36 50.33 L50.38 50.31 L50.40 50.30 L50.43 50.28 L50.45 50.26 L50.47 50.24 L50.48 50.22 L50.50 50.20 L50.52 50.18 L50.54 50.16 L50.55 50.13 L50.57 50.10 L50.58 50.08 L50.59 50.05 L50.60 50.02 L50.61 49.99 L50.62 49.96 L50.63 49.93 L50.63 49.89 L50.64 49.86 L50.64 49.83 L50.64 49.79 L50.64 49.76 L50.63 49.72 L50.63 49.68 L50.62 49.65 L50.61 49.61 L50.60 49.57 L50.59 49.54 L50.57 49.50 L50.55 49.47 L50.54 49.43 L50.51 49.39 L50.49 49.36 L50.47 49.33 L50.44 49.29 L50.41 49.26 L50.38 49.23 L50.34 49.20 L50.31 49.17 L50.27 49.14 L50.23 49.12 L50.19 49.09 L50.14 49.07 L50.10 49.05 L50.05 49.03 L50.00 49.02 L49.95 49.00 L49.90 48.99 L49.85 48.98 L49.80 48.97 L49.74 48.97 L49.69 48.97 L49.63 48.97 L49.57 48.97 L49.51 48.98 L49.45 48.99 L49.40 49.00 L49.34 49.02 L49.28 49.04 L49.22 49.06 L49.16 49.09 L49.10 49.12 L49.04 49.15 L48.99 49.19 L48.93 49.23 L48.88 49.27 L48.82 49.32 L48.77 49.37 L48.72 49.42 L48.68 49.48 L48.63 49.54 L48.59 49.60 L48.55 49.67 L48.51 49.74 L48.48 49.81 L48.45 49.88 L48.42 49.96 L48.39 50.04 L48.37 50.12 L48.36 50.21 L48.34 50.29 L48.33 50.38 L48.33 50.47 L48.33 50.56 L48.34 50.66 L48.35 50.75 L48.36 50.84 L48.38 50.94 L48.40 51.03 L48.43 51.13 L48.47 51.23 L48.51 51.32 L48.56 51.42 L48.61 51.51 L48.66 51.60 L48.73 51.69 L48.79 51.78 L48.87 51.87 L48.95 51.95 L49.03 52.03 L49.12 52.11 L49.21 52.18 L49.31 52.25 L49.42 52.32 L49.53 52.38 L49.64 52.44 L49.76 52.49 L49.88 52.54 L50.01 52.58 L50.14 52.62 L50.28 52.65 L50.42 52.67 L50.56 52.69 L50.70 52.70 L50.85 52.70 L51.00 52.70 L51.15 52.68 L51.30 52.66 L51.46 52.64 L51.61 52.60 L51.76 52.55 L51.92 52.50 L52.07 52.44 L52.23 52.37 L52.38 52.29 L52.53 52.20 L52.68 52.10 L52.82 52.00 L52.96 51.88 L53.10 51.76 L53.23 51.63 L53.36 51.49 L53.48 51.34 L53.60 51.18 L53.71 51.01 L53.82 50.84 L53.91 50.66 L54.00 50.47 L54.08 50.27 L54.15 50.07 L54.22 49.86 L54.27 49.64 L54.31 49.42 L54.34 49.19 L54.36 48.96 L54.37 48.73 L54.37 48.49 L54.35 48.24 L54.33 48.00 L54.29 47.75 L54.23 47.50 L54.17 47.25 L54.08 47.00 L53.99 46.75 L53.88 46.50 L53.76 46.25 L53.62 46.01 L53.47 45.77 L53.31 45.53 L53.13 45.30 L52.93 45.08 L52.72 44.86 L52.50 44.65 L52.27 44.44 L52.02 44.25 L51.75 44.07 L51.48 43.89 L51.19 43.73 L50.89 43.58 L50.57 43.45 L50.25 43.33 L49.91 43.22 L49.57 43.13 L49.21 43.05 L48.85 42.99 L48.48 42.95 L48.10 42.93 L47.71 42.93 L47.32 42.94 L46.92 42.98 L46.52 43.04 L46.12 43.11 L45.72 43.21 L45.31 43.33 L44.91 43.48 L44.50 43.64 L44.10 43.83 L43.71 44.04 L43.32 44.28 L42.93 44.54 L42.55 44.82 L42.19 45.12 L41.83 45.45 L41.48 45.80 L41.15 46.17 L40.83 46.57 L40.52 46.99 L40.24 47.42 L39.97 47.88 L39.72 48.36 L39.49 48.86 L39.28 49.38 L39.10 49.91 L38.94 50.47 L38.81 51.03 L38.70 51.62 L38.62 52.21 L38.57 52.82 L38.55 53.44 L38.57 54.07 L38.61 54.71 L38.69 55.35 L38.80 56.00 L38.95 56.66 L39.13 57.31 L39.34 57.97 L39.60 58.62 L39.89 59.27 L40.22 59.92 L40.58 60.55 L40.98 61.18 L41.42 61.80 L41.90 62.40 L42.41 62.99 L42.96 63.55 L43.55 64.10 L44.18 64.63 L44.84 65.13 L45.53 65.61 L46.26 66.06 L47.02 66.47 L47.82 66.86 L48.64 67.21 L49.50 67.52 L50.38 67.80 L51.29 68.03 L52.22 68.22 L53.18 68.36 L54.15 68.46 L55.15 68.51 L56.16 68.51 L57.19 68.46 L58.23 68.36 L59.28 68.20 L60.33 67.99 L61.39 67.72 L62.45 67.39 L63.51 67.01 L64.56 66.56 L65.61 66.06 L66.65 65.49 L67.67 64.87 L68.67 64.18 L69.66 63.44 L70.62 62.63 L71.55 61.76 L72.45 60.83 L73.32 59.85 L74.15 58.80 L74.94 57.70 L75.69 56.55 L76.38 55.34 L77.03 54.07 L77.62 52.76 L78.15 51.40 L78.62 49.99 L79.02 48.53 L79.36 47.04 L79.62 45.51 L79.82 43.94 L79.93 42.34 L79.97 40.72 L79.92 39.06 L79.79 37.39 L79.57 35.70 L79.26 34.00 L78.87 32.28 L78.38 30.57 L77.79 28.85 L77.11 27.14 L76.34 25.44 L75.46 23.76 L74.49 22.09 L73.42 20.46 L72.26 18.85 L70.99 17.28 L69.63 15.75 L68.17 14.27 L66.61 12.84 L64.96 11.47 L63.22 10.17 L61.38 8.93 L59.46 7.77 L57.45 6.69 L55.36 5.70 L53.19 4.80 L50.94 4.00%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.2%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%223.4%22/%3E%3C/svg%3E");
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--ink); color: var(--text);
    font-family: "Heebo", system-ui, sans-serif; font-weight: 300; font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  a { color: inherit; }
  img { display: block; max-width: 100%; }
  .label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
  .sp { width: 18px; height: 18px; flex: none; background: var(--grad); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
  .gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  section h2 { font-size: clamp(34px, 4.4vw, 64px); font-weight: 200; line-height: 1.08; margin: 14px 0 16px; }
  section h2 b { font-weight: 500; }
  .lead { color: #c3cce2; max-width: 38em; font-size: clamp(16px, 1.3vw, 19px); margin: 0; }

  /* soft gradient blobs behind sections */
  .mesh { position: relative; isolation: isolate; }
  .mesh::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: blur(40px); opacity: .9;
    background:
      radial-gradient(34vw 26vw at 85% 20%, rgba(139, 108, 255, .26), transparent 70%),
      radial-gradient(30vw 24vw at 10% 70%, rgba(54, 214, 198, .16), transparent 70%),
      radial-gradient(26vw 22vw at 55% 95%, rgba(139, 108, 255, .16), transparent 70%);
    animation: drift 18s ease-in-out infinite alternate;
  }
  @keyframes drift { to { transform: translate3d(-3vw, 2vw, 0) scale(1.06); } }

  /* ---------- nav ---------- */
  .nav { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); transition: background .3s, padding .3s; }
  .nav.solid { background: rgba(6, 13, 30, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 1px 0 rgba(184, 167, 238, .12); padding-top: 12px; padding-bottom: 12px; }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .brand img { width: 40px; height: 40px; filter: invert(1); }
  .brand span { font-size: 13px; letter-spacing: .34em; font-weight: 400; direction: ltr; }
  .nav ul { display: flex; gap: clamp(14px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; font-size: 15px; }
  .nav ul a { text-decoration: none; color: var(--muted); transition: color .2s; }
  .nav ul a:hover { color: var(--text); }
  .lang { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; letter-spacing: .2em; text-decoration: none; color: var(--muted); }

  /* ---------- galaxy ---------- */
  .galaxy { position: relative; height: 420vh; }
  .stage {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    background:
      radial-gradient(70vmax 60vmax at var(--gx, 50%) var(--gy, 50%), var(--glow, rgba(54, 214, 198, .10)), transparent 60%),
      radial-gradient(60vmax 50vmax at 15% 85%, rgba(184, 167, 238, .08), transparent 60%),
      linear-gradient(170deg, #071f2b, var(--ink) 50%, #0a1830);
    transition: --glow 1s;
  }
  #sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  /* the hand sits at left/top (set from the galaxy each frame); the spiral of light rises from it */
  .finale { position: absolute; z-index: 2; height: 58vh; margin: 0; pointer-events: none; opacity: var(--fin, 0);
    transform: translate(-51%, calc(-9.1% + (1 - var(--fin, 0)) * 40px)); }
  .finale img { height: 100%; width: auto; display: block; -webkit-mask: linear-gradient(to bottom, #000 70%, transparent 98%); mask: linear-gradient(to bottom, #000 70%, transparent 98%); } /* no hard edge at her feet */
  .chapter {
    position: absolute; top: 18vh; right: var(--gutter); max-width: min(520px, 46vw); z-index: 3; pointer-events: none;
  }
  .chapter .label { display: block; margin-bottom: 14px; color: var(--teal); }
  .chapter h1 { font-size: clamp(38px, 5.6vw, 84px); line-height: 1.04; font-weight: 200; margin: 0 0 18px; min-height: 1.04em; }
  .chapter h1 .caret { display: inline-block; width: .06em; height: .9em; background: var(--teal); margin-inline-start: .08em; vertical-align: -.08em; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .chapter p { color: #fff; font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; line-height: 1.45; text-shadow: 0 1px 14px rgba(6, 15, 34, .9); margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .8s .25s, transform .8s .25s; }
  .chapter.ready p { opacity: 1; transform: none; }
  .chapter .btns { margin-top: 26px; pointer-events: auto; opacity: 0; transition: opacity .8s .5s; }
  .chapter.ready .btns { opacity: 1; }
  .chapter .btns[hidden] { display: none; }
  .motto { direction: ltr; text-align: right; font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: var(--lav); margin-top: 22px; }

  .chapter p { min-height: 3.2em; }
  .meters { display: flex; margin-top: clamp(34px, 6vh, 64px); }
  .meters div { display: flex; flex-direction: column; padding-inline: clamp(14px, 1.8vw, 28px); border-inline-start: 1px solid rgba(184, 167, 238, .22); }
  .meters div:first-child { padding-inline-start: 0; border: 0; }
  .meters b { font-size: clamp(40px, 4.4vw, 66px); font-weight: 600; min-width: 1.9ch; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em;
    background: linear-gradient(170deg, #fff 30%, var(--lav) 70%, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 22px rgba(139, 108, 255, .35)); }
  .meters span { margin-top: 10px; font-size: 13px; letter-spacing: .24em; color: var(--lav); }

  .rail { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
  .rail button { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 0; opacity: .55; transition: opacity .3s, color .3s; }
  .rail button i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background .3s, transform .3s; }
  .rail button.on { color: var(--text); opacity: 1; }
  .rail button.on i { background: var(--teal); border-color: var(--teal); transform: scale(1.4); }
  .rail button:hover { opacity: 1; }

  .hint { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--lav); font-size: 12px; letter-spacing: .3em; transition: opacity .6s; }
  .hint i { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(184, 167, 238, .45); background: radial-gradient(circle, rgba(139, 108, 255, .22), transparent 70%); box-shadow: 0 0 24px rgba(139, 108, 255, .35); }
  .hint i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(54, 214, 198, .6); animation: hint-ring 2.2s ease-out infinite; }
  .hint svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(54, 214, 198, .9)); animation: hint-bounce 1.6s cubic-bezier(.45, 0, .2, 1) infinite; }
  .hint:hover i { border-color: rgba(184, 167, 238, .9); }
  @keyframes hint-bounce { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(6px); } }
  @keyframes hint-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .hint svg, .hint i::after { animation: none; } }

  .tip { position: absolute; z-index: 4; pointer-events: none; padding: 8px 14px; border-radius: 10px; background: rgba(6, 26, 36, .88); border: 1px solid rgba(54, 214, 198, .35); backdrop-filter: blur(8px); font-size: 14px; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .2s; }
  .tip.on { opacity: 1; }
  .tip small { display: block; color: var(--muted); font-size: 12px; }

  .btns { display: flex; gap: 12px; flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 400;
    text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--text); transition: transform .2s, background .2s;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn.primary { background: var(--text); color: var(--ink); border-color: var(--text); font-weight: 500; }
  .all-head { padding: 80px var(--gutter) 10px; }
  .all-head h2 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 200; margin: 8px 0 0; }


  .stage {
    background:
      radial-gradient(70vmax 60vmax at var(--gx, 50%) var(--gy, 50%), var(--glow, rgba(139, 108, 255, .14)), transparent 60%),
      radial-gradient(50vmax 40vmax at 88% 12%, rgba(127, 211, 255, .08), transparent 60%),
      radial-gradient(60vmax 50vmax at 12% 88%, rgba(54, 214, 198, .10), transparent 60%),
      linear-gradient(170deg, #0a1631, var(--ink) 50%, #120c2e);
  }
  .chapter h1 { background: linear-gradient(110deg, #fff 25%, var(--lav) 65%, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .chapter .label { color: var(--lav); }
  .chapter { max-width: min(460px, 36vw); }
  .rail { left: 18px; }
  .rail button span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .4s; }
  .rail button.on span, .rail button:hover span { max-width: 200px; }
  .btn.primary { background: var(--grad); color: #0b0820; border: 0; background-size: 160% 100%; transition: transform .2s, background-position .6s; }
  .btn.primary:hover { background-position: 100% 0; }

  /* ---------- services: chambers of a nautilus ---------- */
  .services { padding: 130px var(--gutter) 110px; position: relative; overflow: hidden; }
  .services .head { max-width: 760px; margin-bottom: 60px; }
  .svc-spiral { position: absolute; z-index: -1; width: min(1300px, 120vw); left: 50%; top: 42%; transform: translate(-50%, -50%); opacity: .55; pointer-events: none; }
  .svc-spiral path { fill: none; stroke: url(#svcg); stroke-width: 1.4; stroke-linecap: round; }
  .chambers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: end; }
  .chamber {
    --c1: var(--teal); --c2: var(--violet);
    position: relative; border-radius: 26px; padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 10px;
    background:
      radial-gradient(120% 70% at 80% 0%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 60%),
      radial-gradient(90% 60% at 10% 100%, color-mix(in srgb, var(--c2) 26%, transparent), transparent 70%),
      rgba(255, 255, 255, .035);
    border: 1px solid transparent; background-clip: padding-box;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  }
  .chamber::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(160deg, var(--c1), transparent 40%, transparent 60%, var(--c2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .chamber:hover { transform: translateY(-8px); }
  .chamber:nth-child(1) { min-height: 490px; --c1: #36d6c6; --c2: #7fd3ff; }
  .chamber:nth-child(2) { min-height: 530px; --c1: #7fd3ff; --c2: #8b6cff; }
  .chamber:nth-child(3) { min-height: 570px; --c1: #b8a7ee; --c2: #8b6cff; }
  .chamber:nth-child(4) { min-height: 610px; --c1: #8b6cff; --c2: #36d6c6; }
  .chamber:nth-child(5) { min-height: 650px; --c1: #8b6cff; --c2: #f2a6dc; }
  .chamber .num { display: flex; align-items: center; justify-content: space-between; font-size: 13px; letter-spacing: .2em; color: var(--muted); }
  .chamber .ring { width: calc(26px + var(--i) * 10px); height: calc(26px + var(--i) * 10px); background: linear-gradient(140deg, var(--c1), var(--c2)); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
  /* a line drawing of what you get, more complex with every chamber; it draws itself when the card comes into view */
  .chamber .art { display: block; width: 100%; height: auto; aspect-ratio: 200 / 120; margin: 12px 0 2px; overflow: visible; transition: filter .5s, transform .5s; }
  .art g * { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .art .bg { fill: #0d1433; }
  .art .fill { fill: url(#ag1); fill-opacity: .28; }
  .chamber:nth-child(2) .art .fill { fill: url(#ag2); } .chamber:nth-child(3) .art .fill { fill: url(#ag3); } .chamber:nth-child(4) .art .fill { fill: url(#ag4); } .chamber:nth-child(5) .art .fill { fill: url(#ag5); }
  .art .d { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .chamber.in .art .d { animation: art-draw 1.4s cubic-bezier(.45, 0, .2, 1) forwards; animation-delay: calc(.35s + var(--i) * .12s + var(--k) * .07s); }
  .art .pulse { fill: #fff; stroke: none; filter: drop-shadow(0 0 3px var(--c1)); }
  .chamber:hover .art { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c1) 55%, transparent)); transform: scale(1.04); }
  @keyframes art-draw { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .art .d { stroke-dashoffset: 0; animation: none !important; } }
  .chamber h3 { margin: 8px 0 0; font-size: clamp(21px, 1.7vw, 26px); font-weight: 500; line-height: 1.2; }
  .chamber .tag { margin: 0; color: #d3d9ec; font-size: 15px; }
  .chamber ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; color: #c3cce2; }
  .chamber li { display: flex; gap: 9px; align-items: baseline; }
  .chamber li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(var(--c1), var(--c2)); flex: none; transform: translateY(-2px); }
  .chamber .price { margin-top: auto; padding-top: 16px; font-size: 18px; font-weight: 500; }
  .chamber .price small { display: block; font-size: 12px; color: var(--muted); font-weight: 300; letter-spacing: .08em; }
  .chamber .go { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 500; background: linear-gradient(120deg, var(--c1), var(--c2)); color: #0b0820; }
  .chamber .new { display: inline-block; vertical-align: .2em; margin-inline-start: 10px; background: var(--grad); color: #0b0820; font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1; padding: 6px 12px; border-radius: 999px; }

  /* ---------- process ---------- */
  .process { padding: 110px var(--gutter); }
  .values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 46px 0 80px; }
  .value { padding: 26px; border-radius: 22px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
  .value i { display: block; width: 70px; height: 62px; background: var(--grad); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; margin-bottom: 16px; }
  .value h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
  .value p { margin: 0; color: var(--muted); font-size: 15px; }
  .steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
  .steps > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .steps > svg path { fill: none; stroke: url(#stg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(139, 108, 255, .55)); }
  .step { position: relative; padding-top: 96px; }
  .step b { position: absolute; top: 2px; inset-inline-start: 0; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #141a3c, var(--ink) 70%); border: 1px solid rgba(184, 167, 238, .28); transition: border-color .5s, box-shadow .5s, transform .5s; }
  .step b svg { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; display: block; fill: none; stroke: #7d80a8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: opacity .5s; }
  .step b .n { position: absolute; top: -3px; inset-inline-end: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; line-height: 1; background: #1a2550; color: var(--muted); border: 2px solid var(--ink); transition: background .5s, color .5s; }
  .step.lit b { border-color: rgba(184, 167, 238, .85); box-shadow: 0 0 28px rgba(139, 108, 255, .5), inset 0 0 18px rgba(54, 214, 198, .16); transform: scale(1.06); }
  .step.lit b svg { stroke: var(--ico, #e9e4ff); opacity: 1; }
  .step.lit b .n { background: var(--grad); color: #0b0820; }
  .step h3, .step p { transition: opacity .5s; }
  .step:not(.lit) h3, .step:not(.lit) p { opacity: .45; }
  .step h3 { margin: 0 0 6px; font-size: 19px; font-weight: 500; }
  .step p { margin: 0; color: var(--muted); font-size: 15px; }

  /* ---------- voices ---------- */
  .voices { padding: 100px 0 110px; }
  .voices .head { padding: 0 var(--gutter); }
  .quotes { display: grid; grid-auto-flow: column; grid-auto-columns: min(440px, 82vw); gap: 18px; overflow-x: auto; padding: 40px var(--gutter) 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .quotes::-webkit-scrollbar { display: none; }
  .quote { margin: 0; scroll-snap-align: start; position: relative; padding: 30px 28px; border-radius: 24px; background: linear-gradient(160deg, rgba(139, 108, 255, .14), rgba(54, 214, 198, .05) 60%, rgba(127, 211, 255, .06)); border: 1px solid rgba(184, 167, 238, .22); display: flex; flex-direction: column; }
  .quote::before { content: "”"; position: absolute; top: 4px; left: 22px; font-size: 90px; line-height: 1; font-weight: 700; opacity: .5; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .quote p { margin: 0 0 22px; font-size: 16px; color: #dbe1f2; }
  .quote footer { margin-top: auto; display: block; padding: 0; border: 0; font-size: 14px; color: var(--muted); }
  .quote footer b { display: block; color: var(--text); font-weight: 500; font-size: 15px; }

  /* ---------- about ---------- */
  .about { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6vw; align-items: center; padding: 100px var(--gutter); }
  .about figure { position: relative; margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; }
  .about figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 55%, rgba(139, 108, 255, .35)); }
  .about figure img { width: 100%; height: 100%; object-fit: cover; }
  .about blockquote { margin: 18px 0 26px; font-size: clamp(28px, 3.2vw, 46px); font-weight: 200; line-height: 1.2; }
  .about p { color: #c3cce2; max-width: 36em; }

  /* ---------- contact ---------- */
  .contact { text-align: center; padding: 130px var(--gutter) 80px; position: relative; overflow: hidden; }
  .contact .big { position: absolute; z-index: -1; width: min(760px, 110vw); aspect-ratio: 1; left: 50%; top: 52%; transform: translate(-50%, -50%); opacity: .35; background: var(--grad); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; animation: turn 60s linear infinite; }
  @keyframes turn { to { transform: translate(-50%, -50%) rotate(-360deg); } }
  .contact h2 { margin: 18px auto 30px; }
  .contact .btns { justify-content: center; }
  .site-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .site-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 26px var(--gutter); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

  /* ---------- scroll spiral ---------- */
  .scrollmark { position: fixed; left: 18px; bottom: 18px; z-index: 31; width: 54px; height: 54px; border: 0; padding: 0; background: rgba(6, 15, 34, .55); border-radius: 50%; backdrop-filter: blur(8px); cursor: pointer; }
  .scrollmark svg { width: 100%; height: 100%; }
  .scrollmark path { fill: none; stroke-width: 3.2; stroke-linecap: round; }

  /* ---------- modal ---------- */
  dialog { border: 0; padding: 0; width: min(1180px, 94vw); max-height: 92vh; border-radius: 20px; background: #0d1838; color: var(--text); overflow: hidden; }
  dialog::backdrop { background: rgba(3, 6, 17, .82); backdrop-filter: blur(6px); }
  .m-wrap { display: grid; grid-template-rows: 1fr auto; max-height: 92vh; }
  .m-stage { position: relative; background: var(--paper); min-height: 0; height: min(68vh, 720px); }
  .m-stage img { width: 100%; height: 100%; object-fit: contain; }
  .m-stage button { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(6, 15, 34, .72); color: #fff; font-size: 20px; cursor: pointer; }
  .m-prev { right: 14px; } .m-next { left: 14px; }
  .m-close { position: absolute; top: 14px; left: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(6, 15, 34, .72); color: #fff; font-size: 20px; cursor: pointer; }
  .m-info { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 26px; flex-wrap: wrap; }
  .m-info h3 { margin: 0; font-size: 22px; font-weight: 500; }
  .m-info p { margin: 0; color: var(--muted); font-size: 15px; }
  .m-thumbs { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; }
  .m-thumbs button { flex: 0 0 64px; height: 44px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--paper); cursor: pointer; opacity: .6; }
  .m-thumbs button.on { border-color: var(--violet); opacity: 1; }
  .m-thumbs img { width: 100%; height: 100%; object-fit: cover; }

  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s, transform .9s; }
  .reveal.in { opacity: 1; transform: none; }

  @media (max-width: 1100px) {
    .chambers { grid-template-columns: repeat(2, 1fr); }
    .chamber { min-height: 0 !important; }
    .chamber:nth-child(5) { grid-column: 1 / -1; }
    .steps { grid-template-columns: 1fr; gap: 6px; }
    .steps > svg { display: none; }
    .step { padding: 0 0 26px; padding-inline-start: 78px; min-height: 70px; }
    .step b { top: 0; }
  }
  @media (max-width: 900px) {
    .nav ul { display: none; }
    .chapter { top: 12vh; left: var(--gutter); max-width: none; }
    .rail { display: none; }
    .finale { height: 40vh; }
    .stage.fin .motto { opacity: 0; }
    .chapter { bottom: 5vh; display: flex; flex-direction: column; }
    .chapter p { min-height: 0; }
    .hint { bottom: calc(5vh + 104px); }
    .meters { margin-top: auto; justify-content: center; }
    .meters b { font-size: 40px; }
    .values { grid-template-columns: 1fr; }
    .about { grid-template-columns: 1fr; }
  }
  @media (max-width: 620px) { .chambers { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ---------- menu: slim bar + full-screen spiral menu ---------- */
.nav { z-index: 60; }
.nav-here { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .3em; color: var(--muted); transition: opacity .3s; }
.nav-side { display: flex; align-items: center; gap: 10px; }
.nav-lang { text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: .08em; padding: 8px 12px; border-radius: 999px; color: var(--text); border: 1px solid rgba(184, 167, 238, .35); transition: background .2s, opacity .3s; }
.nav-lang:hover { background: rgba(139, 108, 255, .18); }
.menu-open .nav-lang { opacity: 0; pointer-events: none; }
.nav-cta { text-decoration: none; font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: 999px; background: var(--grad); color: #0b0820; transition: transform .2s, opacity .3s; }
.nav-cta:hover { transform: translateY(-1px); }
.burger { display: flex; align-items: center; gap: 10px; padding-block: 6px; padding-inline: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(6, 15, 34, .45); backdrop-filter: blur(10px); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.burger i { width: 30px; height: 30px; background: var(--grad); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.burger:hover i { transform: rotate(-120deg); }
.menu-open .burger i { transform: rotate(-540deg) scale(.9); }
.menu-open .nav-here, .menu-open .nav-cta { opacity: 0; pointer-events: none; }
.menu-open .nav { background: transparent !important; backdrop-filter: none !important; }
.menu-open { overflow: hidden; }

.menu {
  position: fixed; inset: 0; z-index: 55; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 4vw;
  padding: 100px var(--gutter) 60px; visibility: hidden;
  background:
    radial-gradient(60vmax 50vmax at 20% 50%, rgba(139, 108, 255, .2), transparent 60%),
    radial-gradient(50vmax 40vmax at 90% 90%, rgba(54, 214, 198, .12), transparent 60%),
    #050c1f;
  clip-path: circle(0 at var(--ox, 90%) var(--oy, 40px));
  transition: clip-path .8s cubic-bezier(.7, 0, .2, 1), visibility 0s .8s;
}
.menu.open { visibility: visible; clip-path: circle(160vmax at var(--ox, 90%) var(--oy, 40px)); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; order: 0; }
.menu-list li { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); padding-inline-start: calc(var(--i) * 18px); }
.menu.open .menu-list li { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .06s); }
.menu-list a:focus { outline: none; }
.menu-list a:focus-visible { outline: 1px solid rgba(184, 167, 238, .5); outline-offset: 6px; border-radius: 10px; }
.menu-list a { display: grid; grid-template-columns: 40px auto; grid-template-rows: auto auto; column-gap: 14px; text-decoration: none; padding: 8px 0; width: fit-content; }
.menu-list .mn { grid-row: 1 / 3; font-size: 12px; letter-spacing: .2em; color: var(--muted); padding-top: 14px; }
.menu-list .mt { font-size: clamp(30px, 4.2vw, 58px); font-weight: 200; line-height: 1.08; transition: color .3s; }
.menu-list .md { font-size: 14px; color: var(--muted); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s; }
.menu-list a:hover .mt, .menu-list a:focus-visible .mt, .menu-list a.here .mt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 400; }
.menu-list a:hover .md, .menu-list a:focus-visible .md { max-height: 24px; opacity: 1; }
.menu-list a.here .mn::after { content: " ●"; color: var(--teal); }
.menu-list .msub { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 54px 8px 0; }
.menu-list .msub a { display: inline-block; width: auto; padding: 6px 14px; font-size: 14px; color: #c9cfe6; text-decoration: none; border: 1px solid rgba(184, 167, 238, .28); border-radius: 999px; transition: border-color .3s, background .3s, color .3s; }
.menu-list .msub a:hover, .menu-list .msub a:focus-visible, .menu-list .msub a.here { border-color: rgba(184, 167, 238, .8); background: rgba(139, 108, 255, .14); color: #fff; }
.menu-art { position: relative; aspect-ratio: 1; width: min(560px, 100%); justify-self: center; }
.menu-art svg { width: 100%; height: 100%; overflow: visible; animation: turn-menu 90s linear infinite; }
@keyframes turn-menu { to { transform: rotate(-360deg); } }
.menu-art path { fill: none; stroke: url(#mg); stroke-width: .5; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(139, 108, 255, .9)); }
.menu-art circle { fill: #fff; filter: drop-shadow(0 0 2px #8b6cff) drop-shadow(0 0 5px #36d6c6); transition: cx .6s cubic-bezier(.2, .8, .2, 1), cy .6s cubic-bezier(.2, .8, .2, 1); }
.menu-foot { position: absolute; bottom: 30px; right: var(--gutter); left: var(--gutter); display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; }
.menu-foot a { text-decoration: none; color: var(--text); }
@media (max-width: 900px) {
  .nav-here, .nav-cta { display: none; }
  /* one straight column on the page gutter; it scrolls if the screen is short */
  .menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 92px var(--gutter) calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .menu-list { width: 100%; gap: 0; margin-block: auto; }
  .menu-list li { padding-inline-start: 0; border-bottom: 1px solid var(--line); }
  .menu-list li:last-child { border-bottom: 0; }
  .menu-list li > a { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto; align-items: center; column-gap: 8px; width: 100%; padding: clamp(10px, 2.1vh, 18px) 0; }
  .menu-list .mn { grid-row: auto; padding-top: 0; font-size: 11px; }
  .menu-list .mt { font-size: clamp(25px, 7.2vw, 34px); }
  .menu-list .md { display: none; }
  .menu-list a.here .mn::after { content: none; }
  .menu-list .msub { gap: 6px; margin: -3px 42px 13px 0; }
  .menu-list .msub a { padding: 6px 11px; font-size: 13px; }
  .menu-art { position: fixed; z-index: -1; left: -34vw; bottom: -30vw; width: 96vw; opacity: .16; pointer-events: none; }
  .menu-art circle { display: none; }
  .menu-foot { position: static; flex: none; margin-top: 18px; padding-top: 14px; gap: 6px 18px; justify-content: space-between; font-size: 13px; }
}
/* a phone on its side: two columns, so everything is in reach */
@media (max-width: 900px) and (max-height: 520px) {
  .menu { padding-top: 76px; }
  .menu-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .menu-list li > a { padding: 8px 0; }
  .menu-list .mt { font-size: 22px; }
  .menu-list li:nth-last-child(2) { border-bottom: 0; }
}

/* ---------- light sections: a warm, lilac-tinted paper between the dark ones ---------- */
.light {
  --text: #1d1a3f; --muted: #6a6688; --line: rgba(29, 26, 63, .12);
  --grad: linear-gradient(110deg, #12a596, #6b4ee6);
  position: relative; isolation: isolate; overflow: hidden; color: var(--text);
  background:
    radial-gradient(50vmax 40vmax at 88% 0%, rgba(184, 167, 238, .38), transparent 60%),
    radial-gradient(40vmax 34vmax at 6% 100%, rgba(54, 214, 198, .16), transparent 60%),
    #f6f4fb;
  border-radius: 40px; margin: 40px clamp(10px, 1.6vw, 24px);
}
.light::after { /* the signature spiral, as a watermark */
  content: ""; position: absolute; z-index: -1; width: min(620px, 70vw); aspect-ratio: 1; left: -8%; top: -18%;
  background: linear-gradient(140deg, #b8a7ee, #36d6c6); opacity: .17;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
.light .quote { background: #fff; border-color: rgba(139, 108, 255, .18); box-shadow: 0 2px 4px rgba(76, 58, 160, .04), 0 16px 36px -22px rgba(76, 58, 160, .3); }
.light.voices { padding-bottom: 40px; }
/* room for the card shadows inside the scroller, a snap that respects the gutter, and soft edges instead of hard cuts */
.light .quotes { padding-bottom: 50px; scroll-padding-inline: var(--gutter); -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.light .quote p { color: #3a3660; }
.light .quote::before { opacity: .9; }
.light .lead { color: var(--muted); }
.light.alt::after { left: -12%; top: auto; bottom: -34%; transform: rotate(140deg); }
/* cards on paper */
.light .cap, .light .who-grid div, .light .plan { background: #fff; border-color: rgba(139, 108, 255, .16); box-shadow: 0 2px 4px rgba(76, 58, 160, .04), 0 16px 36px -22px rgba(76, 58, 160, .3); }
.light .plan.star { background: radial-gradient(120% 80% at 90% 0%, rgba(139, 108, 255, .14), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(54, 214, 198, .1), transparent 70%), #fff; border-color: rgba(139, 108, 255, .4); }
.light .plan li.no { color: #a19eb9; }
.light .plan li.no i { background: #cfcbe2; }
.light .dod-line { border-color: rgba(139, 108, 255, .35); background: rgba(255, 255, 255, .6); }
.light .btn { border-color: rgba(29, 26, 63, .2); color: var(--text); }
.light .btn.primary { background: var(--text); border-color: var(--text); color: #fff; }
.light .who-grid b { color: #6b4ee6; }
.light .cap .ico { background: rgba(139, 108, 255, .1); border-color: rgba(139, 108, 255, .25); }
/* process stations on paper */
.light .step b { background: #fff; border-color: rgba(139, 108, 255, .25); box-shadow: 0 10px 24px -14px rgba(76, 58, 160, .35); }
.light .step b svg { stroke: #9a96bb; }
.light .step b .n { background: #ece8fb; color: #6a6688; border-color: #f6f4fb; }
.light .step.lit b { border-color: rgba(139, 108, 255, .6); box-shadow: 0 0 0 4px rgba(139, 108, 255, .08), 0 12px 28px -12px rgba(107, 78, 230, .45); }
.light .steps > svg path { filter: none; }
/* client logos turn ink-dark on paper */
.light .ltrack img { filter: brightness(0); opacity: .62; }
.light .ltrack img:hover { filter: brightness(0); opacity: .9; }
.light.why { max-width: none; }
.light.why blockquote { max-width: 1000px; }

/* ---------- menu button: clearly a menu, at a glance ---------- */
.burger { padding-block: 5px; padding-inline: 5px 16px; border: 1px solid transparent; font-weight: 500; color: #fff;
  background: linear-gradient(rgba(8, 14, 36, .8), rgba(8, 14, 36, .8)) padding-box, var(--grad) border-box;
  box-shadow: 0 0 22px -6px rgba(139, 108, 255, .7); animation: burger-hi 2.4s ease-in-out 1.2s 3; }
.burger i { position: relative; width: 34px; height: 34px; border-radius: 50%; -webkit-mask: none; mask: none; box-shadow: 0 0 14px rgba(54, 214, 198, .5); }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: #0b0820; transition: transform .4s cubic-bezier(.2, .8, .2, 1), top .4s; }
.burger i::before { top: 13px; }
.burger i::after { top: 19px; }
.burger:hover i { transform: rotate(90deg); }
.menu-open .burger i { transform: none; }
.menu-open .burger i::before { top: 16px; transform: rotate(45deg); }
.menu-open .burger i::after { top: 16px; transform: rotate(-45deg); }
@keyframes burger-hi { 50% { box-shadow: 0 0 0 6px rgba(139, 108, 255, .15), 0 0 30px rgba(139, 108, 255, .9); } }
@media (prefers-reduced-motion: reduce) { .burger { animation: none; } }
/* ---------- skip past the galaxy ---------- */
.skip { position: absolute; z-index: 4; bottom: 5vh; left: 50%; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 13px; color: var(--text); text-decoration: none; background: rgba(8, 14, 36, .6); border: 1px solid rgba(184, 167, 238, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s, border-color .3s; }
.skip.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.skip:hover { border-color: rgba(184, 167, 238, .8); }
.skip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .skip { bottom: calc(5vh + 104px); } }
.svc-all { display: flex; justify-content: center; margin-top: 46px; }
.skip .m { display: none; }
@media (max-width: 900px) {
  .chapter .btns { display: none; }
}
@media (max-width: 620px) { .scrollmark { display: none; } } /* it would sit on top of buttons on a small screen */

/* ---------- phone: the spiral is the whole screen; every world then gets its own ---------- */
.m-worlds { display: none; }
@media (max-width: 900px) {
  .galaxy { height: 100svh; }
  .stage { position: relative; height: 100svh; }
  .chapter::before { content: ""; position: absolute; z-index: -1; inset: -96px calc(var(--gutter) * -1) -70px; background: linear-gradient(transparent, rgba(6, 15, 34, .9) 72px, var(--ink) 96px); pointer-events: none; }
  .nav:not(.solid) { background: linear-gradient(rgba(6, 15, 34, .92), rgba(6, 15, 34, .6) 70%, transparent); }
  .skip, .motto, .meters, .chapter .label, .finale { display: none; }
  .chapter { display: flex; top: auto; bottom: 62px; left: var(--gutter); right: var(--gutter); max-width: none; opacity: 0; animation: hero-in 1s .9s cubic-bezier(.2, .8, .2, 1) forwards; }
  .chapter h1 { font-size: clamp(46px, 15vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; background: linear-gradient(100deg, #fff 35%, var(--lav) 70%, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .chapter h1 .caret { display: none; }
  .chapter p { font-size: clamp(16px, 4.8vw, 20px); font-weight: 500; line-height: 1.3; opacity: 1; transform: none; color: #fff; min-height: 0; }
  .hint { display: flex; bottom: 10px; }
  .hint span { display: none; }
  .hint i { width: 40px; height: 40px; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .m-worlds { display: block; }
  .m-stats { display: flex; justify-content: space-between; padding: 34px var(--gutter) 10px; }
  .m-stats b { display: block; font-size: clamp(40px, 12vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.02em; background: linear-gradient(170deg, #fff 30%, var(--lav) 70%, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(139, 108, 255, .45)); }
  .m-stats span { display: block; margin-top: 8px; font-size: 14px; color: var(--lav); }
  /* a small spiral beside the words: the words lead */
  .m-world { display: grid; grid-template-columns: 1fr 36%; gap: 14px; align-items: center; padding: 16px var(--gutter); }
  .m-world.r { grid-template-columns: 36% 1fr; }
  .m-world canvas { order: 2; width: 100%; aspect-ratio: 1; display: block; pointer-events: none; }
  .m-world.r canvas { order: 0; }
  .m-wt { pointer-events: none; }
  .m-wt .label { color: var(--teal); font-size: 11px; letter-spacing: .2em; }
  .m-wt h2 { margin: 6px 0 6px; font-size: clamp(25px, 7vw, 32px); font-weight: 500; line-height: 1.12; background: linear-gradient(110deg, #fff 30%, var(--lav) 75%, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .m-wt p { margin: 0; font-size: 15.5px; font-weight: 400; line-height: 1.4; color: #e6e9f5; }
  .m-end { padding: 10px var(--gutter) 30px; }
  .m-end .btn { width: 100%; justify-content: center; }
}
/* short phones */
@media (max-width: 900px) and (max-height: 679px) {
  .chapter h1 { font-size: clamp(40px, 13vw, 56px); margin-bottom: 8px; }
  .chapter { bottom: 56px; }
}
/* a phone on its side: text beside the spiral */
@media (max-width: 900px) and (max-height: 520px) {
  .chapter::before { inset: -64px calc(var(--gutter) * -1) -400px -60px; background: linear-gradient(to left, var(--ink) 70%, transparent); }
  .chapter { left: 48%; top: 64px; bottom: auto; }
  .chapter h1 { font-size: 34px; }
  .hint { left: 74%; }
}

/* ---------- phones never scroll sideways: everything stacks ---------- */
@media (max-width: 900px) {
  .quotes { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; padding-inline: var(--gutter); }
  .light .quotes { -webkit-mask: none; mask: none; padding-bottom: 20px; }
  .show .show-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; }
  dialog .m-thumbs { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 620px) {
  /* the home cards stay short here; the full lists live on the services page */
  .chambers { grid-template-columns: 1fr; gap: 12px; }
  .chamber { padding: 18px 18px 16px; }
  .chamber ul { display: none; }
  .chamber .art { max-width: 170px; margin: 2px 0 0; }
  .chamber .price { padding-top: 6px; }
}

/* העקומה של הטיימליין מצוירת ב-overflow:visible ומטפסת כ-82px מעל גבול
   ה-.steps, אז 80px של מרווח הפכו למגע בין הלולאה לקוביות. מעל 1100px
   (היכן שהעקומה בכלל מוצגת) המרווח גדל. */
@media (min-width: 1101px) {
  /* ההתנשאות גדלה עם רוחב המסך, כי ה-svg נמתח (preserveAspectRatio=none),
     לכן המרווח גדל איתו ולא נשאר קבוע. */
  .process .values { margin-bottom: clamp(150px, 11vw, 200px); }
}
@media (max-width: 900px) { .about figure { max-height: 460px; } }
/* the way straight to the work, before anything else */
.hero-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 22px; border-radius: 999px; pointer-events: auto; text-decoration: none; font-size: 16px; font-weight: 500; color: #0b0820; background: var(--grad); box-shadow: 0 10px 30px -10px rgba(139, 108, 255, .85); transition: transform .2s; }
.hero-cta[hidden] { display: none; }
.hero-cta:hover { transform: translateY(-2px); }
.hero-cta i { font-style: normal; transition: transform .25s; }
.hero-cta:hover i { transform: translateX(-4px); }
@media (max-width: 900px) {
  .hero-cta { justify-content: center; margin-top: 16px; padding-block: 15px; font-size: 17px; font-weight: 700; }
}
/* phones: headlines as strong as the opening */
@media (max-width: 900px) {
  section h2 { font-weight: 500; }
  .lead, .value p { font-weight: 400; color: #dfe4f3; }
}
/* clip on both, never hidden: body with hidden becomes its own scroller and every sticky section stops sticking */
html, body { overflow-x: clip; }
/* phones: the page moves up and down only */
@media (max-width: 900px) {
  html { overscroll-behavior-x: none; }
  body { overflow: clip; touch-action: pan-y pinch-zoom; } /* nothing can stretch the page past the footer */
  body > section, body > header, body > main, body > footer, .pane { overflow-x: clip; } /* every block holds its own edges, so no drawing can pull the screen sideways */
  .menu:not(.open) .menu-art { display: none; }
  .contact { padding: 72px var(--gutter) 48px; }
  .site-foot { padding: 16px var(--gutter); gap: 4px 12px; font-size: 13px; }
}
/* the big closing spiral fades out instead of being cut by the section edge */
.contact .big { -webkit-mask-image: var(--mark), radial-gradient(closest-side, #000 62%, transparent); mask-image: var(--mark), radial-gradient(closest-side, #000 62%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 900px) { .contact .big { width: min(90vw, 380px); } }
/* the soft colour glows fade at section edges, so they never end in a line */
.mesh::before { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
@media (max-width: 900px) { #sky { pointer-events: none; } .hero-cta { position: relative; z-index: 5; } }

/* English (left-to-right): mirror the few places that are pinned to a side */
@media (min-width: 901px) {
  [dir="ltr"] .chapter { right: auto; left: var(--gutter); }
  [dir="ltr"] .rail { left: auto; right: 18px; }
}
[dir="ltr"] .motto { text-align: left; }
[dir="ltr"] .o-form { text-align: left; }
[dir="ltr"] .m-prev { right: auto; left: 14px; }
[dir="ltr"] .m-next { left: auto; right: 14px; }
[dir="ltr"] .brail { left: auto; right: 18px; }
[dir="ltr"] .brail a { flex-direction: row-reverse; }
@media (max-width: 900px) { [dir="ltr"] .brail { right: 5px; } }