:root {
    --bg: #06080f;
    --bg2: #0a0e1a;
    --surface: #0f1526;
    --border: rgba(74, 144, 255, 0.15);
    --blue: #4a90ff;
    --cyan: #4680c2;/*#4a90ff;/*#00d4ff;*/
    --accent: #00ffcc;
    --text: #e8edf5;
    --muted: #b0b8cc;/*#7a8499;*/
    --dim: #3a4260;
        --amber: #f0a500;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* ── NOISE OVERLAY ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
  }

  /* ── NAV ── */
  nav.site-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(20px);
    background: rgba(6,8,15,0.7);
    border-bottom: 1px solid var(--border);
  }
  .nav-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
  }
  .nav-logo img {
    width: 160px;
    height: auto;
    display: block;
  }
  .nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
    align-items: center;
  }
  .nav-links > li { position: relative; }
  .nav-links a {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
  }
  .nav-links > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
  }
  .nav-links > li > a.has-dropdown::after {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.5;
    flex-shrink: 0;
  }
  .nav-links a:hover { color: var(--cyan); }
  .dropdown {
    position: absolute;
    top: 100%;
    left: -20px;
    background: rgba(10, 14, 26, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    min-width: 230px;
    padding: 16px 0 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 100;
  }
  .nav-links > li:hover .dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    transition-delay: 150ms;
  }
  .dropdown a {
    display: block;
    padding: 10px 20px;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    text-transform: none;
    font-weight: 300;
  }
  .dropdown a:hover { color: var(--cyan); background: rgba(0,212,255,0.04); }
  .dropdown a.current { color: var(--cyan); }
  .dropdown-divider { height: 1px; background: var(--border); margin: 6px 20px; }
  .nav-links > li > .nav-cta {
    background: transparent;
    border: 1px solid var(--cyan);
    color: var(--cyan) !important;
    padding: 8px 20px;
    border-radius: 2px;
    font-size: 11px !important;
    letter-spacing: 2px;
    transition: all 0.2s !important;
  }
  .nav-links > li > .nav-cta:hover { background: var(--cyan) !important; color: var(--bg) !important; }

  /* ── MOBILE NAV ── */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    flex-shrink: 0;
  }
  .ham-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
  }
  .nav-hamburger.is-open .ham-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-hamburger.is-open .ham-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-hamburger.is-open .ham-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .nav-mobile {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    z-index: 1001;
  }
  .nav-mobile.is-open {
    max-height: 85vh;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
  }
  .nav-mobile-list {
    list-style: none;
    padding: 8px 0 24px;
  }
  .nav-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 18px 24px;
    cursor: pointer;
    transition: color 0.2s;
  }
  .nav-mobile-trigger:hover { color: var(--cyan); }
  .nav-mobile-direct {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--text);
    text-decoration: none;
    padding: 18px 24px;
    transition: color 0.2s;
  }
  .nav-mobile-direct:hover { color: var(--cyan); }
  .nav-mobile-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform 0.2s ease;
  }
  .nav-mobile-trigger[aria-expanded="true"] .nav-mobile-chevron {
    transform: rotate(180deg);
  }
  .nav-mobile-sub {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    background: var(--bg2);
  }
  .nav-mobile-sub.is-open {
    max-height: 500px;
  }
  .nav-mobile-sub a {
    display: block;
    padding: 13px 24px 13px 36px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(74,144,255,0.05);
    transition: color 0.2s;
  }
  .nav-mobile-sub a:hover { color: var(--text); }
  .nav-mobile-sub li:first-child a {
    color: var(--cyan);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .nav-mobile-cta-item {
    padding: 20px 24px 8px;
  }
  .nav-mobile-cta {
    display: block;
    text-align: center;
    border: 1px solid var(--cyan);
    color: var(--cyan);
    text-decoration: none;
    padding: 13px 20px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background 0.2s, color 0.2s;
  }
  .nav-mobile-cta:hover { background: var(--cyan); color: var(--bg); }

  /* ── HERO ── */
  #hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: 0 60px 100px;
    position: relative;
    overflow: hidden;
  }
  .hero-video-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 70% 40%, rgba(0,212,255,0.06) 0%, transparent 70%),
      radial-gradient(ellipse 40% 60% at 20% 80%, rgba(74,144,255,0.05) 0%, transparent 60%),
      linear-gradient(180deg, rgba(6,8,15,0.2) 0%, rgba(6,8,15,0.65) 70%, var(--bg) 100%);
    z-index: 1;
  }
  /* Simulated projection dome wireframe */
  .hero-icon-watermark {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 750px;
    height: auto;
    opacity: 0.21;
    filter: grayscale(45%) blur(0px);
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  .hero-video-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }
  .hero-video-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-video-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6,8,15,0.4);
  }
  .hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #06080f 10%, #06080f 40%, rgba(6,8,15,0.45) 100%);
    z-index: 2;
    pointer-events: none;
  }
  .hero-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
  }
  .hero-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .hero-eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--cyan);
  }
  .hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(72px, 9vw, 130px);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 36px;
    color: var(--text);
  }
  .hero-h1 .accent { color: var(--cyan); }
  .hero-sub {
    font-size: 18px;
    color: var(--muted);
    max-width: 560px;
    margin-bottom: 48px;
    font-weight: 300;
    line-height: 1.7;
  }
  .hero-actions {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .btn-primary {
    background: var(--cyan);
    color: var(--bg);
    padding: 16px 36px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
  }
  .btn-primary:hover { background: #fff; transform: translateY(-1px); }
  .btn-ghost {
    border: 1px solid var(--dim);
    color: var(--muted);
    padding: 15px 36px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
  }
  .btn-ghost:hover { border-color: var(--text); color: var(--text); }
  .hero-scroll {
    position: absolute;
    bottom: 40px;
    right: 60px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    gap: 12px;
  }
  .hero-scroll::after {
    content: '';
    width: 1px;
    height: 60px;
    background: linear-gradient(var(--cyan), transparent);
    animation: scrollpulse 2s ease-in-out infinite;
  }
  @keyframes scrollpulse {
    0%,100% { opacity: 0.3; }
    50% { opacity: 1; }
  }

  /* ── CREDIBILITY BAR ── */
  .cred-bar {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 24px 60px;
    display: flex;
    align-items: center;
    gap: 60px;
    overflow: hidden;
  }
  .cred-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }
  .cred-items {
    display: flex;
    gap: 60px;
    flex: 1;
    overflow: hidden;
  }
  .cred-item {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
  }
  .cred-item::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--cyan);
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ── SECTION COMMONS ── */
  section { padding: 120px 60px; }
  .section-label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .section-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--cyan);
  }
  h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    letter-spacing: 1px;
    margin-bottom: 20px;
  }
  .section-intro {
    font-size: 17px;
    color: var(--muted);
    max-width: 580px;
    line-height: 1.7;
  }

  /* ── STAT ROW ── */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
    margin-top: 80px;
  }
  .stat {
    padding: 48px 40px;
    border-right: 1px solid var(--border);
    position: relative;
  }
  .stat:last-child { border-right: none; }
  .stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 64px;
    line-height: 1;
    color: var(--cyan);
    margin-bottom: 8px;
    white-space: nowrap;
  }
  .stat-label {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 300;
  }

  /* ── PROJECTS GRID ── */
  #projects { background: var(--bg2); }
  .projects-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
  }
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    margin-top: 0;
  }
  .project-card svg {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .project-card:hover svg {
    opacity: 0.08 !important;
  }

  .project-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface);
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .project-card:nth-child(1) { grid-column: span 7; grid-row: span 2; min-height: 520px; }
  .project-card:nth-child(2) { grid-column: span 5; min-height: 258px; }
  .project-card:nth-child(3) { grid-column: span 5; min-height: 258px; }
  .project-card:nth-child(4) { grid-column: span 4; min-height: 280px; }
  .project-card:nth-child(5) { grid-column: span 4; min-height: 280px; }
  .project-card:nth-child(6) { grid-column: span 4; min-height: 280px; }

  .project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, filter 0.4s ease;
    filter: brightness(0.65) saturate(0.8);
    min-height: inherit;
    background: var(--surface);
  }
  .project-card:hover .project-img {
    transform: scale(1.04);
    filter: brightness(0.8) saturate(1.1);
  }
  .project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,8,15,0.9) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    transition: background 0.3s;
  }
  .project-card:hover .project-overlay {
    background: linear-gradient(to top, rgba(6,8,15,0.95) 0%, rgba(6,8,15,0.2) 60%);
  }
  .project-tag {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 8px;
  }
  .project-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: var(--text);
  }
  .project-card:nth-child(1) .project-title { font-size: 46px; }
  .project-desc {
    font-size: 13px;
    color: var(--muted);
    max-width: 400px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s;
  }
  .project-card:hover .project-desc { opacity: 1; transform: none; }
  .project-arrow {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s;
    color: var(--text);
    font-size: 18px;
  }
  .project-card:hover .project-arrow { opacity: 1; border-color: var(--cyan); color: var(--cyan); }

  /* placeholder images using CSS gradients */
  .proj-sim {
    background: linear-gradient(135deg, #0a1628 0%, #0d2040 40%, #102850 60%, #0a1628 100%);
    position: relative;
  }
  .proj-sim::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,212,255,0.04) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,212,255,0.04) 40px),
      radial-gradient(ellipse 80% 50% at 50% 50%, rgba(0,120,200,0.2) 0%, transparent 70%);
  }
  .proj-aircraft { background: linear-gradient(135deg, #080f1c 0%, #0c1830 50%, #0e2240 100%); position: relative; }
  .proj-aircraft::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(74,144,255,0.15) 0%, transparent 60%); }
  .proj-theme { background: linear-gradient(135deg, #0f0820 0%, #180d30 50%, #1a1040 100%); position: relative; }
  .proj-theme::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(200,100,255,0.15) 0%, transparent 60%); }
  .proj-maritime { background: linear-gradient(135deg, #060e18 0%, #0a1525 50%, #0d1c30 100%); position: relative; }
  .proj-maritime::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 60%, rgba(0,212,255,0.1) 0%, transparent 60%); }
  .proj-auto { background: linear-gradient(135deg, #0c0c10 0%, #141420 50%, #1a1a28 100%); position: relative; }
  .proj-auto::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 40% 50%, rgba(255,160,50,0.1) 0%, transparent 60%); }
  .proj-proav { background: linear-gradient(135deg, #081215 0%, #0c1a1e 50%, #102025 100%); position: relative; }
  .proj-proav::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(0,255,180,0.08) 0%, transparent 60%); }

  /* icons inside proj cards */
  .proj-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.08;
    font-size: 120px;
    pointer-events: none;
    z-index: 0;
  }
  .project-card:nth-child(1) .proj-icon { font-size: 200px; }

  /* ── VERTICALS / SOLUTIONS ── */
  #solutions {
    background: var(--bg);
  }
  .solutions-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 60px;
    align-items: start;
  }
  .solutions-list { display: flex; flex-direction: column; gap: 2px; }
  .solution-item {
    border: 1px solid var(--border);
    padding: 32px 36px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    position: relative;
    overflow: hidden;
  }
  .solution-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cyan);
    transform: scaleY(0);
    transition: transform 0.2s;
  }
  .solution-item:hover { background: rgba(0,212,255,0.03); border-color: rgba(0,212,255,0.3); }
  .solution-item:hover::before { transform: scaleY(1); }
  .solution-item.active { background: rgba(0,212,255,0.05); border-color: rgba(0,212,255,0.4); }
  .solution-item.active::before { transform: scaleY(1); }
  .sol-num {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--cyan);
    margin-bottom: 10px;
    letter-spacing: 2px;
  }
  .sol-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .sol-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
  }
  .solution-visual {
    position: sticky;
    top: 120px;
    height: 500px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px;
    overflow: hidden;
  }
  .sol-visual-bg {
    position: absolute;
    inset: 0;
    opacity: 0.5;
  }
  .sol-visual-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }
  .sol-visual-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
  }
  .sol-visual-body {
    font-size: 13px;
    color: var(--muted);
    position: relative;
    z-index: 1;
    line-height: 1.6;
    max-width: 360px;
  }

  /* ── PRODUCTS ── */
  #products { background: var(--bg2); }
  .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 60px;
  }
  .product-card {
    background: var(--surface);
    padding: 48px 40px;
    border: 1px solid transparent;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }
  .product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--blue));
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  .product-card:hover { border-color: var(--border); background: #111827; }
  .product-card:hover::after { transform: scaleX(1); }
  .product-badge {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid rgba(0,212,255,0.3);
    padding: 4px 10px;
    margin-bottom: 24px;
  }
  .product-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  .product-tagline {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 32px;
    line-height: 1.6;
  }
  .product-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .product-features li {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .product-features li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--cyan);
    border-radius: 50%;
    flex-shrink: 0;
  }
  .product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    text-decoration: none;
    transition: gap 0.2s;
  }
  .product-link:hover { gap: 14px; }

  /* ── QUOTE / TESTIMONIAL ── */
  #testimonials {
    background: var(--bg);
    padding: 120px 60px;
  }
  .quote-featured {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 80px;
    position: relative;
    overflow: hidden;
    margin-top: 60px;
  }
  .quote-featured::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 40px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 260px;
    color: rgba(0,212,255,0.04);
    line-height: 1;
    pointer-events: none;
  }
  .quote-glow {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .quote-text {
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 300;
    line-height: 1.4;
    max-width: 820px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.3px;
  }
  .quote-attr {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
  }
  .quote-attr::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--cyan);
  }
  .quote-name {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
  }
  .quote-title {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }
  .testimonials-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 2px;
  }
  .testimonial-mini {
    background: var(--surface);
    padding: 40px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
  }
  .testimonial-mini:hover { border-color: var(--border); }
  .testimonial-mini .quote-text { font-size: 15px; margin-bottom: 24px; }

  /* ── ABOUT / MIT ── */
  #about {
    background: var(--bg2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
  }
  .about-content {
    padding: 120px 80px;
  }
  .about-visual {
    position: relative;
    overflow: hidden;
    min-height: 600px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mit-badge {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  .mit-year {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 160px;
    line-height: 1;
    color: rgba(0,212,255,0.06);
    letter-spacing: -4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  .mit-badge-inner {
    border: 1px solid rgba(0,212,255,0.2);
    padding: 48px 60px;
    position: relative;
    z-index: 2;
  }
  .mit-badge-inner .label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--muted);
    margin-bottom: 16px;
    text-transform: uppercase;
  }
  .mit-badge-inner .value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 56px;
    line-height: 1;
    color: var(--cyan);
  }
  .about-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0,212,255,0.03) 50px),
      repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(0,212,255,0.03) 50px);
  }
  .credential-list {
    list-style: none;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .credential-list li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--muted);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .credential-list li:last-child { border-bottom: none; }
  .cred-icon {
    width: 32px;
    height: 32px;
    background: rgba(0,212,255,0.08);
    border: 1px solid rgba(0,212,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 2px;
  }
  .cred-text strong { display: block; color: var(--text); margin-bottom: 4px; font-weight: 400; font-size: 15px; }

  /* ── OEM LOGOS ── */
  #partners {
    padding: 80px 60px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .partners-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 40px;
    text-align: center;
  }
  .partners-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
  }
  .partner-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 3px;
    color: var(--dim);
    transition: color 0.2s;
    cursor: default;
  }
  .partner-logo:hover { color: var(--muted); }

  /* ── CTA BANNER ── */
  #cta {
    padding: 120px 60px;
    background: var(--bg2);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  #cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(0,212,255,0.07) 0%, transparent 70%);
    pointer-events: none;
  }
  #cta h2 { margin-bottom: 16px; position: relative; }
  #cta .section-intro { margin: 0 auto 48px; position: relative; text-align: left; }
  .cta-actions { display: flex; gap: 16px; justify-content: center; position: relative; }

  /* ── FOOTER ── */
  footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 60px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
  }
  .footer-brand .nav-logo { margin-bottom: 16px; display: inline-flex; }
  .footer-desc { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 280px; margin-top: 12px; }
  .footer-col h4 {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
  .footer-col a:hover { color: var(--cyan); }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 32px;
    font-size: 11px;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    letter-spacing: 1px;
  }
  .footer-mit {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
  }
  .footer-mit::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--cyan);
    border-radius: 50%;
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero-eyebrow { animation: fadeUp 0.8s ease 0.2s both; }
  .hero-h1 { animation: fadeUp 0.8s ease 0.4s both; }
  .hero-sub { animation: fadeUp 0.8s ease 0.6s both; }
  .hero-actions { animation: fadeUp 0.8s ease 0.8s both; }

  /* ── MOBILE BASICS ── */
  @media (max-width: 900px) {
    nav.site-nav { padding: 16px 24px; }
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }
    section { padding: 80px 24px; }
    #hero { padding: 100px 24px 80px; }
    .hero-h1 { font-size: 60px; }

    .stats-row { grid-template-columns: 1fr 1fr; }
    .stat-num { font-size: 32px; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
    .stat-label { font-size: 10px; }
    .projects-grid { display: flex; flex-direction: column; }
    .project-card { min-height: 280px !important; }
    .solutions-layout { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .testimonials-row { grid-template-columns: 1fr; }
    #about { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cred-bar { flex-wrap: wrap; gap: 20px; padding: 20px 24px; }
    .quote-featured { padding: 48px 32px; }
  }

  /* Subtle scanline overlay on hero */
  .hero-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,0.04) 3px,
      rgba(0,0,0,0.04) 4px
    );
    z-index: 1;
    pointer-events: none;
  }

  /* Projector beam animation */
  .beam {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,212,255,0.15) 0%, rgba(0,212,255,0.35) 20%, rgba(0,212,255,0.2) 50%, transparent 100%);
    transform: rotate(-20deg) translateX(-200px);
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
    animation: beampulse 6s ease-in-out infinite;
  }
  .beam:nth-child(2) { transform: rotate(-5deg) translateX(200px); animation-delay: 2s; }
  .beam:nth-child(3) { transform: rotate(10deg) translateX(500px); animation-delay: 4s; }
  @keyframes beampulse {
    0%,100% { opacity: 0.15; }
    50% { opacity: 0.35; }
  }

  /* Dot grid pattern on hero */
  .hero-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(74,144,255,0.12) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 80% at 70% 50%, black, transparent);
    z-index: 0;
    pointer-events: none;
  }

  /* Counter animation */
  .count-up { display: inline-block; }  /* ── PAGE HEADER ── */
  #page-header {
    padding: 140px 60px 48px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  .ph-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(74,144,255,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 50% 100% at 100% 50%, black, transparent);
    pointer-events: none;
  }
  .ph-glow {
    position: absolute;
    top: 0; right: 0;
    width: 500px; height: 100%;
    background: radial-gradient(ellipse 80% 60% at 90% 50%, rgba(0,212,255,0.04) 0%, transparent 70%);
    pointer-events: none;
  }
  .ph-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
  }
  .ph-left { max-width: 660px; }
  .breadcrumb {
    display: none;
  }
  .breadcrumb a { color: var(--dim); text-decoration: none; transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--muted); }
  .breadcrumb-sep { opacity: 0.35; }
  .ph-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid rgba(0,212,255,0.25);
    padding: 5px 12px;
    margin-bottom: 18px;
  }
  .ph-badge::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--cyan);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--cyan);
  }
  .ph-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(44px, 5.5vw, 68px);
    line-height: 1;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 16px;
  }
  .ph-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
    max-width: 540px;
    font-weight: 300;
    margin-bottom: 32px;
  }
  .ph-actions {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .ph-specs {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 2px;
  }
  .ph-spec {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 18px;
    border: 1px solid var(--border);
    background: rgba(15,21,38,0.5);
    min-width: 200px;
  }
  .ph-spec .val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    color: var(--cyan);
    line-height: 1;
  }
  .ph-spec .lbl {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ── PAGE HEADER — BG IMAGE VARIANTS ── */
  #page-header.ph-bg-sdm {
    background-image: url('../images/sdm-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
  }
  .ph-bg-sdm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.8) 100%);
    z-index: 0;
  }

  #page-header.ph-bg-atlas {
    background-image: url('../images/atlas-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
  }
  .ph-bg-atlas::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.6) 100%);
    z-index: 0;
  }

