/* Бежево-пудровая палитра + «liquid glass» (стекло как в iOS/macOS) */
:root{
  --bg:#f3ebe3; --bg-2:#ede1d7; --card:#efe4da;
  --text:#3d2f29; --muted:#8c776c; --accent:#c99286; --accent-2:#b37a6d; --powder:#e9cfc7; --sand:#e4d3c2;
  --line:rgba(120,85,70,.12);
  /* стекло */
  --glass:rgba(255,250,246,.38); --glass-strong:rgba(255,250,246,.55);
  --glass-border:rgba(255,255,255,.65);
  --glass-shadow:0 10px 40px -12px rgba(120,80,60,.28),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.18);
  --blur:blur(22px) saturate(170%);
  --r:22px; --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:min(1200px,calc(100% - 48px));
  --serif:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* мягкие пудровые пятна на фоне всей страницы — через них «просвечивает» стекло */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(40vw 40vw at 10% 15%,rgba(233,197,186,.55),transparent 70%),
             radial-gradient(35vw 35vw at 90% 35%,rgba(222,202,182,.6),transparent 70%),
             radial-gradient(45vw 45vw at 50% 100%,rgba(240,214,206,.5),transparent 70%),var(--bg)}
body.is-leaving main,body.is-leaving footer{opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
main{animation:pageIn .7s var(--ease-out) both}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
svg{flex:none}
.wrap{width:var(--wrap);margin:0 auto}
::selection{background:var(--powder);color:var(--text)}

/* ---------- стекло: общий класс-эффект ---------- */
.glass,.btn,.nav.scrolled,.contact,.chip,.cat .count,.vid .info,.lb-btn,.tabs a,.mi.ph,.toast,.empty,.copy{
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* ---------- шапка ---------- */
.nav{position:fixed;inset:12px 0 auto;z-index:50;transition:transform .45s var(--ease)}
.nav.hide{transform:translateY(calc(-100% - 16px))}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px;padding:0 10px 0 24px;border-radius:999px;border:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s}
.nav.scrolled .wrap{background:var(--glass);border-color:var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:.02em}
.brand i{color:var(--accent);font-style:normal}
.nav ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{display:block;padding:9px 18px;border-radius:999px;color:var(--muted);transition:color .25s,background .25s,box-shadow .25s}
.nav ul a:hover{color:var(--text)}
.nav ul a.on{color:var(--text);background:var(--glass-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px -6px rgba(120,80,60,.3)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;color:var(--text);cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.nav.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- кнопки (liquid glass) ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  border:1px solid var(--glass-border);background:var(--glass);color:var(--text);font:inherit;font-weight:500;cursor:pointer;
  box-shadow:var(--glass-shadow);transition:transform .35s var(--ease),box-shadow .35s,background .35s}
/* блик сверху, как у стеклянных кнопок Apple */
.btn::before{content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:999px 999px 40% 40%/999px 999px 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));opacity:.6;pointer-events:none;transition:opacity .35s}
/* «живой» отсвет, следует за курсором (координаты ставит site.js) */
.btn::after{content:"";position:absolute;width:140px;height:140px;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 40px -14px rgba(120,80,60,.4),inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.3)}
.btn:hover::after{opacity:.8}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,rgba(214,166,154,.85),rgba(190,135,122,.85));color:#fff;border-color:rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(110,60,50,.25)}
.btn.primary::before{opacity:.45}
.btn svg{width:18px;height:18px;position:relative;z-index:1;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* ---------- первый экран ---------- */
.hero{min-height:100svh;display:grid;align-items:center;position:relative;overflow:hidden;padding:120px 0 80px}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:float 18s ease-in-out infinite alternate}
.blob.b1{width:50vw;height:50vw;background:#efc9bf;left:-12vw;top:-12vw}
.blob.b2{width:42vw;height:42vw;background:#e3d0bd;right:-10vw;top:18vh;animation-duration:22s;animation-delay:-6s}
.blob.b3{width:32vw;height:32vw;background:#f3dcd4;left:30vw;bottom:-14vw;animation-duration:26s;animation-delay:-12s}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,var(--bg))}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-2);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(84px,17vw,230px);line-height:.9;margin:18px 0 26px;letter-spacing:-.02em}
.hero h1 .ch{display:inline-block;opacity:0;transform:translateY(60%) rotate(6deg);filter:blur(8px);animation:charIn 1.1s var(--ease-out) forwards;animation-delay:calc(.15s + var(--i)*.08s)}
.hero h1 em{color:var(--accent);font-style:italic}
.lead{font-size:clamp(18px,2.2vw,24px);color:#5e4a41;max-width:620px;margin:0 0 38px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.scroll-cue{position:absolute;left:50%;bottom:28px;width:26px;height:42px;border:1.5px solid rgba(61,47,41,.3);border-radius:20px;transform:translateX(-50%)}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--text);animation:cue 2s var(--ease) infinite}
.stats{display:inline-flex;gap:42px;margin-top:56px;flex-wrap:wrap;padding:20px 30px;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.stats b{display:block;font-family:var(--serif);font-size:44px;font-weight:500;line-height:1;color:var(--text)}
.stats span{color:var(--muted);font-size:14px}

/* ---------- секции ---------- */
section{padding:110px 0}
.sec-head{display:flex;align-items:end;gap:20px;justify-content:space-between;flex-wrap:wrap;margin-bottom:46px}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(42px,6vw,78px);line-height:1;margin:10px 0 0}
.sec-head p{color:var(--muted);max-width:420px;margin:0}

/* ---------- разделы портфолио: картинки в стеклянной рамке ---------- */
.cats{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.cat{position:relative;border-radius:28px;overflow:hidden;min-height:440px;background:var(--card);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;grid-column:span 4;
  border:1px solid var(--glass-border);box-shadow:0 20px 50px -20px rgba(120,80,60,.35),inset 0 1px 0 rgba(255,255,255,.8);transition:transform .6s var(--ease-out),box-shadow .6s}
.cat:hover{transform:translateY(-4px);box-shadow:0 30px 60px -22px rgba(120,80,60,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.cat:nth-child(1){grid-column:span 7}.cat:nth-child(2){grid-column:span 5}.cat:nth-child(3){grid-column:span 12;min-height:380px}
.cat .bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(135deg,#ecd3c9,#e2d2c1) center/cover;transform:scale(1.06);transition:transform 1.2s var(--ease-out),filter .6s}
.cat::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0) 45%,rgba(90,60,50,.25));pointer-events:none}
/* блик стекла по краю картинки */
.cat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.45),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25));mix-blend-mode:soft-light}
.cat:hover .bg{transform:scale(1.12)}
/* текст лежит на стеклянной плашке */
.cat .panel{padding:22px 24px;border-radius:20px;background:rgba(255,250,246,.66);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:background .4s}
.cat:hover .panel{background:rgba(255,250,246,.78)}
.cat .panel{-webkit-backdrop-filter:blur(30px) saturate(150%)!important;backdrop-filter:blur(30px) saturate(150%)!important}
.cat .num{position:absolute;top:24px;left:26px;font-family:var(--serif);font-size:20px;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(90,60,50,.4)}
.cat .count{position:absolute;top:20px;right:20px;font-size:13px;padding:6px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.cat h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.2vw,42px);line-height:1.05;margin:0 0 6px}
.cat p{margin:0;color:#5e4a41;max-width:520px}
.cat .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--accent-2);font-weight:500}
.cat .go svg{transition:transform .4s var(--ease)}
.cat:hover .go svg{transform:translateX(6px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{padding:7px 15px;border-radius:999px;border:1px solid var(--glass-border);background:rgba(255,255,255,.4);font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:background .25s,color .25s,transform .25s var(--ease)}
.chip:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.skeleton{background:linear-gradient(100deg,var(--card) 30%,#f6eee7 50%,var(--card) 70%);background-size:300% 100%;animation:shimmer 1.6s linear infinite}

/* ---------- контакты ---------- */
.contacts{position:relative;overflow:hidden}
.contacts .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.contact-list{display:grid;gap:14px}
.contact{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);transition:transform .4s var(--ease),background .3s}
.contact:hover{transform:translateY(-3px);background:var(--glass-strong)}
.contact .label{color:var(--muted);font-size:13px}
.contact .value{font-size:clamp(18px,2.2vw,24px);font-weight:500;letter-spacing:.01em;white-space:nowrap}
.contact .body{flex:1;min-width:0}
.messengers{display:flex;gap:8px}
.mi{position:relative;overflow:hidden;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;transition:transform .35s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -10px rgba(80,50,40,.5)}
.mi::before{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);pointer-events:none}
.mi:hover{transform:translateY(-3px) scale(1.06)}
.mi svg{width:26px;height:26px;position:relative}
.mi.wa{background:#25d366}
.mi.tg{background:#2aabee}
.mi.max{background:linear-gradient(135deg,#3a7bff,#8b3dff)}
.mi.max b{position:relative;font:800 11px/1 var(--sans);color:#fff;letter-spacing:.04em}
.copy{border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;padding:8px;border-radius:12px;transition:color .2s,background .2s,border-color .2s}
.copy:hover{color:var(--text);background:var(--glass-strong);border-color:var(--glass-border)}
.copy svg{width:18px;height:18px}

footer{padding:40px 0;color:var(--muted);font-size:14px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line)}
footer a:hover{color:var(--text)}

/* ---------- страница папки ---------- */
.page-head{padding:150px 0 40px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-bottom:18px}
.crumbs a:hover{color:var(--text)}
.page-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,8vw,104px);line-height:1;margin:0 0 14px}
.page-head p{color:var(--muted);max-width:620px;margin:0;font-size:18px}
.subfolders{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-bottom:60px}
.subfolders .cat{min-height:340px;grid-column:auto!important}
.tabs{display:inline-flex;gap:4px;flex-wrap:wrap;margin:26px 0 0;padding:5px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.tabs:empty{display:none}
.tabs a{padding:9px 18px;border-radius:999px;color:var(--muted);transition:all .3s var(--ease);-webkit-backdrop-filter:none;backdrop-filter:none}
.tabs a:hover{color:var(--text)}
.tabs a.on{background:rgba(255,255,255,.75);color:var(--text);box-shadow:inset 0 1px 0 #fff,0 4px 14px -6px rgba(120,80,60,.35)}

.videos{columns:3 300px;column-gap:22px;padding-bottom:40px}
.videos.vertical{columns:4 220px}
.vid{break-inside:avoid;margin:0 0 22px;position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);cursor:pointer;display:block;width:100%;padding:0;color:inherit;text-align:left;transform:translateZ(0);
  border:1px solid var(--glass-border);box-shadow:0 16px 40px -18px rgba(120,80,60,.4),inset 0 1px 0 rgba(255,255,255,.8);transition:box-shadow .5s,transform .5s var(--ease-out)}
.vid:hover{transform:translateY(-3px);box-shadow:0 26px 50px -20px rgba(120,80,60,.5)}
.vid .media{position:relative;aspect-ratio:var(--ar,16/9);overflow:hidden}
.vid img,.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out),opacity .5s}
.vid video{opacity:0}
.vid.previewing video{opacity:1}
.vid:hover img,.vid:hover video{transform:scale(1.05)}
.vid .media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 30%);mix-blend-mode:soft-light}
.vid .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(80,50,40,.25))}
.vid .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 10px 30px -10px rgba(80,50,40,.5);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);display:grid;place-items:center;transform:scale(.85);opacity:0;transition:all .4s var(--ease)}
.vid .play svg{width:22px;height:22px;margin-left:3px;fill:#fff}
.vid:hover .play{opacity:1;transform:none}
.vid .info{position:absolute;left:10px;right:10px;bottom:10px;padding:10px 14px;display:flex;gap:10px;align-items:center;border-radius:16px;
  background:rgba(255,250,246,.66);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);transform:translateY(4px);transition:transform .4s var(--ease),background .4s}
