/* PQ PDF — About & Tool Guide
   CSP-compliant: no inline styles, no unsafe-inline.
   Uses: @property, scroll-driven animations, @starting-style,
   View Transitions, CSS grid accordion, sliding tab indicator. */

/* ===== Registered custom properties ===== */
@property --grad-pos {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@property --glow-opacity {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --indicator-left {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --indicator-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 80px;
}

/* ===== Variables ===== */
:root {
    --ab-primary:       #ff8c00;
    --ab-primary-dark:  #cc7000;
    --ab-secondary:     #ffd700;
    --ab-accent:        #ff6b35;
    --ab-bg:            #040810;
    --ab-surface:       #0c1525;
    --ab-surface-alt:   #0a1a30;
    --ab-highlight:     #0d1f38;
    --ab-text:          #f0e6d3;
    --ab-text-dim:      #a89070;
    --ab-text-muted:    #5a4a38;
    --ab-border:        #1a2840;
    --ab-border-hover:  #2a3c58;
    --ab-radius:        12px;
    --ab-radius-sm:     8px;
    --ab-green:         #00e676;
    --ab-red:           #ff1744;
    --ab-blue:          #4fc3f7;
    --ab-purple:        #ce93d8;
    --ab-trans:         0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* tab indicator - set by JS */
    --ind-left:  0px;
    --ind-width: 80px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--ab-bg);
    color: var(--ab-text);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ===== Layout ===== */
.about-main    { flex: 1; position: relative; z-index: 10; }
.about-wrapper { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem 5rem; }

/* ===== Hero ===== */
.about-hero {
    text-align: center;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--ab-border);
}

.about-hero-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ab-primary);
    margin-bottom: 0.75rem;
    animation: fadeUp 0.6s ease both;
}

.about-hero-title {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(
        135deg,
        var(--ab-primary) var(--grad-pos),
        var(--ab-secondary) calc(var(--grad-pos) + 40%),
        var(--ab-primary) calc(var(--grad-pos) + 80%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradAnim 6s ease-in-out infinite, fadeUp 0.6s 0.1s ease both;
    margin-bottom: 0.875rem;
    line-height: 1.15;
    text-wrap: balance;
}

@keyframes gradAnim {
    0%   { --grad-pos: 0%;   }
    50%  { --grad-pos: 60%;  }
    100% { --grad-pos: 0%;   }
}

.about-hero-sub {
    font-size: 1.05rem;
    color: var(--ab-text-dim);
    max-width: 680px;
    margin: 0 auto 1.75rem;
    line-height: 1.7;
    text-wrap: balance;
    animation: fadeUp 0.6s 0.2s ease both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.about-stats-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.6s 0.3s ease both;
}

.about-stat {
    background: var(--ab-highlight);
    border: 1px solid rgba(255, 140, 0, 0.22);
    border-radius: var(--ab-radius-sm);
    padding: 1rem 1.4rem;
    text-align: center;
    min-width: 118px;
    transition: border-color var(--ab-trans), transform var(--ab-trans), box-shadow var(--ab-trans);
    cursor: default;
}

.about-stat:hover {
    border-color: rgba(255, 140, 0, 0.55);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 140, 0, 0.12);
}

.about-stat-num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--ab-primary);
    display: block;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.about-stat-label {
    font-size: 0.75rem;
    color: var(--ab-text-dim);
    margin-top: 0.3rem;
    display: block;
}

.about-privacy-row {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    animation: fadeUp 0.6s 0.4s ease both;
}

.about-privacy-pill {
    background: rgba(0, 230, 118, 0.07);
    border: 1px solid rgba(0, 230, 118, 0.2);
    color: #69f0ae;
    border-radius: 20px;
    padding: 0.35rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background var(--ab-trans), border-color var(--ab-trans);
}

.about-privacy-pill:hover {
    background: rgba(0, 230, 118, 0.13);
    border-color: rgba(0, 230, 118, 0.4);
}

/* ===== Sticky Tab Bar with Sliding Indicator ===== */
.about-tab-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(4, 8, 16, 0.95);
    border-bottom: 1px solid rgba(255, 140, 0, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 2.5rem;
}

.about-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    position: relative;
}

/* Sliding indicator — hidden; each tab carries its own active border */
.about-tab-indicator { display: none; }

.about-tab {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--ab-text);
    border-radius: 7px;
    padding: 0.45rem 1rem;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--ab-trans), border-color var(--ab-trans), background var(--ab-trans);
    font-family: inherit;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.about-tab:hover {
    color: var(--ab-primary);
    border-color: rgba(255, 140, 0, 0.35);
    background: rgba(255, 140, 0, 0.05);
}

