/* ============================================
   DIN – Portfolio CSS  |  style.css (global)
   ============================================ */

@font-face { font-family:'MinionPro'; src:url('/assets/fonts/MinionPro-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'MinionPro'; src:url('/assets/fonts/MinionPro-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root {
  --case-wrap-pt: 36px;
  --hero-mt: 0;
  --border:rgba(255,255,255,0.11);
  --bg:#0e0e0e; --bg-2:#141414; --bg-card:#1a1a1a;
  --border:rgba(255,255,255,0.11); --border-h:rgba(255,255,255,0.24);
  --text:#f5f1eb; --text-muted:rgba(255,255,255,0.68); --text-dim:rgba(255,255,255,0.52);
  --accent:#c8a96e; --accent-2:#b8935a; --white:#fafafa;
  --font-serif:'MinionPro',Georgia,serif;
  --font-sans:'Poppins',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace;
  --text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:22px; --text-xl:28px;
  --h4:28px; --h3:36px; --h2:46px; --h1:76px;
  --hero:clamp(64px,9vw,136px);
  --leading-tight:0.92; --leading-normal:1.65; --leading-loose:1.72;
  --tracking-mono:0.22em; --tracking-mono-sm:0.14em;
  --r:12px; --r-lg:20px;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --navBaseH:64px;
  --navH:64px;
  --subGap:18px;
}
@media(max-width:980px){:root{--h1:58px;--h2:38px;--h3:30px}}
@media(max-width:900px){:root{--navBaseH:56px;--navH:56px}}
@media(max-width:640px){:root{--h1:46px;--h2:32px;--h3:26px;--text-base:14px;--text-md:16px;--navBaseH:52px;--navH:52px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
html,body{height:100%}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

.gl-hero,.idx-hero,.about-hero,.contact-hero { overflow-x: clip; }

img{max-width:100%;height:auto;display:block}
/* Global mobile safety: media never overflow, long strings (emails/URLs) wrap instead of forcing sideways scroll */
svg,video,canvas{max-width:100%}
table{max-width:100%}
body{overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:400;line-height:1.15;letter-spacing:-0.01em;color:#fff}
a{text-decoration:none;color:inherit}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:0.22}

/* Typography */
.t-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase;line-height:1}
.t-case-title,.case-title{font-family:var(--font-serif);font-size:var(--h1);line-height:var(--leading-tight);font-weight:400;letter-spacing:-0.01em}
.t-case-h2,.case-h2{font-family:var(--font-serif);font-size:var(--h2);line-height:1.05;font-weight:400}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:rgba(200,169,110,0.95)}
.meta-k{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-mono-sm);text-transform:uppercase}
.pnum{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-mono-sm);text-transform:uppercase}
.screen-tag,.ba-tag,.hero-badge,.t-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--tracking-mono-sm);text-transform:uppercase}
.stat-n{font-family:var(--font-serif);font-size:clamp(38px,5vw,50px);line-height:1;color:var(--accent);text-shadow:0 0 24px rgba(200,169,110,0.35)}
.cta-banner h3{font-family:var(--font-serif);font-size:var(--h2);font-weight:400;line-height:1.05}
.learn-n,.type-ex{font-family:var(--font-serif);font-size:var(--h4)}
.next-title{font-family:var(--font-serif);font-size:clamp(3rem,6vw,var(--h1));font-weight:300;line-height:var(--leading-tight)}

