/* components.css — buttons, cards, marquee, stat, form, app badges, mascot, cookie bar */

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform .25s var(--ease-out), background .25s, color .25s, box-shadow .25s;
  white-space: nowrap;
  border: 1px solid transparent;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--blue); box-shadow: var(--shadow-2); }
.btn--blue { background: var(--blue); color: var(--paper); }
.btn--blue:hover { background: var(--blue-deep); box-shadow: var(--shadow-2); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-soft); box-shadow: var(--shadow-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(244,244,241,0.4); }
.btn--ghost-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--lg { padding: 18px 32px; font-size: 16px; }
.btn .btn__icon { width: 18px; height: 18px; }

/* magnetic button container (JS sets transform) */
.btn--magnetic { position: relative; }
.btn--magnetic .btn__inner { display: inline-flex; align-items: center; gap: var(--s-2); transition: transform .25s var(--ease-pop); }

/* card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s;
  position: relative;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--ink); }
.card--dark { background: var(--ink-soft); color: var(--paper); border-color: var(--line-dark); }
.card--dark h3, .card--dark p { color: var(--paper); }
.card--feature { padding: var(--s-7); }
.card__icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--gold);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}
.card__icon img { width: 28px; height: 28px; }
.card__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); font-weight: 600; }
.card h3 { margin-top: var(--s-3); }
.card p { margin-top: var(--s-3); font-size: 16px; }
.card__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-5);
  font-size: 14px; font-weight: 600; color: var(--blue);
  transition: gap .25s var(--ease-out);
}
.card__link:hover { gap: 12px; }

/* marquee */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) 0;
  background: var(--paper-warm);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: var(--s-7); width: max-content;
  animation: xw-marquee 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee__item::after {
  content: "✦"; color: var(--coral); font-size: 22px;
}
.marquee__item:last-child::after { display: none; }
@keyframes xw-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* stat counter */
.stat { text-align: left; }
.stat__num {
  font-size: clamp(48px, 6vw, 96px); font-weight: 800; line-height: 1;
  color: var(--ink); letter-spacing: -0.03em;
}
.stat__num--gold { color: var(--gold); }
.stat__label { margin-top: var(--s-3); font-size: 14px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); font-weight: 600; }

/* form */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; padding: 18px 16px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 16px; transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}
.field textarea { min-height: 140px; resize: vertical; }
.field label {
  position: absolute; top: 14px; left: 16px;
  font-size: 14px; color: var(--ink-soft);
  pointer-events: none;
  transition: all .2s var(--ease-out);
  background: transparent;
  padding: 0 4px;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 4px rgba(28,105,212,0.10); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select:not([value=""]) + label {
  top: -10px; left: 12px; font-size: 12px; color: var(--ink); background: var(--paper);
}
.form__hint { font-size: 13px; color: var(--ink-soft); }
.form__success { padding: var(--s-5); background: rgba(31, 157, 85, 0.08); border: 1px solid var(--ok); border-radius: var(--r-md); color: var(--ok); font-weight: 600; }

/* app badge */
.app-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: var(--r-md);
  background: var(--ink); color: var(--paper);
  transition: transform .25s var(--ease-out), background .25s;
  min-width: 180px;
}
.app-badge:hover { background: var(--blue); transform: translateY(-2px); }
.app-badge__icon { width: 32px; height: 32px; }
.app-badge__text { display: flex; flex-direction: column; line-height: 1.1; }
.app-badge__small { font-size: 11px; opacity: .8; }
.app-badge__big { font-size: 17px; font-weight: 700; letter-spacing: 0.01em; }

/* mascot */
.mascot-float {
  position: absolute; pointer-events: none; z-index: 1;
  width: 120px;
}
.mascot-float img { animation: xw-float 6s ease-in-out infinite; }
.mascot-float--small { width: 72px; }
.mascot-float--tiny { width: 48px; }

/* cookie bar */
.cookie-bar {
  position: fixed; left: var(--s-5); right: var(--s-5); bottom: var(--s-5);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-5);
  align-items: center;
  z-index: 60;
  box-shadow: var(--shadow-pop);
  border: 1px solid var(--line-dark);
  max-width: 760px; margin: 0 auto;
  transform: translateY(120%); transition: transform .5s var(--ease-pop);
}
.cookie-bar.is-visible { transform: translateY(0); }
.cookie-bar p { color: rgba(244, 244, 241, 0.85); font-size: 14px; margin: 0; }
.cookie-bar p a { color: var(--gold); text-decoration: underline; }
.cookie-bar__actions { display: flex; gap: var(--s-3); }
.cookie-bar__mascot { position: absolute; right: -24px; top: -28px; width: 80px; }
@media (max-width: 640px) {
  .cookie-bar { grid-template-columns: 1fr; }
  .cookie-bar__actions { justify-content: flex-end; }
}

/* pill chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(28,105,212,0.10);
  color: var(--blue);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.01em;
}
.chip--gold { background: rgba(212,175,55,0.14); color: var(--gold); }
.chip--coral { background: rgba(255,107,91,0.12); color: var(--coral); }
.chip--ink { background: var(--ink); color: var(--paper); }

/* news card */
.news-card {
  display: block; border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.news-card__media { aspect-ratio: 16/9; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.news-card:hover .news-card__media img { transform: scale(1.06); }
.news-card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.news-card__meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blue); font-weight: 600; }
.news-card h3 { margin-top: var(--s-3); font-size: 22px; line-height: 1.2; }
.news-card p { margin-top: var(--s-3); font-size: 15px; color: var(--ink-soft); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); padding: var(--s-5) 0; }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { transition: transform .3s var(--ease-out); }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item p { margin-top: var(--s-3); font-size: 16px; }

/* feature list */
.feature-list { display: grid; gap: var(--s-3); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--s-3); }
.feature-list li .icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--coral); margin-top: 4px; }

/* divider */
.divider {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600;
  color: var(--ink-soft);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* language switch (single locale, decorative) */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }