/* Parallax 0.2 Alpha homepage. Layered on style.css (shared with the account and privacy pages). */
.v2{--bg:#0b0f1f;--night:#10162b;--panel:#151c34;--panel-2:#1b2340;--line:#262f52;--mint:#79e2c3;--gold:#f2c14e;--frost:#7cc4ff;--fel:#a330c9;--blood:#e0566b;--text:#eef1fb;--muted:#a3abc8;background:var(--bg)}
.v2 .header{border-bottom:0;height:84px;position:relative;z-index:3}
.v2 .brand .badge{display:none}
.v2 nav .button.primary{color:#0c231d}
.button.ghost{background:#ffffff08;border-color:#3a4570;color:var(--text)}
.button.ghost:hover{background:#ffffff14}

/* ---------- Header slider ---------- */
.hero-slider{position:relative;margin-top:-84px;padding-top:84px;overflow:hidden;isolation:isolate}
.hs-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 70% at 78% 40%,color-mix(in srgb,var(--accent,#79e2c3) 22%,transparent),transparent 70%),
  radial-gradient(50% 60% at 8% 100%,#3a2a8a33,transparent 70%),
  linear-gradient(180deg,#0e1430,var(--bg));transition:background .8s}
.hs-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff07 1px,transparent 1px) 0 0/80px 80px,linear-gradient(0deg,#ffffff05 1px,transparent 1px) 0 0/80px 80px;mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent)}
.hero-slider[data-active="0"]{--accent:#79e2c3}.hero-slider[data-active="1"]{--accent:#7cc4ff}.hero-slider[data-active="2"]{--accent:#f2c14e}.hero-slider[data-active="3"]{--accent:#a37cff}
.hs-track{display:grid;min-height:600px}
.hs-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:56px 0 40px;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.hs-slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease}
.hs-copy>*{transform:translateY(14px);opacity:0;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s}
.hs-slide.is-active .hs-copy>*{transform:none;opacity:1}
.hs-slide.is-active .hs-copy>:nth-child(2){transition-delay:.06s}.hs-slide.is-active .hs-copy>:nth-child(3){transition-delay:.12s}.hs-slide.is-active .hs-copy>:nth-child(4){transition-delay:.18s}
.hs-kicker{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--muted)}
.alpha-chip,.new-chip{display:inline-block;font-weight:600;font-size:13px;color:#1c1405;background:var(--gold);border-radius:999px;padding:3px 10px}
.v2 .hs-copy h1,.v2 .hs-copy .h1{font-family:Barlow,Impact,sans-serif;font-weight:600;line-height:.98;font-size:clamp(52px,5.6vw,84px);letter-spacing:-1.5px;margin:22px 0 22px}
.hs-copy .lede{font-size:19px;line-height:1.6;color:var(--muted);max-width:30em}
.hs-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hs-scene{position:relative;background:linear-gradient(180deg,#19203c,#121831);border:1px solid #2e3866;border-radius:16px;padding:20px;box-shadow:0 40px 100px #0009,0 0 0 1px #ffffff08 inset,0 0 80px color-mix(in srgb,var(--accent,#79e2c3) 18%,transparent);transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);transition:transform .8s}
.hs-slide.is-active .hs-scene{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}
.scene-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.scene-head strong{font-family:Barlow;font-size:24px;font-weight:600}
.scene-head span{font-size:13px;color:var(--muted)}
.hs-nav{display:flex;gap:10px;align-items:center;padding:8px 0 56px}
.hs-nav [role=tab]{position:relative;flex:1;max-width:220px;text-align:left;background:none;border:0;border-top:2px solid #2a3360;padding:12px 0 0;font-size:15px;color:var(--muted)}
.hs-nav [role=tab] .fill{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--accent,#79e2c3)}
.hs-nav [role=tab][aria-selected=true]{color:var(--text)}
.hs-nav [role=tab][aria-selected=true] .fill{animation:hs-fill var(--hs-ms,7000ms) linear forwards}
.hero-slider.paused .hs-nav [role=tab][aria-selected=true] .fill{animation-play-state:paused}
.hero-slider.static .hs-nav [role=tab][aria-selected=true] .fill{animation:none;width:100%}
@keyframes hs-fill{to{width:100%}}
.hs-pause{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid #3a4570;background:#ffffff08;display:grid;place-items:center}
.hs-pause span{width:10px;height:12px;border-inline:3px solid var(--text)}
.hs-pause[aria-pressed=true] span{width:0;height:0;border:0;border-left:11px solid var(--text);border-block:7px solid transparent;margin-left:3px}

/* Scene 1: raid frames */
.scene-head .count{font:600 15px Source;color:var(--mint)}
.rf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rf{position:relative;height:50px;border-radius:6px;background:#0c1124;border:1px solid #ffffff12;overflow:hidden;padding:6px 8px;display:flex;align-items:flex-start;gap:6px}
.rf::before{content:"";position:absolute;inset:0;width:var(--hp,90%);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#000),color-mix(in srgb,var(--c) 40%,#000));opacity:.85}
.rf b{position:relative;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 2px #000}
.rf i{position:absolute;left:0;right:0;bottom:0;height:4px;background:#000a}
.rf i::after{content:"";position:absolute;inset:0;width:var(--hp);background:#5ce07a}
.rf .role{position:relative;width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:#ffffff99}
.rf .role.tank{background:#7cc4ff}.rf .role.heal{background:#5ce07a}.rf .role.dps{background:#e0566b}
.hs-slide.is-active .rf{animation:rf-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes rf-in{from{opacity:0;transform:translateY(10px) scale(.96)}}
.rf.swap{animation:rf-swap 1.1s ease!important}
@keyframes rf-swap{40%{transform:rotateX(90deg)}60%{transform:rotateX(90deg)}}

/* Scene 2: cooldown timeline with a sweeping playhead */
.tl-scale{display:flex;justify-content:space-between;margin-left:80px;font:12px Plex,monospace;color:#8f98bd;padding-bottom:6px}
.tl-body{position:relative}
.tlr{display:flex;align-items:center;height:38px;border-top:1px solid #ffffff0d}
.tlr b{width:80px;flex:none;font-size:14px;font-weight:600;color:var(--c,#cdd3ee)}
.tlr.boss b{color:#f08a97}
.tlr .tr{position:relative;flex:1;height:100%;background:linear-gradient(90deg,#ffffff0d 1px,transparent 1px) 0 0/25% 100%}
.tlr span{position:absolute;top:7px;left:var(--x);width:var(--w);height:24px;line-height:22px;border-radius:6px;padding:0 7px;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .25s,box-shadow .25s,color .25s}
.tlr.boss span{background:#e0566b1f;border:1px solid #e0566b66;color:#ffc5cd}
.tlr.boss.alt span{background:#7cc4ff1a;border-color:#7cc4ff66;color:#cfe8ff}
.tlr.cd span{background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);color:#eef1fb}
.tlr span.on{box-shadow:0 0 18px color-mix(in srgb,var(--c,#e0566b) 70%,transparent);background:color-mix(in srgb,var(--c,#e0566b) 45%,#0b0f1f)}
.tlr.boss span.on{--c:#e0566b}.tlr.boss.alt span.on{--c:#7cc4ff}
.playhead{position:absolute;top:-4px;bottom:0;left:calc(80px + (100% - 80px) * var(--p,0));width:2px;background:var(--accent);box-shadow:0 0 16px var(--accent)}
.playhead em{position:absolute;top:-22px;left:-18px;font:600 11px Plex,monospace;font-style:normal;color:#0b0f1f;background:var(--accent);border-radius:4px;padding:2px 5px}

/* Scene 3: assignments */
.scene-asg{display:grid;gap:14px}
.mech{background:#0f1530;border:1px solid #2e3866;border-radius:12px;padding:16px}
.mech-top{display:flex;align-items:center;gap:12px}
.mech-top strong{display:block;font-size:17px}
.mech-top small{font-size:13px;color:var(--muted)}
.mech-top .seats{margin-left:auto;font-size:14px;color:var(--gold);font-weight:600}
.spell{width:40px;height:40px;border-radius:8px;flex:none;border:2px solid #ffffff30}
.spell.frost{background:radial-gradient(circle at 35% 35%,#e8f6ff,#7cc4ff 35%,#2b4aa8 75%)}
.spell.gold{background:radial-gradient(circle at 40% 35%,#fff6c9,#f2c14e 40%,#a8621b 80%)}
.seat-row{display:flex;gap:10px;margin-top:14px}
.seat{flex:1;text-align:center;border:1.5px dashed #f2c14e88;border-radius:8px;padding:9px 0;font-size:14px;font-weight:600;color:transparent;position:relative}
.seat::before{content:"+ choose";position:absolute;inset:0;display:grid;place-items:center;color:#f2c14ecc;font-weight:500}
.seat.filled{border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 22%,transparent);color:#fff;animation:seat-in .45s cubic-bezier(.2,.9,.3,1.4)}
.seat.filled::before{content:none}
@keyframes seat-in{from{transform:translateY(-14px) scale(.9);opacity:0}}
.pi-row{display:flex;align-items:center;gap:12px;margin-top:14px}
.pi-row .who{padding:8px 14px;border-radius:8px;border:1px solid var(--c);color:var(--c);font-weight:600;font-size:14px;background:#0b0f1f}
.pi-row .beam{flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent) 0 0/40% 100% no-repeat,#f2c14e33;animation:beam 1.6s linear infinite}
@keyframes beam{from{background-position:-40% 0}to{background-position:140% 0}}
.pi-row .tgt{box-shadow:0 0 0 0 #f2c14e;animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 18px 2px #f2c14eaa}}

/* Scene 4: note typing out */
.fmt{font-size:13px}.fmt b{color:#0b0f1f;background:var(--mint);border-radius:5px;padding:2px 7px;margin-right:6px}
.note{margin:0;height:208px;overflow:hidden;background:#0a0e1d;border:1px solid #2e3866;border-radius:10px;padding:14px 16px;font:13px/1.7 Plex,monospace;color:#cfe3ff;white-space:pre-wrap;word-break:break-all}
.note .caret{display:inline-block;width:8px;height:15px;background:var(--accent);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.copied{position:absolute;right:20px;bottom:-16px;background:var(--mint);color:#0c231d;font-weight:600;font-size:14px;border-radius:999px;padding:9px 16px;box-shadow:0 10px 30px #0008;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.copied.show{opacity:1;transform:none}

/* ---------- Below the slider ---------- */
.v2-shots{padding:80px 0 40px}
.v2-section-head{max-width:720px;margin-bottom:26px}
.v2-section-head h2,.v2-band h2,.v2-review h2,.v2 .download h2,.v2 .questions h2{font-size:clamp(40px,4.4vw,60px);letter-spacing:-.6px;line-height:1.02}
.v2-section-head p,.v2-band p,.v2-review p{margin-top:16px;color:var(--muted);font-size:19px;line-height:1.6}
.v2 .gallery-tabs{padding:0;margin-bottom:18px;gap:10px}
.v2 .gallery-tabs button{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border-color:#2e3866;background:var(--night);color:var(--muted)}
.v2 .gallery-tabs button span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#232c52;font-size:12px;font-weight:600}
.v2 .gallery-tabs button[aria-selected=true]{background:#1d2a4f;border-color:#4b5ea8;color:var(--text)}
.v2 .gallery-tabs button[aria-selected=true] span{background:var(--mint);color:#0b0f1f}
.v2-frame{display:block!important;margin:0;border:1px solid #2e3866;border-radius:14px;background:#0d1226;overflow:hidden;box-shadow:0 50px 120px #000a}
.v2-frame-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#141a33;border-bottom:1px solid #262f52;font-size:12px;color:#8f98bd}
.v2-frame-bar i{width:10px;height:10px;border-radius:50%;background:#2c3561}
.v2-frame-bar span{margin-left:8px}
.v2-frame img{display:block;width:100%;height:auto;border:0;border-radius:0}
#product-screenshot{transition:opacity .25s}
#product-screenshot.swapping{opacity:0}
.v2-frame figcaption{padding:12px 16px;font-size:14px;border-top:1px solid #1d2546;background:#10162b}

.v2-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:40px 0 110px;border-top:1px solid #1d2546;margin-top:40px}
.v2-features article{padding:26px 26px 0 0;border:0;background:none}
.v2-features article+article{padding-left:26px;border-left:1px solid #1d2546}
.v2-features .ico{display:block;width:34px;height:4px;border-radius:2px;padding:0;font-size:0;background:var(--c,#79e2c3);margin-bottom:22px}
.v2-features article:nth-child(1){--c:#79e2c3}.v2-features article:nth-child(2){--c:#7cc4ff}.v2-features article:nth-child(3){--c:#f2c14e}.v2-features article:nth-child(4){--c:#a37cff}
.v2-features h3{font-size:28px;margin:0 0 10px}
.v2-features p{font-size:16px;line-height:1.6;color:var(--muted)}

.v2-band{background:linear-gradient(180deg,#10162b,#0d1226);border-block:1px solid #1d2546;padding:100px 0}
.v2-band-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.v2-band h2{margin-top:16px}
.ticks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:16px;color:#cfd5ee}
.ticks li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#1d3b39;color:var(--mint);font-size:12px;display:grid;place-items:center}
.sync-orbit{position:relative;aspect-ratio:400/340;max-width:480px;width:100%;justify-self:center}
.sync-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sync-lines path{stroke:#3a4570;stroke-width:2;stroke-dasharray:4 6;fill:none}
.sync-lines .pkt{fill:var(--mint);filter:drop-shadow(0 0 6px #79e2c3)}
.sync-orbit .node{position:absolute;transform:translate(-50%,-50%);padding:10px 16px;border-radius:999px;background:#151c34;border:1px solid var(--c);color:var(--c);white-space:nowrap;box-shadow:0 0 30px color-mix(in srgb,var(--c) 25%,transparent)}
.sync-orbit .node b{font-weight:600;font-size:15px}
.node.gm{left:17.5%;top:17.6%}.node.of{left:82.5%;top:17.6%}.node.rl{left:50%;top:88%}
.plan-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62%;text-align:center;padding:18px;border-radius:14px;background:#13263a;border:1px solid #3f7766;box-shadow:0 0 50px #79e2c322}
.plan-core strong{display:block;font-family:Barlow;font-size:24px;font-weight:600}
.plan-core small{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--muted)}
.plan-core small i{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px #79e2c300,0 0 12px #79e2c3}}

.v2-review{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:center;padding:110px 0 40px}
.v2 .download{padding-top:110px}
.v2 .download h2{margin-top:0}
.v2 .download-card{background:linear-gradient(180deg,#1b2340,#151c34);border-color:#4b5ea8;box-shadow:0 40px 90px #0009}
.pill.alpha{color:#1c1405!important;background:var(--gold);border-color:var(--gold)!important;font-weight:600}
.v2 .questions h2{margin-top:0}
.v2 .faq-list details{border-color:#262f52}
.v2 footer{border-top-color:#1d2546}

@media(max-width:1100px){
.hs-slide{grid-template-columns:1fr;gap:36px;padding-top:40px}
.hs-track{min-height:0}
.hs-scene{transform:none!important}
.v2-features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
.v2-features article:nth-child(3){padding-left:0;border-left:0}
.v2-band-inner,.v2-review{grid-template-columns:1fr;gap:44px}
}
@media(max-width:800px){
.v2 .wrap{width:calc(100% - 32px)}
.v2 .hs-copy h1,.v2 .hs-copy .h1{font-size:46px;letter-spacing:-.5px}
.hs-copy .lede{font-size:17px}
.rf-grid{grid-template-columns:repeat(4,1fr)}
.rf:nth-child(n+17){display:none}
.tl-scale{margin-left:56px}.tlr b{width:56px;font-size:12px}.playhead{left:calc(56px + (100% - 56px) * var(--p,0))}
.tlr span{font-size:10px;padding:0 4px}
.hs-nav [role=tab]{font-size:13px}
.v2-band{padding:70px 0}
}
@media(max-width:540px){
.v2-features{grid-template-columns:1fr}
.v2-features article,.v2-features article+article{padding:22px 0 0;border:0}
.hs-cta .button{width:100%}
.hs-nav{gap:6px}
.hs-nav [role=tab]{font-size:12px}
.hs-kicker{flex-wrap:wrap}
.note{font-size:11px;height:190px}
.v2 .gallery-tabs button{padding:8px 12px;font-size:13px}
.v2-frame figcaption .subtle{display:none}
.sync-orbit .node{padding:7px 10px}.sync-orbit .node b{font-size:12px}
.plan-core{width:70%;padding:12px}.plan-core strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
.hs-slide,.hs-copy>*,.hs-scene,.rf,.seat.filled,.copied{transition:none!important;animation:none!important}
.pi-row .beam,.pi-row .tgt,.plan-core small i,.note .caret{animation:none}
.sync-lines .pkt{display:none}
}