@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --void: #060b10; --panel: rgba(10, 24, 34, .82); --ink: #e4f1f3;
  --muted: #8caab1; --dim: #5c767d; --line: rgba(126, 208, 220, .19);
  --line-strong: rgba(111, 231, 244, .47); --cyan: #36dcff;
  --cyan-dim: rgba(54, 220, 255, .13); --green: #79e6bd;
  --amber: #ffd27a; --red: #ff8f83; --max: 1180px;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 78% -10%, #123449 0, transparent 32rem), var(--void); color: var(--ink); font: 16px/1.6 Inter, ui-sans-serif, system-ui, sans-serif; }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; opacity: .26; pointer-events: none; background-image: linear-gradient(rgba(79,190,204,.07) 1px, transparent 1px), linear-gradient(90deg,rgba(79,190,204,.07) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,black,transparent 80%); }
a { color: inherit; text-decoration: none; } a:hover { color: var(--cyan); }
button, input, select, textarea { font: inherit; }
:where(a,button,input,select,textarea):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.shell { width: min(calc(100% - 48px), var(--max)); margin: auto; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(6,11,16,.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--ink); font: 700 .9rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: block; width: 36px; height: 36px; flex-shrink: 0; }
.nav { display: flex; align-items: center; gap: 22px; font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nav a { color: var(--muted); } .nav a:hover, .nav a[aria-current="page"] { color: var(--cyan); }
.nav a[aria-current="page"] { text-shadow: 0 0 12px rgba(54,220,255,.5); }
.menu { display: none; padding: 8px 0; border: 0; background: transparent; color: var(--ink); font: 700 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.hero { position: relative; padding: 120px 0 88px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 64px; align-items: end; }
.hero::after { content: "EARLY STAGE // VOLUNTEER LED"; position: absolute; top: 30px; right: 0; color: var(--green); font: 500 .62rem/1 var(--mono); letter-spacing: .14em; }
.eyebrow { color: var(--cyan); font: 600 .7rem/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { max-width: 850px; margin: 20px 0 25px; font: 500 clamp(2.8rem,6.2vw,6rem)/.96 var(--mono); letter-spacing: -.075em; text-transform: uppercase; }
h2 { margin-bottom: 20px; color: var(--ink); font: 500 clamp(1.8rem,3.6vw,3.1rem)/1.05 var(--mono); letter-spacing: -.065em; text-transform: uppercase; }
h3 { margin-bottom: 8px; font-size: 1.03rem; line-height: 1.3; }
.lede { max-width: 640px; color: var(--muted); font-size: 1.08rem; }
.hero-note { margin: 0; padding: 17px 0 17px 20px; border-left: 2px solid var(--cyan); color: var(--muted); font: .8rem/1.65 var(--mono); background: linear-gradient(90deg,var(--cyan-dim),transparent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 1px solid var(--cyan); border-radius: 3px; background: var(--cyan); color: #021016; font: 700 .72rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; box-shadow: 0 0 18px rgba(54,220,255,.18); transition: background .15s,color .15s,box-shadow .15s,transform .15s; }
.button:hover { color: #021016; background: #a1f4ff; box-shadow: 0 0 28px rgba(54,220,255,.38); text-decoration: none; transform: translateY(-1px); }
.button.ghost { background: transparent; color: var(--cyan); box-shadow: none; }.button.ghost:hover { background: var(--cyan-dim); color: var(--cyan); }
.nav .button, .nav .button[aria-current="page"] { color: #021016; text-shadow: none; }
.section { padding: 78px 0; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 34px; }.section-heading p { max-width: 475px; margin: 0; color: var(--muted); }.section-heading > a { color: var(--cyan); font: 600 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pipeline { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--line); background: rgba(6,17,24,.72); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.step { position: relative; min-height: 152px; padding: 20px; border-right: 1px solid var(--line); }.step:not(:last-child)::after { content: "›"; position: absolute; right: -7px; top: 50%; z-index: 1; color: var(--cyan); font: 1.4rem/1 var(--mono); transform: translateY(-50%); }.step:last-child { border: 0; }
.step-number { color: var(--cyan); font: 500 1.35rem/1 var(--mono); text-shadow: 0 0 12px rgba(54,220,255,.35); }.step p { margin: 22px 0 0; color: var(--muted); font: .72rem/1.5 var(--mono); letter-spacing: .035em; text-transform: uppercase; }
.grid,.collection { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.card,.record { position: relative; min-height: 240px; padding: 23px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg,rgba(19,43,55,.75),var(--panel)); box-shadow: inset 0 1px rgba(255,255,255,.025); transition: transform .15s,border-color .15s,background .15s,box-shadow .15s; }
.card::before,.record::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; border-top: 2px solid var(--cyan); }.card:hover,.record:hover { border-color: var(--line-strong); background: linear-gradient(135deg,rgba(21,59,75,.88),var(--panel)); box-shadow: 0 0 24px rgba(54,220,255,.08),inset 0 1px rgba(255,255,255,.04); transform: translateY(-3px); }
.card p,.record p { color: var(--muted); margin-bottom: 0; font-size: .9rem; }.label,.project-status { color: var(--cyan); font: 600 .67rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; }.meta { margin-top: 18px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; font: .68rem/1.35 var(--mono); letter-spacing: .035em; }.badge { border: 1px solid currentColor; border-radius: 2px; padding: 3px 6px; color: var(--green); font: 700 .62rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }.badge.medium { color: var(--amber); }.badge.high { color: var(--red); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }.plain-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }.plain-list li { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--muted); }.plain-list li::before { content: "+"; margin-right: 12px; color: var(--cyan); font-family: var(--mono); }
.page-head { padding: 96px 0 44px; border-bottom: 1px solid var(--line); background: linear-gradient(110deg,rgba(12,37,49,.45),transparent 60%); }.page-head h1 { margin-bottom: 16px; font-size: clamp(2.8rem,5vw,5.2rem); }.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 38px 0 18px; }.field { border: 1px solid rgba(126,208,220,.38); border-radius: 3px; background: rgba(4,14,21,.78); color: var(--ink); padding: 11px 12px; font-size: .88rem; }.field::placeholder { color: var(--dim); }.field:hover,.field:focus { border-color: var(--cyan); }.search { min-width: min(100%,340px); }.record { display: flex; flex-direction: column; }.record .meta { margin-top: auto; }.empty { grid-column: 1/-1; padding: 34px 0; color: var(--muted); }
.form-wrap { width: min(100%,700px); padding: 34px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 14px 40px rgba(0,0,0,.22); } label { display: block; margin: 19px 0 6px; color: var(--ink); font: 600 .72rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; } textarea,input[type="text"],input[type="email"] { width: 100%; } textarea { min-height: 150px; resize: vertical; }.hint { margin: 4px 0 0; color: var(--muted); font: .74rem/1.55 var(--mono); }.notice { display: none; margin-top: 18px; padding: 13px; border: 1px solid rgba(121,230,189,.4); background: rgba(121,230,189,.1); color: var(--green); }.trap { position: absolute; left: -9999px; }
.site-footer { padding: 34px 0; border-top: 1px solid var(--line); color: var(--dim); font: .68rem/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; }.footer-inner { display: flex; justify-content: space-between; gap: 15px; }
.record > p + p, .record details { margin-top: 12px; }
.record details { margin-bottom: 18px; color: var(--muted); font-size: .9rem; }
.record summary { cursor: pointer; color: var(--cyan); }
.record .meta { padding-top: 18px; }
@media (max-width:820px) { .hero,.split { grid-template-columns: 1fr; gap: 30px; }.hero { padding: 92px 0 62px; }.hero::after { top: 24px; }.pipeline { grid-template-columns: repeat(2,1fr); }.step:nth-child(2n) { border-right: 0; }.step:nth-child(2n)::after { display: none; }.step:nth-child(-n+4) { border-bottom: 1px solid var(--line); }.grid,.collection { grid-template-columns: 1fr 1fr; } }
@media (max-width:600px) { .shell { width: min(calc(100% - 28px),var(--max)); }.header-inner { min-height: 62px; }.menu { display: block; }.nav { display: none; position: absolute; top: 62px; right: 0; left: 0; padding: 18px 14px; flex-direction: column; align-items: flex-start; background: #08131b; border-bottom: 1px solid var(--line); }.nav.open { display: flex; }.pipeline,.grid,.collection { grid-template-columns: 1fr; }.step { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }.step::after { display: none; }.step:last-child { border-bottom: 0; }.section { padding: 56px 0; }.page-head { padding: 68px 0 30px; }.section-heading,.footer-inner { display: block; }.section-heading p { margin-top: 12px; }.form-wrap { padding: 20px; } h1 { font-size: clamp(2.65rem,14vw,4.2rem); letter-spacing: -.09em; } }

.contact-email { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }