:root{
  --paper: oklch(0.985 0.006 85);
  --paper-2: oklch(0.945 0.012 80);
  --paper-3: oklch(0.93 0.012 75);
  --ink: oklch(0.17 0.012 55);
  --ink-soft: oklch(0.24 0.012 55);
  --ink-2: oklch(0.42 0.01 55);
  --ink-3: oklch(0.60 0.01 55);
  --rule: oklch(0.87 0.01 80);
  --rule-dark: oklch(0.30 0.01 60);
  --accent: oklch(0.63 0.17 40);
  --accent-soft: oklch(0.74 0.14 45);
  --accent-ink: oklch(0.40 0.12 40);
  --whatsapp: oklch(0.66 0.16 150);
  --whatsapp-deep: oklch(0.46 0.12 156);
  --gold: oklch(0.78 0.15 84);
  --gold-deep: oklch(0.66 0.14 82);

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Geist', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 22px;
  --radius-lg: 30px;
  --shadow-sm: 0 1px 2px rgba(50,35,20,.04), 0 8px 20px -10px rgba(50,35,20,.14);
  --shadow-md: 0 2px 4px rgba(50,35,20,.05), 0 18px 40px -16px rgba(50,35,20,.22);
  --shadow-lg: 0 4px 8px rgba(50,35,20,.05), 0 40px 70px -28px rgba(60,40,25,.40);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
html, body{ background: var(--paper); color: var(--ink); }
body{
  font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img{ display:block; max-width:100%; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 15px 24px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing:-0.01em; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap; }
.btn:hover{ transform: translateY(-2px); }
.btn-wa{ background: linear-gradient(135deg, oklch(0.68 0.16 150), oklch(0.55 0.13 156)); color:#fff; box-shadow: 0 10px 24px -10px oklch(0.55 0.13 156 / .8); }
.btn-wa:hover{ box-shadow: 0 16px 32px -12px oklch(0.55 0.13 156 / .9); }
.btn-wa .ic{ width:18px; height:18px; fill:#fff; }
.btn-ghost{ background: color-mix(in oklab, var(--paper) 70%, transparent); border:1px solid var(--rule); color: var(--ink); backdrop-filter: blur(6px); }
.btn-ghost:hover{ border-color: var(--whatsapp-deep); color: var(--whatsapp-deep); }
.btn-ghost-light{ background: oklch(1 0 0 / .06); border:1px solid oklch(1 0 0 / .24); color: var(--paper); }
.btn-ghost-light:hover{ border-color: var(--whatsapp); color: var(--whatsapp); }
.btn-lg{ padding: 18px 30px; font-size: 16px; }

/* ---------- nav ---------- */
nav.top{ position: sticky; top: 0; z-index: 60; background: color-mix(in oklab, var(--paper) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in oklab, var(--rule) 70%, transparent); }
nav.top .row{ display:flex; align-items:center; justify-content: space-between; height: 70px; }
nav.top .brand{ display:flex; align-items: baseline; gap: 10px; }
nav.top .brand .mark{ font-family: var(--serif); font-size: 27px; line-height: 1; letter-spacing: -0.02em; }
nav.top .brand .mark em{ font-style: italic; color: var(--accent); }
nav.top .brand .tag{ font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
nav.top .links{ display:flex; gap: 32px; align-items:center; }
nav.top .links a.navlink{ font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .15s; }
nav.top .links a.navlink:hover{ color: var(--ink); }
nav.top .btn{ padding: 11px 18px; font-size: 14px; }
@media (max-width: 1000px){ nav.top .brand .tag{ display:none } nav.top .links{ gap: 22px } }
@media (max-width: 820px){ nav.top .links a.navlink{ display:none } }

/* ---------- hero (full-bleed image, text overlaid) ---------- */
.hero{ position:relative; min-height: clamp(560px, 84vh, 800px); display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position: 80% center; }
.hero-scrim{ position:absolute; inset:0; z-index:1;
  background: linear-gradient(96deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 88%, transparent) 37%, color-mix(in oklab, var(--paper) 28%, transparent) 63%, transparent 86%); }
.hero-inner{ position:relative; z-index:2; width:100%; padding: clamp(44px, 6vw, 80px) 0; }
.hero-content{ max-width: 600px; }
.pill{ display:inline-flex; align-items:center; gap: 9px; font-size: 13px; font-weight:500; color: var(--accent-ink); padding: 8px 15px; border:1px solid color-mix(in oklab, var(--accent) 38%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--accent) 12%, var(--paper)); }
.pill .dot{ width:7px; height:7px; border-radius:50%; background: var(--whatsapp); box-shadow: 0 0 0 3px color-mix(in oklab, var(--whatsapp) 28%, transparent); }
h1{ font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.025em; margin: clamp(18px, 2.5vw, 26px) 0 0; text-wrap: balance; max-width: 14ch; }
h1 em{ font-style: italic; color: var(--accent); }
.hero-sub{ margin-top: clamp(18px, 2.4vw, 24px); font-size: clamp(17px, 1.45vw, 19.5px); color: var(--ink-soft); line-height: 1.6; max-width: 46ch; }
.hero-sub b{ color: var(--ink); font-weight: 600; }
.hero-cta{ margin-top: clamp(24px, 3vw, 32px); display:flex; gap: 13px; flex-wrap: wrap; }
.hero-trust{ margin-top: clamp(22px, 3vw, 28px); display:flex; align-items:center; gap: 12px; flex-wrap:wrap; }
.hero-trust .stars{ color: var(--gold-deep); font-size: 17px; letter-spacing: 2px; }
.hero-trust .tx{ font-size: 14px; color: var(--ink-2); max-width: 42ch; }
.hero-trust .tx b{ color: var(--ink); font-weight:600; }
@media (max-width: 820px){
  .hero{ min-height: 0; }
  .hero-bg img{ object-position: 74% center; }
  .hero-scrim{ background: linear-gradient(180deg, color-mix(in oklab, var(--paper) 90%, transparent) 0%, color-mix(in oklab, var(--paper) 82%, transparent) 52%, color-mix(in oklab, var(--paper) 93%, transparent) 100%); }
  .hero-content{ max-width: none; }
  h1{ max-width: 16ch; } .hero-sub{ max-width: none; }
}

/* ---------- section scaffold ---------- */
.sec{ padding: clamp(64px, 8vw, 116px) 0; border-top: 1px solid var(--rule); }
.sec.alt{ background: var(--paper-2); }
.sec.dark{ background: var(--ink); color: var(--paper); border-top: 1px solid var(--rule-dark); }
.sec.tight{ padding: clamp(40px, 5vw, 72px) 0; }
.sec.center{ text-align:center; }
.eyebrow{ display:inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.dark .eyebrow{ color: var(--accent-soft); }
.sec-title{ font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.02em; margin-top: 16px; text-wrap: balance; max-width: 20ch; }
.sec.center .sec-title, .sec.center .sec-lead{ margin-left:auto; margin-right:auto; }
.sec-title em{ font-style: italic; color: var(--accent); }
.dark .sec-title em{ color: var(--accent-soft); }
.sec-lead{ margin-top: 20px; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); max-width: 58ch; line-height: 1.62; }
.dark .sec-lead{ color: oklch(0.82 0.01 60); }

/* ---------- stakes ---------- */
.stakes-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(22px,3vw,40px); margin-top: clamp(36px,4vw,52px); }
.stake{ border-left: 2px solid color-mix(in oklab, var(--accent) 55%, transparent); padding-left: 22px; }
.stake .sk-n{ font-family: var(--serif); font-size: clamp(22px,2.5vw,29px); color: var(--accent); line-height:1.1; letter-spacing:-0.01em; display:block; }
.stake p{ margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height:1.55; }
@media (max-width:760px){ .stakes-grid{ grid-template-columns:1fr; gap:26px; } }
.review-why{ margin-top: clamp(28px,3.5vw,42px); display:grid; grid-template-columns: auto 1fr; gap: 20px; align-items:center; background: linear-gradient(160deg, var(--paper), oklch(0.96 0.03 85)); border:1px solid color-mix(in oklab, var(--gold) 34%, var(--rule)); border-radius: var(--radius-lg); padding: clamp(24px,3vw,34px); box-shadow: var(--shadow-sm); }
.review-why .rw-i{ font-size: 30px; flex:none; }
.review-why h4{ font-family: var(--serif); font-weight:400; font-size: clamp(22px,2.5vw,29px); letter-spacing:-0.01em; }
.review-why p{ margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height:1.6; max-width: 72ch; }
.review-why b{ color: var(--ink); font-weight:600; }
@media (max-width:600px){ .review-why{ grid-template-columns:1fr; gap:12px; } }

/* ---------- solution (dark) ---------- */
.solution-proof{ margin: clamp(20px,2.6vw,28px) auto 0; max-width: 62ch; font-size: 16px; color: oklch(0.82 0.01 60); line-height:1.6; }
.solution-proof b{ color: var(--gold); font-weight:600; }
.solution-cta{ margin-top: clamp(28px,3.5vw,38px); display:flex; gap: 13px; justify-content:center; flex-wrap:wrap; }

/* ---------- proof / results ---------- */
.proof-wide{ display:grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: stretch; margin-top: clamp(40px, 5vw, 56px); }
.chart-card{ background: var(--paper); border:1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-md); }
.chart-top{ display:flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap:wrap; }
.chart-big{ font-family: var(--serif); font-size: clamp(46px, 6vw, 68px); line-height: .9; letter-spacing:-0.02em; color: var(--gold-deep); }
.chart-cap{ font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.chart-cap b{ color: var(--ink); font-weight:600; }
.chart-badge{ font-family: var(--mono); font-size: 11px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold-deep); background: color-mix(in oklab, var(--gold) 18%, transparent); padding: 7px 12px; border-radius: 999px; }
.chart-svg{ width:100%; height:auto; margin-top: 18px; display:block; }
.chart-src{ margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-3); }
.results-side{ display:flex; flex-direction:column; gap: 16px; }
.rstat{ background: var(--paper); border:1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); flex:1; display:flex; flex-direction:column; justify-content:center; }
.rstat .n{ font-family: var(--serif); font-size: clamp(34px, 4vw, 46px); line-height:1; letter-spacing:-0.01em; }
.rstat .n em{ font-style:italic; color: var(--gold-deep); }
.rstat .l{ margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height:1.45; }
.rstat.gold{ background: linear-gradient(135deg, oklch(0.97 0.04 88), oklch(0.93 0.06 78)); border-color: color-mix(in oklab, var(--gold) 48%, transparent); }
.proof-foot{ margin-top: clamp(26px, 3.5vw, 34px); }
.proof-foot p{ font-size:16px; color: var(--ink-2); max-width:62ch; line-height:1.6; }
.proof-foot a{ color: var(--accent-ink); border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.proof-cta{ margin-top: clamp(28px,3.5vw,40px); text-align:center; }

/* optimisation card (light) */
.opt-card{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px,4vw,52px); align-items:center; margin-top: clamp(28px,3.5vw,42px); background: var(--paper); color: var(--ink); border:1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(28px,4vw,44px); box-shadow: var(--shadow-sm); }
.opt-text .eyebrow{ color: var(--accent); }
.opt-text h3{ font-family: var(--serif); font-weight:400; font-size: clamp(26px,3.2vw,38px); letter-spacing:-0.02em; line-height:1.06; margin-top:12px; }
.opt-text p{ margin-top:14px; font-size:16px; color: var(--ink-2); line-height:1.6; }
.opt-text .opt-line b{ color: var(--ink); font-weight:600; }
.opt-visual{ background: var(--paper-2); border:1px solid var(--rule); border-radius: var(--radius); padding: clamp(22px,2.6vw,30px); display:flex; flex-direction:column; gap:22px; }
.opt-label{ font-family: var(--mono); font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-3); }
.opt-vs{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.opt-opt{ flex:1; text-align:center; font-size:13.5px; font-weight:500; color: var(--ink-soft); background: var(--paper); border:1px solid var(--rule); border-radius:10px; padding:12px 10px; }
.opt-or{ font-family: var(--serif); font-style:italic; color: var(--ink-3); font-size:15px; }
.opt-seg{ display:flex; gap:8px; margin-top:10px; }
.opt-seg span{ flex:1; text-align:center; font-size:12.5px; color: var(--ink-soft); background: var(--paper); border:1px solid var(--rule); border-radius:999px; padding:9px 6px; }
.opt-foot{ font-family: var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-deep); padding-top:14px; border-top:1px solid var(--rule); }
@media (max-width:820px){ .opt-card{ grid-template-columns:1fr; } }
@media (max-width: 880px){ .proof-wide{ grid-template-columns: 1fr; } .results-side{ flex-direction:row; flex-wrap:wrap; } .rstat{ flex: 1 1 44%; } }

