/* ============================================================
   usama-ppc.pages.dev — shared stylesheet
   Loaded by index.html, free-audit.html, whatsapp.html,
   book-call.html, thank-you.html, privacy.html.
   Everything above the "AD LANDING PAGES" divider is the
   original single-file design, copied verbatim. Don't retune
   the tokens — the whole palette is pulled from the logo.
   ============================================================ */

/* ============ TOKENS — colors pulled from the logo ============ */
:root{
  --ink:#2b272e;          /* deep charcoal base */
  --charcoal:#57525a;     /* logo circle */
  --charcoal-2:#6e6873;
  --paper:#e9e7ec;        /* triangle fill */
  --paper-dim:#c9c6cf;
  --green:#3ee68a;        /* logo triangle strokes */
  --blue:#3aa0ff;
  --pink:#ff5fae;
  --ring:#7a7580;
  /* golden ratio scale: 13 → 16 → 26 → 42 → 68 → 110 */
  --fs-0:13px; --fs-1:16px; --fs-2:26px; --fs-3:42px; --fs-4:68px;
  --gr:61.8%;  --gr-inv:38.2%;
  --s-1:10px; --s-2:16px; --s-3:26px; --s-4:42px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--ink);
  color:var(--paper);
  font-size:var(--fs-1);
  line-height:1.55;
}
h1,h2,h3,.display{font-family:'Archivo',sans-serif;line-height:1.05;letter-spacing:-0.02em}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--pink);color:var(--ink)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s-3)}
section{border-bottom:1px solid #3a363e}

/* ============ TICKER ============ */
.ticker{background:var(--green);color:var(--ink);overflow:hidden;white-space:nowrap;font-weight:600;font-size:var(--fs-0)}
.ticker-track{display:inline-block;padding:8px 0;animation:tick 28s linear infinite}
.ticker span{margin:0 26px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ============ NAV ============ */
nav{position:sticky;top:0;z-index:50;background:rgba(43,39,46,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #3a363e}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:12px var(--s-3);max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-family:'Archivo';font-weight:800;font-size:18px;text-decoration:none}
.nav-links{display:flex;gap:var(--s-3);align-items:center;font-size:var(--fs-0);font-weight:500}
.nav-links a{text-decoration:none;color:var(--paper-dim)}
.nav-links a.btn-primary{color:#0d0b0f}
.nav-links a:hover{color:var(--green)}
.nav-links a.btn-primary:hover{color:#0d0b0f}
.btn{display:inline-block;font-family:'Archivo';font-weight:800;text-decoration:none;border:none;cursor:pointer;text-align:center;transition:transform .12s ease,box-shadow .12s ease}
.btn-primary{background:var(--green);color:#0d0b0f;padding:13px 26px;font-size:var(--fs-1);box-shadow:5px 5px 0 var(--pink);text-shadow:none}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--pink)}
.btn-sm{padding:9px 18px;font-size:var(--fs-0)}
.btn-ghost{background:transparent;color:var(--paper);border:2px solid var(--charcoal-2);padding:11px 24px;font-size:var(--fs-0)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* ============ HERO — 61.8 / 38.2 split ============ */
.hero{display:grid;grid-template-columns:var(--gr) var(--gr-inv);gap:0;align-items:stretch}
.hero-left{padding:var(--s-4) var(--s-3) var(--s-4) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-0);font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--s-2)}
.eyebrow .dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
h1{font-size:clamp(34px,5.2vw,var(--fs-4));font-weight:900;margin-bottom:var(--s-2)}
h1 em{font-style:normal;color:var(--green)}
h1 .u-blue{color:var(--blue)}h1 .u-pink{color:var(--pink)}
.sub{font-size:var(--fs-2);font-weight:500;color:var(--paper-dim);line-height:1.35;margin-bottom:var(--s-3);font-family:'Inter'}
.hero-ctas{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}
.micro{font-size:var(--fs-0);color:var(--paper-dim)}
.micro b{color:var(--pink)}
.plat-strip{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2);font-size:var(--fs-0);font-weight:600;color:var(--paper-dim)}
.plat-strip span{border:1px solid var(--charcoal-2);padding:5px 12px;display:inline-flex;align-items:center;gap:7px}
.plat-strip span svg{width:15px;height:15px;flex:none}

/* dashboard card */
.hero-right{background:var(--charcoal);padding:var(--s-3);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.tri-bg{position:absolute;bottom:-30px;right:-30px;opacity:.18;width:280px}
.dash{background:var(--ink);border:1px solid var(--ring);padding:var(--s-2);position:relative;z-index:1}
.dash-head{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-0);color:var(--paper-dim);border-bottom:1px solid #3a363e;padding-bottom:10px;margin-bottom:var(--s-2)}
.live{color:var(--green);font-weight:600}
.dash-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px dashed #3a363e;font-size:var(--fs-0)}
.dash-row:last-child{border:none}
.dash-row .val{font-size:20px;font-weight:600}
.g{color:var(--green)}.b{color:var(--blue)}.p{color:var(--pink)}
.bar{height:6px;background:#3a363e;margin-top:6px;position:relative}
.bar i{position:absolute;inset:0;width:0;transition:width 1.4s ease}
.dash-note{font-size:11px;color:var(--paper-dim);margin-top:10px}

/* ============ PROOF ============ */
.proof{display:grid;grid-template-columns:repeat(4,1fr);background:var(--charcoal)}
.proof div{padding:var(--s-3) var(--s-2);border-right:1px solid var(--ring);text-align:center}
.proof div:last-child{border:none}
.proof .num{font-size:var(--fs-3);font-weight:600;display:block}
.proof .lbl{font-size:var(--fs-0);color:var(--paper);opacity:.85}

/* ============ SECTION HEADS ============ */
.sec-pad{padding:var(--s-4) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-3);flex-wrap:wrap}
h2{font-size:clamp(28px,3.4vw,var(--fs-3));font-weight:800}
.sec-head p{color:var(--paper-dim);max-width:420px;font-size:var(--fs-0)}
.tri-mark{display:inline-flex;gap:3px;margin-right:10px;vertical-align:middle}
.tri-mark i{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;display:block}
.tri-mark i:nth-child(1){border-bottom:14px solid var(--green)}
.tri-mark i:nth-child(2){border-bottom:14px solid var(--blue)}
.tri-mark i:nth-child(3){border-bottom:14px solid var(--pink)}

/* ============ SERVICES ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.card{background:var(--charcoal);padding:var(--s-3);border-top:5px solid;display:flex;flex-direction:column;gap:var(--s-2)}
.card.c-g{border-color:var(--green)}.card.c-b{border-color:var(--blue)}.card.c-p{border-color:var(--pink)}
.card h3{font-size:var(--fs-2);font-weight:800}
.card ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:var(--fs-0);color:var(--paper)}
.card li::before{content:"▲ ";font-size:10px}
.c-g li::before{color:var(--green)}.c-b li::before{color:var(--blue)}.c-p li::before{color:var(--pink)}
.card .out{margin-top:auto;font-family:'IBM Plex Mono';font-size:var(--fs-0);border:1px dashed var(--ring);padding:10px}

/* ============ WHY / LOSS AVERSION ============ */
.split{display:grid;grid-template-columns:var(--gr-inv) var(--gr);gap:var(--s-3)}
.pain{background:#241f27;border:1px solid #3a363e;padding:var(--s-3)}
.pain h3{color:var(--pink);font-size:var(--fs-2);margin-bottom:var(--s-2)}
.pain ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-0)}
.pain li{padding-left:24px;position:relative}
.pain li::before{content:"✕";position:absolute;left:0;color:var(--pink);font-weight:700}
.fix h3{color:var(--green);font-size:var(--fs-2);margin-bottom:var(--s-2)}
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:56px 1fr;gap:var(--s-2);padding:var(--s-2) 0;border-bottom:1px dashed #3a363e}
.step:last-child{border:none}
.step .n{font-family:'IBM Plex Mono';font-size:var(--fs-2);color:var(--blue);font-weight:600}
.step b{display:block;font-family:'Archivo';font-weight:800;margin-bottom:4px}
.step p{font-size:var(--fs-0);color:var(--paper-dim)}

/* ============ BOOKING ============ */
#book,#cta{background:var(--charcoal)}
.book-grid{display:grid;grid-template-columns:var(--gr-inv) var(--gr);gap:var(--s-3);align-items:start}
.book-pitch h2{margin-bottom:var(--s-2)}
.book-pitch .gift{border:2px solid var(--green);padding:var(--s-2);margin:var(--s-2) 0;font-size:var(--fs-0)}
.book-pitch .gift b{color:var(--green);font-family:'Archivo',sans-serif;display:block;font-size:var(--fs-1)}
.guarantees{list-style:none;font-size:var(--fs-0);display:flex;flex-direction:column;gap:8px;color:var(--paper)}
.guarantees li::before{content:"✓ ";color:var(--green);font-weight:700}
.slots{margin-top:var(--s-2);font-size:var(--fs-0)}
.slots b{color:var(--pink)}
.slot-bar{height:8px;background:var(--ink);margin-top:6px}
.slot-bar i{display:block;height:100%;width:70%;background:linear-gradient(90deg,var(--pink),var(--blue),var(--green))}

.book-panel{background:var(--ink);border:1px solid var(--ring)}
.tabs{display:grid;grid-template-columns:1fr 1fr}
.tab{font-family:'Archivo';font-weight:800;font-size:var(--fs-1);padding:var(--s-2);background:transparent;color:var(--paper-dim);border:none;border-bottom:3px solid #3a363e;cursor:pointer}
.tab.on{color:var(--green);border-bottom-color:var(--green)}
.panel{display:none;padding:var(--s-3)}
.panel.on{display:block}
label{display:block;font-size:var(--fs-0);font-weight:600;margin-bottom:6px}
input,select,textarea{width:100%;background:var(--charcoal);border:1px solid var(--ring);color:var(--paper);padding:12px;font-size:var(--fs-0);font-family:'Inter';margin-bottom:var(--s-2)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.form-note{font-size:12px;color:var(--paper-dim);margin-top:10px;text-align:center}
.cal-embed-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-2)}
.cal-embed-head b{font-family:'Archivo';font-weight:800;font-size:var(--fs-2)}
.cal-embed-head .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(62,230,138,.18);flex:none}
.cal-embed-frame{border:1px solid var(--ring);background:#fff;padding:6px;border-radius:2px}
.cal-embed-frame iframe{display:block;width:100%;height:600px;border:0;border-radius:2px}
.cal-embed-note{font-size:12px;color:var(--paper-dim);margin-top:12px;text-align:center}
.cal-embed-note b{color:var(--green)}
/* ============ FOOTER ============ */
footer{padding:var(--s-4) 0 var(--s-3)}
.foot-grid{display:grid;grid-template-columns:var(--gr) var(--gr-inv);gap:var(--s-3);align-items:start}
.socials{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.socials a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--charcoal-2);padding:10px 16px;text-decoration:none;font-size:var(--fs-0);font-weight:600}
.socials a:hover{border-color:var(--green);color:var(--green)}
.socials svg{width:16px;height:16px;fill:currentColor}
.ar{font-size:var(--fs-2);color:var(--paper-dim);direction:rtl}
.copy{border-top:1px solid #3a363e;margin-top:var(--s-3);padding-top:var(--s-2);font-size:12px;color:var(--paper-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.copy a{color:var(--paper-dim)}
.copy a:hover{color:var(--green)}

/* ============ FLOATING WHATSAPP ============ */
.wa-float{position:fixed;bottom:22px;right:22px;z-index:60;background:var(--green);color:var(--ink);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.45);text-decoration:none}
.wa-float svg{width:28px;height:28px;fill:var(--ink)}

/* ============ RESPONSIVE ============ */
@media(max-width:920px){
  .hero,.split,.book-grid,.foot-grid{grid-template-columns:1fr}
  .hero-left{padding:var(--s-3) 0}
  .proof{grid-template-columns:1fr 1fr}
  .proof div:nth-child(2){border-right:none}
  .proof div{border-bottom:1px solid var(--ring)}
  .cards{grid-template-columns:1fr}
  .nav-links a:not(.btn){display:none}
}

/* ============================================================
   AD LANDING PAGES — everything below is new.
   free-audit.html / whatsapp.html / book-call.html each reuse
   the .book-grid + .book-panel shell above, but with a single
   .panel-head instead of the two-tab .tabs strip.
   ============================================================ */

/* Single-CTA panel header (replaces .tabs on the ad pages) */
.panel-head{display:flex;align-items:center;gap:10px;padding:var(--s-2) var(--s-3);border-bottom:3px solid var(--green);background:#241f27}
.panel-head .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(62,230,138,.18);flex:none}
.panel-head b{font-family:'Archivo';font-weight:800;font-size:var(--fs-1);color:var(--green)}
.panel-head .step-of{margin-left:auto;font-family:'IBM Plex Mono';font-size:12px;color:var(--paper-dim)}

/* Honeypot — must stay empty. Off-screen rather than display:none,
   because some bots skip inputs that are display:none. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}

/* Native validation styling — only after a submit attempt, so the
   form doesn't look angry before the visitor has typed anything. */
form.tried input:invalid,form.tried select:invalid,form.tried textarea:invalid{border-color:var(--pink)}
.err{display:none;font-size:12px;color:var(--pink);margin:-8px 0 var(--s-2);font-weight:600}
.err.on{display:block}

/* Button busy state while the beacon flies */
.btn[disabled]{opacity:.6;cursor:wait;transform:none!important;box-shadow:5px 5px 0 var(--pink)!important}

/* Post-submit success state (replaces the form in place) */
.success{display:none;text-align:center;padding:var(--s-3) 0}
.success.on{display:block}
.success .tick{width:64px;height:64px;border-radius:50%;background:var(--green);color:#0d0b0f;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;margin:0 auto var(--s-2)}
.success h3{font-size:var(--fs-2);font-weight:800;margin-bottom:var(--s-1)}
.success p{font-size:var(--fs-0);color:var(--paper-dim);margin-bottom:var(--s-2)}
.success .btn{width:100%}

/* book-call.html — calendar stays hidden until the form is submitted */
.cal-reveal{display:none;padding:var(--s-3);border-top:1px dashed #3a363e}
.cal-reveal.on{display:block}

/* thank-you.html */
.thanks{min-height:52vh;display:flex;align-items:center;justify-content:center;padding:var(--s-4) 0}
.thanks-card{background:var(--charcoal);border-top:5px solid var(--green);padding:var(--s-4);max-width:640px;text-align:center}
.thanks-card .tick{width:72px;height:72px;border-radius:50%;background:var(--green);color:#0d0b0f;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:900;margin:0 auto var(--s-3)}
.thanks-card h1{font-size:clamp(28px,4vw,var(--fs-3));margin-bottom:var(--s-2)}
.thanks-card p{color:var(--paper);font-size:var(--fs-1);margin-bottom:var(--s-2)}
.thanks-card .next{border:2px solid var(--green);padding:var(--s-2);margin:var(--s-3) 0;font-size:var(--fs-0);text-align:left}
.thanks-card .next b{color:var(--green);font-family:'Archivo';display:block;font-size:var(--fs-1);margin-bottom:6px}
.thanks-ctas{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap}

/* privacy.html — long-form legal prose */
.legal{max-width:760px;margin:0 auto;padding:var(--s-4) var(--s-3)}
.legal h1{font-size:clamp(30px,4vw,var(--fs-3));margin-bottom:var(--s-1)}
.legal .updated{font-family:'IBM Plex Mono';font-size:12px;color:var(--paper-dim);margin-bottom:var(--s-3)}
.legal h2{font-size:var(--fs-2);margin:var(--s-3) 0 var(--s-1);color:var(--green)}
.legal p,.legal li{font-size:var(--fs-0);color:var(--paper);margin-bottom:10px}
.legal ul{padding-left:22px}
.legal a{color:var(--green);font-weight:600}

@media(max-width:920px){
  .two{grid-template-columns:1fr}
  .cal-embed-frame iframe{height:520px}
  .thanks-card{padding:var(--s-3)}
}