
:root {
  --bg: #111315;
  --bg-soft: #171a1d;
  --panel: #1d2125;
  --panel-hover: #23282d;
  --text: #f1f1ed;
  --muted: #a5aaae;
  --line: #30353a;
  --accent: #c7ff4a;
  --max-width: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.container { width: min(calc(100% - 48px), var(--max-width)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(17,19,21,.92); border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav-wrap { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; font-weight:800; letter-spacing:.08em; }
.brand-main { font-size:20px; }
.brand-separator,.brand-lab { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.main-nav { display:flex; gap:30px; }
.main-nav a { color:var(--muted); text-decoration:none; font-size:14px; transition:color 160ms ease; }
.main-nav a:hover,.main-nav a:focus { color:var(--text); }
.hero {
  min-height:74vh; display:flex; align-items:center; border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 78% 26%,rgba(199,255,74,.075),transparent 28%),linear-gradient(180deg,#111315 0%,#131619 100%);
}
.hero-content { padding:92px 0; }
.eyebrow,.section-index,.project-meta,.coming-soon {
  margin:0 0 26px; color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
}
.hero h1 { max-width:820px; margin:0; font-size:clamp(54px,8vw,104px); line-height:.98; letter-spacing:-.055em; }
.hero-lead { max-width:720px; margin:34px 0 38px; color:#c7cbce; font-size:clamp(19px,2vw,24px); line-height:1.45; }
.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px;
  border:1px solid var(--accent); color:#111315; background:var(--accent);
  text-decoration:none; font-weight:700; transition:transform 160ms ease,opacity 160ms ease;
}
.button:hover { transform:translateY(-2px); opacity:.92; }
.section { padding:112px 0; border-bottom:1px solid var(--line); }
.section-alt { background:var(--bg-soft); }
.two-columns { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; }
h2 { margin:0; font-size:clamp(36px,5vw,62px); line-height:1.05; letter-spacing:-.04em; }
.section-copy { max-width:700px; }
.section-copy p,.section-heading p,.contact-copy,.project-main p,.card p,.feature-card p,.purchase-copy { color:var(--muted); }
.section-copy p:first-child { margin-top:0; }
.process {
  display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:86px; padding:26px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:14px; text-transform:uppercase; letter-spacing:.08em;
}
.process .arrow { color:var(--accent); }
.section-heading { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:70px; align-items:end; margin-bottom:54px; }
.section-heading p { margin:0; max-width:500px; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.card { min-height:290px; padding:30px; background:var(--panel); border:1px solid var(--line); transition:transform 160ms ease,background 160ms ease; }
.card:hover { transform:translateY(-3px); background:var(--panel-hover); }
.card-number { margin:0 0 70px; color:var(--accent)!important; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; }
.card h3,.project-card h3 { margin:0 0 16px; font-size:26px; }
.project-card { background:var(--panel); border:1px solid var(--line); }
.project-card-link { padding:0; }
.project-link { display:block; padding:34px; text-decoration:none; }
.project-link:hover .text-link,.project-link:focus .text-link { color:var(--accent); }
.project-meta { display:flex; justify-content:space-between; margin-bottom:70px; }
.project-main { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:60px; align-items:end; }
.project-main p { max-width:700px; margin-bottom:0; }
.status { display:inline-flex; align-items:center; gap:10px; color:var(--muted); white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.status-dot { width:8px; height:8px; background:var(--accent); border-radius:999px; }
.coming-soon { margin:30px 0 0; text-align:right; }
.manifesto { margin-top:36px; color:var(--text)!important; font-weight:700; }
.contact-section { padding-top:132px; padding-bottom:132px; }
.contact-section h2 { max-width:830px; }
.contact-copy { max-width:700px; margin:28px 0 34px; }
.contact-link { color:var(--accent); font-size:clamp(22px,3vw,34px); text-decoration:none; border-bottom:1px solid rgba(199,255,74,.45); }
.site-footer { padding:32px 0; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.footer-grid { display:grid; grid-template-columns:1fr 2fr 1fr; gap:30px; }
.footer-grid span:nth-child(2) { text-align:center; }
.footer-grid span:last-child { text-align:right; }
.text-link { display:inline-block; margin-top:20px; color:var(--text); text-decoration:none; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }

.product-hero {
  padding:110px 0 100px; border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 82% 28%,rgba(199,255,74,.08),transparent 26%),linear-gradient(180deg,#111315 0%,#15181b 100%);
}
.product-hero-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:70px; align-items:center; }
.product-hero h1 { margin:0; font-size:clamp(54px,7vw,96px); line-height:.95; letter-spacing:-.055em; }
.product-lead { max-width:700px; margin:30px 0 34px; color:#c7cbce; font-size:clamp(19px,2vw,23px); line-height:1.5; }
.product-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
.button-secondary { background:transparent; color:var(--text); border-color:var(--line); }
.button-secondary:hover { border-color:var(--text); }
.button-disabled { opacity:.72; cursor:default; }
.product-facts { display:flex; flex-wrap:wrap; gap:10px 22px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.product-visual { padding:18px; background:var(--panel); border:1px solid var(--line); }
.product-visual img,.product-gallery img { display:block; width:100%; height:auto; background:#0b0d0f; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-card { min-height:250px; padding:28px; background:var(--panel); border:1px solid var(--line); }
.feature-kicker { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; letter-spacing:.11em; }
.feature-card h3 { margin:52px 0 14px; font-size:25px; }
.feature-card p { margin:0; }
.product-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.product-gallery figure { margin:0; padding:14px; background:var(--panel); border:1px solid var(--line); }
.product-gallery .gallery-large { grid-column:1 / -1; }
.product-gallery figcaption { padding:12px 4px 0; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.video-frame { overflow:hidden; background:#090b0c; border:1px solid var(--line); aspect-ratio:16 / 9; }
.video-frame video { display:block; width:100%; height:100%; object-fit:contain; }
.purchase-panel { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:70px; align-items:center; }
.purchase-box { display:flex; flex-direction:column; gap:14px; padding:30px; background:var(--panel); border:1px solid var(--line); }
.purchase-box strong { font-size:34px; line-height:1; }
.purchase-box > span:not(.button) { color:var(--muted); }
.purchase-label { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

@media (max-width:900px) {
  .product-hero-grid,.purchase-panel { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .container { width:min(calc(100% - 32px),var(--max-width)); }
  .nav-wrap { min-height:68px; }
  .main-nav { gap:18px; }
  .main-nav a { font-size:12px; }
  .hero { min-height:68vh; }
  .section { padding:82px 0; }
  .two-columns,.section-heading,.project-main { grid-template-columns:1fr; gap:38px; }
  .cards { grid-template-columns:1fr; }
  .card { min-height:0; }
  .card-number { margin-bottom:44px; }
  .process { align-items:flex-start; flex-direction:column; }
  .process .arrow { transform:rotate(90deg); }
  .project-meta { margin-bottom:52px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid span:nth-child(2),.footer-grid span:last-child { text-align:left; }
}
@media (max-width:620px) {
  .feature-grid,.product-gallery { grid-template-columns:1fr; }
  .product-gallery .gallery-large { grid-column:auto; }
  .product-hero { padding-top:78px; }
}
@media (max-width:580px) {
  .nav-wrap { align-items:flex-start; flex-direction:column; padding:16px 0; gap:10px; }
  .main-nav { width:100%; justify-content:space-between; gap:10px; }
  .hero-content { padding:72px 0; }
  .hero h1 { font-size:clamp(48px,16vw,72px); }
  .project-link { padding:24px; }
  .project-meta { flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}
