:root{
  --cream:#faf6ef; --ink:#1c1a17; --muted:#6f6a60;
  --terra:#c96f3f; --terra-d:#a8562a;
  --navy:#1e2a44; --gold:#c9a227;
  --emerald:#0e6b4f; --coral:#e2603f; --crimson:#b3202e;
  --teal:#0f766e; --charcoal:#232323; --slate:#3a4a5e;
  --sky:#3b82c4; --blush:#e8a0a8; --amber:#b45309; --sage:#7d8b6f;
  --card:#ffffff; --line:#e8e0d2;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;line-height:1.15}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:720px}
.center{text-align:center}
.kicker{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--terra);margin-bottom:10px}
.kicker.center{text-align:center}
h2{font-size:clamp(28px,4vw,40px);margin-bottom:12px}
.section-sub{color:var(--muted);max-width:640px;margin:0 auto 36px}

/* topbar */
.topbar{background:var(--ink);color:#fff;padding:12px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center}
.brand{font-family:'Fraunces',serif;font-weight:700;font-size:18px}
.comp-badge{font-size:11px;font-weight:700;letter-spacing:.12em;background:var(--terra);padding:6px 12px;border-radius:20px}

/* hero */
.hero{padding:72px 0 60px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(40px,6vw,64px);font-weight:900;margin:12px 0 18px}
.hero h1 em{font-style:italic;color:var(--terra)}
.lede{font-size:18px;color:var(--muted);margin-bottom:24px}
.price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.price{font-family:'Fraunces',serif;font-size:48px;font-weight:900}
.price-note{color:var(--muted)}
.cta-row{display:flex;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.btn-primary{background:var(--terra);color:#fff;border:none;font-weight:700;font-size:16px;padding:14px 28px;border-radius:10px;cursor:pointer;transition:.2s}
.btn-primary:hover{background:var(--terra-d);transform:translateY(-2px)}
.btn-primary.big{font-size:19px;padding:18px 44px}
.btn-ghost{display:inline-block;color:var(--ink);font-weight:600;padding:14px 6px;text-decoration:underline;text-underline-offset:4px}
.trust{list-style:none;color:var(--muted);font-size:14px}
.trust li{margin-bottom:6px}
.hero-art{position:relative;display:flex;gap:18px;justify-content:center}
.tilt{transform:rotate(4deg)}

/* template mockups */
.mock{aspect-ratio:1/1;border-radius:14px;padding:9%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.18);width:100%}
.mock-hero{max-width:300px}
.mock-eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;margin-bottom:8px;opacity:.92}
.mock-eyebrow.gold{color:var(--gold)}
.mock-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(22px,3.4vw,34px);line-height:1.1;margin-bottom:8px}
.mock-headline.small{font-size:clamp(17px,2.4vw,22px)}
.mock-sub{font-size:13px;opacity:.88;margin-bottom:12px}
.mock-photo{width:62%;aspect-ratio:16/10;border-radius:8px;background:rgba(255,255,255,.22);border:2px dashed rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;margin:6px 0 12px}
.mock-photo span{font-size:10px;font-weight:700;letter-spacing:.14em;opacity:.85}
.mock-photo.blur{filter:blur(3px)}
.mock-agent{font-size:10px;font-weight:700;letter-spacing:.14em;opacity:.9;margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.3);width:100%}
.mock-quote{font-family:'Fraunces',serif;font-size:56px;line-height:1;opacity:.5}
.mock-stars{color:var(--gold);font-size:18px;letter-spacing:.2em;margin:8px 0}
.mock-bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin:10px 0}
.mock-bars i{width:26px;background:rgba(255,255,255,.75);border-radius:4px 4px 0 0;height:var(--h)}

