:root{
  --c-purple:#7C3AED;--c-violet:#8B5CF6;--c-pink:#EC4899;
  --c-orange:#F97316;--c-cyan:#06B6D4;--c-teal:#14B8A6;
  --c-lime:#84CC16;--c-amber:#F59E0B;
  --g-brand:linear-gradient(135deg,#7C3AED,#EC4899);
  --g-warm:linear-gradient(135deg,#F97316,#F59E0B);
  --g-cool:linear-gradient(135deg,#06B6D4,#14B8A6);
  --g-punch:linear-gradient(135deg,#EC4899,#F97316);
  --g-full:linear-gradient(135deg,#7C3AED 0%,#EC4899 40%,#F97316 70%,#F59E0B 100%);
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;
  --nav-h:68px;--section-y:96px;
  --page-x:clamp(20px,5%,64px);--max-w:1280px;
}
[data-theme="dark"]{
  --bg:#060612;--bg-2:#0B0B20;--bg-3:#0F0F2A;
  --surface:#13132E;--surface-2:#18184A;
  --border:rgba(255,255,255,.07);--border-2:rgba(255,255,255,.12);
  --text-1:#FFFFFF;--text-2:rgba(255,255,255,.72);
  --text-3:rgba(255,255,255,.42);--text-4:rgba(255,255,255,.22);
  --nav-bg:rgba(6,6,18,.82);--orb-op:.14;
}
[data-theme="light"]{
  --bg:#F7F7FE;--bg-2:#EEEEFF;--bg-3:#E8E8FF;
  --surface:#FFFFFF;--surface-2:#F2F2FF;
  --border:rgba(0,0,0,.06);--border-2:rgba(0,0,0,.1);
  --text-1:#09090F;--text-2:rgba(9,9,15,.65);
  --text-3:rgba(9,9,15,.42);--text-4:rgba(9,9,15,.22);
  --nav-bg:rgba(247,247,254,.9);--orb-op:.06;
}

.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.orb{position:absolute;border-radius:50%;filter:blur(130px);opacity:var(--orb-op);will-change:transform;}
.o1{width:800px;height:800px;background:#7C3AED;top:-250px;left:-150px;animation:o1 22s ease-in-out infinite;}
.o2{width:600px;height:600px;background:#EC4899;top:25vh;right:-120px;animation:o2 28s ease-in-out infinite;}
.o3{width:500px;height:500px;background:#06B6D4;bottom:5vh;left:10vw;animation:o3 20s ease-in-out infinite;}
@keyframes o1{0%,100%{transform:translate(0,0)}30%{transform:translate(70px,-50px)}70%{transform:translate(-45px,70px)}}
@keyframes o2{0%,100%{transform:translate(0,0)}40%{transform:translate(-80px,45px)}75%{transform:translate(55px,-65px)}}
@keyframes o3{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,-45px) scale(1.08)}}

/* HERO */
.blog-hero{padding:calc(var(--nav-h) + 80px) var(--page-x) 64px;text-align:center;position:relative;z-index:1;}
.blog-hero h1 {
    font-family: 'Clash Display',sans-serif;
    font-size: clamp(2.8rem,6vw,5rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: .97;
    margin-bottom: 20px;
}
.blog-hero p {
    max-width: 520px;
    margin: 0 auto 40px;
    line-height: 1.85;
    font-weight: 400;
    color: var(--text-2);
}

/* FILTER */
.filter-bar{position:sticky;top:var(--nav-h);z-index:90;
  background:var(--nav-bg);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);padding:0 var(--page-x);}
.filter-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;position:relative;
  justify-content:space-between;height:56px;gap:12px;overflow-x:auto;scrollbar-width:none;}
.filter-inner::-webkit-scrollbar{display:none;}
.filter-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 80%;
    overflow-x: auto;
    scrollbar-width: none;
}


.ftab{padding:6px 14px;border-radius:9px;font-size:.8rem;font-weight:600;cursor:pointer;
  border:none;color:var(--text-3);font-family:'General Sans',sans-serif;transition:all .2s;
  white-space:nowrap;background:transparent;}
.ftab:hover{color:var(--text-1);background:var(--surface-2);}
.ftab.active{background:rgba(124,58,237,.12);color:#A78BFA;}
.filter-count {
    font-size: .75rem;
    color: var(--text-2);
    width: 20%;
    text-align: end;
    font-weight:500;
}

/* BLOG SECTION */
.blog-section{padding:64px var(--page-x) 96px;position:relative;z-index:1;}
.blog-wrap{max-width:var(--max-w);margin:0 auto;}

/* FEATURED */
.blog-featured{
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-2xl);
  overflow:hidden;margin-bottom:40px;display:grid;grid-template-columns:1fr 1fr;
  transition:box-shadow .35s,transform .35s;cursor:pointer;
}
.blog-featured:hover{box-shadow:0 32px 80px rgba(0,0,0,.2);transform:translateY(-4px);}
.bf-visual{
  background:linear-gradient(135deg,#1E0A4E,#0D1B4E,#071828);
  display:flex;align-items:center;justify-content:center;min-height:280px;
  position:relative;overflow:hidden;
}
.bf-orb{position:absolute;border-radius:50%;filter:blur(50px);}
.bf-orb1{width:200px;height:200px;background:rgba(124,58,237,.4);top:-40px;right:-40px;}
.bf-orb2{width:160px;height:160px;background:rgba(6,182,212,.3);bottom:-20px;left:20px;}
.bf-emoji{font-size:4rem;position:relative;z-index:1;}
.bf-body{padding:40px 36px;display:flex;flex-direction:column;justify-content:center;}
.bf-cat {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    width: fit-content;
}
.bf-title {
    font-family: 'Clash Display',sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.20;
    color: var(--text-1);
    margin-bottom: 12px;
    word-spacing: 4px;
    letter-spacing: 1px;
}
.bf-desc{font-size:.85rem;color:var(--text-3);line-height:1.7;margin-bottom:20px;}
.bf-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.bf-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.6rem;color:#fff;font-weight:700;}
.bf-author{font-size:.78rem;font-weight:600;color:var(--text-2);}
.bf-date {
    font-size: .75rem;
    color: var(--text-2);
}
.bf-read {
    font-size: .72rem;
    color: var(--text-2);
}
.bf-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-2);
}

/* GRID */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  overflow:hidden;transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s;
  cursor:pointer;display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-8px);box-shadow:0 24px 64px rgba(0,0,0,.2);}
.bc-visual{height:160px;display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;position:relative;overflow:hidden;}
.bc-body{padding:22px 20px;flex:1;display:flex;flex-direction:column;}
.bc-cat{display:inline-flex;padding:3px 10px;border-radius:99px;font-size:.65rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;
  align-self:flex-start;}
.bc-title {
    font-family: 'Clash Display',sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-1);
    margin-bottom: 8px;
    flex: 1;
    word-spacing: 3px;
}
.bc-desc {
    font-size: .78rem;
    color: var(--text-2);
    line-height: 1.65;
    margin-bottom: 16px;
}
.bc-meta{display:flex;align-items:center;gap:8px;margin-top:auto;}
.bc-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.55rem;color:#fff;font-weight:700;}
.bc-author {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-1);
}
.bc-date {
    font-size: .7rem;
    color: var(--text-2);
    margin-left: auto;
}

