/* Шрифты IBM Plex — локально, лицензия SIL OFL 1.1 (assets/fonts/OFL.txt) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --stage:#0E1013; --surface:#16191E; --line-d:#23262C; --line-d2:#2E3238;
  --text-d:#EEECE7; --soft-d:#C4C7CC; --muted-d:#9CA1A9;
  --accent:#FF6A2B;
  --bg:#F4F4F1; --alt:#EAEAE6; --ink:#121417; --soft:#3D4148; --muted:#555A62; --line:#C9CBC5; --link:#C2410C;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pad:clamp(16px, 5vw, 56px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stage);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55}
a{color:var(--link)} a:hover{color:#9A3412}
button{font:inherit}
.wrap{max-width:1280px;margin:0 auto}
.mono{font-family:var(--mono)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--accent);color:var(--stage);font-weight:600;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:hover{color:var(--stage);filter:brightness(1.06)}
.btn-ghost{background:transparent;border:1.5px solid var(--text-d);color:var(--text-d)}
.btn-ghost:hover{color:var(--text-d);background:rgba(238,236,231,.06)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.note{display:inline-block;padding:3px 10px;border-radius:999px;background:#FEF3C7;color:#92400E;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:0;vertical-align:middle}
@keyframes vzIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vzPop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
@keyframes vzPulse{0%{box-shadow:0 0 0 0 rgba(255,106,43,.45)}100%{box-shadow:0 0 0 22px rgba(255,106,43,0)}}
@media (prefers-reduced-motion: reduce){*{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}html{scroll-behavior:auto}}

/* шапка */
.top{position:sticky;top:0;z-index:20;background:rgba(14,16,19,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line-d);color:var(--text-d);padding:12px var(--pad)}
.top .wrap{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:flex;flex-direction:column;color:var(--text-d);text-decoration:none;line-height:1.3}
.brand b{font-weight:600;font-size:17px}
.brand span{font-family:var(--mono);font-size:12px;color:var(--muted-d)}
.brand:hover{color:var(--text-d)}
.nav{display:flex;flex-wrap:nowrap;align-items:center;gap:6px 22px;font-size:15px;white-space:nowrap}
.nav a{color:var(--text-d);text-decoration:none}
.nav .btn{min-height:44px;padding:0 18px}
@media (max-width:560px){.nav .navlink{display:none}}

/* фишка: задание */
.hero{background:var(--stage);color:var(--text-d)}
.hook{min-height:max(600px, calc(100svh - 70px));padding:clamp(28px,6vw,72px) var(--pad);display:flex;align-items:center}
.hook .wrap{width:100%}
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--muted-d)}
.h1{margin:0;font-size:clamp(30px,4.6vw,58px);line-height:1.06;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.lead{margin:0;color:var(--soft-d);max-width:520px}
.cols{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,72px)}
.col-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:22px}
.ring-col{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.ring{position:relative;width:min(300px,78vw);aspect-ratio:1/1}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .prog{stroke-dasharray:603.19;stroke-dashoffset:603.19;transition:stroke-dashoffset .55s cubic-bezier(.2,.8,.2,1)}
.tap{position:absolute;inset:17%;border-radius:50%;border:1px solid var(--line-d2);background:var(--surface);color:var(--text-d);font-size:clamp(20px,3vw,26px);font-weight:600;cursor:pointer;animation:vzPulse 1.6s ease-out infinite;transition:transform .12s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tap:active{transform:scale(.95)}
.status{font-family:var(--mono);font-size:15px;color:var(--muted-d)}
.status.hot{color:var(--accent)}
.done{display:flex;flex-direction:column;gap:clamp(24px,3.5vw,40px)}
.done-top{display:flex;flex-wrap:wrap;align-items:stretch;gap:20px 40px}
.prize{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:8px;background:var(--accent);color:var(--stage);animation:vzPop .65s ease-out both}
.prize a{align-self:start;display:inline-flex;align-items:center;min-height:44px;color:var(--stage);font-weight:600}
.prize .p-title{font-size:clamp(22px,2.6vw,28px);line-height:1.2;font-weight:600}
.why{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:10px;animation:vzIn .5s .25s ease-out both}
.four{font-size:clamp(56px,8vw,96px);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--accent);animation:vzPop .6s .2s ease-out both}
.tricks-wrap{display:flex;flex-direction:column;gap:10px}
.tricks{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px}
.tricks li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:8px;background:var(--surface);border:1px solid var(--line-d);animation:vzIn .5s ease-out both}
.tricks b{font-size:17px;font-weight:600}
.tricks li > span{font-size:15px;color:var(--soft-d)}
.bottom-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:20px;border-top:1px solid var(--line-d);animation:vzIn .5s 1.2s ease-out both}
.bottom-line p{margin:0;flex:1 1 420px;max-width:660px}

/* разделы */
.sec{padding:clamp(56px,8vw,104px) var(--pad);background:var(--bg)}
.sec.alt{background:var(--alt)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;margin-bottom:28px}
.h2{margin:0;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.02em;font-weight:600}
.sec-note{font-family:var(--mono);font-size:13px;color:var(--muted)}
.about{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(28px,5vw,64px)}
.about img{flex:0 1 260px;width:260px;max-width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:6px;background:#DCDDD8}
.about-text{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:22px}
.about-lead{margin:0;font-size:clamp(21px,2.3vw,28px);line-height:1.35;font-weight:500;text-wrap:pretty}
.about-sub{margin:0;color:var(--soft);text-wrap:pretty}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px;background:#DCDDD8;border:1px solid #DCDDD8;border-radius:6px;overflow:hidden;margin-top:6px}
.facts div{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--bg)}
.facts b{font-size:36px;line-height:1;font-weight:600;letter-spacing:-.02em}
.facts span{font-size:14px;color:var(--soft)}
.svc{border-bottom:1px solid var(--line)}
.svc details{border-top:1px solid var(--line)}
.svc summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;min-height:72px;padding:14px 0;cursor:pointer}
.svc summary::-webkit-details-marker{display:none}
.svc .s-name{flex:1 1 320px;min-width:0;font-size:clamp(19px,2vw,23px);font-weight:500}
.svc .s-meta{font-family:var(--mono);font-size:13px;color:var(--muted)}
.svc .s-free{color:var(--link);font-weight:500}
.svc .plus{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid var(--ink);font-size:18px;line-height:1;transition:transform .2s ease}
.svc details[open] .plus{transform:rotate(45deg)}
.svc p{margin:0 0 22px;max-width:760px;color:var(--soft)}
.small{margin:16px 0 0;font-size:14px;color:var(--muted)}
.mat{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.mat li{border-top:1px solid var(--line);scroll-margin-top:80px}
.mat li:target{background:#FFF1E8}
.mat a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;padding:18px 0;color:var(--ink);text-decoration:none}
.mat a:hover .m-title{text-decoration:underline;text-underline-offset:3px}
.mat .m-meta{flex:0 0 150px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.mat .m-body{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:2px}
.mat .m-title{font-size:19px;font-weight:500}
.mat .m-sub{font-size:15px;color:var(--soft)}
.mat .m-go{flex:0 0 auto;font-weight:600;color:var(--link)}
.mat .m-soon{color:var(--muted);font-weight:500;font-family:var(--mono);font-size:13px}
.contact{background:var(--stage);color:var(--text-d);padding:clamp(56px,8vw,104px) var(--pad) 40px}
.contact .h2{max-width:820px;font-size:clamp(32px,4.4vw,56px);text-wrap:balance}
.contact .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:64px;padding-top:20px;border-top:1px solid var(--line-d);font-size:13px;color:var(--muted-d)}