/* ============================================================
   GodHaze Studio — Design System
   Dark default · 22 accent palettes · RS/EN
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- Motion tokens ---------- */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-swap: cubic-bezier(0.83, 0, 0.17, 1);
  /* Single source of truth for the hero theme swap — main.js reads this value so the
     JS lock and the CSS motion can never drift apart. */
  --dur-theme: 560ms;
  --header-h: 76px;
}

/* ---------- Theme: dark (default) ---------- */
:root {
  color-scheme: dark;
  --bg: #07080a;
  --bg-2: #0b0d10;
  --surface: #0e1116;
  --surface-2: #131720;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --text: #eef1f6;
  --text-2: #a8b0be;
  --text-3: #6f7887;
  --header-bg: rgba(7, 8, 10, 0.62);
  --shadow-card: 0 18px 50px -22px rgba(0, 0, 0, 0.75);
  --hero-img-filter: hue-rotate(var(--hero-rotate)) saturate(calc(var(--accent-sat) * 1.35)) contrast(1.22) brightness(0.92);
  --panel-img-filter: invert(1) hue-rotate(calc(180deg + var(--hero-rotate))) saturate(calc(var(--accent-sat) * 0.9)) contrast(1.05) brightness(1.04);
  --panel-bg: #eff2f6;
  --panel-line: rgba(10, 14, 20, 0.1);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --line: rgba(10, 14, 20, 0.09);
  --line-2: rgba(10, 14, 20, 0.16);
  --text: #0c0f14;
  --text-2: #4c5666;
  --text-3: #8b94a4;
  --header-bg: rgba(250, 250, 252, 0.72);
  --shadow-card: 0 18px 44px -24px rgba(15, 25, 45, 0.28);
  --hero-img-filter: invert(1) hue-rotate(calc(180deg + var(--hero-rotate))) saturate(var(--accent-sat)) contrast(1.04) brightness(1.05);
  --panel-img-filter: hue-rotate(var(--hero-rotate)) saturate(calc(var(--accent-sat) * 1.35)) contrast(1.2) brightness(0.9);
  --panel-bg: #0a0e14;
  --panel-line: rgba(255, 255, 255, 0.12);
}

/* ---------- Accent palettes (Tailwind originals) ----------
   --hero-rotate  : accent hue − 212 (Hero.png base hue)
   --person-rotate: accent hue − 95  (person glow base hue)  */
