/* =============================================================
   UL Soft — global styles
   Reusable tokens + components shared across all site pages
   ============================================================= */

/* Font "Onest" is loaded via <link> in the document head */

/* ---------- Design tokens ---------- */
:root {
  --blue:        #0F67FE;
  --blue-600:    #1160E3;
  --blue-700:    #1764E4;
  --blue-100:    #D0E4FF;
  --blue-050:    #CFE3FE;

  --ink:         #242E49;
  --ink-900:     #10141F;
  --ink-700:     #303C58;
  --ink-600:     #5D6A85;
  --ink-500:     #818BA0;
  --placeholder: #A8B1C0;

  --bg:          #FFFFFF;
  --surface:     #F2F5F9;
  --surface-2:   #F8FAFC;
  --card-navy:   #242E49;

  /* neo-glass accents (currently: PROCESS block) */
  --void:        #0A0F1E;
  --neon-cyan:   #5FA8FF;
  --neon-blue:   #2E8CFF;
  --glass-fill:  rgba(255,255,255,.07);
  --glass-hover: rgba(255,255,255,.12);
  --glass-line:  rgba(255,255,255,.16);

  --r-panel:  30px;
  --r-card:   24px;
  --r-md:     20px;
  --r-btn:    12px;
  --r-input:  10px;

  --container: 1600px;
  --panel-max: 2200px;
  --gutter:    20px;
  --stack-gap: clamp(6px, .8vw, 12px);

  --shadow-card: 0 3px 6px rgba(210,224,243,.55), 0 10px 10px rgba(210,224,243,.30),
                 0 23px 14px rgba(210,224,243,.14);
  --shadow-soft: -1px 7px 8px rgba(17,21,34,.08), -4px 29px 14px rgba(17,21,34,.07),
                 -10px 64px 20px rgba(17,21,34,.05);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* like .container, but content lands at exactly --container width with no
   further shrinkage once capped — matches .panel's inner content width */
.container-wide {
  width: 100%;
  max-width: var(--panel-max);
  margin-inline: auto;
  /* same inset as the hero text, so every section's content zone lines up
     with the banner's on both sides */
  padding-inline: clamp(20px, 8vw, 150px);
}

/* wider still — content runs almost edge to edge of --panel-max, aligned
   with the hero banner's own outer edge instead of the standard --container column */
.container-full {
  width: 100%;
  max-width: var(--panel-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 8vw, 150px);
}

/* one vertical rhythm for the whole page: every gap between two blocks is
   twice this, so panels and plain sections sit the same distance apart */
.section        { padding-block: clamp(24px, 3vw, 44px); }
.section--flush  { padding-block: 0; }

/* full-bleed rounded section block */
.panel {
  max-width: var(--panel-max);
  margin-inline: auto;
  border-radius: var(--r-panel);
  padding-block: clamp(44px, 4.6vw, 86px);
  padding-inline: clamp(20px, 8vw, 150px);
}
.panel--grey { background: var(--surface); }
.panel--navy { background: var(--card-navy); color: #fff; }
.panel--blue {
  background:
    radial-gradient(900px 500px at 88% -10%, rgba(15,103,254,.14), transparent 60%),
    var(--blue-050);
}
.panel--blue-100 {
  background:
    radial-gradient(700px 420px at 12% 110%, rgba(15,103,254,.12), transparent 60%),
    var(--blue-100);
  border-radius: 16px;
}

/* ---------- Typography ---------- */
.h-section {
  font-weight: 800;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
/* the coloured second half of a title on the dark panels */
.h-section__accent { color: var(--neon-cyan); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.18px;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--blue);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 32px;
  min-height: 62px;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.15;
  text-align: center;
  transition: filter .15s ease, transform .12s ease;
}
.btn:hover  { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn__icon       { width: 22px; height: 22px; flex: none; }
.btn__icon--sm   { width: 19px; height: 19px; }

.btn--lg   { min-height: 64px; font-size: 18px; }
.btn--xl   { min-height: 72px; font-size: 18px; padding-inline: 40px; }
.btn--wide { width: 100%; }
.btn--blue-700 { --btn-bg: var(--blue-700); font-weight: 700; }
.btn--light { --btn-bg: var(--surface); --btn-fg: var(--blue); font-weight: 600; }
.btn--navy  { --btn-bg: #1F2840; --btn-fg: #fff; }

/* ---------- Icon badge / square ---------- */
.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  flex: none;
  border-radius: var(--r-btn);
  background: var(--ink);
}
.icon-badge img { width: 24px; height: 24px; }

.icon-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  flex: none;
  border-radius: var(--r-btn);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,103,254,.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 18px rgba(15,103,254,.22);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.icon-square:hover {
  background: #fff;
  border-color: rgba(95,168,255,.6);
  box-shadow: 0 0 0 1px rgba(95,168,255,.4), 0 10px 26px rgba(46,140,255,.32);
  transform: translateY(-1px);
}
.icon-square img { width: 18px; height: 18px; }
.icon-square--sm { width: 44px; height: 44px; border-radius: 12px; }
.icon-square--sm img { width: 16px; height: 16px; }

/* header contact — phone + messenger icons, replacing the repeated hero CTA */
.header-contact { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); flex: none; }
.header-contact__phone {
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 17px);
  color: #fff;
  white-space: nowrap;
  transition: color .15s ease;
}
.header-contact__phone:hover { color: #B0DBFF; }
.header-contact__socials { display: flex; gap: 12px; }

/* ---------- Check list ---------- */
.check-list { display: flex; flex-direction: column; gap: 16px; }
.check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.check-list li::before {
  content: "";
  width: 24px; height: 24px;
  flex: none;
  background: center / contain no-repeat url('../assets/icon-check-square.svg');
}

.price { font-weight: 700; font-size: 18px; color: var(--ink-900); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* =============================================================
   HEADER + HERO
   ============================================================= */
.hero-wrap {
  position: relative;
  max-width: var(--panel-max);
  margin-inline: auto;
  background: #dcebfd top center / cover no-repeat url('../assets/hero-bg.jpg');
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  overflow: hidden;
}
/* new concept: dark gradient + product-device illustration (client-supplied image) */
.hero-wrap--dark {
  background: #0A1428 78% center / cover no-repeat url('../assets/hero-bg-2.jpg');
}
.hero-wrap--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(5,10,24,.88) 0%, rgba(5,10,24,.55) 38%, rgba(5,10,24,0) 66%);
  pointer-events: none;
}

.site-header { position: relative; z-index: 5; padding-top: clamp(14px, 2vw, 24px); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 100px);
  width: auto;
  max-width: none;
  padding: 14px clamp(28px, 3.2vw, 44px);
  /* equal left/right insets — centers the pill, and since both sides use the
     same value as the hero text's own inset, its left edge lines up with the
     text above it. Width is left to auto so it fills exactly what's between
     the two margins (no dead trailing space); justify-content spreads any
     leftover room between the three items instead of stretching nav alone. */
  margin-left: clamp(20px, 8vw, 150px);
  margin-right: clamp(20px, 8vw, 150px);
  background: rgba(7,13,30,.42);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(91,147,255,.22), 0 12px 34px rgba(6,12,32,.45);
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__mark { width: 54px; height: 64px; flex: none; object-fit: contain; }
.brand__name {
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 34px);
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .5px;
  white-space: nowrap;
}

