/* ─────────────────────────────────────────────
   Däckcentrum — Design tokens
   Bas: vit, svart, lime-grön accent (matchar header)
   ───────────────────────────────────────────── */

:root {
  /* ── Brand / accent ── */
  --accent: #8BC53F;          /* lime, matchar header */
  --accent-strong: #76B22F;
  --accent-soft: #ECF6DC;
  --accent-ink: #1A2410;

  /* ── Surface ── */
  --bg: #FFFFFF;
  --bg-alt: #F6F5F1;          /* varm off-white */
  --bg-warm: #F1EEE6;
  --ink: #0A0A0A;
  --ink-2: #1F1F1F;
  --ink-3: #4B4B4B;
  --ink-4: #8A8A8A;
  --ink-5: #C9C9C9;
  --line: #E7E5DF;
  --line-strong: #1A1A1A;

  /* ── Top bar ── */
  --topbar-bg: #0A0A0A;
  --topbar-fg: #EDEDED;
  --topbar-dim: #9A9A9A;

  /* ── Cart pill / dark element ── */
  --pill-dark-bg: #0A0A0A;
  --pill-dark-fg: #FFFFFF;

  /* ── Always-dark surfaces (footer, dark CTAs) — stay dark in both themes ── */
  --surface-dark: #0A0A0A;
  --surface-dark-2: #131313;
  --surface-dark-fg: #F4F4F4;
  --surface-dark-fg-dim: rgba(255,255,255,.65);
  --surface-dark-fg-faint: rgba(255,255,255,.45);
  --surface-dark-line: rgba(255,255,255,.1);
  --surface-dark-line-soft: rgba(255,255,255,.06);

  /* ── State ── */
  --danger: #C5392E;
  --warn: #E0A100;
  --ok: #2E8B57;

  /* ── Reg-plate (Sweden) ── */
  --plate-blue: #003F87;
  --plate-yellow: #FFCE00;
  --plate-fg: #111111;

  /* ── Type ── */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-plate:   "Plate", "Arial Black", "Helvetica", sans-serif;

  /* ── Radius ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── Shadow ── */
  --shadow-1: 0 1px 2px rgba(10,10,10,.04), 0 2px 6px rgba(10,10,10,.04);
  --shadow-2: 0 6px 24px -8px rgba(10,10,10,.18), 0 2px 6px rgba(10,10,10,.06);
  --shadow-3: 0 24px 60px -20px rgba(10,10,10,.28), 0 8px 20px -8px rgba(10,10,10,.12);
  --shadow-accent: 0 10px 30px -10px rgba(139,197,63,.55);

  /* ── Spacing ── */
  --pad-section: clamp(64px, 8vw, 128px);
  --container: 1320px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-emph: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 160ms;
  --t-med:  280ms;
  --t-slow: 520ms;
}

/* dark theme */
[data-theme="dark"] {
  --bg: #0B0B0B;
  --bg-alt: #131313;
  --bg-warm: #181715;
  --ink: #F4F4F4;
  --ink-2: #E5E5E5;
  --ink-3: #B0B0B0;
  --ink-4: #7A7A7A;
  --ink-5: #3A3A3A;
  --line: #232323;
  --line-strong: #FFFFFF;
  --topbar-bg: #000000;
  --topbar-fg: #EDEDED;
  --pill-dark-bg: #FFFFFF;
  --pill-dark-fg: #0A0A0A;
}

/* accent variants (Tweaks) */
[data-accent="orange"] {
  --accent: #F37321;
  --accent-strong: #D45D14;
  --accent-soft: #FCEADC;
  --accent-ink: #2A1404;
  --shadow-accent: 0 10px 30px -10px rgba(243,115,33,.55);
}
[data-accent="blue"] {
  --accent: #2D6CDF;
  --accent-strong: #1F55B8;
  --accent-soft: #DCE8FB;
  --accent-ink: #06183A;
  --shadow-accent: 0 10px 30px -10px rgba(45,108,223,.55);
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  font-size: 16px;
  line-height: 1.5;
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* container */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* type */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 6.4vw, 96px); letter-spacing: -.035em; font-weight: 650; }
h2 { font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -.028em; }
h3 { font-size: clamp(22px, 2vw, 28px); }

