/* nauchi-ai.ru. Phone: the approved 390x844 mockup, scaled by --u (1 mockup px). Desktop: from 900px. */
@font-face{font-family:InterTight;src:url(/assets/fonts/InterTight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/fonts/Manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Unbounded;src:url(/assets/fonts/Unbounded.woff2) format("woff2");font-weight:200 900;font-display:swap}
/* --u = 1 mockup px by width; --k = the same, shrunk so the phone hero (down to the two buttons) fits the visible height */
:root{--neon:#DCFE00;--ink:#111;--bg:#EFEEEA;--u:calc(min(100vw, 480px) / 390);
  --k:clamp(calc(var(--u) * .64), calc((100vh - 112px) / 705), var(--u))}
@supports (height:100svh){:root{--k:clamp(calc(var(--u) * .64), calc((100svh - 112px) / 705), var(--u))}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}

/* ---------- header + menu */
.top{position:fixed;left:0;right:0;top:0;z-index:50;height:60px;padding:0 calc(50vw - 171 * var(--u));display:flex;align-items:center;justify-content:space-between;background:rgba(239,238,234,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.top img{height:24px;width:auto}
.soc{display:flex;align-items:center;gap:8px}
.ic,.ic svg{display:block;width:38px;height:38px}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:40px;height:40px;border-radius:50%;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{display:block;width:16px;height:2px;background:var(--neon);border-radius:2px}
.menu nav{position:absolute;right:0;top:50px;background:#fff;border-radius:20px;padding:10px;min-width:220px;box-shadow:0 18px 40px rgba(0,0,0,.16);display:flex;flex-direction:column}
.menu nav a{padding:12px 14px;border-radius:12px;font:700 13px Unbounded}
.menu nav a:hover{background:var(--neon)}

/* ---------- hero (phone) */
.hero{position:relative;overflow:hidden}
.hb{position:relative;width:calc(390 * var(--u));height:calc(844 * var(--u));margin:0 auto}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(70 * var(--u));background:linear-gradient(rgba(239,238,234,0),var(--bg));z-index:8;pointer-events:none}
.slab{position:absolute;left:calc(250 * var(--u));top:calc(70 * var(--u));width:calc(96 * var(--u));height:calc(470 * var(--u));background:var(--neon);z-index:1;transform:rotate(8deg)}
.big{position:relative;z-index:3;margin:0;font-family:InterTight;font-weight:900;letter-spacing:-.045em;line-height:.84;text-transform:uppercase}
.big span{display:block;white-space:nowrap;font-size:calc(var(--fs) * var(--k))}
.mark{position:relative;display:inline-block!important;z-index:0}
.mark svg{position:absolute;left:-.13em;top:.2em;width:calc(100% + .26em);height:.82em;z-index:-1}
.seal,.price{position:absolute;border-radius:50%;background:var(--neon);z-index:6;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(-12deg);box-shadow:0 14px 26px rgba(0,0,0,.18)}
.seal:before,.price:before{content:"";position:absolute;inset:calc(-9 * var(--u));border-radius:50%;border:1.6px dashed var(--ink)}
.kb,.kb2{background:url(/assets/img/laptop.jpg) 30% 40%/cover;filter:grayscale(1) contrast(1.1) brightness(1.05)}
.kb{position:absolute;left:calc(-40 * var(--u));right:calc(-40 * var(--u));bottom:calc(-30 * var(--u));height:calc(330 * var(--u));transform:rotate(-10deg);z-index:0;border-radius:30px}
.kb:after{content:"";position:absolute;inset:0;background:linear-gradient(var(--bg) 0%,rgba(239,238,234,.15) 40%);border-radius:30px}

/* main hero on a phone (Ksenia 01.11): a column as tall as the visible screen, the two buttons always on the first screen */
.hero:not(.gh) .hb{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero:not(.gh) .slab{left:calc(18 * var(--u) + 232 * var(--k));top:calc(46px + 20 * var(--k));width:calc(96 * var(--k));height:calc(470 * var(--k))}
.hero:not(.gh) .big{margin:calc(60px + 20 * var(--k)) 0 0 calc(18 * var(--u))}
.mid{position:relative;margin:calc(18 * var(--k)) 0 calc(10 * var(--k));min-height:calc(146 * var(--k))}
/* Ksenia 02.11: subtitle a bit bigger; width runs up to the seal so the bigger text takes no more lines */
.subk{position:relative;margin:0 0 0 calc(24 * var(--u));width:max(calc(236 * var(--k)), calc(350 * var(--u) - 116 * var(--k) - 26px));z-index:6;font:400 calc(17 * var(--k))/1.4 Manrope}
.seal{right:calc(16 * var(--u));top:calc(22 * var(--k));width:calc(116 * var(--k));height:calc(116 * var(--k));font:800 calc(11 * var(--k))/1.2 Unbounded}
/* Ksenia 02.11: full width, lower - the description line is gone, the thumb is no taller than the text */
.card2{position:relative;margin:auto calc(24 * var(--u)) 0;z-index:9;background:#fff;border-radius:22px;padding:calc(12 * var(--k)) calc(14 * var(--u));display:flex;gap:calc(14 * var(--u));align-items:center;box-shadow:0 16px 34px rgba(0,0,0,.12)}
.th{flex:none;width:calc(48 * var(--k));height:calc(48 * var(--k));border-radius:16px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.c2 small{display:block;font:700 calc(9 * var(--k)) Unbounded;letter-spacing:.04em;text-transform:uppercase;color:#6f6f68}
.c2 b{display:block;font:900 min(calc(19 * var(--k)), calc(16 * var(--u)))/1.05 InterTight;letter-spacing:-.02em;margin:4px 0}
.c2 p{margin:0;font:400 calc(12 * var(--k))/1.35 Manrope;color:#222}
.c2 span{display:inline-block;margin-top:5px;font:700 calc(11 * var(--k)) Unbounded;border-bottom:2px solid var(--neon)}
.hero:not(.gh) .kb{bottom:calc(-30 * var(--k));height:calc(330 * var(--k))}
.btns{position:relative;margin:calc(12 * var(--k)) calc(24 * var(--u)) calc(16 * var(--k));z-index:9;display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 20px;border-radius:30px;font:700 13px Unbounded;letter-spacing:-.01em;white-space:nowrap}
.btn.dark,.btn.go{background:var(--ink);color:var(--neon)}
.btn.line{background:#fff}   /* Ksenia 02.11: no outline, white fill only */

/* guide hero on a phone (Ksenia 01.11): a column as tall as the visible screen, «Купить» always on the first screen */
.gh .hb{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.gh .slab{left:calc(18 * var(--u) + 244 * var(--k));top:calc(46px + 14 * var(--k));width:calc(96 * var(--k));height:calc(270 * var(--k))}
.tag3{position:relative;margin:calc(66px + 10 * var(--k)) 0 0 calc(24 * var(--u));z-index:6;font:700 calc(10 * var(--k)) Unbounded;letter-spacing:.04em;text-transform:uppercase}
.gt{position:relative;margin:calc(10 * var(--k)) 0 0 calc(18 * var(--u));z-index:3;font-family:InterTight;font-weight:900;letter-spacing:-.045em;line-height:.86;text-transform:uppercase}
.gt span{display:block;white-space:nowrap;font-size:calc(var(--fs) * var(--k))}
.gmid{position:relative;margin:calc(22 * var(--k)) 0 calc(10 * var(--k));min-height:calc(150 * var(--k))}
.gsub{position:relative;margin:0 0 0 calc(24 * var(--u));width:calc(220 * var(--k));z-index:6;font:400 calc(17 * var(--k))/1.45 Manrope}
.price{right:calc(18 * var(--u));top:calc(18 * var(--k));width:calc(116 * var(--k));height:calc(116 * var(--k));font:800 calc(22 * var(--k)) Unbounded}
.gh .kb{bottom:calc(-30 * var(--k));height:calc(300 * var(--k))}
.buy{position:relative;margin:auto calc(24 * var(--u)) 0;height:60px;border-radius:40px;background:var(--ink);color:var(--neon);display:flex;align-items:center;justify-content:center;font:700 16px Unbounded;z-index:9}
.bnote{position:relative;margin:calc(10 * var(--k)) calc(24 * var(--u)) calc(16 * var(--k));text-align:center;font:500 13px Manrope;z-index:9}

/* ---------- sections */
main{display:block}
.sec{position:relative;padding:56px 24px 0;max-width:640px;margin:0 auto}
.T{font-family:InterTight;font-weight:900;letter-spacing:-.045em;line-height:.86;text-transform:uppercase;margin:0;position:relative;font-size:min(60px, 15.4vw)}
.t-guides{font-size:min(84px, 21.5vw)}
.hl{position:relative;display:inline-block;z-index:0}
.hl:after{content:"";position:absolute;left:-6px;right:-6px;top:.38em;height:.42em;background:var(--neon);transform:rotate(-4deg);z-index:-1}
.steps{margin-top:14px}
.step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1.5px dashed var(--ink)}
.step:last-child{border-bottom:none}
.num{flex:none;width:64px;font:900 46px/.9 InterTight;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.6px var(--ink)}
.step b{display:block;font:900 22px/1.05 InterTight;letter-spacing:-.02em;margin-bottom:6px}
.step p{margin:0;font:400 15px/1.45 Manrope}
.shelf{display:grid;gap:14px;margin-top:22px}
.g1{display:block;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.10)}
.cov{height:170px;background:var(--neon);position:relative;overflow:hidden}
.cov span{position:absolute;left:20px;bottom:14px;font:900 64px/.85 InterTight;letter-spacing:-.05em;text-transform:uppercase}
.rg{position:absolute;right:18px;top:16px;width:84px;height:84px;border-radius:50%;background:var(--ink);color:var(--neon);display:flex;align-items:center;justify-content:center;font:800 15px Unbounded;transform:rotate(-10deg)}
.rg:before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.6px dashed var(--ink)}
.gi{padding:18px 20px 20px}
.gi small{font:700 9px Unbounded;letter-spacing:.04em;text-transform:uppercase;color:#6f6f68}
.gi b,.g2 b{display:block;font:900 24px/1 InterTight;letter-spacing:-.02em;margin:6px 0}
.gi p,.g2 p{margin:0;font:400 15px/1.45 Manrope}
.lnk{display:inline-block;margin-top:12px;font:700 12px Unbounded;border-bottom:2px solid var(--neon)}
.g2{display:block;border:1.6px dashed var(--ink);border-radius:26px;padding:20px}
.g2 b{font-size:22px;margin-top:0}
.who{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.pc{background:#fff;border-radius:22px;overflow:hidden}
.ph2{height:170px;background:url(/assets/img/hands_keyboard.jpg) 50% 50%/cover;filter:grayscale(1) contrast(1.05) brightness(1.15);position:relative}
.ph2.p-ksu{background-image:url(/assets/img/macbook_leaf.jpg);background-position:50% 60%}
.ph2.p-igor,.ph2.p-ksu{filter:none;background-position:50% 22%}
.ph2.p-igor{background-image:url(/assets/img/igor_who.jpg)}
.ph2.p-ksu{background-image:url(/assets/img/ksenia_who.jpg)}
.ph2 i{position:absolute;left:10px;bottom:10px;font:700 9px Unbounded;background:#fff;padding:4px 7px;border-radius:8px;font-style:normal}
.pc .t{padding:12px 14px 16px}
.pc b{display:block;font:900 22px InterTight;letter-spacing:-.02em}
.pc p{margin:4px 0 0;font:400 13px/1.4 Manrope}
.faq .T{margin-bottom:20px}
.q{border-top:1.5px solid var(--ink);padding:16px 0}
.q:last-child{border-bottom:1.5px solid var(--ink)}
.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;font:800 17px/1.25 Manrope}
.q summary::-webkit-details-marker{display:none}
.q summary i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--neon);position:relative}
.q summary i:before,.q summary i:after{content:"";position:absolute;left:8px;right:8px;top:12px;height:2px;background:var(--ink)}
.q summary i:after{transform:rotate(90deg);transition:transform .2s}
.q[open] summary i:after{transform:rotate(0)}
.q p{margin:8px 36px 0 0;font:400 15px/1.45 Manrope}
.chks{margin-top:12px}
.chk{display:flex;gap:12px;align-items:flex-start;padding:12px 0;font:500 16px/1.45 Manrope}
.chk i{flex:none;margin-top:5px;width:12px;height:12px;background:var(--neon);outline:1.5px solid var(--ink)}
.fin{margin:56px 12px 0;background:var(--neon);border-radius:30px;padding:30px 20px 24px;position:relative;overflow:hidden}
.fin .kb2{position:absolute;right:-60px;bottom:-40px;width:260px;height:180px;transform:rotate(-12deg);border-radius:20px;opacity:.9}
.fin .T{font-size:min(44px, 11.3vw);position:relative;z-index:2}
.fin p{margin:14px 0 22px;font:500 16px/1.4 Manrope;max-width:200px;position:relative;z-index:2}
.btn.go{position:relative;z-index:2}
.foot{margin-top:44px;padding:26px 24px 30px;border-top:1.5px solid var(--ink)}
.foot img{height:24px;width:auto}
.foot .ln{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font:500 13px Manrope}
.foot .ln a{border-bottom:1px solid var(--ink)}
.foot .rq{margin-top:14px;font:400 12px/1.5 Manrope;color:#555}
a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- desktop: same pieces, wider stage */
@media (min-width:900px){
  :root{--u:1px;--k:1px}
  .top{height:72px;padding:0 max(40px, calc(50vw - 560px))}
  .ic,.ic svg{width:40px;height:40px}
  .hb,.hero:not(.gh) .hb{display:block;width:min(1200px, 100vw);height:820px;min-height:0}
  .hero:not(.gh) .big,.subk,.seal,.card2,.btns{position:absolute;margin:0}
  .mid{position:static;margin:0;min-height:0}
  .slab,.hero:not(.gh) .slab{left:470px;top:70px;width:150px;height:620px}
  .big{left:40px;top:120px}
  .big span{font-size:calc(var(--fs) * 1.786px)}
  .subk{left:700px;top:150px;width:420px;font-size:21px}
  .seal{right:auto;left:990px;top:612px;width:150px;height:150px;font-size:14px}
  .seal:before,.price:before{inset:-12px}
  .card2{left:700px;right:auto;width:420px;top:444px;padding:16px 18px}
  .th{width:72px;height:72px}
  .c2 small{font-size:10px} .c2 b{font-size:22px} .c2 p{font-size:14px} .c2 span{font-size:12px}
  .kb,.hero:not(.gh) .kb{left:auto;right:-60px;bottom:-150px;width:720px;height:380px}
  .btns{left:700px;bottom:auto;top:358px}
  .gh .hb{display:block;height:760px;min-height:0}
  .tag3,.gt,.gsub,.buy,.bnote{position:absolute;margin:0}
  .gmid{position:static;margin:0;min-height:0}
  .gh .slab{left:590px;top:60px;width:150px;height:520px}
  .tag3{left:44px;top:110px;font-size:12px}
  .gt{left:40px;top:140px}
  .gt span{font-size:calc(var(--fs) * 1.6px)}
  .gsub{left:730px;top:150px;width:400px;font-size:22px}
  .price{right:auto;left:990px;top:470px;width:150px;height:150px;font-size:28px}
  .gh .kb{height:380px;bottom:-230px}
  .buy{left:730px;right:auto;width:400px;bottom:auto;top:330px}
  .bnote{left:730px;right:auto;width:400px;bottom:auto;top:402px;text-align:left}
  .sec{max-width:1200px;padding:110px 40px 0}
  .T{font-size:96px}
  .t-guides{font-size:140px}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:36px}
  .step{flex-direction:column;border-bottom:none;border-top:1.5px dashed var(--ink);padding-top:24px}
  .step:last-child{border-bottom:none}
  .num{font-size:72px;width:auto}
  .step b{font-size:28px} .step p{font-size:17px}
  .shelf{grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;align-items:start}
  .cov{height:240px} .cov span{font-size:96px}
  .rg{width:110px;height:110px;font-size:18px}
  .who{gap:24px;margin-top:40px}
  .ph2{height:340px}
  .ph2.p-igor{background-position:50% 8%} .ph2.p-ksu{background-position:50% 14%}
  .pc .t{padding:20px 24px 26px} .pc b{font-size:30px} .pc p{font-size:16px}
  .faq{display:grid;grid-template-columns:440px 1fr;gap:60px;align-items:start}
  .faq .T{font-size:84px}
  .q summary{font-size:20px} .q p{font-size:17px}
  .chks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
  .chk{font-size:18px}
  .fin{max-width:1120px;margin:110px auto 0;padding:56px 56px 52px;border-radius:40px}
  .fin .kb2{width:520px;height:320px;right:-80px;bottom:-80px}
  .fin .T{font-size:84px}
  .fin p{font-size:20px;max-width:360px}
  .foot{max-width:1120px;margin:80px auto 0;padding:32px 0 40px}
}