#page-header.ph-bg-products {
  background-image: url('../images/products-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-bg-products::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6,8,15,0.75) 0%, rgba(6,8,15,0.9) 70%,rgba(6,8,15,1) 90%,rgba(6,8,15,1) 100%);
  z-index: 0;
}

  #page-header.ph-bg-spa {
    background-image: url('../images/spa-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
  }
  .ph-bg-spa::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.2) 100%);
    z-index: 0;
  }

  /* ── OVERVIEW – 2 COL ── */
  #overview {
    padding: 60px 60px 100px;
    background: var(--bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .overview-visual {
    position: relative;
    height: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .overview-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0,212,255,0.025) 50px),
      repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(0,212,255,0.025) 50px);
  }
  .ov-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,212,255,0.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .ov-badge {
    position: absolute;
    top: 24px; right: 24px;
    border: 1px solid rgba(0,212,255,0.2);
    padding: 14px 18px;
    background: rgba(6,8,15,0.7);
    backdrop-filter: blur(8px);
  }
  .ov-badge .val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    color: var(--cyan);
    line-height: 1;
  }
  .ov-badge .lbl {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 3px;
  }
  .ov-visual-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cyan);
    position: absolute;
    bottom: 20px; left: 24px;
  }
  .overview-text p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 18px;
  }
  .overview-text p:last-of-type { margin-bottom: 28px; }
  .text-link {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.2s;
  }
  .text-link:hover { gap: 14px; }

  /* ── FEATURES GRID ── */
  #features {
    background: var(--bg2);
    padding: 100px 60px;
  }
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 52px;
  }
  .feat-card {
    background: var(--surface);
    padding: 40px 36px;
    border: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
  }
  .feat-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--blue));
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  .feat-card:hover { border-color: var(--border); background: #111827; }
  .feat-card:hover::after { transform: scaleX(1); }
  .feat-icon {
    width: 36px; height: 36px;
    background: rgba(0,212,255,0.07);
    border: 1px solid rgba(0,212,255,0.18);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    font-size: 15px;
  }
  .feat-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .feat-body {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
  }

  /* ── DEEP FEATURES – alternating ── */
  .deep-feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
  }
  .deep-feat:last-child { border-bottom: 1px solid var(--border); }
  .df-content {
    padding: 72px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg);
  }
  .df-visual {
    background: var(--surface);
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .df-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0,212,255,0.02) 50px),
      repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(0,212,255,0.02) 50px);
  }
  .deep-feat.reverse .df-content { order: 2; }
  .deep-feat.reverse .df-visual { order: 1; }
  .df-content h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1;
    letter-spacing: 1px;
    margin-bottom: 18px;
  }
  .df-content p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 14px;
    max-width: 460px;
  }
  .df-list {
    list-style: none;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .df-list li {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .df-list li::before {
    content: '';
    width: 4px; height: 4px;
    background: var(--cyan);
    border-radius: 50%;
    flex-shrink: 0;
  }
  .df-vis-badge {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 36px 44px;
    border: 1px solid rgba(0,212,255,0.15);
    background: rgba(6,8,15,0.5);
    backdrop-filter: blur(8px);
  }
  .df-vis-badge .big {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 68px;
    color: var(--cyan);
    line-height: 1;
  }
  .df-vis-badge .small {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 8px;
  }
  .df-vis-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,212,255,0.06) 0%, transparent 70%);
    pointer-events: none;
  }

  /* ── INTEGRATIONS ── */
  #integrations {
    background: var(--bg2);
    padding: 80px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  #integrations::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 700px; height: 300px;
    background: radial-gradient(ellipse, rgba(0,212,255,0.05) 0%, transparent 70%);
    pointer-events: none;
  }
  .int-sublabel {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 32px;
    position: relative;
  }
  .int-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    position: relative;
  }
  .int-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--dim);
    transition: color 0.2s;
  }
  .int-logo:hover { color: var(--muted); }
  .int-divider {
    width: 1px; height: 40px;
    background: var(--border);
    margin: 32px auto;
  }
  .int-count {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--muted);
    text-transform: uppercase;
    position: relative;
    margin-top: 36px;
  }
  .int-count span { color: var(--cyan); }

  /* ── MARKETS ── */
  #markets {
    background: var(--bg);
    padding: 100px 60px;
  }
  .markets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 52px;
  }
  .mkt-card {
    background: var(--surface);
    padding: 36px 32px;
    border: 1px solid transparent;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
  }
  .mkt-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--cyan);
    transform: scaleY(0);
    transition: transform 0.2s;
  }
  .mkt-card:hover { background: rgba(0,212,255,0.03); border-color: rgba(0,212,255,0.2); }
  .mkt-card:hover::before { transform: scaleY(1); }
  .mkt-num {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--cyan);
    margin-bottom: 10px;
    letter-spacing: 2px;
  }
  .mkt-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .mkt-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
  }

  /* ── RELATED PRODUCTS ── */
  #related {
    background: var(--bg2);
    padding: 80px 60px;
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin-top: 40px;
  }
  .related-card {
    background: var(--surface);
    padding: 40px 36px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
    transition: all 0.2s;
    display: block;
    position: relative;
    overflow: hidden;
  }
  .related-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--blue));
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  .related-card:hover { border-color: var(--border); background: #111827; }
  .related-card:hover::after { transform: scaleX(1); }
  .related-badge {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid rgba(0,212,255,0.25);
    padding: 4px 10px;
    margin-bottom: 16px;
  }
  .related-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .related-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .related-link {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.2s;
  }
  .related-card:hover .related-link { gap: 14px; }

  /* ── Requirements ── */
  #requirements {
    background: var(--bg2);
    padding: 100px 60px;
  }

  .req-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 60px;
    margin-top: 52px;
  }

  .req-group-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 14px;
  }

  .req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .req-list li {
    font-size: 0.875rem;
    color: var(--muted);
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
  }

  .req-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--dim);
  }

  .req-list a {
    color: var(--cyan);
    text-decoration: none;
  }

  .req-list a:hover {
    text-decoration: underline;
  }

  @media (max-width: 760px) {
    .req-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 36px 32px;
    }
  }

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

  /* ── FAQ ── */
  #faq {
    background: var(--bg2);
    padding: 100px 60px;
  }
  .faq-list {
    margin-top: 52px;
    max-width: 860px;
  }
  .faq-item {
    border-bottom: 1px solid var(--border);
  }
  .faq-item:first-child {
    border-top: 1px solid var(--border);
  }
  .faq-question {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    user-select: none;
  }
  .faq-question::-webkit-details-marker { display: none; }
  .faq-question::after {
    content: '+';
    font-family: 'DM Mono', monospace;
    font-size: 18px;
    color: var(--cyan);
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .faq-item[open] .faq-question::after {
    transform: rotate(45deg);
  }
  .faq-item[open] .faq-question {
    color: var(--cyan);
  }
  .faq-answer {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    font-weight: 300;
    padding-bottom: 24px;
    max-width: 720px;
  }

  /* ══════════════════════════════════════════
     SOLUTION PAGES — .sh-* components
     Completely separate from product page .ph-*
     ══════════════════════════════════════════ */

  /* ── SOLUTION HEADER ── */
  .sh-header {
    padding: 160px 60px 100px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--border);
  }
  .sh-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(74,144,255,0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 60% 100% at 80% 50%, black, transparent);
    pointer-events: none;
  }
  .sh-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 100%;
    background: radial-gradient(ellipse 80% 70% at 85% 40%, rgba(0,212,255,0.05) 0%, transparent 70%);
    pointer-events: none;
  }
  .sh-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
  }
  .sh-category {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
    margin-top: 20px;
  }
  .sh-cat-parent { color: var(--muted); }
  .sh-cat-page { color: var(--cyan); }
  .sh-tags {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 28px;
    opacity: 0.7;
  }
  .sh-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 6.5vw, 96px);
    line-height: 0.95;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 28px;
  }
  .sh-intro {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 580px;
    font-weight: 300;
    margin-bottom: 40px;
  }

  /* ── SOLUTION HEADER — BG VARIANTS ── */
  .sh-bg-dome {
    background-image: url('../images/dome-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
  }
  .sh-bg-dome::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6,8,15,0.97) 0%, rgba(6,8,15,0.97) 50%, rgba(6,8,15,0.55) 100%);
    z-index: 0;
  }

  /* ── THE CHALLENGE ── */
  .sh-challenge {
    background: var(--bg2);
    padding: 100px 60px;
    border-bottom: 1px solid var(--border);
  }
  .sh-challenge-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .sh-pull-quote {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.25;
    color: var(--text);
    border-left: 2px solid var(--cyan);
    padding-left: 28px;
  }
  .sh-challenge-body p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 20px;
  }
  .sh-challenge-body p:last-child { margin-bottom: 0; }

  /* ── OUTCOMES GRID ── */
  .sh-outcomes {
    background: var(--bg);
    padding: 100px 60px;
  }
  .sh-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 52px;
  }
  .outcome-card {
    background: var(--surface);
    padding: 40px 36px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
    position: relative;
    overflow: hidden;
  }
  .outcome-card:hover { border-color: var(--border); }
  .oc-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
    color: var(--dim);
    margin-bottom: 18px;
    display: block;
  }
  .oc-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.35;
  }
  .oc-body {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.75;
    font-weight: 300;
  }

  /* ── FIELD EVIDENCE ── */
  .sh-evidence {
    background: var(--bg2);
    padding: 100px 60px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .sh-evidence-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .sh-blockquote {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--text);
    margin: 24px 0 32px;
    quotes: none;
  }
  .sh-quote-attr {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 20px;
    border-left: 2px solid var(--cyan);
  }
  .sh-quote-name {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
  }
  .sh-quote-role {
    font-size: 12px;
    color: var(--muted);
  }
  .sh-deploy-list {
    list-style: none;
    margin-top: 24px;
  }
  .sh-deploy-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
  }
  .sh-deploy-item:first-child { border-top: 1px solid var(--border); }
  .sh-deploy-name {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text);
  }
  .sh-deploy-desc {
    font-size: 12px;
    color: var(--muted);
    font-weight: 300;
  }

  /* ── HOW IT WORKS ── */
  .sh-process {
    background: var(--bg);
    padding: 100px 60px;
  }
  .sh-process-steps {
    display: flex;
    align-items: flex-start;
    margin-top: 60px;
  }
  .process-step {
    flex: 1;
  }
  .ps-connector {
    flex-shrink: 0;
    width: 48px;
    height: 1px;
    background: var(--border);
    margin-top: 26px;
    position: relative;
  }
  .ps-connector::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    transform: rotate(45deg);
  }
  .ps-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--cyan);
    margin-bottom: 14px;
    display: block;
  }
  .ps-label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 12px;
  }
  .ps-body {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.75;
    font-weight: 300;
    max-width: 220px;
  }

  /* ── PRODUCT BRIDGE ── */
  .sh-bridge {
    background: var(--bg2);
    padding: 100px 60px;
    border-top: 1px solid var(--border);
  }
  .sh-bridge-intro {
    font-size: 16px;
    color: var(--muted);
    max-width: 580px;
    margin: 20px 0 48px;
    font-weight: 300;
    line-height: 1.75;
  }
  .sh-bridge-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 560px));
    gap: 2px;
  }
  .bridge-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 40px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
  }
  .bridge-card:hover {
    border-color: var(--cyan);
    background: rgba(70,128,194,0.04);
  }
  .bc-badge {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 14px;
    display: block;
  }
  .bc-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px;
    letter-spacing: 1px;
    color: var(--text);
    margin-bottom: 14px;
    display: block;
  }
  .bc-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 28px;
  }
  .bc-link {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
  }

  /* ── RELATED SOLUTIONS ── */
  .sh-related {
    background: var(--bg);
    padding: 100px 60px;
    border-top: 1px solid var(--border);
  }

  /* ── FOOTER UTILITY (no-inline replacement) ── */
  .footer-address {
    margin-top: 20px;
    font-size: 11px;
    color: var(--dim);
    font-family: 'DM Mono', monospace;
    letter-spacing: 1px;
  }
  .footer-legal {
    display: flex;
    gap: 20px;
  }
  .footer-legal a {
    color: var(--muted);
    text-decoration: none;
  }

  /* ── MOBILE ── */
  @media (max-width: 900px) {
    #page-header { padding: 100px 24px 48px; }
    .breadcrumb { flex-wrap: wrap; }
    .ph-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
    .ph-sub { font-size: 14px; }
    .ph-specs { flex-direction: row; flex-wrap: wrap; width: 100%; }
    .ph-spec { flex: 1 1 40%; min-width: 0; }
    #overview { grid-template-columns: 1fr; padding: 60px 24px; gap: 40px; }
    #features, #markets, #integrations, #related, #requirements { padding: 60px 24px; }
    #testimonials { padding: 60px 24px; }
    #cta { padding: 60px 24px; }
    .features-grid, .markets-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    #deep-features { overflow-x: hidden; }
    .deep-feat, .deep-feat.reverse { grid-template-columns: 1fr; }
    .deep-feat.reverse .df-content { order: 1; }
    .deep-feat.reverse .df-visual { order: 2; }
    .df-content { padding: 48px 24px; }
    #faq { padding: 60px 24px; }
    footer { padding: 48px 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    /* solution page mobile */
    .sh-header { padding: 120px 24px 60px; min-height: auto; align-items: flex-start; padding-top: 120px; }
    .sh-h1 { font-size: 52px; }
    .sh-challenge, .sh-outcomes, .sh-evidence, .sh-process, .sh-bridge, .sh-related { padding: 60px 24px; }
    .sh-challenge-inner { grid-template-columns: 1fr; gap: 36px; }
    .sh-outcomes-grid { grid-template-columns: 1fr; }
    .sh-evidence-inner { grid-template-columns: 1fr; gap: 48px; }
    .sh-process-steps { flex-direction: column; gap: 0; }
    .process-step { padding-bottom: 0; }
    .ps-connector { width: 1px; height: 32px; margin: 12px 0 12px 19px; }
    .ps-connector::after { right: -4px; top: auto; bottom: -5px; border-top: none; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); transform: rotate(45deg); }
    .ps-body { max-width: 100%; }
    .sh-bridge-cards { grid-template-columns: 1fr; }
  }

  /* ══════════════════════════════════════════
     PROJECTS HUB + INDIVIDUAL PAGES
     ══════════════════════════════════════════ */

  /* ── PROJECTS HUB ── */
  #projects-hub {
    background: var(--bg);
    padding: 80px 60px 120px;
  }

  /* Filter bar */
  .proj-filter-bar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .proj-filter-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 9px 20px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    border-radius: 0;
  }
  .proj-filter-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
  }
  .proj-filter-btn.active {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--bg);
  }

  /* Featured card */
  .pj-featured {
    display: block;
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    margin-bottom: 4px;
    border: 1px solid var(--border);
  }
  .pj-featured-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, filter 0.4s ease;
    filter: brightness(0.5) saturate(0.8);
    background: var(--surface);
  }
  .pj-featured:hover .pj-featured-img {
    transform: scale(1.03);
    filter: brightness(0.65) saturate(1.0);
  }
  .pj-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,8,15,0.97) 0%, rgba(6,8,15,0.35) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 52px;
    transition: background 0.3s;
  }
  .pj-featured:hover .pj-featured-overlay {
    background: linear-gradient(to top, rgba(6,8,15,0.99) 0%, rgba(6,8,15,0.45) 60%, transparent 100%);
  }
  .pj-featured-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .pj-featured-client {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .pj-featured-headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 16px;
  }
  .pj-featured-summary {
    font-size: 16px;
    color: var(--muted);
    max-width: 600px;
    line-height: 1.65;
    font-weight: 300;
    margin-bottom: 28px;
  }
  .pj-featured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

  /* Type badge — case study only */
  .pj-type-badge {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    padding: 4px 10px;
    flex-shrink: 0;
  }

  /* Market tag */
  .pj-market-tag {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cyan);
  }

  /* Product tags */
  .pj-products {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .pj-product-tag {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 4px 10px;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
  }
  a.pj-product-tag:hover {
    color: var(--cyan);
    border-color: rgba(70,128,194,0.4);
  }

  /* CTA label */
  .pj-cta {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    white-space: nowrap;
    transition: letter-spacing 0.2s;
  }
  .pj-featured:hover .pj-cta,
  .pj-card:hover .pj-cta { letter-spacing: 3px; }

  /* Grid */
  .pj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  /* Card */
  .pj-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
    transition: border-color 0.2s;
    position: relative;
    overflow: hidden;
  }
  .pj-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--blue));
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  .pj-card:hover { border-color: var(--border); }
  .pj-card:hover::after { transform: scaleX(1); }

  .pj-card-thumb {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: var(--bg2);
    flex-shrink: 0;
  }
  .pj-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: brightness(0.7) saturate(0.85);
  }
  .pj-card:hover .pj-card-thumb img {
    transform: scale(1.04);
    filter: brightness(0.88) saturate(1.0);
  }

  .pj-card-body {
    padding: 28px 32px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .pj-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .pj-client {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .pj-headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    line-height: 1.05;
  }
  .pj-summary {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    font-weight: 300;
    margin-bottom: 18px;
    flex: 1;
  }
  .pj-card-body .pj-products { margin-bottom: 18px; }
  .pj-card-body .pj-cta { margin-top: auto; }

  /* Empty state */
  .pj-empty {
    text-align: center;
    padding: 80px 40px;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid var(--border);
    margin-top: 4px;
  }

  /* ── INDIVIDUAL PROJECT PAGE ── */
  .proj-hero {
    position: relative;
    height: 88vh;
    min-height: 580px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: var(--bg);
  }
  .proj-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.45) saturate(0.8);
    background: var(--surface);
  }
  .proj-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,8,15,0.97) 0%, rgba(6,8,15,0.3) 50%, transparent 100%);
  }
  .proj-hero-breadcrumb {
    position: absolute;
    top: 90px;
    left: 60px;
    z-index: 3;
  }
  .proj-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 60px 72px;
    width: 100%;
    max-width: 860px;
  }
  .proj-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .proj-hero-headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 7.5vw, 108px);
    line-height: 0.93;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 20px;
  }
  .proj-hero-summary {
    font-size: 17px;
    color: var(--muted);
    max-width: 580px;
    line-height: 1.65;
    font-weight: 300;
  }

  /* Info strip below hero */
  .proj-info {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 24px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
  }
  .proj-info-left {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  .proj-info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .proj-info-lbl {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dim);
  }
  .proj-info-val {
    font-size: 13px;
    color: var(--text);
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'DM Mono', monospace;
    letter-spacing: 1px;
  }
  .proj-back {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .proj-back:hover { color: var(--cyan); }

  /* Optional caption section */
  .proj-caption {
    background: var(--bg);
    padding: 80px 60px;
    border-top: 1px solid var(--border);
  }
  .proj-caption-inner {
    max-width: 780px;
  }
  .proj-caption-inner p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 20px;
  }
  .proj-caption-inner p:last-child { margin-bottom: 0; }

  /* ── CASE STUDY PAGE ── */
  .cs-header {
    padding: 150px 60px 60px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  .cs-header-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.75) saturate(0.8);
  }
  .cs-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6,8,15,0.82) 0%, rgba(6,8,15,0.55) 50%, rgba(6,8,15,0.35) 100%);
  }
  .cs-header-inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
  }
  .cs-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    margin-top: 24px;
    flex-wrap: wrap;
  }
  .cs-headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(44px, 5.5vw, 80px);
    line-height: 0.95;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 20px;
  }
  .cs-summary {
    font-size: 17px;
    color: var(--muted);
    max-width: 640px;
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 36px;
  }
  .cs-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    text-decoration: none;
    border: 1px solid var(--cyan);
    padding: 10px 18px;
    border-radius: 4px;
    margin: 16px 0 28px;
    transition: background 0.2s ease;
  }
  .cs-back-btn:hover {
    background: rgba(70, 128, 194, 0.12);
  }

  /* Stats bar */
  .cs-stats {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 60px;
    display: flex;
  }
  .cs-stat {
    flex: 1;
    padding: 40px 40px 40px 24px;
    border-right: 1px solid var(--border);
  }
  .cs-stat:first-child { padding-left: 24px; }
  .cs-stat:last-child { border-right: none; }
  .cs-stat-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    line-height: 1;
    color: var(--cyan);
    margin-bottom: 8px;
    white-space: nowrap;
  }
  .cs-stat-label {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 300;
  }

  /* Challenge section */
  .cs-challenge {
    background: var(--bg2);
    padding: 80px 60px;
    border-bottom: 1px solid var(--border);
  }
  .cs-challenge-inner { max-width: 860px; }
  .cs-challenge-text {
    font-size: 19px;
    color: var(--text);
    line-height: 1.65;
    font-weight: 300;
    border-left: 2px solid var(--cyan);
    padding-left: 28px;
    margin-top: 24px;
  }

  /* Pull quote */
  .cs-quote-section {
    background: var(--bg);
    padding: 80px 60px;
    border-bottom: 1px solid var(--border);
  }
  .cs-quote-inner { max-width: 860px; }
  .cs-blockquote {
    font-size: clamp(19px, 2.2vw, 29px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 28px;
    quotes: none;
    letter-spacing: -0.2px;
  }
  .cs-quote-attr {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 20px;
    border-left: 2px solid var(--cyan);
  }
  .cs-quote-attr-name {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
  }

  /* Body content */
  .cs-body {
    background: var(--bg);
    padding: 80px 60px;
  }
  .cs-body-inner { max-width: 65%; }
  .cs-body-inner h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    letter-spacing: 1px;
    margin-bottom: 16px;
    margin-top: 52px;
    color: var(--text);
  }
  .cs-body-inner h2:first-child { margin-top: 0; }
  .cs-body-inner h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 12px;
    margin-top: 36px;
  }
  .cs-body-inner p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    font-weight: 300;
    margin-bottom: 20px;
  }
  .cs-body-inner ul {
    list-style: none;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .cs-body-inner ul li {
    font-size: 14px;
    color: var(--muted);
    padding-left: 18px;
    position: relative;
    line-height: 1.65;
    font-weight: 300;
  }
  .cs-body-inner ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    background: var(--cyan);
    border-radius: 50%;
  }

  /* ── PROJECT IMAGE GALLERY ── */
  .proj-gallery {
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
  }
  .proj-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 4px;
  }
  .proj-gallery-item {
    height: 300px;
    overflow: hidden;
    background: var(--surface);
    position: relative;
    cursor: pointer;
  }
  .proj-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.85);
    transition: transform 0.5s ease, filter 0.35s ease;
  }
  .proj-gallery-item:hover img {
    transform: scale(1.04);
    filter: brightness(1);
  }

  /* ── LIGHTBOX ── */
  .lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 15, 0.97);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .lb-overlay.is-open {
    opacity: 1;
    pointer-events: all;
  }
  .lb-img-wrap {
    position: absolute;
    inset: 0 0 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 120px;
  }
  .lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    opacity: 1;
    transition: opacity 0.15s ease;
    user-select: none;
  }
  .lb-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--muted);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: border-color 0.2s, color 0.2s;
  }
  .lb-close:hover {
    border-color: var(--cyan);
    color: var(--cyan);
  }
  .lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--muted);
    width: 48px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
  }
  .lb-arrow:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(70, 128, 194, 0.08);
  }
  .lb-prev { left: 20px; }
  .lb-next { right: 20px; }
  .lb-counter {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    z-index: 1;
  }

  /* Thumbnail strips — gallery lightbox & hub lightbox */
  .lb-thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 120px;
    background: rgba(6,8,15,0.95);
    border-top: 1px solid var(--border);
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .lb-thumbs::-webkit-scrollbar { height: 3px; }
  .lb-thumbs::-webkit-scrollbar-track { background: transparent; }
  .lb-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .hub-lb-thumbs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 120px;
    background: rgba(6,8,15,0.95);
    border-top: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .hub-lb-thumbs::-webkit-scrollbar { height: 3px; }
  .hub-lb-thumbs::-webkit-scrollbar-track { background: transparent; }
  .hub-lb-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .lb-thumb,
  .hub-lb-thumb {
    flex-shrink: 0;
    height: 72px;
    width: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.4;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: opacity 0.18s ease, border-color 0.18s ease;
  }
  .lb-thumb:hover,
  .hub-lb-thumb:hover { opacity: 0.72; }
  .lb-thumb.is-active,
  .hub-lb-thumb.is-active { opacity: 1; border-color: var(--cyan); }

  /* ── MOBILE: PROJECTS ── */
  @media (max-width: 900px) {
    #projects-hub { padding: 60px 24px 80px; }
    .proj-filter-bar { gap: 6px; margin-bottom: 40px; }
    .proj-filter-btn { padding: 8px 14px; font-size: 9px; }
    .pj-featured { height: 400px; }
    .pj-featured-overlay { padding: 28px; }
    .pj-featured-summary { font-size: 14px; }
    .pj-grid { grid-template-columns: 1fr; }
    .proj-hero { height: 72vh; min-height: 480px; }
    .proj-hero-breadcrumb { top: 76px; left: 24px; }
    .proj-hero-content { padding: 0 24px 44px; }
    .proj-info { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 20px; }
    .proj-info-left { gap: 24px; }
    .proj-info .proj-back { margin-left: 0; }
    .proj-caption { padding: 60px 24px; }
    .cs-header { padding: 100px 24px 48px; }
    .cs-headline { font-size: 28px; }
    .cs-back-btn { font-size: 10px; padding: 8px 14px; }
    .cs-stats { padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; }
    .cs-stat { flex: unset; min-width: 0; padding: 24px 16px; border-right: none; border-bottom: 1px solid var(--border); }
    .cs-stat:nth-child(odd) { border-right: 1px solid var(--border); }
    .cs-stat:nth-last-child(-n+2):nth-child(odd),
    .cs-stat:nth-last-child(-n+2):nth-child(odd) ~ .cs-stat { border-bottom: none; }
    .cs-stat-value { font-size: 24px; line-height: 1.1; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
    .cs-stat-label { font-size: 10px; }
    .cs-stat:last-child { border-bottom: none; }
    .cs-challenge { padding: 36px 24px; }
    .cs-quote-section, .cs-body { padding: 48px 24px; }
    .cs-body-inner { max-width: 100%; }
    .cs-body-inner h2 { font-size: 22px; margin-top: 36px; }
    .cs-summary { font-size: 14px; }
    .cs-challenge-text { font-size: 15px; }
    .cs-body-inner p { font-size: 14px; }
    .proj-gallery-grid { grid-template-columns: 1fr; }
    .proj-gallery-item { height: 240px; }
    .lb-img-wrap { padding: 70px 56px; inset: 0 0 84px 0; }
    .lb-thumbs { height: 84px; padding: 10px 16px; }
    .lb-thumb, .hub-lb-thumb { height: 58px; }
    .hub-lb-thumbs { padding: 10px 16px; }
    .lb-arrow { width: 40px; height: 64px; font-size: 22px; }
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
  }

/* ── HUB PROJECT LIGHTBOX ── */
.pj-card[data-images] { cursor: pointer; }

.hub-lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(6,8,15,0.97);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.hub-lb-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.hub-lb-img-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 120px 40px;
}
.hub-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}
.hub-lb-info {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 18px 120px;
}
.hub-lb-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.hub-lb-info-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.hub-lb-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--text);
  margin: 0;
  line-height: 1;
}
.hub-lb-summary {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
  max-width: 600px;
}
.hub-lb-products {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.hub-lb-info-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.hub-lb-date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.hub-lb-counter {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  white-space: nowrap;
}
.hub-lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2010;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.hub-lb-close:hover { border-color: var(--accent); color: var(--accent); }
.hub-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(6,8,15,0.6);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 28px;
  width: 48px;
  height: 80px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 2010;
}
.hub-lb-arrow:hover { background: rgba(74,144,255,0.15); border-color: var(--blue); }
.hub-lb-prev { left: 16px; border-radius: 0 4px 4px 0; }
.hub-lb-next { right: 16px; border-radius: 4px 0 0 4px; }

  /* ── MOBILE: HUB LIGHTBOX ── */
  @media (max-width: 900px) {
    .hub-lb-img-wrap { padding: 64px 56px 32px; }
    .hub-lb-info { padding: 16px 24px; }
    .hub-lb-info-top { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hub-lb-info-right { flex-direction: row; align-items: center; gap: 16px; }
    .hub-lb-headline { font-size: 18px; }
    .hub-lb-arrow { width: 40px; height: 64px; font-size: 22px; }
    .hub-lb-prev { left: 8px; }
    .hub-lb-next { right: 8px; }
  }

/* ══════════════════════════════════════════
   ARTICLE PAGE LAYOUT  (.ar-*)
   ══════════════════════════════════════════ */

  .ar-header {
    padding: 120px 60px 80px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .ar-header-inner { max-width: 860px; }
  .ar-topics {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .ar-topic-tag {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(74,144,255,0.08);
    border: 1px solid rgba(74,144,255,0.2);
    padding: 5px 12px;
    border-radius: 2px;
  }
  .ar-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;
    letter-spacing: 1px;
    color: var(--text);
    margin-bottom: 28px;
  }
  .ar-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ar-meta-sep { color: var(--dim); }

  /* Article body */
  .ar-body {
    background: var(--bg);
    padding: 80px 60px 100px;
  }
  .ar-body-inner {
    max-width: 720px;
    margin: 0 auto;
  }
  .ar-body-inner p {
    font-size: 17px;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 28px;
    font-weight: 300;
  }
  .ar-body-inner h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 1px;
    margin-top: 56px;
    margin-bottom: 20px;
    color: var(--text);
  }
  .ar-body-inner h3 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 40px;
    margin-bottom: 14px;
    color: var(--text);
  }
  .ar-body-inner ul,
  .ar-body-inner ol {
    padding-left: 24px;
    margin-bottom: 28px;
  }
  .ar-body-inner li {
    font-size: 17px;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 8px;
    font-weight: 300;
  }
  .ar-body-inner blockquote {
    border-left: 3px solid var(--cyan);
    padding: 4px 0 4px 28px;
    margin: 44px 0;
    font-size: 21px;
    line-height: 1.6;
    color: var(--text);
    font-weight: 300;
  }
  .ar-body-inner strong { font-weight: 500; }
  .ar-body-inner a {
    color: var(--cyan);
    text-decoration: underline;
    text-decoration-color: rgba(70,128,194,0.4);
    transition: text-decoration-color 0.2s;
  }
  .ar-body-inner a:hover { text-decoration-color: var(--cyan); }
  .ar-body-inner hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 52px 0;
  }

  /* Related articles */
  .ar-related {
    background: var(--bg2);
    padding: 80px 60px;
    border-top: 1px solid var(--border);
  }
  .ar-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 40px;
  }

