/* Bible Verse Widgets — marketing site
   Ported from the Claude Design handoff (landing.jsx / landing-kit.jsx /
   widgets.jsx). Serene theme tokens mirror the iOS app. Fonts self-hosted. */

/* ── Fonts (self-hosted; copied from the iOS app Resources) ───────────── */
@font-face { font-family:'Lora'; src:url('fonts/Lora-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Geist'; src:url('fonts/Geist-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist'; src:url('fonts/Geist-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist'; src:url('fonts/Geist-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist'; src:url('fonts/Geist-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('fonts/GeistMono-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('fonts/GeistMono-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('fonts/GeistMono-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }

/* ── Tokens (serene; mirrors the app) ─────────────────────────────────── */
:root {
  --serif:'Lora', Georgia, serif;
  --sans:'Geist', -apple-system, system-ui, sans-serif;
  --mono:'Geist Mono', ui-monospace, monospace;
  --bg:#f7f3eb; --bg2:#fbf8f1; --widget:#fffdf7;
  --ink:#2a2620; --dim:#8a8174; --line:rgba(40,30,20,0.08);
  --accent:#8f4630; --accent-soft:#e8d2c5; --accent-ink:#34170c;
  --lockwall:linear-gradient(165deg,#d9c6a5 0%,#9a8568 55%,#4a3e30 100%);
}
/* Theme variants used by the Themes section's widget previews */
.t-dawn {
  --bg:#ede2cc; --bg2:#f1e8d3; --widget:#f5edd9;
  --ink:#3a2a18; --dim:#8a7355; --line:rgba(60,40,20,0.12);
  --accent:#9a4a28; --accent-soft:#e3c8a0; --accent-ink:#3a1a08;
  --lockwall:linear-gradient(170deg,#c8a878 0%,#8a6a48 55%,#3a2818 100%);
}
.t-twilight {
  --bg:#181a26; --bg2:#23263a; --widget:#23263a;
  --ink:#ebe6d8; --dim:#8a8a9a; --line:rgba(255,245,220,0.1);
  --accent:#d4b072; --accent-soft:#3a3422; --accent-ink:#ebe0c0;
  --lockwall:linear-gradient(170deg,#2a3050 0%,#1a1a2a 50%,#0a0a14 100%);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ── Shared bits ──────────────────────────────────────────────────────── */
.container { max-width:1120px; margin:0 auto; padding:0 28px; }
.eyebrow {
  font-family:var(--mono); font-size:12px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--accent); font-weight:500; display:flex; align-items:center; gap:9px;
}
.eyebrow::before { content:''; width:6px; height:6px; border-radius:6px; background:var(--accent); flex:0 0 auto; }
.eyebrow.center { justify-content:center; }

.brand { display:flex; align-items:center; gap:11px; color:var(--ink); }
.brand-mark {
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(160deg,var(--accent),var(--accent-ink));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(143,70,48,0.3);
}
.brand-name { font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:-0.3px; }

/* App Store badge */
.appstore {
  display:inline-flex; align-items:center; gap:12px; background:#000; color:#fff;
  border-radius:15px; padding:13px 22px 13px 18px;
  box-shadow:0 6px 20px rgba(0,0,0,0.18); transition:transform .18s ease, box-shadow .18s ease;
}
.appstore:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,0.26); }
.appstore .as-txt { text-align:left; line-height:1; }
.appstore .as-top { display:block; font-size:10.5px; opacity:0.85; letter-spacing:0.2px; }
.appstore .as-big { display:block; font-size:19px; font-weight:600; letter-spacing:-0.3px; margin-top:2px; }
.appstore.sm { gap:9px; border-radius:12px; padding:9px 16px 9px 14px; }
.appstore.sm .as-top { font-size:9px; }
.appstore.sm .as-big { font-size:15px; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  background:rgba(247,243,235,0.78); border-bottom:0.5px solid var(--line);
}
.nav-inner { max-width:1120px; margin:0 auto; padding:0 28px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav-right { display:flex; align-items:center; gap:28px; }
.nav-links { display:flex; gap:26px; font-size:14px; color:var(--dim); font-weight:500; }
.nav-links a { transition:color .15s; }
.nav-links a:hover { color:var(--ink); }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { position:relative; }
.section.band { background:var(--bg2); border-top:0.5px solid var(--line); border-bottom:0.5px solid var(--line); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding-top:64px; overflow:hidden; }
.hero-glow {
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:900px; height:520px; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 30%, #e8d2c588, transparent 70%);
}
.hero-grid { position:relative; display:grid; grid-template-columns:1fr 0.92fr; gap:40px; align-items:center; }
.h1 { font-family:var(--serif); font-size:clamp(40px,5.4vw,68px); line-height:1.02; letter-spacing:-1.5px; font-weight:500; margin:20px 0 0; }
.lede { font-size:19px; line-height:1.55; color:var(--dim); max-width:460px; margin:22px 0 0; font-weight:400; }
.hero-cta { display:flex; align-items:center; gap:18px; margin-top:32px; flex-wrap:wrap; }
.rating { font-size:13.5px; color:var(--dim); line-height:1.4; }
.rating .stars { display:flex; gap:2px; color:var(--accent); font-size:14px; }
.hero-phone { position:relative; display:flex; justify-content:center; min-height:620px; }
.phone-scale { transform:scale(0.82); transform-origin:top center; }

/* ── iPhone frame ─────────────────────────────────────────────────────── */
.phone { width:390px; height:844px; border-radius:52px; background:#0c0a08; padding:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.2), 0 40px 80px -28px rgba(40,28,18,0.55); position:relative; }
.phone-screen { width:100%; height:100%; border-radius:43px; overflow:hidden; position:relative; background:#000; }
.phone-island { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:117px; height:33px; background:#000; border-radius:99px; z-index:20; }

/* ── Lock scene ───────────────────────────────────────────────────────── */
.lock { position:absolute; inset:0; color:#fff; display:flex; flex-direction:column; }
.lock-statusbar { height:30px; }
.lock-top { display:flex; justify-content:center; margin-top:14px; }
.lock-clock { text-align:center; margin-top:6px; }
.lock-date { font-size:17px; font-weight:500; opacity:0.92; letter-spacing:0.4px; }
.lock-time { font-size:86px; font-weight:600; letter-spacing:-3px; line-height:0.95; font-family:var(--sans); }
.lock-row { display:flex; gap:12px; justify-content:center; align-items:flex-start; margin-top:12px; padding:0 18px; }
.lock-stack { display:flex; justify-content:center; padding:0 18px; }
.lock-spacer { flex:1; }
.lock-tray { display:flex; justify-content:space-between; align-items:center; padding:0 34px 10px; }
.lock-handle { width:110px; height:4px; background:rgba(255,255,255,0.7); border-radius:99px; margin:0 auto 9px; }
.lock-btn { width:42px; height:42px; border-radius:99px; background:rgba(255,255,255,0.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; color:#fff; }

.rays { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.rays::before {
  content:''; position:absolute; top:-30%; left:50%; width:180%; height:110%; transform:translateX(-50%);
  background:repeating-conic-gradient(from 90deg at 50% 0%, rgba(255,248,224,0.12) 0deg 3deg, transparent 3deg 9deg);
  -webkit-mask-image:radial-gradient(58% 70% at 50% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(58% 70% at 50% 0%, #000 0%, transparent 72%);
}

/* The dusk-blue "bible" wallpaper used in the hero + lock showcase. */
.bible-wall {
  background:
    radial-gradient(70% 38% at 50% 2%, rgba(226,232,244,0.28), rgba(226,232,244,0) 60%),
    radial-gradient(95% 52% at 50% 105%, rgba(226,178,120,0.42), rgba(226,178,120,0) 58%),
    linear-gradient(178deg, #3f4b66 0%, #323e58 40%, #2b3347 70%, #322f3e 100%);
}

/* ── Widgets ──────────────────────────────────────────────────────────── */
.w { position:relative; overflow:hidden; flex:0 0 auto; }
.w--home { background:var(--widget); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05); }
.w--lock { background:rgba(0,0,0,0.32); color:#fff; box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.12);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); }
.w--lockcirc { width:76px; height:76px; border-radius:38px; }
.w--lockrect { width:156px; height:76px; border-radius:18px; }
.w--lockinline { width:220px; height:26px; border-radius:13px; }
.w--small { width:158px; height:158px; border-radius:22px; }
.w--medium { width:332px; height:158px; border-radius:22px; }

.dot { display:inline-block; width:5px; height:5px; border-radius:5px; background:currentColor; flex:0 0 auto; }

/* lock circular */
.wc { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; }
.wc-ref { font-family:var(--serif); font-size:20px; font-weight:500; line-height:1; font-style:italic; }
.wc-sub { font-family:var(--sans); font-size:9px; opacity:0.7; margin-top:3px; letter-spacing:0.2px; }
/* lock rect */
.wr { padding:10px 12px; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.wr-q { font-family:var(--serif); font-size:13px; line-height:1.25; font-weight:400; letter-spacing:-0.1px; }
.wr-meta { display:flex; align-items:center; justify-content:space-between; font-family:var(--sans); font-size:9px; opacity:0.8; letter-spacing:0.3px; text-transform:uppercase; }
.wr-meta .dot { width:4px; height:4px; }
/* lock inline */
.wi { padding:0 10px; height:100%; display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:12px; }
.wi-q { font-family:var(--serif); font-size:13px; font-style:italic; opacity:0.95; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.wi-ref { font-size:10px; opacity:0.7; letter-spacing:0.3px; }

/* small — minimal */
.sm-min { padding:16px; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.sm-min .lbl { font-family:var(--sans); font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:var(--dim); font-weight:500; }
.sm-min .q { font-family:var(--serif); font-size:17px; line-height:1.22; font-weight:400; letter-spacing:-0.3px; }
.sm-min .ref { font-family:var(--sans); font-size:10px; color:var(--accent); font-weight:500; letter-spacing:0.2px; }
/* small — editorial */
.w--editorial { background:var(--accent-soft); color:var(--accent-ink); }
.sm-ed { padding:14px; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.sm-ed .top { display:flex; justify-content:space-between; align-items:flex-start; }
.sm-ed .mark { font-family:var(--serif); font-size:42px; line-height:0.7; font-weight:400; font-style:italic; opacity:0.55; }
.sm-ed .book { font-family:var(--mono); font-size:8px; letter-spacing:0.8px; opacity:0.6; margin-top:4px; }
.sm-ed .q { font-family:var(--serif); font-size:14px; line-height:1.25; font-weight:500; letter-spacing:-0.2px; margin-top:-4px; }
.sm-ed .ref { font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.4px; }
/* small — numeral */
.w--numeral { background:var(--ink); color:var(--bg); }
.sm-num { padding:14px; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.sm-num .big { display:flex; align-items:baseline; gap:4px; }
.sm-num .chap { font-family:var(--serif); font-size:44px; font-weight:400; font-style:italic; line-height:0.9; color:var(--accent); }
.sm-num .vs { font-family:var(--serif); font-size:22px; font-weight:400; opacity:0.6; font-style:italic; }
.sm-num .q { font-family:var(--serif); font-size:12.5px; line-height:1.3; opacity:0.92; letter-spacing:-0.1px; margin-bottom:6px; }
.sm-num .book { font-family:var(--sans); font-size:9px; opacity:0.5; letter-spacing:0.6px; text-transform:uppercase; }

/* medium — quote */
.md-q { padding:20px; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.md-q .lbl { font-family:var(--sans); font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--dim); font-weight:600; }
.md-q .q { font-family:var(--serif); font-size:19px; line-height:1.25; letter-spacing:-0.3px; font-weight:400; }
.md-q .foot { display:flex; align-items:center; justify-content:space-between; }
.md-q .ref { font-family:var(--sans); font-size:11px; color:var(--accent); font-weight:600; letter-spacing:0.1px; }
.md-q .hint { font-family:var(--sans); font-size:10px; color:var(--dim); }
/* medium — editorial */
.w--md-ed { background:var(--bg2); }
.md-ed { height:100%; display:grid; grid-template-columns:92px 1fr; }
.md-ed .rail { background:var(--ink); color:var(--bg); padding:16px 14px; display:flex; flex-direction:column; justify-content:space-between; }
.md-ed .book { font-family:var(--serif); font-size:26px; font-style:italic; font-weight:400; line-height:0.95; }
.md-ed .num { font-family:var(--mono); font-size:22px; font-weight:500; color:var(--accent); line-height:1; }
.md-ed .cv { font-family:var(--sans); font-size:8.5px; opacity:0.5; margin-top:4px; letter-spacing:1px; text-transform:uppercase; }
.md-ed .body { padding:18px; display:flex; flex-direction:column; justify-content:center; color:var(--ink); }
.md-ed .q { font-family:var(--serif); font-size:16px; line-height:1.32; letter-spacing:-0.2px; font-weight:400; }

/* ── Widget gallery ───────────────────────────────────────────────────── */
.gallery { padding-top:92px; padding-bottom:96px; margin-top:40px; }
.section-head { text-align:center; max-width:620px; margin:0 auto; }
.section-head h2, .features h2 {
  font-family:var(--serif); font-size:clamp(30px,3.6vw,44px); letter-spacing:-1px; font-weight:500; line-height:1.08;
}
.section-head h2 { margin:16px 0 14px; }
.section-head p { font-size:17px; line-height:1.55; color:var(--dim); margin:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; align-items:stretch; }
.showcase {
  background:var(--widget); border:0.5px solid var(--line); border-radius:24px; padding:26px;
  box-shadow:0 1px 2px rgba(0,0,0,0.03), 0 18px 44px -24px rgba(40,28,18,0.3); display:flex; flex-direction:column;
}
.showcase-h { margin-bottom:20px; }
.showcase-h .t { font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-0.4px; }
.showcase-h .s { font-size:14px; color:var(--dim); margin-top:3px; }
.showcase-body { flex:1; display:flex; align-items:center; justify-content:center; }
.lock-showcase { border-radius:18px; padding:34px 22px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }
.lock-showcase .inner { position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }
.lock-showcase .clk { color:#fff; font-size:52px; font-weight:600; letter-spacing:-2px; line-height:1; font-family:var(--sans); }
.home-showcase { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center; height:100%; }
.style-row { margin-top:40px; }
.style-row .cap { font-family:var(--mono); font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--dim); text-align:center; margin-bottom:26px; }
.tiles { display:flex; gap:22px; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
.tile { display:flex; flex-direction:column; align-items:center; gap:12px; }
.tile .name { font-family:var(--mono); font-size:11px; letter-spacing:0.8px; color:var(--dim); }

/* ── Features ─────────────────────────────────────────────────────────── */
.features { padding-top:96px; padding-bottom:40px; }
.features .head { max-width:640px; }
.features .head h2 { margin:16px 0 0; }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:48px; background:var(--line); border:0.5px solid var(--line); border-radius:22px; overflow:hidden; }
.feat { background:var(--bg); padding:34px 30px; }
.feat .chip { width:46px; height:46px; border-radius:13px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }
.feat h3 { font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-0.3px; margin:20px 0 8px; }
.feat p { font-size:14.5px; line-height:1.55; color:var(--dim); margin:0; }

/* ── Themes ───────────────────────────────────────────────────────────── */
.themes { padding-top:92px; padding-bottom:96px; margin-top:56px; }
.themes .head { text-align:center; max-width:620px; margin:0 auto 52px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.theme-card { border-radius:24px; overflow:hidden; border:0.5px solid var(--line); box-shadow:0 18px 44px -28px rgba(40,28,18,0.35); }
.theme-card .wall { padding:26px 22px; display:flex; justify-content:center; background:var(--lockwall); }
.theme-card .wall .scale { transform:scale(0.95); }
.theme-card .bar { background:var(--bg); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.theme-card .bar .nm { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); }
.swatches { display:flex; gap:6px; }
.sw { width:16px; height:16px; border-radius:99px; box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.12); }

/* ── CTA ──────────────────────────────────────────────────────────────── */
.cta { padding-top:110px; padding-bottom:110px; text-align:center; }
.cta .inner { max-width:720px; margin:0 auto; }
.cta .open-quote { font-family:var(--serif); font-size:64px; color:var(--accent); opacity:0.5; font-style:italic; line-height:0.4; display:block; height:30px; }
.cta .verse { font-family:var(--serif); font-size:clamp(28px,4vw,46px); line-height:1.22; letter-spacing:-0.8px; font-weight:500; margin:0 0 10px; }
.cta .ref { font-family:var(--mono); font-size:13px; letter-spacing:1px; color:var(--accent); margin-bottom:40px; }
.cta .meta { font-size:13.5px; color:var(--dim); margin-top:16px; }
.cta .badge-row { display:flex; justify-content:center; }

/* ── Footer (landing) ─────────────────────────────────────────────────── */
.site-footer { border-top:0.5px solid var(--line); background:var(--bg2); }
.site-footer .inner { max-width:1120px; margin:0 auto; padding:40px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.site-footer .site { font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:0.3px; }
.site-footer .links { display:flex; gap:24px; font-size:13.5px; color:var(--dim); flex-wrap:wrap; }
.site-footer .links a:hover { color:var(--ink); }

/* ── Doc pages (privacy / terms) ──────────────────────────────────────── */
body.doc-page { line-height:1.62; }
.doc-page a { color:var(--accent); }
.doc-page a:hover { text-decoration:underline; }
.doc-wrap { max-width:720px; margin:0 auto; padding:0 28px; }
header.bar { position:sticky; top:0; z-index:10; backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); background:rgba(247,243,235,0.8); border-bottom:0.5px solid var(--line); }
header.bar .doc-wrap { height:64px; display:flex; align-items:center; justify-content:space-between; }
.back { font-size:14px; color:var(--dim); font-weight:500; }
.back:hover { color:var(--ink); text-decoration:none; }
.doc { padding:64px 0 100px; }
.doc h1 { font-family:var(--serif); font-size:clamp(34px,5vw,50px); letter-spacing:-1.2px; font-weight:500; line-height:1.05; margin:18px 0 10px; }
.doc .meta { font-size:14px; color:var(--dim); margin-bottom:40px; }
.doc .lede { font-size:18px; line-height:1.6; color:#4a443b; border-left:2px solid var(--accent-soft); padding-left:20px; margin:0 0 44px; }
.doc h2 { font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-0.4px; margin:44px 0 12px; }
.doc p { margin:0 0 16px; font-size:16px; color:#3a352d; }
.doc ul { margin:0 0 16px; padding-left:20px; }
.doc li { font-size:16px; color:#3a352d; margin-bottom:8px; }
.doc li::marker { color:var(--accent); }
.doc strong { color:var(--ink); font-weight:600; }
.callout { background:var(--widget); border:0.5px solid var(--line); border-radius:18px; padding:22px 24px; margin:32px 0; box-shadow:0 1px 2px rgba(0,0,0,0.03), 0 14px 34px -22px rgba(40,28,18,0.3); }
.callout p { margin:0; }
footer.foot { border-top:0.5px solid var(--line); background:var(--bg2); }
footer.foot .doc-wrap { padding:32px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:13.5px; color:var(--dim); }
.foot-links { display:flex; gap:22px; }
.foot .site { font-family:var(--mono); color:var(--accent); letter-spacing:0.3px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-phone { order:-1; min-height:540px; }
  .grid2, .grid3 { grid-template-columns:1fr; }
  .feat-grid { grid-template-columns:1fr 1fr; }
  .nav-links { display:none; }
}
@media (max-width:560px) {
  .feat-grid { grid-template-columns:1fr; }
}