/*
Theme Name: Right Scoop
Theme URI: https://therightscoop.net
Author: Right Scoop
Author URI: https://therightscoop.net
Description: Modern SaaS-grade theme for Right Scoop — a link building agency. Dark hero/CTA/footer bands with a signature lime accent, Space Grotesk + Manrope + JetBrains Mono type system, animated link-graph hero graphic. Blog content structure kept fully compatible with default WordPress post data.
Version: 3.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: rightscoop-saas
*/

/* ==========================================================================
   1. VARIABLES — "Signal" system
   Ink = true near-black (hero / CTA / footer bands — the SaaS dark-mode look)
   Surface = clean white/cool-gray for content sections (alternating rhythm)
   Accent (lime) = the one signature color: used on buttons, glows, marks —
   never as body text color (keeps it punchy instead of garish)
   ========================================================================== */
:root {
  color-scheme: light;
  --ink: #0A0B10;
  --ink-soft: #15161E;
  --ink-line: rgba(245,246,248,0.09);
  --surface: #FFFFFF;
  --surface-tint: #F5F6F9;
  --text: #12131A;
  --text-muted: #5B5E6B;
  --text-on-ink: #F5F6F8;
  --text-on-ink-muted: #C7C9D3;
  --accent: #C6FF4D;
  --accent-dark: #A3D93A;
  --accent-deep: #4F6B1A;
  --line: #E6E7EC;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-full: 999px;
  --shadow-soft: 0 1px 2px rgba(10,11,16,0.04), 0 16px 40px rgba(10,11,16,0.07);
  --shadow-glow: 0 0 0 1px rgba(198,255,77,0.25), 0 8px 28px rgba(198,255,77,0.18);
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--text); text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  color: var(--text) !important;
}
body p { margin: 0 0 16px; color: var(--text-muted) !important; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section { padding: 108px 0; }
.section-tint { background: var(--surface-tint); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-deep);
  margin-bottom: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(198,255,77,0.25);
}
.on-ink .eyebrow, .diff-strip .eyebrow, .hero .eyebrow, .cta-banner .eyebrow { color: var(--accent); }

.section-head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: 36px; }
.section-head p { font-size: 17px; }
.section-head.align-left { text-align: left; margin-left: 0; }

/* ==========================================================================
   3. BUTTONS — pill-shaped, ink+lime signature combo, subtle glow on hover
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--ink); color: var(--accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); color: var(--accent); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--text); }
.btn-outline:hover { border-color: var(--text); transform: translateY(-2px); }
/* on dark backgrounds (hero, cta-banner, footer) */
.hero .btn-outline, .cta-banner .btn-outline, .site-footer .btn-outline {
  border-color: rgba(245,246,248,0.25); color: var(--text-on-ink);
}
.hero .btn-outline:hover, .cta-banner .btn-outline:hover, .site-footer .btn-outline:hover {
  border-color: var(--accent); color: var(--accent);
}

/* ==========================================================================
   4. HEADER / NAV — clean light bar, pill nav items
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.site-logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-logo::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--accent-dark);
  display: inline-block;
}
.site-logo span { color: var(--text-muted); }
.main-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  transition: background .2s ease;
}
.main-nav a:hover { background: var(--surface-tint); }
.header-cta { display: flex; align-items: center; gap: 14px; }
.header-cta .btn { padding: 11px 22px; font-size: 13.5px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); }

@media (max-width: 900px) {
  .main-nav { display: none; position: absolute; top: 66px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 24px; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 4px; }
  .nav-toggle { display: block; }
}

/* ==========================================================================
   5. HERO — dark SaaS band, dot-grid backdrop, glowing signature link-graph
   ========================================================================== */
.hero {
  padding: 88px 0 100px;
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--text-on-ink);
  background-image: radial-gradient(rgba(245,246,248,0.09) 1px, transparent 1px);
  background-size: 26px 26px;
}
.hero::before {
  content: '';
  position: absolute;
  top: 50%; right: 8%;
  width: 520px; height: 520px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(198,255,77,0.16) 0%, rgba(198,255,77,0) 68%);
  pointer-events: none;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
.hero-copy { text-align: left; }
.hero h1 { font-size: 50px; font-weight: 700; max-width: 620px; margin: 0 0 22px; color: var(--text-on-ink) !important; }
.hero h1 .highlight { color: var(--accent); }
.hero p.lead { font-size: 17.5px; max-width: 480px; margin: 0 0 34px; color: var(--text-on-ink-muted) !important; }
.hero-ctas { display: flex; gap: 14px; }

.hero-graph-wrap { position: relative; }
.link-graph { width: 100%; height: auto; overflow: visible; }
.lg-edge { stroke: rgba(245,246,248,0.28); stroke-width: 1.4; fill: none; stroke-dasharray: 240; stroke-dashoffset: 240; animation: lgDraw 1.1s var(--ease) forwards; }
.lg-edge.lg-accent { stroke: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(198,255,77,0.55)); }
.lg-node-ring { fill: none; stroke: rgba(245,246,248,0.3); stroke-width: 1; opacity: 0; animation: lgFade .5s ease forwards; }
.lg-node { fill: var(--ink-soft); stroke: rgba(245,246,248,0.5); stroke-width: 1.4; opacity: 0; animation: lgFade .5s ease forwards; }
.lg-node.lg-center { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 10px rgba(198,255,77,0.6)); }
.lg-node.lg-center-ring { stroke: var(--accent); stroke-width: 1.4; opacity: .5; }
.lg-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-on-ink-muted); letter-spacing: 0.05em; opacity: 0; animation: lgFade .5s ease forwards; }
.lg-pulse { fill: var(--accent); opacity: 0; filter: drop-shadow(0 0 5px rgba(198,255,77,0.8)); }
.lg-pulse.run { animation: lgPulse 2.6s var(--ease) infinite; }
@keyframes lgDraw { to { stroke-dashoffset: 0; } }
@keyframes lgFade { to { opacity: 1; } }
@keyframes lgPulse { 0% { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lg-edge, .lg-node, .lg-node-ring, .lg-label { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .lg-pulse.run { animation: none !important; }
}

@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero h1, .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero .eyebrow { justify-content: center; width: 100%; }
}

/* ==========================================================================
   6. DIFFERENTIATOR STRIP — light band, pill chips
   ========================================================================== */
.diff-strip { background: var(--surface); padding: 48px 0; border-bottom: 1px solid var(--line); }
.diff-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; }
.diff-strip.cols-6 .container { grid-template-columns: repeat(6, 1fr); }
.diff-item {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s var(--ease), background .3s ease;
}
.diff-item:hover {
  transform: translateY(-4px);
  border-color: rgba(198,255,77,0.55);
  box-shadow: var(--shadow-soft);
  background: var(--surface);
}
.diff-item i, .diff-item .rs-icon { font-size: 18px; color: var(--accent-deep); flex-shrink: 0; transition: transform .35s var(--ease); }
.diff-item:hover i, .diff-item:hover .rs-icon { transform: scale(1.18) rotate(-6deg); }
.diff-item p { font-family: var(--font-body); font-weight: 700; font-size: 13.5px; color: var(--text) !important; margin: 0; }
@media (max-width: 1100px) { .diff-strip.cols-6 .container { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .diff-strip .container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .diff-strip .container { grid-template-columns: 1fr; } }

/* ==========================================================================
   7. FEATURES GRID — rounded cards with lift-on-hover, not flat editorial
   ========================================================================== */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.features-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.features-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width .4s var(--ease);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(198,255,77,0.5);
}
.feature-card:hover::before { width: 100%; }
.feature-icon {
  width: 42px; height: 42px;
  background: var(--ink);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 18px;
  color: var(--accent);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature-card:hover .feature-icon {
  transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 0 0 7px rgba(198,255,77,0.16);
}
.rs-icon { width: 20px; height: 20px; display: block; }
.diff-item .rs-icon { width: 18px; height: 18px; color: var(--accent-deep); }
.stat-box .rs-icon, .cta-banner .rs-icon { width: 22px; height: 22px; }
.feature-card h3 { font-size: 19px; margin-bottom: 8px; }
.feature-card p { font-size: 14.5px; margin-bottom: 0; }

@media (max-width: 900px) {
  .features-grid, .features-grid.cols-2, .features-grid.cols-4 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   8. STATS / TRACK RECORD
   ========================================================================== */
.stats-section { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.stats-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.stat-box { background: var(--ink); border-radius: var(--radius); padding: 32px 24px; text-align: center; }
.stat-box h3 { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--accent) !important; margin-bottom: 4px; letter-spacing: -0.02em; }
.stat-box p { font-size: 13px; margin-bottom: 0; color: var(--text-on-ink-muted) !important; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 900px) { .stats-section { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. TESTIMONIALS — rounded cards, quote mark accent, no fake avatars
   ========================================================================== */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease; }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: rgba(198,255,77,0.4); }
.testimonial-card::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 46px;
  color: var(--accent-dark);
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.testimonial-card p.quote { font-size: 15.5px; color: var(--text) !important; margin-bottom: 18px; line-height: 1.5; }
.testimonial-person strong { display: block; font-size: 13.5px; font-weight: 700; }
.testimonial-person span { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted) !important; letter-spacing: 0.02em; }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   10. FAQ ACCORDION — rounded rows
   ========================================================================== */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; cursor: pointer; margin-bottom: 12px; transition: border-color .2s ease; }
