/* ============================================================================
   OMNISOLVER MODELS · base.css — reset + dark-premium components (glass, depth, glow).
   Load order: tokens.css -> base.css -> page css.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-base);
  line-height: var(--lh-body); color: var(--text); background: var(--bg-0);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  position: relative; min-height: 100vh; overflow-x: hidden;
}
/* layered aurora + grain depth — injected once, sits behind everything */
.osm-bg { position: fixed; inset: 0; z-index: -2; background: var(--aurora), var(--bg-0); pointer-events: none; }
.osm-bg::after { content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 3px 3px; opacity:.5; }
.osm-orb { position: fixed; z-index:-1; width: 46vw; height: 46vw; max-width:680px; max-height:680px;
  border-radius:50%; filter: blur(90px); opacity:.5; pointer-events:none;
  background: radial-gradient(circle, var(--teal-glow), transparent 70%); }
.osm-orb.b { background: radial-gradient(circle, var(--cyan-glow), transparent 70%); }

h1,h2,h3,h4 { margin: 0 0 .4em; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; }
h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); }
p { margin: 0 0 1em; } a { color: var(--teal); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--teal-hi); } img { max-width: 100%; display: block; }
::selection { background: rgba(34,199,182,.28); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius:6px; border:2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--surface-4); }
.mono { font-family: var(--font-mono); } .muted { color: var(--text-muted); } .small { font-size: var(--fs-sm); }
.center { text-align: center; } .hidden { display: none !important; }
[hidden] { display: none !important; }   /* attribute must win over component display rules (fixes leftover skeletons) */
.eyebrow { font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--teal); font-weight: 600; }
.gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.teal-text { background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Icons ---- */
.icon { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex:none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }

/* ---- Brand wordmark ---- */
.brand { display: inline-flex; align-items: center; gap: .5em; font-weight: 650; color: var(--text);
  letter-spacing: -0.02em; font-size: var(--fs-md); }
.brand .brand-mark { width: 27px; height: 27px; flex: none; filter: drop-shadow(0 0 8px rgba(34,199,182,.45)); }
.brand .accent { color: var(--teal); } .brand .sub { color: var(--text-muted); font-weight: 600; }

/* ---- Layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
.wrap-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--s-5); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row.wrap-r { flex-wrap: wrap; } .grow { flex: 1; } .spacer { flex: 1; }
.grid { display: grid; gap: var(--s-4); }
.section { padding: var(--s-11) 0; } .section-sm { padding: var(--s-9) 0; }

/* ---- Buttons ----  (hover NEVER changes text color or drops the fill; colored
   variants brighten via filter so the label is always readable — fixes the "text
   disappears / button goes pale on hover" bug) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: inherit;
  font-weight: 600; font-size: var(--fs-sm); cursor: pointer; padding: 10px 17px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  transition: transform var(--t-fast) var(--ease), background var(--t-mid) var(--ease),
    border-color var(--t-mid), box-shadow var(--t-mid), filter var(--t-fast);
  white-space: nowrap; text-decoration: none; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn:disabled,.btn[disabled] { opacity:.45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
/* default/ghost/danger get a bg brighten; colored variants are excluded so their fill survives */
.btn:not(.btn-primary):not(.btn-copper):hover { background: var(--surface-3); border-color: var(--line-strong); }
.btn-primary { background: var(--grad-teal); color: var(--text-ink); border-color: transparent; box-shadow: var(--glow-teal); font-weight: 650; }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px var(--line-teal), 0 16px 50px rgba(34,199,182,.34); }
.btn-copper { background: var(--grad-copper); color:#241606; border-color: transparent; }
.btn-copper:hover { filter: brightness(1.06); box-shadow: 0 14px 44px rgba(214,160,106,.32); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--glass-bg); }
.btn-danger { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-soft); }
.btn-danger:hover { background: var(--danger-soft); filter: brightness(1.12); }
.btn-lg { padding: 13px 26px; font-size: var(--fs-base); border-radius: var(--r-md); }
.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.btn-icon { padding: 8px; width: 38px; height: 38px; }
.btn-block { width: 100%; }

/* ---- Cards (glass + depth) ---- */
.card { position: relative; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2), var(--sh-inset); }
.card.glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-color: var(--glass-border); }
.card-p { padding: var(--s-6); }
.card-hover { transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid); will-change: transform; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-3), var(--glow-soft); border-color: var(--line-teal); }
/* gradient hairline at the top edge for premium depth */
.card.edge::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--glass-hi), transparent); }

