/* ============================
   Digiwrist — Hero Section
   ============================ */

:root {
  --nav-bg: #232527;
  --nav-height: 72px;
  --green-1: #12a90f;
  --green-2: #0b6b09;
  --blue-1: #0574bc;
  --blue-2: #034a72;
  --navy: #23538f;
  --panel-bg: #f4f7fe;
  --text-white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #000;
}

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

a { text-decoration: none; color: inherit; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.15s ease;
  border: none;
  cursor: pointer;
}

.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-shop {
  background: linear-gradient(180deg, var(--green-1) 0%, var(--green-2) 100%);
  color: #fff;
}

.btn-login {
  background: linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 100%);
  color: #fff;
}

.nav-actions .btn {
  padding: 10px 26px;
  font-size: 15px;
}

.hero-actions .btn {
  padding: 0.9cqw 3cqw;
  font-size: 1.4cqw;
}

/* ---------- Navbar ---------- */

.navbar {
  background: var(--nav-bg);
  height: var(--nav-height);
  position: relative;
  z-index: 50;
}

.nav-inner {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.logo { flex-shrink: 0; display: flex; align-items: center; }
.logo img { height: 32px; width: auto; }

/* Transparent wrapper on desktop so .nav-links / .nav-actions
   still lay out as direct flex children of .nav-inner */
.nav-collapsible { display: contents; }

.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.nav-links a {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.92;
  transition: opacity 0.15s ease;
  /* Mo2 2026-09-18 — "Flag Football" wrapped to two lines at 1280 and broke the
     nav row. Links never wrap; the gap tightens instead as the bar narrows. */
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active { opacity: 1; }

.nav-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #b8c0c8;
  /* Layer 0 — the field photo, full-bleed. The sharp asset is only 815px wide, so the bleed is a
     blurred cover of the same photo (hero-bg-blur.jpg) and the sharp copy sits centred over it in
     the stage; the white run-out at the bottom is the gradient on top. Mo6 2026-09-06, Romano:
     "background image, words, product, antenna in front". */
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.55) 80%, #ffffff 93%, #ffffff 100%),
    url('/assets/images/hero-bg-blur.jpg') center top / cover no-repeat,
    #b8c0c8;
}

.hero-stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 886;
  container-type: inline-size;
}

/* Layer 1 — solid headline. Layer 2 — the sharp photo over it. Layer 3 — a hollow duplicate of
   the headline over the photo, so a letter that crosses the player shows only as a white outline
   (the "inlay" in Aymen's reference; Romano 2026-09-06: "inlaid how they had it"). */

.hero-headline {
  position: absolute;
  top: 0.9%;
  left: 0;
  width: 100%;
  padding: 0 8.3%;
  display: flex;
  flex-direction: column;
  z-index: 1;
  pointer-events: none;
}

.hero-player {
  position: absolute;
  left: 16.5%;
  top: -1%;
  width: 52%;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  /* the asset ends in a hard horizontal cut at the shorts and a white mask block bottom-left;
     dissolve the bottom fifth into the page instead of showing the edge */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 97%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 97%);
}

.hero-headline--outline {
  z-index: 3;
}

.hero-headline--outline .line {
  color: transparent;
  -webkit-text-stroke: 0.12cqw var(--text-white);
  text-shadow: none;
}

.hero-headline .line {
  display: block;
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-white);
  font-size: 7.45cqw;
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.hero-headline .line-split {
  display: flex;
  justify-content: space-between;
  white-space: normal;
  margin-top: 1.6cqw;
}

.hero-headline em { font-style: normal; }

.hero-headline--mobile { display: none; }

/* HERO BUILD-UP (Romano by voice, 2026-09-06 11:41): "just the player and the words first" —
   product layers and the hero CTAs are switched off while he judges the photo + headline.
   Delete this block to bring them back. */
.hero-tablet, .hero-devices, .hero-actions, .hero-actions-mobile { display: none !important; }

/* 12:03 — Romano dropped "dwt hero.mp4" (Grok, 1280x720, 6 s push-in on the three teams under the
   neon logo). It replaces the still as the hero background: full-bleed, muted loop (tail cross-
   faded into the head so the loop has no jump), poster = first frame. The still and its inlay
   outline are off while the video is the ground. */
.hero-player, .hero-headline--outline { display: none !important; }
/* 12:06 — "remove the words altogether. The video's taken in too tight": headline off, and the hero
   takes the video's own 16:9 so nothing is cropped off the sides (the stage's 1440/886 was
   zooming it). */
.hero-headline { display: none !important; }
.hero-stage { aspect-ratio: 16 / 9; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  pointer-events: none;
}

.hero-stage { z-index: 1; }

/* 12:08 — "pause frame at around four seconds, freeze there, CTA comes in" → 12:16 "a true CTA
   tile, not just shop and log in — look at how we do our other sites". Same pattern as
   117industries / livesafford / dwt.117: eyebrow → two-line headline with an accent line → subline
   → primary + secondary pill → contact line. The clip plays once; main.js pauses it at
   HERO_FREEZE_AT (3 s, Romano 12:17) and adds .is-frozen, which fades the tile up. */
.hero-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;            /* 12:31 — "center it" */
  z-index: 2;
  padding: 0 4% 4.5%;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}
.hero.is-frozen .hero-cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* 12:28 — Romano: "bottom third of the page, only about a third width, don't go full width,
   stack Buy Now / Portal underneath." One column, a third of the frame, bottom-left. */
.hero-tile {
  width: 36%;
  min-width: 400px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: clamp(18px, 1.7vw, 28px) clamp(20px, 2vw, 32px);
  border-radius: 16px;
  background: rgba(8, 14, 22, 0.62);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  color: var(--text-white);
}
.hero-tile-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(64, 196, 255, 0.45);
  background: rgba(5, 116, 188, 0.22);
  color: #7fdcff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Mo2 2026-09-18 — the 4-up "No Cell | No Wifi | No Bluetooth | No Infrastructure" badge
   overran the tile at 390px and clipped the last word. Shrink, then let it wrap. */