/* ══════════════════════════════════════════
   ARTICLE CARDS  (.ar-card)
   Used on hub, article page related section,
   and resources landing page
   ══════════════════════════════════════════ */

  .ar-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid transparent;
    padding: 32px;
    text-decoration: none;
    color: var(--text);
    position: relative;
    transition: border-color 0.25s, background 0.25s;
    overflow: hidden;
  }
  .ar-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  .ar-card:hover { border-color: var(--border); background: #111827; }
  .ar-card:hover::after { transform: scaleX(1); }
  .ar-card-topic {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 16px;
  }
  .ar-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: var(--text);
    margin-bottom: 14px;
  }
  .ar-card-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 24px;
    flex-grow: 1;
  }
  .ar-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 12px;
  }
  .ar-card-date {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--dim);
    text-transform: uppercase;
  }
  .ar-card-link {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ar-card:hover .ar-card-link { gap: 12px; }

/* ══════════════════════════════════════════
   ARTICLES HUB PAGE  (#articles-hub)
   ══════════════════════════════════════════ */

  #articles-hub { padding: 80px 60px; }
  .ar-filter-bar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .ar-filter-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 9px 20px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    border-radius: 0;
  }
  .ar-filter-btn:hover { border-color: var(--cyan); color: var(--cyan); }
  .ar-filter-btn.active { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
  .ar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
  .ar-empty {
    padding: 60px 0;
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

/* ══════════════════════════════════════════
   MOBILE: ARTICLES
   ══════════════════════════════════════════ */
  @media (max-width: 900px) {
    .ar-header { padding: 80px 24px 48px; }
    .ar-title { font-size: 36px; }
    .ar-body { padding: 48px 24px 64px; }
    .ar-body-inner { max-width: 100%; }
    .ar-body-inner p { font-size: 15px; }
    .ar-body-inner li { font-size: 15px; }
    .ar-body-inner h2 { font-size: 26px; margin-top: 36px; }
    .ar-body-inner h3 { font-size: 16px; }
    .ar-body-inner blockquote { font-size: 17px; }
    .ar-related { padding: 48px 24px; }
    .ar-related-grid { grid-template-columns: 1fr; }
    #articles-hub { padding: 48px 24px; }
    .ar-filter-bar { gap: 6px; margin-bottom: 40px; }
    .ar-filter-btn { padding: 8px 14px; font-size: 9px; }
    .ar-grid { grid-template-columns: 1fr; }
    .ar-empty { padding: 40px 0; }
  }

/* ── Products Hub ────────────────────────────────────────────────

   .prodh-* prefix — scoped to /products/ hub only.
   No impact on individual product pages (.ph-* classes).
─────────────────────────────────────────────────────────────── */

/* Hero */
.prodh-hero {
  padding: 6rem 2rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.prodh-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.prodh-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 1.5rem;
}

.prodh-hero-inner .section-label {
  justify-content:center; margin-bottom:1.25rem;
}

.prodh-hero-inner .cta-actions {justify-content:center;}
.prodh-hero p {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto 2rem;
}

/* Two-family divider */
.prodh-family-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

.prodh-family-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.875rem;
}

.prodh-family-head h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0;
}

