/* ============================================
   ENHANCEMENTS CSS
   Top-1% visual & UX additions layered on top
   of the existing design system.
   ============================================ */

/* ── Pipeline Diagram (Upgrade Factory) ─── */
.pipeline-diagram {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 28px 30px;
    width: 100%;
    max-width: 400px;
}

.pipe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.pipe-title-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.pipe-running {
    font-size: 11px;
    font-weight: 600;
    color: #22c55e;
    background: rgba(34,197,94,0.1);
    padding: 3px 10px;
    border-radius: 50px;
}

.pipe-steps { display: flex; flex-direction: column; }

.pipe-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
}

.pipe-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pipe-done .pipe-dot   { background: #22c55e; }
.pipe-active .pipe-dot { background: var(--accent-primary); animation: pulse-node 1.8s ease-in-out infinite; }
.pipe-pending .pipe-dot { background: var(--bg-tertiary); border: 1px solid var(--border-color); }

@keyframes pulse-node {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(59,130,246,0); }
}

.pipe-body    { flex: 1; display: flex; flex-direction: column; }
.pipe-name    { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pipe-pending .pipe-name { color: var(--text-muted); }
.pipe-desc    { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.pipe-badge-ok      { font-size: 11px; font-weight: 700; color: #22c55e; background: rgba(34,197,94,0.12); padding: 2px 8px; border-radius: 50px; }
.pipe-badge-running { font-size: 11px; font-weight: 700; color: var(--accent-primary); background: var(--accent-gradient-soft); padding: 2px 8px; border-radius: 50px; animation: blink-run 1.5s ease-in-out infinite; }
.pipe-badge-pending { font-size: 16px; color: var(--border-color); letter-spacing: 1px; padding: 0 4px; }

@keyframes blink-run { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.pipe-line     { width: 1px; height: 12px; background: var(--border-color); margin-left: 4px; }
.pipe-line-dim { width: 1px; height: 12px; background: rgba(255,255,255,0.06); margin-left: 4px; }

.pipe-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Cert brand colors ───────────────────── */
.cert-card[data-brand="aws"]    { --cert-color: #FF9900; }
.cert-card[data-brand="lf"]     { --cert-color: #003778; }
.cert-card[data-brand="google"] { --cert-color: #4285F4; }

.cert-card { transition: all 0.3s ease; }
.cert-card:hover { border-color: var(--cert-color, var(--accent-primary)); }
.cert-card .cert-icon {
    background: color-mix(in srgb, var(--cert-color, var(--accent-primary)) 12%, transparent);
    border-radius: 14px;
    padding: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.cert-card .cert-icon svg,
.cert-card .cert-icon img { color: var(--cert-color, var(--accent-primary)); }

/* ── Decision panel animation ────────────── */
.decision-item {
    animation: d-item-in 0.4s ease both;
}
.decision-item:nth-child(1) { animation-delay: 0.1s; }
.decision-item:nth-child(2) { animation-delay: 0.3s; }
.decision-item:nth-child(3) { animation-delay: 0.5s; }
.decision-item:nth-child(4) { animation-delay: 0.7s; }

@keyframes d-item-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.d-icon svg { width: 16px; height: 16px; stroke: var(--accent-primary); flex-shrink: 0; }
.decision-item.success .d-icon svg { stroke: #22c55e; }

/* ── Metrics Bar (Impact page) ───────────── */
.metrics-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}

.metric-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.metric-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent-gradient);
}

.metric-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-hover);
}

.metric-number {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 900;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 10px;
}

.metric-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.metric-context {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Impact Blocks ───────────────────────── */
.impact-blocks {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.impact-block {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    transition: all var(--transition-base);
}

.impact-block:hover {
    box-shadow: var(--card-shadow-hover);
    border-color: rgba(59, 130, 246, 0.3);
}

.impact-block-header {
    padding: 26px 36px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.impact-block-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.impact-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--accent-gradient-soft);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-primary);
    white-space: nowrap;
}

.impact-block-body {
    padding: 28px 36px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.impact-col h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.impact-col p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── Skills Visualization ────────────────── */
.skills-section {
    background: var(--bg-secondary);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 64px;
}

.skill-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skill-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.skill-level {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.skill-bar-track {
    height: 5px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.skill-bar-fill {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 3px;
    width: 0;
    transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-bar-fill.animated {
    width: var(--target-width);
}

/* ── Tech Stack Chips ────────────────────── */
.tech-stack-section {
    background: var(--bg-primary);
}

.tech-stack-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    cursor: default;
}

.tech-chip:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-gradient-soft);
    transform: translateY(-2px);
}

.tech-chip-icon {
    font-size: 14px;
    line-height: 1;
}

/* ── Project features list ───────────────── */
.project-features {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.project-features li {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 5px 0 5px 20px;
    position: relative;
    line-height: 1.5;
}

.project-features li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}

.project-impact-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    padding: 5px 14px;
    background: var(--accent-gradient);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.3px;
}

/* ── Sectors Grid (Impact page) ──────────── */
.sectors-section {
    background: var(--bg-secondary);
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.sector-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 16px;
    text-align: center;
    transition: all var(--transition-base);
}

.sector-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: var(--card-shadow-hover);
}

.sector-icon {
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
}

.sector-card h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.sector-card p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Blog page ───────────────────────────── */
.blog-search-container {
  margin: 0 auto 2rem;
  max-width: 680px;
}

.blog-search-wrapper {
  position: relative;
}

.blog-search-input {
  width: 100%;
  padding: 12px 44px 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
}

.blog-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  pointer-events: none;
}

.blog-edit-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.blog-edit-note code {
  color: var(--text-primary);
}

.blog-card-content { grid-column: 1 / -1; }
.blog-card-tags { margin-bottom: 12px; }
.blog-card-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.blog-card-secondary-link { opacity: .75; font-size: 13px; color: var(--text-muted); text-decoration: none; }

/* ── Open Graph / social preview image hint ─ */
/* (no visual, just keeping the meta in order) */

/* ── Responsive ──────────────────────────── */
@media (max-width: 1024px) {
    .metrics-bar        { grid-template-columns: repeat(2, 1fr); }
    .sectors-grid       { grid-template-columns: repeat(3, 1fr); }
    .impact-block-body  { grid-template-columns: 1fr 1fr; gap: 20px; }
    .skills-grid        { gap: 20px 40px; }
}

@media (max-width: 768px) {
    .metrics-bar        { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .skills-grid        { grid-template-columns: 1fr; }
    .sectors-grid       { grid-template-columns: repeat(2, 1fr); }
    .impact-block-body  { grid-template-columns: 1fr; }
    .impact-block-header { flex-direction: column; align-items: flex-start; }
}

/* ── Animation Upgrades ───────────────────── */

/* a) Animated gradient on gradient-text */
.gradient-text {
    background-size: 200% auto;
    animation: gradientFlow 4s linear infinite;
}

/* b) Floating icons — more visible with accent tint */
.floating-icon {
    opacity: 0.55;
}
.floating-icon svg {
    stroke: var(--accent-primary);
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4));
}

/* c) Glowing gradient border on capability cards */
.capability-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59,130,246,0.6), rgba(139,92,246,0.6));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.capability-card:hover::after { opacity: 1; }

/* d) Section title blurIn on scroll-reveal */
.section-header[data-aos].aos-animate .section-title {
    animation: blurIn 0.9s ease both;
}
.section-header[data-aos].aos-animate .section-subtitle {
    animation: blurIn 0.9s ease 0.2s both;
}

/* e) Stat shimmer glow after counter completes */
@keyframes shimmer-num {
    0%   { text-shadow: none; }
    50%  { text-shadow: 0 0 20px rgba(59,130,246,0.7), 0 0 40px rgba(139,92,246,0.4); }
    100% { text-shadow: none; }
}
.stat-number.counted {
    animation: shimmer-num 1.4s ease forwards;
}

/* f) Pipeline diagram — scroll-triggered sequential reveal */
.pipeline-diagram .pipe-row,
.pipeline-diagram .pipe-line,
.pipeline-diagram .pipe-line-dim {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.pipeline-diagram.pipe-visible .pipe-row,
.pipeline-diagram.pipe-visible .pipe-line,
.pipeline-diagram.pipe-visible .pipe-line-dim { opacity: 1; transform: none; }
.pipeline-diagram.pipe-visible .pipe-row:nth-child(1)  { transition-delay: 0.10s; }
.pipeline-diagram.pipe-visible .pipe-line:nth-child(2) { transition-delay: 0.20s; }
.pipeline-diagram.pipe-visible .pipe-row:nth-child(3)  { transition-delay: 0.30s; }
.pipeline-diagram.pipe-visible .pipe-line:nth-child(4) { transition-delay: 0.40s; }
.pipeline-diagram.pipe-visible .pipe-row:nth-child(5)  { transition-delay: 0.50s; }
.pipeline-diagram.pipe-visible .pipe-line-dim:nth-child(6) { transition-delay: 0.60s; }
.pipeline-diagram.pipe-visible .pipe-row:nth-child(7)  { transition-delay: 0.70s; }
.pipeline-diagram .pipe-footer {
    opacity: 0;
    transition: opacity 0.5s ease 0.95s;
}
.pipeline-diagram.pipe-visible .pipe-footer { opacity: 1; }

/* g) Decision panel — scroll-triggered (override always-on animation) */
.decision-item {
    animation: none;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.decision-panel.panel-visible .decision-item              { opacity: 1; transform: none; }
.decision-panel.panel-visible .decision-item:nth-child(1) { transition-delay: 0.10s; }
.decision-panel.panel-visible .decision-item:nth-child(2) { transition-delay: 0.28s; }
.decision-panel.panel-visible .decision-item:nth-child(3) { transition-delay: 0.46s; }
.decision-panel.panel-visible .decision-item:nth-child(4) { transition-delay: 0.64s; }

/* h) Card 3D tilt — perspective on grid parent */
.capabilities-grid {
    perspective: 1000px;
}
.capability-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ═══════════════════════════════════════════
   TOP-1% VISUAL UPGRADES
   ═══════════════════════════════════════════ */

/* ── 1. Card Mouse-Tracking Spotlight ────── */
/* Override previous ::after glow border — spotlight replaces it */
.capability-card::after { display: none; }

.capability-card,
.system-card,
.evidence-card,
.metric-tile,
.cert-card,
.impact-block,
.sector-card,
.footer-card {
    background-image: radial-gradient(
        380px circle at var(--spotlight-x, -600px) var(--spotlight-y, -600px),
        rgba(59, 130, 246, 0.10),
        transparent 50%
    );
}

}

/* ── 3. Animated Background Gradient ─────── */
@keyframes bgShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.bg-gradient {
    background: linear-gradient(
        -45deg,
        var(--bg-primary) 0%,
        rgba(59, 130, 246, 0.08) 25%,
        rgba(139, 92, 246, 0.10) 50%,
        rgba(0, 200, 255, 0.06) 75%,
        var(--bg-primary) 100%
    ) !important;
    background-size: 400% 400% !important;
    animation: bgShift 18s ease infinite;
}

/* ── 4. Noise / Grain Texture Overlay ───── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    opacity: 0.038;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ── 5. Auto-Scrolling Tech Marquee Strip ── */
.tech-marquee {
    overflow: hidden;
    padding: 18px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    width: max-content;
    animation: marqueeScroll 34s linear infinite;
}
.tech-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 32px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.4px;
    transition: color 0.2s ease;
}
.marquee-item:hover { color: var(--accent-primary); }
.marquee-dot {
    width: 4px;
    height: 4px;
    background: var(--border-color);
    border-radius: 50%;
    flex-shrink: 0;
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── 6. Spinning Gradient Border (featured card + pipeline) ── */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes spin-border { to { --border-angle: 360deg; } }

.capability-card.featured {
    border-color: transparent !important;
    position: relative;
}
.capability-card.featured::after {
    display: block !important;
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--border-angle),
        transparent 60%,
        rgba(59, 130, 246, 0.85),
        rgba(139, 92, 246, 0.90),
        transparent 40%
    );
    z-index: -1;
    animation: spin-border 5s linear infinite;
}

.pipeline-diagram {
    position: relative;
}
.pipeline-diagram::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--border-angle),
        transparent 65%,
        rgba(59, 130, 246, 0.7),
        rgba(34, 197, 94, 0.6),
        transparent 35%
    );
    z-index: -1;
    animation: spin-border 6s linear infinite;
}

/* ── 7. Custom Thin Scrollbar ────────────── */
::-webkit-scrollbar            { width: 4px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      {
    background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

/* ── 7b. Navbar glow + nav-link underline ── */
.navbar.scrolled {
    box-shadow: 0 1px 0 var(--glass-border), 0 4px 24px rgba(59, 130, 246, 0.07) !important;
}
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--accent-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
    border-radius: 2px;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* ═══ PAGE-HEADER UNIQUE ACCENT GLOWS ═══ */
.page-header.ph--impact     { background: radial-gradient(ellipse at 50% 0%, rgba(34,197,94,0.12),   transparent 70%); }
.page-header.ph--projects   { background: radial-gradient(ellipse at 50% 0%, rgba(6,182,212,0.12),   transparent 70%); }
.page-header.ph--platform   { background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.12),  transparent 70%); }
.page-header.ph--ai         { background: radial-gradient(ellipse at 50% 0%, rgba(168,85,247,0.12),  transparent 70%); }
.page-header.ph--research   { background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,0.12),  transparent 70%); }
.page-header.ph--media      { background: radial-gradient(ellipse at 50% 0%, rgba(236,72,153,0.12),  transparent 70%); }
.page-header.ph--blog       { background: radial-gradient(ellipse at 50% 0%, rgba(20,184,166,0.12),  transparent 70%); }
.page-header.ph--about      { background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.12),  transparent 70%); }
.page-header.ph--contact    { background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.12),  transparent 70%); }

/* =================================================================
   PREMIUM GLASSMORPHISM REDESIGN — Apple / Stripe aesthetic
   ================================================================= */

/* 1. GLASS CARD BASE */
.capability-card,
.publication-card,
.system-card,
.evidence-card,
.metric-tile,
.cert-card,
.impact-block,
.sector-card,
.principle-card,
.footer-card {
    background: rgba(255,255,255,0.03) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}

.capability-card:hover,
.publication-card:hover,
.system-card:hover,
.evidence-card:hover,
.metric-tile:hover,
.cert-card:hover,
.impact-block:hover,
.sector-card:hover,
.principle-card:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(99,102,241,0.35) !important;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.40),
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 0 1px rgba(99,102,241,0.15),
        0 0 40px rgba(59,130,246,0.06) !important;
}

/* 2. PRINCIPLE CARDS */
.principle-card { border-radius: 20px !important; padding: 32px !important; position: relative !important; }
.principle-number {
    font-family: "JetBrains Mono", monospace;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(59,130,246,0.6), rgba(139,92,246,0.6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 16px;
    display: block;
}

/* 3. HERO */
.hero-title, .hero-name {
    font-size: clamp(3rem, 7vw, 6rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem) !important;
    line-height: 1.7 !important;
    max-width: 600px !important;
    color: rgba(148,163,184,0.95) !important;
}

/* 4. PAGE HEADERS */
.page-header { padding: 120px 0 80px !important; position: relative !important; overflow: hidden !important; }
.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(99,102,241,0.15), transparent 70%);
    pointer-events: none;
}
.page-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    overflow: visible !important;
}
.page-subtitle {
    font-size: 1.12rem !important;
    line-height: 1.8 !important;
    color: rgba(148,163,184,0.9) !important;
    max-width: 580px !important;
    margin: 0 auto !important;
}

/* 5. GRADIENT TEXT */
.gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% auto !important;
    animation: gradientFlow 4s linear infinite !important;
    /* Prevent descender clipping (g, p, y, j) with gradient-clip */
    display: inline-block !important;
    padding-bottom: 0.12em !important;
    line-height: inherit !important;
}

/* 6. SECTION HEADERS */
.section-title {
    font-size: clamp(1.8rem, 4vw, 2.75rem) !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
}
.section-tag {
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 5px 14px !important;
    background: rgba(99,102,241,0.12) !important;
    border: 1px solid rgba(99,102,241,0.25) !important;
    border-radius: 100px !important;
    color: rgba(165,180,252,0.95) !important;
}

/* 7. STAT NUMBERS */
.stat-number {
    font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(135deg, #fff 0%, rgba(148,163,184,0.8) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    line-height: 1.1 !important;
}

/* 8. BUTTONS */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    box-shadow: 0 4px 20px rgba(59,130,246,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}
.btn-primary:hover {
    box-shadow: 0 8px 32px rgba(59,130,246,0.55), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(-2px) !important;
}
.btn-secondary {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
    transition: all 0.25s ease !important;
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(99,102,241,0.4) !important;
    transform: translateY(-2px) !important;
}

/* 9. AI-HERO CALLOUT */
.ai-hero {
    background: rgba(99,102,241,0.06) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(99,102,241,0.18) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 40px rgba(99,102,241,0.08), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* 10. CARD ICONS */
.card-icon {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15)) !important;
    border: 1px solid rgba(99,102,241,0.2) !important;
    box-shadow: 0 4px 16px rgba(59,130,246,0.1) !important;
}

/* 11. TAGS */
.card-tags span, .project-tags span, .blog-card-tags span {
    background: rgba(99,102,241,0.1) !important;
    border: 1px solid rgba(99,102,241,0.2) !important;
    color: rgba(165,180,252,0.9) !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
}

/* 12. AMBIENT ORBS */
.orb-1 { background: radial-gradient(circle, rgba(99,102,241,0.35) 0%, transparent 70%) !important; }
.orb-2 { background: radial-gradient(circle, rgba(139,92,246,0.25) 0%, transparent 70%) !important; }
.orb-3 { background: radial-gradient(circle, rgba(20,184,166,0.20) 0%, transparent 70%) !important; }

/* 13. PUBLICATION / BLOG CARDS */
.publication-card { border-radius: 20px !important; padding: 32px !important; }
.publication-card h3 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
}

/* 14. IMPACT NUMBERS */
.impact-number {
    font-size: clamp(2rem,4vw,3rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(135deg, #fff 0%, rgba(148,163,184,0.8) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 15. ECOSYSTEM CHIPS */
.eco-chip {
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    transition: all 0.2s ease !important;
}
.eco-chip:hover {
    background: rgba(99,102,241,0.12) !important;
    border-color: rgba(99,102,241,0.3) !important;
    transform: translateY(-2px) !important;
}

/* 16. FOOTER CTA */
.footer-cta {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15)) !important;
    border: 1px solid rgba(99,102,241,0.25) !important;
    transition: all 0.25s ease !important;
}
.footer-cta:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(139,92,246,0.25)) !important;
    box-shadow: 0 4px 20px rgba(59,130,246,0.25) !important;
    transform: translateY(-2px) !important;
}

/* ── HERO ILLUSTRATION ─────────────────────────────────────────── */
.hero-illustration {
    width: 100%;
    max-width: 500px;
    height: auto;
    filter: drop-shadow(0 20px 60px rgba(99,102,241,0.22));
    animation: illustFloat 6s ease-in-out infinite;
}

@keyframes illustFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .hero-illustration { max-width: 300px; margin: 28px auto 0; }
}

/* Page-header inline illustrations — hide on mobile to prevent overlap */
.page-header-illustration {
    display: block;
}
@media (max-width: 900px) {
    .page-header-illustration { display: none !important; }
    .page-header-content { max-width: 100% !important; }
}

/* ==============================================================
   Premium Visual Layer (global)
   ============================================================== */
.page-tag::before,
.section-tag::before {
    content: "◆";
    display: inline-block;
    margin-right: 8px;
    font-size: 10px;
    color: rgba(96, 165, 250, 0.95);
    transform: translateY(-1px);
}

.page-header-content {
    position: relative;
}


.capability-card,
.principle-card,
.evidence-card,
.publication-card,
.system-card,
.contact-method {
    position: relative;
}

.capability-card::after,
.principle-card::after,
.evidence-card::after,
.publication-card::after,
.system-card::after {
    content: "✦";
    position: absolute;
    right: 14px;
    top: 12px;
    font-size: 14px;
    color: rgba(96, 165, 250, 0.7);
    pointer-events: none;
}

.btn-primary,
.btn-secondary {
    letter-spacing: 0.2px;
}

.btn-primary::before {
    content: "◈";
    margin-right: 8px;
    font-size: 12px;
    opacity: 0.9;
}

@media (max-width: 900px) {
}

/* =================================================================
   LIGHT MODE OVERRIDES — full visual parity
   ================================================================= */
[data-theme="light"] {
    /* Glass cards */
    .capability-card,
    .publication-card,
    .system-card,
    .evidence-card,
    .metric-tile,
    .cert-card,
    .impact-block,
    .sector-card,
    .principle-card,
    .footer-card {
        background: rgba(255,255,255,0.75) !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    }
    .capability-card:hover,
    .publication-card:hover,
    .system-card:hover,
    .evidence-card:hover,
    .metric-tile:hover,
    .cert-card:hover,
    .impact-block:hover,
    .sector-card:hover,
    .principle-card:hover {
        background: rgba(255,255,255,0.92) !important;
        border-color: rgba(99,102,241,0.3) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(99,102,241,0.12) !important;
    }

    /* Eco chips */
    .eco-chip {
        background: rgba(0,0,0,0.04) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
    }
    .eco-chip:hover {
        background: rgba(99,102,241,0.08) !important;
        border-color: rgba(99,102,241,0.25) !important;
    }

    /* Secondary button */
    .btn-secondary {
        background: rgba(0,0,0,0.04) !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
        box-shadow: none !important;
        color: var(--text-primary) !important;
    }
    .btn-secondary:hover {
        background: rgba(99,102,241,0.08) !important;
        border-color: rgba(99,102,241,0.3) !important;
    }

    /* AI hero callout */
    .ai-hero {
        background: rgba(99,102,241,0.06) !important;
        border: 1px solid rgba(99,102,241,0.15) !important;
        box-shadow: 0 4px 24px rgba(99,102,241,0.06) !important;
    }

    /* Card tags */
    .card-tags span, .project-tags span, .blog-card-tags span {
        background: rgba(99,102,241,0.08) !important;
        border: 1px solid rgba(99,102,241,0.15) !important;
        color: rgba(79,70,229,0.9) !important;
    }

    /* Section tag pill */
    .section-tag {
        background: rgba(99,102,241,0.1) !important;
        border: 1px solid rgba(99,102,241,0.2) !important;
        color: rgba(79,70,229,0.9) !important;
    }

    /* Stat / impact numbers */
    .stat-number, .impact-number, .stat-num {
        background: linear-gradient(135deg, #1e40af 0%, #6d28d9 50%, #047857 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* Page subtitle */
    .page-subtitle {
        color: rgba(51,65,85,0.85) !important;
    }

    /* Hero subtitle */
    .hero-subtitle {
        color: rgba(51,65,85,0.85) !important;
    }

    /* Footer CTA */
    .footer-cta {
        background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1)) !important;
        border: 1px solid rgba(99,102,241,0.18) !important;
    }

    /* Orbs (subtler in light mode) */
    .orb-1 { background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%) !important; }
    .orb-2 { background: radial-gradient(circle, rgba(139,92,246,0.10) 0%, transparent 70%) !important; }
    .orb-3 { background: radial-gradient(circle, rgba(20,184,166,0.08) 0%, transparent 70%) !important; }

    /* Card icon */
    .card-icon {
        background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1)) !important;
        border: 1px solid rgba(99,102,241,0.15) !important;
    }

    /* Page-header ph-- glows (lighter tints for light bg) */
    .page-header.ph--impact     { background: radial-gradient(ellipse at 50% 0%, rgba(34,197,94,0.08),   transparent 70%); }
    .page-header.ph--projects   { background: radial-gradient(ellipse at 50% 0%, rgba(6,182,212,0.08),   transparent 70%); }
    .page-header.ph--platform   { background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.08),  transparent 70%); }
    .page-header.ph--ai         { background: radial-gradient(ellipse at 50% 0%, rgba(168,85,247,0.08),  transparent 70%); }
    .page-header.ph--research   { background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,0.08),  transparent 70%); }
    .page-header.ph--media      { background: radial-gradient(ellipse at 50% 0%, rgba(236,72,153,0.08),  transparent 70%); }
    .page-header.ph--blog       { background: radial-gradient(ellipse at 50% 0%, rgba(20,184,166,0.08),  transparent 70%); }
    .page-header.ph--about      { background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.08),  transparent 70%); }
    .page-header.ph--contact    { background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.08),  transparent 70%); }
}

/* ── Hero Tabs (pill nav) ─────────────────── */
.hero-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 22px 0 0;
    padding: 8px;
    border-radius: 16px;
    background: color-mix(in oklab, var(--card-bg) 86%, transparent);
}

.hero-tab {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 9px 22px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-tab:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-gradient-soft);
}

.hero-tab.active {
    background: var(--accent-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .hero-tab.active { color: #fff; }

@media (max-width: 480px) {
    .hero-tabs { gap: 8px; }
    .hero-tab { font-size: 12px; padding: 8px 16px; }
}

/* ── Work / Writing Page Tabs ────────────── */
.work-tabs-bar {
    position: sticky;
    top: 68px;
    z-index: 50;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.work-tabs {
    display: flex;
    gap: 0;
}

.wtab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 16px 28px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wtab:hover { color: var(--text-primary); }

.wtab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

[data-theme="light"] .work-tabs-bar { background: var(--bg-primary); }

@media (max-width: 640px) {
    .wtab { font-size: 13px; padding: 14px 18px; }
}


/* ── Hero Achievement Bar ─────────────────── */
.hero-achievement-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
}
.achievement-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.25);
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    letter-spacing: 0.3px;
    transition: all 0.2s;
}
.achievement-pill:hover {
    background: rgba(59,130,246,0.18);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}
[data-theme="light"] .achievement-pill {
    background: rgba(59,130,246,0.06);
    color: #2563eb;
    border-color: rgba(37,99,235,0.25);
}

/* ── Impact Metrics Rolling Strip ────────── */
.impact-strip {
    background: linear-gradient(90deg, transparent, rgba(59,130,246,0.06) 10%, rgba(59,130,246,0.06) 90%, transparent);
    border-top: 1px solid rgba(59,130,246,0.12);
    border-bottom: 1px solid rgba(59,130,246,0.12);
    overflow: hidden;
    white-space: nowrap;
    padding: 12px 0;
}
.impact-strip-inner {
    display: inline-block;
    animation: impactScroll 30s linear infinite;
}
.impact-strip:hover .impact-strip-inner { animation-play-state: paused; }
.impact-item {
    display: inline;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 6px;
}
.impact-item strong {
    color: var(--accent-primary);
    font-weight: 700;
}
.impact-sep {
    color: var(--accent-primary);
    opacity: 0.4;
    font-size: 10px;
    margin: 0 8px;
}
@keyframes impactScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
[data-theme="light"] .impact-item { color: #374151; }
[data-theme="light"] .impact-item strong { color: #2563eb; }


/* ── Animated Hero Name Glow ─────────────── */
.hero-line.line-1 {
    background: linear-gradient(135deg, #fff 0%, var(--accent-primary) 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameShimmer 4s ease-in-out infinite;
    background-size: 200% auto;
}
@keyframes nameShimmer {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* ── Evidence card big animated stat ──────── */
.evidence-stat {
    margin: 14px 0 4px;
    line-height: 1;
}
.stat-num {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 60%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    padding-bottom: 0.08em;
    background-size: 200% auto;
    animation: gradientFlow 5s linear infinite;
}
.evidence-card h3 {
    margin-top: 4px;
    margin-bottom: 8px;
}

/* ── Section separator glow line ─────────── */
hr.gradient-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-primary) 30%, #a78bfa 70%, transparent 100%);
    margin: 0;
    opacity: 0.5;
}

/* ── Capability card entrance animation ──── */
.capability-card {
    animation: cardEntrance 0.5s ease both;
}
@keyframes cardEntrance {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.capability-card:nth-child(1) { animation-delay: 0.05s; }
.capability-card:nth-child(2) { animation-delay: 0.10s; }
.capability-card:nth-child(3) { animation-delay: 0.15s; }
.capability-card:nth-child(4) { animation-delay: 0.20s; }
.capability-card:nth-child(5) { animation-delay: 0.25s; }
.capability-card:nth-child(6) { animation-delay: 0.30s; }

/* ── Timeline item pulse on hover ────────── */
.timeline-item:hover .timeline-marker {
    box-shadow: 0 0 0 6px rgba(59,130,246,0.15), 0 0 0 12px rgba(59,130,246,0.06);
    transition: box-shadow 0.3s ease;
}

/* ── Cert card shimmer border ────────────── */
.cert-card {
    position: relative;
    overflow: hidden;
}
.cert-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cert-card:hover::after { opacity: 1; }

/* ── Section headers stronger visual ────── */
.section-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(167,139,250,0.15));
    border: 1px solid rgba(59,130,246,0.2);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}

/* ── Hero stats stronger ─────────────────── */
.stat-number {
    background: linear-gradient(135deg, var(--accent-primary), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Featured Spotlight Carousel ─────────── */
.featured-carousel-section { background: var(--bg-secondary); }

.spotlight-carousel {
    position: relative;
    min-height: 340px;
}

.spotlight-slide {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    animation: slideIn 0.4s ease;
}
.spotlight-slide.active { display: grid; }

.spotlight-slide .spotlight-content > * {
    opacity: 0;
    transform: translateY(10px);
}

.spotlight-slide.active .spotlight-content > * {
    animation: spotlightReveal .52s ease forwards;
}

.spotlight-slide.active .spotlight-content > *:nth-child(1) { animation-delay: .03s; }
.spotlight-slide.active .spotlight-content > *:nth-child(2) { animation-delay: .1s; }
.spotlight-slide.active .spotlight-content > *:nth-child(3) { animation-delay: .17s; }
.spotlight-slide.active .spotlight-content > *:nth-child(4) { animation-delay: .24s; }
.spotlight-slide.active .spotlight-content > *:nth-child(5) { animation-delay: .31s; }

@keyframes spotlightReveal {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.spotlight-badge {
    display: inline-block;
    background: var(--accent-gradient-soft);
    border: 1px solid rgba(59,130,246,0.3);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.spotlight-content h3 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}

.spotlight-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 24px;
}

.spotlight-stats {
    display: flex;
    gap: 28px;
    margin-bottom: 28px;
}

.sstat-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-primary), #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.sstat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.spotlight-cta {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.spotlight-cta:hover { opacity: 0.8; }

.spotlight-visual svg {
    width: 100%;
    height: auto;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 16px;
}

/* Keep diagram stable; animate only internal flow/signals */
.spotlight-slide.active .spotlight-visual svg {
    animation: none;
}

.spotlight-slide.active .spotlight-visual svg [stroke] {
    animation: spotlightStrokePulse 2.4s ease-in-out infinite;
}

.spotlight-slide.active .spotlight-visual svg [fill*="rgba(52,211,153"] {
    animation: spotlightSuccessPulse 1.6s ease-in-out infinite;
}

/* Slide-specific live diagram motion */
.spotlight-slide[data-slide="0"].active .spotlight-visual svg path[stroke] {
    stroke-dasharray: 8 6;
    animation: slide0FlowDash 2.4s linear infinite;
}

.spotlight-slide[data-slide="0"].active .spotlight-visual svg .flow-packet {
    animation: slide0PacketRun 2.2s linear infinite;
    filter: drop-shadow(0 0 8px rgba(96,165,250,.7));
}

.spotlight-slide[data-slide="0"].active .spotlight-visual svg .flow-packet-2 {
    animation-delay: 1.1s;
}

.spotlight-slide[data-slide="1"].active .spotlight-visual svg circle {
    animation: none !important;
}
.spotlight-slide[data-slide="1"].active .spotlight-visual svg line {
    stroke-dasharray: 6 6;
    animation: slide1Signal 2s linear infinite;
}

.spotlight-slide[data-slide="2"].active .spotlight-visual svg text {
    animation: slide2TextBlink 2.6s ease-in-out infinite;
}

@keyframes spotlightStrokePulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes spotlightSuccessPulse {
    0%, 100% { opacity: .7; }
    50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(34,197,94,.45)); }
}

@keyframes slide0FlowDash {
    to { stroke-dashoffset: -28; }
}

@keyframes slide0PacketRun {
    0% {
        transform: translateX(0);
        fill: #60a5fa;
        opacity: 0;
    }
    8% { opacity: 1; }
    60% {
        fill: #a78bfa;
        opacity: 1;
    }
    88% {
        fill: #34d399;
        opacity: 1;
    }
    100% {
        transform: translateX(200px);
        fill: #22c55e;
        opacity: 0;
    }
}

@keyframes slide1NodePulse {
    0%, 100% { transform: scale(1); opacity: .75; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes slide1Signal {
    to { stroke-dashoffset: -24; }
}

@keyframes slide2TextBlink {
    0%, 100% { opacity: .82; }
    50% { opacity: 1; }
}

.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.carousel-dot.active {
    width: 28px;
    border-radius: 5px;
    background: var(--accent-primary);
}

@media (max-width: 768px) {
    .spotlight-slide.active { grid-template-columns: 1fr; }
    .spotlight-visual { display: none; }
    .spotlight-stats { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .spotlight-slide .spotlight-content > *,
    .spotlight-slide.active .spotlight-visual svg,
    .spotlight-slide.active .spotlight-visual svg [stroke],
    .spotlight-slide.active .spotlight-visual svg [fill*="rgba(52,211,153"] {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ── Knowledge Hub Section ────────────────── */
.knowledge-hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
    align-items: start;
}

.kh-channels {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 2px;
}

.kh-channel {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.kh-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: var(--accent-gradient-soft);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.kh-channel h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.kh-channel p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}

.kh-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kh-article-preview {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
    transition: all 0.2s ease;
}
.kh-article-preview:hover {
    transform: translateY(-3px);
    border-color: var(--accent-primary);
    box-shadow: 0 8px 32px rgba(59,130,246,0.1);
}

.kh-art-tag {
    display: inline-block;
    background: rgba(59,130,246,0.1);
    color: var(--accent-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 8px;
}

.kh-article-preview h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.32;
}

.kh-article-preview p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.42;
}

.kh-article-preview a {
    font-size: 13px;
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
}
.kh-article-preview a:hover { opacity: 0.8; }

@media (max-width: 768px) {
    .knowledge-hub-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================
   ABOUT PAGE — IMPACT MIRROR GRID
   ============================================ */
.about-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 16px;
}

.about-impact-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 28px 24px 24px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.about-impact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ai-color, #3b82f6);
    border-radius: 18px 18px 0 0;
    opacity: 0.9;
}

.about-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
}

.aic-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.3);
    /* individual icon colors set via inline style on each card */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--ai-color, #3b82f6);
}

