/* callqa.online · редакция 07.11.2026 · кейсы и услуги для застройщиков
   Ядро — Catalyst tokens.css (подключается раньше). Здесь: шрифты, бренд-слой Кальки, раскладка.
   Цвет — только токенами; литералы бренда живут в одном блоке «бренд-слой». */

@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(catalyst/fonts/inter/Inter-cyr-400.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(catalyst/fonts/inter/Inter-lat-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+20BD}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(catalyst/fonts/inter/Inter-cyr-500.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(catalyst/fonts/inter/Inter-lat-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+20BD}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(catalyst/fonts/inter/Inter-cyr-600.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(catalyst/fonts/inter/Inter-lat-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+20BD}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url(catalyst/fonts/inter/Inter-cyr-700.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url(catalyst/fonts/inter/Inter-lat-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+20BD}
@font-face{font-family:'Inter';font-weight:800;font-display:swap;src:url(catalyst/fonts/inter/Inter-cyr-800.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-weight:800;font-display:swap;src:url(catalyst/fonts/inter/Inter-lat-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+20BD}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;src:url(catalyst/fonts/GeistMono-Variable.woff2) format('woff2')}

/* ── бренд-слой Кальки (09_ДИЗАЙН: зелёный #1F4434, терракота #C5443A) ── */
:root:not([data-theme="dark"]){
  --flame:#C5443A; --flame-deep:#A8372E; --flame-ink:#A8372E; --flame-soft:#FBEAE6; --on-flame:#ffffff;
  --accent:var(--flame); --accent-ink:var(--flame-ink); --accent-soft:var(--flame-soft); --on-accent:var(--on-flame);
  --accent-2:#1F4434;
  --brand-field:#1F4434; --on-brand-field:#ffffff; --brand-field-2:#2A5743; --on-brand-field-2:#C9DBD1;
  --focus:#1F4434;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;
}
[data-theme="dark"]{
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'Geist Mono',ui-monospace,monospace;
  --flame:#E0705F; --flame-deep:#EC8A7A; --flame-ink:#F09A8B; --flame-soft:#3A1F1B; --on-flame:#1A0D0B;
  --accent-2:#8FC2A8;
  --brand-field:#16352A; --on-brand-field:#F2F6F3; --brand-field-2:#1F4434; --on-brand-field-2:#B7CFC2;
  --focus:#8FC2A8;
}

.site,.site *{box-sizing:border-box}

@media (prefers-reduced-motion:reduce){.site *{transition:none!important;animation:none!important}}

.site{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
:where(.site) img{max-width:100%;display:block}
:where(.site) a{color:inherit}
:where(.site) :is(h1,h2,h3,h4,p){margin:0}
:where(.site) :is(h1,h2,h3){font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.site [id]{scroll-margin-top:84px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--card);padding:8px 12px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--radius-pill,999px);font:600 16px/1 var(--font-sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--motion-ease,ease),background-color .25s}
.btn:hover{transform:translateY(-1px)}
.btn-main{background:var(--flame);color:var(--on-flame)}
.btn-main:hover{background:var(--flame-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{background:var(--inset)}
.on-field .btn-ghost{color:var(--on-brand-field);border-color:color-mix(in srgb,var(--on-brand-field) 30%,transparent)}
.on-field .btn-ghost:hover{background:color-mix(in srgb,var(--on-brand-field) 10%,transparent)}

/* шапка */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.02em}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--brand-field);color:var(--on-brand-field);display:grid;place-items:center;font:700 15px/1 var(--font-sans)}
.logo small{display:block;font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:0}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-size:15px;color:var(--ink-2)}
.nav a:hover{background:var(--inset);color:var(--ink)}
.top .btn{min-height:40px;padding:0 16px;font-size:15px}
.theme{width:40px;height:40px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.theme svg{width:18px;height:18px}
@media (max-width:980px){.nav{display:none}.top .btn{margin-left:auto}}

/* общий ритм разделов */
.site section{padding:96px 0}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.kicker b{color:var(--flame-ink);font-weight:600}
.h2{font-size:clamp(32px,4.2vw,52px);line-height:1.05;max-width:900px}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--ink-2);max-width:760px;margin-top:20px}
.sec-head{margin-bottom:48px}

/* первый экран */
.site .hero{padding:0;background:var(--brand-field);color:var(--on-brand-field)}
.hero .wrap{display:grid;grid-template-columns:1.35fr .85fr;gap:56px;align-items:center;padding:72px 0 80px}
.hero .kicker{color:var(--on-brand-field-2)}
.hero .kicker b{color:var(--on-brand-field)}
.hero h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:var(--on-brand-field-2)}
.hero .lead{color:var(--on-brand-field-2);max-width:640px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--on-brand-field) 18%,transparent)}
.facts strong{display:block;font:700 32px/1.1 var(--font-sans);letter-spacing:-.04em}
.facts span{display:block;margin-top:6px;font-size:14px;color:var(--on-brand-field-2);line-height:1.35}
.photo{position:relative;border-radius:28px;overflow:hidden;background:var(--brand-field-2);aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.photo figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--brand-field) 86%,transparent);backdrop-filter:blur(8px);font-size:13px;line-height:1.4;color:var(--on-brand-field-2)}
.photo figcaption b{color:var(--on-brand-field);font-weight:600}
.foot-note{margin-top:14px;font-size:12px;color:var(--on-brand-field-2)}

