/* ═══════════════════════════════════════════════════════════════════
   Service Safe Ltd — Home page
   Hero banner, floating stat panel, horizontally scrollable rows,
   about, testimonials, pricing, contact.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero card ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 52vh, 540px);
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background:
    radial-gradient(ellipse 74% 82% at 82% 12%, rgba(125, 201, 255, 0.16), transparent 66%),
    radial-gradient(ellipse 60% 60% at 6% 96%, rgba(125, 201, 255, 0.07), transparent 66%),
    var(--surface-1);
}

/* Background video. Starts hidden and is faded in by js/hero-video.js,
   which also dips the opacity at each end of the loop so the seam is not
   a visible jump. Opacity is driven from script, so no transition here. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Keeps the headline legible over whatever frame is on screen */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, var(--surface-1) 0%, rgba(13, 17, 20, 0.86) 38%, rgba(13, 17, 20, 0.42) 72%, rgba(13, 17, 20, 0.55) 100%),
    linear-gradient(0deg, rgba(6, 8, 9, 0.55), rgba(6, 8, 9, 0.15));
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.hero__canvas.is-ready { opacity: 1; }
/* The node graph is decoration for the static background; with footage
   behind it the two compete, so it steps aside once the video runs. */
.hero.has-video .hero__canvas { opacity: 0; }

.hero__inner { z-index: 3; }

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  padding: 0;
}

.hero__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.hero__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}

.hero h1 { margin: var(--sp-2) 0; font-weight: 700; font-size: clamp(1.875rem, 3.6vw, 3rem); }
.hero .lede { font-size: clamp(0.875rem, 1.2vw, 0.9375rem); max-width: 52ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

/* Stat strip — its own panel directly under the hero card */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.hero-stat {
  padding: clamp(16px, 2.4vw, 24px) clamp(12px, 2vw, 24px);
  text-align: center;
  border-right: 1px solid var(--border);
}
.hero-stat:last-child { border-right: none; }
.hero-stat__value {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--accent);
}
.hero-stat__label {
  display: block;
  margin-top: var(--sp-05);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

@media (max-width: 720px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat:nth-child(2) { border-right: none; }
  .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* ── Horizontal rows ───────────────────────────────────────────────── */
.row { position: relative; margin-bottom: clamp(40px, 5vw, 64px); }
.row:last-child { margin-bottom: 0; }

.row__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.row__title { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 700; }
.row__sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-05); }

.row__nav { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.row__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.row__btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}
.row__btn:disabled { opacity: 0.3; cursor: default; }
.row__btn svg { width: 17px; height: 17px; }

.row__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(272px, 100%), 1fr);
  gap: var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* bleed so cards can lift without clipping */
  padding: var(--sp-1) var(--sp-05) var(--sp-3);
  margin: calc(var(--sp-1) * -1) calc(var(--sp-05) * -1) calc(var(--sp-3) * -1);
}
.row__track::-webkit-scrollbar { display: none; }
.row__track > * { scroll-snap-align: start; }

@media (min-width: 900px) { .row__track { grid-auto-columns: minmax(min(300px, 100%), 1fr); } }
@media (prefers-reduced-motion: reduce) { .row__track { scroll-behavior: auto; } }

/* ── Tile (row card) ───────────────────────────────────────────────── */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 246px;
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}

.tile:hover, .tile:focus-visible {
  transform: translateY(-4px);
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.tile:hover .tile__icon { background: var(--accent); color: var(--on-accent); }
.tile:hover .tile__link { gap: 11px; }

/* Artwork sits in the top-left corner in place of an icon chip, so the
   card needs a little more headroom above the title. */
.tile.art-wash { --art-opacity: 0.2; --art-opacity-hover: 0.36; padding-top: var(--sp-6); }
.tile.art-wash .tile__title { margin-top: auto; }

.tile--featured { border-color: var(--accent-line); }
.tile--featured::after {
  content: 'Popular';
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-thumb);
  background: var(--accent-soft);
  color: var(--accent);
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.tile__icon svg { width: 22px; height: 22px; }

.tile__title { font-size: 1.0625rem; font-weight: 700; }
.tile__body { font-size: var(--fs-sm); color: var(--text-2); flex-grow: 1; }
.tile__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--t-fast) var(--ease);
}
.tile__link svg { width: 15px; height: 15px; }

/* ── Tech marquee ──────────────────────────────────────────────────── */
.marquee { margin-top: clamp(40px, 5vw, 64px); }
.marquee__label {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}
.marquee__stage {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-3);
  animation: marquee-slide 42s linear infinite;
}
.marquee__stage:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__stage { overflow-x: auto; }
}

.tech-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 10px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
}
/* Monochrome marks — the palette stays accent-only */
.tech-chip img { width: 20px; height: 20px; object-fit: contain; opacity: 0.72; }

