:root {
  --bg: #06060B;
  --bg-card: #0E0E16;
  --bg-elevated: #141420;
  --lime: #CDFF00;
  --cyan: #00E5FF;
  --pink: #FF2D87;
  --white: #F0F0F5;
  --gray: #8A8A9A;
  --gray-light: #B8B8C8;
  --gray-dark: #3A3A4A;
  --font-display: 'Anybody', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; }
h1 { font-size: clamp(3.5rem, 9vw, 8rem); font-weight: 900; line-height: 0.9; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 700; line-height: 1.2; }
p { color: var(--gray-light); max-width: 720px; }
strong { color: var(--white); font-weight: 600; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3rem); }
section { padding: clamp(4rem, 10vw, 8rem) 0; position: relative; }

/* ===== REVEAL ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===== NAV ===== */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1rem 0;
  background: rgba(6,6,11,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(58,58,74,0.3);
  transition: all 0.3s;
}
.site-nav.scrolled { background: rgba(6,6,11,0.95); border-bottom-color: rgba(58,58,74,0.7); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3rem); display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--lime); letter-spacing: -0.03em; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--gray); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
@media (max-width: 768px) { .nav-links { display: none; } }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.25s cubic-bezier(0.16,1,0.3,1); border: none; letter-spacing: -0.01em; }
.btn-primary { background: var(--lime); color: #06060B; }
.btn-primary:hover { background: #d9ff26; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(205,255,0,0.3); }
.btn-secondary { background: transparent; color: var(--white); border: 1px solid var(--gray-dark); }
.btn-secondary:hover { border-color: rgba(205,255,0,0.4); color: var(--lime); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn-lg { padding: 18px 36px; font-size: 17px; }

/* ===== FLOATING CTA ===== */
.floating-cta {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  background: var(--lime); color: #06060B;
  border-radius: 100px; font-weight: 700; font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 40px rgba(205,255,0,0.35);
  transition: all 0.25s;
  animation: float-appear 0.6s cubic-bezier(0.16,1,0.3,1) 2.5s both;
}
.floating-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 50px rgba(205,255,0,0.45); }
@keyframes float-appear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) { .floating-cta { bottom: 1rem; right: 1rem; padding: 11px 16px; font-size: 13px; } }

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding-top: 80px;
}
.hero::before {
  content: ''; position: absolute; top: -20%; right: -15%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(205,255,0,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -20%; left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,229,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; width: 100%; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { display: none; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border: 1px solid var(--gray-dark); border-radius: 100px;
  font-size: 12px; font-weight: 500; color: var(--gray);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2rem;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(205,255,0,0.4); } 50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(205,255,0,0); } }

.hero-headline { margin-bottom: 0.5rem; }
.hero-headline .accent { color: var(--lime); display: block; }
.hero-tagline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  color: var(--gray-light); line-height: 1.25; margin-top: 1rem;
  letter-spacing: -0.02em;
}
.hero-tagline strong { color: var(--lime); }
.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--gray); max-width: 540px;
  margin-top: 1.5rem; line-height: 1.65;
}
.hero-ctas { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero-line { width: 80px; height: 2px; background: linear-gradient(90deg, var(--lime), transparent); margin-top: 3rem; }

/* ===== SPORE DIAGRAM ===== */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.spore-diagram { position: relative; width: 360px; height: 360px; }
.spore-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1px dashed rgba(205,255,0,0.1);
}
.spore-ring-1 { width: 170px; height: 170px; animation: ring-pulse 3s ease-in-out infinite; }
.spore-ring-2 { width: 265px; height: 265px; animation: ring-pulse 3s ease-in-out infinite 0.6s; }
.spore-ring-3 { width: 355px; height: 355px; animation: ring-pulse 3s ease-in-out infinite 1.2s; }
@keyframes ring-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.12; } }

.spore-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 108px; height: 108px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(205,255,0,0.14), rgba(205,255,0,0.04));
  border: 1.5px solid rgba(205,255,0,0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 10; box-shadow: 0 0 50px rgba(205,255,0,0.12);
}
.spore-center-label {
  font-family: var(--font-display); font-weight: 900; font-size: 10px;
  color: var(--lime); text-transform: uppercase; letter-spacing: 0.1em;
  text-align: center; line-height: 1.4;
}

.spore-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.spore-node-dot {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; font-family: var(--font-display);
  border: 1px solid rgba(255,255,255,0.06);
}
.spore-node-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gray); text-align: center; line-height: 1.3; max-width: 58px;
}
.node-n  { top: 3%;  left: 50%; transform: translateX(-50%); }
.node-ne { top: 14%; right: 6%; }
.node-e  { top: 50%; right: 0%; transform: translateY(-50%); }
.node-se { bottom: 14%; right: 6%; }
.node-s  { bottom: 3%; left: 50%; transform: translateX(-50%); }
.node-sw { bottom: 14%; left: 6%; }
.node-w  { top: 50%; left: 0%; transform: translateY(-50%); }
.node-nw { top: 14%; left: 6%; }

/* ===== BRAND STRIP ===== */
.brand-strip {
  padding: 1.4rem 0;
  background: var(--bg-card);
  border-top: 1px solid var(--gray-dark); border-bottom: 1px solid var(--gray-dark);
}
.brand-strip-inner {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap; justify-content: center;
}
.brand-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: #2a2a3a; white-space: nowrap; flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, 1.8vw, 16px);
  color: #2e2e40; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}

/* ===== SECTIONS ===== */
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--lime); margin-bottom: 1.5rem; font-family: var(--font-body);
}
.section-label::before { content: ''; width: 24px; height: 1px; background: var(--lime); }
.divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gray-dark), transparent); }

/* ===== QUOTE ===== */
.quote-block {
  border-left: 2px solid var(--lime); padding: 1.5rem 0 1.5rem 2rem; margin: 3rem 0;
}
.quote-block p {
  font-size: clamp(1.05rem, 2vw, 1.35rem); font-style: italic;
  color: var(--gray-light); line-height: 1.6; max-width: 700px;
}

/* ===== STATS GRID ===== */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem; margin: 3rem 0;
}
.stat-card {
  padding: 2rem; border: 1px solid var(--gray-dark); border-radius: 14px;
  background: var(--bg-card); position: relative; overflow: hidden;
}
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--lime), var(--cyan)); }
.stat-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--lime); line-height: 1; }
.stat-lbl { font-size: 14px; color: var(--gray); margin-top: 0.5rem; line-height: 1.45; }

/* ===== 1→33 SECTION ===== */
.otm-wrapper { margin: 3rem 0; }
.otm-source-wrap { display: flex; justify-content: center; margin-bottom: 0; }
.otm-source-card {
  padding: 1.4rem 2.5rem; text-align: center;
  background: linear-gradient(135deg, rgba(205,255,0,0.1), rgba(205,255,0,0.03));
  border: 1.5px solid rgba(205,255,0,0.4); border-radius: 16px;
  position: relative;
}
.otm-source-card::after {
  content: ''; position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%);
  width: 2px; height: 2rem; background: linear-gradient(180deg, var(--lime), transparent);
}
.otm-source-title { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: var(--lime); }
.otm-source-sub { font-size: 13px; color: var(--gray); margin-top: 4px; }

.otm-connector { height: 2rem; display: flex; justify-content: center; }
.otm-line-h { width: 80%; height: 1px; background: linear-gradient(90deg, transparent, rgba(205,255,0,0.2), transparent); margin: 1rem auto 0; }

.otm-outputs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem; margin-top: 1rem;
}
.otm-out {
  padding: 0.8rem 1rem; background: var(--bg-card); border: 1px solid var(--gray-dark);
  border-radius: 10px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--gray-light);
  transition: border-color 0.2s, transform 0.2s;
}
.otm-out:hover { border-color: rgba(205,255,0,0.3); transform: translateY(-2px); color: var(--white); }
.otm-total {
  text-align: center; margin-top: 2rem; padding: 1.5rem;
  background: var(--bg-elevated); border: 1px solid var(--gray-dark); border-radius: 14px;
}
.otm-total .total-n { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; color: var(--lime); line-height: 1; }
.otm-total .total-l { font-size: 15px; color: var(--gray); margin-top: 0.25rem; }

/* ===== ARCH GRID ===== */
.arch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; margin: 3rem 0; }
@media (max-width: 768px) { .arch-grid { grid-template-columns: 1fr; } }
.arch-card {
  padding: 2rem; border: 1px solid var(--gray-dark); border-radius: 16px;
  background: var(--bg-card); transition: border-color 0.3s, transform 0.3s;
}
.arch-card:hover { border-color: rgba(205,255,0,0.35); transform: translateY(-4px); }
.arch-card .card-num {
  font-family: var(--font-display); font-size: 46px; font-weight: 900;
  color: var(--bg-elevated); -webkit-text-stroke: 1px var(--gray-dark); line-height: 1; margin-bottom: 1rem;
}
.arch-card h3 { color: var(--white); margin-bottom: 0.75rem; }
.arch-card p { font-size: 15px; color: var(--gray); line-height: 1.6; }
.card-tag { display: inline-block; margin-top: 1rem; padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.tag-lime { background: rgba(205,255,0,0.12); color: var(--lime); }
.tag-cyan { background: rgba(0,229,255,0.12); color: var(--cyan); }
.tag-pink { background: rgba(255,45,135,0.12); color: var(--pink); }

/* ===== META GRID ===== */
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1rem; margin: 2rem 0; }
.meta-item { padding: 1.2rem; border: 1px solid var(--gray-dark); border-radius: 10px; background: var(--bg-card); font-size: 14px; color: var(--gray-light); line-height: 1.4; }
.meta-item strong { display: block; color: var(--white); font-size: 13px; font-weight: 600; margin-bottom: 4px; }

/* ===== LOOP DIAGRAM ===== */
.loop-wrap { display: flex; flex-direction: column; align-items: center; margin: 3rem 0; }
.loop-step {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.2rem 1.8rem; background: var(--bg-card); border: 1px solid var(--gray-dark);
  border-radius: 12px; width: 100%; max-width: 560px; transition: border-color 0.3s;
}
.loop-step:hover { border-color: rgba(205,255,0,0.3); }
.loop-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); font-weight: 900; font-size: 17px; }
.loop-step h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.loop-step p { font-size: 13px; color: var(--gray); margin: 0; line-height: 1.4; }
.loop-arrow { display: flex; justify-content: center; padding: 0.3rem 0; color: var(--gray-dark); font-size: 20px; }
.loop-return { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0.5rem; padding: 0.6rem 1.5rem; border: 1px dashed var(--lime); border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--lime); max-width: 560px; }

/* ===== CASES ===== */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 3rem 0; }
.case-card { padding: 2rem; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--gray-dark); position: relative; }
.case-year { position: absolute; top: 1.2rem; right: 1.2rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 100px; }
.case-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; margin-bottom: 3px; }
.case-role { font-size: 13px; color: var(--gray); margin-bottom: 1rem; }
.case-stat { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; line-height: 1; margin-bottom: 3px; }
.case-stat-lbl { font-size: 13px; color: var(--gray); margin-bottom: 1rem; }
.case-insight { font-size: 14px; color: var(--gray-light); padding-top: 1rem; border-top: 1px solid var(--gray-dark); line-height: 1.55; }
.c-lime .case-stat { color: var(--lime); } .c-lime .case-year { background: rgba(205,255,0,0.1); color: var(--lime); }
.c-cyan .case-stat { color: var(--cyan); } .c-cyan .case-year { background: rgba(0,229,255,0.1); color: var(--cyan); }
.c-pink .case-stat { color: var(--pink); } .c-pink .case-year { background: rgba(255,45,135,0.1); color: var(--pink); }
.c-white .case-stat { color: var(--white); } .c-white .case-year { background: rgba(240,240,245,0.07); color: var(--gray-light); }

/* ===== COMPARISON TABLE ===== */
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 2rem 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-dark); }
.comparison-table thead th { background: var(--bg-elevated); padding: 1.2rem 1.5rem; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--gray-dark); }
.comparison-table thead th:first-child { color: var(--gray); }
.comparison-table thead th:last-child { color: var(--lime); }
.comparison-table td { padding: 0.95rem 1.5rem; font-size: 15px; border-bottom: 1px solid rgba(58,58,74,0.5); vertical-align: middle; }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tbody tr { background: var(--bg-card); transition: background 0.2s; }
.comparison-table tbody tr:hover { background: var(--bg-elevated); }
.col-before { color: var(--gray); }
.col-before::before { content: '✕ '; color: rgba(255,45,135,0.6); font-size: 11px; font-weight: 700; }
.col-after { color: var(--gray-light); font-weight: 500; }
.col-after::before { content: '✓ '; color: var(--lime); font-size: 12px; font-weight: 700; }

/* ===== REG GRID ===== */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; margin: 2rem 0; }
.reg-card { padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255,45,135,0.2); background: rgba(255,45,135,0.03); }
.reg-card h4 { font-size: 14px; font-weight: 700; color: var(--pink); margin-bottom: 0.5rem; line-height: 1.3; }
.reg-card p { font-size: 14px; color: var(--gray); line-height: 1.5; margin: 0; }

/* ===== TIMELINE ===== */
.timeline { margin: 3rem 0; position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--lime), var(--cyan), var(--pink)); }
.t-item { margin-bottom: 2rem; position: relative; }
.t-item::before { content: ''; position: absolute; left: -2rem; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); border: 2px solid var(--bg); transform: translateX(-4px); }
.t-date { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--lime); margin-bottom: 4px; }
.t-title { font-weight: 600; font-size: 16px; color: var(--white); margin-bottom: 4px; }
.t-desc { font-size: 14px; color: var(--gray); line-height: 1.55; }

