/* ============================================================
   neomax — design system
   ============================================================ */
:root{
  /* brand */
  --brand:        #1f6dff;
  --brand-strong: #0b46c2;
  --brand-ink:    #0a2540;

  /* light theme */
  --bg:           #ffffff;
  --bg-alt:       #f5f8fc;
  --surface:      #ffffff;
  --surface-2:    #f0f4fa;
  --text:         #0a1b33;
  --text-soft:    #5a6b85;
  --border:       #e4eaf3;
  --pill-bg:      rgba(15, 35, 70, .05);
  --pill-bg-hover:rgba(15, 35, 70, .10);
  --shadow:       0 18px 50px -24px rgba(13, 38, 84, .28);
  --shadow-sm:    0 8px 24px -16px rgba(13, 38, 84, .35);
  /* frosted-glass chips (Yandex-style header on scroll) */
  --glass:        rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-bd:     rgba(15, 35, 70, .08);

  /* radar zones */
  --z-adopt:  #6c8bff;
  --z-trial:  #f4a261;
  --z-assess: #d98fe0;
  --z-hold:   #9b8bff;

  /* unified radius scale (rounded rectangles); pills use 999px, circles 50% */
  --radius-xs: 6px;   /* inputs, tags, chips, small controls */
  --radius-sm: 10px;  /* buttons-as-rect, small cards, accordions */
  --radius:    14px;  /* default: cards, panels, modals, hero visuals */
  --maxw:      100%;
  --gutter:    clamp(20px, 4.5vw, 80px);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --t:         .35s var(--ease);
  --header-h:  80px;

  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"]{
  --bg:           #0a0e17;
  --bg-alt:       #0e131f;
  --surface:      #131a28;
  --surface-2:    #1a2334;
  --text:         #eef3fb;
  --text-soft:    #93a1ba;
  --border:       #232d40;
  --pill-bg:      rgba(255,255,255,.06);
  --pill-bg-hover:rgba(255,255,255,.12);
  --shadow:       0 24px 60px -28px rgba(0,0,0,.7);
  --shadow-sm:    0 10px 30px -18px rgba(0,0,0,.8);
  --glass:        rgba(24, 32, 48, .55);
  --glass-strong: rgba(40, 52, 74, .82);
  --glass-bd:     rgba(255, 255, 255, .10);
  --brand:        #4d8bff;
}

/* ============ base ============ */
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
/* kill the mobile tap-flash square on every interactive control (MIUI/Android) */
a, button, input, textarea, select, label, summary, [role="button"], [tabindex]{
  -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none;
}
/* No global smooth-scroll: it animated Back/Forward scroll restoration (esp. the
   mobile back gesture). Anchor links are smooth-scrolled via JS instead. */
html{ scroll-padding-top:90px; overflow-y:scroll; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease), color .4s var(--ease);
  overflow-x:clip;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
svg{ display:block; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-sm); font-weight:600; font-size:15px;
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t), color var(--t);
}
.btn--lg{ padding:15px 28px; font-size:16px; }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--brand-strong); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn--ghost:hover{ background:var(--pill-bg-hover); transform:translateY(-2px); }

/* ============ header ============ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:background var(--t), border-color var(--t), box-shadow var(--t);
}
.header.is-scrolled{ border-color:color-mix(in srgb, var(--border) 18%, transparent); box-shadow:var(--shadow-sm); }
.header__inner{ display:flex; align-items:center; gap:24px; }

.logo{ display:inline-flex; align-items:center; line-height:0; }
.logo__img{ height:30px; width:auto; transition:filter var(--t); }
.logo--footer .logo__img{ height:27px; }
/* footer logo: black in light theme, white in dark theme */
.logo--footer img{ height:27px; width:auto; filter:brightness(0); transition:filter var(--t); }
[data-theme="dark"] .logo--footer img{ filter:brightness(0) invert(1); }
/* lift the deep-blue half of the mark on dark backgrounds */
[data-theme="dark"] .logo__img{ filter:brightness(1.35) saturate(1.1); }

/* nav pills — Yandex style */
.nav{ display:flex; gap:6px; margin-left:80px; margin-right:auto; }
.nav__pill{
  padding:10px 12px; border-radius:var(--radius-sm); font-weight:600; font-size:16px; color:var(--text-soft);
  background:transparent; transition:background var(--t), color var(--t), transform var(--t);
}
.nav__pill:hover{ background:var(--pill-bg); color:var(--text); }
.nav__pill.is-active{ background:var(--pill-bg-hover); color:var(--text); }

.header__actions{ display:flex; align-items:center; gap:12px; }
.cta-desktop{ padding:10px 20px; font-size:14px; }

/* lang */
.lang{
  position:relative;
  display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:var(--radius-sm);
  background:transparent; border:none; color:var(--text-soft); font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  transition:background var(--t), color var(--t);
}
.lang:hover{ background:var(--pill-bg); color:var(--text); }
.lang .icon{ width:18px; height:18px; }
/* language dropdown */
.lang-wrap{ position:relative; display:inline-flex; }
.lang-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:96px; z-index:120;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.lang-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.lang-menu__item{ border:none; background:transparent; font:inherit; font-weight:600; font-size:14px; color:var(--text);
  padding:9px 14px; border-radius:var(--radius-xs); cursor:pointer; text-align:left; transition:background var(--t); }
