:root{--bg:#0b0807;--bg2:#141010;--card:#1a1412;--card2:#221a17;--line:#2e2420;--tx:#f6efe9;--mut:#b4a59b;--or:#ff6a2b;--te:#c4512a;--go:#f5b642;--gr:linear-gradient(135deg,#ff6a2b,#f5b642);--gr2:linear-gradient(135deg,#c4512a,#ff6a2b 55%,#f5b642);--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:Outfit,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;padding-bottom:calc(150px + env(safe-area-inset-bottom));min-height:100vh;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(900px 500px at 85% -10%,rgba(255,106,43,.16),transparent 60%),radial-gradient(700px 400px at -10% 30%,rgba(245,182,66,.07),transparent 60%);pointer-events:none;z-index:-1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:12px 18px;background:rgba(11,8,7,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.05)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.3px}
.brand img{width:34px;height:34px}
.brand b{background:var(--gr);-webkit-background-clip:text;background-clip:text;color:transparent}
.topnav{display:none;gap:22px;margin-left:24px;color:var(--mut);font-weight:500}
.topnav a:hover{color:var(--tx)}
#topuser{margin-left:auto;display:flex;gap:8px;align-items:center}
.av{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--card2);border:2px solid rgba(255,255,255,.08)}
main{max-width:1100px;margin:0 auto;padding:0 16px}
.loader{width:40px;height:40px;margin:80px auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--or);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fade{animation:up .5s ease both}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font-weight:700;cursor:pointer;background:var(--card2);transition:transform .15s,box-shadow .2s,opacity .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--gr2);color:#1a0d06;box-shadow:0 8px 28px rgba(255,106,43,.35)}
.btn.pri:hover{box-shadow:0 10px 36px rgba(255,106,43,.5)}
.btn.out{background:transparent;border:1.5px solid rgba(255,255,255,.18)}
.btn.sm{padding:8px 14px;font-size:14px}
.btn.xl{padding:16px 30px;font-size:18px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.promo{background:var(--gr);color:#1a0d06;font-size:18px;padding:14px 30px;box-shadow:0 0 0 0 rgba(255,106,43,.6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,106,43,.55)}70%{box-shadow:0 0 0 16px rgba(255,106,43,0)}100%{box-shadow:0 0 0 0 rgba(255,106,43,0)}}
/* hero */
.hero{position:relative;margin:0 -16px;overflow:hidden}
.heroimg{width:100%;aspect-ratio:16/9;object-fit:cover;animation:heroin 1.2s ease both}
@keyframes heroin{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes zoom{to{transform:scale(1.14) translateX(-2%)}}
.hero .in{position:relative;z-index:2;padding:22px 18px 10px;max-width:760px}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,106,43,.16);color:#ffb38f;border:1px solid rgba(255,106,43,.35)}
.hero h1{font-size:44px;line-height:1.02;font-weight:900;letter-spacing:-1.5px;margin:14px 0 12px}
.hero h1 span{background:var(--gr);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#e6d9cf;font-size:17px;max-width:560px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:7px 13px;border-radius:999px;font-size:14px;font-weight:600}
.chip b{color:var(--go)}
.stores{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;color:var(--mut);font-weight:700;font-size:14px;letter-spacing:.3px}
section{margin:38px 0}
.sh{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px;gap:10px}
.sh h2{font-size:26px;font-weight:800;letter-spacing:-.6px}
.sh p{color:var(--mut);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
/* featured */
.feat{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,#2a1610,#120c0a 60%);border:1px solid rgba(255,106,43,.25)}
.feat .art{position:relative;height:300px;background:url(/img/william.jpg) center 35%/cover}
.feat .art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#160d0a)}
.feat .who{position:absolute;left:20px;bottom:16px;z-index:2;display:flex;align-items:center;gap:14px}
.feat .who img{width:72px;height:72px;border-radius:50%;border:3px solid var(--or);object-fit:cover;background:#000}
.feat .who h3{font-size:28px;font-weight:900;letter-spacing:-.6px;line-height:1}
.feat .who small{color:var(--go);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.feat .bigplay{position:absolute;right:20px;bottom:18px;z-index:2;width:64px;height:64px;border-radius:50%;border:0;background:var(--gr);color:#1a0d06;font-size:24px;cursor:pointer;box-shadow:0 10px 30px rgba(255,106,43,.5)}
.vf{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--gr);color:#1a0d06;font-size:12px;align-items:center;justify-content:center;font-weight:900;vertical-align:middle;margin-left:4px}
.tl{list-style:none;padding:8px}
.tr{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;cursor:pointer;transition:background .2s}
.tr:hover,.tr.on{background:rgba(255,106,43,.1)}
.tr .n{width:26px;text-align:center;color:var(--mut);font-weight:700}
.tr.on .n{color:var(--or)}
.tr img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.tr .t{flex:1;min-width:0}
.tr .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.tr .t small{color:var(--mut)}
.eq{display:none;gap:2px;align-items:end;height:16px}
.tr.on.playing .eq{display:flex}
.eq i{width:3px;background:var(--or);animation:eq .8s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{from{height:3px}to{height:16px}}
/* steps */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.step i{font-style:normal;display:inline-flex;width:34px;height:34px;border-radius:10px;background:var(--gr);color:#1a0d06;font-weight:900;align-items:center;justify-content:center;margin-bottom:10px}
.step b{display:block;margin-bottom:4px}
.step p{color:var(--mut);font-size:14px}
.split{display:grid;gap:12px}
.price{background:linear-gradient(150deg,#2b1710,#160e0b);border:1px solid rgba(245,182,66,.25);border-radius:22px;padding:22px}
.price .v{font-size:40px;font-weight:900;letter-spacing:-1px}
.price .v small{font-size:16px;color:var(--mut);font-weight:600}
.price ul{list-style:none;margin-top:10px;color:#e6d9cf}
.price li{padding:5px 0 5px 24px;position:relative}
.price li:before{content:"✓";position:absolute;left:0;color:var(--go);font-weight:900}
.bar6040{display:flex;height:42px;border-radius:12px;overflow:hidden;margin-top:14px;font-weight:800;font-size:14px}
.bar6040 div{display:flex;align-items:center;justify-content:center}
/* feed */
.tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);padding:5px;border-radius:999px;width:max-content;max-width:100%;overflow:auto}
.tabs button{border:0;background:none;padding:8px 16px;border-radius:999px;cursor:pointer;font-weight:600;color:var(--mut);white-space:nowrap}
.tabs button.on{background:var(--gr);color:#1a0d06}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:12px 0;overflow:hidden}
.ph{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.ph .av{width:42px;height:42px}
.ph b{font-weight:700}
.ph small{display:block;color:var(--mut);font-size:12px}
.ph .more{margin-left:auto;background:none;border:0;color:var(--mut);cursor:pointer;font-size:20px;padding:4px 8px}
.post .txt{padding:4px 16px 12px;white-space:pre-wrap;word-wrap:break-word}
.post .pimg{width:100%;max-height:620px;object-fit:cover;background:#000}
.pa{display:flex;gap:4px;padding:6px 8px;border-top:1px solid var(--line)}
.pa button{flex:1;background:none;border:0;padding:10px;border-radius:10px;cursor:pointer;color:var(--mut);font-weight:600}
.pa button:hover{background:rgba(255,255,255,.04)}
.pa button.liked{color:var(--or)}
.cm{padding:0 16px 14px}
.cmi{display:flex;gap:8px;margin:8px 0}
.cmi .av{width:30px;height:30px}
.cmi div{background:var(--card2);padding:8px 12px;border-radius:14px;font-size:14px}
.cmi div b{display:block;font-size:13px}
.row{display:flex;gap:8px;align-items:center}
/* forms */
.form{display:grid;gap:14px}
label{display:grid;gap:6px;font-weight:600;font-size:14px}
label small{color:var(--mut);font-weight:400}
input,select,textarea{width:100%;background:#0f0b0a;border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:none;transition:border .2s}
input:focus,select:focus,textarea:focus{border-color:var(--or)}
input[type=file]{padding:10px;font-size:14px}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--or);flex:none}
textarea{min-height:90px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.grid2{display:grid;gap:14px}
.err{color:#ff8a7a;font-size:14px;min-height:1px}
.pay{background:linear-gradient(150deg,#22140f,#140d0b);border:1px dashed rgba(245,182,66,.45);border-radius:16px;padding:16px;font-size:14px}
.pay h4{color:var(--go);margin-bottom:6px;font-size:15px}
.pay div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.pay div:last-child{border:0}
.pay code{font-family:ui-monospace,Menlo,monospace;color:#fff;font-weight:700;word-break:break-all;cursor:pointer}
.auth{max-width:460px;margin:30px auto}
.auth h1{font-size:32px;font-weight:900;letter-spacing:-1px;margin-bottom:4px}
.mut{color:var(--mut)}
/* profile */
.pcover{height:220px;margin:0 -16px;background:#1d1411 center/cover;position:relative}
.pcover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--bg))}
.phead{position:relative;margin-top:-64px;z-index:2;display:flex;flex-direction:column;gap:10px}
.phead .pav{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--bg);background:var(--card2);box-shadow:0 0 0 3px var(--or)}
.phead h1{font-size:30px;font-weight:900;letter-spacing:-.8px;line-height:1.1}
.stats{display:flex;gap:20px;color:var(--mut);font-size:14px}
.stats b{color:var(--tx);font-size:17px;margin-right:4px}
.pbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:14px;overflow:hidden}
.photos img{aspect-ratio:1;object-fit:cover;width:100%}
.agrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.acard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s}
.acard:hover{transform:translateY(-3px)}
.acard .c{height:80px;background:#241915 center/cover}
.acard img.a{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:-32px auto 6px;border:3px solid var(--card);background:var(--card2)}
.acard div{text-align:center;padding:0 10px 14px}
.acard b{display:block;font-size:15px}
.acard small{color:var(--mut)}
.vid{width:100%;border-radius:14px;background:#000;margin-bottom:10px}
/* status */
.st{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#333}
.st.s0{background:rgba(245,182,66,.18);color:var(--go)}
.st.s1{background:rgba(90,160,255,.18);color:#8fc0ff}
.st.s2{background:rgba(255,106,43,.2);color:#ffab85}
.st.s3{background:rgba(70,200,120,.18);color:#7ee0a5}
.st.s4{background:rgba(255,80,80,.18);color:#ff9a9a}
.item{display:flex;gap:12px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;margin:10px 0}
.item img{width:70px;height:70px;border-radius:12px;object-fit:cover;flex:none}
.item .b{flex:1;min-width:0}
.item .b b{display:block}
.item .meta{color:var(--mut);font-size:13px}
.item.late{border-color:#ff5a3a;box-shadow:0 0 0 1px #ff5a3a inset}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.kpi small{color:var(--mut)}
.kpi b{display:block;font-size:22px;font-weight:800}
.kpi.g b{background:var(--gr);-webkit-background-clip:text;background-clip:text;color:transparent}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left}
.terms h2{margin:22px 0 8px;font-size:20px}
.terms p,.terms li{color:#e0d3c9;margin:6px 0}
.terms ul{padding-left:20px}
footer{margin:50px 0 20px;color:var(--mut);font-size:13px;text-align:center}
footer a{color:var(--go)}
/* player + nav */
.player{position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:18px;background:rgba(32,22,18,.92);backdrop-filter:blur(18px);border:1px solid rgba(255,106,43,.3);box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:720px;margin:0 auto;transition:transform .3s,opacity .3s}
.player.hidden{transform:translateY(40px);opacity:0;pointer-events:none}
.player img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.plInfo{flex:1;min-width:0}
.plTitle{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plBar{height:4px;background:rgba(255,255,255,.12);border-radius:4px;margin-top:6px;cursor:pointer}
.plBar div{height:100%;width:0;background:var(--gr);border-radius:4px}
.plBtn{background:none;border:0;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px}
.plBtn.big{background:var(--gr);color:#1a0d06;font-size:15px}
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:41;display:flex;justify-content:space-around;align-items:flex-end;padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:rgba(11,8,7,.94);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.06)}
.bottom a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--mut);flex:1}
.bottom svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bottom a.on{color:var(--or)}
.bottom .plus span{width:48px;height:48px;border-radius:16px;background:var(--gr);display:flex;align-items:center;justify-content:center;margin-top:-22px;box-shadow:0 8px 24px rgba(255,106,43,.45)}
.bottom .plus svg{stroke:#1a0d06;stroke-width:2.6}
#toast{position:fixed;left:50%;top:76px;transform:translateX(-50%) translateY(-20px);background:#2a1b15;border:1px solid var(--or);padding:12px 18px;border-radius:14px;z-index:60;opacity:0;transition:.3s;pointer-events:none;max-width:90vw;font-weight:600}
#toast.on{opacity:1;transform:translateX(-50%)}
.empty{color:var(--mut);text-align:center;padding:30px 10px}
.hidden{display:none}
@media(min-width:760px){
 .topnav{display:flex}
 .hero{margin:18px 0 0}
 .heroimg{border-radius:28px;box-shadow:0 30px 80px rgba(255,106,43,.18)}
 .hero h1{font-size:68px}
 .hero .in{padding:34px 8px 0}
 .bottom{display:none}
 .player{bottom:18px}
 body{padding-bottom:110px}
 .steps{grid-template-columns:repeat(4,1fr)}
 .split{grid-template-columns:1fr 1fr}
 .grid2{grid-template-columns:1fr 1fr}
 .agrid{grid-template-columns:repeat(4,1fr)}
 .kpis{grid-template-columns:repeat(4,1fr)}
 .feat{display:grid;grid-template-columns:1.1fr 1fr}
 .feat .art{height:auto;min-height:380px}
 .feat .art:after{background:linear-gradient(90deg,transparent 50%,#140c0a)}
 .pcover{height:300px;margin:0;border-radius:0 0 24px 24px}
 .phead{flex-direction:row;align-items:flex-end;gap:20px;padding:0 20px}
 .phead .pav{width:150px;height:150px}
 .feedwrap{max-width:640px}
}

.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--gr);color:#1a0d06;font-weight:800;font-size:13px;letter-spacing:.2px;box-shadow:0 6px 20px rgba(255,106,43,.35)}
.btn.social{gap:8px}
.btn.social svg{flex:none}