.prodh-family-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.18);
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  white-space: nowrap;
}

.prodh-family-tag.prodh-tag-mgmt {
  color: var(--accent);
  background: rgba(0, 255, 204, 0.07);
  border-color: rgba(0, 255, 204, 0.18);
}

.prodh-family-intro {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 2.5rem;
  max-width: 640px;
}

/* Calibration product cards grid */
.prodh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 3rem;
}

.prodh-card {
  background: var(--bg2);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 0.2s ease;
}

.prodh-card:hover {
  background: var(--surface);
}

.prodh-card-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}

.prodh-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin: 0 0 0.75rem;
  line-height: 1;
}

.prodh-card-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 1.5rem;
  flex: 1;
}

.prodh-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.prodh-card-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--dim);
  padding: 0.18rem 0.4rem;
  border-radius: 2px;
}

.prodh-card-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s ease;
  margin-top: auto;
}

.prodh-card:hover .prodh-card-link {
  gap: 0.65rem;
}

/* Decision guide */
.prodh-guide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

.prodh-guide-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2.5rem;
}

.prodh-guide-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.prodh-guide-sub {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 2rem;
  line-height: 1.6;
}

.prodh-guide-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
}

.prodh-guide-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.prodh-guide-row:last-child {
  border-bottom: none;
}

