/* Quantibit — subtle & classy theme with tasteful graphics */
:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#375aeb; /* deep blue */
  --accent-2:#6c5ce7; /* purple tint */
  --accent-3:#00b894; /* green accent */
  --glass: rgba(255,255,255,0.72);
  --radius:14px;
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg,#f8fafc 0%, #eef4fb 100%); color:#0f1724; margin:0; -webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:0 auto;padding:36px}

a{color:inherit}

/* HERO */
.hero{position:relative;overflow:visible;padding:64px 28px;border-radius:18px;margin:22px 0;background:linear-gradient(180deg, rgba(55,90,235,0.06), rgba(108,92,231,0.03));box-shadow:0 18px 50px rgba(12,22,50,0.06);display:flex;gap:24px;align-items:center}
.hero .copy{flex:1;min-width:280px}
.hero h1{font-size:36px;margin:0 0 10px 0;line-height:1.02}
.hero .tagline{color:var(--muted);font-weight:600;margin-bottom:8px}
.hero .sub{color:var(--muted);margin-bottom:14px}
.cta{display:inline-block;padding:12px 18px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 10px 28px rgba(55,90,235,0.12);transition:transform .18s ease, box-shadow .18s ease}
.cta:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(55,90,235,0.14)}

/* Decorative hero art */
.hero-art{width:420px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.hero-art svg{max-width:420px;width:100%;height:auto;display:block}

/* layout */
.main-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start;padding:28px 0}
@media (max-width:980px){.main-grid{grid-template-columns:1fr;padding:18px 0}.hero{flex-direction:column}.hero-art{width:100%}}

/* feature cards */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media (max-width:900px){.features{grid-template-columns:1fr}}
.feature{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 10px 30px rgba(10,10,30,0.04);display:flex;gap:12px;align-items:flex-start}
.feature .icon{width:52px;height:52px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(99,102,241,0.12), rgba(56,189,248,0.06));flex-shrink:0}
.feature h4{margin:0;font-size:16px}
.feature p{margin:6px 0 0 0;color:var(--muted);font-size:14px}

/* blog list & post */
.posts-list{display:grid;gap:14px}
.post-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);padding:14px;border-radius:12px;box-shadow:0 6px 18px rgba(10,10,30,0.03)}
.post-item img{width:120px;height:80px;object-fit:cover;border-radius:8px;flex-shrink:0}
.post-item h3{margin:0;font-size:18px}
.post-item .excerpt{color:var(--muted);margin-top:6px}
.readmore{display:inline-block;margin-top:10px;text-decoration:none;color:var(--accent);font-weight:600}

/* post full */
.post-full{background:var(--card);padding:22px;border-radius:14px;box-shadow:0 12px 30px rgba(10,10,30,0.04);line-height:1.75}
.post-full img.cover{width:100%;max-height:420px;object-fit:cover;border-radius:10px;margin:12px 0}
.post-full .meta{color:var(--muted);font-size:13px;margin-bottom:8px}

/* share buttons */
.share{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.share a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--glass);box-shadow:0 6px 18px rgba(10,10,30,0.04);text-decoration:none;color:#0f1724;font-weight:700}

/* contact & footer */
.contact{background:linear-gradient(180deg, #fff, rgba(255,255,255,0.96));padding:18px;border-radius:12px}
.site-footer{padding:28px;text-align:center;color:var(--muted);font-size:14px}

/* micro interactions */
.feature, .post-item, .post-full{transition:transform .18s ease, box-shadow .18s ease}
.feature:hover, .post-item:hover, .post-full:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(12,20,40,0.06)}

/* small utilities */
.small{font-size:13px;color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:700}