.lang-menu__item:hover{ background:var(--pill-bg); }
.lang-menu__item.is-active{ background:var(--brand); color:#fff; }
/* compact language switcher — sits at the top of the mobile menu */
.mlang{ display:flex; justify-content:flex-start; width:100%; max-width:440px; }
.mlang__row{ display:inline-flex; gap:4px; padding:4px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; }
.mlang__item{ min-width:48px; padding:7px 6px; border-radius:999px; text-align:center; text-decoration:none;
  color:var(--text-soft); font:inherit; font-weight:700; font-size:13px; letter-spacing:.4px;
  transition:background var(--t), color var(--t); }
.mlang__item:hover{ color:var(--text); }
.mlang__item.is-active{ background:var(--brand); color:#fff; }
.icon{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* theme toggle — Beeline style: rolling thumb, moon↔sun, yellow glow on hover */
.theme-toggle{ background:none; border:none; cursor:pointer; padding:0; line-height:0; }
.theme-toggle__track{ position:relative; display:block; width:45px; height:21px; border-radius:999px;
  background:#000; border:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
[data-theme="dark"] .theme-toggle__track{ background:#fff; }
/* neon glow only on real-pointer devices — on touch screens :hover sticks after a
   tap, leaving the glow around the toggle after the theme is chosen */
@media (hover:hover){
  .theme-toggle:hover .theme-toggle__track{ box-shadow:0 0 18px 1px rgba(64,124,255,.7), 0 0 5px rgba(64,124,255,.55);
    border-color:rgba(64,124,255,.8); }
  /* light theme: sun-yellow neon instead of blue */
  [data-theme="light"] .theme-toggle:hover .theme-toggle__track{ box-shadow:0 0 18px 1px rgba(254,200,10,.7), 0 0 5px rgba(254,200,10,.55);
    border-color:rgba(254,200,10,.8); }
}
.theme-toggle__thumb{ position:absolute; top:50%; left:3px; width:19px; height:19px; border-radius:50%; background:none;
  display:grid; place-items:center;
  transform:translateY(-50%); transition:transform .42s cubic-bezier(.65,.05,.25,1); }
[data-theme="light"] .theme-toggle__thumb{ transform:translate(21px,-50%); }
.theme-toggle .icon{ grid-area:1/1; width:15px; height:15px; display:block; transition:opacity .3s var(--ease), transform .4s var(--ease); }
.icon--moon{ fill:#0e1830; stroke:none; }
.icon--sun{ fill:#fec80a; stroke:#fec80a; }
[data-theme="dark"] .icon--moon{ opacity:1; transform:scale(1) rotate(0); }
[data-theme="dark"] .icon--sun{ opacity:0; transform:scale(.3) rotate(-90deg); }
[data-theme="light"] .icon--moon{ opacity:0; transform:scale(.3) rotate(90deg); }
[data-theme="light"] .icon--sun{ opacity:1; transform:scale(1) rotate(0); }

/* burger */
.burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center;
  background:var(--pill-bg); border:none; border-radius:var(--radius-sm); cursor:pointer; }
.burger span{ width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu — full-screen overlay, editorial nav with staggered reveal */
.mobile-menu{
  position:fixed; inset:0; z-index:90;
  background:
    radial-gradient(130% 90% at 50% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px;
  padding:calc(var(--header-h) + 18px) 22px 34px; opacity:0; visibility:hidden; transform:translateY(-12px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }

.mobile-menu__nav{ display:flex; flex-direction:column; gap:2px; width:100%; max-width:440px; margin-top:18px; }
.nav__pill--lg{
  display:block; padding:13px 2px; line-height:1.15; text-align:left;
  font-size:clamp(24px, 7vw, 28px); font-weight:600; color:var(--text); background:transparent;
  transition:color var(--t);
}
.nav__pill--lg:hover, .nav__pill--lg.is-active{ color:var(--brand); }

/* staggered reveal when the menu opens */
.mobile-menu.is-open .nav__pill--lg{ animation:menuItemIn .5s var(--ease) both; }
.mobile-menu.is-open .nav__pill--lg:nth-child(1){ animation-delay:.05s; }
.mobile-menu.is-open .nav__pill--lg:nth-child(2){ animation-delay:.10s; }
.mobile-menu.is-open .nav__pill--lg:nth-child(3){ animation-delay:.15s; }
.mobile-menu.is-open .nav__pill--lg:nth-child(4){ animation-delay:.20s; }
.mobile-menu.is-open .nav__pill--lg:nth-child(5){ animation-delay:.25s; }
.mobile-menu.is-open .nav__pill--lg:nth-child(6){ animation-delay:.30s; }
.mobile-menu.is-open .nav__pill--lg:nth-child(7){ animation-delay:.35s; }
.mobile-menu.is-open .nav__pill--lg:nth-child(8){ animation-delay:.40s; }
@keyframes menuItemIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.mobile-menu__cta{ width:100%; max-width:440px; margin-top:22px; }

/* ============ hero ============ */
.hero{ padding-top:calc(var(--header-h) + 46px); padding-bottom:60px; position:relative; }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:48px; }
.hero__badge{ display:inline-block; padding:7px 14px; border-radius:999px; background:var(--pill-bg);
  color:var(--text-soft); font-weight:600; font-size:13px; margin-bottom:22px; }
.hero__title{ font-size:clamp(34px, 5vw, 60px); line-height:1.05; font-weight:800; letter-spacing:-1.5px; }
.grad-text{ background:linear-gradient(120deg, var(--brand), #7aa2ff 60%, var(--z-assess)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lead{ margin-top:22px; font-size:clamp(16px,2vw,19px); color:var(--text-soft); max-width:520px; }
.hero__actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:36px; margin-top:46px; flex-wrap:wrap; }
.stat b{ display:block; font-size:30px; font-weight:800; color:var(--brand); line-height:1; }
.stat span{ font-size:14px; color:var(--text-soft); }

/* hero orb */
.hero__visual{ display:grid; place-items:center; }
/* glowing tech circle + floating badges */
.techcircle{ position:relative; width:min(470px, 92vw); aspect-ratio:1; }
.techcircle__glow{ position:absolute; top:50%; left:50%; width:120%; height:120%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--brand) 28%, transparent) 0%, transparent 70%);
  animation:tc-pulse 3.4s ease-in-out infinite; }
.techcircle__ring{ position:absolute; inset:0; border-radius:50%; border:4px solid var(--brand); overflow:hidden;
  background:var(--surface); display:grid; place-items:center;
  box-shadow:0 0 40px -6px color-mix(in srgb, var(--brand) 50%, transparent), inset 0 0 70px -24px color-mix(in srgb, var(--brand) 70%, transparent); }
.techcircle__code{ color:var(--brand); opacity:.32; }
.techcircle__code svg{ width:138px; height:138px; }
@keyframes tc-pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.55; } 50%{ transform:translate(-50%,-50%) scale(1.1); opacity:.85; } }

.tech-badge{ position:absolute; z-index:2; display:flex; align-items:center; gap:12px; min-width:190px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:13px 18px;
  box-shadow:var(--shadow); white-space:nowrap; animation:tc-float 3.2s ease-in-out infinite;
  transition:opacity .75s var(--ease), border-color var(--t), box-shadow var(--t); }
.tech-badge.is-swapping{ opacity:0; }
.tech-badge:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
.tech-badge > i{ font-size:32px; line-height:1; flex:none; width:38px; text-align:center; }
.tech-badge__ic{ width:38px; height:38px; border-radius:var(--radius-sm); flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand); }
.tech-badge__ic svg{ width:22px; height:22px; }
.tech-badge__txt b{ display:block; font-size:15px; font-weight:800; color:var(--text); }
.tech-badge__txt span{ font-size:12px; color:var(--text-soft); }
.tech-badge--1{ top:10%;   right:-9%;  animation-delay:0s; }
.tech-badge--2{ bottom:14%; right:-13%; animation-delay:1.1s; }
.tech-badge--3{ top:48%;   left:-15%;  animation-delay:2.2s; }
@keyframes tc-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }

/* ============ sections ============ */
.section{ padding:64px 0; }
.section--alt{ background:var(--bg-alt); }
.section__head{ max-width:720px; margin-bottom:40px; }
.section__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; }
.eyebrow{ font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); }
.section__title{ font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-1px; margin-top:10px; line-height:1.12; }
.section__sub{ margin-top:14px; color:var(--text-soft); font-size:17px; }

/* legal / prose pages (privacy, terms) */
.legal{ max-width:860px; }
.legal__meta{ color:var(--text-soft); font-size:14px; margin:-18px 0 26px; }
.legal__intro{ color:var(--text-soft); font-size:17px; line-height:1.75; }
.legal h2{ font-size:21px; font-weight:800; letter-spacing:-.3px; margin:36px 0 12px; }
.legal p{ color:var(--text-soft); font-size:16px; line-height:1.75; margin:10px 0; }
.legal ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:14px 0; padding:0; }
.legal li{ position:relative; padding-left:26px; color:var(--text-soft); font-size:16px; line-height:1.65; }
.legal li::before{ content:""; position:absolute; left:5px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.legal strong{ color:var(--text); font-weight:700; }
.legal a{ color:var(--brand); }

/* ============ cards ============ */
.cards{ display:grid; gap:20px; }
.cards--services{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }
.cards--projects{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--brand) 40%, var(--border)); }
.card__icon{ width:48px; height:48px; border-radius:var(--radius); display:grid; place-items:center; margin-bottom:18px;
  background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }
.card__icon .icon{ width:24px; height:24px; }
.card__title{ font-size:18px; font-weight:700; }
.card__text{ margin-top:8px; color:var(--text-soft); font-size:14px; }
.card__arrow{ margin-top:18px; color:var(--brand); font-weight:700; opacity:0; transform:translateX(-6px); transition:opacity var(--t), transform var(--t); }
.card:hover .card__arrow{ opacity:1; transform:translateX(0); }

/* service card — clean card; 3D object peeks from bottom-right corner */
.scard{ position:relative; overflow:hidden; min-height:158px; padding:26px 28px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 16px 40px -18px transparent; transition:transform var(--t), box-shadow .4s var(--ease); }
.scard:hover{ transform:translateY(-5px); box-shadow:0 18px 42px -14px color-mix(in srgb, var(--brand) 32%, transparent); }
.scard__body{ position:relative; z-index:2; max-width:62%; }
.scard__title{ font-size:19px; font-weight:800; line-height:1.2; }
.scard__text{ margin-top:8px; color:var(--text-soft); font-size:14px; line-height:1.5; }
.scard__art{ position:absolute; right:0; bottom:0; top:0; width:44%; z-index:1; pointer-events:none; }
.scard__art .icon{ position:absolute; right:24px; bottom:22px; width:64px; height:64px; color:var(--brand); opacity:.92;
  filter:drop-shadow(0 8px 16px color-mix(in srgb, var(--brand) 32%, transparent)); transition:transform var(--t); }
.scard__art:has(.scard__img) .icon{ display:none; }
.scard__img{ position:absolute; right:-42px; bottom:-48px; width:200px; height:200px; object-fit:contain; object-position:right bottom; z-index:2;
  filter:drop-shadow(0 16px 22px rgba(15,30,60,.3)); transition:transform var(--t); }
.scard:hover .scard__art .icon, .scard:hover .scard__img{ transform:translateY(-7px) scale(1.05); }

/* project card */
.pcard{ padding:0; }
.pcard__media{ aspect-ratio:16/10; display:grid; place-items:center; font-size:26px; font-weight:800; letter-spacing:1px; color:#fff; }
.pcard__body{ padding:20px 22px 24px; }
.pcard__tag{ color:var(--brand); font-weight:700; font-size:13px; }
.pcard__title{ font-size:20px; font-weight:800; margin-top:4px; }
.pcard__text{ color:var(--text-soft); font-size:14px; margin-top:8px; }

/* ============ radar ============ */
.radar-layout{ display:grid; grid-template-columns:minmax(320px,400px) 1fr; gap:40px; align-items:start; }

/* left: search */
.radar-search{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border); margin-bottom:14px; transition:border-color var(--t); }
.radar-search:focus-within{ border-color:var(--brand); }
.radar-search .icon{ width:18px; height:18px; color:var(--text-soft); flex:none; }
.radar-search input{ border:none; background:none; outline:none; font:inherit; font-size:15px; color:var(--text); width:100%; }
.radar-search input::placeholder{ color:var(--text-soft); }

/* left: expandable accordion */
.radar-acc{ display:flex; flex-direction:column; gap:8px; }
.acc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  transition:border-color var(--t), background var(--t); }
.acc.is-open{ border-color:color-mix(in srgb, var(--brand) 35%, var(--border)); }
.acc__head{ width:100%; display:flex; gap:14px; align-items:flex-start; padding:18px; background:none; border:none;
  color:var(--text); font:inherit; font-weight:700; font-size:16px; line-height:1.3; cursor:pointer; text-align:left; }
.acc__num{ color:var(--text-soft); font-weight:800; font-size:13px; padding-top:3px; flex:none; }
.acc.is-open .acc__num{ color:var(--brand); }
.acc__name{ flex:1; }
.acc__chevron{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--text-soft); transition:transform var(--t); }
.acc.is-open .acc__chevron{ transform:rotate(180deg); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.acc.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__groups{ padding:0 18px 18px 46px; display:flex; flex-direction:column; gap:16px; }
.acc__group{ display:flex; flex-direction:column; gap:8px; }
.acc__badge{ align-self:flex-start; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.5px; color:#fff; }
.acc__badge--adopt{ background:var(--z-adopt); } .acc__badge--trial{ background:var(--z-trial); }
.acc__badge--assess{ background:var(--z-assess); } .acc__badge--hold{ background:var(--z-hold); }
.acc__items{ list-style:none; display:flex; flex-direction:column; }
.acc__item{ padding:7px 0; font-size:15px; color:var(--text-soft); transition:color var(--t), padding var(--t); cursor:default; }
.acc__item:hover{ color:var(--text); padding-left:5px; }
.acc__item.is-hidden{ display:none; }
.acc__empty{ font-size:14px; color:var(--text-soft); padding:4px 0; }

/* desktop: one tall panel matching the radar height, categories split it evenly */
@media (min-width:981px){
  .radar-cats{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden; }
  .radar-search{ margin:0; border:none; border-radius:0; background:none; border-bottom:1px solid var(--border); padding:18px 20px; }
  .radar-acc{ flex:1; gap:0; min-height:0; }
  .acc{ display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden;
    border:none; border-radius:0; background:none; border-bottom:1px solid var(--border);
    transition:flex-grow .45s var(--ease), background var(--t); }
  .acc:last-child{ border-bottom:none; }
  .acc__head{ flex:none; padding:22px 24px; font-size:20px; font-weight:800; }
  .acc__num{ font-size:15px; }
  .acc.is-open{ background:color-mix(in srgb, var(--brand) 6%, var(--surface)); }
  .radar-acc:has(.acc.is-open) .acc:not(.is-open){ flex:0 0 auto; }
  .radar-acc:has(.acc.is-open) .acc.is-open{ flex:1 1 auto; }
  /* panel becomes a flex scroller (overrides the mobile grid-rows animation) */
  .acc__panel{ display:block; flex:1 1 auto; min-height:0; grid-template-rows:none; }
  .acc:not(.is-open) .acc__panel{ display:none; }
  .acc__inner{ height:100%; overflow-y:auto; }
  .acc__groups{ padding:14px 24px 22px 50px; opacity:0; transition:opacity .3s var(--ease) .1s; }
  .acc.is-open .acc__groups{ opacity:1; }
}

/* right: zoomed radar stage — width fixed, height set to match (JS), with aspect-ratio fallback */
.radar-stage{ position:relative; width:min(600px, 100%); aspect-ratio:1; margin-inline:auto; overflow:hidden;
  transform:translateX(34px);
  border-radius:var(--radius);
  background:radial-gradient(circle at 72% 72%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%), var(--bg-alt); }
/* default = full radar; .z1–.z4 zoom into a quadrant by scaling toward its far corner */
.radar{ position:absolute; inset:4%; transform-origin:center;
  transition:transform .7s var(--ease), transform-origin .7s var(--ease); }
.radar.z1{ transform:scale(1.8); transform-origin:0% 0%; }
.radar.z2{ transform:scale(1.8); transform-origin:100% 0%; }
.radar.z3{ transform:scale(1.8); transform-origin:0% 100%; }
.radar.z4{ transform:scale(1.8); transform-origin:100% 100%; }

/* field holds rings + dots and gets clipped to the active quadrant */
.radar__field{ position:absolute; inset:0; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:clip-path .7s var(--ease); }
.radar.z1 .radar__field{ clip-path:polygon(0 0, 50% 0, 50% 50%, 0 50%); }
.radar.z2 .radar__field{ clip-path:polygon(50% 0, 100% 0, 100% 50%, 50% 50%); }
.radar.z3 .radar__field{ clip-path:polygon(0 50%, 50% 50%, 50% 100%, 0 100%); }
.radar.z4 .radar__field{ clip-path:polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%); }

.radar__ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--border); }
.radar__ring--4{ inset:0;     border-color:var(--z-hold); }
.radar__ring--3{ inset:12.5%; border-color:var(--z-assess); }
.radar__ring--2{ inset:25%;   border-color:var(--z-trial); }
.radar__ring--1{ inset:37.5%; border-color:var(--z-adopt); background:color-mix(in srgb, var(--z-adopt) 8%, transparent); }

