/* ==========================================================================
   Chat Keeper — chatkeeperapp.com
   Modern stylesheet (no framework)

   Theming: dark is the default palette. Every surface, hairline and overlay
   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 — near-black with a trace of the brand green in the neutrals */
  --bg:            #090b0a;
  --bg-soft:       #0e1110;
  --surface:       #131716;
  --surface-2:     #1a1f1d;
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.16);

  /* Text */
  --text:          #f2f6f4;
  --text-muted:    #97a49e;
  --text-dim:      #6b7873;

  /* 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 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(9, 11, 10, 0.72);
  --nav-bg-open:   rgba(9, 11, 10, 0.94);
  --glass:         rgba(19, 23, 22, 0.82);
  --scrim:         rgba(4, 6, 5, 0.90);

  /* Brand — sampled from the app icon: its gradient runs #89ff9a (top-left)
     to #4cd964 (bottom-right). */
  --green:         #4cd964;
  --green-light:   #89ff9a;
  --green-deep:    #3ec456;
  --green-dim:     rgba(76, 217, 100, 0.14);
  --green-line:    rgba(76, 217, 100, 0.26);
  --green-ink:     #052a12; /* text/fills sitting on a green ground */
  --green-text:    var(--green); /* green used as type — see §1b */

  /* Accents borrowed from the app's own UI */
  --blue:          #0a84ff;
  --amber:         #ffcc00;
  --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(76, 217, 100, 0.20);
  --glow-b:        rgba(76, 217, 100, 0.07);
  --cta-glow:      rgba(76, 217, 100, 0.20);
  --btn-glow:      rgba(76, 217, 100, 0.60);
  --btn-glow-hi:   rgba(76, 217, 100, 0.75);
  --icon-glow:     rgba(76, 217, 100, 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:          #fbfdfc;
    --bg-soft:     #eef3f0;
    --surface:     #ffffff;
    --surface-2:   #f4f8f6;
    --line:        rgba(9, 26, 20, 0.10);
    --line-strong: rgba(9, 26, 20, 0.18);

    --text:        #0c1512;
    --text-muted:  #54635c;
    --text-dim:    #75837c;

    --fill-1:      rgba(9, 26, 20, 0.04);
    --fill-2:      rgba(9, 26, 20, 0.08);
    --fill-3:      rgba(9, 26, 20, 0.14);
    --well:        rgba(9, 26, 20, 0.035);
    --well-focus:  rgba(9, 26, 20, 0.055);
    --track:       rgba(9, 26, 20, 0.10);
    --edge-hi:     rgba(9, 26, 20, 0.10);
    --grid-line:   rgba(9, 26, 20, 0.05);
    --bezel-ring:  rgba(9, 26, 20, 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(232, 239, 235, 0.88);

    --green-dim:   rgba(10, 122, 51, 0.10);
    --green-line:  rgba(10, 122, 51, 0.26);
    --green-text:  #0a7a33;

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

    --em-from:     #17a044;
    --em-mid:      #0a7a33;
    --em-to:       #0a63c4;

    --glow-a:      rgba(76, 217, 100, 0.30);
    --glow-b:      rgba(76, 217, 100, 0.10);
    --cta-glow:    rgba(76, 217, 100, 0.26);
    --btn-glow:    rgba(45, 180, 80, 0.45);
    --btn-glow-hi: rgba(45, 180, 80, 0.60);
    --icon-glow:   rgba(45, 180, 80, 0.35);

    --shadow:      0 22px 48px -24px rgba(9, 26, 20, 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: 900px) {
  .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(38px, 5.6vw, 64px);
  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(19px, 2.3vw, 24px);
  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 body stays dark in both themes — it is a physical object, not a
   page surface. The app's own screens are light.
   -------------------------------------------------------------------------- */
.hero__device {
  position: relative;
  justify-self: center;
  width: min(316px, 78vw);
}

.phone {
  position: relative;
  padding: 10px;
  background: linear-gradient(155deg, #3a4046, #14171a 42%, #0b0d0e);
  border-radius: 40px;
  box-shadow:
    0 0 0 1px var(--bezel-ring),
    var(--shadow);
}
.phone::after { /* screen sheen */
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 31px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), transparent 42%);
  pointer-events: none;
  z-index: 2;
}
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 31px;
  background: #fff;
  aspect-ratio: 921 / 1633;
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }

/* Floating chat-totals card next to the hero phone */
.stat-card {
  position: absolute;
  right: -30px;
  bottom: 26px;
  width: 214px;
  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;
}
.stat-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.stat-card__head svg { width: 14px; height: 14px; flex: none; color: var(--green-text); }
.stat-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.stat-card__row + .stat-card__row { margin-top: 14px; }
.stat-card__row b { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-card__foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--green-text);
}
.stat-card__foot svg { width: 13px; height: 13px; 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(--green-deep), var(--green-light));
  transform-origin: left;
  animation: fill 1.4s var(--ease) both;
}
.meter--blue  i { background: linear-gradient(90deg, var(--blue), #6fb7ff); }
.meter--amber i { background: linear-gradient(90deg, var(--amber), #ffe066); }

@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) {
  .stat-card { right: -8px; bottom: 20px; width: 180px; 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, 204, 0, 0.16); border-color: rgba(255, 204, 0, 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; }
.demo-row code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-dim);
}

@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. Steps — how importing works
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 30px;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.step__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 20px;
  background: var(--green-dim);
  border: 1px solid var(--green-line);
  border-radius: 50%;
  color: var(--green-text);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 18px; letter-spacing: -0.025em; }
.step p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-muted);
}
.step__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  margin-top: 16px;
  background: var(--fill-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.step__key svg { width: 13px; height: 13px; flex: none; }

.steps__note {
  margin-top: 22px;
  padding: 16px 20px;
  background: var(--fill-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--text-muted);
}
.steps__note b { color: var(--text); font-weight: 600; }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step { padding: 26px; }
}

/* --------------------------------------------------------------------------
   9. Security 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; }

/* Passcode screen mock */
.lock {
  justify-self: center;
  width: min(300px, 82vw);
  padding: 34px 26px 30px;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: 34px;
  box-shadow: var(--shadow);
  text-align: center;
}
.lock__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.lock__dots {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 22px 0 30px;
}
.lock__dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
}
.lock__dots i.is-set { background: var(--green); border-color: var(--green); }

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.keypad span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fill-1);
  border: 1px solid var(--line);
  font-size: 21px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.keypad span small {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.keypad span.is-blank { background: none; border-color: transparent; }
.keypad span.is-bio { color: var(--green-text); }
.keypad span.is-bio svg { width: 24px; height: 24px; }

.lock__hint {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--text-dim);
}

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

/* --------------------------------------------------------------------------
   10. 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: 244px;
  scroll-snap-align: center;
  cursor: zoom-in;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  transition: transform 0.35s var(--ease);
}
.shot:hover { transform: translateY(-8px); }
.shot .phone { border-radius: 30px; padding: 7px; }
.shot .phone::after,
.shot .phone__screen { border-radius: 24px; }
.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: 12px;
  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); }

/* --------------------------------------------------------------------------
   11. 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: 17ch;
  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;
}

/* --------------------------------------------------------------------------
   12. 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%; }
}

/* --------------------------------------------------------------------------
   13. 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; }

/* --------------------------------------------------------------------------
   14. 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; }
}