.about-tab-active {
    color: var(--ab-primary);
    font-weight: 700;
    border-color: rgba(255, 140, 0, 0.45);
}

/* ===== Panels with @starting-style entry animation ===== */
.about-panel {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@starting-style {
    .about-panel { opacity: 0; transform: translateY(10px); }
}

.about-panel-hidden { display: none; }

/* ===== Intro Block ===== */
.about-intro {
    background: var(--ab-highlight);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: var(--ab-radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
}

.about-intro p {
    color: var(--ab-text);
    font-size: 0.975rem;
    line-height: 1.75;
    margin-bottom: 0.75rem;
}

.about-intro p:last-child { margin-bottom: 0; }

/* ===== Section headings ===== */
.about-section-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ab-primary);
    margin: 2rem 0 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--ab-border);
    text-wrap: balance;
}

.about-section-heading:first-child { margin-top: 0; }

.about-section-sub {
    font-size: 0.9rem;
    color: var(--ab-text-dim);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

/* ===== Tool Grid — scroll-driven entry animations ===== */
.about-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 2rem;
    container-type: inline-size;
}

@container (max-width: 680px) { .about-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 420px) { .about-tools-grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) { .about-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .about-tools-grid { grid-template-columns: 1fr; } }

.about-tool-card {
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: border-color var(--ab-trans), background var(--ab-trans),
                transform var(--ab-trans), box-shadow var(--ab-trans);
    /* scroll-driven reveal */
    animation: cardReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Staggered delays via nth-child */
.about-tool-card:nth-child(1)  { animation-delay: 0ms; }
.about-tool-card:nth-child(2)  { animation-delay: 40ms; }
.about-tool-card:nth-child(3)  { animation-delay: 80ms; }
.about-tool-card:nth-child(4)  { animation-delay: 120ms; }
.about-tool-card:nth-child(5)  { animation-delay: 160ms; }
.about-tool-card:nth-child(6)  { animation-delay: 200ms; }
.about-tool-card:nth-child(7)  { animation-delay: 240ms; }
.about-tool-card:nth-child(8)  { animation-delay: 280ms; }
.about-tool-card:nth-child(9)  { animation-delay: 320ms; }
.about-tool-card:nth-child(10) { animation-delay: 360ms; }
.about-tool-card:nth-child(11) { animation-delay: 400ms; }
.about-tool-card:nth-child(12) { animation-delay: 440ms; }
.about-tool-card:nth-child(13) { animation-delay: 480ms; }

/* All panels: scroll-driven animation-timeline:view() doesn't fire when a
   tab panel is revealed (no scroll event occurs). Override every panel's
   tool cards to time-based so they play in on tab switch / page load. */
.about-tools-grid .about-tool-card {
    animation-timeline: auto;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glow on hover via @property */
.about-tool-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--ab-radius);
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 140, 0, 0.12) 0%, transparent 70%);
    opacity: var(--glow-opacity);
    transition: --glow-opacity 0.4s ease;
    pointer-events: none;
}

.about-tool-card:hover {
    border-color: rgba(255, 140, 0, 0.42);
    background: var(--ab-surface-alt);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 140, 0, 0.1);
    --glow-opacity: 1;
}

.about-tool-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.6rem;
    line-height: 1;
}

