/* Ava Solutions — yellow/black editorial (v1 palette restored) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@600;700;800&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Playfair+Display:ital,wght@1,400;1,600&family=Inter:wght@400;500&display=swap');

:root{
  --yellow:#FFE600;
  --yellow-deep:#F5CC00;
  --black:#0A0A0A;
  --ink:#111111;
  --cream:#F5F1E8;
  --cream-warm:#EFE8D6;
  --muted:rgba(10,10,10,.58);
  --muted-cream:rgba(245,241,232,.58);
  --line:rgba(10,10,10,.18);
  --line-cream:rgba(245,241,232,.22);

  --f-display:'Space Grotesk', system-ui, sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;
  --f-body:'Inter', system-ui, sans-serif;

  --max:1440px;
  --pad:80px;
}
@media (max-width:900px){ :root{ --pad:24px; } }
@media (max-width:560px){ :root{ --pad:20px; } }

/* Cyrillic display pairing — Space Grotesk & Instrument Serif have no Cyrillic
   glyphs, so RU was silently falling back to the system font. Swap to
   Cyrillic-capable faces for lang=ru only; EN keeps its original pairing. */
html[lang="ru"]{
  --f-display:'Unbounded', system-ui, sans-serif;
  --f-serif:'Playfair Display', Georgia, serif;
}
html[lang="ru"] .display{letter-spacing:-0.025em}
/* RU display font (Unbounded) is wider & heavier than the EN face (Space
   Grotesk), so the same ramp overflows — РАССКАЖИ ran off-screen. Scale the
   whole display ramp down for lang=ru; biggest cut on xl/lg which broke worst. */
html[lang="ru"] .display-xl{font-size:clamp(40px,9vw,150px)}
html[lang="ru"] .display-lg{font-size:clamp(36px,7.2vw,118px)}
html[lang="ru"] .display-md{font-size:clamp(30px,4.6vw,76px)}
html[lang="ru"] .display-sm{font-size:clamp(22px,2.9vw,46px)}
html[lang="ru"] .display-hero{font-size:clamp(22px,3.2vw,52px)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--yellow);color:var(--black);font-family:var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html,body{overflow-x:hidden}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Typography */
.display{font-family:var(--f-display);font-weight:700;letter-spacing:-0.035em;line-height:.88;text-transform:uppercase}
.display-xl{font-size:clamp(54px,13vw,220px)}
.display-lg{font-size:clamp(44px,9.2vw,156px)}
.display-md{font-size:clamp(34px,5.4vw,92px)}
.display-sm{font-size:clamp(24px,3.2vw,54px)}
.display-hero{font-size:clamp(24px,3.6vw,60px);line-height:.88}
.serif{font-family:var(--f-serif);font-weight:400}
.ital{font-family:var(--f-serif);font-style:italic;text-transform:none;font-weight:400}

.mono, .h-eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.h-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.body-lg{font-family:var(--f-body);font-size:clamp(16px,1.3vw,21px);line-height:1.55;letter-spacing:-.005em}
.body{font-family:var(--f-body);font-size:15px;line-height:1.6}
.text-wrap-pretty{text-wrap:pretty}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative;padding:120px 0;overflow:hidden}
.cream-on-black{background:var(--black);color:var(--cream)}
.black-on-cream{background:var(--cream);color:var(--black)}

/* Ticker */
.ticker{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--yellow);transition:background .35s, color .35s, border-color .35s;border-bottom:1px solid transparent}
.ticker.scrolled{background:rgba(10,10,10,.92);backdrop-filter:blur(14px);color:var(--cream);border-color:rgba(245,241,232,.14)}
.ticker.scrolled svg[aria-label="Ava Solutions"]{color:var(--yellow)}
.ticker-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:14px var(--pad);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ticker-marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.ticker-track{display:inline-flex;gap:56px;white-space:nowrap;animation:slide 48s linear infinite}
.ticker-track span{opacity:.75}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-nav{display:flex;gap:24px;align-items:center}
.ticker-nav a{opacity:.7;transition:opacity .2s}
.ticker-nav a:hover, .ticker-nav a.active{opacity:1}

@media (max-width:700px){
  .ticker-inner{gap:14px;padding:10px var(--pad);font-size:10px;letter-spacing:.1em}
  .ticker-marquee{mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
  .ticker-track{gap:36px;animation-duration:36s}
  .ticker-nav{gap:10px}
  .ticker-nav a{font-size:10px}
}
@media (max-width:600px){
  .ticker-nav{display:none}
}

/* Logo */
.logo-mark{display:inline-flex;position:relative;vertical-align:middle}
.logo-wordmark{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.02em;text-transform:uppercase}

/* Scroll-linked reveal */
.reveal-scroll{will-change:transform,opacity}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 26px;border-radius:999px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:transform .25s, background .25s, color .25s}
.btn--dark{background:var(--black);color:var(--yellow)}
.btn--dark:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--black);border:1px solid var(--black)}
.btn--ghost:hover{background:var(--black);color:var(--yellow)}
.btn--yellow{background:var(--yellow);color:var(--black)}
@media (max-width:560px){
  .btn{padding:14px 20px;font-size:10px;letter-spacing:.14em;gap:10px}
}

