/*
Theme Name: Triomize
Theme URI: https://triomize.com
Author: madfolks.agency
Author URI: https://madfolks.agency
Description: Premium dark SaaS marketing theme for Triomize — AI search optimization plugin. Unified single-source theming (v3.18.4).
Version: 3.18.4
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: triomize
*/

/* ═══════════════════════════════════════════════════════════════════════════
   TRIOMIZE — UNIFIED STYLESHEET
   ───────────────────────────────────────────────────────────────────────────
   ARCHITECTURE (read this before editing):

   There is ONE token system. Colours are NEVER hard-coded on components.
   Every section is either a LIGHT surface (the default) or a DARK surface.

   • LIGHT values live in  :root  (and .surface-light)
   • DARK  values live in  .surface-dark
   • Components reference ONLY the semantic tokens (--bg, --heading, --body,
     --card-bg, …). They automatically resolve to the right colour for whatever
     surface they sit inside.

   To make a section dark or light, you change exactly ONE thing: the
   "SURFACE MAP" a few blocks below. Nothing else. No !important wars.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 1. TOKENS ════════════════════════════════════════════════════════════ */

:root {
  /* — Brand constants (identical on every surface) — */
  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  --seo: #3B82F6;  --seo-d: #2563EB;
  --aeo: #8B5CF6;  --aeo-d: #7C3AED;
  --geo: #14B8A6;  --geo-d: #0D9488;
  --grad: linear-gradient(135deg, #3B82F6, #8B5CF6, #14B8A6);

  --hero-bg: #080B14;   /* deepest dark, used for hero/cta canvases */

  --r-btn: 8px;  --r-card: 20px;  --r-frame: 12px;

  --mx: 0; --my: 0;     /* mouse-parallax channels (set by JS) */

  /* — LIGHT surface semantic tokens (the site default) — */
  --bg:            #ffffff;
  --bg-soft:       #F8FAFC;
  --heading:       #0F172A;
  --body:          #475569;
  --muted:         #64748B;
  --eyebrow:       #64748B;

  --card-bg:       #ffffff;
  --card-border:   #E2E8F0;
  --card-shadow:   0 2px 12px rgba(0,0,0,.06);

  --divider:       #E2E8F0;

  --field-bg:      #ffffff;
  --field-text:    #0F172A;
  --field-border:  #E2E8F0;
  --field-ph:      #94A3B8;

  --pill-bg:       rgba(59,130,246,.08);
  --pill-text:     #3B82F6;

  --code-bg:       #0F172A;
  --code-text:     #14B8A6;

  --icon-tint:     rgba(59,130,246,.10);
  --icon-tint-br:  rgba(59,130,246,.20);

  --link:          var(--seo);
}

/* explicit alias — lets you force a light island inside a dark area if needed */
.surface-light { color-scheme: light; }

/* — DARK surface: only the values that change are redefined — */
.surface-dark {
  color-scheme: dark;

  --bg:            #0D1117;
  --bg-soft:       #0E1220;
  --heading:       #ffffff;
  --body:          rgba(255,255,255,.72);
  --muted:         rgba(255,255,255,.55);
  --eyebrow:       rgba(255,255,255,.45);

  --card-bg:       rgba(255,255,255,.04);
  --card-border:   rgba(255,255,255,.10);
  --card-shadow:   none;

  --divider:       rgba(255,255,255,.08);

  --field-bg:      rgba(255,255,255,.07);
  --field-text:    #E2E8F0;
  --field-border:  rgba(255,255,255,.15);
  --field-ph:      rgba(255,255,255,.35);

  --pill-bg:       rgba(255,255,255,.06);
  --pill-text:     rgba(255,255,255,.70);

  --code-bg:       rgba(0,0,0,.30);
  --code-text:     #14B8A6;

  --icon-tint:     rgba(255,255,255,.06);
  --icon-tint-br:  rgba(255,255,255,.12);

  --link:          #93C5FD;
}


/* ══ 2. SURFACE MAP — the single source of truth ══════════════════════════ */
/*
   These sections are DARK. EVERYTHING ELSE IS LIGHT (the :root default).
   Want to flip a section? Move its selector in or out of this list. Done.

   Note on .section-faq: the class is shared by the dark homepage FAQ
   (which contains .faq-list) and the light internal-page FAQs (which contain
   .accordion-container). :has() targets only the homepage variant.
*/
.tri-hero,
.crawler-bar,
.section-matrices,
.section-feature,
.section-demo,
.section-pricing,
.section-cta-dark,
.pillar-hero,
.blog-archive-hero,
.site-footer,
.section-faq:has(.faq-list) {
  /* adopt the dark token set */
  color-scheme: dark;
  --bg: #0D1117;            --bg-soft: #0E1220;
  --heading: #ffffff;       --body: rgba(255,255,255,.72);
  --muted: rgba(255,255,255,.55);  --eyebrow: rgba(255,255,255,.45);
  --card-bg: rgba(255,255,255,.04);  --card-border: rgba(255,255,255,.10);
  --card-shadow: none;      --divider: rgba(255,255,255,.08);
  --field-bg: rgba(255,255,255,.07); --field-text: #E2E8F0;
  --field-border: rgba(255,255,255,.15); --field-ph: rgba(255,255,255,.35);
  --pill-bg: rgba(255,255,255,.06);  --pill-text: rgba(255,255,255,.70);
  --code-bg: rgba(0,0,0,.30);  --code-text: #14B8A6;
  --icon-tint: rgba(255,255,255,.06);  --icon-tint-br: rgba(255,255,255,.12);
  --link: #93C5FD;
}

/* the hero & cta want the very deepest dark as their canvas */
.tri-hero,
.section-cta-dark,
.pillar-hero,
.blog-archive-hero { --bg: var(--hero-bg); }

/* Every themed section paints its own background + base text from tokens. */
.tri-hero, .crawler-bar, .section-problem, .section-matrices, .section-feature,
.section-how, .section-demo, .section-pricing, .section-recent-posts,
.section-faq, .section-cta-dark, .section-hero, .pillar-hero, .blog-archive-hero,
.section-definition, .section-matrix-details, .section-matrix-density,
.section-tri-features, .section-preorder-form, .section-chatbot, .site-footer,
.section-byline {
  background: var(--bg);
  color: var(--body);
}


/* ══ 3. RESET + BASE ══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--body);
  background: var(--hero-bg);  /* top/bottom gutters sit behind dark hero/footer */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
.img-responsive { width: 100%; height: auto; display: block; }
a  { color: var(--link); text-decoration: none; transition: color .2s; }
h1, h2, h3, h4, h5, h6 { color: var(--heading); font-weight: 800; line-height: 1.15; }
p  { line-height: 1.75; }
ul { list-style: none; }
code { font-family: var(--mono); }


/* ══ 4. WORDPRESS BLOCK-WRAPPER RESETS + FULL-BLEED ═══════════════════════ */
/* These !important rules are legitimate: they neutralise the FSE block theme's
   own constrained-layout wrappers so our sections can span full width. This is
   the ONLY place !important is used for layout. */
.wp-site-blocks, .is-root-container { background: transparent !important; padding: 0 !important; }
.wp-block-template-part { padding: 0 !important; }

main.site-main,
main.site-main > .wp-block-post-content,
main.site-main > .entry-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}
.is-layout-flow > *,
.is-layout-constrained > * { margin-block: 0 !important; }