.about-tool-name {
    font-weight: 700;
    color: var(--ab-text);
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.about-tool-desc {
    font-size: 0.845rem;
    color: var(--ab-text-dim);
    line-height: 1.55;
    flex: 1;
}

.about-tool-link {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: var(--ab-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 140, 0, 0.3);
    transition: color var(--ab-trans), border-color var(--ab-trans);
    align-self: flex-start;
}

.about-tool-link:hover { color: var(--ab-secondary); border-bottom-color: var(--ab-secondary); }

/* ===== Deep Dive Accordion — CSS grid animation trick ===== */
.about-deepdive {
    margin: 2rem 0;
    border: 1px solid rgba(255, 140, 0, 0.18);
    border-radius: var(--ab-radius);
    overflow: hidden;
    transition: box-shadow var(--ab-trans);
}

.about-deepdive:hover { box-shadow: 0 4px 24px rgba(255, 140, 0, 0.06); }

.about-deepdive-trigger {
    background: var(--ab-highlight);
    border: none;
    width: 100%;
    text-align: left;
    padding: 1.2rem 1.5rem;
    color: var(--ab-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: inherit;
    transition: background var(--ab-trans);
}

.about-deepdive-trigger:hover { background: rgba(255, 140, 0, 0.08); }

.about-deepdive-label { display: flex; align-items: center; gap: 0.65rem; }
.about-deepdive-label-icon { font-size: 1.2rem; }

.about-deepdive-meta {
    font-size: 0.78rem;
    color: var(--ab-text-muted);
    font-weight: 400;
    margin-left: 0.3rem;
}

.about-deepdive-arrow {
    color: var(--ab-primary);
    font-size: 0.75rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.about-deepdive-open .about-deepdive-arrow { transform: rotate(180deg); }

/* Grid trick: animate open/close without JS height calc */
.about-deepdive-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    border-top: 0 solid transparent;
    opacity: 0;
    background: var(--ab-surface);
}

.about-deepdive-open .about-deepdive-body {
    grid-template-rows: 1fr;
    opacity: 1;
    border-top: 1px solid var(--ab-border);
}

.about-deepdive-inner {
    overflow: hidden;
    padding: 0 1.75rem;
    transition: padding 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-deepdive-open .about-deepdive-inner {
    padding: 1.5rem 1.75rem;
}

.about-deepdive-inner p {
    font-size: 0.935rem;
    color: var(--ab-text-dim);
    line-height: 1.75;
    margin-bottom: 0.75rem;
}

.about-deepdive-inner p:last-child { margin-bottom: 0; }

.about-deepdive-inner h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ab-secondary);
    margin: 1.25rem 0 0.6rem;
}

.about-deepdive-inner h4:first-child { margin-top: 0; }

/* ===== Engine Grid (Threat Scanner, A11y checks, etc.) ===== */
.about-engine-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
}

.about-engine-item {
    background: var(--ab-highlight);
    border-radius: var(--ab-radius-sm);
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--ab-primary);
    transition: border-left-color var(--ab-trans), background var(--ab-trans);
    /* scroll-driven reveal */
    animation: cardReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.about-engine-item:hover { background: rgba(13, 31, 56, 0.9); }
.about-engine-item-sandbox { border-left-color: var(--ab-red); }
.about-engine-item-ml      { border-left-color: var(--ab-blue); }
.about-engine-item-sig     { border-left-color: var(--ab-green); }
.about-engine-item-diff    { border-left-color: var(--ab-purple); }

.about-engine-num {
    font-size: 0.66rem;
    color: var(--ab-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: block;
}

.about-engine-item-sandbox .about-engine-num { color: var(--ab-red); }
.about-engine-item-ml      .about-engine-num { color: var(--ab-blue); }
.about-engine-item-sig     .about-engine-num { color: var(--ab-green); }
.about-engine-item-diff    .about-engine-num { color: var(--ab-purple); }

.about-engine-name {
    font-size: 0.88rem;
    color: var(--ab-text);
    font-weight: 600;
    margin: 0.15rem 0 0.2rem;
    display: block;
}

.about-engine-detail {
    font-size: 0.8rem;
    color: var(--ab-text-dim);
    line-height: 1.45;
}

/* ===== Animated risk meter ===== */
.about-risk-demo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
}

.about-risk-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.about-risk-label {
    font-size: 0.8rem;
    font-weight: 600;
    width: 90px;
    flex-shrink: 0;
}

.about-risk-bar-track {
    flex: 1;
    height: 8px;
    background: var(--ab-border);
    border-radius: 4px;
    overflow: hidden;
}

.about-risk-bar-fill {
    height: 100%;
    border-radius: 4px;
    animation: barFill 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
}

@keyframes barFill {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

.about-risk-bar-clean      { background: var(--ab-green);    width: 8%;  }
.about-risk-bar-low        { background: #a5d6a7;             width: 18%; }
.about-risk-bar-suspicious { background: var(--ab-secondary); width: 54%; }
.about-risk-bar-dangerous  { background: var(--ab-red);       width: 100%; }

.about-risk-score {
    font-size: 0.78rem;
    width: 65px;
    flex-shrink: 0;
    text-align: right;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.score-clean      { color: var(--ab-green);    font-weight: 700; }
.score-low        { color: #a5d6a7;             font-weight: 700; }
.score-suspicious { color: var(--ab-secondary); font-weight: 700; }
.score-dangerous  { color: var(--ab-red);       font-weight: 700; }

/* ===== PQC Badge List ===== */
.about-pqc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0 1rem;
}

.about-pqc-badge {
    background: rgba(255, 140, 0, 0.07);
    border: 1px solid rgba(255, 140, 0, 0.22);
    color: var(--ab-secondary);
    border-radius: 4px;
    padding: 0.18rem 0.55rem;
    font-size: 0.76rem;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    transition: background var(--ab-trans), border-color var(--ab-trans);
}

.about-pqc-badge:hover {
    background: rgba(255, 140, 0, 0.14);
    border-color: rgba(255, 140, 0, 0.4);
}

.about-pqc-badge-nist {
    border-color: rgba(0, 230, 118, 0.3);
    color: var(--ab-green);
    background: rgba(0, 230, 118, 0.06);
}

.about-pqc-badge-nist:hover { background: rgba(0, 230, 118, 0.12); }

.about-pqc-badge-exp {
    border-color: rgba(150, 100, 255, 0.3);
    color: #b388ff;
    background: rgba(150, 100, 255, 0.06);
}
.about-pqc-badge-exp:hover { background: rgba(150, 100, 255, 0.12); }

.about-pqc-categories {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}

.about-pqc-category-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ab-muted);
    margin-bottom: 0.35rem;
}

.about-pqc-categories .about-pqc-list {
    margin: 0;
}

/* ===== Mode list (Sign modes, workflow steps) ===== */
.about-mode-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
}

