/* 84PAD Website 2.0.0 — visual enhancements only. Original pages and downloads untouched. */
:root{--v2-electric:#cfff54;--v2-cyan:#70f8ff;--v2-purple:#ad85ff;--v2-silver:#b3c4d5;--v2-round:clamp(15px,1.65vw,27px)}
html{scroll-behavior:smooth;scroll-padding-top:clamp(70px,6vw,105px)}
html,body{max-width:100%;min-width:320px}
body{overflow-x:clip}
/* Fluid editorial proportions on screens from phones to ultrawides. */
.header-inner,.section-wrap{width:min(1920px,calc(100% - clamp(28px,4.4vw,126px)))}
@media(min-width:1400px){.hero{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}.platform-grid,.plugin-grid{gap:clamp(18px,1.7vw,30px)}}
@media(min-width:2300px){.header-inner,.section-wrap{width:min(2300px,calc(100% - 7vw))}.hero{min-height:80svh}.hero-feature-rotator{max-width:min(690px,90%)} }
@media(max-width:1100px){.header-inner,.section-wrap{width:calc(100% - clamp(30px,5vw,64px))}}
@media(max-width:760px){.header-inner,.section-wrap{width:calc(100% - 34px)}.hero{gap:clamp(22px,4vw,45px)}.hero h1{font-size:clamp(2.8rem,10.2vw,5rem);line-height:1.02}}
@media(max-width:390px){.header-inner,.section-wrap{width:calc(100% - 28px)}}
/* Alive but restrained hero and glass editor. */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";pointer-events:none;position:absolute;inset:5% -3% 0;z-index:-1;background:radial-gradient(ellipse at 8% 12%,rgba(201,255,92,.13),transparent 38%),radial-gradient(ellipse at 86% 42%,rgba(111,248,255,.13),transparent 42%);animation:v2-breathe 9s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.28;background-image:linear-gradient(rgba(112,248,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(112,248,255,.08) 1px,transparent 1px);background-size:clamp(40px,4vw,76px) clamp(40px,4vw,76px);mask-image:linear-gradient(to bottom,transparent 6%,black 50%,transparent 96%)}
.hero h1{letter-spacing:-.072em;text-wrap:balance}
.hero h1 span{background:linear-gradient(105deg,#8b9baf 12%,#c0cfdb 32%,#9e85ff 63%,#6ab6ba 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v2-ink-flow 9s ease-in-out infinite alternate}
.hero-art{--v2-rx:1deg;--v2-ry:-4deg;perspective:1350px}
.hero-art .editor-window{transform:perspective(1300px) rotateX(var(--v2-rx)) rotateY(var(--v2-ry));transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease;will-change:transform}
.hero-art:hover .editor-window{box-shadow:0 42px 95px rgba(49,77,108,.22),0 0 65px rgba(124,247,250,.12)}
.floating-note{animation:v2-float 6.4s ease-in-out infinite}
.floating-note.note-bottom{animation-delay:-2.8s}
.hero-feature-rotator{box-shadow:0 22px 55px rgba(20,49,62,.14),0 0 0 1px rgba(148,255,230,.07)}
.hero-feature-rotator::after{content:"";position:absolute;inset:-120%;pointer-events:none;background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.18) 50%,transparent 56%);transform:translateX(-70%) rotate(-10deg);animation:v2-sheen 10s ease-in-out infinite}
.hero-feature-slide{transition-duration:.42s}
.hero-feature-dots button.is-active{box-shadow:0 0 0 4px rgba(190,252,104,.17),0 0 18px rgba(156,247,98,.4)}
/* Glass accents, magnetic focus and dynamic hover light: preserve existing component structure. */
.platform-card,.plugin-card,.theme-card,.setup-card,.switch-card,.parmtech-card,.assembly-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--v2-round);--v2-px:50%;--v2-py:50%}
.platform-card::after,.plugin-card::after,.theme-card::after,.setup-card::after,.switch-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:1;background:radial-gradient(400px circle at var(--v2-px) var(--v2-py),rgba(105,242,255,.22),transparent 55%);transition:opacity .27s ease}
.platform-card:hover::after,.plugin-card:hover::after,.theme-card:hover::after,.setup-card:hover::after,.switch-card:hover::after{opacity:1}
@media(hover:hover) and (pointer:fine){.platform-card:hover,.theme-card:hover,.plugin-card:hover,.setup-card:hover,.switch-card:hover{transform:translateY(-9px);border-color:color-mix(in srgb,var(--v2-cyan) 52%,var(--v2-electric));box-shadow:0 30px 58px rgba(13,30,49,.22),0 0 35px rgba(116,240,255,.12)}.plugin-card:hover img,.theme-card:hover img{transform:scale(1.055)}}
.button,.plugin-download-link,.hero-actions a,.demo-nav-link,.theme-toggle,.plugin-card-actions button{position:relative;overflow:hidden;isolation:isolate}
.button::after,.plugin-download-link::after,.hero-actions a::after,.demo-nav-link::after{content:"";position:absolute;pointer-events:none;inset:-2px;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.37) 50%,transparent 68%);transform:translateX(-160%);transition:transform .72s cubic-bezier(.2,.7,.25,1);z-index:1}
.button:hover::after,.plugin-download-link:hover::after,.hero-actions a:hover::after,.demo-nav-link:hover::after{transform:translateX(160%)}
:where(a,button,summary,input):focus-visible{outline:3px solid var(--v2-cyan);outline-offset:4px}
/* Scroll assembly story — visually independent from the content and links around it. */
.v2-story{position:relative;height:clamp(1380px,248svh,2500px);background:#080f1a;color:#edf9ff;isolation:isolate;overflow:clip}
.v2-story-sticky{position:sticky;top:0;height:100svh;min-height:630px;overflow:hidden;display:grid;place-items:center}
.v2-story-backdrop{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,rgba(21,41,69,.86),transparent 66%),radial-gradient(ellipse at 5% 90%,rgba(109,58,174,.24),transparent 35%),radial-gradient(ellipse at 95% 5%,rgba(44,197,197,.2),transparent 34%),#080f1a}
.v2-story-backdrop::before{content:"";position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(125,185,201,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(125,185,201,.12) 1px,transparent 1px);background-size:57px 57px;mask-image:radial-gradient(ellipse at center,#000,transparent 73%)}
.v2-orbit-ring{position:absolute;left:50%;top:52%;border:1px solid rgba(94,188,227,.13);border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 60px rgba(102,221,245,.025)}
.v2-ring-a{width:min(96vw,960px);aspect-ratio:1;animation:v2-spin 45s linear infinite}
.v2-ring-b{width:min(70vw,670px);aspect-ratio:1;border-style:dashed;border-color:rgba(174,137,255,.2);animation:v2-spin 60s linear infinite reverse}
.v2-grid-light{position:absolute;width:35vw;height:35vw;left:30%;top:30%;border-radius:50%;background:radial-gradient(circle,rgba(84,225,239,.16),transparent 68%);filter:blur(34px);animation:v2-breathe 6s ease-in-out infinite alternate}
.v2-story-inner{position:relative;width:min(1640px,calc(100% - clamp(36px,6vw,120px)));height:min(100%,1000px);padding:clamp(32px,3.5vh,57px) 0 clamp(26px,3.6vh,46px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.6vh,20px)}
.v2-story-titlebar{display:flex;align-items:end;justify-content:space-between;gap:32px}
.v2-kicker,.v2-experience-tag,.v2-story-intro,.v2-story-core span,.v2-story-core small,.v2-story-module small,.v2-story-module span,.v2-stage-caption,.v2-story-steps{font-family:var(--mono,monospace)}
.v2-kicker{display:flex;align-items:center;gap:9px;color:var(--v2-cyan);font-size:clamp(.6rem,.7vw,.79rem);letter-spacing:.14em;margin:0 0 12px}
.v2-status-dot{width:8px;height:8px;border-radius:50%;background:#caff5b;box-shadow:0 0 18px rgba(202,255,91,.8);animation:v2-led 2.5s ease-in-out infinite}
.v2-story-titlebar h2{font-family:var(--font,system-ui);font-weight:800;line-height:.97;letter-spacing:-.068em;font-size:clamp(2.6rem,4.5vw,5.8rem);margin:0;text-wrap:balance}
.v2-story-titlebar h2 span{background:linear-gradient(100deg,#8efbff,#bbabff 61%,#d9ff86);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2-story-intro{max-width:330px;color:#a9bdca;font-size:clamp(.72rem,.82vw,.95rem);line-height:1.8}
.v2-story-intro p{margin:0 0 10px}
.v2-experience-tag{display:inline-flex;font-size:.63rem;letter-spacing:.06em;color:#dbffa4;border:1px solid rgba(198,255,153,.2);padding:6px 10px;border-radius:99px}
.v2-story-stage{position:relative;min-height:240px;width:min(100%,1040px);margin:auto;perspective:1000px}
.v2-story-stage::before{content:"";position:absolute;inset:6% 22%;border-radius:50%;background:radial-gradient(ellipse,rgba(94,226,232,.19),transparent 67%);filter:blur(28px)}
.v2-story-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--v2-core-scale,1));width:clamp(205px,18vw,270px);min-height:116px;display:flex;align-items:center;gap:16px;padding:18px;border:1px solid rgba(136,246,255,.6);border-radius:24px;z-index:4;background:linear-gradient(125deg,rgba(25,49,67,.96),rgba(12,22,37,.96));box-shadow:0 0 0 10px rgba(111,253,255,.035),0 0 95px rgba(66,211,241,.22),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(17px)}
.v2-core-glyph{flex:none;width:60px;height:60px;display:grid;place-items:center;border-radius:17px;background:#cfff54;color:#182111;font:900 1.7rem var(--font,system-ui);box-shadow:0 0 30px rgba(207,255,84,.23)}
.v2-story-core div:nth-child(2){min-width:0}.v2-story-core strong{display:block;font-size:clamp(.83rem,1.05vw,1.08rem);line-height:1.5;letter-spacing:-.02em;white-space:nowrap}
.v2-story-core span,.v2-story-core small{display:block;font-size:.5rem;letter-spacing:.08em;color:#a1b7cc;white-space:nowrap}
.v2-core-orbit{position:absolute;inset:-12px;border-radius:31px;border:1px dashed rgba(112,248,255,.26);pointer-events:none}
.v2-story-module{position:absolute;left:50%;top:50%;z-index:3;display:flex;align-items:center;gap:11px;width:clamp(164px,15.8vw,228px);min-height:80px;padding:12px;border-radius:17px;border:1px solid rgba(144,186,213,.3);background:linear-gradient(135deg,rgba(30,47,69,.96),rgba(15,27,43,.92));backdrop-filter:blur(13px);box-shadow:0 17px 40px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.09);transform:translate(-50%,-50%) translate(var(--v2-pos-x,var(--v2-home-x,0px)),var(--v2-pos-y,var(--v2-home-y,0px))) rotate(var(--v2-rot,0deg)) scale(var(--v2-scale,1));opacity:var(--v2-opacity,1);will-change:transform,opacity}
.v2-module-icon{width:39px;height:39px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;background:rgba(134,230,255,.11);color:var(--v2-cyan)}
.v2-module-pages .v2-module-icon{color:#c5afff;background:rgba(167,113,255,.15)}
.v2-module-plugins .v2-module-icon{color:#d2fa81;background:rgba(197,246,91,.13)}
.v2-module-themes .v2-module-icon{color:#ffb4c6;background:rgba(250,127,173,.12)}
.v2-story-module div{min-width:0}.v2-story-module small{display:block;color:#8ca5b5;font-size:.48rem;letter-spacing:.06em}
.v2-story-module strong{display:block;font-weight:800;font-size:clamp(.69rem,.78vw,.89rem);white-space:nowrap;margin:5px 0 2px;letter-spacing:-.03em}
.v2-story-module div>span{display:block;color:#a5b9c6;font-size:.51rem;white-space:nowrap}
.v2-module-builder{--v2-home-x:-295px;--v2-home-y:-92px}
.v2-module-pages{--v2-home-x:295px;--v2-home-y:-92px}
.v2-module-plugins{--v2-home-x:-295px;--v2-home-y:94px}
.v2-module-themes{--v2-home-x:295px;--v2-home-y:94px}
.v2-story-beam{position:absolute;left:50%;top:50%;height:1px;width:clamp(170px,20vw,320px);transform-origin:left center;background:linear-gradient(90deg,rgba(119,253,255,.7),rgba(125,199,255,0));opacity:var(--v2-beam-opacity,0);z-index:1;filter:drop-shadow(0 0 7px #7af7ff)}
.v2-beam-a{transform:rotate(-163deg)}.v2-beam-b{transform:rotate(-17deg)}.v2-beam-c{transform:rotate(163deg)}.v2-beam-d{transform:rotate(17deg)}
.v2-stage-caption{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:.6rem;letter-spacing:.12em;color:#91a5b7}
.v2-stage-caption strong{color:var(--v2-cyan);font-size:.82rem}
.v2-story-footer{display:grid;gap:12px}
.v2-story-steps{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v2-story-steps button{appearance:none;cursor:pointer;display:inline-flex;gap:11px;align-items:center;color:#91a6bb;background:none;border:0;padding:9px 10px;border-radius:11px;font:600 clamp(.65rem,.74vw,.8rem) var(--font,system-ui);transition:background .25s,color .25s,transform .25s}
.v2-story-steps button:hover,.v2-story-steps button[aria-pressed="true"]{color:#fff;background:rgba(96,225,245,.1);transform:translateY(-2px)}
.v2-story-steps button i{font:600 .6rem var(--mono,monospace);font-style:normal;color:var(--v2-cyan)}
.v2-story-progress{height:3px;border-radius:999px;overflow:hidden;background:rgba(121,200,227,.2)}
.v2-story-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#cfff54,#72f9ff 55%,#bb8dff);transform-origin:left;transform:scaleX(var(--v2-progress,0));box-shadow:0 0 14px rgba(104,245,252,.6)}
/* Refine the original assembly montage, staggered reveals, stronger highlights. */
.assembly-stage{box-shadow:0 20px 65px rgba(21,46,65,.14)}
.assembly-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(112,248,255,.095),transparent 60%)}
.assembly-stage.is-assembled .assembly-hub{box-shadow:0 0 0 12px rgba(174,137,255,.05),0 0 65px rgba(98,236,255,.18);transition:box-shadow .7s ease}
.guided-step{transition:transform .5s cubic-bezier(.17,.8,.26,1),opacity .5s,border-color .25s,box-shadow .25s}
.guided-flow.is-assembled .guided-step{animation:v2-stage-arrive .7s both;animation-delay:calc(var(--v2-order,0)*95ms)}
.guided-flow .guided-step:nth-child(1){--v2-order:0}.guided-flow .guided-step:nth-child(2){--v2-order:1}.guided-flow .guided-step:nth-child(3){--v2-order:2}.guided-flow .guided-step:nth-child(4){--v2-order:3}.guided-flow .guided-step:nth-child(5){--v2-order:4}
.motion-ready [data-reveal]{transition:opacity .7s ease,transform .8s cubic-bezier(.18,.75,.2,1);transition-delay:calc(var(--reveal-index,0)*70ms)}
/* Smooth, non-overlapping breakpoints for portrait tablets and narrow mobiles. */
@media(max-width:1000px){.v2-story-inner{width:calc(100% - 50px)}.v2-story-titlebar h2{font-size:clamp(2.6rem,6.2vw,4.1rem)}.v2-module-builder{--v2-home-x:-225px}.v2-module-plugins{--v2-home-x:-225px}.v2-module-pages{--v2-home-x:225px}.v2-module-themes{--v2-home-x:225px}.v2-story-module{width:180px}.v2-story-core{width:215px}}
@media(max-width:700px){.v2-story{height:220svh;min-height:1330px}.v2-story-sticky{min-height:600px}.v2-story-inner{width:calc(100% - 32px);gap:6px;padding:clamp(22px,4svh,32px) 0 23px}.v2-story-titlebar{display:block}.v2-story-titlebar h2{font-size:clamp(2.65rem,10vw,4.3rem)}.v2-kicker{margin-bottom:8px}.v2-story-intro{max-width:none;margin-top:12px;font-size:.72rem;line-height:1.55}.v2-story-intro p{max-width:400px}.v2-experience-tag{display:none}.v2-story-stage{height:auto;min-height:345px;max-height:425px}.v2-story-core{width:194px;min-height:88px;padding:12px;gap:10px;border-radius:19px}.v2-core-glyph{width:43px;height:43px;font-size:1.22rem;border-radius:12px}.v2-story-core strong{font-size:.74rem}.v2-story-core span,.v2-story-core small{font-size:.43rem}.v2-story-module{width:148px;min-height:64px;padding:9px;gap:7px;border-radius:13px}.v2-module-icon{width:29px;height:29px;border-radius:9px;font-size:1rem}.v2-story-module strong{font-size:.63rem}.v2-story-module small,.v2-story-module div>span{font-size:.39rem}.v2-module-builder{--v2-home-x:-96px;--v2-home-y:-118px}.v2-module-pages{--v2-home-x:96px;--v2-home-y:-118px}.v2-module-plugins{--v2-home-x:-96px;--v2-home-y:121px}.v2-module-themes{--v2-home-x:96px;--v2-home-y:121px}.v2-story-beam{width:170px}.v2-stage-caption{bottom:1px;font-size:.48rem}.v2-story-steps{gap:0}.v2-story-steps button{padding:7px 5px;gap:5px;font-size:.57rem}.v2-story-steps button i{font-size:.47rem}.v2-ring-a{width:130vw}.v2-ring-b{width:95vw}.floating-note{animation-duration:7.7s}}
@media(max-width:375px){.v2-story-module{width:138px}.v2-module-builder,.v2-module-plugins{--v2-home-x:-89px}.v2-module-pages,.v2-module-themes{--v2-home-x:89px}.v2-story-titlebar h2{font-size:2.48rem}}
@media(max-height:620px) and (min-width:701px){.v2-story-inner{padding:18px 0}.v2-story-titlebar h2{font-size:clamp(2rem,4vw,3rem)}.v2-story-stage{min-height:185px}.v2-story-module{min-height:65px}.v2-story-footer{gap:4px}}
@media (hover:none), (pointer:coarse){.v2-story-module{will-change:auto}.hero-art .editor-window{will-change:auto}.platform-card::after,.plugin-card::after,.theme-card::after,.setup-card::after,.switch-card::after{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero::before,.hero h1 span,.v2-ring-a,.v2-ring-b,.v2-grid-light,.v2-status-dot,.floating-note,.hero-feature-rotator::after{animation:none!important}.hero-art .editor-window{transform:none!important}.v2-story-module{will-change:auto;transition:none!important}.v2-story-progress span{transition:none}.guided-flow.is-assembled .guided-step{animation:none!important}.v2-story-steps button{transition:none!important}}
@keyframes v2-breathe{from{opacity:.45;transform:scale(.96)}to{opacity:1;transform:scale(1.045)}}
@keyframes v2-float{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes v2-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes v2-ink-flow{from{background-position:0 0}to{background-position:100% 0}}
@keyframes v2-led{50%{box-shadow:0 0 2px rgba(202,255,91,.15);opacity:.55}}
@keyframes v2-sheen{0%,65%{transform:translateX(-160%) rotate(-10deg)}100%{transform:translateX(160%) rotate(-10deg)}}
@keyframes v2-stage-arrive{from{opacity:.42;translate:0 22px}to{opacity:1;translate:0 0}}

@media(max-height:650px) and (max-width:700px){.v2-story-sticky{min-height:0;height:100svh}.v2-story-inner{padding:12px 0}.v2-story-titlebar h2{font-size:clamp(2rem,7vw,2.8rem)}.v2-story-intro{display:none}.v2-story-stage{min-height:270px}.v2-story-steps button{font-size:.53rem}}