@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
@font-face{font-family:Inter;src:url(../assets/fonts/Inter-Variable.ttf) format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fredoka One';src:url(../assets/fonts/FredokaOne-Regular.ttf) format('truetype');font-display:swap}
:root{--red:#E8380F;--red2:#C8250A;--bg:#FAF6F3;--ink:#111;--yellow:#F4C542;--blue:#1E88E5}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
h1,h2,h3,.fr{font-family:Fredoka,'Fredoka One',Poppins,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:0}
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 8vw;background:linear-gradient(#FAF6F3ee,#FAF6F300)}
header img{height:52px}nav{display:flex;gap:56px;font-size:15px}nav a:hover{color:var(--red)}
.btn{background:var(--red);color:#fff;border-radius:10px;padding:10px 16px;font-weight:600;font-size:14px;transition:.25s}.btn:hover{background:var(--red2);transform:translateY(-2px)}
.hero{min-height:100vh;padding:130px 8vw 60px;background:url(../assets/hero.jpg) center/cover;display:flex;align-items:center;gap:4vw;position:relative}
.hero .box{flex:0 0 36%;background:#ffffffb0;backdrop-filter:blur(8px);border-radius:28px;padding:34px;box-shadow:0 10px 40px #0001}
.pill{display:inline-block;background:#A5E08A;border-radius:20px;padding:4px 12px;font-size:12px}
.hero h1{font-size:clamp(38px,4.2vw,64px);margin:14px 0 4px}.hero h1 em{display:block;color:var(--red);font-size:.6em}
.search{position:relative;margin-top:22px;background:#fff;border-radius:12px;display:flex;padding:6px;box-shadow:0 4px 16px #0002}
.search input{flex:1;border:0;outline:0;padding:8px 10px;font:inherit;font-size:13px;min-width:0}
.sug{position:absolute;top:110%;left:0;right:0;background:#fff;border-radius:10px;box-shadow:0 8px 24px #0003;overflow:hidden;z-index:5}
.sug a{display:flex;gap:10px;align-items:center;padding:8px 12px;font-size:13px}.sug a:hover{background:#fdeae5}.sug img{width:26px;height:36px;object-fit:cover;border-radius:4px}
.hrow{display:flex;gap:26px;align-items:center;flex:1;overflow:hidden}.arr{background:none;font-size:34px;padding:6px 10px}
.row{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 20px 50px;scrollbar-width:none;scroll-behavior:smooth}.row::-webkit-scrollbar{display:none}
.card{position:relative;display:flex;flex-direction:column;flex:0 0 220px;scroll-snap-align:start;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:center bottom}
.card:hover{transform:scale(1.07);z-index:4}
.card .cv{position:relative;display:block;border-radius:16px;overflow:hidden;box-shadow:0 10px 22px #0004;aspect-ratio:2/3}.cv img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:2;background:var(--red2);color:#fff;font:600 12px Fredoka,'Fredoka One',Poppins,sans-serif;letter-spacing:.12em;padding:6px 14px;border-radius:8px;box-shadow:0 3px 8px #0003}.tag.y{background:var(--yellow);color:#6b4e00}
.info{position:absolute;top:-6px;right:-4px;z-index:3;background:#111;color:#fff;width:22px;height:22px;border-radius:5px;font-size:12px;transition:.2s}.info:hover{background:var(--red);transform:scale(1.2)}
.card h3{font-size:17px;line-height:1.2;margin-top:14px;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card p{font-size:12px;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta{display:flex;justify-content:space-between;font-size:11px;color:#888;margin:6px 0 10px}.meta b{color:var(--ink)}
.card .btn{width:100%;text-align:center;display:block;margin-top:auto}.row{align-items:stretch}.hero .card{flex:0 0 190px}
.doors{height:280vh;position:relative}.stick{--W:max(100vw,1100px);--H:calc(var(--W)/2.2667);position:sticky;top:0;height:100vh;overflow:hidden;perspective:1800px;background:linear-gradient(#fff,var(--bg))}
.behind{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 6vw}.behind .row{padding:26px 20px 18px}
.door{position:absolute;top:50%;width:50%;height:var(--H);background:url(../assets/wall.jpg) no-repeat;background-size:var(--W) var(--H);filter:grayscale(1) contrast(1.1);z-index:10;will-change:transform;transform:translateY(-50%)}
.door.l{left:0;transform-origin:0 50%;background-position:calc((100vw - var(--W))/2) 0}.door.r{right:0;transform-origin:100% 50%;background-position:calc((100vw - var(--W))/2 - 50vw) 0}
.banner{margin:0 8vw;background:linear-gradient(90deg,var(--red),#c01d05);color:#fff;border-radius:16px;padding:20px 30px;display:flex;justify-content:space-between;align-items:center}
.banner b{font:600 22px Fredoka}.banner a{background:#fff;color:#000;padding:8px 16px;border-radius:8px;font-size:13px}
.shelf{position:relative;display:flex;align-items:flex-end;gap:3px;height:150px;padding:0 20px;border-bottom:10px solid #ececec;max-width:620px;margin:0 8vw 0 auto}
.spine{height:calc(100px + var(--h)*1px);width:calc(18px + var(--w)*1px);background:var(--c);border-radius:2px;color:#fff;font:600 9px Inter;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:.3s;transform-origin:bottom;box-shadow:inset -2px 0 #0003}
.spine:hover{transform:scale(1.18) translateY(-6px);z-index:3}
.page{padding:130px 8vw 60px;min-height:80vh}.pt{font:700 clamp(40px,6vw,86px) Fredoka,'Fredoka One',Poppins,sans-serif;color:var(--red);letter-spacing:.14em;margin:10px 0 40px}
.grp h2{font:700 20px Inter;letter-spacing:.08em;text-transform:uppercase;padding-bottom:12px;border-bottom:2px solid var(--red)}
.bk{display:grid;grid-template-columns:300px 1fr;gap:50px;max-width:1000px}.bk img{width:100%;border-radius:18px;box-shadow:0 14px 30px #0004}.bk h1{font-size:44px}
.mod{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:100;animation:f .25s}.mod>div{background:#fff;border-radius:22px;max-width:520px;padding:30px;position:relative;animation:u .35s}
.mod.red>div{background:var(--red);color:#fff;text-align:center;padding:50px}@keyframes f{from{opacity:0}}@keyframes u{from{transform:translateY(30px);opacity:0}}
.cf{position:fixed;top:-20px;width:10px;height:14px;z-index:101;animation:fall 2.4s linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
footer{background:var(--red);color:#fff;padding:60px 8vw 30px;display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:40px;font-size:13px;line-height:1.7}
footer h4{font:600 22px Fredoka,'Fredoka One',Poppins,sans-serif;margin-bottom:10px}footer form{background:#fff;border-radius:12px;display:flex;padding:6px}footer input{flex:1;border:0;outline:0;padding:8px;font:inherit;min-width:0}
footer small{grid-column:1/-1;text-align:center}.msg{margin-top:8px;font-size:12px}
@media(max-width:900px){nav{display:none}.hero{flex-direction:column}.hero .box{flex:none;width:100%}.bk{grid-template-columns:1fr}footer{grid-template-columns:1fr}.card{flex-basis:170px}}
