/* Onceborn — onceborn.app. Токены — L49/spec-web.md (дизайнер, 05.11). Тема одна — тёмная. */
@font-face{font-family:"Cormorant Garamond";src:url(/assets/cormorant-600.woff) format("woff");font-weight:600;font-display:swap}
:root{
  --bg:#17171F;--bg2:#1D1C26;--card:#24242E;--stroke:rgba(255,255,255,.08);--text:#F2F2F5;--sec:#A9A7B6;
  --cream:#F4EAD8;--gold:#FFC24A;--btn2:rgba(255,255,255,.10);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --pad:20px;color-scheme:dark;
}
@media (min-width:1024px){:root{--pad:40px}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%;height:auto}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.disp{font-family:var(--serif);font-weight:600;letter-spacing:.005em;color:var(--cream);line-height:1.1}
.cap{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sec{color:var(--sec)}
.wrap{width:100%;max-width:calc(1120px + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--card);padding:10px 14px;border-radius:12px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* кнопки (§3) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:99px;font-weight:600;font-size:17px;white-space:nowrap;transition:transform .1s,background .15s,filter .15s}
.btn:active{transform:scale(.98)}
.pri{background:var(--cream);color:#17171F}
.ghost{background:var(--btn2);color:var(--text);border:1px solid var(--stroke)}
@media (hover:hover){.pri:hover{filter:brightness(1.06)}.ghost:hover{background:rgba(255,255,255,.14)}}
.soon{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:99px;background:rgba(255,255,255,.05);color:var(--sec);font-size:15px;font-weight:600;cursor:default;white-space:nowrap}
.soon svg{width:16px;height:20px}
.appstore{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:12px;background:#000;color:#fff;border:1px solid #A6A6A6}
.appstore svg{width:18px;height:22px}
.appstore span{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.appstore small{font-size:11px}.appstore b{font-size:19px;font-weight:600}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* шапка */
.top{height:60px;border-bottom:1px solid var(--stroke)}
.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.top .wm{width:130px;height:auto}
.nav{display:flex;align-items:center;gap:20px;font-size:15px}
.nav .lnk{display:none;min-height:44px;align-items:center}
.lang{display:inline-flex;gap:2px;font-size:15px}
.lang a,.lang span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--sec)}
.lang span{color:var(--cream);font-weight:700}
@media (hover:hover){.lang a:hover,.nav .lnk:hover{color:var(--text)}}
@media (min-width:768px){.nav .lnk{display:inline-flex}.nav{gap:28px}}
@media (min-width:1024px){.top{height:72px}.top .wm{width:160px}}

/* первый экран */
.hero{padding:36px 0 28px}
.hero .wrap{display:flex;flex-direction:column;gap:32px}
.hero-text{display:flex;flex-direction:column;gap:18px}
.hero h1{font-size:44px;line-height:1.02}
.hero .lead{font-size:17px}
.hero .lead i{font-family:Georgia,"Times New Roman",serif}
.hero .btns{margin-top:6px}
.shot{position:relative;align-self:center;width:100%;max-width:560px}
.ipad{padding:12px;border-radius:4.5%/6.4%;background:#0C0C10;border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.ipad img{width:100%;height:auto;aspect-ratio:2388/1668;border-radius:2.5%/3.6%}
.shot .icon{position:absolute;right:-6px;bottom:-22px;width:84px;height:84px;border-radius:19px;box-shadow:0 12px 30px rgba(0,0,0,.6)}
@media (min-width:768px){.hero h1{font-size:56px}}
@media (min-width:1024px){
  .hero{padding:88px 0 96px}
  .hero .wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:48px}
  .hero-text{max-width:520px;gap:22px}
  .hero h1{font-size:72px}
  .hero .lead{font-size:19px}
  .shot{width:544px;flex:none}
  .shot .icon{right:-28px;bottom:-40px;width:120px;height:120px;border-radius:27px}
}

/* секции */
.sec-pad{padding-top:56px}
@media (min-width:1024px){.sec-pad{padding-top:104px}}
.h2{font-size:32px;margin:12px 0 28px}
@media (min-width:1024px){.h2{font-size:48px;margin-bottom:40px}}
.what{background:var(--bg2);padding:56px 0;text-align:center}
.what .inner{max-width:720px;margin:0 auto}
.what .h2{margin-bottom:0;margin-top:14px}
.what p{font-size:17px;margin-top:18px}
@media (min-width:1024px){.what{padding:96px 0}.what p{font-size:19px}}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:20px}
.feats{display:grid;grid-template-columns:1fr;gap:20px}
.feat{overflow:hidden}
.feat img{width:100%;height:auto;aspect-ratio:1/.62;object-fit:cover}
.feat .txt{padding:20px 22px 24px}
.feat h3,.worlds h3{font-size:28px}
.feat p{margin-top:8px}
@media (max-width:767px){.feat.f-consequences img{object-position:center 80%!important}}
@media (min-width:768px){.feats{grid-template-columns:repeat(3,1fr)}.feat img{aspect-ratio:1/.9}}
@media (min-width:1024px){.feats{gap:28px}}
.worlds{margin-top:20px;padding:22px;scroll-margin-top:16px}
.worlds>p{margin:6px 0 20px}
.wtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wtile img{width:100%;height:auto;aspect-ratio:1/.62;border-radius:14px}
.wtile b{display:block;margin-top:10px;font-weight:600}
.wtile small{display:block;margin-top:4px;font-size:14px;line-height:1.4}
.badge{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--btn2);color:var(--sec)}
.badge.free{color:var(--gold)}
@media (min-width:768px){.wtiles{grid-template-columns:repeat(4,1fr);gap:20px}}
@media (min-width:1024px){.worlds{margin-top:28px;padding:32px}}