[data-accent="rose"]    { --accent:#f43f5e; --accent-2:#fb7185; --accent-deep:#e11d48; --accent-rgb:244,63,94;   --hero-rotate:138deg;  --person-rotate:255deg; --accent-sat:1; }
[data-accent="pink"]    { --accent:#ec4899; --accent-2:#f472b6; --accent-deep:#db2777; --accent-rgb:236,72,153;  --hero-rotate:118deg;  --person-rotate:235deg; --accent-sat:1; }
[data-accent="fuchsia"] { --accent:#d946ef; --accent-2:#e879f9; --accent-deep:#c026d3; --accent-rgb:217,70,239;  --hero-rotate:80deg;   --person-rotate:197deg; --accent-sat:1; }
[data-accent="purple"]  { --accent:#a855f7; --accent-2:#c084fc; --accent-deep:#9333ea; --accent-rgb:168,85,247;  --hero-rotate:59deg;   --person-rotate:176deg; --accent-sat:1; }
[data-accent="violet"]  { --accent:#8b5cf6; --accent-2:#a78bfa; --accent-deep:#7c3aed; --accent-rgb:139,92,246;  --hero-rotate:46deg;   --person-rotate:163deg; --accent-sat:1; }
[data-accent="indigo"]  { --accent:#6366f1; --accent-2:#818cf8; --accent-deep:#4f46e5; --accent-rgb:99,102,241;  --hero-rotate:27deg;   --person-rotate:144deg; --accent-sat:1; }
[data-accent="blue"]    { --accent:#3b82f6; --accent-2:#60a5fa; --accent-deep:#2563eb; --accent-rgb:59,130,246;  --hero-rotate:5deg;    --person-rotate:122deg; --accent-sat:1; }
[data-accent="sky"]     { --accent:#0ea5e9; --accent-2:#38bdf8; --accent-deep:#0284c7; --accent-rgb:14,165,233;  --hero-rotate:-13deg;  --person-rotate:104deg; --accent-sat:1; }
[data-accent="cyan"]    { --accent:#06b6d4; --accent-2:#22d3ee; --accent-deep:#0891b2; --accent-rgb:6,182,212;   --hero-rotate:-23deg;  --person-rotate:94deg;  --accent-sat:1; }
[data-accent="teal"]    { --accent:#14b8a6; --accent-2:#2dd4bf; --accent-deep:#0d9488; --accent-rgb:20,184,166;  --hero-rotate:-39deg;  --person-rotate:78deg;  --accent-sat:1; }
[data-accent="emerald"] { --accent:#10b981; --accent-2:#34d399; --accent-deep:#059669; --accent-rgb:16,185,129;  --hero-rotate:-52deg;  --person-rotate:65deg;  --accent-sat:1; }
[data-accent="green"]   { --accent:#22c55e; --accent-2:#4ade80; --accent-deep:#16a34a; --accent-rgb:34,197,94;   --hero-rotate:-70deg;  --person-rotate:47deg;  --accent-sat:1; }
[data-accent="lime"]    { --accent:#84cc16; --accent-2:#a3e635; --accent-deep:#65a30d; --accent-rgb:132,204,22;  --hero-rotate:-128deg; --person-rotate:-11deg; --accent-sat:1; }
[data-accent="yellow"]  { --accent:#eab308; --accent-2:#facc15; --accent-deep:#ca8a04; --accent-rgb:234,179,8;   --hero-rotate:-164deg; --person-rotate:-47deg; --accent-sat:1; }
[data-accent="amber"]   { --accent:#f59e0b; --accent-2:#fbbf24; --accent-deep:#d97706; --accent-rgb:245,158,11;  --hero-rotate:-174deg; --person-rotate:-57deg; --accent-sat:1; }
[data-accent="orange"]  { --accent:#f97316; --accent-2:#fb923c; --accent-deep:#ea580c; --accent-rgb:249,115,22;  --hero-rotate:173deg;  --person-rotate:-70deg; --accent-sat:1; }
[data-accent="red"]     { --accent:#ef4444; --accent-2:#f87171; --accent-deep:#dc2626; --accent-rgb:239,68,68;   --hero-rotate:148deg;  --person-rotate:-95deg; --accent-sat:1; }
[data-accent="stone"]   { --accent:#78716c; --accent-2:#a8a29e; --accent-deep:#57534e; --accent-rgb:120,113,108; --hero-rotate:0deg;    --person-rotate:0deg;   --accent-sat:0.16; }
[data-accent="neutral"] { --accent:#737373; --accent-2:#a3a3a3; --accent-deep:#525252; --accent-rgb:115,115,115; --hero-rotate:0deg;    --person-rotate:0deg;   --accent-sat:0.05; }
[data-accent="zinc"]    { --accent:#71717a; --accent-2:#a1a1aa; --accent-deep:#52525b; --accent-rgb:113,113,122; --hero-rotate:0deg;    --person-rotate:0deg;   --accent-sat:0.12; }
[data-accent="gray"]    { --accent:#6b7280; --accent-2:#9ca3af; --accent-deep:#4b5563; --accent-rgb:107,114,128; --hero-rotate:3deg;    --person-rotate:120deg; --accent-sat:0.2; }
[data-accent="slate"]   { --accent:#64748b; --accent-2:#94a3b8; --accent-deep:#475569; --accent-rgb:100,116,139; --hero-rotate:3deg;    --person-rotate:120deg; --accent-sat:0.28; }

/* ---------- Base ---------- */
html {
  overflow-x: clip;          /* clip (not hidden) keeps position:sticky working */
  overscroll-behavior-x: none;
}
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  transition: background-color 500ms ease, color 500ms ease;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }

h1, h2, h3, h4 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display { font-size: clamp(2.7rem, 6.4vw, 4.8rem); }
.h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--text-2); max-width: 58ch; text-wrap: pretty; }

.flair {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  background: linear-gradient(115deg, var(--accent-2), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.06em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.section-head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .lead { margin-top: 16px; }
.section-head.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 250ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 17px; height: 17px; transition: transform 250ms var(--ease-out); }

.btn-primary {
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(var(--accent-rgb), 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-ghost {
  border-color: var(--line-2);
  color: var(--text);
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  .btn-primary:hover svg { transform: translateX(3px); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); }
}
.btn-sm { padding: 10px 20px; border-radius: 11px; font-size: 0.9rem; }
.btn-lg { padding: 17px 34px; border-radius: 16px; font-size: 1.05rem; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, background-color 400ms ease;
}
.header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 28px; }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line-2);
  transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
}
.brand-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.brand-name span { color: var(--accent); }

.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav a {
  position: relative;
  padding: 9px 15px;
  border-radius: 10px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 180ms ease, background-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--text); background: var(--line); }
}
.nav a.active { color: var(--text); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.header-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tool-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.tool-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .tool-btn:hover { border-color: var(--accent); color: var(--accent-2); }
}
.tool-btn svg { width: 18px; height: 18px; }

/* language switch */
.lang-btn { width: auto; padding: 0 12px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; gap: 6px; }
.lang-btn .lang-active { color: var(--accent); }
.lang-btn .lang-sep { color: var(--text-3); font-weight: 400; }

/* While the hero swap is mid-flight the toggle absorbs extra clicks. The running
   animation is the feedback, so this only softens the cursor — dimming the control
   would read as "disabled" rather than "busy". */
.theme-btn.is-busy { cursor: default; }

/* theme icon crossfade */
.theme-btn .icon-sun, .theme-btn .icon-moon { position: absolute; transition: opacity 250ms ease, transform 350ms var(--ease-out); }
.theme-btn .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-btn .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-btn .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-btn .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

/* palette swatch inside button */
.palette-btn .swatch-dot { width: 16px; height: 16px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7); transition: background-color 300ms ease; }

/* ---------- Palette popover ---------- */
.palette-pop {
  position: fixed;
  top: calc(var(--header-h) + 10px);
  right: max(24px, calc((100% - 1180px) / 2));
  z-index: 95;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100vh - var(--header-h) - 32px));
  overflow: auto;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.95) translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.palette-pop.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.palette-title { font-size: 0.92rem; font-weight: 600; text-align: center; margin-bottom: 16px; }
.palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.palette-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--text-2);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.palette-item:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .palette-item:hover { background: var(--line); color: var(--text); }
}
.palette-item.active { border-color: var(--accent); color: var(--text); background: rgba(var(--accent-rgb), 0.08); }
.palette-item .chip { width: 22px; height: 15px; border-radius: 5px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 40px) 0 60px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; contain: paint; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--hero-img-filter);
  transition: filter 420ms ease;
  /* own compositor layer so the filtered result is cached instead of the whole
     1600x900 vector being re-rasterised on every frame of the transition */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 60% at 78% 30%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    radial-gradient(40% 50% at 12% 80%, rgba(var(--accent-rgb), 0.12), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 28%, transparent 62%, var(--bg) 100%);
  /* NOTE: deliberately not transitioned. Gradients can't be composited, so animating
     `background` repaints this full-viewport stack every frame — the main theme-switch stall. */
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

/* the two columns glide & swap on theme change */
/* No will-change here on purpose: permanently promoting a layer that holds large display
   text can cost subpixel antialiasing. The transform transition promotes it only while
   it runs, which is exactly when it's needed. */
.hero-copy, .hero-visual { transition: transform var(--dur-theme) var(--ease-swap); }
[data-theme="light"] .hero-copy { transform: translateX(calc(100% + 48px)); }
[data-theme="light"] .hero-visual { transform: translateX(calc(-100% - 48px)); }

/* Clean dip of the headline while the logo glides. The blur is kept modest — it masks
   the crossfade without the cost of a heavy filter over a large text block. */
@keyframes heroDip {
  0% { opacity: 1; filter: blur(0); }
  42% { opacity: 0; filter: blur(7px); }
  58% { opacity: 0; filter: blur(7px); }
  100% { opacity: 1; filter: blur(0); }
}
.hero.theme-anim .hero-copy > * { animation: heroDip var(--dur-theme) var(--ease-in-out); }

.hero-copy { position: relative; z-index: 2; }
.hero-title { margin-bottom: 22px; }
.hero-sub { margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.hero-stats { display: flex; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; }
.hero-stat .num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
}
.hero-stat .num em { color: var(--accent); font-style: normal; }
.hero-stat .lbl { font-size: 0.82rem; color: var(--text-3); }

/* contrast panel behind the 3D logo */
.hero-visual { position: relative; min-height: 480px; }
.hero-panel {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-card);
  transition: background-color 700ms ease;
}
.hero-panel img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--panel-img-filter);
  opacity: 0.9;
  transition: filter 420ms ease;
  transform: translateZ(0); /* cache the filtered raster on its own layer */
  backface-visibility: hidden;
}
.hero-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 42%, rgba(var(--accent-rgb), 0.14), transparent 75%);
}
.hero-panel .panel-tag {
  position: absolute;
  left: 18px; bottom: 16px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--panel-bg);
  filter: invert(1) grayscale(1) contrast(9);
  opacity: 0.5;
}
#logo3d { position: absolute; inset: -6% -10%; z-index: 2; pointer-events: none; }

/* The pre-rendered glass logo is the DEFAULT state, so it shows even if the 3D module
   never runs (file://, blocked module, no WebGL). `.has3d` is added by hero3d.js only
   after the first real frame, and only then does the canvas take over.
   !important is required — three.js writes `display:block` inline on its canvas. */
#logo3d canvas { display: none !important; width: 100% !important; height: 100% !important; }
#logo3d.has3d canvas { display: block !important; }

/* While the 3D module is loading we hide the 2D logo so it never flashes on screen.
   The head script sets .probing-3d before first paint and clears it if 3D fails, so a
   browser with no JS at all still falls back to the visible-by-default state below. */
:root.probing-3d #logo3d .logo-2d-wrap { opacity: 0; transition: none; }

.logo-2d-wrap {
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  /* Mirrors the 3D behaviour: JS writes --lry (yaw) and --ly (bob) from the pointer.
     Deliberately no X translation — the logo turns, it never slides sideways. */
  transform: perspective(900px) translate3d(0, var(--ly, 0px), 0) rotateY(var(--lry, 0deg));
  transition: transform 700ms var(--ease-out), opacity 500ms ease;
  will-change: transform;
}
#logo3d.has3d .logo-2d-wrap { opacity: 0; }
/* stop compositing the hidden fallback once the canvas has taken over */
#logo3d.has3d .logo-2d { animation-play-state: paused; }
#logo3d .logo-2d {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 82%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 600ms ease;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.35));
  animation: logoFloat 7s var(--ease-in-out) infinite;
}
#logo3d .logo-2d-dark { opacity: 1; }
[data-theme="light"] #logo3d .logo-2d-dark { opacity: 0; }
[data-theme="light"] #logo3d .logo-2d-light { opacity: 1; }
@keyframes logoFloat {
  0%, 100% { transform: perspective(900px) translateY(0) rotateY(-7deg); }
  50% { transform: perspective(900px) translateY(-12px) rotateY(7deg); }
}

.scroll-hint {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-3);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.scroll-hint .wheel {
  width: 22px; height: 34px;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  position: relative;
}
.scroll-hint .wheel::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 7px;
  border-radius: 3px;
  background: var(--accent);
  transform: translateX(-50%);
  animation: wheelDrop 1.8s var(--ease-in-out) infinite;
}
@keyframes wheelDrop {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  55% { transform: translate(-50%, 9px); opacity: 0; }
  56% { transform: translate(-50%, -4px); opacity: 0; }
  75% { opacity: 1; }
}

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--line); padding: 34px 0; background: var(--bg-2); }
.trust-inner { display: flex; align-items: center; gap: 40px; }
.trust-label { flex-shrink: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); max-width: 150px; line-height: 1.5; }
/* min-width:0 is load-bearing — without it the max-content track defeats overflow:hidden
   and stretches the whole page wider than the viewport on phones. */