.vid:hover .info{transform:none;background:var(--glass-strong)}
.vid .t{flex:1;font-weight:500;line-height:1.3;font-size:15px}
.vid .d{font-size:12px;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.55)}
.empty{padding:80px 20px;text-align:center;color:var(--muted);border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}

/* ---------- плеер ---------- */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(243,235,227,.6);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);display:grid;grid-template-rows:auto 1fr auto;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.lightbox.open{opacity:1;pointer-events:auto}
.lb-top{display:flex;align-items:center;gap:12px;padding:16px 20px}
.lb-top .t{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-btn{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass);box-shadow:var(--glass-shadow);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.lb-btn:hover{background:var(--glass-strong);transform:scale(1.06)}
.lb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 80px}
.lb-stage video,.lb-stage img{max-width:100%;max-height:100%;border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 30px 80px -24px rgba(90,60,50,.55);transform:scale(.96);opacity:0;transition:transform .5s var(--ease-out),opacity .4s;background:#000}
.lightbox.open .lb-stage .ready{transform:none;opacity:1}
.lb-prev,.lb-next{position:absolute;top:50%;margin-top:-23px}
.lb-prev{left:20px}.lb-next{right:20px}
.lb-desc{padding:14px 20px 22px;color:var(--muted);text-align:center;max-width:800px;margin:0 auto;min-height:20px}

.watch{padding:120px 0 60px}
.watch .player{background:#000;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;max-height:80vh;border:1px solid var(--glass-border);box-shadow:0 30px 70px -26px rgba(90,60,50,.5)}
.watch .player video,.watch .player img{max-height:80vh;width:auto;max-width:100%}
.watch h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,56px);margin:28px 0 10px;line-height:1.1}

