:root {
  --plx-bg: #050716;
  --plx-bg-2: #0a0c22;
  --plx-panel: rgba(255, 255, 255, 0.075);
  --plx-panel-strong: rgba(255, 255, 255, 0.12);
  --plx-border: rgba(255, 255, 255, 0.14);
  --plx-text: #f7f8ff;
  --plx-muted: #bfc4ef;
  --plx-muted-2: #8991c9;
  --plx-blue: #13b8ff;
  --plx-purple: #7b45ff;
  --plx-pink: #ff35d1;
  --plx-magenta: #c52dff;
  --plx-orange: #ff9a24;
  --plx-radius-xl: 34px;
  --plx-radius-lg: 24px;
  --plx-shadow: 0 30px 100px rgba(0, 0, 0, 0.34);
  --plx-gradient: linear-gradient(120deg, var(--plx-blue), var(--plx-purple) 45%, var(--plx-pink));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.plx-body {
  margin: 0;
  color: var(--plx-text);
  background: var(--plx-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body.plx-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: radial-gradient(circle at 8% 6%, rgba(18,184,255,.22), transparent 30%), radial-gradient(circle at 88% 7%, rgba(255,53,209,.24), transparent 33%), linear-gradient(180deg, #050716 0%, #0a0d27 55%, #060817 100%);
}
body.plx-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('../images/ambient-bg.webp');
  background-size: cover;
  background-position: center;
  opacity: .38;
  pointer-events: none;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }
.plx-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.plx-main { min-height: 60vh; }

.plx-header {
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 50%;
  width: min(1180px, calc(100% - 28px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(5, 7, 22, .58);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 60px rgba(0,0,0,.26);
  transition: background .25s ease, border-color .25s ease, top .25s ease;
}
.plx-header.is-scrolled { top: 10px; background: rgba(5,7,22,.82); border-color: rgba(255,255,255,.16); }
.plx-brand { display: flex; align-items: center; min-width: 160px; }
.plx-brand img { display: block; width: 178px; height: auto; }
.plx-nav { display: flex; justify-content: center; gap: 7px; }
.plx-nav a,
.plx-header-cta {
  text-decoration: none;
  padding: 11px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.78);
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.plx-nav a:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateY(-1px); }
.plx-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: var(--plx-gradient);
  box-shadow: 0 12px 34px rgba(139, 69, 255, .38);
}
.plx-header-cta svg { width: 18px; height: 18px; fill: currentColor; }
.plx-menu-toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.plx-menu-toggle span { display:block; width:24px; height:2px; margin:5px 0; background:#fff; border-radius:99px; transition:.22s ease; }

.plx-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 132px 0 84px;
  overflow: hidden;
}
.plx-hero::before, .plx-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: .75;
  pointer-events: none;
}
.plx-hero::before { width: 36vw; height: 36vw; right: -12vw; top: 10vh; background: rgba(255,53,209,.18); animation: plxPulse 8s ease-in-out infinite; }
.plx-hero::after { width: 28vw; height: 28vw; left: -11vw; bottom: 4vh; background: rgba(19,184,255,.15); animation: plxPulse 9s ease-in-out infinite reverse; }
.plx-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns: .88fr 1.12fr; gap: 54px; align-items:center; }
.plx-kicker { display:inline-flex; gap:10px; align-items:center; margin:0 0 20px; padding:9px 13px; border:1px solid var(--plx-border); border-radius:999px; color:var(--plx-muted); background:rgba(255,255,255,.06); font-size:13px; font-weight:800; letter-spacing:.04em; }
.plx-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--plx-pink); box-shadow:0 0 20px var(--plx-pink); }
.plx-title { margin:0; font-size: clamp(52px, 8vw, 104px); line-height:.9; letter-spacing:-.065em; font-weight:950; }
.plx-title span, .plx-gradient-text { background: var(--plx-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plx-lead { margin: 26px 0 0; max-width: 650px; color: var(--plx-muted); font-size: clamp(18px, 2vw, 23px); line-height:1.72; }
.plx-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.plx-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 25px; border-radius:16px; text-decoration:none; color:#fff; font-weight:900; border:1px solid var(--plx-border); background: rgba(255,255,255,.075); transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.plx-btn:hover { transform: translateY(-3px); }
.plx-btn-primary { background: var(--plx-gradient); border-color: transparent; box-shadow:0 20px 52px rgba(126,71,255,.38); }
.plx-btn svg { width:20px; height:20px; fill:currentColor; }

.plx-hero-art { position:relative; min-height: 545px; border-radius: 42px; overflow:hidden; box-shadow: var(--plx-shadow); background:#090b1c; }
.plx-hero-art::before { content:""; position:absolute; inset:0; padding:1px; border-radius:42px; background:linear-gradient(135deg, rgba(19,184,255,.8), rgba(255,53,209,.75), rgba(255,255,255,.08)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; z-index:3; pointer-events:none; }
.plx-hero-art img { position:absolute; inset:-4%; width:108%; height:108%; max-width:none; object-fit:cover; animation: plxSlowDrift 16s ease-in-out infinite alternate; transform-origin:center; }
.plx-hero-light { position:absolute; inset:-20%; z-index:2; pointer-events:none; background: radial-gradient(circle at 80% 32%, rgba(255,53,209,.26), transparent 25%), radial-gradient(circle at 36% 74%, rgba(19,184,255,.22), transparent 28%), linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.08) 50%, transparent 58%); mix-blend-mode: screen; animation: plxLightSweep 10s ease-in-out infinite alternate; }
.plx-orb { position:absolute; z-index:4; width:10px; height:10px; border-radius:50%; background:#fff; opacity:.8; box-shadow: 0 0 20px #13b8ff, 0 0 44px #ff35d1; animation: plxFloat 9s ease-in-out infinite; }
.plx-orb.one { left:13%; top:18%; }
.plx-orb.two { right:19%; top:20%; animation-delay:-2s; }
.plx-orb.three { left:48%; bottom:14%; animation-delay:-4s; }

.plx-section { position:relative; padding: 92px 0; }
.plx-section-title { margin:0 0 18px; font-size: clamp(36px, 4.8vw, 62px); line-height:1; letter-spacing:-.045em; font-weight:950; }
.plx-section-lead { margin:0; max-width:720px; color:var(--plx-muted); line-height:1.75; font-size:18px; }
.plx-center { text-align:center; }
.plx-center .plx-section-lead { margin-left:auto; margin-right:auto; }

.plx-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.plx-card, .plx-neon-card { position:relative; border-radius: var(--plx-radius-lg); border:1px solid var(--plx-border); background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.045)); box-shadow: 0 20px 72px rgba(0,0,0,.22); overflow:hidden; }
.plx-card { padding:28px; }
.plx-neon-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(120deg, rgba(19,184,255,.7), rgba(123,69,255,.15), rgba(255,53,209,.65), rgba(19,184,255,.28)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation: plxBorderWave 7s ease-in-out infinite; pointer-events:none; }
.plx-neon-card::after { content:""; position:absolute; inset:auto -20% -60% -20%; height:70%; background:radial-gradient(circle at 22% 30%, rgba(19,184,255,.16), transparent 32%), radial-gradient(circle at 82% 30%, rgba(255,53,209,.16), transparent 32%); filter:blur(16px); opacity:.85; animation: plxGlowWave 9s ease-in-out infinite alternate; pointer-events:none; }
.plx-icon-badge { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; margin-bottom:18px; background:var(--plx-gradient); box-shadow: 0 0 34px rgba(123,69,255,.35); }
.plx-icon-badge svg { width:27px; height:27px; fill:white; }
.plx-card h3 { margin:0 0 12px; font-size:22px; }
.plx-card p { margin:0; color:var(--plx-muted); line-height:1.72; }

.plx-featured { display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center; padding:28px; }
.plx-image-frame { position:relative; border-radius:28px; overflow:hidden; min-height:360px; background:rgba(0,0,0,.3); }
.plx-image-frame img { width:100%; height:100%; display:block; object-fit:cover; }
.plx-featured-copy { padding:18px; position:relative; z-index:2; }
.plx-tags { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 30px; }
.plx-tag { padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.1); color:#fff; font-size:13px; font-weight:900; }

.plx-showcase-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px; }
.plx-showcase-card { padding:16px; }
.plx-showcase-card .plx-image-frame { min-height:360px; }
.plx-mobile-shots { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.plx-mobile-shot { border-radius:24px; overflow:hidden; border:1px solid var(--plx-border); background:rgba(255,255,255,.06); box-shadow:0 18px 50px rgba(0,0,0,.26); }
.plx-mobile-shot img { width:100%; display:block; }

.plx-founder { display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:center; padding:32px; }
.plx-founder-art { border-radius:30px; overflow:hidden; min-height:470px; }
.plx-founder-art img { width:100%; height:100%; object-fit:cover; display:block; }
.plx-founder-info { position:relative; z-index:2; }
.plx-founder-info h2 { margin-top:0; }

.plx-support-block { display:grid; grid-template-columns:1fr .9fr; gap:34px; align-items:center; padding:32px; }
.plx-support-art { min-height:360px; border-radius:30px; overflow:hidden; }
.plx-support-art img { width:100%; height:100%; object-fit:cover; display:block; }
.plx-contact-list { display:grid; gap:14px; margin-top:24px; }
.plx-contact-item { display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); text-decoration:none; }
.plx-contact-item svg { width:24px; height:24px; fill:url(#plxIconGradient); fill: currentColor; color: #55cfff; }

.plx-page-hero { padding:154px 0 74px; }
.plx-simple-page { min-height:70vh; }
.plx-copy-card { padding:36px; }
.plx-copy-card h1 { font-size:clamp(44px,6vw,74px); margin:0 0 18px; letter-spacing:-.05em; }
.plx-page-content { color:var(--plx-muted); line-height:1.72; }
.plx-privacy { max-width:900px; margin:0 auto; }
.plx-privacy h2 { color:#fff; margin-top:34px; }

.plx-footer { padding:60px 0 28px; border-top:1px solid rgba(255,255,255,.1); background:rgba(5,7,22,.55); }
.plx-footer-grid { display:grid; grid-template-columns: 1.4fr .8fr .8fr; gap:28px; }
.plx-footer-logo { width:205px; margin-bottom:18px; }
.plx-footer p { color:var(--plx-muted); max-width:430px; line-height:1.7; }
.plx-footer h3 { margin:0 0 12px; }
.plx-footer a { display:block; margin:10px 0; color:var(--plx-muted); text-decoration:none; }
.plx-footer a:hover { color:#fff; }
.plx-footer-bottom { width:min(1180px, calc(100% - 40px)); margin:38px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.09); color:var(--plx-muted-2); font-size:13px; }

.plx-reveal { opacity:0; transform:translateY(34px); transition:opacity .85s ease, transform .85s ease; }
.plx-reveal.is-visible { opacity:1; transform:translateY(0); }
.plx-delay-1 { transition-delay:.12s; }
.plx-delay-2 { transition-delay:.24s; }
.plx-delay-3 { transition-delay:.36s; }

@keyframes plxSlowDrift { 0% { transform: scale(1.02) translate3d(-.6%, -.4%, 0); } 100% { transform: scale(1.07) translate3d(.8%, .7%, 0); } }
@keyframes plxLightSweep { 0% { transform: translateX(-4%) rotate(-2deg); opacity:.55; } 100% { transform: translateX(5%) rotate(2deg); opacity:.9; } }
@keyframes plxFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(18px,-20px,0) scale(1.35); } }
@keyframes plxPulse { 0%,100% { transform:scale(.9); opacity:.5; } 50% { transform:scale(1.1); opacity:.85; } }
@keyframes plxBorderWave { 0%,100% { opacity:.58; filter:hue-rotate(0deg); } 50% { opacity:.95; filter:hue-rotate(22deg); } }
@keyframes plxGlowWave { 0% { transform:translateX(-6%); } 100% { transform:translateX(6%); } }

@media (max-width: 960px) {
  .plx-header { grid-template-columns:auto auto; }
  .plx-menu-toggle { display:block; justify-self:end; }
  .plx-header-cta { display:none; }
  .plx-nav { display:none; grid-column:1 / -1; flex-direction:column; align-items:stretch; background:rgba(5,7,22,.94); border-radius:24px; padding:12px; }
  .plx-nav.is-open { display:flex; }
  .plx-nav a { text-align:center; }
  .plx-hero-grid, .plx-featured, .plx-founder, .plx-support-block, .plx-showcase-grid, .plx-footer-grid { grid-template-columns:1fr; }
  .plx-hero-art { min-height:420px; }
  .plx-card-grid, .plx-mobile-shots { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .plx-wrap { width:min(100% - 24px, 1180px); }
  .plx-brand img { width:150px; }
  .plx-title { font-size:48px; }
  .plx-hero { padding-top:120px; }
  .plx-hero-art { min-height:300px; border-radius:28px; }
  .plx-section { padding:64px 0; }
  .plx-actions { flex-direction:column; }
  .plx-btn { width:100%; }
  .plx-featured, .plx-founder, .plx-support-block, .plx-copy-card { padding:22px; }
  .plx-image-frame, .plx-showcase-card .plx-image-frame { min-height:250px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Devlog */
.plx-devlog-header { max-width: 860px; margin-bottom: 34px; }
.plx-devlog-heading { margin: 0 0 12px; font-size: clamp(52px, 8vw, 104px); line-height: 1.18; letter-spacing: -.052em; font-weight: 950; background: var(--plx-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 .08em .22em 0; overflow: visible; }
.plx-devlog-list { display: grid; gap: 18px; margin-top: 34px; }
.plx-devlog-item { padding: 0; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.plx-devlog-item:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.24); box-shadow: 0 28px 86px rgba(123, 69, 255, .22); }
.plx-devlog-link { position: relative; z-index: 2; display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 20px; padding: 22px; color: inherit; text-decoration: none; }
.plx-devlog-icon, .plx-devlog-article-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(145deg, rgba(19,184,255,.22), rgba(255,53,209,.18)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 34px rgba(19,184,255,.16); overflow: hidden; }
.plx-devlog-icon img, .plx-devlog-article-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plx-devlog-title { margin: 0 0 8px; font-size: clamp(24px, 3vw, 38px); line-height: 1.22; font-weight: 950; letter-spacing: -.035em; background: var(--plx-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 .08em .18em 0; overflow: visible; }
.plx-devlog-excerpt { margin: 0; color: var(--plx-muted); line-height: 1.6; }
.plx-devlog-date { display: grid; gap: 6px; justify-items: end; color: #fff; font-weight: 900; white-space: nowrap; }
.plx-devlog-date small { color: var(--plx-muted-2); font-size: 13px; font-weight: 800; }
.plx-devlog-pagination { margin-top: 30px; }
.plx-devlog-pagination .nav-links { display: flex; gap: 10px; flex-wrap: wrap; }
.plx-devlog-pagination a, .plx-devlog-pagination span { display: inline-flex; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 14px; border: 1px solid var(--plx-border); background: rgba(255,255,255,.07); color: #fff; text-decoration: none; font-weight: 900; }
.plx-devlog-pagination .current { background: var(--plx-gradient); border-color: transparent; }
.plx-devlog-empty { padding: 32px; margin-top: 34px; }
.plx-devlog-empty p { color: var(--plx-muted); }

.plx-devlog-article { padding: clamp(24px, 5vw, 48px); max-width: 980px; margin: 0 auto; }
.plx-devlog-back { display: inline-flex; margin-bottom: 26px; color: var(--plx-muted); text-decoration: none; font-weight: 900; }
.plx-devlog-back:hover { color: #fff; }
.plx-devlog-article-title-row { display: grid; grid-template-columns: 78px 1fr; gap: 20px; align-items: start; }
.plx-devlog-article-title { margin: 0; font-size: clamp(44px, 7vw, 84px); line-height: 1.18; letter-spacing: -.055em; font-weight: 950; background: var(--plx-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 .08em .22em 0; overflow: visible; }
.plx-devlog-article-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; color: var(--plx-muted); font-weight: 800; }
.plx-devlog-content { margin-top: 38px; color: var(--plx-muted); font-size: 18px; line-height: 1.82; }
.plx-devlog-content > *:first-child { margin-top: 0; }
.plx-devlog-content h2, .plx-devlog-content h3, .plx-devlog-content h4 { color: #fff; line-height: 1.15; letter-spacing: -.025em; margin-top: 34px; }
.plx-devlog-content h2 { font-size: clamp(30px, 4vw, 48px); }
.plx-devlog-content h3 { font-size: clamp(24px, 3vw, 34px); }
.plx-devlog-content p { margin: 0 0 20px; }
.plx-devlog-content a { color: #8bd3ff; font-weight: 800; }
.plx-devlog-content ul, .plx-devlog-content ol { padding-left: 1.4em; }
.plx-devlog-content img { display: block; max-width: 100%; height: auto; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 70px rgba(0,0,0,.28); }
.plx-devlog-content figure { margin: 28px 0; }
.plx-devlog-content figcaption { margin-top: 10px; color: var(--plx-muted-2); font-size: 14px; text-align: center; }
.plx-devlog-content blockquote { margin: 28px 0; padding: 20px 22px; border-left: 4px solid var(--plx-pink); border-radius: 18px; background: rgba(255,255,255,.07); color: #fff; }
.plx-devlog-article-footer { margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); color: var(--plx-muted); }
.plx-devlog-article-footer p { margin: 8px 0; }
.plx-devlog-article-updated { color: var(--plx-muted-2); font-size: 14px; }

/* Hero title cropping fix */
.plx-title { line-height: 1.02; letter-spacing: -.052em; padding: 0 .04em .08em 0; overflow: visible; }
.plx-title span, .plx-gradient-text { display: inline-block; padding: 0 .04em .06em 0; overflow: visible; }

@media (max-width: 760px) {
  .plx-devlog-link { grid-template-columns: 58px 1fr; gap: 14px; padding: 18px; }
  .plx-devlog-icon { width: 52px; height: 52px; border-radius: 15px; }
  .plx-devlog-date { grid-column: 2; justify-items: start; margin-top: 4px; }
  .plx-devlog-article-title-row { grid-template-columns: 1fr; }
  .plx-devlog-article-icon { width: 62px; height: 62px; }
}


/* Devlog title descender safety fix: prevents letters like g, y, j, p from being clipped. */
.plx-devlog-heading,
.plx-devlog-title,
.plx-devlog-article-title {
  display: inline-block;
  line-height: 1.18;
  padding-bottom: .22em;
  overflow: visible;
}
.plx-devlog-title { line-height: 1.22; padding-bottom: .18em; }