/* Spheres */
.sphere{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.sphere--yellow{background:radial-gradient(circle at 32% 28%, #FFF8A0 0%, #FFE600 22%, #E5CF00 58%, #8A7B00 96%);box-shadow:inset -18px -26px 50px rgba(0,0,0,.35), inset 10px 14px 28px rgba(255,255,255,.35), 0 30px 60px rgba(0,0,0,.28)}
.sphere--black{background:radial-gradient(circle at 32% 28%, #5a5a5a 0%, #1a1a1a 30%, #000 70%);box-shadow:inset -14px -22px 44px rgba(0,0,0,.8), inset 8px 12px 22px rgba(255,255,255,.12), 0 28px 56px rgba(0,0,0,.5)}
.sphere .marble{position:absolute;border-radius:50%}
.sphere--yellow .marble{background:radial-gradient(circle at 32% 28%, #4a4a4a 0%, #0a0a0a 60%);box-shadow:inset -6px -8px 14px rgba(0,0,0,.8)}
.sphere--black .marble{background:radial-gradient(circle at 32% 28%, #FFF5A0 0%, #FFE600 55%, #C9B400 100%);box-shadow:inset -5px -7px 12px rgba(0,0,0,.45)}

.page-chapter{padding:40px 0 20px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;border-top:1px solid currentColor;opacity:.85;gap:24px;flex-wrap:wrap}
@media (max-width:560px){ .page-chapter{font-size:10px;letter-spacing:.14em;padding:28px 0 14px;gap:10px} }

.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:32px}
@media (max-width:900px){ .grid-12{grid-template-columns:repeat(4,1fr);gap:20px} section{padding:80px 0} }
@media (max-width:560px){ section{padding:64px 0} }

.strike{position:relative;display:inline-block}
.strike::after{content:"";position:absolute;left:-4%;right:-4%;top:54%;height:8%;background:currentColor}

/* ============================================================
   Responsive layout helpers (use instead of inline grids)
   ============================================================ */

/* Hero meta row */
.p1-meta{display:flex;justify-content:space-between;gap:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;padding-top:60px;flex-wrap:wrap}
@media (max-width:700px){
  /* Compact 2-line meta pinned tight under the header (boutique label, then
     cities). Frees vertical room so the Spline headline sits clear below it. */
  .p1-meta{flex-direction:column;align-items:flex-start;row-gap:5px;padding-top:8px;font-size:10px;letter-spacing:.1em}
}

@media (max-width:700px){
  /* Mobile hero keeps the desktop overlay composition (the sphere reads as the
     "A" in "WITH _ solution."). The whole scene is nudged down a touch and the
     meta row is compacted up top, so the headline no longer collides with it. */
  .p1-section{min-height:100svh!important;padding-top:76px!important;padding-bottom:34px!important;justify-content:flex-start!important}
  /* Keep the Spline headline/spheres from overlapping the lower hero copy on
     narrow screens: reserve a larger vertical runway before the text starts. */
  .p1-section .p1-spacer{flex:0 0 40vh!important;min-height:40vh!important}
  .p1-spline{top:0!important;bottom:auto!important;height:44vh!important;transform:translateY(7vh)!important;transform-origin:center top;pointer-events:none}
  #root, main{width:100%;max-width:100%;overflow-x:hidden}
  .wrap{width:100%;max-width:100%}
  .p1-section .p1-copy{padding-bottom:6vh;width:100%;max-width:100%;overflow:visible}
  .p1-section .display-hero{width:min(100%,calc(100vw - 48px));max-width:calc(100vw - 48px);overflow-wrap:anywhere}
  .p1-section .p1-lede > *{min-width:0;max-width:calc(100vw - 48px)}
  .p1-section .body-lg{width:min(100%,calc(100vw - 48px));max-width:calc(100vw - 48px)!important;overflow-wrap:anywhere}
  .p1-section .p1-lede > div:last-child{width:min(100%,calc(100vw - 48px));max-width:calc(100vw - 48px);align-items:stretch!important}
  .p1-section .btn{width:min(100%,calc(100vw - 48px));max-width:calc(100vw - 48px);white-space:normal;line-height:1.25;text-align:left;justify-content:space-between}
  html[lang="ru"] .p1-section{padding-top:64px!important;padding-bottom:26px!important}
  html[lang="ru"] .p1-section .p1-copy{padding-bottom:4vh}
  html[lang="ru"] .p1-section .display-hero{font-size:clamp(19px,5.6vw,24px);line-height:.92;letter-spacing:-.055em;margin-bottom:18px!important}
  html[lang="ru"] .p1-section .body-lg{font-size:14px;line-height:1.4;letter-spacing:-.01em}
  html[lang="ru"] .p1-section .p1-lede{gap:20px}
}
@media (max-width:380px){
  html[lang="ru"] .p1-section .display-hero{font-size:18px}
  html[lang="ru"] .p1-section .body-lg{font-size:13.5px;line-height:1.36}
  html[lang="ru"] .p1-section .p1-lede{gap:16px}
}

.p1-hero-wrap{flex:1;display:flex;align-items:center;padding:80px var(--pad)}
@media (max-width:700px){ .p1-hero-wrap{padding:48px var(--pad) 32px} }

.p1-lede{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
@media (max-width:900px){ .p1-lede{grid-template-columns:1fr;gap:32px;align-items:start} }
.p1-cta-stack{display:flex;flex-direction:column;align-items:flex-start;max-width:640px}

/* Hero microcopy — secondary reassurance line under the CTA block */
.p1-microcopy{margin-top:clamp(14px,1.6vw,20px);max-width:640px;font-family:var(--f-body);font-size:clamp(13px,1vw,14px);line-height:1.5;letter-spacing:-.005em;opacity:.62}
@media (max-width:700px){ .p1-section .p1-microcopy{max-width:calc(100vw - 48px);font-size:12.5px;line-height:1.45;opacity:.6} }

/* 3-up pillars — used by section 02 (Foundation) */
.hl-yellow{background:var(--yellow);padding:.02em .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.p2-pillars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px;margin-top:96px}
@media (max-width:900px){ .p2-pillars{grid-template-columns:1fr;gap:40px;margin-top:72px} }

/* Section 07 (Work): before/after example (SoloTrack) */
.p3-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:stretch;margin-top:60px}
.p3-ba .p3-arrow{display:flex;align-items:center;justify-content:center;font-size:72px;font-family:var(--f-display);font-weight:700}
@media (max-width:900px){
  .p3-ba{grid-template-columns:1fr;gap:20px}
  .p3-ba .p3-arrow{transform:rotate(90deg);font-size:48px}
}
.p3-card{border:1px solid var(--black);border-radius:32px;padding:36px;min-height:360px;position:relative;overflow:hidden}
.p3-card--after{background:var(--black);color:var(--yellow)}
@media (max-width:560px){ .p3-card{padding:24px;min-height:300px;border-radius:24px} }
.chaos-files{position:absolute;inset:110px 24px 24px;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.chaos-chip{font-family:var(--f-mono);font-size:11px;line-height:1;border:1px solid var(--black);padding:6px 10px;border-radius:6px;background:var(--yellow);opacity:0;will-change:transform,opacity;user-select:none;cursor:default}
@media (max-width:560px){ .chaos-files{inset:96px 20px 20px} }

/* Page 4: principle rows + stack */
.p4-row{display:grid;grid-template-columns:100px 1fr 1.2fr;gap:40px;align-items:start;padding:40px 0;border-top:1px solid var(--line)}
.p4-row:last-child{border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .p4-row{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .p4-row .p4-desc{max-width:none}
}

.p4-stack-grid{margin-top:100px;display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start}
@media (max-width:900px){ .p4-stack-grid{grid-template-columns:1fr;gap:28px;margin-top:64px} }

/* Page 5: contact + form + footer */
.p5-contact{margin-top:100px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media (max-width:900px){ .p5-contact{grid-template-columns:1fr;gap:48px;margin-top:64px} }

.p5-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){ .p5-form-row{grid-template-columns:1fr} }

.p5-actions{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:560px){ .p5-actions{gap:12px;margin-top:36px} .p5-actions .btn{width:100%;justify-content:space-between} }

/* Contact — reassurance line + risk-removal row (intermediate CTAs) */
.p5-reassure{margin-top:20px;opacity:.65;color:var(--cream)}
.p5-risk{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.p5-risk__item{opacity:.6;color:var(--cream);position:relative;padding-left:18px}
.p5-risk__item::before{content:'·';position:absolute;left:4px;opacity:.8}

/* Mid-page CTA band (yellow) — sits between Cases (black) and Products (cream) */
.midcta{background:var(--yellow);color:var(--black);padding:clamp(64px,9vw,110px) 0}
.midcta__inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:760px}
.midcta__title{max-width:18ch}
.midcta__sub{opacity:.7;max-width:60ch}
.midcta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}
.midcta__micro{opacity:.55;color:var(--black);text-decoration:none}
@media (max-width:560px){ .midcta__actions .btn{width:100%;justify-content:space-between} }

/* Products teaser — two-button CTA row */
.prod-teaser-ctarow{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:48px}

/* Ownership — inline CTA on dark section */
.own-cta{margin-top:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.own-cta__micro{opacity:.55;color:var(--cream)}

.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;padding-top:60px;border-top:1px solid var(--line-cream)}
@media (max-width:1100px){ .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px} }
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr;gap:28px} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;gap:28px;padding-top:40px} }
.footer-grid a:hover{opacity:.7}

/* Floating public-agent entrypoint */
.floating-chat-cta{
  position:fixed;
  right:clamp(16px,2.4vw,34px);
  bottom:clamp(16px,2.4vw,34px);
  z-index:70;
  width:72px;
  height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:0;
  border:1px solid rgba(10,10,10,.88);
  border-radius:50%;
  background:var(--yellow);
  color:var(--black);
  box-shadow:0 18px 44px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.3);
  font-family:var(--f-mono);
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
/* Little Toros ears — two triangles peeking above the circle */
.floating-chat-cta::before,
.floating-chat-cta::after{
  content:"";
  position:absolute;
  top:-7px;
  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:13px solid var(--yellow);
  filter:drop-shadow(0 -1px 0 rgba(10,10,10,.88));
  transform-origin:50% 100%;
}
.floating-chat-cta::before{left:8px;transform:rotate(-28deg)}
.floating-chat-cta::after{right:8px;transform:rotate(28deg)}
.floating-chat-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 54px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.42);
}
.floating-chat-cta__eyebrow{
  font-size:13px;
  letter-spacing:.08em;
  font-weight:700;
}
.floating-chat-cta__label{
  font-size:13px;
  letter-spacing:.08em;
  font-weight:700;
}
@media (max-width:560px){
  .floating-chat-cta{
    left:auto;
    right:16px;
    bottom:16px;
    width:64px;
    height:64px;
  }
  .floating-chat-cta__eyebrow,
  .floating-chat-cta__label{font-size:11px;letter-spacing:.04em}
}

/* Web-chat drawer: on-site context + Telegram handoff */
.web-chat{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:0;
  transition:opacity .24s ease;
}
.web-chat.is-open{
  pointer-events:auto;
  opacity:1;
}
.web-chat__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,.46);
  cursor:pointer;
}
.web-chat__panel{
  position:absolute;
  right:clamp(14px,2.6vw,38px);
  bottom:clamp(14px,2.6vw,38px);
  width:min(440px,calc(100vw - 28px));
  height:min(760px,calc(100vh - 28px));
  max-height:calc(100vh - 28px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,248,220,.24);
  border-radius:30px;
  background:#101010;
  color:var(--cream);
  box-shadow:0 34px 90px rgba(0,0,0,.48);
  transform:translateY(18px) scale(.98);
  transition:transform .24s ease;
}
.web-chat.is-open .web-chat__panel{transform:translateY(0) scale(1)}
.web-chat__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 26px 16px;
  border-bottom:1px solid rgba(255,248,220,.12);
}
.web-chat__heading{
  display:flex;
  align-items:center;
  gap:14px;
}
.web-chat__avatar{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  background:#000;
}
.web-chat__eyebrow{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:10px;
}
.web-chat__header h2{
  margin:0;
  font-size:clamp(21px,2.9vw,30px);
  line-height:.95;
  letter-spacing:-.04em;
}
.web-chat__close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:0 0 auto;
  padding:0;
  border:1px solid rgba(255,248,220,.22);
  border-radius:999px;
  background:transparent;
  color:var(--cream);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.web-chat__close:hover{border-color:rgba(255,248,220,.5);background:rgba(255,248,220,.08)}
