/* ================================================
   SOFT CAPTIONS PRO — v7.0  |  softcaptions.xyz
   Next-level White+Blue theme with Pro Animations
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── VARIABLES ── */
:root {
  --blue:      #1a6eff;
  --blue-dark: #0047AB;
  --blue-deep: #001f6b;
  --cyan:      #00b4d8;
  --white:     #ffffff;
  --bg:        #f4f7ff;
  --surface:   #ffffff;
  --border:    #d0e2ff;
  --text:      #0a1628;
  --muted:     #526080;
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 4px 28px rgba(0,71,171,0.10);
  --shadow-lg: 0 16px 48px rgba(0,71,171,0.18);
  --font-d:    'Playfair Display', Georgia, serif;
  --font-b:    'DM Sans', Arial, sans-serif;
  --ease:      cubic-bezier(0.22,1,0.36,1);
  --ease-back: cubic-bezier(0.34,1.56,0.64,1);
}

/* ── NUCLEAR RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box !important; }
html { background:#f4f7ff !important; scroll-behavior:smooth; }
body {
  font-family: var(--font-b) !important;
  background: #f4f7ff !important;
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  overflow-x: hidden !important;
}
a { text-decoration:none !important; color:inherit !important; }
img { display:block !important; max-width:100% !important; }
ul,ol { list-style:none !important; }
button { cursor:pointer; font-family:var(--font-b) !important; }

/* Kill old theme nav */
.site-header,.main-navigation,#site-navigation,.primary-menu,.nav-menu,.menu-primary-container,.header-menu { display:none !important; }
html { margin-top:0 !important; }
#wpadminbar { position:fixed !important; }

/* ════════════════════════════════════════════
   PAGE LOADER
════════════════════════════════════════════ */
#sc-loader {
  position: fixed !important;
  inset: 0 !important;
  background: #ffffff !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 20px !important;
  transition: opacity 0.6s var(--ease), visibility 0.6s !important;
}
#sc-loader.hide { opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }

.sc-load-logo {
  width: 64px !important; height: 64px !important;
  background: linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  border-radius: 18px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 30px !important;
  animation: scLoadPulse 1.2s ease-in-out infinite !important;
  box-shadow: 0 0 0 0 rgba(26,110,255,0.4) !important;
}
.sc-load-text {
  font-family: var(--font-d) !important;
  font-size: 22px !important; font-weight: 700 !important;
  color: var(--blue-dark) !important;
  letter-spacing: -0.3px !important;
}
.sc-load-dots { display:flex !important; gap:6px !important; }
.sc-load-dots span {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--blue) !important;
  animation: scDotBounce 1.2s ease-in-out infinite !important;
}
.sc-load-dots span:nth-child(2) { animation-delay:0.2s !important; background:linear-gradient(135deg,var(--blue),var(--cyan)) !important; }
.sc-load-dots span:nth-child(3) { animation-delay:0.4s !important; background:var(--cyan) !important; }

@keyframes scLoadPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(26,110,255,0.4); }
  50%      { transform:scale(1.1); box-shadow:0 0 0 16px rgba(26,110,255,0); }
}
@keyframes scDotBounce {
  0%,80%,100% { transform:translateY(0); opacity:0.5; }
  40%          { transform:translateY(-10px); opacity:1; }
}

/* ════════════════════════════════════════════
   HEADER
════════════════════════════════════════════ */
#sc-header {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(208,226,255,0.8) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 20px rgba(0,71,171,0.07) !important;
  width: 100% !important;
}
#sc-header-inner {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ── NEW LOGO ── */
#sc-logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}
#sc-logo-mark {
  position: relative !important;
  width: 44px !important; height: 44px !important;
  flex-shrink: 0 !important;
}
/* Outer ring */
#sc-logo-mark::before {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  opacity: 0.2 !important;
  animation: scLogoRingPulse 2.5s ease-in-out infinite !important;
}
#sc-logo-icon {
  position: relative !important;
  width: 44px !important; height: 44px !important;
  background: linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  border-radius: 13px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 22px !important;
  box-shadow: 0 4px 16px rgba(26,110,255,0.35) !important;
  animation: scLogoFloat 3s ease-in-out infinite !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
