@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@400;500;600;700;800;900&family=Permanent+Marker&family=Playfair+Display:wght@600;700;800;900&display=swap');
/* Wealth Marketing AI, Dubai and Abu Dhabi real estate offer LP. Variation E: minimal MODERN theme. Cool near-white + near-black ink + a single teal accent (bridges Progressive Solutions). Gold dropped. */
*{box-sizing:border-box}
:root{
  /* cool near-white base, near-black ink, single teal accent, muted slate for negatives */
  --paper:#F5F8F8; --paper2:#E9EEEE; --ink:#0F1A1C; --ink2:#3B4A4D; --mut:#75868A; --line:rgba(15,26,28,.11);
  --hi:#0C7A88; --hi-deep:#0A5E69;
  --cta:#0E8391; --cta-d:#0A5A66; --cta-l:#3FA9B4;
  --dark:#0F1A1C; --dark2:#FFFFFF; --dark3:#E9EEEE;
  --pop:#5C6B6E;
  --gold:14,131,145;
  --disp:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:840px}
a{color:inherit}
img{max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:0;line-height:1.1;margin:0;text-transform:none}
/* EMPHASIS */
.hl{background:var(--hi);color:#fff;padding:.04em .18em;border-radius:.1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hy{color:var(--hi)}
.hg{color:var(--hi)}
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hi);display:inline-flex;gap:8px;align-items:center}
.eyebrow .ico{width:16px;height:16px}
svg.ic{width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* promo + logo bars */
.promo{background:var(--cta);color:#fff;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px}
.promo .flash{display:inline-block;animation:flash 1.8s steps(1) infinite}
.top{background:rgba(245,248,248,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:11px 22px}
.top .logo{justify-self:start}
.top .tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:flex;gap:7px;align-items:center}
.top .tag .live{width:8px;height:8px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(var(--gold),.2);animation:blink 1.8s ease-in-out infinite}
.top .btn{padding:9px 18px;font-size:14px;border-radius:10px;justify-self:end}
@media(max-width:640px){.top .tag{display:none}.top .wrap{justify-content:space-between}}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:.06em;color:var(--ink);text-transform:uppercase}
.logo .mk{color:var(--hi)}
@media(max-width:600px){.logo{font-size:14px;gap:6px}.top .dia{width:20px;height:20px}}
.dia{width:24px;height:24px;flex:none;color:var(--hi)}

/* buttons */
.btn{font-family:var(--sans);font-weight:800;font-size:16px;border-radius:12px;padding:15px 26px;border:0;cursor:pointer;text-decoration:none;display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:transform .16s,box-shadow .16s,background .16s}
.btn.solid{background:linear-gradient(180deg,var(--cta-l),var(--cta));color:#fff;box-shadow:0 7px 0 var(--cta-d),0 14px 30px rgba(var(--gold),.28)}
.btn.solid:hover{transform:translateY(-2px);background:linear-gradient(180deg,#5FBDC6,var(--cta-l));box-shadow:0 9px 0 var(--cta-d),0 18px 40px rgba(var(--gold),.4)}
.btn.solid:active{transform:translateY(4px);box-shadow:0 3px 0 var(--cta-d)}
.btn.big{font-size:clamp(16px,2.2vw,21px);padding:19px 34px;border-radius:14px;letter-spacing:.01em}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;border:2px solid rgba(var(--gold),.45);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:rgba(var(--gold),.1)}
.btn small{font-weight:600;font-size:12px;opacity:.92;display:block}
.cta-pulse{position:relative}
.cta-pulse:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(var(--gold),.5);animation:ctapulse 2.2s ease-out infinite;pointer-events:none}
.arrow-down{display:block;margin:14px auto 0;width:32px;height:32px;color:var(--hi);animation:bounce 1.4s infinite}
.guarantee{display:inline-flex;gap:9px;align-items:center;background:rgba(var(--gold),.1);border:1px solid rgba(var(--gold),.35);color:var(--hi-deep);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:999px;margin-top:14px}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:44px 0 30px;background:var(--paper)}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0}
.hero:before{width:540px;height:540px;background:rgba(var(--gold),.14);top:-190px;left:-130px;animation:blob 15s ease-in-out infinite}
.hero:after{width:480px;height:480px;background:rgba(var(--gold),.10);top:-120px;right:-130px;animation:blob 17s ease-in-out infinite reverse}
.hero .wrap{position:relative;z-index:1}
.pre{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);border:1px solid rgba(var(--gold),.4);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);box-shadow:0 4px 14px rgba(15,26,28,.08)}
.pre .d{width:8px;height:8px;border-radius:50%;background:var(--hi);animation:blink 1.6s infinite}
.hero h1{font-size:clamp(29px,6vw,66px);line-height:1.16;margin:16px auto 0;max-width:17ch}
.hero h1 .hl{padding:.01em .14em;border-radius:.08em}
.hero .lede{font-size:clamp(16px,2vw,21px);color:var(--ink2);max-width:52ch;margin:18px auto 0;font-weight:500;line-height:1.5}
.hero .lede b{font-weight:800;color:var(--ink)}

