/* ==========================================================
   MyProFunnels – White Label Landing Page
   Alternating dark / light sections, gold accent
   ========================================================== */
:root{
  --gold:#d9a93b;
  --gold-2:#f3d27a;
  --gold-3:#a8741a;
  --ink:#0a0a0c;
  --ink-2:#14141a;
  --ink-3:#1d1d26;
  --cream:#fbf7ee;
  --cream-2:#f2ead7;
  --white:#fff;
  --txt-d:#f4efe3;
  --txt-d2:#b9b2a2;
  --txt-l:#1b1a17;
  --txt-l2:#5d584b;
  --radius:20px;
  --shadow-d:0 20px 60px rgba(0,0,0,.55);
  --shadow-l:0 18px 50px rgba(120,85,10,.16);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--ink);color:var(--txt-d);line-height:1.65;text-align:center;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.2;font-weight:700}
p{margin-inline:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:inline-block}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(70px,9vw,120px) 20px;overflow:hidden}
.wrap{max-width:1180px;margin:0 auto;position:relative;z-index:2}
.wrap.narrow{max-width:820px}
.dark{background:radial-gradient(1200px 500px at 50% -10%,#1d1810 0%,var(--ink) 60%);color:var(--txt-d)}
.dark.alt{background:radial-gradient(900px 500px at 50% 110%,#201a0e 0%,var(--ink-2) 65%)}
.light{background:linear-gradient(180deg,var(--cream) 0%,#fffdf8 100%);color:var(--txt-l)}
.dark p,.dark li{color:var(--txt-d2)}
.light p,.light li{color:var(--txt-l2)}
.dark h2,.dark h3,.dark h4{color:var(--txt-d)}
.light h2,.light h3,.light h4{color:var(--txt-l)}
.sec::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(217,169,59,.13) 1px,transparent 1px);background-size:34px 34px;opacity:.5;pointer-events:none;mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 75%)}
.light::before{opacity:.35}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;pointer-events:none;animation:float 12s ease-in-out infinite;z-index:1}
.orb.g{background:var(--gold)}
.orb.a{width:340px;height:340px;top:-90px;left:-90px}
.orb.b{width:300px;height:300px;bottom:-100px;right:-80px;animation-delay:-5s}

.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:16px;position:relative;padding:0 38px}
.eyebrow::before,.eyebrow::after{content:"";position:absolute;top:50%;width:26px;height:1px;background:var(--gold)}
.eyebrow::before{left:0}.eyebrow::after{right:0}
.light .eyebrow{color:var(--gold-3)}.light .eyebrow::before,.light .eyebrow::after{background:var(--gold-3)}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem);margin-bottom:18px}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
.lead{font-size:clamp(1rem,1.7vw,1.2rem);max-width:760px;margin:0 auto 14px}
.gold{background:linear-gradient(100deg,var(--gold-3),var(--gold-2),var(--gold),var(--gold-2));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.light .gold{background-image:linear-gradient(100deg,#8a5a0c,#c9921f,#e0b04a,#c9921f);background-size:220% auto;-webkit-background-clip:text;background-clip:text}
.head{margin-bottom:clamp(36px,5vw,60px)}
.sub-h{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);margin:26px 0 18px}
.divider{width:90px;height:3px;border-radius:3px;margin:26px auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:50px;font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:2px solid transparent;transition:.35s;position:relative;overflow:hidden;font-family:var(--sans)}
.btn.primary{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-3));color:#1a1204;box-shadow:0 10px 30px rgba(217,169,59,.35)}
.btn.primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sweep 3.2s ease-in-out infinite}
.btn.primary:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 40px rgba(217,169,59,.5)}
.btn.ghost{border-color:var(--gold);color:var(--gold);background:transparent}
.light .btn.ghost{color:var(--gold-3);border-color:var(--gold-3)}
.btn.ghost:hover{background:var(--gold);color:#1a1204;transform:translateY(-4px)}
.pulse{animation:pulse 2.4s infinite}
.small-note{font-size:.8rem;max-width:700px;margin:26px auto 0;opacity:.8}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{border-radius:var(--radius);padding:30px 24px;position:relative;transition:transform .45s,box-shadow .45s,border-color .45s;overflow:hidden}
.dark .card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(217,169,59,.28);box-shadow:var(--shadow-d)}
.light .card{background:#fff;border:1px solid rgba(201,146,31,.28);box-shadow:var(--shadow-l)}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(243,210,122,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.card:hover{transform:translateY(-10px);border-color:var(--gold)}
.card:hover::before{transform:translateX(120%)}
.card h3{margin:14px 0 8px}
.card p{font-size:.95rem}
.card .ic{width:62px;height:62px;border-radius:18px;margin:0 auto;display:grid;place-items:center;font-size:30px;background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#1a1204;box-shadow:0 8px 22px rgba(217,169,59,.35);transition:.5s}
.card:hover .ic{transform:rotate(-8deg) scale(1.12)}
.num{font-family:var(--serif);font-size:2.6rem;font-weight:800;line-height:1}

/* chips (replace bullet lists, keeps text centred) */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:960px;margin:0 auto}
.chip{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:50px;font-size:.92rem;font-weight:500;transition:.35s}
.dark .chip{background:rgba(217,169,59,.1);border:1px solid rgba(217,169,59,.35);color:var(--txt-d)}
.light .chip{background:#fff;border:1px solid rgba(201,146,31,.4);color:var(--txt-l);box-shadow:0 6px 18px rgba(120,85,10,.1)}
.chip .ico{color:var(--gold);font-size:18px;flex:none}
.light .chip .ico{color:var(--gold-3)}
.chip:hover{transform:translateY(-4px) scale(1.04);border-color:var(--gold)}
.chip.plain{cursor:default}

/* ---------- 1. HERO ---------- */
.hero{padding-top:clamp(50px,7vw,90px);min-height:100vh;display:flex;align-items:center}
.logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:34px}
.logo-mark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#1a1204;font-size:28px;box-shadow:0 0 30px rgba(217,169,59,.5);animation:glow 3s ease-in-out infinite}
.logo-txt{text-align:left;font-family:var(--serif);font-size:1.6rem;font-weight:800;line-height:1.05;color:var(--white)}
.logo-txt small{display:block;font:600 .55rem var(--sans);letter-spacing:.3em;color:var(--gold)}
.hero .kicker{font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;color:var(--gold)}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.8rem);margin:14px 0 6px}
.hero h2.gold{font-size:clamp(1.4rem,3.6vw,2.6rem);margin-bottom:20px}
.trio{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:34px 0}
.trio .chip{padding:14px 26px;font-size:1rem;font-weight:700}
.offer-box{display:inline-flex;align-items:center;gap:18px;padding:18px 30px;border-radius:18px;margin-top:26px;background:linear-gradient(135deg,var(--gold-2),var(--gold) 60%,var(--gold-3));color:#1a1204;box-shadow:0 18px 50px rgba(217,169,59,.4);text-align:left}
.offer-box .ico{font-size:44px;flex:none}
.offer-box small{display:block;font-size:.8rem;font-weight:600}
.offer-box b{font-size:1.15rem;letter-spacing:.02em;font-weight:800}
.mock{position:relative;max-width:900px;margin:60px auto 0;perspective:1400px}
.laptop{width:min(100%,720px);margin:0 auto;animation:floaty 7s ease-in-out infinite}
.laptop-screen{background:#0c0c10;border:3px solid #33333c;border-radius:16px 16px 0 0;padding:10px;aspect-ratio:16/10;box-shadow:0 0 80px rgba(217,169,59,.3)}
.laptop-base{height:16px;background:linear-gradient(#3a3a44,#1b1b22);border-radius:0 0 18px 18px;width:112%;margin-left:-6%}
.dash{display:grid;grid-template-columns:22% 1fr;height:100%;gap:8px;font-size:clamp(.45rem,1.1vw,.7rem);text-align:left}
.dash .side{background:#15151c;border-radius:8px;padding:8px;display:grid;gap:6px;align-content:start}
.dash .side i{display:block;height:8px;border-radius:4px;background:#2a2a35}
.dash .side i:first-child{background:var(--gold);width:70%}
.dash .main{display:grid;gap:8px;grid-template-rows:auto 1fr}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stat{background:#15151c;border-radius:8px;padding:6px 8px}
.stat span{color:#8e8878;display:block}.stat b{color:#fff;font-size:1.3em}
.chart{background:#15151c;border-radius:8px;padding:6px}
.chart svg{width:100%;height:100%}
.chart path.line{stroke:var(--gold);stroke-width:2.5;fill:none;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 3s .6s forwards ease-out}
.chart path.area{fill:url(#ga);opacity:0;animation:fadein 1s 2s forwards}
.phone{position:absolute;right:2%;bottom:-6%;width:22%;min-width:110px;aspect-ratio:9/18;background:#0c0c10;border:3px solid #3a3a44;border-radius:24px;padding:8px;box-shadow:0 20px 60px rgba(0,0,0,.7);animation:floaty 6s -2s ease-in-out infinite;font-size:.55rem}
.phone .stat{margin-bottom:6px;text-align:left}
.phone .brand{color:var(--gold);font-weight:700;margin-bottom:6px}
.side-icons{position:absolute;right:-6px;top:0;display:grid;gap:14px}
.side-icons .si{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:24px;border:1.5px solid var(--gold);color:var(--gold);background:rgba(10,10,12,.85);animation:floaty 5s ease-in-out infinite}
.hero-orbit{display:none}
@media(min-width:1100px){.hero-orbit{display:grid}.side-icons{right:-90px}}

/* ---------- 2. opportunity ---------- */
.orbit{position:relative;width:min(100%,460px);aspect-ratio:1;margin:46px auto 10px}
.orbit .core{position:absolute;inset:26% 22%;border-radius:20px;background:linear-gradient(160deg,#18181f,#0a0a0d);border:3px solid #34343e;box-shadow:var(--shadow-l);display:grid;place-items:center;color:var(--gold);font-size:56px}
.orbit .ring{position:absolute;inset:0;animation:spin 28s linear infinite}
.orbit .ring span{position:absolute;width:58px;height:58px;border-radius:16px;background:#fff;border:1.5px solid var(--gold-3);color:var(--gold-3);display:grid;place-items:center;font-size:26px;box-shadow:var(--shadow-l);left:calc(50% - 29px);top:calc(50% - 29px);transform:rotate(var(--r)) translateY(-210px) rotate(calc(var(--r) * -1))}
.orbit .ring span i{display:grid;place-items:center;animation:spinr 28s linear infinite}
@media(max-width:520px){.orbit .ring span{transform:rotate(var(--r)) translateY(-150px) rotate(calc(var(--r) * -1));width:46px;height:46px;left:calc(50% - 23px);top:calc(50% - 23px);font-size:20px}}
.callout{margin:44px auto 0;max-width:760px}
.callout h3{margin-bottom:18px}

/* ---------- 3. what is ---------- */
.important{margin-top:34px;padding:26px;border-radius:var(--radius);max-width:700px;margin-inline:auto;border:1px dashed var(--gold);background:rgba(217,169,59,.06)}
.important .ico{font-size:40px;color:var(--gold);margin:0 auto 8px}
.important b{color:var(--gold);font-family:var(--serif);font-size:1.25rem;display:block;margin-bottom:6px}

/* ---------- 4/13 revenue ---------- */
.rev .num{background:linear-gradient(100deg,var(--gold-3),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rev .x{font-size:.95rem;margin-bottom:10px;font-weight:600}
.rev .per{font-size:.82rem;margin-top:4px;opacity:.8}
.disclaimer-box{margin:36px auto 0;max-width:780px;padding:20px 24px;border-radius:16px;border:1px solid rgba(217,169,59,.4);background:rgba(217,169,59,.07);font-size:.9rem}
.disclaimer-box b{color:var(--gold)}
.light .disclaimer-box b{color:var(--gold-3)}
.plant{margin:36px auto 0;width:150px;color:var(--gold)}

/* ---------- 5 solution mock ---------- */
.devices{margin:56px auto 0;position:relative;max-width:640px}
.brand-pill{display:inline-flex;gap:10px;align-items:center;margin-top:24px;padding:14px 26px;border-radius:50px;font-weight:700;border:1px solid var(--gold);color:var(--gold)}
.light .brand-pill{color:var(--gold-3);border-color:var(--gold-3)}

/* ---------- 10 journey ---------- */
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));counter-reset:s}
.step{counter-increment:s;padding-top:46px}
.step::after{content:counter(s);position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:0 0 50% 50%;background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#1a1204;font:800 1.25rem var(--serif);display:grid;place-items:center;padding-bottom:4px}
.step small{font-weight:800;letter-spacing:.2em;color:var(--gold);font-size:.75rem}
.light .step small{color:var(--gold-3)}

/* ---------- offer terms ---------- */
.ph{display:inline-block;background:rgba(217,169,59,.18);border:1px dashed var(--gold);color:var(--gold);padding:2px 10px;border-radius:6px;font-size:.85em;font-weight:600}
.light .ph{color:#8a5a0c;border-color:#c9921f}
.terms{max-width:780px;margin:36px auto 0;padding:26px;border-radius:var(--radius);font-size:.9rem;border:1px solid rgba(217,169,59,.35);background:rgba(217,169,59,.05)}
.terms p{margin-bottom:10px}
.terms-list{display:grid;gap:12px;margin-top:20px}
.terms-list div{padding:14px 18px;border-radius:12px;border:1px solid rgba(217,169,59,.3);background:rgba(217,169,59,.05)}
.terms-list b{display:block;color:var(--gold);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.light .terms-list b{color:var(--gold-3)}

/* ---------- 17 compare ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid rgba(217,169,59,.35);box-shadow:var(--shadow-d)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:16px 18px;text-align:center;font-size:.92rem;border-bottom:1px solid rgba(217,169,59,.18)}
th{background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#1a1204;font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
td:first-child{font-weight:700;color:var(--gold)}
tbody tr{transition:.3s}tbody tr:hover{background:rgba(217,169,59,.1)}

/* ---------- 20 founder / video ---------- */
.founder{display:grid;gap:34px;justify-items:center;margin-top:20px}
.avatar{position:relative;width:min(260px,70vw);aspect-ratio:1}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid var(--gold);box-shadow:0 20px 60px rgba(217,169,59,.4)}
.avatar::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--gold);animation:spin 22s linear infinite}
.fname{font-family:var(--serif);font-size:1.8rem;margin-top:6px}
.fname-sub{color:var(--gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto;display:grid;gap:14px}
details{border-radius:16px;border:1px solid rgba(217,169,59,.32);background:rgba(255,255,255,.04);overflow:hidden;transition:.35s}
details[open]{border-color:var(--gold);background:rgba(217,169,59,.08)}
summary{list-style:none;cursor:pointer;padding:20px 52px;font-weight:700;font-size:1.02rem;position:relative;color:var(--txt-d)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--gold);transition:.35s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details .ans{padding:0 24px 22px;font-size:.95rem;animation:fadein .5s}
details .ans p{margin-bottom:8px}

/* ---------- contact / social / footer ---------- */
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.social{padding:12px 22px;border-radius:50px;border:1px solid var(--gold-3);font-weight:600;font-size:.9rem;transition:.35s;display:inline-flex;gap:8px;align-items:center;color:var(--txt-l)}
.social:hover{background:var(--gold);color:#1a1204;transform:translateY(-5px)}
.policy-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.policy-links a{padding:12px 22px;border-radius:12px;font-weight:600;font-size:.9rem;border:1px solid rgba(201,146,31,.5);background:#fff;color:var(--txt-l);transition:.3s}
.policy-links a:hover{background:var(--gold);transform:translateY(-4px)}
footer{background:#050506;color:var(--txt-d2);padding:60px 20px 40px;font-size:.88rem}
footer .logo{margin-bottom:12px}
footer .links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin:20px 0}
footer .links a:hover{color:var(--gold)}
footer p{margin-bottom:8px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:99;display:none;place-items:center;background:rgba(0,0,0,.85);padding:20px;backdrop-filter:blur(6px)}
.modal.open{display:grid;animation:fadein .35s}
.modal-box{width:min(960px,100%);position:relative}
.modal-box .frame{aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;border:2px solid var(--gold);display:grid;place-items:center;color:var(--txt-d2)}
.modal-box iframe,.modal-box video{width:100%;height:100%;border:0}
.close{position:absolute;top:-46px;right:0;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer}

/* ---------- reveal animations ---------- */
.js .reveal{opacity:0;transform:translateY(46px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 110ms)}
.js .reveal[data-anim=left]{transform:translateX(-60px)}
.js .reveal[data-anim=right]{transform:translateX(60px)}
.js .reveal[data-anim=zoom]{transform:scale(.8)}
.js .reveal[data-anim=flip]{transform:perspective(900px) rotateX(-30deg) translateY(40px);transform-origin:top}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.done{transition:transform .45s,box-shadow .45s,border-color .45s,opacity .3s;transition-delay:0s}

/* ---------- keyframes ---------- */
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,40px)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes shine{to{background-position:220% center}}
@keyframes sweep{0%{left:-120%}60%,100%{left:160%}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,169,59,.6)}70%{box-shadow:0 0 0 22px rgba(217,169,59,0)}100%{box-shadow:0 0 0 0 rgba(217,169,59,0)}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(217,169,59,.4)}50%{box-shadow:0 0 44px rgba(243,210,122,.8)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}from{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media(max-width:700px){
  .sec{padding:64px 16px}
  .offer-box{flex-direction:column;text-align:center}
  .btn{width:100%;justify-content:center}
  .phone{right:-2%}
  .eyebrow{padding:0 30px;font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- illustrations ---------- */
.visual{position:relative;isolation:isolate;max-width:640px;margin:0 auto 46px}
.visual.sm{max-width:460px}
.visual.wide{max-width:860px}
.visual::before{content:"";position:absolute;inset:6% 4%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(217,169,59,.38),transparent 68%);filter:blur(34px);animation:glowp 5s ease-in-out infinite}
@keyframes glowp{0%,100%{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
.visual img{width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 22px 34px rgba(0,0,0,.4));transition:transform .6s}
.light .visual img{filter:drop-shadow(0 20px 30px rgba(120,85,10,.28))}
.visual:hover img{transform:scale(1.04) rotate(-.6deg)}
@media(max-width:700px){.visual{margin-bottom:34px}}


/* =========================================================
   FIXES: centered grids, logo, founder, responsive
   ========================================================= */
html{overflow-x:hidden}

/* ---- centered card grids (incomplete last row stays centered) ---- */
.grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:22px}
.grid > *{flex:0 1 calc((100% - 66px) / 4);min-width:0}
.grid.g3 > *{flex:0 1 calc((100% - 44px) / 3)}
.grid.g4 > *{flex:0 1 calc((100% - 66px) / 4)}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.steps > *{flex:0 1 calc((100% - 66px) / 4)}
@media(max-width:1000px){
  .grid > *,.grid.g3 > *,.grid.g4 > *,.steps > *{flex:0 1 calc((100% - 22px) / 2)}
}
@media(max-width:640px){
  .grid > *,.grid.g3 > *,.grid.g4 > *,.steps > *{flex:0 1 100%}
  .grid,.steps{gap:18px}
}

/* ---- founder photo ---- */
.avatar{width:min(300px,72vw)}
.avatar img{object-fit:cover;object-position:50% 8%;background:#f3efe6}

/* ---- comparison table -> stacked cards on phones ---- */
@media(max-width:760px){
  .table-wrap{border:0;box-shadow:none;overflow:visible;background:none}
  table{min-width:0;width:100%}
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{margin-bottom:16px;border-radius:16px;border:1px solid rgba(217,169,59,.4);background:rgba(255,255,255,.04);overflow:hidden}
  td{border:0;padding:12px 16px;font-size:.95rem}
  td:first-child{background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#1a1204;font-weight:800}
  td + td{border-top:1px solid rgba(217,169,59,.18)}
  td[data-label]::before{content:attr(data-label);display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
}


/* ---- small screens ---- */
@media(max-width:700px){
  h2{font-size:clamp(1.65rem,7vw,2.2rem)}
  .lead{font-size:1rem}
  .card{padding:24px 18px}
  .chip{font-size:.85rem;padding:10px 16px}
  .trio .chip{padding:12px 20px;font-size:.92rem}
  .offer-box{padding:16px 20px;width:100%}
  .offer-box b{font-size:1rem}
  .btns{gap:12px}
  .mock{margin-top:44px}
  .phone{min-width:96px;right:0}
  summary{padding:18px 46px 18px 18px;font-size:.95rem}
  .terms,.important,.disclaimer-box{padding:20px 16px}
  .policy-links a,.social{width:100%;text-align:center;justify-content:center}
  .orbit{margin-top:34px}
}
@media(max-width:420px){
  .sec{padding:56px 14px}
  .hero h1{font-size:2.15rem}
  .num{font-size:2.2rem}
  .eyebrow{letter-spacing:.14em}
}


/* =========================================================
   v3: responsive images, mobile hero
   ========================================================= */
.visual picture{display:block}
.visual img{display:block;width:100%;height:auto;max-width:100%}
@media(max-width:700px){
  .visual,.visual.sm,.visual.wide{width:100%;max-width:100%}
  .visual.sm{max-width:380px}
  .visual:hover img{transform:none}
}
@media(min-width:701px){
  .visual picture img{width:100%}
}

/* ---------- mobile hero ---------- */
@media(max-width:700px){
  .hero{min-height:0;display:block;padding:34px 16px 56px}
  .hero .kicker{font-size:.7rem;letter-spacing:.16em}
  .hero h1{font-size:2.05rem;line-height:1.15;margin:10px 0 6px}
  .hero h2.gold{font-size:1.15rem;line-height:1.3;margin-bottom:14px}
  .hero .lead{font-size:.93rem;margin-bottom:10px}
  .trio{flex-direction:column;align-items:stretch;gap:10px;margin:20px 0}
  .trio .chip{justify-content:center;width:100%;padding:11px 16px;font-size:.92rem}
  .offer-box{width:100%;justify-content:center;gap:12px;padding:14px 16px;margin-top:14px}
  .offer-box .ico{font-size:34px}
  .offer-box b{font-size:.98rem}
  .hero .btns{margin-top:20px}
  .hero .btn{padding:14px 20px;font-size:.85rem}
  .hero .small-note{font-size:.7rem;margin-top:18px}
  .mock{margin-top:34px;padding-bottom:26px}
  .laptop{width:100%}
  .laptop-base{width:100%;margin-left:0;height:12px}
  .laptop-screen{padding:6px;border-width:2px;border-radius:10px 10px 0 0}
  .dash{font-size:.4rem;gap:5px}
  .phone{width:28%;min-width:78px;right:-4px;bottom:0;padding:5px;border-width:2px;border-radius:14px;font-size:.42rem}
  .phone .stat{padding:4px 5px;margin-bottom:4px}
}
@media(max-width:380px){
  .hero h1{font-size:1.85rem}
  .phone{min-width:68px}
}


/* =========================================================
   v4: small round logo, hero header animation, mobile steps fix
   ========================================================= */

/* ---- small round logo with rotating gold ring ---- */
.brand-logo{
  position:relative;display:block;width:96px;height:96px;margin:0 auto 22px;
  border-radius:50%;overflow:visible;border:0;background:none;box-shadow:none;animation:none;
}
.brand-logo img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:3px solid #0a0a0c;background:#faf8f4;position:relative;z-index:2;
  box-shadow:0 8px 28px rgba(0,0,0,.55),0 0 34px rgba(217,169,59,.35);
}
.brand-logo::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,var(--gold),transparent 35%,var(--gold-2) 55%,transparent 80%,var(--gold));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:spin 5s linear infinite;
}
.brand-logo::after{
  content:"";position:absolute;inset:-16px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(217,169,59,.35),transparent 68%);
  animation:glowp 3.5s ease-in-out infinite;
}
footer .brand-logo{width:64px;height:64px;margin:0 auto 18px}
footer .brand-logo::before,footer .brand-logo::after{display:none}
@media(max-width:700px){
  .brand-logo{width:68px;height:68px;margin-bottom:16px}
  .brand-logo img{border-width:2px}
  .brand-logo::before{inset:-5px}
  footer .brand-logo{width:56px;height:56px}
}

/* ---- hero header animation ---- */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(2px 2px at 12% 80%,rgba(243,210,122,.9),transparent 60%),
    radial-gradient(2px 2px at 28% 60%,rgba(217,169,59,.8),transparent 60%),
    radial-gradient(3px 3px at 45% 90%,rgba(243,210,122,.7),transparent 60%),
    radial-gradient(2px 2px at 63% 70%,rgba(217,169,59,.9),transparent 60%),
    radial-gradient(3px 3px at 78% 85%,rgba(243,210,122,.8),transparent 60%),
    radial-gradient(2px 2px at 90% 55%,rgba(217,169,59,.7),transparent 60%);
  animation:sparkUp 9s linear infinite;
}
@keyframes sparkUp{
  0%{transform:translateY(40px);opacity:0}
  15%{opacity:.9}
  100%{transform:translateY(-140px);opacity:0}
}
/* light beam sweeping behind the headline */
.hero .wrap::before{
  content:"";position:absolute;left:50%;top:6%;width:140%;height:420px;z-index:-1;pointer-events:none;
  transform:translateX(-50%) rotate(-8deg);
  background:linear-gradient(90deg,transparent,rgba(243,210,122,.10),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:beam 7s ease-in-out infinite;
}
@keyframes beam{0%{background-position:-60% 0}100%{background-position:160% 0}}
.hero h1{animation:h1glow 4s ease-in-out infinite}
@keyframes h1glow{
  0%,100%{text-shadow:0 0 0 rgba(217,169,59,0)}
  50%{text-shadow:0 0 28px rgba(217,169,59,.45)}
}
.hero .kicker{animation:kick 3.6s ease-in-out infinite}
@keyframes kick{0%,100%{letter-spacing:.2em}50%{letter-spacing:.3em}}
.hero .kicker::after{
  content:"";display:block;width:70px;height:2px;margin:12px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:linegrow 3.6s ease-in-out infinite;
}
@keyframes linegrow{0%,100%{width:30px;opacity:.5}50%{width:130px;opacity:1}}
.hero .trio .chip.reveal.in{animation:floaty 5s ease-in-out infinite}
.hero .trio .chip:nth-child(2){animation-delay:-1.6s}
.hero .trio .chip:nth-child(3){animation-delay:-3.2s}

/* ---- mobile: Step 1-8 always visible ---- */
@media(max-width:700px){
  #journey .visual{display:none}
  #journey .steps .reveal,
  #journey .steps .step{opacity:1!important;transform:none!important;transition:none!important}
  #journey .steps{gap:26px}
  #journey .steps > *{flex:0 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .hero::after,.hero .wrap::before{display:none}
}

/* =========================================================
   v5: realistic photos
   ========================================================= */
/* framed photos */
.photo{
  position:relative;max-width:760px;margin:0 auto 44px;border-radius:24px;overflow:hidden;
  border:2px solid rgba(217,169,59,.55);
  box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 8px rgba(217,169,59,.08);
  aspect-ratio:3/2;background:#1a1a20;
}
.light .photo{box-shadow:0 24px 60px rgba(120,85,10,.25),0 0 0 8px rgba(217,169,59,.12)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.photo:hover img{transform:scale(1.02)}
@media(max-width:700px){
  .photo{border-radius:16px;margin-bottom:32px;aspect-ratio:3/2;box-shadow:0 14px 34px rgba(0,0,0,.3)}
  .photo:hover img{transform:none}
}