.about-mode-item {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    background: var(--ab-highlight);
    border-radius: var(--ab-radius-sm);
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    transition: border-color var(--ab-trans), background var(--ab-trans);
}

.about-mode-item:hover {
    border-color: rgba(255, 140, 0, 0.2);
    background: rgba(13, 31, 56, 0.9);
}

.about-mode-emoji { font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }
.about-mode-text  { flex: 1; }

.about-mode-text strong {
    display: block;
    font-size: 0.9rem;
    color: var(--ab-text);
    margin-bottom: 0.2rem;
}

.about-mode-text span { font-size: 0.835rem; color: var(--ab-text-dim); line-height: 1.5; }

/* ===== Annotation tag cloud ===== */
.about-annot-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 1rem;
}

.about-annot-tag {
    background: var(--ab-surface-alt);
    border: 1px solid var(--ab-border);
    color: var(--ab-text-dim);
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-size: 0.79rem;
    transition: border-color var(--ab-trans), color var(--ab-trans), background var(--ab-trans);
}

.about-annot-tag:hover {
    border-color: rgba(255, 140, 0, 0.35);
    color: var(--ab-text);
    background: rgba(255, 140, 0, 0.05);
}

/* ===== Privacy principle cards ===== */
.about-principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (max-width: 650px) { .about-principles { grid-template-columns: 1fr; } }

.about-principle {
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    padding: 1.25rem;
    transition: border-color var(--ab-trans), transform var(--ab-trans), box-shadow var(--ab-trans);
    /* scroll reveal */
    animation: cardReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.about-principle:hover {
    border-color: rgba(255, 140, 0, 0.32);
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(255, 140, 0, 0.08);
}

.about-principle-icon { font-size: 1.4rem; display: block; margin-bottom: 0.5rem; }

.about-principle-title {
    font-weight: 700;
    font-size: 0.935rem;
    color: var(--ab-text);
    margin-bottom: 0.35rem;
}

.about-principle-text { font-size: 0.865rem; color: var(--ab-text-dim); line-height: 1.55; }

/* ===== Architecture flow ===== */
.about-arch-block {
    background: rgba(255, 140, 0, 0.03);
    border: 1px solid rgba(255, 140, 0, 0.12);
    border-radius: var(--ab-radius);
    padding: 1.5rem 1.75rem;
    margin: 1rem 0 1.5rem;
}

.about-arch-flow { display: flex; flex-direction: column; gap: 0; }

.about-arch-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 140, 0, 0.06);
    /* reveal */
    animation: cardReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
}

.about-arch-step:last-child  { border-bottom: none; padding-bottom: 0; }
.about-arch-step:first-child { padding-top: 0; }

.about-arch-step-num {
    background: var(--ab-primary);
    color: var(--ab-bg);
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.about-arch-step-text { color: var(--ab-text); font-size: 0.935rem; line-height: 1.65; }
.about-arch-step-text strong { color: var(--ab-primary); }

/* ===== Engine reference table ===== */
.about-engine-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    margin: 0.75rem 0 1.5rem;
    border-radius: var(--ab-radius-sm);
    overflow: hidden;
}

.about-engine-table th {
    background: var(--ab-highlight);
    color: var(--ab-primary);
    padding: 0.55rem 0.875rem;
    text-align: left;
    font-size: 0.77rem;
    border-bottom: 2px solid var(--ab-border);
}

.about-engine-table td {
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid var(--ab-border);
    color: var(--ab-text);
    vertical-align: top;
}

.about-engine-table tr:last-child td { border-bottom: none; }
.about-engine-table tr:hover td { background: rgba(255, 140, 0, 0.03); }
.about-engine-table td:first-child { color: var(--ab-secondary); font-weight: 600; white-space: nowrap; }

