/* background */
.bg-grid{position:fixed;inset:0;z-index:-3;overflow:hidden;-webkit-mask-image:radial-gradient(70% 55% at 50% 22%,#000 20%,transparent 78%);mask-image:radial-gradient(70% 55% at 50% 22%,#000 20%,transparent 78%)}
#gridfx{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(1500px,170vw);aspect-ratio:1;display:grid;grid-template-columns:repeat(9,1fr);border:1px solid rgba(255,255,255,.06)}
#gridfx b{border:1px solid rgba(255,255,255,.055);display:grid;place-items:center;font:400 clamp(20px,3.4vw,44px)/1 var(--font);color:transparent;transition:color 1.4s,background 1.4s,text-shadow 1.4s}
#gridfx b:nth-child(3n){border-right-color:rgba(255,255,255,.12)}
#gridfx b:nth-child(n+19):nth-child(-n+27),#gridfx b:nth-child(n+46):nth-child(-n+54){border-bottom-color:rgba(255,255,255,.12)}
#gridfx b.on{color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.06);text-shadow:0 0 24px rgba(var(--accent-rgb),.7)}
.bg-glow{position:fixed;z-index:-2;border-radius:50%;filter:blur(110px);pointer-events:none;opacity:.55;transition:background 1s}
.g1{width:56vw;height:56vw;left:-18vw;top:-14vw;background:rgba(var(--accent-rgb),.32)}
.g2{width:46vw;height:46vw;right:-16vw;top:30vh;background:rgba(150,90,220,.22)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.ink{background:linear-gradient(100deg,#fff 0%,rgb(var(--accent-rgb)) 55%,#c9b3ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;transition:filter 1s}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:100svh;padding:130px 0 40px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--ink2);font-weight:700;font-size:15px;letter-spacing:.02em}
.dot{width:9px;height:9px;border-radius:50%;background:rgb(var(--accent-rgb));box-shadow:0 0 0 0 rgba(var(--accent-rgb),.7);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
.hero h1{font-size:clamp(46px,7.4vw,96px);line-height:.98;letter-spacing:-.04em;margin:0 0 26px}
.lede{font-size:clamp(18px,1.7vw,22px);color:var(--ink2);max-width:34em;margin:0 0 34px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.pill.big{padding:16px 26px;font-size:17px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:30px 0 0;color:var(--ink3);font-size:15px}
.trust li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:rgb(var(--accent-rgb));vertical-align:middle}
.hero-stage{position:relative;height:min(78vh,760px);display:grid;place-items:center;perspective:1400px}
.orb{position:absolute;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.08) 62%,transparent 70%);filter:blur(40px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.8}}
.phone{position:absolute;width:min(300px,58%);aspect-ratio:1206/2622;border-radius:13.5% / 6.2%;padding:7px;background:linear-gradient(160deg,#8a8d99,#2b2d36 40%,#5c5f6b);box-shadow:0 50px 90px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1) inset;transform-style:preserve-3d;will-change:transform}
.phone img{width:100%;height:100%;border-radius:12% / 5.5%;object-fit:cover;background:#05060a}
.p-front{z-index:2;transform:translate3d(8%,0,60px) rotateY(var(--ry,-12deg)) rotateX(var(--rx,4deg)) rotateZ(2deg);animation:float 7s ease-in-out infinite}
.p-back{z-index:1;transform:translate3d(-44%,5%,-20px) rotateY(var(--ry2,14deg)) rotateZ(-7deg) scale(.9);opacity:.92;filter:saturate(.9);animation:float 8s ease-in-out -2s infinite}
@keyframes float{50%{translate:0 -14px}}
.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:16px;background:rgba(20,22,32,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.4);font-weight:700;font-size:15px;white-space:nowrap;animation:float 6s ease-in-out infinite}
.chip i{width:8px;height:8px;border-radius:50%;background:#52d98a;box-shadow:0 0 10px #52d98a}
.chip b{color:rgb(var(--accent-rgb));margin-left:4px}
.c1{left:-2%;top:16%;animation-delay:-1s}.c2{right:-2%;top:42%;animation-delay:-3s}.c3{left:6%;bottom:12%;animation-delay:-2s}

/* stats */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:30px}
.stat{background:rgba(10,11,17,.86);padding:28px 18px;text-align:center}
.stat b{display:block;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;line-height:1.1;color:#fff}
.stat span{color:var(--ink3);font-size:15px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}.stat:last-child{grid-column:1/-1}}

/* gallery */
.gallery{margin-top:130px}
.head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:34px}
h2{font-size:clamp(34px,5.4vw,64px);line-height:1.02;letter-spacing:-.035em;margin:0}
h2.sec{margin-bottom:46px}
.arrows{display:flex;gap:10px}
.arrows button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.25s}
.arrows button:hover{background:rgb(var(--accent-rgb));border-color:transparent;transform:scale(1.06)}
.track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(20px,calc((100vw - 1160px)/2)) 40px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track.drag{cursor:grabbing;scroll-snap-type:none}
.slide{flex:0 0 clamp(250px,26vw,340px);margin:0;scroll-snap-align:center;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#0b0c12;box-shadow:0 30px 70px -25px rgba(0,0,0,.8);transition:transform .5s var(--ease),box-shadow .5s,opacity .5s;transform:scale(var(--s,.94));opacity:var(--o,.7)}
.slide img{width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.slide.act{--s:1;--o:1;box-shadow:0 40px 90px -25px rgba(var(--accent-rgb),.55)}
.dots{display:flex;justify-content:center;gap:8px}
.dots i{width:8px;height:8px;border-radius:99px;background:var(--glass2);transition:.35s var(--ease);cursor:pointer}
.dots i.on{width:30px;background:rgb(var(--accent-rgb))}

/* bento */
.features{margin-top:130px}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.card{position:relative;overflow:hidden;padding:30px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--line);transition:transform .4s var(--ease),border-color .3s}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),.18),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover{border-color:rgba(var(--accent-rgb),.4)}
.card:hover::after{opacity:1}
.card h3{font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.025em;margin:6px 0 12px}
.card p{color:var(--ink2);margin:0 0 14px}
.tag{font-size:13px!important;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--accent-rgb))!important;font-weight:700;margin:0!important}
.small{font-size:15px!important;color:var(--ink3)!important}
.coach{grid-column:span 4;grid-row:span 2}.packs{grid-column:span 2;grid-row:span 2}.daily{grid-column:span 2}.stats-card{grid-column:span 2}.private{grid-column:span 1}.focus{grid-column:span 1}
.private,.focus{grid-column:span 3}
.steps{list-style:none;margin:22px 0;padding:0;display:grid;gap:10px}
.steps li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--line);font-weight:700}
.steps span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--accent-rgb));color:#fff;font-size:15px}
.reveal.in .steps li{animation:slidein .7s var(--ease) both}
.reveal.in .steps li:nth-child(2){animation-delay:.15s}.reveal.in .steps li:nth-child(3){animation-delay:.3s}
@keyframes slidein{from{opacity:0;transform:translateX(-18px)}}
.techs{display:flex;flex-wrap:wrap;gap:8px}
.techs i{font-style:normal;padding:7px 14px;border-radius:99px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);font-size:14px;font-weight:700}
.bars{list-style:none;margin:18px 0;padding:0;display:grid;gap:16px}
.bars li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:15px}
.bars em{font-style:normal;font-weight:700}
.bars i{grid-column:1/-1;height:7px;border-radius:9px;background:var(--glass2);position:relative;overflow:hidden}
.bars i::before{content:"";position:absolute;inset:0;width:var(--w);border-radius:9px;background:linear-gradient(90deg,rgb(var(--accent-rgb)),#c9b3ff);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .3s}
.reveal.in .bars i::before{transform:scaleX(1)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.cal i{aspect-ratio:1;border-radius:9px;background:var(--glass)}
.cal i.hit{background:rgba(var(--accent-rgb),.55)}
.cal i.today{background:rgb(var(--accent-rgb));box-shadow:0 0 18px rgba(var(--accent-rgb),.8)}
.spark{width:100%;height:auto;margin:6px 0 10px;overflow:visible}
.spark .line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease) .3s}
.spark .fill{opacity:0;transition:opacity 1.4s 1.2s}
.reveal.in .spark .line{stroke-dashoffset:0}.reveal.in .spark .fill{opacity:1}
.checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:12px;color:var(--ink2);font-size:17px}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:rgba(var(--accent-rgb),.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:900px){.bento{grid-template-columns:1fr}.coach,.packs,.daily,.stats-card,.private,.focus{grid-column:auto;grid-row:auto}}