.aic-num {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
    color: var(--ai-color, #3b82f6);
    -webkit-text-fill-color: var(--ai-color, #3b82f6);
}

.aic-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aic-detail {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

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

/* ============================================
   CERT CARDS — BRAND COLORS & BADGE
   ============================================ */
.cert-card {
    border-top: 2px solid var(--cert-color, var(--border-color)) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cert-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04) !important;
}

.cert-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    border: 1px solid var(--border-color);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
}

.cert-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 50px;
    border: 1px solid;
    margin-top: 8px;
}

/* ============================================
   PROFILE FLOATING BADGES — VISUAL UPGRADE
   ============================================ */
.profile-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    backdrop-filter: blur(8px);
    animation: badgeFloat 3s ease-in-out infinite;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.badge:nth-child(2) { animation-delay: 0.8s; }
.badge:nth-child(3) { animation-delay: 1.6s; }

.badge:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: 0 6px 20px rgba(59,130,246,0.2);
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}

.badge-icon { font-size: 16px; }


/* ============================================
   LIGHT MODE OVERRIDES for new sections
   ============================================ */
[data-theme="light"] .about-impact-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .cert-card { background: #ffffff !important; }
[data-theme="light"] .badge {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* ============================================
   AURORA.JS — Canvas + Spotlight + Word Reveal
   ============================================ */
#aurora-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

#cursor-spotlight {
    position: fixed;
    width: 500px;
    height: 500px;
    margin-left: -250px;
    margin-top: -250px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, rgba(139,92,246,0.04) 40%, transparent 70%);
    transition: opacity 0.4s ease;
    will-change: transform;
}

.scramble-ghost {
    opacity: 0.45;
    color: var(--accent-primary, #3b82f6);
}

.word-reveal-container .wr-word {
    opacity: 0;
    transform: translateY(12px);
    display: inline-block;
    transition: opacity 0.5s ease var(--wr-delay, 0ms), transform 0.5s ease var(--wr-delay, 0ms);
}

.word-reveal-container.wr-visible .wr-word {
    opacity: 1;
    transform: translateY(0);
}

[data-theme="light"] #cursor-spotlight {
    background: radial-gradient(circle, rgba(59,130,246,0.04) 0%, transparent 70%);
}

/* ============================================
   WELCOME SPLASH SCREEN
   ============================================ */
#site-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

#site-splash.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Black hole canvas bg (replaces .splash-bg) ─── */
#splash-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Heading floats at vertical centre — no card, no box */
.splash-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    padding: 32px 48px;
    pointer-events: none;
    /* soft dark glass card to make text pop over animation */
    background: radial-gradient(ellipse at center, rgba(20,8,50,0.38) 0%, rgba(10,4,28,0.18) 60%, transparent 100%);
    border-radius: 24px;
    animation: splashFadeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.4s;
}

@keyframes splashFadeIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 40px)) scale(0.96); filter: blur(6px); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1);       filter: blur(0); }
}

.splash-monogram {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
    box-shadow: 0 0 40px rgba(99,102,241,0.45), 0 0 80px rgba(139,92,246,0.2);
    margin-bottom: 8px;
    animation: splashPulse 3s ease-in-out infinite;
}

@keyframes splashPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(99,102,241,0.45), 0 0 80px rgba(139,92,246,0.2); }
    50%       { box-shadow: 0 0 60px rgba(99,102,241,0.65), 0 0 120px rgba(139,92,246,0.3); }
}

.splash-name {
    font-size: clamp(2.6rem, 7.5vw, 5.2rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    word-spacing: 0.20em;
    line-height: 1.1;
    color: rgba(255,255,255,0.95);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.20em;
    text-shadow:
        0 0 24px rgba(255, 210, 100, 0.55),
        0 0 60px rgba(200, 150, 255, 0.25),
        0 2px 40px rgba(0,   0,   0, 0.90);
}

#splash-tw-main {
    color: rgba(240, 235, 255, 0.95);
}

/* "YOU" on next line, static style */
#splash-tw-accent {
    background: linear-gradient(90deg, #ffd700, #fff0a0, #ffe066);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1.05;
    margin-top: 0.08em;
    padding-bottom: 0.06em;
}
/* only dots blink */
#splash-tw-dots {
    display: inline-block;
    -webkit-text-fill-color: rgba(255, 200, 60, 0.80);
    color: rgba(255, 200, 60, 0.80);
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-left: 0.06em;
    animation: splashDotsBlink 1s step-end infinite;
}
@keyframes splashDotsBlink {
    0%, 45% { opacity: 0.2; }
    46%, 100% { opacity: 1; }
}


/* Splash subtitle instruction */
.splash-sub {
    margin: 1.1em 0 0;
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(255, 240, 200, 0.65);
    text-align: center;
    opacity: 0;
    animation: splashBtnAppear 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: 3.8s;
}
.splash-sub em {
    font-style: normal;
    color: rgba(255, 225, 140, 0.90);
    font-weight: 600;
}

/* Legacy selector kept for safety */
.splash-name span.splash-name-legacy {
    background: linear-gradient(90deg, #818cf8, #c084fc, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Typewriter cursor */
.splash-tw-cur {
    display: none;
    color: rgba(255, 220, 100, 0.90);
    font-weight: 300;
    margin-left: 2px;
    -webkit-text-fill-color: rgba(255, 220, 100, 0.90);
    animation: none;
}

@keyframes splashCursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Hidden — removed from HTML but kept here in case JS still looks them up */
.splash-tagline,
.splash-timer,
.splash-progress { display: none !important; }

.splash-evil-eye {
    --noise-scale: 1;
    position: relative;
    width: min(360px, 72vw);
    aspect-ratio: 2.6 / 1;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at center, rgba(255, 111, 55, 0.45) 0%, rgba(255, 111, 55, 0.18) 26%, rgba(6, 0, 16, 0.92) 62%),
        linear-gradient(135deg, rgba(12, 14, 35, 0.95), rgba(18, 14, 42, 0.95));
    border: 1px solid rgba(255, 111, 55, 0.35);
    box-shadow: 0 0 38px rgba(255, 111, 55, 0.28), inset 0 0 44px rgba(255, 111, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: evilEyeFlicker 4.5s ease-in-out infinite;
}

.splash-evil-eye::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 111, 55, 0.08) 0 3px, transparent 3px 10px);
    background-size: calc(100% * var(--noise-scale)) calc(100% * var(--noise-scale));
    opacity: 0.45;
    mix-blend-mode: screen;
}

.evil-eye-iris {
    width: 44%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #ffab66 0%, #ff6f37 42%, #5a1a17 72%, #090510 100%);
    box-shadow: inset 0 0 30px rgba(255, 230, 207, 0.2), 0 0 30px rgba(255, 111, 55, 0.4);
}

.evil-eye-pupil {
    position: absolute;
    width: 18%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #1b1521 0%, #07060c 75%);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.55), inset 0 0 10px rgba(255, 255, 255, 0.08);
    transition: transform 0.12s linear;
}

.splash-customize {
    width: min(760px, 92vw);
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(2, 6, 23, 0.6);
    border-radius: 14px;
    padding: 0.8rem 0.9rem;
}

.splash-customize h3 {
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.95);
}

.customize-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem 0.65rem;
}

.customize-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: rgba(226, 232, 240, 0.86);
}

.customize-grid input[type="range"] {
    width: 100%;
}

.customize-grid input[type="color"] {
    width: 100%;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: transparent;
    padding: 0;
}

@keyframes evilEyeFlicker {
    0%, 100% { box-shadow: 0 0 38px rgba(255, 111, 55, 0.28), inset 0 0 44px rgba(255, 111, 55, 0.2); }
    50% { box-shadow: 0 0 55px rgba(255, 111, 55, 0.4), inset 0 0 56px rgba(255, 111, 55, 0.32); }
}

.splash-music {
    position: absolute;
    left: 50%;
    bottom: 122px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(129, 140, 248, 0.5);
    background: rgba(11, 15, 38, 0.56);
    color: rgba(241, 245, 249, 0.95);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.splash-music::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.9);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.45);
}

.splash-music[aria-pressed="true"] {
    border-color: rgba(34, 211, 238, 0.75);
    background: rgba(49, 46, 129, 0.65);
    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.25);
}

.splash-music[aria-pressed="true"]::before {
    background: rgba(34, 211, 238, 1);
    animation: splashBeat 1.5s ease-in-out infinite;
}

.splash-music:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 8px 24px rgba(129, 140, 248, 0.28);
}

.splash-music:focus-visible,
.splash-enter:focus-visible {
    outline: 2px solid rgba(34, 211, 238, 0.8);
    outline-offset: 2px;
}

@keyframes splashBeat {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.32); }
    60%      { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); }
}

