/* ==========================================================================
   OPIELA STUDIO — style.css
   --------------------------------------------------------------------------
   EDIT: brand colours, fonts and spacing live in :root right below.
   Accent colours were sampled straight from the logo artwork.
   Sections: 1 tokens · 2 base · 3 global UI (grain, cursor, header, menu,
   loader, curtain) · 4 buttons & small parts · 5 home sections · 6 sub-page
   sections · 7 forms & calculator · 8 footer · 9 legal / 404 · 10 motion
   ========================================================================== */

/* 1 ─ TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #050307;
  --bg-1: #08050c;
  --bg-2: #0d0814;
  --bg-3: #150d20;
  --line: rgba(207, 179, 250, 0.1);
  --line-2: rgba(207, 179, 250, 0.2);
  --line-3: rgba(207, 179, 250, 0.34);

  --text: #f6f3fc;
  --text-2: #c4bad6;
  --text-3: #8f84a6;

  /* logo colours */
  --violet: #7c00fb;       /* electric violet - main accent */
  --violet-deep: #5c08fb;  /* blue-violet (top of the "S") */
  --purple: #a600fb;       /* right end of the mark */
  --lilac: #cfb3fa;        /* soft lavender (middle of the gradient) */
  --lilac-2: #b681fb;
  --mist: #f3eefb;         /* white end of the gradient */

  --grad: linear-gradient(100deg, #f8f6fb 0%, #cfb3fa 22%, #a052fa 42%, #7c00fb 62%, #a600fb 100%);
  --grad-v: linear-gradient(115deg, #5c08fb 0%, #7c00fb 45%, #a600fb 100%);
  --grad-soft: linear-gradient(135deg, rgba(124, 0, 251, 0.22), rgba(166, 0, 251, 0.06));
  --glow: 0 0 0 1px rgba(166, 0, 251, 0.25), 0 18px 60px -18px rgba(124, 0, 251, 0.75);

  --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --pad: clamp(20px, 5vw, 72px);
  --max: 1400px;
  --header-h: 84px;
  --r-sm: 12px;
  --r: 22px;
  --r-lg: 34px;
}

/* 2 ─ BASE ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* no CSS smooth scrolling: Lenis does it, and scroll-behavior:smooth breaks ScrollTrigger's measurements */
  scroll-behavior: auto;
  background: var(--bg);
  color-scheme: dark;
}
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--violet); color: #fff; }
[hidden] { display: none !important; }

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

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  transition: top 0.3s var(--ease-out);
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { position: relative; padding-block: clamp(90px, 13vw, 190px); }
.section--tight { padding-block: clamp(70px, 9vw, 130px); }

/* typography */
.h1, .h2, .h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.h2 { font-size: clamp(2rem, 4.3vw, 4.3rem); }
.h3 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; }
.lead { font-size: clamp(1.06rem, 1.35vw, 1.28rem); line-height: 1.6; color: var(--text-2); max-width: 60ch; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.mono { font-family: var(--font-mono); }

.grad-text {
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 7s ease-in-out infinite alternate;
}
.grad-text--v {
  background: linear-gradient(100deg, #cfb3fa, #a052fa 35%, #7c00fb 65%, #c46bff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 6s ease-in-out infinite alternate;
}
@keyframes gradShift { to { background-position: 100% 0; } }
/* background-clip:text only paints inside the span's box, and the tight negative letter-spacing
   lets the last glyph stick out past it (the "." of "niezwykłego." lost its right edge) - widen the
   painted box without moving anything */
.grad-text, .grad-text--v { padding-right: 0.08em; margin-right: -0.08em; }

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-3);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 0.78rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lilac);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(124, 0, 251, 0.18), 0 0 18px var(--violet);
}
.eyebrow--plain::before { display: none; }
.eyebrow-num { color: var(--text-3); }

.sec-head { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 90px); }
.sec-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 960px) {
  .sec-head--split { grid-template-columns: 1.3fr 1fr; gap: 40px 80px; }
  .sec-head--split .eyebrow { grid-column: 1 / -1; }
}
.sec-head--center { text-align: center; justify-items: center; }
.sec-head--center .lead { margin-inline: auto; }

/* split-text helpers (GSAP SplitText adds these) */
/* SplitText wraps each line in a clipping mask - give it room for ę/ą/y/j descenders */
[data-split] [class*="mask"] { padding-bottom: 0.2em; margin-bottom: -0.2em; }
[data-split] { font-kerning: none; }

/* 3 ─ GLOBAL UI ──────────────────────────────────────────────────────────── */

/* ambient light + film grain */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.ambient i {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  will-change: transform;
}
.ambient i:nth-child(1) {
  width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(92, 8, 251, 0.22), transparent 62%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.ambient i:nth-child(2) {
  width: 60vmax; height: 60vmax; right: -25vmax; top: 20vh;
  background: radial-gradient(circle, rgba(166, 0, 251, 0.16), transparent 62%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.ambient i:nth-child(3) {
  width: 50vmax; height: 50vmax; left: 20vw; bottom: -30vmax;
  background: radial-gradient(circle, rgba(207, 179, 250, 0.07), transparent 60%);
  animation: drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-22vw, -12vh) scale(0.9); } }
@keyframes drift3 { to { transform: translate(-14vw, -18vh) scale(1.2); } }

.ambient-tint {
  position: absolute;
  inset: 0;
  background-color: var(--amb, transparent);
  opacity: 0.13;
  mask-image: radial-gradient(ellipse 70% 60% at 75% 40%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 75% 40%, #000, transparent 70%);
  transition: background-color 1.4s ease;
}
.ambient-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(207, 179, 250, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 179, 250, 0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
}

.grain {
  position: fixed;
  inset: -12%;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(8) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-4%, -6%); }
  25% { transform: translate(-8%, 3%); }
  37% { transform: translate(5%, -9%); }
  50% { transform: translate(-3%, 8%); }
  62% { transform: translate(-9%, 2%); }
  75% { transform: translate(6%, 5%); }
  87% { transform: translate(2%, -4%); }
}

/* custom cursor (fine pointers only, enabled by JS) */
.cursor { display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor summary { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.has-cursor input[type="range"], .has-cursor input[type="checkbox"], .has-cursor input[type="radio"] { cursor: none; }
.cursor-dot, .cursor-ring {
  position: fixed;
  left: 0; top: 0;
  z-index: 9600;
  pointer-events: none;
  border-radius: 50%;
}
.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  mix-blend-mode: difference;
  transition: opacity 0.3s, width 0.3s var(--ease-out), height 0.3s var(--ease-out), margin 0.3s var(--ease-out);
}
.cursor-ring {
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(207, 179, 250, 0.5);
  display: grid;
  place-items: center;
  transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), margin 0.45s var(--ease-out),
    background-color 0.35s, border-color 0.35s, opacity 0.3s;
}
.cursor-label {
  font: 600 11px/1.1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
  text-align: center;
  white-space: nowrap;
}
.cursor.is-hover .cursor-ring {
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  background: rgba(124, 0, 251, 0.14);
  border-color: rgba(207, 179, 250, 0.7);
}
.cursor.is-hover .cursor-dot { width: 0; height: 0; margin: 0; }
.cursor.has-label .cursor-ring {
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  background: var(--violet);
  border-color: transparent;
  box-shadow: 0 0 40px rgba(124, 0, 251, 0.6);
}
.cursor.has-label .cursor-label { opacity: 1; transform: none; }
.cursor.has-label .cursor-dot { opacity: 0; }
.cursor.is-down .cursor-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cursor.is-hidden .cursor-dot, .cursor.is-hidden .cursor-ring { opacity: 0; }
/* interactive areas (data-cursor="click"): the circle stays put and a second ring grows out of
   it and fades away, every ~2.4 s. The ripple is a pseudo-element scaled from the ring's centre -
   the ring itself is never scaled (it is positioned with an inline transform). */
.cursor.is-click .cursor-ring {
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  background: rgba(124, 0, 251, 0.12);
  border: 1.5px solid rgba(207, 179, 250, 0.9);
  box-shadow: 0 0 18px rgba(166, 0, 251, 0.4);
}
.cursor.is-click .cursor-ring::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1px solid rgba(207, 179, 250, 0.75);
  pointer-events: none;
  animation: ringRipple 2.4s linear infinite;
}
.cursor.is-click .cursor-dot { opacity: 0; }
.cursor.is-click.is-down .cursor-ring { width: 42px; height: 42px; margin: -21px 0 0 -21px; background: rgba(124, 0, 251, 0.3); }
@keyframes ringRipple {
  0% { transform: scale(1); opacity: 0; }
  18% { transform: scale(1.4); opacity: 0.32; }
  45% { transform: scale(1.85); opacity: 0.16; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.cursor.is-text .cursor-ring { width: 4px; height: 34px; margin: -17px 0 0 -2px; border-radius: 4px; background: var(--lilac); border-color: transparent; }

/* header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 800;
  height: var(--header-h);
  transition: transform 0.6s var(--ease-out), background-color 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 3, 7, 0.68);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  opacity: 0;
  transition: opacity 0.4s;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header.is-hidden { transform: translateY(-105%); }
.menu-open .site-header { transform: none; }
.menu-open .site-header::before { opacity: 0; }

.header-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-right: auto;
  perspective: 600px;
}
.brand-mark {
  width: 64px;
  height: auto;
  transition: transform 0.9s var(--ease-out), filter 0.5s;
  transform-style: preserve-3d;
}
.brand:hover .brand-mark {
  transform: rotateY(360deg);
  filter: drop-shadow(0 0 14px rgba(166, 0, 251, 0.8));
}
.brand-word { width: 118px; height: auto; opacity: 0.95; }
@media (max-width: 420px) { .brand-word { width: 96px; } .brand-mark { width: 54px; } }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: block; }
}
.nav-list { display: flex; gap: 6px; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.3s, background-color 0.3s;
}
.nav-link:hover { color: var(--text); background: rgba(207, 179, 250, 0.06); }
.nav-link[aria-current="page"] { color: var(--text); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple);
}

/* letter roll (JS wraps letters in .roll-char) */
.roll { display: inline-flex; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.roll-char { display: inline-block; position: relative; transition: transform 0.5s var(--ease-out); transition-delay: calc(var(--i) * 18ms); white-space: pre; }
.roll-char::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
a:hover .roll-char, button:hover .roll-char, .is-hovered .roll-char { transform: translateY(-100%); }

.site-header .header-cta { display: none; }
@media (min-width: 720px) { .site-header .header-cta { display: inline-flex; } }

.burger {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: border-color 0.3s, background-color 0.3s;
}
.burger:hover { border-color: var(--lilac); background: rgba(207, 179, 250, 0.06); }
.burger span {
  position: absolute;
  width: 18px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.5s var(--ease-out), width 0.3s;
}
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(2) { transform: translateY(4px); width: 12px; margin-left: 6px; }
.burger:hover span:nth-child(2) { width: 18px; margin-left: 0; }
/* the open state sits on the button itself (.is-open, set by main.js) - a `.menu-open … span` rule on
   <html> made the browser re-check every <span> on the page at the moment of the tap */
.burger.is-open span:nth-child(1) { transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: rotate(-45deg); width: 18px; margin-left: 0; }
@media (min-width: 1000px) { .burger--mobile { display: none; } }

.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: var(--grad-v);
  box-shadow: 0 0 12px rgba(166, 0, 251, 0.8);
}

/* full-screen menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 790;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + 4vh) var(--pad) 32px;
  background:
    radial-gradient(circle at 85% 15%, rgba(124, 0, 251, 0.35), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(166, 0, 251, 0.2), transparent 40%),
    #07040b;
  clip-path: circle(0 at calc(100% - var(--pad) - 24px) calc(var(--header-h) / 2));
  visibility: hidden;
  transition: clip-path 0.9s var(--ease-io), visibility 0s 0.9s;
}
.menu-open .menu-overlay {
  clip-path: circle(150% at calc(100% - var(--pad) - 24px) calc(var(--header-h) / 2));
  visibility: visible;
  transition: clip-path 0.9s var(--ease-io), visibility 0s;
}
.menu-list { display: grid; gap: 0.2em; }
.menu-list a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font: 500 clamp(2.4rem, 9vw, 5.4rem)/1.08 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--text);
  overflow: hidden;
}
.menu-list .menu-text {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out), color 0.3s;
}
.menu-open .menu-list .menu-text { transform: none; transition-delay: calc(0.25s + var(--i) * 0.07s); }
.menu-list a:hover .menu-text { color: var(--lilac); }
.menu-list a[aria-current="page"] .menu-text { color: transparent; -webkit-text-stroke: 1.5px var(--lilac); }
.menu-num {
  font: 500 0.8rem var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.6s;
}
.menu-open .menu-num { opacity: 1; transition-delay: calc(0.4s + var(--i) * 0.07s); }
.menu-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--text-2);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s var(--ease-out);
}
.menu-open .menu-foot { opacity: 1; transform: none; transition-delay: 0.6s; }
.menu-foot a:hover { color: var(--lilac); }
.menu-foot .socials { display: flex; gap: 10px; }
/* once the circle has covered the whole page (.menu-covered, main.js), the endless animations hidden
   under it rest - they repaint every frame - and carry on from the same spot when the menu closes */
.menu-covered .grad-text, .menu-covered .grad-text--v, .menu-covered .ring-border, .menu-covered .a11y-focus,
.menu-covered .marquee-item svg, .menu-covered .ring-text, .menu-covered .shield i, .menu-covered .serp-caret { animation-play-state: paused; }
/* the same for parts of the page that are scrolled out of view (.anim-off, set by main.js): spinning
   icons, gradient shimmer, pulsing rings… cost a little on every frame even off screen */
.anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* page transition curtain */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9800;
  pointer-events: none;
  visibility: hidden;
}
.curtain-panel {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
.curtain-panel--violet { background: var(--grad-v); }
.curtain-panel--dark {
  background: #07040b;
  display: grid;
  place-items: center;
}
.curtain-logo { width: min(180px, 40vw); opacity: 0; transform: scale(0.85); }
/* leaving: panels sweep up to cover */
.is-leaving .curtain { visibility: visible; pointer-events: all; }
.is-leaving .curtain-panel { animation: curtainIn 0.75s var(--ease-io) forwards; }
.is-leaving .curtain-panel--dark { animation-delay: 0.12s; }
.is-leaving .curtain-logo { animation: curtainLogo 0.5s var(--ease-out) 0.45s forwards; }
/* arriving: start covered, sweep away upward */
.nav-in .curtain { visibility: visible; }
.nav-in .curtain-panel { transform: none; animation: curtainOut 0.9s var(--ease-io) 0.15s forwards; }
.nav-in .curtain-panel--violet { animation-delay: 0.27s; }
.nav-in .curtain-logo { opacity: 1; transform: none; animation: curtainLogoOut 0.4s ease 0s forwards; }
@keyframes curtainIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes curtainOut { from { transform: translateY(0); } to { transform: translateY(-100%); visibility: hidden; } }
@keyframes curtainLogo { to { opacity: 1; transform: none; } }
@keyframes curtainLogoOut { to { opacity: 0; transform: translateY(-30px); } }

/* intro loader (home page, first visit of a session) */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: none;
  place-items: center;
  background: #050307;
  overflow: hidden;
}
.show-loader .loader { display: grid; }
.show-loader body { overflow: hidden; }
.loader-inner { display: grid; justify-items: center; gap: 34px; width: min(560px, 80vw); }
.loader-mark { width: 100%; overflow: visible; }
.loader-mark path {
  fill-opacity: 0;
  stroke-width: 2.5;
  stroke-dasharray: var(--len, 4000);
  stroke-dashoffset: var(--len, 4000);
}
.loader-meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 0.75rem var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.loader-count { color: var(--text); font-size: 0.9rem; letter-spacing: 0.05em; min-width: 4ch; text-align: right; }
.loader-bar { width: 100%; height: 1px; background: var(--line); overflow: hidden; }
.loader-bar span { display: block; height: 100%; background: var(--grad-v); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px var(--purple); }
.loader-word { width: min(300px, 55vw); opacity: 0; }

/* back to top */
.to-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 700;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(13, 8, 20, 0.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: transform, opacity;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.5s var(--ease-out), border-color 0.3s;
}
.to-top.is-visible { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; }
.to-top:hover { border-color: var(--lilac); }
.to-top svg.ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; transform: rotate(-90deg); overflow: visible; }  /* max-width:none - the global svg{max-width:100%} squashed it to 52px and pushed it off-centre */
.to-top .ring circle { fill: none; stroke: url(#ttGrad); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 164.93; stroke-dashoffset: calc(164.93 * (1 - var(--p, 0))); }
.to-top .arrow { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; transition: transform 0.4s var(--ease-out); }
.to-top:hover .arrow { transform: translateY(-3px); }

/* toast */
.toasts { position: fixed; left: 50%; bottom: 28px; z-index: 9700; display: grid; gap: 10px; transform: translateX(-50%); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background: rgba(21, 13, 32, 0.92);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(124, 0, 251, 0.6);
  font-size: 0.92rem; font-weight: 600;
  white-space: nowrap;
  animation: toastIn 0.5s var(--ease-back) both;
}
.toast.is-out { animation: toastOut 0.35s ease forwards; }
.toast svg { width: 18px; height: 18px; color: var(--lilac); }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(0.95); } }

