/* ==========================================================================
   AnmeldNemt — Premium landing page styles
   Modern, minimal, mobile-first, danish.
   ========================================================================== */

/* ----------------------------- Design tokens ----------------------------- */
:root {
  /* Brand palette — premium & trustworthy */
  --c-bg: #ffffff;
  --c-bg-soft: #f7f8fb;
  --c-bg-dark: #0b1020;
  --c-ink: #0b1020;
  --c-ink-2: #2a3148;
  --c-muted: #5b6478;
  --c-line: #e7e9f1;
  --c-primary: #2c63ff;
  --c-primary-600: #234eda;
  --c-primary-50: #eaf0ff;
  --c-accent: #ffb547;
  --c-success: #16a34a;
  --c-danger: #ef4444;

  /* Google brand */
  --g-blue: #4285F4;
  --g-red: #EA4335;
  --g-yellow: #FBBC05;
  --g-green: #34A853;

  /* Geometry */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(11,16,32,.06);
  --shadow-sm: 0 6px 18px rgba(11,16,32,.08);
  --shadow: 0 18px 50px rgba(11,16,32,.10);
  --shadow-lg: 0 30px 80px rgba(11,16,32,.14);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 160ms;
  --t: 260ms;
  --t-slow: 480ms;

  /* Layout */
  --container: 1180px;
  --container-narrow: 880px;
  --header-h: 72px;
}