/* Top-level sections span the viewport; inner .container re-centres content. */
main.site-main > section,
main.site-main > .wp-block-group,
main.site-main .wp-block-post-content > section,
main.site-main .wp-block-post-content > .wp-block-group {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* ══ 5. LAYOUT PRIMITIVES ═════════════════════════════════════════════════ */
.container        { max-width: 1380px; margin: 0 auto; padding: 0 2.5rem; width: 100%; }
.container-narrow { max-width: 800px;  margin: 0 auto; padding: 0 2rem;  width: 100%; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; }
.max-w-700 { max-width: 700px; }
.font-bold { font-weight: 700; }
.bg-wash { background: var(--bg-soft); }

/* generic section rhythm (only applies where a component doesn't set its own) */
.section-problem, .section-matrices, .section-feature, .section-how,
.section-demo, .section-pricing, .section-faq, .section-recent-posts,
.section-definition, .section-tri-features {
  padding: 6rem 0;
}
.section-byline { padding: 4rem 0; }

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--heading);
  margin: .6rem 0 1rem;
}
.section-sub, .section-subtitle {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}
.section-label {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--eyebrow);
  margin-bottom: .5rem;
}


/* ══ 6. BUTTONS ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: var(--r-btn);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, opacity .2s, filter .2s, background .2s, color .2s;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: .95rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem .9rem; font-size: .82rem; }

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 18px rgba(59,130,246,.3);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(59,130,246,.45); color: #fff; filter: brightness(1.05); }

/* glass works on dark; degrades gracefully on light via tokens */
.btn-glass {
  background: var(--card-bg);
  color: var(--heading);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
}
.btn-glass:hover { color: var(--heading); }

.btn-outline   { background: transparent; color: var(--seo); border: 2px solid var(--seo); }
.btn-outline:hover { background: var(--seo); color: #fff; }

.btn-secondary { background: var(--card-bg); color: var(--heading); border: 1.5px solid var(--card-border); }
.btn-secondary:hover { background: var(--bg-soft); }

.btn-seo { background: var(--seo); color: #fff; } .btn-seo:hover { background: var(--seo-d); color: #fff; }
.btn-aeo { background: var(--aeo); color: #fff; } .btn-aeo:hover { background: var(--aeo-d); color: #fff; }
.btn-geo { background: var(--geo); color: #fff; } .btn-geo:hover { background: var(--geo-d); color: #fff; }

.magnetic { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }


/* ══ 7. HEADER / NAV / HAMBURGER ══════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2.5rem;
  background: transparent;
  transition: background .3s, backdrop-filter .3s, padding .3s, box-shadow .3s;
}
.site-header.scrolled {
  background: rgba(8,11,20,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: .75rem 2.5rem;
  box-shadow: 0 2px 24px rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.logo-text { flex-shrink: 0; }
.logo-text a {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a {
  color: rgba(255,255,255,.65);
  font-size: .92rem;
  font-weight: 500;
  transition: color .2s;
}
.site-nav a:hover { color: #fff; }
.mobile-only-cta { display: none !important; }
.header-cta { display: flex; }
.header-cta .btn { position: relative; z-index: 2; }

.hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: .5rem;
  z-index: 10000;
  position: relative;
}
.hamburger-btn span {
  display: block;
  width: 26px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: transform .3s, opacity .3s;
}
.hamburger-btn.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


/* ══ 8. HERO (homepage) ═══════════════════════════════════════════════════ */
.tri-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 7rem 0 5rem;
  overflow: hidden;
}
.hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .35; will-change: transform;
}
.orb-seo { width: 500px; height: 500px; background: radial-gradient(circle,#3B82F6 0%,transparent 70%); top: -120px; left: -100px;  transform: translate(calc(var(--mx)*-18px), calc(var(--my)*-12px)); }
.orb-aeo { width: 420px; height: 420px; background: radial-gradient(circle,#8B5CF6 0%,transparent 70%); top: 30%;   right: -80px;  transform: translate(calc(var(--mx)*14px),  calc(var(--my)*10px)); }
.orb-geo { width: 360px; height: 360px; background: radial-gradient(circle,#14B8A6 0%,transparent 70%); bottom: -60px; left: 35%;   transform: translate(calc(var(--mx)*10px),  calc(var(--my)*-8px)); }

.hero-grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
}

.hero-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; width: 100%; }
.hero-text   { display: flex; flex-direction: column; }

.hero-eyebrow {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--eyebrow); margin-bottom: 1.2rem;
}
.hero-h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800; color: var(--heading);
  line-height: 1.08; letter-spacing: -.04em;
  margin-bottom: 1.4rem; max-width: 780px; white-space: normal;
}
.hero-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-cycle-word { display: inline; transition: opacity .25s, transform .25s; }
.hero-cycle-word.fade-out { opacity: 0; transform: translateY(-8px); }
.hero-cycle-word.fade-in  { opacity: 1; transform: translateY(0); }
.seo-word { color: var(--seo); } .aeo-word { color: var(--aeo); } .geo-word { color: var(--geo); }

.hero-p { font-size: 1.15rem; color: var(--muted); max-width: 580px; line-height: 1.75; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3.5rem; }

.hero-proof { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.hero-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; }
.hero-visual .hero-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; justify-items: center; }
.hero-visual-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); font-weight: 700; text-align: center; }
.hero-visual-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 2rem 2.5rem; width: 100%; backdrop-filter: blur(8px); }
.hero-plugin-shot { min-height: 0; overflow: hidden; }
.hero-plugin-shot img { display: block; }

