:root{
  --bg: #0a0e12;
  --bg-alt: #0f1620;
  --surface: #131b24;
  --surface-2: #1a2530;
  --line: #23303c;
  --text: #e7edf2;
  --text-dim: #8fa1ad;
  --text-faint: #566772;
  --mat-green: #39ff88;
  --mat-green-dim: #1f8f4f;
  --syntax-cyan: #4de8ff;
  --syntax-amber: #ffb020;
  --syntax-pink: #ff5f8f;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

/* subtle circuit-grid backdrop */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity:0.12;
  pointer-events:none;
  z-index:0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

::selection{ background: var(--mat-green); color:#04160c; }

:focus-visible{
  outline: 2px solid var(--mat-green);
  outline-offset: 3px;
}

.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.mono{ font-family: var(--font-mono); }

.accent{ color: var(--mat-green); }
.accent-cyan{ color: var(--syntax-cyan); }
.accent-amber{ color: var(--syntax-amber); }

/* ---------- NAV ---------- */
header{
  position: sticky; top:0; z-index:50;
  background: rgba(10,14,18,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-0.01em;
  display:flex; align-items:center; gap:2px;
  flex-shrink:0;
}
.logo .tag{ color: var(--mat-green); }
.logo .blink-cursor{
  display:inline-block; width:8px; height:1.1em;
  background: var(--mat-green);
  margin-left:4px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.navlinks{ display:flex; gap:32px; font-size:0.9rem; color:var(--text-dim); }
.navlinks a{ position:relative; transition: color .2s; }
.navlinks a:hover{ color: var(--mat-green); }
.navlinks a.active{ color: var(--mat-green); }
.navlinks .num{ color: var(--text-faint); font-family:var(--font-mono); font-size:0.75rem; margin-right:4px; }

.nav-cta{
  font-family: var(--font-mono);
  font-size:0.8rem;
  padding:9px 16px;
  border:1px solid var(--mat-green-dim);
  border-radius:6px;
  color: var(--mat-green);
  transition: all .2s;
  white-space:nowrap;
}
.nav-cta:hover{ background: var(--mat-green); color:#04160c; box-shadow:0 0 22px rgba(57,255,136,0.35); }
.logo-img{ height:38px; width:auto; display:block; flex-shrink:0; aspect-ratio: 382 / 110; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding: 110px 0 100px;
  z-index:1;
}
.hero::after{
  content:"";
  position:absolute;
  top:-100px; left:50%; transform:translateX(-50%);
  width:900px; height:500px;
  background: radial-gradient(ellipse at center, rgba(57,255,136,0.13), transparent 65%);
  pointer-events:none;
  z-index:-1;
}

.terminal{
  max-width: 620px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  margin-bottom:44px;
}
.terminal-bar{
  display:flex; align-items:center; gap:7px;
  padding:0 0 0 14px;
  background: var(--surface-2);
  border-bottom:1px solid var(--line);
}
.win-icon{ font-size:0.85rem; opacity:0.7; }
.terminal-title{ margin-left:6px; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); flex-grow:1; }
.win-controls{ display:flex; height:100%; }
.win-btn{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:38px;
  font-size:0.72rem; color: var(--text-faint);
  transition: background .15s, color .15s;
  cursor:default;
}
.win-btn.win-min, .win-btn.win-max{ font-size:0.8rem; }
.win-btn:hover{ background: rgba(255,255,255,0.08); color: var(--text); }
.win-btn.win-close:hover{ background:#e81123; color:#fff; }
.win-square{ width:10px; height:10px; border:1.4px solid currentColor; }
.terminal-body{
  padding:20px 22px;
  font-family: var(--font-mono);
  font-size:0.88rem;
  color: var(--text-dim);
}
.terminal-body .line{ margin-bottom:4px; white-space:pre-wrap; }
.terminal-body .kw{ color:var(--syntax-pink); }
.terminal-body .str{ color:var(--syntax-amber); }
.terminal-body .fn{ color:var(--syntax-cyan); }
.terminal-body .prop{ color:var(--text); }
.terminal-body .cursor{
  display:inline-block; width:7px; height:1em;
  background: var(--mat-green); vertical-align:middle;
  animation: blink 1s steps(1) infinite;
}

.hero h1{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.02;
  letter-spacing:-0.02em;
  max-width: 820px;
  margin-bottom:22px;
}
.hero h1 .hl{
  background: linear-gradient(100deg, var(--mat-green), var(--syntax-cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{
  font-size:1.15rem; color:var(--text-dim);
  max-width:560px; margin-bottom:36px;
}
.hero p.lead b{ color:var(--text); font-weight:600; }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  font-family: var(--font-mono);
  font-size:0.9rem;
  padding:14px 26px;
  border-radius:7px;
  display:inline-flex; align-items:center; gap:9px;
  transition: all .2s;
}
.btn-primary{
  background: var(--mat-green); color:#04160c; font-weight:600;
}
.btn-primary:hover{ box-shadow:0 0 30px rgba(57,255,136,0.45); transform:translateY(-2px); }
.btn-outline{
  border:1px solid var(--line); color:var(--text);
}
.btn-outline:hover{ border-color:var(--syntax-cyan); color:var(--syntax-cyan); }

/* ---------- EXPLORE GRID (home page site map) ---------- */
.explore-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:16px;
}
.explore-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 20px;
  transition: transform .2s, border-color .2s;
}
.explore-card:hover{ transform:translateY(-4px); border-color: var(--mat-green-dim); }
.explore-card .num{ font-family:var(--font-mono); font-size:0.75rem; color:var(--mat-green-dim); display:block; margin-bottom:10px; }
.explore-card .title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin-bottom:6px; }
.explore-card .desc{ font-size:0.85rem; color:var(--text-faint); }

/* ---------- SECTION SCAFFOLDING ---------- */
.page-header{ padding: 64px 0 0; }
section{ position:relative; z-index:1; padding: 90px 0; border-top:1px solid var(--line); }
.comment-label{
  font-family: var(--font-mono);
  font-size:0.82rem;
  color: var(--text-faint);
  margin-bottom:14px;
  display:block;
}
.comment-label .c{ color: var(--mat-green-dim); }
h2.section-title, h1.section-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  letter-spacing:-0.01em;
  margin-bottom: 18px;
}
.section-sub{ color:var(--text-dim); max-width:640px; margin-bottom:52px; font-size:1.02rem; }

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:60px;
  align-items:start;
}
.about-grid p{ color:var(--text-dim); margin-bottom:16px; font-size:1.02rem; }
.about-grid p b{ color:var(--text); }

.stat-block{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
}
.stat-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:0.88rem;
}
.stat-row:last-child{ border-bottom:none; }
.stat-row .k{ color:var(--text-faint); }
.stat-row .v{ color: var(--mat-green); font-weight:600; }

/* ---------- DOCSTRING / EXPLAINER ---------- */
.docblock{
  background: var(--bg-alt);
  border:1px solid var(--line);
  border-left:3px solid var(--syntax-cyan);
  border-radius:8px;
  padding:32px 34px;
  font-family: var(--font-mono);
  font-size:0.92rem;
  color: var(--text-dim);
}
.docblock .tag{ color: var(--text-faint); }
.docblock p{ margin-bottom:14px; }
.docblock p:last-child{ margin-bottom:0; }

/* ---------- VIDEOS ---------- */
.video-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.video-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  transition: transform .2s, border-color .2s;
}
.video-card:hover{ transform:translateY(-4px); border-color: var(--mat-green-dim); }
.video-thumb{
  aspect-ratio: 16/9;
  background:
    linear-gradient(135deg, var(--surface-2), var(--bg-alt));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  border-bottom:1px solid var(--line);
}
.play-btn{
  width:52px; height:52px; border-radius:50%;
  background: rgba(57,255,136,0.12);
  border:1px solid var(--mat-green-dim);
  display:flex; align-items:center; justify-content:center;
}
.play-btn::after{
  content:"";
  border-style:solid; border-width:9px 0 9px 15px;
  border-color: transparent transparent transparent var(--mat-green);
  margin-left:4px;
}
.video-card-body{ padding:16px 18px; }
.video-card-body .vtitle{ font-weight:600; margin-bottom:4px; font-size:0.95rem; }
.video-card-body .vmeta{ font-family:var(--font-mono); font-size:0.78rem; color:var(--text-faint); }

.channel-banner{
  margin-top:36px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
  background: linear-gradient(120deg, rgba(57,255,136,0.08), rgba(77,232,255,0.05));
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px 28px;
}
.channel-banner .cb-text{ font-family:var(--font-mono); font-size:0.9rem; color:var(--text-dim); }
.channel-banner .cb-text b{ color:var(--text); }

/* ---------- GALLERY / ROBOT ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.gallery-grid .tall{ grid-row: span 2; min-height:300px; }
.ph-tile{
  background: var(--surface);
  border:1px dashed var(--line);
  border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  min-height:140px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size:0.76rem;
  text-align:center;
  padding:14px;
}
.ph-tile .icon{ font-size:1.4rem; }

/* ---------- AWARD PHOTO CARDS ---------- */
.award-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:140px;
}
.gallery-grid .tall.award-card{ min-height:300px; }
.award-photo{
  width:100%;
  flex-grow:1;
  min-height:0;
  object-fit:cover;
  object-position:center;
  display:block;
  background: var(--surface-2);
}
.award-caption{
  padding:12px 14px;
  font-family: var(--font-mono);
  font-size:0.76rem;
  color: var(--text-dim);
  text-align:left;
}
.award-caption .meta{ color: var(--text-faint); display:block; margin-top:4px; }

/* ---------- ROLE CODE (used on founder page) ---------- */
.role-code{
  font-family: var(--font-mono);
  font-size:0.78rem;
  color: var(--syntax-cyan);
  margin-bottom:6px;
}
.role-code .kw{ color: var(--syntax-pink); }
.role-code .str{ color: var(--syntax-amber); }