/* Shimmer on logo */
#sc-logo-icon::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important; left: -60% !important;
  width: 40% !important; height: 200% !important;
  background: rgba(255,255,255,0.35) !important;
  transform: skewX(-20deg) !important;
  animation: scLogoShimmer 3s ease-in-out infinite !important;
}
#sc-logo-texts { display:flex !important; flex-direction:column !important; line-height:1.15 !important; }
#sc-logo-name {
  font-family: var(--font-d) !important;
  font-size: 20px !important; font-weight: 700 !important;
  color: var(--blue-dark) !important;
  letter-spacing: -0.4px !important;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#sc-logo-tag {
  font-size: 9.5px !important; font-weight: 600 !important;
  color: var(--cyan) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: var(--cyan) !important;
}

@keyframes scLogoFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  33%      { transform:translateY(-3px) rotate(3deg); }
  66%      { transform:translateY(-1px) rotate(-2deg); }
}
@keyframes scLogoShimmer {
  0%   { left:-60%; opacity:0; }
  30%  { opacity:1; }
  60%  { left:130%; opacity:0; }
  100% { left:130%; opacity:0; }
}
@keyframes scLogoRingPulse {
  0%,100% { opacity:0.2; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.12); }
}

/* Hamburger */
#sc-ham {
  background:none !important; border:none !important;
  padding:9px !important; border-radius:10px !important;
  display:flex !important; flex-direction:column !important; gap:5px !important;
  transition:background 0.2s !important;
}
#sc-ham:hover { background:rgba(26,110,255,0.08) !important; }
#sc-ham span {
  display:block !important; width:24px !important; height:2px !important;
  background:var(--blue-dark) !important; border-radius:3px !important;
  transition:all 0.35s var(--ease) !important;
  transform-origin: center !important;
}

/* Nav Dropdown */
#sc-nav {
  position: fixed !important;
  top: 72px !important; right: 24px !important;
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  min-width: 250px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-12px) scale(0.96) !important;
  pointer-events: none !important;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease) !important;
  z-index: 99999 !important;
}
#sc-nav.open {
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:all !important;
}
#sc-nav a {
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:13px 20px !important;
  color:var(--text) !important; font-size:14px !important; font-weight:500 !important;
  border-bottom:1px solid rgba(208,226,255,0.5) !important;
  transition:all 0.2s !important; background:transparent !important;
  text-decoration:none !important;
}
#sc-nav a:last-child { border-bottom:none !important; }
#sc-nav a:hover {
  background:linear-gradient(135deg, rgba(26,110,255,0.06), rgba(0,180,216,0.06)) !important;
  color:var(--blue) !important;
  padding-left:28px !important;
}
.sc-dot {
  width:8px !important; height:8px !important;
  border-radius:50% !important; flex-shrink:0 !important; display:inline-block !important;
}

/* ════════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════════ */
#sc-hero {
  background: linear-gradient(135deg, #0035a0 0%, var(--blue) 45%, #0090c8 75%, var(--cyan) 100%) !important;
  background-size: 300% 300% !important;
  padding: 56px 24px 64px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  animation: scHeroBg 10s ease infinite !important;
}

/* Animated grid lines */
#sc-hero::before {
  content:'' !important;
  position:absolute !important; inset:0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  animation: scGridScroll 20s linear infinite !important;
  pointer-events:none !important;
}

/* Glow orbs */
#sc-hero::after {
  content:'' !important;
  position:absolute !important;
  width:600px !important; height:600px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%) !important;
  top:-200px !important; right:-100px !important;
  animation:scOrbFloat 8s ease-in-out infinite !important;
  pointer-events:none !important;
}

.sc-hero-inner { position:relative !important; z-index:2 !important; }

