/* ── CSS Variables (design tokens) ── */
:root {
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;
  --card: 217 33% 17%;
  --card-foreground: 210 40% 98%;
  --primary: 263 70% 66%;
  --primary-foreground: 210 40% 98%;
  --secondary: 199 89% 60%;
  --secondary-foreground: 222 47% 11%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --border: 215 25% 27%;
  --radius: 0.75rem;
  --surface: 217 33% 17%;
  --surface-hover: 215 25% 22%;
}
html.light {
  --background: 220 20% 97%;
  --foreground: 220 25% 12%;
  --card: 0 0% 100%;
  --card-foreground: 220 25% 12%;
  --primary: 263 72% 58%;
  --primary-foreground: 210 40% 98%;
  --secondary: 199 89% 44%;
  --secondary-foreground: 210 40% 98%;
  --muted: 220 18% 94%;
  --muted-foreground: 218 14% 48%;
  --border: 220 15% 88%;
  --surface: 220 18% 96%;
  --surface-hover: 220 18% 90%;
}
html.light body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
html.light .glass-nav { background: hsl(220 20% 97% / 0.88); }
html.light .card-surface { background: hsl(0 0% 100%); border-color: hsl(220 15% 88%); }
html.light .card-surface-hover:hover { background: hsl(220 18% 96%); border-color: hsl(263 72% 58% / 0.3); }
html.light .phone-mockup { background: linear-gradient(145deg, hsl(220 18% 96%), hsl(220 18% 92%)); border-color: hsl(220 15% 85%); }
html.light .hero-glow { opacity: 0.08; }
html.light .mobile-menu { background: hsl(220 20% 97%); }
html.light footer { background: hsl(220 25% 12%); }
/* ── Theme Toggle Button ── */
@keyframes themeSpin { 0%{transform:scale(1) rotate(0)} 30%{transform:scale(.8) rotate(-15deg);opacity:.5} 70%{transform:scale(1.1) rotate(8deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground)); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.theme-toggle-btn:hover { background: hsl(var(--surface-hover)); color: hsl(var(--foreground)); }
.theme-toggle-btn.animating { animation: themeSpin .36s ease; }
.theme-toggle-btn .ico-moon { position:absolute; transition: opacity .22s, transform .28s; opacity:1; transform:rotate(0) scale(1); }
.theme-toggle-btn .ico-sun  { position:absolute; transition: opacity .22s, transform .28s; opacity:0; transform:rotate(-90deg) scale(.6); }
html.light .theme-toggle-btn .ico-moon { opacity:0; transform:rotate(90deg) scale(.6); }
html.light .theme-toggle-btn .ico-sun  { opacity:1; transform:rotate(0) scale(1); }
/* ── Reset ── */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: hsl(var(--border)); margin: 0; padding: 0; }
html { line-height: 1.5; font-family: 'Inter', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: inherit; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; }
button { cursor: pointer; background-color: transparent; background-image: none; }
ol, ul, menu { list-style: none; }
/* ── Utility classes ── */
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
@media (min-width: 1400px) { .container { max-width: 1400px; } }
/* ── Custom components ── */
.gradient-text {
  background-image: linear-gradient(135deg, hsl(263 70% 66%), hsl(199 89% 60%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-btn {
  background-image: linear-gradient(135deg, hsl(263 70% 66%), hsl(250 70% 56%));
}
.gradient-btn:hover {
  background-image: linear-gradient(135deg, hsl(263 70% 72%), hsl(250 70% 62%));
}
.glass-nav {
  background: hsl(222 47% 11% / 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.card-surface {
  background: hsl(217 33% 17%);
  border: 1px solid hsl(215 25% 27%);
}
.card-surface-hover:hover {
  background: hsl(215 25% 22%);
  border-color: hsl(263 70% 66% / 0.3);
}
.phone-mockup {
  background: linear-gradient(145deg, hsl(217 33% 20%), hsl(217 33% 14%));
  border: 1px solid hsl(215 25% 30%);
}
/* ── Animations ── */
@keyframes pulse { 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.fade-in-up { animation: fadeInUp 0.5s ease forwards; }
.fade-in-right { animation: fadeInRight 0.6s 0.2s ease forwards; opacity: 0; }
.fade-in-up-delay { animation: fadeInUp 0.5s 0.4s ease forwards; opacity: 0; }
@keyframes accordionDown { from { height: 0; } to { height: var(--content-height); } }
@keyframes accordionUp { from { height: var(--content-height); } to { height: 0; } }
/* ── Navbar ── */
nav.main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid hsl(var(--border));
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem; padding: 0 1rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.5rem; }
.nav-logo-icon {
  width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
}
.nav-logo-text { font-size: 1.125rem; font-weight: 700; color: hsl(var(--foreground)); }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-link { font-size: 0.875rem; color: hsl(var(--muted-foreground)); transition: color 0.15s; }
.nav-link:hover { color: hsl(var(--foreground)); }
.nav-actions { display: none; align-items: center; gap: 0.75rem; }
.btn-ghost { font-size: 0.875rem; color: hsl(var(--muted-foreground)); padding: 0.375rem 0.75rem; border-radius: var(--radius); transition: color 0.15s, background 0.15s; }
.btn-ghost:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.btn-primary {
  font-size: 0.875rem; font-weight: 600; color: hsl(var(--primary-foreground));
  padding: 0.375rem 0.875rem; border-radius: var(--radius); border: none;
}
.btn-lg {
  font-size: 1rem; font-weight: 600; padding: 0.75rem 2rem;
  border-radius: var(--radius); border: none; display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer; transition: opacity 0.15s;
}
.btn-lg:hover { opacity: 0.92; }
.btn-outline {
  background: transparent; border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground)); font-size: 1rem; font-weight: 600;
  padding: 0.75rem 2rem; border-radius: var(--radius);
  cursor: pointer; transition: background 0.15s;
}
.btn-outline:hover { background: hsl(var(--surface-hover)); }
.btn-outline-large {
  font-size: 1rem; font-weight: 700; padding: 0.875rem 2.5rem;
  border-radius: var(--radius); color: hsl(var(--primary-foreground)); border: none;
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
}
.hamburger { display: block; background: none; border: none; color: hsl(var(--muted-foreground)); cursor: pointer; }
.mob-right-btns { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-actions { display: flex; }
  .hamburger { display: none; }
  .mob-right-btns { display: none; }
}
/* Mobile menu */
.mobile-menu {
  display: none; border-top: 1px solid hsl(var(--border));
  background: hsl(var(--background)); padding: 1rem;
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; font-size: 0.875rem; color: hsl(var(--muted-foreground)); padding: 0.5rem 0; }
.mobile-menu a:hover { color: hsl(var(--foreground)); }
.mobile-menu-actions { display: flex; gap: 0.75rem; padding-top: 0.5rem; }
.mobile-menu-actions button { flex: 1; }
/* ── Hero ── */
.hero { position: relative; padding-top: 8rem; padding-bottom: 5rem; overflow: hidden; }
.hero-glow {
  position: absolute; top: 5rem; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; border-radius: 9999px; opacity: 0.2;
  blur: 120px; filter: blur(120px);
  background: hsl(263 70% 50%); pointer-events: none;
}
.hero-grid { display: grid; gap: 3rem; align-items: center; position: relative; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; } }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 9999px; margin-bottom: 1.5rem;
}
.hero-badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #4ade80; }
.hero-badge-text { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.hero-badge-stars { font-size: 0.875rem; color: #facc15; }
.hero-title { font-size: 2.5rem; font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 3.75rem; } }
.hero-desc { font-size: 1.125rem; color: hsl(var(--muted-foreground)); margin-bottom: 2rem; max-width: 32rem; line-height: 1.625; }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 2rem; }
.feature-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; }
.feature-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: hsl(263 70% 66% / 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-icon svg { color: hsl(var(--primary)); }
.feature-title { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); }
.feature-desc { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.hero-trust-item { display: flex; align-items: center; gap: 0.375rem; }
.trust-check { color: #4ade80; }
/* Phone mockup */
.phone-wrap { position: relative; display: none; justify-content: center; }
@media (min-width: 1024px) { .phone-wrap { display: flex; } }
.phone-body { border-radius: 2.5rem; width: 300px; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.phone-time { text-align: center; font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.phone-content { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0; }
.phone-icon-wrap { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: hsl(263 70% 66% / 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.phone-icon-wrap svg { color: hsl(var(--primary)); width: 1.75rem; height: 1.75rem; }
.phone-title { font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.25rem; }
.phone-number { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }
.phone-code-box { width: 100%; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.phone-code-label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
.phone-code { font-size: 1.875rem; font-weight: 700; color: hsl(var(--secondary)); letter-spacing: 0.1em; }
.phone-code-valid { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; }
.phone-success { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #4ade80; }
.phone-badge {
  position: absolute; border-radius: 0.75rem; padding: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
}
.phone-badge-top { top: -1rem; right: -2rem; }
.phone-badge-bottom { bottom: -1rem; left: -2rem; }
.phone-badge-inner { display: flex; align-items: center; gap: 0.5rem; }
.phone-badge-text { font-size: 0.75rem; font-weight: 600; color: hsl(var(--foreground)); }
.phone-badge-value { font-size: 0.875rem; font-weight: 700; }
.green { color: #4ade80; }
.blue { color: hsl(var(--secondary)); }
/* Stats bar */
.stats-bar { margin-top: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 768px) { .stats-bar { grid-template-columns: repeat(4, 1fr); } }
.stat-card { border-radius: 1rem; padding: 1.5rem; text-align: center; }
.stat-value { font-size: 1.5rem; font-weight: 700; }
@media (min-width: 768px) { .stat-value { font-size: 1.875rem; } }
.stat-label { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }
/* ── Section shared ── */
section { padding: 6rem 0; }
.section-tag { font-size: 0.875rem; font-weight: 600; color: hsl(var(--primary)); margin-bottom: 0.5rem; }
.section-title { font-size: 1.875rem; font-weight: 700; color: hsl(var(--foreground)); }
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
.section-desc { color: hsl(var(--muted-foreground)); margin-top: 1rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.section-header { text-align: center; margin-bottom: 4rem; }
/* ── How It Works ── */
.steps-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } }
.step-card { border-radius: 1rem; padding: 1.5rem; transition: all 0.15s; }
.step-num { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; color: hsl(var(--primary-foreground)); margin-bottom: 1.25rem; }
.step-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background: hsl(263 70% 66% / 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.step-icon svg { color: hsl(var(--primary)); width: 1.5rem; height: 1.5rem; }
.step-title { font-size: 1.125rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.5rem; }
.step-desc { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.625; }
/* ── Security ── */
.security-section { position: relative; }
.security-bg { position: absolute; inset: 0; opacity: 0.05; background: radial-gradient(circle at 30% 50%, hsl(263 70% 50%), transparent 60%); pointer-events: none; }
.security-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .security-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .security-grid { grid-template-columns: repeat(3, 1fr); } }
.security-card { border-radius: 1rem; padding: 1.5rem; transition: all 0.15s; }
.security-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background: hsl(263 70% 66% / 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.security-icon svg { color: hsl(var(--primary)); width: 1.5rem; height: 1.5rem; }
.security-title { font-size: 1.125rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.5rem; }
.security-desc { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.625; }
.security-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 3rem; }
.security-badge { border-radius: 0.75rem; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.security-badge svg { color: #4ade80; }
.security-badge-label { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); }
.security-badge-sub { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
/* ── Testimonials ── */
.testimonials-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { border-radius: 1rem; padding: 1.5rem; }
.stars { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.stars svg { width: 1rem; height: 1rem; fill: #facc15; color: #facc15; }
.testimonial-text { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.625; margin-bottom: 1.5rem; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.author-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; color: hsl(var(--primary-foreground)); }
.author-name { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); }
.author-role { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.rating-summary { text-align: center; margin-top: 3rem; }
.rating-badge { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding: 0.75rem 1.5rem; }
.rating-badge .stars { margin: 0; }
.rating-num { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); }
.rating-count { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
/* ── FAQ ── */
.faq-section .container { max-width: 48rem; }
.accordion { display: flex; flex-direction: column; gap: 0.75rem; }
.accordion-item { border-radius: 0.75rem; border: 0; overflow: hidden; }
.accordion-trigger {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; font-size: 0.875rem; font-weight: 600;
  color: hsl(var(--foreground)); text-align: left; gap: 1rem;
}
.accordion-trigger:hover { color: hsl(var(--foreground)); }
.accordion-chevron { width: 1rem; height: 1rem; flex-shrink: 0; color: hsl(var(--muted-foreground)); transition: transform 0.2s; }
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }
.accordion-content {
  overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out, padding 0.2s;
  font-size: 0.875rem; color: hsl(var(--muted-foreground)); padding: 0 1.5rem;
}
.accordion-item.open .accordion-content { max-height: 200px; padding: 0 1.5rem 1.25rem; }
.faq-footer { text-align: center; font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 2.5rem; }
.faq-footer a { color: hsl(var(--secondary)); }
.faq-footer a:hover { text-decoration: underline; }
/* ── CTA ── */
.cta-box {
  border-radius: 1.5rem; overflow: hidden; padding: 3rem; text-align: center; position: relative;
  background: linear-gradient(135deg, hsl(263 70% 30%), hsl(222 47% 15%));
}
@media (min-width: 768px) { .cta-box { padding: 4rem; } }
.cta-glow { position: absolute; inset: 0; opacity: 0.1; background: radial-gradient(circle at 50% 0%, hsl(263 70% 60%), transparent 60%); pointer-events: none; }
.cta-inner { position: relative; }
.cta-tag { font-size: 0.875rem; font-weight: 600; color: hsl(var(--primary)); margin-bottom: 0.75rem; }
.cta-title { font-size: 1.875rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 1rem; }
@media (min-width: 768px) { .cta-title { font-size: 2.25rem; } }
.cta-desc { color: hsl(var(--muted-foreground)); max-width: 32rem; margin: 0 auto 2rem; }
.cta-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
.cta-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.cta-check svg { color: #4ade80; width: 1rem; height: 1rem; }
.cta-fine { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
/* ── Footer ── */
footer { border-top: 1px solid hsl(var(--border)); padding: 3rem 0; }
.footer-grid { display: grid; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.footer-logo { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.footer-logo-icon { width: 2rem; height: 2rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
.footer-logo-text { font-weight: 700; color: hsl(var(--foreground)); }
.footer-tagline { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.625; }
.footer-col-title { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a { font-size: 0.875rem; color: hsl(var(--muted-foreground)); transition: color 0.15s; }
.footer-col a:hover { color: hsl(var(--foreground)); }
.footer-bottom { border-top: 1px solid hsl(var(--border)); padding-top: 2rem; text-align: center; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
/* ── Scroll animation ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* SVG icon helpers */
svg { display: inline-block; }

/* ═══════════════════════════════ TOAST */
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;
  display:flex;align-items:center;gap:.75rem;
  padding:.875rem 1.25rem;border-radius:1rem;
  background:hsl(220 32% 18%);border:1px solid hsl(218 22% 30%);
  box-shadow:0 12px 36px hsl(220 40% 3% / .55),0 0 0 1px hsl(263 72% 68% / .06);
  font-size:.9rem;font-weight:500;max-width:22rem;color:#e2e8f0;
  animation:toastIn .28s cubic-bezier(.34,1.2,.64,1);
}
.toast.hidden{display:none;}
.toast.out{animation:toastIn .25s ease reverse forwards;}
.t-ico{width:2rem;height:2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toast.success .t-ico{background:hsl(152 60% 40% / .18);color:#4ade80;}
.toast.error   .t-ico{background:hsl(0 84% 60% / .14);color:#f87171;}
.toast.info    .t-ico{background:hsl(263 72% 68% / .14);color:#a78bfa;}
html.light .toast{background:#fff;border-color:hsl(220 15% 86%);color:#1e293b;}