/* ---- Chips / metrics / badges ---- */
.chip { display: inline-flex; align-items: center; gap: .35em; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; background: var(--glass-bg); color: var(--text-2); border: 1px solid var(--line); }
.chip-teal { background: rgba(34,199,182,.14); color: var(--teal-hi); border-color: var(--line-teal); }
.metric-chip { display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 13px; border-radius: var(--r-sm);
  background: var(--glass-bg); border: 1px solid var(--line); min-width: 66px; }
.metric-chip b { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--teal-hi); font-weight: 600; }
.metric-chip span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.badge { display: inline-flex; align-items: center; gap:.3em; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.badge-official { background: var(--grad-copper); color:#241606; box-shadow: 0 0 16px rgba(214,160,106,.35); }
.badge-new { background: rgba(34,199,182,.16); color: var(--teal-hi); }
.badge-optimized { background: var(--ok-soft); color: var(--ok); }
.badge-free { background: var(--glass-bg); color: var(--text-2); border: 1px solid var(--line); }
.badge-reported,.badge-hidden { background: var(--warn-soft); color: var(--warn); }
.badge-removed { background: var(--danger-soft); color: var(--danger); }

/* ---- Forms ---- */
label.lbl { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin: 0 0 6px; }
.field, textarea.field, select.field { width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--surface-ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 10px 13px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field:focus, textarea.field:focus, select.field:focus { border-color: var(--teal); box-shadow: var(--ring); outline: none; }
.field::placeholder { color: var(--text-faint); }
textarea.field { resize: vertical; min-height: 84px; line-height: 1.5; }
select.field { appearance: none; -webkit-appearance:none; background-image: linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position: calc(100% - 16px) center,calc(100% - 11px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; }
.help { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 5px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; background: var(--surface-3); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); cursor: pointer; box-shadow: 0 0 12px var(--teal-glow); border: 2px solid var(--bg-0); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); cursor: pointer; border: 2px solid var(--bg-0); }

/* ---- Top nav (glass) ---- */
.nav { position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-h);
  background: rgba(9,11,15,.72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: var(--s-5); max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--s-5); }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 7px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 550; color: var(--text-2); }
.nav-links a:hover { background: var(--glass-bg); color: var(--text); }
.nav-links a.active { color: var(--teal-hi); background: rgba(34,199,182,.12); }
.credit-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; }
.credit-pill b { font-family: var(--font-mono); color: var(--teal-hi); }

/* ---- Progress / stage rail ---- */
.progress { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--grad-teal); width: 0; transition: width var(--t-mid) var(--ease); box-shadow: 0 0 12px var(--teal-glow); }
.stage-rail { display: flex; flex-direction: column; gap: 7px; }
.stage-rail .st { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--text-muted); }
.stage-rail .st .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); border: 1.5px solid var(--line-strong); flex: none; }
.stage-rail .st.done { color: var(--text-2); } .stage-rail .st.done .dot { background: var(--ok); border-color: var(--ok); }
.stage-rail .st.active { color: var(--teal-hi); font-weight: 600; } .stage-rail .st.active .dot { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 4px rgba(34,199,182,.2); }

/* ---- Modal ---- */
.pp-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(4,6,9,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--s-5); opacity: 0; pointer-events: none; transition: opacity var(--t-mid); }
.pp-overlay.open { opacity: 1; pointer-events: auto; }
.pp-modal { background: var(--surface-1); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--sh-4), var(--sh-inset); width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; transform: translateY(10px) scale(.98); transition: transform var(--t-mid) var(--ease-out); }
.pp-overlay.open .pp-modal { transform: none; }
.pp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-5) var(--s-3); }
.pp-modal-body { padding: 0 var(--s-5) var(--s-5); }

/* ---- Toast ---- */
.toast-host { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); }
.toast { background: var(--surface-2); color: var(--text); padding: 11px 16px; border-radius: var(--r-sm); box-shadow: var(--sh-3); font-size: var(--fs-sm); max-width: 340px; border:1px solid var(--line); animation: toast-in var(--t-mid) var(--ease-out); }
.toast.ok { border-left: 3px solid var(--teal); } .toast.err { border-left: 3px solid var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Tables ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr:hover td { background: var(--glass-bg); }

/* ---- Empty / footer / skeleton ---- */
.empty { text-align: center; padding: var(--s-11) var(--s-5); color: var(--text-muted); }
.empty .icon { width: 42px; height: 42px; stroke-width: 1.3; color: var(--text-faint); margin-bottom: var(--s-3); }
.footer { border-top: 1px solid var(--line); margin-top: var(--s-12); padding: var(--s-9) 0; color: var(--text-muted); font-size: var(--fs-sm); }
.footer a { color: var(--text-2); } .footer a:hover { color: var(--teal-hi); }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r-sm); }
@keyframes sk { to { background-position: -200% 0; } }