/* Enter Portfolio — pinned to bottom centre, floats over the portal light */
.splash-enter {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 40px;
    background: rgba(255, 215, 60, 0.10);
    color: rgba(255, 245, 190, 0.95);
    border: 1px solid rgba(255, 220, 80, 0.45);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 0 30px rgba(255, 210, 60, 0.22),
        0 0 60px rgba(180, 120, 255, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform 0.3s ease, background 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    animation: splashBtnAppear 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 2.2s;  /* appears after typewriter finishes */
}
@keyframes splashBtnAppear {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.splash-enter:hover {
    transform: translateX(-50%) translateY(-3px);
    background: rgba(255, 248, 200, 0.16);
    border-color: rgba(255, 245, 180, 0.55);
    color: rgba(255, 255, 240, 1);
    box-shadow:
        0 0 50px rgba(255, 240, 150, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

.splash-enter svg {
    transition: transform 0.2s ease;
}

.splash-enter:hover svg {
    transform: translateX(4px);
}

/* .splash-particles replaced by #splash-canvas (black hole animation) */

@media (max-width: 680px) {
    .splash-content {
        padding: 0 18px;
        top: 40%;
    }
    .splash-name {
        font-size: clamp(2.2rem, 11vw, 3rem);
    }
    .splash-enter {
        bottom: 36px;
        padding: 12px 30px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .splash-content,
    .splash-enter,
    .splash-tw-cur,
    #splash-tw-accent { animation: none !important; }
    .splash-content   { opacity: 1; transform: translate(-50%, -50%); }
    .splash-enter     { opacity: 1; transform: translateX(-50%); }
    #splash-canvas    { display: none; }
}

/* Body scroll lock while splash visible */
body.splash-open {
    overflow: hidden;
}

/* ============================================
   Cross-Page Pattern Pass (ReactBits-inspired)
   ============================================ */

/* 1) Consistent page hero shell */
.page-header,
.page-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in oklab, var(--border-color) 70%, transparent);
}

.page-header::before,
.page-hero::before {
    content: "";
    position: absolute;
    inset: auto -10% -55% -10%;
    height: 65%;
    pointer-events: none;
    background:
      radial-gradient(45% 80% at 8% 50%, rgba(37,99,235,0.11), transparent 70%),
      radial-gradient(45% 80% at 92% 50%, rgba(20,184,166,0.10), transparent 72%);
}

.page-title {
    letter-spacing: inherit;
    line-height: inherit;
    text-wrap: initial;
}

.page-subtitle {
    max-width: 72ch;
    color: var(--text-secondary);
}

/* 2) Unified tabs across hero/work/writing */
.hero-tabs,
.work-tabs {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklab, var(--border-color) 72%, transparent);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
}

.hero-tab,
.wtab {
    min-height: 42px;
    font-weight: 650;
    letter-spacing: 0.01em;
}

/* Beat work.html inline rules without changing markup */
.work-tabs-bar .wtab.active,
.work-tabs .wtab.active {
    background: linear-gradient(120deg, #2563eb, #0ea5e9) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* 3) Section-header consistency */
.section-header {
    position: relative;
}

.section-header::after {
    content: "";
    display: block;
    width: min(220px, 38%);
    height: 2px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37,99,235,0.55), rgba(14,165,233,0.18), transparent);
}

/* 4) Card family cohesion */
.capability-card,
.principle-card,
.publication-card,
.project-card,
.ai-card,
.education-card,
.cert-card,
.evidence-card,
.system-card,
.about-impact-card {
    border-radius: 20px !important;
}

.publication-card h3,
.project-card h3,
.capability-card h3,
.principle-card h3,
.ai-card h3 {
    letter-spacing: -0.01em;
}

.publication-card .card-tags span,
.project-tags span,
.card-tags span,
.blog-card-tags span {
    border-radius: 999px;
    font-weight: 600;
}

/* 5) Footer visual rhythm */
.footer--pro {
    position: relative;
}

.footer--pro::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(420px 150px at 10% 0%, rgba(37,99,235,0.08), transparent 70%),
      radial-gradient(420px 150px at 90% 0%, rgba(20,184,166,0.08), transparent 70%);
}

@media (max-width: 900px) {
    .section-header::after {
        width: min(180px, 55%);
    }
}

/* 6) ReactBits-inspired text shimmer + tilt glare */
.rb-shiny-text {
    background-image: linear-gradient(
        120deg,
        color-mix(in oklab, var(--text-primary) 72%, #ffffff 28%) 0%,
        color-mix(in oklab, var(--text-primary) 72%, #ffffff 28%) 36%,
        #ffffff 50%,
        color-mix(in oklab, var(--text-primary) 72%, #ffffff 28%) 64%,
        color-mix(in oklab, var(--text-primary) 72%, #ffffff 28%) 100%
    );
    background-size: 220% auto;
    background-position: 130% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rbShinySweep 4.2s linear infinite;
}

.gradient-text.rb-shiny-text {
    background-image: linear-gradient(
        120deg,
        #2563eb 0%,
        #0ea5e9 38%,
        #ffffff 50%,
        #14b8a6 62%,
        #2563eb 100%
    );
}

@keyframes rbShinySweep {
    0% { background-position: 130% center; }
    100% { background-position: -120% center; }
}

.tilt-card {
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
}

.rb-card-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .rb-shiny-text {
        animation: none;
        background-position: 50% center;
    }
}

/* 7) Education and Certification polish */
.cert-company-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 12px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cert-color, var(--accent-primary));
    background: color-mix(in oklab, var(--cert-color, var(--accent-primary)) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--cert-color, var(--accent-primary)) 35%, transparent);
}

.education-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.education-card {
    text-align: left;
    position: relative;
    overflow: hidden;
    padding: 28px !important;
}

.education-card .edu-level {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
}

.education-card .edu-meta {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.education-card .edu-meta span {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.26);
}

.education-card--masters {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.education-card--bachelors {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.certifications-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

.certifications-section .section-header {
    margin-bottom: 20px !important;
}

.certifications-section .certs-grid {
    gap: 14px;
    margin-bottom: 14px;
}

.certifications-section .cert-card {
    padding: 20px !important;
}

.certifications-section .cert-card h3 {
    margin-bottom: 2px;
}

.certifications-section .cert-company-badge {
    margin: 6px 0 6px;
}

/* 8) Future Systems section */
.future-systems-section {
    background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 84%, transparent), var(--bg-primary));
}

.future-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.future-card {
    position: relative;
    padding: 26px 24px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 1px solid color-mix(in oklab, var(--border-color) 78%, transparent);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.08);
    animation: futureLiftIn 0.6s ease both;
}

.future-card:nth-child(2) { animation-delay: 0.08s; }
.future-card:nth-child(3) { animation-delay: 0.16s; }

.future-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.16);
}

.future-pill {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e0f2fe;
    background: linear-gradient(120deg, #1d4ed8, #0ea5e9);
}

.future-card h3 {
    margin: 14px 0 10px;
    font-size: 20px;
    line-height: 1.2;
}

.future-card p {
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.future-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
}

.future-card li {
    margin-bottom: 6px;
}

/* Hero command panel (single attractive focus section) */
.hero-command-panel {
    position: relative;
    margin-top: 12px;
    padding: 20px 20px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--border-color) 74%, transparent);
    background:
      radial-gradient(420px 160px at 8% -10%, rgba(59,130,246,0.22), transparent 60%),
      radial-gradient(360px 180px at 88% 10%, rgba(139,92,246,0.18), transparent 62%),
      color-mix(in oklab, var(--card-bg) 92%, transparent);
    box-shadow: 0 18px 36px rgba(2, 6, 23, 0.14);
    overflow: hidden;
}

.hcp-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(18px);
    opacity: 0.7;
    animation: hcpFloat 7s ease-in-out infinite;
}

.hcp-glow-1 {
    width: 120px;
    height: 120px;
    right: -20px;
    top: -24px;
    background: rgba(59,130,246,0.35);
}

.hcp-glow-2 {
    width: 94px;
    height: 94px;
    left: -16px;
    bottom: -18px;
    background: rgba(139,92,246,0.3);
    animation-delay: 1.2s;
}

@keyframes hcpFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-6px) scale(1.04); }
}

.hero-future-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 10px;
    color: #e0f2fe;
    background: linear-gradient(120deg, #1d4ed8, #0ea5e9);
    position: relative;
    z-index: 1;
}

.hero-command-panel h3 {
    margin: 10px 0 8px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--text-primary);
    position: relative;
    z-index: 1;
}

.hero-command-panel p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 15px;
    position: relative;
    z-index: 1;
}

.hcp-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.hcp-metrics span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid color-mix(in oklab, var(--border-color) 80%, transparent);
    background: color-mix(in oklab, var(--bg-secondary) 82%, transparent);
    border-radius: 999px;
    padding: 6px 10px;
}

.hero-stats {
    margin-bottom: 20px !important;
}

.hero-cta {
    margin-top: 14px;
}

.hero-future-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--accent-primary);
    position: relative;
    z-index: 1;
}

.hero-future-link:hover {
    opacity: 0.85;
    transform: translateX(2px);
}

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

@media (max-width: 980px) {
    .future-grid {
        grid-template-columns: 1fr;
    }

    .education-grid {
        grid-template-columns: 1fr;
    }
}

/* 9) About page compact rhythm + spotlight polish */
.profile-section,
.about-impact-section,
.principles-section,
.timeline-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* VR-inspired surfaces (scoped) */
.vr-home .hero,
.vr-ai .page-header.ph--ai {
    position: relative;
    isolation: isolate;
}

.vr-home .hero::before,
.vr-ai .page-header.ph--ai::before {
    content: '';
    position: absolute;
    inset: -2% -2% 0 -2%;
    z-index: -2;
    background:
      radial-gradient(700px 280px at 20% -10%, rgba(56, 189, 248, 0.22), transparent 60%),
      radial-gradient(680px 300px at 80% 0%, rgba(139, 92, 246, 0.22), transparent 62%),
      linear-gradient(180deg, rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0.5));
    filter: saturate(118%);
}

.vr-home .hero::after,
.vr-ai .page-header.ph--ai::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    z-index: -1;
    opacity: 0.26;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        to right,
        rgba(56, 189, 248, 0.22) 0,
        rgba(56, 189, 248, 0.22) 1px,
        transparent 1px,
        transparent 56px
      ),
      repeating-linear-gradient(
        to top,
        rgba(14, 116, 144, 0.22) 0,
        rgba(14, 116, 144, 0.22) 1px,
        transparent 1px,
        transparent 44px
      );
    transform: perspective(520px) rotateX(56deg) translateY(36px);
    transform-origin: bottom center;
}

.vr-home .hero-content,
.vr-ai .page-header .page-header-content {
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.56), rgba(30, 41, 59, 0.3));
    box-shadow:
      0 18px 42px rgba(2, 6, 23, 0.34),
      inset 0 1px 0 rgba(186, 230, 253, 0.16);
    backdrop-filter: blur(8px);
}

.vr-home .hero-content {
    padding: 20px;
}

.vr-home .hero-line,
.vr-home .typewriter-wrap,
.vr-ai .page-title {
    text-shadow: 0 0 24px rgba(56, 189, 248, 0.22);
}

.vr-home .hero-visual #hero-terminal {
    border: 1px solid rgba(56, 189, 248, 0.36);
    box-shadow:
      0 20px 50px rgba(2, 6, 23, 0.42),
      0 0 32px rgba(56, 189, 248, 0.2);
    transform: perspective(960px) rotateY(-7deg) rotateX(2deg);
    transform-origin: center;
}

.vr-ai .ai-card,
.vr-ai .ai-hero,
.vr-ai .decision-panel,
.vr-ai .publication-card {
    border-color: rgba(103, 232, 249, 0.24) !important;
    box-shadow:
      0 14px 34px rgba(2, 6, 23, 0.28),
      inset 0 1px 0 rgba(186, 230, 253, 0.12) !important;
    background:
      linear-gradient(155deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.56)) !important;
}

.vr-ai .ai-card:hover,
.vr-ai .publication-card:hover {
    transform: translateY(-6px) rotateX(2deg);
    box-shadow:
      0 20px 44px rgba(2, 6, 23, 0.36),
      0 0 24px rgba(56, 189, 248, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
    .vr-home .hero-visual #hero-terminal,
    .vr-ai .ai-card:hover,
    .vr-ai .publication-card:hover,
    .vr-home .hero::after,
    .vr-ai .page-header.ph--ai::after {
        transform: none;
    }
}

.timeline {
    margin-top: 20px;
}

.timeline-item {
    margin-bottom: 22px !important;
}

.timeline-content {
    padding: 22px !important;
}

.timeline-content p:last-of-type {
    margin-bottom: 12px !important;
}

.section-header {
    margin-bottom: 24px !important;
}

.about-impact-grid {
    gap: 16px !important;
}

.about-impact-card {
    padding: 24px !important;
}

.capability-card,
.principle-card,
.publication-card,
.project-card,
.ai-card,
.about-impact-card,
.timeline-content,
.cert-card,
.education-card,
.future-card {
    position: relative;
    isolation: isolate;
}

.capability-card::before,
.principle-card::before,
.publication-card::before,
.project-card::before,
.ai-card::before,
.about-impact-card::before,
.timeline-content::before,
.cert-card::before,
.education-card::before,
.future-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
    background: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.02) 45%,
        transparent 70%
    );
    z-index: 0;
}

.capability-card:hover::before,
.principle-card:hover::before,
.publication-card:hover::before,
.project-card:hover::before,
.ai-card:hover::before,
.about-impact-card:hover::before,
.timeline-content:hover::before,
.cert-card:hover::before,
.education-card:hover::before,
.future-card:hover::before {
    opacity: 1;
}

/* 10) Work -> Projects animated flow showcase */
.project-flow-showcase {
    margin-bottom: 26px;
    border: 1px solid color-mix(in oklab, var(--border-color) 75%, transparent);
    border-radius: 22px;
    padding: 22px;
    background:
      radial-gradient(540px 160px at 8% 0%, rgba(37,99,235,0.12), transparent 70%),
      radial-gradient(540px 160px at 92% 100%, rgba(20,184,166,0.10), transparent 70%),
      var(--card-bg);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.10);
}

.pfs-head h3 {
    margin: 10px 0 8px;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    letter-spacing: -0.02em;
}

