* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Manrope', system-ui, sans-serif; background: #fbfbf9; color: #12141a; -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in srgb, var(--accent, #2b54d4) 22%, #fff); }
input, textarea, select, button { font-family: inherit; }
a { color: inherit; text-decoration: none; transition: color .18s ease, opacity .18s ease; cursor: pointer; }
button { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background-color .2s ease, filter .2s ease, opacity .2s ease; }
button:hover { filter: brightness(1.04); }
button:active { transform: translateY(1px) scale(0.995); }
input, textarea, select { transition: border-color .18s ease, box-shadow .18s ease; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent, #2b54d4) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2b54d4) 14%, transparent); }

[data-lift] { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .2s ease; }
[data-lift]:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(18,20,26,0.30); }

/* Header nav + profile dropdown */
.nav-link { transition: color .15s ease; }
.nav-link:hover { color: var(--ink); }
.menu-item { transition: background-color .15s ease; }
.menu-item:hover { background: var(--bg); }
.file-drop { transition: border-color .15s ease, background-color .15s ease; }
.file-drop:hover { border-color: var(--accent); background: #fff; }

/* Telegram login button */
.tg-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%);
  box-shadow: 0 10px 24px -10px rgba(34,158,217,0.65), inset 0 1px 0 rgba(255,255,255,0.18);
  letter-spacing: 0.01em;
}
.tg-btn svg { flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12)); }
.tg-btn:hover { filter: none; box-shadow: 0 16px 30px -12px rgba(34,158,217,0.75), inset 0 1px 0 rgba(255,255,255,0.25); transform: translateY(-1px); }
.tg-btn:active { transform: translateY(1px) scale(0.995); }
.tg-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: 0 8px 18px -10px rgba(34,158,217,0.5); }

[data-reveal] { transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].reveal-armed { opacity: 0; transform: translateY(22px); }

[data-reveal] [data-stagger] { transition: transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].reveal-armed [data-stagger] { transform: translateY(20px); }
[data-reveal] [data-stagger]:nth-child(1) { transition-delay: .04s; }
[data-reveal] [data-stagger]:nth-child(2) { transition-delay: .12s; }
[data-reveal] [data-stagger]:nth-child(3) { transition-delay: .20s; }
[data-reveal] [data-stagger]:nth-child(4) { transition-delay: .28s; }

@keyframes viewIn { from { transform: translateY(14px); } to { transform: none; } }
.view-in { animation: viewIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes heroUp { from { transform: translateY(20px); } to { transform: none; } }
.hero-up { animation: heroUp .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.floaty { animation: floaty 4.5s ease-in-out infinite; }
@keyframes floaty2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.floaty2 { animation: floaty2 5.5s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.pulse-dot { animation: pulseDot 1.8s ease-in-out infinite; }