@media (max-width: 520px) {
  .hero-tile-eyebrow { font-size: 9px; letter-spacing: .06em; padding: 5px 9px; white-space: normal; text-align: center; line-height: 1.45; }
}
.hero-tile-eyebrow i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #40c4ff;
  box-shadow: 0 0 10px #40c4ff;
}
.hero-tile-title {
  margin: 10px 0 0;
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.3vw, 36px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.hero-tile-title em {
  font-style: normal;
  color: #40c4ff;
}
.hero-tile-sub {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.45;
  color: rgba(255,255,255,0.86);
  max-width: 44ch;
}
.hero-tile-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.hero-tile-actions .btn {
  position: static;
  padding: clamp(11px, 0.9vw, 15px) clamp(18px, 1.6vw, 28px);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 700;
  white-space: nowrap;
}
.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
}
.hero-tile-contact {
  grid-column: 3;
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  text-align: right;
  white-space: nowrap;
}
.hero-tile-contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero-tile-contact span { margin: 0 8px; }
/* 12:25 — Romano: "zero infrastructure, instant wireless play call delivery, buy now, portal,
   phone number, book demo right underneath" — the pitch paragraph is gone. */
.hero-tile-go { display: flex; flex-direction: column; align-items: center; margin-top: 18px; }
.hero-tile-actions { justify-content: center; }
.hero-tile-contact { grid-column: auto; margin-top: 12px; text-align: center; }
/* Mo2 2026-09-18, Romano: "remove book a demo there and enlarge miltons phone number
   and center it" — the number is now the only thing on the line, so it carries it. */
.hero-tile-contact--big { margin-top: 14px; text-align: center; }
.hero-tile-contact--big a {
  display: inline-block;
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.hero-tile-contact--big a:hover { color: #7fdcff; }
@media (max-width: 860px) {
  .hero-cta { padding: 0 3% 4%; }
  .hero-tile { width: 100%; min-width: 0; max-width: none; padding: 14px 16px 16px; border-radius: 12px; }
  /* Mo4 2026-09-22, Romano: "miltons phone number needs to be centered also".
     These three were left-aligning the whole tile on phones, and
     `.hero-tile-contact{text-align:left}` here outranked the centering on
     `--big` above purely by coming later in the file. Centred to match desktop. */
  .hero-tile-go { align-items: center; }
  .hero-tile-title { font-size: clamp(20px, 6vw, 28px); white-space: normal; text-align: center; }
  .hero-tile-actions { justify-content: center; }
  .hero-tile-actions .btn { padding: 10px 18px; font-size: 14px; }
  .hero-tile-contact { text-align: center; margin: 0; }
  .hero-tile-contact--big { text-align: center; margin-top: 12px; }
  .hero-tile-eyebrow { font-size: 10px; }
}

/* Tablet mockup */

.hero-tablet {
  position: absolute;
  left: 30.4%;
  top: 30%;
  width: 40.7%;
  z-index: 4;
}

/* Devices row (wristbands + OLED units + hub) — the hub antenna is part of this asset and this
   layer is above the tablet, so the antenna is always in front of the screen. */

.hero-devices {
  position: absolute;
  left: 1%;
  top: 34.8%;
  width: 98%;
  z-index: 5;
}

/* Shop / Login CTAs — positioned independently (not a
   space-between pair) so the gap between them stays fixed
   to the hub graphic instead of stretching with the container */

.hero-actions {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.hero-actions .btn {
  position: absolute;
  top: 80.8%;
  pointer-events: auto;
}

.hero-actions .btn-shop { left: 37.8%; }
.hero-actions .btn-login { left: 53.8%; }

/* Full-width stacked CTAs used on mobile only */

.hero-actions-mobile {
  display: none;
}

.btn-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  padding: 3.2% 0;
}

.btn-mobile-shop {
  background: linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 100%);
  color: #fff;
}

.btn-mobile-login {
  background: #fff;
  color: var(--blue-1);
  border: 2px solid var(--blue-1);
}

/* Fallback font-size for browsers without container query units */
@supports not (width: 1cqw) {
  .hero-headline .line { font-size: 7.45vw; }
  .hero-actions .btn { font-size: 1.4vw; }
  .hero-headline--outline .line { -webkit-text-stroke-width: 0.12vw; }
}

/* ============================
   Nav — collapses to a hamburger menu any time the full
   link set + buttons no longer comfortably fit (roughly
   below 1240px), independent of the hero breakpoint below.
   ============================ */

/* Mo2 2026-09-18 — 7th nav item (Flag Football). Tighten the gap before collapsing. */
@media (max-width: 1400px) { .nav-links { gap: 22px; } .nav-inner { gap: 14px; } }
@media (max-width: 1300px) { .nav-links { gap: 16px; } .nav-links a { font-size: 12.5px; letter-spacing: .02em; } }

@media (max-width: 1240px) {

  .nav-inner { padding: 0 20px; gap: 16px; }
  .nav-collapsible { display: none; }
  .nav-toggle { display: flex; }
  .logo img { height: 26px; }

  .nav-collapsible.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    padding: 20px;
    gap: 20px;
    z-index: 60;
  }

  .nav-collapsible.open .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
  }

  .nav-collapsible.open .nav-actions {
    gap: 14px;
  }
}

/* ============================
   Mobile — hero recomposition for narrow viewports
   ============================ */

@media (max-width: 860px) {

  /* Mo2 2026-09-18 — the white run-out was built for the DESKTOP composition, where the
     product layers sat on white. In the stacked phone layout it showed as a white band
     behind the CTA tile. Flat dark ground instead; it runs into .loadout below it. */
  .hero { background: #0a1020; }

  .hero-stage {
    aspect-ratio: 430 / 605;
  }

  .hero-headline--desktop { display: none; }
  .hero-headline--mobile { display: flex; }

  .hero-headline {
    top: 23%;
    padding: 0 3%;
    z-index: 1;
  }

  .hero-headline--outline { z-index: 3; }

  .hero-headline .line {
    font-size: 10.4cqw;
    line-height: 1.27;
    letter-spacing: -0.005em;
  }

  .hero-player {
    left: 3%;
    top: 11%;
    width: 93%;
    z-index: 2;
  }

  .hero-tablet {
    left: 23%;
    top: 60%;
    width: 54%;
  }

  .hero-devices {
    left: 0%;
    top: 63.5%;
    width: 100%;
  }

  .hero-actions--desktop { display: none; }

  .hero-actions-mobile {
    display: flex;
    flex-direction: column;
    gap: 3%;
    position: absolute;
    left: 8%;
    width: 84%;
    top: 81%;
    z-index: 6;
  }

  .btn-mobile { font-size: 4.2cqw; margin-top: 10px; }

  @supports not (width: 1cqw) {
    .hero-headline .line { font-size: 10.4vw; }
    .btn-mobile { font-size: 4.2vw; }
  }
}

/* ============================
   Social Proof
   ============================ */

.social-proof {
  background: #fff;
  padding: 66px 24px 64px;
}

.sp-container {
  max-width: 1280px;
  margin: 0 auto;
}

.sp-header {
  text-align: center;
  margin-bottom: 48px;
}

.sp-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.75rem;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  text-transform: uppercase;
}