/* ── NAV (старый, для portfolio страниц которые ещё не обновлены) ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 64px;
  background: rgba(16,16,16,0.96);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  height: var(--navBaseH);
  transition: background 0.3s ease;
}
.logo img{height:clamp(28px,calc(var(--navH) - 16px),44px);width:auto;display:block;filter:brightness(0) invert(1);opacity:1}
.logo-text{font-family:var(--font-serif);font-size:22px;letter-spacing:0.08em;color:var(--white);font-weight:500}
.menu{display:flex;align-items:center;gap:56px}
.menu a{font-family:var(--font-sans);font-size:13px;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.72);transition:color 0.25s var(--ease);position:relative}
.menu a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--accent);transition:width 0.3s var(--ease)}
.menu a:hover,.menu a.active{color:var(--white)}
.menu a.active::after,.menu a:hover::after{width:100%}
.burger{display:none;flex-direction:column;gap:6px;width:36px;border:none;background:none;cursor:pointer;padding:4px}
.burger span{display:block;height:2px;background:var(--white);transition:all 0.3s var(--ease);transform-origin:center;border-radius:2px}
.mobile-menu{display:none;position:fixed;inset:0;z-index:9001;background:rgba(0,0,0,0.6);backdrop-filter:blur(10px)}
.mobile-menu.open{display:flex;justify-content:flex-end}
.mobile-menu-panel{width:min(360px,86vw);height:100%;background:#181818;border-left:1px solid var(--border);padding:26px 28px;display:flex;flex-direction:column;animation:slideIn 0.3s var(--ease)}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.mobile-menu-top{display:flex;justify-content:flex-end;align-items:center;margin-bottom:36px}
.mobile-close{border:1px solid var(--border);background:rgba(255,255,255,0.05);color:var(--text-muted);width:40px;height:40px;border-radius:12px;font-size:22px;cursor:pointer;line-height:1;transition:color 0.2s,border-color 0.2s,background 0.2s}
.mobile-close:hover{color:var(--white);border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.08)}
.mobile-menu-links{display:flex;flex-direction:column;gap:18px}
.mobile-menu-links a{font-family:var(--font-serif);font-size:28px;font-weight:300;color:rgba(255,255,255,0.68);transition:color 0.25s var(--ease),transform 0.25s var(--ease);display:inline-block}
.mobile-menu-links a.active,.mobile-menu-links a:hover{color:var(--white);transform:translateX(8px)}
#header-placeholder{display:block;height:var(--navH);flex-shrink:0;pointer-events:none}
.page-wrap{padding-top:var(--navH);position:relative;z-index:1}
.ps-page-wrap,.ub-page-wrap{padding-top:var(--navH)}

/* ── FOOTER ── */
.site-footer{
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 60px 48px 40px;
}
.site-footer__inner{
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 60px; align-items: start;
}
.site-footer__logo-img{height:52px;width:auto;margin-bottom:15px;filter:brightness(0) invert(1)}
.site-footer__tagline{font-size:var(--text-sm);color:var(--text-muted);line-height:1.7;max-width:220px}
.site-footer__col-title{font-family:var(--font-mono);font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.60);margin-bottom:20px}
.site-footer__nav{display:flex;flex-direction:column;gap:12px}
.site-footer__nav a{font-size:14px;color:var(--text-muted);transition:color 0.2s,transform 0.2s;display:inline-block}
.site-footer__nav a:hover{color:var(--white);transform:translateX(4px)}
.site-footer__item{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--text-muted);margin-bottom:10px}
.site-footer__form-label{display:block;font-size:var(--text-sm);color:var(--text-muted);line-height:1.6;margin:0 0 12px 0}
.site-footer__form{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.site-footer__form>*+*{margin-left:8px}
.site-footer__form input{flex:1 1 auto;min-width:0;height:40px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--white);font-family:var(--font-sans);font-size:var(--text-sm);outline:none;transition:border-color 0.2s,background 0.2s}
.site-footer__form input:focus{border-color:rgba(255,255,255,0.40);background:rgba(255,255,255,0.06)}
.site-footer__form input::placeholder{color:var(--text-muted)}
.site-footer__form button{flex:0 0 auto;min-width:112px;height:40px;padding:0 14px;background:rgba(255,255,255,0.90);border:none;border-radius:6px;color:#080808;font-family:var(--font-sans);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 0.2s,transform 0.2s}
.site-footer__form button:hover{background:#fff;transform:translateY(-1px)}
.site-footer__bottom{max-width:1200px;margin:40px auto 0;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted)}
@media(max-width:900px){
  .site-footer{padding:40px 24px 30px}
  .site-footer__inner{grid-template-columns:1fr 1fr;gap:36px}
}

/* Animations */
.fade-up{opacity:0;transform:translateY(30px);animation:fadeUp 0.8s var(--ease) forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.delay-1{animation-delay:0.1s}.delay-2{animation-delay:0.2s}.delay-3{animation-delay:0.3s}.delay-4{animation-delay:0.5s}

/* Cursor */
.din-cursor{position:fixed;top:0;left:0;width:7px;height:7px;background:rgba(255,255,255,0.9);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);mix-blend-mode:difference}
.din-cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid rgba(255,255,255,0.22);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:width 0.4s cubic-bezier(0.23,1,0.32,1),height 0.4s cubic-bezier(0.23,1,0.32,1)}
@media(pointer:coarse),(max-width:900px){.din-cursor,.din-cursor-ring{display:none!important}}

