/* Часослов — каркас: шапка, навигация, нижняя панель на мобильном, лендинг. */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:clamp(10px,2vw,28px);padding:8px clamp(12px,3vw,32px);
  background:linear-gradient(rgba(22,12,7,.92),rgba(22,12,7,.72));backdrop-filter:blur(8px);border-bottom:1px solid rgba(243,214,150,.16);box-shadow:0 10px 24px -14px #000b}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brass-1);margin-right:auto;min-height:44px}
.brand-mark{width:30px;height:30px;fill:none;stroke:var(--brass-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(224,162,59,.35))}
.brand-name{font:700 1.5rem/1 var(--font-display);letter-spacing:.01em;background:linear-gradient(180deg,#f7e8b8,#d2aa5c 60%,#a47c36);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:4px}
.nav a{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:10px;color:var(--on-desk-soft);text-decoration:none;font-weight:700;transition:color .2s,background-color .2s}
.nav a:hover{color:var(--on-desk);background:rgba(255,235,190,.08)}
.nav a[aria-current='page']{color:var(--brass-1)}
.nav a[aria-current='page']::after{content:'';position:absolute;left:14px;right:14px;bottom:3px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brass-3),var(--brass-1),var(--brass-3));box-shadow:0 0 10px rgba(224,162,59,.6)}
.top-tools{display:flex;align-items:center;gap:8px}
#btn-sound .i,#btn-theme .i{width:22px;height:22px}
:root[data-theme='night'] #btn-theme .i{color:#ffcf7a;filter:drop-shadow(0 0 5px rgba(255,170,60,.7))}
#main{outline:none;position:relative}
.view{max-width:1320px;margin:0 auto;padding:18px clamp(12px,3vw,32px) 90px}

@media (max-width:900px){
  .topbar{padding:6px 12px}
  .brand-name{font-size:1.3rem}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:space-around;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:linear-gradient(rgba(26,15,9,.94),rgba(18,10,6,.98));border-top:1px solid rgba(243,214,150,.22);box-shadow:0 -10px 24px -12px #000c}
  .nav a{flex-direction:column;gap:2px;min-width:56px;min-height:52px;padding:4px 6px;font-size:.72rem;border-radius:8px}
  .nav a[aria-current='page']::after{left:25%;right:25%;bottom:1px;height:3px}
  .view{padding-bottom:110px}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  #btn-account{padding:.3em .8em;font-size:.88rem}
  .top-tools{gap:5px}
  .tool{width:44px}
}