/* ===== URGENCY ===== */
.urgency-strip {
  display: flex; align-items: flex-start; gap: 1rem; margin: 2.5rem 0;
  padding: 1.4rem 2rem;
  background: linear-gradient(90deg, rgba(205,255,0,0.07), rgba(205,255,0,0.02), transparent);
  border: 1px solid rgba(205,255,0,0.2); border-radius: 12px;
}
.urgency-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.urgency-strip p { font-size: 15px; color: var(--gray-light); line-height: 1.6; margin: 0; max-width: none; }
.urgency-strip strong { color: var(--lime); }

/* ===== AUTHOR ===== */
.author-card {
  background: var(--bg-card); border: 1px solid var(--gray-dark); border-radius: 20px;
  padding: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden;
}
.author-card::after {
  content: ''; position: absolute; top: -40%; right: -15%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(205,255,0,0.04) 0%, transparent 70%); pointer-events: none;
}
.author-inner { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 640px) { .author-inner { grid-template-columns: 1fr; } }
.author-av {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(205,255,0,0.15), rgba(0,229,255,0.08));
  border: 2px solid rgba(205,255,0,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; color: var(--lime);
}
.author-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--white); margin-bottom: 4px; }
.author-title { font-size: 15px; color: var(--gray); line-height: 1.5; margin-bottom: 1rem; }
.author-bio { font-size: 15px; color: var(--gray-light); line-height: 1.65; max-width: none; }
.author-creds { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.cred { padding: 5px 13px; border-radius: 100px; font-size: 12px; font-weight: 500; color: var(--gray-light); background: var(--bg-elevated); border: 1px solid var(--gray-dark); }
.cred-hl { background: rgba(205,255,0,0.08); border-color: rgba(205,255,0,0.22); color: var(--lime); }

/* ===== CTA SECTION ===== */
.cta-section { text-align: center; padding: clamp(5rem, 10vw, 8rem) 0; position: relative; }
.cta-section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(205,255,0,0.055) 0%, transparent 60%); pointer-events: none;
}
.cta-section h2 { max-width: 720px; margin: 0 auto 1.5rem; }
.cta-box {
  max-width: 500px; margin: 3rem auto 0; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg-card); border: 1px solid var(--gray-dark); border-radius: 20px; text-align: left;
}
.cta-box h3 { font-size: 1.2rem; color: var(--white); margin-bottom: 0.4rem; }
.cta-box .cta-sub { font-size: 14px; color: var(--gray); margin-bottom: 1.5rem; max-width: none; line-height: 1.55; }
.cta-box .btn { width: 100%; justify-content: center; font-size: 16px; padding: 16px; }
.cta-note { text-align: center; font-size: 12px; color: var(--gray-dark); margin-top: 1rem; }

/* ===== FOOTER ===== */
footer { padding: 3rem 0; border-top: 1px solid var(--gray-dark); text-align: center; }
footer p { font-size: 13px; color: var(--gray); margin: 0 auto; line-height: 1.7; }
.footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--lime); margin-bottom: 0.4rem; }

/* ===== UTILS ===== */
.text-lime { color: var(--lime); } .text-cyan { color: var(--cyan); } .text-pink { color: var(--pink); }
.text-gray { color: var(--gray); } .text-white { color: var(--white); }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.w-icon { fill: currentColor; }

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .reg-grid { grid-template-columns: 1fr; }
  .otm-outputs { grid-template-columns: 1fr 1fr; }
}

/* ===== MOBILE-FIRST ENHANCEMENTS ===== */

/* Hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1); transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-mobile {
  display: none; flex-direction: column; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(6,6,11,0.98);
  border-bottom: 1px solid var(--gray-dark);
  padding: 1rem 0;
  backdrop-filter: blur(20px);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 0.9rem 1.5rem; font-size: 16px; font-weight: 500;
  color: var(--gray-light); text-decoration: none;
  border-bottom: 1px solid rgba(58,58,74,0.3);
  transition: color 0.2s, background 0.2s;
}
.nav-mobile a:hover { color: var(--lime); background: rgba(205,255,0,0.04); }
.nav-mobile .btn { margin: 1rem 1.5rem 0.5rem; width: calc(100% - 3rem); justify-content: center; }

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .site-nav .btn-sm { display: none; }
  .nav-inner { position: relative; }
}

/* Comparison table mobile: horizontal scroll */
.comparison-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
.comparison-wrap .comparison-table { min-width: 560px; border-radius: 0; }

@media (max-width: 600px) {
  /* Stack comparison table cells */
  .comparison-table thead { display: none; }
  .comparison-table, .comparison-table tbody, .comparison-table tr, .comparison-table td {
    display: block; width: 100%;
  }
  .comparison-table tr {
    margin-bottom: 1rem; border: 1px solid var(--gray-dark); border-radius: 12px; overflow: hidden;
  }
  .comparison-table td { padding: 0.8rem 1rem; border-bottom: 1px solid rgba(58,58,74,0.4); }
  .comparison-table td:last-child { border-bottom: none; }
  .col-before { background: rgba(255,45,135,0.03); }
  .col-after { background: rgba(205,255,0,0.03); font-weight: 600; }
  .comparison-wrap { overflow-x: visible; }
  .comparison-wrap .comparison-table { min-width: unset; border-radius: 0; border: none; }
}

/* Hero mobile */
@media (max-width: 480px) {
  .hero { padding-top: 70px; min-height: auto; padding-bottom: 4rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-tagline { font-size: clamp(1.1rem, 5vw, 1.4rem); }
  h1 { font-size: clamp(3rem, 14vw, 5rem); }
}

/* Brand strip mobile */
@media (max-width: 480px) {
  .brand-strip-inner { gap: 1rem; }
  .brand-label { display: none; }
  .brand-name { font-size: 12px; }
}

/* Loop diagram mobile */
@media (max-width: 600px) {
  .loop-step { padding: 1rem; gap: 1rem; }
  .loop-icon { width: 38px; height: 38px; font-size: 14px; }
  .loop-step h4 { font-size: 14px; }
}

/* Stats grid mobile: 2 cols */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .stat-num { font-size: 1.8rem; }
}

/* OTM outputs mobile */
@media (max-width: 480px) {
  .otm-outputs { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .otm-out { font-size: 12px; padding: 0.65rem 0.75rem; }
}

/* Author card mobile */
@media (max-width: 640px) {
  .author-av { width: 72px; height: 72px; font-size: 1.4rem; }
  .author-name { font-size: 1.5rem; }
}

/* CTA box mobile */
@media (max-width: 540px) {
  .cta-box { margin-left: 0; margin-right: 0; }
  .cta-box .btn-lg, .cta-box .btn { font-size: 15px; padding: 15px; }
}

/* General section padding mobile */
@media (max-width: 480px) {
  section { padding: 3rem 0; }
  .cta-section { padding: 3.5rem 0; }
  .arch-grid { gap: 1rem; }
  .arch-card { padding: 1.5rem; }
  h2 { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 1rem; }
}

/* Floating CTA hide on very small to avoid overlap */
@media (max-width: 380px) { .floating-cta { display: none; } }

/* Touch targets */
.btn { min-height: 44px; }
.nav-links a { min-height: 44px; display: flex; align-items: center; }

/* Feature Compare */
.feature-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 20px; overflow: visible; margin: 0 0 3rem; }
.fc-col { padding: 2.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.fc-before { background: linear-gradient(160deg, rgba(205,255,0,0.12) 0%, rgba(205,255,0,0.04) 100%); border: 1px solid rgba(205,255,0,0.3); border-right: none; border-radius: 20px 0 0 20px; }
.fc-after { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,45,135,0.2); border-radius: 0 20px 20px 0; }
.fc-badge { display: inline-block; padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; background: var(--lime); color: var(--bg); width: fit-content; }
.fc-badge-danger { background: rgba(255,45,135,0.15); color: var(--pink); border: 1px solid rgba(255,45,135,0.3); }
.fc-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; line-height: 1.2; }
.fc-before .fc-title { color: var(--lime); }
.fc-after .fc-title { color: rgba(255,255,255,0.5); }
.fc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.fc-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; line-height: 1.4; }
.fc-before .fc-list li { color: rgba(255,255,255,0.9); }
.fc-before .fc-list li::before { display: none; }
.fc-list-bad li { color: rgba(255,255,255,0.35); text-decoration: none; }
.fc-list-bad li:first-child::before { display: none; }
.fc-cta { align-self: flex-start; margin-top: 0.5rem; }
.fc-verdict { font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; color: var(--pink); padding: 1rem 1.5rem; background: rgba(255,45,135,0.1); border-radius: 12px; text-align: center; }
/* Timeline strip */
.timeline-strip { display: flex; align-items: center; gap: 0; margin-bottom: 2.5rem; overflow-x: auto; padding: 1.5rem 0; }
.ts-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 100px; text-align: center; flex-shrink: 0; }
.ts-line { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(205,255,0,0.3), rgba(0,229,255,0.3)); min-width: 30px; flex-shrink: 0; }
.ts-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); flex-shrink: 0; }
.ts-dot-cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.ts-dot-pink { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.ts-label { font-size: 0.8rem; font-weight: 800; color: var(--lime); white-space: nowrap; }
.ts-danger .ts-label { color: var(--pink); }
.ts-desc { font-size: 0.7rem; color: rgba(255,255,255,0.5); line-height: 1.3; max-width: 90px; }
@media (max-width: 700px) {
  .feature-compare { grid-template-columns: 1fr; }
  .fc-before { border-right: 1px solid rgba(205,255,0,0.3); border-bottom: none; border-radius: 20px 20px 0 0; }
  .fc-after { border-radius: 0 0 20px 20px; }
  .timeline-strip { justify-content: flex-start; }
}


/* ── VISUAL ENHANCEMENTS ─────────────────────────────────── */

/* A. Hero animated dot grid */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(205,255,0,0.15) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: dotDrift 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
@keyframes dotDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}

/* B. Glassmorphism cards */
.arch-card, .case-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.arch-card:hover, .case-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(205,255,0,0.35);
  box-shadow: 0 20px 60px rgba(205,255,0,0.12);
}

/* C. Gradient section labels */
.section-label {
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: 0.15em;
}

/* D. Stats counter pulse */
.stat-num {
  display: inline-block;
  animation: statPulse 3s ease-in-out infinite alternate;
}
@keyframes statPulse {
  0%   { text-shadow: 0 0 20px rgba(205,255,0,0.3); }
  100% { text-shadow: 0 0 50px rgba(205,255,0,0.7), 0 0 100px rgba(205,255,0,0.2); }
}

/* E. CTA button shimmer */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -75%; }
  100% { left: 150%; }
}

/* F. WhatsApp float pulse ring */
.whatsapp-float { position: relative; }
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.5);
  animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* G. Comparison table row hover */
.comp-table tbody tr {
  transition: background 0.2s ease;
}
.comp-table tbody tr:hover {
  background: rgba(205,255,0,0.04);
}

/* H. Urgency strip glow border */
.urgency-strip {
  position: relative;
}
.urgency-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--lime), var(--cyan), var(--pink));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* I. Mobile nav smooth slide */
.nav-mobile {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-mobile:not(.open) {
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
}
.nav-mobile.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* J. Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  z-index: 9999;
  transition: width 0.1s linear;
  width: 0%;
}

/* K. Brand strip separator */
.brand-strip {
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* L. Feature compare column glow */
.fc-before {
  transition: box-shadow 0.3s ease;
}
.fc-before:hover {
  box-shadow: 0 0 60px rgba(205,255,0,0.08), inset 0 0 30px rgba(205,255,0,0.04);
}

/* Hero tagline — big number */
.hero-tagline { display: flex; flex-direction: column; gap: 0.3rem; }
.ht-line { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; opacity: 0.9; }
.ht-big { font-size: clamp(2.8rem, 6vw, 4.5rem); font-family: var(--font-display); font-weight: 900; line-height: 1; }
.ht-big .text-lime { font-size: clamp(4rem, 9vw, 7rem); display: inline-block; line-height: 0.9; }

/* Brand marquee */
.brand-strip-inner { flex-direction: column; gap: 1rem; align-items: center; }
.brand-marquee-wrap { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.brand-marquee { display: flex; gap: 2rem; align-items: center; width: max-content; animation: marquee 20s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.brand-sep { color: rgba(255,255,255,0.2); font-size: 1.2rem; }

/* Pipeline diagram */
.pipeline-diagram { display: grid; grid-template-columns: 1fr auto 1.6fr auto; align-items: center; gap: 1.5rem; margin: 2.5rem 0; }
.pipe-source { background: linear-gradient(135deg, rgba(205,255,0,0.12), rgba(205,255,0,0.04)); border: 1px solid rgba(205,255,0,0.35); border-radius: 20px; padding: 2rem; text-align: center; }
.pipe-source-badge { display: inline-block; background: var(--lime); color: var(--bg); font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.pipe-source-title { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--lime); letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.pipe-source-sub { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-bottom: 0.5rem; }
.pipe-source-meta { font-size: 0.75rem; background: rgba(205,255,0,0.1); color: var(--lime); padding: 0.3rem 0.8rem; border-radius: 20px; display: inline-block; }
.pipe-arrow-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.pipe-arrow-line { width: 2px; height: 60px; background: linear-gradient(180deg, var(--lime), var(--cyan)); }
.pipe-arrow-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); writing-mode: vertical-rl; }
.pipe-arrow-head { color: var(--cyan); font-size: 1.2rem; transform: rotate(90deg); }
.pipe-outputs { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 1.5rem; }
.pipe-out-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.35); margin-bottom: 1rem; }
.pipe-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pipe-fmt { font-size: 0.82rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.75); transition: background 0.2s; }
.pipe-fmt:hover { background: rgba(205,255,0,0.08); color: var(--lime); }
.fmt-video, .fmt-short { color: rgba(205,255,0,0.8); }
.fmt-reel, .fmt-tiktok { color: rgba(255,45,135,0.8); }
.fmt-carousel, .fmt-cards { color: rgba(0,229,255,0.8); }
.pipe-total { text-align: center; background: linear-gradient(135deg, rgba(0,229,255,0.1), rgba(0,229,255,0.03)); border: 1px solid rgba(0,229,255,0.25); border-radius: 20px; padding: 2rem 1.5rem; }
.pipe-total-num { font-family: var(--font-display); font-size: 5rem; font-weight: 900; color: var(--cyan); line-height: 1; }
.pipe-total-plus { font-size: 2.5rem; vertical-align: super; }
.pipe-total-label { font-weight: 700; color: rgba(255,255,255,0.85); margin: 0.5rem 0; line-height: 1.3; }
.pipe-total-sub { font-size: 0.75rem; color: rgba(255,255,255,0.4); line-height: 1.4; }
@media (max-width: 900px) {
  .pipeline-diagram { grid-template-columns: 1fr; }
  .pipe-arrow-wrap { transform: rotate(90deg); height: 40px; justify-content: center; }
  .pipe-arrow-line { width: 60px; height: 2px; }
  .pipe-arrow-label { writing-mode: horizontal-tb; }
  .pipe-arrow-head { transform: rotate(0deg); }
}

