:root{
  --bg:#070b12;
  --panel: rgba(17,24,39,.82);
  --panel2: rgba(17,24,39,.70);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#60a5fa;
  --border:rgba(255,255,255,.10);
  --border2:rgba(255,255,255,.14);
  --shadow:0 18px 40px rgba(0,0,0,.42);
  --radius:18px;
  --radius2:22px;

  --wrap: 1080px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
small{color:var(--muted)}
h1,h2,h3{margin:0}
p{margin:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}
main{position:relative; z-index:2}
header{position:relative; z-index:3}
footer{position:relative; z-index:2}

/* ===== Background (ALWAYS behind content) ===== */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(96,165,250,.16), transparent 60%),
    radial-gradient(700px 380px at 80% 28%, rgba(167,139,250,.13), transparent 65%),
    radial-gradient(800px 420px at 30% 85%, rgba(34,211,238,.08), transparent 70%),
    linear-gradient(180deg, rgba(7,11,18,.40), rgba(7,11,18,.92));
}
.g1,.g2{
  position:absolute;
  border-radius:999px;
  filter: blur(60px);
  opacity:.22;
  transform: translate3d(0,0,0);
}
.g1{
  width:520px; height:520px;
  left:-140px; top:-160px;
  background: rgba(96,165,250,.8);
}
.g2{
  width:560px; height:560px;
  right:-180px; top:120px;
  background: rgba(167,139,250,.75);
}
.cloud{
  position:absolute;
  width:320px;
  height:160px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);
  box-shadow: 0 20px 80px rgba(0,0,0,.25);
  filter: blur(.2px);
  opacity:.45;
  transform: translate3d(0,0,0);
}
.cloud::before,
.cloud::after{
  content:"";
  position:absolute;
  background: inherit;
  border-radius:999px;
  border: inherit;
}
.cloud::before{ width:170px; height:120px; left:34px; top:-40px; }
.cloud::after{ width:210px; height:140px; left:120px; top:-52px; }

.c1{left:68%; top:110px}
.c2{left:74%; top:160px; opacity:.30}
.c3{left:10%; top:64%; opacity:.25}
.c4{left:62%; top:78%; opacity:.18}
.c5{left:28%; top:36%; opacity:.14}

.cloud.jump{
  animation: cloudHop .17s ease-out;
}
@keyframes cloudHop{
  0%{ transform: translateY(0); }
  55%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}

/* ===== Top bar ===== */
.top{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(7,11,18,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}
.dot{
  width:9px;height:9px;border-radius:99px;background:var(--accent);
  box-shadow:0 0 18px rgba(96,165,250,.55);
}
.nav{
  display:flex;
  align-items:center;
  gap:16px;
  font-weight:700;
  color:rgba(229,231,235,.88);
}
.nav a{opacity:.90}
.nav a:hover{opacity:1}
.nav .cta{
  padding:10px 14px;
  border-radius:12px;
  background:rgba(96,165,250,.92);
  color:#07101e;
  box-shadow:0 10px 30px rgba(96,165,250,.22);
}
.nav .active{
  color:#fff;
  opacity:1;
}

/* ===== Hero / headings ===== */
.hero{
  padding:48px 0 26px;
}
.kicker{
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(229,231,235,.68);
  margin-bottom:10px;
}
.h1{
  font-size:56px;
  line-height:1.02;
  letter-spacing:-.02em;
  font-weight:800;
  margin-bottom:12px;
}
.h1 .accent{color:var(--accent)}
.sub{
  color:rgba(229,231,235,.78);
  font-weight:600;
  max-width:720px;
  line-height:1.45;
}

/* ===== Pills / buttons ===== */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border2);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-weight:800;
}
.pill:hover{border-color: rgba(255,255,255,.22)}
.pill.primary{
  background: rgba(96,165,250,.92);
  border-color: rgba(96,165,250,.92);
  color:#07101e;
}
.pill.ghost{
  background: rgba(255,255,255,.03);
  color:rgba(229,231,235,.92);
}

/* ===== Cards ===== */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.card.pad{padding:18px}
.card.soft{background: var(--panel2)}
.card.glow{
  position:relative;
}
.card.glow::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 18% 15%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(520px 220px at 82% 20%, rgba(167,139,250,.18), transparent 60%);
  opacity:.45;
}

/* ===== Grids ===== */
.grid{
  display:grid;
  gap:16px;
}
.grid.two{grid-template-columns: 1.15fr .85fr}
.grid.three{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 980px){
  .h1{font-size:44px}
  .grid.two{grid-template-columns: 1fr}
  .grid.three{grid-template-columns: 1fr}
}