/* ---------- the system (how it works) ---------- */
.sys-grid{ display:grid; grid-template-columns: 1fr 0.82fr; gap: clamp(40px, 5vw, 76px); align-items: center; margin-top: clamp(40px, 5vw, 56px); }
.flow{ position: relative; }
.flow-step{ position: relative; padding: 0 0 30px 56px; }
.flow-step:last-child{ padding-bottom: 0; }
.flow-step::before{ content:""; position:absolute; left: 17px; top: 34px; bottom: -4px; width:2px; background: linear-gradient(var(--whatsapp), color-mix(in oklab, var(--whatsapp) 18%, transparent)); }
.flow-step:last-child::before{ display:none; }
.flow-num{ position:absolute; left:0; top:0; width: 36px; height:36px; border-radius:50%; background: var(--ink); color: var(--paper); display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-size: 13px; font-weight:500; z-index:1; }
.flow-step.wa .flow-num{ background: linear-gradient(135deg, oklch(0.66 0.16 150), oklch(0.5 0.12 156)); }
.flow-step h3{ font-family: var(--serif); font-weight:400; font-size: 23px; letter-spacing:-0.01em; line-height:1.15; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.flow-tag{ font-family: var(--mono); font-size: 9px; letter-spacing:.1em; text-transform:uppercase; color: var(--whatsapp-deep); background: color-mix(in oklab, var(--whatsapp) 15%, transparent); padding: 3px 8px; border-radius: 6px; }
.flow-step p{ margin-top: 8px; font-size: 15.5px; color: var(--ink-2); line-height:1.55; max-width: 44ch; }
.flow-step p b{ color: var(--ink); font-weight:600; }
@media (max-width: 900px){ .sys-grid{ grid-template-columns: 1fr; gap: 48px; } .sys-grid .phone-stage{ order: -1; } }

/* ---------- phone ---------- */
.phone-stage{ display:flex; justify-content:center; }
.phone{ width: 326px; max-width: 100%; background: oklch(0.15 0.008 150); border-radius: 42px; padding: 11px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.06); position: relative; }
.phone::before{ content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%); width:118px; height:24px; background: oklch(0.15 0.008 150); border-radius:0 0 16px 16px; z-index: 5; }
.phone-screen{ background: oklch(0.93 0.012 145); border-radius: 31px; overflow:hidden; height: min(592px, 74vh); display:flex; flex-direction:column; }
.wa-head{ background: var(--whatsapp-deep); color: #fff; padding: 34px 16px 12px; display:flex; align-items:center; gap: 11px; position: relative; z-index: 2; }
.wa-back{ font-size: 20px; opacity:.9; }
.wa-av{ width: 38px; height:38px; border-radius:50%; background: var(--whatsapp); display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-size:18px; color:#fff; flex:none; }
.wa-name{ font-weight: 600; font-size: 15px; line-height:1.1; }
.wa-status{ font-size: 11px; opacity:.85; margin-top:2px; }
.wa-head .wa-icons{ margin-left:auto; opacity:.85; font-size: 15px; letter-spacing: 3px; }
.wa-body{ flex:1; overflow-y:auto; scroll-behavior:smooth; scrollbar-width:none; padding: 14px 12px; display:flex; flex-direction:column; gap: 9px; background-color: oklch(0.93 0.012 145); background-image: radial-gradient(oklch(0.88 0.012 145) 1px, transparent 1px); background-size: 18px 18px; }
.wa-body::-webkit-scrollbar{ display:none; }
.daychip{ align-self:center; font-family: var(--mono); font-size: 9px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-2); background: oklch(0.97 0.01 145); padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.bub{ max-width: 82%; padding: 9px 12px 7px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.08); color: var(--ink); }
.bub.in{ align-self:flex-start; background:#fff; border-top-left-radius: 4px; }
.bub.out{ align-self:flex-end; background: oklch(0.85 0.11 150); border-top-right-radius: 4px; }
.chat-anim [data-step]{ opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .45s ease, transform .45s ease; }
.chat-anim [data-step].show{ opacity: 1; transform: none; }
.bub .t{ font-size: 9px; color: var(--ink-3); float:right; margin: 4px 0 -2px 8px; }
.bub b{ font-weight:600; }
.bub .link{ color: var(--whatsapp-deep); text-decoration: underline; word-break: break-all; }
.bub.review{ border: 1px solid color-mix(in oklab, var(--gold) 50%, #fff); }
.review-card{ margin-top:7px; background: oklch(0.97 0.01 85); border-radius: 9px; padding: 9px 10px; border:1px solid var(--rule); }
.review-card .stars{ color: var(--gold-deep); font-size: 14px; letter-spacing: 2px; }
.review-card .g{ font-family: var(--mono); font-size: 9px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-2); margin-top: 3px; }
.typing{ align-self:flex-start; background:#fff; border-radius:12px; border-top-left-radius:4px; padding: 11px 14px; display:none; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.typing.show{ display:flex; gap:4px; }
.typing span{ width:6px; height:6px; border-radius:50%; background: var(--ink-3); animation: blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }
/* phone: google reviews result */
.phone-screen.rv{ background:#fff; }
.rv-head{ background:#fff; padding: 42px 18px 16px; border-bottom:1px solid var(--rule); text-align:center; position:relative; z-index:2; }
.rv-g{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--rule); font-family:var(--serif); font-size:20px; color:#4285F4; }
.rv-biz{ font-family:var(--serif); font-size:21px; letter-spacing:-0.01em; color:var(--ink); margin-top:8px; }
.rv-rate{ font-size:12.5px; color:var(--ink-2); margin-top:6px; }
.rv-rate b{ color:var(--ink); }
.rv-stars{ color:var(--gold-deep); letter-spacing:1px; }
.rv-body{ flex:1; overflow-y:auto; scroll-behavior:smooth; scrollbar-width:none; padding:14px 13px; display:flex; flex-direction:column; gap:11px; background:#f1ece2; }
.rv-body::-webkit-scrollbar{ display:none; }
.rv-card{ background:#fff; border:1px solid var(--rule); border-radius:14px; padding:13px 14px; box-shadow:0 1px 2px rgba(60,40,20,.06); }
.rc-top{ display:flex; align-items:center; gap:10px; }
.rc-av{ width:38px; height:38px; border-radius:50%; background:var(--terra); color:#fff; font-family:var(--serif); font-size:18px; display:flex; align-items:center; justify-content:center; flex:none; }
.rc-name{ font-weight:600; font-size:14.5px; color:var(--ink); }
.rc-stars{ color:var(--gold-deep); font-size:12px; letter-spacing:1px; margin-top:2px; }
.rc-time{ margin-left:auto; font-size:11px; color:var(--ink-3); }
.rc-text{ font-size:13.5px; line-height:1.4; color:var(--ink-soft); margin-top:9px; }

/* ---------- who ---------- */
.who-tags{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: clamp(28px, 3.5vw, 40px); }
.who-tags span{ font-size: 14px; color: var(--ink-soft); border:1px solid var(--rule); background: var(--paper); padding: 11px 17px; border-radius: 999px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.who-tags span:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.who-tags span b{ color: var(--accent-ink); font-weight:600; }

/* ---------- whatsapp specialism (dark, green-accented) ---------- */
#whatsapp .eyebrow{ color: var(--whatsapp); }
#whatsapp .sec-title em{ color: var(--whatsapp); }
.wa-highlights{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,22px); margin: clamp(36px,4vw,50px) auto 0; max-width: 980px; text-align:left; }
.wa-hl{ background: oklch(0.22 0.01 60); border:1px solid oklch(0.32 0.01 60); border-radius: var(--radius); padding: clamp(22px,2.5vw,28px); transition: transform .15s ease; }
.wa-hl:hover{ transform: translateY(-3px); }
.wa-hl .hl-i{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background: color-mix(in oklab, var(--whatsapp) 24%, transparent); font-size:22px; }
.wa-hl h4{ font-family: var(--serif); font-weight:400; font-size: 22px; letter-spacing:-0.01em; margin-top:16px; color: var(--paper); }
.wa-hl p{ margin-top:9px; font-size:14.5px; color: oklch(0.82 0.01 60); line-height:1.55; }
.wa-hl p b{ color: var(--paper); font-weight:600; }
@media (max-width:820px){ .wa-highlights{ grid-template-columns:1fr; } }
.wa-uses{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin: clamp(34px,4vw,48px) auto 0; max-width: 940px; }
.wa-uses span{ font-size:14px; font-weight:500; color: oklch(0.9 0.01 60); background: oklch(0.24 0.01 60); border:1px solid oklch(0.33 0.01 60); padding: 11px 17px; border-radius: 999px; transition: transform .15s ease; }
.wa-uses span:hover{ transform: translateY(-2px); }
.wa-uses span.more{ color: var(--whatsapp); border-color: color-mix(in oklab, var(--whatsapp) 45%, transparent); background: color-mix(in oklab, var(--whatsapp) 16%, transparent); }
.wa-cta{ text-align:center; margin-top: clamp(34px,4vw,46px); }
.wa-cta p{ font-size: 18px; color: oklch(0.86 0.01 60); max-width: 52ch; margin: 0 auto 22px; line-height:1.55; }
.wa-cta p b{ color: var(--paper); font-weight:600; }

/* ---------- pricing (two options) ---------- */
.price-two{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,30px); align-items:stretch; margin-top: clamp(36px,4vw,52px); }
.pcard{ position:relative; display:flex; flex-direction:column; background: var(--paper); border:1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(28px,3.4vw,42px); box-shadow: var(--shadow-sm); }
.pcard.featured{ background: var(--ink); color: var(--paper); border-color: color-mix(in oklab, var(--gold) 30%, var(--ink)); box-shadow: var(--shadow-lg); }
.pbadge{ position:absolute; top:-13px; right: 26px; background: linear-gradient(135deg, var(--gold-deep), var(--gold)); color: oklch(0.2 0.02 80); font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:7px 13px; border-radius:999px; box-shadow: var(--shadow-sm); font-weight:500; }
.ptag{ font-family: var(--mono); font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-ink); }
.featured .ptag{ color: var(--gold); }
.pname{ font-family: var(--serif); font-weight:400; font-size: clamp(28px,3vw,36px); letter-spacing:-0.01em; margin-top: 8px; }
.pfor{ margin-top: 9px; font-size: 14.5px; color: var(--ink-2); line-height:1.5; min-height: 44px; }
.featured .pfor{ color: oklch(0.8 0.01 60); }
.pbig{ font-family: var(--serif); font-size: clamp(50px,6.5vw,76px); line-height:.92; letter-spacing:-0.02em; margin: 18px 0 4px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.pbig em{ font-style:normal; color: var(--gold-deep); }
.featured .pbig em{ color: var(--gold); }
.ppre{ font-family: var(--sans); font-size: 16px; font-weight:500; color: var(--ink-3); }
.featured .ppre{ color: oklch(0.7 0.01 60); }
.ppm{ font-family: var(--sans); font-size: 19px; font-weight:500; color: var(--ink-3); }
.featured .ppm{ color: oklch(0.72 0.01 60); }
.punder{ font-size: 15px; color: var(--ink-2); }
.featured .punder{ color: oklch(0.8 0.01 60); }
.pmodel{ font-family: var(--serif); font-size: clamp(21px,2.3vw,27px); line-height:1.22; letter-spacing:-0.01em; color: var(--ink); margin: 16px 0 4px; }
.featured .pmodel{ color: var(--paper); }
.pfeat{ list-style:none; margin: 22px 0 26px; display:flex; flex-direction:column; gap: 12px; }
.pfeat li{ position:relative; padding-left: 28px; font-size: 14.5px; line-height:1.45; color: var(--ink-soft); }
.featured .pfeat li{ color: oklch(0.87 0.01 60); }
.pfeat li::before{ content:"\2713"; position:absolute; left:0; top:0; color: var(--whatsapp); font-weight:700; }
.pcard .btn{ margin-top: auto; width:100%; }
.btn-ghost-dark{ background: transparent; border:1px solid var(--rule); color: var(--ink); }
.btn-ghost-dark:hover{ border-color: var(--whatsapp-deep); color: var(--whatsapp-deep); transform: translateY(-2px); }
/* ---------- mix and match (individual parts) ---------- */
#parts .eyebrow{ color: var(--whatsapp-deep); }
#parts .sec-title em{ color: var(--whatsapp-deep); }
.parts-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.2vw,26px); margin-top: clamp(34px,4vw,50px); }
.part{ background: var(--paper); border:1px solid var(--rule); border-radius: var(--radius); padding: clamp(24px,2.8vw,30px); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.part:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.part-i{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; background: color-mix(in oklab, var(--whatsapp) 15%, var(--paper)); border:1px solid color-mix(in oklab, var(--whatsapp) 24%, transparent); font-size:23px; }
.part h3{ font-family: var(--serif); font-weight:400; font-size: clamp(21px,2.3vw,25px); letter-spacing:-0.01em; margin-top:15px; color: var(--ink); }
.part p{ margin-top:9px; font-size:15px; color: var(--ink-2); line-height:1.55; }
.parts-foot{ margin-top: clamp(28px,3.5vw,40px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; background: linear-gradient(160deg, var(--paper), color-mix(in oklab, var(--whatsapp) 8%, var(--paper))); border:1px solid color-mix(in oklab, var(--whatsapp) 28%, var(--rule)); border-radius: var(--radius-lg); padding: clamp(26px,3vw,38px); box-shadow: var(--shadow-sm); }
.parts-foot p{ max-width: 620px; font-size: clamp(16px,1.7vw,18px); color: var(--ink-2); line-height:1.55; }
.parts-foot p b{ color: var(--ink); font-weight:600; }
@media (max-width:880px){ .parts-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .parts-grid{ grid-template-columns: 1fr; } }
.promise-band{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); margin-top: clamp(22px,3vw,30px); background: linear-gradient(160deg, var(--paper), oklch(0.96 0.03 85)); border: 1px solid color-mix(in oklab, var(--gold) 34%, var(--rule)); border-radius: var(--radius-lg); padding: clamp(26px,3vw,40px); box-shadow: var(--shadow-sm); }
.pb-item{ display:flex; gap:16px; }
.pb-i{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background: color-mix(in oklab, var(--gold) 18%, var(--paper)); font-size:22px; flex:none; }
.pb-item h4{ font-family: var(--serif); font-weight:400; font-size: 22px; letter-spacing:-0.01em; }
.pb-item p{ margin-top:8px; font-size:14.5px; color: var(--ink-2); line-height:1.55; }
.pb-item b{ color: var(--ink); font-weight:600; }
@media (max-width: 760px){ .price-two{ grid-template-columns:1fr; } .promise-band{ grid-template-columns:1fr; gap:26px; } }

/* ---------- getting started ---------- */
.gs-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,28px); margin-top: clamp(32px,4vw,46px); }
.gs{ position:relative; background: var(--paper); border:1px solid var(--rule); border-radius: var(--radius); padding: clamp(24px,3vw,32px); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.gs:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gs-n{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size:15px; }
.gs h3{ font-family: var(--serif); font-weight:400; font-size: 23px; letter-spacing:-0.01em; margin-top:16px; }
.gs p{ margin-top:9px; font-size:15px; color: var(--ink-2); line-height:1.55; }
@media (max-width:760px){ .gs-grid{ grid-template-columns:1fr; } }

/* ---------- faq ---------- */
.faq{ max-width: 840px; margin: clamp(36px, 4vw, 48px) auto 0; }
.faq details{ border:1px solid var(--rule); border-radius: 16px; background: var(--paper); margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding: 22px 24px; display:flex; align-items:center; gap: 16px; font-family: var(--serif); font-size: clamp(20px, 2.1vw, 25px); letter-spacing:-0.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ margin-left:auto; font-weight:300; font-size: 26px; color: var(--accent); transition: transform .2s; flex:none; line-height:1; }
.faq details[open] summary .pm{ transform: rotate(45deg); }
.faq .ans{ padding: 0 24px 24px; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; max-width: 70ch; }
.faq .ans b{ color: var(--ink); font-weight:600; }
.faq .ans a{ color: var(--accent-ink); border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent); }

/* ---------- closer + footer ---------- */
.closer{ background: var(--ink); color: var(--paper); padding: clamp(72px, 9vw, 130px) 0; position:relative; overflow:hidden; border-top: 1px solid var(--rule-dark); }
.closer::before{ content:""; position:absolute; inset:0; z-index:0; background: radial-gradient(700px 420px at 80% 20%, oklch(0.55 0.13 156 / .32), transparent 60%); }
.closer .wrap{ position:relative; z-index:1; text-align:center; }
.closer .ctitle{ font-family: var(--serif); font-size: clamp(40px, 6.5vw, 86px); line-height: 0.98; letter-spacing:-0.02em; text-wrap: balance; max-width: 18ch; margin: 0 auto; }
.closer .ctitle em{ font-style:italic; color: var(--accent-soft); }
.closer .csub{ margin: 22px auto 0; font-size: 18px; color: oklch(0.82 0.01 60); max-width: 52ch; line-height:1.6; }
.closer .cbtns{ margin-top: 34px; display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; }
.or-div{ display:flex; align-items:center; gap:16px; max-width:520px; margin: clamp(34px,4vw,44px) auto clamp(20px,3vw,26px); color: oklch(0.58 0.01 60); font-family: var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.or-div::before, .or-div::after{ content:""; height:1px; flex:1; background: oklch(0.30 0.01 60); }
.enquiry{ max-width:520px; margin:0 auto; text-align:left; }
.enquiry .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.enq-row{ display:flex; gap:12px; }
.enq-row input{ flex:1; min-width:0; }
.enquiry input[type=text], .enquiry input[type=tel]{ width:100%; font-family:var(--sans); font-size:16px; color:var(--paper); background:oklch(0.23 0.01 60); border:1px solid oklch(0.33 0.01 60); border-radius:12px; padding:15px 16px; margin-bottom:12px; transition:border-color .15s, box-shadow .15s; }
.enquiry input::placeholder{ color:oklch(0.58 0.01 60); }
.enquiry input:focus{ outline:0; border-color:var(--whatsapp); box-shadow:0 0 0 3px oklch(0.66 0.16 150 / .22); }
.enquiry .btn{ width:100%; margin-top:4px; }
.enq-foot{ margin-top:13px; font-size:12.5px; color:oklch(0.6 0.01 60); text-align:center; }
@media (max-width:520px){ .enq-row{ flex-direction:column; gap:0; } }

footer.foot{ background: oklch(0.12 0.01 55); color: var(--paper); padding: clamp(52px, 6vw, 80px) 0 32px; border-top: 1px solid oklch(0.28 0.01 60); }
.foot-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.foot-grid .brandmark{ font-family: var(--serif); font-size: 28px; letter-spacing:-0.02em; }
.foot-grid .brandmark em{ font-style:italic; color: var(--accent-soft); }
.foot-grid p{ margin-top: 14px; font-size: 14px; color: oklch(0.74 0.01 60); line-height:1.6; max-width: 38ch; }
.foot-grid h5{ font-family: var(--mono); font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: oklch(0.66 0.01 60); margin-bottom: 16px; }
.foot-grid a{ display:block; font-size: 15px; color: var(--paper); margin-bottom: 11px; }
.foot-grid a:hover{ color: var(--accent-soft); }
.meta-row{ margin-top: clamp(40px, 5vw, 60px); padding-top: 24px; border-top: 1px solid oklch(0.26 0.01 55); display:flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: oklch(0.6 0.01 55); }
@media (max-width: 720px){ .foot-grid{ grid-template-columns: 1fr; } .meta-row{ flex-direction:column; } }

/* ---------- hover + reveal ---------- */
.rstat, .gs{ transition: transform .18s ease, box-shadow .18s ease; }
.rstat:hover, .gs:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce){ .rstat, .gs, .who-tags span, .wa-hl, .wa-uses span{ transition:none; } .rstat:hover, .gs:hover, .who-tags span:hover, .wa-hl:hover, .wa-uses span:hover{ transform:none; } }
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }