html { scroll-behavior: smooth; }
    body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background:#F8F4F0; -webkit-font-smoothing:antialiased; }
    ::-webkit-scrollbar { width:3px; } ::-webkit-scrollbar-thumb { background:#A37D36; border-radius:2px; }

    /* Nav */
    #site-nav { background: transparent; transition: background .5s ease, backdrop-filter .5s ease; }

    /* Reveal */
    .reveal { opacity:0; transform:translateY(20px); transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1); }
    .reveal.d1{transition-delay:.1s;} .reveal.d2{transition-delay:.2s;} .reveal.d3{transition-delay:.3s;}
    .reveal.visible{opacity:1;transform:none;}

    .navlink::after{content:'';display:block;height:1px;width:0;background:#A37D36;transition:width .25s;}
    .navlink:hover::after{width:100%;}

    /* ─── Particle canvases ───────────────────────────────────────── */
    #hero-canvas, #team-canvas, #contact-canvas { position:absolute;inset:0;width:100%;height:100%; }

    /* ─── Tech cards ─────────────────────────────────────────────── */
    .tech-card {
      transition: border-color .25s, box-shadow .25s, transform .25s;
      text-decoration:none;
    }
    .tech-card:hover {
      border-color: rgba(163,125,54,.5) !important;
      box-shadow: 0 8px 28px rgba(163,125,54,.12);
      transform: translateY(-3px);
    }
    .tech-card .ticon { filter:grayscale(1) opacity(.5); transition:filter .25s; }
    .tech-card:hover .ticon { filter:grayscale(0) opacity(1); }

    /* ─── Team section ───────────────────────────────────────────── */
    .thumb-btn { transition: opacity .2s; cursor:pointer; }
    .thumb-btn.active { opacity:1 !important; }
    .thumb-btn.active .thumb-avatar { border-color:#A37D36 !important; }
    .thumb-btn:not(.active) { opacity:.38; }
    .thumb-btn:hover:not(.active) { opacity:.65; }

    .thumb-avatar {
      width: 56px; height: 56px;
      border-radius: 50%;
      border: 2px solid transparent;
      overflow: hidden;
      transition: border-color .2s;
    }

    .member-panel { display:none; position:absolute; inset:0; }
    .member-panel.active { display:flex; flex-direction:column; justify-content:center; }

    @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
    .member-panel.active { animation: fadeIn .5s cubic-bezier(.16,1,.3,1) both; }

    /* Photo area — real photo or placeholder */
    .team-photo {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
    }

    .team-photo-placeholder {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
    }

    .team-silhouette {
      width: min(260px, 55%);
      height: auto;
      max-height: 72%;
      margin-top: 4rem;
    }