:root{
  --ink:#e9ecf2;
  --muted:#b9c0cf;
  --pane-alpha:0.16;            /* raise to 0.22 if text needs more contrast */
  --blur:28px;                  /* global glass blur */
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;color:var(--ink);font-family:Inter,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--ink);text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;height:auto;display:block}
html{scroll-behavior:smooth}

/* ===== Background video always visible ===== */
.bg-video{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.65) contrast(1.05) saturate(1.08);
  z-index:-1;pointer-events:none;background:#000;
}

/* Optional depth shapes (kept behind panes) */
.spheres{position:fixed;inset:0;pointer-events:none;z-index:0}
.spheres::before,.spheres::after{
  content:"";position:absolute;border-radius:50%;filter:blur(40px);opacity:.45;
  background:radial-gradient(circle at 30% 30%, #cfd8ff55, #90b4ff22 40%, transparent 60%);
}
.spheres::before{width:420px;height:420px;left:-80px;top:80px}
.spheres::after {width:520px;height:520px;right:-120px;bottom:40px}

/* ===== Universal glass pane ===== */
.glass{
  background:rgba(16,18,24,var(--pane-alpha));
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;
}
/* remove glossy corner dot */
.glass::after{ content:none; }

/* ===== Nav (glass) ===== */
.nav{
  position:fixed;top:12px;left:12px;right:12px;height:60px;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
}
.nav .brand{font-weight:800;letter-spacing:.2px}
.nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav a{color:var(--muted)}

/* ===== Main glass container ===== */
main.glass{max-width:1120px;margin:96px auto 40px auto;padding:16px}

/* Sections are also glass inside the main (stacked panes for depth) */
.section{
  margin:16px 0;padding:22px;border-radius:calc(var(--radius) - 4px);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(16,18,24,calc(var(--pane-alpha) + 0.04));
  backdrop-filter:blur(calc(var(--blur) - 6px)) saturate(130%);
  -webkit-backdrop-filter:blur(calc(var(--blur) - 6px)) saturate(130%);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.section h1,.section h2{margin:0 0 10px}

/* ===== About layout ===== */
.about{display:grid;grid-template-columns:1.4fr .9fr;gap:18px;align-items:start}
.about .lead{line-height:1.65}
.awards{margin:10px 0 0 18px;color:var(--muted)}
.awards li{margin:6px 0}
.about-photo img{
  width:280px;max-width:80vw;border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}

/* ===== Buttons (generic) ===== */
.cta-row,.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{
  display:inline-block;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.btn.ghost{background:transparent}
.btn:hover{border-color:#7dd3fc;color:#7dd3fc}

/* ===== Cards ===== */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
.card{
  padding:16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(16,18,24,calc(var(--pane-alpha) + 0.02));
  backdrop-filter:blur(calc(var(--blur) - 8px)) saturate(125%);
  -webkit-backdrop-filter:blur(calc(var(--blur) - 8px)) saturate(125%);
}
.meta{color:var(--muted);font-size:14px;margin-top:8px}

/* ===== Certificates tiles ===== */
.certs{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:800px){.certs{grid-template-columns:1fr 1fr}}
.cert{
  display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(16,18,24,calc(var(--pane-alpha) + 0.02));
  backdrop-filter:blur(calc(var(--blur) - 8px)) saturate(125%);
  -webkit-backdrop-filter:blur(calc(var(--blur) - 8px)) saturate(125%);
}
.cert img{width:120px;border-radius:8px;object-fit:cover}
.muted{color:var(--muted)}

/* ===== Footer ===== */
.footer{max-width:1120px;margin:0 auto 28px auto;display:flex;justify-content:space-between;padding:0 8px;color:var(--muted)}
.top{color:var(--muted)} .top:hover{color:#7dd3fc}

/* ===== Mobile tweaks ===== */
@media(max-width:820px){
  .about{grid-template-columns:1fr}
  .about-photo img{width:220px}
  .nav{top:8px;left:8px;right:8px;height:56px}
  main.glass{margin:90px auto 32px auto}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .bg-video{filter:brightness(.8) contrast(1)}
}

/* =========================================================
   ADDITIONS: HERO, PILLS, PROJECT MEDIA, TIMELINE
   =======================================================*/

/* HERO */
.hero{padding-top:10px}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.hero-title{font-size:42px;font-weight:800;margin:0 0 8px 0}
.hero-sub{font-size:18px;line-height:1.6;margin:0 0 16px 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px 12px;row-gap:12px}

/* Pills (social/contact) */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;background:rgba(16,18,24,.5);
  text-decoration:none;color:var(--ink);
  backdrop-filter:blur(10px);
}
.pill:hover{border-color:#7dd3fc;color:#7dd3fc}

/* Extra spacing to separate Contact from the rest */
.hero-actions .pill--contact {
  margin: right 40px;   /* tweak to taste: 24–40px */
}

/* Hero portrait — **square** (requested) */
.hero .about-photo img{
  width:220px;height:220px;object-fit:cover;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}

/* Project image helper */
.project-image{
  max-width:96%;border-radius:12px;margin:14px 0;
  box-shadow:0 6px 24px rgba(0,0,0,.24);
}

/* Small screens for hero */
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;text-align:left}
  .hero .about-photo{order:-1}
  .hero-title{font-size:34px}
}

/* === Experience: Split Timeline (Education | Professional) — FIXED === */
#experience .xp-split{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px 60px;
  align-items:start;
  margin-top:18px;
}

/* theme accent for dots (no purple) */
#experience{ --accent: var(--ink); }

/* Center axis — top→bottom (no page split) */
#experience .xp-axis{
  position:absolute;
  top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  width:2px;
  background:rgba(255,255,255,.9);
  opacity:.92; border-radius:2px;
  z-index:1;
}

/* Column headings */
#experience .xp-col-title{
  margin:0 0 12px 0; font-weight:800; letter-spacing:.1px; font-size:1.12rem;
}

/* Lists */
#experience .xp-timeline{ list-style:none; margin:0; padding:0; }
#experience .xp-item{
  position:relative;
  padding:0 0 16px 0;
  margin:0 0 20px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Text styles */
#experience .xp-role{ font-size:18px; line-height:1.35; margin:0 0 2px 0; color:var(--ink); }
#experience .xp-org, #experience .xp-date{ color:var(--muted); font-size:14px; }
#experience .xp-note{ margin:6px 0 0 0; color:var(--ink); font-size:14px; line-height:1.55; }
#experience .badge{
  font-size:.72rem; padding:.08rem .42rem; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; margin-left:.35rem; opacity:.9;
}

/* Dots near the center axis (use --accent, not purple) */
#experience .xp-edu .xp-item::after,
#experience .xp-pro .xp-item::before{
  content:""; position:absolute; top:2px; z-index:2;
  width:10px; height:10px; border-radius:50%;
  background: var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent);
}

/* Position dots toward center (tweak offset to your column gap) */
#experience .xp-edu .xp-item::after{ right:-30px; }
#experience .xp-pro  .xp-item::before{ left:-30px; }

/* Responsive stack */
@media (max-width: 980px){
  #experience .xp-split{ grid-template-columns:1fr; gap:18px; }
  #experience .xp-axis{ display:none; }
  #experience .xp-edu .xp-item::after,
  #experience .xp-pro  .xp-item::before{
    left:-18px; right:auto;
  }
  #experience .xp-item{ padding-left:6px; }
}