/* labels layer — not clipped; positioned on each ring's axis crossing */
.radar__labels{ position:absolute; inset:0; pointer-events:none; }
.radar__label{ position:absolute; left:50%; transform:translate(-50%,-50%); white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:1px; padding:4px 11px; border-radius:999px; color:#fff; }
.l4t{ top:0; }     .l4b{ top:100%; }
.l3t{ top:12.5%; } .l3b{ top:87.5%; }
.l2t{ top:25%; }   .l2b{ top:75%; }
.l1t{ top:37.5%; } .l1b{ top:62.5%; }
.b-hold{ background:var(--z-hold); } .b-assess{ background:var(--z-assess); }
.b-trial{ background:var(--z-trial); } .b-adopt{ background:var(--z-adopt); }
/* bottom quadrants → show the lower labels instead of the top ones */
.radar__label--bot{ display:none; }
.radar.z3 .radar__label--top, .radar.z4 .radar__label--top{ display:none; }
.radar.z3 .radar__label--bot, .radar.z4 .radar__label--bot{ display:block; }
.radar__quad{ position:absolute; font-size:22px; font-weight:800; color:var(--text-soft); opacity:.4; }
.radar__quad--tl{ top:3%; left:3%; } .radar__quad--tr{ top:3%; right:3%; }
.radar__quad--bl{ bottom:3%; left:3%; } .radar__quad--br{ bottom:3%; right:3%; }
.radar::before, .radar::after{ content:""; position:absolute; }
.radar::before{ left:50%; top:0; bottom:0; border-left:1px dashed var(--border); transform:translateX(-.5px); }
.radar::after{ top:50%; left:0; right:0; border-top:1px dashed var(--border); transform:translateY(-.5px); }

.radar__dots{ position:absolute; inset:0; }
.radar__dot{ position:absolute; width:14px; height:14px; border-radius:50%; cursor:pointer;
  transform:translate(-50%,-50%) scale(0); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease), box-shadow var(--t);
  left:var(--x); top:var(--y); border:2px solid var(--bg-alt); }
.radar__dot.is-shown{ transform:translate(-50%,-50%) scale(1); opacity:1; transition-delay:var(--delay); }
.radar__dot.is-dim{ opacity:.12 !important; }
/* hovering a dot dims all the others */
.radar__dots.is-peek .radar__dot.is-shown:not(.is-focus){ opacity:.15; }
.radar__dot.is-focus{ z-index:4; }
.radar__dot:hover{ box-shadow:0 0 0 6px color-mix(in srgb, currentColor 25%, transparent); z-index:3; }
.radar__dot--adopt{ background:var(--z-adopt); color:var(--z-adopt); }
.radar__dot--trial{ background:var(--z-trial); color:var(--z-trial); }
.radar__dot--assess{ background:var(--z-assess); color:var(--z-assess); }
.radar__dot--hold{ background:var(--z-hold); color:var(--z-hold); }
.radar__tooltip{ position:absolute; pointer-events:none; padding:6px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  background:var(--text); color:var(--bg); opacity:0; transform:translate(-50%,-8px); transition:opacity .2s, transform .2s; white-space:nowrap; z-index:5; left:var(--tx); top:var(--ty); }
.radar__tooltip.is-shown{ opacity:1; transform:translate(-50%,-12px); }

/* dot highlighted from list hover / open popover */
.radar__dot.is-hl.is-shown{ transform:translate(-50%,-50%) scale(1.7);
  box-shadow:0 0 0 7px color-mix(in srgb, currentColor 30%, transparent); z-index:4; }
.acc__item.is-active{ color:var(--text); font-weight:700; }

/* tech detail popover */
.pop-backdrop{ position:fixed; inset:0; z-index:190; background:transparent; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s; }
.pop-backdrop.is-open{ opacity:1; visibility:visible; }
.tech-pop{ position:fixed; z-index:200; width:288px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.tech-pop.is-open{ opacity:1; visibility:visible; transform:none; }
.tech-pop__close{ position:absolute; top:14px; right:14px; width:28px; height:28px; border:none; border-radius:var(--radius-xs);
  background:var(--pill-bg); color:var(--text); cursor:pointer; font-size:16px; line-height:1; transition:background var(--t); }
.tech-pop__close:hover{ background:var(--pill-bg-hover); }
.tech-pop__title{ font-size:20px; font-weight:800; padding-right:32px; line-height:1.2; }
.tech-pop__ring{ display:inline-block; margin-top:10px; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.5px; color:#fff; }
.tech-pop__ring--adopt{ background:var(--z-adopt); } .tech-pop__ring--trial{ background:var(--z-trial); }
.tech-pop__ring--assess{ background:var(--z-assess); } .tech-pop__ring--hold{ background:var(--z-hold); }
.tech-pop__desc{ margin-top:14px; color:var(--text-soft); font-size:14px; line-height:1.55; }
@media (max-width:680px){
  .pop-backdrop{ background:rgba(0,0,0,.5); pointer-events:auto; }
  .tech-pop{ left:16px !important; right:16px; top:auto !important; bottom:16px; width:auto; transform:translateY(10px); }
  .tech-pop.is-open{ transform:none; }
}

/* ============ marquee ============ */
.marquee{ overflow-x:auto; overflow-y:hidden; padding:12px 0; margin-top:34px;
  cursor:grab; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.marquee::-webkit-scrollbar{ display:none; }
.marquee.is-grab{ cursor:grabbing; }
.marquee__track{ display:flex; gap:20px; width:max-content; }
.marquee__track img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
/* colored company logo chips */
.logo-chip{ display:flex; align-items:center; gap:12px; padding:12px 22px 12px 14px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); white-space:nowrap; cursor:pointer;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.logo-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm);
  border-color:color-mix(in srgb, var(--c) 55%, var(--border)); }
.logo-chip__mark{ width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center; color:#fff; flex:none;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
  box-shadow:0 8px 18px -7px var(--c); }
.logo-chip__mark .icon{ width:21px; height:21px; }
.logo-chip__name{ font-size:18px; font-weight:800; letter-spacing:-.3px; color:var(--c); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
/* partner logo chips (marquee) */
.partner-logo{ flex:none; width:180px; height:92px; display:grid; place-items:center; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-sm); transition:transform var(--t), box-shadow var(--t); }
.partner-logo img{ max-height:50px; max-width:74%; width:auto; object-fit:contain; display:block; }
/* laliga is white-on-black → invert by default (light theme) so it reads on the white chip */
.partner-logo--flip img{ filter:invert(1) hue-rotate(180deg); }
@media (hover:hover){
  .partner-logo:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
}
/* dark theme: black chips; dark-on-white logos auto-invert so they stay readable */
[data-theme="dark"] .partner-logo{ background:#000; border-color:rgba(255,255,255,.14); }
[data-theme="dark"] .partner-logo img{ filter:invert(1) hue-rotate(180deg); }
[data-theme="dark"] .partner-logo--keep img,
[data-theme="dark"] .partner-logo--flip img{ filter:none; }

/* ============ blog / page grid ============ */
.blog-grid, .page-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* listing page-head clears the fixed header itself, so drop the wrapping
   section's top padding — otherwise they stack into a huge gap under the header */
.section:has(.page-head){ padding-top:0; }
.page-head{ padding:calc(var(--header-h) + 46px) 0 8px; }
/* home teasers: 3 cards + "Смотреть все" in one row */
@media (min-width:981px){
  .cards--projects[data-limit], .blog-grid[data-limit]{ grid-template-columns:repeat(4,1fr); }
}
.post{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--brand) 35%, var(--border)); }
.post__media{ position:relative; aspect-ratio:16/10; }
.post__chips{ position:absolute; left:14px; bottom:14px; display:flex; gap:8px; flex-wrap:wrap; }
.post__chip{ background:rgba(0,0,0,.5); color:#fff; font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px;
  backdrop-filter:blur(4px); }
