/* Plural Studio — design tokens + component styles */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* TYPE SCALE */
  --text-xs:clamp(0.75rem,0.7rem + 0.2vw,0.8125rem);
  --text-sm:clamp(0.8125rem,0.78rem + 0.2vw,0.9375rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.0625rem);
  --text-lg:clamp(1.125rem,1rem + 0.65vw,1.375rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2.25rem,1.6rem + 3vw,4rem);
  --text-3xl:clamp(2.75rem,1.4rem + 5.5vw,5.75rem);
  --text-hero:clamp(3.25rem,1rem + 8vw,8.5rem);

  /* SPACING — 4px base */
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* RADIUS */
  --radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-xl:22px;--radius-full:9999px;

  /* TRANSITIONS */
  --transition-interactive:220ms cubic-bezier(0.16,1,0.3,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);

  /* CONTENT WIDTHS */
  --content-narrow:680px;
  --content-default:1080px;
  --content-wide:1320px;

  /* FONTS */
  --font-display:'Clash Display','Inter',system-ui,sans-serif;
  --font-body:'Satoshi','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Menlo,monospace;
}

/* DARK MODE (default) */
:root,
[data-theme='dark']{
  --color-bg:#0b0c0a;
  --color-surface:#121311;
  --color-surface-2:#191a17;
  --color-surface-offset:#1f201d;
  --color-surface-offset-2:#262724;
  --color-divider:#23241f;
  --color-border:#2a2b27;
  --color-border-strong:#3a3b36;

  --color-text:#ecebe6;
  --color-text-muted:#9d9c95;
  --color-text-faint:#5a5953;
  --color-text-inverse:#0b0c0a;

  --color-primary:#0fd4cc;          /* electric teal */
  --color-primary-hover:#36e6df;
  --color-primary-dim:#0aa39d;
  --color-primary-highlight:#0e3d3b;

  --color-accent:#f5a623;            /* amber for future/pipeline */
  --color-accent-dim:#9b6a16;
  --color-accent-highlight:#3a2c10;

  --color-pink:#ff6b9d;
  --color-violet:#a78bff;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 28px 60px rgba(0,0,0,.55);

  --grid-line:rgba(255,255,255,.04);
}

/* LIGHT MODE */
[data-theme='light']{
  --color-bg:#f6f5f0;
  --color-surface:#ffffff;
  --color-surface-2:#fafaf6;
  --color-surface-offset:#eeece4;
  --color-surface-offset-2:#e4e2d8;
  --color-divider:#dedcd3;
  --color-border:#d4d1c6;
  --color-border-strong:#a8a59a;

  --color-text:#15170f;
  --color-text-muted:#5d5c54;
  --color-text-faint:#a8a69b;
  --color-text-inverse:#f6f5f0;

  --color-primary:#067e7a;
  --color-primary-hover:#0a9a95;
  --color-primary-dim:#04514f;
  --color-primary-highlight:#cce8e6;

  --color-accent:#b86a00;
  --color-accent-dim:#774301;
  --color-accent-highlight:#f5dfc1;

  --color-pink:#c93770;
  --color-violet:#6443d6;

  --shadow-sm:0 1px 2px rgba(20,18,12,.06);
  --shadow-md:0 8px 24px rgba(20,18,12,.08);
  --shadow-lg:0 28px 60px rgba(20,18,12,.12);

  --grid-line:rgba(20,18,12,.05);
}

/* ============== LAYOUT ============== */
.container{
  width:100%;
  max-width:var(--content-default);
  margin-inline:auto;
  padding-inline:var(--space-6);
}
.container--wide{max-width:var(--content-wide)}
.container--narrow{max-width:var(--content-narrow)}

section{
  padding-block:clamp(var(--space-16),9vw,var(--space-32));
  position:relative;
}