/* Gallery */
.gallery-hero{padding:calc(var(--navH) + 76px) 48px 60px;max-width:1200px;margin:0 auto;position:relative}
.gallery-hero-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;display:block}
.gallery-hero h1{font-size:clamp(2.5rem,6vw,5.5rem);font-weight:300;color:var(--white);max-width:800px;line-height:1.1;margin-bottom:24px}
.gallery-hero h1 em{font-style:italic;color:var(--accent)}
.gallery-hero p{font-size:var(--text-md);color:rgba(255,255,255,0.72);max-width:520px;line-height:1.8}
.gallery-count{position:absolute;top:140px;right:48px;font-family:var(--font-mono);font-size:72px;font-weight:700;color:rgba(255,255,255,0.04);line-height:1;pointer-events:none;user-select:none}
.gallery-container{padding:20px 48px 80px;max-width:1200px;margin:0 auto}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:48px}
.project-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all 0.4s var(--ease);display:flex;flex-direction:column}
.project-card:hover{border-color:rgba(200,169,110,0.3);transform:translateY(-8px);box-shadow:0 30px 70px rgba(0,0,0,0.5)}
.project-image{overflow:hidden;aspect-ratio:16/10;background:#0d0d0d}
.project-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease),filter 0.4s var(--ease);filter:brightness(0.9) saturate(0.85)}
.project-card:hover .project-image img{transform:scale(1.05);filter:brightness(1) saturate(1)}
.project-info{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-top:1px solid var(--border)}
.project-meta{display:flex;align-items:center;gap:14px}
.project-icon{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-h);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.3s,background 0.3s}
.project-card:hover .project-icon{border-color:var(--accent);background:rgba(200,169,110,0.08)}
.project-icon img{width:14px;height:14px;opacity:0.6;filter:brightness(0) invert(1);transition:opacity 0.3s}
.project-card:hover .project-icon img{opacity:1}
.project-title{font-family:var(--font-serif);font-size:18px;font-weight:400;color:var(--text);transition:color 0.3s}
.project-card:hover .project-title{color:var(--white)}
.project-arrow{width:20px;height:20px;color:var(--text-muted);transition:color 0.3s,transform 0.3s var(--ease);flex-shrink:0}
.project-card:hover .project-arrow{color:var(--accent);transform:translate(4px,-4px)}