/* 4 ─ BUTTONS & SMALL PARTS ──────────────────────────────────────────────── */
.btn {
  --h: 58px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: var(--h);
  padding: 0 10px 0 28px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow 0.4s, border-color 0.3s, background-color 0.3s, color 0.3s;
}
.btn-label { position: relative; z-index: 1; }
.btn-icon {
  position: relative;
  z-index: 1;
  width: calc(var(--h) - 16px);
  height: calc(var(--h) - 16px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), background-color 0.3s;
}
.btn-icon svg { width: 16px; height: 16px; transition: transform 0.5s var(--ease-out); }
.btn-icon svg + svg { position: absolute; transform: translate(-150%, 150%); }
.btn:hover .btn-icon svg:first-child { transform: translate(150%, -150%); }
.btn:hover .btn-icon svg + svg { transform: none; }
.btn--plain { padding: 0 28px; }

.btn-primary {
  color: #fff;
  background: var(--grad-v);
  box-shadow: 0 0 0 1px rgba(207, 179, 250, 0.18) inset, 0 14px 40px -14px rgba(124, 0, 251, 0.9);
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, #a600fb, #7c00fb 50%, #cfb3fa);
  opacity: 0;
  transition: opacity 0.5s;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.9s var(--ease-out);
}
.btn-primary:hover::before { opacity: 0.55; }
.btn-primary:hover::after { left: 130%; }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(207, 179, 250, 0.3) inset, 0 18px 60px -12px rgba(166, 0, 251, 1); }
.btn-primary .btn-icon { background: rgba(255, 255, 255, 0.16); }

