/* ========================================================
   PCIT — Hjemme-IT & Computerhjælp
   Stilark (delt af alle sider)
   ======================================================== */

:root {
  --blue:        #0b6ed6;
  --blue-dark:   #0a5fb8;
  --blue-deeper: #084a92;
  --navy:        #0a2540;
  --tint:        #eef5ff;
  --tint-2:      #f6f9fd;
  --line:        #d8e3ef;
  --text:        #1a2939;
  --muted:       #5a6b7c;
  --white:       #ffffff;
  --green:       #2aa56b;
  --shadow:      0 4px 14px rgba(10, 37, 64, 0.08);
  --shadow-lg:   0 12px 32px rgba(10, 37, 64, 0.12);
  --radius:      10px;
  --radius-lg:   16px;
  --maxw:        1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
}

img { max-width: 100%; display: block; }

a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); }
h3 { font-size: 1.2rem; }

p  { margin: 0 0 1em; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy);
  color: #cfdbe8;
  font-size: .9rem;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar a { color: #cfdbe8; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar .info span { margin-right: 18px; }

/* ---------- Header / Nav ---------- */
header.site {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow);
}
header.site .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--navy);
  font-size: 1.35rem;
  letter-spacing: .2px;
}
.logo .logo-mark {
  width: 42px; height: 42px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deeper) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: var(--shadow);
}
.logo small {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 2px;
}

nav.primary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
nav.primary a {
  color: var(--navy);
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
nav.primary a:hover { background: var(--tint); text-decoration: none; }
nav.primary a.active { color: var(--blue); background: var(--tint); }

/* nav button (CTA) */
.btn,
nav.primary a.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--blue);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.btn:hover,
nav.primary a.btn:hover {
  background: var(--blue-dark);
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.btn.ghost {
  background: transparent;
  color: var(--blue) !important;
  border: 2px solid var(--blue);
}
.btn.ghost:hover { background: var(--blue); color: #fff !important; }

.btn.lg { padding: 14px 26px; font-size: 1.02rem; }

/* mobile toggle */
.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 44px; height: 44px;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--navy);
  margin: 5px auto;
  transition: transform .2s ease, opacity .2s ease;
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 600px at 90% -10%, #cfe1ff 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 110%, #e6efff 0%, transparent 55%),
    linear-gradient(180deg, #f6f9fd 0%, #ffffff 100%);
  padding: 70px 0 80px;
  border-bottom: 1px solid var(--line);
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: center;
}
.hero h1 { margin-bottom: .4em; }
.hero .lead {
  font-size: 1.18rem;
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: 1.6em;
}
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero ul.checks {
  list-style: none; padding: 0; margin: 1.8em 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.hero ul.checks li {
  position: relative; padding-left: 28px; color: var(--text); font-weight: 500;
}
.hero ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green);
  background-image:
    linear-gradient(45deg, transparent 45%, #fff 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #fff 45% 55%, transparent 55%);
}

.hero-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.hero-card h3 { margin-top: 0; }
.hero-card .row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px dashed var(--line);
}
.hero-card .row:last-child { border-bottom: 0; }
.hero-card .icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--tint); color: var(--blue);
  display: grid; place-items: center; font-size: 1.2rem; font-weight: 700;
  flex-shrink: 0;
}
.hero-card .row strong { display:block; color: var(--navy); }
.hero-card .row span { color: var(--muted); font-size: .95rem; }

/* ---------- Generic section ---------- */
section.block { padding: 70px 0; }
section.block.alt { background: var(--tint-2); }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.section-head .eyebrow {
  display: inline-block;
  background: var(--tint);
  color: var(--blue-deeper);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* ---------- Service cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: #c1d6ee;
}
.card .icon-lg {
  width: 56px; height: 56px;
  background: var(--tint);
  color: var(--blue);
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  margin-bottom: 16px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); margin-bottom: 0; }