.web-chat__body{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
  overflow-y:auto;
  padding:22px 22px 26px 26px;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(244,255,0,.38) transparent;
}
.web-chat__body::-webkit-scrollbar{width:4px}
.web-chat__body::-webkit-scrollbar-track{background:transparent;margin:16px 0}
.web-chat__body::-webkit-scrollbar-thumb{background:rgba(244,255,0,.42);border-radius:999px}
.web-chat__body::-webkit-scrollbar-thumb:hover{background:rgba(244,255,0,.62)}
.web-chat__message{
  border-radius:18px;
  padding:15px 16px;
  font-size:14px;
  line-height:1.45;
  white-space:pre-wrap;
}
.web-chat__message--agent{background:rgba(255,248,220,.1);border:1px solid rgba(255,248,220,.12)}
.web-chat__message a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.web-chat__message a:hover{color:#fffde1}
.web-chat__message--note{background:rgba(244,255,0,.12);border:1px solid rgba(244,255,0,.22);color:#fffde1}
.web-chat__quick-title{
  margin-top:8px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.62;
}
.web-chat__quick-list{display:flex;flex-wrap:wrap;gap:8px}
.web-chat__chip{
  display:inline-flex;
  border:1px solid rgba(255,248,220,.16);
  border-radius:999px;
  padding:9px 11px;
  font-size:12px;
  color:rgba(255,248,220,.86);
}
.web-chat__lead-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:4px;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(255,248,220,.08);
  font-family:var(--f-mono);
  font-size:11px;
}
.web-chat__lead-card span{opacity:.62;text-transform:uppercase;letter-spacing:.12em}
.web-chat__lead-card strong{font-weight:600;color:var(--yellow);word-break:break-all;text-align:right}
.web-chat__telegram{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  margin-top:4px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--black);
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.web-chat__privacy{
  margin:0;
  color:rgba(255,248,220,.58);
  font-size:11px;
  line-height:1.45;
}
@media (max-width:560px){
  .web-chat__panel{left:10px;right:10px;bottom:10px;width:auto;max-height:calc(100vh - 20px);border-radius:24px}
  .web-chat__header{padding:22px 20px 16px}
  .web-chat__body{padding:18px 16px 22px 20px}
  .web-chat__header h2{font-size:24px}
}

/* Embedded AI chat: live message composer */
.web-chat__messages{display:flex;flex-direction:column;gap:10px}
.web-chat__message--user{
  align-self:flex-end;
  max-width:88%;
  background:var(--yellow);
  color:var(--black);
  border:1px solid rgba(244,255,0,.45);
}
.web-chat__message--agent{align-self:flex-start;max-width:92%}
.web-chat__message--loading{opacity:.72;font-style:italic}
.web-chat__typing{display:inline-flex;white-space:pre}
.web-chat__typing-char{
  display:inline-block;
  animation:typingWave 1.1s ease-in-out infinite;
}
@keyframes typingWave{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-.32em)}
}
@media (prefers-reduced-motion:reduce){
  .web-chat__typing-char{animation:none}
}
.web-chat__chip{
  appearance:none;
  background:transparent;
  cursor:pointer;
  text-align:left;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.web-chat__chip:hover:not(:disabled){border-color:rgba(244,255,0,.52);background:rgba(244,255,0,.08);color:var(--yellow)}
.web-chat__chip:disabled{opacity:.5;cursor:not-allowed}
.web-chat__form{display:flex;gap:10px;align-items:flex-end;margin-top:2px}
.web-chat__input{
  flex:1;
  min-height:74px;
  max-height:150px;
  resize:vertical;
  border:1px solid rgba(255,248,220,.18);
  border-radius:18px;
  background:rgba(255,248,220,.08);
  color:var(--cream);
  padding:13px 14px;
  font:14px/1.4 var(--f-sans);
  outline:none;
}
.web-chat__input::placeholder{color:rgba(255,248,220,.42)}
.web-chat__input:focus{border-color:rgba(244,255,0,.55);box-shadow:0 0 0 3px rgba(244,255,0,.1)}
.web-chat__send{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:48px;
  height:48px;
  min-height:48px;
  border:0;
  border-radius:999px;
  background:var(--yellow);
  color:var(--black);
  padding:0;
  cursor:pointer;
  transition:transform .15s ease, opacity .2s ease, filter .2s ease;
}
.web-chat__send:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.web-chat__send:disabled{opacity:.42;cursor:not-allowed;transform:none}
.web-chat__send-icon{font-size:21px;line-height:1;font-weight:700}
@media (max-width:560px){
  .web-chat__form{flex-direction:column;align-items:stretch}
  .web-chat__send{width:100%}
}


/* Messenger UX polish: fixed composer, scrollable history, compact context controls */
.web-chat__body{
  flex:1 1 auto;
  overflow:hidden;
  padding:14px 8px 10px 26px;
}
.web-chat__starters{
  flex:0 0 auto;
  padding:0 18px 12px 0;
}
.web-chat__messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(244,255,0,.38) transparent;
}
.web-chat__messages::-webkit-scrollbar{width:6px}
.web-chat__messages::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.web-chat__messages::-webkit-scrollbar-thumb{background:rgba(244,255,0,.42);border-radius:999px}
.web-chat__quick-title{margin-top:0}
.web-chat__footer{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 22px 18px 26px;
  border-top:1px solid rgba(255,248,220,.12);
  background:linear-gradient(180deg, rgba(16,16,16,.92), #101010 34%);
}
.web-chat__form{align-items:center}
.web-chat__input{
  min-height:48px;
  height:auto;
  max-height:132px;
  padding:13px 18px;
  border-radius:24px;
  resize:none;
  overflow-y:auto;
  scrollbar-width:none;
}
.web-chat__input::-webkit-scrollbar{width:0;height:0;display:none}
.web-chat__footer-actions{display:flex;align-items:center;gap:10px;justify-content:space-between}
.web-chat__telegram{
  flex:0 0 auto;
  min-height:34px;
  margin-top:0;
  padding:0 13px;
  border:1px solid rgba(244,255,0,.42);
  background:rgba(244,255,0,.1);
  color:var(--yellow);
  font-size:10px;
}
.web-chat__privacy{
  margin:0;
  color:rgba(255,248,220,.6);
  font-size:11px;
  line-height:1.45;
}
.web-chat__privacy summary{
  cursor:pointer;
  list-style:none;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,248,220,.7);
}
.web-chat__privacy summary::-webkit-details-marker{display:none}
.web-chat__privacy[open]{max-width:100%}
.web-chat__privacy p{margin:8px 0 0}
@media (max-width:560px){
  .web-chat__panel{top:10px}
  .web-chat__header{padding:18px 18px 12px}
  .web-chat__header h2{font-size:21px}
  .web-chat__avatar{width:46px;height:46px}
  .web-chat__body{padding:14px 12px 8px 16px}
  .web-chat__footer{padding:10px 12px 14px 16px}
  .web-chat__form{flex-direction:row;align-items:center}
  .web-chat__send{width:48px;padding:0}
  .web-chat__footer-actions{align-items:flex-start;gap:8px}
  .web-chat__telegram{white-space:nowrap}
}
@media (max-width:390px){
  .web-chat__footer-actions{flex-direction:column}
}