.post__play{ position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); transition:transform var(--t); }
.post:hover .post__play{ transform:scale(1.08); }
.post__play svg{ width:24px; height:24px; fill:var(--brand); margin-left:3px; }
.post__body{ padding:20px 20px 18px; display:flex; flex-direction:column; flex:1; }
.post__type{ color:var(--text-soft); font-size:14px; font-weight:600; }
.post__title{ font-size:19px; font-weight:700; margin-top:8px; line-height:1.32; flex:1; }
.post__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.post__date{ color:var(--text-soft); font-size:14px; }
.post__arrow{ width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; flex:none;
  display:grid; place-items:center; transition:transform var(--t), background var(--t); }
.post:hover .post__arrow{ transform:scale(1.1); }
.post__arrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* reusable "Смотреть все" card — concentric rounded squares that bend around the arrow */
.allcard{ position:relative; display:block; overflow:hidden; color:#fff; padding:30px; border-radius:var(--radius);
  background:linear-gradient(140deg, var(--brand), var(--brand-strong)); transition:transform var(--t), box-shadow var(--t); }
.allcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.allcard__title{ position:relative; z-index:1; font-size:clamp(28px, 2.9vw, 42px); font-weight:800; letter-spacing:-.6px; line-height:1.04; }
.allcard__sub{ position:relative; z-index:1; margin-top:14px; font-size:16px; opacity:.92; max-width:240px; }
.allcard__arrow{ position:absolute; right:24px; bottom:24px; width:50px; height:50px; border-radius:50%; z-index:1;
  background:#fff; color:var(--brand-strong); display:grid; place-items:center; transition:transform var(--t); }
.allcard__arrow::before{ content:""; position:absolute; inset:-12px; border-radius:50%; border:2px solid rgba(255,255,255,.4);
  animation:allcard-pulse 2s ease-in-out infinite; }
@keyframes allcard-pulse{ 0%,100%{ transform:scale(1); opacity:.45; } 50%{ transform:scale(1.12); opacity:.9; } }
.allcard:hover .allcard__arrow{ transform:scale(1.07); }
.allcard__arrow svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* blog page filters */
.blog-filters{ display:flex; gap:14px; align-items:center; margin:8px 0 32px; flex-wrap:wrap; }
.blog-select{ font:inherit; font-size:15px; font-weight:600; color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:13px 18px; min-width:240px; cursor:pointer; outline:none; }
.blog-tabs{ display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:5px; }
.blog-tab{ border:none; background:transparent; font:inherit; font-weight:700; font-size:15px; color:var(--text-soft);
  padding:9px 20px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--t), color var(--t); }
.blog-tab:hover{ color:var(--text); }
.blog-tab.is-active{ background:var(--brand); color:#fff; }

.post.is-collapsed{ display:none; }
@media (min-width:681px){ .card.is-collapsed{ display:none; } }

/* ============ cta band ============ */
.cta-band__inner{ text-align:center; background:linear-gradient(135deg, var(--brand), var(--brand-strong));
  color:#fff; border-radius:var(--radius); padding:60px 28px; }
.cta-band__inner h2{ font-size:clamp(24px,3.4vw,36px); font-weight:800; letter-spacing:-.5px; }
.cta-band__inner p{ margin:12px auto 28px; max-width:480px; opacity:.92; }
.cta-band .btn--primary{ background:#fff; color:var(--brand-strong); }
.cta-band .btn--primary:hover{ background:#eaf0ff; }

/* ============ about + contacts ============ */
.about{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
.about__stats{ display:flex; gap:36px; margin-top:32px; flex-wrap:wrap; }
.contacts{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; }
.contacts__title{ font-size:20px; font-weight:800; margin-bottom:18px; }
.contacts__list{ list-style:none; display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.contacts__item{ display:flex; flex-direction:column; gap:3px; }
.contacts__label{ font-size:13px; color:var(--text-soft); font-weight:600; }
.contacts__value{ font-size:17px; font-weight:600; color:var(--text); }
a.contacts__value:hover{ color:var(--brand); }
.contacts .btn{ width:100%; }
/* contact page */
.contact-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:28px; align-items:start; margin-top:8px; }
.contact-cta{ background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius); padding:34px 32px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.contact-cta__title{ font-size:24px; font-weight:800; letter-spacing:-.3px; }
.contact-cta__text{ color:var(--text-soft); font-size:16px; line-height:1.6; max-width:46ch; }
.contact-cta .btn{ margin-top:6px; }
.contact-map :is(iframe, img){ width:100%; min-height:360px; border:0; border-radius:var(--radius); display:block; }
/* about page */
.about-top{ padding-top:calc(var(--header-h) + 46px); }   /* clear the fixed header (match other pages) */
.about-why{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; }
.about-why__title{ font-size:20px; font-weight:800; margin-bottom:18px; }
.about-why__list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.about-why__list li{ position:relative; padding-left:28px; color:var(--text-soft); font-size:15px; line-height:1.55; }
.about-why__list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:800; }

/* ============ footer ============ */
.footer{ padding:64px 0 32px; border-top:1px solid var(--border); background:var(--bg-alt); }
.footer__top{ display:grid; grid-template-columns:1.4fr 2.6fr; gap:48px; padding-bottom:40px; }
.footer__tagline{ color:var(--text-soft); font-size:15px; margin:18px 0 22px; max-width:320px; }
.footer__socials{ display:flex; gap:12px; }
.footer__social{ width:42px; height:42px; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); color:var(--text-soft);
  transition:color var(--t), border-color var(--t), transform var(--t); }
.footer__social:hover{ color:var(--brand); border-color:var(--brand); transform:translateY(-3px); }
.footer__social .icon{ width:20px; height:20px; }
.footer__social .brand-ic{ width:19px; height:19px; fill:currentColor; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.footer__col{ display:flex; flex-direction:column; gap:12px; }
.footer__col h4{ font-size:15px; font-weight:800; margin-bottom:6px; }
.footer__col h4 a{ color:inherit; transition:color var(--t); }
.footer__col h4 a:hover{ color:var(--brand); }
.footer__col a{ color:var(--text-soft); font-size:14px; transition:color var(--t), padding var(--t); width:fit-content; }
.footer__col a:hover{ color:var(--brand); padding-left:3px; }
.footer__col--contact span{ color:var(--text-soft); font-size:14px; }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--border); }
.footer__copy{ color:var(--text-soft); font-size:14px; }
.footer__legal{ display:flex; gap:24px; }
.footer__legal a{ color:var(--text-soft); font-size:14px; }
.footer__legal a:hover{ color:var(--brand); }

/* ============ request form modal ============ */
.modal-backdrop{ position:fixed; inset:0; z-index:300; background:rgba(8,14,28,.55); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.modal-backdrop.is-open{ opacity:1; visibility:visible; }
.modal{ position:fixed; z-index:301; left:50%; top:50%; transform:translate(-50%,-46%); width:460px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.modal .form{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:24px; margin-right:-14px;
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--brand) 60%, transparent) color-mix(in srgb, var(--border) 60%, transparent); }
.modal .form::-webkit-scrollbar{ width:8px; }
.modal .form::-webkit-scrollbar-track{ background:color-mix(in srgb, var(--border) 50%, transparent); border-radius:var(--radius-xs); }
.modal .form::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--brand) 60%, transparent); border-radius:var(--radius-xs); }
.modal.is-open{ opacity:1; visibility:visible; transform:translate(-50%,-50%); }
.modal__close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border:none; border-radius:var(--radius-sm);
  background:var(--pill-bg); color:var(--text); cursor:pointer; font-size:17px; transition:background var(--t); }
