/* SLENDRO AI — Landing page styles (v2) */

/* ===== HERO ===== */
.hero{position:relative;padding:calc(var(--nav-h) + 72px) 0 40px;overflow:hidden;isolation:isolate}
.hero .fx-aurora i{opacity:.42}
.hero-inner{text-align:center;position:relative;z-index:2}
.hero h1{margin:26px auto 22px;max-width:1000px}
.hero .lead{margin:0 auto 34px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-trust{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:.86rem}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{width:16px;height:16px;color:#c4b5fd}
.hero-trust b{color:#fff}

/* Studio console mockup */
.console-wrap{perspective:1600px;margin:64px auto 0;max-width:1120px;position:relative;z-index:2}
.console{transform:rotateX(calc(var(--tilt,18) * 1deg)) scale(calc(.94 + (18 - var(--tilt,18)) * .0033));transform-origin:50% 0;transition:transform .15s linear;background:rgba(10,10,24,.82);backdrop-filter:blur(18px);border-radius:24px;box-shadow:0 60px 120px -30px rgba(139,92,246,.45),0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.console-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.74rem;color:var(--dim)}
.console-bar .dots{display:flex;gap:7px}
.console-bar .dots i{width:11px;height:11px;border-radius:50%;background:#2a2a44}
.console-bar .dots i:nth-child(1){background:#ff5f57}.console-bar .dots i:nth-child(2){background:#febc2e}.console-bar .dots i:nth-child(3){background:#28c840}
.console-bar .url{flex:1;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:5px 10px;max-width:360px;margin:0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.console-bar .gpu{display:flex;align-items:center;gap:6px;color:#86efac}
.console-bar .gpu i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.console-body{display:grid;grid-template-columns:250px 1fr 300px;min-height:460px}
.console-side{padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;text-align:left}
.console-side h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--dim);margin:4px 0 6px;text-transform:uppercase}
.mode-btn{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:background .3s,border-color .3s;text-align:left;width:100%}
.mode-btn .mi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);flex:none;transition:background .3s}
.mode-btn .mi svg{width:19px;height:19px}
.mode-btn b{display:block;font-size:.88rem}
.mode-btn small{display:block;color:var(--dim);font-size:.75rem}
.mode-btn:hover{background:var(--surface)}
.mode-btn.active{background:var(--grad-soft);border-color:rgba(168,85,247,.4)}
.mode-btn.active .mi{background:var(--grad);color:#fff}
.console-side .gen{margin-top:auto}
.console-stage{padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.prompt-box{border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.03);padding:12px 14px;text-align:left;font-size:.9rem;min-height:72px}
.prompt-box .pl{font-family:var(--mono);font-size:.68rem;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between}
.prompt-box p{margin-top:6px;color:#e6e8ff}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--pink);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stage-preview{position:relative;flex:1;border-radius:16px;overflow:hidden;background:#0b0b1c;border:1px solid var(--line);min-height:260px}
.stage-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,5,13,.85))}
.scanline{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(168,85,247,.25),transparent);z-index:2;animation:scan 3.2s var(--ease) infinite}
@keyframes scan{to{top:100%}}
.render-hud{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.7rem;color:#dfe2ff}
.render-hud .bar{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.render-hud .bar i{display:block;height:100%;width:0;background:var(--grad);animation:render 5s var(--ease) infinite}
@keyframes render{0%{width:0}80%,100%{width:100%}}
.console-meta{border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:12px;text-align:left}
.meta-row{display:flex;justify-content:space-between;font-size:.8rem;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.meta-row span{color:var(--dim)}
.meta-row b{font-family:var(--mono);font-weight:600;font-size:.76rem}
.pipeline{display:grid;gap:8px;margin-top:4px}
.pipe{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted)}
.pipe i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:none;display:grid;place-items:center}
.pipe.done i{background:var(--ok);border-color:var(--ok)}
.pipe.done i::after{content:"";width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.pipe.run i{border-color:var(--purple);border-top-color:transparent;animation:spin .8s linear infinite}
.pipe.done{color:#e6e8ff}
.float-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(14,14,32,.85);backdrop-filter:blur(14px);border:1px solid var(--line-2);font-size:.8rem;box-shadow:var(--shadow);animation:bob 6s ease-in-out infinite}
.float-chip .fi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--grad);color:#fff}
.float-chip .fi svg{width:16px;height:16px}
.float-chip small{display:block;color:var(--dim);font-size:.7rem}
.float-chip.c1{left:-40px;top:32%}
.float-chip.c2{right:-36px;top:18%;animation-delay:-2s}
.float-chip.c3{right:6%;bottom:-24px;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-10px)}}

/* ===== LOGO STRIP / MARQUEE ===== */
.strip{padding:56px 0 24px}
.strip p{text-align:center;color:var(--dim);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);margin-bottom:22px}
.cap{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:#d6d9f5;font-weight:600;font-size:.92rem;white-space:nowrap}
.cap i{width:8px;height:8px;border-radius:50%;background:var(--grad)}

/* ===== METRICS ===== */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.metric{padding:30px 26px;border-right:1px solid var(--line);position:relative}
.metric:last-child{border-right:0}
.metric .num{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.metric .lbl{color:var(--muted);font-size:.86rem;margin-top:6px}
.metric .delta{position:absolute;top:22px;right:20px;font-family:var(--mono);font-size:.7rem;color:#86efac}

/* ===== BENTO ===== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(260px,auto);gap:18px}
.bento .card{padding:28px;display:flex;flex-direction:column}
.b-a{grid-column:span 4;grid-row:span 2;min-height:540px}
.b-b,.b-c,.b-d,.b-e,.b-f{grid-column:span 2}
.bento .card>.pill{align-self:flex-start}
.bento .card p{color:var(--muted);font-size:.93rem;margin-top:8px}
.bento .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--line-2);margin-bottom:18px}
.bento .ico svg{width:22px;height:22px;color:#e9d5ff}
.b-a{justify-content:flex-end}
.b-a video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0!important;opacity:.75;transition:transform 1.2s var(--ease),opacity .5s}
.b-a:hover video{transform:scale(1.04);opacity:.9}
.b-a::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(5,5,13,.1) 20%,rgba(5,5,13,.92))}
.b-a .h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-top:12px}
.b-a .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.eq{display:flex;align-items:flex-end;gap:4px;height:70px;margin-top:auto;padding-top:20px}
.eq i{flex:1;height:100%;border-radius:3px;background:var(--grad);animation:eq 1.2s ease-in-out infinite alternate;transform-origin:bottom}
@keyframes eq{0%{transform:scaleY(.15)}100%{transform:scaleY(1)}}
.img-stack{position:relative;height:130px;margin-top:auto}
.img-stack img{position:absolute;width:62%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid var(--line-2);box-shadow:var(--shadow);transition:transform .6s var(--ease)}
.img-stack img:nth-child(1){left:0;bottom:0;transform:rotate(-6deg)}
.img-stack img:nth-child(2){right:0;bottom:8px;transform:rotate(5deg)}
.b-c:hover .img-stack img:nth-child(1){transform:rotate(-10deg) translateX(-8px)}
.b-c:hover .img-stack img:nth-child(2){transform:rotate(9deg) translateX(8px)}
.mini-vid{margin-top:auto;border-radius:14px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.mini-vid video{width:100%;height:100%;object-fit:cover}
.tool-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.tool-cloud span{font-size:.78rem;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:#d6d9f5;transition:background .3s,border-color .3s}
.tool-cloud span:hover{background:var(--grad-soft);border-color:rgba(168,85,247,.5)}
.spark{margin-top:auto;width:100%;height:90px}
.spark path.ln{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 2.4s var(--ease)}
.in .spark path.ln,.spark.in path.ln{stroke-dashoffset:0}

/* ===== SHOWCASE (Generated results) ===== */
.filter{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--line);margin:0 auto 40px}
.filter button{padding:9px 18px;border-radius:999px;font-weight:700;font-size:.86rem;color:var(--muted);transition:color .3s,background .3s}
.filter button.active{background:#fff;color:#0b0b1a}
.gallery{columns:3 300px;column-gap:18px}
.gitem{break-inside:avoid;margin-bottom:18px;border-radius:20px;overflow:hidden;position:relative;border:1px solid var(--line);background:#0c0c1e;transition:transform .5s var(--ease),border-color .3s,opacity .4s}
.gitem:hover{border-color:rgba(168,85,247,.45);transform:translateY(-4px)}
.gitem.hide{display:none}
.gitem video,.gitem img{width:100%;height:auto;display:block;background:#0c0c1e}
.gitem.tall video{aspect-ratio:9/14;object-fit:cover}
.gitem.wide video{aspect-ratio:16/10;object-fit:cover}
.gitem img{aspect-ratio:16/10;height:auto;object-fit:cover}
.gcap{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(180deg,transparent,rgba(5,5,13,.94) 45%);display:grid;gap:8px}
.gcap .prompt{font-family:var(--mono);font-size:.74rem;color:#e6e8ff;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcap .prompt::before{content:"› ";color:var(--pink)}
.gcap .gm{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--dim);font-family:var(--mono)}
.gtag{position:absolute;top:12px;left:12px;z-index:2}
.gitem .play{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:grid;place-items:center}
.gitem .play svg{width:12px;height:12px}
.gallery-note{text-align:center;margin-top:28px}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.steps::before{content:"";position:absolute;top:52px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.6),rgba(59,130,246,.6),transparent);z-index:0}
.step{padding:30px;text-align:left}
.step .n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;background:#0b0b1c;border:1px solid var(--line-2);margin-bottom:22px;position:relative}
.step .n::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(168,85,247,.35);animation:ping2 2.6s infinite}
@keyframes ping2{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.5);opacity:0}}
.step p{color:var(--muted);font-size:.93rem;margin-top:8px}
.step .code{margin-top:18px;font-family:var(--mono);font-size:.74rem;color:#c4b5fd;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px 12px}

/* ===== NETWORK ===== */
.net{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.net-card{padding:28px}
.net-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.region{display:grid;grid-template-columns:150px 1fr 70px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.region:last-of-type{border-bottom:0}
.region .track{height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.region .track i{display:block;height:100%;width:0;background:var(--grad);border-radius:6px;transition:width 1.6s var(--ease)}
.in .region .track i{width:var(--w)}
.region b{font-family:var(--mono);font-size:.78rem;text-align:right;color:#e6e8ff}
.feed{margin-top:20px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line);padding:12px 14px;font-family:var(--mono);font-size:.74rem;color:#a5b4fc;height:92px;overflow:hidden;position:relative}
.feed-list{display:grid;gap:6px;transition:transform .6s var(--ease)}
.feed-list div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-list div span{color:#86efac}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.kpi{padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.kpi b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.kpi>span{font-size:.8rem;color:var(--muted)}

/* ===== PRICING ===== */
.pricing{display:grid;grid-template-columns:repeat(2,minmax(0,440px));gap:24px;justify-content:center;align-items:stretch}
.plan{padding:34px;display:flex;flex-direction:column}
.plan.hot{background:linear-gradient(180deg,rgba(168,85,247,.16),rgba(59,130,246,.05) 60%);box-shadow:var(--glow)}
.plan-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.plan h3{font-size:1.4rem;font-weight:800}
.plan .strike{color:var(--dim);text-decoration:line-through;font-size:.95rem;margin-top:14px}
.plan .price{font-size:3rem;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.plan .per{color:var(--muted);font-size:.9rem}
.urg{margin:18px 0;padding:12px 14px;border-radius:14px;background:rgba(255,79,184,.08);border:1px solid rgba(255,79,184,.28);font-size:.82rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.urg .countdown{font-family:var(--mono);font-weight:700;color:#fff}
.urg .slot{color:#ffc2e6;font-weight:700}
.plan ul{list-style:none;display:grid;gap:11px;margin:6px 0 28px;font-size:.92rem;color:#d6d9f5}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{flex:none;width:18px;height:18px;color:#86efac;margin-top:2px}
.plan .btn{margin-top:auto}
.plan .lifetime{font-size:.82rem;color:#bbf7d0;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);border-radius:12px;padding:10px 12px;margin-bottom:16px}
.pay-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px;color:var(--dim);font-size:.82rem;align-items:center}
.pay-row span.p{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:#d6d9f5;font-weight:600}

/* ===== WA TESTIMONIALS ===== */
.testi{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center}
.threads{display:grid;gap:12px}
.thread{display:flex;gap:14px;align-items:center;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);text-align:left;width:100%;transition:background .3s,border-color .3s,transform .4s var(--ease);position:relative;overflow:hidden}
.thread:hover{transform:translateX(4px)}
.thread.active{background:var(--grad-soft);border-color:rgba(168,85,247,.45)}
.thread .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad)}
.thread.active .prog{animation:prog var(--dur,12s) linear forwards}
@keyframes prog{to{width:100%}}
.av{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;color:#fff;font-size:1rem}
.thread .tx{flex:1;min-width:0}
.thread .tx b{display:block;font-size:.95rem}
.thread .tx small{display:block;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread .res{font-family:var(--mono);font-size:.74rem;font-weight:700;color:#86efac;white-space:nowrap}
.phone{position:relative;width:100%;max-width:380px;margin:0 auto;aspect-ratio:380/780;border-radius:54px;padding:12px;background:linear-gradient(145deg,#2a2a3e,#0d0d18);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 60px 100px -30px rgba(139,92,246,.55),inset 0 0 0 2px rgba(255,255,255,.04)}
.phone::before{content:"";position:absolute;inset:-60px;z-index:-1;background:radial-gradient(circle,rgba(255,79,184,.25),transparent 60%);filter:blur(30px)}
.screen{position:relative;height:100%;border-radius:44px;overflow:hidden;background:#0b141a;display:flex;flex-direction:column}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:110px;height:30px;border-radius:20px;background:#000;z-index:5}
.sbar{height:46px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 28px 6px;font-size:.78rem;font-weight:700;color:#fff;background:#1f2c34}
.sbar .ic{display:flex;gap:5px;align-items:center}
.sbar .ic svg{width:15px;height:15px}
.wa-head{display:flex;align-items:center;gap:10px;padding:8px 12px 10px;background:#1f2c34;color:#e9edef}
.wa-head svg{width:20px;height:20px;color:#aebac1;flex:none}
.wa-head .av{width:38px;height:38px;font-size:.85rem}
.wa-head .who{flex:1;min-width:0}
.wa-head .who b{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-head .who small{display:block;font-size:.72rem;color:#8696a0;transition:color .3s}
.wa-head .who small.typing{color:#00a884}
.wa-body{flex:1;overflow:hidden;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;background-color:#0b141a;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:16px 16px;position:relative}
.wa-day{align-self:center;font-size:.68rem;color:#8696a0;background:#182229;padding:4px 10px;border-radius:8px;margin-bottom:6px}
.msg{max-width:82%;padding:6px 9px 18px;border-radius:10px;font-size:.84rem;line-height:1.4;color:#e9edef;position:relative;animation:msgIn .45s var(--ease) both;word-wrap:break-word}
.msg.in{align-self:flex-start;background:#202c33;border-top-left-radius:2px}
.msg.out{align-self:flex-end;background:#005c4b;border-top-right-radius:2px}
.msg .t{position:absolute;right:8px;bottom:3px;font-size:.62rem;color:rgba(233,237,239,.6);display:flex;gap:3px;align-items:center}
.msg .t svg{width:15px;height:11px;color:#53bdeb}
@keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.msg.typing{padding:12px 14px;display:flex;gap:4px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:#8696a0;animation:typ 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.msg.media{padding:4px 4px 18px;width:82%}
.earn{border-radius:8px;overflow:hidden;background:#fff;color:#0f172a;font-size:.72rem}
.earn-h{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #eef0f4;font-weight:700;color:#334155}
.earn-h i{font-style:normal;font-size:.62rem;color:#64748b;font-weight:600}
.earn-b{padding:10px}
.earn-b .lbl{color:#64748b;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.earn-b .val{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin:2px 0}
.earn-b .up{color:#16a34a;font-weight:700;font-size:.68rem}
.earn-chart{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:8px}
.earn-chart i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#a855f7,#3b82f6);transform-origin:bottom;animation:grow .9s var(--ease) both}
@keyframes grow{from{transform:scaleY(0)}}
.earn-f{display:flex;justify-content:space-between;padding:7px 10px;background:#f8fafc;color:#475569;font-size:.64rem;font-weight:600}
.wa-input{display:flex;gap:8px;align-items:center;padding:8px 10px 18px;background:#0b141a}
.wa-input div{flex:1;height:38px;border-radius:20px;background:#202c33;color:#8696a0;font-size:.82rem;display:flex;align-items:center;padding:0 14px}
.wa-input span{width:40px;height:40px;border-radius:50%;background:#00a884;display:grid;place-items:center}
.wa-input svg{width:18px;height:18px;color:#fff}
.testi-note{font-size:.76rem;color:var(--dim);margin-top:18px}
.quotes{margin-top:72px}
.quote{width:360px;flex:none;padding:24px;border-radius:20px;border:1px solid var(--line);background:var(--surface);white-space:normal}
.quote p{color:#d6d9f5;font-size:.92rem}
.quote .who{display:flex;gap:12px;align-items:center;margin-top:16px}
.quote .who .av{width:38px;height:38px;font-size:.8rem}
.quote .who b{display:block;font-size:.88rem}
.quote .who small{color:var(--dim);font-size:.76rem}
.stars{color:#fbbf24;letter-spacing:2px;font-size:.85rem;margin-bottom:10px}

/* ===== FAQ ===== */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-search{margin:26px 0 20px}
.support{padding:24px;margin-top:10px}
.support .row{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.support .row .av{background:#25D366}
.support .row .av svg{width:22px;height:22px}
.qa{border:1px solid var(--line);border-radius:18px;background:var(--surface);margin-bottom:12px;transition:border-color .3s,background .3s;overflow:hidden}
.qa.open{border-color:rgba(168,85,247,.45);background:linear-gradient(180deg,rgba(168,85,247,.08),rgba(255,255,255,.02))}
.qa-q{width:100%;display:flex;gap:16px;align-items:center;padding:20px 22px;text-align:left;font-weight:700;font-size:1rem}
.qa-q .qn{font-family:var(--mono);font-size:.72rem;color:var(--dim);flex:none}
.qa-q .qt{flex:1}
.qa-q .pm{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);flex:none;position:relative;transition:transform .45s var(--ease),background .3s}
.qa-q .pm::before,.qa-q .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#fff;border-radius:2px;transform:translate(-50%,-50%)}
.qa-q .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease)}
.qa.open .pm{background:var(--grad);border-color:transparent;transform:rotate(180deg)}
.qa.open .pm::after{transform:translate(-50%,-50%) rotate(0)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-a>div{overflow:hidden}
.qa-a p{padding:0 22px 22px 54px;color:var(--muted);font-size:.94rem}
.qa.hide{display:none}
.faq-empty{display:none;color:var(--muted);padding:20px;text-align:center;border:1px dashed var(--line-2);border-radius:18px}

/* ===== CTA ===== */
.cta{position:relative;border-radius:36px;overflow:hidden;padding:84px 40px;text-align:center;isolation:isolate;border:1px solid var(--line-2);background:radial-gradient(80% 120% at 50% 0%,rgba(168,85,247,.35),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(255,79,184,.25),transparent 60%),radial-gradient(60% 80% at 100% 100%,rgba(59,130,246,.3),transparent 60%),#0a0a1a}
.cta .h2{max-width:800px;margin:18px auto}
.cta .lead{margin:0 auto 32px}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .console-body{grid-template-columns:220px 1fr}
  .console-meta{display:none}
  .float-chip.c1{left:-10px}.float-chip.c2{right:-10px}
}
@media (max-width:1024px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-a{grid-column:span 2;grid-row:auto;min-height:420px}
  .b-b,.b-c,.b-d,.b-e,.b-f{grid-column:span 1}
  .net,.testi,.faq{grid-template-columns:1fr;gap:40px}
  .faq-side{position:static}
  .metrics{grid-template-columns:1fr 1fr}
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .steps::before{display:none}
  .testi .phone{order:-1}
}
@media (max-width:760px){
  .hero{padding-top:calc(var(--nav-h) + 44px)}
  .console-body{grid-template-columns:1fr}
  .console-side{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto;gap:8px;padding:12px}
  .console-side h4,.console-side .gen{display:none}
  .mode-btn{flex:none;width:auto;padding:8px 12px 8px 8px}
  .mode-btn .mi{width:30px;height:30px}
  .mode-btn small{display:none}
  .stage-preview{min-height:220px}
  .float-chip{display:none}
  .console-bar .url{display:none}
  .console-bar{justify-content:space-between}
  .bento{grid-template-columns:1fr}
  .b-a,.b-b,.b-c,.b-d,.b-e,.b-f{grid-column:auto}
  .pricing{grid-template-columns:1fr}
  .plan{padding:26px}
  .region{grid-template-columns:110px 1fr 56px;font-size:.8rem}
  .cta{padding:60px 22px;border-radius:26px}
  .quote{width:290px}
  .qa-a p{padding-left:22px}
  .hero-trust{gap:14px 20px}
  .metric{padding:22px 16px}
  .metric .num{font-size:clamp(1.15rem,5.6vw,1.7rem)}
  .metric .delta{top:10px;right:10px}
  .phone{max-width:340px}
}

/* =================== v2.1 additions =================== */
.stage-preview::after,.scanline,.render-hud{pointer-events:none}
.scanline{display:none}
.in-ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--grad-soft);margin-right:8px;vertical-align:-4px;font-size:.7rem}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.scene.active{opacity:1;visibility:visible}

/* YouTube facade (ringan: iframe baru dimuat saat diklik) */
.yt-facade{position:absolute;inset:0;width:100%;height:100%;background:#000 var(--thumb) center/cover no-repeat;display:grid;place-items:center;cursor:pointer;overflow:hidden;border:0}
.yt-facade::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,13,.1),rgba(5,5,13,.55))}
.yt-facade.kb{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{to{background-size:112%;background-position:55% 45%}}
.yt-play{position:relative;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.4);transition:transform .35s var(--ease),box-shadow .35s}
.yt-play::after{content:"";margin-left:5px;border-left:20px solid #0b0b1a;border-top:12px solid transparent;border-bottom:12px solid transparent}
.yt-facade:hover .yt-play{transform:scale(1.08);box-shadow:0 0 0 14px rgba(168,85,247,.3),0 14px 30px rgba(0,0,0,.4)}
.yt-label{position:absolute;left:12px;top:12px;font-size:.7rem;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;letter-spacing:.04em}
.yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

/* Berita → Video flow */
.news-flow{position:absolute;inset:0;display:grid;grid-template-columns:1fr 40px 150px;align-items:center;gap:10px;padding:18px 18px 40px;background:radial-gradient(80% 80% at 20% 30%,rgba(59,130,246,.18),transparent 60%),#0b0b1c}
.news-card{background:#fff;color:#0f172a;border-radius:12px;padding:12px;font-size:.7rem;box-shadow:0 20px 40px -15px rgba(0,0,0,.6);transform:rotate(-2deg);animation:ncIn 1s var(--ease) both}
.news-card .nc-url{font-family:var(--mono);font-size:.62rem;color:#64748b;background:#f1f5f9;border-radius:6px;padding:4px 6px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-card .nc-h{font-weight:800;font-size:.82rem;line-height:1.25;margin-bottom:8px}
.news-card .nc-img{height:58px;border-radius:8px;background:linear-gradient(135deg,#f97316,#ef4444 60%,#7c2d12);margin-bottom:8px;position:relative;overflow:hidden}
.news-card .nc-img::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.15) 0 8px,transparent 8px 22px);mask:linear-gradient(transparent 55%,#000 56%);-webkit-mask:linear-gradient(transparent 55%,#000 56%)}
.news-card .ln{height:6px;border-radius:4px;background:#e2e8f0;margin-top:5px}
.news-card .ln.hl{background:linear-gradient(90deg,#c4b5fd,#f9a8d4);animation:hl 2.4s ease-in-out infinite}
@keyframes hl{50%{opacity:.4}}
@keyframes ncIn{from{opacity:0;transform:translateX(-20px) rotate(-6deg)}}
.flow-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:#c4b5fd;font-family:var(--mono);font-size:.6rem}
.flow-arrow i{width:8px;height:8px;border-radius:50%;background:var(--grad);animation:dotf 1.2s infinite}
.flow-arrow i:nth-child(2){animation-delay:.2s}.flow-arrow i:nth-child(3){animation-delay:.4s}
@keyframes dotf{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.short-phone{position:relative;width:150px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:3px solid #1f1f35;box-shadow:0 20px 50px -10px rgba(168,85,247,.5)}
.short-phone .yt-play{width:46px;height:46px}
.short-phone .yt-play::after{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}

/* Recap Film motion */
.recap{position:absolute;inset:0;background:#05050c;display:flex;flex-direction:column}
.recap-screen{position:relative;flex:1;overflow:hidden}
.rs-frame{position:absolute;inset:0;opacity:0;animation:rsFade 12s infinite}
.rs-frame:nth-child(2){animation-delay:3s}.rs-frame:nth-child(3){animation-delay:6s}.rs-frame:nth-child(4){animation-delay:9s}
@keyframes rsFade{0%{opacity:0;transform:scale(1.08)}6%,25%{opacity:1}31%,100%{opacity:0;transform:scale(1)}}
.f1{background:radial-gradient(circle at 75% 25%,#fde68a 0 4%,transparent 5%),linear-gradient(180deg,#0b1026 0%,#312e81 55%,#7c3aed 100%)}
.f1::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(#05050c,#05050c) 0 100%/100% 30% no-repeat,repeating-linear-gradient(90deg,#0b0b18 0 26px,#151530 26px 40px,#0b0b18 40px 70px,#1c1c3a 70px 84px);clip-path:polygon(0 40%,8% 40%,8% 15%,15% 15%,15% 50%,22% 50%,22% 5%,30% 5%,30% 35%,40% 35%,40% 20%,48% 20%,48% 0,55% 0,55% 30%,64% 30%,64% 12%,72% 12%,72% 45%,80% 45%,80% 25%,90% 25%,90% 40%,100% 40%,100% 100%,0 100%)}
.f2{background:radial-gradient(circle at 50% 70%,#fb923c 0 12%,transparent 13%),linear-gradient(180deg,#1e1b4b,#be185d 60%,#f97316)}
.f2::after{content:"";position:absolute;left:46%;bottom:18%;width:16px;height:52px;border-radius:8px 8px 2px 2px;background:#05050c;box-shadow:0 -14px 0 -2px #05050c;}
.f2::before{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:#05050c}
.f3{background:repeating-linear-gradient(100deg,rgba(255,255,255,.08) 0 1px,transparent 1px 14px),linear-gradient(180deg,#0c4a6e,#1e3a8a 60%,#020617)}
.f3::after{content:"";position:absolute;left:30%;bottom:0;width:40%;height:62%;background:radial-gradient(ellipse at 50% 18%,#020617 0 14%,transparent 15%),radial-gradient(ellipse at 50% 80%,#020617 0 38%,transparent 39%)}
.f4{background:radial-gradient(circle at 50% 45%,rgba(239,68,68,.6),transparent 45%),linear-gradient(135deg,#450a0a,#020617)}
.f4::after{content:"";position:absolute;inset:22% 34%;border:2px solid rgba(255,255,255,.25);border-radius:50%;box-shadow:0 0 60px rgba(239,68,68,.6),inset 0 0 40px rgba(239,68,68,.4)}
.rs-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.7));pointer-events:none}
.rs-bars::before,.rs-bars::after{content:"";position:absolute;left:0;right:0;height:9%;background:#000;z-index:2}
.rs-bars::before{top:0}.rs-bars::after{bottom:0}
.rs-title{position:absolute;top:13%;left:16px;z-index:3;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:#fde68a;background:rgba(0,0,0,.45);padding:4px 8px;border-radius:6px}
.rs-chapter{position:absolute;top:13%;right:16px;z-index:3;font-size:.62rem;font-weight:700;color:#fff;background:var(--grad);padding:4px 8px;border-radius:6px}
.rs-sub{position:absolute;left:8%;right:8%;bottom:14%;z-index:3;text-align:center;height:2.6em}
.rs-sub span{position:absolute;left:0;right:0;font-size:.82rem;font-weight:700;color:#fff;text-shadow:0 2px 6px #000;opacity:0;animation:subT 12s infinite}
.rs-sub span:nth-child(2){animation-delay:3s}.rs-sub span:nth-child(3){animation-delay:6s}.rs-sub span:nth-child(4){animation-delay:9s}
@keyframes subT{0%{opacity:0;transform:translateY(6px)}5%,24%{opacity:1;transform:none}29%,100%{opacity:0}}
.recap-strip{height:46px;border-top:1px solid var(--line);background:#0a0a14;overflow:hidden;position:relative}
.recap-strip .track{display:flex;gap:6px;padding:6px;width:max-content;animation:marquee 16s linear infinite}
.recap-strip .track i{width:58px;height:34px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.12)}
.recap-strip::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#ff4fb8;box-shadow:0 0 10px #ff4fb8}

/* Poster generator motion */
.poster-studio{position:absolute;inset:0;display:grid;grid-template-columns:1fr 150px;gap:14px;padding:16px 16px 40px;background:radial-gradient(70% 80% at 30% 40%,rgba(255,79,184,.15),transparent 60%),#0b0b1c}
.poster{position:relative;justify-self:center;height:100%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;box-shadow:0 24px 50px -12px rgba(0,0,0,.7);background:#140b2e}
.poster *{position:absolute}
.p-bg{inset:0;background:linear-gradient(180deg,#1e1b4b,#7c3aed 55%,#ff4fb8);animation:pIn 10s infinite both}
.p-sun{width:56%;aspect-ratio:1;left:22%;top:20%;border-radius:50%;background:repeating-linear-gradient(180deg,#fde68a 0 9px,#fb923c 9px 12px);clip-path:inset(0 0 40% 0);animation:pSun 10s infinite both}
.p-grid{left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,#0b0b1c),repeating-linear-gradient(90deg,rgba(56,189,248,.6) 0 1px,transparent 1px 22px),repeating-linear-gradient(180deg,rgba(56,189,248,.6) 0 1px,transparent 1px 14px);transform:perspective(200px) rotateX(55deg);transform-origin:bottom;animation:pIn 10s .2s infinite both}
.p-kicker{top:8%;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.5rem;letter-spacing:.3em;color:#fde68a;animation:pTxt 10s infinite both;animation-delay:.1s}
.p-title{left:8%;right:8%;top:47%;text-align:center;font-weight:800;line-height:.95;font-size:clamp(.95rem,2vw,1.35rem);color:#fff;text-shadow:0 0 18px rgba(255,79,184,.9),2px 2px 0 #3b82f6;letter-spacing:-.01em;animation:pTitle 10s infinite both}
.p-date{left:0;right:0;bottom:15%;text-align:center;font-size:.52rem;font-weight:700;color:#e0e7ff;letter-spacing:.12em;animation:pTxt 10s infinite both}
.p-cta{left:50%;bottom:6%;transform:translateX(-50%);font-size:.5rem;font-weight:800;color:#0b0b1a;background:#fde68a;padding:3px 8px;border-radius:999px;animation:pTxt 10s infinite both}
@keyframes pIn{0%{opacity:0}6%,92%{opacity:1}100%{opacity:0}}
@keyframes pSun{0%,8%{opacity:0;transform:translateY(30px) scale(.6)}18%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pTitle{0%,24%{opacity:0;transform:translateY(-16px) scale(1.2);filter:blur(6px)}34%,92%{opacity:1;transform:none;filter:none}100%{opacity:0}}
@keyframes pTxt{0%,40%{opacity:0;transform:translateY(8px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}
.p-cta{animation-name:pCta}
@keyframes pCta{0%,48%{opacity:0;transform:translateX(-50%) scale(.6)}56%,92%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0}}
.layers{display:flex;flex-direction:column;gap:8px;font-size:.72rem;text-align:left}
.layers h5{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--dim);margin-bottom:2px}
.layer{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.layer i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line-2);flex:none;position:relative}
.layer.on{color:#fff;border-color:rgba(168,85,247,.45)}
.layer.on i{background:var(--grad);border:0}
.layer.on i::after{content:"";position:absolute;left:4px;top:2px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sizes{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.sizes span{font-size:.6rem;padding:3px 6px;border-radius:6px;background:var(--surface-2);color:#d6d9f5}

/* Showcase spotlight */
.spotlight{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:18px}
.spot-card{padding:0;display:flex;flex-direction:column}
.spot-media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.spot-media.vertical{aspect-ratio:auto;flex:1;min-height:340px}
.spot-media.vertical .yt-facade{background-size:cover}
.spot-body{padding:18px 20px}
.spot-body h3{font-size:1.1rem;margin:8px 0 4px}
.spot-body p{color:var(--muted);font-size:.88rem}
.channel-shot{margin-bottom:28px}
.channel-shot .cs-img{position:relative;overflow:hidden;max-height:420px}
.channel-shot img{width:100%;height:auto;display:block;transition:transform 8s linear}
.channel-shot:hover img{transform:translateY(calc(-100% + 420px))}
.channel-shot .cs-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,rgba(5,5,13,.95))}
.cs-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.gcap .prompt::before{content:none}
.gitem.locked{min-height:240px;display:grid;place-items:center;text-align:center;padding:28px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px),linear-gradient(135deg,rgba(255,79,184,.15),rgba(59,130,246,.15))}
.gitem.locked .lk{width:54px;height:54px;border-radius:16px;margin:0 auto 12px;display:grid;place-items:center;background:var(--grad);box-shadow:0 10px 30px -8px rgba(168,85,247,.8);animation:pulse 3s ease-in-out infinite}
.gitem.locked .lk svg{width:24px;height:24px;color:#fff}
.gitem.locked b{display:block;font-size:1.05rem}
.gitem.locked small{color:var(--muted);font-size:.82rem}
.blur-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0 14px;filter:blur(3px);user-select:none}
.blur-chips span{font-size:.7rem;padding:4px 9px;border-radius:999px;background:var(--surface-2)}

/* Teaser ticker in hero */
.teaser{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;margin-top:22px;padding:8px 14px;border-radius:999px;border:1px dashed rgba(168,85,247,.5);font-size:.8rem;color:#d6d9f5;background:rgba(168,85,247,.06)}
.teaser b{color:#fff}
.teaser .redact{display:inline-block;width:76px;height:10px;border-radius:4px;background:linear-gradient(90deg,#3b3b5c,#5b5b8a,#3b3b5c);background-size:200% 100%;animation:shine 2s linear infinite;vertical-align:middle}

/* Na-Ruelle */
.artist{display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:center}
.vinyl-wrap{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin:0 auto}
.cover{position:absolute;inset:0 26% 0 0;border-radius:24px;overflow:hidden;z-index:2;box-shadow:0 40px 80px -25px rgba(168,85,247,.6);background:radial-gradient(circle at 30% 30%,#ff4fb8,transparent 55%),radial-gradient(circle at 75% 70%,#3b82f6,transparent 55%),linear-gradient(135deg,#1e1b4b,#7c3aed);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .ct{position:relative;z-index:1}
.cover .ct b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.4)}
.cover .ct small{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:#fde7f3}
.cover .face{position:absolute;left:50%;top:40%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.9),rgba(255,255,255,.15) 40%,transparent 70%);filter:blur(1px);opacity:.55}
.vinyl{position:absolute;top:9%;right:0;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ff4fb8 0 10%,#0b0b14 10.5% 12%,#151522 12.5%),repeating-radial-gradient(circle,#101018 0 2px,#1a1a28 2px 4px);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:spin 6s linear infinite;z-index:1}
.vinyl::after{content:"";position:absolute;inset:47%;border-radius:50%;background:#05050d}
.artist h2{margin:16px 0 12px}
.player{margin-top:26px;padding:18px 20px}
.player-top{display:flex;align-items:center;gap:14px}
.pbtn{width:48px;height:48px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex:none;box-shadow:0 10px 24px -8px rgba(255,79,184,.7)}
.pbtn svg{width:20px;height:20px;color:#fff}
.player-top .tt{flex:1;min-width:0}
.player-top .tt b{display:block}
.player-top .tt small{color:var(--muted);font-size:.8rem}
.pwave{display:flex;align-items:center;gap:3px;height:40px;margin-top:14px}
.pwave i{flex:1;border-radius:2px;background:linear-gradient(180deg,#ff4fb8,#3b82f6);animation:eq 1s ease-in-out infinite alternate;transform-origin:center}
.platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.platforms a,.platforms span.pf{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;font-size:.84rem;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.platforms a:hover{background:var(--grad-soft);border-color:rgba(168,85,247,.5);transform:translateY(-2px)}
.platforms i{width:8px;height:8px;border-radius:50%}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* FAQ chips */
.faq-cats{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.faq-cats button{padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--muted);border:1px solid var(--line-2);background:var(--surface);transition:all .25s}
.faq-cats button.active{background:#fff;color:#0b0b1a;border-color:#fff}
.faq-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:12px}
.faq-meta span{display:inline-flex;align-items:center;gap:6px}

@media (max-width:1024px){
  .artist{grid-template-columns:1fr;gap:40px}
  .spotlight{grid-template-columns:1fr}
  .spot-media.vertical{min-height:0;aspect-ratio:9/12}
}
@media (max-width:760px){
  .news-flow{grid-template-columns:1fr 24px 110px;padding:12px 12px 36px}
  .short-phone{width:110px}
  .news-card .nc-img{height:40px}
  .poster-studio{grid-template-columns:1fr;padding:12px 12px 36px}
  .layers{display:none}
  .recap-strip{height:38px}
  .vinyl-wrap{max-width:320px}
  .teaser{font-size:.72rem}
}