/* ===========================================================
   KODIKA — Design System
   Light premium-tech. Porcelain canvas, electric indigo, warm pulse.
   =========================================================== */

:root{
  /* surfaces */
  --bg:        #EFEEE8;   /* porcelain base */
  --bg-warm:   #F4F2EB;   /* slightly lighter warm */
  --surface:   #FFFFFF;
  --surface-2: #F7F6F1;
  --deep:      #11142A;   /* deep indigo band (not pure black) */
  --deep-2:    #1A1E3C;

  /* ink */
  --ink:    #11141B;
  --ink-2:  #565E6E;
  --ink-3:  #8A8F9C;
  --on-deep:#EDEEF6;
  --on-deep-2:#A6AAD0;

  /* brand */
  --brand:      #2D3BF0;  /* electric indigo */
  --brand-ink:  #1E2AC0;
  --brand-soft: #E7E8FF;
  --brand-line: #C9CCFF;
  --warm:       #FF5A2C;  /* energetic pop, used sparingly */
  --warm-soft:  #FFE6DC;

  /* lines */
  --line:   #E1DFD5;
  --line-2: #EAE8DF;
  --line-deep: rgba(255,255,255,.10);

  /* geometry */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(17,20,27,.04), 0 2px 8px rgba(17,20,27,.04);
  --shadow:    0 4px 14px rgba(17,20,27,.06), 0 18px 50px rgba(17,20,27,.07);
  --shadow-lg: 0 30px 80px rgba(17,20,27,.12);
  --shadow-brand: 0 16px 40px rgba(45,59,240,.28);

  --maxw: 1240px;
  --pad:  clamp(20px, 6vw, 86px);

  --ff-display: "Space Grotesk", system-ui, sans-serif;
  --ff-text:    "Manrope", system-ui, -apple-system, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--ff-text);
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
button{ font-family:inherit }
::selection{ background:var(--brand); color:#fff }

h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:600; letter-spacing:-.025em; line-height:1.04; margin:0; text-wrap:balance }
p{ margin:0 }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad) }
.section{ padding-top:clamp(64px,8vw,120px); padding-bottom:clamp(64px,8vw,120px) }
.section-sm{ padding-top:clamp(44px,5vw,72px); padding-bottom:clamp(44px,5vw,72px) }

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink);
}
.kicker::before{
  content:""; width:7px; height:7px; border-radius:2px;
  background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft);
}
.kicker.warm{ color:var(--warm) }
.kicker.warm::before{ background:var(--warm); box-shadow:0 0 0 4px var(--warm-soft) }
.kicker.light{ color:var(--on-deep-2) }
.kicker.light::before{ background:var(--warm); box-shadow:0 0 0 4px rgba(255,90,44,.18) }

.eyebrow{ font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-3) }

.lead{ font-size:clamp(18px,1.6vw,21px); line-height:1.55; color:var(--ink-2); max-width:60ch }

.section-head{ max-width:760px; margin-bottom:clamp(36px,4vw,56px) }
.section-head h2{ font-size:clamp(30px,4.4vw,52px); margin:18px 0 0 }
.section-head .lead{ margin-top:18px }

/* ---------- buttons ---------- */
.btn{
  --bg-btn:var(--ink); --fg-btn:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:999px; border:1px solid transparent;
  font-family:var(--ff-text); font-weight:600; font-size:15px; letter-spacing:-.01em;
  background:var(--bg-btn); color:var(--fg-btn); cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  will-change:transform;
}
.btn svg{ width:17px; height:17px }
.btn:hover{ transform:translateY(-2px) }
.btn.primary{ --bg-btn:var(--brand); --fg-btn:#fff; box-shadow:var(--shadow-brand) }
.btn.primary:hover{ box-shadow:0 22px 52px rgba(45,59,240,.36) }
.btn.dark{ --bg-btn:var(--ink); --fg-btn:#fff }
.btn.dark:hover{ box-shadow:0 18px 40px rgba(17,20,27,.22) }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn.ghost:hover{ border-color:var(--ink); background:var(--surface) }
.btn.on-deep{ background:#fff; color:var(--ink) }
.btn.on-deep.ghost{ background:transparent; color:var(--on-deep); border-color:var(--line-deep) }
.btn.on-deep.ghost:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06) }
.btn.lg{ padding:17px 30px; font-size:16px }
.btn .arrow{ transition:transform .25s var(--ease) }
.btn:hover .arrow{ transform:translateX(4px) }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--brand-ink);
  font-size:15px;
}
.link-arrow svg{ width:16px; height:16px; transition:transform .25s var(--ease) }
.link-arrow:hover svg{ transform:translateX(4px) }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(239,238,232,.78);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{ border-bottom-color:var(--line); background:rgba(239,238,232,.9) }
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:11px; font-family:"Syne", var(--ff-display); font-weight:800; font-size:21px; letter-spacing:-.01em }
.brand .mark{ width:36px; height:36px; flex:0 0 auto }
.brand b{ font-weight:600 }
.brand .tld{ color:var(--brand) }

.nav{ display:flex; align-items:center; gap:4px }
.nav a{
  position:relative; padding:9px 14px; border-radius:999px; font-size:15px; font-weight:500;
  color:var(--ink-2); transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--ink); background:rgba(17,20,27,.05) }
.nav a.active{ color:var(--ink) }
.nav a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px;
  background:var(--brand);
}

.header-cta{ display:flex; align-items:center; gap:14px }
.header-phone{ font-family:var(--ff-mono); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap }
.header-phone:hover{ color:var(--brand-ink) }

.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; align-items:center; justify-content:center }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.25s }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:.25s }
.burger span::before{ top:-6px } .burger span::after{ top:6px }
body.menu-open .burger span{ background:transparent }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg) }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg) }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:70;
  background:var(--surface); transform:translateX(102%); transition:transform .35s var(--ease);
  display:flex; flex-direction:column; padding:88px 28px 28px; gap:6px;
  box-shadow:var(--shadow-lg);
}
body.menu-open .mobile-nav{ transform:translateX(0) }
.mobile-nav a{ padding:14px 4px; font-family:var(--ff-display); font-size:24px; color:var(--ink); border-bottom:1px solid var(--line-2) }
.mobile-nav a.active{ color:var(--brand) }
.mobile-nav .m-foot{ margin-top:auto; display:flex; flex-direction:column; gap:14px }
.scrim{ position:fixed; inset:0; background:rgba(17,20,27,.4); opacity:0; pointer-events:none; transition:opacity .3s; z-index:65 }
body.menu-open .scrim{ opacity:1; pointer-events:auto }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ position:relative; padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(48px,6vw,96px) }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center }
.hero h1{ font-size:clamp(40px,6.2vw,76px); letter-spacing:-.035em; margin-top:22px }
.hero h1 em{ font-style:normal; color:var(--brand) }
.hero .lead{ margin-top:24px; font-size:clamp(18px,1.7vw,21px) }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:13.5px; font-weight:500; color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.chip svg{ width:15px; height:15px; color:var(--brand) }

.hero-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:40px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.hero-metrics div{ background:var(--bg); padding:18px 20px }
.hero-metrics strong{ display:block; font-family:var(--ff-display); font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em }
.hero-metrics span{ font-size:13.5px; color:var(--ink-2) }

/* live canvas panel */
.hero-visual{ position:relative; aspect-ratio:1/1; max-height:560px }
.hero-canvas-wrap{
  position:absolute; inset:0; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg,#fff, #F2F1FB 60%, #ECEBFF);
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.hero-canvas-wrap canvas{ position:absolute; inset:0; width:100%; height:100% }
.hero-hud{ position:absolute; inset:0; pointer-events:none; padding:22px; display:flex; flex-direction:column; justify-content:space-between }
.hud-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.hud-tag{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-2); background:rgba(255,255,255,.7); padding:6px 10px; border-radius:8px; border:1px solid var(--line) }
.hud-card{
  pointer-events:auto; background:rgba(255,255,255,.86); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow);
  min-width:180px;
}
.hud-card .hc-top{ display:flex; justify-content:space-between; align-items:center; font-family:var(--ff-mono); font-size:11px; color:var(--ink-3); letter-spacing:.05em }
.hud-card .hc-val{ font-family:var(--ff-display); font-size:30px; letter-spacing:-.03em; margin-top:6px }
.hud-card .hc-val em{ font-style:normal; color:var(--brand) }
.hud-bar{ height:6px; border-radius:4px; background:var(--line-2); margin-top:10px; overflow:hidden }
.hud-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),#6E78FF); border-radius:4px }
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--warm); box-shadow:0 0 0 0 rgba(255,90,44,.5); animation:pulse 2s infinite }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(255,90,44,0) } 100%{ box-shadow:0 0 0 0 rgba(255,90,44,0) } }