/* Triscore rings */
.triscore-wrap { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.triscore-wrap .ring-group { position: relative; width: 90px; height: 90px; }
.hero-visual .triscore-wrap .ring-group,
.hero-visual .triscore-wrap .ring-group svg { width: 130px; height: 130px; }
.mnr-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.mnr-num { font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1; }
.hero-visual .mnr-num { font-size: 1.8rem; }
.ts-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.45); }


/* ══ 9. CRAWLER BAR (homepage strip) ══════════════════════════════════════ */
.crawler-bar {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: .9rem 0;
}
.crawler-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.bar-label { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.crawlers { display: flex; gap: .6rem; flex-wrap: wrap; }
.crawler-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 40px;
  font-size: .78rem; font-weight: 600; color: var(--body);
}
.cpill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cpill-green { background: #22C55E; } .cpill-orange { background: #F97316; }
.cpill-blue  { background: #3B82F6; } .cpill-red    { background: #EF4444; }


/* ══ 10. PROBLEM / GAP CARDS (light) ══════════════════════════════════════ */
.problem-header { margin-bottom: 3.5rem; }
.gap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.gap-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 2rem 1.75rem;
  box-shadow: var(--card-shadow);
  transition: transform .25s, box-shadow .25s;
}
.gap-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.gap-icon {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: 12px; border: 1px solid var(--icon-tint-br);
  background: var(--icon-tint);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem; flex-shrink: 0;
}
.gap-icon svg { display: block; width: 22px; height: 22px; flex-shrink: 0; overflow: visible; }
.gap-icon svg [fill='none'], .gap-icon svg { fill: none; }
.gap-seo .gap-icon svg { stroke: var(--seo); }
.gap-aeo .gap-icon svg { stroke: var(--aeo); }
.gap-geo .gap-icon svg { stroke: var(--geo); }
.gap-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .6rem; }
.gap-card p  { font-size: .9rem; color: var(--body); line-height: 1.7; margin-bottom: 1.2rem; }
.gap-checks { display: flex; flex-direction: column; gap: .4rem; }
.gap-checks span { font-size: .82rem; font-weight: 600; color: var(--muted); }


/* ══ 11. MATRICES (dark) ══════════════════════════════════════════════════ */
.section-matrices .text-center { margin-bottom: 3.5rem; }
.matrices-v2 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.matrix-v2 {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  position: relative; overflow: hidden;
}
.card-highlight {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.tilt-card:hover .card-highlight { opacity: 1; }
.tilt-card { transform-style: preserve-3d; will-change: transform; }

.matrix-header { display: flex; align-items: center; gap: 1.2rem; }
.matrix-num-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.matrix-meta h3 { font-size: 1rem; font-weight: 700; color: var(--heading); margin: .3rem 0 .2rem; }
.matrix-meta p  { font-size: .8rem; color: var(--muted); margin: 0; }
.matrix-badge {
  display: inline-flex; align-items: center;
  padding: .25rem .65rem; border-radius: 40px;
  font-size: .72rem; font-weight: 700; border: 1px solid; letter-spacing: .04em;
}
.check-sections { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.check-section { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--divider); }
.cs-name { font-size: .82rem; font-weight: 700; color: var(--body); }
.cs-pts  { font-size: .78rem; font-weight: 700; }
.check-rows { display: flex; flex-direction: column; gap: .3rem; padding: .2rem 0 .5rem; }
.check-row  { font-size: .78rem; color: var(--muted); padding-left: .75rem; position: relative; }
.check-row::before { content: '·'; position: absolute; left: 0; color: var(--muted); opacity: .5; }
.matrix-cta { margin-top: auto; display: block; text-align: center; padding: .75rem; }


/* ══ 12. FEATURE / CRAWLER MONITOR (dark) ═════════════════════════════════ */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.feature-row > * { min-width: 0; }
.feat-reverse { direction: rtl; } .feat-reverse > * { direction: ltr; }
.feat-content { display: flex; flex-direction: column; gap: 1rem; }
.feat-content .section-title { margin: .3rem 0 .6rem; }
.feat-content .section-sub { margin: 0; text-align: left; max-width: none; }
.feat-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; }
.feat-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; color: var(--body); }
.feat-list svg { flex-shrink: 0; margin-top: 2px; }
.feat-note { font-size: .78rem; color: var(--muted); margin-top: 1rem; line-height: 1.6; }