/* Reset & base */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 0; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--c-ink); margin: 0; }
h1 { font-size: clamp(2.2rem, 4.6vw + 1rem, 4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.6rem); }
h3 { font-size: clamp(1.2rem, 0.8vw + 1rem, 1.4rem); }
p  { margin: 0 0 1em; color: var(--c-ink-2); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: clamp(64px, 8vw, 120px) 0; }
.section--soft { background: var(--c-bg-soft); }
.section--dark { background: var(--c-bg-dark); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.78); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-primary-50);
  padding: 8px 14px; border-radius: 999px;
}
.section--dark .eyebrow { background: rgba(255,255,255,.08); color: #fff; }

.text-muted { color: var(--c-muted); }
.text-center { text-align: center; }

/* ----------------------------- Buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600; font-size: 16px;
  border: 1px solid transparent;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }

.btn--primary {
  background: var(--c-ink);
  color: #fff;
  box-shadow: 0 12px 30px rgba(11,16,32,.18);
}
.btn--primary:hover { background: #1a2240; box-shadow: 0 18px 38px rgba(11,16,32,.26); }

.btn--brand {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 12px 30px rgba(44,99,255,.32);
}
.btn--brand:hover { background: var(--c-primary-600); box-shadow: 0 18px 38px rgba(44,99,255,.42); }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn--ghost:hover { background: var(--c-bg-soft); border-color: #d6dae6; }

.btn--lg { padding: 18px 28px; font-size: 17px; }
.btn--block { width: 100%; }

.btn .arrow { transition: transform var(--t) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ----------------------------- Header / Nav ----------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(231,233,241,0);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
  background: rgba(255,255,255,.92);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 19px; }
.brand__mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--c-primary) 0%, #6a8bff 100%);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 20px rgba(44,99,255,.35);
}
.nav__menu { display: flex; gap: 6px; align-items: center; }
.nav__menu a {
  padding: 10px 14px; border-radius: 10px; color: var(--c-ink-2);
  font-weight: 500; font-size: 15px;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.nav__menu a:hover { color: var(--c-ink); background: var(--c-bg-soft); }
.nav__cta { display: flex; gap: 10px; align-items: center; }
.nav__toggle { display: none; }

@media (max-width: 880px) {
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: #fff;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 22px 22px;
    border-bottom: 1px solid var(--c-line);
    transform: translateY(-110%);
    transition: transform var(--t) var(--ease);
  }
  .nav__menu.is-open { transform: translateY(0); }
  .nav__menu a { padding: 14px 12px; font-size: 17px; border-radius: 12px; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--c-line);
    background: #fff;
  }
  .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
    display: block; width: 18px; height: 2px; background: var(--c-ink); border-radius: 2px;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
  }
  .nav__toggle span { position: relative; }
  .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
  .nav__toggle span::before { top: -6px; }
  .nav__toggle span::after  { top: 6px; }
  .nav__toggle.is-open span { background: transparent; }
  .nav__toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
  .nav__toggle.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }
}

/* ----------------------------- Hero ----------------------------- */
.hero { padding: clamp(48px, 7vw, 100px) 0 clamp(56px, 7vw, 110px); position: relative; overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }

.hero__title { margin-bottom: 18px; }
.hero__title em {
  font-style: normal; color: var(--c-primary);
  background: linear-gradient(120deg, var(--c-primary) 0%, #8aa6ff 60%, var(--c-accent) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { font-size: 19px; color: var(--c-ink-2); max-width: 560px; margin-bottom: 28px; }
.hero__price {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: var(--c-bg-soft); border: 1px solid var(--c-line); margin-bottom: 22px;
}
.hero__price strong { font-size: 1.35rem; letter-spacing: -.02em; }
.hero__price span { color: var(--c-muted); font-size: 14px; }

.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__bullets { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; color: var(--c-muted); font-size: 14px; }
.hero__bullets span { display: inline-flex; align-items: center; gap: 8px; }
.hero__bullets svg { color: var(--c-success); }

/* Hero visual / product showcase */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(44,99,255,.18) 0%, transparent 50%),
    radial-gradient(80% 80% at 0% 100%, rgba(255,181,71,.18) 0%, transparent 55%),
    linear-gradient(160deg, #f3f6ff 0%, #ffffff 60%);
  border: 1px solid var(--c-line);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero__visual::after {
  content: ""; position: absolute; inset: -1px;
  background: radial-gradient(60% 60% at 50% 40%, transparent 60%, rgba(11,16,32,.04) 100%);
  pointer-events: none;
}
.card-stack { position: absolute; inset: 0; display: grid; place-items: center; }
.nfc-card {
  width: 62%; aspect-ratio: 1.6 / 1;
  border-radius: 22px;
  background: linear-gradient(135deg, #0b1020 0%, #1a2240 100%);
  position: relative;
  box-shadow: 0 30px 60px rgba(11,16,32,.35), inset 0 1px 0 rgba(255,255,255,.12);
  animation: float 6s ease-in-out infinite;
  overflow: hidden;
}
.nfc-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 90% 0%, rgba(44,99,255,.4), transparent 50%);
  opacity: .9;
}
.nfc-card::after {
  /* wifi/nfc waves */
  content: ""; position: absolute; left: 12%; top: 50%; transform: translateY(-50%);
  width: 28%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 38%, rgba(255,255,255,.0) 38%, rgba(255,255,255,.9) 40%, transparent 42%),
    radial-gradient(circle, transparent 48%, transparent 49%, rgba(255,255,255,.65) 50%, transparent 52%),
    radial-gradient(circle, transparent 58%, transparent 59%, rgba(255,255,255,.4) 60%, transparent 62%);
}
.nfc-card__brand {
  position: absolute; bottom: 14%; left: 12%; right: 12%;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-weight: 800; letter-spacing: -.02em;
}
.nfc-card__brand small { font-size: 11px; font-weight: 500; opacity: .7; letter-spacing: .1em; text-transform: uppercase; }
.nfc-card__chip {
  position: absolute; top: 14%; right: 12%;
  width: 22%; aspect-ratio: 1.6/1;
  border-radius: 6px;
  background: linear-gradient(135deg, #d9b15a, #f3d27b 50%, #b88a35);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.nfc-card__chip::before {
  content: ""; position: absolute; inset: 18% 14%;
  border: 1px solid rgba(0,0,0,.25); border-radius: 4px;
  background:
    linear-gradient(transparent 49%, rgba(0,0,0,.18) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(0,0,0,.18) 50%, transparent 51%);
}

.phone {
  position: absolute;
  right: 4%; bottom: 4%;
  width: 30%; aspect-ratio: 9/19;
  border-radius: 22px;
  background: #0b1020;
  box-shadow: 0 22px 50px rgba(11,16,32,.3), inset 0 0 0 3px #1a2240;
  padding: 6px;
  animation: float 6s ease-in-out infinite reverse;
  animation-delay: -2s;
}
.phone__screen {
  width: 100%; height: 100%; border-radius: 16px;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10%; gap: 10px;
}
.phone__g {
  width: 56px; height: 56px; border-radius: 14px;
  background: conic-gradient(from 0deg, var(--g-blue) 0 25%, var(--g-red) 0 50%, var(--g-yellow) 0 75%, var(--g-green) 0 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 30%);
          mask: radial-gradient(circle, transparent 0 28%, #000 30%);
  position: relative;
}
.phone__g::after {
  content: "G"; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 28px;
}
.phone__stars { color: #fbbc05; font-size: 12px; letter-spacing: 2px; }
.phone__stars span:last-child { opacity: .55; }
.phone__cta { background: var(--c-primary); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 10px; font-weight: 700; }

/* Decorative orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .6; pointer-events: none; }
.orb--1 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(44,99,255,.6), transparent 60%); top: -50px; left: -50px; }
.orb--2 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,181,71,.55), transparent 60%); bottom: -60px; right: -40px; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

/* ----------------------------- Flip card (hero) ----------------------------- */
.flip-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  perspective: 1600px;
  cursor: pointer;
  margin: 0 auto;
}
.flip-card__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }
.flip-card__face {
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #fff;
  box-shadow: 0 30px 60px rgba(11,16,32,.18), 0 0 0 1px rgba(231,233,241,.6);
  display: grid; place-items: center;
  padding: 18px;
  transition: box-shadow var(--t) var(--ease);
}
.flip-card:hover .flip-card__face { box-shadow: 0 40px 80px rgba(11,16,32,.24), 0 0 0 1px rgba(44,99,255,.18); }
.flip-card__face img {
  width: 92%; height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(11,16,32,.18));
}
.flip-card__face--back { transform: rotateY(180deg); background: #0b1020; }
.flip-card__face--back img { filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.flip-card__badge {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--c-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(8px);
}
.flip-card__face--back .flip-card__badge { background: rgba(255,255,255,.14); color: #fff; }

.flip-card__toggle {
  position: absolute; bottom: 18px; right: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--c-ink); color: #fff;
  border: 0; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 28px rgba(11,16,32,.32);
  cursor: pointer;
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.flip-card__toggle:hover { background: var(--c-primary); transform: translateY(-2px); }
.flip-card__toggle svg { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.flip-card.is-flipped .flip-card__toggle svg { transform: rotate(180deg); }
.flip-card__toggle[aria-pressed=true] { background: var(--c-primary); }

.flip-card__hint {
  position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--c-muted); font-weight: 500;
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 6px;
}
.flip-card__hint::before { content: ""; width: 24px; height: 1.5px; background: var(--c-line); }

/* ----------------------------- Flip on product card ----------------------------- */
.wc-card__flip {
  aspect-ratio: 1 / 1;
  perspective: 1400px;
  margin-bottom: 16px;
}
.wc-card__flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.wc-card:hover .wc-card__flip-inner { transform: rotateY(180deg); }
@media (hover: none) {
  .wc-card__flip-inner { animation: cardFlip 8s ease-in-out infinite; }
}
@keyframes cardFlip {
  0%, 45% { transform: rotateY(0deg); }
  50%, 95% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
.wc-card__flip-face {
  position: absolute; inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid; place-items: center;
  padding: 14px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: var(--c-bg-soft);
}
.wc-card__flip-face img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(11,16,32,.12)); }
.wc-card__flip-face--back { transform: rotateY(180deg); background: #0b1020; }
.wc-card__flip-face--back img { filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); }

/* ----------------------------- Trust strip ----------------------------- */
.trust { padding: 22px 0 32px; }
.trust__row { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: center; color: var(--c-muted); font-size: 14px; }
.trust__row > span { display: inline-flex; align-items: center; gap: 8px; }

/* ----------------------------- Steps ----------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 30px 26px; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  position: relative; overflow: hidden;
}
.step::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--c-primary), #8aa6ff);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(44,99,255,.25); }
.step:hover::before { transform: scaleX(1); }
.step__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--c-primary-50); color: var(--c-primary); font-weight: 800; margin-bottom: 18px;
}
.step h3 { margin-bottom: 8px; }

/* ----------------------------- Benefits ----------------------------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
@media (max-width: 880px) { .benefits { grid-template-columns: 1fr; } }
.benefit {
  text-align: left; padding: 28px; border-radius: var(--radius-lg);
  background: var(--c-bg-soft); border: 1px solid transparent;
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.benefit:hover { background: #fff; transform: translateY(-3px); border-color: var(--c-line); box-shadow: var(--shadow-sm); }
.benefit__icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px;
  display: grid; place-items: center; background: var(--c-primary-50); color: var(--c-primary);
}
.benefit h3 { margin-bottom: 6px; }

/* ----------------------------- Product ----------------------------- */
.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .product { grid-template-columns: 1fr; gap: 36px; } }
.product__media {
  border-radius: var(--radius-xl); overflow: hidden; background: var(--c-bg-soft);
  aspect-ratio: 1 / 1; position: relative;
  display: grid; place-items: center;
}
.product__media img { width: 88%; height: auto; object-fit: contain; transition: transform var(--t-slow) var(--ease); }
.product__media:hover img { transform: scale(1.04) rotate(-2deg); }
.product__title { font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem); }
.product__price { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 8px; }
.product__price strong { font-size: 2.6rem; letter-spacing: -.03em; }
.product__price s { color: var(--c-muted); }
.product__price .vat { font-size: 13px; color: var(--c-muted); display: block; }
.product__desc { color: var(--c-ink-2); margin-bottom: 22px; }
.product__features { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
@media (max-width: 520px) { .product__features { grid-template-columns: 1fr; } }
.product__features li { display: flex; align-items: center; gap: 8px; color: var(--c-ink-2); font-size: 15px; }
.product__features svg { color: var(--c-success); flex-shrink: 0; }

.product__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.product__cta .qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: 999px; overflow: hidden; }
.product__cta .qty button {
  width: 42px; height: 46px; background: #fff; border: 0; font-size: 18px; color: var(--c-ink);
  transition: background-color var(--t) var(--ease);
}
.product__cta .qty button:hover { background: var(--c-bg-soft); }
.product__cta .qty input { width: 44px; height: 46px; border: 0; text-align: center; font-weight: 600; font-size: 16px; outline: none; background: #fff; -moz-appearance: textfield; }
.product__cta .qty input::-webkit-outer-spin-button, .product__cta .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--c-bg-soft); color: var(--c-ink-2); font-size: 13px; font-weight: 500; }
.badge svg { color: var(--c-primary); }