/* ===========================================================
   MARQUEE / strip
   =========================================================== */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; overflow:hidden; background:var(--bg-warm) }
.marquee-track{ display:flex; gap:48px; width:max-content; animation:scroll-x 32s linear infinite; will-change:transform }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee-item{ display:inline-flex; align-items:center; gap:14px; font-family:var(--ff-mono); font-size:14px; color:var(--ink-2); letter-spacing:.02em }
.marquee-item b{ color:var(--ink); font-family:var(--ff-display); font-weight:500 }
.marquee-item::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand) }
@keyframes scroll-x{ to{ transform:translateX(-50%) } }

/* ===========================================================
   CARDS / GRID
   =========================================================== */
.grid{ display:grid; gap:18px }
.grid.cols-2{ grid-template-columns:repeat(2,1fr) }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-4{ grid-template-columns:repeat(4,1fr) }

.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--brand-line) }
.card .card-no{ font-family:var(--ff-mono); font-size:13px; color:var(--ink-3); letter-spacing:.04em }
.card .card-ico{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); margin-bottom:20px;
  transition:background .35s, color .35s, transform .35s var(--ease);
}
.card .card-ico svg{ width:24px; height:24px }
.card:hover .card-ico{ background:var(--brand); color:#fff; transform:scale(1.04) rotate(-3deg) }
.card h3{ font-size:21px; margin:0 0 10px }
.card p{ color:var(--ink-2); font-size:15.5px; line-height:1.55 }
.card .card-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px }
.card .tag{ font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); padding:4px 9px; border-radius:7px }
.card.accent{ background:var(--deep); border-color:transparent; color:var(--on-deep) }
.card.accent h3{ color:#fff } .card.accent p{ color:var(--on-deep-2) }
.card.accent .card-no{ color:var(--on-deep-2) }
.card.accent .card-ico{ background:rgba(255,255,255,.1); color:#fff }
.card.accent:hover .card-ico{ background:var(--warm); color:#fff }
.card.accent .tag{ background:rgba(255,255,255,.07); border-color:var(--line-deep); color:var(--on-deep-2) }
.card-glow{ position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,var(--brand-soft),transparent 70%); opacity:0; transition:opacity .4s }
.card:hover .card-glow{ opacity:1 }

/* feature row (about / advantages) */
.feature{ display:flex; gap:18px; padding:24px 0; border-top:1px solid var(--line) }
.feature .f-no{ font-family:var(--ff-mono); font-size:14px; color:var(--brand); flex:0 0 auto; width:48px }
.feature .f-body h3{ font-size:22px; margin-bottom:8px }
.feature .f-body p{ color:var(--ink-2); max-width:62ch }

/* ===========================================================
   PROCESS
   =========================================================== */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step }
.step{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.step .s-no{ font-family:var(--ff-mono); font-size:13px; color:var(--brand); letter-spacing:.05em }
.step h3{ font-size:20px; margin:16px 0 10px }
.step p{ color:var(--ink-2); font-size:15px }
.step .s-line{ position:absolute; top:34px; right:-9px; width:18px; height:2px; background:var(--brand-line); z-index:2 }
.step:last-child .s-line{ display:none }

/* ===========================================================
   PRICE / PROJECT CARDS
   =========================================================== */
.price-card{
  display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--brand-line) }
.price-card .pc-top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.price-card .price{ font-family:var(--ff-mono); font-size:14px; font-weight:600; color:var(--brand-ink); background:var(--brand-soft); padding:6px 11px; border-radius:8px; white-space:nowrap }
.price-card .pc-no{ font-family:var(--ff-mono); font-size:13px; color:var(--ink-3) }
.price-card h3{ font-size:21px; margin-top:6px }
.price-card p{ color:var(--ink-2); font-size:15px }
.price-card .pc-foot{ margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; gap:7px }
.price-card .tag{ font-family:var(--ff-mono); font-size:11.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); padding:4px 9px; border-radius:7px }

/* ===========================================================
   CTA BAND (deep)
   =========================================================== */