/* crawler dashboard widget */
.crawler-dashboard { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.cd-row { display: flex; align-items: center; gap: .75rem; }
.cd-bot { display: flex; align-items: center; gap: .4rem; width: 150px; flex-shrink: 0; font-size: .82rem; font-weight: 600; color: var(--body); }
.cd-icon { font-size: 1rem; }
.cd-bar { flex: 1; height: 6px; background: var(--field-bg); border-radius: 99px; overflow: hidden; }
.cd-fill { height: 100%; border-radius: 99px; }
.cd-status { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.cd-status.allowed { color: #22C55E; }
.cd-status.blocked { color: #EF4444; }

/* the auto-generated llms.txt console card (sits in the dark feature section) */
.llms-card { max-width: 360px; position: relative; }


/* ══ 13. LIVE DEMO (dark) ═════════════════════════════════════════════════ */
.demo-container {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 2.5rem;
}
.demo-input-row { display: flex; flex-direction: column; gap: 1rem; }
.demo-textarea {
  width: 100%; resize: vertical; min-height: 140px;
  border: 1.5px solid var(--field-border); border-radius: 12px;
  padding: 1rem 1.25rem; font-family: var(--font); font-size: .92rem;
  color: var(--field-text); background: var(--field-bg); line-height: 1.7;
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.demo-textarea:focus { border-color: var(--aeo); box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
.demo-textarea::placeholder { color: var(--field-ph); }
.demo-keyword-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; }
.demo-keyword-field {
  flex: 1; min-width: 200px;
  border: 1.5px solid var(--field-border); border-radius: 8px;
  padding: .75rem 1rem; font-family: var(--font); font-size: .88rem;
  color: var(--field-text); background: var(--field-bg); outline: none; transition: border-color .2s;
}
.demo-keyword-field:focus { border-color: var(--aeo); }
.demo-keyword-field::placeholder { color: var(--field-ph); }
.demo-analyze-btn { flex-shrink: 0; padding: .75rem 2rem; }

#demo-sample-btn {
  background: transparent; color: var(--body);
  border: 1.5px solid var(--field-border);
}
#demo-sample-btn:hover { background: rgba(255,255,255,.10); color: var(--heading); border-color: rgba(255,255,255,.5); }

.demo-results { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--divider); }
.demo-tabs { display: flex; gap: .5rem; margin: 1.5rem 0 1rem; }
.demo-tab {
  flex: 1; padding: .55rem .5rem; border-radius: 8px;
  border: 1.5px solid var(--field-border); background: transparent;
  color: var(--muted); font-weight: 700; font-size: .8rem;
  cursor: pointer; transition: all .2s; font-family: inherit;
}
.demo-tab.demo-tab-seo.demo-tab-active { border-color: #3B82F6; background: rgba(59,130,246,.15); color: #3B82F6; }
.demo-tab.demo-tab-aeo.demo-tab-active { border-color: #8B5CF6; background: rgba(139,92,246,.15); color: #8B5CF6; }
.demo-tab.demo-tab-geo.demo-tab-active { border-color: #14B8A6; background: rgba(20,184,166,.15); color: #14B8A6; }
.demo-check-panel { display: none; }
.demo-check-panel.active { display: block; }

.demo-rings { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1.75rem; }
.demo-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.demo-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.demo-num { font-size: 1.2rem; font-weight: 800; color: var(--heading); line-height: 1; }
.demo-eng-label { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }

.demo-check-stream { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.25rem; max-height: 320px; overflow-y: auto; }
.demo-check-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; border-radius: 8px; font-size: .82rem; animation: fadeSlide .3s ease forwards; }
.demo-check-pass { background: rgba(34,197,94,.10); }
.demo-check-warn { background: rgba(245,158,11,.10); }
.dc-icon { font-size: .9rem; width: 18px; text-align: center; flex-shrink: 0; }
.demo-check-pass .dc-icon { color: #22C55E; }
.demo-check-warn .dc-icon { color: #F59E0B; }
.dc-label { flex: 1; color: var(--body); }
.dc-engine { font-size: .65rem; font-weight: 700; padding: .15em .5em; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; }
.demo-eng-seo .dc-engine { background: rgba(59,130,246,.15); color: #3B82F6; }
.demo-eng-aeo .dc-engine { background: rgba(139,92,246,.15); color: #8B5CF6; }
.demo-eng-geo .dc-engine { background: rgba(20,184,166,.15); color: #14B8A6; }
.demo-honesty { font-size: .78rem; color: var(--muted); text-align: center; margin-top: 1.25rem; line-height: 1.6; }

.demo-gate { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--divider); }
.locked-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; text-align: center; }
.lc-lock { font-size: 1.4rem; }
.lc-engine { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lc-title { font-size: .82rem; color: var(--body); line-height: 1.5; flex: 1; }
.lc-cta { font-size: .78rem; font-weight: 700; color: var(--muted); margin-top: auto; }

@keyframes fadeSlide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

/* browser-mock / metabox (used on home feature + internal) */
.feat-browser { background: #0A0D1A; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.fb-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: #111627; border-bottom: 1px solid rgba(255,255,255,.06); }
.fb-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fb-url { flex: 1; text-align: center; font-size: .72rem; color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); border-radius: 6px; padding: .2rem .6rem; }
.fb-screen { padding: 1.5rem; }
.metabox-demo { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 1.25rem; }
.mb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mb-logo { font-size: .82rem; font-weight: 800; color: #fff; }
.mb-status { font-size: .72rem; color: rgba(255,255,255,.35); }
.mb-scores { display: flex; flex-direction: column; gap: .6rem; }
.mb-score-row { display: flex; align-items: center; gap: .7rem; }
.mb-label { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.5); width: 28px; }
.mb-bar { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.mb-fill { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.16,1,.3,1); }
.mb-num { font-size: .82rem; font-weight: 800; width: 26px; text-align: right; }
.mb-fix { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; padding: .65rem .8rem; background: rgba(255,255,255,.03); border-radius: 8px; font-size: .75rem; color: rgba(255,255,255,.4); line-height: 1.5; }
.mb-fix-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }


/* ══ 14. HOW IT WORKS (light) ═════════════════════════════════════════════ */
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.how-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 2.25rem 1.75rem;
  display: flex; flex-direction: column; gap: .9rem;
  box-shadow: var(--card-shadow);
}
.how-num { font-size: 2.25rem; font-weight: 800; color: var(--card-border); letter-spacing: -.04em; line-height: 1; }
.how-icon {
  width: 56px; height: 56px; min-width: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-tint); border: 1px solid var(--icon-tint-br); border-radius: 12px;
}
.how-icon svg { display: block; width: 36px; height: 36px; overflow: visible; stroke: var(--seo); fill: none; }
.how-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--heading); }
.how-card p  { font-size: .88rem; color: var(--body); line-height: 1.75; }


/* ══ 15. PRICING (dark) ═══════════════════════════════════════════════════ */
.pricing-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 860px; margin: 0 auto; }
.price-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.price-featured { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.06); position: relative; }
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: .72rem; font-weight: 800;
  padding: .3rem .9rem; border-radius: 40px; white-space: nowrap;
  letter-spacing: .06em; text-transform: uppercase;
}
.price-name   { font-size: 1.1rem; font-weight: 800; color: var(--heading); }
.price-amount { font-size: 2.25rem; font-weight: 800; color: var(--heading); letter-spacing: -.03em; line-height: 1; }
.price-amount span { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: .25rem; }
.price-desc { font-size: .88rem; color: var(--muted); line-height: 1.65; }
.price-list { display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.price-list li { font-size: .88rem; color: var(--body); padding-left: 1.2rem; position: relative; }
.price-list li::before { content: '✓'; position: absolute; left: 0; color: var(--seo); font-weight: 800; }


/* ══ 16. FAQ — homepage (dark, via .faq-list) ═════════════════════════════ */
.faq-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--divider); }
.faq-item:first-child { border-top: 1px solid var(--divider); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 1.25rem 0; font-size: .97rem; font-weight: 700;
  color: var(--heading); list-style: none; gap: 1rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon { flex-shrink: 0; font-size: 1.2rem; font-weight: 400; color: var(--muted); transition: transform .3s; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-a { font-size: .92rem; color: var(--body); line-height: 1.75; padding-bottom: 1.25rem; padding-right: 2rem; }


/* ══ 17. CTA (dark) ═══════════════════════════════════════════════════════ */
.section-cta-dark { padding: 7rem 0; position: relative; overflow: hidden; text-align: center; }
.cta-orbs { position: absolute; inset: 0; pointer-events: none; }
.cta-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .3; }
.cta-orb-1 { width: 400px; height: 400px; background: radial-gradient(circle,#3B82F6 0%,transparent 70%); top: -80px; left: -80px; transform: translate(calc(var(--mx)*-20px), calc(var(--my)*-14px)); }
.cta-orb-2 { width: 360px; height: 360px; background: radial-gradient(circle,#14B8A6 0%,transparent 70%); bottom: -80px; right: -80px; transform: translate(calc(var(--mx)*18px), calc(var(--my)*12px)); }


/* ══ 18. INTERNAL-PAGE HERO (dark) ════════════════════════════════════════ */
.pillar-hero, .blog-archive-hero {
  padding: 8rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
}
/* per-engine colour glow */
.pillar-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.pillar-hero.hero-seo::before  { background: radial-gradient(ellipse at 30% 60%, rgba(59,130,246,.18) 0%, transparent 65%); }
.pillar-hero.hero-aeo::before  { background: radial-gradient(ellipse at 30% 60%, rgba(139,92,246,.18) 0%, transparent 65%); }
.pillar-hero.hero-geo::before  { background: radial-gradient(ellipse at 30% 60%, rgba(20,184,166,.18) 0%, transparent 65%); }
.pillar-hero.hero-blue::before { background: radial-gradient(ellipse at 30% 60%, rgba(59,130,246,.15) 0%, transparent 65%); }
.pillar-hero.hero-dark::before { background: radial-gradient(ellipse at 30% 60%, rgba(148,163,184,.12) 0%, transparent 65%); }
.pillar-hero > .container { position: relative; z-index: 1; }

.pillar-hero .hero-eyebrow,
.blog-archive-hero .section-label {
  display: inline-block;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--pill-text); background: var(--pill-bg);
  padding: .5rem 1.25rem; border-radius: 9999px; margin-bottom: 1.25rem;
}
.pillar-hero .hero-title, .blog-archive-hero .section-title {
  font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 800; color: var(--heading);
  line-height: 1.1; letter-spacing: -.03em; margin: 0 auto 1.25rem; max-width: 860px;
}
.pillar-hero .hero-subtitle, .blog-archive-hero .section-sub {
  font-size: 1.15rem; color: var(--muted); max-width: 720px; margin: 0 auto; line-height: 1.75;
}
.pillar-hero .hero-ctas { display: flex; justify-content: center; gap: 1.25rem; margin-top: 2rem; flex-wrap: wrap; }


/* ══ 19. INTERNAL-PAGE CONTENT (light) ════════════════════════════════════ */
.section-definition { border-bottom: 1px solid var(--divider); }
.definition-para { font-size: 1.35rem; font-weight: 500; line-height: 1.6; color: var(--heading); margin-bottom: 2rem; }
.body-para { font-size: 1.125rem; color: var(--body); line-height: 1.8; margin-bottom: 1.5rem; }
.brand-quote {
  font-size: 1.25rem; font-style: italic; font-weight: 600; color: var(--heading);
  padding-left: 1.5rem; border-left: 4px solid var(--seo); margin: 2.5rem 0;
}
.brand-quote.border-seo { border-left-color: var(--seo); }
.brand-quote.border-aeo { border-left-color: var(--aeo); }
.brand-quote.border-geo { border-left-color: var(--geo); }
.brand-quote.border-primary { border-left-color: var(--seo); }

.split-column h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--heading); }
.content-split-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; margin-top: 4rem; }

/* tri-feature cards */
.section-tri-features .text-center { margin-bottom: 1rem; }
.tri-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; }
.tri-feat-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px;
  padding: 1.6rem; transition: transform .2s, box-shadow .2s; text-align: left; box-shadow: var(--card-shadow);
}
.tri-feat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15,23,42,.25); }
.tri-feat-card .tf-ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 1rem; background: var(--icon-tint); }
.tri-feat-card h3 { font-size: 1.08rem; margin: 0 0 .4rem; color: var(--heading); }
.tri-feat-card p  { font-size: .93rem; color: var(--body); margin: 0; line-height: 1.6; }
.tri-feat-card .tf-tag { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aeo); margin-bottom: .5rem; }
.tri-feat-card.flag { border: 2px solid transparent; background: linear-gradient(var(--card-bg),var(--card-bg)) padding-box, var(--grad) border-box; }

