/* ---------- Social Sphere · motion + UI layer ---------- */
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%}
::selection{background:#E8C46E;color:#1a1205}
body.lock{overflow:hidden}
.skip{position:absolute;left:-999px;top:10px;z-index:999;background:#E8C46E;color:#111;padding:8px 14px;border-radius:8px}.skip:focus{left:10px}

/* preloader */
#pre{position:fixed;inset:0;z-index:1000;background:#030303;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .7s ease,visibility .7s}
#pre.out{opacity:0;visibility:hidden}
#pre .pm{width:150px;height:auto;mix-blend-mode:lighten;animation:preIn 1.2s cubic-bezier(.2,.8,.2,1) both}
#pre .pt{font-family:'Disp',serif;letter-spacing:8px;font-size:13px;color:#cfcfd5;text-transform:uppercase;animation:fadeUp .8s .5s both}
#pre .pb{width:160px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#pre .pb i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8A6420,#F6DC93,#C9962E);transform-origin:left;animation:bar 1.3s .2s ease both}
@keyframes preIn{0%{opacity:0;transform:scale(.6) rotate(-14deg);filter:blur(10px)}60%{filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* header */
.hdr{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);background:rgba(5,5,5,.55);transition:background .3s,height .3s}
.hdr.scrolled{background:rgba(5,5,5,.85)}
.hdr.scrolled .wrap{height:68px}
.hdr .wrap{transition:height .3s}
.nav{align-items:center}
.nav .dd{position:relative}
.nav .dd>a{display:inline-flex;align-items:center;gap:4px}
.nav a:hover{color:#fff}
.mega{position:absolute;left:50%;top:calc(100% + 18px);transform:translate(-50%,10px);opacity:0;visibility:hidden;transition:.28s cubic-bezier(.2,.8,.2,1);z-index:60}
.dd:hover .mega,.dd:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega:before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.mega .panel{padding:30px;border-radius:24px;background:linear-gradient(145deg,rgba(30,26,18,.98),rgba(12,12,13,.98));border:1px solid rgba(232,196,110,.3);box-shadow:0 40px 90px rgba(0,0,0,.7)}
.mega a.mi{display:block;padding:9px 12px;border-radius:12px;color:#d4d4da;font-size:14.5px;transition:background .2s}
.mega a.mi:hover{background:rgba(232,196,110,.1);color:#fff}
.mega a.mi small{display:block;color:#7d7d86;font-size:12px;margin-top:2px}
.burger{cursor:pointer}
#mm{position:fixed;inset:0;z-index:90;background:rgba(3,3,3,.97);backdrop-filter:blur(10px);padding:90px 20px 30px;overflow:auto;opacity:0;visibility:hidden;transition:.35s}
#mm.open{opacity:1;visibility:visible}
#mm .x{position:absolute;right:18px;top:16px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);font-size:22px}
#mm details{border-bottom:1px solid var(--line)}
#mm summary,#mm .ml{display:flex;justify-content:space-between;padding:18px 4px;font-size:20px;font-weight:600;list-style:none}
#mm summary::-webkit-details-marker{display:none}
#mm summary:after{content:"+";color:var(--gold)}
#mm details[open] summary:after{content:"−"}
#mm .sub a{display:block;padding:10px 14px;color:#bdbdc4;font-size:16px}
#mm .ml{border-bottom:1px solid var(--line)}
#mm .ml:after{content:"→";color:var(--gold)}

/* reveal */
[data-r]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
[data-r="l"]{transform:translateX(-40px)}[data-r="r"]{transform:translateX(40px)}[data-r="s"]{transform:scale(.92)}
[data-r].in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.split.in .w>span{transform:none}

/* gold shimmer */
.shine{background:linear-gradient(100deg,#C9962E 0%,#F6DC93 20%,#E8C46E 35%,#B98A2F 50%,#F3D88E 70%,#C9962E 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% center}}

/* marquee */
.marq{display:flex}
.marq .track{display:flex;flex:none;animation:marq 38s linear infinite}
.marq:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* sphere + widgets */
.art{perspective:900px}
.art .layer{position:absolute;inset:0;transition:transform .25s ease-out;will-change:transform}
.sphere{animation:float 7s ease-in-out infinite}
.sphere:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.35) 80%,transparent 90%);mix-blend-mode:overlay;animation:spin 9s linear infinite}
.ring.spin{animation:ringspin 16s linear infinite}
@keyframes ringspin{to{transform:rotate(344deg) scaleY(.3)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes spin{to{transform:rotate(360deg)}}
.wid{animation:bob 6s ease-in-out infinite;animation-delay:var(--b,0s)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.wid .ping{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fd36b;box-shadow:0 0 0 0 rgba(47,211,107,.6);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(47,211,107,0)}100%{box-shadow:0 0 0 0 rgba(47,211,107,0)}}
.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#F6DC93;box-shadow:0 0 8px #E8C46E;opacity:0;animation:spark 5s linear infinite}
@keyframes spark{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-160px)}}

/* draw svg line */
.draw path.ln{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 2.2s cubic-bezier(.2,.8,.2,1)}
.draw.in path.ln{stroke-dashoffset:0}
.draw path.ar{opacity:0;transition:opacity 1.2s 1s}.draw.in path.ar{opacity:1}

/* before/after slider */
.ba{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);user-select:none;touch-action:pan-y}
.ba .side{padding:48px}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p,50%));transition:clip-path .05s}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;background:linear-gradient(#F6DC93,#C9962E);transform:translateX(-1px);cursor:ew-resize}
.ba .handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#FBE7A6,#C9962E);display:flex;align-items:center;justify-content:center;color:#1a1205;font-weight:900;font-style:normal;font-size:20px;box-shadow:0 0 0 10px rgba(232,196,110,.15),0 10px 30px rgba(0,0,0,.5)}
.ba .lbl2{position:absolute;top:18px;font-size:11px;letter-spacing:3px;font-weight:800;padding:6px 10px;border-radius:8px}

/* toggles */
.tg{width:58px;height:34px;border-radius:20px;background:#2a2a2e;position:relative;flex:none;transition:background .5s}
.tg i{position:absolute;left:3px;top:3px;width:28px;height:28px;border-radius:50%;background:#bbb;transition:transform .5s cubic-bezier(.3,1.5,.5,1),background .5s}
.on .tg,.tg.on{background:linear-gradient(90deg,#E8C46E,#C9962E)}
.on .tg i,.tg.on i{transform:translateX(24px);background:#fff}

/* bento glow follow */
.hov{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s}
.hov:before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(232,196,110,.16),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.hov:hover:before{opacity:1}
.hov:hover{border-color:rgba(232,196,110,.45);transform:translateY(-4px)}
.tilt{transform-style:preserve-3d}

/* process line */
.pline{transform-origin:left;transform:scaleX(0);transition:transform 2s cubic-bezier(.2,.8,.2,1)}
.in .pline,.pline.in{transform:scaleX(1)}
.step .dot{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1);transition-delay:var(--d,0s)}
.in .step .dot{transform:scale(1)}

/* orbit */
.orbit{position:absolute;left:50%;top:50%;width:470px;height:470px;margin:-235px 0 0 -235px;animation:spin 40s linear infinite}
.orbit>div{position:absolute;animation:spin 40s linear infinite reverse}
@media (max-width:760px){.orbitwrap{transform:scale(.7);height:440px!important}}

/* faq */
.faq summary{display:flex;justify-content:space-between;align-items:center;padding:24px 4px;font-size:19px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;color:var(--gold);font-size:26px;font-weight:300;transition:transform .3s}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details[open] .a{animation:fadeUp .4s}

/* bars + charts */
.bars i{display:block;transform-origin:bottom;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.in .bars i,.bars.in i{transform:scaleY(1)}
.tbl{transition:background .6s,color .6s,border-color .6s,transform .4s}
.tbl.pop{transform:scale(1.1)}
.pipe-row{animation:slideIn .6s both}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:2px;color:#2fd36b;font-weight:700}

/* cursor */
#cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(232,196,110,.7);border-radius:50%;pointer-events:none;z-index:999;transition:width .25s,height .25s,margin .25s,background .25s;mix-blend-mode:difference;display:none}
#cur.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(232,196,110,.15)}
@media (hover:hover) and (pointer:fine){#cur{display:block}}

/* floating whatsapp */
.wa{position:fixed;right:20px;bottom:20px;z-index:80;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:waIn .6s 2s both}
.wa:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:ping 2.4s infinite}
.wa svg{width:30px;height:30px;fill:#fff}
@keyframes waIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.top-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,#8A6420,#F6DC93);z-index:100}

/* open badge */
.openb{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.openb i{width:8px;height:8px;border-radius:50%;background:#777}
.openb.yes i{background:#2fd36b;box-shadow:0 0 10px #2fd36b}

/* forms */
form .inp{width:100%;color:#eee;font:inherit;font-size:15px;outline:none;transition:border-color .2s}
form .inp:focus{border-color:rgba(232,196,110,.7)}
form .inp::placeholder{color:#7a7a82}
.chips input{position:absolute;opacity:0}
.chips label{display:inline-block;margin:0 8px 10px 0;cursor:pointer}
.chips label span{display:inline-block;border:1px solid var(--line);color:#cfcfd5;border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;transition:.2s}
.chips input:checked+span{background:linear-gradient(100deg,#F6DC93,#D4A445 55%,#B98A2F);color:#1a1205;border-color:transparent}
.ok{display:none}.sent .ok{display:flex}

/* page transition */
#curtain{position:fixed;inset:0;z-index:999;background:linear-gradient(180deg,#1a1408,#050505);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.3,1);pointer-events:none}
#curtain.go{transform:scaleY(1);transform-origin:top}

.btn{transition:transform .25s ease,box-shadow .25s ease}
.btn:hover{box-shadow:0 14px 40px rgba(212,164,69,.5)}
.btn.o:hover{border-color:rgba(232,196,110,.7);box-shadow:none}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}[data-r]{opacity:1;transform:none}.split .w>span{transform:none}#pre{display:none}}

/* ---------- content pages ---------- */
.crumb a:hover{color:#fff}
.soc a span{transition:background .2s,color .2s}.soc a:hover span{background:#E8C46E;color:#1a1205}
.ftr a:hover{color:#fff}
.prose-wrap{display:grid;grid-template-columns:260px 1fr;gap:50px;align-items:start;max-width:1100px}
.toc{position:sticky;top:100px;padding:24px}
.toc b{font-size:12px;letter-spacing:3px;color:var(--gold);text-transform:uppercase}
.toc ol{margin:14px 0 0 18px;color:#bdbdc4;font-size:14.5px;line-height:1.9}
.toc a:hover{color:#fff}
.prose{font-size:18px;line-height:1.8;color:#d4d4da;max-width:760px}
.prose .intro{font-size:21px;color:#ececef}
.prose h2{font-family:'Disp',serif;font-size:36px;line-height:1.15;color:#fff;margin:50px 0 14px;scroll-margin-top:100px}
.prose h3{font-size:21px;color:#fff;margin:30px 0 8px}
.prose p{margin:14px 0}
.prose b{color:#fff}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:14px 0 14px 22px}.prose li{margin:8px 0}
.prose ul li::marker{color:#E8C46E}
.h1.split,.hero h1.split{display:block}
textarea.inp{resize:vertical;font-family:inherit}
form .lbl{display:block}
form label{display:block}
.btn[disabled]{opacity:.6;pointer-events:none}
.bubble{line-height:1.5}
@media (max-width:760px){.prose-wrap{grid-template-columns:1fr}.prose{font-size:17px}.prose h2{font-size:28px}.ba .side{padding:56px 22px 28px}.ba .after .side,.ba .after{justify-content:flex-start!important}.mega{display:none}.wa{right:14px;bottom:14px;width:54px;height:54px}.stat b{font-size:46px}}
#cur{opacity:0}#cur.vis{opacity:1}
.orbitwrap>img,.art img{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
@media (max-width:760px){
 .ba{display:flex;flex-direction:column}
 .ba .after{position:relative;inset:auto;clip-path:none!important;display:block!important}
 .ba .handle{display:none}
 .ba .side{min-height:0!important}
 .ba .lbl2{position:static;display:inline-block;margin-bottom:6px}
 .ba>.side>div,.ba .after>div{margin-top:10px!important}
}

/* ---------- fixes: icons, contrast, images ---------- */
img{height:auto}
.si{display:inline-block}
.ili{display:inline-flex!important;align-items:center;gap:8px}
.ftr li a.ili{display:inline-flex}
.soc .sb{border:0!important;transition:transform .25s}.soc a:hover .sb{transform:translateY(-3px) scale(1.08)}
.orbit .sb{box-shadow:0 10px 30px rgba(0,0,0,.5)}
/* button text always readable */
a.btn,.btn,.btn:hover,.prose a.btn,.ftr a.btn,.ftr a.btn:hover,span.btn{color:#1a1205!important;text-decoration:none!important;-webkit-text-fill-color:#1a1205}
a.btn.o,.btn.o,.btn.o:hover,.prose a.btn.o,span.btn.o{color:#f2f2f4!important;-webkit-text-fill-color:#f2f2f4;background:rgba(255,255,255,.06)}
.btn .si{color:inherit}
.btn.o .sb{margin-left:-6px}
.chip{-webkit-text-fill-color:currentColor}
/* founder photo on phones */
.founder-img{width:100%;max-width:560px;aspect-ratio:1/1;object-fit:cover;display:block;margin:0 auto}
@media (max-width:760px){.founder-img{max-width:330px}}
