/* ============================================================
   SOCIALSECONDS.COM — SHARED STYLESHEET
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #080810;
  --surface: #0e0e1a;
  --surface2: #14141f;
  --surface3: #1c1c2e;
  --border: #1e1e30;
  --border2: #2a2a40;
  --text: #f0f0fa;
  --text2: #a0a0c0;
  --muted: #5a5a78;
  --viral: #00f0a0;
  --viral-dim: rgba(0,240,160,0.08);
  --viral-border: rgba(0,240,160,0.2);
  --platform: #ff4060;
  --platform-dim: rgba(255,64,96,0.08);
  --platform-border: rgba(255,64,96,0.25);
  --creator: #ffb830;
  --creator-dim: rgba(255,184,48,0.08);
  --creator-border: rgba(255,184,48,0.25);
  --hot: #ff6020;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  overflow-x: hidden;
  line-height: 1.5;
}
body::after {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);
  pointer-events:none; z-index:9999;
}
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }

/* ---- HEADER ---- */
header {
  position:sticky; top:0; z-index:500;
  background:rgba(8,8,16,0.93);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.header-top {
  max-width:1360px; margin:0 auto; padding:0 28px;
  height:64px; display:flex; align-items:center;
}
.logo {
  font-family:'Bebas Neue',sans-serif; font-size:30px;
  letter-spacing:0.06em; color:var(--text);
  flex-shrink:0; display:flex; align-items:center; gap:6px;
}
.logo-ss { color:var(--platform); }
.logo-live {
  font-family:'Syne',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:0.16em; color:var(--platform);
  background:var(--platform-dim); border:1px solid var(--platform-border);
  padding:3px 7px; border-radius:3px;
  display:flex; align-items:center; gap:4px;
  margin-left:4px; position:relative; top:-1px;
}
.pulse {
  width:5px; height:5px; border-radius:50%;
  background:var(--platform); animation:blink 1.4s ease infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.header-nav {
  display:flex; align-items:center; gap:2px; margin-left:40px; flex:1;
}
.header-nav a {
  font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); padding:8px 14px; border-radius:6px;
  transition:color 0.15s, background 0.15s; white-space:nowrap;
}
.header-nav a:hover         { color:var(--text); background:var(--surface3); }
.header-nav a.viral-link:hover   { color:var(--viral); }
.header-nav a.platform-link:hover{ color:var(--platform); }
.header-nav a.creator-link:hover { color:var(--creator); }
.header-nav a.active-viral   { color:var(--viral); }
.header-nav a.active-platform{ color:var(--platform); }
.header-nav a.active-creator { color:var(--creator); }
.header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.btn-search {
  width:36px; height:36px; background:var(--surface3);
  border:1px solid var(--border2); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text2); font-size:16px; transition:all 0.15s;
}
.btn-search:hover { color:var(--text); }
.btn-subscribe {
  font-family:'Syne',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  background:var(--platform); color:#fff; border:none;
  border-radius:8px; padding:9px 20px; cursor:pointer;
  transition:opacity 0.15s, transform 0.15s;
}
.btn-subscribe:hover { opacity:0.85; transform:translateY(-1px); }