.sc-hero-badge {
  display:inline-flex !important;
  align-items:center !important; gap:6px !important;
  background:rgba(255,255,255,0.15) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  color:#ffffff !important;
  font-size:11px !important; font-weight:600 !important;
  padding:5px 14px !important; border-radius:50px !important;
  letter-spacing:1.2px !important; text-transform:uppercase !important;
  margin-bottom:18px !important;
  backdrop-filter:blur(10px) !important;
  animation:scSlideDown 0.7s var(--ease) 0.1s both !important;
}
.sc-hero-badge::before { content:'✦' !important; animation:scSparkle 2s ease-in-out infinite !important; }

#sc-hero h1 {
  font-family: var(--font-d) !important;
  font-size: clamp(26px, 5vw, 52px) !important;
  color: #ffffff !important;
  line-height: 1.18 !important;
  margin-bottom: 14px !important;
  font-weight: 700 !important;
  animation: scSlideDown 0.7s var(--ease) 0.2s both !important;
}

#sc-hero h1 span {
  font-style:italic !important;
  background:linear-gradient(90deg, #ffffff, rgba(255,255,255,0.75)) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}

#sc-hero p {
  color:rgba(255,255,255,0.82) !important;
  font-size:16px !important;
  margin-bottom:32px !important;
  animation:scSlideDown 0.7s var(--ease) 0.32s both !important;
}

/* Search */
#sc-search-wrap {
  display:flex !important;
  max-width:560px !important;
  margin:0 auto !important;
  background:rgba(255,255,255,0.97) !important;
  border-radius:50px !important;
  overflow:hidden !important;
  box-shadow:0 8px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.3) !important;
  animation:scZoomIn 0.7s var(--ease-back) 0.44s both !important;
  transition:transform 0.3s var(--ease), box-shadow 0.3s !important;
}
#sc-search-wrap:focus-within {
  transform:scale(1.03) translateY(-2px) !important;
  box-shadow:0 16px 56px rgba(0,0,0,0.28), 0 0 0 2px rgba(255,255,255,0.5) !important;
}
#sc-search-wrap input[type="search"],
#sc-search-wrap input[type="text"] {
  flex:1 !important; border:none !important; outline:none !important;
  box-shadow:none !important; background:transparent !important;
  padding:17px 24px !important; font-size:15px !important;
  font-family:var(--font-b) !important; color:var(--text) !important;
  -webkit-appearance:none !important;
}
#sc-search-wrap input::placeholder { color:#9ab !important; }
#sc-search-wrap button[type="submit"] {
  background:linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  border:none !important; padding:0 26px !important;
  color:#fff !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  transition:opacity 0.2s !important; min-width:54px !important;
}
#sc-search-wrap button:hover { opacity:0.88 !important; }

/* Stats row */
.sc-hero-stats {
  display:flex !important; justify-content:center !important;
  gap:32px !important; margin-top:32px !important;
  animation:scFadeIn 0.8s ease 0.7s both !important;
}
.sc-stat { text-align:center !important; }
.sc-stat-num {
  display:block !important;
  font-family:var(--font-d) !important;
  font-size:24px !important; font-weight:700 !important;
  color:#ffffff !important;
}
.sc-stat-label {
  font-size:11px !important;
  color:rgba(255,255,255,0.65) !important;
  letter-spacing:0.8px !important;
  text-transform:uppercase !important;
}

/* ════════════════════════════════════════════
   MAIN
════════════════════════════════════════════ */
#sc-main {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 52px 24px 40px !important;
  background: transparent !important;
}
#sc-section-head {
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  margin-bottom:32px !important;
  flex-wrap:wrap !important; gap:12px !important;
}
.sc-head-left {}
#sc-section-head h2 {
  font-family:var(--font-d) !important;
  font-size:30px !important; font-weight:700 !important;
  color:var(--blue-dark) !important;
  margin-bottom:4px !important;
  position:relative !important;
  display:inline-block !important;
}
#sc-section-head h2::after {
  content:'' !important;
  position:absolute !important;
  bottom:-5px !important; left:0 !important;
  height:3px !important; width:0 !important;
  background:linear-gradient(90deg, var(--blue), var(--cyan)) !important;
  border-radius:3px !important;
  animation:scUnderline 0.8s var(--ease) 0.4s forwards !important;
}
#sc-section-head p { color:var(--muted) !important; font-size:14px !important; }

