:root{
  --bg: #0b0c0f;
  --card: #12141a;
  --text: #eaeef5;
  --muted: #9aa4b2;
  --accent: #7c5cff;
  --accent-2:#4ad6a7;
  --border: #1c2030;
  --chip: #171a22;
}

:root[data-theme="light"]{
  --bg: #ffffff;
  --card: #f6f7fb;
  --text: #0c1222;
  --muted:#56607a;
  --accent:#5b3df8;
  --accent-2:#1bbf85;
  --border:#e6e8ef;
  --chip:#eef1f7;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  width:min(1100px, 92%);
  margin-inline:auto;
}

/* ================= HEADER ================= */

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1rem 0.5rem;
  backdrop-filter: blur(8px);
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--text);
}

.logo{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius:10px;
  font-weight:800;
}

.brand-text{
  font-weight:800;
  letter-spacing:.2px;
}

.nav{
  display:flex;
  align-items:center;
  gap:1rem;
}

.nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  padding:.4rem .6rem;
  border-radius:8px;
}

.nav a:hover{
  color:var(--text);
  background:var(--chip);
}

.theme-toggle{
  border:1px solid var(--border);
  background:var(--chip);
  color:var(--text);
  padding:.45rem .6rem;
  border-radius:10px;
  cursor:pointer;
}

/* ================= HERO ================= */

.hero{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:3rem;
  padding: 5rem 0 3rem;
  align-items:center;
}

.hero-text h1{
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin:0 0 .8rem;
}

.hero-text h1 span{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{
  color:var(--muted);
  font-size:1.05rem;
  max-width:520px;
  margin:0 0 1rem;
}

.meta{
  display:flex;
  gap:.8rem;
  color:var(--muted);
  flex-wrap:wrap;
}

/* Avatar / Image */
.hero-avatar{
  display:flex;
  justify-content:center;
}

.avatar{
  width:100%;
  max-width:360px;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:1.25rem;
  border:3px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* ================= CTA BUTTONS ================= */

.cta{
  display:flex;
  gap:.6rem;
  margin-top:1rem;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  text-decoration:none;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding:.7rem 1.2rem;
  border-radius:8px;
  font-weight:600;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-secondary{
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent);
}

.btn-secondary:hover{
  background: var(--accent);
  color:#fff;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px){
  .hero{
    grid-template-columns: 1fr;
    text-align:center;
  }

  .hero-avatar{
    order:-1;
  }

  .lead{
    margin-inline:auto;
  }

  .cta{
    justify-content:center;
  }
}