.faq-item.active { border-color: rgba(198,255,77,0.5); }
.faq-question { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.faq-question .icon {
  flex-shrink: 0; transition: transform .3s var(--ease);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-tint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 15px; color: var(--text);
}
.faq-item.active .faq-question .icon { transform: rotate(135deg); background: var(--ink); color: var(--accent); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); font-size: 15px; }
.faq-item.active .faq-answer { max-height: 300px; padding-top: 14px; }

/* ==========================================================================
   11. CTA BANNER — dark band, lime glow, single move
   ========================================================================== */
.cta-banner {
  background: var(--ink);
  background-image: radial-gradient(rgba(245,246,248,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 28px;
  padding: 76px 48px;
  text-align: center;
  color: var(--text-on-ink);
  margin: 0 24px;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  width: 460px; height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(198,255,77,0.18) 0%, rgba(198,255,77,0) 70%);
}
.cta-banner h2 { color: var(--text-on-ink) !important; font-size: 34px; position: relative; }
.cta-banner p { color: var(--text-on-ink-muted) !important; position: relative; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-banner .btn { position: relative; }

/* ==========================================================================
   12. BLOG
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.blog-card img { width: 100%; height: 190px; object-fit: cover; }
.blog-card-body { padding: 22px; }
.blog-card-body .cat { font-family: var(--font-mono); font-size: 11px; color: var(--accent-deep); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-card-body h3 { font-size: 18px; margin: 10px 0; }
.blog-card-body .meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted) !important; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

.single-post-wrap { max-width: 720px; margin: 0 auto; padding: 60px 24px; }
.single-post-wrap .post-meta { font-family: var(--font-mono); color: var(--text-muted) !important; font-size: 13px; margin-bottom: 24px; }
.single-post-wrap .post-thumb { border-radius: var(--radius); margin-bottom: 32px; overflow: hidden; aspect-ratio: 16 / 9; }
.single-post-wrap .post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.single-post-wrap .post-content { font-size: 17px; color: var(--text) !important; }
.single-post-wrap .post-content p { color: var(--text) !important; }
.single-post-wrap .post-content img { border-radius: var(--radius); margin: 24px auto; max-height: 520px; width: auto; max-width: 100%; display: block; }
.single-post-wrap .post-content h1,
.single-post-wrap .post-content h2,
.single-post-wrap .post-content h3,
.single-post-wrap .post-content h4,
.single-post-wrap .post-content h5,
.single-post-wrap .post-content h6 { color: var(--accent-deep) !important; font-weight: 700; }
.single-post-wrap .post-content h1 { font-size: 32px; margin-top: 48px; padding-left: 14px; border-left: 4px solid var(--accent); }
.single-post-wrap .post-content h2 { font-size: 27px; margin-top: 48px; padding-left: 14px; border-left: 4px solid var(--accent); }
.single-post-wrap .post-content h3 { font-size: 21px; margin-top: 34px; }
.single-post-wrap .post-content h4 { font-size: 18px; margin-top: 28px; }
.single-post-wrap .post-content h5,
.single-post-wrap .post-content h6 { font-size: 15.5px; margin-top: 24px; text-transform: uppercase; letter-spacing: 0.04em; }
.single-post-wrap .post-content a { color: var(--accent-deep) !important; text-decoration: underline; text-underline-offset: 2px; }
.single-post-wrap .post-content ul { color: var(--text) !important; padding-left: 20px; }
.single-post-wrap .post-content li { margin-bottom: 8px; }

/* ==========================================================================
   BLOG PAGINATION — rounded pill numbers, lime accent on current page
   ========================================================================== */
.blog-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 48px; }
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text) !important;
  background: var(--surface);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-pagination a.page-numbers:hover { border-color: var(--text); transform: translateY(-2px); }
