
/* Magna V8 — cinematic, accessible hero. Scoped so inner pages remain unchanged. */
.hero{overflow:hidden}
.hero .hero-grid{gap:clamp(30px,4vw,60px);grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);min-height:700px;padding-top:28px;padding-bottom:30px}
.hero-copy{animation:v8CopyIn .85s cubic-bezier(.2,.7,.25,1) both}
.hero-visual-v8{min-width:0;height:min(590px,44vw);min-height:470px;display:flex;align-items:center;justify-content:center;perspective:none;isolation:isolate}
.showcase-glow{pointer-events:none;position:absolute;width:110%;height:93%;border-radius:50%;background:radial-gradient(ellipse at 55% 50%,rgba(59,102,255,.3),transparent 61%);filter:blur(28px);z-index:0;animation:v8Glow 8s ease-in-out infinite alternate}
.showcase-shell{position:relative;z-index:1;width:min(100%,610px);height:100%;max-height:550px;min-height:455px;border:1px solid rgba(124,160,255,.27);border-radius:25px;background:#0e1529;box-shadow:0 30px 80px rgba(0,0,0,.36),0 0 65px rgba(51,85,255,.095);overflow:hidden;transform:translateZ(0);animation:v8PanelIn 1s cubic-bezier(.2,.7,.25,1) both}
.showcase-shell:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.07),transparent 18%,transparent 85%,rgba(58,99,243,.08));z-index:5}
.showcase-topbar{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(151,180,255,.14);background:rgba(11,17,34,.91);position:relative;z-index:6}
.showcase-brand,.showcase-edition{font-size:9px;letter-spacing:.16em;font-weight:800;color:#a7b9df;white-space:nowrap}
.showcase-brand{display:flex;align-items:center;gap:8px}
.showcase-brand i{width:7px;height:7px;border-radius:50%;background:#52dec3;box-shadow:0 0 11px #39cfc1}
.showcase-edition{color:#64779d}
.showcase-slides{position:absolute;inset:43px 0 53px;overflow:hidden}
.showcase-slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(23px) scale(.98);transition:opacity .62s ease,transform .7s cubic-bezier(.22,.75,.15,1),visibility .62s;pointer-events:none}
.showcase-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto;z-index:2}
.showcase-art{height:56%;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 48% 10%,rgba(69,100,233,.38),transparent 65%),#121f3b}
.showcase-art:after{content:"";inset:auto 0 0;position:absolute;height:40%;background:linear-gradient(0deg,#10182d,transparent);pointer-events:none;z-index:3}
.showcase-device{position:relative;width:78%;height:110%;border:7px solid #101a30;border-radius:15px 15px 0 0;overflow:hidden;box-shadow:0 13px 38px rgba(0,0,0,.45);transform:rotate(-6deg) translateY(16%);transition:transform 5.8s ease;isolation:isolate}
.is-active .showcase-device{transform:rotate(-3deg) translateY(8%) scale(1.04)}
.showcase-device img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.showcase-browser{position:absolute;inset:0 0 auto;height:19px;display:flex;align-items:center;gap:4px;padding-left:11px;background:#192439;z-index:2}
.showcase-browser span{background:#e99b86;border-radius:50%;width:5px;height:5px}
.showcase-browser span:nth-child(2){background:#e8ce87}.showcase-browser span:nth-child(3){background:#60bb9e}
.showcase-art-tag{position:absolute;left:20px;bottom:14px;z-index:4;font-size:9px;letter-spacing:.12em;font-weight:800;color:#d0dfff;background:rgba(7,13,30,.65);border:1px solid rgba(147,176,255,.2);padding:8px 10px;border-radius:7px;backdrop-filter:blur(12px)}
.showcase-slide-copy{height:44%;padding:18px 27px 14px;display:flex;flex-direction:column;justify-content:flex-start;background:linear-gradient(135deg,#10182d,#0a1123);position:relative}
.showcase-slide-copy:before{content:"";width:110px;height:1px;position:absolute;top:0;left:27px;background:linear-gradient(90deg,#8db3ff,transparent)}
.showcase-eyebrow{font-size:9px;font-weight:800;letter-spacing:.18em;color:#8eb0ff;margin-bottom:10px}
.showcase-slide-copy h2{font-family:Outfit,'DM Sans',sans-serif;font-size:clamp(23px,2.13vw,32px);font-weight:750;line-height:1.08;letter-spacing:-.035em;margin:0;color:#f2f6ff}
.showcase-slide-copy h2 em{font-style:normal;color:#85adff}
.showcase-slide-copy p{color:#a9bad7;font-size:12px;line-height:1.53;max-width:420px;margin:9px 0 10px}
.showcase-slide-copy a{width:max-content;max-width:100%;color:#d8e7ff;text-decoration:none;font-size:11px;font-weight:800;border-bottom:1px solid rgba(142,176,255,.4);padding-bottom:3px;transition:color .2s,border-color .2s}
.showcase-slide-copy a:hover,.showcase-slide-copy a:focus-visible{color:#fff;border-color:#fff}
.showcase-slide-copy a span{padding-left:5px;color:#96b6ff}
.showcase-slide.is-active .showcase-slide-copy > *{animation:v8TextUp .62s ease both}
.showcase-slide.is-active .showcase-slide-copy > :nth-child(2){animation-delay:.10s}
.showcase-slide.is-active .showcase-slide-copy > :nth-child(3){animation-delay:.18s}
.showcase-slide.is-active .showcase-slide-copy > :nth-child(4){animation-delay:.24s}
.showcase-controls{position:absolute;inset:auto 0 3px;height:50px;display:flex;align-items:center;gap:12px;padding:0 21px;background:#0b1223;z-index:6}
.showcase-position{display:flex;align-items:baseline;gap:5px;font-family:Outfit,sans-serif;white-space:nowrap}
.showcase-position strong{font-size:16px;color:#f3f7ff}.showcase-position span{font-size:11px;color:#7184ac}
.showcase-dots{margin:auto;display:flex;gap:7px;align-items:center;justify-content:center}
.showcase-dots button{border:0;padding:0;height:5px;width:17px;border-radius:12px;cursor:pointer;background:#33456e;transition:background .25s,width .25s}
.showcase-dots button.is-active{background:#8ab5ff;width:28px}
.showcase-dots button:hover{background:#bcd7ff}
.showcase-arrows{display:flex;gap:5px;align-items:center}
.showcase-arrows button{height:30px;width:30px;border-radius:8px;border:1px solid rgba(126,161,241,.24);background:#16233e;color:#dbe7ff;cursor:pointer;display:grid;place-items:center;font-size:16px;transition:border-color .2s,background .2s}
.showcase-arrows button:hover{background:#274274;border-color:#7d9edf}
.showcase-arrows .showcase-pause{font-size:11px;font-weight:900;margin-left:4px;letter-spacing:-2px}
.showcase-progress-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:#182747;z-index:8}
.showcase-progress-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#4265ff,#6fdbf1);box-shadow:0 0 10px rgba(67,142,255,.7)}
.showcase-shell.is-playing .showcase-progress-fill{animation:v8Progress 6.5s linear forwards}
.showcase-shell.is-paused .showcase-progress-fill{animation-play-state:paused}
.showcase-shell:focus-within .showcase-progress-fill{animation-play-state:paused}
.showcase-side-note{position:absolute;right:-13px;top:3%;display:flex;align-items:center;gap:10px;color:#8ba1cb;font-size:9px;font-weight:800;letter-spacing:.11em;z-index:7;background:rgba(15,24,45,.91);padding:9px 14px;border:1px solid rgba(130,168,250,.25);border-radius:100px;box-shadow:0 12px 35px rgba(0,0,0,.3);animation:v8Float 5s ease-in-out infinite}
.side-note-dot{width:5px;height:5px;border-radius:50%;background:#80b3ff}
.showcase-hosting-art{background:radial-gradient(circle at 50% 40%,rgba(40,112,199,.5),transparent 52%),linear-gradient(135deg,#111b37,#081a36)}
.cloud-visual{position:relative;width:100%;height:100%;display:grid;place-items:center;isolation:isolate}
.cloud-ring{position:absolute;border:1px solid rgba(105,166,255,.19);border-radius:50%;width:320px;height:190px;transform:rotate(-22deg)}
.cloud-ring.ring-two{width:420px;height:240px;transform:rotate(30deg)}
.cloud-server{z-index:2;width:180px;background:#142b48;border:1px solid #537ca8;padding:15px;border-radius:16px;transform:perspective(700px) rotateY(-15deg) rotateX(6deg);box-shadow:30px 28px 0 rgba(9,15,40,.7),0 0 65px rgba(93,178,255,.16)}
.server-unit{height:41px;display:flex;align-items:center;padding:9px 10px;margin:4px 0;background:#0c192d;border:1px solid rgba(150,206,255,.22);border-radius:7px;gap:9px;color:#7196c7}
.server-unit i{display:block;width:8px;height:8px;background:#63e0b9;border-radius:50%;box-shadow:0 0 9px #63e0b9}
.server-unit span{width:55px;height:3px;background:linear-gradient(90deg,#5885d5,#2e496e);border-radius:8px}
.server-unit b{margin-left:auto;font-size:9px}
.cloud-node{position:absolute;font-size:27px;color:#9cd6ff;opacity:.8;animation:v8Float 4s ease-in-out infinite}.node-one{left:23%;top:22%}.node-two{right:20%;bottom:27%;animation-delay:-2s}
.showcase-avg-art{background:radial-gradient(circle at 50% 50%,rgba(33,141,135,.35),transparent 65%),linear-gradient(130deg,#14263c,#0b1a30)}
.avg-product-display{position:relative;width:70%;height:94%;display:grid;place-items:center}
.avg-product-display img{position:relative;z-index:2;max-width:68%;max-height:92%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));animation:v8Float 5.5s ease-in-out infinite}
.avg-halo{position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(105,204,201,.28);box-shadow:0 0 55px rgba(74,210,193,.16);transform:rotateX(55deg)}
.avg-product-caption{position:absolute;top:0;right:-15%;background:#1d3046;padding:10px;border:1px solid #3c6273;border-radius:7px;font-size:8px;letter-spacing:.1em;color:#bce9f2}
.showcase-press-art{background:radial-gradient(circle at 55% 45%,rgba(135,48,210,.34),transparent 55%),linear-gradient(125deg,#1d163c,#0e1c37)}
.epk-art{height:95%;width:60%;background:linear-gradient(150deg,rgba(69,46,94,.95),rgba(15,26,57,.96));border:1px solid rgba(178,154,249,.37);border-radius:10px 10px 0 0;position:relative;margin-top:8%;padding:18px 22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-shadow:18px 10px 0 rgba(13,19,45,.65),0 25px 45px rgba(0,0,0,.35);transform:rotate(-6deg)}
.epk-art > span,.epk-art small{font-size:8px;color:#e3d6ff;letter-spacing:.17em;font-weight:800;z-index:2}
.epk-art strong{font-family:Outfit,sans-serif;font-size:clamp(40px,4vw,65px);letter-spacing:-.07em;line-height:.88;color:#fff;z-index:2}
.epk-art strong span{color:#bd9bff}
.epk-orb{position:absolute;width:170px;height:170px;border-radius:50%;right:-15%;top:6%;background:radial-gradient(circle at 35% 35%,#ff8c9c,#8954d6 45%,#281653 75%);filter:drop-shadow(0 0 30px rgba(255,84,174,.4));animation:v8Float 6s ease-in-out infinite}
.hero-scroll{display:inline-flex;gap:9px;align-items:center;color:#bdcced!important;text-decoration:none!important;border:1px solid transparent;border-radius:5px;padding:10px 2px;transition:color .2s}
.hero-scroll:hover,.hero-scroll:focus-visible{color:#fff!important;text-decoration:underline!important}
.hero-scroll span{display:inline-block;animation:v8ArrowDown 1.8s ease-in-out infinite}
.capability-marquee{width:100%;border-top:1px solid rgba(132,164,234,.12);border-bottom:1px solid rgba(132,164,234,.12);overflow:hidden;position:relative;background:#0a1123;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.capability-marquee-track{display:flex;gap:0;width:max-content;animation:v8Marquee 38s linear infinite}
.capability-marquee-group{display:flex;align-items:center;white-space:nowrap;flex-shrink:0}
.capability-marquee-group span{display:flex;align-items:center;gap:34px;padding:17px 28px;font-family:Outfit,sans-serif;color:#91a7d0;font-size:10px;letter-spacing:.18em;font-weight:750}
.capability-marquee-group b{font-size:12px;color:#577bff}
.capability-marquee:hover .capability-marquee-track{animation-play-state:paused}
@keyframes v8Marquee{to{transform:translateX(-50%)}}
@keyframes v8PanelIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes v8CopyIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes v8TextUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes v8Glow{to{opacity:.45;transform:scale(1.12)}}
@keyframes v8Float{50%{transform:translateY(-7px)}}
@keyframes v8Progress{from{width:0}to{width:100%}}
@keyframes v8ArrowDown{50%{transform:translateY(5px)}}
/* New entrance animations gently reveal content as it enters viewport. */
@media(prefers-reduced-motion:no-preference){.motion-reveal{opacity:0;transform:translateY(23px);transition:opacity .7s ease,transform .7s cubic-bezier(.21,.71,.17,1)}.motion-reveal.motion-in-view{opacity:1;transform:none}.motion-reveal[data-motion-delay="1"]{transition-delay:90ms}.motion-reveal[data-motion-delay="2"]{transition-delay:170ms}}
@media(max-width:1100px){.hero .hero-grid{gap:25px}.showcase-slide-copy{padding:15px 19px 12px}.showcase-slide-copy:before{left:19px}.showcase-slide-copy h2{font-size:25px}.showcase-slide-copy p{font-size:11px}.showcase-side-note{right:0}}
@media(max-width:880px){.hero .hero-grid{grid-template-columns:1fr;gap:40px;min-height:unset;padding-top:45px;padding-bottom:35px}.hero-visual-v8{height:510px;min-height:0;max-width:580px;width:100%;margin:auto}.showcase-shell{max-height:none;min-height:0}.showcase-side-note{right:0}.hero-bottom{padding-top:4px}}
@media(max-width:600px){.hero .hero-grid{padding-top:45px;gap:28px;padding-bottom:30px}.hero-visual-v8{height:470px;max-width:500px}.showcase-shell{border-radius:19px;min-height:0}.showcase-topbar{padding:0 13px}.showcase-edition{display:none}.showcase-art{height:52%}.showcase-slide-copy{height:48%;padding:14px 18px 8px}.showcase-slide-copy h2{font-size:clamp(23px,6.7vw,30px)}.showcase-slide-copy p{font-size:11px;margin:7px 0}.showcase-eyebrow{font-size:9px;margin-bottom:7px}.showcase-slide-copy a{font-size:11px}.showcase-slide-copy:before{left:18px}.showcase-controls{padding:0 11px;gap:7px}.showcase-arrows button{height:32px;width:32px}.showcase-dots{gap:5px}.showcase-dots button{width:10px}.showcase-dots button.is-active{width:19px}.showcase-side-note{top:-14px;right:6px;font-size:7px;gap:6px;padding:8px 10px}.cloud-server{transform:scale(.9)}.epk-art{width:62%}.hero .hero-bottom{gap:10px}.hero-bottom>span{font-size:9px}.capability-marquee-group span{padding:14px 19px;font-size:9px;gap:25px}}
@media(max-width:390px){.hero-visual-v8{height:455px}.showcase-slide-copy{padding:12px 14px 8px}.showcase-slide-copy h2{font-size:22px}.showcase-slide-copy p{line-height:1.35;font-size:10px;margin:6px 0}.showcase-slide-copy:before{left:14px}.showcase-arrows .showcase-pause{width:29px;margin-left:0}.showcase-position strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.showcase-shell,.showcase-glow,.showcase-side-note,.hero-copy,.epk-orb,.cloud-node,.avg-product-display img,.hero-scroll span,.capability-marquee-track,.showcase-slide-copy>*{animation:none!important}.showcase-slide,.showcase-device{transition:none!important}.showcase-progress-fill{animation:none!important;width:0!important}.motion-reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* Override legacy mobile scaling intended for old dashboard. */
.hero .hero-visual-v8{transform:none;width:100%;max-width:610px;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0}