.prodh-guide-q {
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.prodh-guide-q strong {
  font-weight: 500;
}

.prodh-guide-a {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  line-height: 1.55;
}

.prodh-guide-a a {
  color: var(--blue);
  text-decoration: none;
}

.prodh-guide-a a:hover {
  text-decoration: underline;
}

/* Commander — companion two-column layout */
.prodh-commander {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

/* 1/4 + 3/4 split, 1px gap-as-border matching the product cards grid */
.prodh-commander-split {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1px;
  background: var(--border);
}

/* Right column: features list + stat grid */
.prodh-commander-detail {
  background: var(--bg2);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
}

.prodh-commander-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prodh-commander-feat {
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.prodh-commander-feat::before {
  content: '—';
  color: var(--accent);
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.prodh-commander-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.prodh-commander-stat {
  background: var(--surface);
  padding: 1.1rem 1rem;
  text-align: center;
}

.prodh-commander-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.prodh-commander-stat-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

/* SDK callout */
.prodh-sdk {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

.prodh-sdk-inner {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.prodh-sdk-left {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.prodh-sdk-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}

.prodh-sdk-text {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.6;
}

.prodh-sdk-text strong {
  color: var(--text);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .prodh-commander-split {
    grid-template-columns: 1fr;
  }

  .prodh-commander-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .prodh-guide-row {
    grid-template-columns: 1fr;
  }

  .prodh-guide-q {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
  }

  .prodh-sdk-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Product Comparison Page ─────────────────────────────────────
   .pc-* prefix — scoped to /products/product-comparison/ only
─────────────────────────────────────────────────────────────── */

/* Overview section */
.pc-overview {
  background: var(--bg);
  padding: 80px 60px;
}

/* Pick cards grid */
.pc-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 48px;
}

.pc-pick-card {
  background: var(--surface);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  transition: background 0.2s ease;
  position: relative;
  overflow: hidden;
}

.pc-pick-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.pc-pick-card:hover { background: #111827; }
.pc-pick-card:hover::before { transform: scaleX(1); }

.pc-pick-if {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.pc-pick-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1;
}

.pc-pick-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  flex: 1;
}

.pc-pick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.pc-pick-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s ease;
}

.pc-pick-card:hover .pc-pick-link { gap: 0.65rem; }

/* Matrix section */
.pc-matrix-section {
  background: var(--bg2);
  padding: 80px 60px;
}

.pc-matrix-intro {
  margin-bottom: 48px;
}

/* Comparison table */
.pc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}

.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 700px;
}

.pc-table thead tr {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.pc-th-feature {
  text-align: left;
  padding: 1.25rem 1.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  width: 32%;
}

.pc-th-product {
  text-align: center;
  padding: 1.25rem 1rem;
  border-left: 1px solid var(--border);
  width: 17%;
}

.pc-th-product a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s;
}

.pc-th-product a:hover .pc-col-name { color: var(--cyan); }

.pc-col-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.1;
  text-align: center;
}

.pc-col-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Group header rows */
.pc-row-group td {
  padding: 0.875rem 1.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Data rows */
.pc-row {
  border-bottom: 1px solid rgba(74, 144, 255, 0.07);
  transition: background 0.15s ease;
}

.pc-row:hover { background: rgba(74, 144, 255, 0.03); }

.pc-feature {
  padding: 0.875rem 1.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 300;
}

.pc-val {
  padding: 0.875rem 1rem;
  text-align: center;
  border-left: 1px solid rgba(74, 144, 255, 0.07);
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.pc-val.pc-yes { color: var(--cyan); }
.pc-val.pc-no { color: var(--dim); }

.pc-table-note {
  margin-top: 1.25rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  line-height: 1.7;
  max-width: 780px;
}

/* Commander callout */
.pc-commander {
  background: var(--bg);
  padding: 80px 60px;
  border-top: 1px solid var(--border);
}

.pc-commander-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.pc-commander-body {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin: 16px 0 24px;
}

.pc-commander-features {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* CTA tweaks */
.pc-cta-label {
  justify-content: center;
}

.pc-cta-intro {
  text-align: center;
  margin: 20px auto 48px;
}

/* Responsive */
@media (max-width: 900px) {
  .pc-overview,
  .pc-matrix-section,
  .pc-commander {
    padding: 60px 24px;
  }

  .pc-picker {
    grid-template-columns: 1fr;
  }

  .pc-table-wrap {
    font-size: 0.8rem;
  }

  .pc-th-feature {
    width: 40%;
    padding: 1rem;
  }

  .pc-th-product {
    padding: 1rem 0.5rem;
  }

  .pc-feature {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
  }

  .pc-val {
    padding: 0.75rem 0.5rem;
    font-size: 0.7rem;
  }

  .pc-commander-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
/* ── Team Page ───────────────────────────────────────────────────
   .tm-* prefix — scoped to /company/team/ only
   Aesthetic: CRT terminal / scanline — fits the defense/simulation brand
─────────────────────────────────────────────────────────────── */

/* ── Hero background ── */
#page-header.ph-bg-team {
  background-image: url('../images/support-hero.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-bottom: none;
}

#page-header.ph-bg-team::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,8,15,0.95) 0%, rgba(6,8,15,0.75) 60%, rgba(6,8,15,0.5) 100%);
  z-index: 0;
}

#page-header.ph-bg-support {
  background-image: url('../images/support-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
}

#page-header.ph-bg-support::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,8,15,0.95) 0%, rgba(6,8,15,0.75) 60%, rgba(6,8,15,0.5) 100%);
  z-index: 0;
}

#page-header.ph-bg-commander {
  background-image: url('../images/commander-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
}

#page-header.ph-bg-commander::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.75) 60%, rgba(6,8,15,0.5) 100%);
  z-index: 0;
}

/* ── Section ── */
.tm-section {
  background: var(--bg);
  padding: 80px 60px 120px;
}

/* ── Grid ── */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 52px;
}

/* ── Card ── */
.tm-card {
  background: var(--bg2);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: background 0.2s ease;
  outline: none;
}

/* Cyan left-edge accent on hover/focus */
.tm-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--cyan);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.tm-card:hover,
.tm-card:focus {
  background: var(--surface);
}

.tm-card:hover::before,
.tm-card:focus::before {
  transform: scaleY(1);
}

/* ── Photo wrap ── */
.tm-photo-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Base photo — greyscale at rest */
.tm-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /*filter: grayscale(100%) brightness(0.85) sepia(20%) hue-rotate(160deg) saturate(300%);*/
  filter: grayscale(100%) brightness(0.85);
  transition: filter 0.4s ease;
}

.tm-card:hover .tm-photo,
.tm-card:focus .tm-photo {
  filter: grayscale(0%) brightness(1);
}

/* ── Cyan tint overlay — fades in on hover ── */
.tm-photo-glitch {
  position: absolute;
  inset: 0;
  background: rgba(0, 212, 255, 0.0);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  transition: background 0.3s ease;
}

.tm-card:hover .tm-photo-glitch,
.tm-card:focus .tm-photo-glitch {
  background: rgba(0, 212, 255, 0.08);
}

/* ── Corner bracket decorations ── */
.tm-photo-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tm-card:hover .tm-photo-corner,
.tm-card:focus .tm-photo-corner {
  opacity: 1;
}

.tm-photo-corner--tl {
  top: 3px; left: 3px;
  border-top: 1px solid var(--cyan);
  border-left: 1px solid var(--cyan);
}

.tm-photo-corner--tr {
  top: 3px; right: 3px;
  border-top: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
}

.tm-photo-corner--bl {
  bottom: 3px; left: 3px;
  border-bottom: 1px solid var(--cyan);
  border-left: 1px solid var(--cyan);
}

.tm-photo-corner--br {
  bottom: 3px; right: 3px;
  border-bottom: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
}

/* ── Body ── */
.tm-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.tm-nameplate {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.tm-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  color: var(--text);
  line-height: 1;
  transition: color 0.2s ease;
}

.tm-card:hover .tm-name,
.tm-card:focus .tm-name {
  color: var(--text);
}

.tm-role {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
  transition: color 0.2s ease;
}

.tm-card:hover .tm-role,
.tm-card:focus .tm-role {
  color: var(--cyan);
}

/* ── Bio — typewriter effect on hover ── */
.tm-bio {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
  /* Hidden at rest, revealed on hover via clip animation */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease 0.1s;
}

.tm-card:hover .tm-bio,
.tm-card:focus .tm-bio {
  max-height: 200px;
  opacity: 1;
}

/* ── Animated cursor blink after bio on hover ── */
.tm-card:hover .tm-bio::after,
.tm-card:focus .tm-bio::after {
  content: '█';
  font-size: 0.7rem;
  color: var(--cyan);
  margin-left: 2px;
  animation: tm-blink 1s step-end infinite;
  vertical-align: middle;
}

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

/* ── Bottom status bar — appears on hover ── */
.tm-card::after {
  content: 'CALIBRATING';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20px;
  background: rgba(0, 212, 255, 0.06);
  border-top: 1px solid rgba(0, 212, 255, 0.15);
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.75rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tm-card:hover::after,
.tm-card:focus::after {
  opacity: 1;
  transform: translateY(0);
}

/* ── CTA ── */
.tm-cta-label {
  justify-content: center;
}

.tm-cta-intro {
  text-align: center;
  margin: 0 auto 48px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .tm-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .tm-section {
    padding: 60px 24px 80px;
  }

  .tm-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* On touch devices show bio always since no hover */
  .tm-bio {
    max-height: 300px;
    opacity: 1;
  }

  #page-header.ph-bg-team::before {
    background: linear-gradient(to bottom, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.88) 100%);
  }
}

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

/* ── Support Hub Page ────────────────────────────────────────────
   .sup-* prefix — scoped to /support/ hub only
─────────────────────────────────────────────────────────────── */

