/* ============================================================
   MD3 Expressive — token system
   Roles are defined once on :root referencing --l-* / --c-* /
   --hue-*; theme switches the lightness/chroma sets, accent
   switches the hue. CSS resolves vars at use-time, so the
   role colors pick up whichever overrides are in play.
   ============================================================ */

:root {
  /* ---- role colors (resolved lazily from L/C + hue below) ---- */
  --primary:                oklch(var(--l-primary) var(--c-primary) var(--hue-p));
  --on-primary:             oklch(var(--l-on-primary) var(--c-on-primary) var(--hue-p));
  --primary-container:      oklch(var(--l-primary-container) var(--c-primary-container) var(--hue-p));
  --on-primary-container:   oklch(var(--l-on-primary-container) var(--c-on-primary-container) var(--hue-p));

  --secondary:              oklch(var(--l-secondary) var(--c-secondary) var(--hue-p));
  --on-secondary:           oklch(var(--l-on-secondary) var(--c-on-secondary) var(--hue-p));
  --secondary-container:    oklch(var(--l-secondary-container) var(--c-secondary-container) var(--hue-p));
  --on-secondary-container: oklch(var(--l-on-secondary-container) var(--c-on-secondary-container) var(--hue-p));

  --tertiary:               oklch(var(--l-tertiary) var(--c-tertiary) var(--hue-t));
  --on-tertiary:            oklch(var(--l-on-tertiary) var(--c-on-tertiary) var(--hue-t));
  --tertiary-container:     oklch(var(--l-tertiary-container) var(--c-tertiary-container) var(--hue-t));
  --on-tertiary-container:  oklch(var(--l-on-tertiary-container) var(--c-on-tertiary-container) var(--hue-t));

  --surface:                oklch(var(--l-surface) var(--c-neutral) var(--hue-p));
  --surface-dim:            oklch(var(--l-surface-dim) var(--c-neutral) var(--hue-p));
  --surface-bright:         oklch(var(--l-surface-bright) var(--c-neutral) var(--hue-p));
  --surface-c-lowest:       oklch(var(--l-scl-lowest) var(--c-neutral) var(--hue-p));
  --surface-c-low:          oklch(var(--l-scl-low) var(--c-neutral) var(--hue-p));
  --surface-c:              oklch(var(--l-sc) var(--c-neutral) var(--hue-p));
  --surface-c-high:         oklch(var(--l-sch-high) var(--c-neutral) var(--hue-p));
  --surface-c-highest:      oklch(var(--l-sch-highest) var(--c-neutral) var(--hue-p));

  --on-surface:             oklch(var(--l-on-surface) var(--c-on-surface) var(--hue-p));
  --on-surface-variant:     oklch(var(--l-on-surface-variant) var(--c-on-surface-variant) var(--hue-p));
  --outline:                oklch(var(--l-outline) var(--c-outline) var(--hue-p));
  --outline-variant:        oklch(var(--l-outline-variant) var(--c-outline-variant) var(--hue-p));

  /* state-layer base (on-surface tone for hover/press tints) */
  --state-on: oklch(var(--l-on-surface) var(--c-on-surface) var(--hue-p));

  /* ---- shape scale ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ---- MD3 Expressive motion ---- */
  --ease-standard:        cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:      cubic-bezier(0.2, 0, 0, 1);
  --ease-emph-decel:      cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emph-accel:      cubic-bezier(0.3, 0, 0.8, 0.15);
  /* spring-ish overshoot used by expressive transitions */
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-soft:     cubic-bezier(0.22, 1.2, 0.36, 1);
  /* smooth decelerate for hover lifts — gentle, no bounce */
  --ease-hover:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-short: 200ms;
  --dur-med: 350ms;
  --dur-long: 500ms;
  /* gentle, slightly longer timing for hover lifts so they ease in/out
     instead of snapping */
  --dur-hover: 460ms;

  --shadow-1: 0 1px 2px oklch(0 0 0 / .12), 0 1px 3px 1px oklch(0 0 0 / .08);
  --shadow-2: 0 1px 2px oklch(0 0 0 / .14), 0 2px 6px 2px oklch(0 0 0 / .10);
  --shadow-3: 0 4px 8px 3px oklch(0 0 0 / .12), 0 1px 3px oklch(0 0 0 / .16);

  /* Lift shadows for cards. Rest and hover share the SAME layer structure
     (1 inset hairline + 2 outset layers) so box-shadow interpolates smoothly
     instead of snapping between inset and outset types. */
  --lift-line: inset 0 0 0 1px var(--outline-variant);
  --lift-line-0: inset 0 0 0 1px transparent;
  --lift-rest:  0 2px 4px -2px transparent, 0 10px 22px -8px transparent;
  --lift-hover: 0 3px 8px -3px oklch(0 0 0 / .14), 0 16px 34px -10px oklch(0 0 0 / .20);

  color-scheme: light;
}

/* ===================== LIGHT THEME ===================== */
:root,
[data-theme="light"] {
  --l-primary: 0.505; --c-primary: 0.165;
  --l-on-primary: 0.99; --c-on-primary: 0.02;
  --l-primary-container: 0.905; --c-primary-container: 0.075;
  --l-on-primary-container: 0.34; --c-on-primary-container: 0.14;

  --l-secondary: 0.52; --c-secondary: 0.05;
  --l-on-secondary: 0.99; --c-on-secondary: 0.015;
  --l-secondary-container: 0.915; --c-secondary-container: 0.03;
  --l-on-secondary-container: 0.36; --c-on-secondary-container: 0.045;

  --l-tertiary: 0.53; --c-tertiary: 0.115;
  --l-on-tertiary: 0.99; --c-on-tertiary: 0.02;
  --l-tertiary-container: 0.905; --c-tertiary-container: 0.065;
  --l-on-tertiary-container: 0.34; --c-on-tertiary-container: 0.11;

  --l-surface: 0.985; --l-surface-dim: 0.895; --l-surface-bright: 0.99;
  --l-scl-lowest: 1.0; --l-scl-low: 0.975; --l-sc: 0.96;
  --l-sch-high: 0.945; --l-sch-highest: 0.925;
  --c-neutral: 0.006;

  --l-on-surface: 0.225; --c-on-surface: 0.012;
  --l-on-surface-variant: 0.44; --c-on-surface-variant: 0.018;
  --l-outline: 0.58; --c-outline: 0.014;
  --l-outline-variant: 0.86; --c-outline-variant: 0.01;

  color-scheme: light;
}

/* ===================== DARK THEME ====================== */
[data-theme="dark"] {
  --l-primary: 0.83; --c-primary: 0.125;
  --l-on-primary: 0.30; --c-on-primary: 0.10;
  --l-primary-container: 0.42; --c-primary-container: 0.135;
  --l-on-primary-container: 0.925; --c-on-primary-container: 0.06;

  --l-secondary: 0.81; --c-secondary: 0.04;
  --l-on-secondary: 0.30; --c-on-secondary: 0.03;
  --l-secondary-container: 0.37; --c-secondary-container: 0.04;
  --l-on-secondary-container: 0.91; --c-on-secondary-container: 0.03;

  --l-tertiary: 0.83; --c-tertiary: 0.10;
  --l-on-tertiary: 0.30; --c-on-tertiary: 0.07;
  --l-tertiary-container: 0.41; --c-tertiary-container: 0.075;
  --l-on-tertiary-container: 0.93; --c-on-tertiary-container: 0.05;

  --l-surface: 0.17; --l-surface-dim: 0.17; --l-surface-bright: 0.27;
  --l-scl-lowest: 0.12; --l-scl-low: 0.205; --l-sc: 0.225;
  --l-sch-high: 0.265; --l-sch-highest: 0.30;
  --c-neutral: 0.009;

  --l-on-surface: 0.925; --c-on-surface: 0.006;
  --l-on-surface-variant: 0.79; --c-on-surface-variant: 0.02;
  --l-outline: 0.62; --c-outline: 0.02;
  --l-outline-variant: 0.40; --c-outline-variant: 0.012;

  color-scheme: dark;
}

