/* Shared styling for Social Baazi blog + service landing pages */
:root{
  --red:#9B1515;--red-dark:#7a0f0f;--cream:#F5F0E0;--cream-dark:#ede6cc;
  --gold:#D4A017;--black:#0d0d0d;--white:#fefefe;--muted:#555;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--black);font-family:'Barlow Condensed',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--red)}
a:hover{color:var(--red-dark)}

/* Nav */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;background:rgba(245,240,224,.94);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--red)}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--red);letter-spacing:2px;text-decoration:none}
.nav-logo span{color:var(--gold)}
.nav-back{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--black)}
.nav-back:hover{color:var(--red)}

/* Hero */
.hero{background:var(--red);color:var(--cream);padding:80px 40px 70px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80' viewBox='0 0 60 80'%3E%3Crect x='5' y='5' width='50' height='70' rx='6' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.5'/%3E%3C/svg%3E");background-size:60px 80px}
.eyebrow{position:relative;display:inline-block;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:6px 14px;margin-bottom:24px}
.hero h1{position:relative;font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,6vw,80px);line-height:1;color:var(--cream);letter-spacing:1.5px;max-width:1000px;margin:0 auto}
.hero p.lede{position:relative;font-family:'Lora',serif;font-style:italic;font-size:18px;color:rgba(245,240,224,.85);max-width:760px;margin:22px auto 0;line-height:1.6}
.meta{position:relative;margin-top:24px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(245,240,224,.6)}

/* Article body */
article{max-width:780px;margin:0 auto;padding:60px 28px}
article h2{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--red);letter-spacing:.5px;margin:48px 0 18px;line-height:1.05}
article h3{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--black);letter-spacing:.5px;margin:32px 0 14px}
article p{font-size:18px;color:#222;margin:0 0 18px}
article ul,article ol{margin:0 0 22px 22px;font-size:18px;color:#222}
article li{margin-bottom:8px;line-height:1.6}
article strong{color:var(--red);font-weight:700}
article blockquote{margin:30px 0;padding:18px 26px;border-left:4px solid var(--red);font-family:'Lora',serif;font-style:italic;font-size:19px;color:#333;background:rgba(155,21,21,.04)}
article hr{border:none;height:2px;background:var(--red);width:60px;margin:38px 0}
article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:16px}
article th,article td{padding:12px;border:1px solid #ccc;text-align:left}
article th{background:var(--red);color:var(--cream);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px}
article code{background:#1a1a1a;color:var(--cream);padding:2px 8px;border-radius:3px;font-size:15px}
article .tldr{background:var(--cream-dark);border:2px solid var(--red);padding:22px 26px;margin:30px 0}
article .tldr strong{display:block;font-size:12px;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;color:var(--red)}

/* Service-page sections */
.section-dark{background:var(--black);color:var(--cream);padding:70px 40px}
.section-dark h2{color:var(--cream);text-align:center;font-family:'Bebas Neue',sans-serif;font-size:46px;letter-spacing:1px;margin-bottom:14px}
.section-dark .sub{text-align:center;color:rgba(245,240,224,.6);font-family:'Lora',serif;font-style:italic;max-width:680px;margin:0 auto 40px}
.section-cream{background:var(--cream-dark);padding:70px 40px}
.section-cream h2{color:var(--red);text-align:center;font-family:'Bebas Neue',sans-serif;font-size:46px;letter-spacing:1px;margin-bottom:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1100px;margin:0 auto}
.card{background:#171717;border:1px solid #2a2a2a;padding:28px;color:var(--cream)}
.card h3{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:22px;letter-spacing:.5px;margin-bottom:10px}
.card p{font-size:15px;color:#aaa;line-height:1.6}
.card-cream{background:var(--cream);border:1px solid rgba(155,21,21,.2);padding:28px;color:#222}
.card-cream h3{font-family:'Bebas Neue',sans-serif;color:var(--red);font-size:22px;letter-spacing:.5px;margin-bottom:10px}

/* CTA + Footer */
.cta{background:var(--red);color:var(--cream);padding:70px 28px;text-align:center}
.cta h2{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:1.5px;margin-bottom:14px}
.cta h2 span{color:var(--gold)}
.cta p{font-size:17px;color:rgba(245,240,224,.85);max-width:600px;margin:0 auto 30px}
.btn{display:inline-block;padding:15px 38px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;background:var(--cream);color:var(--red);border:2px solid var(--cream);transition:all .25s}
.btn:hover{background:transparent;color:var(--cream)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.foot{background:var(--black);color:#666;padding:36px 28px;text-align:center;border-top:3px solid var(--red);font-size:12px;letter-spacing:1px}
.foot a{color:#888;text-decoration:none}
.foot a:hover{color:var(--red)}
.foot p{margin:4px 0}

/* Related */
.related{background:var(--cream);padding:60px 28px}
.related h2{font-family:'Bebas Neue',sans-serif;color:var(--red);font-size:36px;text-align:center;margin-bottom:30px;letter-spacing:1px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:0 auto}
.related-card{display:block;background:#fff;padding:20px;border:1px solid rgba(155,21,21,.2);text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
.related-card:hover{transform:translateY(-4px);border-color:var(--red)}
.related-card .cat{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.related-card .title{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--red);line-height:1.1}

@media(max-width:760px){
  .nav{padding:14px 22px}
  .hero{padding:60px 22px 50px}
  .hero h1{font-size:42px}
  article{padding:40px 22px}
  article h2{font-size:30px}
  article p,article ul,article ol{font-size:17px}
  .grid-3,.grid-2,.related-grid{grid-template-columns:1fr}
  .cta h2{font-size:36px}
}