/* ===== Products: home-page teaser band ===================================== */
.prod-teaser-link{display:block;color:inherit;text-decoration:none}
.prod-teaser-cta:hover{transform:translateX(6px)}
.prod-teaser-row{display:grid;grid-template-columns:64px 1fr auto;gap:32px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;transition:padding-left .3s}
.prod-teaser-list .prod-teaser-row:last-child{border-bottom:1px solid var(--line)}
.prod-teaser-row:hover{padding-left:8px}
.prod-teaser-num{opacity:.5}
.prod-teaser-tags{opacity:.5;text-align:right;letter-spacing:.04em;transition:opacity .3s}
.prod-teaser-row:hover .prod-teaser-tags{opacity:.85}
.prod-teaser-cta{display:inline-block;color:var(--black);text-decoration:none;transition:transform .3s}
@media (max-width:700px){
  .prod-teaser-row{grid-template-columns:44px 1fr;gap:6px 14px;padding:20px 0}
  .prod-teaser-tags{grid-column:2;text-align:left;margin-top:4px}
}

/* ===== Products page: rows + scaled live preview ========================== */
.prod-rows{padding:40px 0 20px}
.prod-row{padding:64px 0}
.prod-row + .prod-row{border-top:1px solid var(--line)}
.prod-row-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
/* min-width:0 lets the 1fr tracks shrink below the 1440px live-preview scaler's
   min-content, otherwise the demo column blows the grid past the viewport. */