.marquee {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee 30s linear infinite; }
@keyframes marquee { to { transform: translateX(calc(-50% - 28px)); } }
.marquee-item { display: flex; align-items: center; gap: 10px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--text-3); white-space: nowrap; transition: color 250ms ease; }
.marquee-item svg { width: 20px; height: 20px; color: var(--accent); opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .marquee-item:hover { color: var(--text); } }

/* ---------- Cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.card {
  position: relative;
  padding: 30px 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 350ms var(--ease-out), border-color 300ms ease, box-shadow 350ms ease, background-color 400ms ease;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 46%;
  background: radial-gradient(70% 100% at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 24px 60px -24px rgba(var(--accent-rgb), 0.35); }
  .card:hover::before { opacity: 1; }
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  margin-bottom: 20px;
  color: var(--accent-2);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: 0.95rem; }
.card .card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 600; font-size: 0.9rem; color: var(--accent-2); }
.card .card-link svg { width: 15px; height: 15px; transition: transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover .card-link svg { transform: translateX(4px); } }

/* numbered advantage cards */
.adv-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
  background: linear-gradient(180deg, var(--accent-2), transparent 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
}

/* ---------- Brand band (logo section) ---------- */
.brand-band {
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 120% at 50% -20%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    var(--surface);
  padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 80px);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.brand-band .big-logo {
  width: clamp(110px, 16vw, 168px);
  height: auto;
  margin: 0 auto 30px;
  border-radius: 30px;
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px -30px rgba(var(--accent-rgb), 0.55);
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .brand-band .big-logo:hover { transform: scale(1.04) rotate(-2deg); } }
.brand-band .word {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.brand-band .word span { color: var(--accent); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: clamp(52px, 7vw, 92px) clamp(24px, 6vw, 80px);
  text-align: center;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background:
    radial-gradient(80% 140% at 50% 120%, rgba(var(--accent-rgb), 0.28), transparent 65%),
    var(--surface);
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band .lead { margin: 0 auto 32px; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 350ms var(--ease-out), border-color 300ms ease, box-shadow 350ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-6px); border-color: var(--line-2); }
  .plan.featured:hover { box-shadow: 0 32px 80px -28px rgba(var(--accent-rgb), 0.55); }
}
.plan.featured {
  border-color: rgba(var(--accent-rgb), 0.65);
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    var(--surface);
  box-shadow: 0 24px 70px -30px rgba(var(--accent-rgb), 0.5);
}
.plan-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), 0.8);
  white-space: nowrap;
}
.plan-name { font-family: "Space Grotesk", sans-serif; font-size: 1.12rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 6px; }
.plan.featured .plan-name { color: var(--accent-2); }
.plan-desc { font-size: 0.88rem; color: var(--text-3); min-height: 42px; margin-bottom: 18px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.plan-price .amount { font-family: "Space Grotesk", sans-serif; font-size: 2.9rem; font-weight: 700; letter-spacing: -0.03em; }
.plan.featured .plan-price .amount {
  background: linear-gradient(120deg, var(--accent-2), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plan-price .per { color: var(--text-3); font-size: 0.85rem; }
.plan-note { font-size: 0.78rem; color: var(--text-3); margin-bottom: 22px; }
.plan-divider { height: 1px; background: var(--line); margin-bottom: 22px; }
.plan-feats { flex: 1; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.plan-feats li { display: flex; gap: 11px; font-size: 0.92rem; color: var(--text-2); align-items: flex-start; }
.plan-feats li strong { color: var(--text); font-weight: 600; }
.plan-feats .tick {
  flex-shrink: 0;
  width: 19px; height: 19px;
  margin-top: 2px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.plan-feats .tick svg { width: 11px; height: 11px; }
.plan-feats li.inherit { color: var(--text-3); font-size: 0.86rem; font-weight: 500; }
.plan-feats li.inherit .tick { background: transparent; border-color: var(--line-2); color: var(--text-3); }
.plan .btn { width: 100%; }

/* discreet "prices are negotiable" strip under the plans */
.price-note {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 780px;
  margin: 34px auto 0;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.55;
  transition: border-color 250ms ease, background-color 300ms ease, transform 250ms var(--ease-out);
}
.price-note strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.price-note-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-2);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
.price-note-icon svg { width: 18px; height: 18px; }
.price-note-cta {
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent-2);
  white-space: nowrap;
}
.price-note:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .price-note:hover { border-color: rgba(var(--accent-rgb), 0.45); }
}
@media (max-width: 640px) {
  .price-note { flex-wrap: wrap; gap: 12px; padding: 16px 18px; }
  .price-note-cta { margin-left: 0; }
}

/* ---------- Steps / process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 26px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-2);
  margin-bottom: 12px;
}
.step h4 { font-size: 1.02rem; margin-bottom: 8px; }
.step p { font-size: 0.86rem; color: var(--text-2); }

/* ---------- Team ---------- */
.team-hero-img {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-card);
  position: relative;
}
.team-hero-img img { width: 100%; height: auto; object-fit: cover; }
.team-hero-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(var(--accent-rgb), 0.18) 130%);
  pointer-events: none;
}

