:root{
  --ink:#251534;
  --muted:#6b5a78;
  --purple:#7d48dd;
  --pink:#ff6ac6;
  --blue:#5b91ff;
  --gold:#f5bd4a;
  --green:#19a974;
  --bg:#fff7fd;
  --panel:#ffffff;
  --line:#ebddf3;
  --dark:#241332;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Segoe UI,Arial,sans-serif;
  background:linear-gradient(180deg,#fff7fd,#f5f7ff 48%,#ffffff);
  color:var(--ink);
}
a{color:inherit}
.hero{
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(135deg,#7d48dd,#ff6ac6 55%,#5b91ff);
  color:white;
  padding:18px clamp(16px,5vw,70px) 80px;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:70px;
}
.topbar a{
  text-decoration:none;
  font-weight:900;
  padding:11px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(8px);
}
.hero-content{
  max-width:950px;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:1000;
  opacity:.88;
}
h1{
  font-size:clamp(2.8rem,7vw,6.5rem);
  line-height:.9;
  margin:0 0 18px;
}
.subtitle{
  font-size:1.2rem;
  max-width:820px;
  line-height:1.65;
  color:#fff2fb;
}
.hero-actions,.button-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:14px;
  font-weight:1000;
  padding:13px 18px;
  transition:.15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
  background:white;
  color:var(--purple);
}
.btn.secondary{
  background:rgba(255,255,255,.18);
  color:white;
  border:1px solid rgba(255,255,255,.35);
}
.btn.github{
  background:#22152f;
  color:white;
}
main{
  padding:28px clamp(16px,5vw,70px) 50px;
}
.intro-card,.about-section,.disclaimer{
  background:white;
  border:1px solid var(--line);
  border-radius:26px;
  padding:26px;
  box-shadow:0 14px 40px rgba(64,20,95,.08);
  margin-bottom:24px;
}
.intro-card h2,.about-section h2,.disclaimer h2{
  margin-top:0;
}
.intro-card p,.about-section p,.disclaimer p{
  color:var(--muted);
  line-height:1.7;
}
.project-grid{
  display:grid;
  gap:24px;
  margin:24px 0;
}
.project-card{
  display:grid;
  grid-template-columns:minmax(260px,390px) 1fr;
  gap:0;
  background:white;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 16px 45px rgba(64,20,95,.09);
}
.project-card.featured{
  border:2px solid rgba(125,72,221,.2);
}
.project-image{
  background:linear-gradient(135deg,#f7eaff,#eef3ff);
  display:grid;
  place-items:center;
  min-height:310px;
  padding:24px;
  border-right:1px solid var(--line);
}
.project-image img{
  max-width:100%;
  max-height:280px;
  object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.22));
  border-radius:16px;
}
.project-body{
  padding:28px;
}
.project-label{
  display:inline-flex;
  background:#f1e7ff;
  color:var(--purple);
  border-radius:999px;
  font-weight:1000;
  padding:7px 12px;
  font-size:.86rem;
  margin-bottom:12px;
}
.project-body h2{
  margin:0 0 12px;
  font-size:2rem;
}
.project-body p{
  color:var(--muted);
  line-height:1.65;
}
.feature-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:9px;
  padding:0;
  list-style:none;
  margin:18px 0;
}
.feature-list li{
  background:#fbf8ff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  font-weight:800;
  color:#4a3560;
}
.tracker-art{
  align-content:center;
  gap:14px;
  text-align:center;
}
.tracker-icon{
  width:120px;
  height:120px;
  border-radius:32px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:white;
  font-size:2rem;
  font-weight:1000;
  margin:auto;
  box-shadow:0 18px 36px rgba(125,72,221,.32);
}
.tracker-art strong{
  font-size:1.3rem;
}
.tracker-art span{
  display:block;
  color:var(--muted);
  margin-top:6px;
}
.placeholder-art{
  font-size:5rem;
  color:var(--purple);
  font-weight:1000;
}
.coming-soon{
  opacity:.92;
}
.disclaimer{
  background:#fffaf0;
  border-color:#f3dca7;
}
footer{
  background:var(--dark);
  color:white;
  padding:26px clamp(16px,5vw,70px);
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
footer span{
  opacity:.78;
}
@media(max-width:850px){
  .project-card{
    grid-template-columns:1fr;
  }
  .project-image{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .topbar{
    margin-bottom:40px;
  }
}