.brand-intro { display: none; }
html.intro-ready { overflow: hidden; }
html.intro-ready .brand-intro {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 28px; background: #FFF6CC; color: #0F172A;
  background-image: linear-gradient(rgb(138 187 230 / .22) 1px, transparent 1px),linear-gradient(90deg,rgb(138 187 230 / .22) 1px,transparent 1px);
  background-size: 28px 28px;
  transition: opacity 250ms ease-out, visibility 250ms;
}
.brand-intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.brand-intro__logo { width: min(340px, 76vw); height: auto; animation: brand-welcome 950ms cubic-bezier(.22,.7,.3,1) both; }
.brand-intro__message { margin: 0; font: 800 clamp(18px, 4vw, 24px)/1.4 'Nunito',sans-serif; text-align: center; animation: brand-message 650ms 400ms both; }
.brand-intro__dots { display: flex; gap: 10px; }
.brand-intro__dots span { width: 10px; height: 10px; border-radius: 50%; background: #2DD4BF; animation: brand-dot 900ms ease-in-out infinite alternate; }
.brand-intro__dots span:nth-child(2) { background: #8ABBE6; animation-delay: 180ms; }
.brand-intro__dots span:nth-child(3) { background: #FFAD84; animation-delay: 360ms; }
.brand-intro__skip { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); min-height: 44px; padding: 10px 18px; border: 1px solid #0F172A; border-radius: 14px; background: #FFFDF5; color: #0F172A; font: 600 14px 'Inter',sans-serif; cursor: pointer; }
@keyframes brand-welcome { 0% { opacity: 0; transform: translateY(18px) scale(.86) rotate(-4deg); } 55% { opacity: 1; transform: translateY(-4px) scale(1.04) rotate(1deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes brand-message { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes brand-dot { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@media(prefers-reduced-motion: reduce) { .brand-intro *, html.intro-ready .brand-intro { animation: none !important; transition: none !important; } }