.pfs-head p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.pfs-board {
    border: 1px solid color-mix(in oklab, var(--border-color) 72%, transparent);
    border-radius: 16px;
    padding: 16px;
    background: color-mix(in oklab, var(--bg-secondary) 60%, transparent);
}

.pfs-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    position: relative;
}

.pfs-stage {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 8px 10px;
    border: 1px solid color-mix(in oklab, var(--border-color) 70%, transparent);
    background: var(--card-bg);
    color: var(--text-secondary);
    animation: pfsPulse 3.2s ease-in-out infinite;
}

.pfs-stage:nth-child(2) { animation-delay: .2s; }
.pfs-stage:nth-child(3) { animation-delay: .4s; }
.pfs-stage:nth-child(4) { animation-delay: .6s; }
.pfs-stage:nth-child(5) { animation-delay: .8s; }

.pfs-stage.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(120deg, #2563eb, #0ea5e9);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.pfs-beam {
    margin: 12px 2px 14px;
    height: 6px;
    border-radius: 999px;
    position: relative;
    background: linear-gradient(90deg, rgba(148,163,184,0.2), rgba(148,163,184,0.08));
    overflow: hidden;
}

.pfs-beam::before {
    content: "";
    position: absolute;
    top: 0;
    left: -22%;
    width: 22%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37,99,235,0.1), rgba(14,165,233,0.9), rgba(20,184,166,0.1));
    animation: pfsBeam 2.2s linear infinite;
}

.pfs-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pfs-metric {
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in oklab, var(--border-color) 72%, transparent);
    background: var(--card-bg);
}

.pfs-metric strong {
    display: block;
    font-size: 16px;
    margin-bottom: 3px;
}

.pfs-metric span {
    font-size: 12px;
    color: var(--text-secondary);
}

@keyframes pfsBeam {
    from { left: -22%; }
    to { left: 100%; }
}

@keyframes pfsPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@media (max-width: 900px) {
    .pfs-track {
        grid-template-columns: 1fr;
    }

    .pfs-metrics {
        grid-template-columns: 1fr;
    }
}

/* 11) Project-card micro telemetry strip */
.project-content {
    position: relative;
    padding-top: 44px !important;
}

.project-content::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 32px;
    right: 32px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--border-color) 72%, transparent);
    background:
      radial-gradient(circle at 10px 50%, #22c55e 0 3px, transparent 4px),
      linear-gradient(90deg, rgba(37,99,235,0.10), rgba(14,165,233,0.15), rgba(20,184,166,0.10));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.project-content::after {
    content: "";
    position: absolute;
    top: 23px;
    left: 44px;
    width: 34%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37,99,235,0.1), rgba(14,165,233,0.95), rgba(20,184,166,0.1));
    animation: projectTelemetrySweep 2.6s linear infinite;
}

.project-card:nth-child(2n) .project-content::after { animation-delay: .35s; }
.project-card:nth-child(3n) .project-content::after { animation-delay: .7s; }

@keyframes projectTelemetrySweep {
    0% { transform: translateX(0); opacity: .4; }
    50% { opacity: 1; }
    100% { transform: translateX(145%); opacity: .35; }
}

/* 12) Animated project-image visuals (ReactBits-inspired) */
.project-image {
    position: relative;
    isolation: isolate;
}

.project-visual-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in oklab, var(--border-color) 72%, transparent);
    z-index: 0;
}

.project-image {
    --px: 0;
    --py: 0;
}

.project-visual-bg .pv-grid {
    position: absolute;
    inset: -30%;
    background-image:
      linear-gradient(to right, rgba(148,163,184,0.12) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(148,163,184,0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    animation: pvGridDrift 14s linear infinite;
    opacity: .28;
    transform: translate(calc(var(--px) * 6px), calc(var(--py) * 6px));
}

.project-visual-bg .pv-beam {
    position: absolute;
    left: -30%;
    top: 42%;
    width: 30%;
    height: 16%;
    border-radius: 999px;
    filter: blur(4px);
    background: linear-gradient(90deg, rgba(37,99,235,0), rgba(14,165,233,0.9), rgba(20,184,166,0));
    animation: pvBeamScan 3.4s ease-in-out infinite;
    transform: translateY(calc(var(--py) * 3px));
}

.project-visual-bg .pv-orbit {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    border: 1px solid rgba(59,130,246,0.22);
    top: calc(50% - 55px);
    left: calc(50% - 55px);
    animation: pvOrbitSpin 8s linear infinite;
    transform: translate(calc(var(--px) * -4px), calc(var(--py) * -4px));
}

.project-visual-bg .pv-orbit::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: #22d3ee;
    box-shadow: 0 0 14px rgba(34,211,238,.8);
}

.project-visual-bg .pv-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(59,130,246,0.42);
    box-shadow: 0 0 8px rgba(59,130,246,0.28);
    animation: pvFloat 4.5s ease-in-out infinite;
}

.project-visual-bg .pv-dot-1 { top: 26%; left: 22%; animation-delay: 0s; }
.project-visual-bg .pv-dot-2 { top: 64%; left: 30%; animation-delay: .8s; }
.project-visual-bg .pv-dot-3 { top: 38%; right: 24%; animation-delay: 1.5s; }

.project-image .project-placeholder {
    position: relative;
    z-index: 2;
}
/* Badge must stay absolute so it anchors to bottom-left of the image */
.project-image .project-impact-badge {
    z-index: 2;
}

.project-placeholder--animated {
    opacity: 1 !important;
    color: transparent;
    /* Radial glow behind glyph */
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(59,130,246,0.12) 0%, transparent 70%);
}
.project-image--security .project-placeholder--animated {
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(16,185,129,0.14) 0%, transparent 70%);
}
.project-image--automation .project-placeholder--animated {
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(139,92,246,0.14) 0%, transparent 70%);
}
.project-image--ai .project-placeholder--animated {
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(236,72,153,0.14) 0%, transparent 70%);
}

.glyph {
    width: 80px;
    height: 80px;
    display: inline-block;
    position: relative;
    filter: drop-shadow(0 8px 24px rgba(37,99,235,.35));
}

.glyph-factory .g-bar {
    position: absolute;
    bottom: 10px;
    width: 10px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #93c5fd, #3b82f6);
    animation: glyphBars 1.6s ease-in-out infinite;
}

.glyph-factory .g-bar-1 { left: 14px; height: 30px; animation-delay: 0s; }
.glyph-factory .g-bar-2 { left: 30px; height: 44px; animation-delay: .2s; }
.glyph-factory .g-bar-3 { left: 46px; height: 24px; animation-delay: .4s; }

.glyph-shield .g-core {
    position: absolute;
    inset: 12px;
    clip-path: polygon(50% 0, 90% 18%, 82% 70%, 50% 100%, 18% 70%, 10% 18%);
    background: linear-gradient(180deg, #6ee7b7, #10b981);
}

.glyph-shield .g-ring {
    position: absolute;
    inset: 6px;
    border: 2px solid rgba(16,185,129,.4);
    border-radius: 18px;
    animation: glyphPulse 1.8s ease-out infinite;
}

.glyph-gear .g-gear {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 9px dashed #8b5cf6;
    animation: glyphSpin 5s linear infinite;
}

.glyph-health .g-plus-v,
.glyph-health .g-plus-h {
    position: absolute;
    background: linear-gradient(180deg, #38bdf8, #2563eb);
    border-radius: 4px;
}

.glyph-health .g-plus-v { width: 16px; height: 52px; left: 32px; top: 14px; }
.glyph-health .g-plus-h { width: 52px; height: 16px; left: 14px; top: 32px; }

.glyph-lock .g-lock-top {
    position: absolute;
    left: 22px;
    top: 8px;
    width: 32px;
    height: 26px;
    border: 5px solid #f59e0b;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
}

.glyph-lock .g-lock-body {
    position: absolute;
    left: 16px;
    top: 30px;
    width: 44px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fcd34d, #f59e0b);
    animation: glyphNudge 1.9s ease-in-out infinite;
}

.glyph-ai .g-node {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: 0 0 16px rgba(236,72,153,.6);
}

.glyph-ai .g-node-1 { left: 10px; top: 36px; animation: glyphPulse 1.5s ease-in-out infinite; }
.glyph-ai .g-node-2 { left: 33px; top: 14px; animation: glyphPulse 1.5s ease-in-out infinite .2s; }
.glyph-ai .g-node-3 { left: 54px; top: 40px; animation: glyphPulse 1.5s ease-in-out infinite .4s; }

.glyph-ai::before,
.glyph-ai::after {
    content: "";
    position: absolute;
    height: 2px;
    background: rgba(236,72,153,.5);
    transform-origin: left center;
}

.glyph-ai::before { left: 20px; top: 35px; width: 18px; transform: rotate(-32deg); }
.glyph-ai::after { left: 34px; top: 24px; width: 16px; transform: rotate(42deg); }

@keyframes glyphBars {
    0%, 100% { transform: scaleY(1); opacity: .7; }
    50% { transform: scaleY(1.18); opacity: 1; }
}

@keyframes glyphPulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.15); opacity: 1; }
}

@keyframes glyphSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes glyphNudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.project-image--flow .pv-flow-ui {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    z-index: 1;
}

.project-image--flow .pv-flow-ui span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 6px 4px;
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,0.28);
    background: rgba(15,23,42,0.06);
}

.project-image--flow .pv-orbit {
    top: calc(62% - 45px);
    left: calc(50% - 45px);
    border-color: rgba(99,102,241,0.26);
}

.project-image--flow .pv-grid {
    opacity: .42;
}

.project-image--flow .pv-beam {
    animation-duration: 2.4s;
}

.project-image--flow .pv-dot {
    background: rgba(99,102,241,0.62);
    box-shadow: 0 0 12px rgba(99,102,241,0.42);
}

.project-image--flow .pv-node {
    position: absolute;
    z-index: 1;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.32);
    background: rgba(255,255,255,0.72);
}

.project-image--flow .pv-node-t { top: 36%; left: 50%; transform: translateX(-50%); }
.project-image--flow .pv-node-r { top: 62%; right: 14%; transform: translateY(-50%); }
.project-image--flow .pv-node-b { bottom: 12%; left: 50%; transform: translateX(-50%); }
.project-image--flow .pv-node-l { top: 62%; left: 14%; transform: translateY(-50%); }