.nav {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: clamp(14px, 1.8vw, 44px);
  max-width: 820px;
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
}
.nav a {
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  color: rgba(255,255,255,.78);
  transition: color .15s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: right .2s ease;
}
.nav a:hover, .nav a.is-active { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { right: 0; }

/* hero body */
.hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  /* every banner is the same height — the services page's: its content
     (a two-line title) plus the original padding. A longer title, like the
     homepage's, eats into the padding instead of growing the banner */
  min-height: calc(472px + 2 * clamp(64px, 8.5vw, 150px));
  padding-block: clamp(40px, 4.6vw, 72px);
}
.hero--left { text-align: left; }
.hero--left .container {
  width: 100%;
  max-width: var(--panel-max);
  margin-inline: auto;
  /* same max-width + auto-centering as the hero-wrap itself, so this box's edge
     already tracks the banner's edge — padding alone gives a fixed, constant
     distance from it on any monitor instead of drifting with centering slack */
  padding-left: clamp(20px, 8vw, 150px);
  padding-right: var(--gutter);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
}
.hero__title {
  max-width: 1246px;
  margin: 0 auto;
  font-weight: 800;
  /* match the type scale used by #portfolio/#services headings, for
     consistency with the rest of the site's section titles */
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.08;
  color: var(--ink-900);
  overflow-wrap: break-word;
}
.hero--left .hero__title {
  max-width: 830px;
  margin: 22px 0 0;
  color: #fff;
}
.hero__title-accent { color: var(--neon-cyan); }
@media (min-width: 761px) {
  .hero__title-accent { white-space: nowrap; }
}
.hero__subtitle {
  margin-top: 26px;
  font-weight: 600;
  font-size: clamp(16px, 2.15vw, 28px);
  color: var(--blue);
  overflow-wrap: break-word;
}
.hero--left .hero__subtitle {
  max-width: 560px;
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px);
  color: rgba(255,255,255,.78);
}
.hero__cta  { margin-top: 40px; display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.hero--left .hero__cta { justify-content: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .hero__cta .cta-pill:hover { box-shadow: 0 0 0 2px rgba(95,168,255,.5), 0 10px 24px rgba(15,103,254,.25), 0 0 34px 6px rgba(95,168,255,.4); }
}
.hero__note { margin-top: 22px; font-size: 16px; color: var(--ink); }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 48px);
  padding: 0;
  list-style: none;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
}
.hero__trust svg { width: 20px; height: 20px; flex: none; color: var(--neon-cyan); }

/* industry selector */
.stats {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 6vw, 90px);
  padding-bottom: clamp(28px, 3.5vw, 52px);
}
/* slim transparent glass bar — replaces the old boxed stat tiles */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.7);
  padding: 22px clamp(16px, 3vw, 40px);
}
.stats-bar__item { position: relative; text-align: center; }
.stats-bar__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 1px; height: 32px;
  background: rgba(16,20,31,.14);
}
.stats-bar__value {
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: var(--ink-900);
}
.stats-bar__label {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-700);
}

/* =============================================================
   SERVICES
   ============================================================= */
.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
/* the note and the "Все услуги" pill sit together on the right, the pill
   on the title's baseline like "Все проекты" in the projects block */
.services__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.services__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-500);
  text-align: right;
}

/* pricing: a stack of soft glass cards, one per service — icon, name,
   tags, a one-line pitch and the price, each column split by a hairline.
   Every row uses the same grid template, so the columns line up down
   the stack. */
.price-table {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.price-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1.12fr) minmax(0, 1.02fr) minmax(0, .86fr) 230px auto;
  align-items: center;
  column-gap: clamp(16px, 1.7vw, 28px);
  padding: 30px 34px 30px 28px;
  border-radius: var(--r-panel);
  border: 1px solid rgba(15,103,254,.08);
  background: linear-gradient(180deg, #fff, var(--surface-2));
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.price-row:hover {
  border-color: rgba(15,103,254,.22);
  box-shadow: 0 3px 6px rgba(190,214,248,.6), 0 14px 30px rgba(15,103,254,.10);
  transform: translateY(-2px);
}
.price-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px; height: 92px;
  border-radius: 50%;
  color: var(--blue);
  background: linear-gradient(160deg, #fff, var(--surface));
  box-shadow: inset 0 0 0 1px rgba(15,103,254,.07), 0 6px 14px rgba(190,214,248,.55);
}
.price-row__service {
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.2;
  color: var(--ink-900);
}
.price-row__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-size: 16px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(15,103,254,.14);
  background: rgba(255,255,255,.7);
  color: var(--ink-700);
  white-space: nowrap;
}
.price-row__desc,
.price-row__price {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: clamp(16px, 1.7vw, 28px);
  border-left: 1px solid rgba(15,103,254,.10);
}
.price-row__desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-600);
}
.price-row__price {
  font-weight: 700;
  font-size: clamp(21px, 1.9vw, 30px);
  color: var(--ink-900);
  white-space: nowrap;
}
/* "/ мес." drops under the figure so every price keeps one width */
.price-row__price { flex-wrap: wrap; align-content: center; }
.price-row__unit {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: .55em;
  font-weight: 600;
  color: var(--ink-500);
}
.price-row__arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(15,103,254,.18);
  background: #fff;
  color: var(--blue);
  box-shadow: 0 4px 12px rgba(190,214,248,.6);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.price-row:hover .price-row__arrow-circle {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateX(2px);
}
.price-row__arrow-circle svg { width: 20px; height: 20px; }
.price-row__icon svg { width: 34px; height: 34px; }

/* narrower desktops: tags move under the service name so the pitch and
   price keep enough room */
@media (max-width: 1500px) and (min-width: 1201px) {
  .price-row {
    grid-template-columns: 108px minmax(0, 1.6fr) minmax(0, 1fr) 210px auto;
    grid-template-areas:
      "icon name desc price arrow"
      "icon tags desc price arrow";
    row-gap: 12px;
  }
  .price-row__icon { grid-area: icon; width: 80px; height: 80px; }
  .price-row__service { grid-area: name; align-self: end; }
  .price-row__tags { grid-area: tags; align-self: start; flex-wrap: nowrap; gap: 8px; }
  .price-row .tag { font-size: 14px; padding: 7px 14px; }
  .price-row__desc { grid-area: desc; font-size: 16px; }
  .price-row__price { grid-area: price; }
  .price-row__arrow-circle { grid-area: arrow; }
}

