/* SEO Fixlist — premium "diagnostic software" design layer.
   Product operated by SOAS Group LLC. Layered on top of the existing token
   system so all backend-driven components keep working; this file introduces
   the premium homepage look and richer surfaces, in dark (default) and light.

   Palette: dark graphite backgrounds, deep blue surfaces, luminous cyan detail,
   controlled violet accent, green success, coral critical, orange high,
   amber medium, blue low. Color is used sparingly against restrained graphite. */

:root {
  /* Premium brand accents (shared) */
  --px-cyan: #38E1D6;
  --px-cyan-soft: #7FEDE5;
  --px-blue: #2E7BE4;
  --px-violet: #8B7BF0;
  --px-green: #3FD08B;
  --px-coral: #FF6B5E;
  --px-orange: #F59148;
  --px-amber: #E7B24A;
  --px-low: #5A8FD6;
}

/* ---------- Dark (default premium look) ---------- */
:root[data-theme="dark"] {
  --canvas: #0B0F14;          /* dark graphite */
  --surface: #111823;         /* deep blue surface */
  --surface-alt: #0F1620;
  --panel-warm: #121B27;
  --ink: #EAF0F6;
  --slate: #9BB0C2;
  --muted: #64778A;
  --border: #1E2A38;
  --border-strong: #2C3C4E;
  --row-line: #18222E;

  --accent: #17A7B4;          /* cyan-teal for controls */
  --accent-dark: #128A96;
  --accent-deep: #58E0DA;     /* luminous cyan for text/links */
  --accent-tint: #0E2A2E;
  --accent-border: #1C4A4E;

  /* Severity re-mapped to the premium palette */
  --crit: #FF6B5E;  --crit-text: #FF9E95;  --crit-bg: #2A1512;  --crit-border: #5A2620;
  --high: #F59148;  --high-text: #F7B584;  --high-bg: #271A0E;  --high-border: #55381B;
  --med:  #E7B24A;  --med-text:  #EED08A;  --med-bg:  #241E0C;  --med-border: #4C3F17;
  --low:  #5A8FD6;  --low-text:  #9CC0EC;  --low-bg:  #10202F;  --low-border: #274058;
  --pass: #3FD08B;  --pass-text: #8CE3BC;  --pass-bg: #0E2519;  --pass-border: #1E4A34;

  --chart-1: #38E1D6; --chart-2: #5A8FD6; --chart-3: #F59148; --chart-4: #E7B24A; --chart-grid: #1C2A38;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px rgba(3,8,14,.55);
  --shadow-lg: 0 24px 60px rgba(2,6,12,.7);

  /* Premium-only surface tokens */
  --px-page-grad: radial-gradient(1200px 700px at 78% -5%, rgba(46,123,228,.14), transparent 60%),
                  radial-gradient(900px 600px at 12% 8%, rgba(56,225,214,.06), transparent 55%),
                  #0B0F14;
  --px-glass: rgba(19,29,42,.62);
  --px-glass-border: rgba(120,160,200,.14);
  --px-grid-line: rgba(120,160,200,.06);
  --px-glow-cyan: 0 0 0 1px rgba(56,225,214,.25), 0 0 34px rgba(56,225,214,.14);
  --px-hairline: rgba(140,175,210,.10);
}

/* ---------- Light (premium clean) ---------- */
:root[data-theme="light"], :root:not([data-theme]) {
  --px-page-grad: radial-gradient(1100px 640px at 80% -8%, rgba(46,123,228,.10), transparent 60%),
                  radial-gradient(820px 520px at 10% 4%, rgba(23,167,180,.06), transparent 55%),
                  #F4F7FB;
  --canvas: #F4F7FB;
  --surface: #FFFFFF;
  --surface-alt: #F7FAFD;
  --panel-warm: #FBFCFE;
  --ink: #10202F;
  --slate: #4A5B6E;
  --muted: #7C8C9C;
  --border: #E2E9F1;
  --border-strong: #CBD7E4;
  --row-line: #EDF2F7;
  --accent: #0E8F9B;
  --accent-dark: #0B7581;
  --accent-deep: #0B6E78;
  --accent-tint: #E1F5F5;
  --accent-border: #B4E1E1;
  --chart-1: #0E8F9B; --chart-2: #2E7BE4; --chart-3: #E0742C; --chart-4: #C79320; --chart-grid: #E6EDF4;
  --px-glass: rgba(255,255,255,.72);
  --px-glass-border: rgba(20,40,70,.10);
  --px-grid-line: rgba(20,60,110,.05);
  --px-glow-cyan: 0 0 0 1px rgba(14,143,155,.16), 0 0 26px rgba(14,143,155,.08);
  --px-hairline: rgba(20,50,90,.08);
}