/* ── Options section ── */
.sup-options {
  background: var(--bg);
  padding: 80px 60px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Knowledge base feature card ── */
.sup-kb-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sup-kb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.sup-kb-card:hover {
  border-color: rgba(70, 128, 194, 0.4);
  background: #111827;
}

.sup-kb-card:hover::before {
  transform: scaleX(1);
}

.sup-kb-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.sup-kb-left {
  padding: 2.75rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sup-kb-left h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 1rem;
  line-height: 1;
}

.sup-kb-desc {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 480px;
}

.sup-kb-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  transition: letter-spacing 0.2s ease;
}

.sup-kb-card:hover .sup-kb-link {
  letter-spacing: 0.15em;
}

.sup-kb-right {
  padding: 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.sup-kb-stat {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.sup-kb-stat:last-child {
  border-bottom: none;
}

.sup-kb-stat-icon {
  font-size: 0.875rem;
  color: var(--cyan);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sup-kb-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Secondary cards grid ── */
.sup-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
}

.sup-card {
  background: var(--bg2);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  transition: background 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sup-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.sup-card:hover {
  background: var(--surface);
}

.sup-card:hover::after {
  transform: scaleX(1);
}

/* Card accent colour variants */
.sup-card--cyan .sup-card-icon { color: var(--cyan); }
.sup-card--cyan::after { background: var(--cyan); }
.sup-card--cyan .sup-card-link { color: var(--cyan); }

.sup-card--blue .sup-card-icon { color: var(--blue); }
.sup-card--blue::after { background: var(--blue); }
.sup-card--blue .sup-card-link { color: var(--blue); }

.sup-card--accent .sup-card-icon { color: var(--accent); }
.sup-card--accent::after { background: var(--accent); }
.sup-card--accent .sup-card-link { color: var(--accent); }

.sup-card--amber .sup-card-icon { color: var(--amber); }
.sup-card--amber::after { background: var(--amber); }
.sup-card--amber .sup-card-link { color: var(--amber); }

.sup-card-icon {
  font-size: 1.25rem;
  color: var(--cyan);
  margin-bottom: 1rem;
  line-height: 1;
}

.sup-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1;
}

.sup-card-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  flex: 1;
}

.sup-card-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-top: auto;
  transition: letter-spacing 0.2s ease;
}

.sup-card:hover .sup-card-link {
  letter-spacing: 0.15em;
}

/* ── Contact & hours section ── */
.sup-contact {
  background: var(--bg2);
  padding: 80px 60px;
  border-bottom: 1px solid var(--border);
}

.sup-contact-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
}

.sup-contact-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 8px 0 16px;
}

.sup-contact-body {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 12px;
}

.sup-contact-note {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  line-height: 1.65;
  border-left: 2px solid var(--border);
  padding-left: 0.875rem;
  margin-top: 16px;
}

.sup-downloads-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sup-download-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
  margin-bottom: 8px;
}

.sup-download-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.sup-download-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sup-download-link:hover {
  color: var(--cyan);
}

/* Contact detail rows */
.sup-contact-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
}

.sup-contact-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.sup-contact-row:last-child {
  border-bottom: none;
}

.sup-contact-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.875rem 1rem;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.sup-contact-value {
  font-size: 0.875rem;
  color: var(--text);
  padding: 0.875rem 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

a.sup-contact-value:hover {
  color: var(--cyan);
}

/* Helpful links list */
.sup-links-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
}

.sup-link-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  font-size: 1.25rem;
  color: var(--muted);
  transition: color 0.2s ease, background 0.2s ease;
}

.sup-link-item:last-child {
  border-bottom: none;
}

.sup-link-item:hover {
  color: var(--cyan);
  background: rgba(70, 128, 194, 0.04);
}

.sup-link-arrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--cyan);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sup-link-item:hover .sup-link-arrow {
  transform: translateX(3px);
}

/* CTA overrides */
.sup-cta-label {
  justify-content: center;
}

.sup-cta-intro {
  text-align: center;
  margin: 0 auto 48px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .sup-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .sup-options {
    padding: 60px 24px 40px;
  }

  .sup-contact {
    padding: 60px 24px;
  }

  .sup-kb-inner {
    grid-template-columns: 1fr;
  }

  .sup-kb-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .sup-cards {
    grid-template-columns: 1fr;
  }

  .sup-contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── 404 Page ─────────────────────────────────────────────────────
   .e404-* prefix — scoped to 404.html only
   Aesthetic: calibration failure / signal lost
─────────────────────────────────────────────────────────────── */

/* ── Full-page wrapper ── */
.e404-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: 120px 60px 80px;
}

/* ── Animated dot grid background ── */
.e404-grid {
  position: absolute;
  inset: 0;
  background-image: none;
background-color: var(--bg);
background: 
  repeating-linear-gradient(
    transparent,
    transparent 20px,
    var(--bg) 20px,
    var(--bg) 40px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 30px,
    var(--bg) 30px,
    var(--bg) 50px
  );
background-color: rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

/* ── Corner bracket decorations ── */
.e404-corner {
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  animation: e404-corner-pulse 3s ease-in-out infinite;
}

.e404-corner--tl { top: 24px; left: 24px; border-top: 1px solid var(--cyan); border-left: 1px solid var(--cyan); }
.e404-corner--tr { top: 24px; right: 24px; border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); }
.e404-corner--bl { bottom: 24px; left: 24px; border-bottom: 1px solid var(--cyan); border-left: 1px solid var(--cyan); }
.e404-corner--br { bottom: 24px; right: 24px; border-bottom: 1px solid var(--cyan); border-right: 1px solid var(--cyan); }

@keyframes e404-corner-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ── Content ── */
.e404-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  gap: 0;
}

/* ── Status bar ── */
.e404-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2rem;
}

.e404-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4444;
  box-shadow: 0 0 8px #ff4444;
  animation: e404-dot-blink 1.2s step-end infinite;
  flex-shrink: 0;
}

@keyframes e404-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.e404-status-text {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff4444;
}

/* ── Large 404 number ── */
.e404-code {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 20vw, 220px);
  line-height: 0.85;
  letter-spacing: 0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(74, 144, 255, 0.8);
  position: relative;
  margin-bottom: 0.5rem;
  user-select: none;
}

/* ── Heading with glitch effect ── */
.e404-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 1.25rem;
  line-height: 1;
}

.e404-glitch {
  position: relative;
  display: inline-block;
}

.e404-glitch::before,
.e404-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.e404-glitch::before {
  color: var(--cyan);
  animation: e404-glitch-1 4s infinite;
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
}

.e404-glitch::after {
  color: #ff4444;
  animation: e404-glitch-2 4s infinite;
  clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
}

@keyframes e404-glitch-1 {
  0%, 85%, 100% { transform: translate(0); opacity: 0; }
  86% { transform: translate(-3px, 1px); opacity: 0.8; }
  88% { transform: translate(3px, -1px); opacity: 0.6; }
  90% { transform: translate(0); opacity: 0; }
  91% { transform: translate(-2px, 2px); opacity: 0.7; }
  93% { transform: translate(0); opacity: 0; }
}

@keyframes e404-glitch-2 {
  0%, 85%, 100% { transform: translate(0); opacity: 0; }
  87% { transform: translate(3px, 2px); opacity: 0.6; }
  89% { transform: translate(-3px, -2px); opacity: 0.8; }
  91% { transform: translate(0); opacity: 0; }
  92% { transform: translate(2px, -1px); opacity: 0.5; }
  94% { transform: translate(0); opacity: 0; }
}

/* ── Subtitle ── */
.e404-sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 2rem;
}

/* ── Terminal readout ── */
.e404-terminal {
  background: rgba(6, 8, 15, 0.8);
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.e404-terminal-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.e404-terminal-prompt {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.e404-terminal-cmd {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.e404-terminal-url {
  color: var(--text);
}

.e404-terminal-output {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.e404-terminal-error {
  color: #ff4444;
}

.e404-terminal-blink {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--cyan);
  animation: e404-cursor-blink 1s step-end infinite;
  margin-left: 4px;
}

@keyframes e404-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Actions ── */
.e404-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2.5rem;
}

/* ── Quick links ── */
.e404-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

.e404-links-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.e404-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.e404-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.e404-link:hover {
  color: var(--cyan);
  border-color: rgba(70, 128, 194, 0.4);
  background: rgba(70, 128, 194, 0.04);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .e404-wrap {
    padding: 100px 24px 60px;
  }

  .e404-corner {
    width: 20px;
    height: 20px;
  }

  .e404-actions {
    flex-direction: column;
    width: 100%;
  }

  .e404-actions .btn-primary,
  .e404-actions .btn-ghost {
    width: 100%;
    text-align: center;
  }

  .e404-terminal {
    overflow-x: auto;
  }
}

/* ── Company Page ────────────────────────────────────────────────
   .co-* prefix — scoped to /company/ only
─────────────────────────────────────────────────────────────── */

/* ── Hero background ── */
#page-header.ph-bg-company {
  background-image: url('../images/support-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
}

#page-header.ph-bg-company::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,8,15,0.96) 0%, rgba(6,8,15,0.8) 60%, rgba(6,8,15,0.5) 100%);
  z-index: 0;
}

#page-header.ph-bg-news {
  background-image: url('../images/support-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
}

#page-header.ph-bg-news::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,8,15,0.96) 0%, rgba(6,8,15,0.8) 60%, rgba(6,8,15,0.5) 100%);
  z-index: 0;
}

/* ── Origin section ── */
.co-origin {
  background: var(--bg);
  padding: 80px 60px 100px;
}

.co-origin-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.co-origin-text p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 18px;
  font-weight: 300;
}

.co-origin-text p:last-of-type {
  margin-bottom: 28px;
}

/* Timeline visual */
.co-origin-visual {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2.5rem;
  overflow: hidden;
}

.co-origin-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.co-origin-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}

.co-tl-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.co-tl-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.co-tl-year {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  color: var(--cyan);
  letter-spacing: 0.04em;
  line-height: 1;
}

.co-tl-event {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 300;
}

/* ── Technology section ── */
.co-tech {
  background: var(--bg2);
  padding: 80px 60px 100px;
  border-top: 1px solid var(--border);
}

.co-tech-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.co-tech-intro {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 3rem;
  max-width: 600px;
}

/* Process steps */
.co-tech-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 4rem;
}

.co-tech-step {
  background: var(--surface);
  padding: 2rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.co-tech-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: var(--cyan);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.5;
}

.co-tech-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.co-tech-body {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
}

/* Differentiators */
.co-tech-diff {
  border-top: 1px solid var(--border);
  padding-top: 3rem;
}

.co-tech-diff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 2rem;
}

.co-tech-diff-card {
  background: var(--bg2);
  padding: 1.75rem 1.5rem;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.co-tech-diff-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.co-tech-diff-card:hover {
  background: var(--surface);
  border-color: var(--border);
}

.co-tech-diff-card:hover::after {
  transform: scaleX(1);
}

.co-tech-diff-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1;
}

.co-tech-diff-body {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
}

/* ── Trusted by section ── */
.co-trusted {
  background: var(--bg);
  padding: 80px 60px 100px;
  border-top: 1px solid var(--border);
}

.co-trusted-intro {
  margin-bottom: 3rem;
}

.co-trusted-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
}

.co-trusted-sector {
  background: var(--surface);
  padding: 1.75rem;
}

.co-trusted-sector-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.co-trusted-clients {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.co-trusted-client {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 300;
  padding-left: 0.75rem;
  position: relative;
}

.co-trusted-client::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 3px;
  height: 3px;
  background: var(--dim);
  border-radius: 50%;
}

/* ── Patents section ── */
.co-patents {
  background: var(--bg2);
  padding: 80px 60px;
  border-top: 1px solid var(--border);
}

.co-patents-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.co-patents-body {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 16px;
  font-weight: 300;
}

.text-link-inline {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(70, 128, 194, 0.4);
  transition: text-decoration-color 0.2s ease;
}

.text-link-inline:hover {
  text-decoration-color: var(--cyan);
}

.co-patents-list-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.co-patent-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
}

.co-patent-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.co-patent-item:last-child {
  border-bottom: none;
}

.co-patent-item:hover {
  background: rgba(74, 144, 255, 0.03);
}

.co-patent-jurisdiction {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--cyan);
  background: rgba(70, 128, 194, 0.1);
  border: 1px solid rgba(70, 128, 194, 0.2);
  padding: 0.15rem 0.4rem;
  flex-shrink: 0;
}

.co-patent-number {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* ── Locations section ── */
.co-locations {
  background: var(--bg);
  padding: 80px 60px;
  border-top: 1px solid var(--border);
}

.co-locations-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 2.5rem;
}

.co-location-card {
  background: var(--surface);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.co-location-card--hq {
  background: var(--bg2);
}

.co-location-card--hq::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.co-location-card--hours {
  background: var(--bg2);
  justify-content: space-between;
}

.co-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  flex: 1;
}

.co-hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}

.co-hours-row:first-child {
  border-top: 1px solid var(--border);
}