/* ── SUBNAV ── */
.case-section{scroll-margin-top:calc(var(--navH) + 62px)}
.case-subnav{position:sticky;top:var(--navH);z-index:90;padding:10px 0 6px;pointer-events:none}
.case-subnav-inner{pointer-events:auto;display:flex;justify-content:center;padding:0 16px}
.case-subnav-pill{display:inline-flex;gap:2px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px 8px;border-radius:999px;border:1px solid var(--subnav-border,rgba(255,255,255,0.14));background:rgba(10,10,10,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04)}
.case-subnav-link{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,0.6);text-decoration:none;padding:6px 10px;border-radius:999px;transition:background .18s,color .18s;white-space:nowrap;flex-shrink:0}
.case-subnav-link:hover{background:var(--subnav-hover,rgba(255,255,255,0.10));color:#fff}
.case-subnav-link.active{background:var(--subnav-hover,rgba(255,255,255,0.12));color:#fff}
@media(max-width:768px){
  .case-subnav{padding:8px 0 8px}
  .case-subnav-inner{overflow-x:scroll;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;justify-content:center;padding:0 14px}
  .case-subnav-inner::-webkit-scrollbar{display:none}
  .case-subnav-pill{flex-wrap:wrap;flex-shrink:0;justify-content:center;border-radius:16px;padding:6px 8px;gap:2px;width:auto;max-width:100%}
  .case-subnav-link{font-size:9px;letter-spacing:.09em;padding:6px 8px;flex-shrink:0}
}

/* Case footer */
.case-footer{background:rgba(14,14,14,0.97);border-top:1px solid rgba(255,255,255,0.12);padding:60px 48px 40px;position:relative;z-index:1}
.case-footer__inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:60px;align-items:start}
.case-footer__logo{width:38px;height:38px;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 0 8px rgba(255,255,255,0.12))}
.case-footer__tagline{font-size:var(--text-sm);color:rgba(255,255,255,0.52);line-height:1.7;max-width:240px}
.case-footer__title{font-family:var(--font-mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.65);margin-bottom:18px}
.case-footer__nav{display:flex;flex-direction:column;gap:11px}
.case-footer__nav a{font-size:14px;color:rgba(255,255,255,0.58);text-decoration:none;transition:color .2s,transform .2s;display:inline-block}
.case-footer__nav a:hover{color:#fff;transform:translateX(4px)}
.case-footer__item{font-size:var(--text-sm);color:rgba(255,255,255,0.52);margin-bottom:9px}
.case-footer__hint{font-size:var(--text-sm);color:rgba(255,255,255,0.45);margin-bottom:12px;line-height:1.6}
.case-footer__form{display:flex;gap:8px}
.case-footer__form input{flex:1;padding:10px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:8px;color:#fff;font-family:var(--font-sans);font-size:var(--text-sm);outline:none;transition:border-color .2s}
.case-footer__form input:focus{border-color:rgba(255,255,255,0.40)}
.case-footer__form input::placeholder{color:rgba(255,255,255,0.32)}
.case-footer__form button{padding:10px 16px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.18);border-radius:8px;color:#fff;font-family:var(--font-sans);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s}
.case-footer__form button:hover{background:rgba(255,255,255,0.22);transform:scale(1.03)}
.case-footer__bottom{max-width:1120px;margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,0.10);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,0.35);flex-wrap:wrap;gap:12px}
.case-footer__case-label{color:rgba(255,255,255,0.22)}
.case-footer__proj-nav{display:flex;gap:10px;align-items:center}
.case-footer__proj-nav a{color:rgba(255,255,255,0.55);text-decoration:none;font-size:12px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.16);transition:all .2s}
.case-footer__proj-nav a:hover{background:rgba(255,255,255,0.10);color:#fff;border-color:rgba(255,255,255,0.24)}
.case-footer__proj-nav a.cta{background:rgba(255,255,255,0.92);color:#0a0b0e;border-color:rgba(255,255,255,0.92);font-weight:600}
.case-footer__proj-nav a.cta:hover{background:#fff}

/* Image grids */
.case-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:16px}
.g-col-12{grid-column:span 12}.g-col-6{grid-column:span 6}.g-col-4{grid-column:span 4}.g-col-3{grid-column:span 3}.g-col-7{grid-column:span 7}.g-col-5{grid-column:span 5}
.case-img{border-radius:12px;overflow:hidden;cursor:zoom-in;border:1px solid var(--border);background:var(--bg-card)}
.case-img img{display:block;width:100%;height:auto;transition:transform 0.4s}
.case-img:hover img{transform:scale(1.02)}
.screens-grid,.ub-screens-grid,.ps-screens-grid,.ba-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;align-items:start!important;margin-top:20px}
.screen-card,.ub-screen-card,.ps-screen-card,.ba-card{position:relative;border-radius:16px;overflow:hidden;cursor:zoom-in;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.03);transition:transform 0.3s,box-shadow 0.3s;display:block}
.screen-card:hover,.ub-screen-card:hover,.ps-screen-card:hover,.ba-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.screen-card img,.ub-screen-card img,.ps-screen-card img,.ba-card img{display:block;width:100%;height:auto}
.screen-card.full,.ub-screen-card.full,.ps-screen-card.full{grid-column:span 2!important}
.ps-products-grid,.ub-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}

