/* Cognita Writing Homepage Styles (v2) - assets/style.css */
:root{
  --bg:#ffffff; --text:#0f172a; --muted:#6b7280; --accent:#2563eb; --accent2:#06b6d4; --cta:#10b981;
  --card:#ffffff; --shadow:0 8px 30px rgba(2,6,23,0.08); --radius:12px; --container:1200px;
}
*{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.6}
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
header.site-header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;position:sticky;top:0;z-index:999;background:rgba(255,255,255,0.95);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid #eef2f7}
.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.site-brand .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#fff;font-weight:700}
.site-nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
.site-nav a{text-decoration:none;color:var(--text);font-weight:500;padding:8px 10px;border-radius:8px}
.site-nav a:hover{background:#f8fafc}
.header-cta .btn{background:var(--cta);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}

/* Hero */
.hero{padding:72px 0 48px;background:linear-gradient(180deg,#ffffff,#f8fbff);display:grid;align-items:center}
.hero-inner{display:grid;grid-template-columns:1fr 480px;gap:36px;align-items:center}
.hero h1{font-size:2.25rem;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px;font-size:1.05rem}
.hero-actions{display:flex;gap:14px;align-items:center}
.hero-illus{border-radius:16px;background:linear-gradient(180deg,#fff,#f3f9ff);padding:18px;box-shadow:var(--shadow);display:grid;place-items:center}

/* Sections */
.section{padding:56px 0}
.section h2{font-size:1.5rem;margin:0 0 18px;text-align:center}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow);transition:transform .18s}
.service-card:hover{transform:translateY(-6px)}
.service-card .icon{width:48px;height:48px;border-radius:10px;background:#f1f9ff;display:grid;place-items:center;font-size:20px;margin-bottom:12px}

/* Why choose */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.why-item{padding:18px;border-radius:12px;background:#fff;box-shadow:var(--shadow)}

/* Blog posts grid (SweetStudy-like) */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.post-card .thumb{height:160px;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .post-body{padding:14px;flex:1;display:flex;flex-direction:column}
.post-meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.post-title{font-size:1.05rem;margin:0 0 8px}
.post-excerpt{color:var(--muted);font-size:0.95rem;flex:1;margin-bottom:12px}
.post-footer{display:flex;justify-content:space-between;align-items:center}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial-card{padding:18px;border-radius:12px;background:#fff;box-shadow:var(--shadow)}

/* CTA */
.cta-banner{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;padding:38px;border-radius:12px;text-align:center}

/* Footer */
.site-footer{background:#0f1724;color:#cbd5e1;padding:28px 0;text-align:center}

/* Floating CTA */
.floating-cta{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:#10b981;color:#fff;padding:12px 26px;border-radius:12px;box-shadow:0 12px 30px rgba(16,185,129,0.14);z-index:1200;font-weight:700;text-decoration:none}
@media(max-width:1100px){ .hero-inner{grid-template-columns:1fr 380px} .services-grid{grid-template-columns:repeat(2,1fr)} .why-grid{grid-template-columns:repeat(2,1fr)} .post-grid{grid-template-columns:repeat(2,1fr)} .testimonials{grid-template-columns:1fr} }
@media(max-width:700px){ .hero-inner{grid-template-columns:1fr} .post-grid{grid-template-columns:1fr} .services-grid{grid-template-columns:1fr} .why-grid{grid-template-columns:1fr} .floating-cta{left:0;right:0;transform:none;width:100%;border-radius:0;bottom:0} }