/* ============== HEADER ============== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:var(--space-4) 0;
  background:color-mix(in oklab, var(--color-bg) 75%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in oklab, var(--color-border) 50%, transparent);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  max-width:var(--content-wide);margin-inline:auto;
  padding-inline:var(--space-6);
}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text)}
.brand-mark{width:32px;height:32px;display:block}
.brand-word{font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:-0.01em}
.brand-word em{font-style:normal;color:var(--color-primary)}

.nav-links{display:flex;align-items:center;gap:var(--space-6)}
.nav-links a{
  font-size:var(--text-sm);color:var(--color-text-muted);
  position:relative;
}
.nav-links a:hover{color:var(--color-text)}

.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle{
  width:36px;height:36px;display:grid;place-items:center;
  color:var(--color-text-muted);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
}
.theme-toggle:hover{color:var(--color-text);border-color:var(--color-border-strong)}

.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  font-family:var(--font-body);font-weight:700;
  font-size:var(--text-sm);
  border-radius:var(--radius-full);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{
  background:var(--color-primary);color:var(--color-text-inverse);
}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
.btn-ghost{
  border-color:var(--color-border);color:var(--color-text);
  background:transparent;
}
.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}

@media (max-width:780px){
  .nav-links{display:none}
}

/* ============== HERO ============== */
.hero{
  padding-top:calc(var(--space-32) + var(--space-12));
  padding-bottom:var(--space-32);
  position:relative;overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events:none;
}
.hero-glow{
  position:absolute;width:600px;height:600px;
  top:-100px;right:-150px;
  background:radial-gradient(circle, color-mix(in oklab, var(--color-primary) 35%, transparent) 0%, transparent 65%);
  filter:blur(40px);pointer-events:none;
}
.hero-glow--2{
  top:auto;bottom:-200px;right:auto;left:-100px;
  width:500px;height:500px;
  background:radial-gradient(circle, color-mix(in oklab, var(--color-accent) 25%, transparent) 0%, transparent 65%);
}

.hero-inner{position:relative;z-index:1}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  margin-bottom:var(--space-6);
  text-transform:uppercase;letter-spacing:0.08em;
}
.hero-eyebrow .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--color-primary);
  box-shadow:0 0 12px var(--color-primary);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.hero h1{
  font-size:var(--text-hero);
  font-weight:600;
  line-height:0.95;
  letter-spacing:-0.04em;
  max-width:18ch;
  margin-bottom:var(--space-8);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--color-primary),var(--color-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{
  font-size:var(--text-lg);
  max-width:58ch;
  color:var(--color-text-muted);
  margin-bottom:var(--space-10);
}
.hero-cta{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-16)}

.hero-meta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-6);
  padding-top:var(--space-8);
  border-top:1px solid var(--color-border);
  max-width:900px;
}
.hero-meta div{display:flex;flex-direction:column;gap:var(--space-1)}
.hero-meta dt{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);text-transform:uppercase;letter-spacing:0.05em;
}
.hero-meta dd{
  font-family:var(--font-display);font-size:var(--text-base);
  color:var(--color-text);font-weight:500;
}
@media (max-width:680px){
  .hero-meta{grid-template-columns:repeat(2,1fr)}
}

/* ============== SECTION HEADERS ============== */
.section-header{
  margin-bottom:var(--space-16);
  max-width:var(--content-narrow);
}
.section-eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--color-primary);
  margin-bottom:var(--space-4);
}
.section-title{
  font-size:var(--text-2xl);
  font-weight:500;
  line-height:1.0;
  letter-spacing:-0.03em;
  margin-bottom:var(--space-5);
}
.section-lead{
  font-size:var(--text-lg);
  color:var(--color-text-muted);
}

/* ============== THESIS ============== */
.thesis{position:relative}
.thesis-quote{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.03em;
  max-width:24ch;
  margin-bottom:var(--space-12);
}
.thesis-quote em{font-style:normal;color:var(--color-primary)}

.thesis-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
}
.thesis-card{
  padding:var(--space-8) var(--space-6);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  position:relative;overflow:hidden;
}
.thesis-card .num{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--color-text-faint);
  display:block;margin-bottom:var(--space-4);
}
.thesis-card h3{
  font-size:var(--text-lg);
  font-weight:600;
  margin-bottom:var(--space-3);
  letter-spacing:-0.01em;
}
.thesis-card p{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  line-height:1.55;
}
@media (max-width:780px){.thesis-grid{grid-template-columns:1fr}}