/* Lightbox */
.img-modal{display:none;position:fixed;inset:0;z-index:99000;align-items:center;justify-content:center}
.img-modal.open{display:flex;animation:modalFadeIn 0.25s ease}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
.img-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.92);backdrop-filter:blur(12px);cursor:zoom-out}
.img-modal-card{position:relative;z-index:1;max-width:92vw;max-height:90vh;border-radius:12px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,0.8);animation:modalSlideUp 0.3s cubic-bezier(0.4,0,0.2,1)}
@keyframes modalSlideUp{from{transform:translateY(20px) scale(0.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.img-modal-card img{display:block;max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.img-modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);background:rgba(0,0,0,0.6);color:rgba(255,255,255,0.8);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background 0.2s,color 0.2s;line-height:1}
.img-modal-close:hover{background:rgba(255,255,255,0.15);color:#fff}

/* Case components */
.case-p{color:rgba(255,255,255,0.75);line-height:1.72}
.case-p+.case-p{margin-top:18px}
.case-sub{line-height:1.72;margin-bottom:0;color:rgba(255,255,255,0.72)}
.case-title{margin:14px 0 20px}
.case-h2{margin:0 0 14px}
.case-h2+.case-p,.case-h2+p{margin-top:12px}
.case-title+.case-sub,.case-title+.case-p{margin-top:20px}
.stat{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.11);border-radius:var(--r-lg);padding:18px;transition:transform .3s,box-shadow .3s}
.stat:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,0.4)}
.stat-t{font-size:13px;color:rgba(255,255,255,0.62);line-height:1.4}
.stat-n{margin-bottom:10px}
.case-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.11);border-radius:var(--r-lg);padding:20px;transition:transform .28s,border-color .28s}
.case-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.20)}
.case-card h3{font-size:16px;color:#fff;margin:0 0 10px}
.case-card p{font-size:14px;color:rgba(255,255,255,0.72);line-height:1.65;margin:0}
.pstep{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.11);border-radius:var(--r-lg);padding:18px;transition:transform .28s,border-color .28s}
.pstep:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.20)}
.ptitle{font-family:var(--font-serif);font-size:15px;color:#fff;margin-bottom:8px}
.pdesc{color:rgba(255,255,255,0.68);font-size:14px;line-height:1.58}
.learn-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.11);border-radius:var(--r-lg);padding:18px;transition:transform .28s,border-color .28s}
.learn-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.20)}
.learn-n{font-family:var(--font-serif);font-size:26px;color:rgba(255,255,255,0.22);margin-bottom:8px}
.learn-t{font-family:var(--font-sans);font-size:14px;font-weight:600;color:#fff;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.learn-p{font-size:13px;color:rgba(255,255,255,0.68);line-height:1.6}
.meta-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-lg);padding:12px 14px}
.meta-k{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-mono-sm);text-transform:uppercase;margin-bottom:0}
.meta-v{margin-top:5px;color:rgba(255,255,255,0.92);font-size:13px;display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.08);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,0.92)}
.btn-case{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.92);font-size:13px;font-weight:500;transition:all .25s;text-decoration:none}
.btn-case:hover{background:rgba(255,255,255,0.14);transform:translateY(-1px);color:#fff}
.btn-case.primary{background:linear-gradient(135deg,#c8a96e,#b8935a);border-color:transparent;color:#fff;font-weight:600}
.btn-case.primary:hover{filter:brightness(1.1)}

/* ── MUSIC BTN — УДАЛЁН ── */
/* music-btn и audio тег больше не используются */

/* ── CASE WRAP ── */
.case-wrap{max-width:1120px;margin:0 auto;padding:28px 24px 120px}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav{padding:0 20px!important;height:var(--navH)!important}
  .logo img{height:clamp(26px,calc(var(--navH) - 14px),38px)!important}
  .menu{display:none}.burger{display:flex}
  .gallery-hero{padding:calc(var(--navH) + 48px) 24px 40px}
  .gallery-count{display:none}
  .gallery-container{padding:20px 24px 60px}
  .projects-grid{grid-template-columns:1fr;gap:16px}
  .site-footer{padding:40px 24px 30px}
  .site-footer__inner{grid-template-columns:1fr;gap:36px}
  .site-footer__bottom{flex-direction:column;gap:8px;text-align:center}
  .case-footer__inner{grid-template-columns:1fr 1fr;gap:36px}
  .case-footer{padding:50px 24px 36px}
  .case-wrap{padding:20px 16px 80px}
}
@media(max-width:768px){
  .screens-grid,.ub-screens-grid,.ps-screens-grid,.ba-grid{grid-template-columns:1fr!important}
  .screen-card.full,.ub-screen-card.full,.ps-screen-card.full{grid-column:span 1!important}
  .case-gallery{grid-template-columns:repeat(6,1fr)}
  .g-col-12,.g-col-6,.g-col-4,.g-col-3,.g-col-7,.g-col-5{grid-column:span 6}
  .ps-products-grid,.ub-products-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav{padding:0 16px!important}
  .logo img{height:clamp(24px,calc(var(--navH) - 12px),34px)!important}
  .case-footer__inner{grid-template-columns:1fr;gap:28px}
  .case-footer__bottom{flex-direction:column;align-items:flex-start}
  .case-wrap{padding:20px 14px 60px}
}
@media(max-width:520px){
  .mobile-menu.open{justify-content:center}
  .mobile-menu-panel{width:100%;border-left:none}
}
@media(max-width:480px){.ps-products-grid,.ub-products-grid{grid-template-columns:1fr}}

/* ── iOS SAFE AREA ── */
@supports(padding-top:env(safe-area-inset-top)){
  .nav{
    padding-top:env(safe-area-inset-top)!important;
    height:calc(var(--navBaseH) + env(safe-area-inset-top))!important;
  }
}

/* ── SUBNAV COLORS PER PROJECT ── */
body.theme-clm   { --subnav-border:rgba(255,60,60,0.28);  --subnav-hover:rgba(255,60,60,0.18); }
body.theme-mschf { --subnav-border:rgba(255,215,0,0.28);  --subnav-hover:rgba(255,215,0,0.18); }
body.theme-unniebox { --subnav-border:rgba(11,109,255,0.28); --subnav-hover:rgba(11,109,255,0.18); }
body.theme-avion { --subnav-border:rgba(114,110,141,0.28); --subnav-hover:rgba(78,77,147,0.18); }

/* Убираем мигание при загрузке */
body:not(.fu-ready) .fu { transition: none !important; }

input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.45)!important}
input,textarea{border-bottom:1px solid rgba(255,255,255,0.25)!important}
.field label,label{color:rgba(255,255,255,0.72)!important}
.field:focus-within label{color:var(--accent)!important}