.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--text);padding:12px 22px;border-radius:999px;opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:120;font-size:14px}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- появление при прокрутке ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--d,0)*90ms)}
.reveal.in{opacity:1;transform:none}
.reveal-img{clip-path:inset(12% 6% 12% 6% round 22px);transition:clip-path 1.3s var(--ease-out),opacity 1s,transform 1s var(--ease-out)}
.reveal-img.in{clip-path:inset(0 0 0 0 round 22px)}

@keyframes charIn{to{opacity:1;transform:none;filter:none}}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.1)}100%{transform:translate(-4vw,8vh) scale(.95)}}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes shimmer{to{background-position:-150% 0}}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}


/* =====================================================================
   LIQUID GLASS — выраженное стекло: световой ободок, блики, толщина,
   преломление фона (в Chrome/Edge/Яндекс.Браузере через SVG-фильтр)
   ===================================================================== */
:root{
  --lg-fill:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,.14) 55%,rgba(255,240,234,.22));
  --lg-fill-strong:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.34) 55%,rgba(255,240,234,.42));
  /* ободок: яркий свет сверху-слева и снизу-справа, как на стекле Apple */
  --lg-rim:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.35) 22%,rgba(255,255,255,0) 45%,rgba(255,255,255,0) 60%,rgba(255,255,255,.55) 82%,rgba(255,255,255,1) 100%);
  --lg-shadow:
    0 22px 50px -18px rgba(110,65,50,.38),
    0 4px 12px -4px rgba(110,65,50,.18),
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 0 -1.5px 1px rgba(255,255,255,.5),
    inset 0 14px 24px -14px rgba(255,255,255,.9),
    inset 0 -16px 28px -16px rgba(201,146,134,.45),
    inset 10px 0 20px -14px rgba(255,255,255,.55),
    inset -10px 0 20px -14px rgba(255,255,255,.4);
  --lg-filter:blur(14px) saturate(190%) brightness(1.06);
}