.band{ background:var(--deep); color:var(--on-deep); position:relative; overflow:hidden }
.band .wrap{ position:relative; z-index:1 }
.band h2{ color:#fff; font-size:clamp(30px,4.4vw,52px) }
.band .lead{ color:var(--on-deep-2) }
.band-mesh{ position:absolute; inset:0; opacity:.5; pointer-events:none }
.band-cta{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap }

/* ===========================================================
   CALCULATOR
   =========================================================== */
.calc{ display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start }
.calc-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-sm) }
.field{ margin-bottom:24px }
.field > .label{ display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; margin-bottom:12px; color:var(--ink) }
.field .hint{ font-family:var(--ff-mono); font-size:12px; color:var(--ink-3); font-weight:500 }
.opt-row{ display:flex; flex-wrap:wrap; gap:8px }
.opt{
  cursor:pointer; user-select:none; padding:10px 15px; border-radius:11px; border:1px solid var(--line);
  background:var(--bg-warm); font-size:14px; font-weight:500; color:var(--ink-2);
  transition:.2s; display:inline-flex; align-items:center; gap:8px;
}
.opt:hover{ border-color:var(--brand-line); color:var(--ink) }
.opt input{ display:none }
.opt.sel{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink) }
.opt .opt-price{ font-family:var(--ff-mono); font-size:12px; opacity:.7 }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:4px; background:var(--line); outline:none }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--brand); border:3px solid #fff; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .15s }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12) }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--brand); border:3px solid #fff; cursor:pointer }

.calc-result{
  position:sticky; top:96px; background:var(--deep); color:var(--on-deep);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-lg); overflow:hidden;
}
.calc-result .cr-label{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-deep-2) }
.calc-result .cr-total{ font-family:var(--ff-display); font-size:clamp(38px,5vw,56px); letter-spacing:-.03em; margin:10px 0; color:#fff }
.calc-result .cr-range{ color:var(--on-deep-2); font-size:14px }
.calc-result .cr-break{ margin:22px 0; border-top:1px solid var(--line-deep); padding-top:18px; display:flex; flex-direction:column; gap:10px }
.calc-result .cr-line{ display:flex; justify-content:space-between; font-size:14px; color:var(--on-deep-2) }
.calc-result .cr-line b{ color:#fff; font-family:var(--ff-mono); font-weight:500 }
.calc-result .btn{ width:100%; margin-top:8px }
.calc-result small{ display:block; margin-top:14px; color:var(--on-deep-2); font-size:13px; text-align:center }
.calc-result small a{ color:#fff }

/* ===========================================================
   FORMS
   =========================================================== */
.form{ display:flex; flex-direction:column; gap:16px }
.form label{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; color:var(--ink) }
.form input, .form textarea{
  font-family:inherit; font-size:16px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.form input::placeholder,.form textarea::placeholder{ color:var(--ink-3); font-weight:400 }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft) }
.form textarea{ min-height:130px; resize:vertical }
.form-note{ font-size:13px; color:var(--ink-3); line-height:1.5 }
.form select{
  font-family:inherit; font-size:16px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); transition:border-color .2s, box-shadow .2s;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238A8F9C' stroke-width='2'><path d='M5 8l5 5 5-5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:44px; cursor:pointer;
}
.form select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft) }
.form .req{ color:var(--warm) }

/* ----- lead form inside deep band ----- */
.chip.light{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--on-deep);
  box-shadow:none;
}
.chip.light svg{ color:var(--warm) }
.band-form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start;
}
.band-form-copy{ padding-top:clamp(0px,2vw,24px) }
.band-trust{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px }
.lead-form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-lg);
}
.lead-form-head{ margin-bottom:4px }
.lead-form-tag{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--brand-ink) }
.lead-form-head h3{ font-family:var(--ff-display); font-size:24px; margin:6px 0 0 }
.lead-form.is-sent input,.lead-form.is-sent textarea,.lead-form.is-sent select,
.lead-form.is-sent button{ opacity:.55; pointer-events:none }

.contacts-list{ display:flex; flex-direction:column; gap:2px }
.contact-row{ display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid var(--line) }
.contact-row .cr-ico{ width:44px; height:44px; border-radius:12px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--brand); flex:0 0 auto }
.contact-row .cr-ico svg{ width:20px; height:20px }
.contact-row .cr-k{ font-size:13px; color:var(--ink-3); font-family:var(--ff-mono) }
.contact-row .cr-v{ font-size:18px; font-weight:600 }
.contact-row a.cr-v:hover{ color:var(--brand-ink) }

.big-phone{ font-family:var(--ff-display); font-size:clamp(30px,5vw,52px); letter-spacing:-.03em; display:inline-block; margin:6px 0 }
.big-phone:hover{ color:var(--brand-ink) }