@media (max-width: 1360px) and (min-width: 1201px) {
  .price-row__tags { flex-wrap: wrap; }
}

/* below desktop: icon + name on top, then tags, pitch, price + arrow */
/* the header pill stops fitting on one line below ~1360px: the nav drops
   to its own row under the logo and contacts */
@media (max-width: 1360px) {
  .site-header__inner { flex-wrap: wrap; gap: 14px; border-radius: var(--r-panel); }
  .nav { order: 3; flex-basis: 100%; min-width: 0; max-width: none; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .header-contact { margin-left: auto; }
}

@media (max-width: 1200px) {
  .price-row {
    grid-template-columns: 104px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon name  arrow"
      "icon tags  arrow"
      "icon desc  arrow"
      "icon price arrow";
    row-gap: 10px;
    align-items: start;
  }
  .price-row__icon { grid-area: icon; width: 64px; height: 64px; }
  .price-row__icon svg { width: 28px; height: 28px; }
  .price-row__service { grid-area: name; }
  .price-row__tags { grid-area: tags; }
  .price-row__desc { grid-area: desc; }
  .price-row__price { grid-area: price; }
  .price-row__arrow-circle { grid-area: arrow; align-self: center; }
  .price-row__desc,
  .price-row__price { padding-left: 0; border-left: none; }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service {
  position: relative;
  min-height: 529px;
  padding: 40px;
  background-color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-md);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* cursor-tracked spotlight — same cyan→blue accent used in "Как мы работаем" */
.service {
  /* soft, muted glow that stays local to the cursor instead of washing the whole card */
  background-image: radial-gradient(
    260px 260px at calc(var(--sx, -9999) * 1px) calc(var(--sy, -9999) * 1px),
    rgba(95,168,255,.16), rgba(46,140,255,.08) 35%, transparent 62%
  );
  background-repeat: no-repeat;
  /* the shadow layer carries the outer bloom that brightens as the cursor nears an edge */
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.9), var(--edge-glow, 0 0 0 rgba(0,0,0,0));
}
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%);
  pointer-events: none;
}
/* crisp ring, in-brand cyan → dark navy, that lights up the border edge nearest the cursor */
.service::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2.5px;
  border-radius: inherit;
  background: radial-gradient(
    460px 460px at calc(var(--sx, -9999) * 1px) calc(var(--sy, -9999) * 1px),
    rgba(95,168,255,1), rgba(17,96,227,1) 45%, rgba(17,96,227,.6) 72%, transparent 90%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .service:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(95,168,255,.35), var(--edge-glow, 0 0 0 rgba(0,0,0,0));
  }
}
.service__body { position: relative; z-index: 2; max-width: 350px; }
.service__title {
  font-weight: 700;
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.2;
  color: var(--ink-900);
}
.service__text  { margin-top: 20px; font-size: 15px; line-height: 1.35; color: var(--ink-700); }
.service__text p + p,
.service__text p + ul,
.service__text ul + p { margin-top: .7em; }
.service__text .accent { color: var(--blue-600); }
.service__text ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.service__price  { margin-top: 24px; }
.service .icon-square { margin-top: 22px; }

.service__illus {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}
.service__illus--right {
  inset: 0 0 0 auto;
  width: 55%;
  height: 100%;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  object-fit: contain;
  object-position: right bottom;
}

/* one accent card — dark, mirrors the neon highlight used in "Как мы работаем" */
.service--accent { background-color: rgba(16,20,31,.94); border-color: rgba(255,255,255,.12); }
.service--accent::before {
  background: linear-gradient(160deg, rgba(16,20,31,.8), rgba(16,20,31,.3) 45%, rgba(16,20,31,.78));
}
.service--accent .service__illus { filter: brightness(.55) saturate(1.15); }
.service--accent .service__title,
.service--accent .service__price { color: #fff; }
.service--accent .service__text { color: rgba(255,255,255,.72); }
.service--accent .service__text .accent { color: var(--neon-cyan); }
.service--accent .icon-square {
  background: var(--glass-fill);
  border-color: var(--glass-line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.service--accent .icon-square:hover { background: var(--glass-hover); }

/* card 1 — tall, button pinned to bottom over the illustration */
.service--tall {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.service__cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  width: 100%;
  justify-content: center;
  font-weight: 500;
  padding-inline: 18px;
}

/* card 4 — wide */
.service--wide {
  grid-column: 2 / span 2;
  grid-row: 2;
  min-height: 313px;
}

/* =============================================================
   OWN PRODUCT — one light card: app shots with floating glass icons,
   the statement with store buttons, and four fact tiles
   ============================================================= */

.product-section { container-type: inline-size; }
/* the app scene is the panel's background, anchored right: its phones
   sit on the right, its own empty left part melts into the panel, and
   the text takes the left column on the content zone */
.product {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  align-items: center;
  min-height: max(420px, 31cqw);
  /* full-bleed like the process panel; .panel's inline padding puts the
     text on the site's content zone */
  --product-pad: clamp(20px, 8vw, 150px);
  padding-block: clamp(28px, 3.4vw, 56px);
  padding-inline: var(--product-pad);
  border-radius: var(--r-panel);
  background: linear-gradient(90deg, #E8F1FD, #DCEBFD 50%, #D2E5FD);
}
.product::before {
  content: "";
  position: absolute;
  top: 50%; right: 0;
  /* sized by the panel's width, not its height, so a taller panel (more
     wrapped text) never pushes the phones under the text */
  width: 82%;
  aspect-ratio: 2103 / 748;
  transform: translateY(-50%);
  background: url("../assets/product-bg.jpg") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 18%), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
  pointer-events: none;
}
.product__main { position: relative; z-index: 1; grid-column: 1; }

.product__badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  box-shadow: inset 0 0 0 1px rgba(15,103,254,.14);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
}
.product__statement {
  font-weight: 800;
  font-size: clamp(22px, 1.9vw, 32px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.product__accent { color: var(--blue); }
.product__note {
  margin-top: 16px;
  max-width: 620px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink-700);
}
.product__stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 2.4vw, 28px); }
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15,103,254,.18);
  box-shadow: 0 6px 18px rgba(15,103,254,.12);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.store-btn__logo { width: 22px; height: 22px; flex: none; color: var(--ink-900); }