/* ===== Callouts ===== */
.about-callout {
    background: rgba(79, 195, 247, 0.06);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: var(--ab-radius-sm);
    padding: 0.875rem 1.1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #81d4fa;
    line-height: 1.6;
}

.about-callout strong { color: #b3e5fc; }

.about-callout-green {
    background: rgba(0, 230, 118, 0.05);
    border-color: rgba(0, 230, 118, 0.2);
    color: #a5d6a7;
}

.about-callout-green strong { color: var(--ab-green); }

/* ===== Inline code ===== */
code {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.875em;
    background: rgba(255, 140, 0, 0.08);
    color: var(--ab-secondary);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    border: 1px solid rgba(255, 140, 0, 0.15);
}

/* ===== Scroll progress bar ===== */
.about-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ab-primary), var(--ab-secondary));
    transform-origin: left;
    animation: progressAnim linear;
    animation-timeline: scroll(root block);
    z-index: 9999;
    pointer-events: none;
}

@keyframes progressAnim {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .about-hero-title { font-size: 2.1rem; }
    .about-hero-sub   { font-size: 0.975rem; }
    .about-tab-list   { padding: 0.55rem 1rem; }
    .about-wrapper    { padding: 2rem 1.25rem 3rem; }
    .about-deepdive-inner { padding: 0; }
    .about-deepdive-open .about-deepdive-inner { padding: 1.25rem; }
}

/* ===== Competitor comparison table ===== */
.about-compare-wrap {
    overflow-x: auto;
    margin: 1rem 0 0.75rem;
    border-radius: var(--ab-radius);
    border: 1px solid var(--ab-border);
    -webkit-overflow-scrolling: touch;
}

.about-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    min-width: 800px;
}

.about-compare-table th {
    background: var(--ab-highlight);
    padding: 0.7rem 0.875rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ab-text-dim);
    border-bottom: 2px solid var(--ab-border);
    white-space: nowrap;
}

.about-compare-table th:first-child {
    color: var(--ab-primary);
    min-width: 180px;
}

.about-compare-table td {
    padding: 0.7rem 0.875rem;
    border-bottom: 1px solid var(--ab-border);
    color: var(--ab-text-dim);
    vertical-align: top;
    line-height: 1.45;
}

.about-compare-table td small {
    display: block;
    font-size: 0.755rem;
    opacity: 0.7;
    margin-top: 0.2rem;
    line-height: 1.4;
    font-weight: 400;
}

.about-compare-table tr:last-child td { border-bottom: none; }
.about-compare-table tr:hover td     { background: rgba(255, 140, 0, 0.025); }

/* PQ PDF highlighted column */
.about-compare-ours {
    background: rgba(255, 140, 0, 0.055) !important;
    color: var(--ab-text) !important;
    border-left:  2px solid rgba(255, 140, 0, 0.28);
    border-right: 2px solid rgba(255, 140, 0, 0.28);
}

th.about-compare-ours {
    background: rgba(255, 140, 0, 0.11) !important;
    color: var(--ab-primary) !important;
    border-bottom-color: rgba(255, 140, 0, 0.35) !important;
}

.about-compare-feature {
    font-weight: 600;
    color: var(--ab-text) !important;
    white-space: nowrap;
    font-size: 0.84rem;
}