/* Loop circular */
.loop-circle-wrap { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; margin: 2rem 0; }
.loop-circle { position: relative; width: 500px; height: 500px; max-width: 100%; }
.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-center-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-family: var(--font-display); font-weight: 900; font-size: 0.9rem; letter-spacing: 0.15em; color: var(--lime); line-height: 1.4; z-index: 2; background: rgba(6,6,11,0.8); padding: 0.5rem 1rem; border-radius: 10px; }
.loop-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; z-index: 2; }
.loop-node-1 { top: 0; left: 50%; transform: translateX(-50%); }
.loop-node-2 { top: 38%; right: -20px; transform: translateY(-50%); align-items: flex-start; }
.loop-node-3 { bottom: 10%; right: 2%; align-items: flex-end; text-align: right; }
.loop-node-4 { bottom: 10%; left: 2%; align-items: flex-start; }
.loop-node-5 { top: 38%; left: -20px; transform: translateY(-50%); align-items: flex-end; text-align: right; }
.loop-node-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(205,255,0,0.15); color: var(--lime); font-family: var(--font-display); font-weight: 900; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(205,255,0,0.3); flex-shrink: 0; }
.loop-node-text { display: flex; flex-direction: column; gap: 0.15rem; max-width: 110px; }
.loop-node-text strong { font-size: 0.85rem; color: rgba(255,255,255,0.9); }
.loop-node-text span { font-size: 0.7rem; color: rgba(255,255,255,0.4); line-height: 1.3; }
.loop-advantage { display: flex; align-items: flex-start; gap: 1rem; background: rgba(205,255,0,0.06); border: 1px solid rgba(205,255,0,0.2); border-radius: 16px; padding: 1.2rem 1.8rem; max-width: 560px; }
.loop-adv-icon { font-size: 2rem; color: var(--lime); flex-shrink: 0; }
.loop-adv-text { font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.5; }
@media (max-width: 600px) {
  .loop-circle { width: 340px; height: 340px; }
  .loop-node-2 { right: -10px; }
  .loop-node-5 { left: -10px; }
}

/* Meta stats bars */
.meta-stats { display: flex; flex-direction: column; gap: 1.2rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 2rem; }
.meta-stat-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 1rem; }
.meta-stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.meta-stat-bar-wrap { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.meta-stat-bar { height: 100%; width: 0; border-radius: 4px; transition: width 1.2s cubic-bezier(0.4,0,0.2,1); }
.meta-stat-bar.animated { width: var(--pct); }
.meta-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; white-space: nowrap; min-width: 56px; text-align: right; }
@media (max-width: 600px) {
  .meta-stat-row { grid-template-columns: 1fr auto; }
  .meta-stat-bar-wrap { grid-column: 1 / -1; }
}

/* Arquivo demo terminal */
.arquivo-demo { background: #0D0D18; border: 1px solid rgba(0,229,255,0.2); border-radius: 16px; overflow: hidden; font-family: 'Courier New', monospace; }
.arquivo-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.2rem; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06); }
.arquivo-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.d-red { background: #FF5F57; }
.d-yellow { background: #FFBD2E; }
.d-green { background: #28CA41; }
.arquivo-title { font-size: 0.75rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; margin-left: 0.5rem; font-family: var(--font-body); }
.arquivo-search-row { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.arquivo-prompt { color: var(--cyan); font-size: 1rem; }
.arquivo-query { color: var(--lime); font-size: 0.9rem; }
.arquivo-cursor { color: var(--lime); animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.arquivo-results { padding: 0.75rem 0; }
.arquivo-result { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.7rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s; }
.arquivo-result:last-child { border-bottom: none; }
.arquivo-result:hover { background: rgba(0,229,255,0.04); }
.arquivo-result-tag { font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 6px; white-space: nowrap; font-family: var(--font-body); letter-spacing: 0.08em; }
.tag-video { background: rgba(205,255,0,0.12); color: var(--lime); }
.tag-audio { background: rgba(255,45,135,0.12); color: var(--pink); }
.tag-reel { background: rgba(0,229,255,0.12); color: var(--cyan); }
.arquivo-result-text { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.4; }
.arquivo-result-text em { color: rgba(255,255,255,0.8); font-style: normal; }
.arquivo-result-score { font-size: 0.75rem; font-weight: 700; color: var(--lime); font-family: var(--font-body); }
.arquivo-footer { padding: 0.75rem 1.2rem; font-size: 0.7rem; color: rgba(255,255,255,0.25); font-family: var(--font-body); border-top: 1px solid rgba(255,255,255,0.04); }

/* Reg compliance badge */
.reg-compliance-badge { display: inline-block; background: rgba(40,202,65,0.12); color: #28CA41; border: 1px solid rgba(40,202,65,0.25); border-radius: 20px; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.75rem; margin-bottom: 0.75rem; letter-spacing: 0.05em; }

/* CTA urgency bar */
.cta-urgency-bar { display: flex; align-items: center; justify-content: center; gap: 0.6rem; background: rgba(255,45,135,0.1); border: 1px solid rgba(255,45,135,0.25); border-radius: 12px; padding: 0.75rem 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; text-align: center; }
.cta-urgency-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.cta-countdown { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--pink); letter-spacing: 0.05em; }

/* Author avatar ring */
.author-av-wrap { position: relative; flex-shrink: 0; width: 80px; height: 80px; }
.author-av { position: relative; z-index: 1; }
.author-av-ring { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(var(--lime), var(--cyan), var(--pink), var(--lime)); animation: ringRotate 4s linear infinite; }
@keyframes ringRotate { to { transform: rotate(360deg); } }

.cred-icon { font-size: 0.9rem; }

/* ── SVG icon utilities (auto-added) ───────────────────────── */
.pfmt-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pipe-fmt { display: flex; align-items: center; gap: 0.5rem; }
.fc-list li { display: flex; align-items: flex-start; gap: 0.6rem; }
.fc-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.fc-icon-yes { color: var(--lime); }
.fc-icon-no { color: rgba(255,45,135,0.6); }


/* ─── Phase 2A: Enhanced quote block ─── */
.quote-block-xl { position: relative; padding: 2.5rem 2.5rem 2rem; }
.qb-marks { color: var(--lime); opacity: 0.4; margin-bottom: 0.75rem; }
.quote-block-xl p { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-style: italic; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,0.92); }
.qb-source { margin-top: 1rem; font-size: 0.8rem; color: rgba(255,255,255,0.35); letter-spacing: 0.05em; }

/* ─── Phase 2B: Waste diagram ─── */
.waste-diagram { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 2rem; margin: 1.5rem 0; }
.waste-col { display: flex; flex-direction: column; gap: 1rem; }
.waste-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.waste-col-bad .waste-title { color: rgba(255,45,135,0.7); }
.waste-col-good .waste-title { color: var(--lime); }
.waste-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.waste-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 10px; font-size: 0.82rem; color: rgba(255,255,255,0.6); width: 100%; }
.waste-col-bad .waste-item { background: rgba(255,45,135,0.06); border: 1px solid rgba(255,45,135,0.1); }
.waste-col-good .waste-item { background: rgba(205,255,0,0.05); border: 1px solid rgba(205,255,0,0.12); }
.waste-item-dead { opacity: 0.5; }
.waste-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.waste-col-bad .waste-icon { color: rgba(255,45,135,0.6); }
.wi-good { color: var(--lime) !important; }
.waste-arrow-down { color: rgba(255,45,135,0.3); padding: 0.2rem 0 0.2rem 0.75rem; }
.waste-arrow-lime { color: rgba(205,255,0,0.4) !important; }
.waste-verdict { font-size: 0.8rem; font-weight: 700; padding: 0.5rem 0.75rem; border-radius: 8px; text-align: center; }
.waste-verdict-bad { background: rgba(255,45,135,0.1); color: rgba(255,45,135,0.8); }
.waste-verdict-good { background: rgba(205,255,0,0.1); color: var(--lime); }
.waste-divider { display: flex; align-items: center; justify-content: center; }
@media (max-width: 600px) {
  .waste-diagram { grid-template-columns: 1fr; }
  .waste-divider { transform: rotate(90deg); }
}

/* ─── Phase 3A: Team comparison ─── */
.team-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 2rem; }
.tc-side { display: flex; flex-direction: column; gap: 0.75rem; }
.tc-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; }
.tc-conventional .tc-label { color: rgba(255,45,135,0.6); }
.tc-spore .tc-label { color: var(--lime); }
.tc-persons { display: flex; flex-wrap: wrap; gap: 4px; }
.tc-person { display: inline-flex; }
.tc-person-dim { color: rgba(255,45,135,0.3); }
.tc-person-lit { color: var(--lime); }
.tc-count { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: rgba(255,255,255,0.6); }
.tc-count-green { color: var(--lime); }
.tc-note { font-size: 0.72rem; color: rgba(255,255,255,0.3); line-height: 1.4; }
.tc-note-good { color: rgba(205,255,0,0.5); }
.tc-equals { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.tc-eq-line { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }
.tc-eq-label { font-size: 0.7rem; text-align: center; color: rgba(255,255,255,0.3); line-height: 1.3; white-space: nowrap; }
@media (max-width: 700px) {
  .team-compare { grid-template-columns: 1fr; }
  .tc-equals { flex-direction: row; }
  .tc-eq-line { width: 40px; height: 1px; }
}

/* ─── Phase 4A: Arch card icons ─── */
.card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; flex-shrink: 0; }
.card-icon-lime { background: rgba(205,255,0,0.1); color: var(--lime); border: 1px solid rgba(205,255,0,0.2); }
.card-icon-cyan { background: rgba(0,229,255,0.1); color: var(--cyan); border: 1px solid rgba(0,229,255,0.2); }
.card-icon-pink { background: rgba(255,45,135,0.1); color: var(--pink); border: 1px solid rgba(255,45,135,0.2); }

/* ── Case Metric Bars ─────────────────────────────── */
.case-metrics{margin-top:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.case-metric-row{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:.6rem}
.cm-label{font-size:.72rem;color:var(--gray);white-space:nowrap}
.cm-bar-wrap{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.cm-bar{height:100%;width:0;border-radius:2px;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.cm-bar.animated{width:var(--bar-w)}
.cm-bar-lime{background:var(--lime)}
.cm-bar-cyan{background:var(--cyan)}
.cm-bar-pink{background:var(--pink)}
.cm-bar-white{background:#fff}
.cm-val{font-size:.72rem;font-weight:700;color:#fff;white-space:nowrap}

/* ── Quote block polish ──────────────────────────── */
.quote-block{background:rgba(205,255,0,.04);border:1px solid rgba(205,255,0,.12);border-radius:12px;padding:2rem;margin-top:2rem}
.quote-block p{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.8)}

/* ══════════════════════════════════════════════════════════
   MOTION GRAPHICS — Material Motion / SPORE Style
   ══════════════════════════════════════════════════════════ */

/* 1. Enhanced reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition:
    opacity 0.55s cubic-bezier(0.4,0,0.2,1),
    transform 0.55s cubic-bezier(0.4,0,0.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-delay-1 { --reveal-delay: 80ms; }
.reveal-delay-2 { --reveal-delay: 160ms; }
.reveal-delay-3 { --reveal-delay: 240ms; }

/* 2. Hero ambient floating orbs */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.hero-orb-1 {
  width: 560px; height: 560px;
  top: -180px; right: -200px;
  background: radial-gradient(circle, rgba(205,255,0,0.09) 0%, transparent 70%);
  animation: orb-float-1 16s ease-in-out infinite alternate;
}
.hero-orb-2 {
  width: 440px; height: 440px;
  bottom: -130px; left: -160px;
  background: radial-gradient(circle, rgba(0,229,255,0.07) 0%, transparent 70%);
  animation: orb-float-2 20s ease-in-out infinite alternate;
}
.hero-orb-3 {
  width: 280px; height: 280px;
  top: 35%; left: 25%;
  background: radial-gradient(circle, rgba(255,45,135,0.05) 0%, transparent 70%);
  animation: orb-float-3 13s ease-in-out infinite alternate;
}
@keyframes orb-float-1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(55px,-45px) scale(1.14); }
}
@keyframes orb-float-2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-45px,65px) scale(1.1); }
}
@keyframes orb-float-3 {
  from { transform: translate(0,0) scale(1.05); }
  to   { transform: translate(35px,25px) scale(0.9); }
}