/* ---------- лендинг ---------- */
.landing{overflow:clip}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(12px,4vw,64px);min-height:min(820px,calc(100dvh - 60px));max-width:1320px;margin:0 auto;padding:clamp(20px,4vw,56px) clamp(16px,4vw,56px) 40px}
.hero-copy{position:relative;z-index:2;max-width:560px}
.hero::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:linear-gradient(90deg,rgba(14,7,3,.66),rgba(14,7,3,.28) 40%,transparent 64%);pointer-events:none}
.hero-kicker{font:400 clamp(1.6rem,2.6vw,2.2rem)/1 var(--font-script);color:var(--brass-1);margin-bottom:.35rem;text-shadow:0 2px 6px #000b}
.hero h1{font:900 clamp(3.1rem,9vw,6.6rem)/.95 var(--font-display);letter-spacing:-.01em;margin-bottom:1.1rem;
  background:linear-gradient(180deg,#fbeec0 0%,#e1bb68 38%,#a67c33 62%,#e8c97d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(30,14,4,.55)) drop-shadow(0 12px 26px rgba(0,0,0,.45))}
.hero-lead{font:500 clamp(1.05rem,1.5vw,1.25rem)/1.55 var(--font-ui);color:var(--on-desk);max-width:34ch;margin-bottom:1.6rem}
.hero-lead em{font-style:normal;color:var(--brass-1);font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{margin-top:1.1rem;font:400 .95rem/1.4 var(--font-ui);color:var(--on-desk);opacity:.85;max-width:40ch;text-shadow:0 1px 4px #000a}

.hero-stage{position:relative;height:clamp(380px,56vw,640px);perspective:1800px;display:grid;place-items:center}
.cb{position:relative;width:clamp(240px,30vw,400px);aspect-ratio:1145/1374;container-type:inline-size;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-16deg) rotateZ(-2deg);transition:transform 1.1s var(--ease-io);cursor:pointer;
  filter:drop-shadow(0 40px 36px rgba(0,0,0,.65));-webkit-tap-highlight-color:transparent;border:0;padding:0;background:none;display:block}
.cb:hover:not(.open){transform:rotateX(6deg) rotateY(-10deg) rotateZ(-1deg) translateY(-6px)}
.cb-back,.cb-pages,.cb-front,.cb-inside{position:absolute;inset:0;border-radius:3px 8px 8px 3px}
.cb-back{background:url(/img/cover.webp) center/cover;transform:translateZ(-22px);filter:brightness(.55)}
.cb-pages{inset:2.5% 1.2% 2.5% 0;background:linear-gradient(90deg,#8d7a52,#e9dcb9 6%,#f0e5c7 94%,#a99668),var(--paper);transform:translateZ(-10px);border-radius:2px 5px 5px 2px;box-shadow:0 0 0 1px #0004}
.cb-inside{inset:1.5% 1% 1.5% 0;background:var(--paper-grain),var(--paper);transform:translateZ(-4px);padding:9% 9% 8% 12%;display:grid;align-content:start;gap:3.5cqw;color:var(--ink);border-radius:2px 5px 5px 2px;overflow:hidden}
.cb-inside::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,22,6,.45),transparent 22%);pointer-events:none}
.cb-inside .l1{font:400 6.4cqw/1 var(--font-script);color:var(--ink-blue)}
.cb-inside .l2{font:500 5.6cqw/1.15 var(--font-hand);color:var(--ink)}
.cb-inside .l2 s{text-decoration:none;background:linear-gradient(transparent 52%,var(--ink-soft) 52%,var(--ink-soft) 58%,transparent 58%);color:var(--ink-soft)}
.cb-inside .l3{font:500 5.6cqw/1.15 var(--font-hand);color:var(--ink-red)}
.cb-front{background:url(/img/cover.webp) center/cover;transform-origin:left center;transform:translateZ(0);backface-visibility:hidden;transition:transform 1.25s var(--ease-io);box-shadow:inset 0 0 0 1px #0006}
.cb-front::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,rgba(255,235,190,.16),transparent 34%,rgba(0,0,0,.28));pointer-events:none}
.cb-cover-back{position:absolute;inset:0;border-radius:8px 3px 3px 8px;background:url(/img/cover.webp) center/cover;filter:brightness(.62) saturate(.8);transform:rotateY(180deg) translateZ(0);backface-visibility:hidden}
.cb-hinge{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;transition:transform 1.25s var(--ease-io)}
.cb-hinge .cb-front{transition:none}
.cb.open{transform:rotateX(2deg) rotateY(0) rotateZ(0) translateX(46%)}
.cb.open .cb-hinge{transform:rotateY(-172deg)}
.cb-title{position:absolute;left:50%;top:44.8%;width:44%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;transform-style:flat}
.cb-title svg{width:15cqw;height:15cqw;margin:0 auto 1.6cqw;fill:none;stroke:#e6c377;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #0009) drop-shadow(0 0 4px rgba(240,200,120,.4))}
.cb-title b{display:block;font:900 6.1cqw/1 var(--font-display);letter-spacing:.06em;color:transparent;background:linear-gradient(180deg,#f7e4a8,#cfa24f 55%,#8d6a2b);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 #000a) drop-shadow(0 -1px 0 #fff3)}
.cb-title i{display:block;margin-top:2cqw;font:400 5cqw/1 var(--font-script);font-style:normal;color:#d9b66f;filter:drop-shadow(0 1px 0 #000a)}
.hero-hourglass{position:absolute;left:-2%;bottom:3%;width:clamp(86px,12vw,170px);z-index:3;filter:drop-shadow(0 26px 18px rgba(0,0,0,.65));pointer-events:none}
.hero-candle{position:absolute;right:-1%;bottom:2%;width:clamp(84px,11vw,150px);z-index:3;pointer-events:none}
.hero-candle img{filter:drop-shadow(0 24px 16px rgba(0,0,0,.65))}
.candle-glow{position:absolute;left:50%;top:-30%;width:360%;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,176,70,.38),rgba(255,140,40,.1) 38%,transparent 66%);mix-blend-mode:screen;animation:glow 3.2s ease-in-out infinite alternate;pointer-events:none}
@keyframes glow{0%{opacity:.7}35%{opacity:1}60%{opacity:.82}100%{opacity:.95}}
.hero-flame{position:absolute;left:50.2%;top:5.4%;width:30%;transform:translate(-50%,-92%);transform-origin:50% 100%;animation:flicker 2.4s ease-in-out infinite}
.hero-flame svg{width:100%;height:auto;overflow:visible}
@keyframes flicker{0%,100%{transform:translate(-50%,-92%) scale(1,1) rotate(-1deg)}22%{transform:translate(-50%,-92%) scale(.94,1.06) rotate(1.4deg)}48%{transform:translate(-50%,-92%) scale(1.04,.96) rotate(-.6deg)}73%{transform:translate(-50%,-92%) scale(.97,1.04) rotate(.8deg)}}

.land-sec{max-width:1240px;margin:0 auto;padding:clamp(36px,6vw,84px) clamp(16px,4vw,56px)}
.land-sec h2{font:700 clamp(1.9rem,4vw,3rem)/1.08 var(--font-display);color:var(--brass-1);margin-bottom:.7rem;max-width:20ch}
.land-sec>p.lead{max-width:56ch;font-size:1.1rem;color:var(--on-desk);margin-bottom:2rem}
.themes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));gap:16px}
.theme-card{position:relative;display:grid;gap:10px;padding:14px 14px 16px;border-radius:14px;text-align:left;background:linear-gradient(160deg,rgba(60,36,22,.9),rgba(26,14,8,.92));border:1px solid rgba(243,214,150,.22);box-shadow:inset 0 1px 0 #fff1,0 20px 30px -18px #000;color:var(--on-desk);
  transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s}
.theme-card:hover{transform:translateY(-4px);border-color:rgba(243,214,150,.6)}
.theme-card .demo{height:200px;display:grid;place-items:center;border-radius:10px;background:radial-gradient(circle at 50% 40%,rgba(255,200,120,.1),rgba(0,0,0,.35) 75%),#150b06;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(243,214,150,.12),inset 0 8px 20px #0008}
.theme-card h3{font:700 1.2rem/1.1 var(--font-display);color:var(--brass-1)}
.theme-card p{font-size:.95rem;color:var(--on-desk-soft);line-height:1.4}
.theme-card .pick{margin-top:2px;font:700 .95rem var(--font-ui);color:var(--brass-1);display:inline-flex;align-items:center;gap:6px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-top:8px}
.feat{display:grid;gap:8px;align-content:start;padding:22px 22px 24px;border-radius:6px;background:var(--paper-grain),var(--paper);color:var(--ink);box-shadow:0 24px 40px -22px #000,0 0 0 1px #0005;transform:rotate(var(--tilt,0deg))}
.feat:nth-child(1){--tilt:-.8deg}.feat:nth-child(2){--tilt:.6deg}.feat:nth-child(3){--tilt:-.4deg}
.feat h3{font:700 1.35rem/1.15 var(--font-display)}
.feat p{font:500 1.35rem/1.2 var(--font-hand);color:var(--ink)}
.feat .i{width:34px;height:34px;color:var(--ink-red);stroke-width:1.4}
.cta-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(20px,5vw,64px);align-items:center}
.cta-form{padding:26px 24px 22px}
.cta-form h3{font:700 1.5rem/1.1 var(--font-display);margin-bottom:.9rem}
.land-foot{max-width:1240px;margin:0 auto;padding:10px clamp(16px,4vw,56px) 110px;color:var(--on-desk-soft);font-size:.92rem}
.land-foot a{color:var(--brass-2)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;text-align:left;min-height:0;padding-top:12px}
  .hero-stage{height:clamp(340px,92vw,500px);order:-1}
  .cb.open{transform:rotateX(2deg) translateX(30%)}
  .cta-sec{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.cb,.cb-hinge{transition-duration:.01ms!important}}