.member { text-align: left; padding: 0; overflow: visible; border: none; background: transparent; }
.member-photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-card);
  aspect-ratio: 1 / 1;
  margin-bottom: 22px;
}
.member-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: hue-rotate(var(--person-rotate)) saturate(var(--accent-sat));
  transition: filter 420ms ease, transform 600ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .member-photo:hover img { transform: scale(1.045); }
}
.member-photo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -60px 80px -40px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.member-role { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; }
.member h3 { font-size: 1.4rem; margin-bottom: 10px; }
.member p { color: var(--text-2); font-size: 0.95rem; margin-bottom: 16px; }
.member-contacts { display: flex; flex-direction: column; gap: 8px; }
.member-contacts a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.92rem; font-weight: 500;
  color: var(--text-2);
  transition: color 180ms ease;
  width: fit-content;
}
.member-contacts a svg { width: 16px; height: 16px; color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) { .member-contacts a:hover { color: var(--accent-2); } }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 26px; align-items: start; }
.form-card { padding: 36px 32px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 8px; color: var(--text-2); }
.field input, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 400ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.8rem; color: var(--text-3); margin-top: 14px; }

.contact-side { display: flex; flex-direction: column; gap: 20px; }
.contact-card { padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.contact-card .who { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.contact-card .who img {
  width: 52px; height: 52px;
  border-radius: 15px;
  object-fit: cover;
  border: 1px solid var(--line-2);
  filter: hue-rotate(var(--person-rotate)) saturate(var(--accent-sat));
  transition: filter 420ms ease;
}
.contact-card.featured-contact {
  border-color: rgba(var(--accent-rgb), 0.45);
  background:
    radial-gradient(90% 70% at 50% -20%, rgba(var(--accent-rgb), 0.12), transparent 70%),
    var(--surface);
}
.contact-card .who-mark {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  display: inline-flex;
}
.contact-card .who-mark img { width: 100%; height: 100%; object-fit: cover; }
.contact-card .who h3 { font-size: 1.05rem; }
.contact-card .who .role { font-size: 0.78rem; color: var(--accent-2); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Socials ---------- */
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  transition: transform 200ms var(--ease-out), color 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 250ms ease;
}
.social-btn svg { width: 19px; height: 19px; }
.social-btn:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .social-btn:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: var(--accent);
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    box-shadow: 0 12px 26px -10px rgba(var(--accent-rgb), 0.7);
  }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(64px, 10vw, 120px)) 0 clamp(48px, 7vw, 84px);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 65% at 50% -10%, rgba(var(--accent-rgb), 0.16), transparent 72%),
    var(--bg);
  /* not transitioned — see the note on .hero-bg::after */
}
.page-hero .display { font-size: clamp(2.4rem, 5.4vw, 4rem); }