.modal__close:hover{ background:var(--pill-bg-hover); }
.modal__title{ font-size:24px; font-weight:800; letter-spacing:-.5px; }
.modal__sub{ color:var(--text-soft); margin:8px 0 22px; font-size:15px; }
.form{ display:flex; flex-direction:column; gap:16px; }
.form__field{ display:flex; flex-direction:column; gap:7px; }
.form__label{ font-size:14px; font-weight:600; color:var(--text-soft); }
.form__input{ font:inherit; font-size:15px; color:var(--text); background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 15px; outline:none; transition:border-color var(--t), background var(--t); resize:vertical; }
.form__input:focus{ border-color:var(--brand); }
.form__input::placeholder{ color:var(--text-soft); }
.form__submit{ width:100%; margin-top:4px; }
.form__success{ text-align:center; color:#16a34a; font-weight:600; font-size:15px; }
.form__req{ color:var(--brand); transition:opacity .2s var(--ease); }
.form__req.is-off{ opacity:0; }
.form__hint{ font-size:13px; color:var(--text-soft); margin-top:-10px; }
.form__counter{ align-self:flex-end; font-size:12px; color:var(--text-soft); }
.form__error{ color:#dc2626; font-weight:600; font-size:14px; }
.form__input.is-invalid{ border-color:#dc2626; }
/* intl-tel-input fills the field and keeps the dark theme tidy */
.iti{ width:100%; }
.iti input{ width:100%; box-sizing:border-box; }
.iti__country-list{ color:#1b2536; }
/* country-code selector: dial code in the flag area, divided from the number */
.iti--separate-dial-code .iti__selected-flag{ background:transparent; border-right:1px solid var(--border); }
.iti--separate-dial-code .iti__selected-dial-code{ color:var(--text); }
/* custom dropdown — modern replacement for the native <select> (request-form category) */
.fsel{ position:relative; }
.fsel__btn{ display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; text-align:left; }
.fsel__value{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fsel__value.is-placeholder{ color:var(--text-soft); }
.fsel__chev{ width:18px; height:18px; flex:none; fill:none; stroke:var(--text-soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t); }
.fsel.is-open .fsel__btn{ border-color:var(--brand); }
.fsel.is-open .fsel__chev{ transform:rotate(180deg); stroke:var(--brand); }
.fsel__menu{ list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; opacity:0;
  border:1px solid transparent; border-radius:var(--radius-sm);
  transition:max-height .26s var(--ease), opacity .2s var(--ease), margin .2s var(--ease), border-color .2s var(--ease); }
.fsel.is-open .fsel__menu{ max-height:258px; opacity:1; margin-top:7px; overflow-y:auto; border-color:var(--border); background:var(--bg-alt); padding:5px; }
.fsel__opt{ padding:10px 12px; border-radius:var(--radius-xs); font-size:15px; color:var(--text); cursor:pointer; transition:background var(--t), color var(--t); }
.fsel__opt:hover, .fsel__opt.is-active{ background:var(--surface); color:var(--brand); }

/* ============ service detail page ============ */
.svc-hero{ padding-top:calc(var(--header-h) + 46px); }
.svc-hero__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.svc-back{ display:inline-block; color:var(--text-soft); font-weight:600; margin-bottom:18px; }
.svc-back:hover{ color:var(--brand); }
.svc-hero__title{ margin:6px 0 14px; }
.svc-hero__actions{ display:flex; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap; }
.svc-price{ color:var(--text-soft); font-size:15px; margin-top:18px; display:inline-block; }
.svc-price b{ color:var(--text); font-size:22px; font-weight:800; }
.svc-hero__media{ aspect-ratio:4/3; border-radius:var(--radius); display:grid; place-items:center; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.svc-hero__media::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 28%, rgba(255,255,255,.25), transparent 55%); }
.svc-hero__icon{ position:relative; z-index:1; color:#fff; display:grid; place-items:center; }
.svc-hero__icon .icon{ width:100px; height:100px; stroke-width:1.5; filter:drop-shadow(0 10px 24px rgba(0,0,0,.3)); }

.svc-h2{ margin-bottom:28px; }
.svc-center{ text-align:center; margin-inline:auto; max-width:600px; }

/* metrics band */
.svc-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-metric{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px 32px; }
.svc-metric b{ display:block; font-size:clamp(30px,3.4vw,44px); font-weight:800; color:var(--brand); letter-spacing:-1px; line-height:1; }
.svc-metric span{ display:block; margin-top:10px; color:var(--text-soft); font-size:15px; }

/* use-cases / advantages — bento with one featured (image) card */
.svc-cases{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(190px,1fr); gap:20px; }
.svc-case{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t); }
.svc-case:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--brand) 40%, var(--border)); box-shadow:var(--shadow-sm); }
.svc-case__ic{ width:46px; height:46px; border-radius:var(--radius-sm); display:grid; place-items:center; margin-bottom:16px;
  background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }
.svc-case__ic .icon{ width:24px; height:24px; }
.svc-case h3{ font-size:18px; font-weight:700; line-height:1.25; }
.svc-case p{ margin-top:10px; color:var(--text-soft); font-size:14px; line-height:1.55; }
/* featured card: spans 2×2, image/gradient background with overlaid text */
.svc-cases .svc-case:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.svc-cases .svc-case:nth-child(2){ grid-column:span 2; }
.svc-case--feature{ position:relative; overflow:hidden; border:none; padding:0; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; }
.svc-case--feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.svc-case__overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,14,30,.72), rgba(8,14,30,.15) 55%, rgba(8,14,30,.05)); }
.svc-case--feature .svc-case__body{ position:relative; z-index:1; padding:30px; }
.svc-case--feature h3{ color:#fff; font-size:clamp(20px,2vw,26px); }
.svc-case--feature p{ color:rgba(255,255,255,.88); max-width:360px; font-size:15px; }

/* faq */
.svc-faq{ display:flex; flex-direction:column; gap:12px; max-width:840px; }
.svc-faq details{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color var(--t); }
.svc-faq details[open]{ border-color:color-mix(in srgb, var(--brand) 35%, var(--border)); }
.svc-faq summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.svc-faq summary::-webkit-details-marker{ display:none; }
.svc-faq summary::after{ content:"+"; color:var(--brand); font-size:24px; font-weight:400; line-height:1; transition:transform var(--t); }
.svc-faq details[open] summary::after{ transform:rotate(45deg); }
.svc-faq p{ padding:0 24px 22px; color:var(--text-soft); font-size:15px; line-height:1.6; }

.svc-feats{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px 28px; }
.svc-feat{ display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; }
.svc-feat .icon{ width:24px; height:24px; color:#fff; background:var(--brand); border-radius:50%; padding:4px; flex:none; stroke-width:2.6; }

.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.tier{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 28px; display:flex; flex-direction:column; transition:transform var(--t), box-shadow var(--t); }
.tier:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.tier--featured{ border-color:var(--brand); box-shadow:0 20px 50px -28px color-mix(in srgb, var(--brand) 60%, transparent); }
.tier__badge{ position:absolute; top:-12px; left:28px; background:var(--brand); color:#fff; font-size:12px; font-weight:800; padding:5px 12px; border-radius:999px; }
.tier__tag{ color:var(--text-soft); font-size:13px; font-weight:600; }
.tier__name{ font-size:22px; font-weight:800; margin:4px 0 14px; }
.tier__price{ font-size:34px; font-weight:800; letter-spacing:-1px; margin-bottom:20px; }
.tier__price span{ font-size:15px; font-weight:600; color:var(--text-soft); margin-left:4px; letter-spacing:0; }
.tier__feats{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex:1; }
.tier__feats li{ position:relative; padding-left:26px; color:var(--text-soft); font-size:15px; }
.tier__feats li::before{ content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:800; }
.tier .btn{ width:100%; }

/* ============ case (project) detail page ============ */
.case-hero{ padding-top:calc(var(--header-h) + 46px); }
.case-hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.case-hero__text .svc-back{ display:inline-block; margin-bottom:10px; }
.case-hero__tag{ display:inline-block; margin-left:16px; font-size:14px; transition:color var(--t); }
.case-hero__tag:hover{ color:var(--brand-strong); text-decoration:underline; }
.case-hero__title{ margin-bottom:14px; }
.case-hero__actions{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.case-hero__actions--mobile{ display:none; }   /* shown only on mobile (after the cover photo) */
/* CTA buttons with sliding arrows: ↓ jumps to a section, → opens the form */
.case-btn{ justify-content:space-between; gap:10px; }
.case-btn__ico{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.7; transition:transform var(--t), opacity var(--t); }
.case-btn:hover .case-btn__ico{ opacity:1; }
.case-btn:hover .case-btn__ico--right{ transform:translateX(4px); }
.case-btn:hover .case-btn__ico--down{ transform:translateY(3px); }
.case-hero__visual{ aspect-ratio:4/3; border-radius:var(--radius); box-shadow:var(--shadow);
  position:relative; overflow:hidden; }
.case-hero__visual::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 55%); }
.case-hero__visual--photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.case-hero__visual--photo::after{ background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.06), transparent 60%); }