/* ---------- FOUNDER ---------- */
.founder-card{
  display:flex;
  gap:40px;
  align-items:center;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:36px;
}
.founder-avatar{
  width:180px; height:180px; flex-shrink:0;
  border-radius:10px;
  background: linear-gradient(135deg, var(--surface-2), var(--bg-alt));
  border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-faint);
  font-family:var(--font-mono); font-size:0.78rem;
  object-fit: cover;
}
.founder-info .founder-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  margin-bottom:4px;
}
.founder-info .founder-role{
  color: var(--mat-green);
  font-family: var(--font-mono);
  font-size:0.85rem;
  margin-bottom:16px;
}
.founder-info .founder-bio{ color: var(--text-dim); max-width:520px; }

/* ---------- RESOURCES ---------- */
.resource-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
  max-width: 780px;
}
.resource-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .2s, border-color .2s;
}
.resource-card:hover{ transform:translateY(-4px); border-color: var(--mat-green-dim); }
.resource-icon{
  width:48px; height:48px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}
.resource-icon-img{ width:48px; height:48px; border-radius:10px; object-fit:contain; background:#fff; padding:6px; margin-bottom:4px; }
.resource-name{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; }
.resource-desc{ color: var(--text-dim); font-size:0.92rem; flex-grow:1; }
.resource-btn{ align-self:flex-start; margin-top:6px; }
.resource-sublink{ font-family: var(--font-mono); font-size:0.78rem; color: var(--syntax-cyan); }
.resource-sublink:hover{ color: var(--mat-green); }

/* ---------- FIELD RULER TOOL ---------- */
.field-tool{
  margin-top:44px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px;
}
.field-tool-controls{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:20px;
}
.field-tool-controls label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family: var(--font-mono);
  font-size:0.76rem;
  color: var(--text-faint);
}
.field-tool-controls input,
.field-tool-controls select{
  background: var(--bg-alt);
  border:1px solid var(--line);
  border-radius:6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size:0.88rem;
  padding:8px 10px;
  width:120px;
}
.field-tool-controls select{ width:220px; }
.field-tool-controls input:focus,
.field-tool-controls select:focus{ outline:2px solid var(--mat-green); outline-offset:1px; }
.field-tool-controls .ft-checkbox{
  flex-direction:row;
  align-items:center;
  gap:8px;
  align-self:flex-end;
  padding-bottom:8px;
}
.field-tool-controls .ft-checkbox input{ width:auto; }
.field-tool-controls button{ align-self:flex-end; }
.field-tool-map-wrap{
  border:1px dashed var(--line);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:20px;
  background: var(--bg-alt);
}
.field-tool-map-wrap svg{ display:block; width:100%; height:auto; cursor:crosshair; }
.ft-bg{ fill: var(--bg-alt); }
.ft-grid{ stroke: var(--line); stroke-width:2; }
.ft-border{ fill:none; stroke: var(--text-faint); stroke-width:4; }
.ft-line{ stroke: var(--syntax-amber); stroke-width:6; stroke-dasharray:14 10; }
.ft-marker{ stroke: var(--bg); stroke-width:3; }
.ft-marker-a{ fill: var(--mat-green); }
.ft-marker-b{ fill: var(--syntax-cyan); }
.field-tool-readout{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1px;
  background: var(--line);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.field-tool-readout .stat-row{
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  background: var(--surface);
  border-bottom:none;
}
.field-tool-readout .v{ font-size:1.2rem; }
.field-tool-hint{ color: var(--text-dim); font-size:0.92rem; margin-top:16px; }

/* ---------- CONTACT / FOOTER ---------- */
footer{
  border-top:1px solid var(--line);
  padding: 60px 0 32px;
  position:relative; z-index:1;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:36px;
  margin-bottom: 46px;
}
.footer-cta h3{
  font-family: var(--font-display);
  font-size:1.7rem;
  margin-bottom:14px;
  max-width:420px;
}
.social-row{ display:flex; gap:14px; }
.social-pill{
  font-family: var(--font-mono);
  font-size:0.82rem;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:20px;
  color: var(--text-dim);
  transition: all .2s;
}
.social-pill:hover{ border-color: var(--mat-green); color: var(--mat-green); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:26px; border-top:1px solid var(--line);
  font-family: var(--font-mono);
  font-size:0.76rem;
  color: var(--text-faint);
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-logo{ height:22px; width:auto; display:block; }
.footer-legal{
  margin-top:14px;
  font-family: var(--font-mono);
  font-size:0.7rem;
  color: var(--text-faint);
  opacity:0.7;
}

@media (max-width: 860px){
  .navlinks{ display:none; }
  .about-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr; }
  .resource-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid .tall{ grid-row:span 1; min-height:140px; }
  .explore-grid{ grid-template-columns: repeat(2,1fr); }
  .founder-card{ flex-direction:column; align-items:flex-start; text-align:left; }
  .founder-avatar{ width:120px; height:120px; }
  .field-tool-readout{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}