/* RSVPus landing — "Every guest. One platform." (Claude Design handoff: RSVPus Landing.html) */
:root{
  --indigo:#4f46e5; --indigo-deep:#4338ca; --indigo-soft:#a5b4fc; --indigo-wash:#eef0fe;
  --ink:#161331; --ink2:#0e0b24; --slate:#494667; --muted:#7d7a9c; --faint:#b6b3d4;
  --paper:#f5f5fb; --surface:#ffffff; --line:#e7e6f1; --line2:#f0eff8;
  --wa:#25d366;
  --sans:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; }
a{ text-decoration:none; color:inherit; }
.wrap{ width:min(1200px,100%); margin:0 auto; padding:0 28px; }
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:15px;
  border-radius:13px; padding:14px 22px; cursor:pointer; border:none; transition:transform .15s, box-shadow .15s, background .15s; }
.btn-primary{ background:var(--indigo); color:#fff; box-shadow:0 10px 26px -10px rgba(79,70,229,.7); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(79,70,229,.8); background:var(--indigo-deep); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--indigo-soft); color:var(--indigo-deep); }
.btn-wa{ background:var(--wa); color:#06270f; box-shadow:0 10px 26px -10px rgba(37,211,102,.6); }
.btn-wa:hover{ transform:translateY(-2px); }

/* ---------- nav ---------- */
nav{ position:sticky; top:0; z-index:50; background:rgba(245,245,251,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.navrow{ display:flex; align-items:center; gap:14px; padding:15px 0; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand svg{ width:38px; height:38px; }
.brand .wm{ font-weight:800; font-size:21px; letter-spacing:-.03em; }
.brand .wm .us{ color:var(--indigo); }
.navlinks{ display:flex; gap:28px; margin-left:36px; }
.navlinks a{ font-size:14.5px; font-weight:500; color:var(--slate); }
.navlinks a:hover{ color:var(--indigo-deep); }
.navcta{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.navtoggle{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0; background:transparent; border:1px solid var(--line); border-radius:11px; cursor:pointer; }
.navtoggle span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; }
@media(max-width:860px){
  .navlinks{ display:none; }
  .navtoggle{ display:inline-flex; }
  .navcta .btn-ghost{ display:none; } /* keep "Get started"; menu holds the rest */
  nav.open .navlinks{
    display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%; margin:0; padding:6px 0;
    background:rgba(245,245,251,.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
    box-shadow:0 22px 34px -22px rgba(30,27,75,.4);
  }
  nav.open .navlinks a{ padding:14px 28px; font-size:16px; }
  nav.open .navtoggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  nav.open .navtoggle span:nth-child(2){ opacity:0; }
  nav.open .navtoggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero .glow{ position:absolute; border-radius:50%; filter:blur(120px); opacity:.5; pointer-events:none; }
.hero .g1{ width:520px; height:520px; background:#c7c9ff; top:-200px; left:-160px; }
.hero .g2{ width:420px; height:420px; background:#e4d6ff; top:-120px; right:-120px; opacity:.4; }
.herogrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; padding:64px 0 78px; position:relative; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--indigo-deep); background:var(--indigo-wash); border:1px solid #dcdcfb; padding:6px 13px; border-radius:999px; }
h1{ font-weight:800; font-size:clamp(38px,5.2vw,62px); line-height:1.02; letter-spacing:-.035em; margin-top:20px; }
h1 em{ font-style:normal; color:var(--indigo); }
.hero .sub{ font-size:18px; color:var(--slate); line-height:1.6; margin-top:20px; max-width:30em; }
.hero .cta-row{ display:flex; gap:13px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.hero .note{ font-size:13.5px; color:var(--muted); margin-top:16px; }
.hero .note b{ color:var(--indigo-deep); font-weight:600; }

/* phone mockup */
.phonewrap{ display:flex; justify-content:center; position:relative; }
.phone{ width:300px; background:#0b1020; border-radius:38px; padding:11px; box-shadow:0 50px 90px -30px rgba(30,27,75,.6), 0 0 0 9px rgba(79,70,229,.07); position:relative; }
.screen{ background:#0b141a; border-radius:28px; overflow:hidden; height:560px; display:flex; flex-direction:column; }
.wa-top{ background:#1f2c33; color:#e9edef; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.wa-top .av{ width:34px; height:34px; border-radius:50%; background:var(--indigo); display:flex; align-items:center; justify-content:center; }
.wa-top .av svg{ width:24px; height:24px; }
.wa-top .nm{ font-size:14px; font-weight:600; line-height:1.1; }
.wa-top .nm small{ display:block; font-weight:400; font-size:11px; color:#8aa; margin-top:1px; }
.chat{ flex:1; padding:16px 13px; display:flex; flex-direction:column; gap:9px; background:linear-gradient(#0b141a,#0d1620); overflow:hidden; }
.bub{ max-width:84%; padding:9px 12px; font-size:12.5px; line-height:1.4; border-radius:13px; }
.bub.bot{ background:#1f2c33; color:#e9edef; align-self:flex-start; border-bottom-left-radius:4px; }
.bub.me{ background:#005c4b; color:#e9edef; align-self:flex-end; border-bottom-right-radius:4px; }
.pass{ align-self:center; width:90%; background:#fff; border-radius:16px; padding:14px; margin-top:4px; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); }
.pass .ph{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--indigo-deep); text-transform:uppercase; }
.pass .nm{ font-weight:700; font-size:15px; color:var(--ink); margin-top:2px; letter-spacing:-.01em; }
.pass .meta{ font-size:10.5px; color:var(--muted); margin-top:1px; }
.pass .qr{ width:96px; height:96px; margin:11px auto 4px; display:grid; grid-template-columns:repeat(11,1fr); gap:1.5px; }
.pass .qr i{ background:var(--ink); border-radius:1px; }
.pass .code{ text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:3px; color:var(--ink); }
.wa-input{ background:#1f2c33; color:#5c6b73; padding:11px 16px; font-size:12px; }

/* floating chips on phone */
.fchip{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:13px; padding:10px 13px; box-shadow:0 18px 40px -18px rgba(30,27,75,.4); display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; }
.fchip .ic{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fchip.c1{ top:54px; left:-36px; } .fchip.c2{ bottom:96px; right:-30px; }
@media(max-width:980px){ .herogrid{ grid-template-columns:1fr; gap:36px; } .fchip{ display:none; } }

/* ---------- trust strip ---------- */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.trustrow{ display:flex; align-items:center; gap:18px; padding:20px 0; flex-wrap:wrap; justify-content:center; }
.trustrow .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.trustrow .pill{ font-size:13.5px; font-weight:600; color:var(--slate); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 15px; }

/* ---------- section scaffolding ---------- */
section.block{ padding:84px 0; }
.head{ max-width:30em; }
.head .kick{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--indigo); }
.head h2{ font-weight:800; font-size:clamp(28px,3.6vw,42px); line-height:1.08; letter-spacing:-.03em; margin-top:12px; }
.head p{ font-size:16.5px; color:var(--slate); line-height:1.6; margin-top:14px; }
.center{ margin:0 auto; text-align:center; }

/* ---------- features ---------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.feat{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px; transition:transform .16s, box-shadow .16s, border-color .16s; }
.feat:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(30,27,75,.4); border-color:var(--indigo-soft); }
.feat .ic{ width:50px; height:50px; border-radius:14px; background:var(--indigo-wash); display:flex; align-items:center; justify-content:center; }
.feat .ic svg{ width:26px; height:26px; }
.feat h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin-top:18px; }
.feat p{ font-size:14.5px; color:var(--muted); line-height:1.55; margin-top:8px; }
.feat.wide{ grid-column:span 1; }
@media(max-width:880px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .features{ grid-template-columns:1fr; } }

/* ---------- how it works ---------- */
.how{ background:var(--ink2); color:#eef0fe; border-radius:28px; padding:56px 48px; position:relative; overflow:hidden; }
.how .glow{ position:absolute; width:420px; height:420px; border-radius:50%; background:#4f46e5; filter:blur(140px); opacity:.4; top:-160px; right:-100px; }
.how .head h2{ color:#fff; } .how .head .kick{ color:var(--indigo-soft); } .how .head p{ color:#b9b7d8; }
.tabs{ display:inline-flex; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:13px; padding:4px; gap:4px; margin-top:26px; }
.tabs button{ font-family:var(--sans); font-size:14px; font-weight:600; color:#b9b7d8; background:transparent; border:none; padding:9px 20px; border-radius:9px; cursor:pointer; transition:.15s; }
.tabs button.on{ background:var(--indigo); color:#fff; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.step{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:22px; }
.step .n{ width:32px; height:32px; border-radius:9px; background:var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.step h4{ font-size:15.5px; font-weight:700; margin-top:14px; letter-spacing:-.01em; }
.step p{ font-size:13px; color:#b9b7d8; line-height:1.5; margin-top:6px; }
@media(max-width:880px){ .steps{ grid-template-columns:repeat(2,1fr); } .how{ padding:40px 26px; } }

/* ---------- use cases ---------- */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; }
.case{ border:1px solid var(--line); border-radius:18px; padding:24px; background:var(--surface); }
.case .t{ font-size:17px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
.case .t .dot{ width:9px; height:9px; border-radius:3px; background:var(--indigo); }
.case ul{ list-style:none; margin-top:13px; display:flex; flex-direction:column; gap:7px; }
.case li{ font-size:13.5px; color:var(--muted); display:flex; gap:8px; align-items:center; }
.case li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--indigo-soft); flex-shrink:0; }
@media(max-width:880px){ .cases{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cases{ grid-template-columns:1fr; } }

/* ---------- lenses gallery ---------- */
.lenses{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.gal{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:96px; gap:10px; }
.gal .ph{ border-radius:14px; background:linear-gradient(135deg,#dcdcfb,#eef0fe); background-size:cover; background-position:center; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.gal .ph svg{ width:26px; height:26px; opacity:.5; }
.gal .ph.tall{ grid-row:span 2; }
.gal .ph.i{ background:linear-gradient(135deg,#4f46e5,#7c6cff); }
.gal .ph.hasphoto svg{ display:none; } /* real photo loaded — drop the placeholder icon */
.gal .ph .who{ position:absolute; left:0; right:0; bottom:0; padding:14px 9px 6px; font-size:10.5px; font-weight:600; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.62)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* "live arrival" — tiles pop in one-by-one as the album scrolls into view */
.js .gal .ph{ opacity:0; transform:scale(.92); transition:opacity .45s ease, transform .45s ease; }
.gal.in .ph{ opacity:1; transform:none; }
.gal.in .ph:nth-child(1){ transition-delay:.04s; } .gal.in .ph:nth-child(2){ transition-delay:.11s; }
.gal.in .ph:nth-child(3){ transition-delay:.18s; } .gal.in .ph:nth-child(4){ transition-delay:.25s; }
.gal.in .ph:nth-child(5){ transition-delay:.32s; } .gal.in .ph:nth-child(6){ transition-delay:.39s; }
.gal.in .ph:nth-child(7){ transition-delay:.46s; }
@media(prefers-reduced-motion:reduce){ .js .gal .ph{ opacity:1; transform:none; } }
@media(max-width:880px){ .lenses{ grid-template-columns:1fr; } }

/* ---------- positioning band ---------- */
.band{ background:linear-gradient(135deg,var(--indigo-deep),#6d28d9); color:#fff; border-radius:28px; padding:64px 52px; text-align:center; position:relative; overflow:hidden; }
.band .q{ font-weight:700; font-size:clamp(24px,3.4vw,36px); line-height:1.2; letter-spacing:-.025em; max-width:20em; margin:0 auto; }
.band .q span{ color:#d6d2ff; }
.band .sub{ margin-top:18px; color:#d6d2ff; font-size:16px; }

/* ---------- final cta ---------- */
.final{ text-align:center; }
.final .card{ background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:60px 40px; box-shadow:0 30px 70px -40px rgba(30,27,75,.4); }
.final h2{ font-weight:800; font-size:clamp(28px,4vw,44px); letter-spacing:-.03em; line-height:1.05; }
.final p{ font-size:17px; color:var(--slate); margin-top:14px; }
.final .cta-row{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* ---------- pricing ---------- */
.prices{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:46px; align-items:start; }
.price{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px 22px; display:flex; flex-direction:column; }
.price.featured{ border-color:var(--indigo-soft); box-shadow:0 24px 50px -28px rgba(79,70,229,.45); }
.price .pop{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--indigo); padding:5px 12px; border-radius:999px; }
.price h3{ font-size:16px; font-weight:700; color:var(--slate); letter-spacing:-.01em; }
.price .amt{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin-top:6px; }
.price ul{ list-style:none; margin:16px 0 22px; display:flex; flex-direction:column; gap:9px; }
.price li{ font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; line-height:1.45; }
.price li::before{ content:""; width:5px; height:5px; margin-top:7px; border-radius:50%; background:var(--indigo-soft); flex-shrink:0; }
.price li b{ color:var(--ink); font-weight:700; }
.price .btn{ margin-top:auto; justify-content:center; width:100%; font-size:14px; padding:12px 16px; }
.pricenote{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:24px; }
@media(max-width:980px){ .prices{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .prices{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:440px){ .prices{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); margin-top:30px; padding:46px 0 40px; }
.foot{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.foot .brand .tl{ font-size:13.5px; color:var(--muted); max-width:24em; margin-top:12px; line-height:1.55; }
.footcols{ display:flex; gap:54px; flex-wrap:wrap; }
.footcol h5{ font-size:12px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.footcol a{ display:block; font-size:14px; color:var(--slate); margin-bottom:9px; }
.footcol a:hover{ color:var(--indigo-deep); }
.copy{ margin-top:38px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* ---------- small-screen polish ---------- */
@media(max-width:560px){
  .wrap{ padding:0 20px; }
  section.block{ padding:60px 0; }
  .herogrid{ padding:38px 0 52px; }
  h1{ letter-spacing:-.025em; }
  .hero .sub{ font-size:16.5px; }
  .how{ padding:36px 22px; }
  .band{ padding:44px 26px; }
  .final .card{ padding:44px 24px; }
  .footcols{ gap:30px; }
  .copy{ flex-direction:column; gap:6px; }
}

/* Progressive enhancement: only hide for the reveal animation once JS is running
   (app.js adds .js to <html>). If JS fails to load, content stays fully visible. */
.reveal{ transition:opacity .6s ease, transform .6s ease; }
.js .reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; } }

/* typewriter caret — blinks while .type is being typed out by app.js */
.type.typing::after{ content:'▍'; margin-left:1px; color:var(--indigo); font-weight:400; animation:caret 1s step-end infinite; }
@keyframes caret{ 50%{ opacity:0; } }
@media(prefers-reduced-motion:reduce){ .type.typing::after{ display:none; } }