.btn-ghost {
  color: var(--text);
  border: 1px solid var(--line-2);
  background: rgba(207, 179, 250, 0.02);
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(166, 0, 251, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.btn-ghost:hover { border-color: var(--line-3); }
.btn-ghost:hover::before { opacity: 1; }
.btn-ghost .btn-icon { background: rgba(207, 179, 250, 0.08); }

.btn-sm { --h: 46px; font-size: 0.9rem; padding: 0 8px 0 20px; gap: 10px; }
.btn-sm.btn--plain { padding: 0 20px; }

.btn-white { background: #fff; color: #0b0612; }
.btn-white .btn-icon { background: var(--violet); color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  color: var(--text);
  padding-block: 6px;
  background: linear-gradient(var(--lilac), var(--lilac)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease-out), color 0.3s;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.link-arrow:hover { background-size: 100% 1px; color: var(--lilac); }
.link-arrow:hover svg { transform: translateX(4px); }

.tag, .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(207, 179, 250, 0.04);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

.pulse-dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4ade80;
  flex: none;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 1.8s var(--ease-out) infinite;
}
.pulse-dot--violet { background: var(--purple); }
@keyframes ping { to { transform: scale(3.2); opacity: 0; } }

.icon { width: 22px; height: 22px; flex: none; }

/* glass card + spotlight border */
.card {
  position: relative;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(207, 179, 250, 0.045), rgba(207, 179, 250, 0.012));
  border: 1px solid var(--line);
  isolation: isolate;
}
[data-spot]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(124, 0, 251, 0.16), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s;
}
[data-spot]::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(300px circle at var(--mx, -999px) var(--my, -999px), rgba(207, 179, 250, 0.85), rgba(166, 0, 251, 0.45) 30%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.spot-on [data-spot]::before, .spot-on [data-spot]::after,
[data-spot]:hover::before, [data-spot]:hover::after { opacity: 1; }

[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.12), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s;
}
[data-tilt]:hover .tilt-glare { opacity: 1; }

/* browser + phone mockups */
.browser {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0f0a16;
  border: 1px solid rgba(207, 179, 250, 0.16);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 30px 80px -50px var(--accent, var(--violet));
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: linear-gradient(#1a1324, #140e1c);
  border-bottom: 1px solid rgba(207, 179, 250, 0.08);
}
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a2f48; }
.browser-bar i:nth-child(1) { background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; }
.browser-bar i:nth-child(3) { background: #28c840; }
.browser-url {
  flex: 1;
  max-width: 340px;
  margin: 0 auto;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 500 11px var(--font-mono);
  color: var(--text-3);
  overflow: hidden;
  white-space: nowrap;
}
.browser-url svg { width: 10px; height: 10px; }
.browser-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--case-bg, #111); }
.browser-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s ease, transform 2.4s var(--ease-out);
}
.browser-screen img.is-active { opacity: 1; transform: none; }
.browser-screen img:first-child { opacity: 1; }
.js .browser-screen img:first-child:not(.is-active) { opacity: 0; }
.shot-dots { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: flex; gap: 6px; transform: translateX(-50%); }
.shot-dots button { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.4); transition: width 0.4s var(--ease-out), background-color 0.3s; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.shot-dots button.is-active { width: 22px; background: #fff; }

.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 16% / 7.4%;
  background: linear-gradient(145deg, #2a2236, #0d0913 60%);
  box-shadow: 0 0 0 1px rgba(207, 179, 250, 0.2), 0 40px 80px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.phone::before {
  content: "";
  position: absolute;
  top: 3.3%; left: 50%;
  z-index: 2;
  width: 27%; height: 3.1%;
  margin-left: -14%;
  border-radius: 999px;
  background: #050307;
}
.phone::after { content: ""; position: absolute; right: -2px; top: 23%; width: 3px; height: 10%; border-radius: 0 3px 3px 0; background: linear-gradient(#3a3048, #1d1626); }
.phone-screen { position: absolute; inset: 1.9% 4.2%; border-radius: 12.5% / 5.9%; overflow: hidden; background: var(--case-bg, #111); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* marquee */
.marquee {
  position: relative;
  padding-block: clamp(28px, 4vw, 48px);
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(90deg, rgba(124, 0, 251, 0.06), transparent 30%, transparent 70%, rgba(166, 0, 251, 0.06));
}
.marquee-row { display: flex; width: max-content; will-change: transform; }
.marquee-row + .marquee-row { margin-top: 14px; }
.marquee-track { display: flex; align-items: center; flex: none; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
  padding-right: clamp(22px, 3vw, 44px);
  font: 500 clamp(2rem, 5.4vw, 5rem)/1.1 var(--font-display);
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.marquee-item svg { width: clamp(22px, 2.6vw, 38px); height: auto; color: var(--purple); filter: drop-shadow(0 0 12px rgba(166, 0, 251, 0.8)); animation: spin 8s linear infinite; }
.marquee-row--outline .marquee-item { color: transparent; -webkit-text-stroke: 1.2px rgba(207, 179, 250, 0.38); }
.marquee-row--outline .marquee-item svg { color: var(--lilac); }
.marquee--small .marquee-item { font-size: clamp(1.1rem, 2vw, 1.6rem); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.marquee--small .marquee-item svg { width: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.marquee-static .marquee-row { flex-wrap: wrap; width: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 5 ─ HOME ───────────────────────────────────────────────────────────────── */

/* hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 30px) 0 28px;
  overflow: hidden;
  isolation: isolate;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero, .page-hero, .err { touch-action: pan-y; }
.hero-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.hero-canvas.is-ready canvas { opacity: 1; }
.hero-fallback {
  position: absolute;
  right: 5%;
  top: 46%;
  /* (shown only without live 3D) sized to the free space beside the headline, like the 3D logo */
  width: min(36vw, 560px);
  transform: translateY(-50%);
  filter: drop-shadow(0 0 70px rgba(124, 0, 251, 0.55));
  animation: floaty 7s ease-in-out infinite;
  transition: opacity 0.8s;
}
.hero-canvas.is-ready .hero-fallback { opacity: 0; }
@keyframes floaty { 50% { transform: translateY(-53%) rotate(-2deg); } }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(5, 3, 7, 0.85), transparent 70%),
    linear-gradient(to top, var(--bg) 0%, transparent 22%);
}
.hero-content { position: relative; display: grid; gap: clamp(22px, 2.6vw, 34px); }
.hero-title {
  font: 500 clamp(2.75rem, 6.5vw, 7.6rem)/0.96 var(--font-display);
  letter-spacing: -0.045em;
  max-width: 11.5ch;
  text-wrap: balance;
}
.hero-title .line { display: block; overflow: clip; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero-title .line:last-child { padding-bottom: 0.5em; margin-bottom: -0.24em; }
.hero-title .line > span { display: inline-block; }
.hero-title .word-live { position: relative; display: inline-block; }
.hero-title .word-live svg {
  position: absolute;
  left: -2%; bottom: -0.43em;
  width: 104%; height: 0.24em;
  overflow: visible;
}
.hero-title .word-live svg path { fill: none; stroke: url(#liveGrad); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; }
.hero-row {
  display: grid;
  gap: 28px;
  align-items: end;
}
@media (min-width: 900px) {
  .hero-row { grid-template-columns: minmax(0, 520px) auto; justify-content: space-between; }
}
.hero-sub { font-size: clamp(1.04rem, 1.3vw, 1.2rem); color: var(--text-2); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-chips { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.chip-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(13, 8, 20, 0.55);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 500 0.78rem var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-2);
  white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
.chip-float::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 10px var(--purple); }
/* --lx/--lr/--lt/--lb = the 3D logo's box, set by three-scenes.js */
.chip-float:nth-child(1) { left: calc(var(--lx, 58vw) - 10px); top: calc(var(--lt, 22vh) - 58px); }
.chip-float:nth-child(2) { left: calc(var(--lr, 96vw) - 140px); top: calc(var(--lt, 22vh) - 44px); }
.chip-float:nth-child(3) { left: calc(var(--lr, 96vw) - 70px); top: calc(var(--lb, 55vh) + 10px); }
.chip-float:nth-child(4) { left: calc(var(--lx, 58vw) + 30px); top: calc(var(--lb, 55vh) + 22px); }
@media (max-width: 899px) { .hero-chips { display: none; } }

.hero-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 30px;
  margin-top: clamp(34px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font: 500 0.78rem var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero-bottom > * { display: inline-flex; align-items: center; gap: 12px; }
.availability { color: var(--text-2); }
.scroll-cue { gap: 14px; }
.scroll-cue .mouse {
  width: 22px; height: 34px;
  border: 1.5px solid var(--line-3);
  border-radius: 12px;
  position: relative;
}
.scroll-cue .mouse::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--lilac);
  animation: wheel 1.8s var(--ease-out) infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 899px) {
  .hero { justify-content: flex-end; }
  .hero-fallback { left: 50%; right: auto; top: 27%; width: 78vw; transform: translate(-50%, -50%); animation: none; }
  .hero::after { background: linear-gradient(to top, var(--bg) 8%, rgba(5, 3, 7, 0.7) 45%, transparent 70%); }
  .hero-content { padding-top: 38vh; }
}

/* manifesto */
.manifesto-text {
  font: 400 clamp(1.7rem, 3.9vw, 3.6rem)/1.22 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: pretty;
  max-width: 22ch;
}
.manifesto-text em { font-style: normal; color: #d4bcff; text-shadow: 0 0 34px rgba(166, 0, 251, 0.55); }
.manifesto-sign {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(36px, 4vw, 60px);
  color: var(--text-3);
  font: 500 0.82rem var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.manifesto-sign img { width: 60px; }
.manifesto-grid { display: grid; gap: 50px; }
@media (min-width: 1000px) {
  .manifesto-grid { grid-template-columns: 220px 1fr; gap: 60px; }
  .manifesto-grid .eyebrow { margin-top: 1.2em; }
}

/* services */
.services-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 340px;
  padding: clamp(26px, 2.6vw, 38px);
  overflow: hidden;
}
.service-card .service-top { display: flex; justify-content: space-between; align-items: flex-start; }
.service-num { font: 500 0.8rem var(--font-mono); color: var(--text-3); letter-spacing: 0.1em; }
.service-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--grad-soft);
  border: 1px solid var(--line-2);
  color: var(--lilac);
  transform: translateZ(40px);
  transition: transform 0.6s var(--ease-out), box-shadow 0.4s;
}
.service-icon svg { width: 30px; height: 30px; }
.service-card:hover .service-icon { box-shadow: 0 0 30px -4px rgba(166, 0, 251, 0.8); transform: translateZ(40px) rotate(-8deg) scale(1.06); }
.service-card h3 { margin-top: auto; transform: translateZ(26px); }
.service-card p { color: var(--text-2); font-size: 0.98rem; transform: translateZ(16px); }
.service-card--cta {
  justify-content: center;
  align-items: flex-start;
  background: radial-gradient(circle at 80% 0%, rgba(166, 0, 251, 0.35), transparent 60%), linear-gradient(160deg, rgba(124, 0, 251, 0.2), rgba(13, 8, 20, 0.4));
  border-color: var(--line-2);
}
.service-card--cta h3 { margin-top: 0; }

/* stacked work cards */
.stack { display: grid; gap: 4vh; }
.stack-card {
  --accent: var(--violet);
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(160deg, #110b19, #08050c 70%);
  transform-origin: 50% 0;
  will-change: transform;
}
.stack-inner {
  display: grid;
  gap: 34px;
  padding: clamp(24px, 3.4vw, 54px);
  align-items: center;
}
@media (min-width: 1000px) { .stack-inner { grid-template-columns: 0.85fr 1.15fr; gap: 56px; min-height: min(76vh, 760px); } }
/* sticky stacking only where a whole card fits on screen */
@media (min-width: 1000px) and (min-height: 700px) {
  .stack-card { position: sticky; top: calc(var(--header-h) + 16px + var(--i, 0) * 16px); }
}
.stack-info { display: grid; gap: 22px; align-content: center; }
.stack-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font: 500 0.78rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.stack-meta b { color: var(--accent-text, var(--lilac)); font-weight: 500; }
.stack-title { font: 500 clamp(2.4rem, 5vw, 4.8rem)/1 var(--font-display); letter-spacing: -0.045em; }
.stack-desc { color: var(--text-2); max-width: 46ch; }
.stack-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 6px; }
.stack-visual { position: relative; display: block; padding: 0 9% 7% 0; }
.stack-visual .phone {
  position: absolute;
  right: 0; bottom: 0;
  width: 24%;
  transform: rotate(4deg);
  transition: transform 0.8s var(--ease-out);
}
.stack-visual:hover .phone { transform: rotate(0deg) translateY(-12px); }
.stack-visual .browser { transition: transform 0.8s var(--ease-out); }
.stack-visual:hover .browser { transform: translateY(-6px); }
.stack-shade { position: absolute; inset: 0; z-index: 5; background: #050307; opacity: 0; pointer-events: none; border-radius: inherit; }
.stack-swatches { display: flex; gap: 8px; }
.stack-swatches i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }

/* process (horizontal pin on desktop) */
.process { position: relative; overflow: hidden; }
.process-wrap { position: relative; }
.process-track { display: grid; gap: 16px; }
.process-step {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(26px, 3vw, 44px);
  min-height: 380px;
}
.step-num {
  font: 600 clamp(4rem, 8vw, 7.5rem)/0.9 var(--font-display);
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(207, 179, 250, 0.35);
  transition: color 0.6s, -webkit-text-stroke-color 0.6s;
}
.process-step.is-active .step-num, .process-step:hover .step-num { color: rgba(166, 0, 251, 0.18); -webkit-text-stroke-color: var(--lilac); }
.step-time { display: inline-flex; align-self: end; margin-top: auto; }
.process-step p { color: var(--text-2); }
.process-progress { display: none; }
@media (min-width: 1000px) {
  .process.is-pinned { min-height: 100vh; padding-block: calc(var(--header-h) + 3vh) 5vh; display: flex; align-items: center; }
  .process.is-pinned .sec-head { margin-bottom: 5vh; }
  .process.is-pinned .process-track { display: flex; gap: 22px; width: max-content; padding-right: var(--pad); }
  .process.is-pinned .process-step { width: min(30vw, 440px); min-height: clamp(300px, 44vh, 460px); }
  .process.is-pinned .process-progress {
    display: block;
    height: 2px;
    margin-top: 44px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
  }
  .process-progress span { display: block; height: 100%; background: var(--grad-v); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 14px var(--purple); }
}
@media (min-width: 700px) and (max-width: 999px) { .process-track { grid-template-columns: repeat(2, 1fr); } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: clamp(28px, 3.4vw, 48px) clamp(10px, 2vw, 30px) 10px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .stat { border-bottom: 0; } .stat + .stat { padding-left: clamp(20px, 2vw, 34px); border-left: 1px solid var(--line); } }
.stat-num {
  display: block;
  font: 500 clamp(2.6rem, 5.4vw, 5.2rem)/1 var(--font-display);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.stat-label { display: block; margin-top: 14px; color: var(--text-2); font-size: 0.95rem; max-width: 22ch; }

/* bento */
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(250px, auto); }
  .b-mobile { grid-column: span 4; grid-row: span 2; }
  .b-speed { grid-column: span 4; }
  .b-seo { grid-column: span 4; }
  .b-motion { grid-column: span 5; }
  .b-forms { grid-column: span 3; }
  .b-secure { grid-column: span 4; }
  .b-own { grid-column: span 4; }
  .b-a11y { grid-column: span 4; }
}
.bento-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; overflow: hidden; min-height: 250px; }
.bento-card h3 { font: 500 1.2rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.bento-card p { color: var(--text-2); font-size: 0.95rem; }
.bento-visual { position: relative; flex: 1; display: grid; place-items: center; min-height: 120px; margin-bottom: 8px; }

.b-mobile .bento-visual { min-height: 360px; perspective: 900px; }
.b-mobile .phone { width: min(210px, 60%); transform: rotateY(-18deg) rotateX(8deg); transition: transform 1s var(--ease-out); }
.b-mobile:hover .phone { transform: rotateY(0deg) rotateX(0deg); }
.b-mobile .phone-screen img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s; }
.b-mobile .phone-screen img.is-active { opacity: 1; }

.gauge { position: relative; width: 150px; height: 150px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; }
.gauge .g-bg { stroke: rgba(207, 179, 250, 0.1); }
.gauge .g-fg { stroke: url(#gaugeGrad); stroke-linecap: round; stroke-dasharray: 376.99; stroke-dashoffset: 376.99; filter: drop-shadow(0 0 8px rgba(166, 0, 251, 0.6)); }
.gauge-val { position: absolute; inset: 0; display: grid; place-items: center; font: 600 2.3rem var(--font-display); letter-spacing: -0.04em; }
.gauge-val small { display: block; font: 500 0.62rem var(--font-mono); letter-spacing: 0.14em; color: var(--text-3); text-align: center; margin-top: -4px; }

.serp { width: 100%; display: grid; gap: 12px; }
.serp-search {
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
  font-size: 0.88rem;
  color: var(--text);
}
.serp-search svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.serp-caret { width: 1.5px; height: 1.1em; background: var(--lilac); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.serp-result { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s var(--ease-out); }
.serp-result.is-in { opacity: 1; transform: none; }
.serp-url { font-size: 0.74rem; color: var(--text-3); }
.serp-title { color: #b9a4ff; font-weight: 600; font-size: 1rem; }
.serp-desc { font-size: 0.8rem; color: var(--text-2); line-height: 1.5; }
.serp-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font-size: 0.66rem; font-weight: 700; background: rgba(74, 222, 128, 0.15); color: #86efac; vertical-align: 2px; }

.dots-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.booking { width: 100%; max-width: 250px; display: grid; gap: 10px; }
.booking-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.booking-days span, .booking-hours span {
  display: grid; place-items: center;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-2);
  transition: background-color 0.35s, border-color 0.35s, color 0.35s, transform 0.35s var(--ease-back);
}
.booking-days span small { display: block; font-size: 0.6rem; font-weight: 500; color: var(--text-3); line-height: 1; }
.booking-hours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.booking-hours span { height: 32px; }
.booking .is-on { background: var(--violet); border-color: var(--violet); color: #fff; transform: scale(1.05); }
.booking .is-on small { color: rgba(255, 255, 255, 0.7); }
.booking-ok {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; border-radius: 10px;
  background: rgba(74, 222, 128, 0.12);
  color: #86efac; font-size: 0.82rem; font-weight: 700;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.booking-ok.is-in { opacity: 1; transform: none; }
.booking-ok svg { width: 16px; height: 16px; }

.shield { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.shield svg { width: 56px; height: 56px; color: var(--lilac); position: relative; z-index: 1; filter: drop-shadow(0 0 16px rgba(166, 0, 251, 0.7)); }
.shield i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(207, 179, 250, 0.35); animation: shieldRing 3s var(--ease-out) infinite; }
.shield i:nth-child(2) { animation-delay: 1s; }
.shield i:nth-child(3) { animation-delay: 2s; }
@keyframes shieldRing { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

.a11y-demo { position: relative; display: grid; place-items: center; width: 150px; height: 110px; }
.a11y-aa { font: 600 3.4rem/1 var(--font-display); letter-spacing: -0.04em; color: #fff; }
.a11y-badge { position: absolute; right: -14px; top: 0; padding: 4px 9px; border-radius: 8px; background: rgba(74, 222, 128, 0.14); color: #86efac; font: 700 0.68rem var(--font-mono); }
.a11y-focus { position: absolute; inset: 14px 10px; border-radius: 14px; outline: 2px solid var(--lilac); outline-offset: 4px; animation: focusPulse 2.4s var(--ease-out) infinite; }
@keyframes focusPulse { 0%, 100% { outline-offset: 4px; opacity: 1; } 50% { outline-offset: 10px; opacity: 0.4; } }
.code-own { width: 100%; font: 500 0.78rem/1.7 var(--font-mono); color: var(--text-3); padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); overflow: hidden; }
.code-own .k { color: #c792ea; }
.code-own .s { color: #c3e88d; }
.code-own .f { color: #82aaff; }

/* pricing */
.pricing-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { position: relative; width: 56px; height: 30px; border-radius: 99px; background: rgba(207, 179, 250, 0.12); border: 1px solid var(--line-2); transition: background-color 0.4s; }
.switch-ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.5s var(--ease-back); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.switch input:checked + .switch-ui { background: var(--violet); border-color: var(--violet); }
.switch input:checked + .switch-ui::after { transform: translateX(26px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--lilac); outline-offset: 3px; }

.pricing { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 980px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.price-card { display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 2.8vw, 40px); }
.price-card.is-featured {
  background:
    radial-gradient(circle at 50% -10%, rgba(166, 0, 251, 0.45), transparent 60%),
    linear-gradient(180deg, rgba(124, 0, 251, 0.18), rgba(13, 8, 20, 0.6));
  border-color: transparent;
}
.price-card.is-featured .ring-border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ang, 0deg), #5c08fb, #cfb3fa, #a600fb, #7c00fb, #5c08fb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: angle 5s linear infinite;
  pointer-events: none;
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes angle { to { --ang: 360deg; } }
.price-badge {
  position: absolute;
  top: 22px; right: 22px;
  padding: 6px 12px;
  border-radius: 99px;
  background: #fff;
  color: #1a0638;
  font: 700 0.72rem var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.price-name { font: 500 1.5rem var(--font-display); letter-spacing: -0.03em; }
.price-for { color: var(--text-2); font-size: 0.95rem; margin-top: -12px; }
.price-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-from { font: 500 0.8rem var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.price-value { font: 500 clamp(2.6rem, 4vw, 3.6rem)/1 var(--font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.price-cur { font-weight: 700; color: var(--text-2); }
.price-care { font-size: 0.85rem; color: var(--lilac); min-height: 1.3em; transition: opacity 0.3s; }
.price-list { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); margin-bottom: auto; }
.price-list li { display: flex; gap: 12px; font-size: 0.95rem; color: var(--text-2); }
.price-list li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--purple); }
.price-card .btn { width: 100%; justify-content: space-between; }
.price-note { margin-top: 28px; color: var(--text-3); font-size: 0.88rem; text-align: center; }

/* big CTA */
.cta-big { position: relative; text-align: center; overflow: hidden; }
.cta-big .eyebrow { justify-content: center; }
.cta-title {
  margin: 30px auto 0;
  font: 500 clamp(3rem, 10.5vw, 11rem)/0.92 var(--font-display);
  letter-spacing: -0.055em;
}
.cta-title .line { display: block; }
.cta-circle-wrap { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 70px); }
.cta-circle {
  position: relative;
  width: clamp(150px, 15vw, 196px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-v);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(207, 179, 250, 0.25) inset, 0 0 80px -10px rgba(124, 0, 251, 0.9);
  transition: box-shadow 0.4s;
}
.cta-circle:hover { box-shadow: 0 0 0 1px rgba(207, 179, 250, 0.4) inset, 0 0 120px 0 rgba(166, 0, 251, 0.9); }
.cta-circle .ring-text { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); animation: spin 16s linear infinite; }
.cta-circle .ring-text text { font: 600 9.6px var(--font-mono); letter-spacing: 3.3px; fill: rgba(255, 255, 255, 0.85); text-transform: uppercase; }
.cta-circle .cta-arrow { width: 38%; height: 38%; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--violet); transition: transform 0.6s var(--ease-out); }
.cta-circle .cta-arrow svg { width: 40%; height: 40%; }
.cta-circle:hover .cta-arrow { transform: rotate(-45deg) scale(1.08); }
.cta-sub { margin: 26px auto 0; color: var(--text-2); max-width: 48ch; }

/* 6 ─ SUB-PAGES ──────────────────────────────────────────────────────────── */
.page-hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 60px) 0 clamp(50px, 6vw, 90px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero--short { min-height: 0; padding-top: calc(var(--header-h) + 80px); }
.page-hero-canvas { position: absolute; inset: 0; z-index: -1; }
.page-hero-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s; }
.page-hero-canvas.is-ready canvas { opacity: 1; }
.page-hero-canvas .orb-fallback {
  position: absolute;
  right: 8%; top: 50%;
  width: min(40vw, 520px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfb3fa 0%, #a052fa 18%, #7c00fb 42%, #1c0640 72%, transparent 73%);
  filter: blur(2px) drop-shadow(0 0 80px rgba(124, 0, 251, 0.6));
  animation: floaty 8s ease-in-out infinite;
  transition: opacity 0.8s;
}
.page-hero-canvas.is-ready .orb-fallback { opacity: 0; }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 75% at 10% 90%, rgba(5, 3, 7, 0.88), transparent 70%), linear-gradient(to top, var(--bg), transparent 30%);
}
.page-hero-content { display: grid; gap: 26px; }
.page-title {
  font: 500 clamp(2.9rem, 8.6vw, 9rem)/0.94 var(--font-display);
  letter-spacing: -0.05em;
  max-width: 12ch;
}
.page-title .line { display: block; overflow: clip; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.page-title .line > span { display: inline-block; }
.hero-title .line > span, .page-title .line > span { padding-bottom: 0.24em; margin-bottom: -0.24em; }
.page-lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--text-2); max-width: 54ch; }
.breadcrumbs { display: flex; gap: 10px; font: 500 0.78rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.breadcrumbs a:hover { color: var(--lilac); }
.breadcrumbs li + li::before { content: "/"; margin-right: 10px; opacity: 0.5; }
.page-hero-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 899px) {
  .page-hero { min-height: 88svh; }
  .page-hero-canvas .orb-fallback { left: 50%; right: auto; top: 30%; width: 70vw; transform: translate(-50%, -50%); animation: none; }
  .page-hero::after { background: linear-gradient(to top, var(--bg) 10%, rgba(5, 3, 7, 0.75) 50%, transparent 78%); }
}

/* hover-reveal service list (oferta) */
.sl { border-top: 1px solid var(--line); }
.sl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: clamp(28px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.6s var(--ease-out);
}
@media (min-width: 900px) {
  .sl-item { grid-template-columns: 90px 1.1fr 1fr 60px; align-items: center; gap: 30px; }
}
.sl-item::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--pad) * -1);
  z-index: -1;
  background: linear-gradient(90deg, rgba(124, 0, 251, 0.16), rgba(166, 0, 251, 0.03) 60%, transparent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease-out);
}
.sl-item:hover::before { transform: scaleY(1); transform-origin: 50% 0; }
.sl-num { font: 500 0.82rem var(--font-mono); color: var(--text-3); letter-spacing: 0.1em; }
.sl-title { font: 500 clamp(1.7rem, 3.4vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.04em; transition: transform 0.6s var(--ease-out), color 0.4s; }
.sl-item:hover .sl-title { transform: translateX(14px); color: var(--lilac); }
.sl-body { display: grid; gap: 14px; color: var(--text-2); }
.sl-arrow { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); display: none; place-items: center; transition: background-color 0.4s, transform 0.6s var(--ease-out), border-color 0.4s; }
@media (min-width: 900px) { .sl-arrow { display: grid; } }
.sl-arrow svg { width: 18px; height: 18px; }
.sl-item:hover .sl-arrow { background: var(--violet); border-color: var(--violet); transform: rotate(-45deg); }
.sl-preview {
  position: fixed;
  left: 0; top: 0;
  z-index: 50;
  width: 300px;
  height: 210px;
  margin: -105px 0 0 -150px;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6) rotate(-6deg);
  transition: opacity 0.4s, transform 0.6s var(--ease-out);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 60px -10px rgba(124, 0, 251, 0.6);
  border: 1px solid var(--line-2);
}
.sl-preview.is-on { opacity: 1; transform: none; }
.sl-preview-inner { position: absolute; inset: 0; transition: transform 0.6s var(--ease-out); }
.sl-preview-inner > div { height: 100%; display: grid; place-items: center; }
.sl-preview svg { width: 70%; height: 70%; }

/* add-ons */
.addons { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .addons { grid-template-columns: 1fr 1fr; column-gap: 60px; } }
.addon { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.addon-name { font-weight: 600; }
.addon-name small { display: block; color: var(--text-3); font-weight: 400; font-size: 0.88rem; margin-top: 2px; }
.addon-price { font: 500 0.95rem var(--font-mono); color: var(--lilac); white-space: nowrap; }

/* included checklist */
.included { display: grid; gap: 14px; }
@media (min-width: 700px) { .included { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .included { grid-template-columns: repeat(4, 1fr); } }
.included li { display: flex; gap: 14px; align-items: flex-start; padding: 22px; }
.included li svg { width: 26px; height: 26px; flex: none; color: var(--lilac); }
.included b { display: block; font-weight: 700; margin-bottom: 4px; }
.included span { color: var(--text-2); font-size: 0.92rem; }

/* FAQ */
.faq-layout { display: grid; gap: 40px; }
@media (min-width: 1000px) { .faq-layout { grid-template-columns: 0.8fr 1.2fr; gap: 80px; } .faq-layout .sec-head { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; } }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  font: 500 clamp(1.05rem, 1.5vw, 1.3rem)/1.35 var(--font-display);
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
  transition: color 0.3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--lilac); }
.faq-icon { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color 0.4s, border-color 0.4s, transform 0.5s var(--ease-out); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background: currentColor; transition: transform 0.5s var(--ease-out); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open]:not(.is-closing) .faq-icon { background: var(--violet); border-color: var(--violet); transform: rotate(180deg); }
.faq-item[open]:not(.is-closing) .faq-icon::after { transform: rotate(0deg); }
.faq-body { overflow: hidden; }
.faq-body > div { padding: 0 60px 28px 0; color: var(--text-2); }
.faq-body p + p { margin-top: 12px; }

/* about: story, values, principles, team */
.story { display: grid; gap: 50px; }
@media (min-width: 1000px) { .story { grid-template-columns: 1.4fr 1fr; gap: 90px; align-items: start; } }
.story-text p { font: 400 clamp(1.3rem, 2.2vw, 2rem)/1.42 var(--font-display); letter-spacing: -0.025em; }
.story-text p + p { margin-top: 1em; }
.story-aside { display: grid; gap: 16px; }
@media (min-width: 1000px) { .story-aside { position: sticky; top: calc(var(--header-h) + 40px); } }
.quote-card { padding: 34px; }
.quote-card blockquote { font: 500 1.25rem/1.45 var(--font-display); letter-spacing: -0.02em; }
.quote-card figcaption { margin-top: 18px; color: var(--text-3); font: 500 0.78rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mini-stats .card { padding: 24px; }
.mini-stats b { display: block; font: 500 2.2rem/1 var(--font-display); letter-spacing: -0.04em; }
.mini-stats span { color: var(--text-2); font-size: 0.88rem; }

.values { display: grid; gap: 16px; }
@media (min-width: 760px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value-card { padding: 32px 28px; display: grid; gap: 16px; align-content: start; min-height: 300px; overflow: hidden; }
.value-card .value-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--lilac); }
.value-card .value-ico svg { width: 26px; height: 26px; }
.value-card h3 { font: 500 1.35rem var(--font-display); letter-spacing: -0.03em; margin-top: 30px; }
.value-card p { color: var(--text-2); font-size: 0.96rem; }
.value-card .value-bg-num { position: absolute; right: -10px; bottom: -36px; font: 700 9rem/1 var(--font-display); color: rgba(207, 179, 250, 0.04); letter-spacing: -0.06em; pointer-events: none; z-index: -1; }

.principles { display: grid; }
.principle {
  display: grid;
  gap: 16px;
  padding: clamp(30px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .principle { grid-template-columns: 140px 1fr 1fr; gap: 40px; align-items: start; } }
.principle-num { font: 500 0.82rem var(--font-mono); letter-spacing: 0.12em; color: var(--lilac); }
.principle h3 { font: 500 clamp(1.6rem, 3vw, 2.6rem)/1.08 var(--font-display); letter-spacing: -0.04em; }
.principle p { color: var(--text-2); }

.tools-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tool {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(207, 179, 250, 0.03);
  font-weight: 650;
  transition: transform 0.5s var(--ease-back), border-color 0.3s, background-color 0.3s, box-shadow 0.4s;
}
.tool:hover { transform: translateY(-5px) rotate(-2deg); border-color: var(--lilac); background: rgba(124, 0, 251, 0.14); box-shadow: 0 14px 30px -14px rgba(124, 0, 251, 0.9); }
.tool i { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--violet)); box-shadow: 0 0 10px var(--c, var(--violet)); }

/* realizacje: 3D carousel */
.c3d {
  position: relative;
  height: clamp(300px, 42vw, 560px);
  perspective: 1600px;
  margin-top: clamp(30px, 5vw, 70px);
  touch-action: pan-y;
  user-select: none;
  overflow-x: clip; /* side cards must not widen the page on phones */
}
.c3d-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--cw, 460px);
  height: calc(var(--cw, 460px) * 0.625);
  margin: calc(var(--cw, 460px) * -0.3125) 0 0 calc(var(--cw, 460px) * -0.5);
  transform-style: preserve-3d;
}
.c3d-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(207, 179, 250, 0.2);
  background: #111;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  backface-visibility: hidden;
  transition: filter 0.4s, box-shadow 0.4s;
}
.c3d-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.c3d-card figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(5, 3, 7, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 600 0.8rem var(--font-body);
  border: 1px solid var(--line-2);
}
.c3d-card:hover { box-shadow: 0 30px 80px -20px rgba(124, 0, 251, 0.8); }
.c3d-hint { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: inline-flex; gap: 10px; align-items: center; font: 500 0.75rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.c3d-hint svg { width: 34px; height: 14px; color: var(--lilac); animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.c3d-floor { position: absolute; left: 10%; right: 10%; bottom: 4%; height: 60px; background: radial-gradient(ellipse at center, rgba(124, 0, 251, 0.45), transparent 70%); filter: blur(20px); pointer-events: none; }

/* realizacje: case studies */
.note-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px 28px; max-width: 900px; }
.note-card svg { width: 26px; height: 26px; flex: none; color: var(--lilac); margin-top: 2px; }
.note-card p { color: var(--text-2); }

.case {
  --accent: var(--violet);
  --accent-2: var(--purple);
  position: relative;
  padding-block: clamp(80px, 10vw, 150px);
  border-top: 1px solid var(--line);
}
.case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at var(--gx, 80%) 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s;
}
.case.is-current::before { opacity: 1; }
.case-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 70px); }
@media (min-width: 1000px) { .case-head { grid-template-columns: auto 1fr auto; align-items: end; gap: 50px; } }
.case-num { font: 600 clamp(4rem, 9vw, 8.5rem)/0.8 var(--font-display); letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 70%, white); }
.case-title { font: 500 clamp(2.5rem, 6vw, 5.8rem)/0.95 var(--font-display); letter-spacing: -0.05em; }
.case-title span { display: block; font: 500 0.8rem var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.case-grid { display: grid; gap: clamp(40px, 5vw, 70px); }
@media (min-width: 1100px) { .case-grid { grid-template-columns: 1.35fr 1fr; align-items: start; } .case--flip .case-visual { order: 2; } }
.case-visual { position: relative; padding: 0 10% 8% 0; }
.case-visual .browser { --accent: var(--accent); }
.case-visual .phone { position: absolute; right: 0; bottom: 0; width: 23%; }
.case-info { display: grid; gap: 30px; }
.case-info > p { color: var(--text-2); font-size: 1.05rem; }
.case-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.case-meta div { padding: 18px 20px; background: var(--bg-1); }
.case-meta dt { font: 500 0.72rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.case-meta dd { margin: 6px 0 0; font-weight: 650; }
.case-features { display: grid; gap: 12px; }
.case-features li { display: flex; gap: 12px; color: var(--text-2); }
.case-features li svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent-text, var(--lilac)); }
.case-design { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 22px; }
.case-palette { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  transition: transform 0.4s var(--ease-back);
}
.swatch:hover { transform: translateY(-4px) scale(1.06); }
.swatch span { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); padding: 4px 8px; border-radius: 6px; background: #fff; color: #111; font: 600 0.7rem var(--font-mono); white-space: nowrap; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.swatch:hover span, .swatch:focus-visible span { opacity: 1; transform: translateX(-50%); }
.case-type { text-align: right; }
.case-type b { display: block; font-size: 3rem; line-height: 1; color: var(--accent-text, var(--text)); }
.case-type small { color: var(--text-3); font-size: 0.8rem; }
.case-pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.case-pages button { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); opacity: 0.55; transition: opacity 0.3s, border-color 0.3s, transform 0.4s var(--ease-out); }
.case-pages button img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-pages button span { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(5, 3, 7, 0.8); font-size: 0.66rem; font-weight: 700; }
.case-pages button:hover { opacity: 0.9; transform: translateY(-3px); }
.case-pages button.is-active { opacity: 1; border-color: var(--accent-text, var(--lilac)); }
.case-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.case .btn-accent { color: var(--accent-ink, #fff); background: var(--accent); box-shadow: 0 14px 40px -16px var(--accent); }
.case .btn-accent .btn-icon { background: rgba(0, 0, 0, 0.14); }
.case .btn-accent:hover { box-shadow: 0 18px 50px -12px var(--accent); }

.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.compare th, .compare td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 500 1.05rem var(--font-display); letter-spacing: -0.02em; background: var(--bg-2); white-space: nowrap; }
.compare thead th i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.compare tbody th { font: 500 0.75rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.compare td { color: var(--text-2); min-width: 200px; }
.compare tr:last-child > * { border-bottom: 0; }

/* 7 ─ FORMS & CALCULATOR ─────────────────────────────────────────────────── */
.contact-layout { display: grid; gap: 40px; }
@media (min-width: 1100px) { .contact-layout { grid-template-columns: 1.35fr 1fr; gap: 60px; align-items: start; } }
.form-card { padding: clamp(26px, 3.4vw, 50px); }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { position: relative; display: grid; gap: 8px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 12px; }
.field > label, .field-label { font: 500 0.75rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 56px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(5, 3, 7, 0.55);
  color: var(--text);
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #6e6584; }
.field input:hover, .field textarea:hover { border-color: var(--line-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lilac); box-shadow: 0 0 0 4px rgba(124, 0, 251, 0.25); background: rgba(13, 8, 20, 0.9); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #ff6b8b; box-shadow: 0 0 0 4px rgba(255, 107, 139, 0.15); }
.field-error { font-size: 0.82rem; color: #ff8fa6; min-height: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opt span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(207, 179, 250, 0.03);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.3s var(--ease-back);
}
.chip-opt span:hover { border-color: var(--line-3); color: var(--text); }
.chip-opt input:checked + span { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 8px 24px -10px rgba(124, 0, 251, 0.9); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--lilac); outline-offset: 3px; }
.check { display: flex; gap: 14px; align-items: flex-start; font-size: 0.9rem; color: var(--text-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { width: 24px; height: 24px; flex: none; border-radius: 8px; border: 1px solid var(--line-3); display: grid; place-items: center; transition: background-color 0.3s, border-color 0.3s; margin-top: 1px; }
/* the tick path is ~22.6 units long: dash 30 + offset 32 hides all of it (a 20/20 dash left its tail showing) */
.check-box svg { width: 14px; height: 14px; color: #fff; stroke-dasharray: 30; stroke-dashoffset: 32; transition: stroke-dashoffset 0.4s var(--ease-out); }
.check input:checked + .check-box { background: var(--violet); border-color: var(--violet); }
.check input:checked + .check-box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check-box { outline: 2px solid var(--lilac); outline-offset: 3px; }
.check a { color: var(--lilac); text-decoration: underline; text-underline-offset: 3px; }
.check.is-invalid .check-box { border-color: #ff6b8b; }
.form-foot { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.form-hint { font-size: 0.85rem; color: var(--text-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estimate-chip { display: none; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(124, 0, 251, 0.14); border: 1px solid rgba(166, 0, 251, 0.4); font-size: 0.92rem; }
.estimate-chip.is-on { display: flex; }
.estimate-chip button { margin-left: auto; color: var(--text-3); font-size: 1.3rem; line-height: 1; }
.estimate-chip button:hover { color: #fff; }
.submit-btn.is-loading .btn-label { opacity: 0.6; }
.submit-btn.is-loading .btn-icon svg { animation: spin 0.9s linear infinite; }

.form-success { display: none; text-align: center; padding: clamp(40px, 6vw, 80px) 20px; }
.form-success.is-on { display: grid; justify-items: center; gap: 18px; animation: toastIn 0.6s var(--ease-out); }
.form-success svg { width: 96px; height: 96px; }
.form-success circle { fill: none; stroke: url(#okGrad); stroke-width: 3; stroke-dasharray: 290; stroke-dashoffset: 290; animation: draw 1s var(--ease-out) forwards; }
.form-success path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 0.6s var(--ease-out) 0.6s forwards; }
.form-success h3 { font: 500 2rem var(--font-display); letter-spacing: -0.03em; }
.form-success p { color: var(--text-2); max-width: 40ch; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.contact-aside { display: grid; gap: 16px; }
@media (min-width: 1100px) { .contact-aside { position: sticky; top: calc(var(--header-h) + 30px); } }
.info-card { display: flex; gap: 18px; align-items: center; padding: 22px 24px; }
.info-card .info-ico { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--lilac); }
.info-card .info-ico svg { width: 22px; height: 22px; }
.info-card dt { font: 500 0.72rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.info-card dd { margin: 4px 0 0; font-weight: 650; font-size: 1.05rem; word-break: break-word; }
.info-card .copy-btn { margin-left: auto; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-2); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.info-card .copy-btn:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.info-card .copy-btn svg { width: 17px; height: 17px; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.social {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease-back);
}
.social svg { width: 19px; height: 19px; }
.social:hover { background: var(--violet); border-color: var(--violet); color: #fff; transform: translateY(-4px); }

/* poland dot map */
.map-card { padding: 26px; overflow: hidden; }
.pl-map { width: 100%; height: auto; margin-top: 10px; }
.pl-map circle.d { fill: rgba(207, 179, 250, 0.22); }
.pl-map .city circle.core { fill: #fff; }
/* one random city pulses at a time - main.js adds .is-ping to one ring after another */
.pl-map .city circle.halo { fill: var(--purple); opacity: 0; transform-box: fill-box; transform-origin: center; }
.pl-map .city circle.halo.is-ping { animation: cityPing 1.7s var(--ease-out) forwards; }
.pl-map .city text { font: 600 13px var(--font-body); fill: var(--text-2); }
.pl-map .city.you circle.core { fill: var(--lilac); }
.pl-map .city.you text { fill: var(--lilac); }
/* other big cities: smaller dot, quieter label (the project cities stay the bright ones) */
.pl-map .city--minor circle.core { fill: rgba(246, 243, 252, 0.75); }
.pl-map .city--minor text { font-size: 11px; font-weight: 500; fill: var(--text-3); }
.pl-map .city--left text { text-anchor: end; }
@keyframes cityPing { from { transform: scale(1); opacity: 0.7; } to { transform: scale(4); opacity: 0; } }

/* calculator */
.calc { display: grid; gap: 20px; }
@media (min-width: 1100px) { .calc { grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; } }
.calc-steps { display: grid; gap: 16px; }
.calc-step { padding: clamp(24px, 2.8vw, 36px); display: grid; gap: 20px; }
.calc-step-head { display: flex; align-items: baseline; gap: 14px; }
.calc-step-head span { font: 500 0.78rem var(--font-mono); color: var(--lilac); letter-spacing: 0.1em; }
.calc-step-head h3 { font: 500 1.25rem var(--font-display); letter-spacing: -0.02em; }
.calc-types { display: grid; gap: 10px; }
@media (min-width: 640px) { .calc-types { grid-template-columns: repeat(2, 1fr); } }
.calc-type { position: relative; }
.calc-type input { position: absolute; opacity: 0; pointer-events: none; }
.calc-type label, .calc-type > span {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(5, 3, 7, 0.4);
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, transform 0.4s var(--ease-back), box-shadow 0.4s;
}
.calc-type b { font-weight: 700; }
.calc-type small { color: var(--text-3); font-size: 0.85rem; }
.calc-type label:hover { border-color: var(--line-3); }
.calc-type input:checked + label { border-color: var(--purple); background: rgba(124, 0, 251, 0.16); box-shadow: 0 0 0 1px var(--purple) inset, 0 14px 40px -20px rgba(166, 0, 251, 1); }
.calc-type input:focus-visible + label { outline: 2px solid var(--lilac); outline-offset: 3px; }
.range-row { display: flex; align-items: center; gap: 20px; }
.range-val { min-width: 64px; text-align: center; font: 600 1.6rem var(--font-display); letter-spacing: -0.04em; }
input[type="range"].range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--violet) 0%, var(--purple) var(--fill, 20%), rgba(207, 179, 250, 0.14) var(--fill, 20%));
  outline: none;
}
input[type="range"].range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(124, 0, 251, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5); transition: box-shadow 0.3s; }
input[type="range"].range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(124, 0, 251, 0.35); }
input[type="range"].range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(207, 179, 250, 0.5); }
.calc-hint { font-size: 0.85rem; color: var(--text-3); }
.calc-result { padding: clamp(26px, 3vw, 40px); display: grid; gap: 20px; overflow: hidden; }
@media (min-width: 1100px) { .calc-result { position: sticky; top: calc(var(--header-h) + 30px); } }
.calc-result::before { opacity: 1 !important; background: radial-gradient(circle at 100% 0%, rgba(166, 0, 251, 0.3), transparent 55%) !important; }
.calc-price { font: 500 clamp(2rem, 3.6vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.calc-price small { font-size: 0.45em; color: var(--text-2); letter-spacing: 0; }
.calc-time { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.95rem; }
.calc-time svg { width: 18px; height: 18px; color: var(--lilac); }
.calc-summary { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.9rem; }
.calc-summary li { display: flex; justify-content: space-between; gap: 14px; color: var(--text-2); }
.calc-summary li span:last-child { font-family: var(--font-mono); color: var(--text); white-space: nowrap; }
.calc-summary li.is-new { animation: rowIn 0.5s var(--ease-out); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } }
.calc-disclaimer { font-size: 0.78rem; color: var(--text-3); line-height: 1.5; }

/* 8 ─ FOOTER ─────────────────────────────────────────────────────────────── */
.site-footer { position: relative; padding-top: clamp(70px, 8vw, 120px); border-top: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, transparent, rgba(124, 0, 251, 0.05)); }
.footer-grid { display: grid; gap: 44px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 50px; } }
.footer-brand img.f-mark { width: 120px; margin-bottom: 22px; }
.footer-brand p { color: var(--text-2); max-width: 34ch; font-size: 0.98rem; }
.footer-brand .availability { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 0.86rem; font-weight: 600; }
.footer-col h3 { font: 500 0.75rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 20px; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { color: var(--text-2); transition: color 0.3s; }
.footer-col a:hover { color: var(--text); }
.footer-col address { font-style: normal; color: var(--text-2); display: grid; gap: 12px; }
.footer-col address a { display: inline-flex; align-items: center; gap: 10px; }
.footer-giant { position: relative; margin-top: clamp(60px, 8vw, 110px); }
.footer-giant svg { width: 100%; height: auto; overflow: visible; }
.footer-giant .fg-fill { fill: url(#fgGrad); }
/* mouse spotlight copy of the letters: off until the pointer is over the footer (main.js), so the
   middle of the word never sits there lit on its own - and never on touch screens */
.footer-giant .fg-spot { opacity: 0; transition: opacity 0.6s ease; }
.footer-giant.is-spot .fg-spot { opacity: 1; }
.footer-giant .fg-lit path, .footer-giant .fg-glow path { fill: none; stroke-linejoin: round; }
.footer-giant .fg-lit path { stroke: #fff; stroke-width: 1.15; }
.footer-giant .fg-lit { opacity: 0.85; }
.footer-giant .fg-glow path { stroke: #dccbff; stroke-width: 3.2; }
.footer-giant .fg-glow { opacity: 0.5; }
/* with animations on, the outline stays off until the letters have risen, then the whole word
   fades up at once (main.js) */
.anim .footer-giant .fg-lit, .anim .footer-giant .fg-glow { opacity: 0; }
.footer-giant .fg-stroke { fill: none; stroke: rgba(207, 179, 250, 0.22); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 26px 0 30px;
  margin-top: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--text-3);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (min-width: 760px) { .footer-bottom { padding-right: 76px; } }
.footer-bottom a:hover { color: var(--text); }
.local-time { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); letter-spacing: 0.04em; }

/* 9 ─ LEGAL, THANK-YOU, 404 ──────────────────────────────────────────────── */
.legal { display: grid; gap: 50px; }
@media (min-width: 1000px) { .legal { grid-template-columns: 260px 1fr; gap: 80px; } }
.legal-toc { display: none; }
@media (min-width: 1000px) {
  .legal-toc { display: block; position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
  .legal-toc ol { display: grid; gap: 10px; counter-reset: toc; border-left: 1px solid var(--line); }
  .legal-toc a { display: block; padding: 2px 0 2px 18px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-3); font-size: 0.92rem; transition: color 0.3s, border-color 0.3s; }
  .legal-toc a:hover, .legal-toc a.is-active { color: var(--text); border-left-color: var(--purple); }
}
.prose { max-width: 75ch; color: var(--text-2); }
.prose h2 { font: 500 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--font-display); letter-spacing: -0.03em; color: var(--text); margin: 2.4em 0 0.8em; scroll-margin-top: calc(var(--header-h) + 30px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; color: var(--text); margin: 1.6em 0 0.6em; }
.prose p, .prose ul, .prose ol { margin-bottom: 1em; }
.prose ul { list-style: none; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.prose ol { padding-left: 1.3em; list-style: decimal; display: grid; gap: 8px; }
.prose a { color: var(--lilac); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
.prose .callout { padding: 18px 22px; border-radius: 16px; border: 1px dashed var(--line-3); background: rgba(124, 0, 251, 0.07); font-size: 0.92rem; }
.legal-date { font: 500 0.8rem var(--font-mono); color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; }

.err { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 30px) var(--pad) 60px; position: relative; isolation: isolate; overflow: hidden; }
.err::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 38% at 50% 62%, rgba(5, 3, 7, 0.82), transparent 72%);
}
.err-code {
  position: relative;
  font: 600 clamp(7rem, 26vw, 22rem)/0.85 var(--font-display);
  letter-spacing: -0.07em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 60px rgba(124, 0, 251, 0.5));
}
.err-code::before, .err-code::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}
.err-code::before { animation: glitch1 2.6s infinite steps(1); color: rgba(92, 8, 251, 0.6); }
.err-code::after { animation: glitch2 3.1s infinite steps(1); color: rgba(207, 179, 250, 0.4); }
@keyframes glitch1 { 0%, 90%, 100% { clip-path: inset(0 0 100% 0); transform: none; } 91% { clip-path: inset(20% 0 55% 0); transform: translate(-8px, 2px); } 94% { clip-path: inset(62% 0 12% 0); transform: translate(6px, -3px); } 97% { clip-path: inset(40% 0 40% 0); transform: translate(-4px, 0); } }
@keyframes glitch2 { 0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; } 87% { clip-path: inset(70% 0 5% 0); transform: translate(7px, 3px); } 92% { clip-path: inset(10% 0 70% 0); transform: translate(-6px, -2px); } }
.err h1 { font: 500 clamp(1.5rem, 3vw, 2.4rem)/1.2 var(--font-display); letter-spacing: -0.03em; margin-top: 10px; }
.err p { color: var(--text-2); margin: 16px auto 0; max-width: 46ch; }
.err .hero-actions { justify-content: center; margin-top: 34px; }

/* 10 ─ MOTION GATES ──────────────────────────────────────────────────────── */
/* Elements start hidden only when JS + GSAP are running (html.anim). If the
   animation library fails to load, html.no-anim keeps everything visible. */
.anim [data-reveal] { opacity: 0; transform: translateY(50px); }
.anim [data-reveal="fade"] { transform: none; }
.anim [data-reveal="scale"] { transform: scale(0.92); }
.anim [data-reveal="left"] { transform: translateX(-60px); }
.anim [data-reveal="right"] { transform: translateX(60px); }
.anim .hero-title .line > span, .anim .page-title .line > span { transform: translateY(105%); }
.anim .hero [data-intro], .anim .page-hero [data-intro] { opacity: 0; transform: translateY(30px); }
.no-anim [data-reveal], .no-anim [data-intro], .no-anim .hero-title .line > span, .no-anim .page-title .line > span { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .grain, .ambient i { animation: none !important; }
  .anim [data-reveal], .anim [data-intro], .anim .hero-title .line > span, .anim .page-title .line > span { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .grain, .ambient, .cursor, .to-top, .curtain, .loader, .hero-canvas, .page-hero-canvas { display: none !important; }
  body { background: #fff; color: #000; }
}

/* 11 ─ PHONE POLISH (added after the mobile review) ───────────────────────── */
/* realistic phone screen: status bar strip above the screenshot */
.phone { container-type: inline-size; }
.phone-screen { padding-top: 14.5%; background: var(--case-bg, #111); }
.phone-screen::before, .phone-screen::after { content: ""; position: absolute; top: 0; height: 14.5cqw; display: flex; align-items: center; z-index: 1; color: var(--status-ink, #fff); }
.phone-screen::before { content: "9:41"; left: 9%; font: 700 4.4cqw/1 var(--font-body); letter-spacing: 0.01em; }
.phone-screen::after { right: 8%; width: 13%; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='21' y='2' width='17' height='10' rx='3' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Crect x='23.5' y='4.5' width='11' height='5' rx='1.5'/%3E%3C/g%3E%3C/svg%3E"); }
.phone-screen.ink-dark::after { filter: invert(1); }
.b-mobile .phone-screen { --case-bg: #0f0b14; }
.b-mobile .phone-screen img { inset: 6.8% 0 0 0; height: auto; }

@media (max-width: 899px) {
  .scroll-cue { display: none !important; }
  .page-hero:not(.page-hero--short) { min-height: 100svh; }
}
@media (max-width: 699px) {
  .eyebrow { letter-spacing: 0.11em; font-size: 0.72rem; }
  .service-card { min-height: 0; gap: 14px; }
  .service-card h3 { margin-top: 14px; }
  /* process: swipeable cards instead of a long stack */
  .process-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1);
    padding: 4px var(--pad) 18px;
    scrollbar-width: none;
  }
  .process-track::-webkit-scrollbar { display: none; }
  .process-step { flex: 0 0 82%; min-height: 0; scroll-snap-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  /* Unbounded is very wide: size titles so the longest words always fit a phone */
  .hero-title { font-size: 11.2vw; }
  .page-title { font-size: 11.2vw; }
  .page-title--long { font-size: 8.9vw; }
  .cta-title { font-size: 11vw; }
}
.step-time { justify-self: start; }
.hero-content, .page-hero-content { min-width: 0; }
/* no "break anywhere" on headlines: at some browser zoom levels sub-pixel rounding made it split
   words ("żyj / ą / ."). Headline sizes already scale with the screen, so every word fits down to
   320px without it (checked 320–2000px). The hero's last line also never wraps. */
.hero-title .line > span:has(.word-live) { white-space: nowrap; }
.local-time { flex-wrap: nowrap; }
.local-time > span:last-child { white-space: normal; }
@media (hover: none) { .hover-only { display: none; } }
.calc-price small { white-space: nowrap; }
/* mobile: floating price while ticking options */
.calc-bar { display: none; }
@media (max-width: 1099px) {
  .calc-bar {
    position: fixed;
    left: 16px; right: 84px; bottom: 16px;
    z-index: 650;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px;
    border-radius: 999px;
    background: rgba(21, 13, 32, 0.92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(166, 0, 251, 0.45);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.8), 0 0 30px -12px rgba(124, 0, 251, 0.8);
    transform: translateY(140%); opacity: 0;
    transition: transform 0.5s var(--ease-out), opacity 0.3s;
  }
  .calc-bar.is-on { transform: none; opacity: 1; }
  .calc-bar small { display: block; font: 500 0.62rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
  .calc-bar b { font: 600 1rem var(--font-display); letter-spacing: -0.03em; white-space: nowrap; }
  .calc-bar button { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 0.8rem; font-weight: 700; }
}

/* realizacje: project name that follows the pointer over the 3D rings */
.rings-label {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  background: rgba(13, 8, 20, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2);
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  scale: 0.92;
  transition: opacity 0.25s, scale 0.35s var(--ease-out);
}
.rings-label.is-on { opacity: 1; scale: 1; }
.rings-label i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 12px currentColor; }
.rings-label b { display: block; font: 500 0.95rem var(--font-display); letter-spacing: -0.02em; }
.rings-label small { display: block; font: 500 0.66rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
.rings-label em { font-style: normal; color: var(--lilac); }
.tag i.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
/* realizacje: a slightly smaller headline so the 3D scene fits beside it */
@media (min-width: 600px) { .page-title--md { font-size: clamp(2.9rem, 7vw, 7.4rem); } }

/* split closing section: text left, floating 3D gallery right (realizacje.html) */
.cta-split { text-align: left; }
.cta-split-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: center; }
@media (min-width: 1000px) { .cta-split-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr); gap: 0 clamp(48px, 5vw, 96px); } }
.cta-split .eyebrow { justify-content: flex-start; }
/* sized to the text column itself (container units) so "następny." - the widest of the three
   fixed lines, 5.57em - always fits on one line */
.cta-split-text { container-type: inline-size; }
.cta-split .cta-title { margin: 28px 0 0; font-size: clamp(2.2rem, 17cqw, 7rem); }
.cta-split .cta-sub { margin: 24px 0 0; }
/* the circle button gets its own centred row under both columns */
.cta-split .cta-circle-wrap { grid-column: 1 / -1; justify-content: center; margin-top: clamp(10px, 2vw, 24px); }
.cta-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1.15;
  isolation: isolate;
}
.cta-gallery::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 0, 251, 0.55), rgba(166, 0, 251, 0.16) 55%, transparent 100%);
  filter: blur(6px);
  pointer-events: none;
}
.cta-gallery canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* all four edges fade out, so nothing in the 3D scene can ever end in a hard line */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}

/* bigger gallery: on desktop it reaches into the side margin and sits a little higher */
@media (min-width: 1000px) {
  /* bleeds into the empty margin right of the container (up to 200px on wide screens), so the gallery
     can be big without crowding the headline */
  .cta-gallery {
    --bleed: clamp(min(var(--pad), 64px), calc((100vw - 1544px) / 2 + var(--pad) - 24px), 200px);
    width: calc(100% + var(--bleed)); margin-right: calc(var(--bleed) * -1);
    aspect-ratio: 1.25; translate: 0 -5%;
  }
}

/* 12 ─ PHONE PASS 2 (phone widths only - desktop and tablet layouts are untouched) ─────────── */
/* short heroes (legal pages, thank-you) have no 3D scene - the 88svh mobile height above left an
   empty screen-tall gap over the title */
@media (max-width: 899px) {
  .page-hero--short { min-height: 0; }
}
@media (max-width: 599px) {
  /* home hero: less empty space under the 3D logo (it measures the gap and keeps its size), so the
     main button is on the first screen */
  .hero-content { padding-top: 27vh; }
  /* stacked hero buttons as one even, full-width column */
  .hero-actions .btn { flex: 1 1 100%; justify-content: space-between; }

  /* a little less air between sections on a small screen */
  .section { padding-block: 76px; }
  .section--tight { padding-block: 60px; }
  .case { padding-block: 72px; }
  .eyebrow { line-height: 1.35; } /* readable when a label wraps onto 2 lines */

  /* browser mockups: a slimmer bar, and the URL ends in "…" instead of being cut on both sides */
  .browser { border-radius: 10px; }
  .browser-bar { height: 26px; gap: 5px; padding: 0 9px; }
  .browser-bar i { width: 7px; height: 7px; }
  .browser-url {
    display: block;
    height: 17px;
    margin-left: 6px;
    padding: 0 8px;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    text-overflow: ellipsis;
  }
  .browser-url svg { display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: -0.5px; }

  /* pricing: the "most popular" badge sits above the plan name instead of colliding with it */
  .price-badge { position: static; align-self: flex-start; margin-bottom: -8px; }

  /* oferta: tighter checklist and FAQ */
  .included { gap: 10px; }
  .included li { padding: 18px; }
  .faq-layout { gap: 0; }
  .faq-item summary { gap: 16px; padding: 22px 0; }
  .faq-body > div { padding-right: 0; }

  /* realizacje: carousel without the empty band above it, smaller name pills on the cards */
  .c3d { height: 250px; }
  .c3d-card figcaption { left: 10px; bottom: 10px; padding: 5px 10px; font-size: 0.7rem; }
  /* palette + typeface stacked, so the 4 swatches stay on one row */
  .case-design { grid-template-columns: 1fr; gap: 18px; }
  .case-type { display: flex; align-items: baseline; gap: 12px; text-align: left; }
  .case-type b { font-size: 2.4rem; }
  /* closing gallery runs edge to edge (the canvas fades its own edges), so the screens are bigger */
  .cta-gallery { width: calc(100% + var(--pad) * 2); margin-inline: calc(var(--pad) * -1); aspect-ratio: 1.2; }

  /* o studiu: value cards only as tall as their text */
  .value-card { min-height: 0; padding: 28px 24px; }
  .value-card h3 { margin-top: 14px; }
  .mini-stats .card { padding: 20px; }
  .mini-stats b { font-size: min(2.2rem, 8.4vw); } /* "100%" fits the half-width card down to 320px */
  .mini-stats span { display: block; margin-top: 8px; line-height: 1.45; }
  .tools-cloud { gap: 8px; }
  .tool { padding: 10px 16px; font-size: 0.92rem; }

  /* kontakt: smaller option chips (two fit per row), roomier form, e-mail on one line */
  .form-card { padding: 24px 20px; }
  .chips { gap: 7px; }
  .chip-opt span { height: 40px; padding: 0 14px; font-size: 0.86rem; }
  .info-card { gap: 12px; padding: 18px 16px; }
  .info-card .info-ico { width: 40px; height: 40px; border-radius: 13px; }
  .info-card .info-ico svg { width: 19px; height: 19px; }
  .info-card .copy-btn { width: 36px; height: 36px; }
  .info-card dd { font-size: clamp(0.9rem, 4.15vw, 1.05rem); }
  /* calculator price bar spans the width; the back-to-top button moves up above it */
  .calc-bar { right: 16px; }
  body:has(.calc-bar.is-on) .to-top.is-visible { transform: translate3d(0, -72px, 0); }

  /* 404: copy at the bottom, the 3D blob floats in the space above it (three-scenes.js) */
  .err { align-items: end; padding-bottom: 48px; }

  /* footer: bigger tap targets, same rhythm */
  .footer-col ul { gap: 0; }
  .footer-col li a { display: inline-block; padding-block: 6px; }
  .footer-bottom nav a { display: inline-block; padding-block: 6px; }
}

/* 13 ─ PHONE DEEP DIVE (touch, notch, landscape) - desktop is untouched ─────────────────────── */
/* viewport-fit=cover lets iPhones draw the page under the notch and the home-indicator strip;
   keep content and the floating controls out of those areas. env() is 0 on every other screen,
   so these resolve to exactly the old values on desktop. */
:root { --pad: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left), env(safe-area-inset-right)); }
.to-top {
  right: calc(clamp(16px, 2.5vw, 32px) + env(safe-area-inset-right));
  bottom: calc(clamp(16px, 2.5vw, 32px) + env(safe-area-inset-bottom));
}
.toasts { bottom: calc(28px + env(safe-area-inset-bottom)); }
.menu-overlay { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.footer-bottom { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
@media (max-width: 1099px) { .calc-bar { bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* text only shown to mouse users / to touch users */
.touch-only { display: none; }
@media (hover: none) { .touch-only { display: inline; } }

/* touch screens: a tap leaves the element in its :hover state until you tap elsewhere, so the
   desktop hover effects that would "stick" are switched off and replaced by a short press effect */
@media (hover: none) {
  a, button, summary, label { -webkit-tap-highlight-color: transparent; }
  .btn, .cta-circle, .social, .copy-btn, .burger, .to-top, .chip-opt span, .calc-type label { transition-property: box-shadow, border-color, background-color, color, opacity, transform; }
  .btn:active, .cta-circle:active, .social:active, .copy-btn:active, .burger:active { transform: scale(0.95); transition-duration: 0.12s; }
  .chip-opt span:active, .calc-type label:active { transform: scale(0.97); transition-duration: 0.12s; }
  .to-top.is-visible:active { transform: translate3d(0, 0, 0) scale(0.92); }

  .btn-primary:hover { box-shadow: 0 0 0 1px rgba(207, 179, 250, 0.18) inset, 0 14px 40px -14px rgba(124, 0, 251, 0.9); }
  .btn-primary:hover::before, .btn-ghost:hover::before { opacity: 0; }
  .btn-primary:hover::after { left: -60%; }
  .btn-ghost:hover { border-color: var(--line-2); }
  .btn:hover .btn-icon svg:first-child { transform: none; }
  .btn:hover .btn-icon svg + svg { transform: translate(-150%, 150%); }
  .link-arrow:hover { background-size: 0 1px; color: var(--text); }
  .link-arrow:hover svg { transform: none; }
  .brand:hover .brand-mark { transform: none; filter: none; }
  .burger:hover { border-color: var(--line-2); background: none; }
  .to-top:hover { border-color: var(--line); }
  .to-top:hover .arrow { transform: none; }
  [data-tilt]:hover .tilt-glare { opacity: 0; }
  .service-card:hover .service-icon { box-shadow: none; transform: translateZ(40px); }
  .b-mobile:hover .phone { transform: rotateY(-18deg) rotateX(8deg); }
  .process-step:hover:not(.is-active) .step-num { color: transparent; -webkit-text-stroke-color: rgba(207, 179, 250, 0.35); }
  .sl-item:hover::before { transform: scaleY(0); }
  .sl-item:hover .sl-title { transform: none; color: var(--text); }
  .faq-item summary:hover { color: inherit; }
  .tool:hover { transform: none; border-color: var(--line-2); background: rgba(207, 179, 250, 0.03); box-shadow: none; }
  .c3d-card:hover { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
  .case-pages button:hover { transform: none; }
  .case-pages button:not(.is-active):hover { opacity: 0.55; }
  .swatch:hover { transform: none; }
  .swatch:hover span { opacity: 0; } /* the "Skopiowano" toast already shows the colour */
  .social:hover { background: none; border-color: var(--line-2); color: var(--text-2); transform: none; }
  .info-card .copy-btn:hover { background: none; border-color: var(--line-2); color: var(--text-2); }
  .chip-opt span:hover { border-color: var(--line-2); color: var(--text-2); }
  .calc-type label:hover { border-color: var(--line-2); }
}

/* phones held sideways (short, touch): slimmer header, headline on the first screen, and a
   two-column menu - the stacked one was taller than the screen and could not scroll */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  :root { --header-h: 64px; }
  .hero { padding-top: calc(var(--header-h) + 20px); }
  .hero-content { padding-top: 0; }
  .menu-overlay {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px 40px;
    padding-top: calc(var(--header-h) + 8px);
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu-list { gap: 0.08em; }
  .menu-list a { font-size: clamp(1.6rem, 10vh, 3rem); }
  .menu-foot { flex-direction: column; align-items: flex-end; text-align: right; gap: 14px; }
}

@media (max-width: 599px) {
  /* bigger touch areas, same look */
  .brand { padding-block: 10px; }
  .breadcrumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .page-hero-meta a.tag { height: 40px; }
  .shot-dots { gap: 14px; }
  .shot-dots button { position: relative; }
  .shot-dots button::before { content: ""; position: absolute; inset: -14px -7px; }
  .info-card .copy-btn { position: relative; }
  .info-card .copy-btn::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
  input[type="range"].range { height: 34px; padding: 14px 0; background-clip: content-box; }
  .calc-bar button { height: 40px; }
  /* toasts wrap instead of running off the screen */
  .toasts { left: 16px; right: 16px; transform: none; justify-items: center; }
  .toast { white-space: normal; text-align: center; max-width: 100%; }
}

/* very small phones (320-359px): the price cards were 2px wider than the screen and lost their right
   border, because the longest button label ("Premium") can't wrap - a little less side padding fits it */
@media (max-width: 359px) {
  .pricing { grid-template-columns: minmax(0, 1fr); }
  .price-card { padding-inline: 16px; }
}

/* 14 ─ PERF-LITE (only on devices that can't keep up - html.perf-lite is set by the performance
   governor in main.js; fast devices never get it) ───────────────────────────────────────────────
   Live blur behind elements that float over moving 3D/scrolling content is re-computed every frame;
   here it becomes a slightly more opaque plain background, and the slow gradient shimmer on
   highlighted words (a repaint every frame) holds still. */
.perf-lite .site-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 3, 7, 0.9); }
.perf-lite .to-top { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 8, 20, 0.92); }
.perf-lite .chip-float { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 8, 20, 0.85); }
.perf-lite .c3d-card figcaption { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 3, 7, 0.9); }
.perf-lite .rings-label { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 8, 20, 0.92); }
.perf-lite .calc-bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
.perf-lite .grad-text, .perf-lite .grad-text--v { animation-play-state: paused; }

/* 15 ─ 3D SWITCH & 2D MODE ─────────────────────────────────────────────────────────────────────
   main.js makes the switch on pages with a 3D scene: on computers a slim upright pill that floats in
   the page's empty left margin at the bottom (it can't cover any text or button there), on phones and
   tablets a wide one at the top of the menu. html.no-3d = 3D switched off. */
.mode-3d {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--text);
  font: 700 0.95rem var(--font-mono);
  letter-spacing: 0.12em;
  transition: border-color 0.3s, box-shadow 0.3s, opacity 0.5s, transform 0.6s var(--ease-out);
}
@media (hover: hover) { .mode-3d:hover { border-color: var(--lilac); box-shadow: 0 0 26px -8px rgba(166, 0, 251, 0.7); } }
.mode-3d-ico { width: 20px; height: 20px; flex: none; color: var(--lilac); transition: color 0.3s, transform 0.5s var(--ease-out); }
.mode-3d[aria-checked="false"] .mode-3d-ico { color: var(--text-3); transform: rotate(-30deg) scale(0.9); }
.mode-3d-track {
  position: relative;
  width: 46px; height: 28px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(207, 179, 250, 0.1);
  transition: background-color 0.3s, border-color 0.3s;
}
.mode-3d-knob {
  position: absolute;
  top: 4px; left: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform 0.35s var(--ease-out), background-color 0.3s, box-shadow 0.3s;
}
.mode-3d[aria-checked="true"] .mode-3d-track { background: rgba(124, 0, 251, 0.45); border-color: rgba(166, 0, 251, 0.75); }
.mode-3d[aria-checked="true"] .mode-3d-knob { transform: translateX(18px); background: #fff; box-shadow: 0 0 12px rgba(166, 0, 251, 0.95); }
/* 3D impossible on this device: the switch stays, dimmed and off (tapping it explains why) */
.no-webgl .mode-3d { opacity: 0.6; }
.no-webgl .mode-3d--float.is-shown { opacity: 0.6; }

/* computers: upright pill, centred in the left margin, bottom corner */
.mode-3d--float {
  position: fixed;
  z-index: 700;
  left: calc((var(--pad) - var(--sw-w)) / 2);
  bottom: clamp(16px, 2.5vw, 32px);
  --sw-w: min(56px, calc(var(--pad) - 8px));
  width: var(--sw-w);
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 12px;
  background: rgba(13, 8, 20, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
  pointer-events: none;
}
.mode-3d--float.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.mode-3d--float .mode-3d-track { width: 28px; height: 46px; }
.mode-3d--float .mode-3d-knob { top: auto; bottom: 4px; }
.mode-3d--float[aria-checked="true"] .mode-3d-knob { transform: translateY(-18px); }
.perf-lite .mode-3d--float { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 8, 20, 0.94); }
@media (max-width: 999px) { .mode-3d--float { display: none; } }

/* phones / tablets: in the menu, and a round "3D" button in the top bar (struck through when off) */
.menu-foot .mode-3d { height: 52px; padding: 0 9px 0 16px; background: rgba(13, 8, 20, 0.5); }
.mode-3d--head {
  position: relative;
  width: 44px; height: 44px;
  flex: none;
  justify-content: center;
  padding: 0;
  gap: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-color: rgba(166, 0, 251, 0.6);
  box-shadow: inset 0 0 14px rgba(124, 0, 251, 0.45);
}
.mode-3d--head[aria-checked="false"] { color: var(--text-3); border-color: var(--line-2); box-shadow: none; }
.mode-3d--head::after {
  content: "";
  position: absolute;
  left: 9px; right: 9px; top: 50%;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-35deg) scaleX(0);
  transition: transform 0.3s var(--ease-out);
}
.mode-3d--head[aria-checked="false"]::after { transform: rotate(-35deg) scaleX(1); }
.site-header .mode-3d--head { margin-right: -12px; } /* sits close to the menu button */
@media (min-width: 1000px) { .mode-3d--head { display: none; } }
@media (max-width: 359px) { .site-header .header-inner { gap: 16px; } }

/* 2D: the canvases fade out (the scenes pause in three-scenes.js), the static versions fade in */
.no-3d [data-scene] > canvas { opacity: 0 !important; }
.no-3d .hero-canvas.is-ready .hero-fallback,
.no-3d .page-hero-canvas.is-ready .orb-fallback { opacity: 1; }
.no-3d .rings-label:not(.flat-label) { opacity: 0 !important; }
.cta-gallery canvas { transition: opacity 0.8s; }

/* the project gallery's flat version: three screenshots as tilted cards (three-scenes.js makes them) */
.gallery-flat { position: absolute; inset: 0; perspective: 1400px; transition: opacity 0.6s, visibility 0.6s; }
.cta-gallery.is-ready .gallery-flat { opacity: 0; visibility: hidden; }
.no-3d .cta-gallery .gallery-flat { opacity: 1; visibility: visible; }
.gf-card {
  position: absolute;
  left: calc(4% + var(--i) * 18%);
  top: calc(7% + var(--i) * 23%);
  z-index: calc(var(--i) + 1);
  width: 56%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85), 0 0 46px -16px var(--c);
  transform: rotateY(-14deg) rotateX(4deg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.gf-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gf-card:hover, .gf-card:focus-visible { z-index: 5; transform: rotateY(-6deg) rotateX(2deg) translateZ(40px) scale(1.03); box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.9), 0 0 60px -12px var(--c); }
.gf-label {
  position: absolute;
  left: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(13, 8, 20, 0.88);
  border: 1px solid var(--line-2);
  font: 600 0.8rem var(--font-body);
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.3s, translate 0.3s;
}
.gf-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.gf-label small { font: 500 0.66rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.gf-card:hover .gf-label, .gf-card:focus-visible .gf-label { opacity: 1; translate: 0 0; }
@media (hover: none) { .gf-label { opacity: 1; translate: 0 0; } }

/* 16 ─ 2D MODE VISUALS ──────────────────────────────────────────────────────────────────────────
   Shown instead of the live 3D when it is switched off (html.no-3d) or impossible (html.no-webgl).
   main.js builds them and moves them with the mouse through --fx/--fy (drift) and --frx/--fry (tilt);
   clicks play short reactions through --ps (scale) and --pr (extra turn). */
@property --ps { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --pr { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.flat2d {
  --fx: 0px; --fy: 0px; --frx: 0deg; --fry: 0deg;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s, visibility 0.8s;
}
:is(.no-3d, .no-webgl) .flat2d { opacity: 1; visibility: visible; }
:is(.no-3d, .no-webgl) .has-flat .orb-fallback { opacity: 0 !important; }
:is(.no-3d, .no-webgl) :is(.hero-canvas, .page-hero-canvas) { perspective: 1400px; }
/* the live 3D's glow tints the whole hero a dark purple (the page's dark fade at the bottom then makes it
   a gradient from the top) - the 2D heroes get the same tint, measured from the 3D pages */
:is(.no-3d, .no-webgl) .page-hero-canvas { background: #170323; }
:is(.no-3d, .no-webgl) .hero-canvas { background: #150220; }

/* home: the flat logo leans and drifts towards the mouse (size/position set by main.js); a click
   squashes it, spins it once around and sends a shockwave ring out */
:is(.no-3d, .no-webgl) .hero-fallback {
  transform: translate(var(--fx, 0px), calc(-50% + var(--fy, 0px))) rotateX(var(--frx, 0deg)) rotateY(calc(var(--fry, 0deg) + var(--pr))) scale(var(--ps));
  animation: none;
}
:is(.no-3d, .no-webgl) .hero-fallback.is-pressed { animation: flatSpin 1.25s var(--ease-out); }
@keyframes flatSpin { 14% { --ps: 0.9; } 100% { --ps: 1; --pr: 360deg; } }
.flat-shock {
  position: absolute;
  left: 0; top: 0;
  width: 140px; height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  border: 2px solid rgba(207, 179, 250, 0.9);
  box-shadow: 0 0 40px rgba(166, 0, 251, 0.7), inset 0 0 30px rgba(166, 0, 251, 0.45);
  opacity: 0;
  pointer-events: none;
}
.flat-shock.is-on { animation: flatShock 1.1s var(--ease-out); }
@keyframes flatShock { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(5.5); } }

/* oferta: the made-to-measure drawing; realizacje: the drawn rings - both right of the headline */
.flat-tailor, .flat-gyro {
  right: 5%;
  top: 50%;
  transform: translate(var(--fx), calc(-50% + var(--fy))) rotateX(var(--frx)) rotateY(calc(var(--fry) + var(--pr))) scale(var(--ps));
}
.flat-tailor { width: min(44vw, 620px); aspect-ratio: 640 / 520; filter: drop-shadow(0 18px 50px rgba(92, 8, 251, 0.45)); }
.flat-tailor svg, .flat-gyro svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flat-tailor.is-pressed { animation: flatPop 0.9s var(--ease-out); }
.flat-tailor.is-pressed .tm-ticks { animation: tmPull 0.9s var(--ease-out); }
.flat-tailor.is-pressed .tm-spark path { animation: tmTwinkle 0.9s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes flatPop { 18% { --ps: 1.06; --pr: 10deg; } 55% { --pr: -5deg; } 100% { --ps: 1; --pr: 0deg; } }
@keyframes tmPull { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes tmTwinkle { 35% { transform: scale(1.8) rotate(45deg); opacity: 1; } }

.flat-gyro { width: min(48vw, 680px); aspect-ratio: 1; }
/* every ring rests evenly a little dimmed all the way round; the hovered one lights up, with a soft glow */
.fg-ring { fill: none; stroke: currentColor; stroke-linecap: round; opacity: 0.72; transition: opacity 0.35s; }
.fg-ring .fg-glow { stroke-width: 18; opacity: 0; filter: url(#fg-blur); transition: opacity 0.35s, stroke-width 0.35s; }
.fg-ring .fg-tube { stroke-width: 10; transition: stroke-width 0.35s; }
.fg-ring .fg-shine { stroke: #fff; stroke-width: 2.5; opacity: 0.4; }
.fg-planet { opacity: 0.75; transition: opacity 0.35s; }
.fg-ring.is-on, .fg-planet.is-on { opacity: 1; }
.fg-ring.is-on .fg-glow { opacity: 0.42; stroke-width: 20; }
.fg-ring.is-on .fg-tube { stroke-width: 11.5; }
.fg-spin { transform-box: view-box; transform-origin: 300px 300px; }
.flat-gyro.is-spinning .fg-spin { animation: fgSpin 1.6s var(--ease-io); }
@keyframes fgSpin { to { transform: rotate(360deg); } }

/* o studiu: the logo made of dots; kontakt: the light wave - both canvases cover the whole hero
   (so scattered dots are never cut off); main.js draws the logo / the wave inside */
.flat-dots, .flat-wave { inset: 0; }
/* (the 3D areas style every canvas inside them as the 3D canvas - undo that for these 2D ones) */
.flat-dots canvas, .flat-wave canvas { position: static; display: block; width: 100%; height: 100%; opacity: 1; transition: none; }

@media (max-width: 899px) {
  /* phones / tablets: centred above the headline, like the 3D (the logo a little smaller) */
  :is(.no-3d, .no-webgl) .hero-fallback {
    width: 68vw;
    transform: translate(calc(-50% + var(--fx, 0px)), calc(-50% + var(--fy, 0px))) rotateX(var(--frx, 0deg)) rotateY(calc(var(--fry, 0deg) + var(--pr))) scale(var(--ps));
  }
  .flat-tailor, .flat-gyro {
    left: 50%; right: auto; top: 30%;
    transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) rotateX(var(--frx)) rotateY(calc(var(--fry) + var(--pr))) scale(var(--ps));
  }
  .flat-tailor { width: 86vw; }
  .flat-gyro { width: 94vw; }
}