:root{
  --cream:#e5d3eb; --sand:#F5EBDD; --teal:#4FB4A2; --coral:#F28C82; --ink:#1f2a2e;
  --card:#ffffff; --muted:#6b7b7f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,Arial,sans-serif; color:var(--ink); background:var(--cream);
}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section{padding:80px 0}
.card{background:var(--card); border-radius:18px; box-shadow:0 10px 30px rgba(31,42,46,.06)}
.sand{background:var(--sand)}

.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient(to bottom, rgba(250,250,246,.9), rgba(250,250,246,.7));
  border-bottom:1px solid rgba(31,42,46,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-weight:800; letter-spacing:.3px}
header nav a{margin-left:18px; text-decoration:none; color:var(--ink); padding:8px 10px; border-radius:10px; transition:background .2s ease}
header nav a.active, header nav a:hover{background:var(--sand);}

.hero{
  padding-top:120px; position:relative;
}
.hero::before{
  content:""; position:absolute; inset:-40px 0 auto 50%; translate:-50% 0;
  height:220px; width:70%; z-index:-1;
  background:radial-gradient(1200px 220px at 50% 0, rgba(79,180,162,.18), transparent 60%);
  filter:blur(8px);
}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
h1{margin:0 0 8px; font-size:44px; font-weight:800}
h2{margin:0 0 18px; font-weight:800; letter-spacing:.2px}
h2::after{content:""; display:block; width:56px; height:4px; border-radius:6px; background:var(--teal); margin-top:8px}
h3.sub{margin-top:6px; color:var(--muted); font-weight:600}
.tagline{color:var(--muted); margin:0 0 22px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid transparent; text-decoration:none; font-weight:600}
.btn.primary{background:var(--teal); color:white}
.btn.ghost{border-color:var(--ink); color:var(--ink); background:transparent}
.btn.small{padding:10px 14px; font-size:14px}

.portrait-wrap{display:flex; justify-content:center; position:relative}
.portrait-wrap::after{
  content:""; position:absolute; inset:auto 0 0 0; margin:auto; width:92%; height:92%;
  border-radius:50%; background:radial-gradient(circle, rgba(245,235,221,.9), transparent 60%);
  z-index:-1; filter:blur(6px);
}
.portrait{width:260px; height:260px; border-radius:50%; object-fit:cover; box-shadow:0 10px 30px rgba(31,42,46,.12)}
.portrait.small{width:180px; height:180px}
.portrait.placeholder{display:flex; align-items:center; justify-content:center; background:var(--sand); color:var(--ink); font-weight:800}

.about-grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:32px; align-items:start}

.grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(4,1fr);
}
.grid .card{padding:20px; transition:transform .15s ease, box-shadow .15s ease}
.grid .card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(31,42,46,.12)}
.emoji{font-size:28px}
.badges{display:flex; gap:8px; list-style:none; padding:0; margin:12px 0 18px}
.badges li{background:var(--sand); padding:6px 10px; border-radius:10px; font-size:13px}

.card .thumb{width:100%; height:140px; object-fit:cover; border-radius:12px; margin:-4px 0 10px}

.footer{padding:36px 0; color:var(--muted); text-align:center; border-top:1px solid rgba(31,42,46,.06)}

/* Tabs */
.tabs{
  display:flex; gap:10px; padding:10px; background:var(--card); border-radius:14px; margin-bottom:14px;
}
.tab-btn{
  appearance:none; border:1px solid rgba(31,42,46,.08); background:#fff; color:var(--ink);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.tab-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(31,42,46,.08)}
.tab-btn.active{
  background:var(--teal); border-color:var(--teal); color:#fff;
}
.tab-panels{padding:24px; border-radius:18px;}
.tab-panel{display:none; animation:fade .25s ease-out}
.tab-panel.is-active{display:block}
@keyframes fade{from{opacity:.6; transform:translateY(4px)} to{opacity:1; transform:none}}

/* Stats section */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px}
.stat{display:flex; flex-direction:column; align-items:center; padding:12px 8px; border-radius:14px; background:var(--cream)}
.kpi{font-size:28px; font-weight:800; line-height:1}
.label{color:var(--muted); font-weight:600; text-align:center}

/* Responsive tweaks */
@media (max-width: 940px){
  .hero-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  h1{font-size:36px}
}
/* Blog */
.blog-toolbar{display:flex; gap:10px; align-items:center; margin:10px 0 16px; flex-wrap:wrap}
.input{padding:10px 12px; border-radius:10px; border:1px solid rgba(31,42,46,.12); min-width:220px}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:var(--sand); border:none; padding:6px 10px; border-radius:999px; font-weight:600; cursor:pointer}
.chip.small{font-size:12px; padding:4px 8px}
.chip.active{background:var(--teal); color:#fff}

.blog-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(3,1fr);
}
.blog-card{position:relative; padding:16px}
.blog-card .cover-link{position:absolute; inset:0; border-radius:18px; z-index:0}
.blog-card .thumb{width:100%; height:160px; object-fit:cover; border-radius:12px; margin:0 0 10px}
.blog-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--muted); margin:2px 0 6px}
.blog-meta .date{font-size:13px}
.blog-title{margin:6px 0 6px}
.blog-title a{text-decoration:none; color:inherit}
.blog-excerpt{color:var(--muted); margin:0 0 10px}

.muted{color:var(--muted)}
@media (max-width: 940px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .blog-grid{grid-template-columns:1fr} }