.store-btn__logo--play { color: var(--blue); }
.store-btn__arrow { width: 18px; height: 18px; color: var(--blue); transition: transform .2s ease; }
.store-btn:hover { border-color: rgba(15,103,254,.4); box-shadow: 0 0 0 1px rgba(95,168,255,.35), 0 10px 26px rgba(15,103,254,.2); transform: translateY(-1px); }
.store-btn:hover .store-btn__arrow { transform: translateX(3px); }

/* stacked: the scene becomes a band on top, the text goes under it */
@media (max-width: 1200px) {
  .product { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .product::before { display: none; }
  .product__main { grid-column: 1; }
  .product::after {
    content: "";
    order: -1;
    display: block;
    margin: 0 calc(-1 * var(--product-pad)) 8px;
    aspect-ratio: 1383 / 748;
    background: url("../assets/product-bg.jpg") right center / 152% 100% no-repeat;
    -webkit-mask-image: linear-gradient(#000 80%, transparent);
    mask-image: linear-gradient(#000 80%, transparent);
  }
}

/* =============================================================
   PROCESS — neo-glass Gantt timeline
   ============================================================= */
/* text column runs parallel to the step row, like the reference */
.process__row {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 100px);
  flex-wrap: wrap;
}
.process__intro { position: relative; z-index: 1; flex: 0 0 clamp(320px, 32vw, 460px); }
.process__intro .hero__eyebrow { margin-bottom: 18px; }
.process__title { color: #fff; }
.process__title-accent { color: var(--neon-cyan); display: block; }
@media (min-width: 761px) {
  .process__title { white-space: nowrap; }
  .process__title-accent { white-space: nowrap; }
}
.process__intro p { margin-top: 16px; color: rgba(255,255,255,.78); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.35; }
.process__head-cta { margin-top: 26px; display: inline-flex; }

/* deep, glow-ready backdrop for this panel only — matches the hero banner's
   dark-tech illustration, keeping the two dark sections visually consistent */
.panel--neo {
  position: relative;
  background: #0A1428 center / cover no-repeat url('../assets/process-bg.jpg');
  overflow: hidden;
  padding-block: clamp(32px, 3vw, 56px);
}
.panel--neo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(5,10,24,.7) 0%, rgba(5,10,24,.4) 45%, rgba(5,10,24,.6) 100%);
  pointer-events: none;
}

/* milestone row: numbered circle + connecting line, matching the reference */
.timeline {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 280px;
  /* lined up so the dots sit level with the blue accent line of the heading */
  margin-top: 110px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 30px;
}
.timeline__item { position: relative; text-align: center; }
/* dot is centered within its column (via text-align); the connector's width
   must add back the column-gap (30px) since left+right alone only spans
   this item's own box, falling short by exactly the gap */
.timeline__item:not(:nth-child(4n))::after {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(50% + 32px);
  width: calc(100% - 64px + 30px);
  height: 2px;
  background: linear-gradient(90deg, rgba(95,168,255,.9), rgba(95,168,255,.25));
  box-shadow: 0 0 8px rgba(95,168,255,.5);
}
.timeline__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(95,168,255,.14);
  border: 1px solid var(--neon-cyan);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(95,168,255,.4), 0 0 24px 4px rgba(95,168,255,.55);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  text-align: center;
}
.timeline__title {
  margin: 16px 0 0;
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 23px);
  letter-spacing: -.2px;
  color: #fff;
}
.timeline__text { margin-top: 8px; color: rgba(255,255,255,.68); font-size: 14px; font-weight: 500; line-height: 1.4; }

@media (max-width: 1000px) {
  .process__row { flex-direction: column; align-items: stretch; }
  .process__intro { flex-basis: auto; }
}
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: 32px; }
  .timeline__item::after { display: none; }
}