.co-hours-day {
  font-size: 0.875rem;
  color: var(--text);
}

.co-hours-time {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--cyan);
  white-space: nowrap;
}

.co-hours-note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 20px;
}

.co-location-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.co-location-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
}

.co-location-detail {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
}

.co-location-contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.co-location-link {
  font-size: 0.875rem;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.co-location-link:hover {
  color: var(--cyan);
}

.co-location-hours {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 0.25rem;
}

/* ── Navigation cards ── */
.co-nav-section {
  background: var(--bg2);
  padding: 0;
  border-top: 1px solid var(--border);
}

.co-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.co-nav-card {
  background: var(--bg2);
  padding: 2.5rem 2rem;
  text-decoration: none;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background 0.2s ease;
  position: relative;
  overflow: hidden;
}

.co-nav-card:last-child {
  border-right: none;
}

.co-nav-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.co-nav-card:hover {
  background: var(--surface);
}

.co-nav-card:hover::after {
  transform: scaleX(1);
}

.co-nav-card-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.co-nav-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--text);
  line-height: 1;
}

.co-nav-card-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
  flex: 1;
}

.co-nav-card-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-top: 0.5rem;
  transition: letter-spacing 0.2s ease;
}

.co-nav-card:hover .co-nav-card-link {
  letter-spacing: 0.15em;
}

/* ── CTA overrides ── */
.co-cta-label {
  justify-content: center;
}

.co-cta-intro {
  text-align: center;
  margin: 0 auto 48px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .co-tech-diff-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .co-trusted-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .co-origin,
  .co-tech,
  .co-trusted,
  .co-patents,
  .co-locations {
    padding: 60px 24px;
  }

  .co-origin-inner,
  .co-patents-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .co-tech-steps {
    grid-template-columns: 1fr;
  }

  .co-tech-diff-grid {
    grid-template-columns: 1fr;
  }

  .co-trusted-grid {
    grid-template-columns: 1fr;
  }

  .co-locations-grid {
    grid-template-columns: 1fr;
  }

  .co-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .co-nav-card {
    border-bottom: 1px solid var(--border);
  }

  .co-nav-card:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  .co-nav-card:nth-child(even) {
    border-right: none;
  }

  #page-header.ph-bg-company::before {
    background: linear-gradient(to bottom, rgba(6,8,15,0.95) 0%, rgba(6,8,15,0.9) 100%);
  }
}

/* ── News Hub Page ───────────────────────────────────────────────
   .nw-* prefix — scoped to /company/news/ only
─────────────────────────────────────────────────────────────── */

.nw-section {
  background: var(--bg);
  padding: 80px 60px 120px;
}

/* Empty state */
.nw-empty {
  margin-top: 52px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 80px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.nw-empty-icon {
  font-size: 1.5rem;
  color: var(--dim);
}

.nw-empty-msg {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}

.nw-empty-sub {
  font-size: 0.9rem;
  color: var(--dim);
  line-height: 1.7;
  margin: 0;
  max-width: 420px;
}

/* CTA overrides */
.nw-cta-label {
  justify-content: center;
}

.nw-cta-intro {
  text-align: center;
  margin: 0 auto 48px;
}

@media (max-width: 900px) {
  .nw-section {
    padding: 60px 24px 80px;
  }

  .nw-empty {
    padding: 60px 24px;
  }
}

/* ============================================================
   CONTACT PAGE  (.ct-*)
   ============================================================ */

.ct-section {
  padding: 80px 48px 120px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.ct-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Left column */
.ct-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text);
  line-height: 1.05;
  margin: 0 0 20px;
}

.ct-intro {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 40px;
}

.ct-list {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ct-list-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ct-list-icon {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.ct-list-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

.ct-list-body {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}

.ct-direct {
  padding-top: 40px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-direct-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.ct-direct-link {
  font-size: 0.9rem;
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.2s;
}

.ct-direct-link:hover {
  color: var(--accent);
}

.ct-direct-address {
  font-size: 0.82rem;
  color: var(--dim);
  line-height: 1.6;
  margin: 8px 0 0;
}

/* Right column — form panel */
.ct-right {
  position: sticky;
  top: 100px;
  isolation: isolate;
}

/* Radar wireframe — decorative SVG, pulled from homepage project cards */
.ct-radar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.ct-form-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.ct-form-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(74,144,255,0.04);
}

.ct-form-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}

.ct-form-placeholder {
  padding: 64px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.ct-placeholder-icon {
  font-size: 2rem;
  color: var(--dim);
  line-height: 1;
}

.ct-placeholder-msg {
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}

.ct-placeholder-sub {
  font-size: 0.85rem;
  color: var(--dim);
  line-height: 1.7;
  margin: 0;
  max-width: 320px;
}

@media (max-width: 960px) {
  .ct-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ct-right {
    position: static;
  }
}

@media (max-width: 640px) {
  .ct-section {
    padding: 60px 24px 80px;
  }
}

/* ── Contact page hero background ── */
#page-header.ph-bg-contact {
  background-image: url('../images/contact-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
}

#page-header.ph-bg-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,8,15,0.95) 0%, rgba(6,8,15,0.75) 60%, rgba(6,8,15,0.5) 100%);
  z-index: 0;
}

@media (max-width: 900px) {
  #page-header.ph-bg-contact::before {
    background: linear-gradient(to bottom, rgba(6,8,15,0.95) 0%, rgba(6,8,15,0.88) 100%);
  }
}

/* ============================================================
   SCALABLE SDK PAGE  (.sdk-*)
   ============================================================ */

/* Header — no bg image, enhanced glow for atmosphere */
#page-header.sdk-header {
  border-bottom: 1px solid var(--border);
}

.sdk-header-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(74,144,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(0,212,255,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Integrations section */
.sdk-int-section {
  padding: 80px 60px 100px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 4-column grid — narrows on smaller viewports */
.sdk-int-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  margin-top: 48px;
}

/* Partner card */
.sdk-int-card {
  background: var(--surface);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  transition: background 0.2s ease;
  border: none;
}

.sdk-int-card:hover {
  background: var(--bg2);
}

/* Fixed-height logo container — object-fit: contain normalises all logo sizes */
.sdk-int-logo-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  padding: 8px 16px;
  box-sizing: border-box;
}

.sdk-int-logo-img {
  max-height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(0.9) saturate(0.7);
  transition: filter 0.2s ease;
  display: block;
}

.sdk-int-card:hover .sdk-int-logo-img {
  filter: brightness(1) saturate(1);
}

.sdk-int-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.sdk-int-desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .sdk-int-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .sdk-int-section {
    padding: 60px 24px 80px;
  }

  .sdk-int-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════
   SCALABLEDESKTOP PRODUCT PAGE
   ═══════════════════════════════════════════════════ */

#page-header.ph-bg-scalable-desktop {
  background-image: url('../images/scalable-desktop-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
}

#page-header.ph-bg-scalable-desktop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.75) 60%, rgba(6,8,15,0.5) 100%);
  z-index: 0;
}

/* ═══════════════════════════════════════════════════
   TECHNICAL RESOURCE LAYOUT  (layouts/technical-resource.njk)
   ═══════════════════════════════════════════════════ */

/* ── Topbar — visible "← Support" nav strip ── */
.tr-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 60px;
  height: 44px;
  background: var(--bg2);
  margin-top: 60px; /* clear fixed nav */
}

.tr-back-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--cyan);
  text-decoration: none;
  transition: opacity 0.15s;
}

.tr-back-link:hover {
  opacity: 0.75;
}

.tr-kb-link {
  margin-left: auto;
}

.tr-topbar-sep {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--dim);
}

/* ── Page Header ── */
.tr-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 52px 60px 48px;
}

/* When topbar is absent the header must clear the fixed nav itself */
.tr-header.tr-header-top {
  margin-top: 60px;
}

.tr-header-inner {
  max-width: 860px;
}

.tr-category {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}

.tr-category-link {
  color: var(--cyan);
  text-decoration: none;
}

.tr-category-link:hover {
  text-decoration: underline;
}

.tr-category-sep {
  color: var(--dim);
}

.tr-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.tr-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 680px;
}

.tr-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tr-meta-item {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--dim);
  letter-spacing: 0.04em;
}

.tr-meta-sep {
  color: var(--dim);
  font-size: 0.7rem;
}

.tr-header-cta {
  margin-top: 24px;
}

/* ── Two-column layout ── */
.tr-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: start;
  background: var(--bg);
}

/* ── Main content column ── */
.tr-body {
  padding: 60px 60px 100px;
  border-right: 1px solid var(--border);
  min-width: 0; /* prevent grid blowout */
}

.tr-body-inner {
  max-width: 720px;
}

/* ── Sidebar ── */
.tr-sidebar {
  padding: 48px 32px 60px;
  position: sticky;
  top: 80px; /* clear fixed nav */
}

.tr-sidebar-heading {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}

.tr-sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tr-sidebar-link {
  display: block;
  padding: 9px 12px;
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  line-height: 1.4;
  transition: border-color 0.15s, color 0.15s;
}

.tr-sidebar-link:hover {
  border-left-color: var(--cyan);
  color: var(--text);
  text-decoration: none;
}

.tr-sidebar-ext {
  font-size: 0.75em;
  opacity: 0.6;
}

/* ── Typography ── */
.tr-body-inner h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
  margin: 48px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}

.tr-body-inner h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin: 32px 0 10px;
}

.tr-body-inner p {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 16px;
}

.tr-body-inner ul,
.tr-body-inner ol {
  padding-left: 20px;
  margin: 0 0 16px;
}

.tr-body-inner li {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 6px;
}

.tr-body-inner a {
  color: var(--cyan);
  text-decoration: none;
}

.tr-body-inner a:hover {
  text-decoration: underline;
}

.tr-body-inner strong {
  color: var(--text);
  font-weight: 500;
}

.tr-body-inner code {
  font-family: 'DM Mono', monospace;
  font-size: 0.82em;
  color: var(--accent);
  background: rgba(0, 255, 204, 0.06);
  padding: 1px 5px;
  border-radius: 2px;
}

.tr-body-inner pre {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 0 0 24px;
}

.tr-body-inner pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text);
}

/* ── Tables ── */
.tr-body-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 32px;
  font-size: 0.875rem;
}

.tr-body-inner thead th {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--surface);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tr-body-inner tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.tr-body-inner tbody tr:last-child {
  border-bottom: none;
}

.tr-body-inner tbody tr:hover {
  background: var(--surface);
}

.tr-body-inner td {
  padding: 10px 16px;
  color: var(--muted);
  line-height: 1.5;
  vertical-align: top;
}

.tr-body-inner td:first-child {
  color: var(--text);
  font-weight: 500;
}

/* ── Note / callout box ── */
.tr-note {
  background: var(--surface);
  border-left: 3px solid var(--cyan);
  padding: 16px 20px;
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
}

.tr-note strong {
  color: var(--text);
}

/* ── Table alternating rows ── */
.tr-body-inner tbody tr:nth-child(even) {
  background: rgba(15, 21, 38, 0.6);
}

.tr-body-inner tbody tr:nth-child(even):hover {
  background: var(--surface);
}

/* ── Version group headings (h3 used for GPU compat groups) ── */
.tr-body-inner h2 + h3,
.tr-body-inner h3 {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 36px 0 10px;
  border: none;
}

.tr-body-inner h2 + h3 {
  margin-top: 20px;
}

.tr-body-inner h3 + ul {
  margin-top: 0;
}

/* ── PDF / file download link ── */
.tr-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 8px 14px;
  margin: 16px 0 32px;
  transition: border-color 0.15s, color 0.15s;
}

.tr-download::before {
  content: '↓';
  font-size: 0.9em;
}

.tr-download:hover {
  border-color: var(--cyan);
  color: var(--text);
}

/* ── Mobile / narrow ── */
@media (max-width: 900px) {
  .tr-layout {
    grid-template-columns: 1fr;
  }

  .tr-body {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .tr-sidebar {
    position: static;
    padding: 40px 24px 60px;
  }
}

@media (max-width: 768px) {
  .tr-topbar {
    padding: 0 24px;
  }

  .tr-header {
    padding: 40px 24px 36px;
  }

  .tr-body {
    padding: 40px 24px 80px;
  }

  .tr-body-inner table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   CONTACT FORM — Salesforce Web-to-Lead
   ============================================================ */

.contact-sdt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 28px 32px;
}

.contact-sdt label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 12px;
}

.contact-sdt label:first-of-type {
  margin-top: 0;
}

.contact-sdt input[type="text"],
.contact-sdt input[type="email"],
.contact-sdt textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.contact-sdt textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.contact-sdt input[type="text"]:focus,
.contact-sdt input[type="email"]:focus,
.contact-sdt textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(74, 144, 255, 0.15);
}

.contact-sdt .g-recaptcha {
  margin-top: 16px;
}

.contact-sdt-required {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
  margin: 4px 0 0;
}

.contact-sdt input[type="submit"] {
  margin-top: 16px;
  background: var(--cyan);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 36px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  align-self: flex-start;
}

.contact-sdt input[type="submit"]:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
}