/* ===================== ACCENTS ========================= */
/* default (red) on :root so the page works with no attribute */
:root,
[data-accent="red"]    { --hue-p: 27;  --hue-t: 62;  }
[data-accent="purple"] { --hue-p: 301; --hue-t: 339; }
[data-accent="green"]  { --hue-p: 156; --hue-t: 210; }
[data-accent="teal"]   { --hue-p: 220; --hue-t: 178; }
[data-accent="amber"]  { --hue-p: 78;  --hue-t: 33;  }
[data-accent="pink"]   { --hue-p: 2;   --hue-t: 326; }

/* ===================== FONTS =========================== */
/* Google Sans Flex has NO Cyrillic, so every stack pairs it / leads with a
   Cyrillic-complete family. Default = GSF rounded for Latin + Nunito (rounded,
   full Cyrillic) so Russian text keeps the M3 Expressive rounded feel. */
:root,
[data-font="gsf-round"] { --font-ui: "Google Sans Flex", "Nunito", system-ui, sans-serif; --font-vs: "ROND" 100; }
[data-font="rubik"]     { --font-ui: "Rubik", system-ui, sans-serif; --font-vs: normal; }
[data-font="manrope"]   { --font-ui: "Manrope", system-ui, sans-serif; --font-vs: normal; }
[data-font="roboto"]    { --font-ui: "Roboto Flex", system-ui, sans-serif; --font-vs: normal; }
[data-font="comfortaa"] { --font-ui: "Comfortaa", system-ui, sans-serif; --font-vs: normal; }

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-ui, "Roboto Flex", system-ui, sans-serif);
  font-variation-settings: var(--font-vs, normal);
  background: var(--surface);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-med) var(--ease-standard),
              color var(--dur-med) var(--ease-standard);
  overflow-x: hidden;
}

::selection { background: var(--primary-container); color: var(--on-primary-container); }

.wrap { width: min(1240px, 92vw); margin-inline: auto; }

/* ---- Type scale (expressive) ---- */
.display {
  font-weight: 760;
  font-stretch: 115%;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(2.8rem, 7.5vw, 6.2rem);
  text-wrap: balance;
}
.headline {
  font-weight: 680;
  font-stretch: 105%;
  letter-spacing: -0.01em;
  line-height: 1.06;
  font-size: clamp(2rem, 4vw, 3.2rem);
  text-wrap: balance;
}
.title {
  font-weight: 640;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.body  { font-size: 1.0625rem; line-height: 1.55; color: var(--on-surface-variant); text-wrap: pretty; }
.label { font-weight: 620; letter-spacing: 0.01em; }
.eyebrow {
  font-weight: 680; font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary);
}

/* ============================================================
   SHARED: state layer + ripple
   ============================================================ */
.state { position: relative; overflow: hidden; isolation: isolate; }
.state::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: currentColor; opacity: 0;
  transition: opacity var(--dur-short) var(--ease-standard);
}
.state:hover::before { opacity: 0.08; }
.state:active::before { opacity: 0.12; }

.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: currentColor; opacity: 0.22; pointer-events: none;
  animation: ripple 560ms var(--ease-emph-decel);
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --_h: 56px;
  /* rest radius = half the height so the pill→squircle morph animates across
     the whole visible range (a literal 999px would sit clamped and snap late) */
  --_r: 28px;
  display: inline-flex; align-items: center; gap: 0.55em;
  height: var(--_h); padding-inline: 1.7rem;
  border: none; border-radius: var(--_r);
  font: inherit; font-weight: 640; font-size: 1.02rem; letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-radius var(--dur-med) var(--ease-hover),
              transform var(--dur-short) var(--ease-spring-soft),
              box-shadow var(--dur-med) var(--ease-standard),
              background var(--dur-med) var(--ease-standard);
}
.btn:active { transform: scale(0.96); }
/* expressive shape-morph: pill → squircle on hover */
.btn:hover { border-radius: var(--r-md); }
.btn:active { border-radius: var(--r-sm); }

