/* VineBlocks marketing site — warm, alive, faith-forward. Dependency-free (system
   fonts, no CDN, no external images) so it loads instantly and passes a strict CSP. */
:root {
  --navy:#0f1e38; --navy2:#16294a; --panel:#182a4c; --ink:#eef4ff; --muted:#aebfdd;
  --vine:#2f9d5c; --vine2:#57c07e; --gold:#f2cf5a; --grape:#8a5cc8; --grape2:#b07fe6;
  --sky1:#3d6ea8; --sky2:#213f6e; --line:#2a416a;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink); line-height:1.6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--navy);
}
a { color:#bcd6ff; }
img { max-width:100%; display:block; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.center { text-align:center; }

/* ---- Nav ---- */
.nav { position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(9,16,30,.78); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; gap:18px; height:62px; }
.brand { font-weight:900; font-size:21px; letter-spacing:.3px; text-decoration:none; color:var(--ink); }
.brand .g { filter:saturate(1.3) drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.nav .spacer { flex:1; }
.nav a.link { color:var(--muted); text-decoration:none; font-size:15px; }
.nav a.link:hover { color:#fff; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800;
  border-radius:13px; padding:12px 22px; color:#06210f; border:none; cursor:pointer; font-size:16px;
  background:linear-gradient(180deg,var(--vine2),var(--vine));
  box-shadow:0 5px 0 #1c6b3e, 0 12px 26px rgba(0,0,0,.4); transition:transform .12s, filter .12s, box-shadow .12s; }
.btn:hover { filter:brightness(1.07); transform:translateY(-1px); }
.btn:active { transform:translateY(3px); box-shadow:0 2px 0 #1c6b3e, 0 6px 14px rgba(0,0,0,.4); }
.btn.ghost { background:rgba(255,255,255,.06); color:var(--ink); box-shadow:none; border:2px solid var(--line); }
.btn.ghost:hover { border-color:var(--grape2); }
.btn.big { font-size:19px; padding:16px 32px; border-radius:15px; }
.btn.gold { background:linear-gradient(180deg,#ffe07a,var(--gold)); box-shadow:0 5px 0 #b9962e, 0 12px 26px rgba(0,0,0,.4); color:#3a2c00; }
.btn.gold:active { box-shadow:0 2px 0 #b9962e; }

/* ---- Hero ---- */
.hero { position:relative; overflow:hidden; text-align:center; padding:70px 0 44px;
  background:
    radial-gradient(900px 380px at 50% -60px, rgba(242,207,90,.16), transparent 70%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 46%, var(--navy) 100%); }
.hero .sun { position:absolute; top:-70px; right:8%; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fff6d8, #ffe07a 42%, rgba(255,224,122,0) 72%);
  filter:blur(2px); pointer-events:none; }
.float { position:absolute; pointer-events:none; opacity:.9; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.cloud { position:absolute; pointer-events:none; background:#fff; border-radius:100px; opacity:.85;
  box-shadow:40px 0 0 -6px #fff, -40px 4px 0 -8px #fff; filter:blur(.3px); }
@keyframes drift { from{transform:translateX(-30px)} to{transform:translateX(30px)} }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-14px) rotate(4deg)} }
.hero h1 { position:relative; font-size:clamp(46px,9vw,84px); margin:0 0 4px; line-height:1.02; letter-spacing:-1px;
  text-shadow:0 3px 22px rgba(0,0,0,.35); }
.hero h1 .word { background:linear-gradient(180deg,#fff,#dfeaff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .tag { position:relative; font-style:italic; color:var(--gold); font-size:clamp(16px,2.6vw,22px); margin:6px 0 12px; text-shadow:0 2px 10px rgba(0,0,0,.3); }
.hero p.sub { position:relative; color:#dce8ff; font-size:clamp(16px,2.4vw,20px); max-width:660px; margin:0 auto 26px; }
.cta-row { position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.trust { position:relative; margin-top:18px; color:#cdddff; font-size:14px; }
.trust b { color:#fff; }
.chips { position:relative; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.chip { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#eaf2ff;
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; }

/* Scene strip under hero (pure CSS illustration) */
.scene { position:relative; height:150px; margin-top:36px;
  background:linear-gradient(180deg, transparent, rgba(47,157,92,.14)); }
.scene .ground { position:absolute; left:0; right:0; bottom:0; height:86px;
  background:linear-gradient(180deg,#3aa564,#2b7d4c); clip-path:polygon(0 38%,10% 30%,22% 40%,34% 26%,48% 38%,60% 24%,72% 36%,86% 26%,100% 36%,100% 100%,0 100%); }
.scene .actor { position:absolute; bottom:52px; font-size:40px; filter:drop-shadow(0 5px 6px rgba(0,0,0,.3)); }

/* ---- Sections ---- */
section { padding:44px 0; }
h2 { font-size:clamp(26px,4.4vw,38px); margin:0 0 8px; letter-spacing:-.5px; }
.lead { color:var(--muted); max-width:730px; margin:0 0 24px; font-size:17px; }
.badge { display:inline-block; background:rgba(87,192,126,.14); border:1px solid rgba(87,192,126,.4);
  color:var(--vine2); border-radius:999px; padding:6px 15px; font-size:13px; font-weight:800; margin-bottom:12px; letter-spacing:.3px; }
.badge.grape { background:rgba(176,127,230,.16); border-color:rgba(176,127,230,.4); color:var(--grape2); }
.badge.gold { background:rgba(242,207,90,.16); border-color:rgba(242,207,90,.4); color:var(--gold); }

/* Cards */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.card { position:relative; background:linear-gradient(180deg,var(--panel),rgba(18,32,58,.6));
  border:1px solid var(--line); border-radius:18px; padding:22px; overflow:hidden;
  transition:transform .16s, border-color .16s, box-shadow .16s; }
.card:hover { transform:translateY(-4px); border-color:rgba(176,127,230,.5); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.card .ico { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px;
  font-size:28px; margin-bottom:10px; background:linear-gradient(180deg,#25406e,#1a2f52); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.card.g-vine .ico { background:linear-gradient(180deg,#2f9d5c,#1e6e40); }
.card.g-grape .ico { background:linear-gradient(180deg,#8a5cc8,#5f3a95); }
.card.g-gold .ico { background:linear-gradient(180deg,#e6b93f,#b9862a); }
.card.g-sky .ico { background:linear-gradient(180deg,#3d82c8,#255a92); }
.card h3 { margin:4px 0 4px; font-size:18px; }
.card p { margin:0; color:var(--muted); font-size:15px; }

/* Safety band */
.band { position:relative; background:
    radial-gradient(600px 200px at 80% -20%, rgba(47,157,92,.18), transparent 70%),
    linear-gradient(180deg,#12274a,#0e1d38); border:1px solid var(--line); border-radius:24px; padding:30px; }
.checks { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:12px 24px; }
.checks li { padding-left:34px; position:relative; color:#dbe7fb; }
.checks li::before { content:"🛡️"; position:absolute; left:0; top:1px; }
.checks li b { color:#fff; }

/* Gallery — real screenshots drop into /shots and auto-replace the illustrated tiles */
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.shot { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:#12203a; }
.shot .ph { position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px; font-size:60px;
  background:linear-gradient(180deg,#5aa0e0 0%,#8fd0a0 62%,#3a8a55 100%); }
.shot.s2 .ph { background:linear-gradient(180deg,#8fb8e6,#c9a06a 70%); }
.shot.s3 .ph { background:linear-gradient(180deg,#6a4fb0,#e08a5a 78%); }
.shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shot .cap { position:absolute; left:0; right:0; bottom:0; padding:10px 14px; font-size:14px; font-weight:700;
  color:#fff; background:linear-gradient(180deg,transparent,rgba(0,0,0,.6)); }
/* When the real image fails to load, site.js adds .noimg to hide the <img> and show the illustration */
.shot.noimg img { display:none; }

/* Video slot */
.video { position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9;
  background:radial-gradient(500px 300px at 50% 30%, #234;, #0e1d38); display:flex; align-items:center; justify-content:center; }
.video .play { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; font-size:34px; }
.video .note { position:absolute; bottom:14px; color:var(--muted); font-size:13px; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Church CTA band */
.church { background:
    radial-gradient(600px 240px at 20% -30%, rgba(176,127,230,.2), transparent 70%),
    linear-gradient(180deg,#1b1436,#121026); border:1px solid #33285a; border-radius:24px; padding:32px; }
.church .grid { margin-top:18px; }
.church .card { background:linear-gradient(180deg,#241a44,#191233); border-color:#33285a; }
.church .card:hover { border-color:var(--grape2); }

/* Reveal on scroll (progressive; visible by default if JS is off) */
.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity:1; transform:none; }

/* Prose (legal / parent pages) */
.prose { max-width:770px; }
.prose h2 { margin-top:32px; }
.prose h3 { margin-top:22px; font-size:18px; color:#dfe9ff; }
.prose p, .prose li { color:#d6e2f6; }
.prose .updated { color:var(--muted); font-size:14px; }
.callout { background:#10233f; border-left:4px solid var(--vine2); border-radius:8px; padding:12px 16px; margin:16px 0; color:#dbe7fb; }

/* Footer */
footer { border-top:1px solid var(--line); margin-top:36px; padding:28px 0 54px; color:var(--muted); font-size:14px; }
footer .wrap { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
footer a { color:var(--muted); text-decoration:none; }
footer a:hover { color:#fff; }
footer .spacer { flex:1; }
.verse { font-style:italic; color:var(--gold); }
@media (max-width:560px){ .nav a.link{ display:none; } }