/* =========================================================================
   ENLIGHTENED PRESENTER: design system + landing page
   1. Tokens          5. Hero            9. Scripture
   2. Reset/base      6. Showcase       10. Who it's for / Why
   3. Buttons         7. Features       11. Proof / FAQ / CTA
   4. Navigation      8. How it works   12. Footer / motion / responsive
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --ink:            #060a14;
  --ink-2:          #080d1a;
  --surface:        #0a1020;
  --surface-2:      #0c1326;
  --card:           #0e1729;
  --card-hi:        #121d34;

  /* lines */
  --line:           rgba(125,157,214, .12);
  --line-2:         rgba(125,157,214, .20);
  --line-3:         rgba(125,157,214, .32);

  /* text */
  --text:           #f2f6fd;
  --text-2:         #a8b8d4;
  --text-3:         #74849f;

  /* accent */
  --blue:           #3b82f6;
  --blue-2:         #60a5fa;
  --blue-deep:      #1d4ed8;
  --indigo:         #6366f1;
  --violet:         #8b5cf6;
  --cyan:           #22d3ee;

  /* radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh:    0 12px 32px -12px rgba(0,0,0,.7);
  --sh-lg: 0 40px 80px -32px rgba(0,0,0,.85);

  /* rhythm */
  --pad-x:  clamp(20px, 5vw, 40px);
  --sec-y:  clamp(72px, 10vw, 136px);
  --max:    1200px;
  --max-wide: 1320px;
  --max-narrow: 800px;

  --nav-h: 68px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

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