.messengers{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.msg-btn{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-weight:600; font-size:14.5px; transition:.2s; box-shadow:var(--shadow-sm) }
.msg-btn svg{ width:18px; height:18px }
.msg-btn:hover{ transform:translateY(-2px); border-color:var(--brand-line); box-shadow:var(--shadow) }

/* ===========================================================
   PAGE HERO (subpages)
   =========================================================== */
.page-hero{ padding-top:clamp(48px,6vw,88px); padding-bottom:clamp(36px,4vw,56px) }
.page-hero h1{ font-size:clamp(36px,5.4vw,68px); margin-top:20px }
.page-hero .lead{ margin-top:22px }
.crumbs{ font-family:var(--ff-mono); font-size:13px; color:var(--ink-3); display:flex; gap:8px; align-items:center }
.crumbs a:hover{ color:var(--brand-ink) }

/* stat strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.stats div{ background:var(--bg); padding:24px }
.stats strong{ display:block; font-family:var(--ff-display); font-size:clamp(26px,3vw,40px); letter-spacing:-.03em }
.stats span{ font-size:14px; color:var(--ink-2) }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{ background:var(--deep); color:var(--on-deep); padding-top:clamp(56px,6vw,88px); padding-bottom:36px }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px }
.footer .brand{ color:#fff }
.footer p{ color:var(--on-deep-2); font-size:15px; margin-top:16px; max-width:32ch }
.footer h4{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-deep-2); font-weight:600; margin-bottom:16px }
.footer .f-links{ display:flex; flex-direction:column; gap:11px }
.footer .f-links a{ color:var(--on-deep); font-size:15px; transition:color .2s }
.footer .f-links a:hover{ color:#fff }
.footer .f-phone{ font-family:var(--ff-display); font-size:24px; color:#fff }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line-deep); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--on-deep-2); font-size:13px; font-family:var(--ff-mono) }

/* ===========================================================
   REVEAL
   =========================================================== */
.reveal{ opacity:0 }
.reveal.in{ animation:revealIn .7s var(--ease) both }
@keyframes revealIn{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
.reveal[data-d="1"].in{ animation-delay:.07s } .reveal[data-d="2"].in{ animation-delay:.14s }
.reveal[data-d="3"].in{ animation-delay:.21s } .reveal[data-d="4"].in{ animation-delay:.28s }
.reveal[data-d="5"].in{ animation-delay:.35s } .reveal[data-d="6"].in{ animation-delay:.42s }

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

/* ===========================================================
   NAV DROPDOWN (Направления)
   =========================================================== */
.has-drop{ position:relative; display:flex; align-items:center }
.drop-trigger{ display:inline-flex; align-items:center; gap:6px }
.drop-trigger .caret{ width:14px; height:14px; transition:transform .25s var(--ease); color:var(--ink-3) }
.has-drop:hover .drop-trigger .caret,.has-drop:focus-within .drop-trigger .caret{ transform:rotate(180deg) }
.drop-menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  width:340px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:10px; opacity:0; visibility:hidden; transition:.22s var(--ease);
  z-index:80;
}
.has-drop:hover .drop-menu,.has-drop:focus-within .drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.drop-menu::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px }
.drop-item{ display:flex; gap:13px; align-items:flex-start; padding:12px 13px; border-radius:12px; transition:background .18s }
.drop-item:hover{ background:var(--bg-warm) }
.drop-item .di-ico{ width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center }
.drop-item .di-ico svg{ width:19px; height:19px }
.drop-item .di-t{ display:block; font-family:var(--ff-display); font-weight:600; font-size:15px; color:var(--ink); line-height:1.2 }
.drop-item .di-s{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.35 }
.drop-foot{ margin-top:4px; padding:11px 13px; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center }
.drop-foot a{ font-family:var(--ff-mono); font-size:13px; color:var(--brand-ink); font-weight:600; display:inline-flex; align-items:center; gap:6px }
.drop-foot a svg{ width:14px; height:14px }

/* mobile nav niche group */
.mnav-sub{ display:flex; flex-direction:column }
.mnav-sub > a{ font-size:18px !important; padding:11px 4px !important; color:var(--ink-2) !important; border-bottom:1px solid var(--line-2) }
.mnav-label{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:16px 4px 6px; border:0 !important }