/* ----------------------------- Reviews / social proof ----------------------------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
@media (max-width: 880px) { .reviews { grid-template-columns: 1fr; } }
.review { padding: 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); }
.review__stars { color: #fbbc05; margin-bottom: 10px; letter-spacing: 2px; }
.review p { color: var(--c-ink-2); }
.review__who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.review__avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #c8d2ff, #6a8bff); color: #fff; display: grid; place-items: center; font-weight: 700; }
.review__who small { color: var(--c-muted); display: block; font-size: 13px; }

/* ----------------------------- FAQ ----------------------------- */
.faq { max-width: 820px; margin: 36px auto 0; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; background: transparent; border: 0; text-align: left; font-weight: 600; font-size: 17px; color: var(--c-ink);
}
.faq__icon {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--c-bg-soft);
  display: grid; place-items: center; transition: transform var(--t) var(--ease), background-color var(--t) var(--ease);
}
.faq__btn:hover .faq__icon { background: var(--c-primary-50); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--c-primary-50); color: var(--c-primary); }
.faq__panel {
  max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease);
}
.faq__panel-inner { padding: 0 4px 22px; color: var(--c-ink-2); }

/* ----------------------------- Final CTA ----------------------------- */
.final-cta { text-align: center; padding: clamp(70px, 9vw, 130px) 0; }
.final-cta .container { position: relative; }
.final-cta__title { max-width: 760px; margin: 14px auto 16px; }
.final-cta__sub { color: rgba(255,255,255,.78); max-width: 620px; margin: 0 auto 30px; font-size: 18px; }