.btn,.nav .wrap,.stats,.cat .panel,.cat .count,.chip,.contact,.tabs,.vid .info,.vid .play,.lb-btn,.toast,.empty,.copy:hover,
.hero-card,.hero-chip,.glass-play,.hero-cap,.lens{
  background:var(--lg-fill);border:0;box-shadow:var(--lg-shadow);
  -webkit-backdrop-filter:var(--lg-filter);backdrop-filter:var(--lg-filter)}
.stats,.cat .panel,.chip,.contact,.tabs,.empty,.nav .wrap,.hero-card{position:relative}

/* световой ободок — тонкая «рамка» из градиента по краю стекла */
.btn::before,.nav .wrap::before,.stats::before,.cat .panel::before,.cat .count::before,.chip::before,.contact::before,.tabs::before,
.vid .info::before,.vid .play::before,.lb-btn::before,.toast::before,.empty::before,.hero-card::before,.hero-chip::before,.glass-play::before,.hero-cap::before,.lens::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:var(--lg-rim);opacity:1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* блик-«полумесяц» сверху: внутренний отсвет, делает стекло объёмным */
.btn,.stats,.contact,.cat .panel,.hero-card,.lb-btn,.tabs,.vid .info{
  background:radial-gradient(120% 70% at 30% -20%,rgba(255,255,255,.65),rgba(255,255,255,0) 55%),var(--lg-fill)}
