/* ==========================================================================
   Battery Life — batterylifeapp.com
   Modern stylesheet (no framework)

   Theming: dark is the default palette (it matches the app's true-black UI).
   Every surface, hairline and overlay below is driven by a custom property,
   so the light palette in §1b only has to restate the tokens — no component
   rule needs a second copy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — dark (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces — matched to the app's true-black UI */
  --bg:            #08090a;
  --bg-soft:       #0d0f11;
  --surface:       #121417;
  --surface-2:     #191d21;
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.16);

  /* Text */
  --text:          #f4f6f8;
  --text-muted:    #98a2ac;
  --text-dim:      #6b7681;

  /* Translucent fills layered over the page ground */
  --fill-1:        rgba(255, 255, 255, 0.04);   /* resting  */
  --fill-2:        rgba(255, 255, 255, 0.09);   /* hover    */
  --fill-3:        rgba(255, 255, 255, 0.16);   /* pressed  */
  --well:          rgba(0, 0, 0, 0.42);         /* inset panels, inputs */
  --well-focus:    rgba(0, 0, 0, 0.60);
  --track:         rgba(255, 255, 255, 0.08);   /* meter / ring tracks  */
  --edge-hi:       rgba(255, 255, 255, 0.22);   /* card top hairline    */
  --grid-line:     rgba(255, 255, 255, 0.028);  /* hero backdrop grid   */
  --bezel-ring:    rgba(255, 255, 255, 0.09);   /* device mockup edge   */

  /* Chrome */
  --nav-bg:        rgba(8, 9, 10, 0.72);
  --nav-bg-open:   rgba(8, 9, 10, 0.94);
  --glass:         rgba(18, 20, 23, 0.82);
  --scrim:         rgba(4, 5, 6, 0.90);

  /* Brand — sampled from img/icon-1024.png: the icon's gradient runs
     #44f368 (top) to #4adb64 (bottom). */
  --green:         #44e964;
  --green-light:   #44f368;
  --green-deep:    #4adb64;
  --green-dim:     rgba(68, 243, 104, 0.14);
  --green-line:    rgba(68, 243, 104, 0.26);
  --green-ink:     #04220d; /* text/fills sitting on a green ground */
  --green-text:    var(--green); /* green used as type — see §1b */

  /* Accents borrowed from the app's own gauges */
  --blue:          #0a84ff;
  --amber:         #ffb020;
  --red:           #ff453a;
  --blue-text:     var(--blue);
  --amber-text:    var(--amber);
  --red-text:      #ff8f87;
  --red-dim:       rgba(255, 69, 58, 0.12);
  --red-line:      rgba(255, 69, 58, 0.32);
  --ok-text:       var(--green-light);

  /* Headline gradient */
  --em-from:       var(--green-light);
  --em-mid:        var(--green);
  --em-to:         var(--blue);

  /* Green light spill */
  --glow-a:        rgba(68, 243, 104, 0.20);
  --glow-b:        rgba(68, 243, 104, 0.07);
  --cta-glow:      rgba(68, 243, 104, 0.20);
  --btn-glow:      rgba(68, 243, 104, 0.60);
  --btn-glow-hi:   rgba(68, 243, 104, 0.75);
  --icon-glow:     rgba(68, 243, 104, 0.42);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Metrics */
  --nav-h:         68px;
  --radius-sm:     10px;
  --radius:        16px;
  --radius-lg:     24px;
  --maxw:          1160px;
  --gutter:        24px;

  --shadow:        0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1b. Design tokens — light
   Follows the OS setting. The brand green is far too bright to sit on white
   as type, so anything text-sized switches to a deeper green (--green-text)
   while fills, meters and buttons keep the real brand colour.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg:          #fbfcfd;
    --bg-soft:     #eef2f5;
    --surface:     #ffffff;
    --surface-2:   #f4f7f9;
    --line:        rgba(9, 20, 31, 0.10);
    --line-strong: rgba(9, 20, 31, 0.18);

    --text:        #0d1418;
    --text-muted:  #55636e;
    --text-dim:    #76838e;

    --fill-1:      rgba(9, 20, 31, 0.04);
    --fill-2:      rgba(9, 20, 31, 0.08);
    --fill-3:      rgba(9, 20, 31, 0.14);
    --well:        rgba(9, 20, 31, 0.035);
    --well-focus:  rgba(9, 20, 31, 0.055);
    --track:       rgba(9, 20, 31, 0.10);
    --edge-hi:     rgba(9, 20, 31, 0.10);
    --grid-line:   rgba(9, 20, 31, 0.05);
    --bezel-ring:  rgba(9, 20, 31, 0.14);

    --nav-bg:      rgba(255, 255, 255, 0.78);
    --nav-bg-open: rgba(255, 255, 255, 0.95);
    --glass:       rgba(255, 255, 255, 0.86);
    --scrim:       rgba(233, 238, 241, 0.88);

    --green-dim:   rgba(11, 124, 46, 0.10);
    --green-line:  rgba(11, 124, 46, 0.26);
    --green-text:  #0b7c2e;

    --blue-text:   #0a63c4;
    --amber-text:  #8a5a00;
    --red-text:    #b3261e;
    --red-dim:     rgba(255, 69, 58, 0.10);
    --red-line:    rgba(255, 69, 58, 0.30);
    --ok-text:     #0b7c2e;

    --em-from:     #12a03c;
    --em-mid:      #0b7c2e;
    --em-to:       #0a63c4;

    --glow-a:      rgba(68, 243, 104, 0.30);
    --glow-b:      rgba(68, 243, 104, 0.10);
    --cta-glow:    rgba(68, 243, 104, 0.26);
    --btn-glow:    rgba(45, 190, 85, 0.45);
    --btn-glow-hi: rgba(45, 190, 85, 0.60);
    --icon-glow:   rgba(45, 190, 85, 0.35);

    --shadow:      0 22px 48px -24px rgba(9, 20, 31, 0.35);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
p { margin: 0; }

::selection { background: var(--green); color: var(--green-ink); }

:focus-visible {
  outline: 2px solid var(--green-text);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Layout helpers */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(72px, 11vw, 132px) 0; }
.section--tight { padding-top: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-text);
}

.section-head { max-width: 620px; margin-bottom: 56px; }
.section-head h2 {
  margin-top: 14px;
  font-size: clamp(32px, 4.6vw, 50px);
}
.section-head p {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: clamp(17px, 1.6vw, 19px);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s,
              box-shadow 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(180deg, var(--green-light), var(--green));
  color: var(--green-ink);
  box-shadow: 0 10px 30px -10px var(--btn-glow);
}
.btn--primary:hover { box-shadow: 0 16px 38px -10px var(--btn-glow-hi); }

.btn--ghost {
  background: var(--fill-1);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { background: var(--fill-2); }

.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--block { width: 100%; }

/* App Store button with the Apple mark */
.btn--store { padding-block: 11px; }
.btn--store svg { flex: none; }
.btn--store .store-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn--store .store-label small { font-size: 10.5px; font-weight: 500; opacity: 0.72; letter-spacing: 0.02em; }
.btn--store .store-label span { font-size: 15.5px; font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.nav.is-stuck {
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-right: auto;
}
/* The icon PNG carries its own rounded corners and alpha, so the glow has to
   be a drop-shadow filter — a box-shadow would render a square halo. */
.brand__mark {
  flex: none;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 4px 10px var(--icon-glow));
}
.brand__mark img { width: 100%; height: 100%; }

/* Larger standalone app icon (CTA band) */
.app-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  filter: drop-shadow(0 14px 34px var(--icon-glow));
}
.app-icon img { width: 100%; height: 100%; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__links a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s, background 0.2s;
}
.nav__links a:hover { color: var(--text); background: var(--fill-2); }
.nav__links a.is-active { color: var(--text); }

/* The App Store button beside it is the desktop download CTA, so the plain
   "Download" pill only appears in the mobile menu (where that button is
   hidden). Needs the class on the anchor too: `.nav__links a` would otherwise
   out-specify .btn--primary and paint the label muted grey on green. */