.prod-row-grid > *{min-width:0}
.prod-row--reversed .prod-row-grid{direction:rtl}
.prod-row--reversed .prod-copy,
.prod-row--reversed .prod-media-col{direction:ltr}
.prod-copy-num{opacity:.5}
.prod-copy-bullets{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.prod-copy-bullets li{position:relative;padding-left:16px;opacity:.7;letter-spacing:.12em}
.prod-copy-bullets li::before{content:'';position:absolute;left:0;top:5px;width:6px;height:6px;background:var(--black);border-radius:50%}

/* Framed media — scaled live wide-format preview on every viewport */
.prod-media{display:flex;flex-direction:column;gap:14px}
.prod-tabs{display:flex;flex-wrap:wrap;gap:8px}
.prod-tab{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--black);opacity:.7;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.prod-tab:hover{opacity:1}
.prod-tab.is-active{background:var(--black);color:var(--yellow);opacity:1;border-color:var(--black)}
.prod-frame{position:relative;width:100%;aspect-ratio:16 / 10;border-radius:18px;overflow:hidden;background:var(--cream-warm);border:1px solid var(--line);box-shadow:0 24px 60px -32px rgba(10,10,10,.45)}
.prod-frame--live{aspect-ratio:16 / 10;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.prod-frame--live:hover{border-color:rgba(10,10,10,.42);box-shadow:0 28px 68px -34px rgba(10,10,10,.55);transform:translateY(-1px)}
.prod-frame--live:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.prod-frame-scale{transform-origin:top left;pointer-events:none}
.prod-frame-scale iframe{display:block;background:#fff}
.prod-frame-shimmer{position:absolute;inset:0;background:linear-gradient(100deg,var(--cream-warm) 30%,rgba(255,255,255,.6) 50%,var(--cream-warm) 70%);background-size:200% 100%;animation:prodShimmer 1.4s linear infinite}
@keyframes prodShimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Drawn concept renders — coming-soon products show illustrative SVGs (via <img>,
   so animated SVGs still play) instead of a scaled live iframe. */
.prod-frame--render{display:block;cursor:pointer;background:#181818;transition:border-color .2s,box-shadow .2s,transform .2s}
.prod-frame--render img{width:100%;height:100%;display:block;object-fit:cover}
.prod-frame--render:hover{border-color:rgba(10,10,10,.42);box-shadow:0 28px 68px -34px rgba(10,10,10,.55);transform:translateY(-1px)}
.prod-frame--render:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.prod-render-link{display:inline-block;color:var(--black);background-image:linear-gradient(var(--yellow),var(--yellow));background-size:100% 6px;background-position:0 100%;background-repeat:no-repeat;text-decoration:none;transition:transform .2s}
.prod-render-link:hover{transform:translateX(3px)}
.prod-render-note{max-width:580px;letter-spacing:.04em}

@media (max-width:900px){
  .prod-row{padding:48px 0}
  .prod-row-grid{grid-template-columns:1fr;gap:32px}
  .prod-row--reversed .prod-row-grid{direction:ltr}
}

/* ===== Products page: fullscreen demo modal ============================== */
.prod-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.prod-modal__backdrop{position:absolute;inset:0;border:none;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);cursor:pointer}
.prod-modal__panel{position:relative;width:100%;height:100%;max-width:1600px;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#080808;box-shadow:0 40px 120px -40px rgba(0,0,0,.7)}
.prod-modal__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--black);color:var(--cream)}
.prod-modal__close{width:34px;height:34px;border:none;border-radius:50%;background:rgba(245,241,232,.12);color:var(--cream);font-size:22px;line-height:1;cursor:pointer;transition:background .2s}
.prod-modal__close:hover{background:rgba(245,241,232,.24)}
.prod-modal__viewport{flex:1;min-height:0;overflow:hidden;background:#080808;display:flex;align-items:center;justify-content:center}
.prod-modal__scale{width:1440px;height:900px;flex:0 0 auto;transform-origin:center center}
.prod-modal__frame{display:block;width:1440px;height:900px;border:none;background:#fff}

/* ===== Products: calm overview catalogue ================================== */
/* Cream base, brand yellow used sparingly (one hero accent, card underline,
   hover border) — colourful but quieter than the landing page. */
.prod-overview{background:var(--cream);color:var(--black)}
.prod-accent{display:inline-block;background:var(--yellow);color:var(--black);padding:0 .28em .06em}

.prod-group + .prod-group{border-top:1px solid var(--line)}
.prod-group-head{max-width:680px;margin-bottom:40px}
.prod-group-note{margin-top:12px;max-width:540px}

.prod-card-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.prod-card-grid > *{height:100%;min-width:0}
@media (max-width:1000px){ .prod-card-grid{grid-template-columns:1fr 1fr;gap:20px} }
@media (max-width:680px){ .prod-card-grid{grid-template-columns:1fr} }

.prod-card{display:flex;flex-direction:column;height:100%;padding:30px 28px 26px;border:1px solid var(--line);border-radius:28px;background:var(--cream-warm);color:var(--black);text-decoration:none;box-shadow:0 18px 50px -38px rgba(10,10,10,.5);transition:transform .25s, box-shadow .25s, border-color .25s, background .25s}
.prod-card:hover{transform:translateY(-4px);border-color:var(--yellow-deep);box-shadow:0 32px 70px -36px rgba(10,10,10,.55);background:#fff}
.prod-card-top{display:flex;align-items:center;justify-content:space-between}
.prod-card-num{opacity:.45}
.prod-card-arrow{font-size:18px;opacity:.35;transition:transform .25s, opacity .25s}
.prod-card:hover .prod-card-arrow{transform:translateX(4px);opacity:.9}
.prod-card-badge{font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--yellow-deep);border-radius:999px;color:var(--yellow-deep);opacity:.85;white-space:nowrap}
.prod-card-name{margin-top:18px}
.prod-card-tagline{margin-top:12px;color:var(--muted);flex:1 0 auto}
.prod-card-bullets{list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:18px}
.prod-card-bullets li{padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-size:10px;letter-spacing:.12em;opacity:.7}
.prod-card-explore{margin-top:22px;align-self:flex-start;color:var(--black);background-image:linear-gradient(var(--yellow),var(--yellow));background-size:100% 6px;background-position:0 100%;background-repeat:no-repeat;transition:transform .25s}
.prod-card:hover .prod-card-explore{transform:translateX(3px)}
@media (max-width:560px){ .prod-card{padding:26px 22px 22px;border-radius:24px} }

/* ===== Products: single-product detail =================================== */
.prod-detail{background:var(--cream);color:var(--black)}
.prod-detail-back{display:inline-block;opacity:.6;color:var(--black);text-decoration:none;transition:opacity .2s}
.prod-detail-back:hover{opacity:1}
.prod-detail-soon{display:inline-block;margin-top:20px;padding:5px 12px;border:1px solid var(--yellow-deep);border-radius:999px;color:var(--yellow-deep);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.prod-detail-demos{padding-top:8px}
.prod-detail-demos .prod-row:first-of-type{border-top:1px solid var(--line)}
.prod-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media (max-width:800px){ .prod-section-grid{grid-template-columns:1fr;gap:32px} }
.prod-section h3{margin-bottom:0}

.prod-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:56px;border-bottom:1px solid var(--line-cream)}
.prod-nav-link{color:var(--cream);opacity:.65;text-decoration:none;transition:opacity .2s}
.prod-nav-link:hover{opacity:1}
.prod-nav-link--next{margin-left:auto}
.prod-cta-block{margin-top:56px}
@media (max-width:640px){ .prod-nav{gap:10px} .prod-nav-link--next{margin-left:0} }

/* AI assistant note (under product summary) + footnote */
.prod-ai-note{display:flex;align-items:flex-start;gap:12px;margin-top:28px;padding:18px 22px;border:1px solid var(--yellow-deep);border-radius:16px;background:rgba(0,0,0,.02)}
.prod-ai-note-icon{flex:0 0 auto;font-size:18px;line-height:1.5;color:var(--yellow-deep)}
.prod-ai-note .body{margin:0;color:var(--black)}
.prod-ai-note sup{color:var(--yellow-deep);font-weight:600}
.prod-foot-note{margin:0;font-size:12px;letter-spacing:.02em;line-height:1.6}
.prod-foot-note sup{color:var(--yellow-deep)}
@media (max-width:560px){ .prod-ai-note{padding:16px 18px;gap:10px} }


/* ============================================================
   Bilingual toggle + new sections (Foundation / Approach / Work)
   ============================================================ */

/* Language toggle — own ticker child, stays visible when .ticker-nav collapses */
.lang-toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;flex:0 0 auto}
.lang-toggle button{padding:4px 7px;border-radius:6px;opacity:.5;line-height:1;transition:opacity .2s, background .2s, color .2s}
.lang-toggle button:hover{opacity:.85}
.lang-toggle button.is-active{opacity:1;background:var(--black);color:var(--yellow)}
.ticker.scrolled .lang-toggle button.is-active{background:var(--yellow);color:var(--black)}
@media (max-width:700px){ .lang-toggle{font-size:10px;gap:4px} .lang-toggle button{padding:3px 5px} }

/* Approach — numbered question list */
.approach-q{display:grid;grid-template-columns:80px 1fr;gap:32px;align-items:baseline;padding:24px 0;border-top:1px solid var(--black)}
.approach-q:last-child{border-bottom:1px solid var(--black)}
@media (max-width:700px){ .approach-q{grid-template-columns:48px 1fr;gap:16px;padding:18px 0} }

/* Work — disclaimer + card galleries */
.work-disclaimer{margin-top:40px;max-width:880px;opacity:.86;border-left:3px solid var(--black);padding-left:22px}
.work-parts{margin-top:80px;display:flex;flex-direction:column;gap:64px}
.work-part__num{opacity:.55;margin-bottom:10px}
.work-part__title{margin-bottom:8px}
.work-part__label{display:block;opacity:.6;margin-bottom:24px}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.work-card{display:flex;flex-direction:column;gap:14px;border:1px solid var(--black);border-radius:24px;padding:30px 28px;min-height:230px;background:rgba(255,255,255,.16)}
.work-card--ph{border-style:dashed;background:transparent}
.work-card__tag{align-self:flex-start;opacity:.55;border:1px solid var(--black);border-radius:999px;padding:4px 10px}
.work-card__title{font-size:clamp(20px,2vw,28px)}
.work-card__desc{opacity:.78;line-height:1.55}
.work-card__link{margin-top:auto;color:var(--black);font-weight:500;transition:transform .25s}
.work-card__link:hover{transform:translateX(5px)}
@media (max-width:560px){ .work-card{padding:24px 22px;border-radius:20px;min-height:0} }

/* Footer NDA line */
.footer-nda{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-cream);opacity:.5;letter-spacing:.12em;max-width:680px}

/* ===== Proof-bar — trust strip between Hero and Foundation ================= */
.proofbar{padding:clamp(18px,2.4vw,28px) 0}
.proofbar__inner{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);align-items:baseline;justify-content:space-between}
.proofbar__item{display:flex;flex-direction:column;gap:3px;min-width:150px;flex:1 1 auto}
.proofbar__accent{font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.02em;color:var(--yellow)}
.proofbar__label{font-size:clamp(12px,1vw,13.5px);line-height:1.35;opacity:.62;max-width:24ch}
@media (max-width:760px){ .proofbar__item{min-width:46%;flex:1 1 46%} }
@media (max-width:480px){ .proofbar__inner{gap:16px} .proofbar__item{min-width:100%;flex:1 1 100%} }

/* ===== Cases — Before / What we built / Outcome =========================== */
.cases{padding:clamp(72px,9vw,128px) 0}
.cases__sub{max-width:720px;opacity:.72}

/* Compact list of case headings — each row opens the detail modal. */
.cases__list{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);margin-top:clamp(44px,5vw,68px)}
.case-row{width:100%;display:flex;align-items:center;gap:clamp(16px,2vw,28px);text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line-cream);border-radius:18px;padding:clamp(22px,2.4vw,32px) clamp(24px,2.6vw,40px);background:rgba(245,241,232,.03);transition:background .25s,border-color .25s,transform .25s}
.case-row:hover{background:rgba(245,241,232,.06);border-color:rgba(245,241,232,.4);transform:translateY(-1px)}
.case-row__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.case-row__arrow{flex:0 0 auto;font-size:22px;line-height:1;opacity:.5;transition:transform .25s,opacity .25s}
.case-row:hover .case-row__arrow{opacity:1;transform:translateX(4px)}