/* ============== OPERATING MODEL ============== */
.operating{background:var(--color-surface);position:relative}
.op-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--space-16);
  align-items:start;
}
.op-list{display:flex;flex-direction:column;gap:var(--space-8)}
.op-item{
  padding-left:var(--space-6);
  border-left:2px solid var(--color-border);
  position:relative;
}
.op-item::before{
  content:'';position:absolute;left:-7px;top:8px;
  width:12px;height:12px;border-radius:50%;
  background:var(--color-bg);
  border:2px solid var(--color-primary);
}
.op-item h3{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:600;
  margin-bottom:var(--space-2);
}
.op-item p{color:var(--color-text-muted);font-size:var(--text-sm)}

.op-visual{
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  position:sticky;top:120px;
}
.op-visual h4{
  font-family:var(--font-mono);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--color-text-muted);margin-bottom:var(--space-6);
}
.cycle-ring{
  width:100%;aspect-ratio:1;max-width:380px;margin:0 auto;
  position:relative;display:grid;place-items:center;
}
@media (max-width:920px){
  .op-grid{grid-template-columns:1fr}
  .op-visual{position:relative;top:0}
}

/* ============== VENTURES ============== */
.ventures{position:relative}
.venture-tabs{
  display:flex;gap:var(--space-2);
  margin-bottom:var(--space-10);
  padding:var(--space-1);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  width:max-content;
  max-width:100%;overflow-x:auto;
}
.venture-tab{
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-full);
  font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);
  color:var(--color-text-muted);white-space:nowrap;
}
.venture-tab.active{
  background:var(--color-primary);color:var(--color-text-inverse);
  font-weight:700;
}
.venture-tab .count{
  font-family:var(--font-mono);font-size:var(--text-xs);
  opacity:.7;margin-left:var(--space-1);
}

.venture-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--space-6);
}
.venture-card{
  display:flex;flex-direction:column;
  padding:var(--space-8);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  position:relative;
  overflow:hidden;
  min-height:340px;
}
.venture-card[hidden]{display:none}
.venture-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--card-accent,var(--color-primary));
}
.venture-card .status{
  align-self:flex-start;
  font-family:var(--font-mono);font-size:var(--text-xs);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  background:color-mix(in oklab, var(--card-accent,var(--color-primary)) 18%, transparent);
  color:var(--card-accent,var(--color-primary));
  text-transform:uppercase;letter-spacing:0.06em;
  margin-bottom:var(--space-5);
}
.venture-card h3{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--text-xl);
  margin-bottom:var(--space-2);
}
.venture-card .tag{
  font-size:var(--text-sm);color:var(--color-text-muted);
  margin-bottom:var(--space-5);
}
.venture-card p{
  font-size:var(--text-sm);color:var(--color-text-muted);
  line-height:1.6;margin-bottom:var(--space-6);
}
.venture-stack{
  margin-top:auto;
  display:flex;flex-wrap:wrap;gap:var(--space-2);
}
.venture-stack span{
  font-family:var(--font-mono);font-size:var(--text-xs);
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  color:var(--color-text-muted);
}

.venture-card.future{--card-accent:var(--color-accent)}
.venture-card.adjacent{--card-accent:var(--color-violet)}

/* ============== SKILL LIBRARY ============== */
.skills{
  background:var(--color-surface);
  position:relative;overflow:hidden;
}
.skills-equation{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-base);
  padding:var(--space-6);
  background:var(--color-bg);
  border:1px dashed var(--color-border-strong);
  border-radius:var(--radius-lg);
  margin-bottom:var(--space-12);
}
.skills-equation .skill{
  padding:var(--space-2) var(--space-3);
  background:color-mix(in oklab, var(--color-primary) 14%, transparent);
  color:var(--color-primary);
  border-radius:var(--radius-sm);
  font-weight:500;
}
.skills-equation .op{color:var(--color-text-muted)}
.skills-equation .product{
  margin-left:auto;font-weight:700;color:var(--color-text);
  padding:var(--space-2) var(--space-4);
  background:var(--color-primary);
  color:var(--color-text-inverse);
  border-radius:var(--radius-md);
}
@media (max-width:680px){.skills-equation .product{margin-left:0;width:100%;text-align:center;margin-top:var(--space-2)}}