.nav__cta { display: none; }
.nav__links a.btn--primary { color: var(--green-ink); }
.nav__links a.btn--primary:hover { color: var(--green-ink); background: linear-gradient(180deg, var(--green-light), var(--green)); }

.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--fill-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 3.5px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: block; }
  .nav__links,
  .nav .btn--store { display: none; }

  .nav.is-open {
    background: var(--nav-bg-open);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--line);
  }
  .nav.is-open .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px var(--gutter) 22px;
    /* Not `inherit`: the panel's parent is .nav__inner, which has no
       background of its own, so the menu would fall through to the page. */
    background: var(--nav-bg-open);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__links a { padding: 13px 12px; font-size: 17px; }
  .nav.is-open .nav__cta { display: block; margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 92px));
  padding-bottom: clamp(60px, 9vw, 110px);
  overflow: hidden;
}

/* Ambient glow + grid, purely decorative */
.hero__glow {
  position: absolute;
  top: -220px;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%,
              var(--glow-a) 0%,
              var(--glow-b) 32%,
              transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 20%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 20%, #000 30%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 9px;
  background: var(--fill-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.badge b { color: var(--text); font-weight: 600; }
.badge .dot {
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-dim);
}

.hero h1 {
  margin-top: 26px;
  font-size: clamp(42px, 6.6vw, 76px);
  letter-spacing: -0.045em;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--em-from), var(--em-mid) 55%, var(--em-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  margin-top: 24px;
  max-width: 52ch;
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--text-muted);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* Stat row */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.stats dt {
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.stats dd {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   6. Device mockups
   The phone and watch bodies stay dark in both themes — they are physical
   objects showing the app's own black UI, not page surfaces.
   -------------------------------------------------------------------------- */
.hero__device {
  position: relative;
  justify-self: center;
  width: min(320px, 78vw);
}

.phone {
  position: relative;
  padding: 10px;
  background: linear-gradient(155deg, #3a4046, #14171a 42%, #0b0d0e);
  border-radius: 46px;
  box-shadow:
    0 0 0 1px var(--bezel-ring),
    var(--shadow);
}
.phone::after { /* screen sheen */
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 37px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), transparent 42%);
  pointer-events: none;
}
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 37px;
  background: #000;
  aspect-ratio: 621 / 1344;
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }
.phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 26px;
  background: #000;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}

/* Floating watch card next to the hero phone */
.watch-card {
  position: absolute;
  right: -22px;
  bottom: 58px;
  width: 208px;
  padding: 16px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow);
  animation: float 6s ease-in-out infinite;
}
.watch-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.watch-card__row + .watch-card__row { margin-top: 14px; }
.watch-card__row b { font-size: 15px; font-weight: 600; color: var(--text); }
.watch-card__label { display: flex; align-items: center; gap: 8px; }
.watch-card__label svg { width: 15px; height: 15px; color: var(--text-dim); flex: none; }

.meter {
  height: 6px;
  margin-top: 8px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), #ffd166);
  transform-origin: left;
  animation: fill 1.4s var(--ease) both;
}
.meter--green i { background: linear-gradient(90deg, var(--green), var(--green-light)); }
.meter--red   i { background: linear-gradient(90deg, var(--red), #ff7a70); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__lede { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__device { margin-top: 24px; }
  .stats { text-align: left; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .watch-card { right: -8px; bottom: 24px; width: 176px; padding: 13px; }
  .stats { grid-template-columns: 1fr; gap: 18px; }
}

/* --------------------------------------------------------------------------
   7. Feature bento grid
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.card {
  position: relative;
  grid-column: span 2;
  padding: 30px;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.card::before { /* soft top-edge highlight */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge-hi), transparent);
}
.card--wide { grid-column: span 3; }

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  background: var(--green-dim);
  border: 1px solid var(--green-line);
  border-radius: 13px;
  color: var(--green-text);
}
.card__icon svg { width: 21px; height: 21px; }
.card__icon--blue  { background: rgba(10, 132, 255, 0.14); border-color: rgba(10, 132, 255, 0.26); color: var(--blue-text); }
.card__icon--amber { background: rgba(255, 176, 32, 0.16); border-color: rgba(255, 176, 32, 0.32); color: var(--amber-text); }

