/* iflost.pet — design system (из tokens.json + PAGES.md). Тёмная тема, единственный акцент amber. */
:root{
  --ink:#0B0B0D; --surface:#141518; --surface2:#0F1013;
  --border:#26272C; --border2:#33343A;
  --text:#E7EAEF; --muted:#9AA0AA; --faint:#63676F;
  --amber:#F5B841; --amber-hi:#FFCE74; --safe:#3DDC84;
  --silver-hi:#FDFDFE; --silver-mid:#C3C8D0; --silver-lo:#8B909A; --engrave:#191A1D;
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:24px; --r-pill:999px; --r-phone:34px;
  --pad:24px; --pad-m:16px;
  --ui:'Noto Sans Georgian','Noto Sans','Helvetica Neue',Arial,sans-serif;
  --display:'Noto Serif Georgian','Noto Serif',Georgia,serif;
  --shadow-card:0 24px 50px rgba(0,0,0,.55);
  --shadow-float:0 24px 40px rgba(0,0,0,.6);
  --container:1200px; --container-app:1280px;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--text); font-family:var(--ui);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; min-height:100vh; text-wrap:pretty;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--ink)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.06}
p{margin:0}
.serif{font-family:var(--display)}
.muted{color:var(--muted)} .faint{color:var(--faint)}

/* layout */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.container-app{max-width:var(--container-app);margin:0 auto;padding:0 var(--pad)}
.section{padding:72px 0}
.stack{display:flex;flex-direction:column}
@media(max-width:640px){ .container,.container-app{padding:0 var(--pad-m)} .section{padding:48px 0} }

/* icon: currentColor через mask — красится через color: */
.ic{display:inline-block;width:24px;height:24px;flex:none;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat}
.ic.paw-fill{--i:url(/assets/svg/icons/paw.svg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ui);font-weight:700;font-size:16px;cursor:pointer;border:none;
  border-radius:var(--r-pill);padding:14px 28px;min-height:44px;transition:.15s;text-align:center}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--amber-hi);color:var(--ink)}
.btn-outline{background:transparent;border:1px solid var(--border2);color:var(--text)}
.btn-outline:hover{background:var(--surface);border-color:var(--silver-lo)}
.btn-block{width:100%}
.btn .ic{width:20px;height:20px}

/* cards, chips, inputs */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.inset{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r-pill);font-size:13px;color:var(--muted)}
.chip-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--safe)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700}
.badge-safe{background:rgba(61,220,132,.14);color:var(--safe)}
.badge-lost{background:rgba(245,184,65,.12);color:var(--amber)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.label{color:var(--muted);font-size:13px}
.input{background:var(--surface);border:1px solid var(--border);border-radius:14px;color:var(--text);
  font:inherit;font-size:15px;padding:13px 15px;min-height:44px;width:100%}
.input:focus{outline:none;border-color:var(--amber)}
.input::placeholder{color:var(--faint)}
.dropzone{border:1.5px dashed var(--border2);border-radius:var(--r-xl);background:var(--surface2);
  padding:34px 20px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.progress{height:8px;background:var(--border);border-radius:var(--r-pill);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--amber);border-radius:var(--r-pill)}

/* nav */
.nav{display:flex;align-items:center;gap:26px;height:100px}
.nav .logo{height:77px;width:auto}
@media(max-width:640px){ .nav{height:76px} .nav .logo{height:58px} }
.nav .spacer{margin-left:auto}
.nav a.navlink{color:#c8ccd3;font-size:15px}
.nav a.navlink:hover{color:var(--text)}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.burger{display:none;background:transparent;border:1px solid var(--border);border-radius:12px;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--text);margin-left:auto}

/* language selector — флаг-дропдаун справа */
.lang-sel{position:relative;display:inline-flex;margin-left:14px}
.lang-fixed{position:fixed;top:14px;right:16px;z-index:60;margin:0}
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:6px 10px;min-height:40px;cursor:pointer;color:var(--muted);transition:.15s}
.lang-btn:hover{border-color:var(--border2)}
.lang-btn .chev{color:var(--faint);transition:transform .15s}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-sel .flag{width:24px;height:16px;border-radius:3px;overflow:hidden;display:inline-block;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.lang-sel .flag svg{width:100%;height:100%;display:block}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:158px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:6px;display:none;z-index:60;box-shadow:var(--shadow-card)}
.lang-menu.open{display:block}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;
  color:var(--text);padding:9px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:14px;text-align:left}
.lang-menu button:hover{background:var(--surface2)}
.lang-menu button[aria-current="true"]{color:var(--amber)}
.lang-menu button[aria-current="true"] span:last-child{font-weight:700}
@media(max-width:900px){
  .nav-links{display:none} .burger{display:inline-flex}
  .nav-links.open{display:flex;position:absolute;top:64px;left:16px;right:16px;flex-direction:column;
    align-items:stretch;gap:12px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:16px;z-index:40;box-shadow:var(--shadow-card)}
}

/* language switcher (инжектится i18n.js) */
.langbar{position:sticky;top:0;z-index:50;display:flex;justify-content:center;padding:12px 0;
  background:linear-gradient(var(--ink),rgba(11,11,13,.9) 70%,transparent);pointer-events:none}
.langbar .pills{display:flex;gap:6px;padding:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);pointer-events:auto}
.langbar button{all:unset;cursor:pointer;font-weight:700;font-size:14px;color:var(--muted);
  padding:8px 16px;border-radius:var(--r-pill);border:1px solid transparent;line-height:1}
.langbar button[aria-pressed="true"]{border-color:var(--amber);background:rgba(245,184,65,.16);color:var(--amber)}

/* footer */
.footer{margin-top:0;padding:28px 0;border-top:1px solid #1e1f24;display:flex;align-items:center;gap:14px;
  color:var(--faint);font-size:13px;flex-wrap:wrap}
.footer img{height:46px}

/* animations */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bar{0%{width:8%}70%{width:82%}100%{width:96%}}
@keyframes spinp{to{transform:rotate(360deg)}}
.floaty{animation:floaty 6s ease-in-out infinite}
.glow{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(245,184,65,.18),transparent 70%);z-index:0}

/* progressive reveal — виден без JS */
.reveal{opacity:1}
html.js .reveal{opacity:0;transform:translateY(12px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media(prefers-reduced-motion:reduce){
  .floaty{animation:none}
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* mobile bottom tab bar (app) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:var(--surface);border-top:1px solid var(--border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));justify-content:space-around}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:11px;min-width:44px}
.tabbar a .ic{width:22px;height:22px}
.tabbar a.active{color:var(--amber)}
@media(max-width:640px){ .tabbar{display:flex} }

/* ambient background — контурные животные дрейфуют + лапки на скролле. Очень деликатно. */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.amb-a{position:absolute;background:rgba(231,234,239,.045);
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform}
@keyframes drift1{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(26px,-20px) rotate(3deg)}}
@keyframes drift2{0%,100%{transform:translate(0,0) rotate(3deg)}50%{transform:translate(-24px,18px) rotate(-3deg)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,24px)}}
.amb-paw{position:absolute;width:34px;height:34px;background:rgba(231,234,239,.05);
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
  opacity:0;transform:scale(.7) rotate(12deg);transition:opacity 1s ease,transform 1s ease}
.amb-paw.go{opacity:1;transform:scale(1) rotate(12deg)}
.amb-paw.amber{background:rgba(245,184,65,.07)}
@media(prefers-reduced-motion:reduce){ .amb-a{animation:none} .amb-paw{display:none} }