.btn--filled   { background: var(--primary); color: var(--on-primary); }
.btn--filled:hover { box-shadow: var(--shadow-1); }
.btn--tonal    { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn--tert     { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.btn--outlined { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1px var(--outline); }
.btn--text     { background: transparent; color: var(--primary); padding-inline: 1.1rem; }
.btn--lg { --_h: 64px; --_r: 32px; font-size: 1.1rem; padding-inline: 2.1rem; }

.btn .arrow { display: inline-flex; align-items: center; transition: transform var(--dur-med) var(--ease-spring); }
.btn .arrow svg { width: 1.15em; height: 1.15em; }
.btn:hover .arrow { transform: translateX(4px); }

/* icon button */
.icon-btn {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--r-full); border: none; cursor: pointer;
  background: var(--surface-c-high); color: var(--on-surface);
  transition: border-radius var(--dur-med) var(--ease-hover),
              transform var(--dur-short) var(--ease-spring-soft);
}
/* rest = 24px (half of 48px) so the circle→squircle morph is gradual, not a late snap */
.icon-btn { border-radius: var(--r-lg); }
.icon-btn:hover { border-radius: var(--r-md); }
.icon-btn:active { transform: scale(0.92); }

/* ============================================================
   CHIPS
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  height: 40px; padding-inline: 1rem;
  border-radius: var(--r-xs);
  background: var(--surface-c); color: var(--on-surface-variant);
  font-weight: 580; font-size: 0.95rem;
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  cursor: default;
  transition: border-radius var(--dur-med) var(--ease-hover),
              background var(--dur-short) var(--ease-standard),
              color var(--dur-short) var(--ease-standard);
}
.chip:hover { border-radius: var(--r-lg); background: var(--surface-c-high); }
.chip--on { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: none; }

/* ============================================================
   TOP APP BAR
   ============================================================ */
.bar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.4);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard);
}
.bar.scrolled { border-bottom-color: var(--outline-variant); background: color-mix(in oklab, var(--surface-c-low) 86%, transparent); }
.bar__in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 0.7rem; font-weight: 720; font-size: 1.2rem; letter-spacing: -0.01em; text-decoration: none; color: var(--on-surface); }
.brand__mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary);
  border-radius: 14px 14px 14px 26px;
  animation: markmorph 7s var(--ease-spring) infinite;
}
@keyframes markmorph {
  0%,100% { border-radius: 16px 16px 16px 26px; }
  33%     { border-radius: 26px 16px 22px 16px; }
  66%     { border-radius: 16px 26px 16px 22px; }
}
/* "Форма" brand: geometric Ф (ellipse + axis), drawn with a stroke.
   Draws itself once on load, holds drawn. */
.brand__mark--phi {
  background: transparent; color: var(--primary);
  width: 38px; height: 38px; border-radius: 0; animation: none;
  transition: transform var(--dur-med) var(--ease-spring);
}
.brand__mark--phi svg { width: 34px; height: 34px; overflow: visible; }
.brand__mark--phi line, .brand__mark--phi ellipse {
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 160; stroke-dashoffset: 160;
  animation: brand-draw 1s var(--ease-standard) .2s forwards;
}
.brand__mark--phi ellipse { animation-delay: .45s; }
@keyframes brand-draw { to { stroke-dashoffset: 0; } }
.brand:hover .brand__mark--phi { transform: rotate(-6deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .brand__mark--phi line, .brand__mark--phi ellipse { stroke-dashoffset: 0; animation: none; }
}
.nav { display: flex; align-items: center; gap: 0.2rem; }
.nav a {
  padding: 0.6rem 1rem; border-radius: var(--r-full);
  color: var(--on-surface-variant); text-decoration: none; font-weight: 580;
  transition: background var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard);
}
.nav a:hover { background: var(--surface-c-high); color: var(--on-surface); }
@media (max-width: 860px) { .nav { display: none; } }