/* palettes */
.palettes{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:140px}
.palettes p{color:var(--ink2);max-width:30em}
.swatches{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 12px}
.swatches button{width:50px;height:50px;border-radius:50%;border:3px solid transparent;background:var(--c);cursor:pointer;box-shadow:0 8px 24px -6px var(--c);transition:transform .3s var(--ease)}
.swatches button:hover{transform:scale(1.14)}
.swatches button[aria-checked=true]{border-color:#fff;transform:scale(1.14)}
.swname{font-weight:700;font-size:22px;color:rgb(var(--accent-rgb))!important}
.miniboard{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;max-width:520px;width:100%;margin-inline:auto;border-radius:26px;overflow:hidden;background:#05060a;border:1px solid var(--line);box-shadow:0 40px 100px -30px rgba(var(--accent-rgb),.6)}
.miniboard b{display:grid;place-items:center;border:1px solid rgba(255,255,255,.06);font-size:clamp(16px,3.2vw,28px);font-weight:400;color:#e8eaf2;position:relative;transition:background .4s,color .4s}
.miniboard b:nth-child(3n){border-right:1px solid rgba(255,255,255,.2)}
.miniboard b:nth-child(n+19):nth-child(-n+27),.miniboard b:nth-child(n+46):nth-child(-n+54){border-bottom:1px solid rgba(255,255,255,.2)}
.miniboard b.hl{background:rgba(var(--accent-rgb),.13)}
.miniboard b.sel{background:rgba(var(--accent-rgb),.38);color:#fff;box-shadow:inset 0 0 0 2px rgb(var(--accent-rgb))}
.miniboard b.same{color:rgb(var(--accent-rgb));font-weight:700}
.miniboard b.user{color:rgb(var(--accent-rgb))}
@media(max-width:900px){.palettes{grid-template-columns:1fr}}

/* pricing */
.pricing{margin-top:140px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;padding:32px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line)}
.plan h3{font-size:24px;margin:0 0 6px}
.price{font-size:48px;font-weight:700;letter-spacing:-.04em;line-height:1.1;margin:8px 0 6px}
.price small{font-size:18px;color:var(--ink3);font-weight:400;letter-spacing:0}
.alt{color:var(--ink2);font-size:16px;margin:0 0 12px}
.plan.pro{background:linear-gradient(180deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05));border-color:rgba(var(--accent-rgb),.55);box-shadow:0 30px 80px -30px rgba(var(--accent-rgb),.7)}
.badge{position:absolute;top:-14px;left:28px;padding:6px 14px;border-radius:99px;background:rgb(var(--accent-rgb));font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.centered{text-align:center;max-width:46em;margin:34px auto 0;color:var(--ink3)}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:140px}
.qa{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.qa details{border-radius:20px;border:1px solid var(--line);background:var(--glass);padding:0 22px;transition:background .3s}
.qa details[open]{background:var(--glass2)}
.qa summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:19px;display:flex;justify-content:space-between;gap:18px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:26px;line-height:1;color:rgb(var(--accent-rgb));transition:transform .3s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{margin:0 0 22px;color:var(--ink2)}
.faq h2{text-align:center}

/* get */
.getit{margin-top:140px}
.getbox{text-align:center;padding:70px 24px;border-radius:40px;background:radial-gradient(80% 120% at 50% 0,rgba(var(--accent-rgb),.3),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line)}
.getbox img{margin:0 auto 22px;border-radius:24px;box-shadow:0 20px 60px rgba(var(--accent-rgb),.5)}
.getbox p{color:var(--ink2);max-width:32em;margin:16px auto 28px}
.getbox .cta{justify-content:center}
.soon{cursor:default}

/* mobile hero */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:112px;min-height:auto;gap:0}
  .hero-stage{height:520px;margin-top:20px}
  .chip{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
section[id]{scroll-margin-top:92px}