/* ============================================
   MNSE — Medical Neuro-Symbolic Engine
   Product page styles. Builds on style.css + product.css
   (same palette, fonts, animated background, nav, modal, footer).
   ============================================ */

:root {
    --mnse-green: #00ff88;
    --mnse-cyan: #00f5ff;
    --mnse-purple: #7b2ff7;
    --mnse-grad: linear-gradient(135deg, var(--mnse-green) 0%, var(--mnse-cyan) 55%, var(--mnse-purple) 100%);
}

/* ---- Hero accents ---- */
.mnse-page .product-title .title-main {
    background: var(--mnse-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mnse-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--mnse-green);
    margin-bottom: 18px;
}

.mnse-eyebrow .pulse {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--mnse-green);
    box-shadow: 0 0 10px var(--mnse-green), 0 0 22px var(--mnse-green);
    animation: mnsePulse 1.6s ease-in-out infinite;
}
@keyframes mnsePulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .4; transform: scale(.7);} }

/* Big hero metric strip */
.mnse-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}
.mnse-hero-metric {
    flex: 1 1 150px;
    padding: 18px 20px;
    border: 1px solid var(--border-glow);
    border-radius: 16px;
    background: rgba(0, 245, 255, 0.04);
    backdrop-filter: blur(8px);
}
.mnse-hero-metric .mhm-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1;
    background: var(--mnse-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mnse-hero-metric .mhm-label {
    display: block;
    margin-top: 8px;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    color: var(--text-secondary);
    letter-spacing: .5px;
}

/* ============================================
   "NOT AN LLM" — VS COMPARISON
   ============================================ */
.vs-section { padding: 100px 8% 60px; position: relative; }

.vs-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    max-width: 1180px;
    margin: 0 auto;
    align-items: stretch;
}
.vs-col {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 34px 30px;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
}
.vs-col.vs-llm { border-color: rgba(255, 0, 106, 0.25); }
.vs-col.vs-mnse {
    border-color: var(--mnse-green);
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.12);
    background: linear-gradient(180deg, rgba(0,255,136,0.06), rgba(15,15,25,0.85));
}
.vs-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px;
}
.vs-head .material-icons-round { font-size: 30px; }
.vs-llm .vs-head .material-icons-round { color: var(--accent-pink); }
.vs-mnse .vs-head .material-icons-round { color: var(--mnse-green); }
.vs-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.vs-sub { font-family: var(--font-heading); color: var(--text-muted); font-size: .9rem; margin-bottom: 22px; }
.vs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.vs-list li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-body); color: var(--text-secondary); font-size: .98rem; line-height: 1.45; }
.vs-list li .material-icons-round { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.vs-llm .vs-list li .material-icons-round { color: var(--accent-pink); }
.vs-mnse .vs-list li .material-icons-round { color: var(--mnse-green); }
.vs-mnse .vs-list li strong { color: var(--text-primary); }

.vs-divider {
    display: flex; align-items: center; justify-content: center;
    padding: 0 10px;
}
.vs-orb {
    width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1rem;
    color: #000;
    background: var(--mnse-grad);
    box-shadow: 0 0 30px rgba(0,245,255,.4);
}

/* ============================================
   ARCHITECTURE STACK
   ============================================ */
.arch-section { padding: 90px 8%; }
.arch-stack {
    max-width: 980px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 0;
    position: relative;
}
.arch-layer {
    border: 1px solid var(--border-glow);
    border-radius: 18px;
    padding: 26px 30px;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
}
.arch-layer + .arch-connector { height: 34px; display: grid; place-items: center; }
.arch-connector .material-icons-round { color: var(--mnse-cyan); opacity: .7; animation: archFlow 2s ease-in-out infinite; }
@keyframes archFlow { 0%,100% { transform: translateY(-3px); opacity:.4;} 50% { transform: translateY(3px); opacity:.9;} }

.arch-layer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.arch-badge {
    font-family: var(--font-heading); font-size: .72rem; letter-spacing: 1.5px;
    text-transform: uppercase; padding: 4px 12px; border-radius: 30px;
}
.arch-badge.neural { background: rgba(123,47,247,.18); color: #c9a6ff; border: 1px solid rgba(123,47,247,.4); }
.arch-badge.symbolic { background: rgba(0,255,136,.14); color: var(--mnse-green); border: 1px solid rgba(0,255,136,.4); }
.arch-badge.render { background: rgba(0,245,255,.14); color: var(--mnse-cyan); border: 1px solid rgba(0,245,255,.4); }
.arch-layer h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.arch-layer p { font-family: var(--font-body); color: var(--text-secondary); line-height: 1.5; }
.arch-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.arch-tag {
    font-family: var(--font-heading); font-size: .8rem; color: var(--text-secondary);
    padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.03);
}

/* ============================================
   BENCHMARK BARS
   ============================================ */
.bench-section { padding: 90px 8%; }
.bench-wrap { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.bench-row { }
.bench-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.bench-name { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); font-size: 1.02rem; }
.bench-name small { color: var(--text-muted); font-weight: 400; font-size: .8rem; margin-left: 8px; }
.bench-val { font-family: var(--font-display); font-weight: 700; color: var(--mnse-green); }
.bench-track { height: 14px; border-radius: 30px; background: rgba(255,255,255,.06); overflow: hidden; }
.bench-fill {
    height: 100%; width: 0; border-radius: 30px;
    background: var(--mnse-grad);
    box-shadow: 0 0 16px rgba(0,255,136,.5);
    transition: width 1.6s cubic-bezier(.2,.8,.2,1);
}
.bench-foot { font-family: var(--font-body); color: var(--text-muted); font-size: .82rem; margin-top: 6px; }

/* ============================================
   COST LEDGER
   ============================================ */
.cost-section { padding: 90px 8% 70px; }
.cost-grid {
    max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 22px;
}
.cost-card {
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
    padding: 30px 26px; background: var(--bg-card); backdrop-filter: blur(10px);
    position: relative; overflow: hidden;
}
.cost-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at top right, rgba(0,255,136,.08), transparent 60%);
}
.cost-op { font-family: var(--font-heading); color: var(--text-secondary); font-size: .9rem; letter-spacing: .5px; }
.cost-op .material-icons-round { font-size: 18px; vertical-align: -4px; margin-right: 6px; color: var(--mnse-cyan); }
.cost-was { font-family: var(--font-body); color: var(--accent-pink); text-decoration: line-through; opacity: .7; margin-top: 16px; font-size: .95rem; }
.cost-now {
    font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
    margin-top: 6px;
    background: var(--mnse-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cost-now small { font-size: .9rem; -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); font-family: var(--font-heading); }
.cost-note { font-family: var(--font-body); color: var(--text-secondary); font-size: .88rem; margin-top: 14px; line-height: 1.45; }

.cost-headline {
    max-width: 900px; margin: 0 auto 50px; text-align: center;
}
.cost-headline .big {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(3rem, 9vw, 6rem); line-height: 1;
    background: var(--mnse-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cost-headline .big-sub { font-family: var(--font-heading); color: var(--text-secondary); font-size: 1.15rem; margin-top: 12px; letter-spacing: 1px; }

/* ============================================
   SUBSTRATE GRID
   ============================================ */
.substrate-grid {
    max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 16px;
}
.substrate-chip {
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    padding: 20px; background: var(--bg-card); backdrop-filter: blur(8px);
    transition: var(--transition-smooth);
}
.substrate-chip:hover { border-color: var(--mnse-green); transform: translateY(-4px); box-shadow: 0 0 24px rgba(0,255,136,.12); }
.substrate-chip .material-icons-round { color: var(--mnse-cyan); font-size: 26px; }
.substrate-chip h4 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin: 10px 0 4px; }
.substrate-chip p { font-family: var(--font-body); color: var(--text-muted); font-size: .85rem; line-height: 1.4; }

/* ============================================
   PIPELINE FLOW (what it powers)
   ============================================ */
.pipe-flow {
    max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap;
    align-items: stretch; justify-content: center; gap: 0;
}
.pipe-step {
    flex: 1 1 180px; min-width: 170px; text-align: center; padding: 24px 16px;
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: var(--bg-card);
    margin: 8px;
}
.pipe-step .material-icons-round { font-size: 30px; color: var(--mnse-green); }
.pipe-step h4 { font-family: var(--font-display); font-size: .98rem; margin: 10px 0 6px; }
.pipe-step p { font-family: var(--font-body); color: var(--text-muted); font-size: .82rem; line-height: 1.4; }
.pipe-step .pipe-tag { display: inline-block; margin-top: 10px; font-family: var(--font-heading); font-size: .72rem; letter-spacing: 1px; color: var(--mnse-green); border: 1px solid rgba(0,255,136,.4); border-radius: 20px; padding: 3px 10px; }

/* Disclaimer note */
.mnse-disclaimer {
    max-width: 900px; margin: 40px auto 0; text-align: center;
    font-family: var(--font-body); font-size: .82rem; color: var(--text-muted); line-height: 1.6;
}

/* Responsive */
@media (max-width: 860px) {
    .vs-grid { grid-template-columns: 1fr; gap: 16px; }
    .vs-divider { padding: 6px 0; }
    .vs-orb { width: 50px; height: 50px; }
}