/* ЦВЕТА И РАЗМЕРЫ: изменяйте переменные здесь. Внешние шрифты не загружаются. */
:root {
  color-scheme: dark;
  --bg: #111114; --surface: #1b1b21; --text: #f8f8fa; --muted: #b8b8c4;
  --line: #38383f; --accent: #c2f708; --accent-text: #c2f708; --button-text: #111114;
  --glow: rgb(158 70 229 / .17); --accent-hover: #d4ff3c;
  --error: #ffada7; --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --content: 1200px; --gutter: 24px; --section: 72px; --gap: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1); --duration: 300ms;
}
:root[data-theme="light"] { color-scheme:light; --bg:#f7f7fb; --surface:#ffffff; --text:#18181e; --muted:#5a5968; --line:#d6d5e0; --accent-text:#222228; --error:#a33129; --glow:rgb(158 70 229 / .12); }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; font:400 16px/1.6 var(--font); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
body.dialog-open { overflow:hidden; }
::selection { background:var(--accent); color:white; }
a { color:inherit; text-decoration:none; text-underline-offset:5px; }
button,input,textarea { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
button, input, textarea { border-radius:0; }
:focus-visible { outline:2px solid var(--accent-text); outline-offset:5px; }
[hidden] { display:none !important; }
h1,h2,h3,p,dl,dd { margin:0; }
h1,h2,h3 { font-weight:450; }
h1,h2 { line-height:1.06; letter-spacing:-.055em; }
h2 { font-size:clamp(2rem,4.3vw,3.5rem); }
h3 { font-size:1.2rem; line-height:1.35; letter-spacing:-.025em; }
p + p { margin-top:16px; }
ul,ol { margin:0; padding:0; list-style:none; }
.container { width:min(var(--content), calc(100% - var(--gutter) * 2)); margin-inline:auto; }
.section { padding-block:var(--section); scroll-margin-top:12px; }
.muted { color:var(--muted); }
.small { font-size:.8rem; }
.accent { color:var(--accent-text); }
.eyebrow { font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:24px; color:var(--muted); }
.skip-link { position:fixed; left:20px; top:12px; padding:12px; background:var(--text); color:var(--bg); z-index:20; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.scroll-progress { position:fixed; inset:0 0 auto; height:2px; background:var(--accent-text); transform:scaleX(0); transform-origin:left; z-index:30; }
.header { position:sticky; top:0; background:var(--bg); z-index:10; border-bottom:1px solid transparent; transition:border-color var(--duration); }
.header.is-scrolled { border-color:var(--line); }
.header__inner { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.logo { font-size:1.65rem; font-weight:650; letter-spacing:-.1em; line-height:1; }
.logo__dot { color:var(--accent-text); }
.nav { display:flex; gap:24px; align-items:center; flex-wrap:wrap; font-size:.82rem; }
.nav a,.text-link { position:relative; }
.nav a::after,.text-link::after { content:""; position:absolute; bottom:-4px; left:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--duration) var(--ease); }
.nav a:hover::after,.text-link:hover::after { transform:scaleX(1); }
.header__controls { display:flex; align-items:center; gap:12px; }
.theme-toggle,.menu-toggle { color:var(--text); border:1px solid var(--line); background:transparent; min-height:44px; min-width:44px; }
.theme-toggle { border-radius:50%; font-size:1.5rem; display:grid; place-items:center; }
.menu-toggle { padding:8px 12px; font-size:.8rem; }
.hero { padding-top:48px; }
.hero__eyebrow { font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; display:flex; align-items:center; gap:10px; color:var(--muted); }
.status-dot { width:6px; height:6px; background:var(--accent-text); border-radius:50%; flex-shrink:0; }
.hero__edition { display:none; margin-left:auto; }
.hero h1 { font-size:clamp(3.3rem,10.8vw,8.4rem); margin:40px 0; font-weight:430; letter-spacing:-.065em; }
.hero__bottom { display:grid; gap:28px; }
.hero__role { font-size:1.05rem; line-height:1.5; }
.hero__intro { max-width:560px; }
.hero__intro p { font-size:1rem; }
.hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:32px; }
.button { background:var(--accent); color:var(--button-text); padding:16px 22px; border:1px solid var(--accent); min-height:54px; display:inline-flex; justify-content:space-between; gap:24px; align-items:center; font-size:.82rem; font-weight:500; transition:background var(--duration),transform var(--duration) var(--ease); }
.button:hover { background:#555b47; transform:translateY(-2px); }
.text-link { font-size:.82rem; display:inline-flex; gap:12px; }
.hero__meta { display:flex; gap:20px; justify-content:space-between; margin-top:56px; padding:24px 0; border-bottom:1px solid var(--line); font-size:.65rem; color:var(--muted); }
.hero__meta span:last-child { display:none; }
.section-heading { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:24px; margin-bottom:40px; }
.section-heading__note { color:var(--muted); font-size:.85rem; }
.works-grid { display:grid; gap:40px 24px; }
.project__visual { width:100%; aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:space-between; align-items:start; padding:24px; color:#fff; overflow:hidden; object-fit:cover; transition:transform 450ms var(--ease); }
.project__visual--olive { background:#6b705c; }
/* Реальный сайт: большой экран и мобильная версия в одной карточке. */
.project--site { grid-column:1/-1; display:grid; gap:24px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.site-preview { position:relative; display:block; min-width:0; padding:0 12% 20px 0; align-self:center; }
.site-preview__bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; font-size:.6rem; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:10px 10px 0 0; overflow-wrap:anywhere; }
.site-preview__desktop { display:block; width:100%; height:auto; border:1px solid var(--line); border-top:0; border-radius:0 0 10px 10px; }
.site-preview__mobile { position:absolute; right:0; bottom:0; width:25%; height:auto; border:4px solid var(--text); border-radius:12px; box-shadow:0 8px 24px rgb(0 0 0 / .16); }
.site-project__body { align-self:center; min-width:0; }
.site-project__body .project__meta { flex-wrap:wrap; margin-top:0; }
.site-project__body h3 { font-size:clamp(1.5rem,3vw,2.25rem); }
.site-project__tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:20px 0 24px; }
.site-project__tags li { padding:6px 10px; border:1px solid var(--line); border-radius:6px; font-size:.7rem; color:var(--muted); }
.portfolio-grid:has(.project--site) > .project { margin-top:0; }
@media (min-width:768px) { .project--site { grid-template-columns:1.3fr 1fr; gap:32px; padding:32px; } }
.project__visual--sand { background:#a59a87; color:#171913; }
.project__visual--stone { background:#515750; }
.project__visual span:first-child { font-size:2.5rem; font-weight:300; letter-spacing:-.05em; }
.project__visual span:last-child { font-size:.6rem; letter-spacing:.16em; }
.project:hover .project__visual { transform:translateY(-4px); }
.project__meta { margin:20px 0 10px; display:flex; gap:8px; justify-content:space-between; color:var(--muted); font-size:.6rem; }
.project h3 { font-size:1.1rem; }
.project > p { font-size:.75rem; color:var(--muted); margin-top:8px; }
.services { background:var(--surface); }
.service-number { color:var(--muted); font-size:.65rem; padding-top:5px; display:none; }
.services__note { margin-top:24px; }
.about { display:grid; gap:48px; }
.about__intro > p:not(.eyebrow) { max-width:440px; margin-top:24px; }
.tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.tools li { font-size:.7rem; border:1px solid var(--line); padding:7px 12px; }
.steps li { padding:24px 0; border-top:1px solid var(--line); display:flex; gap:24px; }
.steps li > span { font-size:.7rem; color:var(--accent-text); padding-top:4px; }
.steps h3 { font-size:1.1rem; margin-bottom:8px; }
.steps p { color:var(--muted); font-size:.9rem; }
.bonus { display:flex; align-items:center; gap:24px; border:1px solid var(--line); padding:28px; }
.bonus__mark { font-size:3rem; line-height:1; letter-spacing:-.06em; color:var(--accent-text); }
.bonus__mark > span { display:block; font-size:.65rem; letter-spacing:.03em; margin-top:8px; }
.bonus .eyebrow { margin-bottom:8px; font-size:.6rem; }
.bonus h3 { font-size:1.25rem; }
.bonus p:last-child { font-size:.8rem; margin-top:8px; color:var(--muted); }
.bonus__label { display:none; }
.contact { background:var(--surface); }
.contact__grid { display:grid; gap:48px; }
.contact__intro { max-width:390px; margin-top:28px; color:var(--muted); }
.contact-details { margin:32px 0; }
.contact-details > div { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:12px; font-size:.8rem; }
.contact-details dt { min-width:80px; }
.contact-details dd { color:var(--muted); }
.form-notice { padding:12px 16px; border-left:2px solid var(--accent-text); font-size:.75rem; color:var(--muted); background:var(--bg); }
input:not([type="checkbox"]),textarea { width:100%; min-height:48px; padding:12px 0; border:0; border-bottom:1px solid var(--muted); background:transparent; color:var(--text); font-size:1rem; }
textarea { resize:vertical; min-height:100px; max-height:360px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; font-size:.85rem; }
.footer { padding-block:32px; display:flex; align-items:center; flex-wrap:wrap; gap:24px; font-size:.65rem; color:var(--muted); }
.footer .logo { color:var(--text); }
.footer__top { margin-left:auto; }
.footer a:not(.logo):hover { text-decoration:underline; }
.reveal-ready { opacity:0; transform:translateY(16px); transition:opacity 550ms var(--ease),transform 550ms var(--ease); }
.reveal-ready.is-visible { opacity:1; transform:none; }
.legal { max-width:800px; padding-block:64px 96px; }
.legal h1 { font-size:clamp(2rem,5vw,3.5rem); overflow-wrap:anywhere; margin:32px 0; }
.legal h2 { font-size:1.4rem; letter-spacing:-.025em; margin:40px 0 16px; }
.legal p,.legal li { color:var(--muted); }
.legal ul { list-style:disc; padding-left:24px; }
.legal a { text-decoration:underline; }
.legal .form-notice { margin-bottom:32px; }
@media (max-width:767px) {
  .header__inner { gap:16px; padding-block:16px; min-height:76px; }
  .nav { order:3; width:100%; padding-block:8px; }
  .js-menu .nav { display:none; }
  .js-menu .nav.is-open { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .js-menu .nav a { padding-block:12px; }
  .js-menu .menu-toggle { display:block; }
  .header__controls { margin-left:auto; }
  .bonus { align-items:start; padding:24px; gap:16px; }
}
@media (min-width:480px) { :root { --gutter:32px; } .service-number { display:inline; } }
@media (min-width:768px) {
  :root { --section:96px; }
  .menu-toggle { display:none; }
  .hero { padding-top:64px; }
  .hero__edition { display:block; }
  .hero__bottom { grid-template-columns:5fr 7fr; gap:48px; }
  .hero__meta { margin-top:72px; }
  .hero__meta span:last-child { display:inline; }
  .works-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .project__meta { flex-direction:column; gap:2px; }
  .about { grid-template-columns:1fr 1fr; gap:64px; }
  .bonus { grid-column:1/-1; }
  .bonus__label { display:block; margin-left:auto; font-size:.7rem; color:var(--muted); }
  .contact__grid { grid-template-columns:1fr 1fr; gap:64px; }
  .footer > a:nth-last-child(2) { margin-left:auto; }
  .footer__top { margin-left:24px; }
}
@media (min-width:1024px) {
  :root { --gutter:48px; --section:112px; }
  .header__inner { display:grid; grid-template-columns:1fr auto 1fr; }
  .header__controls { justify-self:end; }
  .nav { gap:32px; }
  .hero__role { font-size:1.2rem; }
  .project__meta { flex-direction:row; }
  .section-heading { margin-bottom:48px; }
  .contact__grid { gap:120px; }
  .hero h1 { margin-block:48px; }
}
@media (min-width:1440px) { :root { --section:120px; } .hero { padding-top:80px; } }
/* Иконки нарисованы CSS: ни один символ не превратится в эмодзи. */
.icon-arrow { display:inline-block; position:relative; width:16px; height:16px; flex-shrink:0; vertical-align:middle; }
.icon-arrow::before { content:""; position:absolute; width:13px; height:1px; background:currentColor; top:8px; left:0; transform:rotate(-45deg); }
.icon-arrow::after { content:""; position:absolute; width:9px; height:9px; right:2px; top:2px; border-top:1px solid; border-right:1px solid; }
.icon-arrow--down { transform:rotate(135deg); }
.icon-arrow--up { transform:rotate(-45deg); }
.theme-glyph { display:block; width:17px; height:17px; border:1px solid currentColor; border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%); transform:rotate(-35deg); transition:transform 450ms var(--ease); }
[data-theme="dark"] .theme-glyph { transform:rotate(145deg); }
.menu-glyph { display:inline-block; width:15px; height:9px; margin-left:8px; border-block:1px solid currentColor; vertical-align:middle; transition:transform 250ms; }
[aria-expanded="true"] .menu-glyph { transform:rotate(-90deg); }
.close-glyph::before,.close-glyph::after { content:""; position:absolute; left:12px; top:21px; width:20px; height:1px; background:currentColor; transform:rotate(45deg); }
.close-glyph::after { transform:rotate(-45deg); }
.required-label { font-size:.65rem; color:var(--muted); font-weight:400; }
.hero { padding-top:32px; }
.hero__composition { display:grid; gap:40px; padding-top:28px; }
.hero__signature { color:var(--muted); font-size:.68rem; letter-spacing:.02em; }
.hero h1 { font-size:clamp(3.4rem,8.2vw,6.6rem); margin:24px 0; line-height:.99; letter-spacing:-.065em; }
.hero__line { display:block; }
.hero__line--accent { color:var(--accent-text); font-family:Georgia,"Times New Roman",serif; font-style:italic; letter-spacing:-.055em; font-weight:400; }
.hero__lead { font-size:clamp(1rem,1.5vw,1.15rem); color:var(--muted); }
.hero__actions { gap:20px; margin-top:28px; }
.hero__bottom { border-top:1px solid var(--line); padding-top:28px; margin-top:40px; }
.hero__intro p { font-size:.88rem; }
.hero__intro p + p { font-size:.8rem; }
.hero__meta { margin-top:32px; }
.site-lab { min-width:0; align-self:center; }
.site-lab__caption { display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:.65rem; margin-bottom:12px; color:var(--muted); }
.site-lab__index { font-variant-numeric:tabular-nums; white-space:nowrap; }
.site-lab__choices { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.site-lab__choices button { flex:1; padding:12px 8px; min-height:44px; color:var(--muted); border:0; border-bottom:2px solid transparent; background:transparent; font-size:.75rem; transition:color 250ms,border-color 250ms; }
.site-lab__choices button[aria-pressed="true"] { color:var(--text); border-bottom-color:var(--accent-text); }
.site-lab__stage { --preview-bg:#e8e5db; --preview-text:#353c30; padding:24px 20px; background:var(--surface); perspective:1000px; border:1px solid var(--line); }
.site-lab__stage[data-kind="expert"] { --preview-bg:#353b32; --preview-text:#f0eee4; }
.site-lab__stage[data-kind="maker"] { --preview-bg:#ded7cb; --preview-text:#383a30; }
.mini-site { position:relative; background:var(--preview-bg); color:var(--preview-text); border:1px solid color-mix(in srgb,var(--preview-text) 18%,transparent); transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform 450ms var(--ease),background 450ms,color 450ms; }
.mini-site__nav,.mini-site__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; font-size:.55rem; letter-spacing:.03em; }
.mini-site__nav { border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent); }
.mini-site__menu { width:16px; height:7px; border-block:1px solid currentColor; }
.mini-site__body { position:relative; padding:28px 16px 36px; min-height:260px; overflow:hidden; isolation:isolate; }
.mini-site__eyebrow { font-size:.55rem; text-transform:uppercase; letter-spacing:.1em; }
.mini-site__title { font:400 clamp(2.3rem,5vw,3.6rem)/1.02 Georgia,"Times New Roman",serif; letter-spacing:-.05em; margin-top:20px; max-width:75%; }
.mini-site__description { font-size:.6rem; line-height:1.7; max-width:70%; margin-top:16px; }
.mini-site__cta { display:inline-block; border-bottom:1px solid; font-size:.55rem; padding-block:8px; margin-top:16px; }
.mini-site__footer { border-top:1px solid color-mix(in srgb,currentColor 18%,transparent); }
.mini-site__art { position:absolute; right:-24px; top:32px; width:43%; height:calc(100% - 56px); z-index:-1; opacity:.24; transform:rotate(-12deg); transition:transform 600ms var(--ease); }
.mini-site__art span { position:absolute; inset:0; border:1px solid currentColor; border-radius:50% 50% 0 0; }
.mini-site__art span:nth-child(2) { inset:16px; }
.mini-site__art span:nth-child(3) { inset:32px; }
[data-kind="expert"] .mini-site__art { transform:rotate(25deg); }
[data-kind="expert"] .mini-site__art span { border-radius:50%; }
[data-kind="maker"] .mini-site__art { transform:rotate(-25deg); }
[data-kind="maker"] .mini-site__art span { border-radius:0; }
.site-lab__hint { font-size:.6rem; color:var(--muted); margin-top:12px; }
.mini-site.is-changing .mini-site__body > p,.mini-site.is-changing .mini-site__cta { animation:preview-in 400ms var(--ease) both; }
@keyframes preview-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes hero-in { from { opacity:0; transform:translateY(24px); clip-path:inset(0 0 100% 0); } to { opacity:1; transform:none; clip-path:inset(0); } }
.hero__line { animation:hero-in 600ms var(--ease) both; }
.hero__line:nth-child(2) { animation-delay:90ms; }
.hero__line:nth-child(3) { animation-delay:180ms; }
.hero__signature,.hero__lead,.hero__actions,.site-lab { animation:preview-in 600ms var(--ease) both; animation-delay:180ms; }
.project { position:relative; }
.project__visual { position:relative; }
.project__visual::after { content:""; position:absolute; width:42%; height:68%; right:24px; bottom:-8%; border:1px solid currentColor; border-radius:50% 50% 0 0; opacity:.25; transform:translateY(14px) rotate(-12deg); transition:transform 600ms var(--ease),opacity 600ms; }
.project:hover .project__visual::after { transform:translateY(0) rotate(0); opacity:.55; }
.project:nth-child(2) .project__visual::after { border-radius:50%; width:55%; height:auto; aspect-ratio:1; bottom:12%; }
.project:nth-child(3) .project__visual::after { border-radius:0; transform:rotate(12deg); }
.works-grid > :nth-child(2) { transition-delay:70ms; }
.works-grid > :nth-child(3) { transition-delay:140ms; }
.service-hint { margin-bottom:16px; }
.service { border-top:1px solid var(--line); transition:background 250ms; }
.service:last-child { border-bottom:1px solid var(--line); }
.service summary { list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto 16px; align-items:center; gap:12px; padding:24px 0; cursor:pointer; min-height:80px; }
.service summary::-webkit-details-marker { display:none; }
.service__name { font-size:clamp(.9rem,1.8vw,1.25rem); line-height:1.4; transition:transform 250ms var(--ease); }
.service__price { font-size:.8rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.service__body { max-width:640px; padding:0 0 28px; font-size:.9rem; color:var(--muted); }
.service__body .text-link { margin-top:20px; color:var(--text); }
.service[open] .service__body { animation:preview-in 350ms var(--ease); }
.service[open] .service__name { color:var(--accent-text); }
.icon-plus { display:block; position:relative; width:16px; height:16px; }
.icon-plus::before,.icon-plus::after { content:""; position:absolute; left:1px; top:7px; width:14px; height:1px; background:currentColor; transition:transform 250ms; }
.icon-plus::after { transform:rotate(90deg); }
.service[open] .icon-plus::after { transform:rotate(0); }
.nav a.is-active { color:var(--accent-text); }
.nav a.is-active::after { transform:scaleX(1); }
.bonus { background:var(--surface); position:relative; overflow:hidden; border-left:3px solid var(--accent); }
.bonus__mark { min-width:60px; }
.button .icon-arrow { transition:transform 250ms var(--ease); }
.button:hover .icon-arrow { transform:translate(2px,-2px); }
.contact__grid > *,.hero__composition > * { min-width:0; }
@media (hover:hover) and (pointer:fine) {
  .service summary:hover .service__name { transform:translateX(8px); }
  .site-lab__stage:hover .mini-site { box-shadow:0 12px 24px rgb(0 0 0 / .06); }
}
@media (min-width:480px) {
  .service summary { grid-template-columns:24px minmax(0,1fr) auto 16px; gap:16px; }
  .service__body { padding-left:40px; }
}
@media (min-width:768px) {
  .hero__composition { grid-template-columns:1.1fr 1fr; align-items:center; gap:40px; padding-top:40px; }
  .hero h1 { font-size:clamp(3.8rem,7.4vw,6.4rem); }
  .hero__bottom { grid-template-columns:1fr 1fr; gap:40px; }
  .hero__actions { flex-direction:column; align-items:start; }
  .site-lab__stage { padding:28px 24px; }
  .mini-site__body { min-height:300px; }
  .mini-site__title { font-size:2.8rem; }
  .works-grid > :nth-child(2) { margin-top:48px; }
  .works-grid > :nth-child(3) { margin-top:96px; }
  .bonus { padding:32px; }
}
@media (min-width:1024px) {
  .hero { padding-top:48px; }
  .hero__composition { grid-template-columns:7fr 5fr; gap:64px; }
  .hero__actions { flex-direction:row; align-items:center; }
  .site-lab__stage { padding:36px 28px; }
  .mini-site__title { font-size:3.25rem; }
  .mini-site__body { min-height:330px; padding:32px 24px; }
  .mini-site__nav,.mini-site__footer { padding-inline:24px; }
  .service summary { gap:24px; }
  .service__body { padding-left:48px; }
}
@media (max-width:479px) {
  :root { --gutter:20px; --section:64px; }
  .hero h1 { font-size:clamp(3.3rem,14vw,4.5rem); }
  .hero__eyebrow { font-size:.6rem; }
  .hero__signature { font-size:.62rem; }
  .hero__actions .button { width:100%; padding-inline:16px; gap:12px; }
  .hero__actions { gap:20px; }
  .service summary { grid-template-columns:minmax(0,1fr) 16px; gap:8px 16px; padding-block:20px; }
  .service__name { grid-column:1; }
  .service__price { grid-row:2; grid-column:1; color:var(--muted); }
  .service .icon-plus { grid-column:2; grid-row:1/3; }
  .bonus { flex-wrap:wrap; }
  .bonus > div { flex-basis:100%; }
  .contact-details > div { display:block; }
  .contact-details dd { margin-top:4px; }
  .project__meta { font-size:.65rem; }
  .footer { gap:20px; }
}
/* Фирменный стиль визитки: графит, лайм и мягкий фиолетовый свет. */
body { background-image:radial-gradient(ellipse at 95% 9%,var(--glow),transparent 32%); }
h1,h2 { font-weight:850; text-transform:uppercase; letter-spacing:-.045em; }
h3 { font-weight:650; }
.logo { font-weight:850; letter-spacing:-.07em; }
.header { background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(16px); }
.header.is-scrolled { box-shadow:0 8px 32px rgb(0 0 0 / .12); }
.theme-toggle,.menu-toggle { border-radius:12px; background:var(--surface); }
.theme-toggle:hover,.menu-toggle:hover { border-color:var(--accent-text); }
.button { border-radius:14px; font-weight:750; color:var(--button-text); box-shadow:0 0 28px rgb(194 247 8 / .08); }
.button:hover { background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:0 0 32px rgb(194 247 8 / .2); }
::selection { color:#111114; background:var(--accent); }
.hero { position:relative; }
.hero__composition { gap:32px; }
.hero h1 { font-size:clamp(3rem,9vw,7rem); font-weight:900; line-height:.93; letter-spacing:-.055em; margin-block:28px; }
.hero__line--accent { font-family:var(--font); font-style:normal; font-weight:900; letter-spacing:-.055em; }
.hero__signature { font-size:.75rem; }
.hero__lead { font-size:1.1rem; color:var(--text); }
.hero__artwork { position:relative; margin:0; min-width:0; animation:preview-in 600ms var(--ease) both; animation-delay:180ms; }
.hero__artwork::before { content:""; position:absolute; inset:16% 8%; border:1px solid rgb(194 247 8 / .4); border-radius:50%; transform:rotate(-25deg); box-shadow:0 0 44px rgb(194 247 8 / .09); pointer-events:none; z-index:-1; }
.hero__artwork img { display:block; width:100%; height:auto; border-radius:24px; border:1px solid var(--line); box-shadow:0 0 64px var(--glow); }
.hero__artwork figcaption { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:20px; }
.hero__eyebrow { color:var(--muted); }
.hero__actions .button { min-height:56px; }
.lab-layout { display:grid; gap:32px; padding-top:72px; margin-top:64px; border-top:1px solid var(--line); }
.lab-intro { align-self:center; }
.lab-intro h2 { font-size:clamp(1.8rem,3.7vw,3rem); line-height:1.05; }
.lab-intro > p:not(.eyebrow) { font-size:.95rem; max-width:440px; margin-top:24px; }
.lab-intro .text-link { margin-top:28px; }
.site-lab__choices { border:1px solid var(--line); padding:5px; border-radius:14px; background:var(--surface); }
.site-lab__choices button { border-radius:10px; border-bottom:0; font-weight:600; }
.site-lab__choices button[aria-pressed="true"] { background:var(--accent); color:#111114; }
.site-lab__stage { --preview-bg:#202126; --preview-text:#f7f7fa; background:radial-gradient(ellipse at 100% 100%,var(--glow),transparent 65%),var(--surface); border-radius:20px; }
.site-lab__stage[data-kind="expert"] { --preview-bg:#c2f708; --preview-text:#16171b; }
.site-lab__stage[data-kind="maker"] { --preview-bg:#312737; --preview-text:#faf7ff; }
.mini-site { border-radius:12px; overflow:hidden; box-shadow:0 12px 32px rgb(0 0 0 / .2); }
.mini-site__title { font-family:var(--font); font-weight:850; text-transform:uppercase; font-size:clamp(1.8rem,3.5vw,2.6rem); max-width:90%; }
.mini-site__cta { background:var(--preview-text); color:var(--preview-bg); border:0; border-radius:6px; padding:10px 12px; font-weight:650; }
.mini-site__art { opacity:.24; }
.project__visual { border:1px solid var(--line); border-radius:18px; }
.project__visual--olive { background:#c2f708; color:#121316; }
.project__visual--sand { background:#30283a; color:#faf7ff; }
.project__visual--stone { background:#23262c; color:#c2f708; }
.project__visual span:first-child { font-family:var(--font); font-weight:850; font-size:3rem; }
.project__visual::after { border-width:2px; }
.project:hover .project__visual { box-shadow:0 12px 32px var(--glow); }
.project__meta { font-size:.66rem; }
.services { background:radial-gradient(ellipse at 0 50%,var(--glow),transparent 60%),var(--surface); border-block:1px solid var(--line); }
.service summary { padding-block:28px; }
.service__name { font-weight:650; }
.service__price { font-size:.95rem; font-weight:750; color:var(--accent-text); }
.service[open] { padding-inline:16px; background:var(--bg); border-radius:12px; }
.tools li { border-radius:8px; background:var(--surface); font-weight:600; }
.steps li > span { font-weight:750; }
.bonus { border-radius:18px; border-left-width:4px; background:radial-gradient(ellipse at 100% 0,var(--glow),transparent 70%),var(--surface); }
.bonus__mark { font-family:var(--font); font-weight:850; }
.bonus h3 { font-weight:750; }
.contact { border-top:1px solid var(--line); background:radial-gradient(ellipse at 10% 90%,var(--glow),transparent 60%),var(--surface); }
.contact h2 { font-size:clamp(2rem,4vw,3.3rem); }
.form-notice { border-radius:0 10px 10px 0; }
.footer { min-height:110px; }
.legal h1 { font-size:clamp(1.9rem,4vw,3.1rem); }
.legal h2 { font-weight:750; }
@media (min-width:768px) {
  .hero__composition { grid-template-columns:1fr 1fr; gap:40px; }
  .hero h1 { font-size:clamp(3rem,6.8vw,6.5rem); }
  .lab-layout { grid-template-columns:1fr 1fr; gap:40px; padding-top:80px; margin-top:80px; }
  .mini-site__title { font-size:2.3rem; }
  .hero__artwork { transform:rotate(2deg); }
}
@media (min-width:1024px) {
  .hero__composition { grid-template-columns:5fr 6fr; gap:64px; }
  .hero h1 { font-size:clamp(4rem,7vw,6.5rem); }
  .lab-layout { gap:80px; }
  .hero__artwork img { border-radius:28px; }
}
@media (max-width:479px) {
  .hero h1 { font-size:clamp(3rem,13.6vw,4rem); }
  .hero__artwork img { border-radius:16px; }
  .hero__artwork::before { inset:20% 12%; }
  .hero__signature { font-size:.65rem; }
  .hero__lead { font-size:1rem; }
  .site-lab__stage { padding:20px 14px; }
  .mini-site__title { font-size:1.8rem; }
  .service__price { color:var(--accent-text); }
  .service[open] { padding-inline:10px; }
  .lab-layout { margin-top:48px; padding-top:48px; }
}
/* Светлая версия сохраняет лайм визитки: тёмные буквы на ярких плашках. */
[data-theme="light"] body { background-image:radial-gradient(ellipse at 100% 6%,var(--glow),transparent 34%); }
[data-theme="light"] .header { background:rgb(247 247 251 / .94); }
[data-theme="light"] .header.is-scrolled { box-shadow:0 8px 28px rgb(40 24 60 / .05); }
[data-theme="light"] .logo__dot { color:#637e00; }
[data-theme="light"] .status-dot { background:var(--accent); box-shadow:0 0 0 3px rgb(194 247 8 / .2); }
[data-theme="light"] .accent { background:var(--accent); color:#18181e; padding:0 .12em; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
[data-theme="light"] .hero__line--accent { display:table; width:auto; max-width:100%; background:var(--accent); color:#18181e; padding:.04em .1em .1em; border-radius:10px; margin-top:.08em; }
[data-theme="light"] .theme-toggle,[data-theme="light"] .menu-toggle { background:#fff; box-shadow:0 3px 12px rgb(38 20 64 / .04); }
[data-theme="light"] .button { box-shadow:0 5px 20px rgb(112 140 0 / .12); }
[data-theme="light"] .button:hover { box-shadow:0 8px 28px rgb(112 140 0 / .22); }
[data-theme="light"] .hero__artwork img { border-color:#34313c; box-shadow:0 16px 48px rgb(97 50 139 / .18); }
[data-theme="light"] .site-lab__choices { background:#fff; }
[data-theme="light"] .site-lab__stage { background:radial-gradient(ellipse at 100% 0,rgb(158 70 229 / .12),transparent 70%),#efedf5; border-color:#d7d2e3; }
[data-theme="light"] .mini-site { box-shadow:0 12px 28px rgb(30 20 46 / .15); }
[data-theme="light"] .project__visual { border-color:transparent; box-shadow:0 6px 20px rgb(40 24 60 / .06); }
[data-theme="light"] .service__price { background:var(--accent); color:#18181e; padding:4px 10px; border-radius:7px; justify-self:start; }
[data-theme="light"] .service-number,[data-theme="light"] .steps li > span { color:#514564; }
[data-theme="light"] .service[open] { background:#f0eef7; }
[data-theme="light"] .service[open] .icon-plus { color:#18181e; }
[data-theme="light"] .nav a.is-active::after { height:3px; background:var(--accent); }
[data-theme="light"] .scroll-progress { background:linear-gradient(90deg,#839e00,var(--accent)); }
[data-theme="light"] .services { background:radial-gradient(ellipse at 0 50%,rgb(158 70 229 / .07),transparent 65%),#fff; }
[data-theme="light"] .tools li { background:#fff; }
[data-theme="light"] .bonus { background:radial-gradient(ellipse at 100% 0,rgb(158 70 229 / .2),transparent 70%),#1b1b21; border-color:#333039; border-left-color:var(--accent); color:#f8f8fa; }
[data-theme="light"] .bonus__mark { color:var(--accent); }
[data-theme="light"] .bonus .eyebrow,[data-theme="light"] .bonus p:last-child,[data-theme="light"] .bonus__label { color:#c9c7d4; }
[data-theme="light"] .contact { background:radial-gradient(ellipse at 10% 90%,rgb(158 70 229 / .09),transparent 60%),#fff; }
[data-theme="light"] .form-notice { background:#f0eef7; border-left-color:#58466d; }
[data-theme="light"] .consultation-dialog { box-shadow:0 24px 100px rgb(50 25 75 / .2); }
[data-theme="light"] .footer { border-top:1px solid var(--line); }
/* Оригинальные логотип и баннер: пропорции и цвета сохраняются в обеих темах. */
.logo { display:inline-flex; align-items:center; flex-shrink:0; border-radius:12px; }
.logo__image { display:block; width:56px; height:56px; object-fit:contain; border-radius:12px; border:1px solid var(--line); }
.footer .logo__image { width:48px; height:48px; }
.contact-details a { text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
.contact-details a:hover { color:var(--accent-text); }
.contact-details dd { min-width:0; max-width:100%; }
.contact-hours { display:block; margin-top:4px; font-size:.75rem; color:var(--muted); }
.brand-banner { margin-block:0 var(--section); }
.brand-banner img { display:block; width:100%; height:auto; aspect-ratio:3/1; object-fit:contain; border-radius:20px; border:1px solid var(--line); box-shadow:0 12px 40px var(--glow); background:#111; }
@media (max-width:479px) {
  .logo__image { width:48px; height:48px; }
  .brand-banner img { border-radius:12px; }
}
/* Самостоятельные страницы направлений и общая навигация. */
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px 12px; font-size:.7rem; color:var(--muted); padding-top:28px; }
.breadcrumbs a:hover { text-decoration:underline; }
.category-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.category-nav a { font-size:.75rem; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.category-nav a[aria-current="page"] { background:var(--accent); color:#111114; border-color:var(--accent); font-weight:700; }
.category-nav a:hover { border-color:var(--accent-text); }
.page-hero { padding-block:56px 24px; }
.page-hero h1 { font-size:clamp(2rem,6vw,4.5rem); max-width:1000px; overflow-wrap:anywhere; }
.page-lead { max-width:700px; color:var(--muted); font-size:clamp(1rem,2vw,1.15rem); margin-top:28px; }
.page-price { font-size:1rem; font-weight:700; margin-block:24px 12px; }
.page-hero .button { margin-top:24px; }
.category-grid,.portfolio-grid { grid-template-columns:1fr; }
.category-grid > .project,.portfolio-grid > .project { margin-top:0; min-width:0; }
.category-card { display:block; }
.category-card__heading { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-top:20px; }
.category-card__heading h3 { font-size:1.3rem; }
.category-card > p { font-size:.9rem; margin-top:12px; }
.category-card__link { display:inline-block; margin-top:20px; border-bottom:1px solid var(--accent-text); font-size:.8rem; }
.category-card .project__visual { aspect-ratio:16/9; }
.category-card .category-card__cover { display:block; height:auto; padding:0; object-fit:contain; }
.category-card:focus-visible .project__visual { transform:translateY(-4px); }
.category-card:hover .category-card__heading .icon-arrow { transform:translate(2px,-2px); }
.portfolio-note { margin-top:32px; color:var(--muted); font-size:.85rem; max-width:700px; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.portfolio-filters button { color:var(--text); background:var(--surface); padding:12px 14px; border:1px solid var(--line); border-radius:10px; min-height:44px; font-size:.75rem; }
.portfolio-filters button[aria-pressed="true"] { background:var(--accent); color:#111114; border-color:var(--accent); font-weight:700; }
.filter-status { margin-bottom:24px; }
.materials-section { border-top:1px solid var(--line); padding-block:48px 72px; }
.materials-section h2 { font-size:clamp(1.8rem,4vw,2.8rem); }
.materials-section > p { color:var(--muted); margin-top:24px; max-width:760px; }
.materials-section ul,.materials-section ol { padding-left:24px; list-style:disc; margin-top:24px; max-width:760px; }
.materials-section ol { list-style:decimal; }
.materials-section li { padding-left:8px; margin-top:12px; }
.support-grid,.before-after { display:grid; gap:24px; margin-top:32px; }
.support-grid article { background:var(--surface); border:1px solid var(--line); padding:24px; border-radius:16px; }
.support-grid p { color:var(--muted); margin-top:16px; }
.before-after article > span { display:block; margin-bottom:12px; font-size:.85rem; }
.comparison-placeholder { aspect-ratio:4/3; display:grid; place-items:center; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--muted); font-size:.85rem; }
.before-after article:last-child .comparison-placeholder { border-color:var(--accent-text); }
.service__price--custom { white-space:normal; max-width:190px; font-size:.75rem; line-height:1.5; }
.support-link { margin-top:24px; }
.nav a[aria-current="page"] { color:var(--accent-text); text-decoration:underline; }
@media (min-width:768px) {
  .nav { gap:18px; }
  .category-grid,.portfolio-grid,.before-after { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .support-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .page-hero { padding-top:72px; }
}
@media (min-width:1024px) { .nav { gap:24px; } }
/* Реальные работы: исходные пропорции, отдельные серии и просмотр без обрезки. */
.portfolio-series { border-top:1px solid var(--line); padding-top:32px; margin-top:48px; }
.portfolio-series__heading { display:grid; gap:16px; margin-bottom:28px; }
.portfolio-series__heading h3 { font-size:clamp(1.4rem,3vw,2rem); }
.portfolio-series__heading p { color:var(--muted); max-width:680px; font-size:.95rem; }
.artwork-grid { display:grid; grid-template-columns:1fr; gap:24px; }
.artwork { display:block; min-width:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); transition:transform 300ms var(--ease),border-color 300ms; }
.artwork img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; background:#eeeae3; }
.artwork-grid--logos img { aspect-ratio:1; }
.artwork-grid--wide img { aspect-ratio:16/9; }
.artwork__caption { display:block; padding:14px 16px; font-size:.75rem; line-height:1.5; }
.artwork__open { display:block; margin-top:6px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.artwork:hover { transform:translateY(-3px); border-color:var(--accent-text); }
.gallery-label { font-size:.8rem; margin:28px 0 16px; color:var(--muted); }
.catalog-pending { margin-top:64px; border:1px dashed var(--line); border-radius:16px; padding:28px; }
.catalog-pending p { margin-top:12px; color:var(--muted); }
.maintenance-grid { display:grid; gap:24px; margin-top:32px; }
.maintenance-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.maintenance-card > img { display:block; width:100%; height:auto; aspect-ratio:1440/1000; object-fit:contain; border-bottom:1px solid var(--line); }
.maintenance-card > div { padding:24px; }
.maintenance-card h3 { margin:12px 0; }
.maintenance-card .text-link { margin-top:20px; }
.maintenance-demo { margin-top:64px; }
.maintenance-demo > h3 { margin:16px 0; }
.maintenance-state { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface); min-width:0; }
.maintenance-state h4 { font-size:1.25rem; margin:20px 0 12px; }
.maintenance-state p { margin:12px 0; }
.maintenance-state--after { border-color:var(--accent-text); }
.maintenance-state__action { display:inline-flex; align-items:center; gap:16px; margin-top:12px; padding:12px 16px; color:var(--button-text); background:var(--accent); border-radius:10px; }
.maintenance-demo > .small { margin-top:20px; }
@media (min-width:1024px) { .maintenance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.artwork-dialog { width:min(1100px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:20px; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--bg); overflow:auto; }
.artwork-dialog::backdrop { background:rgb(0 0 0 / .88); }
.artwork-dialog__bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.artwork-dialog h2 { font-size:1rem; line-height:1.4; text-transform:none; letter-spacing:0; font-weight:600; }
.artwork-dialog button { min-height:44px; padding:10px 14px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:8px; font-size:.8rem; }
.artwork-dialog__stage { display:flex; justify-content:center; align-items:center; min-height:120px; background:var(--surface); border-radius:8px; }
.artwork-dialog__stage img { display:block; max-width:100%; max-height:calc(100dvh - 240px); width:auto; height:auto; object-fit:contain; }
.artwork-dialog__controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
.artwork-counter { font-size:.8rem; font-variant-numeric:tabular-nums; }
.artwork-original { font-size:.75rem; text-decoration:underline; text-underline-offset:4px; }
.artwork-error { padding:12px; color:var(--error); font-size:.85rem; }
@media (min-width:768px) {
  .artwork-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .artwork-grid--wide { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .artwork-grid--logos { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .portfolio-series__heading { grid-template-columns:1fr 1.5fr; gap:40px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal-ready { opacity:1; transform:none; }
  .project:hover .project__visual,.button:hover,.mini-site,.service summary:hover .service__name,.artwork:hover { transform:none; }
}
/* Контакты: прямой выбор канала вместо формы заявки. */
.contact__grid { align-items:start; gap:40px; }
.contact-copy { position:relative; }
.contact-location { color:var(--muted); font-size:.85rem; margin-top:24px; line-height:1.6; }
.contact-prep { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.contact-prep h3 { font-size:1.05rem; margin-bottom:10px; }
.contact-prep p { color:var(--muted); font-size:.9rem; line-height:1.7; max-width:42ch; }
.contact-options { display:grid; gap:14px; min-width:0; }
.contact-card { display:block; padding:26px; border:1px solid var(--line); border-radius:20px; background:var(--surface); text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.contact-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.contact-card:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.contact-card h3 { font-size:1.4rem; margin:0 0 10px; }
.contact-card p { font-size:.9rem; line-height:1.6; margin:0; color:var(--muted); }
.contact-card__tag { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; }
.contact-card__action { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; font-size:.85rem; font-weight:600; }
.contact-card--primary { background:#C2F708; color:#111114; border-color:#C2F708; }
.contact-card--primary p { color:#303517; }
.contact-card--primary:hover { border-color:currentColor; }
.contact-phone { display:block; font-size:clamp(1.2rem,3vw,1.65rem); font-weight:600; margin:12px 0; }
.contact-max { font-size:.85rem; line-height:1.7; color:var(--muted); margin:4px 0; }
@media(min-width:768px) { .contact__grid { grid-template-columns:1fr 1.08fr; gap:64px; } }
@media(max-width:480px) { .contact-card { padding:22px; } .contact-card h3 { font-size:1.25rem; } }
@media(prefers-reduced-motion:reduce) { .contact-card { transition:none; } .contact-card:hover { transform:none; } }