.skill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--space-3);
}
.skill-tile{
  padding:var(--space-5);
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:var(--space-2);
  position:relative;
}
.skill-tile .key{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-primary);
}
.skill-tile h4{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-base);
  letter-spacing:-0.01em;
}
.skill-tile p{
  font-size:var(--text-xs);color:var(--color-text-muted);
  line-height:1.5;
}

/* ============== ROADMAP ============== */
.roadmap{position:relative}
.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
  position:relative;
}
.roadmap-grid::before{
  content:'';position:absolute;top:18px;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
  opacity:.4;
}
.quarter{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  position:relative;
}
.quarter-marker{
  width:36px;height:36px;border-radius:50%;
  background:var(--color-bg);
  border:2px solid var(--color-primary);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;
  color:var(--color-primary);
  margin-bottom:var(--space-2);position:relative;z-index:1;
}
.quarter.future .quarter-marker{
  border-color:var(--color-accent);color:var(--color-accent);
}
.quarter h3{
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:600;letter-spacing:-0.01em;
  margin-bottom:var(--space-2);
}
.quarter .label{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);text-transform:uppercase;letter-spacing:0.08em;
  margin-bottom:var(--space-4);
}
.quarter ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.quarter li{
  font-size:var(--text-sm);color:var(--color-text-muted);
  line-height:1.5;padding-left:var(--space-4);position:relative;
}
.quarter li::before{
  content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--color-primary);
}
.quarter.future li::before{background:var(--color-accent)}
.quarter li strong{color:var(--color-text);font-weight:500}
@media (max-width:920px){
  .roadmap-grid{grid-template-columns:1fr}
  .roadmap-grid::before{display:none}
}

/* ============== TEAM ============== */
.team{background:var(--color-surface);position:relative}
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-5);
}
.team-card{
  padding:var(--space-6);
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.team-card.open{
  border-style:dashed;
  background:transparent;
}
.team-card .role{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-primary);
  text-transform:uppercase;letter-spacing:0.08em;
}
.team-card.open .role{color:var(--color-accent)}
.team-card h3{
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:600;letter-spacing:-0.01em;
}
.team-card p{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ============== ENTITY BAR ============== */
.entity-bar{
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-8) 0;
  background:var(--color-surface-2);
}
.entity-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-6);
  font-family:var(--font-mono);
}
.entity-grid div{display:flex;flex-direction:column;gap:var(--space-1)}
.entity-grid dt{
  font-size:var(--text-xs);color:var(--color-text-faint);
  text-transform:uppercase;letter-spacing:0.08em;
}
.entity-grid dd{
  font-size:var(--text-sm);color:var(--color-text);
  font-weight:500;
}

/* ============== FOOTER ============== */
footer.site-footer{
  padding-block:var(--space-16);
  border-top:1px solid var(--color-border);
}
.footer-inner{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:var(--space-12);
  margin-bottom:var(--space-12);
}
.footer-inner h4{
  font-family:var(--font-mono);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--color-text-faint);
  margin-bottom:var(--space-4);
}
.footer-inner ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.footer-inner a{font-size:var(--text-sm);color:var(--color-text-muted)}
.footer-inner a:hover{color:var(--color-primary)}
.footer-tagline{
  font-family:var(--font-display);
  font-size:var(--text-lg);font-weight:500;
  max-width:30ch;line-height:1.2;
}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:var(--space-4);
  padding-top:var(--space-8);
  border-top:1px solid var(--color-border);
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);
}
@media (max-width:780px){
  .footer-inner{grid-template-columns:1fr}
}

/* ============== ANIMATIONS ============== */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in{opacity:1;transform:translateY(0)}

/* light mode hero adjustments */
[data-theme='light'] .hero h1 em{
  background:linear-gradient(120deg,var(--color-primary),#7038d8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}