/* ---------- Page canvas with depth + grid ---------- */
body.px { background: var(--px-page-grad); }
body.px::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
}
body.px > * { position: relative; z-index: 1; }

/* ---------- Glass surfaces ---------- */
.px-glass {
  background: var(--px-glass);
  border: 1px solid var(--px-glass-border);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.px-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.px-hairline { border: 1px solid var(--px-hairline); }
.px-glow { box-shadow: var(--px-glow-cyan); }

/* ---------- Type scale (premium) ---------- */
.px-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-deep);
}
.px-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.px-display {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.06; color: var(--ink);
}
.px-lead { font-size: clamp(1rem, 1.4vw, 1.18rem); color: var(--slate); line-height: 1.6; }
.px-kbd {
  font-family: var(--font-mono); font-size: .82em; color: var(--accent-deep);
  background: var(--accent-tint); border: 1px solid var(--accent-border);
  padding: 1px 7px; border-radius: 6px;
}

/* ---------- Buttons (premium) ---------- */
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.px-btn:hover { text-decoration: none; }
.px-btn-primary {
  color: #05201F; background: linear-gradient(180deg, var(--px-cyan), #16B7AE);
  box-shadow: 0 6px 22px rgba(56,225,214,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.px-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(56,225,214,.36), inset 0 1px 0 rgba(255,255,255,.5); }
.px-btn-ghost { color: var(--ink); background: transparent; border-color: var(--border-strong); }
.px-btn-ghost:hover { background: var(--surface-alt); border-color: var(--accent-border); }
.px-btn-lg { padding: 14px 26px; font-size: 15px; }

/* ---------- Severity chips ---------- */
.px-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid; line-height: 1;
}
.px-chip .d { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.px-chip-crit { color: var(--crit-text); background: var(--crit-bg); border-color: var(--crit-border); }
.px-chip-high { color: var(--high-text); background: var(--high-bg); border-color: var(--high-border); }
.px-chip-med  { color: var(--med-text);  background: var(--med-bg);  border-color: var(--med-border); }
.px-chip-low  { color: var(--low-text);  background: var(--low-bg);  border-color: var(--low-border); }
.px-chip-pass { color: var(--pass-text); background: var(--pass-bg); border-color: var(--pass-border); }
.px-chip .d { color: inherit; }

/* ---------- Section rhythm ---------- */
.px-section { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 24px; }
.px-section-head { max-width: 640px; margin-bottom: 40px; }
.px-section-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.015em; color: var(--ink); margin: 12px 0 10px; }
.px-section-head p { color: var(--slate); font-size: 1.02rem; line-height: 1.6; }

/* ---------- Feature dot grid card ---------- */
.px-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px; transition: border-color .2s ease, transform .2s ease;
}
.px-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.px-card .ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-border); margin-bottom: 14px;
}
.px-card .ico svg { width: 20px; height: 20px; }

/* ---------- Hero layout ---------- */
.px-hero { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(40px,6vw,84px) 24px clamp(48px,7vw,96px); }
.px-hero-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: 40px; align-items: center; }
.px-hero-stage { position: relative; min-height: 440px; border-radius: 20px; overflow: hidden; }
.px-hero-stage canvas { display: block; width: 100%; height: 100%; }
.px-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-hero-stage[data-webgl="on"] .px-hero-poster { opacity: 0; transition: opacity .6s ease; }