body{
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4{ margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.022em; }
p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
img, picture, svg{ display: block; max-width: 100%; }
img{ height: auto; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a{ color: var(--blue-2); text-decoration: none; }
abbr{ text-decoration: none; }
strong{ font-weight: 600; color: var(--text); }

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.icon{
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

:where(a, button, [tabindex]):focus-visible{
  outline: 2px solid var(--blue-2);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link{
  position: absolute; left: 12px; top: -80px; z-index: 200;
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--blue); color: #fff; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 12px; }

.container{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container-narrow{ max-width: var(--max-narrow); }

.section{ padding-block: var(--sec-y); position: relative; }

/* section headers */
.section-head{ max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head-center{ margin-inline: auto; text-align: center; }
.section-head h2{
  font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem);
  margin-bottom: 18px;
}
.section-lead{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
  max-width: 62ch;
}
.section-head-center .section-lead{ margin-inline: auto; }

.kicker{
  display: inline-block;
  margin-bottom: 16px;
  color: var(--blue-2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.grad{
  background: linear-gradient(100deg, var(--blue-2) 0%, var(--indigo) 55%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* soft radial atmosphere */
.glow{
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .55; pointer-events: none;
}

/* ---------- 3. BUTTONS ---------- */
.btn{
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: var(--r-pill);
  font-size: .94rem; font-weight: 600; letter-spacing: -.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease);
}
.btn-lg{ padding: 14px 28px; min-height: 52px; font-size: 1rem; }

.btn-primary{
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 24px -10px rgba(59,130,246,.9);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 16px 34px -12px rgba(59,130,246,1);
}
.btn-primary:active{ transform: translateY(0); }

.btn-outline{
  background: rgba(255,255,255,.02);
  border-color: var(--line-2);
  color: var(--text);
}
.btn-outline:hover{
  transform: translateY(-2px);
  border-color: var(--line-3);
  background: rgba(96,165,250,.07);
}

.cta-row{ display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 4. NAVIGATION ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              backdrop-filter .3s var(--ease);
}
.site-header.is-stuck{
  background: rgba(8, 13, 26, .78);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

.nav-inner{
  display: flex; align-items: center; gap: 20px;
  min-height: var(--nav-h);
}

.brand{ display: inline-flex; align-items: center; gap: 11px; color: var(--text); }
.brand-mark{ width: 30px; height: 30px; }
.brand-name{
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
}

.nav-actions{
  display: flex; align-items: center; gap: clamp(8px, 1.6vw, 20px);
  margin-left: auto;
}
.nav-link{
  color: var(--text-2);
  font-size: .92rem; font-weight: 500;
  padding: 8px 2px;
  transition: color .2s var(--ease);
}
.nav-link:hover{ color: var(--text); }

/* The header carries only two controls, so it never needs a mobile menu;
   it just sheds them in order as the viewport narrows. */
@media (max-width: 460px){
  .nav-link{ display: none; }
}
@media (max-width: 400px){
  /* mark only; the link still carries the full name for assistive tech */
  .site-header .brand-name{ display: none; }
}

/* ---------- APP FRAME (shared product treatment) ---------- */
.app-frame{
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #0d1527, #080d1a);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(96,165,250,.06);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.app-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.022);
}
.app-dots{ display: flex; gap: 6px; flex: none; }
.app-dots i{ width: 9px; height: 9px; border-radius: 50%; background: var(--line-3); }
.app-dots i:first-child{ background: rgba(248,113,113,.55); }
.app-dots i:nth-child(2){ background: rgba(251,191,36,.5); }
.app-title{
  display: flex; align-items: center; gap: 7px;
  color: var(--text-3); font-size: .74rem; font-weight: 500; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-title img{ width: 15px; height: 15px; }
.app-shot{ width: 100%; display: block; }


/* ---------- 5. HERO ---------- */
/* Centred composition: headline, one supporting line, actions, then the
   product interface as the single large object beneath them. */
.hero{
  position: relative;
  padding-top: clamp(88px, 10vw, 156px);
  padding-bottom: clamp(56px, 8vw, 112px);
  overflow: hidden;
  text-align: center;
}
.hero .container{ max-width: 1400px; }
.hero-inner{ position: relative; z-index: 1; }

.hero-atmos{ position: absolute; inset: 0; pointer-events: none; }
.glow-a{
  width: 900px; height: 700px; top: -320px; left: -180px;
  background: radial-gradient(circle, rgba(37,99,235,.42), transparent 66%);
}
.glow-b{
  width: 1000px; height: 820px; top: -260px; right: -260px;
  background: radial-gradient(circle, rgba(99,102,241,.32), transparent 66%);
}
.grid-veil{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(125,157,214,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,157,214,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}
.hero-fade{
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background: linear-gradient(180deg, transparent, var(--ink));
  pointer-events: none;
}

.hero h1{
  font-size: clamp(2.3rem, 1.2rem + 4.3vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.038em;
  margin-bottom: clamp(28px, 3.2vw, 44px);
  text-wrap: balance;
}
.hero h1 span{ display: block; }

.hero-sub{
  color: var(--text-2);
  font-size: clamp(1.02rem, .95rem + .5vw, 1.3rem);
  max-width: 62ch;
  margin: 0 auto clamp(30px, 4vw, 42px);
}

.hero .cta-row{
  justify-content: center;
  margin-bottom: clamp(52px, 6vw, 86px);
}

/* ---------- LAPTOP MOCKUP (hero) ---------- */
.laptop{
  --bezel: clamp(8px, 1vw, 13px);
  position: relative; z-index: 1;
  margin: 0 auto;
  max-width: 1010px;
  transform:
    perspective(2000px)
    rotateX(calc(var(--ty, 0) * -1.4deg))
    rotateY(calc(var(--tx, 0) * 1.4deg));
  transition: transform .45s var(--ease);
  will-change: transform;
}

.laptop-screen{
  position: relative;
  padding: var(--bezel);
  padding-bottom: calc(var(--bezel) * 1.7);
  border-radius: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px) 6px 6px;
  background: linear-gradient(180deg, #202b40, #131b2b 60%, #0d1422);
  box-shadow:
    0 0 0 1px rgba(150,178,224,.14),
    0 48px 90px -36px rgba(0,0,0,.92),
    0 0 70px -24px rgba(59,130,246,.35);
}
/* the camera dot on the top bezel */
.laptop-screen::before{
  content: "";
  position: absolute; top: calc(var(--bezel) / 2 - 1.5px); left: 50%;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%;
  background: rgba(150,178,224,.35);
}
.laptop-screen picture,
.laptop-screen img{
  display: block; width: 100%;
  border-radius: 3px;
}
.laptop-screen img{ background: #05080f; }

/* deck: slightly wider than the lid, as a real laptop is */
.laptop-base{
  position: relative;
  width: calc(100% + clamp(28px, 4.5vw, 64px));
  margin-left: calc(clamp(28px, 4.5vw, 64px) / -2);
  height: clamp(11px, 1.3vw, 17px);
  border-radius: 0 0 clamp(9px, 1.1vw, 14px) clamp(9px, 1.1vw, 14px);
  background: linear-gradient(180deg, #33415e 0%, #1d2739 55%, #0d1422 100%);
  box-shadow:
    inset 0 1px 0 rgba(170,197,240,.22),
    0 20px 38px -14px rgba(0,0,0,.95);
}
/* the thumb notch */
.laptop-base span{
  position: absolute; top: 0; left: 50%;
  width: clamp(56px, 9vw, 104px); height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 5px 5px;
  background: rgba(3, 6, 14, .55);
}

/* ---------- HERO BACKGROUND SLIDES ---------- */
/* Three service photos crossfade on a 24s loop: each holds for ~8s, with a
   ~1.5s overlap into the next. Kept very faint so the text and laptop lead. */
.hero-slides{
  position: absolute; inset: 0;
  /* fade the photos out towards the top and bottom edges */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%);
}
.hero-slide{
  --slide-o: .11;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: 0;
  animation: hero-slide 24s linear infinite;
  will-change: opacity, transform;
}
.hero-slide:nth-child(2){ animation-delay: 8s; }
.hero-slide:nth-child(3){ animation-delay: 16s; }

@keyframes hero-slide{
  0%   { opacity: 0;              transform: scale(1.06); }
  6%   { opacity: var(--slide-o); }
  33%  { opacity: var(--slide-o); }
  39%  { opacity: 0;              transform: scale(1); }
  100% { opacity: 0;              transform: scale(1); }
}

/* ---------- HERO CONTROLS + LIVE OUTPUT OVERLAY ---------- */
.hero-stage{ position: relative; max-width: 1010px; margin-inline: auto; }

/* The overlay covers the gradient area of the live-output preview inside the
   screenshot, so the floating buttons really do change what the laptop shows.
   Coordinates are a % of the 1920x1042 capture (x 660-1275, y 126-455). */
.output-overlay{
  position: absolute;
  left: 34.37%; top: 12.09%; width: 32.03%; height: 31.57%;
  display: none;
  overflow: hidden;
}
.output-slide,
.output-black{ position: absolute; inset: 0; }
.output-slide{
  display: grid; place-content: center; gap: .55em;
  padding: .6em 1em;
  text-align: center;
  /* sampled from the live output in the screenshot so the overlay is seamless:
     rgb(0,19,113) top-left through to rgb(0,0,22) bottom-right */
  background: linear-gradient(135deg, #001371 0%, #000f60 28%, #000936 62%, #000016 100%);
}
.output-label{
  font-size: .72em; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(226,238,255,.72);
}
.output-lines{
  font-size: 1em; line-height: 1.45; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
  transition: opacity .25s var(--ease);
}
.output-overlay.is-switching .output-lines{ opacity: 0; }

.output-black{
  display: grid; place-items: center;
  background: #000;
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease);
}
.output-black span{
  font-size: .74em; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.26);
}
.output-overlay.is-black .output-black{ opacity: 1; }

/* floating controls */
.hero-controls{ display: none; }
.hero-controls-hint{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.hero-chip{
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(10,16,32,.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: var(--text-2);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.8);
  opacity: .74;
  /* drag offset lives in `translate`, the drift in `transform`, so they compose */
  translate: var(--dx, 0px) var(--dy, 0px);
  cursor: grab;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  animation: chip-drift var(--drift, 9s) ease-in-out infinite;
  /* on release the chip glides home: a short pause, then a slow ease-out */
  transition: opacity .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease),
              translate 1.8s cubic-bezier(.22, 1, .36, 1) .3s;
}
/* while held, the chip must track the pointer with no lag */
.hero-chip.is-held{
  transition: opacity .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease);
}
.hero-chip:hover,
.hero-chip:focus-visible,
.hero-chip.is-dragging{ opacity: 1; background: rgba(10,16,32,.88); }
.hero-chip.is-dragging{
  cursor: grabbing; z-index: 5;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(96,165,250,.45);
}
.hero-chip em{
  font-style: normal; font-weight: 500;
  color: var(--text-3);
}
.chip-info em{ padding-left: 8px; border-left: 1px solid var(--line-2); }
.chip-info .icon{ color: var(--blue-2); }
.chip-info .swatch{
  width: 12px; height: 12px; border-radius: 4px; flex: none;
  background: linear-gradient(135deg, #001371, #000016);
  box-shadow: 0 0 0 1px rgba(150,178,224,.35);
}
.hero-chip .icon{ width: 15px; height: 15px; }

/* four corners, clear of the screen itself */
.hero-chip[data-slot="tl"]{ bottom: 100%; left: 3%;  margin-bottom: 16px; --drift: 9s;   animation-delay: -.6s; }
.hero-chip[data-slot="tr"]{ bottom: 100%; right: 3%; margin-bottom: 16px; --drift: 10.5s; animation-delay: -3.1s; }
.hero-chip[data-slot="bl"]{ top: 100%;    left: 8%;  margin-top: 18px;    --drift: 8.2s; animation-delay: -5.4s; }
.hero-chip[data-slot="br"]{ top: 100%;    right: 8%; margin-top: 18px;    --drift: 11s;  animation-delay: -7.2s; }

/* the four informational chips hug the laptop's sides */
.chip-info{ display: none; }
.hero-chip[data-slot="ml"]{ top: 22%; right: calc(100% - 40px); --drift: 12s;   animation-delay: -2s; }
.hero-chip[data-slot="mr"]{ top: 36%; left: calc(100% - 40px);  --drift: 10s;   animation-delay: -6s; }
.hero-chip[data-slot="ll"]{ top: 62%; right: calc(100% - 52px); --drift: 11.5s; animation-delay: -4.2s; }
.hero-chip[data-slot="lr"]{ top: 74%; left: calc(100% - 48px);  --drift: 9.6s;  animation-delay: -8s; }
/* only once the gutters beside the laptop can hold them without clipping */
@media (min-width: 1360px){ .chip-info{ display: inline-flex; } }

/* slow, slight, two-axis wander */
@keyframes chip-drift{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  30%     { transform: translate3d(5px, -7px, 0); }
  65%     { transform: translate3d(-4px, -3px, 0); }
}

/* Only the chip being aimed at holds still: the rest keep drifting. */
.hero-chip:hover,
.hero-chip:focus-visible,
.hero-chip.is-dragging{ animation-play-state: paused; }

/* no transition here: .hero-chip already transitions colour AND the glide home,
   and a second shorthand would silently drop the translate */
.chip-act{ cursor: pointer; }
.chip-act:hover{ color: var(--text); border-color: rgba(96,165,250,.6); background: rgba(24,44,84,.9); }
.chip-act:active{ transform: translateY(1px); }
.chip-act[aria-pressed="true"]{
  color: #fff; border-color: rgba(96,165,250,.8); background: rgba(37,78,150,.92);
}

.chip-status{ gap: 9px; }
.chip-status .pip{
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #f87171; box-shadow: 0 0 9px 1px rgba(248,113,113,.75);
  animation: pulse 2.4s var(--ease) infinite;
}
.chip-status em{
  font-style: normal; font-weight: 500;
  color: var(--text-3);
  padding-left: 9px; margin-left: 2px;
  border-left: 1px solid var(--line-2);
}
.hero-controls.is-standby .chip-status .pip{
  background: var(--text-3); box-shadow: none; animation: none;
}

/* only where the full interface is shown and the gutters allow it */
@media (min-width: 901px){
  .output-overlay{ display: block; font-size: clamp(8px, .95vw, 13px); }
  /* the chips are controls, so they only appear once the script that drives them runs */
  .js .hero-controls{ display: block; }
}

/* ---------- PHOTO BAND ---------- */
.photo-band{
  position: relative;
  display: grid;
  min-height: clamp(360px, 46vw, 560px);
  border-block: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.photo-band picture,
.photo-band-veil,
.photo-band-copy{ grid-area: 1 / 1; }
.photo-band-img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.photo-band-veil{
  /* dark enough for white text bottom-left, light enough that the room reads */
  background:
    linear-gradient(180deg, rgba(6,10,20,.48) 0%, rgba(6,10,20,.14) 38%, rgba(6,10,20,.9) 100%),
    linear-gradient(90deg, rgba(6,10,20,.72) 0%, rgba(6,10,20,0) 58%);
}
.photo-band-copy{
  position: relative; z-index: 1;
  align-self: end;
  padding-block: clamp(36px, 6vw, 72px);
  max-width: var(--max);
}
.photo-band-copy h2{
  font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.9rem);
  max-width: 16ch;
  margin-bottom: 16px;
  text-wrap: balance;
}
.photo-band-copy p{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  max-width: 52ch;
}

/* ---------- WHY: photo beside the copy ---------- */
.why-top{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.why-media{
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.why-media img{
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover; object-position: center 42%;
}
.section-why .why-head{ text-align: left; margin: 0; max-width: none; }
.section-why .why-lead{ margin-inline: 0; }

/* ---------- CTA backdrop photo ---------- */
.cta-photo{
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cta-photo img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  opacity: .22;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
}
/* keep the copy column off the busy part of the photo */
.cta-photo::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(6,10,23,.93) 0%, rgba(6,10,23,.72) 34%, rgba(6,10,23,.3) 62%, rgba(6,10,23,.12) 100%);
}

/* ---------- who it's for: supporting photo ---------- */
.who-photo{
  margin: 0 0 clamp(26px, 4vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.who-photo img{
  display: block; width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover; object-position: center 46%;
}

/* ---------- 404 ---------- */
.notfound{
  position: relative; overflow: hidden;
  padding-block: clamp(88px, 11vw, 156px);
  text-align: center;
}
.notfound-inner{ position: relative; z-index: 1; }
.notfound-code{
  font-size: clamp(4.5rem, 3rem + 7vw, 9rem);
  font-weight: 700; line-height: 1; letter-spacing: -.05em;
  color: transparent;
  background: linear-gradient(180deg, rgba(150,178,224,.28), rgba(150,178,224,.04));
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: 8px;
}
.notfound-screen{
  display: grid; place-items: end start;
  width: min(360px, 80%); aspect-ratio: 16 / 9;
  margin: 0 auto 36px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #000;
  box-shadow: var(--sh-lg);
}
.notfound-screen .live-pip i{ background: var(--text-3); box-shadow: none; animation: none; }
.notfound h1{
  font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3rem);
  margin-bottom: 14px;
}
.notfound-lead{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  margin: 0 auto 34px; max-width: 44ch;
}
.notfound .cta-row{ justify-content: center; }

/* ---------- INTRO (landing page) ---------- */
.section-intro{
  background: linear-gradient(180deg, var(--ink), var(--surface) 45%, var(--ink));
  border-block: 1px solid var(--line);
}
.intro-grid{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.intro-copy h2{
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.85rem);
  margin-bottom: 18px;
}
.intro-list{
  display: grid; gap: 12px;
  margin: 28px 0 0;
}
.intro-list li{
  position: relative;
  padding-left: 26px;
  color: var(--text-2);
  font-size: .97rem;
}
.intro-list li::before{
  content: "";
  position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-2);
  box-shadow: 0 0 0 3px rgba(96,165,250,.14);
}
.intro-link{ margin-top: 30px; }
.intro-link a{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .97rem; font-weight: 600;
  transition: gap .2s var(--ease);
}
.intro-link a:hover{ gap: 13px; }
.intro-link .icon{ width: 1.05em; height: 1.05em; }
.app-frame-intro{ max-width: 520px; margin-inline: auto; }
.app-frame-intro .app-shot{ display: block; }

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  position: relative;
  overflow: hidden;
  padding-top: clamp(76px, 9vw, 124px);
  padding-bottom: clamp(44px, 6vw, 76px);
}
.crumbs{ margin-bottom: 26px; }
.crumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crumbs li{ color: var(--text-3); font-size: .84rem; }
.crumbs li + li::before{
  content: "/";
  margin-right: 10px;
  color: var(--line-3);
}
.crumbs a{ display: inline-block; padding-block: 4px; color: var(--text-2); }
.crumbs a:hover{ color: var(--blue-2); }
.page-hero h1{
  position: relative; z-index: 1;
  font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem);
  letter-spacing: -.032em;
  max-width: 16ch;
  margin-bottom: 18px;
}
.page-hero-lead{
  position: relative; z-index: 1;
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .4vw, 1.15rem);
  max-width: 46ch;
}

/* ---------- 6. PRODUCT SHOWCASE ---------- */
.section-showcase{
  background: linear-gradient(180deg, var(--ink), var(--surface) 42%, var(--ink));
  border-block: 1px solid var(--line);
}
.section-showcase .container{ max-width: 1440px; }

.showcase-stage{
  display: grid;
  grid-template-columns:
    minmax(196px, .78fr) minmax(0, 5fr) minmax(196px, .78fr);
  gap: clamp(10px, 1.6vw, 26px);
  align-items: center;
}
.app-frame-wide{ position: relative; }
.app-frame-wide::before{
  content: ""; position: absolute; inset: 8% 12%;
  border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, rgba(59,130,246,.35), transparent 70%);
  filter: blur(70px);
}

.callouts{ position: relative; align-self: stretch; min-height: 300px; }
.callouts li{
  position: absolute; top: var(--t);
  display: flex; align-items: center;
}
.callouts-left li{ right: 0; }
.callouts-right li{ left: 0; flex-direction: row-reverse; }
.callout{
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(14,23,41,.9);
  color: var(--text-2);
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  transition: color .22s var(--ease), border-color .22s var(--ease),
              background-color .22s var(--ease), transform .22s var(--ease);
}
.callout:hover,
.callout:focus-visible,
.callout.is-active{
  color: var(--text);
  border-color: rgba(96,165,250,.7);
  background: rgba(30,58,110,.9);
}
.callouts-left .callout:hover,
.callouts-left .callout.is-active{ transform: translateX(-3px); }
.callouts-right .callout:hover,
.callouts-right .callout.is-active{ transform: translateX(3px); }

/* region markers over the screenshot; the huge spread dims everything else */
.hl{
  position: absolute;
  left: var(--l); top: var(--t); width: var(--w); height: var(--h);
  border: 1.5px solid var(--blue-2);
  border-radius: 5px;
  box-shadow: 0 0 0 9999px rgba(4, 8, 18, .62), 0 0 22px rgba(96,165,250,.55);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.hl.is-lit{ opacity: 1; }
.callouts li::after{
  content: "";
  width: clamp(12px, 2vw, 30px); height: 1px;
  background: linear-gradient(90deg, rgba(96,165,250,.6), transparent);
  flex: none;
}
.callouts-left li::after{ background: linear-gradient(90deg, rgba(96,165,250,.15), rgba(96,165,250,.7)); }
.callouts-right li::after{ background: linear-gradient(270deg, rgba(96,165,250,.15), rgba(96,165,250,.7)); }

.callout-legend{
  display: none;
  flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 28px;
}
.callout-legend li{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: rgba(14,23,41,.7);
  color: var(--text-2); font-size: .8rem; font-weight: 500;
}
.callout-legend .icon{ width: 1em; height: 1em; color: var(--blue-2); }

/* ---------- 7. FEATURES ---------- */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.feature-card{
  position: relative;
  padding: 28px 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card), var(--ink-2));
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.feature-card::before{
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
                              rgba(59,130,246,.18), transparent 68%);
  transition: opacity .3s var(--ease);
}
.feature-card:hover{
  transform: translateY(-4px);
  border-color: var(--line-3);
  box-shadow: var(--sh);
}
.feature-card:hover::before{ opacity: 1; }

.feature-num{
  position: absolute; top: 22px; right: 24px;
  color: var(--text-3); font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  opacity: .6;
}
.feature-icon{
  width: 26px; height: 26px; margin-bottom: 20px;
  color: var(--blue-2);
  transition: transform .3s var(--ease);
}
.feature-card:hover .feature-icon{ transform: translateY(-2px) scale(1.06); }
.feature-card h3{ font-size: 1.08rem; margin-bottom: 10px; }
.feature-card p{ color: var(--text-2); font-size: .93rem; }

/* ---------- 8. HOW IT WORKS ---------- */
.section-steps{
  background: linear-gradient(180deg, var(--ink), var(--surface-2) 50%, var(--ink));
  border-block: 1px solid var(--line);
}
.steps-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.steps-list{ display: grid; gap: 10px; }

.step{
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.step.is-active{
  border-color: var(--line-2);
  background: linear-gradient(180deg, rgba(18,29,52,.9), rgba(10,16,32,.6));
}
.step-btn{
  display: flex; gap: 18px; width: 100%;
  padding: 22px 22px 24px;
  text-align: left;
  border-radius: inherit;
}
.step-num{
  color: var(--text-3); font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  padding-top: 4px; flex: none;
  transition: color .35s var(--ease);
}
.step.is-active .step-num{ color: var(--blue-2); }
.step-text{ display: block; }
.step-title{
  display: flex; align-items: center; gap: 10px;
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-2);
  margin-bottom: 8px;
  transition: color .35s var(--ease);
}
.step-title .icon{ width: 19px; height: 19px; color: var(--text-3); transition: color .35s var(--ease); }
.step.is-active .step-title{ color: var(--text); }
.step.is-active .step-title .icon{ color: var(--blue-2); }
.step-desc{ display: block; color: var(--text-2); font-size: .94rem; }

.step-media-inline{ display: none; margin: 0 22px 22px; }
.step-media-inline img{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink);
}

.steps-media{ position: sticky; top: calc(var(--nav-h) + 32px); }
.app-frame-step{ background: linear-gradient(180deg, #0d1527, #070c17); }
.step-stage{
  --stage-pad: clamp(12px, 1.8vw, 22px);
  position: relative;
  aspect-ratio: 16 / 11;
  padding: var(--stage-pad);
}
.step-img{
  position: absolute; inset: var(--stage-pad);
  width: calc(100% - 2 * var(--stage-pad));
  height: calc(100% - 2 * var(--stage-pad));
  object-fit: contain;
  opacity: 0; transform: scale(.975) translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.6));
}
.step-img.is-shown{ opacity: 1; transform: none; }

/* ---------- 9. VISUAL CUSTOMIZATION ---------- */
.visual-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.visual-card{
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--card), var(--ink-2));
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.visual-card:hover{ transform: translateY(-4px); border-color: var(--line-3); box-shadow: var(--sh); }
.visual-body{ flex: 1 1 auto; padding: 24px 30px 30px; }
.visual-body h3{ font-size: 1.18rem; margin-bottom: 10px; }
.visual-body p{ color: var(--text-2); font-size: .95rem; max-width: 46ch; }

.visual-media{
  position: relative;
  flex: none;
  height: clamp(190px, 24vw, 264px);
  padding: 28px 30px 8px;
  display: flex; align-items: center; justify-content: center;
}
.visual-media::before{
  content: ""; position: absolute; inset: 20% 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(79,110,240,.3), transparent 70%);
  filter: blur(46px);
}
.visual-media img{
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;          /* never crop or stretch the real interface */
  padding: 7px;
  background: #070c17;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--sh);
  transition: transform .45s var(--ease);
}
.visual-card:hover .visual-media img{ transform: scale(1.015); }

/* ---------- 10. SCRIPTURE ---------- */
.section-scripture{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ink), #070d1e 40%, var(--ink));
  border-block: 1px solid var(--line);
}
.scripture-atmos{ position: absolute; inset: 0; pointer-events: none; }
.glow-c{
  width: 1100px; height: 700px; top: 8%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(37,99,235,.3), transparent 68%);
}

.scripture-stage{
  position: relative;
  max-width: 940px; margin-inline: auto;
}
.scripture-screen{
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 34vw, 420px);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 72px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%, rgba(37,99,235,.28), transparent 62%),
    linear-gradient(165deg, #0b1733, #060b18 70%);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.verse{
  grid-area: 1 / 1;
  margin: 0; text-align: center;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.verse.is-shown{ opacity: 1; transform: none; pointer-events: auto; }
.verse blockquote{ margin: 0; }
.verse blockquote p{
  font-size: clamp(1.3rem, .95rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.verse figcaption{
  margin-top: clamp(20px, 3vw, 32px);
  color: var(--blue-2);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.verse figcaption span{ color: var(--text-3); margin-left: 8px; letter-spacing: .1em; }
.sc{ font-size: .82em; letter-spacing: .04em; }

.scripture-controls{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 20px;
}
.live-pip{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-3); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.live-pip i{
  width: 7px; height: 7px; border-radius: 50%;
  background: #f87171; box-shadow: 0 0 9px 1px rgba(248,113,113,.7);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }

.verse-dots{ display: flex; gap: 8px; }
/* The bar is 4px tall but the button is 24px, so it is actually tappable. */
.verse-dots button{
  position: relative;
  width: 34px; height: 24px; padding: 0;
  background: none;
  transition: width .3s var(--ease);
}
.verse-dots button[aria-selected="true"]{ width: 52px; }
.verse-dots button::before,
.verse-dots button::after{
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; margin-top: -2px;
  border-radius: var(--r-pill);
}
.verse-dots button::before{ background: var(--line-2); transition: background-color .3s var(--ease); }
.verse-dots button:hover::before{ background: var(--line-3); }

/* the fill drains across the autoplay interval, so the pause on hover is visible */
.verse-dots button::after{
  transform-origin: left;
  transform: scaleX(0);
  background: var(--blue-2);
}
.verse-dots button[aria-selected="true"]::after{ transform: scaleX(1); }
.js .verse-dots button[aria-selected="true"].is-timing::after{
  animation: verse-fill var(--verse-ms, 6500ms) linear forwards;
}
@keyframes verse-fill{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

.scripture-screen:focus-visible{ outline: 2px solid var(--blue-2); outline-offset: 4px; }

.scripture-points{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px;
  margin-top: clamp(32px, 5vw, 52px);
}
.scripture-points li{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-2); font-size: .9rem;
}
.scripture-points .icon{ width: 1em; height: 1em; color: var(--blue-2); }

/* ---------- 11. WHO IT'S FOR ---------- */
.who-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.who-card{
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--card), var(--ink-2));
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.who-card:hover{ transform: translateY(-4px); border-color: var(--line-3); box-shadow: var(--sh); }
.who-media{
  position: relative;
  height: 170px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #070c17;
}
.who-media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: left top;
  opacity: .92;
  transition: transform .6s var(--ease);
}
.who-card:hover .who-media img{ transform: scale(1.04); }
.who-media::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,13,26,.85));
}
.who-body{ padding: 22px 24px 26px; }
.who-icon{ width: 22px; height: 22px; color: var(--blue-2); margin-bottom: 14px; }
.who-body h3{ font-size: 1.06rem; margin-bottom: 8px; }
.who-body p{ color: var(--text-2); font-size: .92rem; }

/* ---------- WHY ---------- */
.section-why{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ink), var(--surface) 50%, var(--ink));
  border-block: 1px solid var(--line);
}
.why-atmos{ position: absolute; inset: 0; pointer-events: none; }
.glow-d{
  width: 1200px; height: 620px; top: -120px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(99,102,241,.26), transparent 68%);
  animation: drift 18s var(--ease) infinite alternate;
}
@keyframes drift{
  from{ transform: translateX(-54%) translateY(0); }
  to  { transform: translateX(-46%) translateY(26px); }
}

