/* ====== Project Page (compact) ====== */

    .project { padding-block: clamp(2rem, 4vw, 3rem); }
    .stack-badges, .quick-facts { display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
    .badge {
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.42rem .7rem; border-radius:999px;
      background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
      color: var(--text,#eaf9fc); font-size:.9rem;
    }
    .badge i { font-size:.9rem; opacity:.9; }

    .hero {
      display:grid; gap:1rem; align-items:start;
    }
    .hero h1 { margin:0; }

    .hero em{
        font-style: italic;
        color: var(--text);
        text-shadow: 0 0 20px rgba(124,131,255,0.10);
      }
    .hero .lead { color:var(--text-muted); max-width:60ch; }
    .hero-ctas { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem;}

    /* Quick facts strip */
    .facts {
      margin-top:1.25rem; padding: .9rem; border-radius:14px;
      background: radial-gradient(1200px 400px at 10% -10%, rgba(7, 86, 212, 0.1), transparent 45%),
                  rgba(255,255,255,.02);
      outline: 1px solid rgba(255,255,255,.06);
    }
    .quick-facts { row-gap:.65rem; column-gap:1.2rem; }
    .fact { display:flex; align-items:center; gap:.6rem; color:var(--text-muted); }
    .fact i { color:#ffffff; }

    /* Section blocks */
    .section-block { margin-top: clamp(2rem, 4vw, 3rem); }
    .section-block h3 { margin:0 0 .8rem 0; }
    .muted { color: var(--text-muted); }

    /* Problem > Solution */
    .problem-solution {
      display:grid; gap:1rem; grid-template-columns: 1fr; 
    }
    @media (min-width: 880px) { .problem-solution { grid-template-columns: 1fr 1fr; } }
    .card {
      background: var(--surface,#0b1220); border-radius:14px; padding:1rem;
      outline:1px solid rgba(255,255,255,.06);
    }

    /* Features list (compact) */
    .features { display:grid; gap:.75rem; }
    .feature {
      display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
      padding:.8rem; border-radius:12px; outline:1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.02); 
    }
    .feature i { color:#ffffff; }

    /* Architecture (compact diagram) */
    .arch {
      display:grid; gap: .75rem; grid-template-columns:1fr; 
    }
    @media (min-width:920px){ .arch { grid-template-columns: 1.1fr .9fr; } }
    .arch-diagram {
      display:grid; gap:.6rem; grid-template-columns: repeat(2, 1fr);
    }
    .box {
      padding:.85rem; border-radius:12px; text-align:center;
      background: rgba(255,255,255,.03); outline:1px solid rgba(255,255,255,.06);
      font-size:.95rem;
    }
    .arrow { text-align:center; font-size:.9rem; opacity:.8; }

/* Screens: keep multicol but align the first row perfectly */
.thumbs{
    column-count: 3;
    column-gap: .75rem;
    overflow: hidden;          /* creates a new BFC → no top-margin collapse */
    padding-top: .25rem;       /* tiny breathing room */
  }
  @media (max-width:900px){ .thumbs{ column-count: 2; } }
  @media (max-width:520px){ .thumbs{ column-count: 1; } }
  
  .thumb{
    margin: 0 0 1rem;          /* bottom-only spacing (no inconsistent top margins) */
    border-radius:12px; overflow:hidden; cursor:zoom-in;
    background: var(--surface,#0b1220); outline:1px solid rgba(255,255,255,.06);
    transition: transform .2s ease, outline-color .2s ease;
  }
  .thumb:hover{ transform: translateY(-2px); outline-color: rgba(7,182,212,.25); }
  .thumb img{ display:block; width:100%; height:auto; }

  
    /* Outcomes & Learnings */
    .kpis { display:grid; grid-template-columns: repeat(3, 1fr); gap:.75rem; }
    @media (max-width:820px){ .kpis { grid-template-columns: 1fr 1fr; } }
    @media (max-width:520px){ .kpis { grid-template-columns: 1fr; } }
    .kpi { padding:1rem; border-radius:12px; background: rgba(255,255,255,.02); outline:1px solid rgba(255,255,255,.06); }
    .kpi b { font-size:1.25rem; }

    /* Lightbox (same style as before) */
    .lightbox{
      position: fixed; inset: 0; z-index: 999;
      background: rgba(5,8,16,.9); backdrop-filter: blur(4px);
      display:none; align-items:center; justify-content:center;
    }
    .lightbox.is-open{ display:flex; }
    .lightbox__inner{
      max-width:min(92vw,1200px); max-height:88vh;
      display:flex; align-items:center; justify-content:center;
      padding: clamp(.5rem,1vw,1rem);
      border-radius:16px; background: radial-gradient(circle at 30% 30%, #0e1726 0%, #050810 100%);
      outline:1px solid rgba(255,255,255,.06); 
      transform: scale(.94); opacity:0; transition: transform .28s ease, opacity .28s ease;
    }
    .lightbox.is-open .lightbox__inner{ transform: scale(0.9); opacity:1; }
    .lightbox__img{ max-width:100%; max-height:82vh; border-radius:10px; background:#0b1220; box-shadow:0 10px 30px rgba(0,0,0,.35); }
    .lb-btn{
      position: fixed; z-index: 1000; width:38px; height:38px; border-radius:12px;
      display:inline-grid; place-items:center; border:1px solid var(--border, rgba(255,255,255,.12));
      background: rgba(255,255,255,.02); color:var(--text,#eaf9fc); cursor:pointer;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .lb-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
    .lb-close{ top:24px; right:24px; }
    .lb-prev{ top:50%; left:24px; }
    .lb-next{ top:50%; right:24px;}
    .lightbox__dots{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:1000; }
    .lightbox__dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.25); transition:background .2s ease, transform .2s ease, box-shadow .25s ease; }
    .lightbox__dot.is-active{ background:#07b6d4; box-shadow:0 0 10px rgba(7,182,212,.8); transform:scale(1.15); }