/* KOLTREON · веб-разработка */
:root {
  --bg: #f7f5ff;
  --soft: #e7e1ff;
  --text: #584a7b;
  --ink: #242132;
  --accent: #8e79d1;
  --surface: #ffffff;
  --line: #d4c9ff;
  --muted: color-mix(in srgb, var(--ink) 64%, white);
  --radius: 30px;
  --gap: 34px;
  --shadow: 0 20px 60px rgba(20, 30, 35, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size:16px; line-height:1.55; overflow-x:hidden; text-rendering: geometricPrecision; }
a { color: inherit; text-decoration:none; }
.nowrap, .phone-link, .header-phone, .mobile-phone { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px; padding:14px clamp(16px,4vw,54px); background: color-mix(in srgb, var(--bg) 88%, white); backdrop-filter: blur(18px); border-bottom:1px solid color-mix(in srgb, var(--line) 48%, transparent); }
.brand { display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.02em; min-width:max-content; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--accent); color:var(--surface); font-size:13px; font-weight:700; }
.desktop-nav { display:flex; align-items:center; gap:22px; margin-left:auto; color:var(--muted); font-size:14px; }
.desktop-nav a { transition:.2s ease; } .desktop-nav a:hover { color:var(--ink); }
.header-phone { display:inline-flex; align-items:center; min-width:max-content; padding:10px 14px; border-radius:999px; background:var(--surface); box-shadow:0 8px 28px rgba(0,0,0,.06); font-weight:650; color:var(--text); }
.menu-btn { display:none; margin-left:auto; width:44px; height:44px; border:0; border-radius:999px; background:var(--surface); box-shadow:0 8px 24px rgba(0,0,0,.07); }
.menu-btn span { display:block; width:20px; height:2px; background:var(--ink); margin:5px auto; transition:.25s ease; }
.mobile-menu { position:fixed; inset:0; z-index:19; background: color-mix(in srgb, var(--bg) 94%, white); opacity:0; pointer-events:none; transform:translateY(-18px); transition:.32s ease; padding:96px 22px 34px; }
.mobile-menu.open { opacity:1; pointer-events:auto; transform:none; }
.mobile-menu-inner { display:grid; gap:18px; max-width:520px; margin:0 auto; }
.mobile-menu a { padding:18px 20px; background:var(--surface); border-radius:22px; box-shadow:var(--shadow); font-size:20px; }
.mobile-phone { color:var(--text); font-weight:700; }
.preloader { position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:var(--bg); color:var(--text); transition:opacity .45s ease, visibility .45s ease; }
.preloader.hide { opacity:0; visibility:hidden; }
.preloader-mark { display:grid; place-items:center; gap:12px; font-weight:700; }

@keyframes pulse { from { transform:scale(.96); opacity:.6; } to { transform:scale(1.04); opacity:1; } }
main { width:min(1180px, calc(100% - 32px)); margin:0 auto; }
.hero { position:relative; min-height:560px; display:grid; align-items:center; gap:clamp(22px,4vw,62px); padding:clamp(46px,8vw,96px) 0; }
.hero h1 { margin:0; font-size:clamp(34px,6vw,72px); line-height:.98; letter-spacing:-.06em; font-weight:680; max-width:850px; }
.lead { max-width:680px; font-size:clamp(17px,2.2vw,22px); color:var(--muted); margin:22px 0 0; }
.eyebrow, .section-kicker { display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:8px; margin-bottom:14px; color:var(--text); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow::before, .section-kicker::before { content:""; width:26px; height:2px; background:var(--accent); border-radius:999px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:14px 20px; border-radius:999px; font-weight:700; transition:.22s ease; }
.btn.primary { background:var(--text); color:var(--surface); box-shadow:0 16px 32px color-mix(in srgb, var(--text) 22%, transparent); }
.btn.ghost { background:var(--surface); color:var(--ink); border:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.btn:hover { transform:translateY(-2px); }
.hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.hero-badges span { padding:8px 12px; border-radius:999px; background:color-mix(in srgb, var(--surface) 76%, var(--soft)); font-size:13px; color:var(--muted); }
.hero-panel { position:relative; min-height:340px; padding:22px; border-radius:calc(var(--radius) + 16px); background:linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, var(--soft)), var(--soft)); overflow:hidden; box-shadow:var(--shadow); display:grid; align-content:end; gap:12px; }

