/* ═══════════════════════════════════════════════════════════════
   PolyXR — single-page marketing site, generated from the design file.
   The layout lives inline in index.html exactly as designed; this file
   carries the shared base, interaction states, and responsive rules.
   Brand: iRex green #7ED957 on charcoal #24272E / deep black #0E0E0E.
   ═══════════════════════════════════════════════════════════════ */

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:#08090A;color:#fff;font-family:Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
  a{color:#7ED957;text-decoration:none;}
  a:hover{color:#A8EC89;}
  :focus-visible{outline:2px solid #7ED957;outline-offset:2px;border-radius:4px;}
  details > summary{list-style:none;cursor:pointer;}
  details > summary::-webkit-details-marker{display:none;}
  @keyframes px-float{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
  @keyframes px-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
  @keyframes px-popup{0%,5%{opacity:0;transform:scale(.72) translateY(7px)}11%,27%{opacity:1;transform:scale(1) translateY(0)}33%,100%{opacity:0;transform:scale(.72) translateY(7px)}}
  .px-navlinks{display:flex;}
  .px-burger{display:none;}
  @media (max-width:960px){
    .px-navlinks{display:none;}
    .px-burger{display:inline-flex;}
  }
  @media (max-width:1024px){
    .px-hero-icons{position:static !important;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:30px;}
    .px-hero-icon{position:static !important;top:auto !important;left:auto !important;right:auto !important;animation:none !important;}
    .px-scatter{min-height:0 !important;}
    .px-scatter-center{position:static !important;transform:none !important;left:auto !important;top:auto !important;width:auto !important;margin:0 auto clamp(30px,6vw,44px) !important;}
    .px-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
    .px-tile-float{position:static !important;animation:none !important;width:auto !important;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation:none !important;}
  }

/* ── Hover states (converted from the design's style-hover) ── */
.hv-primary:hover { background:#6BC943 !important; box-shadow:0 12px 36px rgba(126,217,87,0.28); }
.hv-ghost:hover { border-color:#7ED957 !important; color:#A8EC89 !important; }
.hv-card:hover { border-color:rgba(126,217,87,0.35) !important; background:rgba(126,217,87,0.04) !important; }
.hv-border:hover { border-color:rgba(126,217,87,0.35) !important; }
.hv-icon:hover { color:#7ED957 !important; border-color:rgba(126,217,87,0.4) !important; }
.hv-link:hover { color:#7ED957 !important; }

/* ── Form fields (converted from style-focus) ── */
.px-input:focus { outline:none; border-color:#7ED957 !important; box-shadow:0 0 0 3px rgba(126,217,87,0.18); }
select.px-input {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23808691' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
select.px-input:invalid { color:rgba(255,255,255,0.4); }
#wl-status:not([hidden]) { display:flex; }
#wl-submit:disabled { opacity:0.6; cursor:default; }

/* ── Mobile menu ── */
.px-menu { display:none; }
.px-menu.open { display:flex; }

/* ── Mobile refinements ── */
@media (max-width:720px){
  /* The use-case cross collapses to a single, left-aligned column. */
  .px-uc-grid { grid-template-columns:1fr !important; }
  .px-uc-grid > div {
    border-right:0 !important;
    border-bottom:1px solid rgba(126,217,87,0.35) !important;
    text-align:left !important; align-items:flex-start !important;
  }
  .px-uc-grid > div:last-child { border-bottom:0 !important; }
}
@media (max-width:520px){
  .px-hero-icons { gap:10px !important; }
  .px-hero-icon { width:62px !important; height:62px !important; }
}