.mock-navy{background:linear-gradient(160deg,#24355c,#141d33)}
.mock-emerald{background:linear-gradient(160deg,#0f7a5a,#0a4a37)}
.mock-coral{background:linear-gradient(160deg,#ef7a52,#c74e2c)}
.mock-crimson{background:linear-gradient(160deg,#c22a38,#8c1620)}
.mock-teal{background:linear-gradient(160deg,#12968a,#0b5a54)}
.mock-cream{background:linear-gradient(160deg,#fbf7ec,#efe4cd);color:var(--ink)}
.mock-cream .mock-agent{border-color:rgba(0,0,0,.18)}
.mock-cream .mock-photo{border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.06)}
.mock-charcoal{background:linear-gradient(160deg,#2e2e2e,#141414)}
.mock-slate{background:linear-gradient(160deg,#46586e,#2a3646)}
.mock-sky{background:linear-gradient(160deg,#4a93d4,#2563a8)}
.mock-blush{background:linear-gradient(160deg,#f0b3ba,#d97f8a);color:#5b2330}
.mock-blush .mock-agent{border-color:rgba(91,35,48,.25)}
.mock-blush .mock-photo{border-color:rgba(91,35,48,.35);background:rgba(255,255,255,.3)}
.mock-amber{background:linear-gradient(160deg,#c97a1b,#8f4d08)}
.mock-sage{background:linear-gradient(160deg,#8b9a7d,#5f6e52)}

/* strip */
.strip{background:var(--ink);color:#fff;padding:22px 0}
.strip-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:15px}
.strip-row strong{color:var(--gold);font-family:'Fraunces',serif;font-size:20px;margin-right:6px}

/* gallery */
.gallery{padding:80px 0 40px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tile .mock{transition:transform .25s}
.tile:hover .mock{transform:scale(1.04)}
.tile figcaption{margin-top:10px;font-size:13px;font-weight:600;color:var(--muted);text-align:center}
.more-note{text-align:center;color:var(--muted);margin:28px 0 40px;font-size:15px}

/* canva proof */
.canva-proof{margin:20px 0 50px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:40px 30px}
.canva-proof h3{font-size:24px;margin-bottom:10px}
.canva-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:20px 0}
.canva-link{display:inline-block;background:var(--navy);color:#fff;font-weight:700;padding:14px 26px;border-radius:10px;text-decoration:none;transition:.2s}
.canva-link:hover{transform:translateY(-2px);background:#2c3f66}

/* inside */
.inside{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:70px 0}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.cat{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.cat strong{display:block;font-family:'Fraunces',serif;font-size:34px;color:var(--terra)}
.cat span{font-size:14px;color:var(--muted);font-weight:600}

/* how */
.how{padding:70px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px}
.step .n{display:inline-flex;width:38px;height:38px;border-radius:50%;background:var(--terra);color:#fff;font-weight:700;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{margin-bottom:8px;font-size:20px}
.step p{color:var(--muted);font-size:15px}

/* reviews */
.reviews{background:var(--ink);color:#fff;padding:70px 0}
.reviews h2{color:#fff}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.rev-grid blockquote{background:#26241f;border:1px solid #3a362c;border-radius:14px;padding:26px}
.rev-grid p{font-size:15px;margin-bottom:12px;color:#e8e2d4}
.rev-grid cite{font-style:normal;font-size:13px;color:var(--gold);font-weight:600}
.fine{font-size:12px;color:var(--muted);text-align:center;margin-top:18px}
.reviews .fine{color:#8a8474}

/* faq */
.faq{padding:70px 0}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
summary{font-weight:700;cursor:pointer;font-size:16px}
details p{margin-top:10px;color:var(--muted);font-size:15px}

/* buy */
.buy{background:linear-gradient(160deg,#24355c,#141d33);color:#fff;padding:80px 0}
.buy h2{color:#fff}
.buy-sub{color:#c9c2b2;margin-bottom:26px}
.buy-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:40px;display:inline-block}
.buy-price{font-family:'Fraunces',serif;font-size:64px;font-weight:900;display:block}
.buy-once{color:#c9c2b2;font-size:14px;display:block;margin-bottom:22px}
.buy .fine{color:#8a8474;margin-top:16px}

/* footer */
footer{background:#100f0d;color:#8a8474;padding:36px 0;text-align:center}
.rwp{font-weight:700;letter-spacing:.14em;font-size:13px;color:#c9c2b2;margin-bottom:8px}
.rwp span{display:block;font-weight:400;letter-spacing:.06em;font-size:11px;margin-top:4px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:16px;padding:36px;max-width:440px;text-align:center}
.modal-card h3{font-size:24px;margin-bottom:12px}
.modal-card p{color:var(--muted);font-size:15px;margin-bottom:22px}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .steps,.rev-grid{grid-template-columns:1fr}
  .hero-art .mock-hero{max-width:44%}
}