/* Replace your styles.css with this file.
   Fonts: Playfair Display for headings, Inter for UI/body.
   Paste whole file content. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Playfair+Display:wght@400;600;700&display=swap');

:root{
  /* color */
  --bg: #fbfbff;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --accent1:#ff6b6b;
  --accent2:#4f46e5;
  --glass: rgba(255,255,255,0.7);

  /* layout */
  --maxw:1200px;
  --g:20px;
  --radius:14px;

  /* elevation */
  --shadow-sm: 0 6px 18px rgba(12,18,40,0.06);
  --shadow-md: 0 12px 36px rgba(12,18,40,0.10);
  --shadow-lg: 0 24px 60px rgba(12,18,40,0.14);

  /* typography */
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --display-font: "Playfair Display", Georgia, "Times New Roman", serif;

  font-family: var(--ui-font);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg,#fbfbff 0%, #f6f8ff 100%);
  color:var(--text);
  font-feature-settings: "cv01" 1;
  line-height:1.55;
  font-size:16px;
}

/* Container */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:28px;
}

/* Header */
.header{position:relative;backdrop-filter: blur(6px);z-index:50}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--g)}
.logo, .brand{font-weight:700;font-size:20px;color:var(--text);text-decoration:none;letter-spacing:0.2px}
.nav{display:flex;gap:12px;align-items:center}
.nav a{
  color:var(--text);
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
  transition:all .18s;
}
.nav a:hover, .nav a:focus{background:linear-gradient(90deg, rgba(79,70,229,0.06), rgba(255,107,107,0.04));transform:translateY(-2px);outline: none;}

/* Mobile burger */
.burger{
  display:none;
  background:transparent;border:0;font-size:22px;cursor:pointer;
}

/* Hero */
.hero{padding:36px 0 44px}
.hero-inner{
  padding:36px;border-radius:var(--radius);
  background: linear-gradient(90deg, rgba(79,70,229,0.05), rgba(255,107,107,0.04));
  box-shadow: var(--shadow-md);
  display:flex;gap:var(--g);align-items:center;justify-content:space-between;
  flex-wrap:wrap;
}
.hero h1{
  font-family:var(--display-font);
  font-weight:600;
  font-size:42px;
  margin:0 0 8px;
  line-height:1.05;
  letter-spacing:-0.02em;
}
.lead{
  color:var(--muted);
  margin:0 0 14px;
  max-width:70ch;
  font-size:18px;
}

/* Buttons */
.btn{
  display:inline-block;padding:11px 18px;border-radius:12px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#fff;font-weight:700;text-decoration:none;border:0;cursor:pointer;
  box-shadow: 0 8px 30px rgba(79,70,229,0.06);
  transition: transform .14s, box-shadow .14s;
}
.btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Features / Cards */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.feature{
  background:var(--card);
  padding:20px;border-radius:12px;
  box-shadow:var(--shadow-sm);
  transition: transform .14s, box-shadow .14s;
}
.feature:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature h3{margin:0 0 8px;font-family:var(--display-font);font-weight:600}
.feature p{color:var(--muted);margin:0;font-size:15px}

/* Featured posts / grid */
.featured{margin-top:24px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{
  display:flex;flex-direction:column;background:var(--card);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);
  transition: transform .16s, box-shadow .16s;
}
.post:hover{ transform:translateY(-8px); box-shadow: var(--shadow-lg); }
.thumb{width:100%;height:220px;background-size:cover;background-position:center;display:block}
.p-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:10px}
.meta{color:var(--muted);font-size:13px;margin-bottom:6px}
.post h3{margin:0;font-family:var(--display-font);font-size:20px}
.post p{margin:0;color: #233143}

/* Cards grid variant (three-column cards with image side-by-side) */
.cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow-sm)}

/* CTA and subscribe */
.cta{
  margin-top:28px;padding:20px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.9), rgba(255,255,255,0.9));
  box-shadow:var(--shadow-sm);
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.subscribe{display:flex;gap:10px;max-width:560px;width:100%}
.subscribe input{flex:1;padding:12px;border-radius:10px;border:1px solid #e6e9ef;font-size:15px}
.subscribe .btn{min-width:150px}

/* Footer */
.footer{margin-top:36px;padding:28px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.footer .muted{color:var(--muted)}

/* Utilities & small screens */
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#f3f4f6;font-weight:700;color:var(--text);font-size:13px}
.small{font-size:13px;color:var(--muted)}
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Focus & accessibility */
a:focus, button:focus, input:focus { outline: 3px solid rgba(79,70,229,0.12); outline-offset:4px; border-radius:8px; }
:focus { box-shadow: 0 6px 18px rgba(11,92,255,0.06) }

/* Responsive adjustments */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:36px}
}
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .hero-inner{padding:20px}
  .hero h1{font-size:28px}
  .thumb{height:200px}
  .nav{display:none}
  .burger{display:inline-block}
  .subscribe{flex-direction:column}
}

/* Nice small UI touches */
.meta .date { color:var(--muted); font-size:13px; }
.card .taglist { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.tag { background:#eef2ff; color:var(--accent2); padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px; }

/* Print tweaks */
@media print {
  body{background:white;color:black}
  .nav, .cta, .subscribe, .footer { display:none }
  .wrap{padding:12px}
}
/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 20px;
  max-width: 1100px;
  margin: 0 auto;
  z-index: 9999;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(250,250,255,0.98));
  box-shadow: 0 12px 36px rgba(12,18,40,0.12);
  border: 1px solid rgba(14, 22, 56, 0.04);
  transform: translateY(14px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s;
  font-size: 15px;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; }

.cookie-banner .cb-text { flex: 1; color: #0f172a; line-height:1.4; }
.cookie-banner .cb-actions { display:flex; gap:8px; align-items:center; }

.cookie-banner .cb-btn {
  padding:10px 14px;
  border-radius:10px;
  border:0;
  font-weight:700;
  cursor:pointer;
}
.cookie-banner .cb-accept {
  background: linear-gradient(90deg,#ff6b6b,#4f46e5);
  color:#fff;
}
.cookie-banner .cb-reject {
  background:transparent;
  border:1px solid #e6e9ef;
  color:#0f172a;
}
.cookie-banner .cb-manage {
  background:transparent;
  color:#0b5cff;
  text-decoration:underline;
  border:0;
  padding:8px 10px;
}

/* small responsive tweak */
@media (max-width:720px){
  .cookie-banner{flex-direction:column;align-items:flex-start;padding:14px}
  .cookie-banner .cb-actions{width:100%;justify-content:flex-end}
}