:root {
      --teal:     #00c9a7;
      --deep:     #004d40;
      --accent:   #69f0ae;
      --blue:     #0077b6;
      --light:    #e0f7fa;
      --dark:     #011c2e;
      --card-bg:  #062a3a;
      --text:     #cce8ef;
      --white:    #ffffff;
      --orange:   #ff8f00;
    }

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

    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background: var(--dark);
      color: var(--text);
      overflow-x: hidden;
    }

    /* --- SCROLLBAR --- */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--dark); }
    ::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 4px; }

    /* --- HERO --- */
    header {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 60%, #003d30 0%, #011c2e 70%);
      padding: 40px 20px;
    }

    /* Animated bubbles */
    .bubbles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .bubble {
      position: absolute;
      bottom: -60px;
      border-radius: 50%;
      background: rgba(0,201,167,.18);
      border: 1px solid rgba(0,201,167,.35);
      animation: rise linear infinite;
    }
    @keyframes rise {
      0%   { transform: translateY(0) scale(1);   opacity: .8; }
      100% { transform: translateY(-110vh) scale(1.4); opacity: 0; }
    }

    /* Aquarium tank SVG decoration */
    .tank-wrap {
      position: relative;
      width: min(340px, 90vw);
      margin: 0 auto 30px;
    }
    .tank {
      width: 100%;
      filter: drop-shadow(0 0 30px rgba(0,201,167,.5));
    }
    #pricing { background: var(--dark); }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .pricing-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
    }
    .pricing-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .pricing-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- SEGMENTS --- */
    #segments { background: #051e2c; }
    .segment-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .segment-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
      border-left: 4px solid var(--blue);
    }
    .segment-card h3 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .segment-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- COMPETITION --- */
    #competition { background: var(--dark); }
    .comp-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .comp-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
    }
    .comp-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .comp-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- INVESTOR --- */
    #investor { background: #051e2c; }
    .investor-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .investor-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
      border-top: 4px solid var(--teal);
    }
    .investor-card h3 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .investor-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- UNIT ECONOMICS --- */
    #economics { background: var(--dark); }
    .economics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .economics-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
    }
    .economics-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .economics-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- PILOT KPI --- */
    #kpi { background: #051e2c; }
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .kpi-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
      border-left: 4px solid var(--teal);
    }
    .kpi-card h3 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .kpi-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- RISK REGISTER --- */
    #risks { background: var(--dark); }
    .risk-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .risk-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
    }
    .risk-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .risk-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- IMPLEMENTATION TIMELINE --- */
    #timeline { background: #051e2c; }
    .timeline-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .timeline-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
      border-top: 4px solid var(--blue);
    }
    .timeline-card h3 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .timeline-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- CANADA PATHWAY --- */
    #canada { background: var(--dark); }
    .canada-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .canada-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
      border-left: 4px solid var(--teal);
    }
    .canada-card h3 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .canada-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }
    /* --- QUEBEC PILOTS --- */
    #pilots { background: #051e2c; }
    .pilot-sites-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .pilot-site-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
      border-top: 4px solid var(--teal);
    }
    .pilot-site-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .pilot-site-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- QUEBEC MATRICES AND CHECKLISTS --- */
    #matrix { background: var(--dark); }
    #usecases { background: #051e2c; }
    #checklist { background: var(--dark); }
    .checklist-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .check-card {
      background: var(--card-bg);
      border-radius: 16px;
      border: 1px solid rgba(0,201,167,.15);
      padding: 24px 22px;
      border-left: 4px solid var(--blue);
    }
    .check-card h3 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .check-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* Animated water fill inside tank */
    .water-wave {
      animation: sway 3s ease-in-out infinite alternate;
      transform-origin: center bottom;
    }
    @keyframes sway {
      from { transform: scaleX(1) translateX(0px); }
      to   { transform: scaleX(1.03) translateX(-5px); }
    }

    header h1 {
      font-size: clamp(2rem, 6vw, 4rem);
      font-weight: 800;
      background: linear-gradient(135deg, var(--teal), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 1px;
      line-height: 1.1;
    }
    header p.tagline {
      margin-top: 14px;
      font-size: clamp(1rem, 2.5vw, 1.3rem);
      color: #a8d5e2;
      max-width: 620px;
      line-height: 1.7;
    }
    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 24px;
    }
    .badge {
      background: rgba(0,201,167,.15);
      border: 1px solid var(--teal);
      color: var(--accent);
      padding: 6px 16px;
      border-radius: 20px;
      font-size: .85rem;
      font-weight: 600;
      letter-spacing: .5px;
    }
    .cta-btn {
      display: inline-block;
      margin-top: 32px;
      padding: 14px 38px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      color: var(--white);
      font-size: 1.05rem;
      font-weight: 700;
      border-radius: 30px;
      text-decoration: none;
      letter-spacing: .5px;
      box-shadow: 0 6px 24px rgba(0,201,167,.4);
      transition: transform .2s, box-shadow .2s;
    }
    .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,201,167,.55); }

    /* --- SECTIONS --- */
    section { padding: 80px 20px; }
    .section-inner { max-width: 1100px; margin: 0 auto; }
    .section-tag {
      display: inline-block;
      color: var(--teal);
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    h2 {
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      font-weight: 800;
      color: var(--white);
      margin-bottom: 16px;
      line-height: 1.2;
    }
    h2 span { color: var(--teal); }
    .lead {
      font-size: 1.05rem;
      color: #a8d5e2;
      max-width: 700px;
      line-height: 1.8;
      margin-bottom: 48px;
    }

    /* --- HOW IT WORKS --- */
    #how { background: #051e2c; }
    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 24px;
      counter-reset: step;
    }
    .step-card {
      background: var(--card-bg);
      border: 1px solid rgba(0,201,167,.2);
      border-radius: 16px;
      padding: 28px 22px;
      position: relative;
      transition: transform .25s, border-color .25s;
      counter-increment: step;
    }
    .step-card::before {
      content: counter(step, decimal-leading-zero);
      position: absolute;
      top: 20px; right: 20px;
      font-size: 2.4rem;
      font-weight: 900;
      color: rgba(0,201,167,.12);
      line-height: 1;
    }
    .step-card:hover { transform: translateY(-5px); border-color: var(--teal); }
    .step-icon {
      font-size: 2rem;
      margin-bottom: 14px;
    }
    .step-card h3 { color: var(--accent); font-size: 1.05rem; margin-bottom: 8px; font-weight: 700; }
    .step-card p  { font-size: .9rem; color: #88bfcc; line-height: 1.7; }

    /* --- MACHINE DESIGN --- */
    #machine { background: var(--dark); }
    .machine-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
    @media(max-width:700px){ .machine-layout { grid-template-columns: 1fr; } }

    .machine-svg-wrap {
      display: flex;
      justify-content: center;
    }
    .machine-svg-wrap svg {
      width: min(380px,90vw);
      filter: drop-shadow(0 0 40px rgba(0,119,182,.4));
    }

    .machine-specs h3 { color: var(--teal); font-size: 1.1rem; margin: 20px 0 8px; font-weight: 700; }
    .spec-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,.07);
      font-size: .9rem;
    }
    .spec-row span:first-child { color: #88bfcc; }
    .spec-row span:last-child  { color: var(--white); font-weight: 600; }

    /* --- ALGAE SPECIES --- */
    #algae { background: #051e2c; }
    .algae-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
    }
    .algae-card {
      background: var(--card-bg);
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(0,201,167,.15);
      transition: transform .25s;
    }
    .algae-card:hover { transform: translateY(-5px); }
    .algae-header {
      padding: 20px;
      display: flex;
      gap: 14px;
      align-items: center;
    }
    .algae-icon {
      width: 56px; height: 56px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem;
      flex-shrink: 0;
    }
    .algae-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
    .algae-card .sci { font-size: .78rem; color: var(--teal); font-style: italic; }
    .algae-body { padding: 0 20px 20px; }
    .tox-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }
    .tox-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .6px;
      text-transform: uppercase;
      border: 1px solid transparent;
    }
    .tox-badge.low {
      color: #8ff7c1;
      background: rgba(105,240,174,.12);
      border-color: rgba(105,240,174,.35);
    }
    .tox-badge.moderate {
      color: #ffd180;
      background: rgba(255,143,0,.12);
      border-color: rgba(255,143,0,.35);
    }
    .tox-note {
      font-size: .78rem;
      color: #7db1be;
      line-height: 1.5;
    }
    .pill-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .pill {
      background: rgba(0,201,167,.1);
      border: 1px solid rgba(0,201,167,.25);
      color: var(--accent);
      font-size: .75rem;
      padding: 3px 10px;
      border-radius: 12px;
      font-weight: 600;
    }
    .algae-desc { font-size: .875rem; color: #88bfcc; line-height: 1.65; }

    /* --- METHODS --- */
    #methods { background: var(--dark); }
    .methods-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 32px;
    }
    .tab-btn {
      padding: 8px 20px;
      border-radius: 20px;
      border: 1px solid rgba(0,201,167,.3);
      background: transparent;
      color: #88bfcc;
      font-size: .88rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
    }
    .tab-btn.active, .tab-btn:hover {
      background: var(--teal);
      border-color: var(--teal);
      color: var(--dark);
    }
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .method-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .method-item {
      background: var(--card-bg);
      border-left: 4px solid var(--teal);
      border-radius: 10px;
      padding: 18px 20px;
    }
    .method-item h4 { color: var(--accent); font-size: .95rem; margin-bottom: 6px; font-weight: 700; }
    .method-item p  { font-size: .875rem; color: #88bfcc; line-height: 1.65; }

    /* --- NUTRIENT TABLE --- */
    #nutrients { background: #051e2c; }
    .nt-table-wrap { overflow-x: auto; }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .9rem;
    }
    thead tr { background: rgba(0,201,167,.12); }
    th {
      text-align: left;
      padding: 14px 16px;
      color: var(--teal);
      font-size: .78rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      border-bottom: 2px solid rgba(0,201,167,.25);
    }
    td {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,.05);
      color: #c5dde5;
    }
    tr:hover td { background: rgba(0,201,167,.06); }
    .bar-cell { display: flex; align-items: center; gap: 10px; }
    .bar-bg {
      flex: 1;
      height: 8px;
      background: rgba(255,255,255,.08);
      border-radius: 4px;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--teal), var(--accent));
    }

    /* --- WATER QUALITY --- */
    #quality { background: var(--dark); }
    .quality-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }
    .quality-card {
      background: var(--card-bg);
      border-radius: 14px;
      padding: 24px 18px;
      text-align: center;
      border: 1px solid rgba(255,255,255,.07);
      transition: border-color .25s;
    }
    .quality-card:hover { border-color: var(--teal); }
    .q-value {
      font-size: 2.2rem;
      font-weight: 900;
      background: linear-gradient(135deg, var(--teal), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 6px;
    }
    .q-label { font-size: .8rem; color: #88bfcc; text-transform: uppercase; letter-spacing: 1px; }
    .q-desc  { font-size: .8rem; color: #5a8a96; margin-top: 6px; }

    /* --- DISTRIBUTION SYSTEM --- */
    #distribution { background: #051e2c; }
    .dist-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 24px;
    }
    .dist-card {
      background: var(--card-bg);
      border-radius: 16px;
      padding: 26px 22px;
      border-top: 4px solid var(--blue);
      transition: transform .25s;
    }
    .dist-card:hover { transform: translateY(-4px); }
    .dist-card .d-icon { font-size: 2rem; margin-bottom: 12px; }
    .dist-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .dist-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.65; }

    /* --- SAFETY --- */
    #safety { background: var(--dark); }
    .safety-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
      gap: 20px;
    }
    .safety-card {
      display: flex;
      gap: 14px;
      padding: 20px;
      background: var(--card-bg);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.07);
    }
    .s-icon {
      font-size: 1.7rem;
      flex-shrink: 0;
    }
    .safety-card h4 { color: var(--accent); font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
    .safety-card p  { font-size: .85rem; color: #88bfcc; line-height: 1.6; }

    /* --- MAINTENANCE --- */
    #maintenance { background: #051e2c; }
    .maint-timeline { position: relative; padding-left: 36px; }
    .maint-timeline::before {
      content: '';
      position: absolute;
      left: 10px; top: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--teal), var(--blue));
    }
    .maint-item {
      position: relative;
      margin-bottom: 30px;
    }
    .maint-item::before {
      content: '';
      position: absolute;
      left: -30px; top: 6px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--teal);
      border: 2px solid var(--dark);
      box-shadow: 0 0 10px var(--teal);
    }
    .maint-item h4 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
    .maint-item p  { font-size: .875rem; color: #88bfcc; line-height: 1.65; }
    .maint-freq {
      display: inline-block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--orange);
      border: 1px solid var(--orange);
      border-radius: 10px;
      padding: 2px 8px;
      margin-bottom: 6px;
    }

    /* --- FAQ --- */
    #faq { background: var(--dark); }
    .faq-item {
      background: var(--card-bg);
      border-radius: 12px;
      margin-bottom: 14px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.06);
    }
    .faq-q {
      padding: 18px 22px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      color: var(--white);
      font-size: .95rem;
      user-select: none;
    }
    .faq-q .arrow {
      font-size: .7rem;
      color: var(--teal);
      transition: transform .3s;
    }
    .faq-item.open .faq-q .arrow { transform: rotate(180deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .35s;
      padding: 0 22px;
      font-size: .88rem;
      color: #88bfcc;
      line-height: 1.75;
    }
    .faq-item.open .faq-a { max-height: 400px; padding: 0 22px 18px; }

    /* --- FOOTER --- */
    footer {
      background: #030f17;
      text-align: center;
      padding: 40px 20px;
      font-size: .85rem;
      color: #3a6a7a;
      border-top: 1px solid rgba(0,201,167,.12);
    }
    footer span { color: var(--teal); }

    /* --- NAV --- */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(3,15,23,.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,201,167,.1);
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 58px;
    }
    .nav-logo {
      font-weight: 900;
      font-size: 1.15rem;
      background: linear-gradient(135deg, var(--teal), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 1px;
    }
    .nav-links { display: flex; gap: 20px; }
    .nav-links a {
      color: #88bfcc;
      text-decoration: none;
      font-size: .83rem;
      font-weight: 600;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--teal); }
    @media(max-width:600px){ .nav-links { display: none; } }

    /* --- ELECTRONIC DESIGN --- */
    #design { background: #051e2c; }
    .design-diagram {
      margin: 0 0 32px;
      padding: 18px;
      background: rgba(6,42,58,.8);
      border: 1px solid rgba(0,201,167,.18);
      border-radius: 18px;
      overflow-x: auto;
    }
    .design-diagram svg {
      width: 100%;
      min-width: 880px;
      height: auto;
      display: block;
    }
    .signal-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 14px;
    }
    .signal-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      font-size: .78rem;
      color: #a8d5e2;
    }
    .signal-line {
      width: 28px;
      height: 0;
      border-top: 3px solid var(--teal);
      border-radius: 2px;
      flex-shrink: 0;
    }
    .signal-line.power { border-top-color: #00c9a7; }
    .signal-line.analog { border-top-color: #26d9e0; border-top-style: dashed; }
    .signal-line.logic { border-top-color: #69f0ae; }
    .signal-line.alert { border-top-color: #ff8f00; }
    .design-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }
    .design-card {
      background: var(--card-bg);
      border-radius: 16px;
      padding: 24px 22px;
      border: 1px solid rgba(0,201,167,.15);
      transition: transform .25s, border-color .25s;
    }
    .design-card:hover { transform: translateY(-4px); border-color: var(--teal); }
    .design-kicker {
      display: inline-block;
      margin-bottom: 10px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: var(--dark);
      background: var(--teal);
    }
    .design-card h3 { color: var(--white); font-size: 1.02rem; font-weight: 700; margin-bottom: 10px; }
    .design-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.7; }
    .design-specs {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }
    .design-spec {
      background: rgba(6,42,58,.9);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 18px 18px 16px;
    }
    .design-spec h4 {
      color: var(--accent);
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .design-spec p {
      font-size: .84rem;
      color: #88bfcc;
      line-height: 1.65;
      margin-bottom: 8px;
    }
    .design-spec p:last-child { margin-bottom: 0; }
    .connector-map {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }
    .connector-card {
      background: rgba(6,42,58,.9);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 18px;
    }
    .connector-card h4 {
      color: var(--teal);
      font-size: .95rem;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .connector-card p {
      font-size: .84rem;
      color: #88bfcc;
      line-height: 1.65;
      margin-bottom: 8px;
    }
    .connector-card p:last-child { margin-bottom: 0; }
    .fmea-wrap {
      margin-top: 30px;
      overflow-x: auto;
      background: rgba(6,42,58,.9);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      padding: 8px;
    }

    /* --- MANUFACTURING --- */
    #manufacturing { background: var(--dark); }
    .mfg-timeline { position: relative; padding-left: 80px; }
    .mfg-timeline::before {
      content: '';
      position: absolute;
      left: 34px; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(to bottom, var(--teal), var(--blue), var(--teal));
    }
    .mfg-step {
      position: relative;
      margin-bottom: 36px;
    }
    .mfg-number {
      position: absolute;
      left: -68px; top: 0;
      width: 48px; height: 48px;
      background: var(--card-bg);
      border: 2px solid var(--teal);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; font-weight: 900;
      color: var(--teal);
      box-shadow: 0 0 18px rgba(0,201,167,.3);
      z-index: 1;
    }
    .mfg-content {
      background: var(--card-bg);
      border: 1px solid rgba(0,201,167,.15);
      border-radius: 14px;
      padding: 24px;
      transition: border-color .25s, transform .25s;
    }
    .mfg-content:hover { border-color: var(--teal); transform: translateY(-3px); }
    .mfg-content h3 { color: var(--accent); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
    .mfg-content p  { font-size: .875rem; color: #88bfcc; line-height: 1.7; }
    @media(max-width:600px) {
      .mfg-timeline { padding-left: 50px; }
      .mfg-number { left: -44px; width: 36px; height: 36px; font-size: .85rem; }
      .mfg-timeline::before { left: 12px; }
    }

    /* --- SUSTAINABILITY --- */
    #sustainability { background: #051e2c; }
    .sust-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }
    .sust-card {
      background: var(--card-bg);
      border-radius: 16px;
      padding: 28px 22px;
      border: 1px solid rgba(0,201,167,.15);
      transition: transform .25s, border-color .25s;
    }
    .sust-card:hover { transform: translateY(-5px); border-color: var(--teal); }
    .sust-icon { font-size: 2rem; margin-bottom: 12px; }
    .sust-card h3 { color: var(--accent); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
    .sust-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.7; }

    /* --- REFERENCES --- */
    #references { background: var(--dark); }
    .ref-list { max-width: 900px; }
    .ref-item {
      display: flex;
      gap: 14px;
      padding: 16px 20px;
      margin-bottom: 12px;
      background: var(--card-bg);
      border-radius: 10px;
      border-left: 3px solid var(--blue);
    }
    .ref-num {
      color: var(--teal);
      font-weight: 800;
      font-size: .9rem;
      flex-shrink: 0;
      min-width: 30px;
    }
    .ref-item p { font-size: .85rem; color: #88bfcc; line-height: 1.65; }
    .ref-item em { color: var(--accent); font-style: italic; }
        #v1 { background: var(--dark); }
    .v1-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .v1-card {
      background: var(--card-bg);
      border: 1px solid rgba(0,201,167,.15);
      border-radius: 16px;
      padding: 24px 22px;
    }
    .v1-card h3 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .v1-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }

    /* --- VALIDATION --- */
    #validation { background: #051e2c; }
    .validation-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }
    .validation-card {
      background: var(--card-bg);
      border: 1px solid rgba(0,201,167,.15);
      border-radius: 16px;
      padding: 24px 22px;
      border-top: 4px solid var(--teal);
    }
    .validation-card h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .validation-card p  { font-size: .875rem; color: #88bfcc; line-height: 1.68; }