/* 3. Hero tagline staggered text reveal */
.ht-line, .ht-big {
  display: block;
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.6s cubic-bezier(0.4,0,0.2,1),
    transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.tagline-visible .ht-line:first-child { opacity:1; transform:translateY(0); transition-delay:0.05s; }
.tagline-visible .ht-big             { opacity:1; transform:translateY(0); transition-delay:0.18s; }
.tagline-visible .ht-line:last-child  { opacity:1; transform:translateY(0); transition-delay:0.31s; }

/* 4. Animated gradient text on 80+ number */
.ht-big .text-lime {
  background: linear-gradient(135deg, #cdff00 0%, #a8ff3a 35%, #00e5ff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 7s ease infinite;
}
@keyframes gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* 5. Section labels shimmer */
.section-label {
  background: linear-gradient(90deg,
    rgba(205,255,0,0.55) 0%,
    #cdff00 45%,
    rgba(205,255,0,0.55) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: label-shimmer 5s linear infinite;
}
@keyframes label-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* 6. Pipeline arrow flowing gradient */
.pipe-arrow-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(205,255,0,0.5) 40%,
    rgba(205,255,0,0.95) 50%,
    rgba(205,255,0,0.5) 60%,
    transparent 100%);
  background-size: 350% 100%;
  animation: line-flow 2.5s linear infinite;
}
@keyframes line-flow {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* 7. Pipe total 80+ spring pop-in */
.pipe-total-num { display: inline-block; }
.pipe-total.in-view .pipe-total-num {
  animation: num-spring 0.75s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes num-spring {
  0%   { transform: scale(0.35) translateY(24px); opacity: 0; filter: blur(6px); }
  70%  { filter: blur(0); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 8. Number flash on count complete */
@keyframes num-flash {
  0%,100% { text-shadow: none; }
  45%     { text-shadow: 0 0 28px rgba(205,255,0,0.9), 0 0 56px rgba(205,255,0,0.4); }
}
.stat-num.count-done {
  animation: num-flash 0.65s cubic-bezier(0.4,0,0.2,1) forwards;
}
.pipe-total-num.count-done {
  animation: num-flash-big 0.65s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes num-flash-big {
  0%,100% { text-shadow: none; }
  45%     { text-shadow: 0 0 50px rgba(205,255,0,1), 0 0 100px rgba(205,255,0,0.5); }
}

/* 9. Spore center pulse */
.spore-center { animation: center-pulse 3.5s ease-in-out infinite; }
@keyframes center-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(205,255,0,0.18), 0 0 0 0 rgba(205,255,0,0.0); }
  50%     { box-shadow: 0 0 0 12px rgba(205,255,0,0.06), 0 0 0 24px rgba(205,255,0,0.0); }
}

/* 10. Spore node dots staggered heartbeat */
.spore-node-dot { animation: node-heartbeat 5s ease-in-out infinite; }
.node-n  .spore-node-dot { animation-delay: 0s; }
.node-ne .spore-node-dot { animation-delay: 0.625s; }
.node-e  .spore-node-dot { animation-delay: 1.25s; }
.node-se .spore-node-dot { animation-delay: 1.875s; }
.node-s  .spore-node-dot { animation-delay: 2.5s; }
.node-sw .spore-node-dot { animation-delay: 3.125s; }
.node-w  .spore-node-dot { animation-delay: 3.75s; }
.node-nw .spore-node-dot { animation-delay: 4.375s; }
@keyframes node-heartbeat {
  0%,85%,100% { transform: scale(1); }
  92.5%       { transform: scale(1.18); box-shadow: 0 0 18px 4px rgba(205,255,0,0.25); }
}

/* 11. Loop nodes wave pulse */
.loop-node-icon { animation: loop-node-wave 5s ease-in-out infinite; }
.loop-node-2 .loop-node-icon { animation-delay: 1s; }
.loop-node-3 .loop-node-icon { animation-delay: 2s; }
.loop-node-4 .loop-node-icon { animation-delay: 3s; }
.loop-node-5 .loop-node-icon { animation-delay: 4s; }
@keyframes loop-node-wave {
  0%,80%,100% { transform: scale(1); }
  90%         { transform: scale(1.12); }
}

/* 12. Team compare persons */
.tc-person {
  opacity: 0;
  transform: scale(0.4) translateY(6px);
  transition:
    opacity 0.32s cubic-bezier(0.34,1.56,0.64,1),
    transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.tc-persons-animated .tc-person {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* 13. Comparison table rows stagger from sides */
.comparison-table tbody tr {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity 0.42s cubic-bezier(0.4,0,0.2,1),
    transform 0.42s cubic-bezier(0.4,0,0.2,1);
}
.comparison-table tbody tr:nth-child(even) { transform: translateX(18px); }
.comparison-table tbody tr.tr-visible {
  opacity: 1;
  transform: translateX(0) !important;
}

/* 14. CTA section ambient glow */
.cta-section { position: relative; overflow: hidden; }
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 50%,
    rgba(205,255,0,0.04) 0%, transparent 70%);
  pointer-events: none;
  animation: cta-breathe 7s ease-in-out infinite;
}
@keyframes cta-breathe {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.25); opacity: 0.55; }
}
.cta-section > .container { position: relative; z-index: 1; }

/* 15. CTA primary button pulsing glow */
.cta-section .btn-primary { animation: cta-glow 3.5s ease-in-out infinite; }
@keyframes cta-glow {
  0%,100% { box-shadow: 0 4px 20px rgba(205,255,0,0.18); }
  50%     { box-shadow: 0 8px 48px rgba(205,255,0,0.55), 0 0 80px rgba(205,255,0,0.18); }
}

/* 16. Floating CTA micro float */
.floating-cta { animation: float-bob 3.2s ease-in-out infinite; }
@keyframes float-bob {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-6px) scale(1.025); }
}

/* 17. Urgency strip pulsing left accent */
.urgency-strip { position: relative; }
.urgency-strip::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--lime);
  border-radius: 2px;
  animation: urgency-pulse 1.8s ease-in-out infinite;
}
@keyframes urgency-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 10px 2px rgba(205,255,0,0.5); }
  50%     { opacity: 0.25; box-shadow: none; }
}

/* 18. Compliance badges breathe */
.reg-compliance-badge { animation: badge-breathe 4.5s ease-in-out infinite; }
@keyframes badge-breathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); }
  50%     { box-shadow: 0 0 14px 3px rgba(0,229,255,0.18); }
}

/* 19. Countdown number */
.cta-countdown {
  display: inline-block;
  animation: countdown-tick 60s step-start infinite;
}
@keyframes countdown-tick {
  0%,2% { transform: scale(1.08); color: var(--lime); }
  3%    { transform: scale(1); color: inherit; }
}

/* 20. Archive cursor blink enhanced */
.arquivo-cursor {
  animation: cursor-blink 1s step-start infinite;
  font-weight: 700;
  color: var(--lime);
}
@keyframes cursor-blink {
  0%,49%  { opacity: 1; }
  50%,100%{ opacity: 0; }
}

/* 21. Quote block animated left border */
.quote-block { position: relative; overflow: hidden; }
.quote-block::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--lime), var(--cyan), var(--lime));
  background-size: 100% 300%;
  animation: quote-border 4s linear infinite;
  border-radius: 2px;
}
@keyframes quote-border {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

/* 22. Scroll progress bar gradient */
.scroll-progress {
  background: linear-gradient(90deg, var(--lime) 0%, var(--cyan) 60%, var(--pink) 100%) !important;
}

/* 23. Waste diagram arrows SVG draw on scroll */
.waste-arrow-down svg path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1) 0.2s;
}
.waste-diagram.wasted-in .waste-arrow-down svg path { stroke-dashoffset: 0; }
.waste-diagram.wasted-in .waste-col-bad .waste-arrow-down svg path  { transition-delay: 0.3s; }
.waste-diagram.wasted-in .waste-col-good .waste-arrow-down svg path { transition-delay: 0.5s; }

/* 24. Waste items sequential appear */
.waste-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.waste-diagram.wasted-in .waste-col-bad .waste-item:nth-child(1)  { opacity:1;transform:translateY(0);transition-delay:0.1s; }
.waste-diagram.wasted-in .waste-col-bad .waste-item:nth-child(3)  { opacity:1;transform:translateY(0);transition-delay:0.4s; }
.waste-diagram.wasted-in .waste-col-bad .waste-item:nth-child(5)  { opacity:1;transform:translateY(0);transition-delay:0.7s; }
.waste-diagram.wasted-in .waste-col-good .waste-item:nth-child(1) { opacity:1;transform:translateY(0);transition-delay:0.2s; }
.waste-diagram.wasted-in .waste-col-good .waste-item:nth-child(3) { opacity:1;transform:translateY(0);transition-delay:0.5s; }
.waste-diagram.wasted-in .waste-col-good .waste-item:nth-child(5) { opacity:1;transform:translateY(0);transition-delay:0.8s; }

/* 25. Pipe formats sequential cascade */
.pipe-fmt {
  opacity: 0;
  transform: translateX(-12px) scale(0.95);
  transition:
    opacity 0.35s cubic-bezier(0.4,0,0.2,1),
    transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.pipe-formats.fmts-in .pipe-fmt { opacity:1; transform:translateX(0) scale(1); }
.pipe-formats.fmts-in .pipe-fmt:nth-child(1)  { transition-delay:0.00s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(2)  { transition-delay:0.04s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(3)  { transition-delay:0.08s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(4)  { transition-delay:0.12s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(5)  { transition-delay:0.16s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(6)  { transition-delay:0.20s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(7)  { transition-delay:0.24s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(8)  { transition-delay:0.28s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(9)  { transition-delay:0.32s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(10) { transition-delay:0.36s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(11) { transition-delay:0.40s; }
.pipe-formats.fmts-in .pipe-fmt:nth-child(12) { transition-delay:0.44s; }

/* 26. Hero rings subtle rotation (combined with pulse) */
.spore-ring-1 { animation: ring-spin 30s linear infinite, ring-pulse 3s ease-in-out infinite; }
.spore-ring-2 { animation: ring-spin 40s linear infinite reverse, ring-pulse 3s ease-in-out infinite 0.6s; }
.spore-ring-3 { animation: ring-spin 55s linear infinite, ring-pulse 3s ease-in-out infinite 1.2s; }
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* ── Proof Strip ────────────────────────────────────── */
.proof-strip {
  background: rgba(205,255,0,0.03);
  border-top: 1px solid rgba(205,255,0,0.08);
  border-bottom: 1px solid rgba(205,255,0,0.08);
  padding: 2rem 0;
  margin-bottom: 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
  text-align: center;
}
.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.proof-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--lime);
  line-height: 1;
}
.proof-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}
.proof-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
}
@media (max-width: 700px) {
  .proof-grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }
}
@media (max-width: 400px) {
  .proof-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Hero tagline annotation ────────────────────────── */
.ht-annotation {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(205,255,0,0.45);
  text-transform: uppercase;
  margin-top: -0.3rem;
  margin-bottom: 0.3rem;
}\n
/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY OVERHAUL — Diagramação de Textos
   ═══════════════════════════════════════════════════════════ */

/* 1. Heading balance — prevents ugly orphan words on wraps */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* 2. h2 — tighter letter-spacing, better line-height for multi-line, more space below */
h2 {
  line-height: 1.18;
  margin-bottom: 2rem;
  letter-spacing: -0.025em;
}

/* 3. h3 — slightly more breathing room */
h3 {
  line-height: 1.28;
  margin-bottom: 0.75rem;
}

/* 4. Optimal reading width — 65 characters is the typographic sweet spot */
p {
  max-width: 65ch;
  orphans: 3;
  widows: 3;
}

/* 5. Automatic paragraph-to-paragraph spacing (when not using .mt-1 manually) */
p + p {
  margin-top: 1.3rem;
}

/* 6. Strong emphasis — lime-tinted white + heavier weight for real visual punch */
strong {
  color: rgba(240, 248, 210, 0.97);
  font-weight: 700;
}

/* 7. Section label — reduce gap to h2 for tighter label→heading pairing */
.section-label {
  margin-bottom: 0.75rem;
}

/* 8. Lead paragraph — first <p> directly after <h2> gets more prominence */
h2 + p {
  font-size: 1.06rem;
  line-height: 1.78;
  color: rgba(210, 212, 228, 0.94);
}

/* 9. Quote block — refined for impact */
.quote-block p {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.65;
  color: rgba(235, 237, 248, 0.88);
  letter-spacing: -0.01em;
  font-style: italic;
}

/* 10. Stat labels — slightly smaller, better contrast */
.stat-lbl {
  font-size: 0.87rem;
  line-height: 1.52;
  color: rgba(165, 165, 185, 0.72);
  margin-top: 0.5rem;
}

/* 11. Author bio — optimal for long-form credentialing copy */
.author-bio {
  font-size: 0.97rem;
  line-height: 1.78;
  max-width: 62ch;
  color: rgba(198, 200, 218, 0.82);
}

/* 12. Urgency strip — contained reading width */
.urgency-strip p {
  max-width: 70ch;
  font-size: 0.95rem;
  line-height: 1.72;
}

/* 13. Card body text — denser for scannable content */
.arch-card p,
.case-card p {
  font-size: 0.9rem;
  line-height: 1.62;
}

/* 14. CTA section — centered text layout for impact */
.cta-section .container > h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 20ch;
}
.cta-section .container > p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 58ch;
}

/* 15. CTA closing statement — extra visual weight */
.cta-closing {
  font-size: 1.18rem;
  color: var(--white);
  font-weight: 600;
  text-align: center;
  max-width: 42ch;
  margin: 2.5rem auto 0;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* 16. Comparison table text */
.comparison-table td,
.comparison-table th {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* 17. Proof strip label — tight and scannable */
.proof-label {
  max-width: 22ch;
  line-height: 1.45;
}

/* 18. Section intro paragraphs — slightly elevated */
.section-intro {
  font-size: 1.05rem;
  color: rgba(205, 208, 228, 0.9);
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: 2rem;
}

/* 19. Lição / quote-block-xl variant */
.quote-block-xl p {
  line-height: 1.62;
  color: rgba(238, 240, 252, 0.9);
  letter-spacing: -0.01em;
}

/* 20. Reg card description text */
.reg-card p,
.reg-card-body {
  font-size: 0.88rem;
  line-height: 1.6;
}

/* 21. Mobile responsive overrides */
@media (max-width: 768px) {
  p {
    max-width: 100%;
  }
  h2 {
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
  }
  h2 + p {
    font-size: 1rem;
  }
  .cta-section .container > h2 {
    text-align: left;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .cta-section .container > p {
    text-align: left;
    max-width: 100%;
  }
  .quote-block p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  p + p {
    margin-top: 1rem;
  }
  .author-bio {
    max-width: 100%;
  }
}

/* -- Typography extras: non-p text blocks -------- */
.case-insight {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(185,188,210,0.8);
}
.loop-adv-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(220,222,240,0.8);
  max-width: 58ch;
}
.tc-note {
  font-size: 0.74rem;
  line-height: 1.55;
  max-width: 28ch;
}
.cta-sub {
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(170,172,192,0.8);
  max-width: 52ch;
  margin: 0.75rem auto 0;
}
.pipe-total-sub {
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(140,142,162,0.7);
  max-width: 24ch;
  margin-top: 0.35rem;
}
.case-stat-lbl {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(160,162,185,0.75);
  max-width: 26ch;
}


/* ═══════════════════════════════════════════════════
   VISUAL IMPROVEMENTS — Section Rhythm & Polish
   ═══════════════════════════════════════════════════ */

/* Section visual rhythm — alternating subtle background tints */
section:not(.hero):not(.cta-section):nth-of-type(even) {
  background: linear-gradient(180deg, rgba(0,229,255,0.028) 0%, transparent 55%);
  border-top: 1px solid rgba(0,229,255,0.07);
}
section:not(.hero):not(.cta-section):nth-of-type(odd) {
  background: linear-gradient(180deg, rgba(205,255,0,0.022) 0%, transparent 55%);
  border-top: 1px solid rgba(205,255,0,0.06);
}

/* Key proof section — slightly elevated treatment */
section#evidencias {
  background: linear-gradient(180deg, rgba(205,255,0,0.035) 0%, rgba(14,14,22,0.6) 40%, transparent 100%);
  border-top: 1px solid rgba(205,255,0,0.12);
}

/* Author section — warm elevated */
section#autor {
  background: linear-gradient(180deg, rgba(0,229,255,0.025) 0%, transparent 60%);
  border-top: 1px solid rgba(0,229,255,0.08);
}

/* Case card left accent borders — bold proof highlight */
.case-card.c-lime {
  border-left: 4px solid rgba(205,255,0,0.75);
  border-top: 1px solid rgba(205,255,0,0.2);
  border-right: 1px solid rgba(205,255,0,0.08);
  border-bottom: 1px solid rgba(205,255,0,0.08);
}
.case-card.c-cyan {
  border-left: 4px solid rgba(0,229,255,0.75);
  border-top: 1px solid rgba(0,229,255,0.2);
  border-right: 1px solid rgba(0,229,255,0.08);
  border-bottom: 1px solid rgba(0,229,255,0.08);
}
.case-card.c-pink {
  border-left: 4px solid rgba(255,45,135,0.75);
  border-top: 1px solid rgba(255,45,135,0.2);
  border-right: 1px solid rgba(255,45,135,0.08);
  border-bottom: 1px solid rgba(255,45,135,0.08);
}
.case-card.c-white {
  border-left: 4px solid rgba(240,240,245,0.4);
  border-top: 1px solid rgba(240,240,245,0.12);
}

/* Case stat numbers — larger and with subtle glow */
.case-stat {
  font-size: 2.6rem;
  letter-spacing: -0.03em;
}
.c-lime .case-stat { text-shadow: 0 0 30px rgba(205,255,0,0.3); }
.c-cyan .case-stat { text-shadow: 0 0 30px rgba(0,229,255,0.3); }
.c-pink .case-stat { text-shadow: 0 0 30px rgba(255,45,135,0.3); }

/* Proof strip — stronger visual weight */
.proof-strip {
  background: linear-gradient(180deg, rgba(205,255,0,0.04) 0%, rgba(205,255,0,0.01) 100%);
  border-top: 1px solid rgba(205,255,0,0.15);
  border-bottom: 1px solid rgba(205,255,0,0.1);
  padding: 2.5rem 0;
}
.proof-num {
  text-shadow: 0 0 25px rgba(205,255,0,0.35);
  letter-spacing: -0.03em;
}
.proof-item {
  position: relative;
}
.proof-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(205,255,0,0.12);
}
@media (max-width: 700px) {
  .proof-item:not(:last-child)::after { display: none; }
}

/* Stats grid — stronger number presentation */
.stat-num {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  letter-spacing: -0.04em;
  text-shadow: 0 0 40px rgba(205,255,0,0.4);
}
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--lime), transparent);
  opacity: 0.3;
}

/* Centered narrow text utility */
.text-center-narrow {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Stronger section dividers */
.divider {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 70%, transparent 100%);
  height: 1px;
  margin: 0;
}


/* ═══════════════════════════════════════════════════
   VISUAL POLISH V3 — Hero anchor, Compare, Table, Loop, Timeline
   ═══════════════════════════════════════════════════ */

/* === 1. HERO — 80+ number gradient anchor === */
.ht-big {
  background: linear-gradient(135deg, #CDFF00 0%, #00E5FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(205,255,0,0.45));
  letter-spacing: -0.05em;
}

/* === 2. FEATURE COMPARE — Psychology: SPORE glows, "late" fades === */
.fc-before {
  background: linear-gradient(160deg, rgba(205,255,0,0.1) 0%, rgba(205,255,0,0.03) 100%);
  border: 1px solid rgba(205,255,0,0.3) !important;
  box-shadow: inset 0 0 50px rgba(205,255,0,0.04), 0 0 40px rgba(205,255,0,0.07);
  position: relative;
  z-index: 2;
}
.fc-before::before {
  content: 'RECOMENDADO';
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lime);
  color: #06060B;
  font-weight: 900;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
  font-family: var(--font-display);
  box-shadow: 0 4px 20px rgba(205,255,0,0.35);
}
.fc-after {
  opacity: 0.65;
  filter: grayscale(0.25);
}
.feature-compare {
  align-items: stretch;
}

/* === 3. COMPARISON TABLE — Row hover glow + visual scan aid === */
.comparison-table tbody tr {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.comparison-table tbody tr:hover {
  background: rgba(205,255,0,0.05);
  box-shadow: inset 4px 0 0 rgba(205,255,0,0.5), 0 2px 16px rgba(205,255,0,0.07);
}
.col-before {
  color: rgba(255,255,255,0.38) !important;
  font-weight: 400;
}
.col-after {
  font-weight: 600;
  background: linear-gradient(90deg, rgba(205,255,0,0.07) 0%, transparent 100%);
  padding-left: 1.2rem !important;
}

/* === 4. TIMELINE STRIP — Pulsing dots + gradient line === */
.timeline-strip {
  background: linear-gradient(90deg, rgba(205,255,0,0.05) 0%, rgba(205,255,0,0.01) 50%, rgba(0,229,255,0.02) 100%);
  border: 1px solid rgba(205,255,0,0.14);
  border-radius: 20px;
  padding: 2.2rem 1.5rem;
  overflow-x: auto;
}
.ts-dot {
  box-shadow: 0 0 18px var(--lime), inset 0 0 10px rgba(255,255,255,0.2);
  animation: ts-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes ts-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(205,255,0,0.8); }
  50% { transform: scale(1.3); box-shadow: 0 0 30px rgba(205,255,0,1); }
}
.ts-dot.ts-dot-cyan {
  box-shadow: 0 0 18px var(--cyan), inset 0 0 10px rgba(255,255,255,0.2);
  animation: ts-dot-pulse-cyan 2.2s ease-in-out infinite 0.5s;
}
@keyframes ts-dot-pulse-cyan {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(0,229,255,0.8); }
  50% { transform: scale(1.3); box-shadow: 0 0 30px rgba(0,229,255,1); }
}
.ts-line {
  height: 3px;
  background: linear-gradient(90deg, rgba(205,255,0,0.5), rgba(0,229,255,0.4));
  box-shadow: 0 0 12px rgba(205,255,0,0.2);
  border-radius: 2px;
}

/* === 5. URGENCY STRIP — Warning bar with left glow accent === */
.urgency-strip {
  padding: 2rem 2.5rem 2rem 3rem;
  border: 2px solid rgba(205,255,0,0.3);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(205,255,0,0.1) 0%, rgba(205,255,0,0.03) 100%);
  position: relative;
  overflow: hidden;
}
.urgency-strip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--lime), var(--cyan));
  animation: urgency-glow 2.5s ease-in-out infinite;
}
@keyframes urgency-glow {
  0%, 100% { box-shadow: 0 0 15px var(--lime); opacity: 1; }
  50% { box-shadow: 0 0 30px var(--lime); opacity: 0.8; }
}

/* === BONUS: Loop diagram node enhancement === */
.loop-node-icon {
  box-shadow: 0 0 22px rgba(205,255,0,0.2), inset 0 0 12px rgba(205,255,0,0.08);
  border-color: rgba(205,255,0,0.4) !important;
  animation: loop-node-glow 3.5s ease-in-out infinite;
}
@keyframes loop-node-glow {
  0%, 100% { box-shadow: 0 0 22px rgba(205,255,0,0.2), inset 0 0 12px rgba(205,255,0,0.08); }
  50% { box-shadow: 0 0 40px rgba(205,255,0,0.38), inset 0 0 18px rgba(205,255,0,0.12); }
}
.loop-center-label {
  background: rgba(6, 6, 11, 0.96) !important;
  border: 2px solid rgba(205,255,0,0.3) !important;
  box-shadow: 0 0 30px rgba(205,255,0,0.15) !important;
  border-radius: 16px;
  padding: 0.75rem 1.2rem;
}

/* === BONUS: Author card credibility boost === */
.author-card {
  background: linear-gradient(135deg, rgba(205,255,0,0.06) 0%, rgba(0,229,255,0.03) 100%) !important;
  border: 2px solid rgba(205,255,0,0.22) !important;
  box-shadow: 0 20px 60px rgba(205,255,0,0.08) !important;
}

/* === BONUS: Spore diagram node dots glow === */
.spore-node-dot {
  box-shadow: 0 0 20px currentColor, inset 0 0 10px rgba(255,255,255,0.2);
}


/* ═══════════════════════════════════════════════════
   COMPLIANCE SECTION — Full redesign
   ═══════════════════════════════════════════════════ */

/* Compliance banner — authority strip */
.comp-banner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.25rem 1.75rem;
  background: linear-gradient(135deg, rgba(205,255,0,0.08) 0%, rgba(205,255,0,0.03) 100%);
  border: 1px solid rgba(205,255,0,0.25);
  border-radius: 14px;
  margin-bottom: 0.5rem;
}
.comp-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(205,255,0,0.12);
  border: 2px solid rgba(205,255,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(205,255,0,0.2);
}
.comp-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.comp-banner-text strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
}
.comp-banner-text span {
  font-size: 0.85rem;
  color: var(--gray-light);
  line-height: 1.5;
}
.comp-banner-seal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(40,202,65,0.1);
  border: 1px solid rgba(40,202,65,0.3);
  border-radius: 100px;
  flex-shrink: 0;
}
.seal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28CA41;
  box-shadow: 0 0 10px #28CA41;
  animation: seal-pulse 2s ease-in-out infinite;
}
@keyframes seal-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}
.comp-banner-seal span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #28CA41;
  font-family: var(--font-display);
}
@media (max-width: 700px) {
  .comp-banner { flex-direction: column; text-align: center; }
  .comp-banner-seal { align-self: center; }
}

/* Compliance grid */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 600px) {
  .comp-grid { grid-template-columns: 1fr; }
}

/* Compliance card — two-zone design */
.comp-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,45,135,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.comp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(255,45,135,0.12), 0 0 0 1px rgba(255,45,135,0.3);
}

/* Risk zone — top */
.comp-risk {
  padding: 1.1rem 1.4rem 1rem;
  background: rgba(255,45,135,0.07);
  border-bottom: 1px solid rgba(255,45,135,0.15);
  position: relative;
}
.comp-risk::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--pink);
  opacity: 0.7;
}
.comp-risk-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.35rem;
  opacity: 0.85;
}
.comp-risk-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
.comp-penalty {
  font-size: 0.72rem;
  color: rgba(255,45,135,0.75);
  font-weight: 600;
  font-style: italic;
}

/* Answer zone — bottom */
.comp-answer {
  padding: 1rem 1.4rem 1.2rem;
  background: rgba(40,202,65,0.04);
  border-left: 4px solid rgba(40,202,65,0.4);
}
.comp-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(40,202,65,0.12);
  color: #28CA41;
  border: 1px solid rgba(40,202,65,0.25);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.65rem;
}
.comp-status svg {
  color: #28CA41;
  flex-shrink: 0;
}
.comp-answer p {
  font-size: 0.88rem;
  color: var(--gray-light);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}


/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM v2 — DESIGN.md principles applied
   Depth via borders, cinematic rhythm, warm elevation
   ═══════════════════════════════════════════════════ */

/* ─── ELEVATION SYSTEM ─── */

/* Level 1 — Standard containment */
.arch-card,
.pipe-format-card,
.loop-adv-item,
.meta-stat-block {
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: rgba(92,88,85,0.15) 0 0 12px;
}

/* Level 2 — Emphasized containment */
.case-card,
.stat-card,
.comp-card {
  border-width: 1px;
  box-shadow: rgba(92,88,85,0.18) 0 0 18px;
}
.case-card:hover,
.stat-card:hover {
  box-shadow: rgba(92,88,85,0.28) 0 0 28px, rgba(205,255,0,0.06) 0 8px 30px;
}

/* Level 3 — Accent/featured (lime signal border) */
.fc-before,
.comp-banner {
  box-shadow: rgba(205,255,0,0.08) 0 0 40px, rgba(92,88,85,0.2) 0 0 20px;
}

/* Level 5 — Dramatic float (hero elements) */
.author-card,
.cta-box {
  box-shadow: rgba(0,0,0,0.6) 0 20px 60px, rgba(148,163,184,0.08) 0 0 0 1px inset;
}

