:root{
  --bg:#0a0a0b; --surface:#141416; --surface2:#1b1b1e; --line:rgba(255,255,255,0.10);
  --fg:#f3f1ec; --muted:rgba(243,241,236,0.56); --faint:rgba(243,241,236,0.34);
  --accent:#d9fb4a; --ink:#0a0a0b;
  --disp:'Unbounded',sans-serif; --ui:'Onest',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--ink)}
input,textarea,button{font-family:inherit;color:inherit}
input:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input::placeholder,textarea::placeholder{color:var(--faint)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.25}}
@keyframes cOrbit{to{transform:rotate(360deg)}}
@keyframes cDrift{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
@keyframes cBreathe{0%,100%{opacity:.30}50%{opacity:.62}}
@media (prefers-reduced-motion: no-preference){
  [data-anim="orbit"]{transform-box:view-box;transform-origin:200px 150px;animation:cOrbit 34s linear infinite}
  [data-anim="drift"]{transform-box:view-box;transform-origin:center;animation:cDrift 11s ease-in-out infinite}
  [data-anim="breathe"]{animation:cBreathe 7s ease-in-out infinite}
}

/* ============ АДАПТИВ ============ */
[data-mmenu]{display:none}
@keyframes mIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
html[data-rm] *{animation:none!important}

@media (max-width:1024px){
  [data-root]{--pad:max(20px,env(safe-area-inset-left))}
}

/* --- ≤768: шапка, полноэкранное меню, крупный телефон и планшет --- */
@media (max-width:768px){
  [data-header]{padding:12px var(--pad)!important}
  [data-hnav],[data-hcta],[data-logo-meta]{display:none!important}
  [data-menu-btn]{display:flex!important}
  [data-mmenu]:target{display:flex}
  [data-noblur]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(10,10,11,0.7)!important}
  [data-about-grid],[data-contact-grid]{grid-template-columns:1fr!important}
  [data-portrait-wrap]{max-width:520px}
  [data-serv-grid]{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important}
  [data-work-head]{flex-direction:column;align-items:stretch!important}
  [data-filters]{flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scrollbar-width:none;-ms-overflow-style:none}
  [data-filters]::-webkit-scrollbar{display:none}
  [data-filters] > button{flex:0 0 auto;min-height:44px}
  [data-h2]{overflow-wrap:anywhere;text-wrap:balance}
  [data-soc-pills]{flex-wrap:wrap}
  [data-soc-pills] > a{min-height:44px}
}
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  [data-mmenu]:target [data-mi]{opacity:0;animation:mIn .5s cubic-bezier(.16,1,.3,1) both}
  [data-mnav] [data-mi]:nth-child(1){animation-delay:.05s}
  [data-mnav] [data-mi]:nth-child(2){animation-delay:.11s}
  [data-mnav] [data-mi]:nth-child(3){animation-delay:.17s}
  [data-mnav] [data-mi]:nth-child(4){animation-delay:.23s}
  [data-mnav] [data-mi]:nth-child(5){animation-delay:.29s}
  [data-mmenu]:target > [data-mi]{animation-delay:.36s}
  [data-mmenu]:target > [data-mi] ~ [data-mi]{animation-delay:.44s}
}

/* --- ≤480: телефон --- */
@media (max-width:480px){
  [data-sect]{padding-left:var(--pad)!important;padding-right:var(--pad)!important}

  [data-hero]{min-height:100vh!important;min-height:100svh!important;padding:0 var(--pad) calc(92px + env(safe-area-inset-bottom))!important}
  [data-hero-title]{font-size:min(14.5vw,96px)!important;letter-spacing:-0.04em!important;overflow-wrap:anywhere}
  [data-hero-sub]{font-size:15px!important;line-height:1.45!important;max-width:31ch!important;text-wrap:balance}
  [data-hero-row]{flex-direction:column;align-items:stretch!important;gap:20px!important}
  [data-hero-cta]{width:100%;justify-content:center;min-height:56px;font-size:16px!important;padding:16px 22px!important}
  [data-reel]{top:auto!important;left:var(--pad);right:var(--pad)!important;bottom:calc(18px + env(safe-area-inset-bottom));flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
  [data-scrollcue]{display:none!important}

  [data-marq]{animation-duration:13s!important}
  [data-marq-item]{font-size:22px!important;padding:0 14px!important;gap:14px!important}

  [data-works]{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);gap:12px!important;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  [data-works]::-webkit-scrollbar{display:none}
  [data-work-card]{flex:0 0 85%;scroll-snap-align:center}

  [data-serv-grid]{grid-template-columns:1fr!important;border-radius:16px!important}
  [data-serv-card]{min-height:0!important;display:grid!important;grid-template-columns:1fr auto;align-items:baseline;gap:12px 16px!important;padding:24px var(--pad)!important}
  [data-serv-foot]{display:contents!important}
  [data-serv-meta]{grid-area:1/1/2/3}
  [data-serv-title]{grid-area:2/1/3/2;font-size:23px!important}
  [data-serv-price]{grid-area:2/2/3/3;justify-self:end;font-size:14px!important;color:var(--accent)!important}
  [data-serv-desc]{grid-area:3/1/4/3;align-self:start}
  [data-serv-brief]{grid-area:4/1/5/3;align-self:start;padding-top:14px;border-top:1px solid var(--line);min-height:44px;display:flex;align-items:center}

  [data-about-grid]{gap:30px!important}
  [data-portrait]{border-radius:16px!important}
  [data-stats]{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:20px 12px!important;margin-bottom:30px!important}
  [data-stat-n]{font-size:38px!important}

  [data-blog-grid]{grid-template-columns:1fr!important}
  [data-blog-grid] > a{min-height:0!important}

  [data-contact-grid]{gap:36px!important}
  [data-form]{gap:20px!important;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  [data-form] input,[data-form] textarea{font-size:16px!important;padding:13px 0!important}
  [data-pills]{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  [data-pills] > button{min-height:48px;display:flex;align-items:center;justify-content:center;font-size:14px!important;padding:10px 12px!important;text-align:center}
  [data-submit]{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:6;min-height:56px;font-size:16px!important;box-shadow:0 12px 34px rgba(10,10,11,0.6)}

  [data-foot-top]{flex-direction:column;gap:34px!important}
  [data-foot-cols]{flex-direction:column;gap:26px!important}
  [data-foot-soc] > a{font-family:var(--disp)!important;font-weight:600!important;font-size:21px!important;color:var(--fg)!important;letter-spacing:-0.01em;min-height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
  [data-foot-soc] > a::after{content:"↗";font-family:var(--ui);font-size:15px;color:var(--faint)}
}

/* --- телефон в альбомной ориентации --- */
@media (max-width:900px) and (max-height:480px) and (orientation:landscape){
  [data-hero]{min-height:100vh!important;min-height:100svh!important;padding:70px var(--pad) 18px!important;justify-content:center!important}
  [data-hero-title]{font-size:min(10vh,54px)!important}
  [data-hero-sub]{display:none!important}
  [data-reel],[data-scrollcue]{display:none!important}
  [data-hero-row]{flex-direction:row!important;align-items:center!important;gap:16px!important;margin-top:18px!important}
  [data-hero-cta]{width:auto!important;min-height:48px}
}

/* --- 769–1024: планшет --- */
@media (min-width:769px) and (max-width:1024px){
  [data-works]{grid-template-columns:repeat(2,1fr)!important}
  [data-serv-grid]{grid-template-columns:repeat(2,1fr)!important}
}

/* --- сенсорные состояния вместо ховера --- */
@media (hover:none){
  [data-magnetic]:active{transform:scale(0.97)!important}
  [data-work-card]:active [data-work-media]{border-color:var(--accent)!important}
  [data-pill]:active,[data-filters] > button:active{border-color:var(--accent)!important}
  [data-foot-soc] > a:active,[data-mi]:active{color:var(--accent)!important}
}