@import url("styles.css");

.brand-link { color: inherit; text-decoration: none; }
.project-page { background: radial-gradient(900px 520px at 85% 8%, rgba(85,245,255,.12), transparent 60%), radial-gradient(800px 540px at 12% 28%, rgba(247,183,51,.08), transparent 65%), var(--bg); }
.project-hero { position: relative; padding: 130px 0 90px; overflow: hidden; }
.project-hero::after { content: ""; position: absolute; width: 560px; height: 560px; right: -220px; top: -180px; border: 1px solid rgba(85,245,255,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(85,245,255,.025), 0 0 0 140px rgba(247,183,51,.02); pointer-events: none; }
.project-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 64px; align-items: center; }
.project-intro { max-width: 760px; color: var(--muted); font-size: clamp(18px,2vw,22px); }
.project-status,.evidence-card { padding: 28px; border: 1px solid rgba(85,245,255,.28); border-radius: 16px; background: linear-gradient(145deg,rgba(17,24,39,.94),rgba(15,23,42,.78)); box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.status-label,.roadmap article>span { color: var(--accent); text-transform: uppercase; letter-spacing: 1.6px; font-size: 12px; font-weight: 700; }
.project-status>strong { display: block; margin: 8px 0 14px; font-family: "Fraunces",serif; font-size: 28px; }
.project-status p,.fine-print { color: var(--muted); }
.status-list { list-style: none; margin: 24px 0 0; padding: 0; }
.status-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--stroke); }
.status-list span { color: var(--muted); }
.project-notice { position: relative; z-index: 1; border-block: 1px solid rgba(247,183,51,.24); background: rgba(247,183,51,.075); }
.project-notice p { margin: 0; padding: 22px 0; color: #d9dee6; }
.card-number { color: var(--accent-2); font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.system-flow { list-style: none; display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin: 46px 0 58px; padding: 0; }
.system-flow li { position: relative; min-height: 190px; padding: 20px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(255,255,255,.035); }
.system-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; z-index: 1; color: var(--accent); }
.system-flow li>span { display: grid; width: 30px; height: 30px; place-items: center; margin-bottom: 22px; border-radius: 50%; background: rgba(85,245,255,.12); color: var(--accent); font-weight: 700; }
.system-flow b,.system-flow small { display: block; }
.system-flow small { margin-top: 10px; color: var(--muted); line-height: 1.45; }
.principle-grid,.contribution-grid,.document-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.principle-grid article,.contribution-grid article { padding: 24px; border-left: 2px solid var(--accent); background: rgba(255,255,255,.035); }
.principle-grid h3,.contribution-grid h3 { margin-top: 0; }
.principle-grid p,.contribution-grid p { margin-bottom: 0; color: var(--muted); }
.project-columns { align-items: start; }
.check-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.hardware-spec { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--stroke); }
.hardware-spec span { color: var(--muted); }
.fine-print { font-size: 13px; }
.text-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.roadmap { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 36px; }
.roadmap article { padding: 24px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(11,15,26,.52); }
.roadmap h3 { margin: 12px 0; }
.roadmap p { margin-bottom: 0; color: var(--muted); }
.funding-steps { display: grid; gap: 12px; }
.funding-steps div { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--stroke); border-radius: 10px; background: rgba(255,255,255,.03); }
.funding-steps b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #0a0f1a; background: var(--accent-2); }
.contribution-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.contribution-callout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: 34px; align-items: center; margin-top: 32px; padding: 30px; border: 1px solid rgba(247,183,51,.28); border-radius: 16px; background: rgba(247,183,51,.07); }
.contribution-callout h3,.contribution-callout p { margin-top: 0; }
.callout-actions { display: grid; gap: 12px; }
.document-grid { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 34px; }
.document-grid a { display: grid; gap: 8px; min-height: 120px; padding: 22px; border: 1px solid var(--stroke); border-radius: 10px; color: var(--text); text-decoration: none; background: rgba(255,255,255,.035); transition: transform .25s ease,border-color .25s ease; }
.document-grid a:hover { transform: translateY(-3px); border-color: rgba(85,245,255,.45); }
.document-grid span { color: var(--muted); }
.project-contact .lead { margin-inline: auto; }

@media (max-width:980px) {
    .project-hero-grid,.contribution-callout { grid-template-columns: 1fr; }
    .system-flow { grid-template-columns: repeat(3,1fr); }
    .system-flow li:not(:last-child)::after { display: none; }
    .contribution-grid,.document-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width:720px) {
    .project-hero { padding: 90px 0 64px; }
    .system-flow,.principle-grid,.contribution-grid,.document-grid,.roadmap { grid-template-columns: 1fr; }
    .system-flow li { min-height: auto; }
    .project-page .site-header .wrap { display: grid; grid-template-columns: 1fr; justify-content: initial; gap: 12px; padding: 16px 0; }
    .project-page .brand-link { display: grid; width: 100%; }
    .project-page .nav a:not(.btn) { display: none; }
    .project-page .nav { width: 100%; justify-content: flex-start; }
    .project-page .nav .btn { padding: 10px 13px; font-size: 12px; }
    .project-page .project-hero::after { display: none; }
}