/*
 * SemiMatrix Portal — Page-specific styles
 * Extracted from semiconductor-portal.html <style> block
 * Loaded via <link rel="stylesheet"> in portal HTML
 */

  /* ===== THEME VARIABLES ===== */
  :root {
    --bg: #0a0a0a;
    --bg2: #0f0f0f;
    --bg3: #141414;
    --bg4: #1a1a1a;
    --accent: #f97316;
    --accent-dim: rgba(249,115,22,0.10);
    --accent-glow: rgba(249,115,22,0.40);
    --accent2: #fb923c;
    --accent3: #f97316;
    --accent4: #a78bfa;
    --text: #e5d5c5;
    --text-dim: #6b5a4e;
    --text-mid: #9a8070;
    --border: #2a1f18;
    --border-bright: #3d2d20;
    --red: #ef4444;
    --mono: 'JetBrains Mono', 'Share Tech Mono', monospace;
    --display: 'Rajdhani', sans-serif;
    --body: 'Sarabun', sans-serif;
    --nav-h: 92px;
    --ticker-h: 32px;
    --level-h: 52px;
    --shadow-card: 0 8px 32px rgba(0,0,0,0.8);
    /* Level colors */
    --lvl0: #f97316;
    --lvl1: #fb923c;
    --lvl2: #fbbf24;
    --lvl3: #a78bfa;
    --shadow-glow: 0 0 30px rgba(249,115,22,0.12);
    --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  }

  html.light {
    --bg: #fdf8f3;
    --bg2: #f5ede3;
    --bg3: #ede0d0;
    --bg4: #e5d3bc;
    --accent: #ea6c00;
    --accent-dim: rgba(234,108,0,0.10);
    --accent-glow: rgba(234,108,0,0.30);
    --accent2: #f97316;
    --accent3: #ea6c00;
    --accent4: #6d3fd0;
    --text: #1a1008;
    --text-dim: #7a5a3a;
    --text-mid: #5a3a1a;
    --border: #d4b896;
    --border-bright: #c4a080;
    --red: #cc2222;
    --shadow-card: 0 4px 20px rgba(120,60,0,0.12);
    --shadow-glow: 0 0 20px rgba(234,108,0,0.08);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
  }

  /* ===== BACKGROUND ===== */
  #bg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    contain: strict; /* Isolate canvas rendering */
  }

  .grid-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(var(--accent-dim) 1px, transparent 1px),
      linear-gradient(90deg, var(--accent-dim) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.4;
  }

  /* ===== CUSTOM CURSOR ===== */
  .cursor {
    position: fixed;
    width: 10px; height: 10px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s, background 0.2s;
    mix-blend-mode: screen;
    will-change: transform;
    contain: layout style;
  }
  .cursor-ring {
    position: fixed;
    width: 38px; height: 38px;
    border: 1.5px solid rgba(249,115,22,0.45);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.2s, border-color 0.2s;
    will-change: transform;
    contain: layout style;
  }
  .cursor-ring::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 1px solid rgba(249,115,22,0.10);
    border-radius: 50%;
    animation: radarPulse 2s ease-out infinite;
  }
  @keyframes radarPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  .cursor-ring::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(249,115,22,0.15);
    border-radius: 50%;
    animation: radarScan 4s linear infinite;
  }
  @keyframes radarScan {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @media (hover: none) { .cursor, .cursor-ring { display: none; } }

  /* ===== TICKER ===== */
  .ticker-bar {
    position: relative;
    z-index: 100;
    height: var(--ticker-h);
    background: rgba(10,15,20,0.8);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .ticker-label {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--accent);
    letter-spacing: 2px;
    padding: 0 16px;
    border-right: 1px solid rgba(255,255,255,0.05);
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    background: rgba(0,0,0,0.3);
    z-index: 2;
    flex-shrink: 0;
  }
  .ticker-track {
    display: flex;
    flex-shrink: 0;          /* don't let parent flex shrink the track */
    width: max-content;      /* size to fit all items so -50% loop is correct */
    will-change: transform;
    animation: ticker 60s linear infinite;
  }
  .ticker-bar:hover .ticker-track { animation-play-state: paused; }
  .ticker-item {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 30px;
    border-right: 1px solid rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    height: var(--ticker-h);
    gap: 8px;
    letter-spacing: 1px;
  }
  .ticker-item b { color: var(--accent3); font-weight: 500; text-shadow: 0 0 8px rgba(249,115,22,0.30); }
  @keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
  }

  /* ===== NAV ===== */
  /* Note: parent <header> is position:fixed, so nav stacks under ticker via normal flow.
     We deliberately do NOT set position:fixed here to avoid two elements both at top:0. */
  nav {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    background: rgba(5,10,14,0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s;
    position: relative;
    z-index: 1;
  }
  .nav-logo {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .logo-dot {
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--accent);
    animation: pulse-glow 2s infinite;
  }
  @keyframes pulse-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  .nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .nav-links li a {
    text-decoration: none;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-mid);
    padding: 8px 16px;
    border-radius: 99px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.2s;
    border: 1px solid transparent;
  }
  .nav-links li a:hover:not(.nav-prominent) {
    color: var(--text);
    background: rgba(255,255,255,0.05);
  }
  .nav-prominent {
    border: 1px solid var(--p-color) !important;
    color: var(--p-color) !important;
    background: rgba(255,255,255,0.03) !important;
  }
  .nav-prominent:hover {
    background: var(--p-color) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--p-color) !important;
  }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .dropdown-wrapper .dropdown-trigger-pill {
    text-decoration: none;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-mid);
    padding: 8px 16px;
    border-radius: 99px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .dropdown-wrapper:hover .dropdown-trigger-pill {
    color: var(--text);
    background: rgba(255,255,255,0.05);
  }
  .dropdown-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 220px;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    box-shadow: var(--shadow-float);
    z-index: 1000;
  }
  .dropdown-wrapper:hover .nav-dropdown,
  .dropdown-wrapper.open .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-dropdown a {
    display: block;
    padding: 12px 28px;
    color: var(--text-mid);
    text-decoration: none;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: var(--transition);
  }
  .nav-dropdown a:hover {
    color: var(--text);
    background: rgba(255,255,255,0.05);
  }
  .nav-dropdown hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 6px 0;
  }

  .nav-badge {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent3);
    border: 1px solid rgba(249,115,22,0.40);
    padding: 5px 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 1px;
    background: rgba(249,115,22,0.04);
  }
  .nav-badge:hover {
    background: rgba(249,115,22,0.10);
    border-color: var(--accent3);
  }

  .theme-toggle,
  .nav-icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-mid);
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
  }
  .theme-toggle:hover,
  .nav-icon-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(20deg); }

  .nav-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    transition: var(--transition);
  }
  .nav-menu-btn:hover { border-color: var(--accent); }
  .nav-menu-btn span {
    width: 16px; height: 1.5px;
    background: var(--text-mid);
    display: block;
    transition: all 0.3s;
  }

  /* Mobile menu */
  .mobile-menu {
    display: none;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: rgba(5,10,14,0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 24px;
    z-index: 150;
    flex-direction: column;
    gap: 0;
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  html.light .mobile-menu { background: rgba(240,244,248,0.97); }
  .mobile-menu.open { display: flex; transform: translateY(0); }
  .mobile-menu a {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s;
  }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu a:hover { color: var(--accent); }

  /* ===== HERO ===== */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-h) + var(--ticker-h) + 60px) 80px 80px;
    z-index: 2;
    overflow: hidden;
  }

  .hero-glow {
    position: absolute;
    right: -200px; top: 50%;
    transform: translateY(-50%);
    width: 800px; height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(249,115,22,0.07) 0%, transparent 65%);
    pointer-events: none;
  }

  .hero-chip {
    position: absolute;
    right: 60px; top: 50%;
    transform: translateY(-50%);
    width: 440px; height: 440px;
    opacity: 0.14;
    pointer-events: none;
  }
  .chip-svg { 
    width: 100%; height: 100%; 
    animation: chip-rotate 80s linear infinite;
    will-change: transform;
    transform: translateZ(0); /* Force GPU layer */
  }
  @keyframes chip-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  /* Pause chip animation when not visible */
  @media (prefers-reduced-motion: reduce) {
    .chip-svg { animation: none; }
    .ticker-track { animation: none; }
    .logo-dot { animation: none; }
  }

  .hero-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: fadeUp 0.7s ease both;
    text-shadow: 0 0 10px var(--accent-glow);
  }
  .hero-eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
  }

  .hero-title {
    font-family: var(--display);
    font-size: clamp(54px, 7vw, 100px);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -3px;
    animation: fadeUp 0.7s 0.1s ease both;
  }
  .hero-title .line1 { color: #fff; display: block; }
  .hero-title .line2 {
    display: block;
    color: rgba(255,255,255,0.18); /* fallback for non-webkit (Firefox) */
    -webkit-text-stroke: 1px rgba(255,255,255,0.45);
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
  }
  html.light .hero-title .line2 {
    color: rgba(0,0,0,0.18);
    -webkit-text-stroke-color: rgba(0,0,0,0.55);
  }
  .hero-title .line3 {
    display: block;
    background: linear-gradient(135deg, var(--accent), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px var(--accent-glow));
  }

  .hero-desc {
    margin-top: 36px;
    max-width: 500px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-mid);
    animation: fadeUp 0.7s 0.2s ease both;
  }

  .hero-stats {
    margin-top: 52px;
    display: flex;
    gap: 48px;
    animation: fadeUp 0.7s 0.3s ease both;
    flex-wrap: wrap;
  }
  .stat-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    padding-left: 18px;
  }
  .stat-item::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), transparent);
    border-radius: 1px;
  }
  .stat-num {
    font-family: var(--mono);
    font-size: 30px;
    color: var(--text);
    line-height: 1;
  }
  .stat-label {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 1px;
  }

  .hero-ctas {
    margin-top: 52px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    animation: fadeUp 0.7s 0.4s ease both;
  }

  /* Quick-start pills below CTAs */
  .hero-quickstart {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    animation: fadeUp 0.7s 0.55s ease both;
  }
  .hero-qs-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 2px;
    align-self: center;
    white-space: nowrap;
  }
  .hero-qs-pill {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-mid);
    background: rgba(249,115,22,0.06);
    border: 1px solid rgba(249,115,22,0.18);
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
  .hero-qs-pill:hover {
    background: rgba(249,115,22,0.14);
    border-color: var(--accent);
    color: var(--accent);
  }

  .btn-primary {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    border: none;
    padding: 15px 36px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    position: relative;
    overflow: hidden;
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
  }
  .btn-primary:hover::before { transform: translateX(0); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(249,115,22,0.35); }

  .btn-secondary {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    background: transparent;
    border: 1px solid rgba(249,115,22,0.40);
    padding: 15px 36px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
  }
  .btn-secondary:hover {
    background: rgba(249,115,22,0.08);
    border-color: var(--accent);
    transform: translateY(-2px);
  }

  .scroll-indicator {
    position: absolute;
    bottom: 48px; left: 80px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 3px;
    animation: fadeUp 1s 0.8s ease both;
  }
  .scroll-line {
    width: 40px; height: 1px;
    background: var(--text-dim);
    position: relative;
    overflow: hidden;
  }
  .scroll-line::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: var(--accent);
    animation: scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0% { left: -100%; }
    100% { left: 100%; }
  }

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

  /* ===== COMMON SECTION ===== */
  section {
    position: relative;
    z-index: 2;
    padding: 120px 80px;
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }
  section:first-of-type, section.hero {
    content-visibility: visible;
  }
  .section-header { margin-bottom: 52px; }
  .section-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.85;
  }
  .section-eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--accent);
    flex-shrink: 0;
  }
  .section-title {
    font-family: var(--display);
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 14px;
  }
  .section-sub {
    font-size: 15px;
    color: var(--text-mid);
    max-width: 560px;
    line-height: 1.8;
  }

  /* ===== QUICK ACCESS ===== */
  .quick-access {
    position: relative;
    z-index: 2;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0 80px;
  }
  .quick-access-inner {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .quick-access-inner::-webkit-scrollbar { display: none; }
  .qa-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 32px;
    border-right: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
    transition: var(--transition);
    position: relative;
    cursor: pointer;
  }
  .qa-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  .qa-item:hover { background: var(--bg2); color: var(--text); }
  .qa-item:hover::after { transform: scaleX(1); }
  .qa-item:hover .qa-icon { transform: scale(1.15); }
  .qa-icon { font-size: 22px; transition: transform 0.2s; }
  .qa-label {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.5px;
  }
  .qa-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-top: 2px;
  }

  /* ===== BEGINNER BANNER ===== */
  .beginner-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.03));
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 32px;
    position: relative;
  }
  .bb-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
  .bb-body { flex: 1; min-width: 0; }
  .bb-title {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
    letter-spacing: .3px;
  }
  .bb-desc {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.6;
  }
  .bb-desc a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(249,115,22,0.3);
    transition: border-color .2s;
  }
  .bb-desc a:hover { border-color: var(--accent); }
  .bb-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    flex-shrink: 0;
    transition: color .2s;
    border-radius: 4px;
    line-height: 1;
  }
  .bb-close:hover { color: var(--text); background: rgba(255,255,255,.06); }

  /* ===== TAB SWITCHER ===== */
  .hub-tabs {
    display: flex;
    gap: 32px;
    margin-bottom: 52px;
    border-bottom: 1px solid var(--border);
  }
  .hub-tab {
    padding: 16px 0;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
  }
  .hub-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
  }
  .hub-tab:hover { color: var(--accent); }

  .tab-content { display: none; }
  .tab-content.active { display: block; animation: fadeIn 0.4s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  .hub-section {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 100px 80px;
  }
  .hub-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
  }
  .hub-link {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
    letter-spacing: 1px;
  }
  .hub-link:hover { color: var(--accent); }
  .cat-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .cat-pill {
    font-family: var(--mono);
    font-size: 10px;
    padding: 5px 14px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    text-decoration: none;
    letter-spacing: 1.5px;
    transition: var(--transition);
    cursor: pointer;
  }
  .cat-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
  }

  /* ===== TOPIC CARDS ===== */
  .topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    background: transparent;
    contain: layout paint;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .topic-card {
    background: linear-gradient(160deg, rgba(26,18,10,0.9) 0%, rgba(15,12,8,0.85) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px 28px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  }
  .topic-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(249,115,22,0.07), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s;
  }
  .topic-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(249,115,22,0.20));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
  }
  .topic-card:hover { border-color: rgba(249,115,22,0.35); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 0 1px rgba(249,115,22,0.12); }
  .topic-card:hover::before { opacity: 1; }
  .topic-card:hover::after { transform: scaleX(1); }
  .topic-card:hover .topic-icon { transform: scale(1.1) rotate(-5deg); }

  /* Card header row: icon + difficulty badge */
  .topic-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .topic-icon {
    font-size: 32px;
    display: block;
    transition: transform 0.3s;
    filter: drop-shadow(0 2px 8px rgba(249,115,22,0.20));
    line-height: 1;
  }
  /* Difficulty badge */
  .topic-diff {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 3px 9px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .topic-diff.beginner { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
  .topic-diff.intermediate { background: rgba(249,115,22,0.12); color: var(--accent); border: 1px solid rgba(249,115,22,0.25); }
  .topic-diff.advanced { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.25); }

  .topic-tag {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent);
    letter-spacing: 3px;
    margin-bottom: 8px;
    opacity: 0.75;
  }
  .topic-name {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.2;
  }
  .topic-desc {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.65;
    margin-bottom: 22px;
  }
  .topic-links { display: flex; flex-direction: column; gap: 8px; }
  .topic-link {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
    letter-spacing: 0.5px;
    padding: 4px 0;
  }
  .topic-link::before {
    content: '→';
    color: var(--accent2);
    font-size: 12px;
    transition: transform 0.2s;
    display: inline-block;
    flex-shrink: 0;
  }
  .topic-link:hover { color: var(--accent); }
  .topic-link:hover::before { transform: translateX(4px); }

  /* Topic count badge on card */
  .topic-count-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
  .topic-count-pill {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 8px;
    letter-spacing: 1px;
  }

  /* ===== FAB PROCESS ===== */
  .process-section { background: var(--bg); }
  .process-nodes {
    display: flex;
    gap: 0;
    position: relative;
    margin-top: 48px;
  }
  .process-nodes::before {
    content: '';
    position: absolute;
    top: 35px; left: 6%; right: 6%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
    z-index: 0;
  }
  .process-nodes::after {
    content: '';
    position: absolute;
    top: 35px; left: 6%;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent3));
    box-shadow: 0 0 10px rgba(249,115,22,0.60);
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    z-index: 1;
  }
  .process-node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 8px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    position: relative;
    z-index: 2;
  }
  .process-node:hover .node-circle {
    border-color: var(--accent);
    box-shadow: 0 0 24px rgba(249,115,22,0.30);
    transform: translateY(-3px);
  }
  .process-node:hover .node-title { color: var(--accent); }
  .process-node.active .node-circle {
    background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(249,115,22,0.04));
    border-color: var(--accent);
    box-shadow: 0 0 32px rgba(249,115,22,0.40);
  }
  .process-node.active .node-title { color: var(--accent); }
  .process-node.active .node-icon { transform: scale(1.1); }
  .node-circle {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
    transition: all 0.35s ease;
  }
  .node-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 2px;
    transition: transform 0.3s ease;
  }
  .node-num {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 1px;
  }
  .process-node.active .node-num { color: var(--accent); }
  .node-title {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    transition: color 0.2s;
    letter-spacing: 0.5px;
  }
  .node-tag {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    opacity: 0.7;
  }

  /* Step Preview Panel */
  .process-preview {
    margin-top: 40px;
    background: linear-gradient(135deg, var(--bg2), var(--bg));
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    animation: previewFadeIn 0.4s cubic-bezier(.4,0,.2,1);
  }
  @keyframes previewFadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
  .pp-left { display:flex; flex-direction:column; gap:10px; }
  .pp-eyebrow { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 2px; }
  .pp-title { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2; }
  .pp-desc { font-size: 14px; color: var(--text-mid); line-height: 1.7; }
  .pp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .pp-meta-item {
    font-family: var(--mono); font-size: 10px;
    padding: 5px 11px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    letter-spacing: 0.5px;
  }
  .pp-meta-item strong { color: var(--accent); font-weight: 700; }
  .pp-cta { margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }
  .pp-cta-btn {
    font-family: var(--mono); font-size: 11px;
    padding: 10px 18px;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.25s;
  }
  .pp-cta-primary {
    background: var(--accent); color: #0a0e12; border: 1px solid var(--accent);
  }
  .pp-cta-primary:hover { box-shadow: 0 0 16px rgba(249,115,22,0.50); }
  .pp-cta-secondary {
    background: transparent; color: var(--text); border: 1px solid var(--border);
  }
  .pp-cta-secondary:hover { border-color: var(--accent); color: var(--accent); }

  .pp-right { display: flex; flex-direction: column; gap: 12px; }
  .pp-right-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 2px; }
  .pp-tools { display: flex; flex-wrap: wrap; gap: 6px; }
  .pp-tool {
    font-family: var(--mono); font-size: 10.5px;
    padding: 5px 10px;
    background: rgba(255,107,53,0.06);
    border: 1px solid rgba(255,107,53,0.3);
    color: var(--accent4, #ff6b35);
    letter-spacing: 0.3px;
  }
  .pp-topics { display: flex; flex-direction: column; gap: 6px; }
  .pp-topic-link {
    font-family: var(--display); font-size: 13px; font-weight: 500;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-mid);
    text-decoration: none;
    transition: all 0.2s;
    display: flex; justify-content: space-between; align-items: center;
  }
  .pp-topic-link:hover { border-color: var(--accent); color: var(--accent); background: rgba(249,115,22,0.04); }
  .pp-topic-link::after { content: '→'; opacity: 0.5; transition: transform 0.2s; }
  .pp-topic-link:hover::after { transform: translateX(3px); opacity: 1; }
  .pp-desc { font-size: 14px; color: var(--text-mid); line-height: 1.7; }

  /* ===== TOOLS ===== */
  .tools-section {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    contain: layout paint;
  }
  @media (min-width: 1100px) { .tools-grid { grid-template-columns: repeat(4, 1fr); } }
  .tool-card {
    border: 1px solid var(--border);
    padding: 24px 20px;
    background: linear-gradient(160deg, rgba(20,14,8,0.9), rgba(12,10,6,0.85));
    transition: var(--transition);
    position: relative;
    cursor: pointer;
    text-decoration: none;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.45);
  }
  .tool-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  .tool-card:hover {
    border-color: rgba(249,115,22,0.35);
    transform: translateY(-5px);
    box-shadow: var(--shadow-card), var(--shadow-glow);
  }
  .tool-card:hover::before { transform: scaleX(1); }
  .tool-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 18px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .tool-badge.commercial { background: rgba(255,107,53,0.1); color: var(--accent2); border: 1px solid rgba(255,107,53,0.3); }
  .tool-badge.open       { background: rgba(249,115,22,0.08); color: var(--accent); border: 1px solid rgba(249,115,22,0.30); }
  .tool-badge.academic   { background: rgba(249,115,22,0.08); color: var(--accent3); border: 1px solid rgba(249,115,22,0.30); }
  .tool-badge.simulator  { background: rgba(167,139,250,0.08); color: var(--accent4); border: 1px solid rgba(167,139,250,0.3); }
  .tool-name {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
  }
  .tool-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

  /* ===== RESOURCES ===== */
  .resources-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .resource-list {
    border: 1px solid var(--border);
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(8,15,20,0.98), rgba(12,23,32,0.96));
    box-shadow: var(--shadow-card);
  }
  .resource-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
  }
  .resource-item:last-child { border-bottom: none; }
  .resource-item:hover { background: rgba(255,255,255,0.03); transform: translateX(4px); }
  .resource-item:hover .resource-title { color: var(--accent); }
  .resource-num {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    min-width: 24px;
    opacity: 0.6;
  }
  .resource-info { flex: 1; }
  .resource-title {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    transition: color 0.2s;
  }
  .resource-meta { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
  .resource-type {
    font-family: var(--mono);
    font-size: 9px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    letter-spacing: 1px;
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
  }

  /* ===== CALCULATOR ===== */
  .calc-widget {
    background: linear-gradient(180deg, rgba(8,15,20,0.98), rgba(12,23,32,0.96));
    border: 1px solid var(--border);
    position: relative;
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .calc-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
  }
  .calc-tab {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-dim);
    padding: 12px 14px;
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    text-transform: uppercase;
  }
  .calc-tab:hover { color: var(--accent); background: var(--bg3); }
  .calc-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(249,115,22,0.08); }
  .calc-panel {
    padding: 28px;
    display: none;
  }
  .calc-panel.active { display: block; }
  .calc-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
  }
  .calc-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    width: 130px;
    flex-shrink: 0;
  }
  .calc-input {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    padding: 9px 13px;
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
  }
  .calc-input:focus { border-color: var(--accent); background: var(--bg4); }
  .calc-select {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    padding: 9px 10px;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .calc-btn {
    width: 100%;
    margin-top: 16px;
    padding: 13px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
  }
  .calc-btn:hover { background: rgba(249,115,22,0.10); transform: translateY(-1px); }
  .calc-result {
    background: rgba(249,115,22,0.05);
    border: 1px solid rgba(249,115,22,0.20);
    padding: 18px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .calc-result-label { font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
  .calc-result-value { font-family: var(--mono); font-size: 24px; color: var(--accent); }

  /* Material table */
  .mat-table {
    border: 1px solid var(--border);
    background: var(--bg2);
    padding: 24px;
  }
  .mat-table-header {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent);
    letter-spacing: 2px;
    margin-bottom: 16px;
  }
  .mat-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 12px;
  }
  .mat-table th {
    padding: 8px 0;
    color: var(--text-dim);
    font-weight: normal;
    border-bottom: 1px solid var(--border);
  }
  .mat-table th:not(:first-child) { text-align: right; }
  .mat-table td { padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); }
  .mat-table td:not(:first-child) { text-align: right; }
  .mat-table tr:last-child td { border-bottom: none; }
  .mat-val-blue { color: var(--accent); }
  .mat-val-green { color: var(--accent3); }

  /* ===== FORMULAS ===== */
  .formula-section {
    background: var(--bg2);
    border-top: 1px solid var(--border);
  }
  .formula-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .formula-card {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 30px;
    transition: var(--transition);
    cursor: default;
    position: relative;
    overflow: hidden;
  }
  .formula-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
  }
  .formula-card:hover { border-color: rgba(249,115,22,0.30); box-shadow: var(--shadow-glow); }
  .formula-card:hover::after { transform: scaleX(1); }
  .formula-name {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent2);
    letter-spacing: 2.5px;
    margin-bottom: 18px;
  }
  .formula-eq {
    font-family: var(--mono);
    font-size: 18px;
    color: var(--text);
    margin-bottom: 14px;
    line-height: 1.5;
    letter-spacing: 0.5px;
  }
  .formula-eq .v { color: var(--accent); }
  .formula-eq .s { font-size: 12px; vertical-align: sub; }
  .formula-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

  /* ===== FOOTER ===== */
  footer {
    position: relative;
    z-index: 2;
    padding: 64px 80px 40px;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 56px;
    margin-bottom: 48px;
  }
  .footer-brand {
    font-family: var(--mono);
    font-size: 22px;
    color: var(--accent);
    margin-bottom: 14px;
    display: block;
    letter-spacing: 3px;
  }
  .footer-tagline {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 24px;
  }
  .footer-social { display: flex; gap: 10px; }
  .social-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
  }
  .social-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
  .footer-col-title {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 20px;
  }
  .footer-col-links { display: flex; flex-direction: column; gap: 10px; }
  .footer-col-links a {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
  }
  .footer-col-links a:hover { color: var(--accent); }
  .footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.5px;
  }
  .footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-dim);
  }
  .footer-legal-link {
    color: var(--text-dim) !important;
    text-decoration: none !important;
    transition: var(--transition);
    opacity: 0.8;
  }
  .footer-legal-link:hover {
    color: var(--accent) !important;
    opacity: 1;
  }
  .footer-copy { display: flex; align-items: center; gap: 16px; }
  .footer-copy::after {
    content: "•";
    opacity: 0.3;
  }
  .footer-version { color: var(--accent); opacity: 0.7; }

  /* ===== AI ASSISTANT BUTTON ===== */
  .ai-btn {
    position: fixed;
    bottom: 28px; right: 28px;
    z-index: 300;
    background: var(--bg2);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
    padding: 12px 18px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 32px rgba(249,115,22,0.20);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  }
  .ai-btn::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--accent3);
    border-radius: 50%;
    animation: pulse 2s infinite;
    flex-shrink: 0;
  }
  .ai-btn:hover {
    background: rgba(249,115,22,0.10);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(249,115,22,0.30);
  }

  /* ===== SCROLL REVEAL ===== */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* ===== USER DROPDOWN ===== */
  .user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 0;
    min-width: 160px;
    z-index: 1000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  }
  .user-dropdown a {
    display: block;
    padding: 9px 18px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s;
    cursor: pointer;
    font-family: var(--body);
    white-space: nowrap;
  }
  .user-dropdown a:hover { background: var(--bg3); color: var(--accent); }
  .user-dropdown a.danger { color: var(--red); }
  .user-dropdown .divider { border-top: 1px solid var(--border); margin: 4px 0; }

  /* ===== INTERACTIVE CHIP DIAGRAM ===== */
  .hero-chip {
    position: absolute;
    right: 60px; top: 50%;
    transform: translateY(-50%);
    width: 440px; height: 440px;
    opacity: 0.18;
    pointer-events: auto;
    transition: opacity 0.4s, transform 0.4s;
    cursor: pointer;
  }
  .hero-chip:hover { opacity: 0.35; transform: translateY(-50%) scale(1.02); }
  .chip-svg { 
    width: 100%; height: 100%; 
    animation: chip-rotate 80s linear infinite;
    transition: filter 0.3s;
  }
  .hero-chip:hover .chip-svg {
    filter: drop-shadow(0 0 20px rgba(249,115,22,0.50));
    animation-play-state: paused;
  }
  .chip-pulse {
    animation: chipPulse 3s ease-in-out infinite;
  }
  @keyframes chipPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
  }
  .chip-tooltip {
    position: absolute;
    background: var(--bg2);
    border: 1px solid var(--accent);
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  }
  .hero-chip:hover .chip-tooltip { opacity: 1; }

  /* ===== PROCESS NODE COMPARISON ===== */
  .process-compare-section {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 72px 80px;
  }
  .process-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
  }
  .process-node-card {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
  }
  .process-node-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0);
    transition: transform 0.4s;
  }
  .process-node-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(249,115,22,0.15);
  }
  .process-node-card:hover::before { transform: scaleX(1); }
  .node-fab-logo {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .node-fab-logo::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
  }
  .node-card-tsmc .node-fab-logo::before { background: #ff6b35; }
  .node-card-intel .node-fab-logo::before { background: #f97316; }
  .node-card-samsung .node-fab-logo::before { background: #a78bfa; }
  .node-name {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 8px;
  }
  .node-nm {
    font-family: var(--mono);
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), #60efff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1;
    margin-bottom: 16px;
  }
  .node-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
  }
  .node-spec { display: flex; justify-content: space-between; }
  .node-spec b { color: var(--text); font-weight: 600; }
  .node-status {
    position: absolute;
    top: 16px; right: 16px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 2px;
    text-transform: uppercase;
  }
  .node-status.prod { background: rgba(249,115,22,0.15); color: var(--accent3); border: 1px solid rgba(249,115,22,0.30); }
  .node-status.ramp { background: rgba(249,115,22,0.15); color: var(--accent); border: 1px solid rgba(249,115,22,0.30); }
  .node-status.dev { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }

  /* ===== REAL-TIME STATS INDICATOR ===== */
  .stat-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent3);
    letter-spacing: 1px;
    margin-left: 8px;
  }
  .stat-live-dot {
    width: 6px; height: 6px;
    background: var(--accent3);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
  .stat-item.updating .stat-num {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(249,115,22,0.50);
  }

  /* ===== JOBS & SCHOLARSHIPS SECTIONS ===== */
  .jobs-section, .scholarships-section {
    position: relative;
    padding: 180px 100px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .jobs-section { background: var(--bg2); }
  
  /* Radial Glow Backgrounds for Prominence */
  .jobs-section::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 1000px; height: 1000px;
    background: radial-gradient(circle, rgba(127, 255, 122, 0.04) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
  }
  .scholarships-section::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 1000px; height: 1000px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.04) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
  }

  .jobs-grid, .scholarships-grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* Increased for breathability */
    margin-top: 56px;
  }
  .job-card, .scholarship-card {
    background: rgba(8, 15, 20, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .job-card:hover, .scholarship-card:hover {
    border-color: var(--accent);
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.1);
  }
  
  .job-card::after, .scholarship-card::after {
    content: 'HOT';
    position: absolute;
    top: 20px; left: -30px;
    width: 100px;
    background: var(--accent3);
    color: #000;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .job-card:nth-child(1)::after, .scholarship-card:nth-child(1)::after { opacity: 0.8; } /* Highlight first items */

  .job-type-badge, .schol-type-badge {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 2px;
    padding: 6px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    align-self: flex-start;
    border: 1px solid var(--border);
  }
  .job-type-badge.fulltime { background: rgba(249,115,22,0.15); color: var(--accent3); border: 1px solid rgba(249,115,22,0.30); }
  .job-type-badge.intern { background: rgba(249,115,22,0.15); color: var(--accent); border: 1px solid rgba(249,115,22,0.30); }
  .job-type-badge.contract { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
  .schol-type-badge.full { background: rgba(249,115,22,0.15); color: var(--accent3); border: 1px solid rgba(249,115,22,0.30); }
  .schol-type-badge.partial { background: rgba(249,115,22,0.15); color: var(--accent); border: 1px solid rgba(249,115,22,0.30); }
  .job-company, .schol-provider {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
  }
  .job-title, .schol-title {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
  }
  .job-meta, .schol-meta {
    display: flex;
    gap: 16px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .job-salary {
    color: var(--accent3);
    font-weight: 600;
  }
  .schol-amount {
    color: var(--accent);
    font-weight: 600;
  }
  .deadline-soon { color: #f87171; }

  .nav-prominent {
    color: var(--p-color) !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 20px !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-prominent:hover {
    background: var(--p-color);
    color: #000 !important;
    box-shadow: 0 0 20px var(--p-color);
    border-color: var(--p-color);
    transform: translateY(-1px);
  }

  /* ===== PREMIUM RESPONSIVE ENGINE ===== */
  
  /* Large Tablets & Small Laptops (1024px - 1280px) */
  @media (max-width: 1280px) {
    .topics-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .hero, section, .hub-section { padding-left: 60px; padding-right: 60px; }
  }

  /* Medium Tablets (768px - 1024px) */
  @media (max-width: 1024px) {
    .topics-grid { grid-template-columns: repeat(2, 1fr); }
    .jobs-grid, .scholarships-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .path-summary { grid-template-columns: repeat(2, 1fr); }
    .hero-title { font-size: clamp(48px, 8vw, 72px); }
    .hero, section, .hub-section { padding-left: 40px; padding-right: 40px; }
  }

  /* Small Tablets & Large Phones (640px - 768px) */
  @media (max-width: 768px) {
    /* Layout & Spacing */
    section, .hub-section, .jobs-section, .scholarships-section, .learning-path-section, .materials-section, .quiz-section { 
      padding: 56px 18px !important; 
    }
    
    .section-header { margin-bottom: 32px; }
    .section-title { font-size: 26px !important; line-height: 1.2; }
    .section-sub { font-size: 14px; }

    /* Hero Section */
    .hero { 
      padding: calc(var(--nav-h) + 48px) 18px 56px !important; 
      min-height: auto !important;
      text-align: center;
    }
    .hero-content { transform: none !important; }
    .hero-chip { 
      position: relative !important; top: auto !important; right: auto !important; 
      margin: 32px auto 0 !important; width: 240px !important; height: 240px !important;
      opacity: 0.4 !important;
    }
    .hero-title { font-size: 40px !important; letter-spacing: -1px !important; margin-bottom: 20px; }
    .hero-desc { font-size: 14px; margin: 0 auto 28px; max-width: 100%; }
    .hero-stats { justify-content: center; gap: 24px; margin-top: 32px; margin-bottom: 0; flex-wrap: wrap; }
    .stat-num { font-size: 26px !important; }
    .stat-label { font-size: 11px; }
    .hero-ctas { width: 100%; flex-direction: column; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; padding: 16px; }
    /* Quick-start pills on mobile */
    .hero-quickstart { justify-content: center; margin-top: 20px; }
    .hero-qs-label { display: none; }
    
    /* Grids to Single Column */
    .topics-grid, .jobs-grid, .scholarships-grid, .why-grid, .trends-grid, .mat-grid { 
      grid-template-columns: 1fr !important; 
      gap: 14px !important;
    }

    /* Cards */
    .topic-card, .job-card, .scholarship-card { 
      padding: 20px 18px !important; 
      border-radius: 12px !important;
    }
    .topic-icon { font-size: 28px !important; }
    /* Stage chips wrap better on mobile */
    .stage-topic-chip { font-size: 11px; padding: 5px 10px; }
    
    /* Navigation */
    .nav-links, .nav-right .nav-icon-btn, .nav-right .theme-toggle { display: none; }
    .nav-menu-btn { display: flex; }
    
    /* Fab Process (Horizontal Scroll on mobile) */
    .process-nodes { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width:thin; }
    .process-nodes::before, .process-nodes::after { left: 24px; right: auto; width: 100%; }
    .process-node { flex: 0 0 110px; padding: 0 6px; }
    .node-circle { width: 60px; height: 60px; margin-bottom: 12px; }
    .node-icon { font-size: 18px; }
    .node-title { font-size: 12px; }
    .process-preview { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
    .pp-title { font-size: 22px; }
    
    /* Learning Path */
    .path-summary { grid-template-columns: 1fr; }

    /* Calculator */
    .calc-widget { border-radius: 0; border-left: none; border-right: none; margin: 20px -20px; }
    .calc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 10px; }
    .calc-tab { flex-shrink: 0; white-space: nowrap; }
    .calc-row { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
    .calc-label { width: 100% !important; }
    .calc-input, .calc-select { width: 100% !important; }

    .topic-meta-row { display: flex; gap: 12px; margin: 8px 0; font-family: var(--mono); font-size: 10px; color: var(--text-mid); }
  .t-meta { background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }
  .topic-concepts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .c-tag { font-size: 9px; color: var(--accent); opacity: 0.8; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid rgba(249,115,22,0.20); }

  /* Deep Dive Section */
  .deep-dive-section { padding: 80px; background: var(--bg2); border-top: 1px solid var(--border); }
  .case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; }
  .case-card {
    background: var(--bg3); border: 1px solid var(--border); padding: 30px; border-radius: 20px;
    display: flex; gap: 24px; transition: all 0.3s;
  }
  .case-card:hover { transform: scale(1.02); border-color: var(--accent2); }
  .case-icon { font-size: 40px; opacity: 0.8; }
  .case-content h4 { font-family: var(--display); font-size: 20px; color: #fff; margin-bottom: 8px; }
  .case-content p { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
  .case-tag { font-family: var(--mono); font-size: 10px; color: var(--accent2); margin-top: 12px; display: block; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .footer-logo { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-bottom-left { flex-direction: column; gap: 16px; }
  }

  /* Small Phones (below 480px) */
  @media (max-width: 480px) {
    .hero-title { font-size: 34px !important; letter-spacing: -.5px !important; }
    .section-title { font-size: 22px !important; }
    .stat-num { font-size: 24px !important; }
    .topic-card { padding: 16px !important; }
    .com-stat { padding: 0 12px; }
    .com-stat-num { font-size: 20px; }
    .hero-qs-pill { font-size: 10px; padding: 4px 10px; }
    .career-stage { padding: 14px 16px 14px 22px; }
    .stage-title { font-size: 16px !important; }
    .hub-tabs { gap: 16px; overflow-x: auto; }
    .hub-tab { font-size: 11px; white-space: nowrap; }
  }

  /* Light mode adjustments */
  html.light .grid-overlay { opacity: 0.15; }
  html.light #bg-canvas { opacity: 0.12; }
  html.light .cursor { mix-blend-mode: multiply; }
  html.light .hero-title .line3 { filter: none; }
  html.light .ticker-bar { background: rgba(0,119,170,0.04); }

  /* ===== LEVEL BAR ===== */
  .level-bar {
    margin: 32px 0;
    width: 100%;
    z-index: 1;
    height: var(--level-h);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 0;
    transition: background .3s;
    box-shadow: var(--shadow-card);
  }
  html.light .level-bar { background: #fff; }
  .level-label{font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:3px;padding-right:24px;border-right:1px solid var(--border);white-space:nowrap;flex-shrink:0;}
  .level-options{display:flex;gap:0;flex:1;overflow-x:auto;scrollbar-width:none;}
  .level-options::-webkit-scrollbar{display:none;}
  .level-btn{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--text-dim);background:transparent;border:none;padding:0 24px;height:var(--level-h);cursor:pointer;display:flex;align-items:center;gap:10px;white-space:nowrap;border-right:1px solid var(--border);transition:var(--transition);position:relative;flex-shrink:0;}
  .level-btn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;transform:scaleX(0);transition:transform .3s ease;}
  .level-btn[data-lv="0"]::after{background:var(--lvl0);}
  .level-btn[data-lv="1"]::after{background:var(--lvl1);}
  .level-btn[data-lv="2"]::after{background:var(--lvl2);}
  .level-btn[data-lv="3"]::after{background:var(--lvl3);}
  .level-btn:hover{background:var(--bg3);}
  .level-btn.active[data-lv="0"]{color:var(--lvl0);background:rgba(96,165,250,.06);}
  .level-btn.active[data-lv="1"]{color:var(--lvl1);background:rgba(249,115,22,.06);}
  .level-btn.active[data-lv="2"]{color:var(--lvl2);background:rgba(255,107,53,.06);}
  .level-btn.active[data-lv="3"]{color:var(--lvl3);background:rgba(167,139,250,.06);}
  .level-btn.active::after{transform:scaleX(1);}
  .level-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;}
  .level-btn[data-lv="0"] .level-badge{background:rgba(96,165,250,.15);border:1px solid rgba(96,165,250,.4);}
  .level-btn[data-lv="1"] .level-badge{background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.4);}
  .level-btn[data-lv="2"] .level-badge{background:rgba(255,107,53,.15);border:1px solid rgba(255,107,53,.4);}
  .level-btn[data-lv="3"] .level-badge{background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.4);}
  .level-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:8px;padding:2px 8px;border-radius:2px;letter-spacing:1px;vertical-align:middle;margin-left:8px;}
  .level-tag.t-beginner{background:rgba(96,165,250,.12);color:var(--lvl0);border:1px solid rgba(96,165,250,.3);}
  .level-tag.t-intermediate{background:rgba(249,115,22,.12);color:var(--lvl1);border:1px solid rgba(249,115,22,.3);}
  .level-tag.t-advanced{background:rgba(255,107,53,.12);color:var(--lvl2);border:1px solid rgba(255,107,53,.3);}
  .level-tag.t-expert{background:rgba(167,139,250,.12);color:var(--lvl3);border:1px solid rgba(167,139,250,.3);}

  /* ===== PERSONALIZED CONTENT ===== */
  .topic-card{transition:opacity .4s ease, transform .4s ease, box-shadow .4s ease;}
  .topic-card.level-dimmed{opacity:.35;transform:scale(.97);filter:grayscale(.3);}
  .topic-card.level-dimmed:hover{opacity:.7;filter:none;}
  .topic-card.level-match{border-color:var(--level-color,var(--accent));box-shadow:0 0 20px rgba(var(--level-rgb,0,212,255),.12);}
  .topic-card .level-rec-badge{display:none;position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:8px;letter-spacing:1.5px;padding:3px 8px;border-radius:3px;z-index:2;}
  .topic-card.level-match .level-rec-badge{display:inline-flex;align-items:center;gap:4px;}
  .level-rec-badge.lv0{background:rgba(96,165,250,.15);color:var(--lvl0);border:1px solid rgba(96,165,250,.3);}
  .level-rec-badge.lv1{background:rgba(249,115,22,.15);color:var(--lvl1);border:1px solid rgba(249,115,22,.3);}
  .level-rec-badge.lv2{background:rgba(255,107,53,.15);color:var(--lvl2);border:1px solid rgba(255,107,53,.3);}
  .level-rec-badge.lv3{background:rgba(167,139,250,.15);color:var(--lvl3);border:1px solid rgba(167,139,250,.3);}
  .level-summary{display:none;margin-bottom:24px;padding:14px 20px;border-radius:8px;font-family:var(--mono);font-size:11px;letter-spacing:.5px;border:1px solid var(--border);background:var(--bg3);}
  .level-summary.active{display:flex;align-items:center;gap:12px;}
  .level-summary .ls-icon{font-size:18px;}
  .level-summary .ls-text{color:var(--text-dim);}
  .level-summary .ls-text strong{color:var(--text);}
  .level-summary .ls-count{margin-left:auto;color:var(--accent);font-size:10px;}

  /* ===== LEARNING PATH / CAREER ROADMAP ===== */
  .learning-path-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:72px 80px;}
  .path-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:40px;}
  .path-summary-card{background:var(--bg);border:1px solid var(--border);padding:22px 24px;display:flex;flex-direction:column;gap:10px;min-height:100px;}
  .path-summary-label{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:2px;}
  .path-stat-value{font-family:var(--display);font-size:28px;font-weight:700;color:var(--text);line-height:1;}
  .path-stat-desc{font-size:12px;color:var(--text-dim);line-height:1.5;}
  .path-next-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto;color:var(--text);text-decoration:none;font-size:13px;transition:var(--transition);}
  .path-next-link:hover{color:var(--accent);}

  /* ===== CAREER PATH SELECTOR (Card Grid) ===== */
  .career-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:32px;}
  .career-btn{position:relative;font-family:var(--display);font-size:13px;font-weight:600;padding:18px 20px;background:linear-gradient(135deg,var(--bg2),var(--bg));border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;overflow:hidden;}
  .career-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent3));transform:scaleX(0);transform-origin:left;transition:transform .35s;}
  .career-btn:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px);box-shadow:0 8px 24px rgba(249,115,22,.08);}
  .career-btn:hover::before{transform:scaleX(1);}
  .career-btn.active{border-color:var(--accent);background:linear-gradient(135deg,rgba(249,115,22,.08),rgba(249,115,22,.02));box-shadow:0 0 0 1px var(--accent),0 8px 32px rgba(249,115,22,.12);}
  .career-btn.active::before{transform:scaleX(1);}
  .career-btn .cb-row{display:flex;align-items:center;gap:10px;width:100%;}
  .career-btn .cb-icon{font-size:24px;line-height:1;}
  .career-btn .cb-title{flex:1;color:var(--text);font-size:13px;letter-spacing:.3px;}
  .career-btn.active .cb-title{color:var(--accent);}
  .career-btn .cb-meta{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:var(--text-dim);opacity:.85;display:flex;justify-content:space-between;width:100%;}
  .career-btn .cb-pct-num{color:var(--accent);font-weight:700;}
  .career-btn .cb-bar{width:100%;height:3px;background:var(--bg3);overflow:hidden;border-radius:2px;}
  .career-btn .cb-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));transition:width .6s cubic-bezier(.4,0,.2,1);}

  /* ===== TOOLBAR (Search + Filter) ===== */
  .career-toolbar{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center;}
  .career-search{flex:1;min-width:220px;position:relative;}
  .career-search input{width:100%;padding:11px 14px 11px 38px;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.5px;transition:var(--transition);outline:none;}
  .career-search input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(249,115,22,.15);}
  .career-search::before{content:'⌕';position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:14px;pointer-events:none;}
  .career-filters{display:flex;gap:6px;flex-wrap:wrap;}
  .filter-chip{font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:8px 14px;background:var(--bg2);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:var(--transition);}
  .filter-chip:hover{border-color:var(--accent);color:var(--text);}
  .filter-chip.active{border-color:var(--accent);color:var(--accent);background:rgba(249,115,22,.08);}

  /* ===== SKILLS ===== */
  .career-skills{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px;}
  .career-skill-tag{font-family:var(--mono);font-size:10px;padding:5px 12px;border:1px solid var(--border);color:var(--text-dim);background:var(--bg2);transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;gap:4px;letter-spacing:.3px;}
  .career-skill-tag:hover{border-color:var(--accent4);color:var(--accent4);}
  a.career-skill-tag.career-skill-link{cursor:pointer;}
  a.career-skill-tag.career-skill-link:hover{border-color:var(--accent);color:var(--accent);background:rgba(249,115,22,.06);box-shadow:0 0 12px rgba(249,115,22,.15);}

  /* ===== PROGRESS BAR ===== */
  .career-progress-bar{margin-top:24px;padding:16px 18px;background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);}
  .career-progress-outer{background:var(--bg3);height:8px;width:100%;overflow:hidden;border-radius:4px;}
  .career-progress-inner{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));transition:width .8s cubic-bezier(.4,0,.2,1);width:0;border-radius:4px;box-shadow:0 0 12px rgba(249,115,22,.4);}
  .career-progress-label{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.5px;}
  .career-progress-label span:last-child{color:var(--accent);font-weight:700;font-size:14px;}

  /* ===== STAGES TIMELINE (Refined) ===== */
  .career-stages{margin-top:32px;display:flex;flex-direction:column;gap:10px;position:relative;}
  .career-stage{position:relative;padding:18px 22px 18px 28px;background:rgba(15,12,8,0.7);border:1px solid var(--border);border-radius:10px;transition:border-color .3s,box-shadow .3s;animation:stageFadeIn .45s cubic-bezier(.4,0,.2,1);overflow:hidden;}
  .career-stage::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border);transition:background .3s;border-radius:10px 0 0 10px;}
  .career-stage:hover{border-color:rgba(249,115,22,.18);box-shadow:0 4px 20px rgba(0,0,0,.4);}
  .career-stage:hover::before{background:rgba(249,115,22,.4);}
  @keyframes stageFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .career-stage.stage-done{background:rgba(12,14,12,0.6);}
  .career-stage.stage-done::before{background:linear-gradient(180deg,#34d399,rgba(52,211,153,.2));}
  .career-stage.stage-current{background:rgba(26,18,8,0.85);border-color:rgba(249,115,22,.28);box-shadow:0 0 0 1px rgba(249,115,22,.1),0 4px 24px rgba(0,0,0,.5);}
  .career-stage.stage-current::before{background:linear-gradient(180deg,var(--accent),rgba(249,115,22,.3));box-shadow:0 0 12px rgba(249,115,22,.5);}
  .stage-dot{display:none;}
  /* "NOW STUDYING" badge */
  .career-stage.stage-current .stage-header::after{content:'NOW STUDYING';font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--accent);background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.3);padding:2px 8px;border-radius:10px;margin-left:auto;flex-shrink:0;animation:pulse-badge 2s ease-in-out infinite;}
  @keyframes pulse-badge{0%,100%{opacity:1;}50%{opacity:.6;}}

  .stage-header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;}
  .stage-level-label{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:2.5px;font-weight:600;}
  .career-stage.stage-current .stage-level-label{color:var(--accent);}
  .career-stage.stage-done .stage-level-label{color:#34d399;}
  .stage-mini-progress{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:1px;display:inline-flex;align-items:center;gap:6px;}
  .stage-mini-progress::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--text-dim);}
  .career-stage.stage-done .stage-mini-progress{color:#34d399;}
  .career-stage.stage-done .stage-mini-progress::before{background:#34d399;}
  .career-stage.stage-current .stage-mini-progress{color:var(--accent);}
  .career-stage.stage-current .stage-mini-progress::before{background:var(--accent);box-shadow:0 0 6px var(--accent);}

  .stage-title{font-family:var(--display);font-size:18px;font-weight:700;color:var(--text);margin-bottom:5px;letter-spacing:-.2px;}
  .stage-desc{font-size:13px;color:var(--text-mid);line-height:1.65;margin-bottom:8px;max-width:820px;}
  .stage-tools{font-family:var(--mono);font-size:10px;color:var(--accent4);letter-spacing:.3px;margin-bottom:12px;opacity:.8;}

  .stage-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
  .stage-topic-chip{font-family:var(--display);font-size:12px;font-weight:500;padding:6px 12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);border-radius:6px;color:var(--text-mid);text-decoration:none;transition:all .18s ease;display:inline-flex;align-items:center;gap:7px;letter-spacing:.1px;}
  .stage-topic-chip:hover{border-color:var(--accent);color:var(--text);background:rgba(249,115,22,.08);transform:translateY(-1px);}
  .stage-topic-chip .chip-icon{font-family:var(--mono);font-size:9px;width:13px;height:13px;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%;opacity:.55;font-weight:bold;flex-shrink:0;}
  .stage-topic-chip:hover .chip-icon{opacity:1;}
  .stage-topic-chip.chip-done{border-color:rgba(52,211,153,.2);color:#34d399;background:rgba(52,211,153,.04);}
  .stage-topic-chip.chip-done .chip-icon{background:#34d399;border-color:#34d399;color:#0a0e12;opacity:1;}
  .stage-topic-chip.chip-done:hover{background:rgba(52,211,153,.1);border-color:#34d399;}
  .stage-topic-chip.chip-progress{border-color:rgba(249,115,22,.3);color:var(--accent);background:rgba(249,115,22,.06);}
  .stage-topic-chip.chip-progress .chip-icon{opacity:1;}
  .stage-topic-chip.chip-hidden{display:none;}
  .stage-empty-msg{font-family:var(--mono);font-size:11px;color:var(--text-dim);font-style:italic;padding:6px 0;}

  @media(max-width:1200px){
    .path-summary{grid-template-columns:1fr 1fr;}
  }
  @media(max-width:900px){
    .learning-path-section{padding:56px 20px;}
    .path-summary{grid-template-columns:1fr;}
    .career-selector{grid-template-columns:1fr 1fr;gap:10px;}
    .career-btn{padding:14px 14px;font-size:12px;}
    .career-btn .cb-icon{font-size:20px;}
    .career-btn .cb-title{font-size:12px;}
    .career-stage{padding:18px 20px;}
    .stage-title{font-size:18px;}
    .career-toolbar{flex-direction:column;align-items:stretch;}
    .career-filters{justify-content:flex-start;}
  }
  @media(max-width:520px){
    .career-selector{grid-template-columns:1fr;}
  }

  /* ===== MATERIALS COMPARISON ===== */
  .materials-section{background:var(--bg);padding:80px;border-top:1px solid var(--border);}
  .mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:48px;}
  .mat-compare{border:1px solid var(--border);overflow:hidden;}
  .mat-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);}
  .mat-tab{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--text-dim);padding:12px 18px;cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;transition:var(--transition);flex:1;text-align:center;}
  .mat-tab:hover{color:var(--accent);background:var(--bg3);}
  .mat-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(249,115,22,.05);}
  .mat-content{padding:24px;}
  .mat-property{margin-bottom:16px;}
  .mat-prop-name{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:1px;margin-bottom:6px;display:flex;justify-content:space-between;}
  .mat-prop-name span{color:var(--accent);}
  .mat-bar-track{height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
  .mat-bar-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1);}
  .mat-info{background:var(--bg3);border:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:16px;}
  .mat-stat-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--border);}
  .mat-stat-row:last-child{border-bottom:none;padding-bottom:0;}
  .mat-stat-name{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:1px;}
  .mat-stat-val{font-family:var(--mono);font-size:14px;color:var(--text);font-weight:700;}

  /* ===== QUIZ ===== */
  .quiz-section{background:var(--bg2);border-top:1px solid var(--border);padding:80px;}
  .quiz-widget{border:1px solid var(--border);max-width:720px;margin:40px auto 0;}
  .quiz-header-bar{background:var(--bg);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;}
  .quiz-meta{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:1px;}
  .quiz-score{font-family:var(--mono);font-size:14px;color:var(--accent);}
  .quiz-body{padding:32px 40px;}
  .quiz-q{font-family:var(--display);font-size:20px;font-weight:600;color:var(--text);margin-bottom:28px;line-height:1.3;}
  .quiz-opts{display:flex;flex-direction:column;gap:10px;}
  .quiz-opt{font-family:var(--mono);font-size:13px;padding:14px 18px;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;text-align:left;transition:var(--transition);letter-spacing:.5px;}
  .quiz-opt:hover{border-color:var(--accent);color:var(--text);background:var(--accent-dim);}
  .quiz-opt.correct{border-color:var(--accent3);background:rgba(249,115,22,.1);color:var(--accent3);}
  .quiz-opt.wrong{border-color:var(--red);background:rgba(239,68,68,.1);color:var(--red);}
  .quiz-feedback{margin-top:20px;padding:14px 18px;background:var(--bg);border-left:3px solid var(--accent);font-size:14px;color:var(--text-mid);line-height:1.6;display:none;}
  .quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);}
  .quiz-prog{height:3px;background:var(--border);position:relative;overflow:hidden;}
  .quiz-prog-fill{height:100%;background:var(--accent);transition:width .5s ease;width:0;}

  /* ===== FORMULA PANEL (slide-out) ===== */
  .formula-panel{position:fixed;right:-420px;top:0;bottom:0;width:400px;z-index:350;background:var(--bg2);border-left:1px solid var(--accent);display:flex;flex-direction:column;transition:right .4s cubic-bezier(.4,0,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.5);}
  .formula-panel.open{right:0;}
  .fp-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg);}
  .fp-title{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:2px;}
  .fp-close{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:20px;line-height:1;transition:color .2s;}
  .fp-close:hover{color:var(--accent);}
  .fp-search{padding:12px 16px;border-bottom:1px solid var(--border);}
  .fp-search-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:12px;padding:9px 12px;outline:none;}
  .fp-search-input:focus{border-color:var(--accent);}
  .fp-list{flex:1;overflow-y:auto;padding:16px;}
  .fp-item{margin-bottom:16px;padding:14px;background:var(--bg);border:1px solid var(--border);transition:border-color .2s;}
  .fp-item:hover{border-color:rgba(249,115,22,.3);}
  .fp-item-name{font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:2px;margin-bottom:8px;}
  .fp-item-eq{font-family:var(--mono);font-size:12px;color:var(--text);padding:8px 10px;background:var(--bg2);border-left:2px solid var(--accent);line-height:1.6;margin-bottom:8px;}
  .fp-item-desc{font-size:12px;color:var(--text-dim);line-height:1.5;}
  .fp-toggle{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:351;background:var(--bg2);border:1px solid var(--accent);border-right:none;color:var(--accent);font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:16px 8px;cursor:pointer;writing-mode:vertical-rl;transition:background .2s;}
  .fp-toggle:hover{background:rgba(249,115,22,.1);}

  @media(max-width:768px){
    .level-bar{padding:0 12px;}
    .level-btn{padding:0 14px;font-size:9px;}
    .level-label{display:none;}
    .mat-grid{grid-template-columns:1fr;}
    .quiz-body{padding:20px;}
    .formula-panel{width:100%;right:-100%;}
    .fp-toggle{display:none;}
    .learning-path-section{padding:48px 20px;}
    .materials-section{padding:48px 20px;}
    .quiz-section{padding:48px 20px;}
  }

  /* ===== WHY SemiMatrix ===== */
  .why-section { padding: 80px; background: var(--bg); }
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .why-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }
  .why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-dim) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .why-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-glow); }
  .why-card:hover::before { opacity: 1; }
  .why-icon { font-size: 2.4rem; margin-bottom: 16px; display: block; }
  .why-title { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
  .why-desc { font-size: 14px; color: var(--text-mid); line-height: 1.7; }

  /* ===== INDUSTRY TRENDS ===== */
  .trends-section { padding: 80px; background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .trends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .trend-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    transition: var(--transition);
  }
  .trend-card:hover { border-color: var(--border-bright); transform: translateY(-3px); }
  .trend-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .trend-icon { font-size: 1.8rem; }
  .trend-badge {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(249,115,22,0.10);
    color: var(--accent);
    border: 1px solid rgba(249,115,22,0.20);
  }
  .trend-badge.hot {
    background: rgba(255,107,53,0.15);
    color: var(--accent2);
    border-color: rgba(255,107,53,0.3);
    animation: pulse-badge 2s ease-in-out infinite;
  }
  @keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }
  .trend-title { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
  .trend-desc { font-size: 13px; color: var(--text-mid); line-height: 1.7; margin-bottom: 14px; }
  .trend-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .trend-tag {
    font-family: var(--mono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg4);
    color: var(--text-dim);
    border: 1px solid var(--border);
  }

  /* ===== COMMUNITY CTA ===== */
  .community-section {
    padding: 100px 80px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    text-align: center;
  }
  .community-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
  .community-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(249,115,22,0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
  }
  .community-title {
    font-family: var(--display);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
  }
  .cta-accent { color: var(--accent); }
  .community-desc { font-size: 16px; color: var(--text-mid); line-height: 1.8; margin-bottom: 40px; }
  .community-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 40px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  /* Ecosystem Section */
  .ecosystem-section { padding: 100px 80px; background: var(--bg2); border-top: 1px solid var(--border); position: relative; }
  .eco-container { position: relative; z-index: 1; }
  .eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 60px; }
  .eco-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    padding: 32px;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
  }
  .eco-card:hover { transform: translateY(-10px); border-color: var(--accent); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
  .eco-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: var(--eco-color, var(--accent));
  }
  .eco-title { font-family: var(--display); font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
  .eco-desc { font-size: 14px; color: var(--text-dim); margin-bottom: 24px; line-height: 1.6; }
  .eco-players { display: flex; flex-wrap: wrap; gap: 8px; }
  .eco-tag {
    font-family: var(--mono);
    font-size: 10px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-mid);
    border-radius: 4px;
    transition: all 0.2s;
  }
  .eco-card:hover .eco-tag { border-color: var(--eco-color); color: #fff; }

  /* Market Power Gauge */
  .eco-power {
    position: absolute; top: 20px; right: 20px;
    width: 40px; height: 40px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px; color: var(--eco-color);
  }
  .eco-power::after {
    content: ''; position: absolute; inset: -2px;
    border: 2px solid var(--eco-color);
    border-radius: 50%;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
    opacity: 0; transition: opacity 0.3s;
  }
  .eco-card:hover .eco-power::after { opacity: 1; animation: spin 2s linear infinite; }

  /* SVG Connectors */
  .eco-connectors {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    opacity: 0.4;
  }
  .eco-path {
    fill: none; stroke: var(--accent); stroke-width: 1;
    stroke-dasharray: 4 4;
    animation: flow 20s linear infinite;
  }
  @keyframes flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* Trends Section */
  .trends-section { padding: 100px 80px; background: var(--bg); position: relative; overflow: hidden; }
  .trends-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
  .trend-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 30px;
    border-radius: 4px;
    border-left: 2px solid var(--accent);
    transition: all 0.3s;
  }
  .trend-card:hover { background: var(--bg3); border-left-width: 8px; transform: scale(1.02); }
  .trend-year { font-family: var(--mono); font-size: 10px; color: var(--accent); margin-bottom: 8px; display: block; }
  .trend-title { font-family: var(--display); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; }
  .trend-content { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
  .trend-tag { display: inline-block; margin-top: 16px; font-size: 10px; color: var(--accent3); font-family: var(--mono); text-transform: uppercase; border: 1px solid rgba(249,115,22,0.20); padding: 2px 8px; }

  /* Roadmap Section */
  .roadmap-section { padding: 100px 80px; background: var(--bg3); }
  .roadmap-timeline {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    position: relative;
    padding-bottom: 40px;
  }
  .roadmap-timeline::before {
    content: ''; position: absolute; top: 24px; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent4), transparent);
  }
  .roadmap-node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 10px;
  }
  .node-dot {
    width: 12px; height: 12px;
    background: var(--bg);
    border: 3px solid var(--accent);
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 10px var(--accent-glow);
  }
  .node-year { font-family: var(--mono); font-size: 14px; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
  .node-tech { font-family: var(--display); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
  .node-desc { font-size: 11px; color: var(--text-dim); max-width: 150px; line-height: 1.4; }

  @media (max-width: 768px) {
    .ecosystem-section, .trends-section, .roadmap-section { padding: 60px 20px; }
    .roadmap-timeline { flex-direction: column; gap: 40px; padding-bottom: 0; }
    .roadmap-timeline::before { left: 5px; top: 0; bottom: 0; width: 2px; height: 100%; }
    .roadmap-node { align-items: flex-start; padding-left: 30px; }
    .node-dot { position: absolute; left: 0; top: 5px; }
  }
  @media (max-width: 768px) {
    .why-section, .trends-section, .community-section { padding: 56px 20px; }
    .why-grid, .trends-grid { grid-template-columns: 1fr; }
    .community-stats { padding: 16px 20px; gap: 0; }
    .com-stat { padding: 0 16px; }
    .com-stat-num { font-size: 24px; }
  }