/* ─── SECTION BREATHING ROOM ─── */
/* Cinematic vertical rhythm — each section feels like a new chapter */
section {
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}
section.hero {
  padding-top: clamp(6rem, 12vw, 10rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}
section.cta-section {
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

/* ─── CARD BORDER DENSITY ─── */
/* Cards should not float ambiguously — warm containment borders */
.arch-card,
.case-card,
.stat-card,
.loop-adv-item,
.pipe-format-card,
.meta-stat-block,
.comp-card,
.fc-col {
  background: var(--bg-card);
}

/* ─── WARM AMBIENT CARD UPGRADE ─── */
.arch-card {
  border-radius: 12px;
  padding: 1.6rem 1.8rem;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.arch-card:hover {
  border-color: rgba(205,255,0,0.18);
  transform: translateY(-3px);
  box-shadow: rgba(205,255,0,0.06) 0 12px 40px, rgba(92,88,85,0.22) 0 0 20px;
}

/* ─── TYPOGRAPHY COMPRESSION — section headings ─── */
/* Dense, authoritative — per DESIGN.md principle */
h2 {
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h3 {
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.section-label {
  letter-spacing: 0.14em;
}

/* ─── DIVIDER UPGRADE — blueprint aesthetic ─── */
/* Dashed variant for blueprint-like workflow separation */
.divider {
  height: 1px;
  margin: 0;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ─── PROOF STRIP — warm ambient lift ─── */
.proof-strip {
  box-shadow: rgba(92,88,85,0.15) 0 0 20px;
}

/* ─── FEATURE COMPARE — deeper contrast ─── */
.fc-after {
  background: rgba(255,255,255,0.01) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* ─── STAT CARDS — elevated authority ─── */
.stat-card {
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
}

/* ─── CTA BOX — maximum drama ─── */
.cta-box {
  border: 2px solid rgba(205,255,0,0.3);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(205,255,0,0.06) 0%, rgba(205,255,0,0.02) 100%);
}
.cta-box:hover {
  border-color: rgba(205,255,0,0.45);
  box-shadow: rgba(0,0,0,0.6) 0 20px 60px, rgba(205,255,0,0.1) 0 0 60px;
}

/* ─── SLOW ANIMATIONS — engineering precision ─── */
/* DESIGN.md: animations are slow and subtle, not fast */
.seal-dot,
.ts-dot,
.urgency-strip::before {
  animation-duration: 3.5s !important;
}
.loop-node-glow {
  animation-duration: 5s !important;
}

/* ─── WARM GLOW — "powered on" moments ─── */
/* Apply lime drop-shadow to section-label line indicator */
.section-label::before {
  box-shadow: 0 0 12px rgba(205,255,0,0.6);
}

/* ─── COMPARISON TABLE — dashed blueprint variant ─── */
.comparison-table {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.comparison-table th {
  background: rgba(205,255,0,0.06);
  border-bottom: 1px solid rgba(205,255,0,0.12);
}
.comparison-table thead th {
  letter-spacing: 0.06em;
}

/* ─── PIPE FORMAT CARDS ─── */
.pipe-format-card {
  border-radius: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.pipe-format-card:hover {
  border-color: rgba(205,255,0,0.2);
  transform: translateY(-2px);
}

/* ─── AUTHOR SECTION — credibility at maximum ─── */
.author-card {
  border-radius: 20px;
  transition: box-shadow 0.4s ease;
}
.author-avatar {
  box-shadow: 0 0 0 3px rgba(205,255,0,0.25), 0 0 30px rgba(205,255,0,0.15);
}

/* ─── BUTTONS — warm charcoal system ─── */
.btn {
  transition: all 0.25s ease;
}
.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(205,255,0,0.25), 0 0 0 1px rgba(205,255,0,0.4);
  transform: translateY(-2px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

/* ─── CASE CARD — explicit background to not float ─── */
.case-card {
  background: var(--bg-card);
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* ═══════════════════════════════════════════════════
   LOOP DIAGRAM — Animated predictive cycle
   ═══════════════════════════════════════════════════ */

.loop-diagram-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: center;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .loop-diagram-wrap { grid-template-columns: 1fr; }
}

/* Ring container — relative positioned to place nodes */
.loop-ring-container {
  position: relative;
  width: 500px;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}

.loop-ring-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Animated progress ring — fills in as page loads */
.loop-progress-ring {
  animation: ring-draw 3s ease-out 0.5s forwards, ring-glow 4s ease-in-out 3.5s infinite;
  filter: drop-shadow(0 0 6px rgba(205,255,0,0.5));
}
@keyframes ring-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ring-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(205,255,0,0.5)); }
  50% { filter: drop-shadow(0 0 14px rgba(205,255,0,0.9)); }
}

/* Signal dot — already animated via SVG animateMotion */
.loop-signal-dot {
  filter: drop-shadow(0 0 8px #CDFF00);
}

/* Center label */
.loop-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(6,6,11,0.95);
  border: 2px solid rgba(205,255,0,0.25);
  border-radius: 18px;
  padding: 1rem 1.4rem;
  box-shadow: 0 0 40px rgba(205,255,0,0.1);
  min-width: 130px;
}
.loop-center-top {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(205,255,0,0.6);
  margin-bottom: 0.2rem;
}
.loop-center-main {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--lime);
  letter-spacing: 0.06em;
  line-height: 1;
}
.loop-center-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  margin-top: 0.3rem;
  letter-spacing: 0.08em;
}

/* Node positions — absolute around the ring (500px container, ring r=160, center=250) */
.loop-node-pos { position: absolute; }
.loop-pos-top         { top: 2%;  left: 50%; transform: translateX(-50%); }
.loop-pos-right       { top: 44%; right: -2%; transform: translateY(-50%); }
.loop-pos-bottom-right{ bottom: 4%; right: 10%; }
.loop-pos-bottom-left { bottom: 4%; left: 10%; }
.loop-pos-left        { top: 44%; left: -2%; transform: translateY(-50%); }

/* Node cards */
.loop-node-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  text-align: center;
  min-width: 90px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
  cursor: default;
}
.loop-node-card[data-color="lime"] { border-color: rgba(205,255,0,0.2); }
.loop-node-card[data-color="cyan"] { border-color: rgba(0,229,255,0.2); }
.loop-node-card[data-color="pink"] { border-color: rgba(255,45,135,0.2); }

.loop-node-num {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.15rem;
}
.loop-node-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
}
.loop-node-desc {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.3;
  margin-top: 0.15rem;
}

/* Node active state */
.loop-node-card.loop-node-active[data-color="lime"] {
  border-color: rgba(205,255,0,0.7);
  box-shadow: 0 0 25px rgba(205,255,0,0.25), inset 0 0 15px rgba(205,255,0,0.06);
  transform: scale(1.08);
  background: rgba(205,255,0,0.06);
}
.loop-node-card.loop-node-active[data-color="cyan"] {
  border-color: rgba(0,229,255,0.7);
  box-shadow: 0 0 25px rgba(0,229,255,0.25), inset 0 0 15px rgba(0,229,255,0.06);
  transform: scale(1.08);
  background: rgba(0,229,255,0.04);
}
.loop-node-card.loop-node-active[data-color="pink"] {
  border-color: rgba(255,45,135,0.7);
  box-shadow: 0 0 25px rgba(255,45,135,0.25), inset 0 0 15px rgba(255,45,135,0.06);
  transform: scale(1.08);
  background: rgba(255,45,135,0.04);
}

/* ─── Loop benefit side panel ─── */
.loop-benefit-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.loop-benefit-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: -0.5rem;
}
.loop-benefit-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lbs-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: auto auto;
  gap: 0.3rem 0.75rem;
  align-items: center;
}
.lbs-marker {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--lime);
  grid-row: 1;
  grid-column: 1;
}
.lbs-bar {
  grid-row: 1;
  grid-column: 2;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.lbs-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  border-radius: 3px;
  width: 0;
  transition: width 1.5s ease 1s;
}
.lbs-label {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--gray-light);
  line-height: 1.4;
}

.loop-insight {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(205,255,0,0.06);
  border: 1px solid rgba(205,255,0,0.2);
  border-radius: 14px;
  box-shadow: rgba(205,255,0,0.08) 0 0 20px;
}
.loop-insight-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--lime);
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 0 30px rgba(205,255,0,0.4);
  flex-shrink: 0;
}
.loop-insight-text {
  font-size: 0.88rem;
  color: var(--gray-light);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════
   EVIDÊNCIAS — Field validation redesign
   ═══════════════════════════════════════════════════ */

/* Field stat strip */
.field-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(205,255,0,0.1);
  border: 1px solid rgba(205,255,0,0.12);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.fss-item {
  padding: 1.5rem 1.25rem;
  background: var(--bg);
  text-align: center;
}
.fss-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.4rem;
}
.fss-label {
  font-size: 0.78rem;
  color: var(--gray-light);
  line-height: 1.45;
}
@media (max-width: 600px) {
  .field-stat-strip { grid-template-columns: 1fr; }
}

/* Principles legend */
.principles-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .principles-legend { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .principles-legend { grid-template-columns: 1fr; }
}
.pl-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.pl-item:hover,
.pl-item.pl-active {
  background: rgba(205,255,0,0.05);
  border-color: rgba(205,255,0,0.2);
}
.pl-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--lime);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.7;
}
.pl-item.pl-active .pl-num { opacity: 1; }
.pl-text {
  font-size: 0.78rem;
  color: var(--gray-light);
  line-height: 1.4;
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════
   SYNTHESIS BLOCK — Validation section visual summary
   ═══════════════════════════════════════════════════ */

.synthesis-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: rgba(92,88,85,0.15) 0 0 30px;
}

/* Top zone — what campaigns had in parts */
.syn-top {
  padding: 2rem 2.2rem;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.syn-top-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1rem;
}
.syn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.syn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: rgba(205,255,0,0.07);
  border: 1px solid rgba(205,255,0,0.2);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lime);
}
.syn-chip svg { opacity: 0.7; flex-shrink: 0; }
.syn-gap-note {
  font-size: 0.88rem;
  color: var(--gray-light);
  line-height: 1.65;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  border-left: 3px solid rgba(255,255,255,0.1);
}

/* Arrow connector */
.syn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  background: rgba(205,255,0,0.05);
  border-bottom: 1px solid rgba(205,255,0,0.1);
  color: var(--lime);
}
.syn-arrow svg { flex-shrink: 0; }
.syn-arrow span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lime);
  text-transform: uppercase;
}

/* Bottom zone — SPORE exclusives */
.syn-bottom {
  padding: 2rem 2.2rem;
  background: rgba(205,255,0,0.03);
  border-bottom: 1px solid rgba(205,255,0,0.08);
}
.syn-bottom-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(205,255,0,0.5);
  margin-bottom: 1.1rem;
}
.syn-differentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}
.syn-diff-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: rgba(205,255,0,0.04);
  border: 1px solid rgba(205,255,0,0.1);
  border-radius: 10px;
  font-size: 0.83rem;
  color: var(--gray-light);
  line-height: 1.4;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.syn-diff-item:hover {
  border-color: rgba(205,255,0,0.25);
  background: rgba(205,255,0,0.07);
}
.syn-diff-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(205,255,0,0.1);
  border: 1px solid rgba(205,255,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  flex-shrink: 0;
}

/* Closing statement */
.syn-closing {
  padding: 1.5rem 2.2rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gray-light);
  line-height: 1.6;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(205,255,0,0.08);
  text-align: center;
}
.syn-closing strong { font-weight: 800; }

@media (max-width: 600px) {
  .syn-top, .syn-bottom { padding: 1.5rem 1.25rem; }
  .syn-closing { padding: 1.25rem; font-size: 0.95rem; }
  .syn-arrow { padding: 0.75rem 1rem; }
  .syn-differentials { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   PROBLEM INSIGHT STRIP
   ═══════════════════════════════════════════════════ */
.problem-insight-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: rgba(92,88,85,0.15) 0 0 20px;
}
@media (max-width: 768px) {
  .problem-insight-strip {
    grid-template-columns: 1fr;
  }
  .pis-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.06); }
}
.pis-item {
  padding: 1.75rem 1.6rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-left: 3px solid rgba(205,255,0,0.3);
  transition: background 0.25s ease;
}
.pis-item:hover { background: rgba(205,255,0,0.03); }
.pis-item-bad { border-left-color: rgba(255,45,135,0.4); }
.pis-item-bad:hover { background: rgba(255,45,135,0.02); }
.pis-item-result { border-left-color: rgba(255,255,255,0.1); }
.pis-divider {
  width: 1px;
  background: rgba(255,255,255,0.06);
  align-self: stretch;
}
.pis-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(205,255,0,0.08);
  color: var(--lime);
  border: 1px solid rgba(205,255,0,0.15);
}
.pis-item-bad .pis-icon {
  background: rgba(255,45,135,0.08);
  color: var(--pink);
  border-color: rgba(255,45,135,0.15);
}
.pis-item-result .pis-icon {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.08);
}
.pis-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.4rem;
}
.pis-item-bad .pis-label { color: var(--pink); }
.pis-item-result .pis-label { color: rgba(255,255,255,0.35); }
.pis-text {
  font-size: 0.87rem;
  color: var(--gray-light);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

/* ═══════════════════════════════════════════════════
   SCALE SECTION — Pressure strip + callout
   ═══════════════════════════════════════════════════ */
.scale-pressure-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
@media (max-width: 700px) {
  .scale-pressure-strip { grid-template-columns: 1fr; }
  .sps-sep { display: none; }
}
.sps-item {
  padding: 1.4rem 1.6rem;
  text-align: center;
}
.sps-sep {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.2);
  font-weight: 300;
  padding: 0 0.5rem;
}
.sps-label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--lime);
  margin-bottom: 0.35rem;
}
.sps-desc {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.45;
}