/* Cell value states */
.about-cmp-yes  { color: var(--ab-green)      !important; font-weight: 600; }
.about-cmp-no   { color: #ef5350              !important; font-weight: 600; }
.about-cmp-warn { color: var(--ab-secondary)  !important; }
.about-cmp-na      { color: var(--ab-text-muted) !important; font-style: italic; font-weight: 400; }
.about-cmp-wontdo  { color: #ef5350 !important; font-weight: 600; }
.about-cmp-wip     { color: #ef5350 !important; font-weight: 600; }

/* Make category headers inside the PQ PDF cell legible at full opacity */
.about-compare-ours small strong {
    opacity: 1;
    color: var(--ab-text);
    font-size: 0.78rem;
}

/* Non-ours cells: category headers slightly brighter than surrounding small text */
.about-compare-table td:not(.about-compare-ours) small strong {
    opacity: 1;
    color: var(--ab-text-dim);
}

/* Free tier section header row */
.about-cmp-section-head td {
    background: rgba(255, 140, 0, 0.08);
    color: var(--ab-primary);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.5rem 0.875rem;
    border-top: 2px solid rgba(255, 140, 0, 0.3);
    border-bottom: 1px solid rgba(255, 140, 0, 0.2);
    white-space: nowrap;
}
.about-cmp-section-head:hover td {
    background: rgba(255, 140, 0, 0.08) !important;
}

/* Sub-rows within the section */
.about-cmp-subrow .about-compare-feature {
    padding-left: 1.25rem;
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--ab-text-dim) !important;
    white-space: normal;
}
.about-cmp-subrow td {
    font-size: 0.79rem;
}

/* Limits summary row at the bottom of the section */
.about-cmp-subrow-limits td {
    background: var(--ab-highlight) !important;
    border-top: 1px solid var(--ab-border);
}
.about-cmp-subrow-limits .about-compare-feature {
    font-weight: 700 !important;
    color: var(--ab-text) !important;
}

/* ===== Transport tab ===== */
.about-transport-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

.about-transport-stat {
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    padding: 1rem 0.875rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.about-transport-stat-pqc {
    border-color: rgba(255, 140, 0, 0.4);
    background: rgba(255, 140, 0, 0.05);
}

.about-transport-stat-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ab-primary);
    line-height: 1;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    word-break: break-all;
}

.about-transport-stat-label {
    font-size: 0.67rem;
    color: var(--ab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* Inline badges used in principle titles */
.about-transport-badge {
    display: inline-block;
    border-radius: 4px;
    font-size: 0.69rem;
    font-weight: 700;
    padding: 0.1em 0.45em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
    margin-left: 0.4em;
    border: 1px solid;
}

.about-transport-badge-pq {
    background: rgba(255, 140, 0, 0.15);
    color: var(--ab-primary);
    border-color: rgba(255, 140, 0, 0.35);
}

.about-transport-badge-classical {
    background: rgba(79, 195, 247, 0.12);
    color: var(--ab-blue);
    border-color: rgba(79, 195, 247, 0.3);
}

.about-transport-badge-rfc {
    background: rgba(206, 147, 216, 0.12);
    color: var(--ab-purple);
    border-color: rgba(206, 147, 216, 0.3);
}

.about-transport-badge-green {
    background: rgba(0, 230, 118, 0.1);
    color: var(--ab-green);
    border-color: rgba(0, 230, 118, 0.3);
}

/* Scanner CTA blocks inside the transport tab */
.about-transport-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.about-transport-cta-icon { font-size: 1.4rem; flex-shrink: 0; }

.about-transport-cta-body { flex: 1; }
.about-transport-cta-body strong { color: var(--ab-text); display: block; margin-bottom: 0.15rem; font-size: 0.9rem; }
.about-transport-cta-body p { margin: 0; font-size: 0.8rem; color: var(--ab-text-muted); line-height: 1.45; }

.about-transport-cta-link {
    flex-shrink: 0;
    display: inline-block;
    background: rgba(255, 140, 0, 0.11);
    color: var(--ab-primary);
    border: 1px solid rgba(255, 140, 0, 0.38);
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-size: 0.81rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ab-trans), border-color var(--ab-trans);
}

.about-transport-cta-link:hover {
    background: rgba(255, 140, 0, 0.2);
    border-color: rgba(255, 140, 0, 0.6);
}

@media (max-width: 540px) {
    .about-transport-cta { flex-wrap: wrap; }
    .about-transport-cta-link { width: 100%; text-align: center; }
}

.about-compare-note {
    font-size: 0.76rem;
    color: var(--ab-text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 0.65rem 0.9rem;
    background: var(--ab-highlight);
    border-radius: var(--ab-radius-sm);
    border: 1px solid var(--ab-border);
}

.about-compare-note a {
    color: var(--ab-text-dim);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--ab-trans), border-color var(--ab-trans);
}

.about-compare-note a:hover {
    color: var(--ab-primary);
    border-bottom-color: rgba(255, 140, 0, 0.4);
}

/* ===== Transport / Security & Privacy tabs — fire effect (blur-blob technique) ===== */

/*
 * Real CSS fire = dark background + blurred colour blobs rising upward.
 * overflow:hidden clips the blobs to the pill shape (lantern effect).
 * Three independent timings (1.15s / 0.85s / 1.5s) never repeat together.
 * z-index:-1 on pseudo-elements puts them behind text but above the border.
 */
#tab-transport,
#tab-security {
    background: transparent;
    overflow: hidden;
    border-color: rgba(255, 55, 0, 0.18);
    color: #fff5e6 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 5px #000, 0 0 16px rgba(0,0,0,0.95);
    transition: none;
    animation: fire-glow 1.5s ease-in-out infinite;
}

#tab-transport.about-tab-active,
#tab-security.about-tab-active {
    border-color: rgba(255, 55, 0, 0.9) !important;
}