/* ── PILL NAV ── */
.pill-nav {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 24px;
  background: rgba(14,14,14,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  transition: background 0.3s, box-shadow 0.3s, top 0.3s;
}
.pill-nav.scrolled {
  background: rgba(10,10,10,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  top: 16px;
}
.pill-nav__logo {
  order: -1;
  display: flex;
  align-items: center;
  margin-right: 10px;
}


.pill-nav__logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0.9;
}


.pill-nav__links {
  order: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pill-nav__link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  padding: 12px 22px;
  min-height: 32px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.pill-nav__link:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
}
.pill-nav__link.active {
  background: rgba(255,255,255,0.10);
  color: #fff;
}

@media (max-width: 640px) {
  .pill-nav {
    top: 14px;
    padding: 8px 10px 8px 20px;
    gap: 6px;
  }
  .pill-nav__logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 8px;
    width: 26px;
    height: 26px;
  }

  .pill-nav__logo-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}
  .pill-nav__links {
    gap: 3px;
  }
  .pill-nav__link {
    font-size: 9.5px;
    padding: 7px 10px;
    min-height: 30px;
    letter-spacing: 0.10em;
  }
}

/* ── LOGO DRAW-ON ANIMATION (offset-path / signature style) ──
   Контур рисуется через stroke-dasharray/dashoffset.
   Перо (.pen) едет вдоль того же контура через CSS offset-path,
   создавая эффект "рисуется как подпись от руки".
   Анимация запускается классом .is-animating (ставится JS-ом
   из header.html). Если анимация уже была сыграна за эту сессию,
   JS ставит класс .is-done — лого сразу полностью нарисовано. */