/* ── About ─────────────────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

.about__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } }

.metric {
  padding: var(--sp-3) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.metric:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.metric__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-1);
}
.metric__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-control);
  background: var(--accent-soft);
  color: var(--accent);
}
.metric__icon svg { width: 16px; height: 16px; }

/* Photographic variant. The accent gradient is kept and laid over the
   image, so the chip reads as part of the same system as the glyph
   version it replaces. Larger than 32px because a photograph needs the
   room to be legible. */
.metric__icon--img {
  width: 46px;
  height: 46px;
  border-radius: var(--r-thumb);
  border: 1px solid var(--accent-line);
  background-image:
    linear-gradient(150deg, rgba(125, 201, 255, 0.5) 0%, rgba(125, 201, 255, 0.12) 48%, rgba(6, 8, 9, 0.3) 100%),
    var(--art);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.metric:hover .metric__icon--img {
  transform: scale(1.06);
  border-color: var(--accent);
}
.metric__pct {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-1);
}
.metric__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 10px;
}
.metric__bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.metric__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 1.1s var(--ease);
}

/* Terminal panel */
.terminal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
/* Neutral window dots — the palette carries no red/amber/green */
.terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.terminal__dot--g { background: var(--accent-line); }
.terminal__body {
  margin: 0;
  padding: var(--sp-3);
  min-height: 250px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--accent);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Testimonials ──────────────────────────────────────────────────── */
.review-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
/* Both marks are dark-on-light artwork, so they sit on a light chip
   rather than being recoloured — keeps each brand's mark intact. */
.review-logo {
  display: block;
  padding: 12px 20px;
  background: #EEF2F5;
  border-radius: var(--r-thumb);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.review-logo:hover { transform: translateY(-4px); background: #FFFFFF; }
.review-logo img { height: 32px; width: auto; object-fit: contain; }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 246px;
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.review:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.review__stars { color: var(--star); font-size: 1rem; letter-spacing: 0.12em; }
.review__quote {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.75;
  flex-grow: 1;
}
.review__footer {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.review__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}
.review__name { font-size: var(--fs-sm); font-weight: 600; font-style: normal; color: var(--text-1); }

/* ── Pricing ───────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-3);
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.plan--popular {
  background: var(--surface-2);
  border-color: var(--accent);
}
.plan--popular:hover { border-color: var(--accent); }

.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-pill);
  padding: 5px 16px;
  white-space: nowrap;
}

.plan__name { font-size: 1.1875rem; font-weight: 700; }
.plan__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: var(--sp-05);
}
.plan__price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-top: var(--sp-3);
  color: var(--text-1);
}
.plan__from {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: center;
  margin-right: 6px;
}
.plan__currency { font-size: 1.375rem; font-weight: 700; margin-top: 6px; }
.plan__amount { font-size: 2.875rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan__amount sup { font-size: 1.375rem; }
.plan__delivery { font-size: var(--fs-sm); color: var(--text-2); margin-top: 6px; }

.plan__divider {
  height: 1px;
  background: var(--border);
  margin-block: var(--sp-3);
}

.plan__features { flex-grow: 1; margin-bottom: var(--sp-3); }
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 12px;
}
.plan__features svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--accent);
}
.plan__features strong { color: var(--accent); font-weight: 700; }

.plan .btn { width: 100%; }

.pricing-note {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: var(--sp-4);
}
.pricing-note a { color: var(--accent); font-weight: 500; }
.pricing-note a:hover { text-decoration: underline; }

/* ── Contact ───────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }

.contact-detail {
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.contact-detail strong {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-05);
}
.contact-detail a, .contact-detail span, .contact-detail button {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-1);
}
.contact-detail a, .contact-detail button {
  transition: color var(--t-fast) var(--ease);
}
.contact-detail button { text-align: left; }
.contact-detail a:hover, .contact-detail button:hover { color: var(--accent); }

.globe-wrap { margin-top: var(--sp-4); text-align: center; }
#contact-globe {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin-inline: auto;
  opacity: 0;
  cursor: grab;
  transition: opacity 0.9s var(--ease);
}
.globe-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 10px;
}

/* ── Forms (shared by home + web-app-security) ─────────────────────── */
.form-card {
  padding: clamp(24px, 3.5vw, 32px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
}

.form-group { margin-bottom: var(--sp-3); }
.form-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--sp-1);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  color: var(--text-1);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  background: var(--surface-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-textarea { resize: vertical; min-height: 132px; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6AFB8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 17px;
  padding-right: 44px;
}
.form-select option { background: var(--surface-2); color: var(--text-1); }

.form-status {
  display: none;
  margin-top: var(--sp-2);
  padding: 13px 16px;
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.form-status.is-ok  { display: block; background: var(--ok-bg);  color: var(--ok);  border: 1px solid var(--ok-line); }
.form-status.is-err { display: block; background: var(--err-bg); color: var(--err); border: 1px solid var(--err-line); }

.form-card .btn { width: 100%; margin-top: var(--sp-05); }