/* VSL */
.vsl{position:relative;max-width:760px;margin:26px auto 0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#0C1719;
  border:1px solid rgba(var(--gold),.4);box-shadow:0 24px 60px rgba(15,26,28,.20)}
.vsl iframe,.vsl video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vsl .poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;
  background:radial-gradient(560px 320px at 50% 34%,rgba(var(--gold),.28),transparent 60%),linear-gradient(180deg,#13282B,#0A1517)}
.vsl .play{width:82px;height:82px;border-radius:50%;background:var(--cta);display:grid;place-items:center;box-shadow:0 12px 40px rgba(var(--gold),.6)}
.vsl .poster:hover .play{transform:scale(1.08);transition:transform .2s}
.vsl .play:after{content:"";margin-left:6px;border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent #fff}
.vsl .plabel{color:#fff;font-weight:800;letter-spacing:.03em;font-size:14px}
.vsl .ring{position:absolute;width:82px;height:82px;border-radius:50%;border:3px solid var(--cta);opacity:.5;animation:ctapulse 2.4s ease-out infinite;pointer-events:none}
.soundon{display:inline-flex;gap:8px;align-items:center;background:var(--cta);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin:14px auto 0}

/* opt-in */
.optin{max-width:520px;margin:24px auto 0;background:var(--dark2);border:1px solid rgba(var(--gold),.32);border-radius:18px;padding:26px 22px;box-shadow:0 18px 46px rgba(15,26,28,.10)}
.optin h3{font-family:var(--disp);font-weight:800;font-size:clamp(24px,4vw,32px);text-align:center;line-height:1.1;color:var(--ink)}
.optin .sub{font-size:14.5px;color:var(--mut);text-align:center;margin-top:8px;font-weight:600}
.field{display:block;margin-top:13px;text-align:left}
.field>span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.field input{width:100%;margin-top:6px;font:inherit;font-size:16px;font-weight:600;padding:14px 15px;border-radius:11px;border:2px solid rgba(var(--gold),.28);background:#FFFFFF;color:var(--ink)}
.field input::placeholder{color:#9AA9AC}
.field input:focus{outline:0;border-color:var(--cta);box-shadow:0 0 0 4px rgba(var(--gold),.18)}
.optin .btn.solid{width:100%;margin-top:18px}
.scarcity{font-size:13px;color:var(--ink2);text-align:center;margin-top:14px;font-weight:700;display:flex;gap:8px;align-items:center;justify-content:center}
.scarcity .dot{width:8px;height:8px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(var(--gold),.18)}
.rating{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px auto 0;font-weight:700;color:var(--ink2);font-size:14px}
.stars{color:var(--hi);font-size:17px;letter-spacing:2px}

/* spots-left scarcity meter */
.spots{max-width:420px;margin:20px auto 0;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-align:left}
.spots .lab{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.spots .lab b{color:var(--hi)}
.spots .track{height:9px;border-radius:99px;background:rgba(15,26,28,.06);margin-top:8px;overflow:hidden;border:1px solid var(--line)}
.spots .fill{height:100%;width:60%;border-radius:99px;background:linear-gradient(90deg,var(--cta),var(--cta-l))}

/* trust strip */
.trusted{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}
.trusted .lab{text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.logos{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center}
.tsig{display:inline-flex;align-items:center;gap:10px;color:var(--ink2)}
.tsig .tic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--gold),.12);border:1px solid rgba(var(--gold),.3);color:var(--hi);flex:none}
.tsig .tic svg{width:18px;height:18px}
.tsig b{font-weight:800;font-size:14.5px;color:var(--ink);letter-spacing:.01em}
.tsig span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:2px}

/* sections */
section{padding:60px 0}
.sec-eye{margin-bottom:14px;display:inline-flex}
.center{text-align:center}
.center .sec-p,.center .eyebrow,.center .sec-eye{margin-left:auto;margin-right:auto}
.sec-h{font-size:clamp(28px,4.6vw,48px);line-height:1.1;max-width:24ch}
.center .sec-h{margin-left:auto;margin-right:auto}
.sec-p{color:var(--mut);max-width:58ch;margin-top:16px;font-size:17px;line-height:1.55}
.light{background:var(--paper)}.light2{background:var(--paper2)}
.dark{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
.dark .sec-p{color:var(--mut)}.dark .sec-h,.dark h2,.dark h3{color:var(--ink)}
/* the one dramatic dark band (the dream); brighter teal scoped inside */
.popbg{position:relative;background:linear-gradient(135deg,#123133,#0A1618);color:#fff;overflow:hidden;--hi:#3FB9C4;--hi-deep:#7FD6DD}
.popbg:before{content:"";position:absolute;inset:0;background:radial-gradient(760px 420px at 50% -4%,rgba(var(--gold),.30),transparent 62%);pointer-events:none}
.popbg .wrap{position:relative;z-index:1}
.popbg .sec-p{color:rgba(255,255,255,.9)}
.sec-cta{margin-top:34px;display:flex;justify-content:center}

/* problem crossed list */
.tried{display:grid;gap:11px;max-width:560px;margin:26px auto 0;text-align:left}
.tried li{list-style:none;display:flex;gap:13px;align-items:center;font-size:16px;font-weight:600;padding:14px 18px;border-radius:12px;background:rgba(15,26,28,.04);border:1px solid rgba(15,26,28,.10);color:var(--ink2)}
.tried li .ic{color:var(--pop);flex:none;width:22px;height:22px}
.tried li s{text-decoration:line-through;text-decoration-color:rgba(92,107,110,.7);opacity:.9}
.ceiling{font-family:var(--disp);font-weight:800;font-size:clamp(22px,4vw,38px);line-height:1.15;text-align:center;max-width:22ch;margin:32px auto 0;color:var(--ink)}

/* dream (inside .popbg dark band) */
.dream{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4.8vw,46px);line-height:1.14;max-width:20ch;margin:0 auto;text-align:center;color:#fff}
.statrow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:30px auto 0}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(var(--gold),.32);border-radius:14px;padding:18px 26px;min-width:150px}
.sn{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.4vw,46px);color:var(--hi);line-height:1}
.sl{font-size:13px;font-weight:700;color:rgba(255,255,255,.88);margin-top:8px}

/* animated pipeline */
.pipe{max-width:960px;margin:36px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;position:relative}
@media(max-width:720px){.pipe{grid-template-columns:repeat(2,1fr)}}
.pstep{position:relative;background:var(--dark2);border:1px solid var(--line);border-radius:14px;padding:18px 14px 16px;text-align:center;
  animation:stepglow 4.4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.pstep .pic{width:44px;height:44px;margin:0 auto 10px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--gold),.1);color:var(--ink2);transition:.3s;
  animation:iconpop 4.4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.pstep .pic svg{width:22px;height:22px}
.pstep .pt{font-weight:800;font-size:13px;color:var(--ink);letter-spacing:.01em}
.pstep .pn{position:absolute;top:8px;left:10px;font-family:var(--disp);font-weight:700;font-size:13px;color:rgba(var(--gold),.5)}
.pstep.end{background:linear-gradient(180deg,var(--cta-l),var(--cta));border-color:var(--cta);animation:none}
.pstep.end .pic{background:rgba(255,255,255,.2);color:#fff;animation:none}
.pstep.end .pt,.pstep.end .pn{color:#fff}
@keyframes stepglow{0%,64%,100%{border-color:var(--line);box-shadow:0 2px 10px rgba(15,26,28,.06)}12%,26%{border-color:var(--cta);box-shadow:0 10px 26px rgba(var(--gold),.24)}}
@keyframes iconpop{0%,64%,100%{background:rgba(var(--gold),.1);color:var(--ink2);transform:scale(1)}12%,26%{background:var(--cta);color:#fff;transform:scale(1.08)}}

/* comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;margin:28px auto 0;text-align:left}
@media(max-width:680px){.vs{grid-template-columns:1fr}}
.vscard{border-radius:16px;padding:24px 22px;border:1px solid var(--line);background:var(--dark2);position:relative}
.vscard h4{font-family:var(--disp);font-weight:800;font-size:22px;margin:0 0 6px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.vscard .tagx{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px}
.vscard.old{background:rgba(15,26,28,.04);opacity:.96}.vscard.old h4{color:var(--mut)}.vscard.old .tagx{color:var(--pop)}
.vscard.new{border-color:rgba(var(--gold),.5);box-shadow:0 14px 40px rgba(var(--gold),.14)}.vscard.new h4{color:var(--hi)}.vscard.new .tagx{color:var(--hi-deep)}
.vscard ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.vscard li{display:flex;gap:11px;font-size:15.5px;font-weight:600;color:var(--ink2);align-items:flex-start}
.vscard li .ic{flex:none;width:20px;height:20px;margin-top:1px}
.vscard.old li .ic{color:var(--pop)}.vscard.new li .ic{color:var(--hi)}
.vsmark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px}
.vscard.old .vsmark{background:rgba(92,107,110,.14);color:var(--pop);animation:flyaway 2.8s ease-in infinite}
.vscard.new .vsmark{background:rgba(var(--gold),.18);color:var(--hi);animation:comein 2.6s ease-out infinite}

/* proof insight cards */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px;text-align:left}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--dark2);border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;position:relative;overflow:hidden}
.pcard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cta-l),var(--cta))}
.pcard .picn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--gold),.12);border:1px solid rgba(var(--gold),.28);color:var(--hi);margin-bottom:14px}
.pcard .picn svg{width:22px;height:22px}
.pcard p{color:var(--ink2);font-size:16px;font-weight:500;line-height:1.5}
.pcard p b{color:var(--ink);font-weight:800}
.pcard.feat{grid-column:1/-1;background:linear-gradient(135deg,#E7F3F3,#D8ECED)}
.pcard.ph{border-style:dashed;border-color:rgba(var(--gold),.4);background:transparent;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.pcard.ph:before{display:none}
.pcard.ph .phtag{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hi);margin-bottom:10px}
.pcard.ph .phstars{color:rgba(var(--gold),.5);font-size:18px;letter-spacing:3px;margin-bottom:8px}
.pcard.ph p{color:var(--mut);font-size:14px}

/* CTA band (closing accent-washed panel) */
.band{text-align:center}
.band .sec-h{margin:0 auto;max-width:20ch}
section.band{background:radial-gradient(720px 320px at 50% 0,rgba(var(--gold),.14),transparent 62%),var(--paper2)}

/* sticky mobile CTA + float */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:10px 14px;background:rgba(245,248,248,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.sticky-cta .btn{width:100%}
@media(max-width:760px){.sticky-cta{display:block}body{padding-bottom:78px;overflow-x:hidden}}
@media(max-width:760px){
  .top{display:none}
  .promo{position:sticky;top:0;z-index:60;font-size:11px;line-height:1.35;padding:9px 14px}
}
.float{position:fixed;right:20px;bottom:20px;z-index:45}
@media(max-width:760px){.float{display:none}}

footer{background:var(--paper2);border-top:1px solid var(--line);padding:40px 0 48px;color:var(--mut);font-size:13px;text-align:center}
footer .wrap{display:flex;flex-direction:column;gap:12px;align-items:center}
footer .logo{color:var(--ink)}
footer .fine{font-size:11.5px;color:var(--mut);max-width:70ch;line-height:1.6}

/* ============ MOTION GRAPHICS ============ */
/* hero floating proof chips */
.floatchips{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.chip{position:absolute;display:inline-flex;gap:7px;align-items:center;background:rgba(255,255,255,.92);border:1px solid rgba(var(--gold),.35);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--ink2);box-shadow:0 8px 24px rgba(15,26,28,.10);white-space:nowrap;opacity:0;animation:chipfloat 10s ease-in-out infinite}
.chip .cd{width:9px;height:9px;border-radius:50%;background:var(--cta);flex:none;box-shadow:0 0 8px rgba(var(--gold),.7)}
@keyframes chipfloat{0%{opacity:0;transform:translateY(30px) scale(.9)}14%,78%{opacity:.98}100%{opacity:0;transform:translateY(-70px) scale(1)}}
@media(max-width:760px){.floatchips{display:none}}

/* hand-drawn napkin sketch (problem) - cool/minimal: ink + slate + teal only */
.sketch{max-width:560px;margin:34px auto 0;background:#FFFFFF;border:1px solid #E1E8E8;border-radius:18px;padding:26px 22px 20px;box-shadow:0 22px 55px rgba(15,26,28,.10);position:relative}
.sketch .tape{position:absolute;top:-9px;left:50%;width:90px;height:20px;margin-left:-45px;background:rgba(14,131,145,.85);border:1px solid rgba(0,0,0,.06);transform:rotate(-2deg);box-shadow:0 2px 6px rgba(0,0,0,.14)}
.sketchsvg{width:100%;height:auto;display:block}
.sketchsvg .ink{stroke:#1D2A2C;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sketchsvg .ink2{stroke:#1D2A2C;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sketchsvg .gink{stroke:var(--hi-deep)}
.sketchsvg .rink{stroke:var(--pop)}
.sketchsvg .lead{fill:var(--pop)}
.sketchsvg .hand{font-family:"Caveat",cursive;font-weight:700}
.sketchsvg .hand.r{fill:var(--pop)}.sketchsvg .hand.g{fill:var(--hi-deep)}
.sketch.in .drip{animation:drop 2.6s ease-in infinite}
.sketch-cap{font-family:"Permanent Marker",cursive;color:#1D2A2C;font-size:clamp(18px,3.4vw,25px);text-align:center;margin-top:12px;line-height:1.3}
.sketch-cap u{text-decoration-color:var(--hi-deep);text-decoration-thickness:3px;text-underline-offset:3px}
.sketch-cap .circ{position:relative;white-space:nowrap}
.sketch-cap .circ:after{content:"";position:absolute;inset:-7px -12px;border:3px solid var(--pop);border-radius:47% 53% 50% 50%/62% 55% 45% 40%;transform:rotate(-4deg);pointer-events:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drop{0%{transform:translateY(-6px);opacity:0}12%{opacity:1}68%{opacity:1}100%{transform:translateY(48px);opacity:0}}

/* animated calendar filling with bookings (the dream, inside dark band) */
.calanim{max-width:340px;margin:6px auto 26px;background:rgba(255,255,255,.08);border:1px solid rgba(var(--gold),.32);border-radius:18px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.calhdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.calhdr i{font-style:normal;display:flex;gap:5px}
.calhdr i b{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);display:block}
.calgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.cell{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.1);position:relative}
.cell .chk{position:absolute;inset:0;border-radius:8px;background:var(--hi);display:grid;place-items:center;opacity:0;animation:cellfill 7s ease-in-out infinite;animation-delay:calc(var(--c)*.19s)}
.cell .chk svg{width:58%;height:58%;stroke:#08201F;stroke-width:3.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes cellfill{0%,4%{opacity:0;transform:scale(.5)}10%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.5)}}

/* conveyor feeding the machine */
.conveyor{position:relative;height:44px;max-width:960px;margin:8px auto -8px;overflow:hidden}
.conveyor .rail{position:absolute;top:50%;left:70px;right:70px;height:2px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,rgba(var(--gold),.5) 0 9px,transparent 9px 18px)}
.conveyor .cdot2{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--cta);transform:translateY(-50%);box-shadow:0 0 12px rgba(var(--gold),.7);animation:convey 3s linear infinite}
@keyframes convey{from{left:64px}to{left:calc(100% - 70px)}}
.conveyor .clab{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);background:var(--paper2);padding:0 6px}
.conveyor .clab.l{left:0}.conveyor .clab.r{right:0}

/* comparison motion accents */
@keyframes flyaway{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:.35;transform:translate(10px,-14px) rotate(12deg)}}
@keyframes comein{0%{opacity:0;transform:translateY(14px)}55%,100%{opacity:1;transform:translateY(0)}}

/* hand-drawn arrow */
.darrow{color:var(--hi)}
.darrow path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.darrow.in path{animation:draw 1.4s ease-out forwards}

/* motion */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.anim{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.07s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.38s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ctapulse{0%{box-shadow:0 0 0 0 rgba(var(--gold),.5)}100%{box-shadow:0 0 0 24px rgba(var(--gold),0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes flash{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* ============================================================
   PROGRESSIVE SOLUTIONS CO-BRAND (partnership variations C & D)
   Self-contained: identical in both dark and light themes.
   Their palette: deep teal-blue + emerald green + navy, Manrope.
   ============================================================ */
:root{
  --ps-teal:#12718F; --ps-teal2:#0B4E66; --ps-green:#33C07E; --ps-green-d:#1E9E63;
  --ps-navy:#0C1E29; --ps-ink:#EAF4F6; --ps-mut:#9FBFC6;
  --ps-sans:"Manrope","Inter",system-ui,sans-serif;
}

/* co-brand lockup in nav + footer */
.cobrand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;letter-spacing:.02em}
.cobrand{flex-wrap:wrap;justify-content:center}
.cobrand .cb-us{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.cobrand .cb-us .mk{color:var(--hi)}
.cobrand .cbx{color:var(--mut);font-weight:800;font-size:14px;opacity:.7}
.cobrand .cb-ps{display:inline-flex;align-items:center;gap:7px;font-family:var(--ps-sans);font-size:14px;font-weight:800;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.psmark{width:24px;height:24px;flex:none;display:block}

/* partnership announcement badge (hero) - dark teal chip, pops on ivory AND warm-black */
.announce{display:inline-flex;gap:9px;align-items:center;background:linear-gradient(90deg,var(--ps-navy),var(--ps-teal2));border:1px solid rgba(51,192,126,.6);color:var(--ps-ink);font-family:var(--ps-sans);font-weight:800;font-size:13px;letter-spacing:.02em;padding:9px 17px;border-radius:999px;box-shadow:0 10px 30px rgba(12,30,41,.28)}
.announce .astar{color:var(--ps-green);font-size:14px;line-height:1}
.announce b{color:#fff;font-weight:800}

/* co-brand line under hero */
.coline{display:inline-flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:16px auto 0;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.coline .psmark{width:20px;height:20px}
.coline .ps-name{font-family:var(--ps-sans);color:var(--ps-green-d);font-weight:800}

/* ===== THE PROGRESSIVE SOLUTIONS BAND (their section, their colors) ===== */
.partner{position:relative;overflow:hidden;color:var(--ps-ink);
  background:radial-gradient(900px 520px at 50% -12%,rgba(51,192,126,.16),transparent 60%),linear-gradient(165deg,#0B1B25,#0B3A49 55%,#0A1C26);
  border-top:1px solid rgba(51,192,126,.28);border-bottom:1px solid rgba(51,192,126,.28)}
.partner:before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(159,191,198,.05) 0 1px,transparent 1px 64px),
  repeating-linear-gradient(0deg,rgba(159,191,198,.05) 0 1px,transparent 1px 64px);pointer-events:none;mask:radial-gradient(700px 400px at 50% 30%,#000,transparent 75%)}
.partner .wrap{position:relative;z-index:1}
.partner .eyebrow{color:var(--ps-green)}
.partner .sec-h,.partner h2,.partner h3{color:#fff}
.partner .sec-p{color:rgba(234,244,246,.9)}
.partner .hl{background:var(--ps-green);color:#062416}
.partner .hy{color:var(--ps-green)}

/* big Progressive lockup */
.pslockup{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px auto 6px}
.pslockup .psmark{width:58px;height:58px}
.pslockup .psname{font-family:var(--ps-sans);font-weight:800;font-size:clamp(26px,4.4vw,40px);color:#fff;letter-spacing:.005em;line-height:1}
.pslockup .pstag{font-family:var(--ps-sans);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ps-green);display:inline-flex;gap:8px;align-items:center}
.pslockup .pstag:before,.pslockup .pstag:after{content:"";width:26px;height:1px;background:rgba(51,192,126,.5)}

/* the 3 AI solution cards */
.pscards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:36px auto 0;text-align:left}
@media(max-width:820px){.pscards{grid-template-columns:1fr}}
.pscard{background:rgba(255,255,255,.045);border:1px solid rgba(51,192,126,.24);border-radius:16px;padding:24px 22px;position:relative;transition:transform .2s,border-color .2s,background .2s}
.pscard:hover{transform:translateY(-4px);border-color:rgba(51,192,126,.55);background:rgba(51,192,126,.06)}
.pscard .psicn{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:rgba(51,192,126,.13);border:1px solid rgba(51,192,126,.4);color:var(--ps-green);margin-bottom:15px}
.pscard .psicn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pscard .pskicker{font-family:var(--ps-sans);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ps-green);margin-bottom:6px}
.pscard h4{font-family:var(--ps-sans);font-weight:800;font-size:19px;color:#fff;margin:0 0 9px;letter-spacing:.005em}
.pscard p{color:rgba(234,244,246,.82);font-size:14.5px;font-weight:500;line-height:1.55}

/* lead-source chips (Bayut / Property Finder / Meta / WhatsApp) */
.psfeed{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:30px auto 0;max-width:720px}
.psfeed .src{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(159,191,198,.24);border-radius:999px;padding:8px 15px;font-family:var(--ps-sans);font-weight:700;font-size:13px;color:var(--ps-ink)}
.psfeed .src .sdot{width:8px;height:8px;border-radius:50%;background:var(--ps-green);box-shadow:0 0 8px rgba(51,192,126,.7);flex:none}

/* the "one customer journey" pull line */
.psline{font-family:var(--ps-sans);font-weight:800;font-size:clamp(20px,3.4vw,30px);line-height:1.25;text-align:center;max-width:24ch;margin:34px auto 0;color:#fff}
.psline .g{color:var(--ps-green)}

/* proof credibility card for the partner */
.pcard.ps{background:linear-gradient(135deg,rgba(18,113,143,.14),rgba(51,192,126,.08));border-color:rgba(51,192,126,.4)}
.pcard.ps:before{background:linear-gradient(180deg,var(--ps-green),var(--ps-teal))}
.pcard.ps .picn{background:rgba(51,192,126,.14);border-color:rgba(51,192,126,.4);color:var(--ps-green)}

/* a small "powered by" seal for the trust strip */
.tsig.ps .tic{background:rgba(51,192,126,.14);border-color:rgba(51,192,126,.4);color:var(--ps-green-d)}

/* ============================================================
   QUIZ FUNNEL (variation E) - replaces the VSL + opt-in form.
   Minimal teal, matches E. Step 1 captures + saves the lead.
   ============================================================ */
.quiz{max-width:560px;margin:26px auto 0;background:var(--dark2);border:1px solid rgba(var(--gold),.32);border-radius:20px;padding:24px 24px 22px;box-shadow:0 22px 55px rgba(15,26,28,.12);text-align:left;position:relative;overflow:hidden}
.quiz .qtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.qbadge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hi);background:rgba(var(--gold),.1);border:1px solid rgba(var(--gold),.28);padding:5px 11px;border-radius:999px}
.qbadge .dot{width:7px;height:7px;border-radius:50%;background:var(--cta);box-shadow:0 0 8px rgba(var(--gold),.6)}
.qcount{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.qtitle{font-family:var(--disp);font-weight:800;font-size:clamp(21px,3.2vw,27px);line-height:1.12;color:var(--ink);margin:2px 0 14px}
.qprog{height:6px;border-radius:99px;background:rgba(15,26,28,.07);overflow:hidden;margin-bottom:20px}
.qprog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cta),var(--cta-l));width:20%;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.qstep{animation:qin .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qq{font-family:var(--disp);font-weight:800;font-size:clamp(18px,2.6vw,23px);line-height:1.2;color:var(--ink);margin-bottom:4px}
.qsub{font-size:13.5px;color:var(--mut);font-weight:600;margin-bottom:16px}
.qopts{display:grid;gap:10px}
.qopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:15.5px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:15px 16px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.qopt:hover{border-color:var(--cta);background:rgba(var(--gold),.05)}
.qopt:active{transform:scale(.99)}
.qopt .qtick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:.15s}
.qopt:hover .qtick{border-color:var(--cta)}
.qopt.sel{border-color:var(--cta);background:rgba(var(--gold),.08)}
.qopt.sel .qtick{background:var(--cta);border-color:var(--cta)}
.qopt.sel .qtick:after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.qfield{display:block;margin-top:12px;text-align:left}
.qfield>span{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);margin-bottom:5px}
.qfield input{width:100%;font:inherit;font-size:16px;font-weight:600;padding:13px 15px;border-radius:11px;border:2px solid rgba(var(--gold),.28);background:#fff;color:var(--ink)}
.qfield input::placeholder{color:#9AA9AC}
.qfield input:focus{outline:0;border-color:var(--cta);box-shadow:0 0 0 4px rgba(var(--gold),.16)}
.qerr{color:#C0563A;font-size:12.5px;font-weight:700;margin-top:8px;min-height:16px}
.qnav{display:flex;align-items:center;gap:12px;margin-top:18px}
.qback{background:none;border:0;color:var(--mut);font:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:8px 4px;display:inline-flex;align-items:center;gap:6px}
.qback:hover{color:var(--ink)}
.qback svg{width:16px;height:16px}
.qnext{flex:1}
.qnote{font-size:12px;color:var(--mut);font-weight:600;text-align:center;margin-top:13px;display:flex;gap:7px;align-items:center;justify-content:center;line-height:1.4}
.qnote svg{width:15px;height:15px;color:var(--hi);flex:none}
/* result screens */
.qresult{text-align:center;animation:qin .4s cubic-bezier(.2,.7,.2,1) both}
.qresult .qicn{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:4px auto 16px;background:rgba(var(--gold),.12);border:1px solid rgba(var(--gold),.35);color:var(--hi)}
.qresult .qicn svg{width:30px;height:30px}
.qresult h3{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.6vw,30px);line-height:1.12;color:var(--ink);margin-bottom:10px}
.qresult p{font-size:15px;color:var(--ink2);font-weight:500;line-height:1.5;max-width:42ch;margin:0 auto 18px}
.qresult p b{color:var(--ink);font-weight:800}
/* premium paid waitlist */
.qwait .qribbon{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--hi);margin-bottom:10px}
.qwait .qribbon svg{width:14px;height:14px}
.qperks{display:grid;gap:10px;max-width:380px;margin:16px auto 20px;text-align:left;padding:0}
.qperks li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--ink2)}
.qperks li svg{width:19px;height:19px;color:var(--hi);flex:none;margin-top:1px}
.qwait .qprice{display:inline-flex;align-items:baseline;gap:8px;margin:2px 0 4px;justify-content:center}
.qwait .qprice b{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,40px);color:var(--ink);line-height:1}
.qwait .qprice s{color:var(--mut);font-weight:700;font-size:18px;text-decoration-color:rgba(92,107,110,.6)}
.qwait .qprice span{font-size:13px;font-weight:700;color:var(--mut)}

/* ===== scroll offset so a CTA jump never hides the top of the quiz behind the sticky bar ===== */
#quiz{scroll-margin-top:88px}
@media(max-width:760px){#quiz{scroll-margin-top:64px}}

/* ===== hero mini value-flow: what we actually do, ad to sale (steps light up in sequence) ===== */
.flowwrap{margin:18px auto 0;max-width:560px;text-align:center}
.flowlab{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.flowrow{display:flex;flex-wrap:wrap;gap:7px 5px;align-items:center;justify-content:center}
.flowstep{display:inline-flex;align-items:center;gap:7px;background:rgba(var(--gold),.07);border:1px solid rgba(var(--gold),.24);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:.01em;animation:flowpulse 5s ease-in-out infinite;animation-delay:calc(var(--f,0)*.55s)}
.flowstep .fico{width:15px;height:15px;color:var(--hi);flex:none;display:grid;place-items:center}
.flowstep .fico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.flowstep.end{background:var(--cta);border-color:var(--cta);color:#fff;animation:none}
.flowstep.end .fico{color:#fff}
.flowarr{color:var(--hi);font-weight:900;font-size:13px;opacity:.55}
@keyframes flowpulse{0%,66%,100%{border-color:rgba(var(--gold),.24);background:rgba(var(--gold),.07);transform:translateY(0)}12%,22%{border-color:var(--cta);background:rgba(var(--gold),.15);transform:translateY(-1px)}}

/* premium framing line under the quiz-page title */
.qframe{font-size:13px;font-weight:500;color:var(--ink2);line-height:1.5;margin:5px 0 16px}
.qframe b{color:var(--ink);font-weight:800}

/* ============================================================
   FAQ: plain answers. Text mirrors the FAQPage JSON-LD in <head>.
   ============================================================ */
.faq{max-width:780px;margin:28px auto 0;text-align:left;display:grid;gap:10px}
.fq{background:var(--dark2);border:1px solid var(--line);border-radius:14px;padding:0 18px;box-shadow:0 8px 24px rgba(15,26,28,.05)}
.fq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.3;color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(var(--gold),.45);color:var(--hi);display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:16px;line-height:1}
.fq[open] summary::after{content:"\2212"}
.fq .fa{padding:0 0 18px;color:var(--ink2);font-size:15px;line-height:1.6}
.fq .fa a{color:var(--hi);font-weight:700}