.why-head{ text-align: center; max-width: 780px; margin: 0 auto clamp(48px, 7vw, 80px); }
.why-title{
  font-size: clamp(2.15rem, 1.3rem + 3.6vw, 4rem);
  line-height: 1.06; letter-spacing: -.035em;
  margin-bottom: 24px;
}
.why-lead{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .35vw, 1.18rem);
  max-width: 54ch; margin-inline: auto;
}
.why-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.why-card{
  padding: 34px 30px 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(14,23,41,.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.why-card:hover{ transform: translateY(-4px); border-color: var(--line-3); background: rgba(18,29,52,.7); }
.why-icon{
  width: 28px; height: 28px; margin: 0 auto 20px;
  color: var(--blue-2);
}
.why-card h3{ font-size: 1.1rem; margin-bottom: 10px; }
.why-card p{ color: var(--text-2); font-size: .94rem; }

/* ---------- FAQ ---------- */
.section-faq{
  background: linear-gradient(180deg, var(--ink), var(--surface-2) 55%, var(--ink));
  border-block: 1px solid var(--line);
}
.faq-list{
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10,16,32,.5);
  overflow: hidden;
}
.faq-item + .faq-item{ border-top: 1px solid var(--line); }
.faq-item h3{ margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%;
  padding: 22px clamp(20px, 3vw, 28px);
  text-align: left;
  font-size: clamp(.98rem, .95rem + .2vw, 1.06rem);
  font-weight: 600; letter-spacing: -.012em;
  color: var(--text);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.faq-q:hover{ background: rgba(96,165,250,.05); }
.faq-chevron{
  width: 20px; height: 20px; color: var(--text-3);
  transition: transform .35s var(--ease), color .25s var(--ease);
}
.faq-q[aria-expanded="true"]{ color: var(--blue-2); }
.faq-q[aria-expanded="true"] .faq-chevron{ transform: rotate(180deg); color: var(--blue-2); }

/* Answers are expanded by default so a no-JS visitor still reads them;
   the collapsing accordion is layered on only once JS is running. */
.faq-panel{
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq-panel > div{ overflow: hidden; }

.js .faq-panel{ grid-template-rows: 0fr; }
.js .faq-panel > div{ visibility: hidden; transition: visibility 0s .38s; }
.js .faq-item.is-open .faq-panel{ grid-template-rows: 1fr; }
.js .faq-item.is-open .faq-panel > div{ visibility: visible; transition-delay: 0s; }
.faq-panel p{
  padding: 0 clamp(20px, 3vw, 28px) 24px;
  color: var(--text-2);
  font-size: .96rem;
  max-width: 68ch;
}

/* ---------- FINAL CTA ---------- */
.final-cta{
  position: relative; overflow: hidden;
  padding-block: var(--sec-y);
  background: linear-gradient(180deg, var(--ink), #080f24 55%, #060a17);
  border-top: 1px solid var(--line);
}
.cta-atmos{ position: absolute; inset: 0; pointer-events: none; }
.glow-e{
  width: 900px; height: 620px; top: -160px; left: -160px;
  background: radial-gradient(circle, rgba(37,99,235,.36), transparent 68%);
}
.glow-f{
  width: 860px; height: 620px; bottom: -240px; right: -180px;
  background: radial-gradient(circle, rgba(99,102,241,.3), transparent 68%);
}
.cta-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
  max-width: var(--max-wide);
}
.cta-copy h2{
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  margin-bottom: 20px;
}
.cta-copy > p{
  color: var(--text-2);
  font-size: clamp(1rem, .96rem + .35vw, 1.15rem);
  max-width: 44ch;
  margin-bottom: 34px;
}
.cta-note{
  margin-top: 22px;
  color: var(--text-3); font-size: .88rem;
}
.cta-note a{ color: var(--text-2); border-bottom: 1px solid var(--line-2); }
.cta-note a:hover{ color: var(--blue-2); border-bottom-color: currentColor; }

.app-frame-cta{
  max-width: 620px; margin-inline: auto;
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
}
.app-frame-cta:hover{ transform: perspective(1600px) rotateY(-3deg) rotateX(1deg) translateY(-4px); }

/* ---------- 12. FOOTER ---------- */
.site-footer{
  background: #04070f;
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vw, 88px) 30px;
  overflow: hidden;
}
.footer-top{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 5vw, 72px);
}
.footer-brand .brand{ margin-bottom: 18px; }
.footer-brand p{
  color: var(--text-3);
  font-size: .92rem;
  max-width: 34ch;
}

.footer-nav{
  display: grid;
  /* content-sized so the contact address never breaks mid-word */
  grid-template-columns: auto auto;
  gap: clamp(28px, 4vw, 72px);
}
.footer-col h2{
  font-size: .74rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.footer-col li + li{ margin-top: 5px; }
.footer-col a{
  display: inline-block; padding-block: 3px;
  color: var(--text-2); font-size: .92rem;
  transition: color .2s var(--ease);
  overflow-wrap: break-word;
}
.footer-col a:hover{ color: var(--text); }

.mail-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-link{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-2); font-size: .92rem;
  transition: color .2s var(--ease);
}
.mail-link:hover{ color: var(--text); }
.mail-link .icon{ width: 16px; height: 16px; color: var(--blue-2); flex: none; }

.copy-mail{
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  color: var(--text-3);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
/* the author display rule would otherwise beat the hidden attribute,
   leaving a dead control on no-JS / no-clipboard clients */
.copy-mail[hidden]{ display: none; }
.copy-mail:hover{ color: var(--text); border-color: var(--line-3); background: rgba(96,165,250,.08); }
.copy-mail .icon{ width: 14px; height: 14px; grid-area: 1 / 1; }
.copy-mail .icon-done{ opacity: 0; }
.copy-mail.is-done{ color: #6ee7b7; border-color: rgba(110,231,183,.5); }
.copy-mail.is-done .icon-copy{ opacity: 0; }
.copy-mail.is-done .icon-done{ opacity: 1; }

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* oversized wordmark, cropped by the footer edge */
.footer-wordmark{
  margin: clamp(44px, 7vw, 88px) 0 0;
  /* sized to sit inside the container; wraps rather than clipping if it ever
     exceeds it, so a fallback font can never break the lockup */
  font-size: clamp(1.8rem, 7.4vw, 88px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  color: transparent;
  background: linear-gradient(180deg, rgba(150,178,224,.17), rgba(150,178,224,.03));
  -webkit-background-clip: text; background-clip: text;
  user-select: none;
}

.footer-bottom{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: .84rem;
}
.footer-domain{ color: var(--text-3); }

/* ---------- SCROLL REVEAL ---------- */
/* Content is visible by default; only a JS-enabled page opts into the
   reveal, so a failed/blocked script can never leave the page blank. */
.js .reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in{ opacity: 1; transform: none; }

/* stagger cards inside a grid */
.js .feature-grid .reveal:nth-child(4n+2){ transition-delay: .06s; }
.js .feature-grid .reveal:nth-child(4n+3){ transition-delay: .12s; }
.js .feature-grid .reveal:nth-child(4n+4){ transition-delay: .18s; }
.js .who-grid .reveal:nth-child(2),
.js .why-grid .reveal:nth-child(2){ transition-delay: .08s; }
.js .who-grid .reveal:nth-child(3),
.js .why-grid .reveal:nth-child(3){ transition-delay: .16s; }
.js .who-grid .reveal:nth-child(4){ transition-delay: .24s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* below this the gutters cannot hold a chip, so fall back to the legend */
@media (max-width: 1320px){
  .showcase-stage{ grid-template-columns: minmax(0, 1fr); }
  .callouts{ display: none; }
  .callout-legend{ display: flex; }
}

/* tablet landscape */
@media (max-width: 1080px){
  .cta-grid{ grid-template-columns: minmax(0, 1fr); }
  .cta-copy > p{ max-width: 56ch; }
  .app-frame-cta{ transform: none; }
  .app-frame-cta:hover{ transform: translateY(-4px); }
}

/* tablet portrait */
@media (max-width: 960px){
  .steps-layout{ grid-template-columns: minmax(0, 1fr); }
  .steps-media{ display: none; }
  .step-media-inline{ display: block; }
  .step{ border-color: var(--line); background: rgba(10,16,32,.45); }

  .visual-grid{ grid-template-columns: minmax(0, 1fr); }
  .who-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .intro-grid{ grid-template-columns: minmax(0, 1fr); }
  .why-top{ grid-template-columns: minmax(0, 1fr); }
  .section-why .why-head{ text-align: center; }
  .section-why .why-lead{ margin-inline: auto; }
  .footer-top{ grid-template-columns: minmax(0, 1fr); }
}

/* phones */
@media (max-width: 700px){
  :root{ --sec-y: clamp(60px, 13vw, 84px); }

  /* The hero fills exactly one screen (minus the sticky header). Text and
     buttons take what they need; the laptop sizes itself to the height that
     is left, so the whole hero is visible without scrolling on any phone. */
  .hero{
    display: flex; flex-direction: column;
    min-height: calc(100svh - var(--nav-h));
    padding-top: clamp(56px, 10svh, 92px);
    padding-bottom: clamp(18px, 3svh, 30px);
  }
  .hero-inner{ flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .hero h1{
    letter-spacing: -.03em;
    font-size: min(8.7vw, 6svh);   /* keeps "Present Scripture." on one line */
    margin-bottom: clamp(22px, 3.4svh, 34px);
  }
  .hero-sub{
    font-size: min(4.3vw, 2.5svh, 1.05rem);
    margin-bottom: clamp(18px, 3.2svh, 30px);
  }
  .hero .cta-row{ gap: 10px; margin-bottom: clamp(18px, 3.4svh, 34px); }
  /* side by side when they fit, wrapping to full width when they don't */
  .hero .cta-row .btn{
    flex: 1 1 auto;
    min-height: 48px;
    padding: 12px 18px;
    font-size: .95rem;
  }
  .hero-stage{
    flex: 1 1 auto;
    /* auto margins switch off flex stretching, and a size-contained box has
       no content width of its own, so it needs an explicit width here */
    width: 100%;
    min-height: 130px;
    display: flex; align-items: center; justify-content: center;
  }
  .laptop{ --bezel: 7px; width: 100%; }
  .hero-fade{ height: 90px; }

  .feature-grid{ grid-template-columns: minmax(0, 1fr); }
  .feature-card{ padding: 24px 22px 26px; }

  .who-grid{ grid-template-columns: minmax(0, 1fr); }
  .who-media{ height: 148px; }

  .scripture-controls{ justify-content: center; }

  .footer-bottom{ justify-content: flex-start; }
}

/* Phones at least 600px tall: pin the hero to exactly one screen and let the
   laptop take whatever height is left. Container-height units need a definite
   height, which min-height + flex-grow does not give, hence the fixed height.
   Shorter screens (iPhone SE 1st gen, landscape) keep the flowing layout
   above rather than risk content spilling out of a fixed box. */
@media (max-width: 700px) and (min-height: 600px){
  .hero{ height: calc(100svh - var(--nav-h)); min-height: 0; }
  /* Text + laptop move as one group. Spare space is split 3:2 by two spacers,
     so the group sits a little below centre with more room under the navbar. */
  .hero-inner::before{ content: ""; flex: 3 1 0; }
  .hero-inner::after{ content: ""; flex: 2 1 0; }
  .hero-stage{
    container-type: size;
    /* just the height a full-width laptop needs; it may shrink, never grow */
    flex: 0 1 calc((100vw - 2 * var(--pad-x)) * .572 + 30px);
  }
  /* laptop height ~= 0.56 x width + bezels and deck */
  .laptop{ width: min(100%, calc((100cqh - 28px) * 1.75)); }
}

@media (max-width: 460px){
  .footer-nav{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 400px){
  .brand-name{ font-size: .92rem; }
  .brand-mark{ width: 26px; height: 26px; }
  .btn-lg{ padding: 13px 20px; }
}

/* =========================================================================
   REDUCED MOTION: a clean, static experience
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity: 1; transform: none; }
  .laptop{ transform: none !important; }
  .hero-slide{ animation: none !important; }
  .hero-slide:first-child{ opacity: var(--slide-o); }
  .hero-chip{ animation: none !important; }
  .verse-dots button::after{ animation: none !important; }
  .hl{ transition: none; }
  .app-frame-cta{ transform: none; }
  .verse{ transition: opacity .001ms; }
}

/* =========================================================================
   PRINT
   ========================================================================= */
@media print{
  .site-header, .hero-atmos, .glow, .cta-atmos{ display: none !important; }
  body{ background: #fff; color: #000; }
}