.logo-draw{
  display:block;
  overflow:visible; /* перо может на миг выйти за пределы viewBox при толстом stroke-width */
}

.logo-draw .logo-path{
  fill:none;
  stroke:#fff;
  stroke-width:22px;
  stroke-miterlimit:10;
  /* stroke-dasharray/dashoffset выставляются в JS под реальную длину path */
}

.logo-draw .logo-dot{
  fill:#fff;
  stroke:#fff;
  stroke-miterlimit:10;
  opacity:0;
  transform-origin:18.5px 18.5px;
  transform:scale(0);
}

.logo-draw .pen{
  fill:#fff;
  opacity:0;
  offset-path:path("M45.65,18.5s134.84-.16,134.85,161.84c0,153.77-145.96,161.58-160.78,161.98-.56.02-.93-.57-.69-1.08,40.62-86.89,40.78-173.74.33-260.55-.3-.63.34-1.3.98-1.02,100.83,43.7,207.18,127.94,319.9,260,.53.62,1.79-.04,1.3-.7-79.53-105.27-84.04-212.57.97-320.64");
  offset-rotate:0deg;
  offset-distance:0%;
}

/* ── Запуск анимации (класс ставится JS-ом при первом проигрывании) ── */
.logo-draw.is-animating .logo-path{
  animation:logo-draw-line 2.1s cubic-bezier(.65,0,.35,1) forwards;
}
.logo-draw.is-animating .logo-dot{
  opacity:1;
  animation:logo-dot-in .45s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:1.95s;
}
.logo-draw.is-animating .pen{
  opacity:1;
  animation:logo-pen-move 2.1s cubic-bezier(.65,0,.35,1) forwards,
            logo-pen-fade .25s linear 1.95s forwards;
}