/* ===========================================================
   FLOATING MESSENGER
   =========================================================== */
.float-msg{ position:fixed; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:90; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px }
.float-toggle{ width:60px; height:60px; border-radius:50%; border:none; cursor:pointer; background:var(--brand); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-brand); transition:transform .25s var(--ease) }
.float-toggle:hover{ transform:scale(1.06) }
.float-toggle svg{ width:27px; height:27px }
.float-toggle .ic-close{ display:none }
body.fm-open .float-toggle .ic-chat{ display:none }
body.fm-open .float-toggle .ic-close{ display:block }
.float-list{ display:flex; flex-direction:column; gap:10px; opacity:0; visibility:hidden; transform:translateY(10px) scale(.96); transform-origin:bottom right; transition:.25s var(--ease) }
body.fm-open .float-list{ opacity:1; visibility:visible; transform:none }
.float-item{ display:inline-flex; align-items:center; gap:10px; padding:11px 17px 11px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); font-weight:600; font-size:14.5px; color:var(--ink); white-space:nowrap; transition:transform .2s }
.float-item:hover{ transform:translateX(-3px); border-color:var(--brand-line) }
.float-item svg{ width:19px; height:19px }
.float-item.wa svg{ color:#25D366 } .float-item.tg svg{ color:#229ED9 } .float-item.tel svg{ color:var(--brand) }
@media (prefers-reduced-motion:reduce){ .float-toggle:hover{ transform:none } }

/* ===========================================================
   PAIN / SOLUTION
   =========================================================== */
.pain-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; transition:transform .35s var(--ease), box-shadow .35s var(--ease) }
.pain-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.pain-card .p-ico{ width:44px; height:44px; border-radius:12px; background:var(--warm-soft); color:var(--warm); display:grid; place-items:center; margin-bottom:16px }
.pain-card .p-ico svg{ width:22px; height:22px }
.pain-card h3{ font-size:18px; margin-bottom:9px }
.pain-card p{ color:var(--ink-2); font-size:15px; line-height:1.55 }

/* split: pain vs result row */
.ba-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch }
.ba-col{ border-radius:var(--r-lg); padding:clamp(24px,3vw,34px) }
.ba-col.before{ background:var(--surface); border:1px solid var(--line) }
.ba-col.after{ background:var(--deep); color:var(--on-deep) }
.ba-col h4{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px }
.ba-col.before h4{ color:var(--ink-3) } .ba-col.after h4{ color:var(--on-deep-2) }
.ba-line{ display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line-2); font-size:15.5px; color:var(--ink-2) }
.ba-col.after .ba-line{ border-color:var(--line-deep); color:var(--on-deep) }
.ba-line:first-of-type{ border-top:0 }
.ba-line .bx{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px }
.ba-col.before .bx{ background:var(--warm-soft); color:var(--warm) }
.ba-col.after .bx{ background:rgba(45,59,240,.4); color:#fff }
.ba-line .bx svg{ width:13px; height:13px }

/* ===========================================================
   CHECKLIST (что входит)
   =========================================================== */
.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:14px 32px }
.check-item{ display:flex; gap:13px; align-items:flex-start; padding:4px 0 }
.check-item .ck{ flex:0 0 auto; width:24px; height:24px; border-radius:7px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; margin-top:2px }
.check-item .ck svg{ width:14px; height:14px }
.check-item .ci-t{ font-weight:600; font-size:15.5px; color:var(--ink) }
.check-item .ci-s{ font-size:14px; color:var(--ink-2); margin-top:2px; line-height:1.45 }

/* ===========================================================
   RESULT METRICS (big)
   =========================================================== */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.metric{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px }
