:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11, 154, 109, .35); }
  50% { box-shadow: 0 0 0 6px rgba(11, 154, 109, 0); }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(30px, -22px, 0) scale(1.06); }
}
@keyframes console-drift {
  0%, 100% { transform: rotate(-1.2deg) translateY(0); }
  50% { transform: rotate(-.35deg) translateY(-8px); }
}
@keyframes console-enter {
  from { opacity: 0; transform: translateY(34px) rotate(-4deg) scale(.97); }
  to { opacity: 1; transform: translateY(0) rotate(-1.2deg) scale(1); }
}
@keyframes panel-glow {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes badge-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.04); }
}
@keyframes page-item { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* hero entrance */
.hero-copy > * { animation: hero-in .75s var(--ease-out) both; }
.hero-copy > *:nth-child(1) { animation-delay: .04s; }
.hero-copy > *:nth-child(2) { animation-delay: .1s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .22s; }
.hero-copy > *:nth-child(5) { animation-delay: .28s; }
.hero-panel { animation: hero-in .9s var(--ease-out) .12s both; }
.console-card {
  animation: console-enter .9s var(--ease-out) both,
             console-drift 8s ease-in-out 1.1s infinite;
  transition: box-shadow .4s;
}
.console-card:hover {
  box-shadow: 0 44px 110px -40px rgba(17, 43, 89, .5), inset 0 2px 0 rgba(255, 255, 255, .9);
}
.panel-glow { animation: panel-glow 7s ease-in-out infinite; }
.live-tag i, .console-foot i.ok, .region-chip i { animation: pulse-dot 2.4s ease-in-out infinite; }
.hero-bg::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -120px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 94, 239, .12), transparent 66%);
  filter: blur(30px);
  animation: drift 16s ease-in-out infinite;
  pointer-events: none;
}
.hero-bg::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -160px;
  bottom: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 164, .1), transparent 66%);
  filter: blur(34px);
  animation: drift 20s ease-in-out -7s infinite reverse;
  pointer-events: none;
}

/* nav + buttons */
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--blue); border-radius: 2px; transform: scaleX(0);
  transform-origin: left; transition: transform .25s var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }
.primary { position: relative; overflow: hidden; }
.primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-160%) skewX(-18deg); transition: transform .65s ease;
  pointer-events: none;
}
.primary:hover::before { transform: translateX(340%) skewX(-18deg); }
.primary:active { transform: translateY(0) scale(.985); }
.copy { transition: color .18s, background .18s, border-color .18s, transform .12s; }
.copy:active { transform: scale(.94); }
.copy.copied { color: var(--ok); background: #eafaf4; border-color: #bfe9d8; }
.icon-button { transition: transform .2s var(--ease-out), color .16s, border-color .16s, background .16s; }
.icon-button:hover { transform: translateY(-1px); }
.site-header { transition: box-shadow .3s, background .3s; }
.site-header.scrolled { box-shadow: 0 10px 30px -24px rgba(17, 43, 89, .35); background: rgba(255,255,255,.96); }
.mobile-nav { transition: opacity .2s; }

/* cards: lift + pointer spotlight */
.product-card, .plan-card, .stat-card, .usecase, .step, .card, .current-plan {
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.product-card { overflow: hidden; }
.plan-card { overflow: visible; }
.product-card::before, .plan-card::before, .stat-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(21,94,239,.075), transparent 62%);
  opacity: 0; transition: opacity .3s;
}
.product-card:hover::before, .plan-card:hover::before, .stat-card:hover::before { opacity: 1; }
.stat-card { position: relative; overflow: hidden; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -34px rgba(17,43,89,.4); }
.plan-card:hover { transform: translateY(-6px) scale(1.005); box-shadow: 0 30px 64px -36px rgba(17,43,89,.42); }
.plan-card.popular:hover { box-shadow: 0 34px 70px -34px rgba(21,94,239,.5); }
.stat-card:hover { transform: translateY(-3px); border-color: #d3e1f5; }
.usecase:hover, .step:hover { transform: translateY(-3px); border-color: #d3e1f5; box-shadow: 0 18px 42px -32px rgba(17,43,89,.35); }
.plan-badge { animation: badge-pulse 3s ease-in-out infinite; }
.product-icon, .float-icon { transition: transform .3s var(--ease-spring); }
.product-card:hover .product-icon { transform: rotate(-7deg) scale(1.08); }

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.region-chip { animation: chip-in .5s var(--ease-out) both; }
.faq-list details { transition: background .2s; }
.faq-list details[open] { background: rgba(246,249,253,.5); border-radius: 10px; }
.faq-list details[open] p { animation: fade-in .3s ease both; }
.faq-list summary::after { transition: transform .25s var(--ease-out), color .2s; }
.faq-list details[open] summary::after { transform: rotate(180deg); color: var(--blue); }

/* loading shimmer */
.loading-card, .loading-chip { position: relative; overflow: hidden; }
.loading-card::after, .loading-chip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(21,94,239,.06) 50%, transparent 80%);
  animation: shimmer 1.4s infinite;
}