@keyframes logo-draw-line{
  to{ stroke-dashoffset:0; }
}
@keyframes logo-dot-in{
  from{ opacity:0; transform:scale(0); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes logo-pen-move{
  0%{ offset-distance:0%; }
  100%{ offset-distance:100%; }
}
@keyframes logo-pen-fade{
  to{ opacity:0; }
}

/* ── Финальное состояние (анимация уже была сыграна за сессию) ── */
.logo-draw.is-done .logo-path{ stroke-dashoffset:0; }
.logo-draw.is-done .logo-dot{ opacity:1; transform:scale(1); }
.logo-draw.is-done .pen{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .logo-draw .logo-path{ stroke-dashoffset:0 !important; animation:none !important; }
  .logo-draw .logo-dot{ opacity:1 !important; transform:scale(1) !important; animation:none !important; }
  .logo-draw .pen{ opacity:0 !important; animation:none !important; }
}

/* ── LOGO DRAW-ON ANIMATION (looping signature style) ──
   Цикл (6.5s, бесконечный):
     0%    → 32.3%   : контур рисуется (2.1s), перо едет вдоль пути
     32.3% → 93.8%    : лого стоит полностью нарисованным (4s)
     93.8% → 100%     : всё плавно гаснет (0.4s), затем цикл начинается снова
   Контур рисуется через stroke-dasharray/dashoffset.
   Перо (.pen) едет вдоль того же контура через CSS offset-path.
   Чистый CSS, без JS и sessionStorage — анимация идёт постоянно,
   на любой странице, при каждой подгрузке header. */

.logo-draw{
  display:block;
  overflow:visible; /* перо может на миг выйти за пределы viewBox при толстом stroke-width */
}

.logo-draw .logo-path{
  fill:none;
  stroke:#fff;
  stroke-width:22px;
  stroke-miterlimit:10;
  /* 1533 — точная длина контура лого (getTotalLength), посчитана заранее,
     поэтому JS не нужен вообще, чистый CSS-цикл */
  stroke-dasharray:1533;
  stroke-dashoffset:1533;
  animation:logo-cycle-path 6.5s cubic-bezier(.65,0,.35,1) infinite;
}

.logo-draw .logo-dot{
  fill:#fff;
  stroke:#fff;
  stroke-miterlimit:10;
  transform-origin:18.5px 18.5px;
  opacity:0;
  transform:scale(0);
  animation:logo-cycle-dot 6.5s cubic-bezier(.65,0,.35,1) infinite;
}

.logo-draw .pen{
  fill:#fff;
  opacity:0;
  offset-path:path("M45.65,18.5s134.84-.16,134.85,161.84c0,153.77-145.96,161.58-160.78,161.98-.56.02-.93-.57-.69-1.08,40.62-86.89,40.78-173.74.33-260.55-.3-.63.34-1.3.98-1.02,100.83,43.7,207.18,127.94,319.9,260,.53.62,1.79-.04,1.3-.7-79.53-105.27-84.04-212.57.97-320.64");
  offset-rotate:0deg;
  offset-distance:0%;
  animation:logo-cycle-pen 6.5s cubic-bezier(.65,0,.35,1) infinite;
}

/* ── Контур: рисуется 0–32.3%, держится до 93.8%, гаснет к 100% ── */
@keyframes logo-cycle-path{
  0%      { stroke-dashoffset:1533; opacity:1; }
  32.3%   { stroke-dashoffset:0;    opacity:1; }
  93.8%   { stroke-dashoffset:0;    opacity:1; }
  100%    { stroke-dashoffset:0;    opacity:0; }
}

/* ── Точка: появляется чуть раньше конца линии (нахлёст), держится, гаснет ── */
@keyframes logo-cycle-dot{
  0%      { opacity:0; transform:scale(0); }
  29%     { opacity:0; transform:scale(0); }
  33.8%   { opacity:1; transform:scale(1); }
  93.8%   { opacity:1; transform:scale(1); }
  100%    { opacity:0; transform:scale(1); }
}

/* ── Перо: едет вдоль пути 0–32.3%, затем прячется до конца цикла ── */
@keyframes logo-cycle-pen{
  0%      { offset-distance:0%;   opacity:1; }
  32.3%   { offset-distance:100%; opacity:1; }
  36%     { opacity:0; }
  100%    { opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .logo-draw .logo-path{ stroke-dashoffset:0 !important; opacity:1 !important; animation:none !important; }
  .logo-draw .logo-dot{ opacity:1 !important; transform:scale(1) !important; animation:none !important; }
  .logo-draw .pen{ opacity:0 !important; animation:none !important; }
}