:root {
  color-scheme: dark;
  --ink: #060a12;
  --panel: rgba(10, 17, 29, .72);
  --panel-strong: rgba(8, 14, 24, .9);
  --text: #f4f8ff;
  --muted: #aeb8ca;
  --purple: #b164ff;
  --cyan: #46cee8;
  --green: #48e097;
  --blue: #5489ff;
  --accent: var(--cyan);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--text); }
button, a { font: inherit; }
button { color: inherit; }
.hero {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 17% 18%, rgba(113, 52, 185, .24), transparent 28%),
    radial-gradient(circle at 88% 28%, rgba(39, 137, 164, .18), transparent 31%),
    linear-gradient(145deg, #050910 0%, #07101b 58%, #050912 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3; opacity: .14;
  background-image: linear-gradient(rgba(116, 142, 180, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 142, 180, .12) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.ambient { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.ambient i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 12px var(--purple); animation: drift 11s ease-in-out infinite alternate; }
.ambient i:nth-child(1) { left: 9%; top: 22%; }
.ambient i:nth-child(2) { left: 43%; top: 66%; animation-delay: -3s; }
.ambient i:nth-child(3) { right: 7%; top: 17%; animation-delay: -5s; }
.ambient i:nth-child(4) { right: 37%; bottom: 8%; animation-delay: -8s; }
@keyframes drift { to { translate: 42px -30px; opacity: .32; } }
.oss-cloud { position: absolute; inset: 90px 0 58px; z-index: -1; pointer-events: none; overflow: hidden; }
.oss-cloud img { position: absolute; width: clamp(46px, 3.3vw, 76px); height: clamp(46px, 3.3vw, 76px); object-fit: contain; opacity: .19; filter: saturate(1.35) drop-shadow(0 0 18px rgba(94,184,255,.18)); animation: oss-float 18s ease-in-out infinite alternate; }
.oss-cloud img:nth-child(1) { left: 2%; top: 13%; animation-delay: -2s; }
.oss-cloud img:nth-child(2) { left: 46%; top: 4%; animation-delay: -11s; }
.oss-cloud img:nth-child(3) { right: 2%; top: 15%; animation-delay: -6s; }
.oss-cloud img:nth-child(4) { left: 38%; top: 38%; animation-delay: -14s; }
.oss-cloud img:nth-child(5) { right: 31%; top: 46%; animation-delay: -4s; }
.oss-cloud img:nth-child(6) { left: 4%; bottom: 18%; animation-delay: -9s; }
.oss-cloud img:nth-child(7) { left: 34%; bottom: 5%; animation-delay: -16s; }
.oss-cloud img:nth-child(8) { right: 4%; bottom: 11%; animation-delay: -1s; }
.oss-cloud img:nth-child(9) { right: 44%; top: 16%; animation-delay: -13s; }
.oss-cloud img:nth-child(10) { left: 18%; top: 48%; animation-delay: -7s; }
.oss-cloud img:nth-child(11) { right: 15%; top: 39%; animation-delay: -18s; }
.oss-cloud img:nth-child(12) { left: 54%; bottom: 5%; animation-delay: -5s; }
@keyframes oss-float { 0% { translate: -8px 12px; rotate: -4deg; } 55% { translate: 12px -8px; } 100% { translate: 28px -30px; rotate: 5deg; } }
.topbar { position:relative; z-index:3; height:104px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,4vw,76px); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.brand { display:inline-flex; align-items:center; color:inherit; text-decoration:none; }
.brand .lorepanda-logo-lockup { display:flex; align-items:center; gap:12px; line-height:1; color:#fff; transform:scale(1.4);transform-origin:left center; }
.brand .lorepanda-logo-art { width:64px; height:64px; object-fit:contain; flex:none; }
.brand .lorepanda-logo-copy { display:flex; min-width:0; flex-direction:column; align-items:flex-start; white-space:nowrap; }
.brand .lorepanda-logo-copy strong { font-family:"Segoe UI Variable Display","Aptos Display","Helvetica Neue",Arial,sans-serif; font-size:29px; font-weight:720; letter-spacing:-.025em; line-height:.95; color:#fff; text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; }
.brand .lorepanda-logo-copy small { margin-top:5px; font-family:"Segoe UI Variable Text","Aptos","Helvetica Neue",Arial,sans-serif; font-size:13.3px; font-weight:650; letter-spacing:.015em; line-height:1; color:#fff; white-space:nowrap; text-transform:none; text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; }
.brand .lorepanda-logo-copy small b { font-size:inherit; font-weight:800; color:#44f263; text-shadow:0 0 8px rgba(68,242,99,.35); }
.brand .lorepanda-beta-placard { display:none; }
.landing-manifesto { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:0; isolation:isolate; width:max-content; max-width:calc(100% - 740px); margin:0; color:#ffe8aa; font:700 clamp(17px,1.05vw,23px)/1.15 "Segoe UI Variable Display","Aptos Display","Helvetica Neue",Arial,sans-serif; letter-spacing:.025em; white-space:nowrap; text-shadow:0 0 5px rgba(255,233,173,.95),0 0 18px rgba(244,180,66,.68),0 0 38px rgba(233,143,32,.52); pointer-events:none; }
.landing-manifesto::before { content:""; position:absolute; z-index:-1; inset:-28px -90px; background:radial-gradient(ellipse at center,rgba(255,204,96,.28),rgba(255,190,68,.11) 38%,transparent 72%); filter:blur(6px); }
.landing-manifesto::after { content:""; position:absolute; z-index:-2; left:50%; top:50%; width:870px; height:118px; transform:translate(-50%,-50%); background:repeating-conic-gradient(from -90deg at 50% 50%,transparent 0deg 8deg,rgba(255,214,117,.18) 9deg 10deg,transparent 12deg 18deg); mask-image:radial-gradient(ellipse at center,transparent 0%,#000 31%,transparent 73%); opacity:.78; }
@media (max-width:1600px) { .topbar { height:auto; min-height:104px; flex-wrap:wrap; row-gap:4px; padding-top:8px; padding-bottom:8px; } .landing-manifesto { display:block; position:relative; left:auto; top:auto; transform:none; order:3; width:100%; max-width:none; text-align:center; white-space:normal; font-size:17px; } .landing-manifesto::after { width:min(100vw,740px); } }
.top-actions { display: flex; gap: 12px; align-items: center; }
.signup-open-sign { width: 133px; height: 94px; overflow: visible; rotate: -3deg; transform-origin: 50% 8%; flex: 0 0 auto; filter: drop-shadow(0 7px 13px rgba(0,0,0,.58)); }
.signup-open-nail { fill: #b164ff; stroke: #7444a5; stroke-width: 1.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.signup-open-wire { fill: none; stroke: #8a98a0; stroke-width: 2.3; stroke-linecap: round; }
.signup-open-frame { fill: rgba(10,15,22,.94); stroke: #ff4f64; stroke-width: 3; }
.signup-open-tube { fill: none; stroke: #43cfff; stroke-width: 2.5; filter: drop-shadow(0 0 5px #00b7ff); }
.signup-open-sign text { fill: #fff6f8; stroke: #ff3155; stroke-width: .7px; font: 900 31px/1 "Trebuchet MS", Arial, sans-serif; letter-spacing: 5px; paint-order: stroke fill; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #ff3155); animation: signup-open-neon 3.8s steps(1,end) infinite; }
@keyframes signup-open-neon { 0%,9%,12%,100% { opacity: 1; } 10%,11% { opacity: .68; } 64% { opacity: .88; } 65% { opacity: 1; } }
.landing-unix-sign { position: absolute; z-index: 1; left: 24.5%; top: 14.5%; width: clamp(116px, 7vw, 150px); height: auto; overflow: visible; color: rgba(103,238,170,.92); rotate: -4deg; pointer-events: none; filter: drop-shadow(0 0 4px rgba(100,255,178,.92)) drop-shadow(0 0 14px rgba(36,220,131,.58)) drop-shadow(0 8px 15px rgba(0,0,0,.55)); animation: unix-float 12s ease-in-out infinite alternate; }
.signup-unix-sign rect, .signup-unix-sign path { fill: rgba(8,17,18,.7); stroke: currentColor; stroke-width: 2; }
.signup-unix-sign path { fill: none; stroke-width: 1; }
.signup-unix-sign text { fill: #8fffc0; stroke: rgba(13,55,39,.95); paint-order: stroke fill; font-family: "Trebuchet MS", Arial, sans-serif; }
.signup-unix-title { font-size: 31px; font-weight: 900; letter-spacing: 4px; }
.signup-unix-motto { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
@keyframes unix-float { from { translate: -6px 7px; } to { translate: 18px -14px; rotate: 2deg; } }
.watch-button, .top-cta, .primary-cta, .text-link { border: 0; text-decoration: none; cursor: pointer; }
.watch-button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); }
.watch-button:hover { color: white; border-color: rgba(177,100,255,.55); }
.top-actions :is(.watch-button,.top-cta,.member-link) { box-shadow: 0 0 0 1px rgba(177,100,255,.24); transition: box-shadow .18s ease, filter .18s ease; }
.top-actions :is(.watch-button,.top-cta,.member-link):is(:hover,:focus-visible) { box-shadow: 0 0 0 2px rgba(177,100,255,.85), 0 0 22px rgba(177,100,255,.3); filter: brightness(1.15); }
.top-actions :is(.watch-button,.top-cta,.member-link):focus-visible { outline: 2px solid #d8b9ff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .top-actions :is(.watch-button,.top-cta,.member-link) { transition: none; } }
.top-cta { padding: 13px 21px; border-radius: 99px; background: rgba(177,100,255,.12); color: #e6cfff; border: 1px solid rgba(177,100,255,.52); }
.member-link { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 0 21px; border: 1px solid rgba(177,100,255,.52); border-radius: 99px; background: rgba(177,100,255,.12); color: #e6cfff; text-decoration: none; }
.hero-grid { min-height: calc(100svh - 158px); display: grid; grid-template-columns: minmax(380px, .68fr) minmax(820px, 1.62fr); gap: clamp(20px, 1.8vw, 36px); padding: clamp(34px, 4.6vh, 74px) clamp(22px, 2.2vw, 44px) 74px; align-items: center; }
.campaign-copy { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; max-width: 760px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--green); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 800; }
.eyebrow span { width: 24px; height: 2px; background: var(--green); box-shadow: 0 0 12px var(--green); }
h1 { max-width: 690px; margin: 0; font-size: clamp(4.1rem, 5.3vw, 7rem); line-height: .94; letter-spacing: -.065em; }
h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 34px rgba(70,206,232,.26); }
.lead { max-width: 660px; margin: 30px 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.22vw, 1.38rem); line-height: 1.65; }
.journey { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 30px; color: #dce4f0; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.journey span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; background: rgba(255,255,255,.035); }
.journey b { color: var(--purple); }
.campaign-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.primary-cta { display: inline-flex; align-items: center; gap: 18px; min-height: 58px; padding: 0 28px; border-radius: 99px; background: linear-gradient(120deg, #8d40e9, #b05bfa); color: white; font-weight: 800; box-shadow: 0 0 38px rgba(177,100,255,.26); }
.primary-cta:hover { translate: 0 -2px; box-shadow: 0 0 46px rgba(177,100,255,.43); }
.text-link { padding: 10px 0; background: transparent; color: var(--muted); }
.text-link:hover { color: white; }
.chapter-note { display: flex; gap: 18px; align-items: center; min-height: 72px; margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09); }
.chapter-note > span { color: var(--purple); font-weight: 800; letter-spacing: .12em; }
.chapter-note div { display: grid; gap: 4px; }
.chapter-note small { color: #778398; text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; }
.chapter-note strong { max-width: 520px; font-size: .93rem; }
.explorer { position: absolute; width: min(39vw, 530px); right: -33%; bottom: -8%; z-index: -1; opacity: .13; filter: saturate(.9) drop-shadow(0 0 32px rgba(177,100,255,.22)); }
.feature-stage { min-width: 0; min-height: 656px; border-radius: 26px; padding: 18px; background: rgba(8,14,24,.82); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 32px 90px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04); backdrop-filter: none; }
.stage-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 17px; }
.stage-head > div:first-child { display: grid; gap: 3px; }
.stage-head small { color: #748096; text-transform: uppercase; letter-spacing: .16em; font-size: .65rem; }
.stage-head strong { font-size: 1rem; }
.stage-controls { display: flex; gap: 7px; }
.stage-controls button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); cursor: pointer; }
.stage-controls button:hover, .stage-controls button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; min-height: 657px; }
.feature-card { min-width: 0; overflow: hidden; border-radius: 19px; border: 1px solid color-mix(in srgb, var(--card-accent) 50%, transparent); background: rgba(7,13,23,.9); box-shadow: 0 16px 36px rgba(0,0,0,.34); opacity: 0; translate: 45px 0; animation: reveal-card .28s cubic-bezier(.16,1,.3,1) forwards; }
.feature-card:nth-child(2) { animation-delay: .035s; }
.feature-card:nth-child(3) { animation-delay: .07s; }
@keyframes reveal-card { to { opacity: 1; translate: 0 0; } }
.feature-card button { display: grid; width: 100%; height: 100%; padding: 0; border: 0; color: inherit; text-align: left; cursor: pointer; background: transparent; grid-template-rows: minmax(350px, 1fr) auto; }
.feature-shot { position: relative; min-height: 350px; overflow: hidden; background: #08101a; }
.feature-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 44%; scale: 1.08; transition: scale .22s cubic-bezier(.16,1,.3,1); }
.feature-card:hover .feature-shot img, .feature-card:focus-within .feature-shot img { scale: 1.14; }
.feature-shot::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(7,13,23,.92)); }
.feature-copy { min-height: 220px; padding: 23px 22px 24px; border-top: 1px solid rgba(255,255,255,.07); }
.feature-kicker { display: flex; align-items: center; gap: 8px; color: var(--card-accent); text-transform: uppercase; letter-spacing: .13em; font-size: .67rem; font-weight: 800; }
.feature-kicker::before { content: ""; width: 4px; height: 17px; border-radius: 4px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.feature-copy h2 { margin: 16px 0 10px; font-size: clamp(1.12rem, 1.15vw, 1.36rem); line-height: 1.18; letter-spacing: -.025em; }
.feature-copy p { margin: 0; color: var(--muted); font-size: .89rem; line-height: 1.55; }
.feature-action { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; color: #e7edf8; font-size: .76rem; font-weight: 750; }
.feature-action span:last-child { color: var(--card-accent); }
.stage-progress { display: flex; gap: 7px; padding: 17px 3px 1px; }
.stage-progress button { flex: 1; height: 4px; border: 0; border-radius: 99px; background: rgba(255,255,255,.09); padding: 0; cursor: pointer; overflow: hidden; }
.stage-progress button::after { content: ""; display: block; width: 0; height: 100%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.stage-progress button.complete::after { width: 100%; }
.stage-progress button.active::after { animation: progress-fill 12s linear forwards; }
.stage-progress.paused button.active::after { animation-play-state: paused; }
@keyframes progress-fill { to { width: 100%; } }
.proof-strip { position: absolute; z-index: 3; inset: auto 0 0; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 12px 24px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(5,9,16,.78); color: #8490a4; backdrop-filter: blur(8px); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.proof-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.root-panda { position: absolute; z-index: 2; right: 22px; bottom: 0; width: min(420px, 30vw); height: 350px; pointer-events: none; }
.panda-peek-hitbox { position: absolute; right: 0; bottom: -50px; width: clamp(176px, 12vw, 232px); aspect-ratio: 1; pointer-events: auto; }
.panda-head { position: absolute; inset: 0; width: 100%; filter: drop-shadow(0 8px 18px rgba(0,0,0,.56)) drop-shadow(0 0 12px rgba(177,100,255,.2)); transform-origin: 50% 86%; animation: panda-peek 18s cubic-bezier(.65,0,.35,1) infinite, panda-look 18s ease-in-out infinite; }
.panda-peek-hitbox:hover .panda-head { animation: none; translate: 0 252px; transition: translate .42s cubic-bezier(.55,.06,.68,.19); }
.root-panda:has(.panda-peek-hitbox:hover) .panda-bubble { animation: none; opacity: 0; translate: 12px 12px; transition: opacity .16s ease; }
.panda-bubble { position: absolute; right: 188px; bottom: 160px; width: 230px; padding: 13px 15px; border: 1px solid rgba(177,100,255,.54); border-radius: 16px 16px 4px 16px; color: #e9e5f5; background: rgba(7,12,21,.9); box-shadow: 0 14px 36px rgba(0,0,0,.42), 0 0 18px rgba(177,100,255,.13); backdrop-filter: blur(18px); font-size: .78rem; line-height: 1.42; opacity: 0; translate: 12px 12px; animation: panda-talk 18s ease-in-out infinite; }
.panda-bubble::after { content: ""; position: absolute; right: -9px; bottom: 8px; width: 17px; height: 17px; border-right: 1px solid rgba(177,100,255,.54); border-bottom: 1px solid rgba(177,100,255,.54); background: rgba(7,12,21,.94); rotate: -45deg; }
@keyframes panda-peek { 0%, 58% { translate: 0 0; } 70%, 84% { translate: 0 252px; } 96%, 100% { translate: 0 0; } }
@keyframes panda-look { 0%, 10% { rotate: 0deg; scale: 1 1; } 18% { rotate: -5deg; scale: 1.01 .98; } 27% { rotate: 4deg; scale: .99 1.01; } 35% { rotate: 0deg; scale: 1 .94; } 38% { rotate: 0deg; scale: 1 1.02; } 49% { rotate: 3deg; scale: 1 .99; } 58%, 100% { rotate: 0deg; scale: 1 1; } }
@keyframes panda-talk { 0%, 13%, 56%, 100% { opacity: 0; translate: 12px 12px; } 20%, 51% { opacity: 1; translate: 0 0; } }
dialog { color: var(--text); padding: 0; border: 1px solid rgba(177,100,255,.4); background: rgba(6,10,18,.94); box-shadow: 0 42px 120px rgba(0,0,0,.72), 0 0 54px rgba(177,100,255,.15); backdrop-filter: blur(26px); }
dialog::backdrop { background: rgba(1,4,8,.79); backdrop-filter: none; }
.dialog-close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(6,10,18,.78); cursor: pointer; }
.feature-dialog { width: min(94vw, 1520px); max-height: 92vh; border-radius: 26px; overflow: hidden; grid-template-columns: 1.7fr .76fr; }
.feature-dialog[open] { display: grid; }
.dialog-visual { min-height: 680px; background: #050a12; }
.dialog-visual img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.dialog-copy { padding: 72px 48px 50px; overflow: auto; }
.dialog-copy > p:first-child { color: var(--purple); text-transform: uppercase; letter-spacing: .15em; font-size: .74rem; font-weight: 800; }
.dialog-copy h2 { margin: 18px 0; font-size: 2.3rem; line-height: 1.05; }
.dialog-copy > p { color: var(--muted); line-height: 1.7; }
.dialog-copy ol { margin: 30px 0; padding-left: 20px; color: #dce4ef; }
.dialog-copy li { padding: 7px 0 7px 8px; line-height: 1.5; }
.dialog-copy a { display: inline-flex; gap: 18px; padding: 15px 21px; border-radius: 99px; color: white; text-decoration: none; background: #9348ed; }
.video-dialog { width: min(94vw, 1600px); border-radius: 24px; overflow: hidden; }
.video-dialog video { display: block; width: 100%; aspect-ratio: 16 / 9; background: black; }
@media (max-width: 1250px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .campaign-copy { max-width: none; padding-top: 30px; }
  .explorer { right: 0; bottom: -18%; width: 430px; }
  .feature-grid { min-height: 570px; }
}
@media (max-width: 820px) {
  .topbar { min-height: 84px; height: auto; }
  .watch-button { display: none; }
  .signup-open-sign, .landing-unix-sign { display: none; }
  .hero-grid { padding-bottom: 100px; }
  #hero-title { width: 100%; max-width: 100%; font-size: clamp(32px, 10vw, 56px); line-height: 1.06; letter-spacing: -.045em; overflow-wrap: anywhere; }
  .journey { display: none; }
  .campaign-actions { align-items: flex-start; flex-direction: column; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card button { grid-template-rows: 270px auto; }
  .feature-copy { min-height: auto; }
  .proof-strip { display: none; }
  .root-panda { right: 6px; width: 280px; }
  .panda-peek-hitbox { width: 152px; bottom: -34px; }
  .panda-bubble { right: 132px; bottom: 132px; width: 178px; font-size: .68rem; }
  .feature-dialog[open] { grid-template-columns: 1fr; overflow: auto; }
  .dialog-visual { min-height: 52vw; }
  .dialog-copy { padding: 42px 24px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; }
  .root-panda { translate: 0 0; }
  .panda-head { translate: 0 0; }
}

/* Keep moving artwork on independent layers, outside the slide paint area. */
.oss-cloud img, .panda-head, .ambient i { will-change: transform; }
.feature-grid { contain: layout style; }
.feature-card { contain: layout paint; }
button, a { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  .oss-cloud img, .panda-head, .ambient i { will-change: auto; }
}

/* Slideshow controls and previews must win hit testing over Panda artwork. */
.feature-grid, .stage-controls, .stage-progress { position: relative; z-index: 3; }

/* Gentle purple hover on the feature-preview close control. */
#feature-dialog .dialog-close { transition: background-color .65s ease, border-color .65s ease, box-shadow .65s ease, color .65s ease; }
#feature-dialog .dialog-close:is(:hover,:focus-visible) { background-color: rgba(177,100,255,.24); border-color: rgba(177,100,255,.8); color: #e4caff; box-shadow: 0 0 16px rgba(177,100,255,.35); }


/* Sign-in uses a green accent and matching hover outline glow. */
.top-actions .member-link[href="/login"]{color:#a7f0ba;border-color:rgba(66,190,101,.65);background:rgba(66,190,101,.12);box-shadow:0 0 0 1px rgba(66,190,101,.24)}
.top-actions .member-link[href="/login"]:is(:hover,:focus-visible){box-shadow:0 0 0 2px rgba(66,190,101,.9),0 0 22px rgba(66,190,101,.35);filter:brightness(1.15)}
.top-actions .member-link[href="/login"]:focus-visible{outline-color:#a7f0ba}

/* Existing social profiles in the lower-left Overview strip. */
.overview-social{position:static;z-index:3;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:24px;width:auto;max-width:100%;height:32px;padding:0;border:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:#e6cfff}
.overview-social .tp-social__heading{display:flex;align-items:center;gap:8px}
.overview-social .tp-social__panda{width:32px;height:32px;object-fit:contain}
.overview-social .tp-social__name{margin:0;font-size:12px;white-space:nowrap}
.overview-social :is(.tp-social__eyebrow,.tp-social__tagline,.tp-social__mark,.tp-social__label){display:none}
.overview-social .tp-social__links{display:flex;align-items:center;gap:12px}
.overview-social .tp-social__link{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:7px;color:#c8aff0;transition:background .18s,box-shadow .18s}
.overview-social .tp-social__link>svg{width:18px;height:18px;fill:currentColor}
.overview-social .tp-social__link:is(:hover,:focus-visible){color:#f4efff;background:#8860ca33;box-shadow:0 0 0 1px #ad83ef80}


/* Green play arrow beside Watch full overview. */
.top-actions .watch-button>span{color:#42be65}

/* Social links belong to the glass footer, never beneath its blurred layer. */
.proof-strip{position:fixed;inset:auto 0 0;z-index:20;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.proof-strip-points{display:flex;align-items:center;justify-content:center;flex:1 1 620px;flex-wrap:wrap;gap:12px 20px;min-width:0}
.proof-strip .overview-social{flex:0 1 auto;text-transform:none;letter-spacing:normal}
@media(max-width:820px){.proof-strip{display:flex;justify-content:center}.proof-strip-points{flex-basis:100%;font-size:.65rem;gap:8px 12px}}

/* Overview navigation and live support availability. */
.top-actions{flex-wrap:wrap;justify-content:flex-end}
/* Give each header group its own grid area at every viewport width. */
.topbar{display:grid;grid-template-columns:400px minmax(0,1fr);height:auto;min-height:104px;gap:12px 24px;padding-top:12px;padding-bottom:14px}
.topbar .brand{grid-column:1;grid-row:1;min-height:90px;min-width:0}
.topbar .top-actions{grid-column:2;grid-row:1;min-width:0;gap:12px;justify-content:flex-end}
.topbar .landing-manifesto{grid-column:1/-1;grid-row:2;position:relative;left:auto;top:auto;transform:none;order:initial;width:100%;max-width:100%;margin:0;text-align:center;white-space:normal;overflow-wrap:anywhere}
.topbar .landing-manifesto::after{width:min(100%,740px)}
@media(max-width:1100px){.topbar{grid-template-columns:minmax(0,1fr);gap:14px}.topbar .brand{grid-column:1;grid-row:1;justify-self:center;width:400px;max-width:100%}.topbar .landing-manifesto{grid-column:1;grid-row:2}.topbar .top-actions{grid-column:1;grid-row:3;justify-content:center}}
@media(max-width:520px){.topbar .brand{width:auto;min-height:64px}.topbar .brand .lorepanda-logo-lockup{transform:none}.topbar .top-actions{gap:10px}}

.overview-live-chat{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid #69718180;border-radius:999px;background:#79829420;color:#b8c0ce;font-size:12px;font-weight:600;white-space:nowrap;text-decoration:none}
.overview-live-chat i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:currentColor}
.overview-live-chat.is-available{color:#83eba4;border-color:#42be6580;background:#42be651c}
.overview-live-chat:focus-visible{outline:2px solid #c8aff0;outline-offset:3px}

/* Android embedded browsers: keep intrinsic image sizes inside mobile tracks. */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding: 28px 16px 36px; }
  .hero-grid > *, .feature-grid > *, .feature-card button > * { min-width: 0; max-width: 100%; }
  .feature-stage { padding: 12px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card button { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .feature-shot { min-height: 0; }
  .feature-shot img { position: absolute; inset: 0; display: block; }
  .feature-copy { overflow-wrap: anywhere; padding: 20px 16px; }
  .stage-head { gap: 8px; }
  .stage-head > div:first-child { min-width: 0; overflow-wrap: anywhere; }
  .stage-controls { flex-shrink: 0; }
  .proof-strip { position: relative; inset: auto; padding: 14px 12px; }
  .proof-strip .overview-social { height: auto; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
  .overview-social .tp-social__links { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .proof-strip-points { gap: 8px 12px; }
}

/* Mobile public entrance: normal document flow, readable controls and dialogs. */
@media (max-width: 820px) {
  .hero, .topbar, .hero-grid, .feature-stage { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .topbar { padding-inline: 16px; }
  .topbar .top-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .top-actions > :is(a, button) { min-height: 44px; box-sizing: border-box; max-width: 100%; white-space: normal; text-align: center; }
  .topbar .landing-manifesto { font-size: clamp(16px, 4vw, 21px); line-height: 1.4; }
  .topbar .brand { width: min(100%, 360px); }
  .topbar .brand .lorepanda-logo-lockup { width: 100%; max-width: 100%; min-width: 0; gap: 10px; }
  .topbar .brand .lorepanda-logo-art { width: clamp(48px, 13vw, 64px); height: auto; flex: 0 0 auto; }
  .topbar .brand .lorepanda-logo-copy { min-width: 0; }
  .topbar .brand .lorepanda-logo-copy strong { font-size: clamp(24px, 7vw, 32px); }
  .topbar .brand .lorepanda-logo-copy small { font-size: clamp(10px, 2.8vw, 13px); }
  .campaign-copy, .campaign-actions, .lead { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .campaign-actions > :is(a, button) { min-height: 44px; max-width: 100%; box-sizing: border-box; }
  .explorer { max-width: 70%; pointer-events: none; }
  .stage-head { flex-wrap: wrap; }
  .stage-controls button { min-width: 40px; min-height: 40px; }
  .feature-grid { min-height: 0; }
  .feature-card button { grid-template-rows: auto auto; }
  .feature-shot { height: clamp(170px, 55vw, 300px); }
  .feature-copy h2, .feature-copy p, .dialog-copy { overflow-wrap: anywhere; }
  .feature-dialog, .video-dialog { width: calc(100% - 16px); max-width: calc(100% - 16px); max-height: calc(100dvh - 24px); box-sizing: border-box; }
  .feature-dialog[open] { overflow-y: auto; }
  .dialog-visual { min-width: 0; max-width: 100%; }
  .dialog-copy { padding: 48px 20px 24px; min-width: 0; }
  .dialog-copy h2 { font-size: clamp(24px, 6vw, 34px); }
  .dialog-close { min-width: 44px; min-height: 44px; }
  .proof-strip .overview-social .tp-social__link { width: 40px; height: 40px; flex-basis: 40px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .feature-dialog, .video-dialog { max-height: calc(100dvh - 16px); overflow-y: auto; }
}