/* ========= STELLAR SYSTEMS — ABOUT.CSS (NAV-FREE, MOBILE-SAFE HEADSHOT) ========= */
/* Nav styles REMOVED — this file assumes css/nav.css is loaded sitewide */

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

/* Tokens */
:root{
  --container:1200px; --gutter:24px; --radius:16px;

  --s-1:12px; --s-2:20px; --s-3:32px; --s-4:48px; --s-5:64px; --s-6:100px;

  --bg:#0b0b13; --ink:#fff; --ink-2:#e2e2f0; --muted:#c8c5e0;

  --purple:#8f5fff; --purple-2:#b68aff; --purple-3:#7429c6; --blue:#3b82f6;

  --glass:rgba(15,15,25,.58); --border:rgba(255,255,255,.06);
  --elev-1:0 8px 18px rgba(0,0,0,.16); --elev-2:0 10px 26px rgba(0,0,0,.28);
}

/* Base */
html,body{
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); scroll-behavior:smooth;
}
html{ overflow-x:clip; }
body{ overflow-x:hidden; scroll-padding-top:120px; } /* anchor offset for fixed nav */

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
section{ position:relative; z-index:2; padding:var(--s-6) 0; }

/* subtle space background */
body::before{
  content:""; position:fixed; inset:0; z-index:0;
  background: radial-gradient(ellipse at center, #3c1a77 0%, var(--bg) 100%);
  opacity:.06;
}

/* ===== FOUNDERS ===== */
.founders {
  position: relative;
  padding: calc(var(--s-5) + 80px) 0 var(--s-4); /* reduced height */
  background: radial-gradient(circle at 35% -10%, #44208a 0%, rgba(68,32,138,.35) 35%, var(--bg) 92%);
  box-shadow: inset 0 -60px 80px -60px rgba(143,95,255,.16);
}
.gradient-bg{
  position:absolute; inset:-30% -30% auto -30%;
  height:160%; background:radial-gradient(ellipse at 60% 40%, var(--purple-3), #111827);
  filter:blur(140px); opacity:.34; z-index:0;
}

/* Zayed: image left, text right */
.founder-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-5);
}
.founder-block .intro {
  text-align: left;
}

/* Zayd: mirrored layout */
.founder-block.mirrored {
  grid-template-columns: 1fr auto;
}
.founder-block.mirrored .intro {
  order: 1;
  text-align: right;
}
.founder-block.mirrored .headshot {
  order: 2;
}

@media (max-width:960px){
  .founder-block,
  .founder-block.mirrored {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .founder-block .intro,
  .founder-block.mirrored .intro {
    text-align: center;
    order: unset;
  }
  .founder-block.mirrored .headshot {
    order: unset;
  }
}

.intro h1{ font-size:3rem; letter-spacing:-.02em; margin-bottom:14px; }
.subtitle{ color:#c5c5df; margin-bottom:18px; line-height:1.65; }

/* ===== HEADSHOT ===== */
.headshot{
  --size: clamp(180px, 28vw, 240px);
  width:var(--size); height:var(--size);
  position:relative; border-radius:50%;
  isolation:isolate; margin-inline:auto;
}
.headshot img{
  width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit;
  border:3px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(139,92,246,.35);
  filter: saturate(1.35) contrast(1.08) brightness(1.06);
  transition: filter .25s ease, transform .25s ease;
}
.headshot::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  mix-blend-mode:soft-light;
  background:radial-gradient(120% 120% at 30% 30%,
             rgba(143,95,255,.45),
             rgba(59,130,246,.35) 60%,
             transparent 70%);
  opacity:.65; z-index:1;
}
.headshot::before{
  content:""; position:absolute; left:50%; top:50%;
  width:130%; height:130%; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle,
             rgba(143,95,255,.55),
             rgba(59,130,246,.28) 58%,
             transparent 65%);
  filter: blur(22px);
}
.headshot:hover img{ filter: saturate(1.55) contrast(1.10) brightness(1.08); transform:translateY(-2px); }

/* Buttons */
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; white-space:nowrap; border-radius:10px;
}
.btn-primary{
  height:46px; line-height:46px; padding:0 20px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:0 0 18px rgba(139,92,246,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 0 24px rgba(139,92,246,.42); }
.btn-secondary{
  height:44px; line-height:44px; padding:0 18px;
  border:1px solid rgba(143,95,255,.45); color:#d9cffd; background:rgba(143,95,255,.10);
}
.btn-secondary.inline{ height:44px; line-height:44px; }

/* Current status list */
.now{ list-style:none; display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; color:#b9b5d6; }
.now li+li::before{ content:"•"; margin:0 8px; opacity:.35; }

/* ===== SNAPSHOT ===== */
.snapshot{ padding-top:var(--s-5); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3); }
@media(max-width:1024px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:720px){ .grid-3{ grid-template-columns:1fr; } }

.snap-card{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:24px; box-shadow:var(--elev-2);
}
.snap-card h3{ margin-bottom:10px; }
.list{ list-style:none; color:#dcdaf2; display:grid; gap:8px; }
.list li{ position:relative; padding-left:18px; }
.list li::before{ content:"•"; position:absolute; left:0; opacity:.45; }

/* ===== STORY ===== */
.story h2, .process h2, .stack h2{ text-align:center; font-size:2.2rem; margin-bottom:var(--s-4); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
@media(max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.story-box{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  padding:22px; border-radius:16px; color:#e9e7ff;
}

/* ===== PROCESS ===== */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); position:relative;
}
@media(max-width:1024px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .steps{ grid-template-columns:1fr; } }
@media(min-width:1025px){
  .steps::before{
    content:""; position:absolute; left:12px; right:12px; top:30px; height:2px;
    background:linear-gradient(90deg, rgba(143,95,255,.35), rgba(59,130,246,.28));
    z-index:0;
  }
}
.step{
  position:relative; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:22px 18px 18px; box-shadow:var(--elev-2);
}
.step .num{
  position:relative; z-index:1; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff;
  box-shadow:0 8px 18px rgba(139,92,246,.35); margin-bottom:10px;
}
.step h4{ margin-bottom:6px; color:#eae6ff; }
.step p{ color:#cbc8e6; }

/* ===== STACK / TOOLS ===== */
.stack{ padding-top:var(--s-5); }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  background:rgba(143,95,255,.12); border:1px solid rgba(143,95,255,.35); color:#e8e3ff; font-weight:700; font-size:.88rem;
}

/* ===== NOTE ===== */
.note .note-grid{
  display:grid; grid-template-columns:80px 1fr; gap:var(--s-3); align-items:center;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:22px; box-shadow:var(--elev-2);
}
@media(max-width:600px){ .note .note-grid{ grid-template-columns:1fr; text-align:center; } }
.avatar{
  width:80px; height:80px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.6rem;
  background:linear-gradient(135deg,var(--purple),var(--blue)); box-shadow:0 10px 24px rgba(139,92,246,.35);
}
.copy h3{ margin-bottom:6px; }
.copy p{ color:#dddaf0; }
.sig{ margin-top:6px; color:#bfaaff; font-weight:700; }

/* ===== FINAL CTA / FOOTER ===== */
.final-cta{
  text-align:center; background:linear-gradient(145deg,#6f2bd5,#3b1b75); border-radius:20px; color:#fff;
  box-shadow:0 10px 30px rgba(139,92,246,.25);
}
.final-cta .container{ display:grid; place-items:center; gap:var(--s-2); padding:var(--s-6) var(--gutter); }
.final-cta h2{ font-size:2.2rem; }

.footer{
  text-align:center; padding:40px var(--gutter); font-size:.9rem; color:#888;
  border-top:1px solid rgba(255,255,255,.08); margin-top:var(--s-6);
}

/* ===== Responsive typography ===== */
@media (max-width:900px){
  .intro h1{ font-size:2.6rem; }
  .subtitle{ font-size:1rem; }
}