/* ---------- Why us / features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feature {
  text-align: center;
  padding: 24px 16px;
}
.feature .num {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deeper) 100%);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 800;
  box-shadow: var(--shadow);
}
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--muted); }

/* ---------- Two-column with image ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.split .visual {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deeper) 100%);
  border-radius: var(--radius-lg);
  min-height: 320px;
  display: grid; place-items: center;
  color: rgba(255,255,255,.8);
  box-shadow: var(--shadow-lg);
  padding: 30px;
  text-align: center;
}
.split .visual .big {
  font-size: 3rem; font-weight: 800; color: #fff; line-height: 1;
}
.split .visual .small {
  font-size: .95rem; letter-spacing: .5px; text-transform: uppercase;
  margin-top: 10px;
}

/* ---------- Pris-tabel ---------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border: 2px solid var(--blue);
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: scale(1.02);
}
.price-card.featured::before {
  content: "Mest populær";
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.price-card h3 { margin-bottom: 8px; }
.price-card .price {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--navy);
  margin: 14px 0 4px;
}
.price-card .price small {
  font-size: .9rem; color: var(--muted); font-weight: 500;
}
.price-card ul {
  list-style: none; padding: 0; margin: 18px 0 24px;
  text-align: left;
  flex-grow: 1;
}
.price-card ul li {
  padding: 8px 0 8px 28px;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.price-card ul li:last-child { border-bottom: 0; }
.price-card ul li::before {
  content: "✓";
  position: absolute; left: 0; top: 7px;
  color: var(--green); font-weight: 800;
}

/* ---------- Pris liste (timepris osv.) ---------- */
table.pricelist {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
table.pricelist th, table.pricelist td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
table.pricelist thead {
  background: var(--navy);
  color: #fff;
}
table.pricelist tbody tr:nth-child(even) td { background: var(--tint-2); }
table.pricelist tbody tr:last-child td { border-bottom: 0; }
table.pricelist td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

/* ---------- CTA strip ---------- */
.cta-strip {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deeper) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 44px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-strip h2 { color: #fff; margin-bottom: 10px; }
.cta-strip p { color: rgba(255,255,255,.92); max-width: 600px; margin: 0 auto 22px; }
.cta-strip .btn { background: #fff; color: var(--blue) !important; }
.cta-strip .btn:hover { background: var(--tint); }

/* ---------- Page header (sub-pages) ---------- */
.page-head {
  background:
    radial-gradient(900px 400px at 80% -20%, #cfe1ff 0%, transparent 60%),
    linear-gradient(180deg, #f6f9fd 0%, #ffffff 100%);
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-head .crumbs {
  font-size: .9rem; color: var(--muted); margin-bottom: 12px;
}
.page-head h1 { margin-bottom: 6px; }
.page-head p { color: var(--muted); font-size: 1.1rem; max-width: 70ch; }

/* ---------- Contact / form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}
.contact-info .box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  display: flex; gap: 14px; align-items: flex-start;
}
.contact-info .box .icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--tint); color: var(--blue);
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 700;
  flex-shrink: 0;
}
.contact-info .box strong { display: block; color: var(--navy); margin-bottom: 2px; }
.contact-info .box span, .contact-info .box a { color: var(--muted); font-size: .98rem; }

form.contact {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow);
}
form.contact .row { margin-bottom: 16px; }
form.contact label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: .94rem;
}
form.contact input,
form.contact textarea,
form.contact select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
form.contact input:focus,
form.contact textarea:focus,
form.contact select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11, 110, 214, 0.15);
}
form.contact textarea { resize: vertical; min-height: 130px; }
form.contact .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--navy);
  color: #b9c5d4;
  padding: 56px 0 24px;
  margin-top: 60px;
}
footer.site .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}
footer.site h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
footer.site a { color: #b9c5d4; }
footer.site a:hover { color: #fff; text-decoration: none; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site ul li { margin-bottom: 8px; }
footer.site .brand { font-size: 1.1rem; color: #fff; font-weight: 700; }
footer.site .brand p { color: #b9c5d4; margin-top: 12px; font-size: .95rem; }
.copyright {
  border-top: 1px solid #16365b;
  margin-top: 36px;
  padding-top: 18px;
  text-align: center;
  font-size: .9rem;
  color: #8aa0b8;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .grid,
  .split,
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  footer.site .grid { grid-template-columns: 1fr 1fr; }
}

/* ========================================================
   ANIMATIONS — bevægelse & liv
   ======================================================== */

/* keyframes */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes float-y-sm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes spin-rev {
  to { transform: rotate(-360deg); }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: .9; }
  80%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.25); opacity: .7; }
}
@keyframes wifi-wave {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0;  }
}
@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -20px) scale(1.06); }
  66%      { transform: translate(-22px, 18px) scale(.96); }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes type-cursor {
  50% { opacity: 0; }
}
@keyframes scan {
  0%   { transform: translateY(-30px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(120px); opacity: 0; }
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
@keyframes wave-bar {
  0%, 100% { transform: scaleY(.4); }
  50%      { transform: scaleY(1);  }
}

/* live-dot in topbar */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #2aff8c;
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
  vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(42,255,140,.7);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #2aff8c;
  animation: pulse-ring 1.8s ease-out infinite;
}

/* floating background blobs in hero */
.hero { position: relative; overflow: hidden; }
.hero .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.hero .blob.b1 {
  width: 320px; height: 320px;
  background: #7ab8ff;
  top: -80px; right: -60px;
  animation: blob 14s ease-in-out infinite;
}
.hero .blob.b2 {
  width: 280px; height: 280px;
  background: #b9d2ff;
  bottom: -100px; left: -80px;
  animation: blob 18s ease-in-out infinite reverse;
}
.hero .blob.b3 {
  width: 180px; height: 180px;
  background: #cfe1ff;
  top: 40%; left: 35%;
  opacity: .35;
  animation: blob 22s ease-in-out infinite;
}
.hero .container { position: relative; z-index: 1; }

/* CTA strip animated gradient */
.cta-strip {
  background: linear-gradient(
    120deg,
    var(--blue) 0%,
    var(--blue-deeper) 30%,
    var(--blue) 60%,
    var(--blue-deeper) 100%
  );
  background-size: 300% 300%;
  animation: gradient-shift 9s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 80% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(400px 200px at 20% 100%, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
.cta-strip > * { position: relative; z-index: 1; }

/* Card icon idle animations */
.card .icon-lg          { transition: transform .25s ease; }
.card:hover .icon-lg    { transform: translateY(-4px) scale(1.06); }

.card .icon-lg.ico-pulse {
  animation: float-y-sm 3.5s ease-in-out infinite;
}
.card .icon-lg.ico-spin svg {
  animation: spin-slow 14s linear infinite;
  display: block;
}
.card .icon-lg.ico-bounce {
  animation: float-y 4s ease-in-out infinite;
}

/* Feature numbers — gentle pulse */
.feature .num {
  animation: float-y-sm 3.5s ease-in-out infinite;
}
.feature:nth-child(2) .num { animation-delay: .4s; }
.feature:nth-child(3) .num { animation-delay: .8s; }
.feature:nth-child(4) .num { animation-delay: 1.2s; }

/* Hero illustration */
.hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-height: 460px;
}
.hero-art svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 30px rgba(10,37,64,.18));
}
.hero-art .laptop-body { animation: float-y 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hero-art .gear-1 { transform-origin: 70px 70px; transform-box: fill-box; animation: spin-slow 12s linear infinite; }
.hero-art .gear-2 { transform-origin: 60px 60px; transform-box: fill-box; animation: spin-rev 16s linear infinite; }
.hero-art .wrench { animation: float-y 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hero-art .sparkle { animation: pulse-dot 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hero-art .sparkle-2 { animation: pulse-dot 2.4s ease-in-out infinite .8s; transform-origin: center; transform-box: fill-box; }
.hero-art .sparkle-3 { animation: pulse-dot 2.4s ease-in-out infinite 1.4s; transform-origin: center; transform-box: fill-box; }
.hero-art .wifi-wave-1 { transform-origin: center; transform-box: fill-box; animation: wifi-wave 2.2s ease-out infinite; }
.hero-art .wifi-wave-2 { transform-origin: center; transform-box: fill-box; animation: wifi-wave 2.2s ease-out infinite .55s; }
.hero-art .wifi-wave-3 { transform-origin: center; transform-box: fill-box; animation: wifi-wave 2.2s ease-out infinite 1.1s; }
.hero-art .scan-line { animation: scan 3.2s ease-in-out infinite; }
.hero-art .check-draw {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: draw 1.4s ease-out .4s forwards;
}
.hero-art .type-cursor { animation: type-cursor 1s steps(2) infinite; }

/* Wave-bars (visual on About / split visuals) */
.wave-bars {
  display: inline-flex; gap: 5px; align-items: end; height: 60px;
  margin-top: 8px;
}
.wave-bars span {
  width: 8px; height: 100%;
  background: rgba(255,255,255,.85);
  border-radius: 4px;
  transform-origin: bottom;
  animation: wave-bar 1.2s ease-in-out infinite;
}
.wave-bars span:nth-child(1) { animation-delay: 0s;   }
.wave-bars span:nth-child(2) { animation-delay: .15s; }
.wave-bars span:nth-child(3) { animation-delay: .3s;  }
.wave-bars span:nth-child(4) { animation-delay: .45s; }
.wave-bars span:nth-child(5) { animation-delay: .6s;  }
.wave-bars span:nth-child(6) { animation-delay: .75s; }
.wave-bars span:nth-child(7) { animation-delay: .9s;  }

/* Scroll fade-in */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Shimmer on price-card.featured ribbon */
.price-card.featured::before {
  background: linear-gradient(90deg,
    var(--blue) 0%, #4ea2f5 50%, var(--blue) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* Hero CTA button — subtle attention pulse */
.hero .btn.lg:first-of-type {
  position: relative;
  overflow: hidden;
}
.hero .btn.lg:first-of-type::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 70%; height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.35) 50%,
    transparent 100%);
  animation: shimmer-btn 3.5s ease-in-out infinite;
}
@keyframes shimmer-btn {
  0%, 30%   { left: -150%; }
  70%, 100% { left: 150%;  }
}

/* ========================================================
   WhatsApp floating action button
   ======================================================== */
.wa-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.42);
  z-index: 100;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(37,211,102,.55);
  text-decoration: none !important;
}
.wa-fab svg { width: 32px; height: 32px; fill: #fff; position: relative; z-index: 1; }
.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #25d366;
  animation: wa-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.wa-fab .wa-tip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  background: #0a2540;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: .9rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-fab:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(-4px); }
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* WhatsApp pill in topbar */
.topbar a.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37,211,102,.15);
  color: #6df0a3 !important;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.topbar a.wa-link:hover { background: rgba(37,211,102,.28); color: #fff !important; }