/* dashboard page/stagger transitions */
.app-page:not(.hidden) > * { animation: page-item .55s var(--ease-out) backwards; }
.app-page:not(.hidden) > *:nth-child(1) { animation-delay: .02s; }
.app-page:not(.hidden) > *:nth-child(2) { animation-delay: .07s; }
.app-page:not(.hidden) > *:nth-child(3) { animation-delay: .12s; }
.app-page:not(.hidden) > *:nth-child(4) { animation-delay: .17s; }
.app-page:not(.hidden) > *:nth-child(5) { animation-delay: .22s; }
.app-page:not(.hidden) > *:nth-child(6) { animation-delay: .27s; }
.side-nav button { position: relative; transition: background .2s, color .2s, border-color .2s; }
.side-nav button::before {
  content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 2px;
  border-radius: 2px; background: var(--blue); transform: scaleY(0);
  transition: transform .22s var(--ease-out);
}
.side-nav button.active::before { transform: scaleY(1); }
.side-nav button .nav-ico { transition: transform .25s var(--ease-spring), color .2s; }
.side-nav button:hover .nav-ico { transform: translateX(2px) scale(1.08); }
.side-nav button.active .nav-ico { transform: scale(1.06); }
.range-tabs button { transition: background .2s, color .2s, box-shadow .2s; }
.range-tabs button:hover { color: var(--blue); }
table tbody tr { transition: background .18s; }
table tbody tr:hover { background: #f8fbff; }
.app-top { transition: box-shadow .25s; }
.app-top.scrolled { box-shadow: 0 10px 26px -24px rgba(17,43,89,.3); }
.side-toggle, .mobile-menu { transition: transform .2s, background .2s; }
.side-toggle:active, .mobile-menu:active { transform: scale(.94); }

/* app sidebar scrim */
.side-scrim {
  position: fixed; inset: 0; z-index: 19;
  background: rgba(8,20,40,.35); backdrop-filter: blur(2px);
  animation: fade-in .2s ease both;
}
@media (min-width: 921px) { .side-scrim { display: none !important; } }

/* modal / toast */
.modal .modal-backdrop { animation: fade-in .25s ease both; }
.auth-card, .order-card { animation: modal-in .38s var(--ease-spring) both; }
.toast { animation: toast-in .3s var(--ease-spring) both; }
.auth-tabs button { transition: background .2s, color .2s, box-shadow .2s; }
input, select { transition: border-color .18s, box-shadow .18s, background .18s; }
.badge.warn { animation: badge-pulse 2.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .console-card { transform: rotate(-1.2deg); }
}

/* stagger inner dashboard cards */
.app-page:not(.hidden) .stat-grid > * { animation: page-item .5s var(--ease-out) backwards; }
.app-page:not(.hidden) .stat-grid > *:nth-child(1) { animation-delay: .06s; }
.app-page:not(.hidden) .stat-grid > *:nth-child(2) { animation-delay: .1s; }
.app-page:not(.hidden) .stat-grid > *:nth-child(3) { animation-delay: .14s; }
.app-page:not(.hidden) .stat-grid > *:nth-child(4) { animation-delay: .18s; }
.app-page:not(.hidden) .stat-grid > *:nth-child(5) { animation-delay: .22s; }
.app-page:not(.hidden) .overview-grid > * { animation: page-item .55s var(--ease-out) backwards; }
.app-page:not(.hidden) .overview-grid > *:nth-child(1) { animation-delay: .12s; }
.app-page:not(.hidden) .overview-grid > *:nth-child(2) { animation-delay: .18s; }

@keyframes spin { to { transform: rotate(360deg); } }
.icon-button.spinning { animation: spin .8s linear infinite; }
.progress i {
  transition: width .9s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  animation: shimmer 2.6s ease-in-out infinite;
}
.app-page:not(.hidden) .table tbody tr { animation: fade-in .4s ease backwards; }
.app-page:not(.hidden) .table tbody tr:nth-child(2) { animation-delay: .05s; }
.app-page:not(.hidden) .table tbody tr:nth-child(3) { animation-delay: .1s; }
.app-page:not(.hidden) .table tbody tr:nth-child(4) { animation-delay: .15s; }
.app-page:not(.hidden) .table tbody tr:nth-child(5) { animation-delay: .2s; }
.app-page:not(.hidden) .table tbody tr:nth-child(6) { animation-delay: .25s; }
@media (max-width: 920px) {
  .console-card { animation: hero-in .8s var(--ease-out) both; }
}