/* gauges + browser frame (used in/near internal heroes) */
.browser-frame {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--r-frame); overflow: hidden; box-shadow: var(--card-shadow);
}
.browser-header { background: var(--bg-soft); padding: .75rem 1rem; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: .5rem; }
.browser-header .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.red { background: #EF4444; } .dot.yellow { background: #F59E0B; } .dot.green { background: #10B981; }
.browser-url { flex: 1; background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 6px; padding: .25rem 1rem; font-size: .8rem; color: var(--field-ph); max-width: 400px; margin-left: 1rem; text-align: left; }

.floating-gauge {
  position: absolute; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: .75rem 1.25rem; box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; align-items: center; gap: .25rem; z-index: 10;
  animation: float 4s ease-in-out infinite alternate;
}
.floating-gauge.gauge-seo { top: 10%;  left: -10%; animation-delay: 0s; }
.floating-gauge.gauge-aeo { bottom: 25%; right: -8%; animation-delay: 1s; }
.floating-gauge.gauge-geo { bottom: 10%; left: -8%; animation-delay: 2s; }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.gauge-ring { position: relative; width: 50px; height: 50px; }
.gauge-ring svg { transform: rotate(-90deg); }
.gauge-ring .ring-bg { fill: none; stroke: var(--divider); stroke-width: 3.8; }
.gauge-ring .ring { fill: none; stroke-width: 3.8; stroke-linecap: round; animation: progressRing 2.5s ease-out forwards; }
.gauge-ring .ring.ring-green { stroke: #22C55E; } .gauge-ring .ring.ring-cyan { stroke: #06B6D4; } .gauge-ring .ring.ring-purple { stroke: #A855F7; }
@keyframes progressRing { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.gauge-val { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: .95rem; font-weight: 800; color: var(--heading); }
.gauge-lbl { font-size: .75rem; font-weight: 700; color: var(--heading); }

/* matrix-detail / density blocks (internal pillar pages) */
.section-matrix-details, .section-matrix-density { padding: 5rem 0; }
.matrix-detail-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-card); padding: 2rem; margin-bottom: 2rem; box-shadow: var(--card-shadow); }
.check-category { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--divider); color: var(--heading); }
.check-item-row { display: flex; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--divider); align-items: flex-start; }
.check-item-row:last-child { border-bottom: none; }
.check-points { font-size: .78rem; font-weight: 800; white-space: nowrap; width: 50px; flex-shrink: 0; text-align: right; padding-top: 2px; }
.check-desc { font-size: .88rem; color: var(--body); line-height: 1.65; flex: 1; }