/* button system */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 550;
  font-size: 15px;
  letter-spacing: -.005em;
  position: relative;
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s var(--ease-out),
    background var(--t-med) var(--ease-out),
    letter-spacing .35s var(--ease-out);
  isolation: isolate;
  white-space: nowrap;
}
.btn::before {
  /* sheen sweep on hover */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80px 80px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  z-index: -1;
}
.btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 38px -10px rgba(10,10,10,.32), 0 6px 14px -4px rgba(10,10,10,.16);
  letter-spacing: .01em;
}
.btn:hover::before { transform: translateX(110%); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(-1px) scale(.99); }

.btn-accent { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); }
.btn-accent:hover {
  box-shadow: 0 22px 48px -10px rgba(139,197,63,.7), 0 8px 18px -4px rgba(10,10,10,.18);
}
.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border: 1px solid var(--line);
  transition:
    background .35s var(--ease-out),
    color .35s var(--ease-out),
    border-color .35s var(--ease-out),
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s var(--ease-out),
    letter-spacing .35s var(--ease-out);
}
.btn-ghost:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 18px 38px -10px rgba(139,197,63,.55), 0 6px 14px -4px rgba(10,10,10,.14);
}
.btn-light { --btn-bg: #FFFFFF; --btn-fg: var(--ink); border: 1px solid var(--line); }
.btn-light:hover {
  box-shadow: 0 18px 38px -10px rgba(10,10,10,.18), 0 6px 14px -4px rgba(10,10,10,.10);
}

.btn .arrow {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 2;
  transition: transform .4s var(--ease-emph);
}
.btn:hover .arrow { transform: translateX(5px) rotate(-6deg); }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn .arrow { transition: none !important; animation: none !important; }
  .btn:hover { transform: none; letter-spacing: normal; }
}

/* link arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--t-med) var(--ease-emph), color var(--t-med);
}
.link-arrow:hover { gap: 14px; color: var(--accent-strong); }

/* reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(44px) scale(.98);
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform .85s cubic-bezier(.16, 1, .3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Staggered children inside any revealed grid/row */
.service-cards .reveal.in:nth-child(2),
.dl-popular-grid .reveal.in:nth-child(2),
.footer-top .reveal.in:nth-child(2) { transition-delay: .07s; }
.service-cards .reveal.in:nth-child(3),
.dl-popular-grid .reveal.in:nth-child(3),
.footer-top .reveal.in:nth-child(3) { transition-delay: .14s; }
.service-cards .reveal.in:nth-child(4),
.footer-top .reveal.in:nth-child(4) { transition-delay: .21s; }
.service-cards .reveal.in:nth-child(5) { transition-delay: .14s; }
.service-cards .reveal.in:nth-child(6) { transition-delay: .21s; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }
.reveal[data-delay="6"] { transition-delay: .48s; }

/* utility */
.divider { height: 1px; background: var(--line); width: 100%; }
.center-text { text-align: center; }

/* page enter */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
main { animation: pageIn .6s var(--ease-emph) both; }

/* selection */
::selection { background: var(--accent); color: var(--accent-ink); }

/* scrollbar (subtle) */
* { scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; }


/* ──────────────────────────────────────────────
   Global "energetic hover" for primary action buttons
   that don't use the .btn system (custom-styled CTAs).
   ────────────────────────────────────────────── */

.book-btn,
.dv-buy,
.regsearch-cta,
.vk-reg-cta,
.dc-checkout-btn,
.map-card-cta,
.mm-book,
.dcw-buy-btn,
.cart-pill,
.icon-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.book-btn,
.dv-buy,
.regsearch-cta,
.vk-reg-cta,
.map-card-cta,
.mm-book,
.dcw-buy-btn {
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s var(--ease-out),
    background var(--t-med) var(--ease-out),
    color var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out),
    gap .35s var(--ease-out) !important;
}