.scale-callout {
  padding: 1.5rem 1.8rem;
  border: 1px solid rgba(255,45,135,0.2);
  border-radius: 14px;
  background: rgba(255,45,135,0.04);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sc-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  background: rgba(255,45,135,0.1);
  border: 1px solid rgba(255,45,135,0.2);
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  align-self: flex-start;
}
.sc-statement {
  font-size: 0.88rem;
  color: var(--gray-light);
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 2px solid rgba(255,45,135,0.2);
}
.sc-thesis {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
}
.sc-thesis svg { flex-shrink: 0; margin-top: 0.1rem; }

/* ═══════════════════════════════════════════════════
   ARCH BULLETS — Scannable card content
   ═══════════════════════════════════════════════════ */
.arch-bullets {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.arch-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--gray-light);
  line-height: 1.5;
  max-width: none;
}
.arch-bullets li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  margin-top: 0.45rem;
  opacity: 0.7;
}
.arch-card:nth-child(2) .arch-bullets li::before { background: var(--cyan); }
.arch-card:nth-child(3) .arch-bullets li::before { background: var(--pink); }
.arch-card:nth-child(4) .arch-bullets li::before { background: var(--lime); }


/* ═══════════════════════════════════════════════════
   SIGNAL CHIPS — O Problema section
   ═══════════════════════════════════════════════════ */
.prob-intro-line {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--gray-light);
  max-width: 65ch;
}
.signal-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.sig-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(205,255,0,0.2);
  background: rgba(205,255,0,0.05);
  color: rgba(205,255,0,0.8);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.sig-chip svg { flex-shrink: 0; opacity: 0.7; }
.sig-chip-muted {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--gray);
}
.sig-chip-angry {
  border-color: rgba(255,45,135,0.25);
  background: rgba(255,45,135,0.05);
  color: rgba(255,45,135,0.8);
}
.sig-chip-save {
  border-color: rgba(0,229,255,0.2);
  background: rgba(0,229,255,0.05);
  color: rgba(0,229,255,0.8);
}

/* ═══════════════════════════════════════════════════
   SPORE DEFINITION BLOCK
   ═══════════════════════════════════════════════════ */
.spore-def-block {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: 2rem;
}
.sdb-not-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 700px) {
  .sdb-not-row { grid-template-columns: 1fr; }
  .sdb-not-sep { height: 1px; width: 100%; background: rgba(255,255,255,0.06); }
}
.sdb-not-item {
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: background 0.2s;
}
.sdb-not-item:hover { background: rgba(255,255,255,0.02); }
.sdb-not-sep {
  width: 1px;
  background: rgba(255,255,255,0.06);
  align-self: stretch;
}
.sdb-not-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,45,135,0.7);
}
.sdb-not-item:last-child .sdb-not-label {
  color: var(--lime);
}
.sdb-not-label svg { color: inherit; }
.sdb-not-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-decoration: line-through;
  text-decoration-color: rgba(255,45,135,0.4);
}
.sdb-is-value {
  color: var(--lime);
  text-decoration: none;
}
.sdb-desc {
  padding: 1.2rem 1.5rem;
  font-size: 0.9rem;
  color: var(--gray-light);
  line-height: 1.65;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sdb-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.02em;
}
.sdb-footer svg { color: var(--lime); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   VOLUME PROOF BLOCK — Escala section
   ═══════════════════════════════════════════════════ */
.volume-proof-block {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: 2.5rem;
  box-shadow: rgba(92,88,85,0.12) 0 0 25px;
}
.vpb-stat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 700px) {
  .vpb-stat-row { grid-template-columns: 1fr; }
  .vpb-stat-sep { width: 100%; height: 1px; background: rgba(255,255,255,0.06); }
  .vpb-math-row { flex-direction: column; }
}
.vpb-stat {
  padding: 1.6rem;
  text-align: center;
}
.vpb-stat-hl { background: rgba(205,255,0,0.04); }
.vpb-stat-sep {
  width: 1px;
  background: rgba(255,255,255,0.06);
  align-self: stretch;
}
.vpb-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: rgba(255,255,255,0.5);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.vpb-stat-hl .vpb-num { color: var(--lime); }
.vpb-lbl {
  font-size: 0.78rem;
  color: var(--gray);
  line-height: 1.45;
  max-width: 20ch;
  margin: 0 auto;
}
.vpb-math-row {
  display: flex;
  align-items: center;
  padding: 1.2rem 1.6rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.vpb-math-item {
  flex: 1;
  min-width: 100px;
  text-align: center;
}
.vpb-math-val {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.2rem;
}
.vpb-math-result .vpb-math-val { color: var(--lime); }
.vpb-math-sub {
  font-size: 0.72rem;
  color: var(--gray);
  line-height: 1.35;
}
.vpb-math-op {
  color: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.vpb-math-eq {
  font-size: 1.4rem;
  font-weight: 300;
}

/* ═══════════════════════════════════════════════════
   THREE PRESSURES BLOCK — Escala inteligência
   ═══════════════════════════════════════════════════ */
.three-pressures-block {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: 2rem;
}
.tpb-header {
  padding: 0.85rem 1.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
}
.tpb-pressures {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 700px) {
  .tpb-pressures { grid-template-columns: 1fr; }
  .tpb-p-sep { width: 100%; height: 1px; background: rgba(255,255,255,0.05); }
  .tpb-response-row { flex-direction: column; }
}
.tpb-pressure {
  padding: 1.2rem 1.4rem;
}
.tpb-p-sep {
  width: 1px;
  background: rgba(255,255,255,0.05);
  align-self: stretch;
}
.tpb-p-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--lime);
  margin-bottom: 0.3rem;
}
.tpb-p-desc {
  font-size: 0.79rem;
  color: var(--gray);
  line-height: 1.45;
}
.tpb-response-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.tpb-resp {
  flex: 1;
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tpb-resp-bad { background: rgba(255,45,135,0.04); }
.tpb-resp-good { background: rgba(205,255,0,0.04); }
.tpb-resp-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,45,135,0.7);
  margin-bottom: 0.15rem;
}
.tpb-resp-good .tpb-resp-label { color: var(--lime); }
.tpb-resp-val {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
}
.tpb-resp-good .tpb-resp-val { color: var(--lime); }
.tpb-resp-sub {
  font-size: 0.78rem;
  color: var(--gray);
  line-height: 1.4;
}
.tpb-resp-arrow {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  color: rgba(255,255,255,0.15);
  border-left: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   META IMPACT BLOCK — Metadados section
   ═══════════════════════════════════════════════════ */
.meta-impact-block {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: 2rem;
}
.mib-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
@media (max-width: 600px) {
  .mib-row { flex-direction: column; }
  .mib-vs { padding: 0.5rem; text-align: center; }
}
.mib-case {
  flex: 1;
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.mib-case-bad { background: rgba(255,45,135,0.04); border-right: 1px solid rgba(255,255,255,0.05); }
.mib-case-good { background: rgba(205,255,0,0.04); }
.mib-case-label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}
.mib-case-meta {
  font-size: 0.78rem;
  color: rgba(255,45,135,0.8);
  font-weight: 600;
}
.mib-case-good .mib-case-meta { color: var(--lime); }
.mib-case-result {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: rgba(255,45,135,0.7);
  margin-top: 0.4rem;
  font-weight: 600;
}
.mib-case-good .mib-case-result { color: rgba(205,255,0,0.8); }
.mib-vs {
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
  border-right: 1px solid rgba(255,255,255,0.05);
  text-transform: uppercase;
}
.mib-insight {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  font-size: 0.82rem;
  color: var(--gray);
  line-height: 1.5;
}
.mib-insight svg { color: var(--lime); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   ARQUIVO CONTRAST — Arquivo Vivo section
   ═══════════════════════════════════════════════════ */
.arquivo-contrast {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
@media (max-width: 640px) {
  .arquivo-contrast { flex-direction: column; }
  .ac-arrow { transform: rotate(90deg); padding: 0.5rem 0; justify-content: center; }
}
.ac-side {
  flex: 1;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ac-side-bad { background: rgba(255,45,135,0.03); border-right: 1px solid rgba(255,255,255,0.05); }
.ac-side-good { background: rgba(205,255,0,0.03); }
.ac-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,45,135,0.6);
  margin-bottom: 0.1rem;
}
.ac-side-good .ac-label { color: rgba(205,255,0,0.7); }
.ac-val {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
}
.ac-side-good .ac-val { color: var(--lime); }
.ac-sub {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.45;
}
.ac-arrow {
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  color: rgba(255,255,255,0.15);
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.05);
}

/* ═══════════════════════════════════════════════════
   LOOP MINI FLOW — Loop section intro
   ═══════════════════════════════════════════════════ */
.loop-mini-flow {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: var(--bg-card);
}
.lmf-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0 1.2rem;
  text-align: center;
}
.lmf-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(205,255,0,0.08);
  color: var(--lime);
  border: 1px solid rgba(205,255,0,0.15);
  margin-bottom: 0.1rem;
}
.lmf-icon-cyan { background: rgba(0,229,255,0.08); color: var(--cyan); border-color: rgba(0,229,255,0.15); }
.lmf-icon-pink { background: rgba(255,45,135,0.08); color: var(--pink); border-color: rgba(255,45,135,0.15); }
.lmf-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: rgba(255,255,255,0.8);
}
.lmf-sub {
  font-size: 0.72rem;
  color: var(--gray);
  max-width: 12ch;
  line-height: 1.35;
}
.lmf-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: rgba(255,255,255,0.15);
  padding: 0 0.5rem;
  flex-shrink: 0;
}
.lmf-arrow span {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
}
.lmf-insight {
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--gray);
  font-style: italic;
}
.lmf-insight svg { color: var(--lime); }

/* ═══════════════════════════════════════════════════
   ALGO TIMING BLOCK — Calendário section
   ═══════════════════════════════════════════════════ */
.algo-timing-block {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .algo-timing-block { flex-direction: column; }
  .atb-vs { padding: 0.5rem; text-align: center; border: none; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
}
.atb-col {
  flex: 1;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.atb-early { background: rgba(205,255,0,0.03); border-right: 1px solid rgba(255,255,255,0.05); }
.atb-late { background: rgba(255,45,135,0.03); }
.atb-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(205,255,0,0.08);
  border: 1px solid rgba(205,255,0,0.15);
  border-radius: 100px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.3rem;
}
.atb-badge-bad { color: var(--pink); background: rgba(255,45,135,0.08); border-color: rgba(255,45,135,0.2); }
.atb-stat {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 900;
  color: var(--lime);
  line-height: 1;
}
.atb-stat-bad { color: rgba(255,45,135,0.7); }
.atb-desc {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.45;
  max-width: 28ch;
}
.atb-outcome {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 500;
}
.atb-outcome svg { flex-shrink: 0; margin-top: 0.05rem; }
.atb-outcome-good {
  background: rgba(205,255,0,0.07);
  color: rgba(205,255,0,0.8);
  border: 1px solid rgba(205,255,0,0.12);
}
.atb-outcome-bad {
  background: rgba(255,45,135,0.06);
  color: rgba(255,45,135,0.8);
  border: 1px solid rgba(255,45,135,0.12);
}
.atb-vs {
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.15);
  border-right: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   CTA SECTION — Ladder, layers grid, pain strip
   ═══════════════════════════════════════════════════ */
.cta-ladder {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 2rem;
}
.cta-ladder-item {
  padding: 0.7rem 1.2rem;
  border-left: 2px solid rgba(255,255,255,0.08);
  font-size: 0.92rem;
  color: rgba(255,255,255,0.4);
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,0.02);
  transition: all 0.2s;
}
.cta-ladder-item-2 {
  border-left-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  padding-left: 1.8rem;
}
.cta-ladder-item-3 {
  border-left-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.6);
  padding-left: 2.4rem;
}
.cta-ladder-hl {
  border-left-color: var(--lime) !important;
  color: rgba(255,255,255,0.9) !important;
  padding-left: 3rem;
  background: rgba(205,255,0,0.05) !important;
}
.cta-layers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
@media (max-width: 640px) { .cta-layers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .cta-layers-grid { grid-template-columns: 1fr; } }
.clg-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(205,255,0,0.1);
  border-radius: 10px;
  background: rgba(205,255,0,0.04);
  color: var(--lime);
  transition: all 0.2s;
}
.clg-item:hover {
  background: rgba(205,255,0,0.08);
  border-color: rgba(205,255,0,0.2);
}
.clg-item svg { flex-shrink: 0; opacity: 0.7; }
.clg-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  line-height: 1.3;
}
.cta-pain-strip {
  border: 1px solid rgba(255,45,135,0.15);
  border-radius: 14px;
  background: rgba(255,45,135,0.04);
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cps-header {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,45,135,0.7);
}
.cps-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cps-item {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  font-size: 0.78rem;
  color: rgba(255,45,135,0.7);
  background: rgba(255,45,135,0.06);
  border: 1px solid rgba(255,45,135,0.12);
}
.cps-cost {
  font-size: 0.85rem;
  color: var(--gray-light);
  line-height: 1.55;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,45,135,0.1);
  font-style: italic;
}


/* ═══════════════════════════════════════════════════
   AUTHOR PHOTO
   ═══════════════════════════════════════════════════ */
.author-av-photo {
  background: transparent;
  border: none;
  overflow: hidden;
  font-size: 0;
}
.author-av-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
  display: block;
}

/* =================================================
   HERO ANIMATION IFRAME FRAME
   ================================================= */
.hero-anim-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: rgba(92,88,85,0.2) 0 0 40px, 0 0 80px rgba(205,255,0,0.04);
  background: #030306;
}
.hero-anim-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* =================================================
   HERO — ANIMATION ONLY (full-width, no padding)
   ================================================= */
.hero-full-anim {
  padding: 0 !important;
  margin: 0;
  min-height: 0 !important;
  width: 100%;
  background: #000;
  display: block;
}
.hero-full-anim .hero-anim-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 0;
  border: none;
  overflow: hidden;
  background: #030306;
}
.hero-full-anim .hero-anim-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* =================================================
   LOOP ANIMATION FRAME — Loop Preditivo section
   ================================================= */