/* comparison / premium tables */
.comparison-wrapper { margin: 3rem 0; overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); width: 100%; max-width: 100%; }
.premium-table, .comparison-table-v2 { width: 100%; border-collapse: collapse; background: var(--card-bg); }
.premium-table th, .premium-table td,
.comparison-table-v2 th, .comparison-table-v2 td { padding: 1.25rem 2rem; border-bottom: 1px solid var(--divider); text-align: left; }
.premium-table th, .comparison-table-v2 th { background: var(--bg-soft); color: var(--heading); font-weight: 700; font-size: 1rem; }
.premium-table td, .comparison-table-v2 td { color: var(--body); }
.premium-table tr:last-child td { border-bottom: none; }
.premium-table tbody tr:hover, .comparison-table-v2 tr:hover td { background: var(--bg-soft); }
.comparison-table-v2 td.feat-name { font-weight: 700; color: var(--heading); width: 40%; }
.comparison-table-v2 td.col-highlight, .comparison-table-v2 th.col-highlight { background: rgba(59,130,246,.04); border-left: 2px solid rgba(59,130,246,.15); border-right: 2px solid rgba(59,130,246,.15); font-weight: 700; }
.row-seo { border-left: 4px solid var(--seo); } .row-aeo { border-left: 4px solid var(--aeo); } .row-geo { border-left: 4px solid var(--geo); }
.icon-check { color: #22C55E; font-weight: 800; margin-right: .5rem; }
.icon-cross { color: #EF4444; font-weight: 800; margin-right: .5rem; }

/* premium / citation lists */
.premium-list { padding-left: 1.5rem; display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; }
.premium-list li { font-size: 1rem; color: var(--body); }
.font-seo li::marker { color: var(--seo); font-weight: 800; }
.font-aeo li::marker { color: var(--aeo); font-weight: 800; }
.font-geo li::marker { color: var(--geo); font-weight: 800; }
.font-primary li::marker { color: var(--seo); font-weight: 800; }
.font-dark li::marker { color: var(--heading); font-weight: 800; }

.citations-block { background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: 12px; padding: 1.5rem 2rem; }
.citations-block h4 { font-size: 1.05rem; font-weight: 800; color: var(--heading); margin-bottom: 1rem; }
.citations-block ul { padding-left: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.citations-block li { font-size: .9rem; color: var(--body); word-break: break-all; }
.citations-block a  { color: var(--seo); word-break: break-all; }

/* FAQ accordion (internal pages, light) */
.accordion-container { display: flex; flex-direction: column; gap: 1.25rem; max-width: 760px; margin: 0 auto; }
.accordion-item { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow); transition: box-shadow .3s, border-color .3s; }
.accordion-item[open] { box-shadow: var(--card-shadow); border-color: var(--seo); }
.accordion-title { padding: 1.25rem 2rem; font-weight: 700; color: var(--heading); cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; font-size: 1.05rem; }
.accordion-title::-webkit-details-marker { display: none; }
.accordion-title::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--muted); transition: transform .3s; }
.accordion-item[open] .accordion-title::after { content: "−"; color: var(--seo); }
.accordion-content { padding: 0 2rem 1.5rem; color: var(--body); font-size: 1rem; }

