/* ============================================================
   SQLISM BLOG — HUB STYLES (Studio look)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary:#8b5cf6; --secondary:#10b981;
  --violet:#7c5cff; --cyan:#22d3ee; --lime:#a3e635; --lime-deep:#86c40f; --coral:#ff6b57;
  --bg:#f3f1ea; --surface:#ffffff; --surface-2:#faf8f2;
  --line:rgba(10,13,26,.10); --line-strong:rgba(10,13,26,.16);
  --text:#12172a; --text-soft:#4a5169; --text-faint:#6b7288;
  --shadow-sm:0 2px 8px rgba(10,13,26,.06);
  --shadow-md:0 18px 44px -20px rgba(10,13,26,.28);
  --ease:cubic-bezier(.22,1,.36,1);
  --navbar-bg:#ffffff; --border:#e5e7eb; --bg-card:#ffffff; --text-primary:#1f2937; --text-secondary:#6b7280;
}
[data-theme="dark"]{
  --bg:#05060d; --surface:#0e1324; --surface-2:#0a0f1e;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --text:#eef1f8; --text-soft:#b3bbd0; --text-faint:#8b93ab;
  --shadow-md:0 20px 50px -24px rgba(0,0,0,.7);
  --navbar-bg:#111827; --border:#374151; --bg-card:#1f2937; --text-primary:#f9fafb; --text-secondary:#d1d5db;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Plus Jakarta Sans',sans-serif; color:var(--text);
  background:var(--bg); min-height:100vh; overflow-x:clip; line-height:1.6;
  transition:background-color .3s ease,color .3s ease;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,.10), transparent 34rem),
    radial-gradient(circle at 0% 8%, rgba(34,211,238,.10), transparent 30rem),
    radial-gradient(circle at 50% 100%, rgba(182,242,74,.08), transparent 34rem);
  background-attachment:fixed;
}
[data-theme="dark"] body{
  background-image:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,.16), transparent 34rem),
    radial-gradient(circle at 0% 8%, rgba(34,211,238,.10), transparent 30rem),
    radial-gradient(circle at 50% 100%, rgba(182,242,74,.07), transparent 34rem);
}

/* ---------- HERO (matches main hub heroes) ---------- */
.hero{
  position:relative; margin:clamp(16px,3vw,30px) clamp(12px,4vw,48px);
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,48px);
  border-radius:24px; text-align:center; color:#fff; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 130% at 10% -10%, rgba(124,92,255,.40), transparent 60%),
    radial-gradient(90% 120% at 100% 112%, rgba(34,211,238,.22), transparent 58%),
    linear-gradient(158deg,#0c1024 0%,#0a0d1a 55%,#090b16 100%);
  box-shadow:0 40px 90px -42px rgba(10,13,26,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 42%,transparent 82%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 42%,transparent 82%);
}
.hero-content{position:relative;z-index:1;max-width:920px;margin:0 auto;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(163,230,53,.34); background:rgba(163,230,53,.10);
  color:#d9f99d; font-family:'JetBrains Mono',monospace; font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
}
.hero-eyebrow i{color:var(--lime);}
.hero h1{
  font-size:clamp(2.1rem,5vw,4rem); font-weight:800; letter-spacing:-.03em; line-height:1.07; color:#fff;
  margin-bottom:16px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}
.hero h1 i{
  background:linear-gradient(120deg,#a3e635,#22d3ee 55%,#7c5cff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transform:translateX(-4px); padding-right:4px;
}
.hero p{
  color:rgba(226,232,240,.82); font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.7; max-width:700px; margin:0 auto;
}
.hero-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px;}
.hero-stats span{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#e7eaf5; font-weight:600; font-size:.9rem;
}
.hero-stats span i{color:var(--lime);}

/* ---------- CONTAINER ---------- */
.container{max-width:1200px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(14px,4vw,40px);}

