:root{
  --ink:#0f172a;      /* main text */
  --muted:#5b6b7b;    /* secondary text */
  --line:#e6eef5;     /* borders */
  --paper:#ffffff;
  --brand:#0ea5e9;    /* will be overridden by script */
  --brand-ink:#075985;
  --soft:#eef9ff;
  --r:18px;
  --sh:0 16px 30px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#f6f8fb;color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.75;
}

/* SIDEBAR */
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.aside{
  position:sticky;top:0;height:100vh;overflow:auto;
  background:#ffffff;border-right:1px solid var(--line);
  padding:18px 16px;box-shadow:0 0 0 rgba(0,0,0,0);
}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.logo img{width:150px;height:auto;display:block}
.tag{
  display:inline-block;background:rgba(14,165,233,.12);
  color:var(--brand-ink);padding:.22rem .6rem;
  border-radius:999px;font-weight:700;font-size:.7rem;
}

.c0238b9d757 a{
  display:block;color:var(--ink);text-decoration:none;font-weight:600;
  padding:.48rem .7rem;border-radius:10px;margin:.12rem 0;
}
.c0238b9d757 a:hover,.c0238b9d757 a.active{background:rgba(14,165,233,.1)}
.aside .meta{margin-top:10px;color:var(--muted);font-size:.84rem}
.aside .meta strong{color:var(--ink)}

/* MAIN */
main{padding:16px}
.container{width:min(1120px,96%);margin:0 auto}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);padding:14px 16px}

/* HERO */
.ca15ab54b56{
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:#fff;box-shadow:var(--sh);
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:0}
.ca15ab54b56 .cfeca5d5fcd{padding:18px}
.ca15ab54b56 h1{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:.2rem 0 .5rem}
.ca15ab54b56 p{color:var(--muted)}
.ca15ab54b56 img{width:100%;height:100%;object-fit:cover;display:block}

/* SECTION */
.section{margin-top:14px}
h2{font-size:1.26rem;margin:.1rem 0 .6rem}
h3{margin:.2rem 0 .35rem;font-size:1.05rem}

/* Z layout */
.z{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.imgbox img{width:100%;display:block;border-radius:16px}

/* MOSAIC gallery */
.mosaic{
  display:grid;gap:10px;
  grid-template-columns:repeat(6,1fr);
}
.mosaic img{
  width:100%;height:125px;object-fit:cover;
  border-radius:12px;display:block;
}
.mosaic .c2{grid-column:span 2}
.mosaic .c3{grid-column:span 3}
.mosaic .r2{height:260px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.caa52a6d0ad{background:#fff;border:1px solid var(--line);border-radius:16px;padding:.85rem 1rem 1rem}

/* timeline & stats */
.timeline{list-style:none;margin:.2rem 0 0;padding:0}
.timeline li{position:relative;padding-left:1.2rem;margin:.35rem 0}
.timeline li::before{
  content:"";position:absolute;left:.2rem;top:.6rem;
  width:.42rem;height:.42rem;border-radius:999px;background:var(--brand);
}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:6px}
.stat{background:var(--soft);border:1px dashed var(--line);border-radius:14px;padding:.6rem .8rem}
.stat b{font-size:1.12rem}

/* form */
button,input,textarea{font:inherit}
.cdf4491c40f{display:grid;gap:12px;max-width:760px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:14px;background:#fff;
}
textarea{resize:vertical}
.cf56fa828b8{
  width:auto;justify-self:start;background:var(--brand);color:#fff;
  border:0;border-radius:14px;padding:.8rem 1.35rem;cursor:pointer;
}
.cf56fa828b8:hover{background:var(--brand-ink)}

/* footer */
footer{margin:14px 0}
.footer{
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:12px 16px;box-shadow:var(--sh);
}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.small{color:#0f172a;font-size:.82rem}
.small a{color:#0f172a;text-decoration:none}
.small a:hover{text-decoration:underline}

/* responsive */
@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .aside{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .hero-grid{grid-template-columns:1fr}
  .z{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .mosaic .r2{height:200px}
}