/* Sheen sweep on hover */
.book-btn::after,
.dv-buy::after,
.regsearch-cta::after,
.vk-reg-cta::after,
.map-card-cta::after,
.mm-book::after,
.dcw-buy-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.book-btn:hover::after,
.dv-buy:hover::after,
.regsearch-cta:hover::after,
.vk-reg-cta:hover::after,
.map-card-cta:hover::after,
.mm-book:hover::after,
.dcw-buy-btn:hover::after { transform: translateX(110%); }

/* Lift + scale on hover */
.book-btn:hover,
.dv-buy:hover,
.regsearch-cta:hover,
.vk-reg-cta:hover,
.map-card-cta:hover,
.mm-book:hover,
.dcw-buy-btn:hover {
  transform: translateY(-3px) scale(1.03);
}

/* Stronger glows on hover (per palette) */
.dv-buy:hover,
.regsearch-cta:hover,
.vk-reg-cta:hover,
.book-btn:hover,
.mm-book:hover {
  box-shadow: 0 18px 38px -10px rgba(139,197,63,.55), 0 6px 14px -4px rgba(10,10,10,.16);
}
.map-card-cta:hover,
.dcw-buy-btn:hover {
  box-shadow: 0 18px 38px -10px rgba(10,10,10,.32), 0 6px 14px -4px rgba(10,10,10,.16);
}
.book-btn:active,
.dv-buy:active,
.regsearch-cta:active,
.vk-reg-cta:active,
.map-card-cta:active,
.mm-book:active,
.dcw-buy-btn:active { transform: translateY(-1px) scale(.99); }

/* Inner content sits above the sheen */
.book-btn > *,
.dv-buy > *,
.regsearch-cta > *,
.vk-reg-cta > *,
.map-card-cta > *,
.mm-book > *,
.dcw-buy-btn > * { position: relative; z-index: 2; }

/* Arrow glide */
.book-btn .arrow,
.dv-buy .arrow,
.regsearch-cta .arrow,
.vk-reg-cta .vk-reg-arrow,
.map-card-cta svg:last-child,
.mm-book .arrow,
.dcw-buy-btn .arrow {
  transition: transform .4s var(--ease-emph) !important;
}
.book-btn:hover .arrow,
.dv-buy:hover .arrow,
.regsearch-cta:hover .arrow,
.vk-reg-cta:hover .vk-reg-arrow,
.map-card-cta:hover svg:last-child,
.mm-book:hover .arrow,
.dcw-buy-btn:hover .arrow { transform: translateX(5px) rotate(-6deg); }

/* Header icon buttons — softer feedback */
.icon-btn {
  transition: background var(--t-fast), color var(--t-fast),
              transform .35s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s var(--ease-out) !important;
}
.icon-btn:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 18px -8px rgba(10,10,10,.2);
}

/* Cart pill — same lift + soft glow */
.cart-pill {
  transition: background var(--t-fast), color var(--t-fast),
              transform .35s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s var(--ease-out) !important;
}
.cart-pill:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 26px -10px rgba(139,197,63,.45), 0 4px 12px -4px rgba(10,10,10,.12);
}

@media (prefers-reduced-motion: reduce) {
  .book-btn, .dv-buy, .regsearch-cta, .vk-reg-cta,
  .map-card-cta, .mm-book, .dcw-buy-btn, .icon-btn, .cart-pill {
    transition: none !important;
  }
  .book-btn::after, .dv-buy::after, .regsearch-cta::after,
  .vk-reg-cta::after, .map-card-cta::after, .mm-book::after,
  .dcw-buy-btn::after { display: none !important; }
  .book-btn:hover, .dv-buy:hover, .regsearch-cta:hover, .vk-reg-cta:hover,
  .map-card-cta:hover, .mm-book:hover, .dcw-buy-btn:hover,
  .icon-btn:hover, .cart-pill:hover { transform: none; }
}