/* =========================================
   Components: nav, buttons, cards, badges
   ========================================= */

/* ---------- Floating navbar ---------- */
.nav {
  position: fixed;
  inset: 16px 16px auto 16px;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 18px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(31, 111, 235, .12);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
  max-width: calc(var(--container) + 32px);
  margin-inline: auto;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-md);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink-900);
}
.nav__brand img { width: 32px; height: 32px; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__links a {
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-600);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.nav__links a:hover { background: var(--brand-50); color: var(--brand-700); }
.nav__cta { margin-left: 4px; }
.nav__toggle { display: none; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-full);
    color: var(--ink-700);
  }
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    inset: calc(100% + 8px) 0 auto 0;
    flex-direction: column;
    padding: 12px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);
    border-radius: var(--r-lg);
    border: 1px solid rgba(31, 111, 235, .12);
    box-shadow: var(--shadow-lg);
    gap: 4px;
  }
  .nav.is-open .nav__links a { width: 100%; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: .98rem;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 10px 24px -6px rgba(31, 111, 235, .55);
}
.btn--primary:hover {
  box-shadow: 0 16px 32px -8px rgba(31, 111, 235, .65), 0 0 0 4px rgba(31, 111, 235, .12);
  transform: translateY(-1px);
}
.btn--ghost {
  background: var(--brand-50);
  color: var(--brand-700);
}
.btn--ghost:hover { background: var(--brand-100); }
.btn--outline {
  background: transparent;
  color: var(--ink-900);
  box-shadow: inset 0 0 0 1.5px var(--ink-200);
}
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--brand-600); color: var(--brand-700); }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }
.btn--sm { padding: 8px 16px; font-size: .88rem; }

/* Store buttons */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
  min-width: 180px;
}
.store-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -10px rgba(11, 21, 48, .45);
}
.store-btn svg, .store-btn__icon { width: 28px; height: 28px; flex-shrink: 0; }
.store-btn__text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn__top { font-size: .7rem; opacity: .8; letter-spacing: .05em; }
.store-btn__bot { font-size: 1.05rem; font-weight: 600; font-family: var(--font-display); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-0);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
}

.glass {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--shadow-md);
}

/* ---------- Pills / Badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 600;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .9);
  color: var(--ink-700);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(31, 111, 235, .12);
}
.pill svg { width: 16px; height: 16px; color: var(--brand-600); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 64px;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Float keyframe for hero decoration */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}
@keyframes pulseRing {
  0% { transform: scale(.85); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Loading shimmer (not used yet but available) */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}