/* ---- TICKER ---- */
.ticker-wrap {
  background:var(--surface); border-bottom:1px solid var(--border);
  overflow:hidden; height:36px; display:flex;
}
.ticker-pill {
  background:var(--viral); color:#000;
  font-size:10px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  padding:0 18px; display:flex; align-items:center; flex-shrink:0; gap:6px;
}
.ticker-pill .pulse { background:#000; }
.ticker-scroll { overflow:hidden; flex:1; display:flex; align-items:center; }
.ticker-inner { display:flex; white-space:nowrap; animation:scroll-ticker 55s linear infinite; }
.ticker-item {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500; color:var(--text2);
  padding:0 28px; border-right:1px solid var(--border2);
}
@keyframes scroll-ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ---- TAGS / BADGES ---- */
.tag {
  display:inline-flex; align-items:center;
  font-size:9px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:3px; flex-shrink:0;
}
.tcat, .tag-sm {
  font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:3px; flex-shrink:0;
}
.tag-viral, .tcat-v { background:var(--viral-dim); color:var(--viral); border:1px solid var(--viral-border); }
.tag-platform, .tcat-p { background:var(--platform-dim); color:var(--platform); border:1px solid var(--platform-border); }
.tag-creator, .tcat-c { background:var(--creator-dim); color:var(--creator); border:1px solid var(--creator-border); }
.tag-hot { background:rgba(255,96,32,0.1); color:var(--hot); border:1px solid rgba(255,96,32,0.25); }
.tag-meme { background:rgba(180,100,255,0.1); color:#c87fff; border:1px solid rgba(180,100,255,0.25); }
.time-stamp { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); }
.stat { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:4px; }

/* ---- PAGE HERO BAND ---- */
.page-hero-band {
  border-bottom:1px solid var(--border);
  padding:40px 0 32px;
}
.page-hero-inner {
  max-width:1360px; margin:0 auto; padding:0 28px;
}
.page-hero-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.page-hero-eyebrow::before { content:''; display:block; width:20px; height:2px; border-radius:1px; background:currentColor; }
.page-hero-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(40px,5vw,72px); letter-spacing:0.04em; line-height:1; }
.page-hero-sub { font-size:15px; color:var(--text2); margin-top:10px; max-width:600px; }
.page-hero-stats { display:flex; gap:32px; margin-top:24px; }
.phs { display:flex; flex-direction:column; gap:2px; }
.phs-num { font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:0.04em; line-height:1; }
.phs-label { font-size:11px; color:var(--muted); }

/* ---- SECTION HEADER ---- */
.section-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-bottom:3px;
}
.section-hdr-left { display:flex; align-items:center; gap:12px; }
.section-stripe { width:3px; height:22px; border-radius:2px; flex-shrink:0; }
.section-name { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:0.1em; }
.section-tagline { font-size:12px; color:var(--muted); padding-left:4px; }
.section-more { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); transition:color 0.15s; }
.section-more:hover { color:var(--text); }

/* ---- ARTICLE CARD (universal) ---- */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:4px;
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:border-color 0.2s, background 0.2s, transform 0.2s;
  text-decoration:none; color:inherit;
}
.card:hover { background:var(--surface3); transform:translateY(-2px); }
.card:hover.card-viral  { border-color:var(--viral-border); }
.card:hover.card-platform { border-color:var(--platform-border); }
.card:hover.card-creator  { border-color:var(--creator-border); }
.card:hover.card-meme     { border-color:rgba(180,100,255,0.3); }