.process__foot {
  position: relative;
  z-index: 1;
  margin-top: clamp(20px, 2.4vw, 32px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.process__foot p { margin: 0; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; color: #fff; }

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(95,168,255,.3), 0 6px 20px rgba(46,140,255,.2);
  transition: box-shadow .2s ease, transform .2s ease;
}
.cta-pill:hover { box-shadow: 0 0 0 1px rgba(95,168,255,.6), 0 10px 30px rgba(46,140,255,.35); transform: translateY(-1px); }
.cta-pill__dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: #B0DBFF;
  box-shadow: 0 0 8px 2px rgba(176,219,255,.55);
}

/* light-background variant — same glass-pill language, tuned for light panels */
.cta-pill--light {
  background: rgba(255,255,255,.88);
  border-color: rgba(15,103,254,.4);
  color: var(--ink-900);
  box-shadow: 0 0 0 1px rgba(15,103,254,.2), 0 8px 26px rgba(15,103,254,.22);
}
.cta-pill--light:hover { background: #fff; box-shadow: 0 0 0 1px rgba(95,168,255,.55), 0 10px 32px rgba(46,140,255,.32); }
.cta-pill--light .cta-pill__dot {
  background: linear-gradient(120deg, #B0DBFF, var(--neon-blue));
  box-shadow: 0 0 10px 3px rgba(159,208,255,.6);
}

/* larger variant for prominent standalone CTAs (hero) */
.cta-pill--lg { padding: 18px 30px 18px 24px; font-size: 17px; font-weight: 700; }
.cta-pill--lg .cta-pill__dot { width: 10px; height: 10px; }

/* =============================================================
   DISCOUNT BANNER
   ============================================================= */
.discount {
  position: relative;
  overflow: hidden;
  min-height: 314px;
  display: flex;
  align-items: center;
  padding-block: 24px;
}
.discount__illus {
  position: absolute;
  right: clamp(30px, 12vw, 250px);
  top: 50%;
  transform: translateY(-50%);
  height: 165%;
  width: auto;
  pointer-events: none;
}
.discount__grid {
  position: relative;
  z-index: 2;
  width: 100%;
}
.discount__title { max-width: 620px; }
.discount__actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* ---- experimental "Hex"-reference cool-glass tone, tried here first ---- */
.discount--cool {
  background:
    radial-gradient(900px 700px at 82% 55%, rgba(91,147,255,.28), transparent 62%),
    radial-gradient(700px 500px at 30% 0%, rgba(91,147,255,.1), transparent 60%),
    linear-gradient(160deg, #0B0E16, #10141F 55%, #0B0E16);
}
.discount--cool .discount__title { color: #fff; }
.discount--cool .discount__illus {
  filter: brightness(.82) saturate(1.15) drop-shadow(0 25px 50px rgba(0,0,0,.6));
  -webkit-mask-image: radial-gradient(ellipse 66% 72% at 50% 54%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 66% 72% at 50% 54%, #000 50%, transparent 100%);
}

.discount--smallillus .discount__illus {
  right: clamp(20px, 6vw, 90px);
  height: auto;
  width: clamp(120px, 12vw, 190px);
  top: auto;
  bottom: -18px;
  transform: none;
  opacity: .9;
}
.discount--smallillus .discount__actions { position: static; transform: none; margin-top: 28px; }

.cta-pill--cool {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(91,147,255,.3), 0 12px 34px rgba(6,12,32,.55);
}
.cta-pill--cool:hover {
  background: rgba(255,255,255,.13);
  box-shadow: 0 0 0 1px rgba(130,175,255,.55), 0 14px 40px rgba(46,91,255,.4);
}
.cta-pill--cool .cta-pill__dot {
  background: #B0DBFF;
  box-shadow: 0 0 10px 3px rgba(176,219,255,.6);
}

/* =============================================================
   PROJECTS SHOWCASE — light glass cases, same material as the hero stats bar
   ============================================================= */
.portfolio-panel {
  border-radius: var(--r-panel);
  /* no background here, so only the top needs extra room: the hero above
     isn't a .section, the rest comes from the shared section rhythm */
  padding-block: clamp(24px, 3vw, 44px) 0;
}

.cases__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.cases__head-text { max-width: 820px; }
.cases__head .h-section { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cases__head p { margin-top: 12px; color: var(--ink-700); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.4; }

.text-neon-accent { color: inherit; }

.cases__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* "Все проекты" and "Все услуги" sit one under the other on the right:
   same width so both edges line up */
.cases__actions .cta-pill,
.services__actions .cta-pill { min-width: 200px; justify-content: center; }
.cases__nav { display: flex; gap: 8px; }
.cases__nav-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(16,20,31,.22);
  color: var(--ink-900);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
/* same blue fill on hover as the arrow circles across the site */
.cases__nav-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.cases__nav-btn:active { transform: translateY(1px); }
.cases__nav-btn svg { width: 20px; height: 20px; }

.cases {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(14px, 1.4vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* a scroller clips on both axes, so it gets room for the cards' soft
     shadow on every side; the negative margins keep the cards where they were */
  margin: calc(clamp(22px, 2.6vw, 32px) - 8px) -24px -40px;
  padding: 8px 24px 40px;
  scroll-padding-inline: 24px;
}
.cases::-webkit-scrollbar { display: none; }

/* project card: soft white glass, a type chip with an icon on top, the
   preview in the middle on a light blue backdrop, platform tags below */
.case-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: min(410px, 82vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-panel);
  border: 1px solid rgba(15,103,254,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,247,255,.92));
  box-shadow: 0 3px 6px rgba(190,214,248,.45), 0 14px 30px rgba(15,103,254,.07), inset 0 1px 0 #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .case-card:hover {
    transform: translateY(-3px);
    border-color: rgba(15,103,254,.2);
    box-shadow: 0 3px 6px rgba(190,214,248,.6), 0 18px 38px rgba(15,103,254,.12), inset 0 1px 0 #fff;
  }
}

.case-card__top { display: flex; align-items: center; gap: 8px; }
.case-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(15,103,254,.1), 0 4px 10px rgba(190,214,248,.6);
}
.case-card__icon svg { width: 18px; height: 18px; }
.case-card__type {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15,103,254,.1);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
}

.case-card__title { color: var(--ink-900); font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; line-height: 1.2; }
.case-card__text { color: var(--ink-600); font-size: 15px; line-height: 1.5; }

.case-card__media {
  margin-top: auto;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(15,103,254,.18), transparent 70%),
    linear-gradient(160deg, #EAF2FF, #D6E6FD);
  box-shadow: inset 0 0 0 1px rgba(15,103,254,.06);
}
.case-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* a bare app screenshot: framed as a phone rising from the bottom edge */
.case-card__media--phone { display: flex; justify-content: center; }
.case-card__media--phone img {
  width: 56%;
  height: auto;
  align-self: flex-start;
  margin-top: 22px;
  object-fit: initial;
  border: 6px solid #10141F;
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 14px 34px rgba(15,40,90,.28);
}
.case-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15,103,254,.1), 0 3px 8px rgba(190,214,248,.45);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
}
.case-card__chip--dot::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue);
}

/* on large monitors (24"+ class widths), let cards grow instead of leaving empty panel space */
@media (min-width: 1900px) {
  .case-card { width: min(520px, 28vw); }
}

/* =============================================================
   FREE TEST
   ============================================================= */
.freetest {
  position: relative;
  overflow: hidden;
  min-height: 578px;
  display: flex;
  align-items: center;
}
.freetest__illus {
  position: absolute;
  right: clamp(-30px, 0vw, 20px);
  top: clamp(12px, 2.4vw, 34px);
  width: min(49%, 700px);
  height: auto;
  pointer-events: none;
}
.freetest__body { position: relative; z-index: 2; max-width: 640px; }
.freetest__title {
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.12;
  color: var(--ink);
}
.freetest .btn-row { margin-top: 40px; }

/* =============================================================
   FAQ
   ============================================================= */
#faq { padding-bottom: 0; }
/* own product, "Как мы работаем", FAQ and the form are a run of full-bleed panels:
   a tight gap between them instead of the page's section rhythm */
#growth { padding-bottom: var(--stack-gap); }
#process { padding-block: var(--stack-gap); }
.faq-section { padding-block: var(--stack-gap); }
#faq { padding-top: var(--stack-gap); }
.faq-section { container-type: inline-size; }
/* one light glass panel: the illustration fills it as a background (it
   sits in the lower-left of the picture), the intro text on its top-left,
   and the questions as white glass cards on the right */
.faq-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  /* the illustration is bottom-anchored and 0.4× the panel width tall;
     this keeps its glass bubbles below the intro text at any width */
  min-height: calc(23cqw + 470px);
  /* full-bleed like the process panel; the inline padding is .panel's,
     so the text lands on the site's content zone */
  --faq-pad: clamp(20px, 8vw, 150px);
  padding-inline: var(--faq-pad);
  border-radius: var(--r-panel);
  /* the picture's top edge runs white → light blue → white; the panel
     carries the same gradient so the picture can fade into it */
  background: linear-gradient(90deg, #EEF5FE, #D4E9FC 25%, #DDEDFD 50%, #EAF3FD 75%, #F1F7FE);
}
/* the illustration keeps its full width and sits on the panel's bottom
   edge, so it stays below the intro text; its top edge is feathered */
.faq-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  aspect-ratio: 1983 / 793;
  background: url("../assets/faq-bg.jpg") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
  mask-image: linear-gradient(to bottom, transparent, #000 22%);
  pointer-events: none;
}
.faq-panel__intro { position: relative; z-index: 1; max-width: 560px; }
.faq-panel__badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.85);
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}
.faq__title { margin-bottom: 16px; }
.faq-panel__lead {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
  color: var(--ink-700);
}