/* pre-order form */
.section-preorder-form { padding: 5rem 0; }
.form-container { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-card); padding: 3rem; box-shadow: var(--card-shadow); margin: 3rem auto; max-width: 640px; width: 100%; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: .9rem; font-weight: 700; color: var(--heading); margin-bottom: .5rem; }
.form-input { width: 100%; padding: .85rem 1.25rem; border: 1px solid var(--field-border); border-radius: var(--r-btn); font-family: inherit; font-size: .95rem; color: var(--field-text); background: var(--field-bg); }
.form-input:focus { outline: none; border-color: var(--seo); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
textarea.form-input { resize: vertical; }
.form-success { background: #F0FDF4; border: 1px solid #BBF7D0; color: #15803D; border-radius: var(--r-btn); padding: 1.5rem; font-weight: 600; text-align: center; }
.form-success h3 { color: #15803D; margin-bottom: .5rem; }

/* chatbot widget */
.section-chatbot { padding: 5rem 0; }
.chatbot-widget { border: 1px solid var(--card-border); border-radius: var(--r-card); background: var(--card-bg); display: flex; flex-direction: column; height: 500px; box-shadow: var(--card-shadow); overflow: hidden; margin: 3rem auto; max-width: 760px; }
.chatbot-header { background: #0F172A; color: #fff; padding: 1.25rem 2rem; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: .75rem; }
.chatbot-header::before { content: ""; width: 10px; height: 10px; background: #22C55E; border-radius: 50%; display: inline-block; }
.chatbot-messages { flex: 1; padding: 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; background: var(--bg-soft); }
.chatbot-msg { max-width: 80%; padding: 1rem 1.5rem; border-radius: 14px; font-size: .95rem; line-height: 1.5; box-shadow: var(--card-shadow); }
.chatbot-msg.bot  { background: #fff; color: #0F172A; align-self: flex-start; border-bottom-left-radius: 2px; }
.chatbot-msg.user { background: var(--seo); color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }
.chatbot-input-area { display: flex; border-top: 1px solid var(--card-border); background: #fff; }
.chatbot-input { flex: 1; border: none; padding: 1.25rem 2rem; font-family: inherit; font-size: .95rem; background: #fff; color: #0F172A; }
.chatbot-input:focus { outline: none; }
.chatbot-send { background: var(--seo); color: #fff; border: none; padding: 0 2.5rem; font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .2s; }
.chatbot-send:hover { background: var(--seo-d); }

/* byline */
.byline-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; }
.byline-text { font-size: 1rem; color: var(--heading); font-weight: 600; margin-bottom: .75rem; }
.byline-bio  { font-size: .95rem; color: var(--body); line-height: 1.75; margin-bottom: 1rem; }
.byline-date { font-size: .85rem; color: var(--muted); }
.border-seo-left { border-left: 4px solid var(--seo); } .border-aeo-left { border-left: 4px solid var(--aeo); }
.border-geo-left { border-left: 4px solid var(--geo); } .border-primary-left { border-left: 4px solid var(--seo); }
.border-dark-left { border-left: 4px solid var(--heading); }


/* ══ 20. BLOG (archive + homepage recent) ═════════════════════════════════ */
.section-recent-posts { padding: 5rem 0; }
.recent-posts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }

.blog-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; box-shadow: var(--card-shadow); }
.blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.10); transform: translateY(-3px); }
.blog-card-img { height: 160px; background: var(--bg-soft); }
.blog-card-content { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-tag { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; display: block; }
.blog-card-h { font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: .6rem; }
.blog-card-h a { color: var(--heading); }
.blog-card-h a:hover { color: var(--seo); }
.blog-card-p { font-size: .85rem; color: var(--body); line-height: 1.65; flex: 1; margin-bottom: 1rem; }
.blog-read-more { font-size: .85rem; font-weight: 700; color: var(--seo); margin-top: auto; }
.blog-read-more:hover { color: var(--seo-d); }

/* archive template (WP query loop) */
.blog-card-grid { padding: 3rem 0 5rem; }
.blog-query-block .blog-card-grid ul, .blog-card-grid > ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; list-style: none; padding: 0; margin: 0; }
.blog-card-item, .blog-card-grid li { display: block; }
.blog-card-inner { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: box-shadow .25s, transform .25s; box-shadow: var(--card-shadow); }
.blog-card-inner:hover { box-shadow: 0 8px 32px rgba(0,0,0,.10); transform: translateY(-3px); }
/* Card banner: a branded gradient by default; a real featured image (if the
   post has one) sits on top and covers it. Category class comes from post_class. */
.blog-card-thumb { display: block; height: 180px; background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(139,92,246,.12)); position: relative; overflow: hidden; }
.category-seo .blog-card-thumb { background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(139,92,246,.12)); }
.category-aeo .blog-card-thumb { background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(20,184,166,.12)); }
.category-geo .blog-card-thumb { background: linear-gradient(135deg, rgba(20,184,166,.22), rgba(59,130,246,.12)); }
.blog-card-thumb .wp-block-post-featured-image { margin: 0; height: 100%; }
.blog-card-thumb img, .blog-card-thumb figure, .wp-block-post-featured-image img { width: 100%; height: 180px; object-fit: cover; display: block; }
.blog-card-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-cat { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aeo); margin-bottom: .5rem; display: block; }
.blog-card-title a, .blog-card-inner .wp-block-post-title a { font-size: 1.05rem; font-weight: 700; color: var(--heading); line-height: 1.35; display: block; margin-bottom: .6rem; }
.blog-card-title a:hover, .blog-card-inner .wp-block-post-title a:hover { color: var(--seo); }
.blog-card-excerpt p, .blog-card-inner .wp-block-post-excerpt__excerpt { font-size: .88rem; color: var(--body); line-height: 1.65; margin-bottom: .75rem; }
.blog-card-excerpt .wp-block-post-excerpt__more-link, .blog-card-inner .wp-block-post-excerpt__more-link { font-size: .85rem; font-weight: 700; color: var(--seo); margin-top: auto; display: inline-block; }
.blog-card-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--divider); }
.blog-card-date, .blog-card-inner .wp-block-post-date { font-size: .78rem; color: var(--muted); }
.blog-pagination { display: flex; justify-content: center; gap: .5rem; padding: 2rem 0; }
.blog-pagination .wp-block-query-pagination-previous, .blog-pagination .wp-block-query-pagination-next, .blog-pagination .wp-block-query-pagination-numbers a { padding: .45rem .9rem; border: 1px solid var(--card-border); border-radius: 6px; font-size: .88rem; color: var(--heading); }
.blog-pagination .wp-block-query-pagination-previous:hover, .blog-pagination .wp-block-query-pagination-next:hover { background: var(--seo); color: #fff; border-color: var(--seo); }

/* blog single article */
/* Single blog post: dark title hero (keeps the transparent nav readable), then
   a light, width-constrained, readable article body. */
.single-hero { background: var(--hero-bg); padding: 8.5rem 0 3rem; }
.single-hero-inner { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; }
.single-hero-cat, .single-hero-cat a { color: var(--geo); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.single-hero-cat { margin-bottom: 1rem; }
body.category-seo .single-hero-cat, body.category-seo .single-hero-cat a { color: var(--seo); }
body.category-aeo .single-hero-cat, body.category-aeo .single-hero-cat a { color: var(--aeo); }
body.category-geo .single-hero-cat, body.category-geo .single-hero-cat a { color: var(--geo); }
.single-hero-title { color: #fff; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 1.1rem; }
.single-hero-date { color: rgba(255,255,255,.5); font-size: .9rem; }

.blog-article { background: var(--bg); padding: 3.5rem 0 4.5rem; }
.blog-body { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
.blog-body h2 { font-size: 1.85rem; margin: 3rem 0 1rem; color: var(--heading); }
.blog-body .definition-para { border-bottom: 1px solid var(--divider); padding-bottom: 2rem; }

/* blog listing (alt grid) */
.section-blog-list { padding: 4rem 0 6rem; }
.section-blog-list .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.section-blog-list .wp-block-post-template > li, .section-blog-list .wp-block-post { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.7rem; margin: 0; transition: transform .2s, box-shadow .2s; box-shadow: var(--card-shadow); }
.section-blog-list .wp-block-post-template > li:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15,23,42,.25); }
.section-blog-list .wp-block-post-title { font-size: 1.2rem; margin: 0 0 .6rem; line-height: 1.35; }
.section-blog-list .wp-block-post-title a { color: var(--heading); }
.section-blog-list .wp-block-post-title a:hover { color: var(--seo); }
.section-blog-list .wp-block-post-excerpt { color: var(--body); font-size: .95rem; line-height: 1.6; }
.section-blog-list .wp-block-post-excerpt__more-link { color: var(--seo); font-weight: 600; }
.section-blog-list .wp-block-post-date { color: var(--muted); font-size: .82rem; margin-top: .7rem; }


/* ══ 21. FOOTER (dark) ════════════════════════════════════════════════════ */
.site-footer { padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand { display: flex; flex-direction: column; gap: .75rem; }
.footer-brand h3 { color: #fff; font-size: 1.4rem; letter-spacing: -.02em; }
.footer-brand p { font-size: .85rem; line-height: 1.7; max-width: 320px; color: rgba(255,255,255,.45); }
.footer-col h4 { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 1rem; }
.footer-col a { display: block; font-size: .85rem; color: rgba(255,255,255,.4); margin-bottom: .55rem; transition: color .2s; }
.footer-col a:hover { color: rgba(255,255,255,.85); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; font-size: .78rem; flex-wrap: wrap; gap: .5rem; color: rgba(255,255,255,.4); }
.footer-bottom a { color: rgba(255,255,255,.4); }
.footer-bottom a:hover { color: rgba(255,255,255,.75); }


/* ══ 22. ANIMATIONS / RINGS ═══════════════════════════════════════════════ */
.tri-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.tri-visible { opacity: 1 !important; transform: translateY(0) !important; }
.matrix-v2, .how-card, .price-card, .gap-card { opacity: 0; transform: translateY(32px); transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); }
.section-entered { opacity: 1 !important; transform: translateY(0) !important; }

.ring { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1); }
.ring-seo { stroke: #3B82F6; stroke-dashoffset: 207; } .ring-aeo { stroke: #8B5CF6; stroke-dashoffset: 207; }
.ring-geo { stroke: #14B8A6; stroke-dashoffset: 207; } .ring-green { stroke: #22C55E; stroke-dashoffset: 207; }
.ring-cyan { stroke: #06B6D4; stroke-dashoffset: 207; } .ring-purple { stroke: #A855F7; stroke-dashoffset: 207; }
.tri-ring-animate { stroke-dashoffset: 0 !important; }

/* accent helpers */
.shadow-seo { box-shadow: 0 8px 40px rgba(59,130,246,.2); }
.shadow-aeo { box-shadow: 0 8px 40px rgba(139,92,246,.2); }
.shadow-geo { box-shadow: 0 8px 40px rgba(20,184,166,.2); }
.shadow-primary { box-shadow: 0 8px 40px rgba(59,130,246,.2); }
.border-seo { border-color: var(--seo); } .border-aeo { border-color: var(--aeo); } .border-geo { border-color: var(--geo); }
.border-primary { border-color: var(--seo); } .border-dark { border-color: var(--heading); }


/* ══ 23. RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-layout { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual, .hero-visual-card, .hero-plugin-shot { display: none !important; }
  .tri-hero { text-align: center; }
  .hero-actions, .hero-proof { justify-content: center; }
  .matrices-v2 { grid-template-columns: 1fr; gap: 1.25rem; }
  .gap-grid, .feature-row { grid-template-columns: 1fr; gap: 2.5rem; }
  .feat-reverse { direction: ltr; }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .pricing-v2 { grid-template-columns: 1fr; max-width: 480px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .demo-gate { grid-template-columns: repeat(2,1fr); }
  .recent-posts-grid, .blog-query-block .blog-card-grid ul, .blog-card-grid > ul { grid-template-columns: 1fr 1fr; }
  .content-split-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .tri-feat-grid { grid-template-columns: 1fr 1fr; }

  /* mobile nav */
  .hamburger-btn { display: flex; }
  .header-cta { display: none; }
  .site-nav {
    display: none; position: fixed; inset: 0; width: 100%; height: 100vh;
    background: rgba(8,11,20,.97); backdrop-filter: blur(16px);
    flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; z-index: 9998;
  }
  .site-nav.active { display: flex; }
  .site-nav a { color: #fff; font-size: 1.3rem; font-weight: 600; }
  .site-nav.active .mobile-only-cta { display: inline-flex !important; }
  body.admin-bar .site-header { top: 46px; }
}

@media (min-width: 1025px) {
  .hamburger-btn { display: none; }
  .header-cta { display: flex; }
}

@media (max-width: 900px) {
  .tri-feat-grid, .section-blog-list .wp-block-post-template { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* crawler monitor rows must fit a phone: shrink the name column, let the
     status wrap instead of forcing horizontal overflow */
  .feature-row > div[style*='360px'] { flex: none !important; width: 100% !important; }
  .cd-row { flex-wrap: wrap; gap: .4rem .6rem; }
  .cd-bot { width: auto; min-width: 96px; }
  .cd-bar { flex: 1 1 90px; min-width: 70px; }
  .cd-status { white-space: normal; flex: 1 0 100%; }
  /* single blog post: comfortable side padding on phones (no bezel-to-bezel) */
  .single-hero { padding: 7rem 0 2.25rem; }
  .single-hero-inner { padding: 0 1.25rem; }
  .blog-article { padding: 2.5rem 0 3rem; }
  .blog-body { padding: 0 1.25rem; }

  .section-problem, .section-matrices, .section-feature, .section-demo,
  .section-how, .section-pricing, .section-faq, .section-byline,
  .section-definition, .section-tri-features { padding: 4rem 0; }
  .tri-hero { padding: 6rem 0 4rem; }
  .how-grid, .demo-gate { grid-template-columns: 1fr; }
  .demo-rings { gap: 1.25rem; }
  .recent-posts-grid, .blog-query-block .blog-card-grid ul, .blog-card-grid > ul { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .crawler-inner { flex-wrap: wrap; gap: .75rem; }
  .hero-proof { gap: 1.5rem; }
  .premium-table th, .premium-table td, .comparison-table-v2 th, .comparison-table-v2 td { padding: 1rem 1.25rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 1.15rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-proof { flex-direction: column; }
  .demo-keyword-row { flex-direction: column; align-items: stretch; }
  .demo-keyword-field { min-width: unset; }
  .price-card { padding: 1.75rem 1.25rem; }
  .section-cta-dark { padding: 4rem 0; }
  .form-container, .chatbot-widget { padding: 2rem 1.25rem; }
}

@media (max-width: 640px) {
  .recent-posts-grid, .blog-query-block .blog-card-grid ul, .blog-card-grid > ul { grid-template-columns: 1fr; }
}