.project-page { padding-top: 90px; }
.project-hero { padding: 76px 0 68px; background: linear-gradient(135deg, #f8fafc 0%, #eef6ff 100%); border-bottom: 1px solid var(--border); }
.project-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: 58px; align-items: center; }
.project-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.project-badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 99px; font: 700 10px/1 var(--font-mono); letter-spacing: 1.2px; color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(37,99,235,.15); }
.project-badge.is-live { color: #059669; background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.2); }
.project-badge.is-beta { color: #b45309; background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.22); }
.project-title { max-width: 760px; margin: 0 0 22px; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.045em; color: var(--white); }
.project-lead { max-width: 680px; margin: 0; font-size: 17px; line-height: 1.8; color: var(--white-dim); }
.project-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.project-visual { overflow: hidden; border: 1px solid var(--border); border-radius: 26px; background: #fff; box-shadow: 0 28px 72px rgba(15,23,42,.14); }
.project-visual img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.project-section { padding: 82px 0; }
.project-section.is-soft { background: #f8fafc; border-block: 1px solid var(--border); }
.project-section-head { max-width: 760px; margin-bottom: 38px; }
.project-section-head h2 { margin: 10px 0 14px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; letter-spacing: -.03em; }
.project-section-head p { color: var(--white-dim); line-height: 1.75; }
.project-overview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr); gap: 50px; align-items: start; }
.project-copy h2 { margin: 10px 0 18px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; }
.project-copy p { margin-bottom: 16px; color: var(--white-dim); line-height: 1.8; }
.project-facts { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 16px 40px rgba(15,23,42,.06); }
.project-fact { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.project-fact:last-child { border-bottom: 0; }
.project-fact span { font: 600 10px/1.5 var(--font-mono); letter-spacing: 1px; color: #64748b; text-transform: uppercase; }
.project-fact strong { font-size: 14px; color: var(--white); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.project-feature { padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(15,23,42,.05); }
.project-feature-index { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-bottom: 22px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font: 700 11px var(--font-mono); }
.project-feature h3 { margin-bottom: 10px; font-size: 18px; }
.project-feature p { color: var(--white-dim); font-size: 14px; line-height: 1.7; }
.project-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; counter-reset: step; }
.project-step { position: relative; padding: 26px 22px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.project-step::before { counter-increment: step; content: "0" counter(step); display: block; margin-bottom: 20px; font: 700 11px var(--font-mono); color: var(--blue); }
.project-step h3 { margin-bottom: 8px; font-size: 16px; }
.project-step p { color: var(--white-dim); font-size: 13px; line-height: 1.65; }
.project-cta { padding: 76px 0; background: #0f172a; color: #fff; }
.project-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.project-cta h2 { max-width: 700px; margin: 0 0 10px; color: #fff; font-size: clamp(28px,4vw,44px); }
.project-cta p { color: #cbd5e1; }
.project-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.3); }
@media (max-width: 900px) {
  .project-hero-grid, .project-overview { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .project-page { padding-top: 76px; }
  .project-hero { padding: 48px 0; }
  .project-hero-grid { gap: 34px; }
  .project-title { font-size: 38px; }
  .project-lead { font-size: 15px; }
  .project-grid, .project-steps { grid-template-columns: 1fr; }
  .project-section { padding: 58px 0; }
  .project-fact { grid-template-columns: 90px 1fr; }
  .project-cta-inner { align-items: flex-start; flex-direction: column; }
  .project-actions .btn { width: 100%; justify-content: center; }
}