.accordion { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.accordion__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.9);
  background-color: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(15,103,254,.08);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.accordion__item:hover { background-color: rgba(255,255,255,.78); }
.accordion__item[open] {
  background-color: rgba(255,255,255,.88);
  box-shadow: 0 0 0 1px rgba(95,168,255,.35), 0 12px 32px rgba(15,103,254,.14);
}
.accordion__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px 20px 28px;
  font-weight: 700;
  font-size: clamp(17px, 1.35vw, 21px);
  letter-spacing: -.2px;
  color: var(--ink-900);
}
.accordion__item summary::-webkit-details-marker { display: none; }
/* same arrow circle as the pricing rows; it turns down and fills blue
   when the answer is open */
.accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(15,103,254,.18);
  background: #fff;
  color: var(--blue);
  box-shadow: 0 4px 12px rgba(190,214,248,.6);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.accordion__toggle svg { width: 18px; height: 18px; transition: transform .2s ease; }
.accordion__item summary:hover .accordion__toggle { border-color: rgba(15,103,254,.4); }
.accordion__item[open] .accordion__toggle { background: var(--blue); border-color: var(--blue); color: #fff; }
.accordion__item[open] .accordion__toggle svg { transform: rotate(90deg); }
.accordion__panel { padding: 0 28px 26px; }
.accordion__panel p { margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--ink-600); }

/* contact form — full-bleed dark panel like the process block: the neon
   laptop scene fills it (bottom-anchored, so it stays under the intro
   text), the form sits on a glass card on the right */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.contact-section { container-type: inline-size; }
