/* Homepage: dark, visual, short. Loaded after _shared.css. */
:root { --bg:#0c0c10; --card:#17171d; --card-2:#1f1f27; --ink:#f4f3ef; --muted:#9d9daa; --line:#2a2a33; --accent:#3b82f6; --green:#34c759; --orange:#ff9f0a; --radius:22px; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); }
body.home header.top { position:sticky; top:0; z-index:10; background:rgba(12,12,16,.82); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid rgba(255,255,255,.06); }
body.home .brand { color:var(--ink); }
body.home nav a { color:var(--muted); }
body.home nav a.nav-cta { color:#fff; }
main.home { max-width:none; padding:0; }
.sec { padding:72px 20px; }
.sec .in { max-width:1080px; margin:0 auto; }
.sec h2 { font-size:clamp(30px, 4.2vw, 46px); line-height:1.08; letter-spacing:-.025em; margin:0 0 10px; }
.sec .sub { color:var(--muted); font-size:clamp(16px, 1.6vw, 19px); margin:0; max-width:560px; }
.center { text-align:center; } .center .sub { margin-left:auto; margin-right:auto; }
.tint { background:var(--card); }
.eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }

/* Phones */
.phone { width:100%; height:auto; border-radius:var(--radius); background:#000; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.45); display:block; }
.phone.sm { border-radius:18px; }
.shot { width:100%; height:auto; border-radius:16px; border:1px solid var(--line); background:#000; display:block; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.photo { width:100%; height:auto; border-radius:16px; display:block; object-fit:cover; box-shadow:0 18px 40px rgba(0,0,0,.35); }

/* Hero */
.hero2 { padding:40px 20px 24px; }
.hero2 .in { display:grid; grid-template-columns:1fr; gap:28px; align-items:center; max-width:1080px; margin:0 auto; }
.hero2 h1 { font-size:clamp(34px, 5.2vw, 58px); line-height:1.02; letter-spacing:-.03em; margin:0 0 14px; }
.hero2 .sub { font-size:clamp(17px, 1.8vw, 21px); margin-bottom:22px; }
.hero2 .phone-wrap { display:flex; justify-content:center; }
.hero2 .phone { max-width:340px; }
.btn { white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--accent); color:#fff; padding:14px 22px; border-radius:14px; font-weight:700; font-size:17px; min-height:48px; }
.btn:hover { text-decoration:none; filter:brightness(1.08); }
.btn.ghost { background:var(--card-2); color:var(--ink); border:1px solid var(--line); }
.tiny { color:var(--muted); font-size:14px; margin:12px 0 0; }
.hero2 .cta-row { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }

/* Two-panel (before/after) */
.pair { display:grid; grid-template-columns:1fr; gap:22px; margin-top:28px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.panel .cap { font-size:clamp(22px, 2.6vw, 30px); font-weight:800; letter-spacing:-.02em; margin:0 0 12px; }
.panel .cap.q { color:var(--muted); }
.panel .cap.a { color:var(--green); }
.panel .photo, .panel .shot { margin:0; }

/* Steps with arrows */
.steps3 { display:grid; grid-template-columns:1fr; gap:20px; margin-top:34px; }
.step { text-align:center; }
.step .n { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; margin-bottom:12px; }
.step h3 { margin:0 0 6px; font-size:clamp(18px, 2.2vw, 22px); letter-spacing:-.01em; }
.step p { margin:0 0 14px; color:var(--muted); font-size:15px; }
.step .shot, .step .phone { max-width:320px; margin:0 auto; }
.arrow { display:none; align-self:center; justify-self:center; color:var(--muted); }
.arrow svg { width:44px; height:44px; }
.arrow.down { display:block; text-align:center; margin:-6px 0; }
.arrow.down svg { transform:rotate(90deg); }

/* Flow: image → app */
.flow { display:grid; grid-template-columns:1fr; gap:16px; align-items:center; margin-top:28px; }
.flow .arrow.down { display:block; }
.flow .lbl { text-align:center; color:var(--muted); font-weight:600; font-size:15px; margin-top:10px; }

/* Find: three paths → one screen */
.paths { display:grid; grid-template-columns:1fr; gap:16px; margin-top:30px; }
.path { background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; }
.path .ic { width:52px; height:52px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:rgba(59,130,246,.15); color:#8ab4ff; }
.path .ic svg { width:28px; height:28px; }
.path h3 { margin:0 0 4px; font-size:20px; } .path p { margin:0; color:var(--muted); font-size:14px; }
.path .shot { margin-top:14px; }
.result { margin:22px auto 0; max-width:520px; text-align:center; }
.result .lbl { color:var(--muted); font-weight:600; margin-bottom:12px; }

/* Label scene */
.scene { display:grid; grid-template-columns:1fr; gap:18px; margin-top:30px; align-items:stretch; }
.boxes { display:grid; gap:12px; }
.box { display:flex; align-items:center; gap:14px; background:var(--card-2); border:1px solid var(--line); border-radius:18px; padding:14px; }
.box img { width:72px; height:72px; border-radius:8px; background:#fff; padding:4px; flex:none; }
.box b { display:block; font-size:19px; } .box span { color:var(--muted); font-size:14px; }
.box .tag { margin-left:auto; font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; background:rgba(52,199,89,.15); color:var(--green); white-space:nowrap; }
.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.chip { font-size:14px; font-weight:600; padding:8px 14px; border-radius:999px; background:var(--card-2); border:1px solid var(--line); }

/* Report */
.report { display:grid; grid-template-columns:1fr; gap:20px; margin-top:30px; align-items:center; }
.doc { background:#fff; color:#111; border-radius:12px; padding:20px; box-shadow:0 18px 40px rgba(0,0,0,.4); max-width:420px; margin:0 auto; width:100%; }
.doc .t { font-weight:800; font-size:18px; margin-bottom:4px; }
.doc .m { color:#666; font-size:12px; margin-bottom:12px; }
.doc .row { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #eee; font-size:13px; }
.doc .row .ph { width:34px; height:34px; border-radius:6px; background:#e9e7e1; flex:none; overflow:hidden; }
.doc .row .ph img { width:100%; height:100%; object-fit:cover; display:block; }
.doc .row .nm { flex:1; font-weight:600; } .doc .row .v { color:#444; font-variant-numeric:tabular-nums; }
.caps { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.caps span { font-size:16px; font-weight:700; padding:8px 14px; border-radius:12px; background:var(--card-2); border:1px solid var(--line); }

/* Household */
.house { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:28px; }
.people { display:flex; gap:12px; }
.person { width:56px; height:56px; border-radius:50%; background:var(--card-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:#8ab4ff; }
.person svg { width:28px; height:28px; }
.house .phone { max-width:260px; }

/* Three icons */
.trio { display:grid; grid-template-columns:1fr; gap:14px; margin-top:30px; }
.trio .it { background:var(--card-2); border:1px solid var(--line); border-radius:18px; padding:20px; text-align:center; }
.trio .it .ic { width:48px; height:48px; margin:0 auto 10px; color:#8ab4ff; } .trio .it .ic svg { width:48px; height:48px; }
.trio .it b { display:block; font-size:18px; margin-bottom:4px; } .trio .it span { color:var(--muted); font-size:15px; }

/* Pricing */
.plans { display:grid; grid-template-columns:1fr; gap:16px; margin-top:30px; }
.plan { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; }
.plan.hot { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.plan h3 { margin:0; font-size:20px; }
.plan .price { font-size:38px; font-weight:800; letter-spacing:-.02em; margin:8px 0 2px; }
.plan .per { color:var(--muted); font-size:14px; margin-bottom:14px; }
.plan ul { list-style:none; margin:0 0 16px; padding:0; }
.plan li { padding:7px 0; border-top:1px solid var(--line); font-size:15px; display:flex; gap:10px; align-items:center; }
.plan li::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green); flex:none; }
.plan li.no { color:var(--muted); } .plan li.no::before { background:var(--line); }
.plan .btn { margin-top:auto; }
.pnote { color:var(--muted); font-size:14px; text-align:center; margin-top:16px; }

/* Gallery */
.gallery { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 20px 18px; margin:26px -20px 0; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gallery::-webkit-scrollbar { display:none; }
.gallery figure { flex:0 0 72%; max-width:300px; margin:0; scroll-snap-align:center; text-align:center; }
.gallery figcaption { margin-top:12px; font-weight:700; font-size:17px; }

/* Final */
.final { padding:80px 20px 90px; text-align:center; }
.final .phone { max-width:300px; margin:0 auto 28px; }
.final h2 { font-size:clamp(32px, 5vw, 52px); }

/* Placeholder slots for imagery not yet shot */
.slot { border:1.5px dashed #3a3a46; border-radius:16px; min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:14px; text-align:center; padding:20px; background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px); }
.slot svg { width:36px; height:36px; opacity:.7; }
.slot code { font-size:12px; color:#c8c8d4; }

/* Reveal animation */
.rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rv.on { opacity:1; transform:none; }
.panel, .plan, .path, .trio .it { transition:transform .25s ease, box-shadow .25s ease; }
@media (hover:hover) { .panel:hover, .plan:hover, .path:hover, .trio .it:hover { transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .rv { opacity:1; transform:none; transition:none; } .panel, .plan, .path, .trio .it { transition:none; } }

/* Tablet and up */
@media (min-width:700px) {
  .hero2 { padding:56px 20px 32px; }
  .hero2 .phone { max-width:380px; }
  .pair { grid-template-columns:1fr 1fr; }
  .steps3 { grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; }
  .arrow { display:block; } .steps3 .arrow { margin-top:150px; } .arrow.down { display:none; }
  .flow { grid-template-columns:1fr auto 1fr; }
  .flow .arrow.down { display:none; } .flow .arrow { display:block; margin-top:0; }
  .paths { max-width:560px; margin-left:auto; margin-right:auto; }
  .scene { grid-template-columns:1fr 1fr; }
  .report { grid-template-columns:1fr auto 1fr; }
  .trio { grid-template-columns:repeat(3,1fr); }
  .plans { grid-template-columns:repeat(3,1fr); }
  .gallery figure { flex:0 0 240px; max-width:240px; }
  .house { flex-direction:row; justify-content:center; gap:28px; }
}
@media (min-width:900px) {
  .hero2 { padding:64px 20px 40px; }
  .hero2 .in { grid-template-columns:1.05fr .95fr; gap:40px; }
  .hero2 .cta-row { flex-direction:row; align-items:center; gap:14px; }
}
@media (min-width:1000px) {
  .sec { padding:96px 20px; }
  .paths { max-width:none; grid-template-columns:repeat(3,1fr); }
  .gallery figure { flex:0 0 260px; max-width:260px; }
  .hero2 .phone { max-width:420px; }
  .step .shot, .step .phone { max-width:300px; }
}