.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:20;background:rgba(251,248,243,.88);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center}
.nav-links{display:flex;gap:22px;margin-left:12px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.hero{padding:72px 0 56px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-weight:700;font-size:13.5px;margin-bottom:20px}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.03em;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:19px;color:var(--muted);max-width:34em;margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-note{font-size:14px;color:var(--muted)}
.hero-note span{display:inline-flex;align-items:center;gap:6px;margin-right:18px}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:-1}
.blob.a{width:380px;height:380px;background:#E9DDCB;top:-80px;right:-60px}
.blob.b{width:300px;height:300px;background:#E8EFD6;bottom:-120px;left:-80px}
.device{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.device-bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.device-bar i{width:10px;height:10px;border-radius:50%;background:#D5CFC0;display:block}
.section{padding:84px 0}
.section.alt{background:var(--soft)}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.025em}
.section-head p{color:var(--muted);font-size:18px;margin:0}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card h3{font-size:19px;font-weight:700}
.card p{color:var(--muted);margin:0;font-size:15.5px}
.icon{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:18px}
.icon.g{background:var(--green-soft)}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:84px}
.feature:last-child{margin-bottom:0}
.feature.rev .feature-text{order:2}
.feature h3{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em}
.feature p{color:var(--muted);font-size:17px}
.ticks{list-style:none;padding:0;margin:18px 0 0}
.ticks li{position:relative;padding:5px 0 5px 32px;font-size:16px}
.ticks li:before{content:"";position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%233F6B5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{position:relative;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.step:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;margin-bottom:14px}
.step h3{font-size:17px}.step p{color:var(--muted);font-size:15px;margin:0}
.plan{max-width:620px;margin:0 auto;text-align:center;padding:40px}
.plan .big{font-size:42px;font-weight:800;letter-spacing:-.03em;margin:6px 0}
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 20px;margin-bottom:12px}
.faq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;line-height:1;color:var(--accent)}
.faq details[open] summary:after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:18px;margin:0}
.apply{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.apply-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.done-box{background:var(--green-soft);color:#24493b;border-radius:14px;padding:18px 20px;margin-bottom:20px;font-weight:600}
.footer{padding:40px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.footer .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
.footer a{color:var(--muted)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--bg);padding:16px 24px;border-bottom:1px solid var(--line);gap:14px}
  .nav-cta .hide-m{display:none}
  .hero .wrap,.feature,.apply{grid-template-columns:1fr;gap:34px}
  .feature.rev .feature-text{order:0}
  .cards3,.steps{grid-template-columns:1fr 1fr}
  .section{padding:60px 0}.feature{margin-bottom:56px}
}
@media (max-width:620px){
  .wrap{padding:0 18px}
  .cards3,.steps,.row2{grid-template-columns:1fr}
  .hero{padding:40px 0 30px}
  .lead{font-size:17px}
  .apply-box{padding:22px}
}
.shotcap{margin:0;padding:10px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--soft)}
.device img{border-bottom:0}

.side .logo{font-size:16px;line-height:1.15;gap:10px;align-items:center}
.side .logo-mark{flex:none}


