/**
 * Home page only (redesigned 25 Sep 2026, made light/dark 25 Sep 2026).
 *
 * The page follows the site-wide light/dark switch. Shared components (cards,
 * tiles, product cards, the header, the map) are themed in main.css, so this
 * file only holds the pieces that belong to the home page: the hero, the
 * floating cards, the trust strip, the service cards and the section layouts.
 *
 * The --hd-* and --hero-* values below are this page's own colours. They are
 * set twice: once for light mode and once for dark. Change both, or the two
 * modes drift apart.
 */

:root {
  --hd-cyan: #0e7490;          /* teal accent, 5.1:1 on the light page */
  --hd-blue: #1d4ed8;
  --hd-violet: #6d28d9;
  --hd-panel: var(--surface-2);
  --hd-soft: rgba(11, 27, 51, 0.035);

  /* Hero backdrop: an aurora, not a pattern. Three very large soft pools —
     cyan behind the headline, blue/lavender behind the picture, and a
     faint lilac low down — over an almost white base. */
  --hero-bg:
    radial-gradient(1000px 680px at 2% -18%, rgba(219, 244, 255, 0.95), transparent 62%),
    radial-gradient(900px 640px at 100% -10%, rgba(232, 238, 255, 0.95), transparent 60%),
    radial-gradient(880px 560px at 62% 112%, rgba(238, 231, 255, 0.70), transparent 64%),
    linear-gradient(180deg, #f8fbff 0%, rgba(253, 254, 255, 0.55) 62%, rgba(248, 251, 255, 0) 100%);
  --hero-pattern: none;                  /* no grid in light mode */
  --hero-glow:
    radial-gradient(42% 46% at 20% 38%, rgba(59, 130, 246, 0.10), transparent 72%),
    radial-gradient(38% 44% at 80% 28%, rgba(13, 148, 136, 0.08), transparent 72%);
  --hero-photo-border: rgba(59, 130, 246, 0.20);
  --hero-photo-glow: radial-gradient(58% 58% at 50% 52%, rgba(59, 130, 246, 0.18), rgba(124, 58, 237, 0.10) 55%, transparent 74%);
  --hero-title-grad: linear-gradient(100deg, #0e7490, #1d4ed8 45%, #6d28d9);
  --hero-art-shadow: drop-shadow(0 26px 46px rgba(11, 27, 51, 0.28));
  --hero-photo-shadow:
    0 25px 60px rgba(15, 23, 42, 0.16),
    0 0 50px rgba(59, 130, 246, 0.10);

  --panel-band: linear-gradient(180deg, #f6f9ff, #eef4fd 60%, #f6f9ff);
}

:root[data-theme="dark"] {
  --hd-cyan: #5eead4;
  --hd-blue: #60a5fa;
  --hd-violet: #b9a5fd;
  --hd-soft: rgba(255, 255, 255, 0.045);

  --hero-bg:
    radial-gradient(120% 120% at 100% 0%, rgba(124, 58, 237, 0.18), transparent 55%),
    radial-gradient(100% 120% at 0% 10%, rgba(14, 165, 233, 0.16), transparent 55%),
    linear-gradient(180deg, #071022, #060c18 70%);
  --hero-pattern:
    linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px);
  --hero-photo-border: var(--line);
  --hero-photo-glow: none;
  --hero-glow:
    radial-gradient(38% 42% at 22% 40%, rgba(37, 99, 235, 0.30), transparent 70%),
    radial-gradient(34% 40% at 78% 30%, rgba(94, 234, 212, 0.16), transparent 70%);
  --hero-title-grad: linear-gradient(100deg, #67e8f9, #60a5fa 45%, #c4b5fd);
  --hero-art-shadow: drop-shadow(0 30px 60px rgba(2, 8, 23, 0.75));
  --hero-photo-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);

  --panel-band: linear-gradient(180deg, #080f1e, #0b1425 60%, #080f1e);
}

/* A band that lifts slightly away from the page behind it. */
.section--panel {
  background: var(--panel-band);
  border-block: 1px solid var(--line-soft);
}

/* The one gradient call-to-action button. The same in both modes. */
.btn--glow {
  background-image: linear-gradient(120deg, #1d4ed8, #2563eb 45%, #7c3aed);
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 30px -12px rgba(59, 130, 246, 0.85);
}
.btn--glow:hover {
  background-image: linear-gradient(120deg, #1e40af, #2563eb 45%, #6d28d9);
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(124, 58, 237, 0.9);
}

/* ---------- Hero ---------- */
.hero-x {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 64px);
  background: var(--hero-bg);
}
/* faint grid + two soft glows */
.hero-x::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--hero-pattern);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 85%);
}
.hero-x__glow {
  position: absolute; inset: -20% -10% auto; height: 620px; z-index: -1; pointer-events: none;
  background: var(--hero-glow);
  filter: blur(6px);
}

.hero-x__inner { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
.hero-x__copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hero-x__eyebrow { color: var(--hd-cyan); }
.hero-x__title { color: var(--heading); letter-spacing: -0.015em; }
.hero-x__accent {
  background: var(--hero-title-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-x__lead { color: var(--text); max-width: 36em; }
.hero-x__note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-small); }
.hero-x__note .icon { width: 18px; height: 18px; color: var(--hd-cyan); flex: none; }

.hero-x__visual { min-width: 0; }
.hero-x__stage { position: relative; }
/* A soft bloom behind the picture, so it sits in the hero rather than on it. */
.hero-x__stage::before {
  content: "";
  position: absolute; inset: -9% -7%; z-index: -1;
  background: var(--hero-photo-glow);
  filter: blur(34px);
  pointer-events: none;
}
.hero-x__photo {
  display: block; width: 100%; height: auto;
  border-radius: 22px;
  border: 1px solid var(--hero-photo-border);
  box-shadow: var(--hero-photo-shadow);
}

/* Phones: gentler hero decoration, and a smaller bloom behind the picture. */
@media (max-width: 767px) {
  :root {
    --hero-bg:
      radial-gradient(680px 460px at 0% -12%, rgba(219, 244, 255, 0.70), transparent 64%),
      radial-gradient(620px 420px at 100% -4%, rgba(232, 238, 255, 0.70), transparent 62%),
      linear-gradient(180deg, #f8fbff 0%, rgba(253, 254, 255, 0.5) 60%, rgba(248, 251, 255, 0) 100%);
    --hero-glow: radial-gradient(60% 60% at 30% 36%, rgba(59, 130, 246, 0.07), transparent 74%);
    --hero-photo-glow: radial-gradient(60% 60% at 50% 52%, rgba(59, 130, 246, 0.12), transparent 76%);
    --hero-photo-shadow:
      0 16px 36px rgba(15, 23, 42, 0.14),
      0 0 30px rgba(59, 130, 246, 0.08);
  }
  .hero-x__stage::before { inset: -6% -4%; filter: blur(24px); }
}

/* ---------- Trust strip ---------- */
.trust-strip {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 14px 8px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--hd-soft);
}
.trust-strip__item, .trust-strip__item a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-small); color: var(--text);
}
.trust-strip__item a { min-height: var(--tap); color: var(--text); text-decoration: none; }
.trust-strip__item a:hover { color: var(--heading); }
.trust-strip .icon { width: 18px; height: 18px; color: var(--hd-cyan); flex: none; }

/* ---------- Service cards ---------- */
.service-grid {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);        /* phones: one column */
}
@media (min-width: 680px) {                      /* tablets: two */
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {                     /* desktop: three */
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.svc-card {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  background: var(--hd-panel);
  border: 1px solid var(--line);
  color: var(--text); text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* A hairline of the card's accent along the top edge. */
.svc-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, var(--svc-accent, var(--hd-blue)), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; transition: opacity .2s ease; pointer-events: none; z-index: 2;
}
.svc-card--cyan { --svc-accent: var(--hd-cyan); }
.svc-card--blue { --svc-accent: var(--hd-blue); }
.svc-card--violet { --svc-accent: var(--hd-violet); }

/* ---- the picture ---- */
.svc-card__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0a1426;          /* matches the artwork, so no flash while it loads */
  border-bottom: 1px solid var(--line);
}
.svc-card__image {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
/* The icon sits on the picture, tying the card to the rest of the site. */
.svc-card__icon {
  position: absolute; left: 16px; bottom: 16px;
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(8, 17, 34, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--svc-accent);
  backdrop-filter: blur(6px);
}
.svc-card__icon .icon { width: 22px; height: 22px; }

/* ---- the words ---- */
.svc-card__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 22px 22px;
  flex: 1 1 auto;
}
.svc-card__title { font-size: 1.125rem; font-stretch: normal; color: var(--heading); }
.svc-card__text { color: var(--muted); font-size: var(--fs-small); }
.svc-card__more {
  margin-top: auto; padding-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--svc-accent); font-weight: 600; font-size: var(--fs-small);
}
.svc-card__more .icon { width: 18px; height: 18px; transition: transform .2s ease; }

/* ---- hover: a small lift, a slow zoom, the arrow nudges ---- */
.svc-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.svc-card:hover::before { opacity: 1; }
.svc-card:hover .svc-card__image { transform: scale(1.06); }
.svc-card:hover .svc-card__more .icon { transform: translateX(4px); }
.svc-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card__image, .svc-card__more .icon { transition: none; }
  .svc-card:hover { transform: none; }
  .svc-card:hover .svc-card__image { transform: none; }
}

/* ---------- Shop teaser ---------- */
.home-shop { display: grid; gap: var(--space-7); align-items: center; }
.home-shop__tiles {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.home-shop__tiles .tile { height: 100%; }
@media (max-width: 479px) {
  .home-shop__tiles .tile { padding: 18px 16px; gap: 14px; }
}
@media (min-width: 700px) {
  .home-shop__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 1000px) {
  .home-shop { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr); gap: var(--space-8); }
}
.home-featured { margin-top: var(--space-7); }
.home-featured__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }

/* ---------- Data recovery panel ----------
   The panel itself is a dark feature block in both modes (see main.css). */
.home-recovery__art {
  display: grid; place-items: center;
  background-color: #0a1526;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: var(--space-5);
}
.home-recovery__art svg { width: 100%; max-width: 460px; height: auto; }

/* ---------- Visit ---------- */
.home-visit { display: grid; gap: var(--space-7); }
.home-visit__details {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.home-visit__details div { display: flex; flex-direction: column; gap: 6px; }
.home-visit__details dd { margin: 0; color: var(--text); }
@media (min-width: 1000px) {
  .home-visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8); }
}

/* ---------- Layout at larger sizes ---------- */
@media (min-width: 900px) {
  .hero-x__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* ---------- Motion (kept subtle, and off when the visitor prefers that) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-x__copy > *, .hero-x__visual { animation: hd-rise .6s cubic-bezier(.2, .7, .3, 1) both; }
  .hero-x__copy > *:nth-child(2) { animation-delay: .06s; }
  .hero-x__copy > *:nth-child(3) { animation-delay: .12s; }
  .hero-x__copy > *:nth-child(4) { animation-delay: .18s; }
  .hero-x__copy > *:nth-child(5) { animation-delay: .24s; }
  .hero-x__visual { animation-delay: .1s; }
}
@keyframes hd-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}