/* Dark Mode Variables */
    :root[data-theme="dark"] {
      --bg-dark: #0a0a0f;
      --bg-darker: #050508;
      --bg-card: #111118;
      --bg-card-hover: #1a1a24;
      --text-primary: #ffffff;
      --text-secondary: #9ca3af;
      --text-muted: #6b7280;
      --accent-teal: #5db8b0;
      --accent-teal-light: #9dd7d2;
      --accent-green: #71a295;
      --accent-green-light: #a5cbbf;
      --accent-blue: #8ab4dc;
      --accent-yellow: #d1ad5e;
      --accent-orange: #cf8458;
      --border-color: #1f2937;
      --border-hover: #374151;
      --schematic-bg: linear-gradient(180deg, #12121a 0%, #0d0d14 100%);
      --code-bg: #0d0d12;
      --nav-pill-bg: rgba(17, 17, 24, 0.95);
      --hero-glow: rgba(93, 184, 176, 0.14);
    }

    /* Light Mode Variables */
    :root[data-theme="light"] {
      --bg-dark: #ffffff;
      --bg-darker: #f9fafb;
      --bg-card: #ffffff;
      --bg-card-hover: #f3f4f6;
      --text-primary: #111827;
      --text-secondary: #4b5563;
      --text-muted: #6b7280;
      --accent-teal: #159389;
      --accent-teal-light: #43afa6;
      --accent-green: #4f897d;
      --accent-green-light: #78afa3;
      --accent-blue: #4f83bf;
      --accent-yellow: #c79a3d;
      --accent-orange: #c56f43;
      --border-color: #e5e7eb;
      --border-hover: #d1d5db;
      --schematic-bg: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
      --code-bg: #f3f4f6;
      --nav-pill-bg: rgba(255, 255, 255, 0.95);
      --hero-glow: rgba(21, 147, 137, 0.12);
    }

    :root {
      --max-width: 1200px;
      --radius: 12px;
      --radius-lg: 16px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-dark);
      color: var(--text-primary);
      line-height: 1.6;
      overflow-x: hidden;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
    }

    .btn[hidden] {
      display: none !important;
    }

    .btn-sm {
      padding: 8px 16px;
      font-size: 13px;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-blue) 100%);
      color: white;
      box-shadow: 0 4px 20px rgba(79, 131, 191, 0.26);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 30px rgba(79, 131, 191, 0.32);
    }

    .btn-secondary {
      background: var(--bg-card);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }

    .btn-secondary:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-hover);
    }

    .btn-outline {
      background: transparent;
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }

    .btn-outline:hover {
      background: var(--bg-card);
      border-color: var(--accent-teal);
    }

    .btn-ghost {
      background: var(--bg-card);
      color: var(--text-primary);
      padding: 10px 16px;
      border: 1px solid var(--border-color);
    }

    .btn-ghost:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-hover);
    }

    /* SVG Icons */
    .icon {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .icon svg {
      width: 100%;
      height: 100%;
    }

    .icon-lg {
      width: 24px;
      height: 24px;
    }

    /* Sections */
    .section {
      padding: 72px 0;
      scroll-margin-top: 80px;
    }

    /* Reduce only the visual gap between About and Guided Learning Path */
    #about.section {
      padding-bottom: 48px;
    }

    #tutorials.section {
      padding-top: 48px;
    }

    .section-header {
      margin-bottom: 32px;
    }

    .section-header.center {
      text-align: center;
    }

    .section-badge {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent-teal);
      margin-bottom: 12px;
    }

    .section-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }

    .section-subtitle {
      font-size: 16px;
      color: var(--text-secondary);
      max-width: 600px;
      line-height: 1.7;
    }

    .section-header.center .section-subtitle {
      margin: 0 auto;
    }

    .section-divider {
      height: 1px;
      background: var(--border-color);
      margin-bottom: 32px;
    }

    /* ==================== */
    /* 1. HOME / HERO */
    /* ==================== */
    .hero {
      padding: 90px 0 80px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      width: 1000px;
      height: 600px;
      background: radial-gradient(ellipse at center, var(--hero-glow) 0%, transparent 60%);
      pointer-events: none;
      transition: background 0.3s ease;
    }

    .hero-ticker {
      position: relative;
      margin-bottom: 18px;
      border: 1px solid rgba(21, 147, 137, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      overflow: hidden;
      backdrop-filter: blur(12px);
    }

    .hero-ticker::before,
    .hero-ticker::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 72px;
      pointer-events: none;
      z-index: 2;
    }

    .hero-ticker::before {
      left: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .hero-ticker::after {
      right: 0;
      background: linear-gradient(270deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .hero-ticker-track {
      display: flex;
      width: max-content;
      animation: ticker-scroll 55s linear infinite;
    }

    .hero-ticker:hover .hero-ticker-track {
      animation-play-state: paused;
    }

    .hero-ticker-group {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      flex-shrink: 0;
    }

    .hero-ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0 4px;
      white-space: nowrap;
      font-size: 13px;
      color: var(--text-secondary);
      text-decoration: none;
    }

    .hero-ticker-item strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    .hero-ticker-item:hover strong {
      color: var(--accent-teal);
    }

    .hero-ticker-sep {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(21, 147, 137, 0.4);
      flex-shrink: 0;
    }

    @keyframes ticker-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: rgba(21, 147, 137, 0.1);
      border: 1px solid rgba(21, 147, 137, 0.22);
      border-radius: 100px;
      font-size: 12px;
      color: var(--accent-teal-light);
      margin-bottom: 20px;
    }

    .hero-badge-dot {
      width: 6px;
      height: 6px;
      background: var(--accent-teal);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.9); }
    }

    .hero h1 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
    }

    .hero h1 span {
      background: linear-gradient(135deg, var(--accent-teal) 0%, var(--accent-teal-light) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-desc {
      font-size: 17px;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 28px;
    }

    .hero-buttons {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .hero-highlight {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 20px 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: left;
      max-width: 500px;
      margin: 0 auto;
    }

    .hero-highlight:hover {
      border-color: var(--accent-teal);
      box-shadow: 0 8px 30px rgba(21, 147, 137, 0.14);
      transform: translateY(-2px);
    }

    .hero-highlight-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(251, 191, 36, 0.15);
      color: var(--accent-yellow);
      font-size: 11px;
      font-weight: 600;
      border-radius: 4px;
      margin-bottom: 10px;
    }

    .hero-highlight-badge svg {
      width: 14px;
      height: 14px;
    }

    .hero-highlight h4 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .hero-highlight p {
      font-size: 13px;
      color: var(--text-secondary);
      margin: 0;
    }

    .hero-quickstart {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .hero-quickstart-step {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: start;
    }

    .hero-quickstart-step span {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: rgba(21, 147, 137, 0.14);
      color: var(--accent-teal);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
    }

    .hero-quickstart-step strong {
      display: block;
      font-size: 14px;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .hero-quickstart-step p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
    }

    .hero-sidebar-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }

    /* Hero Grid - Two columns */
    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 40px;
      align-items: start;
    }

    .hero-content {
      text-align: left;
    }

    .hero-sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .highlight-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 12px;
      font-size: 13px;
      color: var(--accent-teal);
      font-weight: 500;
    }

    .highlight-link:hover {
      text-decoration: underline;
    }

    @media (max-width: 900px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }
      .hero-content {
        text-align: center;
      }
      .hero-buttons {
        justify-content: center;
      }
    }

    /* ==================== */
    /* H2RES SCHEMATIC */
    /* ==================== */
    .schematic {
      margin-top: 50px;
      background: var(--schematic-bg);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    [data-theme="light"] .schematic {
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    }

    .schematic-inner {
      padding: 24px 28px 28px;
    }

    .schematic-headers {
      display: grid;
      grid-template-columns: 1.3fr 0.9fr 0.5fr;
      gap: 16px;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
    }

    .schematic-header-main {
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-yellow);
      padding: 10px 16px;
      background: rgba(251, 191, 36, 0.1);
      border: 1px solid rgba(251, 191, 36, 0.3);
      border-radius: 8px;
      text-align: center;
    }

    .schematic-header-secondary {
      font-size: 13px;
      font-weight: 600;
      color: #a78bfa;
      padding: 10px 16px;
      background: rgba(167, 139, 250, 0.1);
      border: 1px solid rgba(167, 139, 250, 0.3);
      border-radius: 8px;
      text-align: center;
    }

    .schematic-header-demand {
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-green-light);
      padding: 10px 16px;
      background: rgba(52, 211, 153, 0.1);
      border: 1px solid rgba(52, 211, 153, 0.3);
      border-radius: 8px;
      text-align: center;
    }

    .schematic-content {
      display: grid;
      grid-template-columns: 1.3fr 0.9fr 0.5fr;
      gap: 24px;
      align-items: start;
    }

    .schematic-generation {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .schematic-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .schematic-label-side {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 12px 6px;
      border-radius: 6px;
      white-space: nowrap;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .schematic-label-side.green {
      background: rgba(95, 141, 116, 0.16);
      color: #88b29c;
      border: 1px solid rgba(95, 141, 116, 0.28);
    }

    .schematic-label-side.blue {
      background: rgba(21, 147, 137, 0.14);
      color: #43afa6;
      border: 1px solid rgba(21, 147, 137, 0.26);
    }

    .schematic-label-side.red {
      background: rgba(239, 68, 68, 0.15);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .schematic-nodes {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      flex: 1;
    }

    /* Nodes */
    .node {
      padding: 12px 18px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      transition: all 0.25s ease;
      cursor: default;
    }

    .node:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .node-teal {
      background: linear-gradient(135deg, #43afa6 0%, #159389 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(21, 147, 137, 0.28);
    }

    .node-orange {
      background: linear-gradient(135deg, #cf8458 0%, #c56f43 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(197, 111, 67, 0.28);
    }

    .node-white-dark {
      background: rgba(255, 255, 255, 0.95);
      color: #1f2937;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    [data-theme="light"] .node-white-dark {
      background: #e5e7eb;
      color: #1f2937;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .node-blue {
      background: linear-gradient(135deg, #43afa6 0%, #159389 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(21, 147, 137, 0.3);
    }

    .node-purple {
      background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    }

    .node-green {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
      width: 100%;
      margin-bottom: 10px;
    }

    .node-large {
      padding: 16px 28px;
      font-size: 15px;
      font-weight: 600;
    }

    .node-small {
      padding: 8px 12px;
      font-size: 10px;
    }

    /* Transformation */
    .schematic-transformation {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
    }

    .schematic-arrow {
      color: var(--text-muted);
      font-size: 18px;
      line-height: 1;
    }

    .schematic-row-center {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    /* Demand */
    .schematic-demand {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 10px;
    }

    /* ==================== */
    /* 2. ABOUT H2RES */
    /* ==================== */
    .about-section {
      background: var(--bg-darker);
    }

    .orientation-section {
      background: var(--bg-dark);
      padding-top: 10px;
    }

    .orientation-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      margin-bottom: 24px;
    }

    .orientation-card {
      display: flex;
      flex-direction: column;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 24px;
      transition: all 0.3s ease;
    }

    .orientation-card:hover {
      border-color: var(--accent-teal);
      box-shadow: 0 8px 30px rgba(21, 147, 137, 0.1);
      transform: translateY(-2px);
    }

    .orientation-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-teal);
    }

    .orientation-card h3 {
      font-size: 20px;
      margin-bottom: 18px;
      line-height: 1.25;
    }

    .orientation-card .docs-link {
      margin-top: auto;
    }

    .orientation-list li {
      position: relative;
      padding-left: 14px;
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    .orientation-list li::before {
      content: '•';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--accent-teal);
      font-weight: 700;
    }

    .audience-strip {
      background: var(--bg-darker);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 22px 24px;
    }

    .audience-strip-header {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: end;
      margin-bottom: 16px;
    }

    .audience-strip-header h3 {
      font-size: 22px;
      margin: 0;
    }

    .audience-strip-header p {
      max-width: 580px;
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.7;
      margin: 0;
    }

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

    .audience-item {
      padding: 16px 18px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
    }

    .audience-item h4 {
      font-size: 15px;
      margin-bottom: 8px;
    }

    .audience-item p {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }

    .about-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 28px;
      transition: all 0.3s ease;
    }

    .about-card:hover {
      border-color: var(--accent-teal);
      box-shadow: 0 8px 30px rgba(21, 147, 137, 0.12);
      transform: translateY(-2px);
    }

    .about-card-icon {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, rgba(21, 147, 137, 0.16), rgba(79, 131, 191, 0.14));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 16px;
    }

    .about-card h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .about-card p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .about-card-full {
      grid-column: 1 / -1;
    }

    .institutions-logos {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .institution-logo {
      display: inline-flex;
      align-items: center;
      padding: 12px 20px;
      background: var(--bg-card-hover);
      border-radius: 8px;
      font-size: 13px;
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      transition: all 0.2s ease;
    }

    .institution-logo:hover {
      color: var(--text-primary);
      border-color: var(--accent-teal);
      transform: translateY(-1px);
    }

    /* ==================== */
    /* 4. DOCUMENTATION */
    /* ==================== */
    .docs-section {
      background: var(--bg-darker);
    }

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

    .docs-intro-panel {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: 20px;
      margin-bottom: 24px;
      padding: 24px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      background: var(--bg-card);
    }

    .docs-intro-panel h3 {
      font-size: 22px;
      margin-bottom: 10px;
    }

    .docs-intro-panel p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 0;
    }

    .docs-intro-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-content: start;
      justify-content: flex-start;
    }

    .docs-card {
      display: flex;
      flex-direction: column;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 28px;
      transition: all 0.3s ease;
    }

    .docs-card:hover {
      border-color: var(--accent-blue);
      box-shadow: 0 8px 30px rgba(21, 147, 137, 0.16);
      transform: translateY(-4px);
    }

    .docs-card-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, rgba(21, 147, 137, 0.18), rgba(79, 131, 191, 0.16));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 20px;
    }

    .docs-card h3 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .docs-card p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 16px;
      flex: 1 1 auto;
    }

    .docs-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--accent-blue);
      font-weight: 500;
    }

    .docs-link:hover {
      text-decoration: underline;
    }

    /* Tutorial cards */
    .tutorials-list {
      margin-top: 32px;
    }

    .tutorials-split {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      align-items: stretch;
    }

    .tutorials-split .tutorials-list {
      margin-top: 0;
    }

    .tutorials-panel {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .tutorials-panel .tutorials-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .tutorials-panel .tutorial-item {
      margin-bottom: 0;
      padding: 14px 16px;
    }

    .tutorials-browse-btn {
      margin-top: 12px;
      padding: 5px 10px;
      font-size: 11px;
      white-space: nowrap;
      width: fit-content;
      align-self: flex-start;
    }

    .tutorials-panel p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .tutorials-training-list {
      margin: 12px 0 0;
      padding-left: 20px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
    }

    .tutorials-training-list li + li {
      margin-top: 6px;
    }

    .tutorial-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      margin-bottom: 12px;
      transition: all 0.2s;
    }

    .tutorial-item:hover {
      border-color: var(--accent-green);
      background: var(--bg-card-hover);
    }

    .tutorial-num {
      width: 32px;
      height: 32px;
      background: rgba(79, 137, 125, 0.14);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: var(--accent-green);
    }

    .tutorial-content {
      flex: 1;
    }

    .tutorial-content h4 {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .tutorial-content p {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* ==================== */
    /* 5. PUBLICATIONS */
    /* ==================== */
    .publications-section {
      background: var(--bg-dark);
    }

    .pub-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    .pub-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin: -12px 0 22px;
    }

    .pub-year-filter-label {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .pub-year-filter {
      padding: 8px 10px;
      min-width: 140px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-primary);
      font-size: 13px;
    }

    .pub-year-filter:focus {
      outline: none;
      border-color: var(--accent-teal);
      box-shadow: 0 0 0 2px rgba(21, 147, 137, 0.16);
    }

    .pub-more-actions {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }

    .pub-tab {
      padding: 10px 20px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 14px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .pub-tab:hover,
    .pub-tab.active {
      background: var(--accent-teal);
      border-color: var(--accent-teal);
      color: white;
    }

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

    .pub-card {
      display: flex;
      gap: 20px;
      padding: 24px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .pub-card:hover {
      border-color: var(--border-hover);
      background: var(--bg-card-hover);
    }

    .pub-card.expanded {
      border-color: var(--accent-teal);
      background: var(--bg-card-hover);
    }

    .pub-card-project {
      position: relative;
    }

    .pub-card-project:hover {
      border-color: var(--accent-teal);
    }

    .pub-project-hint {
      margin-top: 10px;
      font-size: 12px;
      color: var(--accent-teal);
      font-weight: 500;
    }

    .pub-icon {
      width: 48px;
      height: 48px;
      background: rgba(21, 147, 137, 0.11);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .pub-content {
      flex: 1;
    }

    .pub-type {
      display: inline-block;
      padding: 3px 8px;
      background: rgba(95, 141, 116, 0.11);
      color: var(--accent-green);
      font-size: 11px;
      font-weight: 600;
      border-radius: 4px;
      margin-bottom: 8px;
    }

    .pub-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
      line-height: 1.4;
    }

    .pub-meta {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .pub-links {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      row-gap: 8px;
    }

    .pub-link {
      font-size: 12px;
      color: var(--accent-teal);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .pub-link:hover {
      text-decoration: underline;
    }

    .pub-details {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-color);
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    .pub-details[hidden] {
      display: none;
    }

    .pub-details-row + .pub-details-row {
      margin-top: 8px;
    }

    .pub-details-label {
      font-weight: 600;
      color: var(--text-primary);
    }

    .pub-status {
      grid-column: 1 / -1;
      padding: 18px 20px;
      border: 1px dashed var(--border-color);
      border-radius: var(--radius);
      color: var(--text-secondary);
      font-size: 14px;
      background: var(--bg-card);
    }

    /* ==================== */
    /* 6. TEAM */
    /* ==================== */
    .team-section {
      background: var(--bg-darker);
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .team-category {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 28px;
      transition: all 0.3s ease;
    }

    .team-category:hover {
      border-color: var(--border-hover);
    }

    .team-category-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border-color);
    }

    .team-category-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, rgba(21, 147, 137, 0.16), rgba(93, 134, 178, 0.16));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .team-category-title {
      font-size: 17px;
      font-weight: 600;
    }

    .team-members {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

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

    .team-member {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 8px;
      border-radius: 10px;
      transition: background 0.2s ease;
    }

    .team-member-clickable {
      cursor: pointer;
      transition: background 0.2s ease, filter 0.2s ease;
    }

    .team-member-clickable:hover,
    .team-member-clickable:focus-visible {
      background: var(--bg-card-hover);
      filter: brightness(0.94);
    }

    .team-member-clickable:active {
      filter: brightness(0.9);
    }

    a.team-member {
      text-decoration: none;
      color: inherit;
    }

    a.team-member:hover {
      background: var(--bg-card-hover);
    }

    .team-avatar {
      width: 44px;
      height: 44px;
      background: var(--bg-card-hover);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: var(--text-muted);
      border: 1px solid var(--border-color);
      overflow: hidden;
    }

    .team-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .team-info h4 {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 2px;
    }

    .team-info p {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .team-info a {
      color: var(--accent-teal);
      font-size: 11px;
      margin-left: 8px;
    }

    .team-member-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .scopus-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 0 !important;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(197, 111, 67, 0.4);
      background: rgba(197, 111, 67, 0.14);
      color: #c56f43;
      font-size: 11px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .scopus-link:hover {
      background: rgba(197, 111, 67, 0.2);
    }

    .scopus-logo {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #c56f43;
      color: #ffffff;
      font-size: 9px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-family: 'Space Grotesk', sans-serif;
      flex-shrink: 0;
    }

    .team-category-wide {
      grid-column: 1 / -1;
    }

    /* ==================== */
    /* 7. COMMUNITY */
    /* ==================== */
    .community-section {
      background: var(--bg-dark);
    }

    .community-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .community-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 28px;
      transition: all 0.3s ease;
    }

    .community-card:hover {
      border-color: var(--accent-green);
      box-shadow: 0 8px 30px rgba(79, 131, 191, 0.1);
    }

    .community-card h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .community-card h3 svg {
      flex-shrink: 0;
    }

    .community-card p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .cite-box {
      background: var(--code-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 16px;
      font-family: 'Monaco', 'Menlo', monospace;
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 12px;
      overflow-wrap: anywhere;
    }

    .cite-box-large {
      padding: 16px;
      min-height: 0;
      font-size: 12px;
      line-height: 1.6;
    }

    .cite-main-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      align-items: stretch;
    }

    .cite-main-column {
      display: flex;
      flex-direction: column;
    }

    .cite-main-column h4 {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 10px;
      color: var(--text-primary);
    }

    .cite-main-column .cite-box {
      flex: 1;
    }

    .cite-card-actions {
      margin-top: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .newsletter-form {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }

    .newsletter-input {
      flex: 1;
      padding: 12px 16px;
      background: var(--code-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 14px;
    }

    .newsletter-input:focus {
      outline: none;
      border-color: var(--accent-green);
    }

    .newsletter-note {
      margin-top: 12px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .newsletter-status {
      margin-top: 10px;
      min-height: 20px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .newsletter-status.is-success {
      color: var(--accent-green);
    }

    .newsletter-status.is-error {
      color: var(--accent-orange);
    }

    .newsletter-target {
      width: 0;
      height: 0;
      border: 0;
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .summer-school-image {
      width: 100%;
      max-width: 500px;
      height: auto;
      border-radius: 10px;
      border: none;
      margin: 0;
      background: #ffffff;
      display: block;
    }

    .summer-school-layout {
      display: grid;
      grid-template-columns: minmax(240px, 500px) 1fr;
      gap: 20px;
      align-items: start;
    }

    .summer-school-copy p {
      margin-bottom: 12px;
    }

    .community-card-full {
      grid-column: 1 / -1;
    }

    .competition-card {
      border-color: rgba(21, 147, 137, 0.32);
    }

    .competition-card:hover {
      border-color: var(--accent-teal);
    }

    .competition-intro {
      margin-bottom: 10px;
    }

    .competition-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr);
      gap: 20px;
      align-items: start;
    }

    .competition-list-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
      letter-spacing: 0.01em;
      text-transform: uppercase;
    }

    .competition-criteria-panel {
      min-width: 0;
    }

    .competition-criteria {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 6px;
    }

    .competition-criteria li {
      position: relative;
      padding-left: 14px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.5;
    }

    .competition-criteria li::before {
      content: '•';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--accent-teal);
      font-size: 13px;
      line-height: 1.5;
    }

    .competition-prize {
      border: 1px solid var(--border-color);
      border-left: 3px solid var(--accent-teal);
      border-radius: 10px;
      background: var(--bg-card);
      padding: 14px 14px 14px 12px;
    }

    .competition-prize-label {
      font-size: 12px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--accent-teal);
      margin-bottom: 6px;
    }

    .competition-prize-text {
      margin: 0;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      line-height: 1.4;
    }

    /* ==================== */
    /* 8. NEWS & UPDATES */
    /* ==================== */
    .news-section {
      background: var(--bg-darker);
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .news-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .news-card:hover {
      border-color: var(--accent-teal);
      transform: translateY(-4px);
      box-shadow: 0 10px 40px rgba(21, 147, 137, 0.14);
    }

    .news-image {
      height: 180px;
      background: var(--bg-card-hover);
      overflow: hidden;
    }

    .news-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .news-card:hover .news-image img {
      transform: scale(1.05);
    }

    .news-content {
      padding: 24px;
    }

    .news-date {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .news-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
    }

    .news-excerpt {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .news-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 12px;
      font-size: 13px;
      color: var(--accent-teal);
    }

    /* ==================== */
    /* FOOTER */
    /* ==================== */
      font-size: 14px;
      color: var(--text-muted);
      white-space: nowrap;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .about-grid,
      .pub-grid,
      .community-grid {
        grid-template-columns: 1fr;
      }
      .orientation-grid,
      .audience-grid,
      .docs-grid,
      .team-grid,
      .news-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .audience-strip-header,
      .docs-intro-panel {
        display: grid;
        grid-template-columns: 1fr;
      }
      .tutorials-split {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .schematic-content {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .schematic-headers {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .schematic-transformation {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
      }
      .schematic-arrow {
        display: none;
      }
      .schematic-demand {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
      }
      .node-green {
        width: auto;
        flex: 1;
        min-width: 120px;
      }

      .summer-school-layout {
        grid-template-columns: 1fr;
      }

      .competition-layout {
        grid-template-columns: 1fr;
      }

      .cite-main-grid {
        grid-template-columns: 1fr;
      }

    }
    @media (max-width: 768px) {
      .orientation-grid,
      .audience-grid,
      .docs-grid,
      .team-grid,
      .news-grid {
        grid-template-columns: 1fr;
      }
      .pub-controls {
        justify-content: flex-start;
      }
      .team-members-advisory {
        grid-template-columns: 1fr;
      }
      .section {
        padding: 44px 0;
      }
      #about.section {
        padding-bottom: 32px;
      }
      #tutorials.section {
        padding-top: 32px;
      }
    }

    @media (max-width: 480px) {
      .hero-ticker {
        margin-bottom: 18px;
        border-radius: 22px;
      }

      .hero-ticker::before,
      .hero-ticker::after {
        width: 28px;
      }

      .hero-ticker-group {
        padding: 10px 0;
      }

      .hero-ticker-item {
        font-size: 12px;
      }

      .hero-buttons {
        flex-direction: column;
        align-items: stretch;
      }
      .btn {
        justify-content: center;
      }
      }
    }