/* ---------- About ---------- */
.story-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.story-visual { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-card); }
.story-visual img { width: 100%; height: 100%; object-fit: cover; filter: var(--hero-img-filter); transition: filter 420ms ease; transform: translateZ(0); }
.story-visual .story-logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38%;
  height: auto;
  border-radius: 22%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  filter: none;
}
.mission-quote {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 24px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.45;
  color: var(--text);
}
.mission-quote footer { font-family: "Inter", sans-serif; font-style: normal; font-size: 0.85rem; color: var(--text-3); margin-top: 12px; }

.value-list { display: flex; flex-direction: column; gap: 0; }
.value-item { display: flex; gap: 22px; padding: 26px 6px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.value-item:first-child { border-top: 1px solid var(--line); }
.value-item .v-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-2);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.value-item .v-icon svg { width: 21px; height: 21px; }
.value-item h4 { font-size: 1.05rem; margin-bottom: 5px; }
.value-item p { font-size: 0.92rem; color: var(--text-2); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(48px, 6vw, 72px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 1fr; gap: 36px; padding-bottom: 48px; }
.footer h4 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.footer-brand p { color: var(--text-2); font-size: 0.92rem; margin: 16px 0 14px; max-width: 30ch; }
.ft-info-mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-2);
  transition: opacity 180ms ease;
}
.ft-info-mail svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .ft-info-mail:hover { opacity: 0.75; } }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--text-2); font-size: 0.93rem; width: fit-content; transition: color 180ms ease, transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: var(--accent-2); transform: translateX(3px); } }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact .fc-name { font-weight: 600; color: var(--text); font-size: 0.95rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 0.9rem; width: fit-content; transition: color 180ms ease; }
.footer-contact a svg { width: 15px; height: 15px; color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) { .footer-contact a:hover { color: var(--accent-2); } }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-3);
}
.footer-bottom .heart { color: var(--accent); display: inline-block; animation: heartbeat 2.6s var(--ease-in-out) infinite; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(1.25); }
  16% { transform: scale(1); }
  24% { transform: scale(1.18); }
  32% { transform: scale(1); }
}