/* Shared heading + block typography (reused by rows and the detail modal). */
.case-card__meta{font-size:12px;letter-spacing:.13em;opacity:.55;line-height:1.7}
.case-card__status{font-size:clamp(16px,1.4vw,21px);font-weight:600;color:var(--yellow);letter-spacing:-.01em;line-height:1.35}
.case-card__block h4{font-size:12px;letter-spacing:.18em;opacity:.5;margin:0 0 12px}
.case-card__block ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.case-card__block p,.case-card__block li{font-size:clamp(15px,1.05vw,17px);line-height:1.6;opacity:.9}
.case-card__block p{opacity:.85}
.case-card__block li{padding-left:4px}
.case-card__badge{font-size:12px;letter-spacing:.1em;opacity:.5;border-top:1px solid var(--line-cream);padding-top:clamp(16px,1.6vw,22px)}

/* Case detail modal (text content) — mirrors .prod-modal behaviour. */
.case-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.case-modal__backdrop{position:absolute;inset:0;border:none;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);cursor:pointer}
.case-modal__panel{position:relative;width:100%;max-width:760px;max-height:88vh;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--black);color:var(--cream);border:1px solid var(--line-cream);box-shadow:0 40px 120px -40px rgba(0,0,0,.7)}
.case-modal__bar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:clamp(22px,2.4vw,32px);border-bottom:1px solid var(--line-cream)}
.case-modal__head{min-width:0;display:flex;flex-direction:column;gap:12px}
.case-modal__close{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:50%;background:rgba(245,241,232,.12);color:var(--cream);font-size:22px;line-height:1;cursor:pointer;transition:background .2s}
.case-modal__close:hover{background:rgba(245,241,232,.24)}
.case-modal__body{padding:clamp(22px,2.4vw,32px);overflow-y:auto;display:flex;flex-direction:column;gap:clamp(22px,2vw,30px)}
.case-modal__cta{align-self:flex-start;margin-top:4px}
@media (max-width:560px){ .case-row{border-radius:14px} .case-modal__panel{border-radius:16px;max-height:92vh} }