/* ----------------------------- Footer ----------------------------- */
.site-footer { padding: 50px 0 30px; background: var(--c-bg-soft); border-top: 1px solid var(--c-line); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-bottom: 14px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__col a { color: var(--c-ink-2); font-size: 15px; transition: color var(--t) var(--ease); }
.footer__col a:hover { color: var(--c-ink); }
.footer__brand p { color: var(--c-muted); font-size: 14px; margin-top: 12px; max-width: 280px; }
.footer__bottom { border-top: 1px solid var(--c-line); margin-top: 36px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--c-muted); font-size: 13px; }

/* ----------------------------- WordPress core ----------------------------- */
.alignwide { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }
.sticky { position: sticky; }

/* ----------------------------- WooCommerce compatibility ----------------------------- */
.woocommerce-notices-wrapper { margin-bottom: 16px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px;
  background: var(--c-primary-50); color: var(--c-primary-600); border: 1px solid rgba(44,99,255,.18);
}
.woocommerce-error { background: #fff1f2; color: #b91c1c; border-color: #fecaca; }

.wc-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
@media (max-width: 880px) { .wc-loop { grid-template-columns: 1fr; } }
.wc-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 22px; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.wc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.wc-card .wc-thumb { aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; background: var(--c-bg-soft); margin-bottom: 16px; display: grid; place-items: center; }
.wc-card .wc-thumb img { width: 80%; height: auto; object-fit: contain; }
.wc-card h2, .wc-card .woocommerce-loop-product__title { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.wc-card .price { color: var(--c-ink); font-weight: 700; font-size: 18px; margin-bottom: 14px; display: block; }
.wc-card .button, .wc-card .add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 18px; border-radius: 999px;
  background: var(--c-ink); color: #fff; border: 0; font-weight: 600;
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.wc-card .button:hover { background: var(--c-primary); transform: translateY(-2px); }
.wc-card .added_to_cart { display: inline-block; margin-top: 8px; color: var(--c-primary); font-size: 14px; }

/* Single product */
.single-product .product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 880px) { .single-product .product { grid-template-columns: 1fr; } }
.single-product .woocommerce-product-gallery { background: var(--c-bg-soft); border-radius: var(--radius-xl); padding: 30px; }
.single-product .summary h1.product_title { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); margin-bottom: 8px; }
.single-product .summary .price { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; display: block; }
.single-product .summary .woocommerce-product-details__short-description { color: var(--c-ink-2); margin-bottom: 22px; }
.single-product button.single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; background: var(--c-ink); color: #fff; border: 0; font-weight: 600; font-size: 16px;
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.single-product button.single_add_to_cart_button:hover { background: var(--c-primary); transform: translateY(-2px); }

.woocommerce-cart .cart, .woocommerce-checkout #customer_details { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 24px; }

/* ----------------------------- Reveal animations ----------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }

/* ----------------------------- Toast ----------------------------- */
.toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  background: var(--c-ink); color: #fff; padding: 14px 18px; border-radius: 14px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px;
  transform: translateY(120%); opacity: 0; transition: transform 320ms var(--ease), opacity 320ms var(--ease);
  max-width: 340px; font-size: 14px;
}
.toast.is-show { transform: translateY(0); opacity: 1; }
.toast svg { color: var(--c-accent); flex-shrink: 0; }

/* ----------------------------- Floating mobile CTA ----------------------------- */
.floating-cta {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60;
  display: none;
  box-shadow: 0 18px 40px rgba(11,16,32,.30);
}
@media (max-width: 720px) { .floating-cta.is-show { display: block; } }

/* ----------------------------- Helpers ----------------------------- */
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }
.divider { height: 1px; background: var(--c-line); margin: 50px 0; }