.case-info{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; }
.case-info__lead{ font-size:clamp(16px,1.4vw,18px); font-weight:400; line-height:1.7; letter-spacing:0; color:var(--text-soft); }
.case-info__lead p{ margin:0 0 14px; }
.case-info__lead p:last-child{ margin-bottom:0; }
.case-info__note{ color:var(--text-soft); font-size:15px; line-height:1.6; margin-bottom:20px; }
.case-info__btns{ display:flex; gap:14px; flex-wrap:wrap; }
.store-btn{ display:inline-flex; align-items:center; gap:11px; padding:11px 20px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:700;
  transition:border-color var(--t), transform var(--t); }
.store-btn:hover{ border-color:var(--brand); transform:translateY(-2px); }
.store-btn svg{ width:26px; height:26px; flex:none; }
.store-btn span{ display:flex; flex-direction:column; line-height:1.15; font-size:11px; font-weight:600; color:var(--text-soft); }
.store-btn b{ font-size:16px; font-weight:800; color:var(--text); }

/* screenshots horizontal scroller */
.case-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.scroller-nav{ display:flex; gap:10px; }
.scroller-btn{ width:48px; height:48px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer; display:grid; place-items:center; transition:background var(--t), color var(--t), border-color var(--t); }
.scroller-btn:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.scroller-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.shots{ display:grid; grid-auto-flow:column; grid-auto-columns:min(560px, 82%); gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  scroll-padding-inline:var(--gutter);
  margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); padding-bottom:8px; }
.shots::-webkit-scrollbar{ display:none; }
.shot{ position:relative; aspect-ratio:16/10; border-radius:var(--radius); scroll-snap-align:start; overflow:hidden;
  display:grid; place-items:end start; padding:18px; box-shadow:var(--shadow-sm); }
.shot__cap{ color:#fff; font-weight:700; font-size:15px; background:rgba(0,0,0,.3); padding:7px 14px; border-radius:999px; }
.shot--video{ place-items:center; }
.shot__play{ width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.5); }
.shot__play svg{ width:28px; height:28px; fill:var(--brand); margin-left:3px; }
.shot--video .shot__cap{ position:absolute; bottom:18px; left:18px; }

/* technologies grid + category tabs */
.tcats{ display:flex; gap:6px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:6px; margin-bottom:26px; width:fit-content; max-width:100%; }
.tcat{ border:none; background:transparent; font:inherit; font-weight:700; font-size:15px; color:var(--text-soft);
  padding:11px 22px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--t), color var(--t); }