.panel-card { position:relative; padding:16px; border-radius:var(--radius); background: color-mix(in srgb, var(--surface) 76%, transparent); border:1px solid color-mix(in srgb, var(--line) 60%, transparent); backdrop-filter: blur(6px); }
.panel-card span { display:block; color:var(--muted); font-size:13px; } .panel-card b { display:block; margin-top:4px; font-size:18px; font-weight:650; }
.section { position:relative; margin:clamp(36px,7vw,86px) 0; padding:clamp(26px,5vw,60px); border-radius:calc(var(--radius) + 10px); background:color-mix(in srgb, var(--surface) 82%, var(--soft)); border:1px solid color-mix(in srgb, var(--line) 62%, transparent); box-shadow:0 14px 46px rgba(20,30,35,.06); }
.section h2 { margin:0 0 18px; font-size:clamp(26px,4vw,46px); line-height:1.04; letter-spacing:-.045em; font-weight:660; color:var(--ink); }
.section p { color:var(--muted); margin:0; }
.text-columns { display:grid; grid-template-columns:1fr .8fr; gap:var(--gap); }
ul { padding:0; margin:0; list-style:none; }
.mark-list, .prep-list { display:grid; gap:10px; }
.mark-list li, .prep-list li { padding:14px 14px 14px 40px; border-radius:16px; background:var(--surface); position:relative; }
.mark-list li::before, .prep-list li::before { content:""; position:absolute; left:16px; top:22px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.method-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
.step { padding:18px; border-radius:var(--radius); background:var(--surface); border:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.step span { color:var(--text); font-weight:800; } .step h3 { margin:10px 0 8px; font-size:18px; line-height:1.18; } .step p { font-size:14px; }
.scope-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.scope-grid article { min-height:150px; padding:20px; border-radius:var(--radius); background:var(--surface); border-left:4px solid var(--accent); }
.scope-grid b { display:block; margin-bottom:8px; } .wide-note { margin-top:22px !important; }
.phone-link { color:var(--text); font-weight:700; }
.compare-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:14px; }
.compare-grid div { padding:22px; border-radius:var(--radius); background:var(--surface); }
.compare-grid div:last-child { background:color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.prep-list { grid-template-columns:repeat(2,1fr); }
.price { display:grid; grid-template-columns:1fr minmax(260px,.45fr); align-items:center; gap:28px; }
.price-call { display:grid; gap:8px; padding:26px; border-radius:calc(var(--radius) + 12px); background:var(--text); color:var(--surface); box-shadow:0 18px 40px color-mix(in srgb, var(--text) 18%, transparent); }
.price-call span { opacity:.82; } .price-call strong { font-size:clamp(22px,3vw,34px); white-space:nowrap; }
.result-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.result-strip div { padding:20px; border-radius:var(--radius); background:var(--surface); } .result-strip b { display:block; margin-bottom:8px; } .result-strip span { color:var(--muted); }
.faq-list { display:grid; gap:12px; }
details { background:var(--surface); border-radius:var(--radius); padding:18px 20px; }
summary { cursor:pointer; font-weight:700; } details p { margin-top:12px; }
.final-cta { margin:clamp(42px,8vw,96px) 0; padding:clamp(30px,5vw,60px); border-radius:36px; background:linear-gradient(135deg, var(--text), color-mix(in srgb, var(--text) 70%, var(--accent))); color:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:22px; overflow:hidden; }
.final-cta h2 { margin:0 0 10px; font-size:clamp(28px,4vw,50px); line-height:1; letter-spacing:-.045em; } .final-cta p { margin:0; opacity:.82; max-width:640px; } .final-cta .section-kicker { color:var(--surface); } .final-cta .section-kicker::before { background:var(--surface); } .final-cta .btn.primary { background:var(--surface); color:var(--text); box-shadow:none; min-width:max-content; }
.footer { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:32px clamp(16px,4vw,54px) 112px; color:var(--muted); } .footer b, .footer a { color:var(--ink); font-weight:700; } .footer div { display:grid; }
.sticky-call { position:fixed; z-index:18; left:50%; bottom:16px; transform:translateX(-50%); display:none; width:min(520px, calc(100% - 28px)); }
.sticky-call a { display:flex; justify-content:center; align-items:center; gap:10px; min-height:58px; padding:12px 18px; border-radius:999px; background:var(--text); color:var(--surface); box-shadow:0 18px 40px color-mix(in srgb, var(--text) 25%, transparent); } .sticky-call span { opacity:.78; }
.cookie-banner { position:fixed; z-index:40; left:20px; right:20px; bottom:20px; display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:760px; margin:auto; padding:14px 16px; border-radius:20px; background:var(--surface); box-shadow:var(--shadow); border:1px solid color-mix(in srgb, var(--line) 60%, transparent); transform:translateY(120%); opacity:0; transition:.32s ease; }
.cookie-banner.show { transform:none; opacity:1; } .cookie-banner p { margin:0; color:var(--muted); } .cookie-banner button { border:0; border-radius:999px; padding:10px 16px; background:var(--text); color:var(--surface); font-weight:700; cursor:pointer; }
.reveal { opacity:0; transform:translateY(22px); transition:.6s ease; } .reveal.visible { opacity:1; transform:none; }

body.corner .hero { grid-template-columns:1fr .72fr; background:linear-gradient(135deg, transparent 0 60%, color-mix(in srgb, var(--soft) 46%, transparent) 60% 100%); }
body.corner .hero-panel { border-radius:18px 90px 18px 18px; }
body.corner .section { border-radius:34px 8px 34px 8px; }
body.corner .method-grid { grid-template-columns:repeat(4,1fr); align-items:start; }
body.corner .scope-grid { grid-template-columns:1.2fr .8fr 1fr 1fr; }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .menu-btn { display:block; }
  .site-header { gap:12px; }
  .header-phone { margin-left:auto; font-size:14px; padding:9px 12px; }
  .hero, body.corner .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-panel { min-height:280px; }
  .text-columns, .price, .compare-grid { grid-template-columns:1fr; }
  .method-grid, .scope-grid, .result-strip, .prep-list { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size:15px; }
  main { width:min(100% - 24px, 1180px); }
  .site-header { padding:10px 12px; }
  .brand span:last-child { display:none; }
  .header-phone { font-size:13px; max-width:calc(100vw - 132px); overflow:hidden; text-overflow:ellipsis; }
  .hero { padding:36px 0 20px; }
  .hero h1 { font-size:clamp(32px,12vw,46px); letter-spacing:-.05em; }
  .hero-actions { flex-direction:column; }
  .btn { width:100%; }
  .hero-panel { min-height:240px; padding:16px; }
  .section { padding:22px 16px; margin:34px 0; border-radius:24px; }
  .method-grid, .scope-grid, .result-strip, .prep-list { grid-template-columns:1fr; }
  .final-cta { flex-direction:column; align-items:stretch; padding:28px 18px; }
  .footer { display:grid; padding-bottom:96px; }
  .sticky-call { display:block; }
  .cookie-banner { bottom:86px; flex-direction:column; align-items:stretch; }
}

html { scroll-padding-top: 88px; }
body { min-width:320px; background-image:radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 32rem), radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--soft) 40%, transparent), transparent 28rem); background-attachment:fixed; }
::selection { background:color-mix(in srgb, var(--accent) 28%, var(--surface)); color:var(--ink); }
.site-header { -webkit-backdrop-filter:blur(18px) saturate(1.16); backdrop-filter:blur(18px) saturate(1.16); box-shadow:0 7px 28px rgba(20,30,35,.035); }
.brand-mark, .header-phone, .btn, .price-call, .sticky-call a, .cookie-banner button, .menu-btn { transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, opacity .22s ease; }
.desktop-nav a { position:relative; padding:6px 0; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:1px; height:2px; border-radius:999px; background:var(--accent); transition:right .22s ease; }
.hero-panel { isolation:isolate; border:1px solid color-mix(in srgb, var(--line) 62%, transparent); box-shadow:0 28px 72px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 1px 0 color-mix(in srgb, white 72%, transparent); }
.hero-panel::before { content:""; position:absolute; z-index:-2; width:70%; aspect-ratio:1; right:-18%; top:-24%; border-radius:50%; background:radial-gradient(circle at 32% 32%, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--accent) 28%, transparent) 42%, transparent 72%); filter:blur(1px); }
.hero-panel::after { content:""; position:absolute; z-index:-1; width:74%; height:38%; left:-14%; bottom:6%; border-radius:999px; background:linear-gradient(108deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--surface) 54%, transparent)); transform:rotate(-11deg); filter:blur(16px); opacity:.88; }
.panel-card { -webkit-backdrop-filter:blur(12px) saturate(1.12); backdrop-filter:blur(12px) saturate(1.12); box-shadow:0 12px 30px rgba(20,30,35,.055); }
.section { overflow:hidden; }
.step, .scope-grid article, .compare-grid div, .mark-list li, .prep-list li, .result-strip div, details { border:1px solid color-mix(in srgb, var(--line) 58%, transparent); box-shadow:0 9px 26px rgba(20,30,35,.035); transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.step span { display:inline-grid; place-items:center; min-width:34px; height:30px; padding:0 9px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.scope-grid article { position:relative; overflow:hidden; }
.scope-grid article::after { content:""; position:absolute; width:54px; height:54px; right:-22px; bottom:-22px; border-radius:50%; background:color-mix(in srgb, var(--accent) 12%, transparent); }
.price-call { position:relative; overflow:hidden; }
.price-call::after { content:""; position:absolute; width:170px; height:170px; right:-76px; top:-88px; border-radius:50%; background:color-mix(in srgb, var(--surface) 12%, transparent); }
details[open] { border-color:color-mix(in srgb, var(--accent) 36%, var(--line)); }
summary { list-style:none; position:relative; padding-right:36px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--text); font-size:20px; line-height:1; transition:transform .22s ease; }
details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.preloader-mark::before { content:"ДГ"; display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:var(--accent); color:var(--surface); font-size:18px; font-weight:800; box-shadow:0 18px 44px color-mix(in srgb, var(--accent) 28%, transparent); animation:pulse 1.1s ease infinite alternate; }
.mobile-menu { -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.mobile-menu a { border:1px solid color-mix(in srgb, var(--line) 54%, transparent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 52%, transparent); outline-offset:3px; }
.hero h1, .section h2, .final-cta h2, .panel-card b, .scope-grid b, .step h3 { overflow-wrap:anywhere; }
@media (hover:hover) and (pointer:fine) {
  .brand:hover .brand-mark { transform:rotate(-3deg) scale(1.04); }
  .header-phone:hover, .btn:hover, .price-call:hover, .sticky-call a:hover { transform:translateY(-2px); box-shadow:0 18px 42px color-mix(in srgb, var(--text) 17%, transparent); }
  .desktop-nav a:hover::after { right:0; }
  .step:hover, .scope-grid article:hover, .compare-grid div:hover, .result-strip div:hover, details:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 34%, var(--line)); box-shadow:0 18px 40px rgba(20,30,35,.075); }
}
@media (max-width:760px) {
  body { background-attachment:scroll; }
  .hero { gap:24px; }
  .hero-panel { min-height:260px; }
  .panel-card b { font-size:16px; }
  .hero-badges { gap:6px; }
  .hero-badges span { padding:7px 10px; }
  .section h2 { line-height:1.08; }
  .price-call { width:100%; }
}
@media (max-width:460px) {
  .site-header { gap:8px; }
  .header-phone { display:none; }
  .menu-btn { margin-left:auto; flex:0 0 auto; }
  .brand span:last-child { display:inline; font-size:14px; }
  .hero h1 { font-size:clamp(31px,11.4vw,44px); }
  .lead { font-size:16px; }
  .hero-panel { min-height:230px; }
  .section { padding:22px 15px; }
  .price-call strong { font-size:21px; }
  .sticky-call a { min-height:56px; }
  .cookie-banner { left:12px; right:12px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}