.blog-pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--accent) !important;
}
.blog-pagination .page-numbers.dots {
  border: none;
  background: none;
  color: var(--text-muted) !important;
  min-width: auto;
  padding: 0 2px;
}
.blog-pagination .page-numbers.next,
.blog-pagination .page-numbers.prev {
  padding: 0 20px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--accent) !important;
}
.blog-pagination .page-numbers.next:hover,
.blog-pagination .page-numbers.prev:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }

/* Safety net: only targets elements that still carry a leftover inline
   style="" attribute from migrated/legacy content (the functions.php filter
   already strips most of these on save/render — this catches anything it
   misses, e.g. content added after that filter or via widgets). Elements
   styled purely with our own theme classes (.cat, .meta, etc.) have no
   inline style attribute and are completely untouched by this rule, so
   intentional accent colors are preserved. */
.post-content [style],
.feature-card [style],
.blog-card-body [style],
.testimonial-card [style],
.diff-item [style] {
  color: inherit !important;
  background-color: transparent !important;
}

/* ==========================================================================
   13. FOOTER — dark band matching hero/cta
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--text-on-ink); padding: 72px 0 28px; }
.site-footer .site-logo { color: var(--text-on-ink); }
.site-footer .site-logo span { color: var(--text-on-ink-muted); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 56px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent) !important; margin-bottom: 20px; font-weight: 600; opacity: 1; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: var(--text-on-ink); font-size: 14.5px; opacity: 1; }
.footer-col ul li a:hover { color: var(--accent); opacity: 1; }
.footer-brand p { font-size: 14.5px; max-width: 300px; color: var(--text-on-ink-muted) !important; margin-top: 14px; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-soft); border: 1px solid var(--ink-line); display: flex; align-items: center; justify-content: center; color: var(--text-on-ink); font-size: 13px; }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--ink-line); padding-top: 24px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--text-on-ink-muted); }
.footer-bottom p { color: var(--text-on-ink-muted) !important; margin: 0; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ==========================================================================
   14. SCROLL REVEAL — first-party (no AOS.js dependency)
   ========================================================================== */
[data-aos] { opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; }
[data-aos="fade-up"] { transform: translateY(18px); }
[data-aos="fade-down"] { transform: translateY(-18px); }
[data-aos="fade-left"] { transform: translateX(24px); }
[data-aos="fade-right"] { transform: translateX(-24px); }
[data-aos="zoom-in"] { transform: scale(0.97); }
[data-aos].aos-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1; transform: none; transition: none; } }

.on-ink { color: var(--text-on-ink); }

/* ==========================================================================
   15. BLOG SEARCH BAR
   ========================================================================== */
.blog-search { display: flex; max-width: 420px; margin: 0 auto 48px; border: 1px solid var(--line); border-radius: var(--radius-full); overflow: hidden; background: var(--surface); }
.blog-search input { flex: 1; border: none; outline: none; padding: 13px 18px; font-family: var(--font-body); font-size: 14.5px; color: var(--text); background: transparent; }
.blog-search input::placeholder { color: var(--text-muted); }
.blog-search button { border: none; background: var(--ink); color: var(--accent); width: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.blog-search button:hover { background: var(--ink-soft); }
.blog-search .rs-icon { width: 17px; height: 17px; }

.search-empty { text-align: center; max-width: 480px; margin: 0 auto; padding: 40px 0; }
.search-empty .rs-icon { width: 40px; height: 40px; color: var(--text-muted); margin: 0 auto 20px; }