/* ============================================================
   project.css — Shared styles for Bootstrap project pages
   (nvidia, favorita, olist)
   ============================================================ */

:root{
  --color-background:#0b1220;
  --color-panel:#121a2b;
  --color-glow-blue:rgba(49,130,206,.18);
  --color-glow-gold:rgba(236,201,75,.14);
  --color-text-primary:#e6edf7;
  --color-text-muted:#9fb1c9;
  --color-border:#263148;
  --border-radius-md:12px;
  --border-radius-lg:16px;
  --bg-glass-gradient:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --shadow-md:0 10px 28px rgba(0,0,0,.45);
  --accent-pink:#d946ef;
  --accent-purple:#8b5cf6;
  --card-bg:rgba(255,255,255,.04);
  --card-bg-strong:rgba(255,255,255,.06);
}

html{scroll-behavior:smooth; height:100%}
body{
  margin:0; height:100%; line-height:1.6;
  color:var(--color-text-primary);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 8% -10%, var(--color-glow-blue), transparent 60%),
    radial-gradient(900px 600px at 110% 0%, var(--color-glow-gold), transparent 60%),
    var(--color-background);
}
.container-xl{max-width:1180px}
a:focus-visible,button:focus-visible{outline:2px solid #8b5cf6; outline-offset:2px; border-radius:6px}

/* NAV */
.navbar{
  background:transparent; padding:.75rem 0;
  border-bottom:1px solid transparent; backdrop-filter:saturate(120%) blur(6px);
  transition:background .25s, border-color .25s, box-shadow .25s;
}
.navbar.scrolled{ background:rgba(10,16,28,.85); border-color:var(--color-border); box-shadow:0 6px 20px rgba(0,0,0,.35) }
.navbar-brand{
  font-weight:800; letter-spacing:.6px; font-size:1.1rem;
  color:transparent; background:linear-gradient(90deg,#fff,#bcd3ff);
  -webkit-background-clip:text; background-clip:text;
}
.nav-link{ color:var(--color-text-muted)!important; font-weight:600 }
.nav-link:hover{ color:#eaf2ff!important }

/* HERO */
.hero{padding:110px 0 12px}
.badge-case{
  display:inline-flex; gap:.5rem; align-items:center; padding:.45rem .7rem;
  border:1px solid #334569; border-radius:999px; background:var(--bg-glass-gradient);
  font-weight:800; font-size:.85rem
}
.hero-title{
  margin:8px 0 6px; font-weight:800; line-height:1.2;
  font-size:clamp(26px,4vw,40px);
  color:transparent; background:linear-gradient(90deg,#f8faff 0%,#b9d2ff 70%);
  -webkit-background-clip:text; background-clip:text;
}
.hero-sub{ color:var(--color-text-muted); max-width:980px; font-size:1.05rem }
.hero-actions{ margin-top:.5rem; margin-bottom:1.25rem; gap:.5rem }
@media (max-width:576px){
  .hero-actions{ margin-top:.75rem; margin-bottom:1rem; gap:.5rem }
}

/* Buttons */
.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem;
  border:1px solid var(--color-border); border-radius:var(--border-radius-md);
  color:#eaf2ff; text-decoration:none; background:var(--bg-glass-gradient);
}
.btn-ghost:hover{ transform:translateY(-1px); border-color:#3a4b6e }
.btn-primary-soft{
  display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.1rem;
  color:#fff; font-weight:800; text-decoration:none; border-radius:12px;
  background:linear-gradient(92deg, var(--accent-pink), var(--accent-purple));
  border:1px solid rgba(216,70,239,.55);
  box-shadow:0 10px 28px rgba(216,70,239,.25);
}
.btn-primary-soft:hover{ transform:translateY(-1px); box-shadow:0 14px 36px rgba(216,70,239,.32) }

/* SECTIONS */
.section{
  padding:18px; border:1px solid var(--color-border); border-radius:var(--border-radius-lg);
  background:var(--bg-glass-gradient); box-shadow:var(--shadow-md);
}
.section-title{ font-weight:800; font-size:1.15rem; margin:.2rem 0 .6rem; display:flex; gap:.5rem; align-items:center }
.muted{ color:var(--color-text-muted) }
.hr{height:1px; background:linear-gradient(90deg, transparent, #334569, transparent); margin:10px 0}
.list-tight li{ margin-bottom:.4rem }

/* KPIs (2x2 grid) */
.kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.kpi{
  display:grid; grid-template-rows:auto 1fr auto; align-content:start;
  min-height:120px; padding:16px; border:1px solid var(--color-border);
  border-radius:10px; background:var(--bg-glass-gradient)
}
.kpi small{ color:var(--color-text-muted) }
.kpi-value{ font-size:1.2rem; font-weight:800; margin:.35rem 0 .2rem }
.kpi-note{ color:var(--color-text-muted); font-size:.85rem }
@media (max-width:576px){ .kpis{ grid-template-columns:1fr } }

/* Evidence cards */
.ev-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
.ev-card{
  grid-column:span 6; background:var(--color-panel); border:1px dashed var(--color-border);
  border-radius:12px; padding:14px; min-height:140px
}
.ev-card h4{ font-size:.98rem; margin:.2rem 0 .4rem }
@media (max-width:992px){ .ev-card{ grid-column:span 12 } }

/* Project/Module cards */
.projects{ margin-top:10px }
.project-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.project-card{
  grid-column:span 6; min-height:240px;
  padding:18px; border:1px solid var(--color-border); border-radius:14px;
  background:var(--card-bg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .18s, border-color .2s, box-shadow .2s, background .2s;
  box-shadow:var(--shadow-md);
}
.project-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:14px;
  background:radial-gradient(600px 200px at 10% -10%, rgba(217,70,239,.10), transparent 60%),
             radial-gradient(600px 200px at 110% 120%, rgba(139,92,246,.10), transparent 60%);
  transition:opacity .2s;
}
.project-card:hover{ transform:translateY(-3px); border-color:#37435d; background:var(--card-bg-strong); box-shadow:0 14px 34px rgba(0,0,0,.45) }
.project-card:hover::after{ opacity:1 }
.project-meta{ display:flex; align-items:center; gap:.6rem }
.pill-pink{
  display:inline-flex; align-items:center; gap:.45rem; padding:.28rem .6rem; border-radius:999px;
  font-weight:700; font-size:.85rem; color:#f5eafe;
  background:linear-gradient(180deg, rgba(216,70,239,.22), rgba(139,92,246,.18));
  border:1px solid rgba(200,120,255,.4);
}
.project-title{ margin:.55rem 0 .25rem; font-weight:800; font-size:1.12rem }
.project-desc{ color:var(--color-text-muted); margin:0 0 .6rem }
.project-bullets{ margin:0 0 .75rem; padding-left:1.1rem; color:#cbd5e1 }
.project-bullets li{ margin:.15rem 0 }
.project-actions{ display:flex; gap:.6rem; flex-wrap:wrap }
.btn-cta{
  display:inline-flex; align-items:center; gap:.5rem; padding:.56rem .9rem; font-weight:800; text-decoration:none; color:#fff;
  background:linear-gradient(92deg, var(--accent-pink), var(--accent-purple));
  border:1px solid rgba(216,70,239,.55); border-radius:10px; box-shadow:0 8px 24px rgba(216,70,239,.25);
}
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(216,70,239,.32) }
@media (max-width:992px){ .project-card{ grid-column:span 12 } }

/* Tech stack */
.stack-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
.stack-card{
  grid-column:span 4; display:flex; align-items:flex-start; gap:.75rem;
  padding:12px 14px; border:1px dashed #3a4b6e; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.stack-card i{ font-size:1.15rem }
.stack-title{ font-weight:800; margin:0 }
.stack-note{ margin:0; color:var(--color-text-muted); font-size:.9rem }
@media (max-width:992px){ .stack-card{ grid-column:span 6 } }
@media (max-width:576px){ .stack-card{ grid-column:span 12 } }

/* Breadcrumb */
.breadcrumb{ --bs-breadcrumb-divider: "›" }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color:var(--color-text-muted) }
.breadcrumb .breadcrumb-item a{ color:var(--color-text-muted); text-decoration:none }
.breadcrumb .breadcrumb-item a:hover{ color:#eaf2ff }
.breadcrumb .breadcrumb-item.active{ color:#ffffff; font-weight:700 }

/* Canvas background */
#bg-net{ position:fixed; inset:0; z-index:0; pointer-events:none; filter:saturate(120%) }
nav, main, footer { position:relative; z-index:1 }
@media (max-width:576px){ #bg-net{ opacity:.26 } }

/* Vendor prefixes for Safari */
@supports (-webkit-backdrop-filter: blur(1px)){
  .navbar{ -webkit-backdrop-filter:saturate(120%) blur(6px) }
}