/* ---- Depth utilities: scroll reveal + hover tilt (driven by fx.js) ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.tilt { transform-style: preserve-3d; transition: transform var(--t-mid) var(--ease); }
.float { animation: floaty 6s var(--ease-in-out) infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.spin-slow { animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Hero canvas scene (shared by landing; powered by hero3d.js) ---- */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.04fr 1fr; gap: var(--s-9);
  align-items: center; min-height: min(74vh, 700px); padding: var(--s-8) 0 var(--s-10); }
.hero-stage { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 560px; margin-inline: auto; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-canvas.is-hidden { display: none; }
.hero-orbits { position: absolute; inset: 0; pointer-events: none; }
.agent-chip { position: absolute; left: 50%; top: 50%; padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
  white-space: nowrap; box-shadow: var(--sh-1); will-change: transform, opacity; }
.agent-chip .d { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  margin-right: 6px; box-shadow: 0 0 8px var(--teal-glow); vertical-align: 1px; }
.hero-fallback { position: absolute; inset: 0; display: none; place-items: center; }
.hero-fallback.is-shown { display: grid; }

/* ---- Metric bars (model passport / quality breakdown) ---- */
.mbars { display: flex; flex-direction: column; gap: 11px; }
.mbar { display: grid; grid-template-columns: 116px 1fr 48px; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.mbar .lbl { color: var(--text-2); } .mbar .track { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.mbar .fill { height: 100%; background: var(--grad-teal); border-radius: 4px; box-shadow: 0 0 10px var(--teal-glow); transition: width var(--t-slow) var(--ease-out); }
.mbar .val { text-align: right; font-family: var(--font-mono); color: var(--text); }

/* ---- Score / quality ring (conic, no JS) ---- */
.ring { --p: 0; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--teal) calc(var(--p) * 3.6deg), var(--surface-3) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface-1); }
.ring b { position: relative; font-family: var(--font-mono); font-size: var(--fs-md); color: var(--teal-hi); }

/* ---- Abstract asset visual (NO rendered model) — wireframe glyph on a gradient tile ---- */
/* a "preview from the studio" — dark viewport with a faint floor grid + vignette */
.asset-viz { position: relative; aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden;
  background: var(--grad-hero); display: grid; place-items: center; border: 1px solid var(--line-soft); }
.asset-viz::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(34,199,182,0.07) 1px, transparent 1px) 0 0 / 100% 26px,
              linear-gradient(90deg, rgba(34,199,182,0.07) 1px, transparent 1px) 0 0 / 26px 100%;
  -webkit-mask: radial-gradient(120% 92% at 50% 34%, #000 28%, transparent 82%);
          mask: radial-gradient(120% 92% at 50% 34%, #000 28%, transparent 82%); }
.asset-viz::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55); border-radius: inherit; }
.asset-viz .glyph { position: relative; z-index: 1; width: 44%; height: 44%; color: var(--teal); opacity: .7; filter: drop-shadow(0 0 16px var(--teal-glow)); }
.asset-viz .glyph.mesh { width: 82%; height: 82%; opacity: .85; }
.asset-viz .corner { position: absolute; z-index: 2; bottom: 9px; right: 11px; font-family: var(--font-mono);
  font-size: var(--fs-xs); color: var(--text-2); }
.asset-viz.copper { background: radial-gradient(120% 120% at 50% 18%, rgba(214,160,106,0.13), transparent 62%), var(--surface-ink); }
.asset-viz.copper .glyph { color: var(--copper); filter: drop-shadow(0 0 14px rgba(214,160,106,.4)); }

/* ---- Pricing tier cards (shared: landing + billing modal) ---- */
.price { position: relative; padding: var(--s-6); display: flex; flex-direction: column; }
.price-featured { border-color: var(--line-teal); box-shadow: var(--glow-teal); }
.price .price-tag { position: absolute; top: 14px; right: 14px; }
.price-amt { font-size: var(--fs-2xl); font-weight: 700; margin: 8px 0 2px; letter-spacing: -0.02em; }
.price-amt span { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.price-tagline { margin-bottom: var(--s-4); }
.price-feats { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-direction: column; gap: 9px; }
.price-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-sm); color: var(--text-2); }
.price-feats .feat-ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--teal); stroke-width: 2.2; }
.price .plan-btn { margin-top: auto; }     /* pin CTA to the bottom so cards align */
.price-grid-modal { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (max-width: 460px) { .price-grid-modal { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-stage { max-width: 400px; order: -1; } }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .wrap, .wrap-wide, .nav-inner { padding: 0 var(--s-4); }
  .section { padding: var(--s-9) 0; }
}