/* ═══════════════════════════════════════════════
   Kanara AI — Public Website Styles
   Uses design tokens from variables.css
   ═══════════════════════════════════════════════ */

/* ── Reset & Base ── */
*,*::before,*::after { box-sizing:border-box; }
body {
    margin:0; padding:0;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color:var(--text-primary);
    background:var(--bg-primary);
    -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }


/* ═══════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════ */
.ws-nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    padding:1rem 0;
    background:transparent;
    transition:background .3s, box-shadow .3s, padding .3s;
}
.ws-nav.ws-nav-scrolled {
    background:rgba(10,22,40,0.97);
    box-shadow:0 2px 20px rgba(0,0,0,0.15);
    padding:.6rem 0;
    backdrop-filter:blur(10px);
}
.ws-nav-inner {
    display:flex; align-items:center; justify-content:space-between;
}
.ws-nav-brand img {
    height:32px; width:auto;
    filter: brightness(0) invert(1) sepia(0.15) saturate(4) hue-rotate(190deg) brightness(1.05) drop-shadow(0 1px 4px rgba(37,99,235,0.3));
}
.ws-nav-links {
    display:flex; align-items:center; gap:2rem;
}
.ws-nav-links a {
    color:rgba(255,255,255,0.75); font-size:.875rem; font-weight:500;
    text-decoration:none; transition:color .2s;
}
.ws-nav-links a:hover { color:#fff; }
.ws-nav-cta {
    display:flex; align-items:center; gap:.75rem;
}
.ws-nav-toggle {
    display:none; background:none; border:none; cursor:pointer;
    flex-direction:column; gap:5px; padding:.5rem;
}
.ws-nav-toggle span {
    display:block; width:22px; height:2px; background:#fff;
    transition:transform .3s;
}

/* Mobile nav */
@media (max-width:991px) {
    .ws-nav-toggle { display:flex; }
    .ws-nav-links {
        display:none; position:absolute; top:100%; left:0; right:0;
        flex-direction:column; background:rgba(10,22,40,0.98);
        padding:1.5rem 2rem; gap:1rem;
    }
    .ws-nav-links.ws-nav-open { display:flex; }
    .ws-nav-cta { display:none; }
}


/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.ws-btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:.6rem 1.4rem; border-radius:var(--radius);
    font-size:.875rem; font-weight:600; cursor:pointer;
    text-decoration:none; border:none; transition:all .2s;
    line-height:1.5;
}
.ws-btn-primary {
    background:var(--accent); color:#fff;
}
.ws-btn-primary:hover { background:var(--accent-hover); color:#fff; }
.ws-btn-outline {
    background:transparent; color:var(--accent);
    border:1.5px solid var(--accent);
}
.ws-btn-outline:hover { background:var(--accent); color:#fff; }
.ws-btn-ghost {
    background:transparent; color:rgba(255,255,255,0.8);
    border:1.5px solid rgba(255,255,255,0.25);
}
.ws-btn-ghost:hover { background:rgba(255,255,255,0.08); color:#fff; }
.ws-btn-white {
    background:#fff; color:var(--primary-color);
}
.ws-btn-white:hover { background:rgba(255,255,255,0.9); color:var(--primary-color); }
.ws-btn-lg { padding:.8rem 2rem; font-size:1rem; }
.ws-btn-block { width:100%; text-align:center; }


/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.ws-hero {
    position:relative; padding:10rem 0 6rem; overflow:hidden;
    background:linear-gradient(165deg, #020617 0%, #0a1e3d 40%, #0f172a 100%);
    text-align:center;
}
.ws-hero-bg {
    position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59,130,246,0.08) 0%, transparent 100%),
        radial-gradient(circle at 20% 80%, rgba(99,102,241,0.05) 0%, transparent 50%);
}
.ws-hero-inner {
    position:relative; z-index:2; max-width:750px; margin:0 auto;
}
.ws-pill {
    display:inline-flex; align-items:center; gap:.5rem;
    border:1px solid rgba(96,165,250,0.2); border-radius:100px;
    padding:.35rem 1.1rem; font-size:.7rem; font-weight:700;
    color:#60a5fa; letter-spacing:.08em; text-transform:uppercase;
    margin-bottom:2rem; background:rgba(59,130,246,0.06);
}
.ws-pill i { font-size:.4rem; animation:wsPulse 2s ease-in-out infinite; }
@keyframes wsPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.ws-hero h1 {
    font-size:clamp(2.2rem,5.5vw,3.5rem); font-weight:800;
    color:#fff; line-height:1.12; letter-spacing:-.03em; margin:0 0 1.5rem;
}
.ws-hero h1 em, h1 em, h2 em {
    font-style:normal;
    background:linear-gradient(135deg,#60a5fa,#818cf8);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.ws-hero-sub {
    font-size:1.12rem; color:rgba(255,255,255,0.55); line-height:1.7;
    margin:0 auto 2.5rem; max-width:600px;
}
.ws-hero-sub strong { color:rgba(255,255,255,0.8); }
.ws-hero-actions {
    display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
    margin-bottom:3rem;
}
.ws-hero-metrics {
    display:flex; justify-content:center; gap:0; flex-wrap:wrap;
    max-width:520px; margin:0 auto;
}
.ws-hero-metric {
    flex:1; text-align:center; padding:1rem 1.5rem;
    border-right:1px solid rgba(255,255,255,0.06);
}
.ws-hero-metric:last-child { border-right:none; }
.ws-hero-metric-value {
    display:block; font-size:.95rem; font-weight:700; color:#60a5fa;
    margin-bottom:.25rem;
}
.ws-hero-metric-label {
    display:block; font-size:.7rem; color:rgba(255,255,255,0.35);
    text-transform:uppercase; letter-spacing:.05em;
}


/* ═══════════════════════════════════════════════
   PAGE HERO (inner pages)
   ═══════════════════════════════════════════════ */
.ws-page-hero {
    padding:9rem 0 4rem;
    background:linear-gradient(160deg, #020617 0%, #0c1a38 40%, #111d42 70%, #0b1224 100%);
    text-align:center;
}
.ws-page-hero h1 {
    font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800;
    color:#fff; line-height:1.15; margin:.5rem 0 1rem;
    max-width:700px; margin-left:auto; margin-right:auto;
}
.ws-page-hero p {
    font-size:1.08rem; color:rgba(255,255,255,0.5); line-height:1.7;
    max-width:560px; margin:0 auto;
}


/* ═══════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════ */
.ws-section { padding:5rem 0; }
.ws-section-alt { background:var(--bg-secondary); }
.ws-section-header {
    text-align:center; max-width:620px; margin:0 auto 3.5rem;
}
.ws-overline {
    display:inline-block; font-size:.7rem; font-weight:700;
    color:var(--accent); letter-spacing:.1em; text-transform:uppercase;
    margin-bottom:.75rem;
}
.ws-page-hero .ws-overline { color:#60a5fa; }
.ws-section-header h2 {
    font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800;
    line-height:1.2; margin:0 0 1rem; color:var(--text-primary);
}
.ws-section-header p {
    font-size:1.05rem; color:var(--text-secondary); line-height:1.7;
}


/* ═══════════════════════════════════════════════
   CARDS (problem section)
   ═══════════════════════════════════════════════ */
.ws-cards-row {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:1.5rem;
}
.ws-card {
    padding:2rem; border-radius:var(--radius-lg);
    background:var(--bg-primary); border:1px solid var(--border-color);
    transition:box-shadow .2s, transform .2s;
}
.ws-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ws-card-icon {
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; margin-bottom:1.25rem;
}
.ws-card-problem .ws-card-icon {
    background:rgba(220,38,38,0.08); color:#dc2626;
}
.ws-card h3 { font-size:1.1rem; font-weight:700; margin:0 0 .6rem; }
.ws-card p { font-size:.92rem; color:var(--text-secondary); line-height:1.65; margin:0; }


/* ═══════════════════════════════════════════════
   FEATURES GRID (home)
   ═══════════════════════════════════════════════ */
.ws-features-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
    gap:2rem;
}
.ws-feature {
    padding:2rem; border-radius:var(--radius-lg);
    background:var(--bg-primary); border:1px solid var(--border-color);
    transition:box-shadow .2s;
}
.ws-feature:hover { box-shadow:var(--shadow-md); }
.ws-feature-icon {
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(37,99,235,0.08); color:var(--accent);
    font-size:1.2rem; margin-bottom:1.25rem;
}
.ws-feature h3 { font-size:1.05rem; font-weight:700; margin:0 0 .5rem; }
.ws-feature p { font-size:.9rem; color:var(--text-secondary); line-height:1.65; margin:0; }


/* ═══════════════════════════════════════════════
   FEATURE DETAIL (features page)
   ═══════════════════════════════════════════════ */
.ws-feature-detail {
    display:grid; grid-template-columns:1fr 1fr; gap:4rem;
    align-items:center; margin-bottom:1rem;
}
.ws-feature-detail-reverse { direction:rtl; }
.ws-feature-detail-reverse > * { direction:ltr; }
.ws-feature-detail-text h2 {
    font-size:1.6rem; font-weight:800; margin:.5rem 0 1rem;
}
.ws-feature-detail-text p {
    font-size:1rem; color:var(--text-secondary); line-height:1.7;
}
.ws-check-list {
    list-style:none; padding:0; margin:1.5rem 0 0;
}
.ws-check-list li {
    padding:.4rem 0; font-size:.92rem; color:var(--text-primary);
}
.ws-check-list i { color:var(--success-color); margin-right:.5rem; font-size:.8rem; }
.ws-feature-placeholder {
    width:100%; aspect-ratio:4/3; border-radius:var(--radius-lg);
    background:linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border:1px solid var(--border-color);
    display:flex; align-items:center; justify-content:center;
    font-size:3rem; color:var(--accent);
}
@media (max-width:767px) {
    .ws-feature-detail { grid-template-columns:1fr; gap:2rem; }
    .ws-feature-detail-reverse { direction:ltr; }
}


/* ═══════════════════════════════════════════════
   STEPS (home)
   ═══════════════════════════════════════════════ */
.ws-steps {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:2rem;
}
.ws-step { text-align:center; padding:1.5rem; }
.ws-step-num {
    width:48px; height:48px; border-radius:50%; margin:0 auto 1.25rem;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; font-weight:800; color:#fff;
    background:var(--gradient-accent);
}
.ws-step h3 { font-size:1.05rem; font-weight:700; margin:0 0 .5rem; }
.ws-step p { font-size:.9rem; color:var(--text-secondary); line-height:1.6; margin:0; }


/* ═══════════════════════════════════════════════
   HOW IT WORKS (detail page)
   ═══════════════════════════════════════════════ */
.ws-hiw-step {
    display:flex; gap:2.5rem; margin-bottom:3rem;
}
.ws-hiw-step-marker {
    display:flex; flex-direction:column; align-items:center; flex-shrink:0;
}
.ws-hiw-num {
    width:48px; height:48px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; font-weight:800; color:#fff;
    background:var(--gradient-accent); flex-shrink:0;
}
.ws-hiw-line {
    width:2px; flex:1; background:var(--border-color); margin-top:.75rem;
}
.ws-hiw-content h2 {
    font-size:1.4rem; font-weight:700; margin:0 0 .75rem;
}
.ws-hiw-content p {
    font-size:1rem; color:var(--text-secondary); line-height:1.7; margin:0 0 1rem;
}
.ws-hiw-highlights {
    display:flex; flex-wrap:wrap; gap:.6rem;
}
.ws-hiw-highlights span {
    display:inline-flex; align-items:center;
    background:var(--bg-secondary); border:1px solid var(--border-color);
    border-radius:100px; padding:.3rem .9rem;
    font-size:.78rem; font-weight:600; color:var(--text-primary);
}
@media (max-width:575px) {
    .ws-hiw-step { flex-direction:column; gap:1rem; }
    .ws-hiw-step-marker { flex-direction:row; gap:.75rem; }
    .ws-hiw-line { width:auto; height:2px; flex:1; margin-top:0; }
}


/* ═══════════════════════════════════════════════
   COMPARISON TABLE (how it works)
   ═══════════════════════════════════════════════ */
.ws-compare {
    display:grid; grid-template-columns:1fr 1fr; gap:2rem;
    max-width:800px; margin:0 auto;
}
.ws-compare-col {
    padding:2rem; border-radius:var(--radius-lg);
}
.ws-compare-old {
    background:rgba(220,38,38,0.03); border:1px solid rgba(220,38,38,0.12);
}
.ws-compare-new {
    background:rgba(5,150,105,0.03); border:1px solid rgba(5,150,105,0.12);
}
.ws-compare-col h3 {
    font-size:1rem; font-weight:700; margin:0 0 1rem;
}
.ws-compare-old h3 { color:#dc2626; }
.ws-compare-new h3 { color:var(--success-color); }
.ws-compare-col ul { list-style:none; padding:0; margin:0; }
.ws-compare-col li {
    padding:.45rem 0; font-size:.9rem; color:var(--text-secondary);
    border-bottom:1px solid rgba(0,0,0,0.04);
}
.ws-compare-col li:last-child { border-bottom:none; }
@media (max-width:575px) {
    .ws-compare { grid-template-columns:1fr; }
}


/* ═══════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════ */
.ws-pricing-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:1.5rem; max-width:960px; margin:0 auto;
}
.ws-pricing-card {
    position:relative; padding:2.5rem 2rem; border-radius:var(--radius-lg);
    background:var(--bg-primary); border:1px solid var(--border-color);
    text-align:center; transition:box-shadow .2s;
}
.ws-pricing-card:hover { box-shadow:var(--shadow-lg); }
.ws-pricing-featured {
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent), var(--shadow-lg);
}
.ws-pricing-badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:var(--accent); color:#fff; font-size:.7rem; font-weight:700;
    padding:.3rem 1rem; border-radius:100px; text-transform:uppercase;
    letter-spacing:.06em;
}
.ws-pricing-header h3 {
    font-size:1.3rem; font-weight:800; margin:0 0 .35rem;
}
.ws-pricing-desc {
    font-size:.85rem; color:var(--text-secondary); margin:0 0 1.5rem;
}
.ws-pricing-price { margin-bottom:1.5rem; }
.ws-pricing-amount {
    font-size:1.6rem; font-weight:800; color:var(--text-primary);
}
.ws-pricing-features {
    list-style:none; padding:0; margin:0 0 2rem; text-align:left;
}
.ws-pricing-features li {
    padding:.45rem 0; font-size:.88rem; color:var(--text-primary);
}
.ws-pricing-features i {
    color:var(--success-color); margin-right:.5rem; font-size:.75rem;
}


/* ═══════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════ */
.ws-faq { max-width:700px; margin:0 auto; }
.ws-faq-item {
    border:1px solid var(--border-color); border-radius:var(--radius);
    margin-bottom:.75rem; overflow:hidden;
}
.ws-faq-item summary {
    padding:1.1rem 1.5rem; font-size:.95rem; font-weight:600;
    cursor:pointer; list-style:none; display:flex; align-items:center;
    justify-content:space-between;
}
.ws-faq-item summary::-webkit-details-marker { display:none; }
.ws-faq-item summary::after {
    content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900;
    font-size:.7rem; color:var(--text-muted); transition:transform .2s;
}
.ws-faq-item[open] summary::after { transform:rotate(180deg); }
.ws-faq-item p {
    padding:0 1.5rem 1.2rem; margin:0;
    font-size:.9rem; color:var(--text-secondary); line-height:1.7;
}


/* ═══════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════ */
.ws-about-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:2rem;
}
.ws-about-block {
    padding:2rem; border-radius:var(--radius-lg);
    background:var(--bg-primary); border:1px solid var(--border-color);
}
.ws-about-icon {
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(37,99,235,0.08); color:var(--accent);
    font-size:1.2rem; margin-bottom:1.25rem;
}
.ws-about-block h3 { font-size:1.1rem; font-weight:700; margin:0 0 .6rem; }
.ws-about-block p {
    font-size:.92rem; color:var(--text-secondary); line-height:1.65; margin:0;
}


/* ═══════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════ */
.ws-contact-grid {
    display:grid; grid-template-columns:1.2fr .8fr; gap:4rem;
    max-width:900px; margin:0 auto;
}
@media (max-width:767px) {
    .ws-contact-grid { grid-template-columns:1fr; gap:2.5rem; }
}
.ws-form-group { margin-bottom:1.25rem; }
.ws-form-group label {
    display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem;
    color:var(--text-primary);
}
.ws-optional { font-weight:400; color:var(--text-muted); font-size:.78rem; }
.ws-form-group input,
.ws-form-group select,
.ws-form-group textarea {
    width:100%; padding:.65rem .9rem; border:1px solid var(--border-color);
    border-radius:var(--radius); font-size:.9rem; font-family:inherit;
    background:var(--bg-primary); color:var(--text-primary);
    transition:border-color .2s;
}
.ws-form-group input:focus,
.ws-form-group select:focus,
.ws-form-group textarea:focus {
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(37,99,235,0.08);
}
.ws-contact-info-block { margin-bottom:2rem; }
.ws-contact-info-icon {
    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(37,99,235,0.08); color:var(--accent);
    font-size:1rem; margin-bottom:.75rem;
}
.ws-contact-info h3 { font-size:.95rem; font-weight:700; margin:0 0 .3rem; }
.ws-contact-info p { font-size:.88rem; color:var(--text-secondary); margin:0; line-height:1.6; }
.ws-contact-info a { color:var(--accent); }


/* ═══════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════ */
.ws-cta {
    padding:5rem 0;
    background:linear-gradient(135deg, #020617 0%, #0a1e3d 50%, #0f172a 100%);
}
.ws-cta-inner {
    text-align:center; max-width:600px; margin:0 auto;
}
.ws-cta h2 {
    font-size:clamp(1.5rem,3vw,2rem); font-weight:800;
    color:#fff; margin:0 0 .75rem;
}
.ws-cta p {
    font-size:1.05rem; color:rgba(255,255,255,0.5); margin:0 0 2rem;
    line-height:1.7;
}


/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.ws-footer {
    background:var(--primary-color); color:rgba(255,255,255,0.5);
    padding:4rem 0 2rem;
}
.ws-footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:3rem;
    margin-bottom:3rem;
}
@media (max-width:767px) {
    .ws-footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:479px) {
    .ws-footer-grid { grid-template-columns:1fr; }
}
.ws-footer-logo {
    height:28px; margin-bottom:1rem;
    filter: brightness(0) invert(1) sepia(0.15) saturate(4) hue-rotate(190deg) brightness(1.05) drop-shadow(0 1px 4px rgba(37,99,235,0.3));
}
.ws-footer-brand p {
    font-size:.85rem; line-height:1.65; margin:0 0 1.25rem;
    color:rgba(255,255,255,0.4);
}
.ws-footer-social { display:flex; gap:.75rem; margin-top:.25rem; }
.ws-footer-social a {
    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(96,165,250,0.15); color:#93c5fd;
    border:1px solid rgba(96,165,250,0.35);
    font-size:1.1rem; transition:all .25s;
    text-decoration:none;
}
.ws-footer-social a:hover {
    background:#3b82f6; color:#fff;
    border-color:#3b82f6;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(59,130,246,0.35);
}
.ws-footer-col h4 {
    font-size:.78rem; font-weight:700; color:rgba(255,255,255,0.6);
    text-transform:uppercase; letter-spacing:.08em; margin:0 0 1rem;
}
.ws-footer-col a {
    display:block; font-size:.85rem; color:rgba(255,255,255,0.4);
    padding:.25rem 0; transition:color .2s;
}
.ws-footer-col a:hover { color:#fff; }
.ws-footer-bottom {
    border-top:1px solid rgba(255,255,255,0.06);
    padding-top:1.5rem; text-align:center;
}
.ws-footer-bottom p {
    font-size:.78rem; color:rgba(255,255,255,0.3); margin:0;
}


/* ═══════════════════════════════════════════════
   QUOTE CARDS  (home – frontier AI quotes)
   ═══════════════════════════════════════════════ */
.ws-quote-row {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem; margin-top:2rem;
}
.ws-quote-card {
    background:var(--bg-primary); border:1px solid var(--border-color);
    border-radius:12px; padding:2rem; position:relative;
}
.ws-quote-icon {
    font-size:1.5rem; color:var(--accent); margin-bottom:.75rem;
}
.ws-quote-card blockquote {
    margin:0 0 1rem; font-style:italic; font-size:.95rem;
    line-height:1.7; color:var(--text-primary);
}
.ws-quote-attr {
    font-size:.8rem; color:var(--text-secondary); font-weight:600;
}


/* ═══════════════════════════════════════════════
   TRUST BAR  (home – stats strip)
   ═══════════════════════════════════════════════ */
.ws-trust-bar {
    display:flex; justify-content:center; gap:3rem; flex-wrap:wrap;
    padding:3rem 0; border-top:1px solid var(--border-color);
    border-bottom:1px solid var(--border-color); margin:3rem 0;
}
.ws-trust-item { text-align:center; }
.ws-trust-value {
    display:block; font-size:1.8rem; font-weight:800; color:var(--accent);
}
.ws-trust-label {
    display:block; font-size:.78rem; color:var(--text-secondary);
    margin-top:.25rem;
}


/* ═══════════════════════════════════════════════
   NARRATIVE BLOCK  (why_causal_ai – NASA story)
   ═══════════════════════════════════════════════ */
.ws-narrative-block {
    background:var(--bg-secondary); border-radius:14px;
    padding:3rem; margin:2rem 0;
}
.ws-narrative-content {
    font-size:1.05rem; line-height:1.85; color:var(--text-primary);
}
.ws-narrative-content p { margin-bottom:1.25rem; }
.ws-narrative-highlight {
    border-left:3px solid var(--accent); padding-left:1.25rem;
    font-weight:600;
}


/* ═══════════════════════════════════════════════
   TIMELINE  (why_causal_ai – frontier AI)
   ═══════════════════════════════════════════════ */
.ws-timeline {
    position:relative; padding-left:2rem; margin:2rem 0;
}
.ws-timeline::before {
    content:''; position:absolute; left:7px; top:0; bottom:0;
    width:2px; background:var(--border-color);
}
.ws-timeline-item {
    position:relative; margin-bottom:2rem;
}
.ws-timeline-marker {
    position:absolute; left:-2rem; top:.35rem;
    width:16px; height:16px; border-radius:50%;
    background:var(--accent); border:3px solid var(--bg-primary);
}
.ws-timeline-content h4 { margin:0 0 .25rem; font-size:1rem; }
.ws-timeline-content p { margin:0; font-size:.9rem; color:var(--text-secondary); }


/* ═══════════════════════════════════════════════
   LADDER OF CAUSATION  (why_causal_ai – Pearl)
   ═══════════════════════════════════════════════ */
.ws-ladder {
    display:flex; flex-direction:column; gap:1.5rem; margin:2rem 0;
}
.ws-ladder-rung {
    display:flex; align-items:stretch; border-radius:12px;
    overflow:hidden; border:1px solid var(--border-color);
}
.ws-ladder-level {
    min-width:140px; display:flex; align-items:center; justify-content:center;
    padding:1.25rem; font-weight:700; color:#fff; font-size:.9rem;
    text-align:center;
}
.ws-ladder-content {
    padding:1.25rem 1.5rem; flex:1;
}
.ws-ladder-content h4 { margin:0 0 .25rem; font-size:1rem; }
.ws-ladder-content p { margin:0; font-size:.88rem; color:var(--text-secondary); }
.ws-ladder-1 .ws-ladder-level { background:#22c55e; }
.ws-ladder-2 .ws-ladder-level { background:var(--accent); }
.ws-ladder-3 .ws-ladder-level { background:#7c3aed; }

@media (max-width:575px) {
    .ws-ladder-rung { flex-direction:column; }
    .ws-ladder-level { min-width:auto; }
}


/* ═══════════════════════════════════════════════
   BADGE  (generic tag/badge)
   ═══════════════════════════════════════════════ */
.ws-badge {
    display:inline-block; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em;
    padding:.25rem .65rem; border-radius:4px;
    background:var(--bg-secondary); color:var(--text-secondary);
}
.ws-badge-accent { background:rgba(37,99,235,.1); color:var(--accent); }


/* ═══════════════════════════════════════════════
   DIGITAL TWIN VISUAL  (platform page)
   ═══════════════════════════════════════════════ */
.ws-twin-visual {
    max-width:600px; margin:2rem auto; text-align:center;
}
.ws-twin-layer {
    padding:1.5rem 2rem; border-radius:12px; margin-bottom:.75rem;
    background:var(--bg-secondary); border:1px solid var(--border-color);
    font-weight:600; font-size:.95rem;
}
.ws-twin-layer-digital {
    background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.12));
    border-color:var(--accent);
}
.ws-twin-arrow {
    font-size:1.2rem; color:var(--accent); margin:.25rem 0;
}
.ws-twin-items {
    display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap;
    margin-top:.5rem;
}
.ws-twin-label {
    font-size:.78rem; font-weight:600; color:var(--accent);
    background:rgba(37,99,235,.08); padding:.3rem .75rem;
    border-radius:20px;
}


/* ═══════════════════════════════════════════════
   USE CASE SCENARIO FLOW
   ═══════════════════════════════════════════════ */
.ws-scenario-flow {
    max-width:780px; margin:2rem auto 0;
}
.ws-scenario-step {
    position:relative; padding-left:3.5rem; margin-bottom:2.5rem;
}
.ws-scenario-step-header {
    display:flex; align-items:center; gap:1rem; margin-bottom:.75rem;
}
.ws-step-num {
    position:absolute; left:0; top:0;
    width:2.5rem; height:2.5rem; border-radius:50%;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1rem; flex-shrink:0;
}
.ws-scenario-step-header h3 { margin:0; font-size:1.15rem; }
.ws-scenario-step-body { font-size:.92rem; color:var(--text-secondary); line-height:1.7; }
.ws-scenario-step-body ul { margin:.5rem 0; }

/* Chat bubbles */
.ws-chat-bubble {
    display:inline-block; max-width:90%; padding:1rem 1.25rem;
    border-radius:14px; margin-bottom:.75rem; font-size:.92rem;
    line-height:1.6;
}
.ws-chat-user {
    background:var(--accent); color:#fff;
    border-bottom-left-radius:4px;
}
.ws-chat-ai {
    background:var(--bg-secondary); border:1px solid var(--border-color);
    color:var(--text-primary);
    border-bottom-right-radius:4px;
}

/* Scenario comparison cards */
.ws-scenario-cards {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1rem; margin-top:1rem;
}
.ws-scenario-card {
    background:var(--bg-primary); border:1px solid var(--border-color);
    border-radius:10px; padding:1.25rem; text-align:center;
}
.ws-scenario-card h4 {
    margin:0 0 .35rem; font-size:.85rem; color:var(--text-secondary);
    text-transform:uppercase; letter-spacing:.04em;
}
.ws-scenario-card p { margin:0 0 .75rem; font-size:.85rem; }
.ws-scenario-result {
    padding:.5rem; border-radius:8px; font-weight:700;
}
.ws-scenario-result span { display:block; font-size:1.1rem; }
.ws-scenario-result small { font-size:.72rem; font-weight:400; opacity:.7; }
.ws-result-great { background:rgba(34,197,94,.1); color:#16a34a; }
.ws-result-good { background:rgba(37,99,235,.1); color:var(--accent); }
.ws-result-neutral { background:var(--bg-secondary); color:var(--text-secondary); }


/* ═══════════════════════════════════════════════
   COMPETITIVE COMPARISON TABLE
   ═══════════════════════════════════════════════ */
.ws-table-wrap { overflow-x:auto; margin-top:2rem; }
.ws-compare-table {
    width:100%; border-collapse:collapse; font-size:.88rem;
    min-width:600px;
}
.ws-compare-table th,
.ws-compare-table td {
    padding:.85rem 1rem; text-align:center;
    border-bottom:1px solid var(--border-color);
}
.ws-compare-table th {
    background:var(--bg-secondary); font-weight:700; font-size:.8rem;
    text-transform:uppercase; letter-spacing:.04em;
}
.ws-compare-table td:first-child,
.ws-compare-table th:first-child { text-align:left; font-weight:600; }
.ws-col-highlight {
    background:rgba(37,99,235,.04);
}
.ws-compare-table th.ws-col-highlight {
    background:var(--accent); color:#fff;
}
.ws-yes { color:#16a34a; }
.ws-no  { color:#dc2626; opacity:.4; }


/* ═══════════════════════════════════════════════
   TEAM CARDS  (about page)
   ═══════════════════════════════════════════════ */
.ws-team-card {
    background:var(--bg-primary); border:1px solid var(--border-color);
    border-radius:14px; padding:2.5rem 2rem; text-align:center;
    height:100%;
}
.ws-team-icon {
    width:64px; height:64px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),#7c3aed);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; margin:0 auto 1.25rem;
}
.ws-team-card h3 { margin:0 0 .25rem; font-size:1.15rem; }
.ws-team-role {
    font-size:.82rem; font-weight:600; color:var(--accent);
    text-transform:uppercase; letter-spacing:.04em; margin:0 0 1rem;
}
.ws-team-card p:last-child {
    font-size:.9rem; line-height:1.7; color:var(--text-secondary);
    text-align:left;
}