.metric .m-val{ font-family:var(--ff-display); font-size:clamp(30px,3.6vw,44px); letter-spacing:-.03em; color:var(--brand); line-height:1 }
.metric .m-val em{ font-style:normal; font-size:.5em; color:var(--ink-3) }
.metric .m-lab{ font-size:14.5px; color:var(--ink-2); margin-top:12px; line-height:1.45 }
.band .metric{ background:rgba(255,255,255,.05); border-color:var(--line-deep) }
.band .metric .m-val{ color:#fff } .band .metric .m-lab{ color:var(--on-deep-2) }
.band .metric .m-val em{ color:var(--on-deep-2) }

/* ===========================================================
   PRODUCT LADDER
   =========================================================== */
.ladder{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch }
.rung{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s }
.rung:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.rung .r-step{ font-family:var(--ff-mono); font-size:12px; color:var(--ink-3); letter-spacing:.08em }
.rung .r-name{ font-family:var(--ff-display); font-size:21px; margin:14px 0 6px }
.rung .r-price{ font-family:var(--ff-mono); font-weight:600; font-size:17px; color:var(--brand-ink) }
.rung .r-desc{ color:var(--ink-2); font-size:14.5px; margin-top:14px; line-height:1.5; flex:1 }
.rung .r-foot{ margin-top:18px }
.rung.feature{ background:var(--deep); border-color:transparent; color:var(--on-deep); box-shadow:var(--shadow-lg) }
.rung.feature .r-step{ color:var(--on-deep-2) }
.rung.feature .r-name{ color:#fff }
.rung.feature .r-price{ color:#fff }
.rung.feature .r-desc{ color:var(--on-deep-2) }
.rung-badge{ position:absolute; top:-11px; left:24px; background:var(--warm); color:#fff; font-family:var(--ff-mono); font-size:11px; font-weight:600; letter-spacing:.06em; padding:5px 11px; border-radius:999px; text-transform:uppercase }

/* ===========================================================
   ENTRY BANNER (от 30 000 ₽)
   =========================================================== */
.entry-banner{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--brand),#5360FF); color:#fff; border-radius:var(--r-xl); padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:1.4fr .9fr; gap:32px; align-items:center }
.entry-banner .eb-mesh{ position:absolute; inset:0; opacity:.5; pointer-events:none }
.entry-banner .eb-tag{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8) }
.entry-banner h2{ color:#fff; font-size:clamp(26px,3.4vw,40px); margin:14px 0 0; position:relative }
.entry-banner p{ color:rgba(255,255,255,.88); margin-top:14px; font-size:16.5px; max-width:48ch; position:relative }
.entry-banner .eb-price{ font-family:var(--ff-display); font-size:clamp(40px,6vw,68px); letter-spacing:-.03em; line-height:1; position:relative }
.entry-banner .eb-price span{ font-size:.4em; color:rgba(255,255,255,.75); display:block; font-family:var(--ff-mono); letter-spacing:.05em; margin-bottom:8px }
.entry-banner .btn.on-deep{ position:relative }
.entry-right{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:18px }

/* ===========================================================
   LEAD MAGNET
   =========================================================== */
.magnet{ background:var(--surface); border:1px solid var(--brand-line); border-radius:var(--r-xl); padding:clamp(26px,3.5vw,44px); display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; box-shadow:var(--shadow) }
.magnet .mg-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-ink); background:var(--brand-soft); padding:7px 13px; border-radius:999px }
.magnet h2{ font-size:clamp(24px,3vw,36px); margin:18px 0 0 }
.magnet > div > p{ color:var(--ink-2); margin-top:14px; font-size:16px }
.magnet .mg-list{ display:flex; flex-direction:column; gap:9px; margin-top:20px }
.magnet .mg-list span{ display:flex; gap:10px; align-items:center; font-size:15px; color:var(--ink) }
.magnet .mg-list svg{ width:17px; height:17px; color:var(--brand); flex:0 0 auto }
.magnet-form{ display:flex; flex-direction:column; gap:12px; background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.5vw,28px) }
.magnet-form .mf-h{ font-family:var(--ff-display); font-weight:600; font-size:18px }

/* ===========================================================
   FAQ ACCORDION
   =========================================================== */
.faq{ max-width:860px; border-top:1px solid var(--line) }
.faq-item{ border-bottom:1px solid var(--line) }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-family:var(--ff-display); font-weight:600; font-size:clamp(17px,2vw,21px); color:var(--ink); letter-spacing:-.01em; line-height:1.3 }
.faq-q .fq-ico{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:26px; height:26px; flex:0 0 auto }
.faq-q .fq-ico::before,.faq-q .fq-ico::after{ content:""; position:absolute; background:var(--brand); border-radius:2px; transition:transform .3s var(--ease) }
.faq-q .fq-ico::before{ top:12px; left:4px; right:4px; height:2px }
.faq-q .fq-ico::after{ left:12px; top:4px; bottom:4px; width:2px }
.faq-item.open .faq-q .fq-ico::after{ transform:scaleY(0) }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .35s var(--ease) }
.faq-a-inner{ padding:0 44px 24px 0; color:var(--ink-2); font-size:16px; line-height:1.6 }