.bar__actions { display: flex; align-items: center; gap: 0.6rem; }
.theme-toggle { background: transparent; color: var(--on-surface-variant); }
.theme-toggle:hover { background: var(--surface-c-high); color: var(--on-surface); }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
/* spin-in on theme change for a little expressive flourish */
.theme-toggle svg { animation: tt-pop var(--dur-med) var(--ease-spring); }
@keyframes tt-pop { from { transform: rotate(-90deg) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding: clamp(3rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); overflow: clip; }
.hero__grid { display: grid; gap: 2.5rem; }
.hero h1 { margin: 1.2rem 0 0; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--primary), var(--tertiary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* stop the last glyph of each line being clipped by the inline box */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-right: 0.12em; margin-right: -0.06em;
}
.hero__lead { max-width: 34ch; margin: 1.6rem 0 2.2rem; font-size: 1.2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3.2rem; }
.stat__n { font-weight: 760; font-stretch: 110%; font-size: clamp(2rem,3vw,2.7rem); line-height: 1; letter-spacing: -0.02em; }
.stat__l { color: var(--on-surface-variant); font-size: 0.95rem; margin-top: 0.35rem; }

/* ===== hero foreground "форма" shape composition ===== */
.hero__art { position: relative; min-height: 520px; }
.shape {
  position: absolute; display: grid; place-items: center;
  box-shadow: var(--shadow-2);
  will-change: border-radius, transform, translate;
}
/* a — large primary, carries the Ф mark */
.shape--a {
  width: 250px; height: 250px; right: 8%; top: 16%;
  background: var(--primary); color: var(--on-primary);
  box-shadow: var(--shadow-3);
  border-radius: 46% 54% 62% 38% / 54% 44% 56% 46%;
  animation: morphA 13s var(--ease-spring-soft) infinite, floatY 9s var(--ease-standard) infinite;
}
.phi-mark { width: 96px; height: 96px; overflow: visible; }
.phi-mark line, .phi-mark ellipse { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .96; }
/* b — tertiary container, top-right */
.shape--b {
  width: 150px; height: 150px; right: 0; top: 0;
  background: var(--tertiary-container);
  border-radius: 58% 42% 38% 62% / 44% 60% 40% 56%;
  animation: morphB 11s var(--ease-spring-soft) infinite, floatY 7.5s var(--ease-standard) infinite reverse;
}
/* c — primary container, bottom-left */
.shape--c {
  width: 178px; height: 178px; left: 0; bottom: 4%;
  background: var(--primary-container);
  border-radius: 40% 60% 56% 44% / 58% 42% 58% 42%;
  animation: morphA 16s var(--ease-spring-soft) infinite reverse;
}
/* d — secondary container, floating circle */
.shape--d {
  width: 86px; height: 86px; right: 4%; bottom: 12%;
  background: var(--secondary-container); border-radius: 50%;
  animation: floatY 6.5s var(--ease-standard) infinite, morphB 9s var(--ease-spring-soft) infinite;
}
/* e — tertiary ring (outline) */
.shape--e {
  width: 116px; height: 116px; left: 10%; top: 0;
  background: transparent; box-shadow: none;
  border: 7px solid var(--tertiary);
  border-radius: 58% 42% 48% 52% / 50% 56% 44% 50%;
  animation: morphB 10s var(--ease-spring-soft) infinite, floatY 8.5s var(--ease-standard) infinite;
}
/* f — small solid tertiary blob accent */
.shape--f {
  width: 58px; height: 58px; left: 2%; top: 42%;
  background: var(--tertiary);
  border-radius: 42% 58% 55% 45% / 55% 45% 60% 40%;
  animation: morphA 8s var(--ease-spring-soft) infinite, floatY 5.5s var(--ease-standard) infinite reverse;
}
@keyframes morphA {
  0%,100% { border-radius: 46% 54% 62% 38% / 54% 44% 56% 46%; transform: rotate(0deg); }
  33%     { border-radius: 62% 38% 42% 58% / 42% 60% 40% 58%; transform: rotate(10deg); }
  66%     { border-radius: 38% 62% 56% 44% / 60% 42% 58% 40%; transform: rotate(-8deg); }
}
@keyframes morphB {
  0%,100% { border-radius: 58% 42% 38% 62% / 44% 60% 40% 56%; transform: scale(1) rotate(0deg); }
  50%     { border-radius: 40% 60% 64% 36% / 58% 40% 60% 42%; transform: scale(1.07) rotate(12deg); }
}
@keyframes floatY { 0%,100% { translate: 0 0; } 50% { translate: 0 -18px; } }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}
@media (max-width: 959px) { .hero__art { min-height: 420px; transform: scale(.86); transform-origin: top center; } }
@media (max-width: 720px) { .hero__art { display: none; } }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section__head { max-width: 56ch; margin-bottom: 3rem; }
.section__head .headline { margin: .8rem 0 .9rem; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(12, 1fr); }
.svc {
  grid-column: span 4; padding: 2rem; border-radius: var(--r-xl);
  background: var(--surface-c-low); color: var(--on-surface);
  box-shadow: var(--lift-line), var(--lift-rest);
  transition: border-radius var(--dur-hover) var(--ease-hover),
              transform var(--dur-hover) var(--ease-hover),
              background var(--dur-med) var(--ease-standard),
              box-shadow var(--dur-hover) var(--ease-standard);
}
.svc:hover { transform: translateY(-6px); border-radius: var(--r-2xl); box-shadow: var(--lift-line), var(--lift-hover); }
.svc__ico {
  width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 1.3rem;
  border-radius: 20px 20px 20px 30px; background: var(--primary-container); color: var(--on-primary-container);
  transition: border-radius var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover);
}
.svc:hover .svc__ico { border-radius: 30px 20px 26px 20px; transform: rotate(-6deg); }
.svc h3 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 660; }
.svc p { margin: 0; color: var(--on-surface-variant); line-height: 1.5; }
.svc--wide { grid-column: span 8; background: var(--primary); color: var(--on-primary); box-shadow: var(--lift-line-0), var(--lift-rest); }
.svc--wide .svc__ico { background: var(--on-primary); color: var(--primary); }
.svc--wide p { color: color-mix(in oklab, var(--on-primary) 86%, transparent); }
.svc--tert { background: var(--tertiary-container); color: var(--on-tertiary-container); box-shadow: var(--lift-line-0), var(--lift-rest); }
.svc--tert .svc__ico { background: var(--tertiary); color: var(--on-tertiary); }
.svc--tert p { color: color-mix(in oklab, var(--on-tertiary-container) 82%, transparent); }
.svc--half { grid-column: span 6; }
@media (max-width: 900px) { .svc, .svc--wide, .svc--tert, .svc--half { grid-column: span 12; } }