/* ════════════════════════════════════════════
   SMART GRID — Mixed aspect ratios
════════════════════════════════════════════ */
#sc-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin-bottom: 48px !important;
  align-items: start !important;
}

/* ── POST CARD ── */
.sc-card {
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid rgba(208,226,255,0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.4s var(--ease), box-shadow 0.4s !important;
  animation: scCardIn 0.55s var(--ease) both !important;
  will-change: transform !important;
  cursor: pointer !important;
}
.sc-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.sc-card:nth-child(1){animation-delay:0.06s!important}
.sc-card:nth-child(2){animation-delay:0.12s!important}
.sc-card:nth-child(3){animation-delay:0.18s!important}
.sc-card:nth-child(4){animation-delay:0.24s!important}
.sc-card:nth-child(5){animation-delay:0.30s!important}
.sc-card:nth-child(6){animation-delay:0.36s!important}
.sc-card:nth-child(7){animation-delay:0.42s!important}
.sc-card:nth-child(8){animation-delay:0.48s!important}

/* LANDSCAPE 16:9 */
.sc-card.sc-ratio-landscape .sc-img-wrap {
  padding-top: 56.25% !important; /* 16:9 */
}

/* PORTRAIT 9:16 */
.sc-card.sc-ratio-portrait .sc-img-wrap {
  padding-top: 177.78% !important; /* 9:16 */
}

/* Portrait cards span 1 column but look great tall */
.sc-card.sc-ratio-portrait {
  grid-row: span 2 !important;
}

/* Thumb wrapper */
.sc-img-wrap {
  display:block !important;
  position:relative !important; width:100% !important;
  overflow:hidden !important;
  background:var(--bg) !important;
  text-decoration:none !important;
}
.sc-img-wrap img {
  position:absolute !important;
  inset:0 !important; width:100% !important; height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
  transition:transform 0.55s var(--ease) !important;
}
.sc-card:hover .sc-img-wrap img { transform:scale(1.07) !important; }

/* Gradient overlay */
.sc-img-overlay {
  position:absolute !important; inset:0 !important;
  background:linear-gradient(to top, rgba(0,35,100,0.45) 0%, transparent 55%) !important;
  opacity:0 !important;
  transition:opacity 0.35s !important; pointer-events:none !important; z-index:1 !important;
}
.sc-card:hover .sc-img-overlay { opacity:1 !important; }

/* Shimmer on hover */
.sc-img-wrap::before {
  content:'' !important;
  position:absolute !important; inset:0 !important;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.15) 50%, transparent 65%) !important;
  background-size:250% 100% !important;
  z-index:2 !important; opacity:0 !important;
  transition:opacity 0.2s !important; pointer-events:none !important;
}
.sc-card:hover .sc-img-wrap::before {
  opacity:1 !important;
  animation:scShimmer 0.8s ease !important;
}

/* No thumbnail */
.sc-no-img {
  position:absolute !important; inset:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:40px !important;
  background:linear-gradient(135deg, #e8f0fe, #c2d8ff) !important;
}

/* Category badge */
.sc-badge {
  position:absolute !important;
  top:12px !important; left:12px !important;
  background:linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  color:#ffffff !important;
  font-size:9.5px !important; font-weight:700 !important;
  padding:4px 11px !important; border-radius:20px !important;
  text-transform:uppercase !important; letter-spacing:0.6px !important;
  z-index:3 !important;
  animation:scBadgePop 0.4s var(--ease-back) 0.5s both !important;
  box-shadow:0 2px 10px rgba(0,71,171,0.3) !important;
}

/* Card body */
.sc-body {
  padding:16px 18px 18px !important;
  flex:1 !important;
  display:flex !important; flex-direction:column !important; gap:9px !important;
  background:var(--surface) !important;
}
.sc-meta {
  display:flex !important; align-items:center !important;
  gap:7px !important; font-size:11.5px !important;
  color:var(--muted) !important; flex-wrap:wrap !important;
}
.sc-av {
  width:22px !important; height:22px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:9px !important; color:#fff !important; font-weight:700 !important; flex-shrink:0 !important;
}
.sc-mdot { color:var(--border) !important; }
.sc-title {
  font-family:var(--font-d) !important;
  font-size:15px !important; font-weight:600 !important; line-height:1.42 !important;
  color:var(--text) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
  overflow:hidden !important; flex:1 !important;
  transition:color 0.2s !important;
  text-decoration:none !important;
}
.sc-title:hover { color:var(--blue) !important; }
.sc-rm {
  display:inline-flex !important; align-items:center !important; gap:5px !important;
  color:var(--blue) !important; font-size:12.5px !important; font-weight:600 !important;
  padding-top:10px !important;
  border-top:1px solid rgba(208,226,255,0.7) !important;
  margin-top:4px !important;
  transition:gap 0.2s, color 0.2s !important;
  text-decoration:none !important;
}
.sc-rm:hover { gap:9px !important; color:var(--blue-dark) !important; }
.sc-rm::after { content:'→' !important; font-size:13px !important; }

/* ════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════ */
#sc-pages {
  display:flex !important; align-items:center !important;
  justify-content:center !important; gap:7px !important;
  padding:10px 0 52px !important; flex-wrap:wrap !important;
}
#sc-pages .page-numbers {
  min-width:40px !important; height:40px !important;
  border-radius:11px !important;
  border:1.5px solid var(--border) !important;
  background:var(--white) !important;
  color:var(--blue-dark) !important;
  font-size:14px !important; font-weight:600 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:0 8px !important; text-decoration:none !important;
  transition:all 0.25s var(--ease-back) !important;
}
#sc-pages .page-numbers:hover,
#sc-pages .page-numbers.current {
  background:linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  border-color:transparent !important; color:#ffffff !important;
  transform:translateY(-3px) scale(1.08) !important;
  box-shadow:0 6px 18px rgba(26,110,255,0.35) !important;
}
#sc-pages .page-numbers.dots {
  border-color:transparent !important; background:transparent !important;
  color:var(--muted) !important; pointer-events:none !important;
}

/* ════════════════════════════════════════════
   SCROLL-TO-TOP
════════════════════════════════════════════ */
#sc-top {
  position:fixed !important; bottom:24px !important; right:24px !important;
  width:48px !important; height:48px !important;
  background:linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:#fff !important; font-size:20px !important; border:none !important;
  box-shadow:0 6px 24px rgba(26,110,255,0.45) !important;
  opacity:0 !important; transform:translateY(20px) scale(0.8) !important;
  transition:all 0.4s var(--ease-back) !important;
  z-index:9998 !important;
}
#sc-top.on { opacity:1 !important; transform:translateY(0) scale(1) !important; }
#sc-top:hover { transform:translateY(-4px) scale(1.1) !important; box-shadow:0 12px 32px rgba(26,110,255,0.55) !important; }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
#sc-footer {
  background:linear-gradient(160deg, #001f6b 0%, #0035a0 50%, #002080 100%) !important;
  color:#ffffff !important;
  padding:60px 24px 30px !important;
  position:relative !important; overflow:hidden !important;
}
/* Animated bg mesh */
#sc-footer::before {
  content:'' !important; position:absolute !important; inset:0 !important;
  background-image:radial-gradient(circle at 20% 50%, rgba(26,110,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0,180,216,0.12) 0%, transparent 40%) !important;
  animation:scFooterMesh 8s ease-in-out infinite alternate !important;
  pointer-events:none !important;
}
#sc-footer-in { max-width:1240px !important; margin:0 auto !important; position:relative !important; z-index:1 !important; }