.tcat:hover{ color:var(--text); }
.tcat.is-active{ background:var(--brand); color:#fff; }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px; }
.tcard{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px; min-height:110px; transition:transform var(--t), border-color var(--t); }
.tcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
.tcard__name{ position:relative; z-index:1; font-size:18px; font-weight:800; color:var(--brand); }
.tcard__mark{ position:absolute; right:12px; bottom:-6px; font-size:72px; line-height:1; color:var(--text); opacity:.07; }
.tcard__mark--letter{ font-weight:800; bottom:-14px; right:8px; font-size:84px; opacity:.05; }
.tcard.is-hidden{ display:none; }

/* ============ reveal on scroll ============ */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .3s ease-out, transform .3s ease-out; }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.05s; } .reveal[data-d="2"]{ transition-delay:.1s; }
.reveal[data-d="3"]{ transition-delay:.15s; } .reveal[data-d="4"]{ transition-delay:.2s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  :root{ --header-h:64px; }
  .nav, .cta-desktop, .lang{ display:none; }
  /* keep the logo at its original mobile size (desktop bumps it larger) */
  .logo__img, .logo--footer .logo__img, .logo--footer img{ height:23px; }
  .burger{ display:flex; }
  /* nav is hidden here, so push the actions cluster (theme + burger) to the right edge */
  .header__actions{ margin-left:auto; }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; }
  .techcircle{ width:min(340px,80vw); }
  .cards--services{ grid-template-columns:1fr 1fr; }
  /* stack: accordion on top, zoomed radar below (stays visible) */
  .radar-layout{ grid-template-columns:1fr; gap:24px; }
  .radar-stage{ order:2; width:100%; max-width:460px; transform:none; }
  .about{ grid-template-columns:1fr; gap:32px; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:36px; }
  .footer__cols{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  /* contacts column spans both columns; its items lay out 2-up so the right side isn't empty */
  .footer__col--contact{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
  .footer__col--contact h4{ grid-column:1 / -1; }
  .svc-hero__inner{ grid-template-columns:1fr; gap:32px; }
  .svc-hero__media{ max-width:460px; }
  .pricing{ grid-template-columns:1fr; }
  .svc-feats{ grid-template-columns:repeat(2,1fr); }
  .svc-cases{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(170px,auto); }
  .svc-cases .svc-case:nth-child(1){ grid-column:1 / -1; grid-row:auto; min-height:260px; }
  .svc-cases .svc-case:nth-child(2){ grid-column:auto; }
  .case-hero__inner{ grid-template-columns:1fr; gap:24px; }
  /* mobile: title on top → cover photo → buttons (Screenshots + Technologies in one row, Consult full-width) */
  .case-hero__actions--inline{ display:none; }
  .case-hero__actions--mobile{ display:flex; flex-wrap:wrap; gap:10px; margin-top:0; }
  .case-hero__actions--mobile .btn{ white-space:normal; line-height:1.2; padding:14px 14px; font-size:14px; }
  .case-hero__actions--mobile .btn--ghost{ flex:1 1 0; min-width:0; background:var(--surface); }
  .case-hero__actions--mobile .btn--ghost:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
  .case-hero__actions--mobile .btn--primary{ flex:1 1 100%; box-shadow:0 10px 26px -12px color-mix(in srgb, var(--brand) 75%, transparent); }
  .case-info{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:680px){
  .section{ padding:54px 0; }
  .section__head--row{ flex-direction:column; align-items:flex-start; }

  /* wide service cards: one per row on mobile */
  /* service cards: compact, each as tall as its own content (not stretched) */
  .cards--services{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .scard{ min-height:118px; padding:20px; }
  .scard__body{ max-width:58%; }
  .scard__title{ font-size:17px; }
  /* match the web look: 3D object peeks from the bottom-right corner, scaled to the card */
  .scard__art .icon{ right:18px; bottom:16px; width:52px; height:52px; }
  .scard__img{ width:150px; height:150px; right:-26px; bottom:-32px; }
  /* "Hamısına bax" cards: scale the giant title down to the section's own card text */
  .allcard{ padding:22px; }
  .allcard__title{ font-size:18px; letter-spacing:-.2px; line-height:1.25; }
  .allcard__sub{ font-size:14px; margin-top:8px; max-width:72%; }
  .cards--services .allcard__title{ font-size:17px; }
  .blog-grid .allcard__title{ font-size:19px; }
  .allcard__arrow{ width:42px; height:42px; right:18px; bottom:18px; }
  .allcard__arrow svg{ width:18px; height:18px; }
  /* Projects / Products / Blog "Смотреть все": bigger, centered CTA slide */
  .cards--projects .allcard, .blog-grid[data-limit] .allcard{
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .cards--projects .allcard__title, .blog-grid[data-limit] .allcard__title{ font-size:26px; line-height:1.12; }
  .cards--projects .allcard__sub, .blog-grid[data-limit] .allcard__sub{ max-width:none; padding:0 12px; }
  /* mobile horizontal swiper for projects + home blog teasers */
  .cards--projects, .blog-grid[data-limit]{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:80%;
    overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:10px;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scrollbar-width:none;
  }
  .cards--projects::-webkit-scrollbar, .blog-grid[data-limit]::-webkit-scrollbar{ display:none; }
  .cards--projects .card, .cards--projects .allcard,
  .blog-grid[data-limit] .post, .blog-grid[data-limit] .allcard{ scroll-snap-align:center; }

  /* full blog/listing pages stay single-column */
  .blog-grid, .page-grid{ grid-template-columns:1fr; }
  .partner-logo{ width:150px; height:78px; }
  .marquee{ margin-top:24px; }
  /* animated hero badges → compact icon-only chips hugging the circle on mobile */
  .techcircle{ width:min(250px,64vw); }
  .tech-badge{ min-width:0; gap:0; padding:8px; border-radius:var(--radius-sm); }
  .tech-badge__txt{ display:none; }
  .tech-badge__ic{ width:34px; height:34px; border-radius:var(--radius-sm); }
  .tech-badge__ic svg{ width:20px; height:20px; }
  .tech-badge > i{ font-size:29px; width:34px; }
  .tech-badge--1{ top:4%;    right:-3%; }
  .tech-badge--2{ bottom:9%; right:-5%; }
  .tech-badge--3{ top:45%;   left:-5%;  }
  .hero__stats{ gap:24px; }
  /* keep the two hero CTAs side by side (equal width) instead of stacking */
  .hero__actions{ flex-wrap:nowrap; gap:10px; }
  .hero__actions .btn{ flex:1 1 0; min-width:0; padding:13px 12px; font-size:clamp(13px, 3.4vw, 15px);
    white-space:normal; line-height:1.25; text-align:center; }
  /* trim the oversized gap between the hero and the first section */
  .hero{ padding-bottom:18px; }
  .hero + .section{ padding-top:28px; }
  .header__inner{ gap:12px; }
  /* hero/detail headers must clear the fixed header (the .section 54px override is too small) */
  .case-hero, .svc-hero{ padding-top:calc(var(--header-h) + 46px); }
  /* project tech section: compact scrollable filter + 2 cards per row */
  .tcats{ flex-wrap:nowrap; overflow-x:auto; margin-bottom:18px; scrollbar-width:none; }
  .tcats::-webkit-scrollbar{ display:none; }
  .tcat{ flex:none; padding:9px 14px; font-size:14px; white-space:nowrap; }
  .tgrid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .tcard{ padding:14px; min-height:90px; }
  .tcard__name{ font-size:15px; }
  .tcard__mark{ font-size:54px; right:8px; bottom:-4px; }
  .tcard__mark--letter{ font-size:60px; bottom:-10px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .modal{ padding:28px 22px; border-radius:var(--radius); }
  .svc-feats{ grid-template-columns:1fr; }
  .svc-metrics{ grid-template-columns:1fr; }
  .svc-cases{ grid-template-columns:1fr; }
  .svc-cases .svc-case:nth-child(1){ grid-column:auto; grid-row:auto; min-height:220px; }
  .svc-cases .svc-case:nth-child(2){ grid-column:auto; }
}