.card h3 { font-size: 19px; letter-spacing: -0.025em; }
.card p {
  margin-top: 11px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-muted);
}

/* Mini demo inside the two wide cards */
.card__demo {
  margin-top: 24px;
  padding: 16px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 14.5px;
}
.demo-row + .demo-row { border-top: 1px solid var(--line); }
.demo-row span { color: var(--text-muted); }
.demo-row b { font-weight: 600; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--fill-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .card, .card--wide { grid-column: span 1; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .card { padding: 26px; }
}

/* --------------------------------------------------------------------------
   8. Watch section
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.checks {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 15px;
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 16px;
  color: var(--text-muted);
}
.checks svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--green-text);
}
.checks b { color: var(--text); font-weight: 600; }

/* Watch faces mock */
.faces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 420px;
  justify-self: center;
}
.face {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 22px;
  background: #000;
  border: 8px solid #23282d;
  border-radius: 26%;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.face__ring { position: relative; width: 100%; max-width: 116px; aspect-ratio: 1; }
.face__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.face__ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.face__ring .track { stroke: rgba(255, 255, 255, 0.1); }
.face__ring .value { stroke: var(--green); }
.face__ring .value--amber { stroke: var(--amber); }
.face__val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f4f6f8; /* always on the watch's black face */
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.face__cap {
  margin-top: 9px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

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

/* --------------------------------------------------------------------------
   9. Gallery
   -------------------------------------------------------------------------- */
.gallery {
  display: flex;
  gap: 22px;
  padding: 8px calc(50vw - var(--maxw) / 2 + var(--gutter)) 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-track { background: transparent; }
.gallery::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.shot {
  flex: 0 0 auto;
  width: 236px;
  scroll-snap-align: center;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  background: none;
  transition: transform 0.35s var(--ease);
}
.shot:hover { transform: translateY(-8px); }
.shot .phone { border-radius: 34px; padding: 7px; }
.shot .phone::after,
.shot .phone__screen { border-radius: 28px; }
.shot .phone__notch { top: 7px; height: 20px; }
.shot figcaption {
  margin-top: 15px;
  font-size: 13.5px;
  color: var(--text-dim);
  text-align: center;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--scrim);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-height: 86vh;
  width: auto;
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--fill-2);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--fill-3); }

/* --------------------------------------------------------------------------
   10. CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 84px) clamp(26px, 5vw, 68px);
  background:
    radial-gradient(120% 130% at 12% 0%, var(--cta-glow), transparent 58%),
    linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: 32px;
  text-align: center;
}
.cta h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  max-width: 16ch;
  margin-inline: auto;
}
.cta p {
  margin: 18px auto 0;
  max-width: 46ch;
  color: var(--text-muted);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}

/* --------------------------------------------------------------------------
   11. Contact form
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: clamp(26px, 4vw, 40px);
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  font-size: 15.5px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-text);
  background: var(--well-focus);
  box-shadow: 0 0 0 4px var(--green-dim);
}

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.form__foot .btn { margin-left: auto; }

.form__status {
  grid-column: 1 / -1;
  display: none;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14.5px;
}
.form__status.is-visible { display: flex; }
.form__status.is-ok {
  background: var(--green-dim);
  border: 1px solid var(--green-line);
  color: var(--ok-text);
}
.form__status.is-err {
  background: var(--red-dim);
  border: 1px solid var(--red-line);
  color: var(--red-text);
}

.contact-aside .checks { margin-top: 26px; }
.contact-aside a.link { color: var(--green-text); border-bottom: 1px solid var(--green-line); }
.contact-aside a.link:hover { border-bottom-color: var(--green-text); }

@media (max-width: 720px) {
  .form { grid-template-columns: 1fr; }
  .form__foot .btn { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-bottom: 34px;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.footer__links a { color: var(--text-muted); transition: color 0.2s; }
.footer__links a:hover { color: var(--text); }

.social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--fill-1);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.social:hover { color: var(--text); background: var(--fill-2); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-dim);
}
.footer__base p { margin-right: auto; }

/* --------------------------------------------------------------------------
   13. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}