/* Footer logo */
.sc-f-logo {
  display:flex !important; flex-direction:column !important;
  align-items:center !important; margin-bottom:36px !important;
}
.sc-f-logo-icon {
  width:52px !important; height:52px !important;
  background:linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  border-radius:15px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:26px !important; margin-bottom:10px !important;
  box-shadow:0 6px 24px rgba(26,110,255,0.4) !important;
  animation:scLogoFloat 3s ease-in-out infinite !important;
}
.sc-f-logo-name {
  font-family:var(--font-d) !important;
  font-size:22px !important; font-weight:700 !important; color:#ffffff !important;
}
.sc-f-logo-tag {
  font-size:10px !important; color:rgba(255,255,255,0.55) !important;
  letter-spacing:2px !important; text-transform:uppercase !important;
}

/* Social */
#sc-socials {
  display:flex !important; justify-content:center !important;
  gap:12px !important; margin-bottom:36px !important; flex-wrap:wrap !important;
}
.sc-soc {
  width:46px !important; height:46px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:#ffffff !important; text-decoration:none !important;
  transition:all 0.3s var(--ease-back) !important;
}
.sc-soc:hover {
  background:rgba(255,255,255,0.2) !important;
  transform:translateY(-5px) scale(1.12) !important;
  box-shadow:0 10px 28px rgba(0,0,0,0.3) !important;
  border-color:rgba(255,255,255,0.3) !important;
}
.sc-soc svg { width:18px !important; height:18px !important; fill:currentColor !important; }
.sc-soc:nth-child(1){animation:scSocIn 0.5s var(--ease) 0.05s both!important}
.sc-soc:nth-child(2){animation:scSocIn 0.5s var(--ease) 0.10s both!important}
.sc-soc:nth-child(3){animation:scSocIn 0.5s var(--ease) 0.15s both!important}
.sc-soc:nth-child(4){animation:scSocIn 0.5s var(--ease) 0.20s both!important}
.sc-soc:nth-child(5){animation:scSocIn 0.5s var(--ease) 0.25s both!important}
.sc-soc:nth-child(6){animation:scSocIn 0.5s var(--ease) 0.30s both!important}

.sc-f-hr { border:none !important; height:1px !important; background:rgba(255,255,255,0.10) !important; margin-bottom:28px !important; }

/* Footer nav */
#sc-fnav {
  display:flex !important; justify-content:center !important;
  flex-wrap:wrap !important; gap:8px 22px !important; margin-bottom:36px !important;
}
#sc-fnav a {
  color:rgba(255,255,255,0.62) !important;
  font-size:11.5px !important; font-weight:500 !important;
  text-transform:uppercase !important; letter-spacing:0.9px !important;
  transition:color 0.2s, letter-spacing 0.2s !important;
  text-decoration:none !important;
}
#sc-fnav a:hover { color:#ffffff !important; letter-spacing:1.4px !important; }

/* Footer bottom */
#sc-f-bot {
  text-align:center !important;
  padding-top:20px !important;
  border-top:1px solid rgba(255,255,255,0.09) !important;
}
#sc-f-copy {
  font-size:12.5px !important;
  color:rgba(255,255,255,0.38) !important; margin:0 !important;
}

/* ════════════════════════════════════════════
   SINGLE POST
════════════════════════════════════════════ */
#sc-single { max-width:800px !important; margin:0 auto !important; padding:44px 24px 64px !important; }
.sc-s-badge {
  display:inline-block !important;
  background:linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  color:#fff !important; font-size:10.5px !important; font-weight:700 !important;
  padding:4px 14px !important; border-radius:20px !important;
  text-transform:uppercase !important; letter-spacing:0.6px !important;
  margin-bottom:16px !important; text-decoration:none !important;
  animation:scBadgePop 0.4s var(--ease-back) 0.1s both !important;
}
.sc-s-title {
  font-family:var(--font-d) !important;
  font-size:clamp(24px,4vw,40px) !important; font-weight:700 !important;
  color:var(--blue-dark) !important; line-height:1.22 !important;
  margin-bottom:16px !important;
  animation:scSlideUp 0.65s var(--ease) 0.15s both !important;
}
.sc-s-meta {
  display:flex !important; align-items:center !important;
  gap:10px !important; font-size:13px !important; color:var(--muted) !important;
  margin-bottom:28px !important; flex-wrap:wrap !important;
  animation:scFadeIn 0.5s ease 0.3s both !important;
}
.sc-s-feat {
  width:100% !important;
  position:relative !important; overflow:hidden !important;
  border-radius:var(--radius) !important;
  margin-bottom:32px !important;
  box-shadow:var(--shadow-lg) !important;
  animation:scZoomIn 0.7s var(--ease) 0.2s both !important;
}
/* Auto ratio for single post too */
.sc-s-feat.sc-ratio-landscape { padding-top:56.25% !important; }
.sc-s-feat.sc-ratio-portrait  { padding-top:177.78% !important; }
.sc-s-feat img {
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  transition:transform 0.6s var(--ease) !important;
}
.sc-s-feat:hover img { transform:scale(1.04) !important; }