.contact:hover,.cat:hover .panel,.vid:hover .info,.lb-btn:hover{
  background:radial-gradient(120% 70% at 30% -20%,rgba(255,255,255,.8),rgba(255,255,255,0) 55%),var(--lg-fill-strong)}

/* шапка — всегда стеклянная */
.nav .wrap{-webkit-backdrop-filter:var(--lg-filter);backdrop-filter:var(--lg-filter)}
.nav.scrolled .wrap{background:var(--lg-fill-strong);box-shadow:var(--lg-shadow)}
.nav ul a.on{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(201,146,134,.25),0 6px 16px -6px rgba(110,65,50,.35)}

/* кнопки */
.btn{border:0}
.btn.primary{background:radial-gradient(120% 80% at 30% -20%,rgba(255,255,255,.7),rgba(255,255,255,0) 50%),linear-gradient(180deg,rgba(222,168,156,.78),rgba(185,126,112,.82));
  box-shadow:var(--lg-shadow),0 14px 34px -12px rgba(185,126,112,.65)}
.btn:hover{box-shadow:var(--lg-shadow),0 24px 50px -16px rgba(110,65,50,.45)}
.btn::after{width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 60%);mix-blend-mode:soft-light}
.btn:hover::after{opacity:1}

.cat .panel{background:radial-gradient(120% 70% at 30% -20%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),linear-gradient(160deg,rgba(255,250,246,.62),rgba(255,250,246,.38))}
.cat .panel,.vid .info{-webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.08)!important;backdrop-filter:blur(26px) saturate(180%) brightness(1.08)!important}
.cat .count,.vid .play{background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.18))}
.vid .play{border:0;width:72px;height:72px;margin:-36px 0 0 -36px}
.vid .info{background:radial-gradient(120% 90% at 30% -30%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%),linear-gradient(160deg,rgba(255,250,246,.6),rgba(255,250,246,.36))}
.tabs a.on{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(110,65,50,.35)}
.chip{background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.28))}

/* более живой фон, чтобы стеклу было что преломлять */
body::before{background:
  radial-gradient(38vw 38vw at 8% 12%,rgba(236,186,172,.75),transparent 70%),
  radial-gradient(32vw 32vw at 92% 30%,rgba(226,196,168,.8),transparent 70%),
  radial-gradient(30vw 30vw at 70% 75%,rgba(241,200,190,.65),transparent 70%),
  radial-gradient(40vw 40vw at 15% 95%,rgba(232,210,190,.7),transparent 70%),var(--bg);
  animation:bgShift 30s ease-in-out infinite alternate}