/* Category-specific image backgrounds */
.project-image--platform {
    background: linear-gradient(145deg, #0a1628 0%, #0f2044 60%, #0d1f3c 100%);
}
.project-image--security {
    background: linear-gradient(145deg, #051a14 0%, #0b2d20 60%, #0a2418 100%);
}
.project-image--automation {
    background: linear-gradient(145deg, #130c2e 0%, #1e1050 60%, #170d40 100%);
}
.project-image--ai {
    background: linear-gradient(145deg, #1a0828 0%, #2d1044 60%, #220c38 100%);
}

/* Category beam colors */
.project-image--platform .pv-beam { background: linear-gradient(90deg, rgba(37,99,235,0), rgba(59,130,246,.95), rgba(14,165,233,0)); }
.project-image--security .pv-beam { background: linear-gradient(90deg, rgba(14,165,233,0), rgba(16,185,129,.95), rgba(14,165,233,0)); }
.project-image--automation .pv-beam { background: linear-gradient(90deg, rgba(99,102,241,0), rgba(139,92,246,.95), rgba(99,102,241,0)); }
.project-image--ai .pv-beam { background: linear-gradient(90deg, rgba(236,72,153,0), rgba(244,114,182,.95), rgba(236,72,153,0)); }

/* Category glow tint on orbit dot */
.project-image--security .pv-orbit::before { background: #10b981; box-shadow: 0 0 14px rgba(16,185,129,.8); }
.project-image--automation .pv-orbit::before { background: #8b5cf6; box-shadow: 0 0 14px rgba(139,92,246,.8); }
.project-image--ai .pv-orbit::before { background: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,.8); }

@keyframes pvGridDrift {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-22px,-22px,0); }
}

@keyframes pvBeamScan {
    0% { left: -30%; opacity: 0; }
    20% { opacity: .9; }
    80% { opacity: .9; }
    100% { left: 110%; opacity: 0; }
}

@keyframes pvOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pvFloat {
    0%, 100% { transform: translateY(0); opacity: .4; }
    50% { transform: translateY(-8px); opacity: .95; }
}

/* 13) Projects layout polish */
.projects-grid {
    gap: 22px !important;
    grid-auto-flow: row dense;
    align-items: start;
}

.project-card {
    border-radius: 18px !important;
    overflow: hidden;
}

.project-image {
    height: 168px !important;
}

.project-card.featured .project-image {
    height: 300px !important;
}

.project-content {
    padding: 22px 22px 20px !important;
}

.project-card.featured .project-content {
    padding: 24px 24px 22px !important;
}

.project-content h3 {
    font-size: clamp(1.25rem, 2vw, 1.9rem) !important;
    margin-bottom: 8px !important;
    line-height: 1.2;
}

.project-content p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
}

.project-features {
    margin: 10px 0 14px !important;
}

.project-features li {
    font-size: 12px !important;
    line-height: 1.45;
    margin-bottom: 7px !important;
}

.project-tech {
    gap: 6px !important;
    margin-bottom: 0 !important;
}

.project-tech span {
    font-size: 10px !important;
    padding: 5px 9px !important;
}

@media (min-width: 1100px) {
    .projects-grid {
        grid-template-columns: 1.75fr 1fr !important;
        align-items: start;
    }

    .project-card.featured {
        grid-column: 1 / 2 !important;
        grid-row: auto !important;
        display: block !important;
    }
}

/* ── Work page: compact section rhythm ─────────────────────── */
/* Override the section-padding variable so inline style="padding-*:0"
   sections still honour their zero — we only shrink the default */
.work-panel {
    --section-padding: 36px;
}

.work-panel .section-header {
    margin-bottom: 22px;
}

/* Tighten the project flow showcase */
.project-flow-showcase {
    margin-bottom: 18px;
}

/* Tighten filter row */
.projects-filter {
    margin-bottom: 16px;
}

/* Compact page-header for work page */
.ph--projects.page-header {
    padding: 72px 0 40px !important;
}

/* Tighter gap between projects-grid and case study */
.projects-grid {
    margin-bottom: 20px;
}

/* ── Brand cert logo banners ─────────────────────────────── */
.cert-logo-banner {
    width: 100%;
    height: 56px;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -20px -20px 14px -20px;
    width: calc(100% + 40px);
    overflow: hidden;
}

.cert-logo-banner svg {
    width: 100%;
    height: 100%;
    max-height: 56px;
    transform-origin: center center;
    will-change: transform;
}

.cert-logo-banner img {
    transform-origin: center center;
    will-change: transform;
}

/* Certification logo twists once per hover, then stops */
.cert-card:hover .cert-logo-banner svg,
.cert-card:hover .cert-logo-banner img {
    animation: certLogoCinematicTwist 0.82s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

@keyframes certLogoCinematicTwist {
    0% {
        transform: perspective(700px) rotateY(0deg) rotateZ(0deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(99, 102, 241, 0));
    }
    35% {
        transform: perspective(700px) rotateY(20deg) rotateZ(2deg) scale(1.04);
        filter: drop-shadow(0 8px 14px rgba(99, 102, 241, 0.24));
    }
    68% {
        transform: perspective(700px) rotateY(-16deg) rotateZ(-1.5deg) scale(1.03);
        filter: drop-shadow(0 6px 10px rgba(99, 102, 241, 0.2));
    }
    100% {
        transform: perspective(700px) rotateY(0deg) rotateZ(0deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(99, 102, 241, 0));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cert-card:hover .cert-logo-banner svg,
    .cert-card:hover .cert-logo-banner img {
        animation: none !important;
    }
}

/* Remove old cert-icon when cert-logo-banner is present */
.cert-card:has(.cert-logo-banner) .cert-icon {
    display: none;
}

/* Light mode: ensure dark-background banners stay dark */
[data-theme="light"] .cert-logo-banner[style*="background: #232F3E"],
[data-theme="light"] .cert-logo-banner[style*="background: #003052"],
[data-theme="light"] .cert-logo-banner[style*="background: #D72638"],
[data-theme="light"] .cert-logo-banner[style*="background: linear-gradient"] {
    filter: none;
}

/* ── Social pill light mode fix ─────────────────────────── */
[data-theme="light"] .social-pill {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .social-pill:hover {
    background: rgba(99,102,241,0.08) !important;
    border-color: rgba(99,102,241,0.3) !important;
    color: #4f46e5 !important;
}

/* ══════════════════════════════════════════════════════════
   BLACK HOLE PORTAL BUTTON (home hero → welcome screen)
   ══════════════════════════════════════════════════════════ */
.bh-portal-btn {
    position: fixed;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    z-index: 900;
    cursor: pointer;
    transition: color 0.3s ease, right 0.3s ease;
}
.bh-portal-btn:hover { color: rgba(255,255,255,0.95); }

/* Concentric orbit rings */
.bh-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(129,140,248,0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.bh-orbit-1 {
    width: 56px; height: 56px;
    animation: bhOrbit1 3s linear infinite;
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 0 8px rgba(99,102,241,0.3);
}
.bh-orbit-2 {
    width: 78px; height: 78px;
    animation: bhOrbit2 5s linear infinite reverse;
    border-color: rgba(139,92,246,0.3);
}
@keyframes bhOrbit1 {
    from { transform: translate(-50%, -50%) rotate(0deg)   scaleX(1)    scaleY(0.4); }
    to   { transform: translate(-50%, -50%) rotate(360deg) scaleX(1)    scaleY(0.4); }
}
@keyframes bhOrbit2 {
    from { transform: translate(-50%, -50%) rotate(0deg)   scaleX(0.65) scaleY(1); }
    to   { transform: translate(-50%, -50%) rotate(360deg) scaleX(0.65) scaleY(1); }
}

/* Central black hole core */
.bh-core {
    position: relative;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%,
        rgba(40,20,80,0.9) 0%,
        rgba(10,6,24,0.97) 55%,
        #000 100%);
    border: 1px solid rgba(129,140,248,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 18px rgba(99,102,241,0.4),
        0 0 40px rgba(99,102,241,0.15),
        inset 0 0 14px rgba(139,92,246,0.25);
    color: rgba(129,140,248,0.8);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    animation: bhCorePulse 3s ease-in-out infinite;
}
@keyframes bhCorePulse {
    0%, 100% { box-shadow: 0 0 18px rgba(99,102,241,0.4), 0 0 40px rgba(99,102,241,0.15), inset 0 0 14px rgba(139,92,246,0.25); }
    50%       { box-shadow: 0 0 30px rgba(99,102,241,0.65), 0 0 70px rgba(99,102,241,0.25), inset 0 0 20px rgba(139,92,246,0.4); }
}
.bh-portal-btn:hover .bh-core {
    transform: scale(1.12);
    box-shadow: 0 0 40px rgba(99,102,241,0.7), 0 0 80px rgba(139,92,246,0.35), inset 0 0 22px rgba(139,92,246,0.5);
}

/* Label */
.bh-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.6);
    margin-top: 46px; /* pushes below the orbit rings */
    white-space: nowrap;
    transition: color 0.3s ease;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.bh-portal-btn:hover .bh-label { color: rgba(129,140,248,0.9); }

@media (max-width: 768px) {
    .bh-portal-btn {
        right: 14px;
    }
    .bh-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bh-orbit-1, .bh-orbit-2, .bh-core { animation: none; }
}

/* ── Footer icon-btn light mode fix ─────────────────────── */
[data-theme="light"] .icon-btn {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .icon-btn svg {
    color: var(--text-primary);
    stroke: var(--text-primary);
}

[data-theme="light"] .icon-btn:hover {
    background: rgba(99,102,241,0.1) !important;
    border-color: rgba(99,102,241,0.35) !important;
}

/* Strong footer icon visibility guard (all pages/themes) */
.footer .footer-icon-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 44px) !important;
    gap: 12px !important;
}

.footer .icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    background: rgba(255,255,255,0.06) !important;
    color: #e2e8f0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.footer .icon-btn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    opacity: 1 !important;
    stroke: currentColor !important;
    fill: none !important;
}

.footer .icon-btn .icon-img {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    opacity: 1 !important;
}

a.has-link-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

a.has-link-icon .link-icon {
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
    flex: 0 0 14px !important;
    opacity: 0.95 !important;
}

/* Global responsive safety layer */
img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

.container {
    width: min(1200px, calc(100% - 32px)) !important;
}

@media (max-width: 768px) {
    .container {
        width: calc(100% - 20px) !important;
    }

    .hero,
    .page-header {
        overflow: hidden !important;
    }

    .hero-title,
    .hero-name,
    .page-title,
    .section-title {
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    .footer .footer-grid {
        gap: 18px !important;
    }
}

/* ============================================
   Header Refresh (Global)
   ============================================ */
.navbar {
    background:
      linear-gradient(120deg, rgba(15,23,42,0.72), rgba(30,41,59,0.62)) !important;
    border-bottom: 1px solid rgba(99,102,241,0.22) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
    box-shadow: 0 10px 34px rgba(2, 6, 23, 0.16) !important;
}

.navbar.scrolled {
    background:
      linear-gradient(120deg, rgba(15,23,42,0.86), rgba(30,41,59,0.82)) !important;
    border-bottom-color: rgba(99,102,241,0.28) !important;
    box-shadow: 0 14px 40px rgba(2, 6, 23, 0.22) !important;
}

[data-theme="light"] .navbar {
    background:
      linear-gradient(120deg, rgba(255,255,255,0.88), rgba(245,247,255,0.86)) !important;
    border-bottom: 1px solid rgba(99,102,241,0.18) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .navbar.scrolled {
    background:
      linear-gradient(120deg, rgba(255,255,255,0.96), rgba(244,247,255,0.94)) !important;
}

.nav-link {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding: 7px 12px !important;
}

.nav-link:hover {
    border-color: rgba(99,102,241,0.32) !important;
    background: rgba(99,102,241,0.12) !important;
    color: var(--text-primary) !important;
}

.nav-link.active {
    color: #c7d2fe !important;
    border-color: rgba(129,140,248,0.4) !important;
    background: linear-gradient(120deg, rgba(59,130,246,0.18), rgba(139,92,246,0.2)) !important;
}

[data-theme="light"] .nav-link.active {
    color: #1e1b4b !important;
    border-color: rgba(99,102,241,0.28) !important;
    background: linear-gradient(120deg, rgba(59,130,246,0.12), rgba(139,92,246,0.14)) !important;
}

.theme-toggle {
    border: 1px solid rgba(99,102,241,0.24) !important;
    background: rgba(99,102,241,0.12) !important;
}

.ui-sound-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle:hover {
    background: rgba(99,102,241,0.2) !important;
}

@media (max-width: 768px) {
    .nav-menu {
        background:
          linear-gradient(160deg, rgba(15,23,42,0.95), rgba(30,41,59,0.92)) !important;
        border-left: 1px solid rgba(99,102,241,0.24) !important;
    }

    [data-theme="light"] .nav-menu {
        background:
          linear-gradient(160deg, rgba(255,255,255,0.98), rgba(245,247,255,0.96)) !important;
        border-left: 1px solid rgba(99,102,241,0.16) !important;
    }
}

/* Auto-animation polish for pages that were previously static */
.publication-card,
.project-card,
.future-card,
.ai-card,
.principle-card,
.education-card,
.evidence-card,
.system-card {
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .publication-card,
    .project-card,
    .future-card,
    .ai-card,
    .principle-card,
    .education-card,
    .evidence-card,
    .system-card {
        animation: none !important;
        transition: none !important;
    }
}

[data-theme="light"] .footer .icon-btn {
    border: 1px solid rgba(15,23,42,0.14) !important;
    background: rgba(15,23,42,0.05) !important;
    color: #0f172a !important;
}

/* ── Footer connect CTA light mode ──────────────────────── */
[data-theme="light"] .footer-cta {
    background: rgba(99,102,241,0.1) !important;
    border-color: rgba(99,102,241,0.25) !important;
    color: #4f46e5 !important;
}


/* ══════════════════════════════════════════════════════════
   JETON-INSPIRED ANIMATIONS — Wave 5
   ══════════════════════════════════════════════════════════ */

/* ── 1. Masked Word Reveal ──────────────────────────────── */
/*
   Usage: add data-reveal="words" to any heading.
   JS splits text into .rv-word > .rv-inner spans.
   IntersectionObserver adds data-rv-visible="1" to trigger.
*/
.rv-word {
    overflow: hidden;
    display: inline-block;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
    vertical-align: bottom;
}
.rv-word:not(:last-child) { margin-right: 0.3em; }
.rv-inner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.78s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(0.085s * var(--wi, 0));
    will-change: transform;
}
[data-rv-visible="1"] .rv-inner { transform: translateY(0); }

/* Reduced motion: skip clip animation */
@media (prefers-reduced-motion: reduce) {
    .rv-inner { transform: none; transition: none; }
}

/* ── 2. Nav Character Roll (jeton.com style) ──────────────
   JS splits each .nav-link text into .nl-c spans with --i.
   On hover: original chars roll up, clone row slides in.
*/
.nav-link .nl-wrap {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
    height: 1.25em;
    line-height: 1.25;
}
.nl-row {
    display: flex;
    align-items: center;
}
.nl-row--dupe {
    position: absolute;
    top: 100%;
    left: 0;
    pointer-events: none;
    white-space: nowrap;
}
.nl-c {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(14ms * var(--i, 0));
}
.nav-link:hover .nl-c { transform: translateY(-100%); }

/* Reduced motion: disable char roll */
@media (prefers-reduced-motion: reduce) {
    .nav-link .nl-wrap { overflow: visible; height: auto; }
    .nl-row--dupe { display: none; }
    .nl-c { transition: none; transform: none !important; }
}

/* ── 3. CTA Button Text Roll ──────────────────────────────
   JS wraps button <span> text in .btn-orig + .btn-dupe.
   On hover: text rolls up, dupe rolls in from below.
*/
/* Button roll — wrap spans handled in JS (initBtnRoll) */
.btn { position: relative; overflow: hidden; }
.btn-inner-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
    height: 1.2em;
    line-height: 1.2;
}
.btn-orig,
.btn-dupe {
    display: block;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.btn-dupe {
    position: absolute;
    top: 100%;
    left: 0;
    pointer-events: none;
}
.btn:hover .btn-orig { transform: translateY(-100%); }
.btn:hover .btn-dupe { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
    .btn-dupe { display: none; }
    .btn-orig, .btn-dupe { transition: none; transform: none !important; }
}

/* ── 4. Smooth Lerp Scroll subtle page feel ──────────────
   Applied via JS (initLerpScroll) — no CSS needed here.
   But define the custom cursor smoother transition:
*/
#cursor-dot {
    transition: left 0.06s linear, top 0.06s linear,
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease;
}

/* Home compact spacing pass */
.home-page .hero {
    min-height: auto;
    padding-top: 112px;
    padding-bottom: 46px;
}

.home-page .hero-content {
    max-width: 610px;
}

.home-page .hero-line.line-3 {
    margin-bottom: 14px !important;
}

.home-page .hero-stats {
    margin-bottom: 12px !important;
    padding: 16px !important;
    gap: 14px !important;
}

.home-page .hero-visual {
    height: 320px;
    margin-top: 8px;
}

.home-page .scroll-indicator {
    bottom: 20px;
}

.home-page .section {
    padding-top: 62px;
    padding-bottom: 62px;
}

.home-page .section-header {
    margin-bottom: 24px !important;
}

.home-page .featured-carousel-section .spotlight-carousel {
    margin-top: 8px;
}

.home-page .spotlight-slide {
    gap: 24px !important;
}

.home-page .spotlight-content p {
    margin-bottom: 12px !important;
}

.home-page .spotlight-stats {
    margin-bottom: 12px !important;
}

.home-page .knowledge-hub-grid {
    gap: 18px !important;
}

@media (max-width: 980px) {
    .home-page .hero {
        padding-top: 96px;
        padding-bottom: 34px;
    }

    .home-page .section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* Global heading base — sizes and alignment set in UNIFIED TYPE SCALE block at end of file */
.page-title,
.section-title {
    word-break: normal;
    white-space: normal !important;
    font-kerning: normal;
}

/* Global compact spacing pass (all pages) */
:root {
    --section-padding: 56px;
}

.section {
    padding-top: var(--section-padding) !important;
    padding-bottom: var(--section-padding) !important;
}

.page-header {
    padding: 96px 0 56px !important;
}

.section-header {
    margin-bottom: 22px !important;
}

.section-subtitle,
.page-subtitle {
    margin-bottom: 0 !important;
}

@media (max-width: 980px) {
    :root {
        --section-padding: 44px;
    }

    .page-header {
        padding: 84px 0 44px !important;
    }

    .section-header {
        margin-bottom: 18px !important;
    }
}

.page-subtitle,
.section-subtitle {
    margin-top: 0 !important;
}

.page-title .gradient-text,
.section-title .gradient-text,
h1 .gradient-text,
h2 .gradient-text,
h3 .gradient-text {
    display: inline !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    vertical-align: baseline;
}

/* Flagship Systems animation pass */
.flagship-systems .systems-showcase {
    position: relative;
}

.flagship-systems .system-card {
    position: relative;
    overflow: hidden;
    animation: fsCardIn 680ms cubic-bezier(.2,.8,.2,1) both;
}

.flagship-systems .system-card:nth-child(1) { animation-delay: 80ms; }
.flagship-systems .system-card:nth-child(2) { animation-delay: 180ms; }
.flagship-systems .system-card:nth-child(3) { animation-delay: 280ms; }

@keyframes fsCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.flagship-systems .system-card::after {
    content: '';
    position: absolute;
    top: -120%;
    left: -35%;
    width: 50%;
    height: 280%;
    background: linear-gradient(115deg, transparent, rgba(125,211,252,0.16), transparent);
    transform: rotate(14deg);
    opacity: 0;
    pointer-events: none;
}

.flagship-systems .system-card:hover::after {
    opacity: 1;
    animation: fsShimmer 1.2s ease;
}

@keyframes fsShimmer {
    from { transform: translateX(-180%) rotate(14deg); }
    to { transform: translateX(260%) rotate(14deg); }
}

.flagship-systems .diagram-connections::before {
    border-color: color-mix(in oklab, var(--accent-primary) 36%, var(--border-color)) !important;
    animation: fsOrbitSpin 24s linear infinite, fsOrbitPulse 5.5s ease-in-out infinite;
}

.flagship-systems .diagram-connections::after {
    background:
      linear-gradient(to right, transparent 49.5%, color-mix(in oklab, var(--accent-primary) 34%, transparent) 49.5%, color-mix(in oklab, var(--accent-primary) 34%, transparent) 50.5%, transparent 50.5%),
      linear-gradient(to bottom, transparent 49.5%, color-mix(in oklab, var(--accent-primary) 34%, transparent) 49.5%, color-mix(in oklab, var(--accent-primary) 34%, transparent) 50.5%, transparent 50.5%);
    opacity: 0.45;
    animation: fsCrossPulse 4s ease-in-out infinite;
}

@keyframes fsOrbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fsOrbitPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.9; }
}

@keyframes fsCrossPulse {
    0%, 100% { opacity: 0.28; }
    50% { opacity: 0.62; }
}

.flagship-systems .diagram-node:not(.central) {
    animation: fsNodeFloat 4.5s ease-in-out infinite;
}

.flagship-systems .diagram-node[style*="--pos: 0"] { animation-delay: 0s; }
.flagship-systems .diagram-node[style*="--pos: 1"] { animation-delay: .8s; }
.flagship-systems .diagram-node[style*="--pos: 2"] { animation-delay: 1.6s; }
.flagship-systems .diagram-node[style*="--pos: 3"] { animation-delay: 2.4s; }

@keyframes fsNodeFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -4px; }
}

.flagship-systems .sp-step.active {
    animation: stepPulse 1.25s ease-in-out infinite, fsStepGlow 2.2s ease-in-out infinite;
}

@keyframes fsStepGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(59,130,246,0)); }
    50% { filter: drop-shadow(0 0 8px rgba(59,130,246,0.42)); }
}

