/* Shared project case-study pages */
:root{
  --p-bg:#f5f7fb; --p-card:#fff; --p-ink:#101828; --p-muted:#667085;
  --p-line:#e4e7ec; --p-brand:#5577f1; --p-brand2:#8b67e9;
  --p-dark:#0b1220; --p-dark2:#111827;
} 
.project-page{background:var(--p-bg);color:var(--p-ink);min-height:100vh}
.project-shell{width:min(1180px,calc(100% - 40px));margin:0 auto}
.project-topbar{padding:20px 0;border-bottom:1px solid var(--p-line);background:rgba(255,255,255,.88);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}
.project-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.project-back{display:inline-flex;align-items:center;gap:8px;color:#344054;text-decoration:none;font-size:13px;font-weight:800}
.project-back:hover{color:var(--p-brand)}
.project-top-actions{display:flex;gap:9px;flex-wrap:wrap}
.project-top-actions a{padding:10px 13px;border:1px solid #d0d5dd;border-radius:10px;text-decoration:none;color:#344054;font-size:12px;font-weight:800;background:#fff}
.project-top-actions a.primary{color:#fff;border-color:transparent;background:linear-gradient(110deg,#5275f5,#8865e9)}
.project-hero{padding:72px 0 55px;display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}
.project-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5577f1;font-weight:900}
.project-hero h1{font:800 clamp(46px,6vw,76px)/1.02 var(--display);letter-spacing:-3px;margin:12px 0 18px}
.project-lead{font-size:18px;line-height:1.75;color:#475467;max-width:64ch}
.project-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.project-meta span{padding:8px 10px;border:1px solid #d9deea;border-radius:999px;background:#fff;color:#344054;font-size:11px;font-weight:800}
.project-hero-art{border-radius:24px;overflow:hidden;border:1px solid #d9deea;background:#111827;box-shadow:0 28px 75px rgba(16,24,40,.15)}
.project-hero-art img{width:100%;aspect-ratio:16/10;display:block;object-fit:cover}
.project-section{padding:30px 0 105px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.project-card-detail{background:#fff;border:1px solid var(--p-line);border-radius:18px;padding:28px;box-shadow:0 12px 32px rgba(16,24,40,.05)}
.project-card-detail h2{margin:0 0 10px;font-size:25px;letter-spacing:-.5px}
.project-card-detail h3{margin:0 0 8px;font-size:17px}
.project-card-detail p,.project-card-detail li{color:#475467;line-height:1.75;font-size:14px}
.project-card-detail ul{margin:10px 0 0;padding-left:20px}
.project-card-detail.full{grid-column:1/-1}
.project-section-heading{margin:0 0 24px}
.project-section-heading .project-kicker{display:block;margin-bottom:7px}
.project-section-heading h2{margin:0;font-size:36px;letter-spacing:-1.2px}
.project-note{margin-top:15px;padding:14px 16px;border-radius:12px;background:#f8f9fc;border:1px solid var(--p-line);color:#667085;font-size:12px;line-height:1.65}
.project-flow{margin:0;padding:22px;background:#0b1220;color:#dce4ff;border-radius:15px;overflow:auto;font:500 12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid #22304a;white-space:pre-wrap}
.project-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.project-stack div{padding:14px;border:1px solid var(--p-line);border-radius:12px;background:#fbfcfe}
.project-stack strong{display:block;font-size:12px;margin-bottom:4px}
.project-stack span{color:#667085;font-size:11px;line-height:1.45}
.project-backend{background:linear-gradient(135deg,#101a33,#18284f);color:#fff;border-radius:20px;padding:30px}
.project-backend p,.project-backend li{color:#c3cee5}
.project-backend h2{color:#fff}
.project-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.project-feature-list div{padding:15px;border:1px solid #e4e7ec;border-radius:12px;background:#fff}
.project-feature-list strong{display:block;font-size:13px;margin-bottom:5px}
.project-feature-list span{font-size:12px;color:#667085;line-height:1.55}
.project-footer{padding:30px 0 55px;border-top:1px solid var(--p-line);display:flex;justify-content:space-between;gap:20px;align-items:center;color:#667085;font-size:12px}
.project-footer a{color:#344054;font-weight:800;text-decoration:none}
.status-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:#eff4ff;color:#315dde;font-size:10px;font-weight:900;letter-spacing:.08em}
.status-badge.experimental{background:#fff4e8;color:#b45309}
.status-badge.foundation{background:#f4f2ff;color:#6941c6}
@media(max-width:900px){
  .project-hero{grid-template-columns:1fr;gap:30px}
  .project-grid{grid-template-columns:1fr}
  .project-card-detail.full{grid-column:auto}
  .project-stack,.project-feature-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .project-shell{width:min(100% - 28px,1180px)}
  .project-topbar-inner{align-items:flex-start;flex-direction:column}
  .project-hero{padding-top:48px}.project-hero h1{letter-spacing:-2px}
  .project-lead{font-size:16px}
  .project-card-detail{padding:22px}
  .project-footer{flex-direction:column;align-items:flex-start}
}

/* SEO-friendly visible breadcrumbs */
.project-breadcrumbs{
  padding-top:18px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#98a2b3;
  font-size:11px;
  font-weight:700;
}
.project-breadcrumbs a{
  color:#667085;
  text-decoration:none;
}
.project-breadcrumbs a:hover{
  color:#5577f1;
}
.project-breadcrumbs span{
  color:#98a2b3;
}