/* ---------- Copy-to-clipboard toast ---------- */
.copy-toast {
  position: fixed;
  z-index: 120;
  transform: translate(-50%, -4px) scale(0.96);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: min(88vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-out);
}
.copy-toast.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
/* touch devices: a discreet pill just above the thumb area instead of near the link */
.copy-toast.bottom {
  left: 50% !important;
  top: auto !important;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px) scale(0.96);
}
.copy-toast.bottom.show { transform: translate(-50%, 0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .copy-toast, .copy-toast.bottom { transition: opacity 140ms ease; transform: translate(-50%, -100%); }
  .copy-toast.bottom, .copy-toast.bottom.show { transform: translate(-50%, 0); }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 60ms; }
.reveal.d2 { transition-delay: 120ms; }
.reveal.d3 { transition-delay: 180ms; }
.reveal.d4 { transition-delay: 240ms; }
.reveal.d5 { transition-delay: 300ms; }

/* ---------- Mobile nav ---------- */
.burger { display: none; }
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 85;
  background: var(--bg);
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.mobile-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu a {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out), color 180ms ease;
}
.mobile-menu.open a { opacity: 1; transform: translateY(0); }
.mobile-menu.open a:nth-child(1) { transition-delay: 40ms; }
.mobile-menu.open a:nth-child(2) { transition-delay: 80ms; }
.mobile-menu.open a:nth-child(3) { transition-delay: 120ms; }
.mobile-menu.open a:nth-child(4) { transition-delay: 160ms; }
.mobile-menu.open a:nth-child(5) { transition-delay: 200ms; }
.mobile-menu a.active { color: var(--accent-2); }
.mobile-menu .mm-cta { margin-top: 22px; border: none; opacity: 0; transition-delay: 240ms; }
.mobile-menu.open .mm-cta { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .hero { min-height: auto; padding-bottom: 90px; }
  .hero-visual { min-height: 380px; order: -1; }
  /* Pull the logo up and in so the beard clears the "Est. 2026" tag in the corner.
     The panel gets extra height first so shrinking the logo doesn't leave it stranded. */
  .hero-visual { min-height: 420px; }
  #logo3d { inset: 1% 6% 18% 6%; }
  #logo3d .logo-2d { height: 86%; }
  [data-theme="light"] .hero-copy { transform: none; }
  [data-theme="light"] .hero-visual { transform: none; }
  .contact-layout { grid-template-columns: 1fr; }
  .story-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .burger { display: inline-flex; }
  .grid-3 { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan-desc { min-height: 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .trust-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .trust-label { max-width: none; }
}
@media (max-width: 560px) {
  .container { width: calc(100% - 36px); }
  .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .footer-bottom { justify-content: center; text-align: center; }
  .header-tools { gap: 5px; }
  .tool-btn { width: 38px; height: 38px; }
  /* width:auto must be restated — the .tool-btn rule above otherwise clamps the
     RS/EN pill to 38px and its text spills out of the border. */
  .lang-btn { width: auto; padding: 0 9px; font-size: 0.76rem; }
  .brand-name { font-size: 1.05rem; }
}

/* Palette on phones: a bottom sheet with real tap targets instead of a cramped popover */
@media (max-width: 640px) {
  .palette-pop {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: min(72vh, 560px);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    border-bottom: none;
    transform-origin: bottom center;
    transform: translateY(100%) scale(1);
    box-shadow: 0 -18px 60px -12px rgba(0, 0, 0, 0.5);
    -webkit-overflow-scrolling: touch;
  }
  .palette-pop.open { transform: translateY(0) scale(1); }
  .palette-pop::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 4px;
    background: var(--line-2);
    margin: -6px auto 14px;
  }
  .palette-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .palette-item { padding: 12px 12px; font-size: 0.9rem; }
  .palette-item .chip { width: 26px; height: 18px; }
}

/* ---------- Reduced motion ---------- */
/* Reduced-motion variant of the theme swap: no sideways travel (that's the part that
   actually triggers motion sensitivity) but still a soft 560ms fade, because snapping
   the whole hero in one frame reads as a glitch rather than as "calm". */
@keyframes heroSoftFade {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* columns stay put — cancel the swap itself, not the sense of transition */
  [data-theme="light"] .hero-copy,
  [data-theme="light"] .hero-visual { transform: none; }
  .hero-copy, .hero-visual { transition: none; }
  .hero.theme-anim .hero-copy > *,
  .hero.theme-anim .hero-visual { animation: heroSoftFade var(--dur-theme) ease; }
  .marquee-track { animation-duration: 90s; }
  .reveal { transform: none; transition: opacity 400ms ease; }
  .scroll-hint .wheel::after, .footer-bottom .heart { animation: none; }
  /* the logo keeps a slow, small turn — a frozen logo reads as a broken image */
  #logo3d .logo-2d { animation-duration: 16s; }
  .mobile-menu a { transition-delay: 0ms !important; }
}