/* ── Layer 1: dark base + primary fire mass ── */
#tab-transport::before,
#tab-security::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    z-index: -1;
    /* dark base so the blobs read as fire, not just colour */
    background:
        radial-gradient(ellipse 110% 65% at 50% 125%,
            #ff5722 0%, #e53935 30%, #b71c1c 55%, transparent 80%),
        radial-gradient(ellipse  65% 60% at 15% 130%,
            #ff6d00 0%, #d32f2f 45%, transparent 72%),
        radial-gradient(ellipse  65% 60% at 85% 130%,
            #ff5722 0%, #c62828 45%, transparent 72%),
        radial-gradient(ellipse  45% 35% at 52%  60%,
            #ff8f00 0%, transparent 65%),
        linear-gradient(to top, #0d0000, #150200 55%, #0a0000);
    filter: blur(10px);
    animation: fire-base 1.15s ease-in-out infinite alternate;
}

/* ── Layer 2: bright yellow/white flame tips ── */
#tab-transport::after,
#tab-security::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    z-index: -1;
    background:
        radial-gradient(ellipse 48% 75% at 33% 118%,
            #fffde7 0%, #ffd600 18%, #ff8f00 48%, transparent 78%),
        radial-gradient(ellipse 36% 65% at 70% 120%,
            #fff8e1 0%, #ffca28 22%, #ff6d00 52%, transparent 76%),
        radial-gradient(ellipse 28% 50% at 55% 110%,
            #ffee58 0%, #ffa000 38%, transparent 68%);
    filter: blur(5px);
    animation: fire-tips 0.85s ease-in-out infinite alternate-reverse;
    opacity: 0.92;
}

@keyframes fire-base {
    0%   { transform: scaleX(0.91) scaleY(1.07) translateY(5px);  filter: blur(10px); }
    25%  { transform: scaleX(1.07) scaleY(0.94) translateY(1px);  filter: blur(12px); }
    60%  { transform: scaleX(0.96) scaleY(1.04) translateY(3px);  filter: blur(9px);  }
    100% { transform: scaleX(1.08) scaleY(0.93) translateY(0px);  filter: blur(11px); }
}

@keyframes fire-tips {
    0%   { transform: scaleX(0.78) translateY(6px)  skewX(-5deg); opacity: 0.7;  }
    30%  { transform: scaleX(1.22) translateY(-3px) skewX( 4deg); opacity: 1.0;  }
    65%  { transform: scaleX(0.88) translateY( 2px) skewX(-2deg); opacity: 0.82; }
    100% { transform: scaleX(1.12) translateY(-5px) skewX( 3deg); opacity: 0.95; }
}

/* External ember glow — sideways only, stays within tab-bar padding */
@keyframes fire-glow {
    0%, 100% { box-shadow: 0 0 8px  rgba(255,  65,  0, 0.65), 0 1px 18px rgba(200, 25,  0, 0.4);  }
    32%       { box-shadow: 0 0 15px rgba(255, 140,  0, 0.85), 0 1px 28px rgba(255, 75,  0, 0.58); }
    62%       { box-shadow: 0 0 11px rgba(220,  28,  0, 0.75), 0 1px 22px rgba(170,  8,  0, 0.5);  }
    85%       { box-shadow: 0 0 17px rgba(255, 110,  0, 0.8),  0 1px 30px rgba(255, 50,  0, 0.5);  }
}

/* ===== PDF Forensics Scanner card — fire on 🔬 icon (blur-blob technique) ===== */
#abt-forensics { border-color: rgba(200, 40, 40, 0.25); }

#abt-forensics .about-tool-icon {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    padding: .18rem .38rem;
    width: fit-content;
    isolation: isolate;
    animation: fire-glow 1.5s ease-in-out infinite;
}

#abt-forensics .about-tool-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    z-index: -1;
    background:
        radial-gradient(ellipse 110% 65% at 50% 125%,
            #ff5722 0%, #e53935 30%, #b71c1c 55%, transparent 80%),
        radial-gradient(ellipse  65% 60% at 15% 130%,
            #ff6d00 0%, #d32f2f 45%, transparent 72%),
        radial-gradient(ellipse  65% 60% at 85% 130%,
            #ff5722 0%, #c62828 45%, transparent 72%),
        radial-gradient(ellipse  45% 35% at 52%  60%,
            #ff8f00 0%, transparent 65%),
        linear-gradient(to top, #0d0000, #150200 55%, #0a0000);
    filter: blur(10px);
    animation: fire-base 1.15s ease-in-out infinite alternate;
}

#abt-forensics .about-tool-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    z-index: -1;
    background:
        radial-gradient(ellipse 48% 75% at 33% 118%,
            #fffde7 0%, #ffd600 18%, #ff8f00 48%, transparent 78%),
        radial-gradient(ellipse 36% 65% at 70% 120%,
            #fff8e1 0%, #ffca28 22%, #ff6d00 52%, transparent 76%),
        radial-gradient(ellipse 28% 50% at 55% 110%,
            #ffee58 0%, #ffa000 38%, transparent 68%);
    filter: blur(5px);
    animation: fire-tips 0.85s ease-in-out infinite alternate-reverse;
    opacity: 0.92;
}

/* ===== Core Tools — blue border glow ===== */
#tab-core { animation: core-glow 2s ease-in-out infinite; }
#tab-core.about-tab-active { border-color: rgba(41, 182, 246, 0.9) !important; }
@keyframes core-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(41,182,246,0.35);  border-color: rgba(41,182,246,0.2);  }
    50%       { box-shadow: 0 0 13px rgba(41,182,246,0.68); border-color: rgba(41,182,246,0.5);  }
}

/* ===== Convert — rainbow border cycle ===== */
#tab-convert { animation: prism-glow 4s linear infinite; }
#tab-convert.about-tab-active { border-color: rgba(255, 255, 255, 0.65) !important; }
@keyframes prism-glow {
    0%    { box-shadow: 0 0 7px rgba(255,0,64,0.55);   border-color: rgba(255,0,64,0.3);   }
    16.6% { box-shadow: 0 0 7px rgba(255,160,0,0.55);  border-color: rgba(255,160,0,0.3);  }
    33.3% { box-shadow: 0 0 7px rgba(0,220,100,0.55);  border-color: rgba(0,220,100,0.3);  }
    50%   { box-shadow: 0 0 7px rgba(0,160,255,0.55);  border-color: rgba(0,160,255,0.3);  }
    66.6% { box-shadow: 0 0 7px rgba(130,0,255,0.55);  border-color: rgba(130,0,255,0.3);  }
    83.3% { box-shadow: 0 0 7px rgba(255,0,150,0.55);  border-color: rgba(255,0,150,0.3);  }
    100%  { box-shadow: 0 0 7px rgba(255,0,64,0.55);   border-color: rgba(255,0,64,0.3);   }
}

/* ===== Annotate & Inspect — green border glow ===== */
#tab-annotate { animation: scan-glow 2.4s ease-in-out infinite; }
#tab-annotate.about-tab-active { border-color: rgba(0, 230, 118, 0.9) !important; }
@keyframes scan-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(0,230,118,0.35);  border-color: rgba(0,230,118,0.18); }
    50%       { box-shadow: 0 0 13px rgba(0,255,130,0.68); border-color: rgba(0,230,118,0.5);  }
}

/* ===== Automation — purple border glow ===== */
#tab-automation { animation: arc-glow 1.3s ease-in-out infinite; }
#tab-automation.about-tab-active { border-color: rgba(179, 0, 255, 0.9) !important; }
@keyframes arc-glow {
    0%, 100% { box-shadow: 0 0 6px  rgba(179,0,255,0.4);   border-color: rgba(179,0,255,0.18); }
    40%       { box-shadow: 0 0 14px rgba(220,80,255,0.75); border-color: rgba(200,40,255,0.5);  }
    70%       { box-shadow: 0 0 9px  rgba(179,0,255,0.52);  border-color: rgba(179,0,255,0.3);   }
}

/* ===== How It Works — teal border glow ===== */
#tab-arch { animation: blueprint-glow 2.8s ease-in-out infinite; }
#tab-arch.about-tab-active { border-color: rgba(0, 200, 210, 0.9) !important; }
@keyframes blueprint-glow {
    0%, 100% { box-shadow: 0 0 6px  rgba(0,200,210,0.35);  border-color: rgba(0,200,210,0.18); }
    45%       { box-shadow: 0 0 13px rgba(0,235,245,0.65);  border-color: rgba(0,200,210,0.48); }
}

/* ===== Compare — amber border glow ===== */
#tab-compare { animation: duality-glow 2.2s ease-in-out infinite alternate; }
#tab-compare.about-tab-active { border-color: rgba(255, 160, 30, 0.75) !important; }
@keyframes duality-glow {
    0%   { box-shadow: 0 0 6px  rgba(255,140,0,0.38);  border-color: rgba(255,140,0,0.2);  }
    50%  { box-shadow: 0 0 12px rgba(255,180,60,0.62); border-color: rgba(255,140,0,0.45); }
    100% { box-shadow: 0 0 7px  rgba(255,120,0,0.42);  border-color: rgba(255,130,0,0.25); }
}

/* ===== Reduced motion fallback ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}