/* ---------- FILTER CHIPS ---------- */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px;}
.blog-chip{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--text-soft);font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s var(--ease);
}
.blog-chip:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-1px);}
.blog-chip.active{background:linear-gradient(135deg,var(--violet),#5b3ee0);color:#fff;border-color:transparent;box-shadow:0 12px 24px -12px rgba(124,92,255,.7);}

/* ---------- POSTS GRID ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px;}
.blog-filter-empty{text-align:center;color:var(--text-soft);font-size:1rem;padding:40px 0;}

.blog-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}

.blog-cover{
  position:relative;height:180px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;
}
.blog-cover i{font-size:2.6rem;opacity:.92;filter:drop-shadow(0 6px 18px rgba(0,0,0,.3));}
.blog-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.12));}
.cv-1{background:linear-gradient(135deg,#7c5cff,#5b3ee0);}
.cv-2{background:linear-gradient(135deg,#22d3ee,#0e7490);}
.cv-3{background:linear-gradient(135deg,#86c40f,#4d7c0f);}
.cv-4{background:linear-gradient(135deg,#ff6b57,#b3341f);}
.cv-5{background:linear-gradient(135deg,#f59e0b,#b45309);}
.cv-6{background:linear-gradient(135deg,#ec4899,#9d174d);}

.blog-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.blog-tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;
  padding:5px 11px;border-radius:999px;background:rgba(124,92,255,.10);color:var(--violet);
  border:1px solid rgba(124,92,255,.24);font-family:'JetBrains Mono',monospace;font-size:.68rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.blog-card h3{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin-bottom:10px;color:var(--text);}
.blog-excerpt{color:var(--text-soft);font-size:.94rem;line-height:1.6;margin-bottom:18px;flex:1;}
.blog-meta{
  display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--text-faint);font-size:.8rem;
}
.blog-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--text-faint);}
.blog-meta .read-more{margin-left:auto;color:var(--violet);font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.blog-card:hover .read-more i{transform:translateX(4px);}
.blog-meta .read-more i{transition:transform .25s var(--ease);}

/* placeholder shimmer badge */
.blog-card.placeholder .blog-tag{background:rgba(107,114,136,.12);color:var(--text-faint);border-color:var(--line-strong);}

/* ---------- COMING SOON STRIP ---------- */
.blog-note{
  margin-top:38px;text-align:center;color:var(--text-faint);font-size:.9rem;
  display:flex;align-items:center;justify-content:center;gap:8px;
}

/* ---------- NEWSLETTER ---------- */
.newsletter-box{
  position:relative;overflow:hidden;margin-top:48px;padding:clamp(32px,5vw,52px) clamp(24px,4vw,48px);
  border-radius:24px;text-align:center;color:#fff;border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 140% at 12% -10%, rgba(124,92,255,.38), transparent 58%),
    radial-gradient(90% 120% at 100% 112%, rgba(34,211,238,.20), transparent 58%),
    linear-gradient(158deg,#0c1024 0%,#0a0d1a 55%,#090b16 100%);
  box-shadow:0 34px 80px -38px rgba(10,13,26,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.newsletter-box::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 80%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 80%);
}
.nl-icon{
  position:relative;z-index:1;width:56px;height:56px;margin:0 auto 18px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#0a0d1a;
  background:linear-gradient(135deg,var(--lime),var(--cyan));
}
.newsletter-box h2{position:relative;z-index:1;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.02em;margin-bottom:10px;}
.newsletter-box>p{position:relative;z-index:1;color:rgba(226,232,240,.8);font-size:1rem;max-width:480px;margin:0 auto 26px;line-height:1.6;}

.nl-form{position:relative;z-index:1;display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;}
.nl-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.nl-form input[type="email"]{
  flex:1;min-width:220px;padding:14px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.96rem;outline:none;
  transition:border-color .2s ease,background .2s ease;
}
.nl-form input[type="email"]::placeholder{color:rgba(226,232,240,.45);}
.nl-form input[type="email"]:focus{border-color:var(--violet);background:rgba(255,255,255,.09);}
.nl-form button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border:none;border-radius:12px;
  background:linear-gradient(180deg,#c8f65f,#a3e635);color:#10210a;font-weight:700;font-size:.96rem;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap;
}
.nl-form button:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(163,230,53,.5);}
.nl-form button:disabled{opacity:.7;cursor:not-allowed;transform:none;}

.nl-msg{position:relative;z-index:1;min-height:1.4em;margin-top:14px;font-size:.88rem;font-weight:600;}
.nl-msg.ok{color:#bef264;}
.nl-msg.err{color:#fca5a5;}

.nl-privacy{
  position:relative;z-index:1;margin-top:16px !important;color:rgba(226,232,240,.55) !important;
  font-size:.8rem !important;max-width:none !important;display:flex;align-items:center;justify-content:center;gap:7px;
}

@media (max-width:600px){
  .blog-grid{grid-template-columns:1fr;}
  .nl-form{flex-direction:column;}
  .nl-form input[type="email"]{width:100%;}
  .nl-form button{width:100%;}
}