.sc-content { animation:scSlideUp 0.65s ease 0.35s both !important; }
.sc-content h2,.sc-content h3 {
  font-family:var(--font-d) !important;
  color:var(--blue-dark) !important; margin:28px 0 11px !important;
}
.sc-content p { margin-bottom:18px !important; line-height:1.85 !important; font-size:16px !important; }
.sc-content a { color:var(--blue) !important; }
.sc-content img { border-radius:12px !important; margin:20px 0 !important; width:100% !important; }

.sc-post-nav {
  display:flex !important; justify-content:space-between !important;
  gap:14px !important; margin-top:44px !important;
  padding-top:22px !important; border-top:1px solid var(--border) !important;
  flex-wrap:wrap !important;
}
.sc-post-nav a {
  color:var(--blue) !important; font-size:13.5px !important; font-weight:600 !important;
  text-decoration:none !important; max-width:48% !important;
  transition:color 0.2s !important;
}
.sc-post-nav a:hover { color:var(--blue-dark) !important; }

/* ════════════════════════════════════════════
   COPY BUTTON
════════════════════════════════════════════ */
.sc-prompt-block { position:relative !important; margin:22px 0 !important; }
.sc-prompt-block pre,.sc-prompt-block code,
.sc-content blockquote,.sc-content pre,
.sc-content .wp-block-code,.sc-content .wp-block-quote,
.sc-content .wp-block-preformatted {
  background:#f0f6ff !important;
  border:1.5px solid var(--border) !important;
  border-left:4px solid var(--blue) !important;
  border-radius:12px !important;
  padding:18px 60px 18px 20px !important;
  font-family:var(--font-b) !important;
  font-size:14.5px !important; line-height:1.78 !important;
  color:var(--text) !important;
  white-space:pre-wrap !important; word-break:break-word !important;
  margin:0 !important;
}
.sc-copy-btn {
  position:absolute !important; top:12px !important; right:12px !important;
  background:linear-gradient(135deg, var(--blue), var(--cyan)) !important;
  color:#fff !important; border:none !important;
  border-radius:9px !important; padding:7px 14px !important;
  font-size:12px !important; font-weight:600 !important;
  display:flex !important; align-items:center !important; gap:5px !important;
  transition:all 0.25s var(--ease-back) !important;
  box-shadow:0 3px 10px rgba(26,110,255,0.3) !important;
  z-index:5 !important; white-space:nowrap !important;
}
.sc-copy-btn:hover { transform:translateY(-2px) scale(1.06) !important; box-shadow:0 6px 18px rgba(26,110,255,0.45) !important; }
.sc-copy-btn:active { transform:scale(0.94) !important; }
.sc-copy-btn.copied { background:linear-gradient(135deg,#059669,#10b981) !important; }
.sc-copy-btn svg { width:13px !important; height:13px !important; fill:none !important; stroke:currentColor !important; stroke-width:2.2 !important; flex-shrink:0 !important; }

/* ════════════════════════════════════════════
   GUTENBERG / EMOJI FIX
════════════════════════════════════════════ */
.sc-content img.emoji,
.sc-content img[src*="emoji"],
.sc-content img[src*="s.w.org"] {
  width:20px !important; height:20px !important;
  display:inline !important; vertical-align:middle !important;
  margin:0 2px !important; border-radius:0 !important;
}
.sc-content .wp-block-image { margin:20px 0 !important; }
.sc-content .wp-block-image img { border-radius:12px !important; width:100% !important; }
.sc-content figure.wp-block-image img[width="72"],
.sc-content figure.wp-block-image img[height="72"] {
  width:22px !important; height:22px !important;
}

/* ════════════════════════════════════════════
   404 PAGE
════════════════════════════════════════════ */
#sc-404 { text-align:center !important; padding:90px 24px !important; }
#sc-404 .sc-404-emoji { font-size:72px !important; margin-bottom:16px !important; animation:scLoadPulse 2s ease-in-out infinite !important; }
#sc-404 h1 { font-family:var(--font-d) !important; font-size:60px !important; color:var(--blue-dark) !important; margin-bottom:10px !important; }
#sc-404 p { color:var(--muted) !important; font-size:17px !important; margin-bottom:28px !important; }
.sc-btn-primary {
  display:inline-flex !important; align-items:center !important;
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  color:#fff !important; padding:14px 28px !important; border-radius:50px !important;
  font-weight:600 !important; font-size:15px !important; text-decoration:none !important;
  box-shadow:0 6px 22px rgba(26,110,255,0.35) !important;
  transition:transform 0.25s var(--ease-back), box-shadow 0.25s !important;
}
.sc-btn-primary:hover { transform:translateY(-3px) scale(1.04) !important; box-shadow:0 12px 32px rgba(26,110,255,0.5) !important; }

/* ════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════ */
.sc-reveal { opacity:0 !important; transform:translateY(24px) !important; transition:opacity 0.65s var(--ease), transform 0.65s var(--ease) !important; }
.sc-reveal.visible { opacity:1 !important; transform:translateY(0) !important; }

/* ════════════════════════════════════════════
   ALL KEYFRAMES
════════════════════════════════════════════ */
@keyframes scHeroBg    { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes scGridScroll{ 0%{background-position:0 0} 100%{background-position:40px 40px} }
@keyframes scOrbFloat  { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.1)} }
@keyframes scFooterMesh{ 0%{opacity:1} 100%{opacity:0.6} }
@keyframes scFadeIn    { from{opacity:0} to{opacity:1} }
@keyframes scSlideDown { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }
@keyframes scSlideUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes scZoomIn    { from{opacity:0;transform:scale(0.88)} to{opacity:1;transform:scale(1)} }
@keyframes scCardIn    { from{opacity:0;transform:translateY(28px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes scBadgePop  { 0%{transform:scale(0);opacity:0} 70%{transform:scale(1.1);opacity:1} 100%{transform:scale(1)} }
@keyframes scShimmer   { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes scUnderline { from{width:0} to{width:100%} }
@keyframes scSparkle   { 0%,100%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(1.3)} }
@keyframes scSocIn     { from{opacity:0;transform:translateY(18px) scale(0.8)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width:599px) {
  #sc-grid { grid-template-columns:1fr !important; }
  .sc-card.sc-ratio-portrait { grid-row:span 1 !important; }
  .sc-card.sc-ratio-portrait .sc-img-wrap { padding-top:125% !important; }
  #sc-hero { padding:36px 16px 44px !important; }
  #sc-header-inner { padding:0 16px !important; }
  #sc-nav { right:16px !important; min-width:220px !important; }
  .sc-hero-stats { gap:20px !important; }
  .sc-stat-num { font-size:20px !important; }
}
@media (min-width:600px) and (max-width:899px) {
  #sc-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (min-width:900px) and (max-width:1099px) {
  #sc-grid { grid-template-columns:repeat(3,1fr) !important; }
}
/* ── WP UTILS ── */
.screen-reader-text { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; }
.wp-caption-text { font-size:12px !important; color:var(--muted) !important; }