.contact {
  --contact-pad: clamp(20px, 8vw, 150px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  /* the scene is 1/3 of the panel width tall and the laptop starts a third
     of the way down it, so this keeps the laptop below the intro */
  min-height: calc(22cqw + 380px);
  padding-inline: var(--contact-pad);
  background: #021433;
  color: #fff;
}
.contact::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  aspect-ratio: 2170 / 725;
  background: url("../assets/contact-bg.jpg") center / 100% 100% no-repeat;
  /* both edges feathered: the bottom one melts into the footer below */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 82%, transparent);
  pointer-events: none;
}
/* the form and the footer read as one block: no gap, no inner corners */
.contact-section { padding-bottom: 0; }
.contact { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.contact__intro,
.contact__form { position: relative; z-index: 1; }
.contact__badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(95,168,255,.35);
  background: rgba(15,40,90,.45);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
}
.contact__title { margin-bottom: 16px; color: #fff; }
.contact__lead {
  margin: 0;
  max-width: 560px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}

/* dark glass card, lifted off the scene: a lighter navy fill, a neon
   gradient rim and a soft blue glow around it */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2vw, 32px);
  border-radius: var(--r-panel);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(46,140,255,.18), transparent 60%),
    linear-gradient(160deg, rgba(22,44,92,.86), rgba(8,20,48,.82));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(95,168,255,.18),
    0 0 48px rgba(46,140,255,.28),
    0 24px 60px rgba(0,8,30,.55);
}
.contact__form::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(150,205,255,.95), rgba(46,140,255,.55) 40%, rgba(46,140,255,.12) 70%, rgba(95,168,255,.7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.cfield { position: relative; display: block; }
.cfield__icon {
  position: absolute;
  left: 18px; top: 18px;
  width: 22px; height: 22px;
  color: rgba(255,255,255,.7);
  pointer-events: none;
}
.cfield__input {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 16px 18px 16px 54px;
  border-radius: 14px;
  border: 1px solid rgba(95,168,255,.32);
  background: rgba(255,255,255,.06);
  font: inherit;
  font-size: 16px;
  color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cfield__input::placeholder { color: rgba(255,255,255,.62); }
.cfield__input:focus {
  outline: none;
  border-color: #2E8CFF;
  box-shadow: 0 0 0 3px rgba(46,140,255,.22);
}
.cfield--area .cfield__input { min-height: 108px; resize: vertical; }

.cdrop {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 16px 20px;
  border-radius: 14px;
  border: 1px dashed rgba(95,168,255,.45);
  background: rgba(8,22,52,.35);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cdrop:hover { border-color: #2E8CFF; background: rgba(15,40,90,.4); }
.cdrop__icon { width: 30px; height: 30px; flex: none; color: rgba(255,255,255,.75); }
.cdrop__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cdrop__title { font-size: 16px; font-weight: 500; }
.cdrop__sub { font-size: 14px; color: rgba(255,255,255,.6); }
.cdrop__btn {
  flex: none;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid rgba(95,168,255,.45);
  background: rgba(8,22,52,.6);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.contact__hint { margin: -6px 0 0; font-size: 13px; color: rgba(255,255,255,.55); }

.ccheck {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.75);
  cursor: pointer;
}
.ccheck input { position: absolute; opacity: 0; pointer-events: none; }
.ccheck__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 8px;
  border: 1px solid rgba(95,168,255,.45);
  background: rgba(8,22,52,.55);
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ccheck__box svg { width: 16px; height: 16px; }
.ccheck input:checked + .ccheck__box { background: var(--blue); border-color: var(--blue); color: #fff; }
.ccheck input:focus-visible + .ccheck__box { box-shadow: 0 0 0 3px rgba(46,140,255,.35); }
.ccheck a, .contact__alt a { color: #4FA6FF; text-decoration: underline; text-underline-offset: 2px; }

/* the banner's light "Обсудить проект" pill, sized to its text and
   centred over the messenger line */
.contact__submit {
  align-self: center;
  justify-content: center;
  min-width: 260px;
  margin-top: 6px;
  padding-inline: 40px 46px;
  font-family: inherit;
  cursor: pointer;
}
.contact__submit:hover { box-shadow: 0 0 0 2px rgba(95,168,255,.5), 0 10px 24px rgba(15,103,254,.25), 0 0 34px 6px rgba(95,168,255,.4); }
.contact__alt { margin: 0; text-align: center; font-size: 14px; color: rgba(255,255,255,.62); }

/* =============================================================
   SERVICES PAGE (services.html) — directions list, approach, chooser.
   Header, FAQ, contact form and footer are the homepage's own blocks.
   ============================================================= */
.hero-wrap--services { background-image: url('../assets/services-hero.jpg'); background-position: 72% center; }

.svc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  align-items: end;
  gap: clamp(24px, 5vw, 96px);
  /* same title → content gap as "Цены и форматы работы" on the homepage */
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
/* same rhythm as the homepage: the first block after the banner gets the
   extra top room the projects block has, and the approach panel joins the
   FAQ + form run with the tight panel gap */
#directions { padding-top: calc(2 * clamp(24px, 3vw, 44px)); }
.svc-approach-section { padding-bottom: var(--stack-gap); }
.svc-intro__accent { display: block; color: var(--blue); }
.svc-intro p,
.svc-chooser__head p {
  margin: 0;
  max-width: 540px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ink-600);
}

/* direction card: copy on the left, the service artwork filling the
   right side and fading into the card under the copy */
.svc-list { display: flex; flex-direction: column; gap: 16px; }
.svc-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(300px, 22vw, 360px);
  padding: clamp(26px, 2.6vw, 40px) clamp(26px, 3vw, 48px);
  border-radius: var(--r-panel);
  border: 1px solid rgba(15,103,254,.08);
  background: #F7FAFF;
  box-shadow: 0 3px 6px rgba(190,214,248,.45), 0 14px 30px rgba(15,103,254,.07);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card::before {
  content: "";
  position: absolute;
  top: 50%; right: 0;
  z-index: -1;
  /* the artwork box itself (not the card) carries the fade, so its left
     edge never shows as a seam whatever the card's width */
  height: 115%;
  aspect-ratio: 1400 / 787;
  transform: translateY(-50%);
  background: center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.5) 22%, #000 42%);
  mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.5) 22%, #000 42%);
}
.svc-card--web::before      { background-image: url('../assets/service-web.jpg'); }
.svc-card--mobile::before   { background-image: url('../assets/service-mobile.jpg'); }
.svc-card--platform::before { background-image: url('../assets/service-platform.jpg'); }
.svc-card--design::before   { background-image: url('../assets/service-design.jpg'); }
.svc-card--support::before  { background-image: url('../assets/service-support.jpg'); }
@media (prefers-reduced-motion: no-preference) {
  .svc-card:hover { transform: translateY(-2px); }
}
.svc-card:hover {
  border-color: rgba(15,103,254,.2);
  box-shadow: 0 3px 6px rgba(190,214,248,.6), 0 18px 38px rgba(15,103,254,.12);
}
.svc-card__body { width: min(52%, 600px); }
.svc-card__title {
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.svc-card__text {
  margin-top: 12px;
  max-width: 520px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink-600);
}
.svc-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
/* price and arrow share the bottom row, the way they close a pricing row
   on the homepage */
.svc-card__foot { margin-top: auto; display: flex; align-items: center; gap: 20px; }
.svc-card__price {
  font-weight: 700;
  font-size: clamp(21px, 1.9vw, 30px);
  color: var(--ink-900);
  white-space: nowrap;
}
.svc-card__price .price-row__unit { margin-left: .3em; }
.svc-card__body { margin-bottom: 22px; }
.svc-card:hover .svc-card__arrow,
.svc-option:hover .svc-option__arrow {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateX(2px);
}

/* approach: the process panel's dark neo backdrop, copy + a step list */
.svc-approach {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 120px);
  color: #fff;
}
.svc-approach > * { position: relative; z-index: 1; }
.svc-approach__intro .hero__eyebrow { margin-bottom: 18px; }
.svc-approach__title { color: #fff; }
.svc-approach__intro p {
  margin: 16px 0 28px;
  max-width: 520px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}
.svc-steps {
  margin: 0;
  padding: 0 0 0 clamp(20px, 2.4vw, 36px);
  list-style: none;
  border-left: 1px solid rgba(95,168,255,.35);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}
.svc-steps li { display: flex; align-items: center; gap: 20px; }
.svc-steps li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  color: rgba(255,255,255,.66);
}
.svc-steps strong { font-size: clamp(18px, 1.4vw, 22px); font-weight: 700; color: #fff; }
.svc-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(95,168,255,.6);
  background: rgba(10,40,90,.7);
  box-shadow: 0 0 18px rgba(46,140,255,.55), inset 0 0 12px rgba(95,168,255,.25);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

/* chooser: heading on the left, three light option cards on the right */
.svc-chooser {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 110px);
}
.svc-chooser__head p { margin-top: 16px; }
.svc-options { display: flex; flex-direction: column; gap: 12px; }
.svc-option {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 20px 20px 24px;
  border-radius: var(--r-md);
  border: 1px solid rgba(15,103,254,.08);
  background: linear-gradient(180deg, #fff, #F3F8FF);
  box-shadow: 0 3px 6px rgba(190,214,248,.45), 0 10px 24px rgba(15,103,254,.06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.svc-option:hover { border-color: rgba(15,103,254,.22); box-shadow: 0 3px 6px rgba(190,214,248,.6), 0 14px 30px rgba(15,103,254,.12); }
.svc-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(15,103,254,.1), 0 4px 10px rgba(190,214,248,.6);
}
.svc-option__icon svg { width: 22px; height: 22px; }
.svc-option__text { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-500); }
.svc-option__text strong { font-size: clamp(16px, 1.25vw, 19px); font-weight: 700; color: var(--ink-900); }
.svc-option__arrow { width: 48px; height: 48px; }

@media (max-width: 1200px) {
  .svc-card__body { width: 60%; }
}
/* tablets: the card is too short-and-narrow for a height-sized artwork,
   so it is sized by width instead and sits in the bottom-right corner */
@media (max-width: 1000px) and (min-width: 681px) {
  .svc-card__body { width: 56%; }
  .svc-card::before {
    top: auto; bottom: 0;
    height: auto;
    width: 62%;
    transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.5) 22%, #000 42%), linear-gradient(transparent, #000 35%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.5) 22%, #000 42%), linear-gradient(transparent, #000 35%);
    mask-composite: intersect;
  }
}
@media (max-width: 900px) {
  .svc-intro, .svc-approach, .svc-chooser { grid-template-columns: 1fr; }
}
/* phones: the artwork drops to the bottom of the card under the copy */
@media (max-width: 680px) {
  .svc-card { min-height: 0; padding-bottom: calc(46vw + 16px); }
  .svc-card__body { width: 100%; }
  .svc-card::before {
    top: auto; bottom: 0; left: 0;
    transform: none;
    aspect-ratio: auto;
    height: 52vw;
    background-size: cover;
    background-position: 72% center;
    -webkit-mask-image: linear-gradient(transparent, #000 40%);
    mask-image: linear-gradient(transparent, #000 40%);
  }
  .svc-steps li { gap: 14px; }
  .svc-steps__num { width: 44px; height: 44px; font-size: 13px; }
  .svc-option { padding: 16px; gap: 14px; }
  .svc-option__arrow { width: 40px; height: 40px; }
}

/* =============================================================
   FOOTER
   ============================================================= */
/* glued to the contact panel above: same full width, square top corners */
.site-footer { padding: 0 0 40px; }
.site-footer__inner {
  position: relative;
  overflow: hidden;
  max-width: var(--panel-max);
  margin-inline: auto;
  background:
    radial-gradient(800px 420px at 12% 100%, rgba(91,147,255,.10), transparent 60%),
    /* starts in the contact panel's navy so the seam disappears */
    linear-gradient(180deg, #021433, #071026 45%, #0B0E16);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  padding: 63px clamp(20px, 8vw, 150px) 40px;
  color: rgba(255,255,255,.64);
}
.site-footer__watermark {
  position: absolute;
  left: 50%; bottom: -55%;
  width: 1400px;
  transform: translateX(-50%);
  opacity: .35;
  pointer-events: none;
}
.footer-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(32px, 6vw, 120px);
}
.footer-grid > * { position: relative; }
.footer-grid > *:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: calc(clamp(32px, 6vw, 120px) / -2 - 4px);
  width: 9px;
  background:
    linear-gradient(#434B62 0 0) 50% 0    / 1px 100% no-repeat,
    linear-gradient(#434B62 0 0) 50% 0    / 8px 8px  no-repeat,
    linear-gradient(#434B62 0 0) 50% 100% / 8px 8px  no-repeat;
}

.footer-col--brand { max-width: 300px; }
.footer-col--brand .brand__name { color: #fff; }
.footer-col--brand p { margin: 24px 0 32px; font-size: 14px; line-height: 1.6; color: #fff; }

.footer-nav { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-nav a { font-size: 18px; letter-spacing: -.18px; line-height: 1.8; }
.footer-nav a.is-active { color: #fff; }

.footer-col--contact { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; text-align: right; }
.footer-col__title { font-size: 18px; color: #fff; letter-spacing: -.18px; }
.footer-contacts { display: flex; flex-direction: column; gap: 14px; margin: 6px 0; }
.footer-contacts a { font-size: 18px; text-decoration: underline; }
.socials { display: flex; gap: 10px; }
.socials a {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-btn);
  background: #1F2840;
}
.socials img { width: 26px; height: 26px; }

.footer-legal {
  position: relative;
  z-index: 2;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid #434B62;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  letter-spacing: -.14px;
  color: #fff;
}
.footer-legal .dot { width: 6px; height: 6px; background: var(--ink-500); flex: none; }

/* pricing thumbnails: each row shows its service's artwork from the
   services catalogue instead of a line icon, so both pages read as one set.
   Placed after the responsive icon sizes above so it wins at every width. */
.price-row__icon.price-row__thumb {
  width: 116px; height: 88px;
  overflow: hidden;
  border-radius: 20px;
  background: #EAF2FF;
  box-shadow: inset 0 0 0 1px rgba(15,103,254,.08), 0 8px 18px rgba(190,214,248,.6);
}
.price-row__thumb img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .price-row:hover .price-row__thumb img { transform: scale(1.08); }
}
@media (max-width: 1500px) and (min-width: 1201px) {
  .price-row__icon.price-row__thumb { width: 108px; height: 82px; }
}
@media (max-width: 1200px) {
  .price-row__icon.price-row__thumb { width: 104px; height: 80px; border-radius: 16px; }
}
@media (max-width: 680px) {
  .price-row__icon.price-row__thumb { width: 76px; height: 58px; border-radius: 14px; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1200px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service { min-height: 460px; }
  .service--wide { grid-column: 1 / span 2; grid-row: auto; min-height: 300px; }
  .service--tall { grid-column: auto; grid-row: auto; min-height: 620px; }
  .service__body { max-width: none; }
  .contact { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  /* stacked: the scene becomes a feathered band between intro and form */
  .contact::before { display: none; }
  .contact__intro::after {
    content: "";
    display: block;
    margin: 8px calc(-1 * var(--contact-pad)) 0;
    aspect-ratio: 16 / 8;
    background: url("../assets/contact-bg.jpg") left center / cover no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  }
  /* stacked: intro on top, the illustration shows through below it,
     then the questions */
  .faq-panel { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  /* stacked: the illustration becomes its own full-bleed band between
     the intro and the questions, cropped to the left part where the
     glass bubbles are, with both edges feathered */
  .faq-panel::before { display: none; }
  .faq-panel__intro { max-width: none; }
  .faq-panel__intro::after {
    content: "";
    display: block;
    margin: 8px calc(-1 * var(--faq-pad)) 0;
    aspect-ratio: 16 / 9;
    background: url("../assets/faq-bg.jpg") left center / cover no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  }
}

@media (max-width: 900px) {

  .freetest { display: block; }
  .freetest__illus { position: static; transform: none; width: 100%; max-width: 520px; margin: 28px auto 0; }

  .discount { display: block; }
  .discount__illus { opacity: .22; }
  .discount__actions { position: static; transform: none; margin-top: 24px; }
}

@media (max-width: 760px) {
  .hero-wrap--dark { background-position: 65% center; }
  .hero-wrap--dark::before { background: rgba(5,10,24,.72); }
  .hero__trust { gap: 14px 28px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
}

@media (max-width: 680px) {
  .services-grid { grid-template-columns: 1fr; }
  .service, .service--wide, .service--tall { grid-column: auto; grid-row: auto; min-height: 440px; }
  .price-row {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon name  name"
      "tags tags  tags"
      "desc desc  desc"
      "price price arrow";
    column-gap: 14px;
    padding: 18px;
  }
  .price-row__icon { align-self: center; }
  .faq-panel__intro::after { aspect-ratio: 1 / .9; }
  .accordion__item summary { padding: 16px 16px 16px 20px; font-size: 17px; }
  .accordion__toggle { width: 40px; height: 40px; }
  .accordion__panel { padding: 0 20px 20px; }
  .price-row__tags { gap: 6px; }
  .price-row .tag { font-size: 14px; padding: 6px 12px; }
  .price-row__desc { font-size: 15px; }
  .price-row__service { align-self: center; }
  .price-row__price { align-self: center; }
  .price-row__icon { width: 44px; height: 44px; }
  .price-row__icon svg { width: 22px; height: 22px; }
  .price-row__arrow-circle { width: 42px; height: 42px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > *:not(:last-child)::after,
  .footer-grid > *:not(:last-child)::before { display: none; }
  .footer-col--contact { align-items: flex-start; text-align: left; }
  .footer-nav { align-items: flex-start; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); row-gap: 20px; border-radius: var(--r-panel); }
  .stats-bar__item:nth-child(2)::after { display: none; }
  .brand__name { font-size: 22px; }
  .btn { padding-inline: 22px; }
  .contact__intro::after { aspect-ratio: 1 / .8; }
  .contact__row { grid-template-columns: 1fr; }
  .cdrop { flex-wrap: wrap; }
  .cdrop__btn { width: 100%; text-align: center; }
}