.loop-anim-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(205,255,0,0.1);
  box-shadow: rgba(92,88,85,0.15) 0 0 40px, 0 0 60px rgba(205,255,0,0.05);
  background: #030306;
  margin-top: 1rem;
}
.loop-anim-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* =================================================
   LOOP — FULL WIDTH SECTION (like hero)
   ================================================= */
.loop-full-section {
  padding-bottom: 0;
}
.loop-anim-frame-full {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: #030306;
  margin-top: 3rem;
}
.loop-anim-frame-full iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* =================================================
   ARQUITETURA — ANIMATION FRAME (full width)
   ================================================= */
.arch-full-section {
  padding-top: 0;
}
.arch-anim-frame-full {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: #030306;
  margin-bottom: 3.5rem;
}
.arch-anim-frame-full iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* =================================================
   COMPLIANCE SECTION — MATRIX REDESIGN
   ================================================= */
.comp-section {
  background: linear-gradient(180deg, rgba(255,30,30,0.035) 0%, transparent 28%);
}
.comp-intro {
  max-width: 66ch;
  margin: 0 auto 0;
  font-size: 1.08rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  text-align: center;
}

/* Certification banner */
.comp-cert-banner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(205,255,0,0.055);
  border: 1px solid rgba(205,255,0,0.22);
  border-left: 3px solid #CDFF00;
  border-radius: 10px;
  padding: 1.25rem 1.75rem;
  margin-top: 2.25rem;
}
.comp-cert-shield { flex-shrink: 0; }
.comp-cert-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.comp-cert-text strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.comp-cert-text span {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.comp-cert-badge {
  flex-shrink: 0;
  text-align: center;
  border: 1.5px solid rgba(205,255,0,0.35);
  border-radius: 7px;
  padding: 0.55rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.comp-badge-year {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(205,255,0,0.65);
}
.comp-badge-status {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #CDFF00;
}

/* Matrix */
.comp-matrix {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  overflow: hidden;
}
.comp-matrix-head {
  display: grid;
  grid-template-columns: 2fr 1.15fr 2fr;
  gap: 1.5rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 1.75rem;
}
.comp-matrix-head > div {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.comp-row {
  display: grid;
  grid-template-columns: 2fr 1.15fr 2fr;
  gap: 1.5rem;
  padding: 1.6rem 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  align-items: start;
  transition: background 0.2s;
}
.comp-row:last-child { border-bottom: none; }
.comp-row:hover { background: rgba(255,255,255,0.02); }

/* Risk column */
.comp-risk-cat {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255,80,80,0.7);
  margin-bottom: 0.4rem;
}
.comp-risk-name {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
}

/* Penalty column */
.comp-row-penalty { padding-top: 0.2rem; }
.comp-penalty-pill {
  display: inline-block;
  background: rgba(255,50,50,0.1);
  border: 1px solid rgba(255,50,50,0.28);
  color: rgba(255,100,100,0.88);
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  border-radius: 5px;
  line-height: 1.45;
}

/* Status column */
.comp-ok-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.comp-ok-label span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #CDFF00;
}
.comp-row-status p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 768px) {
  .comp-matrix-head { display: none; }
  .comp-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 1.25rem;
  }
  .comp-cert-banner { flex-direction: column; text-align: center; }
}


/* =====================================================
   MOBILE RESPONSIVE — COMPREHENSIVE AUDIT FIX
   ===================================================== */

/* ─── Animation Frames ──────────────────────────────── */
@media (max-width: 768px) {
  .loop-anim-frame-full  { padding-bottom: 65%; margin-bottom: 2rem; }
  .arch-anim-frame-full  { padding-bottom: 65%; margin-bottom: 2rem; }
}
@media (max-width: 540px) {
  .loop-anim-frame-full  { padding-bottom: 75%; margin-bottom: 1.5rem; }
  .arch-anim-frame-full  { padding-bottom: 75%; margin-bottom: 1.5rem; }
  .prob-anim-frame-full  { padding-bottom: 75%; margin-bottom: 1.5rem; }
}
@media (max-width: 400px) {
  .loop-anim-frame-full { padding-bottom: 80%; }
  .arch-anim-frame-full { padding-bottom: 80%; }
}

/* ─── Case Cards ─────────────────────────────────────── */
@media (max-width: 480px) {
  .case-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .case-card { padding: 1.5rem 1.25rem; }
  .case-stat { font-size: 2.2rem; }
  .case-stat-lbl { font-size: 0.75rem; }
  .case-insight { font-size: 0.82rem; }
}

/* ─── Stats Grid ─────────────────────────────────────── */
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .stat-num { font-size: clamp(2rem, 12vw, 3.5rem); }
  .stat-lbl { font-size: 0.8rem; }
}

/* ─── Compliance Matrix ──────────────────────────────── */
@media (max-width: 600px) {
  .comp-cert-banner { gap: 1rem; padding: 1rem 1.1rem; }
  .comp-cert-text strong { font-size: 0.78rem; }
  .comp-cert-text span   { font-size: 0.73rem; }
  .comp-row { padding: 1.1rem 1rem; gap: 0.9rem; }
  .comp-risk-name { font-size: 0.88rem; }
  .comp-ok-label span { font-size: 0.6rem; }
  .comp-row-status p { font-size: 0.78rem; }
}

/* ─── Signal Chips ────────────────────────────────────── */
@media (max-width: 540px) {
  .signal-chips-row { gap: 0.35rem; flex-wrap: wrap; }
  .sig-chip { font-size: 0.7rem; padding: 0.28rem 0.55rem; }
}

/* ─── Problem Insight Strip ──────────────────────────── */
@media (max-width: 640px) {
  .problem-insight-strip { flex-direction: column; gap: 1.25rem; padding: 1.5rem 1.25rem; }
  .pis-divider { width: 100%; height: 1px; min-height: unset; }
  .pis-item { flex-direction: row; align-items: flex-start; gap: 1rem; }
  .pis-icon { flex-shrink: 0; }
}

/* ─── Waste Diagram ──────────────────────────────────── */
@media (max-width: 640px) {
  .waste-diagram { flex-direction: column; gap: 1.5rem; }
  .waste-divider { transform: rotate(90deg); align-self: center; }
  .waste-col { width: 100%; }
}

/* ─── Quote Block ─────────────────────────────────────── */
@media (max-width: 480px) {
  .quote-block-xl p { font-size: 1.1rem !important; line-height: 1.6; }
  .qb-marks svg { width: 32px; height: 24px; }
}

/* ─── SPORE Def Block ─────────────────────────────────── */
@media (max-width: 540px) {
  .sdb-not-row { flex-direction: column; gap: 1rem; }
  .sdb-not-sep { display: none; }
  .sdb-desc { font-size: 0.85rem; }
}

/* ─── Author Section ──────────────────────────────────── */
@media (max-width: 480px) {
  .author-bio      { font-size: 0.85rem; line-height: 1.65; }
  .author-bio-text { font-size: 0.85rem; }
  .author-credentials { gap: 0.5rem; }
  .author-cred { font-size: 0.75rem; padding: 0.28rem 0.6rem; }
}

/* ─── CTA Layers Grid ─────────────────────────────────── */
@media (max-width: 540px) {
  .cta-layers-grid { grid-template-columns: 1fr; }
}

/* ─── Loop Diagram ────────────────────────────────────── */
@media (max-width: 400px) {
  .loop-circle { height: 260px !important; }
}

/* ─── Principles Legend ───────────────────────────────── */
@media (max-width: 640px) {
  .principles-legend { grid-template-columns: 1fr 1fr; }
}

/* ─── Volume Proof Block ─────────────────────────────── */
@media (max-width: 540px) {
  .vpb-stat-row { flex-wrap: wrap; gap: 1rem; }
  .vpb-stat { flex: 0 0 40%; }
}

/* ─── Section Spacing ─────────────────────────────────── */
@media (max-width: 480px) {
  section { padding-top: 3rem; padding-bottom: 3rem; }
  .mt-3 { margin-top: 2rem !important; }
  .mt-2 { margin-top: 1.25rem !important; }
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ─── Section Labels ──────────────────────────────────── */
@media (max-width: 480px) {
  .section-label { font-size: 0.68rem; letter-spacing: 0.14em; }
  h2 { font-size: clamp(1.55rem, 6.5vw, 2.8rem) !important; }
}

/* ─── Very Small Screens ─────────────────────────────── */
@media (max-width: 360px) {
  html { font-size: 14px; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  .btn { font-size: 0.8rem; padding: 0.7rem 1.2rem; }
  .hero-ctas .btn { padding: 0.75rem 1rem; font-size: 0.82rem; }
}

/* ─── Horizontal Scroll Prevention ───────────────────── */
@media (max-width: 768px) {
  .loop-anim-frame-full iframe,
  .arch-anim-frame-full iframe,
  .hero-anim-frame iframe {
    min-width: unset;
  }
  body { overflow-x: hidden; }
}

/* =================================================
   MOBILE — HERO NAVBAR OVERLAP FIX
   .hero-full-anim has padding: 0 !important which
   removes the base .hero padding-top: 80px.
   On mobile the fixed navbar (~60px) sits over the
   top of the animation. Fix: add margin-top.
   ================================================= */
@media (max-width: 960px) {
  .hero-full-anim {
    margin-top: 64px;
  }
}
@media (max-width: 480px) {
  .hero-full-anim {
    margin-top: 60px;
  }
}

/* =================================================
   MOBILE — LOOP NODES OVERFLOW FIX
   .loop-pos-right / .loop-pos-left use right:-2%
   left:-2% which overflows small screens.
   ================================================= */
@media (max-width: 600px) {
  .loop-pos-right { right: 0; }
  .loop-pos-left  { left: 0; }
}
@media (max-width: 420px) {
  /* At very small screens, stack nodes in a list */
  .loop-circle-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .loop-node-pos {
    position: static !important;
    transform: none !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
  }
}

/* =================================================
   O PROBLEMA — ANIMATION FRAME (full width)
   ================================================= */
.prob-full-section { padding-top: 0; }
.prob-anim-frame-full {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #030306;
  margin-bottom: 3.5rem;
}
.prob-anim-frame-full iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY / SEO — Visually Hidden Elements
   ───────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =================================================================
   ANIMATION FRAMES — RESPONSIVE 16:9 FIX
   Replace padding-bottom hack with aspect-ratio to guarantee the
   wrapper always matches the internal #V (height: 56.25vw = 16:9).
   Eliminates all wrapper/animation mismatch and mobile cropping.
   ================================================================= */

/* Apply aspect-ratio 16:9 to every animation wrapper */
.hero-anim-frame,
.hero-full-anim .hero-anim-frame,
.loop-anim-frame,
.loop-anim-frame-full,
.arch-anim-frame-full,
.prob-anim-frame-full {
  aspect-ratio: 16 / 9;
  padding-bottom: 0 !important;
  height: auto !important;
}

/* Cancel ALL mobile overrides that deviate from 16:9 */
@media (max-width: 768px) {
  .loop-anim-frame-full,
  .arch-anim-frame-full { padding-bottom: 0 !important; }
}
@media (max-width: 540px) {
  .loop-anim-frame-full,
  .arch-anim-frame-full,
  .prob-anim-frame-full { padding-bottom: 0 !important; }
}
@media (max-width: 400px) {
  .loop-anim-frame-full,
  .arch-anim-frame-full { padding-bottom: 0 !important; }
}

/* ═══════════════════════════════════════════════════
   ARQUIVO VIVO — SCENARIO CARDS
   ═══════════════════════════════════════════════════ */
.av-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.av-scenario {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.av-scenario::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.av-sc--lime::before { background: linear-gradient(90deg, var(--lime), transparent); }
.av-sc--cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
.av-sc--pink::before { background: linear-gradient(90deg, var(--pink), transparent); }
.av-sc--lime:hover { border-color: rgba(205,255,0,0.22); box-shadow: 0 20px 60px rgba(205,255,0,0.07); transform: translateY(-4px); }
.av-sc--cyan:hover { border-color: rgba(0,229,255,0.22); box-shadow: 0 20px 60px rgba(0,229,255,0.07); transform: translateY(-4px); }
.av-sc--pink:hover { border-color: rgba(255,45,135,0.22); box-shadow: 0 20px 60px rgba(255,45,135,0.07); transform: translateY(-4px); }

.av-sc-num-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.av-sc-num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.18;
}
.av-sc--lime .av-sc-num { color: var(--lime); }
.av-sc--cyan .av-sc-num { color: var(--cyan); }
.av-sc--pink .av-sc-num { color: var(--pink); }
.av-sc-speed {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.av-sc--lime .av-sc-speed { background: rgba(205,255,0,0.12); color: var(--lime); }
.av-sc--cyan .av-sc-speed { background: rgba(0,229,255,0.12); color: var(--cyan); }
.av-sc--pink .av-sc-speed { background: rgba(255,45,135,0.12); color: var(--pink); }

.av-sc-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  line-height: 1.3;
}
.av-scenario.av-sc--lime .av-sc-title { color: rgba(205,255,0,0.92); }
.av-scenario.av-sc--cyan .av-sc-title { color: rgba(0,229,255,0.92); }
.av-scenario.av-sc--pink .av-sc-title { color: rgba(255,100,170,0.92); }

.av-sc-scenario-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.av-sc-stag {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.28);
  margin-bottom: 0.45rem;
}
.av-sc-scenario-box p {
  font-size: 0.865rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  margin: 0;
}

.av-sc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.av-sc-list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}
.av-sc-list li::before {
  content: '→';
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 0.05em;
  opacity: 0.9;
}
.av-sc--lime .av-sc-list li::before { color: var(--lime); }
.av-sc--cyan .av-sc-list li::before { color: var(--cyan); }
.av-sc--pink .av-sc-list li::before { color: var(--pink); }

@media (max-width: 900px) {
  .av-scenarios { grid-template-columns: 1fr; gap: 1.25rem; }
  .av-scenario { padding: 1.6rem 1.4rem; }
  .av-sc-num { font-size: 2.25rem; }
}