/* NEWSLETTER */
.nl-section{padding:64px var(--page-x);background:var(--bg-2);border-top:1px solid var(--border);
  position:relative;z-index:1;}
.nl-wrap{max-width:600px;margin:0 auto;text-align:center;}
.nl-title {
    font-family: 'Clash Display',sans-serif;
    font-size: clamp(1.8rem,3vw,2.4rem);
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}
.nl-desc {
    font-size: 1rem;
    color: var(--text-2);
    margin-bottom: 28px;
}
.nl-form{display:flex;gap:10px;max-width:440px;margin:0 auto;}
.nl-input{flex:1;padding:11px 18px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border-2);
  color:var(--text-1);font-family:'General Sans',sans-serif;font-size:.88rem;
  outline:none;transition:border-color .2s;}
::placeholder {
    color:var(--text-3);
}  
.nl-input::placeholder{color:var(--text-4);}
.nl-input:focus{border-color:rgba(124,58,237,.5);}
.nl-note {
    font-size: .72rem;
    color: var(--text-3);
    margin-top: 10px;
}

.hidden{display:none!important;}

@media(max-width:960px){
  .nav-links,.btn-ghost{display:none!important;}
  .ham{display:flex!important;}
  .blog-featured{grid-template-columns:1fr;}
  .bf-visual{min-height:180px;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:720px){
  .blog-grid{grid-template-columns:1fr;}
  .nl-form{flex-direction:column;}
  .footer-grid{grid-template-columns:1fr;}
}