:root{
  --bg:#ffffff; --surface:#f7f8fa; --text:#111; --muted:#555; --border:#eaeaea;
  --radius:14px; --shadow:0 2px 10px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0; color:var(--text); background:var(--bg); line-height:1.55;
}
.container{max-width:980px; margin:2rem auto; padding:0 1rem}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}

/* Logo + brand text */
.logo{
  display:inline-flex;
  align-items:center;
  gap:.6rem;                 /* space between icon and text */
  text-decoration:none;
  color:var(--text);
}
.logo img{
  height:clamp(40px, 5vw, 60px);
  width:auto;
  display:block;
  max-width:100%;
  background:#0f172a;        /* dark chip so white logos pop */
  padding:8px 12px;
  border-radius:12px;
}
.logo .brand-text{
  font-weight:800;
  font-size:clamp(18px, 2.4vw, 22px);
  line-height:1;
  letter-spacing:.2px;
  color:#111;
}

/* Nav */
.nav{display:flex; gap:1rem}
.nav a{text-decoration:none; color:#444; padding:.25rem .2rem; border-radius:8px}
.nav a.active{font-weight:600}

/* Hero */
.hero{border-radius:16px; padding:3rem 1.25rem; margin:0 0 1.25rem;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(82,132,255,.18), transparent 60%),
              radial-gradient(900px 900px at 100% 0%, rgba(108,230,180,.18), transparent 40%),
              linear-gradient(180deg, #f6f8ff, #f9fbff);
  box-shadow:0 10px 24px rgba(0,0,0,.05)
}
.hero-inner{max-width:980px; margin:0 auto}
.hero h1{margin:0 0 .5rem; font-family: Merriweather, Georgia, serif; font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1.1}
.hero-sub{color:#444; max-width:720px; margin:.25rem 0 1rem; font-size:clamp(1rem,2.2vw,1.125rem)}

/* Section separator after hero */
.hero + .section-title{
  border-bottom:1px solid var(--border);
  padding-bottom:1rem;
  margin-bottom:1.5rem;
}

/* Buttons */
.btn{display:inline-block; padding:.55rem .9rem; border-radius:10px; border:1px solid #dcdcdc; text-decoration:none; transition:transform .05s ease, box-shadow .12s ease; background:#fff; color:#111}
.btn:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.06)}
.btn-primary{background:#111; color:#fff; border-color:#111}

/* Slider */
.slider{position:relative; margin:.5rem 0 1.25rem}
.slider-viewport{overflow:hidden; border-radius:var(--radius)}
.slider-track{display:flex; flex-wrap:nowrap; transition:transform .5s ease}
.slide{flex:0 0 100%; max-width:100%}
.slide img{width:100%; height:280px; object-fit:cover; display:block; transition:transform .3s ease}
.slide img:hover{transform:scale(1.02)}
@media (min-width:900px){ .slide img{height:360px} }
.slider-btn{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(0,0,0,.12); cursor:pointer; line-height:38px; text-align:center; font-size:22px}
.slider-btn.prev{left:8px}
.slider-btn.next{right:8px}
.slider-dots{display:flex; gap:6px; justify-content:center; margin-top:.6rem}
.slider-dots button{width:8px; height:8px; border-radius:50%; border:0; background:#cfcfcf; cursor:pointer}
.slider-dots button.active{background:#111}

/* Posts list (horizontal cards) */
.hlist{display:grid; gap:1rem}
.hcard{display:grid; grid-template-columns:180px 1fr; gap:1rem; border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:1rem; box-shadow:0 2px 6px rgba(0,0,0,.03)}
.hcard-media{display:block}
.hcard-media img{width:100%; height:100%; object-fit:cover; border-radius:10px; aspect-ratio:16/10}
.hcard-media.placeholder div{width:100%; height:100%; min-height:120px; border-radius:10px; background:#f1f3f5}
.hcard a{text-decoration:none; color:inherit}
.hcard-title{margin:0 0 .25rem; font-size:1.1rem}
.hcard-meta{color:#666; display:block; margin-bottom:.4rem}
.hcard-text{margin:0 0 .5rem; color:#333; line-height:1.6}
@media (max-width:700px){ .hcard{grid-template-columns:1fr} }

/* Pager */
.pager{display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.5rem 0}
#older{
  padding:.6rem 1rem; border:1px solid #dcdcdc; border-radius:10px; background:#fff; cursor:pointer; font-weight:600;
  transition:transform .05s ease, box-shadow .12s ease, background .15s ease;
}
#older:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.06); background:#f7f7f7}

/* Footer */
footer{border-top:1px solid var(--border); padding-top:2rem}
.footer-grid{display:grid; gap:1rem; grid-template-columns:1.1fr 1fr 1fr}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr} }
.footer-bottom{ text-align:center; padding:1rem 0; font-size:.9rem; color:var(--muted) }

/* Social icons */
.socials{display:flex; gap:.75rem; flex-wrap:wrap; margin:.75rem 0 0}
.icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:#111; text-decoration:none;
  transition:transform .06s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
  vertical-align:middle;
}
.icon:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08) }
.icon svg{ width:18px; height:18px; display:block; flex-shrink:0 }
.icon svg *, .icon svg path, .icon svg circle, .icon svg rect, .icon svg polygon, .icon svg line{
  fill:currentColor !important; stroke:currentColor !important;
}
/* Brand hover colors */
.icon.email:hover    { background:#d93025; color:#fff; border-color:#d93025; }
.icon.medium:hover   { background:#00ab6c; color:#fff; border-color:#00ab6c; }
.icon.twitter:hover  { background:#1da1f2; color:#fff; border-color:#1da1f2; }
.icon.linkedin:hover { background:#0077b5; color:#fff; border-color:#0077b5; }
.icon.instagram:hover{
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color:#fff; border-color:#d6249f;
}
.icon.tiktok:hover   { background:#000; color:#fff; border-color:#000; }

/* Support */
.f-support p{ color:var(--muted); margin:.25rem 0 .75rem }
.support-row{ display:flex; gap:.5rem; flex-wrap:wrap }
.support-btn{ background:#111; color:#fff; border-color:#111; font-weight:600 }
.support-btn:hover{ transform:translateY(-1px) }

/* Utilities */
.section-title{margin:.75rem 0 1rem}