.blob{opacity:.95}
.blob.b1{background:#eab7a8}.blob.b2{background:#e2c4a6}.blob.b3{background:#f0c5bb}

/* ---------- первый экран: стеклянная карточка и «линзы» ---------- */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-art{position:relative;display:block;perspective:1200px;padding:30px 10px}
.hero-card{border-radius:34px;padding:14px;transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transform-style:preserve-3d;transition:transform .8s var(--ease-out);animation:bob 7s ease-in-out infinite}
.hero-img{aspect-ratio:4/5;border-radius:24px;background:linear-gradient(140deg,#e7b9ab,#d9b79c 50%,#efd6cc) center/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 18px 40px -20px rgba(90,50,40,.5);transition:transform 1.2s var(--ease-out)}
.hero-art:hover .hero-img{transform:scale(1.02)}
.glass-play{position:absolute;left:50%;top:44%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;transform:translateZ(40px);transition:transform .5s var(--ease)}
.glass-play svg{width:28px;height:28px;margin-left:4px;fill:#fff;filter:drop-shadow(0 2px 4px rgba(90,50,40,.35))}
.hero-art:hover .glass-play{transform:translateZ(40px) scale(1.08)}
.hero-cap{position:absolute;left:28px;right:28px;bottom:28px;padding:14px 18px;border-radius:20px;transform:translateZ(30px);
  background:radial-gradient(120% 90% at 30% -30%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%),linear-gradient(160deg,rgba(255,250,246,.6),rgba(255,250,246,.32))}
.hero-cap small{display:block;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.hero-cap b{font-family:var(--serif);font-weight:500;font-size:24px;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-chip{position:absolute;padding:10px 18px;border-radius:999px;font-weight:500;font-size:14px;animation:bob 6s ease-in-out infinite}
.hero-chip.c1{top:6px;right:-6px;animation-delay:-2s}
.hero-chip.c2{bottom:70px;left:-24px;animation-delay:-4s}
.lens{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(60% 50% at 35% 25%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),radial-gradient(80% 80% at 70% 80%,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(4px) saturate(200%) brightness(1.08);backdrop-filter:blur(4px) saturate(200%) brightness(1.08);
  animation:drift 20s ease-in-out infinite alternate}
.lens.l4{width:110px;height:110px;left:-38px;top:34%;z-index:4;animation-duration:14s}
.lens.l1{width:180px;height:180px;left:46%;top:12%}
.lens.l2{width:110px;height:110px;left:6%;bottom:12%;animation-duration:24s;animation-delay:-8s}
.lens.l3{width:70px;height:70px;right:6%;top:70%;animation-duration:17s;animation-delay:-4s}

/* преломление: только в браузерах на Chromium (site.js ставит класс lg-refract) */
html.lg-refract .btn,html.lg-refract .nav .wrap,html.lg-refract .stats,html.lg-refract .contact,html.lg-refract .tabs,
html.lg-refract .lb-btn,html.lg-refract .hero-chip,html.lg-refract .glass-play,html.lg-refract .chip{
  -webkit-backdrop-filter:url(#lg-refract) blur(5px) saturate(190%) brightness(1.06);backdrop-filter:url(#lg-refract) blur(5px) saturate(190%) brightness(1.06)}
html.lg-refract .glass-play,html.lg-refract .vid .play,html.lg-refract .hero-chip{backdrop-filter:url(#lg-lens) blur(1.5px) saturate(200%) brightness(1.1)}
html.lg-refract .lens{backdrop-filter:url(#lg-lens) saturate(200%) brightness(1.08)}
html.lg-refract .hero-cap,html.lg-refract .cat .panel,html.lg-refract .vid .info{
  backdrop-filter:url(#lg-refract) blur(22px) saturate(180%) brightness(1.08)!important}

@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}100%{transform:translate(-30px,20px)}}
@keyframes bgShift{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(-12deg) saturate(1.1)}}

@media (max-width:860px){
  .nav{inset:8px 0 auto}
  .nav .wrap{background:var(--glass);border-color:var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  .nav ul{position:fixed;left:12px;right:12px;top:82px;flex-direction:column;background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:10px;gap:2px;border-radius:24px;transform:translateY(-10px) scale(.98);opacity:0;pointer-events:none;transition:all .35s var(--ease)}
  .nav.open ul{transform:none;opacity:1;pointer-events:auto}
  .nav ul a{padding:14px 16px;font-size:18px}
  .burger{display:block}
  .cats{grid-template-columns:1fr}
  .cat,.cat:nth-child(n){grid-column:auto;min-height:380px}
  .contacts .grid{grid-template-columns:1fr}
  section{padding:80px 0}
  .stats{gap:26px;padding:16px 22px}
  .lb-stage{padding:0 10px}
  .lb-prev,.lb-next{top:auto;bottom:-60px}
  .lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}
  .lb-desc{padding-top:70px}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:340px;margin:10px auto 0;padding:20px 10px}
  .hero-chip.c2{left:-6px}
  .lens.l1{width:120px;height:120px;left:60%}
  .contact{padding:16px;gap:12px}
  .mi{width:40px;height:40px;border-radius:12px}
  .mi svg{width:22px;height:22px}
  .messengers{gap:6px}
}
/* браузеры без поддержки размытия — делаем плашки плотнее, чтобы текст читался */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,250,246,.88);--glass-strong:rgba(255,250,246,.95)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal,.hero h1 .ch{opacity:1;transform:none;filter:none}
  .reveal-img{clip-path:none}
}