.contact-sdt input[type="submit"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */

.ty-section {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px;
  background: var(--bg);
}

.ty-inner {
  max-width: 640px;
  text-align: center;
}

.ty-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 20px;
}

.ty-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 8vw, 80px);
  line-height: 1.0;
  color: var(--text);
  margin: 0 0 28px;
}

.ty-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 48px;
}

.ty-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   CAREERS PAGE
   ============================================================ */

/* ── Hero ── */
.car-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  padding: 120px 60px 80px;
  background-image: url('../images/support-hero.webp');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.car-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6,8,15,0.97) 0%, rgba(6,8,15,0.85) 55%, rgba(6,8,15,0.45) 100%);
  z-index: 0;
}

.car-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.car-hero-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.car-hero-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.0;
  color: var(--text);
  margin: 0;
}

.car-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  max-width: 520px;
}

/* ── Why Scalable ── */
.car-why {
  background: var(--bg2);
  padding: 100px 60px;
  text-align: center;
}

.car-why-inner {
  max-width: 900px;
  margin: 0 auto;
}

.car-why h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.0;
  color: var(--text);
  margin: 16px 0 28px;
}

.car-why-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 56px;
}

.car-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.car-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 20px;
  text-align: center;
}

.car-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--text);
  margin-bottom: 6px;
}

.car-stat-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Main two-column ── */
.car-main {
  background: var(--surface);
  padding: 80px 60px;
  border-top: 1px solid var(--border);
}

.car-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.48fr;
  gap: 60px;
  align-items: start;
}

/* ── Left column blocks ── */
.car-left {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.car-block h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--text);
  margin: 12px 0 28px;
  line-height: 1.0;
}

.car-block-intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.car-block-intro a {
  color: var(--blue);
}

.car-block-intro a:hover {
  color: var(--cyan);
}

/* Checklist */
.car-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.car-check-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.5;
}

.car-check-mark {
  color: var(--accent);
  font-size: 13px;
  flex-shrink: 0;
}

/* Job card */
.car-job-card {
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.car-job-header {
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--border);
}

.car-job-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 10px;
}

.car-job-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.car-job-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 10px;
}

.car-job-body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.car-job-body p {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
}

.car-job-body h4 {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: -8px;
}

.car-job-list {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.car-job-list li {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}

.car-job-apply {
  padding: 24px 32px 28px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.car-apply-note {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--dim);
  line-height: 1.6;
}

/* EEO */
.car-block-eeo {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}

.car-eeo-text {
  font-size: 13px;
  font-weight: 300;
  color: var(--dim);
  line-height: 1.75;
}

.car-eeo-text a {
  color: var(--muted);
}

.car-eeo-text a:hover {
  color: var(--cyan);
}

/* ── Right column — image stack ── */
.car-right {
  position: sticky;
  top: 80px;
}

.car-img-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.car-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.car-photo {
  filter: grayscale(100%) sepia(20%) hue-rotate(180deg) brightness(0.85);
  transition: filter 0.4s ease;
}

.car-photo:hover {
  filter: none;
}

/* ── Mobile ── */
@media (max-width: 1024px) {
  .car-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .car-hero {
    padding: 100px 24px 60px;
    min-height: 480px;
  }

  .car-why {
    padding: 60px 24px;
  }

  .car-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .car-main {
    padding: 60px 24px;
  }

  .car-main-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .car-right {
    position: static;
    order: 2;
  }

  .car-checklist {
    grid-template-columns: 1fr;
  }

  .car-job-header,
  .car-job-body,
  .car-job-apply {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .car-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   NEWS HUB & NEWS POST PAGES
   ============================================================ */

/* ── Hub section wrapper ── */
.news-hub-section {
  background: var(--bg);
  padding: 60px 60px 80px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Filter bar ── */
.news-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.news-filter-btn {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.news-filter-btn:hover {
  color: var(--text);
  border-color: rgba(74,144,255,0.4);
}

.news-filter-btn.active {
  color: var(--bg);
  background: var(--cyan);
  border-color: var(--cyan);
}

/* ── News grid ── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── News card ── */
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}

.news-card:hover {
  border-color: rgba(74,144,255,0.4);
  transform: translateY(-2px);
}

.news-card--featured {
  border-color: rgba(74,144,255,0.3);
}

.news-card-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg2);
}

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

.news-card:hover .news-card-thumb img {
  transform: scale(1.03);
}

.news-card-thumb--empty {
  background: var(--bg2);
}

.news-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.news-card-cat {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid currentColor;
}

/* Category colour variants */
.news-cat-company-update {
  color: var(--blue);
}

.news-cat-project-news {
  color: var(--accent);
}

.news-card-date {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.05em;
}

.news-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  line-height: 1.15;
  color: var(--text);
}

.news-card-blurb {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}

.news-card-link {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
  margin-top: 4px;
}

/* ── News post page ── */

/* Category tag in hero header */
.news-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.news-category-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border: 1px solid currentColor;
}

.news-category-tag.news-cat-company-update {
  color: var(--blue);
}

.news-category-tag.news-cat-project-news {
  color: var(--accent);
}

.news-meta-date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
}

/* Info strip (client / location / market / products) */
.news-info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

.news-info-item {
  display: flex;
  flex-direction: column;
  padding: 20px 36px;
  border-right: 1px solid var(--border);
}

.news-info-item:last-child {
  border-right: none;
}

.news-info-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-bottom: 4px;
}

.news-info-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

/* Body content */
.news-body {
  background: var(--bg);
  padding: 72px 60px 80px;
}

.news-body-inner {
  max-width: 760px;
  margin: 0 auto;
}

.news-body-inner p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 20px;
}

.news-body-inner h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: var(--text);
  margin: 40px 0 16px;
}

.news-body-inner h3 {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin: 32px 0 12px;
}

.news-body-inner ul,
.news-body-inner ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

.news-body-inner li {
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 6px;
}

.news-body-inner a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-body-inner a:hover {
  color: var(--cyan);
}

.news-body-inner strong {
  font-weight: 500;
  color: var(--text);
}

.news-body-inner img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px auto;
  border: 1px solid var(--border);
}

.news-body-inner figure {
  margin: 32px 0;
}

.news-body-inner figcaption {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* External links section */
.news-ext-links {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 40px 60px;
}

.news-ext-links-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.news-ext-heading {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  flex-shrink: 0;
}

.news-ext-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.news-ext-link {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s;
}

.news-ext-link:hover {
  color: var(--cyan);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .news-hub-section {
    padding: 40px 24px 60px;
  }

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

  .news-body {
    padding: 48px 24px 60px;
  }

  .news-ext-links {
    padding: 32px 24px;
  }

  .news-info-item {
    padding: 16px 24px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHOWCASE
   ───────────────────────────────────────────────────────────────────────────── */

/* Hub — page header */
.sc-header {
  padding: 120px 60px 56px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.sc-header-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.sc-header-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.sc-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: var(--text);
  line-height: 1;
  margin: 0 0 16px;
}
.sc-header-intro {
  font-size: 16px;
  color: var(--muted);
  font-weight: 300;
  max-width: 560px;
}

/* Hub — filter bar */
.sc-filter-bar {
  padding: 20px 60px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sc-filter-btn {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.sc-filter-btn:hover,
.sc-filter-btn.active {
  color: var(--cyan);
  border-color: var(--cyan);
}

/* Hub — grid */
.sc-grid-section {
  background: var(--bg);
  padding: 3px;
}
.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  max-width: 1800px;
  margin: 0 auto;
}

/* Hub — card */
.sc-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  /* staggered fade-up on load */
  opacity: 0;
  animation: sc-fadein 0.5s ease forwards;
}

@keyframes sc-fadein {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger delays — 60ms per card, capped at 24 */
.sc-card:nth-child(1)  { animation-delay: 0ms; }
.sc-card:nth-child(2)  { animation-delay: 60ms; }
.sc-card:nth-child(3)  { animation-delay: 120ms; }
.sc-card:nth-child(4)  { animation-delay: 180ms; }
.sc-card:nth-child(5)  { animation-delay: 240ms; }
.sc-card:nth-child(6)  { animation-delay: 300ms; }
.sc-card:nth-child(7)  { animation-delay: 360ms; }
.sc-card:nth-child(8)  { animation-delay: 420ms; }
.sc-card:nth-child(9)  { animation-delay: 480ms; }
.sc-card:nth-child(10) { animation-delay: 540ms; }
.sc-card:nth-child(11) { animation-delay: 600ms; }
.sc-card:nth-child(12) { animation-delay: 660ms; }
.sc-card:nth-child(13) { animation-delay: 720ms; }
.sc-card:nth-child(14) { animation-delay: 780ms; }
.sc-card:nth-child(15) { animation-delay: 840ms; }
.sc-card:nth-child(16) { animation-delay: 900ms; }
.sc-card:nth-child(17) { animation-delay: 960ms; }
.sc-card:nth-child(18) { animation-delay: 1020ms; }
.sc-card:nth-child(19) { animation-delay: 1080ms; }
.sc-card:nth-child(20) { animation-delay: 1140ms; }
.sc-card:nth-child(21) { animation-delay: 1200ms; }
.sc-card:nth-child(22) { animation-delay: 1260ms; }
.sc-card:nth-child(23) { animation-delay: 1320ms; }
.sc-card:nth-child(n+24) { animation-delay: 1380ms; }

.sc-card--featured {
  grid-column: span 2;
}

/* Card image container */
.sc-card-fig {
  width: 100%;
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  margin: 0;
}
.sc-card--featured .sc-card-fig {
  aspect-ratio: 16/9;
}

/* Image — extra height for parallax room; parallax offset via --parallax CSS var */
.sc-card-img {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: calc(100% + 40px);
  object-fit: cover;
  object-position: center;
  filter: brightness(0.88);
  transform: scale(1) translateY(var(--parallax, 0px));
  transition: transform 0.2s ease, filter 0.35s ease;
  will-change: transform;
}
.sc-card:hover .sc-card-img {
  transform: scale(1.04) translateY(var(--parallax, 0px));
  filter: brightness(1);
  transition: transform 0.5s ease, filter 0.35s ease;
}

/* Card overlay — slides up on hover */
.sc-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.45) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
}
.sc-card:hover .sc-card-overlay {
  opacity: 1;
  transform: translateY(0);
}
.sc-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 3px;
}
.sc-card--featured .sc-card-name {
  font-size: 28px;
}
.sc-card-client {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 9px;
}
.sc-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.sc-card-tag {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(232,237,245,0.7);
  border: 1px solid rgba(74,144,255,0.3);
  padding: 3px 7px;
  background: rgba(6,8,15,0.5);
}

/* Hub — empty state */
.sc-empty {
  grid-column: 1 / -1;
  padding: 80px 40px;
  text-align: center;
}
.sc-empty-msg {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Mobile — always show overlay since hover doesn't exist */
@media (hover: none) {
  .sc-card-overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Individual entry page ── */
.sc-entry-header {
  padding: 120px 60px 56px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.sc-entry-header-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.sc-entry-back {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 32px;
  transition: color 0.2s;
}
.sc-entry-back:hover { color: var(--cyan); }
.sc-entry-market {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.sc-entry-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 60px;
  color: var(--text);
  line-height: 1;
  margin: 0 0 8px;
}
.sc-entry-client {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.sc-entry-products {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sc-entry-product-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 5px 12px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.sc-entry-product-tag:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}
.sc-entry-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--border);
}
.sc-entry-body {
  background: var(--bg);
  padding: 72px 60px;
}
.sc-entry-body-inner {
  max-width: 760px;
  margin: 0 auto;
}
.sc-entry-body-inner p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 20px;
}
.sc-entry-body-inner h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: var(--text);
  margin: 40px 0 16px;
}
.sc-entry-body-inner h3 {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin: 32px 0 12px;
}
.sc-entry-body-inner a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sc-entry-body-inner strong {
  font-weight: 500;
  color: var(--text);
}
.sc-entry-body-inner img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px auto;
  border: 1px solid var(--border);
}

/* Mobile direct nav link (no dropdown trigger) */
.nav-mobile-direct {
  display: block;
  padding: 14px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.nav-mobile-direct:hover { color: var(--cyan); }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .sc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sc-card--featured {
    grid-column: span 2;
  }
}

@media (max-width: 1024px) {
  .sc-header,
  .sc-entry-header,
  .sc-entry-body {
    padding-left: 40px;
    padding-right: 40px;
  }
  .sc-filter-bar {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 768px) {
  .sc-grid {
    grid-template-columns: 1fr;
  }
  .sc-card--featured {
    grid-column: span 1;
  }
  .sc-card--featured .sc-card-fig {
    aspect-ratio: 4/3;
  }
  .sc-header,
  .sc-entry-header,
  .sc-entry-body {
    padding-left: 24px;
    padding-right: 24px;
  }
  .sc-filter-bar {
    padding-left: 24px;
    padding-right: 24px;
  }
  .sc-header h1 {
    font-size: 56px;
  }
  .sc-entry-title {
    font-size: 40px;
  }
  .sc-entry-hero {
    aspect-ratio: 4/3;
  }
  .sc-entry-body {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}