/* с чем приходят */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pain{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card,20px);padding:24px}
.pain q{display:block;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.015em;quotes:'«' '»'}
.pain p{margin-top:12px;color:var(--ink-2);font-size:15px}
.pain a{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--flame-ink);text-decoration:none}
.pain a:hover{text-decoration:underline}

/* кейсы */
.cases-sec{background:var(--shell);border-block:1px solid var(--border)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-16px 0 32px}
.chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--ink-2);font:500 15px/1 var(--font-sans);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px}
.case[hidden]{display:none}
.case-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--inset);color:var(--ink-2)}
.who{font-size:14px;color:var(--ink-3)}
.st{margin-left:auto}
.st-live{background:var(--ok-soft);color:var(--ok)}
.st-diag{background:var(--inset);color:var(--ink)}
.st-shown{background:var(--cold-1);color:var(--cold)}
.st-calc{background:var(--inset);color:var(--ink-2)}
.st-said{background:var(--warn-soft);color:var(--warn)}
.case-num{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.case-num strong{font:700 clamp(40px,4.4vw,56px)/1 var(--font-sans);letter-spacing:-.045em;color:var(--flame-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.case-num span{font-size:15px;color:var(--ink-2);line-height:1.35}
.case h3{font-size:24px;line-height:1.2;margin-bottom:18px}
.steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:108px 1fr;gap:12px;font-size:15px;line-height:1.45;color:var(--ink-2);padding-top:12px;border-top:1px solid var(--border)}
.steps li b{font:600 12px/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.steps li span{color:var(--ink)}
.limit{margin-top:auto;padding-top:18px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.case-wide{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
.case-wide .limit{margin-top:18px}
.bars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;height:260px;padding:20px;border-radius:18px;background:var(--inset)}
.bar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.bar i{display:block;border-radius:10px 10px 4px 4px;background:var(--accent-2)}
.bar.drop i{background:var(--flame)}
.bar.goal i{background:var(--mono-3)}
.bar strong{font:700 22px/1 var(--font-sans);letter-spacing:-.04em;margin-bottom:8px}
.bar span{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.3}
.legend-note{margin-top:12px;font-size:13px;color:var(--ink-3)}
.status-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:32px;font-size:14px;color:var(--ink-2)}
.status-key div{display:flex;align-items:center;gap:8px}

/* как выглядит */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.shot{margin:0;background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden}
.shot img{width:100%;height:auto;aspect-ratio:1440/1000;object-fit:cover;object-position:top left;border-bottom:1px solid var(--border)}
.shot.tall img{object-fit:contain;object-position:center;background:var(--inset)}
.shot figcaption{padding:18px 22px}
.shot figcaption b{display:block;font-size:17px}
.shot figcaption span{display:block;margin-top:4px;font-size:15px;color:var(--ink-2)}
.demo-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding:24px 28px;border-radius:24px;background:var(--inset)}
.demo-band p{max-width:640px;color:var(--ink-2)}
.demo-band b{color:var(--ink)}

/* услуги */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px}
.svc.first{background:var(--brand-field);color:var(--on-brand-field);border-color:transparent}
.svc .n{font:600 13px var(--font-mono);color:var(--flame-ink);margin-bottom:14px}
.svc.first .n{color:var(--on-brand-field-2)}
.svc h3{font-size:22px;line-height:1.2}
.svc p{margin-top:12px;font-size:15px;color:var(--ink-2)}
.svc.first p,.svc.first li{color:var(--on-brand-field-2)}
.svc ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.svc li{position:relative;padding-left:20px;font-size:15px;color:var(--ink-2);line-height:1.4}
.svc li:before{content:'';position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--flame)}
.price{margin-top:auto;padding-top:20px}
.price div{padding-top:12px;margin-top:12px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-3)}
.svc.first .price div{border-color:color-mix(in srgb,var(--on-brand-field) 18%,transparent);color:var(--on-brand-field-2)}
.price b{font:600 15px var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.svc.first .price b{color:var(--on-brand-field)}
.svc-note{margin-top:20px;font-size:14px;color:var(--ink-3);max-width:900px}

/* процесс */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.flow li{list-style:none;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:22px}
.flow{padding:0;margin:0}
.flow li:before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;font:600 13px var(--font-mono);color:var(--flame-ink);margin-bottom:16px}
.flow b{display:block;font-size:18px;letter-spacing:-.01em}
.flow p{margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.45}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.promise div{padding:20px 22px;border-radius:20px;background:var(--inset);font-size:15px;color:var(--ink-2)}
.promise b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* об авторе */
.author{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.author .photo{aspect-ratio:4/5;max-width:440px}
.author .photo img{object-position:center 35%}
.author-text .bio{margin-top:16px;color:var(--ink-2);font-size:18px}
.author-text h2+.bio{margin-top:24px}
.quote{margin-top:28px;padding:22px 24px;background:var(--accent-soft);border-radius:18px;font-size:20px;font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
.creds div{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--border)}
.creds strong{display:block;font:700 22px/1.1 var(--font-sans);letter-spacing:-.04em}
.creds span{display:block;margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.35}
.small-note{margin-top:14px;font-size:13px;color:var(--ink-3)}

/* вопросы */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:20px 28px 20px 0;font-weight:600;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';position:absolute;right:0;top:16px;font:400 24px/1 var(--font-mono);color:var(--ink-3)}
.faq details[open] summary:after{content:'−'}
.faq details p{padding:0 0 20px;color:var(--ink-2);font-size:16px}

/* финал */
.final{background:var(--brand-field);color:var(--on-brand-field)}
.final .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.final .h2{max-width:720px}
.final .lead{color:var(--on-brand-field-2)}
.final .kicker{color:var(--on-brand-field-2)}
.final-box{padding:28px;border-radius:24px;background:var(--brand-field-2)}
.final-box ol{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:14px;counter-reset:f}
.final-box li{display:grid;grid-template-columns:32px 1fr;font-size:16px;color:var(--on-brand-field-2)}
.final-box li:before{counter-increment:f;content:counter(f);font:600 14px var(--font-mono);color:var(--on-brand-field)}
.final-box li b{color:var(--on-brand-field);font-weight:600}
.final-box .btn{width:100%}
.foot{padding:32px 0;font-size:14px;color:var(--ink-3)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.foot a{color:var(--ink-2)}

/* адаптив */
@media (max-width:1080px){
  .flow{grid-template-columns:repeat(3,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
  .pains{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .site section{padding:72px 0}
  .hero .wrap,.author,.final .wrap,.case-wide{grid-template-columns:1fr}
  .hero .wrap{gap:40px;padding:48px 0 56px}
  .hero .photo{max-width:420px;aspect-ratio:1/1}
  .cases,.shots,.faq{grid-template-columns:1fr}
  .promise{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .site{font-size:16px}
  .facts{grid-template-columns:1fr;gap:16px}
  .facts strong{font-size:26px}
  .pains,.services,.flow,.creds{grid-template-columns:1fr}
  .case{padding:22px}
  .steps li{grid-template-columns:1fr;gap:2px}
  .st{margin-left:0}
  .bars{height:220px;gap:10px;padding:14px}
  .bar strong{font-size:18px}
  .hero-cta .btn{width:100%}
  .logo small{display:none}
}
.bar .h-before{height:69%}
.bar .h-drop{height:39%}
.bar .h-goal{height:50%}