/* ===== Theme tokens ===== */
:root{
  --bg-0:#07090d;           /* near-black */
  --bg-1:#0b1017;           /* deep blue-black panels */
  --bg-2:#101828;           /* card */
  --text:#d7dbe3;           /* body text */
  --muted:#98a2b3;
  --heading:#ffffff;

  --accent:#ff8a3d;         /* orange highlight */
  --accent-2:#8b5cf6;       /* subtle purple */
  --ring:#1f2937;           /* outline/border */

  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --radius:14px;
  --container:1100px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 "Inter","Segoe UI",system-ui,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 85% 25%, rgba(139,92,246,.10), transparent 55%),
    radial-gradient(700px 480px at 20% 80%, rgba(139,92,246,.08), transparent 60%),
    var(--bg-0);
}

/* containers */
.container{max-width:var(--container); margin:0 auto; padding:0 20px}

/* ===== Header / Nav ===== */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px)}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0; border-bottom:1px solid #111827; background:rgba(7,9,13,.6);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--heading); text-decoration:none}
.brand .brand-text{font-weight:700; letter-spacing:.2px}
.brand .hq{color:var(--accent); font-weight:800}
.brand.compact .brand-text{font-weight:700}

.brand-mark{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:#0f172a; box-shadow: inset 0 0 0 1px #1f2937, 0 0 0 6px rgba(139,92,246,.08)}
.mark-ring{fill:none; stroke:#334155; stroke-width:1.5}
.mark-plus{stroke:#ffffff; stroke-width:2; stroke-linecap:round}

.nav-links{list-style:none; display:flex; gap:20px; margin:0; padding:0}
.nav-links a{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px;
}
.nav-links a:hover{color:var(--heading); background:#0b1017}
.nav-links a.active{color:var(--heading); border:1px solid #1f2937; background:rgba(17,24,39,.35)}

.hamburger{display:none; font-size:22px; color:#fff; background:none; border:0}

/* Mobile nav */
@media (max-width:860px){
  .hamburger{display:block}
  .nav-links{display:none; position:absolute; right:20px; top:60px; flex-direction:column; background:#0b1017; border:1px solid #111827; padding:12px; border-radius:10px; box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
}

/* ===== Hero ===== */
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:28px;
  padding:56px 0 34px;
}
.hero-title{
  font-size:48px; line-height:1.1; color:var(--heading);
  text-shadow:0 0 18px rgba(139,92,246,.15);
}
.hero-sub{color:#b8c0cc; margin:.35rem 0 1rem; font-weight:600}
.hero-lead{color:#c7ccd6; max-width:58ch; margin-bottom:18px}

.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 8px}
.btn{
  display:inline-block; padding:10px 16px; border-radius:10px;
  border:1px solid #1f2937; color:var(--heading); background:#0b1017; text-decoration:none; font-weight:600;
}
.btn:hover{border-color:#273249; box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.btn.primary{background:linear-gradient(180deg,#111827,#0b1017); border-color:#273249}
.btn.ghost{background:transparent}

.hero-links{margin-top:8px; color:var(--muted)}
.hero-links a{color:#cbd5e1}
.hero-links .dot{opacity:.5; margin:0 8px}

/* Highlights card */
.hero-card{
  align-self:start; background:linear-gradient(180deg,#0d1320,#0b1017);
  border:1px solid #111827; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.pill{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; letter-spacing:.2px;
  color:#d6d6ff; background:rgba(139,92,246,.15); border:1px solid #2a2f41; margin-bottom:10px;
}
.card-list{list-style:disc; padding-left:20px; color:#cdd3df}
.card-list li{margin:.45rem 0}

@media (max-width:980px){
  .hero{grid-template-columns:1fr; padding:30px 0}
  .hero-card{order:2}
}

/* === Project Bubbles === */
.bubble-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:980px){ .bubble-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .bubble-grid{grid-template-columns:1fr} }

.project-bubble{
  position:relative;
  cursor:pointer;
  border-radius:999px;                  /* circular when collapsed */
  background: radial-gradient(120% 120% at 30% 25%, rgba(139,92,246,.12), transparent 60%), #0b1017;
  border:1px solid #111827;
  box-shadow: var(--shadow);
  color:var(--text);
  padding:26px 22px;
  min-height:140px;
  transition:
    border-radius .35s ease,
    background .35s ease,
    transform .25s ease,
    box-shadow .25s ease;
  outline:none;
}
.project-bubble:hover{ box-shadow:0 12px 36px rgba(0,0,0,.45) }
.project-bubble:focus-visible{ box-shadow:0 0 0 3px rgba(139,92,246,.35) }

.bubble-title{
  margin:0;
  text-align:center;
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
}

/* Hidden content area */
.bubble-body{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .45s ease, opacity .35s ease;
  margin-top:10px;
}

/* Expanded state turns circle into a card-like bubble */
.project-bubble.expanded{
  border-radius:22px;
  background:
    radial-gradient(100% 120% at 85% 15%, rgba(255,138,61,.18), transparent 60%),
    radial-gradient(120% 120% at 20% 80%, rgba(139,92,246,.16), transparent 60%),
    #0e1422;
  transform:translateY(-2px);
  box-shadow:0 14px 42px rgba(0,0,0,.5), 0 0 0 1px #1f2937 inset;
}
.project-bubble.expanded .bubble-body{
  max-height:300px;      /* adjust based on expected content */
  opacity:1;
}
.bubble-body p{ margin:.4rem 0 .6rem; color:#cfd6e1 }
.bubble-points{ padding-left:18px; margin:0 }
.bubble-points li{ margin:.3rem 0 }

/* ===== Home split panels ===== */
.home-split{display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:24px 0 40px}
.panel{
  background:linear-gradient(180deg,#0e1422,#0b1017);
  border:1px solid #111827; border-radius:var(--radius); padding:18px 18px 16px; box-shadow:var(--shadow)
}
.panel h2{margin:4px 0 10px; color:var(--heading)}
.edu-card{background:#0b1017; border:1px solid #111827; border-radius:12px; padding:12px; margin:.5rem 0 1rem}
.edu-title{font-weight:700}
.edu-sub{color:#b8c0cc; font-size:.95rem; margin-bottom:.35rem}
.edu-points{margin:0; padding-left:18px}
.link-arrow{color:var(--accent); text-decoration:none; font-weight:600}
.link-arrow:hover{text-decoration:underline}
@media (max-width:900px){.home-split{grid-template-columns:1fr}}

/* ===== Footer ===== */
.site-footer{border-top:1px solid #111827; background:#0b1017; margin-top:24px}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .6fr; gap:20px; padding:24px 0}
.footer-brand{color:#cbd5e1}
.foot-copy{color:#94a3b8; margin-top:6px}
.foot-links{list-style:none; padding:0; margin:8px 0 0}
.foot-links li{margin:6px 0}
.foot-links a{color:#cbd5e1; text-decoration:none}
.foot-links a:hover{color:#fff}
@media (max-width:880px){
  .footer-grid{grid-template-columns:1fr}
}

/* ===== Shared content pages (optional carry-over) ===== */
section h1, section h2{color:var(--heading)}
.card, .panel, .hero-card{outline:0; box-shadow:var(--shadow)}