.sp-subtitle {
  color: #7a7a7a;
  font-size: 0.95rem;
  margin-top: 8px;
}

/* Join Winners grid */

.jw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.jw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 2.31 / 1;
  border-radius: 6px;
  overflow: hidden;
  padding: 0 16px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  isolation: isolate;
}

.jw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.75) 32%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.05) 100%);
  z-index: -1;
}

.jw-year {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.jw-year::before,
.jw-year::after {
  content: "—";
  margin: 0 6px;
  opacity: 0.8;
}

.jw-name {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ecbc4c;
  text-transform: uppercase;
}

.jw-division {
  color: #e6e6e6;
  font-size: 0.78rem;
  margin-top: 3px;
}

/* Case study cards */

.sp-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sp-case {
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  overflow: hidden;
}

.sp-case-media {
  position: relative;
  line-height: 0;
}

.sp-case-media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.sp-badge {
  position: absolute;
  top: 40px;
  left: 64px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.sp-badge-ring {
  --pct: 40;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(var(--blue-1) calc(var(--pct) * 3.6deg), #dcdcdc 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-badge-ring span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--blue-1);
}

.sp-badge p {
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  white-space: nowrap;
}

.sp-case-body {
  padding: 28px 32px 32px;
}

.sp-case-eyebrow {
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sp-case-title {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #0a0a0a;
  line-height: 1.25;
  margin-bottom: 14px;
}

.sp-case-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #7a7a7a;
}

@media (max-width: 900px) {
  .jw-grid {
    grid-template-columns: 1fr;
  }

  .jw-card {
    aspect-ratio: auto;
    min-height: 96px;
  }

  .sp-cases {
    grid-template-columns: 1fr;
  }

  .sp-title { font-size: 2.4rem; }
}

@media (max-width: 480px) {
  .social-proof { padding: 64px 16px; }

  .sp-title { font-size: 2rem; }

  .sp-case-title { font-size: 1.25rem; }
}

/* ============================
   How Digiwrist Helps Teams Win (bento stats grid)
   ============================ */

.dbn {
  background: #fff;
  padding: 66px 24px 96px;
}

.dbn-container {
  max-width: 1280px;
  margin: 0 auto;
}

.dbn-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  grid-template-areas:
    "security   numbers deliverability"
    "satisfaction numbers champions"
    "sports     ministats protect";
  gap: 16px;
}

.dbn-area-security      { grid-area: security; }
.dbn-area-numbers       { grid-area: numbers; }
.dbn-area-deliverability{ grid-area: deliverability; }
.dbn-area-satisfaction  { grid-area: satisfaction; }
.dbn-area-champions     { grid-area: champions; }
.dbn-area-sports        { grid-area: sports; }
.dbn-area-ministats     { grid-area: ministats; }
.dbn-area-protect       { grid-area: protect; }

.dbn-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px 28px;
  min-height: 230px;
}

.dbn-card--dark  { background: #000; color: #fff; }
.dbn-card--light { background: #f5f7fb; }
.dbn-card--white { background: #f1f4fb; }

.dbn-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.dbn-label {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 6px;
}

.dbn-stat {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 8px;
}

.dbn-card--light .dbn-stat,
.dbn-card--white .dbn-stat { color: #0a0a0a; }

.dbn-stat--blue  { color: var(--blue-1) !important; }
.dbn-stat--green { color: #074423 !important; }

.dbn-lead {
  font-size: 1rem;
  line-height: 1.4;
  color: inherit;
  max-width: 62%;
}

.dbn-card--dark .dbn-lead { color: #fff; }

.dbn-sub {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #8a8a8a;
  margin-top: 8px;
  max-width: 70%;
}

.dbn-card--dark .dbn-sub { color: #b9b9b9; }

/* Photos anchored into their card corner */

.dbn-photo { position: absolute; display: block; }

.dbn-photo--football {
  right: -6px;
  bottom: 0;
  width: 46%;
  max-width: 190px;
}

.dbn-photo--baseball {
  right: 0;
  bottom: 0;
  width: 42%;
  max-width: 170px;
}

.dbn-photo--hub {
  right: 18px;
  top: 20px;
  width: 34%;
  max-width: 130px;
}

.dbn-photo--trophy {
  right: 14px;
  bottom: 10px;
  width: 40%;
  max-width: 130px;
}

.dbn-photo--tablets {
  right: 10px;
  bottom: 10px;
  width: 46%;
  max-width: 150px;
}

.dbn-photo--wristpair {
  left: 26px;
  bottom: 24px;
  width: 56%;
  max-width: 260px;
}

/* By The Numbers card */

.dbn-area-numbers {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 55% at 90% 100%, rgba(5,116,188,0.14), rgba(5,116,188,0) 70%),
    #f5f7fb;
}

.dbn-pill {
  display: inline-block;
  align-self: flex-start;
  background: #d7e7f3;
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.dbn-headline {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 16px;
}

.dbn-headline em {
  font-style: normal;
  color: var(--blue-1);
}

.dbn-area-numbers .dbn-lead {
  max-width: 90%;
  margin-bottom: 100px;
}

/* Icon circles */

.dbn-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.dbn-icon-circle--green { background: #dde8e2; }
.dbn-icon-circle--blue  { background: #d7e7f3; }

.dbn-icon-circle img { width: 20px; height: auto; }

/* Mini stats + footer card */

.dbn-mini-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.dbn-mini { flex: 1; }

.dbn-mini-title {
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.dbn-mini-title--blue  { color: var(--blue-1); }
.dbn-mini-title--green { color: #0a6b34; }

.dbn-mini .dbn-sub { max-width: 100%; margin-top: 0; }

.dbn-mini-divider {
  border: none;
  border-top: 1px solid #e2e6ee;
  margin: 0 0 18px;
}

.dbn-footer-row {
  display: flex;
  align-items: center;
  gap: 22px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #0a0a0a;
}

.dbn-footer-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dbn-footer-note {
  margin-left: auto;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0a0a0a;
}

@media (max-width: 900px) {
  .dbn-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "security"
      "numbers"
      "deliverability"
      "satisfaction"
      "champions"
      "sports"
      "ministats"
      "protect";
  }

  .dbn-headline { font-size: 2rem; }
  .dbn-area-numbers .dbn-lead { margin-bottom: 24px; }
  .dbn-photo--wristpair { position: static; margin-top: 16px; width: 70%; }
}

@media (max-width: 480px) {
  .dbn { padding: 48px 16px 64px; }
  .dbn-card { padding: 22px; min-height: 200px; }
  .dbn-stat { font-size: 2.6rem; }
  .dbn-mini-row { flex-direction: column; gap: 18px; }
  .dbn-footer-row { flex-wrap: wrap; row-gap: 10px; }
  .dbn-footer-note { margin-left: 0; width: 100%; }
}

/* ============================
   Ecosystem (Designed To Win)
   ============================ */

.ecosystem {
  background: #fff;
  padding: 64px 24px 0px;
}

.eco-container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.eco-eyebrow {
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.eco-headline {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 18px;
}

.eco-headline em {
  font-style: normal;
  color: var(--blue-1);
}

.eco-lead {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a4a4a;
  max-width: 640px;
  margin: 0 auto 40px;
}

.eco-card {
  background: linear-gradient(135deg, #f6f9ff 0%, #eef3fd 55%, #e6effd 100%);
  border-radius: 24px;
  padding: 48px;
  text-align: left;
  overflow: hidden;
}

.eco-card-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 24px;
}

.eco-card-left {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.eco-see-specs {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
}

.eco-minicards {
  grid-column: 1 / 3;
  grid-row: 2;
  align-self: end;
  width: 68%;
  margin-left: auto;
}

.eco-card-right {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  aspect-ratio: 1 / 0.85;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-card-eyebrow {
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.eco-card-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 30px;
}

.eco-card-title em {
  font-style: normal;
  color: var(--blue-1);
}

.eco-features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 30px;
}

.eco-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.eco-icon-box {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--blue-1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-feature h4 {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--blue-1);
  margin-bottom: 4px;
}

.eco-feature p {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #3a3a3a;
  max-width: 380px;
}

.btn-outline,
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: 999px;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-outline:hover,
.btn-solid:hover { filter: brightness(1.06); transform: translateY(-1px); }

.btn-outline {
  background: #fff;
  color: var(--blue-1);
}

.btn-solid {
  background: var(--blue-1);
  color: #fff;
}

.eco-blob {
  position: absolute;
  inset: -10% -10% -10% 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 45%, #1e7fe0 0%, #0d63c9 55%, rgba(13,99,201,0) 78%);
  z-index: 0;
}

.eco-blob::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
}

.eco-wristband {
  position: relative;
  z-index: 1;
  width: 62%;
  max-width: 320px;
  margin-right: -8%;
}

.eco-wristunit {
  position: absolute;
  z-index: 2;
  right: 10%;
  bottom: 8%;
  width: 42%;
  max-width: 220px;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,0.25));
}

.eco-minicards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 3;
}

.eco-minicard {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.eco-minicard img { width: 22px; height: auto; margin-top: 2px; flex-shrink: 0; }

.eco-minicard h5 {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 4px;
}

.eco-minicard p {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #5a5a5a;
}

@media (max-width: 900px) {
  .eco-card-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 24px;
  }
  .eco-card-left,
  .eco-card-right,
  .eco-see-specs,
  .eco-minicards {
    grid-column: 1;
    grid-row: auto;
  }
  .eco-card-right { width: 100%; aspect-ratio: 1 / 0.75; }
  .eco-see-specs { justify-self: start; }
  .eco-minicards {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
  }
  .eco-headline { font-size: 2.1rem; }
}

@media (max-width: 480px) {
  .ecosystem { padding: 48px 16px; }
  .eco-card { padding: 28px 22px; border-radius: 18px; }
  .eco-card-title { font-size: 1.9rem; }
}

/* ============================
   Coach Tablet App
   ============================ */

.coach-app {
  background: #fff;
  padding: 10px 24px 64px;
}

.coach-container {
  max-width: 1280px;
  margin: 0 auto;
}

.coach-card {
  background: var(--panel-bg);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.coach-left { flex: 1; min-width: 0; }

.coach-right {
  flex: 1;
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-start;
  padding-top: 12px;
}

.coach-eyebrow {
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.coach-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 52px;
}

.coach-title em {
  font-style: normal;
  color: var(--blue-1);
}

.coach-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #3a3a3a;
  max-width: 460px;
  margin-bottom: 24px;
}

.coach-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 78px;
}

.coach-checklist li {
  position: relative;
  padding-left: 34px;
  font-size: 0.95rem;
  color: #1a1a1a;
}

.coach-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
}

.coach-checklist li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.coach-tablet {
  position: relative;
  width: 86%;
  background: linear-gradient(155deg, #3a3b3e 0%, #1c1c1e 45%, #0a0a0b 100%);
  border-radius: 20px;
  padding: 14px 14px 26px;
  box-shadow: 0 30px 50px -18px rgba(0,0,0,0.35);
}

.coach-tablet-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #050505;
  transform: translateX(-50%);
}

.coach-tablet-screen {
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}

.coach-tablet-screen img {
  width: 100%;
  height: auto;
  display: block;
}

.coach-hub {
  position: absolute;
  left: -6%;
  bottom: -6%;
  width: 34%;
  max-width: 160px;
  transform: rotate(-18deg);
  z-index: 2;
  filter: drop-shadow(0 20px 20px rgba(0,0,0,0.3));
}

/* ---------- Range and Reliability ---------- */

.reliability {
  background: #fff;
  padding: 54px 24px 72px;
}

.reliability-container { max-width: 1280px; margin: 0 auto; text-align: center; }
.reliability-eyebrow { color: var(--blue-1); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.reliability-heading { font-family: 'Archivo Black', 'Arial Black', sans-serif; font-size: 2.6rem; line-height: 1.1; text-transform: uppercase; color: #0a0a0a; }
.reliability-heading em, .reliability-copy h3 em { color: var(--blue-1); font-style: normal; }
.reliability-intro { max-width: 520px; margin: 14px auto 38px; color: #333; font-size: 0.82rem; line-height: 1.45; }

.reliability-panel {
  min-height: 640px;
  padding: 56px 58px 42px;
  border-radius: 22px;
  background: #f2f5fb;
  display: grid;
  grid-template-columns: 34% 66%;
  gap: 16px;
  text-align: left;
  overflow: hidden;
}

.reliability-copy { position: relative; z-index: 2; }
.reliability-copy h3 { font-family: 'Archivo Black', 'Arial Black', sans-serif; font-size: 2.55rem; line-height: 1.15; text-transform: uppercase; margin-bottom: 22px; }
.reliability-description { max-width: 330px; color: #222; font-size: 0.78rem; line-height: 1.35; margin-bottom: 28px; }
.reliability-features { display: grid; gap: 17px; }
.reliability-feature { display: flex; align-items: flex-start; gap: 14px; }
.reliability-icon { width: 43px; height: 43px; flex: 0 0 43px; border-radius: 8px; background: var(--blue-1); display: grid; place-items: center; }
.reliability-icon img { width: 23px; height: 23px; object-fit: contain; filter: brightness(0) invert(1); }
.reliability-icon--signal img { width: 25px; }
.reliability-feature h4 { font-size: 0.76rem; line-height: 1.1; text-transform: uppercase; margin: 2px 0 5px; }
.reliability-feature p { max-width: 230px; color: #333; font-size: 0.69rem; line-height: 1.25; }
.reliability-range { display: flex; align-items: center; gap: 18px; margin-top: 38px; padding: 12px 20px; max-width: 322px; min-height: 78px; border-radius: 18px; background: #fff; }
.range-symbol { color: var(--navy); font-size: 2.1rem; letter-spacing: -0.2em; transform: rotate(180deg); }
.reliability-range strong { display: block; color: var(--blue-1); font-family: 'Archivo Black', 'Arial Black', sans-serif; font-size: 1.45rem; line-height: 1; }
.reliability-range small { display: block; margin-top: 7px; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; }

.stadium-visual { position: relative; min-height: 530px; overflow: hidden; }
.stadium-image { position: absolute; z-index: 1; width: 100%; max-width: none; height: auto; top: 4%; left: 0; }
.stadium-field { position: absolute; top: 17%; left: 8%; width: 82%; height: 62%; transform: rotate(-30deg) skewY(4deg); border: 7px solid #80b900; background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.85) 9% 9.7%), repeating-linear-gradient(0deg, #247c13 0 10%, #329318 10% 20%); box-shadow: 0 12px 0 #73a900; }
.stadium-field::after { content: ''; position: absolute; inset: 4% 0; border-top: 3px solid rgba(255,255,255,.95); border-bottom: 3px solid rgba(255,255,255,.95); }
.yard { position: absolute; z-index: 1; color: #fff; font-size: 1.1rem; font-weight: 800; transform: rotate(90deg); }
.yard-10 { left: 13%; top: 44%; }.yard-20 { left: 29%; top: 44%; }.yard-30 { left: 45%; top: 44%; }.yard-40 { left: 61%; top: 44%; }.yard-50 { left: 76%; top: 44%; }
.field-label { position: absolute; z-index: 2; color: #0870bd; background: #fff; font-size: 0.78rem; font-weight: 800; padding: 3px 8px; transform: rotate(-2deg); }
.field-range { top: 42%; left: 44%; }.field-caption { top: 51%; left: 43%; font-size: 0.6rem; }
.stadium-stands { position: absolute; top: 14%; left: 2%; width: 28%; height: 28%; transform: skewY(-20deg); background: repeating-linear-gradient(0deg, #777 0 7px, #b9b9b9 7px 12px); border: 5px solid #555; box-shadow: 8px 8px 0 #444; }
.stadium-goal { position: absolute; width: 58px; height: 80px; border-left: 4px solid #e0c000; border-right: 4px solid #e0c000; border-top: 4px solid #e0c000; }
.stadium-goal--top { top: 4%; right: 18%; }.stadium-goal--bottom { bottom: 12%; left: 13%; transform: scale(.7); }
.signal { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #28a7ed; box-shadow: 0 0 0 8px rgba(40,167,237,.2); }
.signal--left { left: 26%; top: 58%; }.signal--center { left: 51%; top: 45%; }.signal--right { right: 18%; top: 37%; }
.callout { position: absolute; z-index: 3; padding: 5px 8px; border-radius: 5px; background: #fff; color: #111; font-size: 0.58rem; font-weight: 800; line-height: 1.05; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,.08); }
.callout--encryption { top: 8%; left: 25%; }.callout--antenna { left: 3%; top: 57%; }.callout--users { right: 3%; top: 27%; }.callout--interference { right: 8%; bottom: 11%; }

@media (max-width: 900px) {
  .reliability { padding: 48px 16px 60px; }
  .reliability-heading { font-size: 2.1rem; }
  .reliability-panel { grid-template-columns: 1fr; padding: 34px 28px 30px; }
  .reliability-copy h3 { font-size: 2.1rem; }
  .stadium-visual { min-height: 430px; }
}

@media (max-width: 480px) {
  .reliability-panel { padding: 28px 20px 24px; border-radius: 18px; }
  .reliability-copy h3 { font-size: 1.8rem; }
  .reliability-description { font-size: 0.75rem; }
  .reliability-range { max-width: 100%; }
  .stadium-visual { min-height: 330px; margin: 0 -12px; }
  .stadium-field { top: 21%; left: 7%; width: 86%; height: 56%; }
  .callout { font-size: 0.48rem; }
  .yard { font-size: 0.75rem; }
}

@media (max-width: 900px) {
  .coach-card { flex-direction: column; }
  .coach-right { width: 100%; min-height: 320px; margin-top: 24px; padding-left: 8%; }
  .coach-title { font-size: 2.1rem; }
  .coach-hub { left: 2%; }
}

@media (max-width: 480px) {
  .coach-app { padding: 48px 16px; }
  .coach-card { padding: 28px 22px; border-radius: 18px; }
  .coach-tablet { width: 90%; }
}

/* ============================
   Product Details
   ============================ */

.pd { background: #fff; }

.pd-eyebrow {
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* --- Intro --- */

.pd-intro {
  background: #fff;
  padding: 64px 24px 24px;
}

.pd-intro-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}

.pd-intro-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 14px;
}

.pd-intro-title em { font-style: normal; color: var(--blue-1); }

.pd-intro-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #5a5a5a;
  max-width: 420px;
  margin-bottom: 28px;
}

.pd-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}

.pd-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--panel-bg);
  border-radius: 14px;
  padding: 16px 18px;
}

.pd-feature img { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }

.pd-feature h4 {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue-1);
  margin-bottom: 4px;
}

.pd-feature p {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #5a5a5a;
}

.pd-intro-right { display: flex; justify-content: center; }
.pd-intro-right img { width: 100%; max-width: 460px; }

/* --- Panels (light) --- */

.pd-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pd-panel {
  background: var(--panel-bg);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.pd-panel-left { flex: 1; min-width: 0; }

.pd-panel-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}

.pd-panel-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 14px;
}

.pd-panel-title em { font-style: normal; color: var(--blue-1); }

.pd-panel-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #3a3a3a;
  max-width: 420px;
  margin-bottom: 20px;
}

.pd-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.pd-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: #1a1a1a;
}

.pd-checklist img { width: 20px; height: 20px; flex-shrink: 0; }

/* Tablet frame (reuses coach-tablet look) */

.pd-tablet {
  position: relative;
  width: 82%;
  background: linear-gradient(155deg, #3a3b3e 0%, #1c1c1e 45%, #0a0a0b 100%);
  border-radius: 20px;
  padding: 14px 14px 26px;
  box-shadow: 0 30px 50px -18px rgba(0,0,0,0.35);
}

.pd-tablet-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #050505;
  transform: translateX(-50%);
}

.pd-tablet-screen { border-radius: 8px; overflow: hidden; line-height: 0; }
.pd-tablet-screen img { width: 100%; height: auto; display: block; }

.pd-device-img { max-width: 260px; width: 80%; }
.pd-laptop-img { max-width: 520px; width: 100%; }

/* Two-up split panels */

.pd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pd-panel--half { padding: 36px; gap: 28px; }
.pd-panel--half .pd-panel-title { font-size: 1.9rem; margin-bottom: 20px; }
.pd-panel--half .pd-checklist { margin-bottom: 0; }

@media (max-width: 900px) {
  .pd-intro-inner { grid-template-columns: 1fr; gap: 28px; }
  .pd-intro-right img { max-width: 360px; }
  .pd-intro-title { font-size: 2.1rem; }

  .pd-panel { flex-direction: column; padding: 32px; gap: 28px; }
  .pd-panel-right { min-height: 0; }
  .pd-panel-title { font-size: 2rem; }
  .pd-tablet { width: 100%; max-width: 420px; }

  .pd-split { grid-template-columns: 1fr; }
}

/* ============================
   Why Digiwrist
   ============================ */

.why { background: #fff; padding: 64px 24px 80px; }

.why-container { max-width: 1280px; margin: 0 auto; text-align: center; }

.why-eyebrow {
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.why-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.75rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 40px;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.why-card {
  border-radius: 24px;
  padding: 40px 32px 36px;
}

.why-card--system { background: var(--panel-bg); }

.why-card--traditional {
  background: #fff;
  border: 1px solid #eee;
}

.why-device-img { max-width: 300px; width: 68%; margin: 0 auto 24px; }
.why-whiteboard-img { max-width: 210px; width: 48%; margin: 0 auto 24px; }

.why-card-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 32px;
}

.why-card-title--muted { color: #9a9a9a; }

.why-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.why-feature img { width: 48px; height: 48px; margin: 0 auto 12px; }

.why-feature h4 {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 6px;
}

.why-feature p {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6a6a6a;
}

.why-card--traditional .why-feature img { opacity: 0.55; }
.why-card--traditional .why-feature h4 { color: #9a9a9a; }
.why-card--traditional .why-feature p { color: #b0b0b0; }

@media (max-width: 900px) {
  .why-title { font-size: 2.2rem; }
  .why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .why { padding: 48px 16px 56px; }
  .why-title { font-size: 1.8rem; margin-bottom: 28px; }
  .why-card { padding: 28px 20px; border-radius: 18px; }
  .why-features { gap: 12px; }
  .why-feature img { width: 40px; height: 40px; }
  .why-feature h4 { font-size: 0.72rem; }
  .why-feature p { font-size: 0.72rem; }
}

/* ============================
   Testimonial
   ============================ */

.testi { background: #fff; padding: 90px 24px; overflow: hidden; }

.testi-container { max-width: 1280px; margin: 0 auto; }

.testi-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testi-photo { position: relative; flex-shrink: 0; }

.testi-photo--left {
  width: 260px;
  margin-right: -24px;
  z-index: 2;
}

.testi-photo--right {
  width: 340px;
  height: 460px;
  margin-left: -84px;
  z-index: 2;
}

.testi-photo-back {
  position: absolute;
  border-radius: 26px;
}

.testi-photo-back--left {
  inset: 0;
  background: var(--panel-bg);
  transform: translate(22px, -22px);
  z-index: 0;
}

.testi-photo-back--right {
  width: 90%;
  height: 64%;
  left: 2%;
  top: 3%;
  overflow: hidden;
  transform: skewX(-7deg);
  transform-origin: bottom left;
  z-index: 0;
}

.testi-photo-back--right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: skewX(7deg) scale(1.2);
  transform-origin: bottom left;
}

.testi-photo-img {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  border-radius: 26px;
  filter: grayscale(1);
}

.testi-photo-img--right {
  filter: none;
  position: absolute;
  right: -2%;
  bottom: -2%;
  width: 88%;
  border-radius: 20px;
}

.testi-card {
  flex: 1;
  min-width: 0;
  max-width: 800px;
  background: #fff;
  border-radius: 24px;
  padding: 56px 56px 44px 108px;
  position: relative;
  z-index: 1;
  box-shadow: 0 30px 60px -15px rgba(20,30,60,0.14), 0 10px 24px -10px rgba(20,30,60,0.08);
}

.testi-quote-mark {
  position: absolute;
  top: 24px;
  left: 44px;
  width: 130px;
  height: auto;
  color: rgba(10,10,10,0.08);
  pointer-events: none;
}

.testi-quote-text {
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  color: #2a2a2a;
  max-width: 540px;
  margin-bottom: 24px;
}

.testi-name {
  position: relative;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 2px;
}

.testi-role { position: relative; font-size: 0.88rem; color: #7a7a7a; }

@media (max-width: 900px) {
  .testi { padding: 64px 20px; }

  .testi-row { flex-direction: column; align-items: center; gap: 0; }

  .testi-photo--left,
  .testi-photo--right {
    width: 200px;
    margin: 0;
    z-index: 2;
  }

  .testi-photo--left { margin-bottom: -50px; }
  .testi-photo--right { margin-top: -50px; order: 3; }

  .testi-card {
    order: 2;
    max-width: 560px;
    width: 100%;
    padding: 64px 32px 36px;
    text-align: left;
  }

  .testi-quote-mark { left: 26px; top: 22px; width: 100px; }
  .testi-quote-text { max-width: 100%; }
}

@media (max-width: 480px) {
  .testi-card { padding: 56px 22px 28px; border-radius: 18px; }
  .testi-quote-text { font-size: 0.9rem; }
}

/* ============================
   Partners
   ============================ */

.partners { background: #fff; padding: 64px 24px 80px; }

.partners-container { max-width: 1280px; margin: 0 auto; text-align: center; }

.partners-eyebrow {
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.partners-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.75rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 56px;
}

.partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 32px 0;
}

.partners-row-label {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #0a0a0a;
  white-space: nowrap;
}

.partners-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.partners-logos img {
  height: 46px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

.partners-logos--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 140px));
  row-gap: 32px;
  column-gap: 48px;
  justify-items: center;
}

.partners-logos--grid img { height: 76px; max-width: 130px; }

.partners-divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 0;
}

@media (max-width: 900px) {
  .partners-title { font-size: 2.2rem; }

  .partners-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .partners-logos { gap: 32px; }
  .partners-logos--grid { grid-template-columns: repeat(3, minmax(70px, 110px)); column-gap: 28px; row-gap: 24px; }
}

@media (max-width: 480px) {
  .partners { padding: 48px 16px 56px; }
  .partners-title { font-size: 1.8rem; margin-bottom: 36px; }
  .partners-row { padding: 24px 0; }
  .partners-logos { gap: 22px; }
  .partners-logos img { height: 34px; }
  .partners-logos--grid { grid-template-columns: repeat(2, minmax(70px, 110px)); }
  .partners-logos--grid img { height: 56px; }
}

/* ============================
   Order Digiwrist System (CTA)
   ============================ */

.order-cta { background: #fff; padding: 0 24px 80px; }

.order-container { max-width: 1280px; margin: 0 auto; }

.order-panel {
  background: var(--panel-bg);
  border-radius: 24px;
  padding: 56px 64px;
  display: flex;
  align-items: center;
  gap: 40px;
  overflow: hidden;
}

.order-left { flex: 0 0 400px; text-align: center; }

.order-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  white-space: nowrap;
  margin-bottom: 16px;
}

.order-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5a5a5a;
  max-width: 300px;
  margin: 0 auto 28px;
}

.order-shop-btn { padding: 14px 42px; font-size: 1rem; }

.order-right { flex: 1; display: flex; justify-content: center; }
.order-right img { width: 100%; max-width: 820px; }

@media (max-width: 900px) {
  .order-panel { flex-direction: column; text-align: center; padding: 40px 32px; }
  .order-left { flex: none; }
  .order-desc { margin-left: auto; margin-right: auto; }
  .order-title { font-size: 1.7rem; white-space: normal; }
}

@media (max-width: 480px) {
  .order-cta { padding: 0 16px 56px; }
  .order-panel { padding: 32px 22px; border-radius: 18px; }
  .order-title { font-size: 1.5rem; }
}

/* ============================
   Contact
   ============================ */

.contact { background: #fff; padding: 0 24px 80px; }

.contact-container { max-width: 1280px; margin: 0 auto; }

.contact-panel {
  display: flex;
  align-items: stretch;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

.contact-left {
  flex: 0 0 42%;
  background: var(--panel-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
}

.contact-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 64px;
}

.contact-eyebrow {
  color: var(--blue-1);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 16px;
}

.contact-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3a3a3a;
  max-width: 340px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-field {
  width: 100%;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 16px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #2a2a2a;
  background: #fff;
}

.contact-field::placeholder { color: #a8a8a8; }
.contact-field:focus { outline: none; border-color: var(--blue-1); }

.contact-field--message { min-height: 170px; resize: vertical; }

.contact-submit-wrap { display: flex; justify-content: center; margin-top: 6px; }

.contact-submit {
  background: #000;
  color: #fff;
  border: none;
  padding: 15px 46px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 18px 30px -10px rgba(0,0,0,0.4);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.contact-submit:hover { filter: brightness(1.2); transform: translateY(-1px); }

@media (max-width: 900px) {
  .contact-panel { flex-direction: column; }
  .contact-left,
  .contact-right { flex: none; padding: 40px 32px; }
  .contact-title { font-size: 2.1rem; }
}

@media (max-width: 480px) {
  .contact { padding: 0 16px 56px; }
  .contact-panel { border-radius: 18px; }
  .contact-left,
  .contact-right { padding: 32px 22px; }
  .contact-title { font-size: 1.8rem; }
  .contact-field--message { min-height: 130px; }
}

/* ============================
   Site Footer
   ============================ */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 34px 24px 22px;   /* Romano 2026-09-06: "about half the height" */
  text-align: center;
}

.footer-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 27%;   /* Trinity WR under the lights (real photo, 2026-09-06) — keep the player in frame */
  z-index: 0;
}

.footer-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.7) 100%);
}

.footer-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.footer-logo { height: 42px; width: auto; margin: 0 auto 22px; }

.footer-company {
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-phones {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.footer-copyright {
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
  margin-bottom: 30px;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin-bottom: 26px;
}

.footer-nav a {
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.95;
  transition: opacity 0.15s ease;
}

.footer-nav a:hover { opacity: 1; }

.footer-mailing-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  padding: 12px 26px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 46px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.footer-mailing-btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.footer-mailing-btn img { width: 16px; height: 16px; }

.footer-powered { color: rgba(255,255,255,0.85); font-size: 0.85rem; }

@media (max-width: 900px) {
  .site-footer { padding: 56px 20px 40px; }
  .footer-nav { flex-wrap: wrap; row-gap: 12px; }
}

@media (max-width: 480px) {
  .site-footer { padding: 48px 16px 32px; }
  .footer-nav { gap: 20px 24px; margin-bottom: 22px; }
  .footer-mailing-btn { margin-bottom: 34px; padding: 11px 22px; font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .pd-intro { padding: 48px 16px 16px; }
  .pd-features { grid-template-columns: 1fr; }
  .pd-intro-title { font-size: 1.8rem; }

  .pd-container { padding: 40px 16px 48px; gap: 16px; }
  .pd-panel { padding: 24px; border-radius: 18px; }
  .pd-panel-title { font-size: 1.7rem; }
  .pd-panel--half .pd-panel-title { font-size: 1.6rem; }
}

/* ============================
   Join Winners — dark variant (Romano 2026-09-06)
   ============================ */
.social-proof--dark { background: #0a1020; }
.social-proof--dark .sp-title { color: #fff; }
.social-proof--dark .sp-subtitle { color: #8da2c8; }
.social-proof--dark .sp-case { background: #111a30; border-color: rgba(96,165,250,.3); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.social-proof--dark .sp-case-title { color: #fff; }
.social-proof--dark .sp-case-body p:not(.sp-case-eyebrow):not(.sp-case-title) { color: #b9c6e0; }
.social-proof--dark .sp-case-link { color: #60a5fa; }
/* semi-transparent badge box — image shows through (Romano 2026-09-06: "not totally transparent") */
/* badge sits in the card's own bottom-right (the text block), not the photo — Romano 13:41 */
.social-proof--dark .sp-case { position: relative; }
.social-proof--dark .sp-case-media { position: static; }
.social-proof--dark .sp-case-body { padding-right: 160px; }
.social-proof--dark .sp-badge p { color: #fff; }
.social-proof--dark .sp-badge { top: auto; left: auto; right: 22px; bottom: 22px; transform: scale(.8); transform-origin: bottom right; background: rgba(255,255,255,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.55); }

/* footer, left-stacked (Romano 2026-09-06 13:50): logo left with Contact Us beside it, then a tight stack */
.site-footer { text-align: center; }   /* 13:53 "now center it" */
.footer-content { max-width: 1120px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 14px; }   /* logo far left, Contact Us far right, same height */
.footer-logo { height: 44px; margin: 0; display: block; }
.footer-top .footer-mailing-btn { height: 44px; padding: 0 22px; font-size: 0.9rem; gap: 9px; box-sizing: border-box; }
.footer-top .footer-mailing-btn img { width: 14px; height: 14px; }
.footer-company { font-size: 0.85rem; margin: 0 0 2px; }
.footer-phones { font-size: 0.8rem; margin: 0 0 2px; }
.footer-copyright { font-size: 0.72rem; margin: 0 0 12px; }
.footer-nav { justify-content: center; gap: 22px; margin-bottom: 8px; }
.footer-nav a { font-size: 0.72rem; }
.footer-powered { font-size: 0.7rem; opacity: .75; }
@media (max-width: 900px) { .footer-top { flex-wrap: wrap; } }

/* ============================
   Mobile pass (Romano 2026-09-06 14:45 "make sure this is mobile friendly")
   ============================ */
@media (max-width: 860px) {
  /* hero: 16:9 is only ~220px tall on a phone and the CTA tile spilled out of it — go portrait */
  /* Mo2 2026-09-18, Romano: "home page hero off centered" on mobile. A 16:9 clip inside a
     4/5 box cover-crops to the middle 45% of the frame, slicing the neon lockup both sides.
     Shorter box = less horizontal crop; 7/6 shows ~66% and still clears the 222px CTA tile.
     46% because the lockup's optical centre sits left of 50%. */
  /* STACKED on phones: the clip keeps its native 16:9 so the whole neon lockup and the full
     kneeling row are visible with zero crop, and the CTA tile flows BELOW it on the dark
     ground instead of covering the shot. Overlaying it inside a cropped box was the real
     cause of "hero off centered" — any box narrower than 16:9 slices the lockup. */
  /* STACKED on phones. Two things had to change together: .hero-video is absolutely
     positioned to .hero, so simply letting the tile flow made .hero taller and cropped the
     clip HARDER. So the video goes static at its native 16:9 (full frame, zero crop, whole
     neon lockup + the entire kneeling row), the empty stage is dropped, and the tile flows
     under it. Overlaying inside a box narrower than 16:9 was the real cause of
     "hero off centered". */
  .hero { display: flex; flex-direction: column; }
  .hero-video { position: static; order: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; }
  .hero-stage { display: none; }
  /* Mo4 2026-09-22, Romano: "CTA on mobile needs to be up whole time otherwise
     theres a dead space". It was static in flow, so it scrolled off and left the
     screen empty. Sticky keeps it pinned to the bottom of the viewport for the whole
     hero without ever covering content below it. */
  /* Mo4 2026-09-22, Romano: "stack it. animated mobile hero then static cta
     underneth then loadout etc" - STATIC, in normal flow, tight under the video.
     (I had tried sticky then fixed; both were wrong. Stacked is the answer.) */
  .hero-cta { position: static; inset: auto; order: 2; padding: 0 4% 18px; margin-top: 0; }
  /* Mo4 2026-09-22, Romano: "it needs to be there from the jump on mobile only.
     still fades in on web". The base rule holds the tile at opacity 0 /
     pointer-events:none until main.js adds .is-frozen at HERO_FREEZE_AT (3 s) - so on a
     phone it both faded AND was dead to the touch for the first three seconds. Desktop
     keeps the fade; phones get it instantly and clickable. */
  .hero-cta, .hero.is-frozen .hero-cta {
    opacity: 1; transform: none; pointer-events: auto; transition: none;
  }
  .hero-tile { background: rgba(8, 14, 22, 0.86); }
  .hero-tile { width: 100%; min-width: 0; max-width: none; padding: 16px 16px 18px; }
  .hero-tile-title { font-size: clamp(22px, 6.4vw, 30px); }
}
@media (max-width: 700px) {
  /* story cards: give the text its full width back and park the badge under it */
  .social-proof--dark .sp-case-body { padding-right: 28px; padding-bottom: 96px; }
  .social-proof--dark .sp-badge { right: 16px; bottom: 16px; transform: scale(.7); }
  /* photo walls: two columns already; tighten the header row */
  .inplay-head--cta { gap: 12px; }
  .inplay-order { padding: 10px 22px; font-size: 14px; }
  /* footer: logo + Contact Us stack on narrow screens */
  .footer-top { flex-direction: column; gap: 12px; }
}