/* ========================================================
   DAWA — Adresse-autosuggest dropdown
   ======================================================== */
.dawa-wrap {
  position: relative;
}
.dawa-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(10,37,64,.14);
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.dawa-list.open { display: block; }
.dawa-list li {
  list-style: none;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
}
.dawa-list li:last-child { border-bottom: 0; }
.dawa-list li:hover,
.dawa-list li.active {
  background: var(--tint);
  color: var(--blue-deeper);
}
.dawa-list li mark {
  background: transparent;
  color: var(--blue);
  font-weight: 700;
}
.dawa-loading {
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--muted);
  font-style: italic;
}
.dawa-empty {
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--muted);
}

/* ========================================================
   Booking — taken slots greyed out
   ======================================================== */
select#b-tid option:disabled {
  color: #b9c5d4;
  font-style: italic;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .topbar .info span { display: block; margin-right: 0; }
  .menu-toggle { display: block; }
  nav.primary {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 14px 22px 22px;
  }
  nav.primary.open { display: block; }
  nav.primary ul { flex-direction: column; align-items: stretch; gap: 4px; }
  nav.primary a { padding: 12px 14px; }
  header.site .container { position: relative; }

  .cards { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  footer.site .grid { grid-template-columns: 1fr; gap: 24px; }
  .hero ul.checks { grid-template-columns: 1fr; }
  form.contact .form-grid { grid-template-columns: 1fr; }
  .cta-strip { padding: 30px 22px; }
}