.card-visual {
  height:140px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:44px;
}
.card-visual .mesh { position:absolute; inset:0; }
.card-visual .big-emoji { position:relative; z-index:1; }
.bg-viral    { background:linear-gradient(135deg,#051a12,#071810); }
.bg-platform { background:linear-gradient(135deg,#1a050a,#180810); }
.bg-creator  { background:linear-gradient(135deg,#1a1005,#180e08); }
.bg-meme     { background:linear-gradient(135deg,#0d0520,#180818); }

.card-body { padding:18px 20px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-kicker { display:flex; align-items:center; gap:8px; }
.card-headline {
  font-family:'Bebas Neue',sans-serif; font-size:20px;
  letter-spacing:0.04em; line-height:1.1; color:var(--text);
}
.card-deck { font-size:12px; color:var(--text2); line-height:1.55; flex:1; }
.card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px solid var(--border); margin-top:auto;
}
.card-read {
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); transition:color 0.15s;
}
.card:hover .card-read { color:var(--text); }
.fire-count { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--viral); }

/* Mesh decoration (reused) */
.mesh {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(0,240,160,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 20%, rgba(255,64,96,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 80%, rgba(255,184,48,0.08) 0%, transparent 60%);
  animation:mesh-shift 8s ease-in-out infinite alternate;
}
@keyframes mesh-shift { 0%{opacity:.8;transform:scale(1)} 100%{opacity:1;transform:scale(1.05)} }

/* ---- GRIDS ---- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; }

/* ---- FEATURED CARD (large) ---- */
.featured-card {
  background:var(--surface); border:1px solid var(--border); border-radius:4px;
  padding:32px 36px; cursor:pointer; display:flex; flex-direction:column; gap:14px;
  transition:border-color 0.2s, background 0.2s; text-decoration:none; color:inherit;
}
.featured-card:hover { background:var(--surface3); }
.featured-card:hover.viral-featured   { border-color:var(--viral-border); }
.featured-card:hover.platform-featured { border-color:var(--platform-border); }
.featured-card:hover.creator-featured  { border-color:var(--creator-border); }
.fc-headline { font-family:'Bebas Neue',sans-serif; font-size:clamp(24px,2.5vw,36px); letter-spacing:0.04em; line-height:1.05; }
.fc-deck { font-size:14px; color:var(--text2); line-height:1.65; }
.fc-meta { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--border); margin-top:auto; }

/* ---- SIDEBAR ITEM ---- */
.sidebar-item {
  background:var(--surface); border:1px solid var(--border); border-radius:4px;
  padding:16px 18px; cursor:pointer; display:flex; gap:14px; align-items:flex-start;
  transition:background 0.15s, border-color 0.15s; flex:1; text-decoration:none; color:inherit;
}
.sidebar-item:hover { background:var(--surface3); }
.si-icon {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.si-content { display:flex; flex-direction:column; gap:4px; }
.si-headline { font-size:13px; font-weight:700; color:var(--text); line-height:1.35; }
.si-meta { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); }

/* ---- ARTICLE PAGE ---- */
.article-layout {
  max-width:1360px; margin:0 auto; padding:40px 28px 80px;
  display:grid; grid-template-columns:1fr 320px; gap:48px;
}
.article-main {}
.article-header { margin-bottom:28px; }
.article-headline {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,4vw,56px);
  letter-spacing:0.03em; line-height:1.02; margin:14px 0;
}
.article-deck { font-size:16px; color:var(--text2); line-height:1.7; margin-bottom:20px; }
.article-byline {
  display:flex; align-items:center; gap:14px;
  padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.byline-avatar {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex-shrink:0;
}
.byline-info { display:flex; flex-direction:column; gap:2px; }
.byline-name { font-size:13px; font-weight:700; }
.byline-role { font-size:11px; color:var(--muted); }
.byline-stats { margin-left:auto; display:flex; gap:12px; }
.article-body { font-size:15px; color:var(--text2); line-height:1.8; margin-top:28px; }
.article-body p { margin-bottom:20px; }
.article-body h2 { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:0.06em; color:var(--text); margin:32px 0 14px; }
.article-body h3 { font-size:16px; font-weight:800; color:var(--text); margin:24px 0 10px; }
.article-body blockquote {
  border-left:3px solid var(--viral); padding:14px 20px; margin:24px 0;
  background:var(--viral-dim); border-radius:0 4px 4px 0; color:var(--text); font-size:15px; line-height:1.65;
}
.article-body .highlight-box {
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:20px 24px; margin:24px 0;
}
.article-body .stat-big {
  font-family:'Bebas Neue',sans-serif; font-size:48px; letter-spacing:0.04em; display:block; line-height:1;
}
.article-share {
  display:flex; align-items:center; gap:10px; margin-top:32px;
  padding-top:24px; border-top:1px solid var(--border);
}
.share-label { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.share-btn {
  background:var(--surface3); border:1px solid var(--border2); border-radius:6px;
  padding:8px 14px; font-size:12px; font-weight:600; color:var(--text2); cursor:pointer; transition:all 0.15s;
}
.share-btn:hover { background:var(--platform-dim); border-color:var(--platform-border); color:var(--platform); }
.article-sidebar { display:flex; flex-direction:column; gap:24px; padding-top:8px; }
.sidebar-section { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:20px; }
.sidebar-section h4 { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:0.1em; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:10px; }
.sidebar-story { display:flex; flex-direction:column; gap:6px; padding:12px 0; border-bottom:1px solid var(--border); cursor:pointer; text-decoration:none; color:inherit; }
.sidebar-story:last-child { border-bottom:none; padding-bottom:0; }
.sidebar-story:hover .ss-headline { color:var(--viral); }
.ss-headline { font-size:13px; font-weight:700; color:var(--text); line-height:1.35; transition:color 0.15s; }
.ss-meta { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); }

/* ---- NEWSLETTER BAND ---- */
.newsletter-block {
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:52px 60px; display:grid; grid-template-columns:1fr 420px;
  gap:80px; align-items:center; position:relative; overflow:hidden;
}
.nl-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 40% 60% at 0% 50%, rgba(0,240,160,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 30% 40% at 100% 50%, rgba(255,64,96,0.05) 0%, transparent 60%);
  pointer-events:none;
}
.nl-eyebrow { font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--viral); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.nl-eyebrow::before { content:''; display:block; width:24px; height:2px; background:var(--viral); border-radius:1px; }
.nl-title { font-family:'Bebas Neue',sans-serif; font-size:48px; letter-spacing:0.04em; line-height:1.02; color:var(--text); margin-bottom:14px; }
.nl-sub { font-size:14px; color:var(--text2); line-height:1.7; }
.nl-proofs { display:flex; gap:24px; margin-top:20px; }
.nl-proof { display:flex; flex-direction:column; gap:2px; }
.nl-proof-num { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:0.04em; color:var(--text); line-height:1; }
.nl-proof-label { font-size:11px; color:var(--muted); }
.nl-form { display:flex; flex-direction:column; gap:12px; position:relative; }
.nl-input { background:var(--bg); border:1px solid var(--border2); border-radius:8px; padding:14px 18px; font-family:'Syne',sans-serif; font-size:14px; color:var(--text); outline:none; transition:border-color 0.2s; }
.nl-input:focus { border-color:var(--viral); }
.nl-input::placeholder { color:var(--muted); }
.nl-freq { display:flex; gap:8px; }
.nl-freq-btn { flex:1; background:var(--surface3); border:1px solid var(--border2); border-radius:6px; padding:10px; font-family:'Syne',sans-serif; font-size:12px; font-weight:600; color:var(--text2); cursor:pointer; transition:all 0.15s; text-align:center; }
.nl-freq-btn:hover, .nl-freq-btn.active { background:var(--viral-dim); border-color:var(--viral-border); color:var(--viral); }
.nl-submit { background:var(--viral); border:none; border-radius:8px; padding:15px 24px; font-family:'Syne',sans-serif; font-size:14px; font-weight:800; color:#000; cursor:pointer; transition:opacity 0.15s, transform 0.15s; }
.nl-submit:hover { opacity:0.88; transform:translateY(-1px); }
.nl-note { text-align:center; font-size:11px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }

/* ---- FOOTER ---- */
footer { margin-top:64px; border-top:1px solid var(--border); }
.footer-main { max-width:1360px; margin:0 auto; padding:56px 28px 40px; display:grid; grid-template-columns:280px 1fr 1fr 1fr; gap:60px; }
.footer-brand-logo { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:0.06em; margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.footer-brand-logo .logo-ss { color:var(--platform); }
.footer-desc { font-size:13px; color:var(--text2); line-height:1.65; margin-bottom:20px; }
.footer-socials { display:flex; gap:8px; }
.footer-social-btn { width:34px; height:34px; background:var(--surface3); border:1px solid var(--border2); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; transition:all 0.15s; color:var(--text2); }
.footer-social-btn:hover { background:var(--platform-dim); border-color:var(--platform-border); color:var(--platform); }
.footer-col h5 { font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.footer-col a { display:block; font-size:13px; color:var(--text2); margin-bottom:12px; transition:color 0.15s; font-weight:500; }
.footer-col a:hover { color:var(--text); }
.footer-bottom-bar { max-width:1360px; margin:0 auto; padding:18px 28px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.footer-bottom-text { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); }
.footer-tagline { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); }
.footer-tagline span { color:var(--viral); }

/* ---- ANIMATIONS ---- */
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.anim { animation:fadeUp 0.45s ease both; }
.anim-d1 { animation-delay:.05s; }
.anim-d2 { animation-delay:.10s; }
.anim-d3 { animation-delay:.15s; }
.anim-d4 { animation-delay:.20s; }

/* ---- CONTENT WRAP ---- */
.content-wrap { max-width:1360px; margin:0 auto; padding:0 28px; }
.section-row { margin-top:48px; }
.section-row:last-child { padding-bottom:48px; }
.mb3 { margin-bottom:3px; }
.mt3 { margin-top:3px; }
.gap3 { gap:3px; }

/* ---- RESPONSIVE ---- */
@media (max-width:1100px) {
  .footer-main { grid-template-columns:1fr 1fr; gap:40px; }
  .newsletter-block { grid-template-columns:1fr; gap:32px; padding:36px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .article-layout { grid-template-columns:1fr; }
  .article-sidebar { display:none; }
}
@media (max-width:768px) {
  .header-nav { display:none; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns:1fr; }
  .content-wrap { padding:0 16px; }
  .footer-main { grid-template-columns:1fr; padding:36px 16px; }
  .footer-bottom-bar { flex-direction:column; gap:8px; padding:16px; }
  .newsletter-block { padding:28px 20px; }
  .page-hero-inner { padding:0 16px; }
}