/* ===== Index modules ===== */
.index-modules{
  padding:18px 0 44px;
}
.module{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:18px;
}
.module .m-title{
  font-size:18px;
  font-weight:800;
  margin-bottom:6px;
}
.module .m-sub{
  color:rgba(229,231,235,.74);
  font-weight:600;
  line-height:1.4;
}
.logo-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.logo-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
}
.logo-badge img{
  height:34px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.avatar{
  width:240px; height:256px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex:0 0 auto;
}
.avatar img{width:100%; height:100%; object-fit:cover}

/* ===== Work cards ===== */
.work-list{padding:18px 0 44px}
.role{
  padding:18px;
}
.role-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.role-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.role-logo{
  height:46px;
  min-width:150px; /* makes the “logo box” taller/wider like you wanted */
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:center;
}
.role-logo img{
  height:30px;
  width:auto;
  object-fit:contain;
}
.role-title{
  font-size:20px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.role-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:rgba(229,231,235,.86);
  font-weight:800;
  white-space:nowrap;
}
.bullets{
  margin:0;
  padding-left:18px;
  color:rgba(229,231,235,.92);
  font-weight:600;
  line-height:1.55;
}
.bullets li{margin:6px 0}

/* ===== Projects page ===== */
.projects{padding:18px 0 44px}
.project-grid{
  display:grid;
  gap:18px;          /* you asked for more gaps */
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px){
  .project-grid{grid-template-columns:1fr}
}
.project{
  padding:18px;
}
.project h3{
  font-size:20px;
  font-weight:800;
  margin-bottom:8px;
}
.project p{
  color:rgba(229,231,235,.76);
  font-weight:600;
  line-height:1.45;
  margin-bottom:10px;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tag{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:rgba(229,231,235,.86);
  font-weight:800;
}

/* ===== About page ===== */
.about{padding:18px 0 44px}
.section-title{
  font-size:18px;
  font-weight:900;
  margin-bottom:10px;
}
.kv{
  display:grid;
  gap:16px;
}
.list{
  margin:0;
  padding-left:18px;
  color:rgba(229,231,235,.92);
  font-weight:600;
  line-height:1.55;
}
.list li{margin:6px 0}
.edu-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.edu-logo{
  height:46px;
  min-width:150px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:center;
}
.edu-logo img{height:30px; width:auto; object-fit:contain}
.edu-text .school{font-weight:900; font-size:18px}
.edu-text .program{color:rgba(229,231,235,.72); font-weight:700}

/* ===== Contact page (restore “tiles” look) ===== */
.contact{padding:18px 0 44px}
.tile{
  padding:18px;
}
.tile h3{
  font-size:18px;
  font-weight:900;
  margin-bottom:8px;
}
.tile p{
  color:rgba(229,231,235,.76);
  font-weight:600;
  line-height:1.45;
}

/* ===== Footer ===== */
.footer{
  padding:18px 0 28px;
  border-top:1px solid var(--border);
  background: rgba(7,11,18,.60);
}
.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.muted{color:rgba(229,231,235,.60)}

/* Contact page spacing + icons */
.page-contact .contact-card {
  margin-top: 24px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  width: fit-content;
  text-decoration: none;
  color: inherit;
}

.contact-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.9;
}

.contact-item:hover {
  background: rgba(255,255,255,0.08);
}

/* =========================================================
   CONTACT page: spacing + tiles only (PATCH)
   Paste at the VERY BOTTOM of styles.css
   ========================================================= */

/* Keep contact content from collapsing into each other */
.page-contact .contact{
  padding-top: 18px;
  padding-bottom: 44px;
}

/* Direct contact card: stop the content from feeling "stuck" to the next tiles */
.page-contact .contact-card{
  margin-top: 18px;        /* was 24px - slightly tighter */
  margin-bottom: 18px;     /* creates breathing room before tiles */
}

/* The H3/H4 headings inside cards were too tight */
.page-contact .tile h3,
.page-contact .tile h4{
  margin: 0 0 10px;
}

/* Paragraph spacing inside tiles */
.page-contact .tile p{
  margin: 0;
  line-height: 1.5;
}

/* Turn Availability + What to expect into a 2-column tile layout */
.page-contact .contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* If you're not using .contact-grid in HTML yet, this still works by targeting the next tiles */
@media (max-width: 900px){
  .page-contact .contact-grid{
    grid-template-columns: 1fr;
  }
}

/* Make each tile consistent with the rest of the site */
.page-contact .contact-tile{
  padding: 18px; /* matches your .tile padding */
}

/* Fix Availability block spacing */
.page-contact .availability{
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Fix bullet list spacing so it aligns like other pages */
.page-contact .expect-list{
  margin: 10px 0 0;
  padding-left: 18px;
}

.page-contact .expect-list li{
  margin: 7px 0;
  line-height: 1.5;
}

/* Keep direct contact list pills aligned and not overly tall */
.page-contact .contact-list{
  margin-top: 14px;
  gap: 12px;
}

/* Slightly tighter pill spacing (your current looks good, this just polishes) */
.page-contact .contact-item{
  padding: 10px 14px;
}

/* Ensure icons and text are vertically centered */
.page-contact .contact-item img{
  display: block;
}