/* ===== название «ТумбАчка»: тяжёлый графит + терракотовая «А» с ручкой ===== */
.brand,.brand-xl,.wm-sub{font-family:"Onest","Manrope","Inter",system-ui,-apple-system,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.brand{font-weight:900;letter-spacing:-.045em;line-height:1;color:#202124;white-space:nowrap}
.brand .ba{position:relative;display:inline-block;color:#C96B45}
.brand .ba::after{content:"";position:absolute;left:50%;top:57%;width:.17em;height:.17em;margin:-.085em 0 0 -.085em;border-radius:50%;background:radial-gradient(circle,#F6F1E8 0 26%,#202124 30%)}
.logo .brand{font-size:22px}
.side .logo .brand{font-size:19px;color:#F6F1E8}
.wordmark{margin-bottom:22px}
.brand-xl{display:inline-block;font-size:clamp(54px,9.4vw,96px);line-height:1.02}
.wm-sub{display:block;margin-top:14px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.logo-mark{background:#202124;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 6px 16px rgba(32,33,36,.28)}

.brand .bo{color:#C96B45}
.side .logo .brand .bo{color:#E58A63}

/* «А» как на фирменной доске: крупнее остальных, маленькая тёмная «ручка» */
.brand .ba{transform:scale(1.26);transform-origin:50% 80%;margin:0 .07em 0 .05em}
.brand .ba::after{top:56%;width:.1em;height:.1em;margin:-.05em 0 0 -.05em;background:radial-gradient(circle,#F6F1E8 0 16%,#202124 20%)}
.logo .brand .ba{margin:0 .04em 0 .03em}

/* «А» — нарисованная: фигурная, с ручкой-стойкой внутри */
.brand .ba{display:inline-block;width:.92em;height:.92em;vertical-align:baseline;margin:0 .01em;transform:none;overflow:visible;fill:#C96B45;stroke:#C96B45;stroke-width:3;stroke-linejoin:round;color:#C96B45;-webkit-text-fill-color:initial}
.brand .ba::after{content:none}
.brand .ba rect{fill:#202124;stroke:none}
.logo .brand .ba{margin:0}

/* название — картинка с доски: слово целиком */
.wm{display:block;height:1.02em;width:auto;max-width:none}
.wm-light{display:none}
.side .wm-dark{display:none}
.side .wm-light{display:block}
.logo .brand{line-height:1}
.logo .wm{height:1.1em}
.brand-xl .wm{height:1.2em}

/* ===== луч фонаря: А → О под курсором ===== */
.wm-fx{position:relative;display:block;line-height:0;isolation:isolate}
.wm-fx .wm-alt{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .18s}
.wm-light,.wm-alt-light{display:none!important}
.side .wm-dark,.side .wm-alt-dark{display:none!important}
.side .wm-light{display:block!important}
.side .wm-alt-light{display:block!important}
.wm-fx.lit .wm-alt{opacity:1;-webkit-mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),#000 0,#000 58%,transparent 100%);mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),#000 0,#000 58%,transparent 100%)}
.wm-fx.lit .wm:not(.wm-alt){-webkit-mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),transparent 0,transparent 42%,#000 92%);mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),transparent 0,transparent 42%,#000 92%)}
.wm-fx::after{content:"";position:absolute;left:-60px;right:-60px;top:-60px;bottom:-60px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(circle calc(var(--r,80px)*1.5) at calc(var(--x,50%) + 60px) calc(var(--y,50%) + 60px),rgba(255,226,160,.7),rgba(255,226,160,0) 70%)}
.wm-fx.lit::after{opacity:1}
.side .wm-fx::after{background:radial-gradient(circle calc(var(--r,80px)*1.5) at calc(var(--x,50%) + 60px) calc(var(--y,50%) + 60px),rgba(255,226,160,.35),rgba(255,226,160,0) 70%)}
.wm-fx.lit .wm-alt{-webkit-mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),#000 0,#000 78%,transparent 98%);mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),#000 0,#000 78%,transparent 98%)}
.wm-fx.lit .wm:not(.wm-alt){-webkit-mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),transparent 0,transparent 74%,#000 92%);mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),transparent 0,transparent 74%,#000 92%)}

/* под лучом — весёлая версия комиксным шрифтом: «ТумбОчка» */
.wm-alt{overflow:visible}
.wm-alt text{font-family:"Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue","Pangolin",cursive;font-weight:700;font-size:330px;fill:#202124}
.wm-alt text .o{fill:#7B4A24}
.wm-alt-light text{fill:#F6F1E8}
.wm-alt-light text .o{fill:#C28A58}
.wm-fx.lit .wm-alt{-webkit-mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),#000 0,#000 84%,transparent 100%);mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),#000 0,#000 84%,transparent 100%)}
.wm-fx.lit .wm:not(.wm-alt){-webkit-mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),transparent 0,transparent 80%,#000 100%);mask-image:radial-gradient(circle var(--r,80px) at var(--x,50%) var(--y,50%),transparent 0,transparent 80%,#000 100%)}