/* ============================================
   UNIFIED TYPE SCALE — Final authority
   Standardizes all heading sizes site-wide.
   Must stay at end of file to win specificity.
   ============================================ */

/* Home hero heading normalization */
.hero-title,
.hero-name {
    font-size: clamp(2.6rem, 6.2vw, 4.8rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.022em !important;
    word-spacing: 0 !important;
    text-wrap: balance !important;
}

/* Page header hero titles */
.page-title {
    font-size: clamp(2.1rem, 5vw, 3.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    word-spacing: normal !important;
    line-height: 1.18 !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    text-wrap: pretty !important;
    word-break: normal !important;
    white-space: normal !important;
    font-family: var(--font-primary) !important;
    font-kerning: normal !important;
}

/* Section h2 titles */
.section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    word-spacing: normal !important;
    line-height: 1.22 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    text-wrap: pretty !important;
    word-break: normal !important;
    white-space: normal !important;
    font-family: var(--font-primary) !important;
    font-kerning: normal !important;
}

/* Subtitles */
.page-subtitle,
.section-subtitle {
    font-size: 1rem !important;
    line-height: 1.72 !important;
}

/* Section header gap */
.section-header {
    margin-bottom: 24px !important;
}

/* Card h3 — consistent across all card types */
.capability-card h3,
.ai-card h3,
.principle-card h3,
.project-content h3,
.publication-card h3,
.future-card h3,
.evidence-card h3,
.cert-card h3,
.pfs-head h3,
.spotlight-content h3 {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
}

/* Featured card — allowed to be slightly larger */
.capability-card.featured h3 {
    font-size: 1.25rem !important;
}

/* Impact block h3 */
.impact-block-header h3 {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
}

/* Article body headings */
.article-body h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    margin: 44px 0 14px !important;
    text-align: left !important;
}

.article-body h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    margin: 28px 0 10px !important;
    text-align: left !important;
}

/* Gradient text inside headings — no extra spacing */
.page-title .gradient-text,
.section-title .gradient-text {
    display: inline !important;
    padding-bottom: 0 !important;
    line-height: inherit !important;
}

/* Projects page readability pass */
.projects-grid {
    gap: 24px !important;
}

.project-card {
    border-radius: 18px !important;
}

.project-content {
    padding: 24px !important;
}

.project-content p {
    font-size: 0.96rem !important;
    line-height: 1.6 !important;
}

.project-features li {
    margin-bottom: 6px !important;
    line-height: 1.45 !important;
}

.project-tech span {
    font-size: 0.74rem !important;
    padding: 5px 10px !important;
}

@media (max-width: 980px) {
    .project-card.featured {
        grid-template-columns: 1fr !important;
    }
}