/* ============================================================
   WORK / CASES
   ============================================================ */
.work-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); }
.case {
  border-radius: var(--r-2xl); overflow: hidden; background: var(--surface-c-low);
  box-shadow: var(--lift-line), var(--lift-rest);
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-standard);
}
.case:hover { transform: translateY(-6px); box-shadow: var(--lift-line), var(--lift-hover); }
.case__media { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--primary) 16%, var(--surface-c)) 0 14px,
      var(--surface-c) 14px 28px);
  display: grid; place-items: center;
}
.ph span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; color: var(--on-surface-variant); background: color-mix(in oklab,var(--surface) 70%, transparent); padding: .35rem .7rem; border-radius: var(--r-full); }
.case__media .ph { transition: transform var(--dur-long) var(--ease-hover); }
.case:hover .case__media .ph { transform: scale(1.05); }
.case__body { padding: 1.6rem 1.7rem 1.9rem; }
.case__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.case h3 { margin: 0; font-size: 1.45rem; font-weight: 660; }
.case__tag { font-size: .82rem; font-weight: 620; color: var(--primary); }
.case p { margin: .6rem 0 1.1rem; color: var(--on-surface-variant); }
.case__metrics { display: flex; gap: 1.6rem; }
.case__metrics b { display:block; font-weight: 740; font-size: 1.35rem; letter-spacing:-.01em; }
.case__metrics small { color: var(--on-surface-variant); }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
.quote {
  padding: 2rem; border-radius: var(--r-xl);
  background: var(--surface-c-low); box-shadow: inset 0 0 0 1px var(--outline-variant);
  transition: border-radius var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover);
}
.quote:hover { border-radius: var(--r-2xl); transform: translateY(-4px); }
.quote--hl { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: none; }
.quote p { font-size: 1.12rem; line-height: 1.5; margin: 0 0 1.6rem; font-weight: 500; }
.who { display: flex; align-items: center; gap: .8rem; }
.who__av { width: 46px; height: 46px; border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); display:grid; place-items:center; font-weight: 700; }
.who b { display:block; font-weight: 640; }
.who small { color: var(--on-surface-variant); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ============================================================
   PRICING
   ============================================================ */
.price-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
.price {
  display: flex; flex-direction: column; padding: 2.2rem 2rem;
  border-radius: var(--r-2xl); background: var(--surface-c-low);
  box-shadow: var(--lift-line), var(--lift-rest);
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-standard);
}
.price:hover { transform: translateY(-6px); box-shadow: var(--lift-line), var(--lift-hover); }
.price--feat { background: var(--primary); color: var(--on-primary); box-shadow: var(--lift-line-0), var(--lift-rest); transform: translateY(-10px); }
.price--feat:hover { transform: translateY(-16px); box-shadow: var(--lift-line-0), var(--lift-hover); }
.price__badge { align-self: flex-start; font-size:.78rem; font-weight:660; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .8rem; border-radius: var(--r-full); background: var(--on-primary); color: var(--primary); margin-bottom: 1rem; }
.price h3 { margin: 0; font-size: 1.4rem; font-weight: 660; }
.price__sub { color: var(--on-surface-variant); margin: .3rem 0 1.4rem; }
.price--feat .price__sub { color: color-mix(in oklab, var(--on-primary) 80%, transparent); }
.price__amt { font-weight: 770; font-stretch: 110%; font-size: clamp(2.1rem, 7vw, 2.8rem); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.price__amt small { font-size: 1rem; font-weight: 560; letter-spacing: 0; }
.price ul { list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: .75rem; }
.price li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.4; }
.price li svg { flex: none; margin-top: 2px; }
.price .btn { margin-top: auto; justify-content: center; }
.price--feat .btn--filled { background: var(--on-primary); color: var(--primary); }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } .price--feat { transform: none; } }
@media (max-width: 560px) {
  .price { padding: 1.9rem 1.5rem; }
  .price__amt { font-stretch: 100%; letter-spacing: -.03em; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { display: grid; gap: 2.5rem; }
@media (min-width: 920px) { .contact { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.contact__card {
  padding: clamp(2rem, 4vw, 3rem); border-radius: var(--r-2xl);
  background: var(--surface-c); 
}
.field { position: relative; margin-bottom: 1.1rem; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--on-surface);
  background: var(--surface-c-lowest); border: 1px solid var(--outline);
  border-radius: var(--r-md); padding: 1.4rem 1rem 0.6rem;
  transition: border-color var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard);
  outline: none; resize: none;
}
.field textarea { min-height: 120px; padding-top: 1.6rem; overflow: hidden; }
.field label {
  position: absolute; left: 1rem; top: 1.05rem; pointer-events: none;
  color: var(--on-surface-variant); font-size: 1rem;
  transition: all var(--dur-short) var(--ease-emph-decel);
}
.field input:focus, .field textarea:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label {
  top: 0.45rem; font-size: 0.74rem; font-weight: 600; color: var(--primary);
}
.contact__aside .title { margin-bottom: .8rem; }
.contact__list { display: grid; gap: 1rem; margin-top: 1.8rem; }
.contact__row { display: flex; gap: .9rem; align-items: center; }
.contact__row .icon-btn { background: var(--primary-container); color: var(--on-primary-container); pointer-events: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 4rem 0 3rem; border-top: 1px solid var(--outline-variant); margin-top: 2rem; }
.footer__in { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
.footer small { color: var(--on-surface-variant); }
.footer .nav { display: flex; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Entrance uses `animation` + the independent `translate`/`scale` properties
   (NOT the `transition`/`transform` the cards rely on for hover), so the reveal
   no longer overrides each card's own hover transition. */
.reveal { opacity: 0; }
.reveal.in {
  opacity: 1;
  animation: reveal-in var(--dur-long) var(--ease-spring-soft) backwards;
}
@keyframes reveal-in {
  from { opacity: 0; translate: 0 34px; scale: 0.97; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}
.reveal.in.d1 { animation-delay: 70ms; }
.reveal.in.d2 { animation-delay: 140ms; }
.reveal.in.d3 { animation-delay: 210ms; }
.reveal.in.d4 { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; }
}

/* divider band */
.band { background: var(--surface-c-low); }