/* Theme */
:root{
  --bg0:#071229;
  --bg1: linear-gradient(180deg,#071229 0%, #042038 60%, #031726 100%);
  --accent:#60a5fa;
  --accent-2:#3b82f6;
  --muted:rgba(230,246,255,0.72);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --glass: rgba(255,255,255,0.04);
  --card-shadow: 0 18px 50px rgba(2,10,25,0.6);
  --radius:12px;
  --max-width:1100px;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

/* reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  background:var(--bg1);
  color:#eaf6ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}

/* background canvas sits behind content */
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; }

/* page container */
.container{
  position:relative;
  z-index:2;
  max-width:var(--max-width);
  margin:0 auto;
  padding:2rem 1.2rem;
}

/* HERO */
header.hero{
  margin:1.2rem;
  padding:3rem 1.4rem;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(3,7,18,0.18), rgba(3,7,18,0.35));
  box-shadow:var(--card-shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
header.hero h1{
  font-size:clamp(1.9rem,4.8vw,3rem);
  margin:0 0 0.35rem;
  color:#fff;
  letter-spacing:-0.02em;
}
header.hero p{
  margin:0;
  color:color-mix(in srgb, var(--accent) 36%, #fff);
  font-weight:600;
}

/* section title */
.section-title{
  display:flex;
  align-items:baseline;
  gap:0.9rem;
  margin:0 0 0.6rem;
}
.section-title h2{
  margin:0;
  color:var(--accent);
  font-size:1.05rem;
  letter-spacing:0.02em;
}
.section-sub{
  color:var(--muted);
  font-size:0.95rem;
}

/* overall grid patterns */
.grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}

/* cards */
.card{
  position:relative;
  padding:1rem 1.05rem;
  background:var(--card-bg);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:var(--card-shadow);
  transition:transform .24s cubic-bezier(.2,.9,.2,1), box-shadow .24s;
  overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 28px 80px rgba(2,10,25,0.75); }

/* card header / title */
.card strong, .card .card-title{
  display:block;
  font-size:0.98rem;
  color:#ffffff;
  margin-bottom:6px;
  font-weight:700;
}
.card .meta{
  display:block;
  color:var(--muted);
  font-size:0.88rem;
  margin-bottom:8px;
}

/* nicer lists inside cards */
.card ul{
  margin:0;
  padding:0;
  list-style:none;
  text-align:left;
  color:var(--muted);
  font-size:0.95rem;
}
.card ul li{
  position:relative;
  padding-left:18px;
  margin:6px 0;
  line-height:1.35;
}
/* custom bullet */
.card ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 10px rgba(59,130,246,0.15);
}

/* badges */
.badge{
  display:inline-block;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#022034;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:0.85rem;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(59,130,246,0.10);
}
.badge:focus{outline:2px solid rgba(96,165,250,0.22); outline-offset:2px;}

/* ABOUT layout */
.about{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:1rem;
  align-items:start;
}
.bio p{ color:var(--muted); margin-top:8px; }

/* contact box tweaks */
.contact{
  padding:1rem;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
}
.contact p{ margin:6px 0; color:var(--muted); font-weight:600; }

/* utilities */
.hr{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  margin:1rem 0;
}

/* footer */
footer{
  text-align:center;
  padding:2rem 1rem;
  color:rgba(230,246,255,0.6);
  font-size:0.95rem;
}

/* responsive */
@media (max-width:920px){
  .about{ grid-template-columns:1fr; }
  header.hero{ margin:1rem 0.6rem; padding:2.2rem 1rem; }
  .container{ padding:1rem; }
}

@media (max-width:480px){
  header.hero h1{ font-size:1.6rem; }
  .card{ padding:0.9rem; }
  .badge{ font-size:0.8rem; padding:5px 8px; }
}