/* ---------- Reduced motion + no-webgl safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .px-btn:hover, .px-card:hover { transform: none; }
}

@media (max-width: 900px) {
  .px-hero-grid { grid-template-columns: 1fr; }
  .px-hero-stage { min-height: 320px; order: -1; }
}

/* Homepage diagnostic experience */
.px-stage-label{position:absolute;left:18px;top:18px;z-index:3;padding:8px 12px;border:1px solid var(--px-glass-border);border-radius:999px;background:rgba(9,14,21,.72);backdrop-filter:blur(10px);color:#dffdfa;font-size:12px;font-weight:600}.px-live-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--px-green);box-shadow:0 0 14px var(--px-green)}
.px-product-shell{max-width:1050px;margin:0 auto;display:grid;grid-template-columns:72px 1fr;border:1px solid var(--px-glass-border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}.px-preview-rail{padding:20px 14px;background:rgba(8,13,20,.45);border-right:1px solid var(--px-hairline);display:flex;align-items:center;flex-direction:column;gap:20px}.px-mini-brand{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--px-cyan),var(--px-blue));color:#071218;font-weight:800}.px-preview-rail span{width:24px;height:6px;border-radius:6px;background:var(--border-strong)}.px-preview-main{padding:clamp(22px,4vw,44px)}.px-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.px-metric-grid div{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt)}.px-metric-grid strong{display:block;font:700 24px/1 var(--font-display);color:var(--ink)}.px-metric-grid span{font-size:12px;color:var(--muted)}
.px-journey-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.px-journey-card{position:relative;padding:24px;min-height:330px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,var(--surface),var(--surface-alt));overflow:hidden}.px-journey-card>span{font:600 12px var(--font-mono);color:var(--px-cyan)}.px-journey-card h3{margin-top:18px}.px-journey-card p{color:var(--slate)}.px-orbit{height:130px;margin:20px 0;position:relative;border-radius:18px;background:radial-gradient(circle at center,rgba(56,225,214,.16),transparent 48%),linear-gradient(135deg,rgba(46,123,228,.08),transparent)}.px-orbit:before,.px-orbit:after{content:"";position:absolute;border:1px solid rgba(56,225,214,.35);border-radius:50%;inset:28px 18px;transform:rotate(-12deg)}.px-orbit:after{inset:48px 46px;border-color:rgba(139,123,240,.45);box-shadow:0 0 24px rgba(56,225,214,.12)}.px-orbit-sort:after{border-color:var(--px-orange)}.px-orbit-fix:after{border-color:var(--px-green)}.px-orbit-progress:after{border-color:var(--px-blue)}
.px-check-grid,.px-audience-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.px-check-card{padding:24px;border-top:1px solid var(--border);background:linear-gradient(180deg,transparent,rgba(46,123,228,.03))}.px-check-card svg{width:24px;height:24px;color:var(--px-cyan)}.px-check-card h3{margin:15px 0 8px}.px-check-card p{margin:0;color:var(--slate)}
.px-progress-card{max-width:1000px;margin:0 auto;padding:36px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;border:1px solid var(--px-glass-border);border-radius:22px}.px-progress-line{height:220px;display:flex;align-items:end;gap:16px;border-left:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px}.px-progress-line i{flex:1;display:block;border-radius:10px 10px 2px 2px;background:linear-gradient(180deg,var(--px-cyan),var(--px-blue));box-shadow:0 0 24px rgba(56,225,214,.14)}.px-progress-copy p{color:var(--slate)}
.px-faq{max-width:900px;margin:0 auto}.px-faq details{border-bottom:1px solid var(--border);padding:18px 4px}.px-faq summary{cursor:pointer;font-weight:600;color:var(--ink)}.px-faq p{max-width:760px;color:var(--slate)}
.text-center{text-align:center}.mt-4{margin-top:24px}
@media(max-width:900px){.px-journey-grid{grid-template-columns:repeat(2,1fr)}.px-check-grid,.px-audience-grid{grid-template-columns:1fr 1fr}.px-metric-grid{grid-template-columns:1fr 1fr}.px-progress-card{grid-template-columns:1fr}}
@media(max-width:620px){.px-product-shell{grid-template-columns:1fr}.px-preview-rail{display:none}.px-journey-grid,.px-check-grid,.px-audience-grid{grid-template-columns:1fr}.px-metric-grid{grid-template-columns:1fr 1fr}.px-progress-card{padding:22px}.px-progress-line{height:170px}}