/* ===========================================================
   CASE CARDS / TESTIMONIALS / LOGOS
   =========================================================== */
.case-card{ display:grid; grid-template-columns:1fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease) }
.case-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
.case-top{ padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; gap:16px }
.case-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.case-tag{ font-family:var(--ff-mono); font-size:12px; color:var(--brand-ink); background:var(--brand-soft); padding:5px 11px; border-radius:999px }
.case-tag.sector{ color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2) }
.case-card h3{ font-size:clamp(20px,2.4vw,26px) }
.case-block{ display:flex; flex-direction:column; gap:6px }
.case-block .cb-k{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }
.case-block p{ color:var(--ink-2); font-size:15.5px; line-height:1.55 }
.case-results{ display:flex; gap:24px; flex-wrap:wrap; padding-top:6px }
.case-results div strong{ display:block; font-family:var(--ff-display); font-size:clamp(24px,3vw,34px); color:var(--brand); letter-spacing:-.03em; line-height:1 }
.case-results div span{ font-size:13px; color:var(--ink-2) }
.case-quote{ border-top:1px solid var(--line); padding:22px clamp(26px,3vw,38px); background:var(--bg-warm); display:flex; gap:14px; align-items:center }
.case-quote .cq-av{ width:44px; height:44px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-family:var(--ff-display); font-weight:700; flex:0 0 auto }
.case-quote p{ font-size:14.5px; color:var(--ink); font-style:italic; line-height:1.5 }
.case-quote .cq-n{ font-style:normal; font-size:13px; color:var(--ink-3); margin-top:3px }

.quote-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; display:flex; flex-direction:column; gap:18px; transition:transform .35s var(--ease), box-shadow .35s var(--ease) }
.quote-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.quote-card .qc-stars{ color:var(--warm); letter-spacing:3px; font-size:16px }
.quote-card blockquote{ margin:0; font-size:16.5px; line-height:1.6; color:var(--ink) }
.quote-card .qc-who{ display:flex; gap:13px; align-items:center; margin-top:auto }
.quote-card .qc-av{ width:46px; height:46px; border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-family:var(--ff-display); font-weight:700; flex:0 0 auto }
.quote-card .qc-name{ font-weight:700; font-size:15px } .quote-card .qc-role{ font-size:13px; color:var(--ink-2) }

.logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.logo-cell{ background:var(--bg); display:grid; place-items:center; padding:26px 18px; font-family:var(--ff-display); font-weight:700; font-size:18px; color:var(--ink-3); letter-spacing:-.02em; transition:color .25s, background .25s }
.logo-cell:hover{ color:var(--ink); background:var(--surface) }

/* generic CTA pair used on niche pages */
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.trust-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }

/* section intro inline kicker variant */
.lead-narrow{ max-width:54ch }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1080px){
  .footer-grid{ grid-template-columns:1fr 1fr }
  .header-phone{ display:none }
  .adv-grid{ grid-template-columns:1fr !important }
  .band-form-grid{ grid-template-columns:1fr; gap:36px }
  .ladder{ grid-template-columns:repeat(2,1fr) }
  .metrics{ grid-template-columns:repeat(2,1fr) }
  .magnet{ grid-template-columns:1fr; gap:28px }
  .entry-banner{ grid-template-columns:1fr; gap:22px }
  .case-grid{ grid-template-columns:1fr }
  .logos{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:920px){
  .nav, .header-phone{ display:none }
  .burger{ display:flex }
  .hero-grid{ grid-template-columns:1fr }
  .hero-visual{ max-height:440px; order:-1 }
  .calc{ grid-template-columns:1fr }
  .calc-result{ position:static }
  .grid.cols-3, .grid.cols-4{ grid-template-columns:repeat(2,1fr) }
  .process{ grid-template-columns:repeat(2,1fr) }
  .step .s-line{ display:none }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .ba-split{ grid-template-columns:1fr }
}
@media (max-width:560px){
  body{ font-size:16px }
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns:1fr }
  .process{ grid-template-columns:1fr }
  .hero-metrics{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr }
  .band-cta{ flex-direction:column; align-items:flex-start }
  .stats{ grid-template-columns:1fr 1fr }
  .ladder, .metrics{ grid-template-columns:1fr }
  .checklist{ grid-template-columns:1fr }
  .logos{ grid-template-columns:repeat(2,1fr) }
  .case-results{ gap:18px }
}