/* кадры «Книги» */
.shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 48px;margin:0 calc(-1 * var(--pad));scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots li{flex:0 0 78%;max-width:340px;scroll-snap-align:start}
.shots button{display:block;width:100%;text-align:left;border-radius:20px}
.shots .cap2{font-size:14px;margin-top:12px}
@media (min-width:1024px){
  .shots{overflow:visible;justify-content:space-between;padding:0 0 48px;margin:0}
  .shots li{flex:0 0 340px}
  .shots .cap2{text-align:center;font-size:15px;margin-top:14px}
}
.lb{position:fixed;inset:0;z-index:30;background:rgba(8,8,12,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.lb[hidden]{display:none}
.lb img{max-width:min(1600px,100%);max-height:100%;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .x{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:22px;background:var(--btn2);font-size:22px}

/* призыв к демо */
.cta{padding:32px;text-align:center;background:radial-gradient(120% 140% at 50% 0%,#2C2536,var(--card))}
.cta .h2{margin:0}
.cta p{margin:10px auto 24px;max-width:520px}
.cta .btns{justify-content:center}
.cta-sec{padding:56px 0}
@media (min-width:1024px){.cta{padding:56px}.cta-sec{padding:104px 0}}

/* подвал */
.foot{border-top:1px solid var(--stroke);padding:32px 0}
.foot .wrap{display:flex;flex-direction:column;gap:18px}
.foot .wm{width:120px}
.foot nav{display:flex;flex-direction:column;font-size:15px}
.foot nav a{min-height:44px;display:flex;align-items:center;white-space:nowrap}
@media (hover:hover){.foot nav a:hover{text-decoration:underline}}
.foot .copy{font-size:14px;white-space:nowrap}
.foot .lang{margin-left:-12px}
@media (min-width:1024px){
  .foot{padding:40px 0}
  .foot .wrap{flex-direction:row;justify-content:space-between;align-items:center}
  .foot nav{flex-direction:row;gap:28px}
  .foot .end{display:flex;align-items:center;gap:8px}
  .foot .lang{margin-left:0}
}

/* юридические и 404 */
.doc{max-width:calc(720px + 2 * var(--pad));margin:0 auto;padding:40px var(--pad) 24px}
.doc h1{font-size:40px;line-height:1.1;margin-bottom:6px}
.doc .upd{font-size:14px;margin-bottom:28px}
.doc p{margin:0 0 16px}
.doc strong{color:var(--cream)}
.doc a{color:var(--gold)}
.nf{text-align:center;padding:96px var(--pad)}
.nf h1{font-size:44px;margin-bottom:16px}
.nf .btns{justify-content:center;margin-top:24px}

/* ── демо (§5) ── */
.dtop{height:60px;border-bottom:1px solid var(--stroke)}
.dtop .wrap{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.dtop .back{justify-self:start;min-width:44px;min-height:44px;display:inline-flex;align-items:center;gap:6px;font-size:15px}
.dtop .back .t{display:none}
.dtop .wm{width:110px}
@media (min-width:768px){.dtop .back .t{display:inline}}
@media (min-width:1024px){.dtop{height:72px}.dtop .wm{width:140px}}
.demo{max-width:calc(600px + 2 * var(--pad));margin:0 auto;padding:16px var(--pad) 48px}
.prog{display:flex;align-items:center;gap:12px;margin-bottom:18px;outline:none}
.prog .dots{display:flex;gap:6px}
.prog i{width:10px;height:10px;border-radius:5px;background:rgba(255,255,255,.18)}
.prog i.on{background:var(--cream)}
.prog i.cur{width:28px;background:var(--cream)}
.prog span{font-size:14px;font-weight:600;color:var(--sec)}
.who{display:flex;align-items:center;gap:12px}
.who .av{width:44px;height:44px;flex:none}
.who b{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.who b svg{width:18px;height:12px;border-radius:2px}
.who small{display:block;font-size:14px;color:var(--sec)}
.pic{position:relative;margin:12px 0 14px}
@media (max-width:767px){.demo-step.s2 .pic,.demo-step.s3 .pic{display:none}.demo-step.s2 .l,.demo-step.s3 .l{margin-bottom:14px}.demo{padding-top:12px}.demo .prog{margin-bottom:12px}.pic{margin:10px 0 12px}}
.pic img{width:100%;height:auto;aspect-ratio:1/.18;object-fit:cover;border-radius:18px;background:var(--card)}
.age{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.45);color:#fff;font:700 12px ui-monospace,Menlo,monospace;letter-spacing:.08em;padding:5px 9px;border-radius:99px;text-transform:uppercase}
.setup{font-size:17px;line-height:1.5}
.setup.dim{color:var(--sec);font-size:16px}
.choices{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.choice{width:100%;min-height:52px;display:flex;align-items:center;padding:12px 18px;border-radius:16px;background:var(--card);border:1px solid var(--stroke);font-weight:600;font-size:17px;line-height:1.3;text-align:left;transition:background .15s,opacity .15s}
@media (hover:hover){.choice:hover{background:rgba(255,255,255,.14)}}
.choice:active{transform:scale(.98)}
.choices.picking .choice:not(.sel){opacity:0}
.picked{margin-top:14px;color:var(--gold);font-weight:700;outline:none}
.out p{font-size:17px;line-height:1.5;margin-top:8px}
.trait{margin-top:12px;font-size:14px;color:var(--gold)}
.next{width:100%;margin-top:18px}
.fin{text-align:center;max-width:640px;margin:48px auto 40px;padding:0 var(--pad)}
.fin .prog{justify-content:center}
.fin .ficon{width:112px;height:112px;border-radius:25px;margin:0 auto;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.fin .cap{margin-top:28px}
.fin h1{font-size:34px;line-height:1.08;margin-top:12px;outline:none}
.fin .line{font-size:17px;margin-top:16px}
.fin .btns{flex-direction:column;margin-top:28px}
.fin .home{min-height:44px;display:inline-flex;align-items:center;font-size:15px}
.derr{text-align:center;padding:32px}
.derr .btns{justify-content:center;margin-top:20px}
@media (min-width:1024px){
  .demo{max-width:1000px;padding:28px 0 48px}
  .dgrid{display:flex;gap:40px;align-items:flex-start}
  .dgrid .l{width:400px;flex:none}
  .dgrid .r{width:560px}
  .pic{margin:16px 0 0}
  .pic img{aspect-ratio:4/3}
  .setup{font-size:20px}.setup.dim{font-size:17px}
  .out p{font-size:20px}
  .fin{margin-top:96px}.fin h1{font-size:52px}.fin .line{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}