/* Страницы-кейсы дизайна: минимум текста, максимум картинок. 25.09.2026 */
:root{
  --ink:#08080B; --ink-2:#0E0E13; --ink-3:#16161D;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --text:#E8E6E1; --muted:#8A8A93;
  --accent:#FFD60A; --accent-ink:#1A1600;
  --f-display:'Unbounded',system-ui,sans-serif;
  --f-text:'Manrope',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(20px,4vw,64px);
  --maxw:1560px;
  --gap:clamp(14px,1.8vw,28px);
  --ease:cubic-bezier(.22,1,.36,1);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink); color:var(--text); font-family:var(--f-text); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; padding-inline:var(--pad)}
.wrap{max-width:var(--maxw); margin:0 auto}
a{color:inherit}
img,video{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
[data-full]{cursor:zoom-in}
.mono{font-family:var(--f-text); font-size:13px; color:var(--muted)}

.topbar{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-block:22px 0}
.topbar a{text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px}
.topbar a:hover{color:var(--accent); border-color:var(--accent)}

.hero{padding-block:clamp(34px,5vw,64px) clamp(24px,3vw,40px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 40px; align-items:end}
.hero .kick{font-family:var(--f-text); font-size:13px; color:var(--accent); margin-bottom:14px}
.hero h1{font-family:var(--f-display); font-weight:800; font-size:clamp(32px,5.6vw,88px); line-height:1; letter-spacing:-.035em; margin:0; text-wrap:balance}
.hero .lede{color:var(--muted); font-size:clamp(15.5px,1.2vw,18px); margin:16px 0 0; max-width:56ch}
.tags{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:44ch}
.tags span{font-family:var(--f-text); font-size:13px; border:1px solid var(--line-2); padding:5px 9px}

.blk{margin-top:clamp(40px,5vw,76px)}
.blk > .mono{display:block; margin-bottom:14px}
.blk:first-of-type{margin-top:0}

/* сцена под мокапы */
.stage{position:relative; overflow:hidden; border:1px solid var(--line); padding:clamp(18px,3.4vw,60px);
  background:var(--noise), radial-gradient(120% 90% at 20% 0%, #1f1f27 0%, #101015 55%, #0a0a0d 100%)}
.stage.warm{background:var(--noise), radial-gradient(120% 90% at 20% 0%, #2a2118 0%, #15110d 55%, #0c0a08 100%)}
.stage.cold{background:var(--noise), radial-gradient(120% 90% at 80% 0%, #10252a 0%, #0d1416 55%, #090c0d 100%)}
.stage.red{background:var(--noise), radial-gradient(120% 90% at 50% 0%, #3a1512 0%, #1a0c0a 55%, #0d0706 100%)}
.stage.navy{background:var(--noise), radial-gradient(120% 90% at 50% 0%, #1a2440 0%, #0d1220 55%, #070a12 100%)}
.stage.light{background:var(--noise), radial-gradient(120% 90% at 20% 0%, #eceae4 0%, #d9d6cf 60%, #c9c6bf 100%)}
.stage.flush{padding:0}
.stage.flush img{width:100%; height:auto}

/* ВК-сообщество */
.vk{background:#19191b; border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.9); max-width:1120px; margin:0 auto}
.vk .cov{width:100%; aspect-ratio:1590/530; object-fit:cover}
.vk .row{display:flex; gap:20px; align-items:flex-end; padding:0 clamp(16px,2.4vw,30px) clamp(16px,2vw,24px); margin-top:clamp(-56px,-4vw,-30px); position:relative}
.vk .ava{width:clamp(76px,8vw,124px); height:clamp(76px,8vw,124px); border-radius:50%; border:5px solid #19191b; object-fit:cover; flex:none; background:#000}
.vk .who{flex:1; min-width:0; padding-bottom:4px}
.vk .nm{font-weight:700; font-size:clamp(16px,1.6vw,21px); color:#e1e3e6}
.vk .ds{color:#939393; font-size:14px; margin-top:2px}
.vk .btns{display:flex; gap:8px; padding-bottom:6px}
.vk .btns span{font-size:13.5px; font-weight:600; padding:8px 16px; border-radius:8px; background:#2b2b2e; color:#e1e3e6; white-space:nowrap}
.vk .btns span.pri{background:#e1e3e6; color:#19191b}
.vk .tabs{display:flex; gap:22px; padding:12px clamp(16px,2.4vw,30px); border-top:1px solid #2a2a2d; font-size:14px; color:#939393; white-space:nowrap; overflow:hidden}
.vk .tabs b{color:#e1e3e6; font-weight:600; border-bottom:2px solid #e1e3e6; padding-bottom:10px; margin-bottom:-13px}

/* телефон */
.phone{position:relative; border-radius:clamp(22px,2.4vw,36px); background:linear-gradient(145deg,#2a2a31,#0d0d11 40%,#1b1b21); padding:clamp(6px,.7vw,10px); box-shadow:0 0 0 1px #34343c, 0 50px 80px -34px rgba(0,0,0,.95), 0 18px 30px -18px rgba(0,0,0,.8)}
.phone .scr{position:relative; aspect-ratio:9/16; border-radius:calc(clamp(22px,2.4vw,36px) - clamp(6px,.7vw,10px)); overflow:hidden; background:#000}
.phone .scr img,.phone .scr video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.phone .scr::after{content:""; position:absolute; top:3.2%; left:50%; transform:translateX(-50%); width:28%; height:3.4%; border-radius:99px; background:#000}
.phones{display:flex; justify-content:center; align-items:flex-end; gap:clamp(12px,2.4vw,40px); flex-wrap:wrap}
.phones .phone{width:clamp(140px,16vw,240px)}
.phones .phone:nth-child(odd){transform:translateY(-18px)}

/* печать */
.print{box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 34px 50px -22px rgba(0,0,0,.9), 0 10px 18px -10px rgba(0,0,0,.7)}
.print img{width:100%; height:auto}
.wall{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,2vw,34px); align-items:start}
.wall .print:nth-child(6n+1){transform:rotate(-1.4deg)}
.wall .print:nth-child(6n+2){transform:translateY(22px) rotate(.8deg)}
.wall .print:nth-child(6n+3){transform:rotate(-.4deg)}
.wall .print:nth-child(6n+4){transform:translateY(16px) rotate(1.2deg)}
.wall .print:nth-child(6n+5){transform:rotate(-.9deg)}
.wall .print:nth-child(6n){transform:translateY(24px) rotate(.5deg)}
.pin{position:relative}
.pin::before{content:""; position:absolute; top:-7px; left:50%; width:14px; height:14px; border-radius:50%; transform:translateX(-50%); background:radial-gradient(circle at 35% 35%, #fff3a0, #d4a900 60%, #7a6000); box-shadow:0 3px 5px rgba(0,0,0,.6); z-index:2}
.spreads{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,54px)}
.spread{display:grid; grid-template-columns:1fr 1fr; position:relative; box-shadow:0 40px 60px -26px rgba(0,0,0,.95), 0 12px 20px -12px rgba(0,0,0,.8)}
.spread::after{content:""; position:absolute; inset:0 auto 0 50%; width:6%; transform:translateX(-50%); background:linear-gradient(90deg, transparent, rgba(0,0,0,.45) 48%, rgba(255,255,255,.06) 52%, transparent)}
.spread:nth-child(4n+1){transform:rotate(-1deg)}
.spread:nth-child(4n+2){transform:rotate(.8deg) translateY(10px)}
.spread:nth-child(4n+3){transform:rotate(.5deg)}
.spread:nth-child(4n){transform:rotate(-.7deg) translateY(8px)}
.spread img{width:100%; height:auto}

/* ноутбук + телефон */
.combo{position:relative; max-width:1080px; margin:0 auto; padding-right:clamp(40px,9vw,140px)}
.laptop .lid{border:clamp(7px,.9vw,12px) solid #17171c; border-bottom-width:clamp(12px,1.4vw,20px); border-radius:16px 16px 4px 4px; background:#000; box-shadow:0 0 0 1px #2d2d34; overflow:hidden}
.laptop .lid img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top}
.laptop .base{height:clamp(10px,1.2vw,16px); margin:0 -7%; border-radius:0 0 18px 18px; background:linear-gradient(#34343b,#15151a 70%); position:relative; box-shadow:0 30px 40px -20px rgba(0,0,0,.9)}
.laptop .base::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:16%; height:40%; border-radius:0 0 8px 8px; background:#0f0f13}
.combo .phone{position:absolute; right:0; bottom:-10px; width:clamp(110px,16%,190px)}

/* сетки */
.g2,.g3,.g4,.g6{display:grid; gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.card{border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 40px -24px rgba(0,0,0,.9)}
.card img{width:100%; height:auto}
.sheet img{width:100%; height:auto; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 20px 30px -18px rgba(0,0,0,.9)}
.swipe{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.swipe img{flex:0 0 clamp(200px,20vw,300px); scroll-snap-align:start; border-radius:8px}
.ba{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); max-width:1100px; margin:0 auto}
.ba figure{margin:0}
.ba figcaption{margin-top:10px; font-family:var(--f-text); font-size:13px; color:var(--muted)}
.ba figure:last-child figcaption{color:var(--accent)}
.net{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.mini{background:#19191b; border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.mini img.c{width:100%; aspect-ratio:1200/480; object-fit:cover}
.mini .r{display:flex; align-items:center; gap:10px; padding:0 12px 12px; margin-top:-20px; position:relative}
.mini .r img{width:44px; height:44px; border-radius:50%; border:3px solid #19191b}
.mini .r span{font-size:13px; color:#e1e3e6; font-weight:600; padding-top:18px}

/* навигация между кейсами */
.nextcase{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:clamp(50px,6vw,90px)}
.nextcase a{display:block; text-decoration:none; border:1px solid var(--line); background:var(--ink-2); padding:22px 24px; transition:border-color .25s var(--ease)}
.nextcase a:hover{border-color:var(--accent)}
.nextcase .mono{display:block; margin-bottom:8px}
.nextcase b{font-family:var(--f-display); font-weight:600; font-size:clamp(16px,1.5vw,20px); letter-spacing:-.01em}
.nextcase a:last-child{text-align:right}
.contact{background:var(--ink-2); border:1px solid var(--line); padding:clamp(24px,3.4vw,48px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; margin-block:var(--gap) clamp(36px,4.4vw,64px)}
.contact h2{font-family:var(--f-display); font-weight:800; font-size:clamp(22px,2.8vw,36px); letter-spacing:-.03em; margin:0}
.tg{display:inline-flex; white-space:nowrap; font-family:var(--f-display); font-weight:600; font-size:clamp(15px,1.4vw,18px); text-decoration:none; background:var(--accent); color:var(--accent-ink); padding:18px 30px; transition:transform .25s var(--ease)}
.tg:hover{transform:translateY(-3px)}
footer{border-top:1px solid var(--line); padding-block:22px 46px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

dialog.lb{border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100vw; height:100vh}
dialog.lb::backdrop{background:rgba(4,4,6,.93); backdrop-filter:blur(8px)}
.lb-in{height:100%; display:grid; place-items:center; padding:clamp(14px,3vw,48px)}
.lb-in img{max-width:100%; max-height:calc(100vh - 60px); width:auto; height:auto}
.lb .close{position:fixed; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:rgba(14,14,19,.85); color:var(--text); cursor:pointer; font-size:20px}

@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .tags{justify-content:flex-start}
  .wall,.g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .net{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spreads{grid-template-columns:minmax(0,1fr)}
  .vk .btns{display:none}
}
@media (max-width:640px){
  .wall,.g6,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2,.net,.ba{grid-template-columns:minmax(0,1fr)}
  .phones .phone{width:calc(50% - 12px)}
  .phones .phone:nth-child(odd){transform:none}
  .vk .tabs{display:none}
  .combo{padding-right:0}
  .combo .phone{position:relative; width:46%; margin:-60px 0 0 auto; bottom:auto}
  .contact,.nextcase{grid-template-columns:1fr}
  .nextcase a:last-child{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}