/* ═══════════════════════════════════════════
   WEUNY — Static CSS
   ═══════════════════════════════════════════ */

/* ── Reset & Tokens ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --deep: #00141C;
  --deep-mid: #002939;
  --blue: #00B7FF;
  --cyan: #00E5FF;
  --teal: #00FFCE;
  --bg: #f7f9fc;
  --card: #fff;
  --border: #e2e8f0;
  --fg: #0a1128;
  --fg-muted: #3d5175;
  --radius: 0.75rem;
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --gradient-primary: linear-gradient(135deg, var(--blue), var(--teal));
  --gradient-secondary: linear-gradient(135deg, var(--blue), var(--teal));
  --gradient-hero: radial-gradient(at 0% 0%, #002939 0px, transparent 50%),
    radial-gradient(at 100% 0%, #00141C 0px, transparent 50%),
    radial-gradient(at 100% 100%, #002939 0px, transparent 50%),
    radial-gradient(at 0% 100%, #000000 0px, transparent 50%),
    radial-gradient(at 50% 50%, #00141C 0px, transparent 50%),
    #000000;
  --shadow-soft: 0 8px 30px rgba(10, 17, 40, .06);
  --shadow-hover: 0 16px 40px rgba(10, 17, 40, .12);
  --glow-blue: 0 0 60px rgba(0, 183, 255, .25);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  letter-spacing: -.02em;
  line-height: 1.1
}

a {
  color: inherit;
  text-decoration: none
}

ul {
  list-style: none
}

img {
  max-width: 100%;
  display: block
}

/* ── Utilities ── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin: 0;
  padding: 0
}

@media(min-width:1024px) {
  .hero-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem
  }
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 100%;
  text-align: left;
  margin-left: 0 !important;
  padding-left: 0 !important
}

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.text-white {
  color: #fff !important
}

.text-white-70 {
  color: rgba(255, 255, 255, .7) !important
}

.text-white-60 {
  color: rgba(255, 255, 255, .6) !important
}

.text-teal {
  color: var(--teal)
}

.bg-card {
  background: var(--card)
}

.bg-muted {
  background: var(--bg)
}

.bg-hero {
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden
}

#resultados.bg-hero,
#demonstracao.bg-hero {
  background:
    radial-gradient(circle at 14% 12%, rgba(0, 96, 182, .24), transparent 46%),
    radial-gradient(circle at 84% 86%, rgba(0, 181, 168, .18), transparent 44%),
    linear-gradient(125deg, #001321 0%, #001a2a 54%, #002332 100%);
}

#resultados.bg-hero::after,
#demonstracao.bg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 20, 28, .06) 0%, rgba(0, 20, 28, .22) 100%);
  pointer-events: none;
}

.glass {
  backdrop-filter: blur(24px);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .2)
}

.glass-dark {
  backdrop-filter: blur(24px);
  background: rgba(15, 23, 42, .8);
  border: 1px solid rgba(255, 255, 255, .08)
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 2rem;
  font-size: .875rem;
  font-weight: 700;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all .3s
}

.btn-primary {
  background: var(--gradient-secondary);
  color: #00141C;
  box-shadow: var(--glow-blue)
}

.btn-primary:hover {
  transform: translateY(-2px)
}

.btn-glass {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px)
}

/* ── Grid ── */
.grid {
  display: grid;
  gap: 1.25rem
}

.grid-2 {
  grid-template-columns: 1fr
}

.grid-3 {
  grid-template-columns: 1fr
}

.grid-4 {
  grid-template-columns: 1fr
}

@media(min-width:640px) {

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width:1024px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr)
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr)
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr)
  }
}

.align-center {
  align-items: center
}

/* ── Section ── */
.section {
  padding: 6rem 0
}

@media(min-width:1024px) {
  .section {
    padding: 8rem 0
  }
}

.section-header {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto 4rem
}

.section-header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  margin-bottom: 1rem
}

.section-header p {
  color: var(--fg-muted);
  font-size: 1.125rem;
  text-wrap: balance;
}

@media(min-width:1024px) {
  #base-unica .section-header {
    max-width: 72rem;
  }

  #base-unica .platform-title-single-line {
    white-space: nowrap;
  }
}

/* ── Header ── */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(18px);
  background: rgba(0, 20, 28, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1)
}

#site-header.scrolled {
  backdrop-filter: blur(18px);
  background: rgba(0, 20, 28, .94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22)
}

#site-header.scrolled .logo-text {
  color: #fff
}

#site-header.scrolled .desktop-nav a {
  color: rgba(255, 255, 255, .82)
}

#site-header.scrolled .desktop-nav a:hover {
  color: #fff
}

#site-header.scrolled .mobile-toggle span {
  background: #fff
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  height: 5.2rem;
  transition: height .3s
}

#site-header.scrolled .header-inner {
  height: 5.2rem
}

.logo {
  display: flex;
  align-items: center;
  transition: transform .3s;
  min-width: 140px
}

.logo:hover {
  transform: scale(1.02)
}

.logo-image {
  height: 1.75rem;
  width: auto;
  display: block
}

#site-header.scrolled .logo-image {
  height: 1.75rem
}

.desktop-nav {
  display: none;
  gap: 1.35rem
}

.desktop-nav a {
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  transition: color .3s;
  position: relative
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: 9999px;
  transition: width .3s
}

.desktop-nav a:hover {
  color: #fff
}

.desktop-nav a:hover::after {
  width: 100%
}

.header-cta {
  display: none;
  padding: .625rem 1.5rem
}

@media(min-width:768px) {

  .desktop-nav,
  .header-cta {
    display: flex
  }

  .mobile-toggle {
    display: none
  }
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  background: transparent;
  border: none;
  cursor: pointer
}

@media(max-width:767.98px) {
  .mobile-toggle {
    display: flex;
  }
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: all .3s
}

.mobile-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.mobile-toggle.active span:nth-child(2) {
  opacity: 0
}

.mobile-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

.mobile-menu {
  display: none;
  padding: 1rem 2rem 1.5rem;
  backdrop-filter: blur(24px);
  background: rgba(0, 20, 28, .98)
}

.mobile-menu.open {
  display: block
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.mobile-menu a {
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .84);
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

@media(min-width:768px) {
  .mobile-menu {
    display: none !important
  }
}

/* ── Hero ── */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  background: var(--gradient-hero);
  overflow: hidden
}

.hero-orb {
  position: absolute;
  border-radius: 50%
}

.hero-orb--1 {
  width: 600px;
  height: 600px;
  top: -25%;
  left: -25%;
  background: radial-gradient(circle, rgba(47, 91, 255, .3), transparent 70%);
  animation: pulse-orb 8s ease-in-out infinite
}

.hero-orb--2 {
  width: 700px;
  height: 700px;
  bottom: -25%;
  right: -25%;
  background: radial-gradient(circle, rgba(31, 224, 193, .2), transparent 70%);
  animation: pulse-orb 10s ease-in-out infinite reverse
}

@keyframes pulse-orb {

  0%,
  100% {
    transform: scale(1);
    opacity: .2
  }

  50% {
    transform: scale(1.2);
    opacity: .35
  }
}

.hero-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none
}

@media(min-width:1024px) {
  .hero-nodes {
    display: block
  }
}

.floating-node {
  position: absolute;
  backdrop-filter: blur(24px);
  background: rgba(15, 23, 42, .8);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: .5rem 1rem;
  border-radius: .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  animation: float 6s ease-in-out infinite
}

.floating-node:nth-child(2) {
  animation-delay: .3s
}

.floating-node:nth-child(3) {
  animation-delay: .6s
}

.floating-node:nth-child(4) {
  animation-delay: .9s
}

.floating-node:nth-child(5) {
  animation-delay: 1.2s
}

.floating-node:nth-child(6) {
  animation-delay: .5s
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

.hero-w-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  box-shadow: var(--glow-blue);
  animation: pulse-glow 3s ease-in-out infinite
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: .6
  }

  50% {
    opacity: 1
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center
}

@media(min-width:1024px) {
  .hero-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem
  }
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 100%;
  text-align: left
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(0, 183, 255, 0.8);
  margin-bottom: 0.75rem;
  width: 100%
}

.hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 1.5rem 0;
  padding: 0;
  text-align: left
}

.hero-sub {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .7);
  max-width: 35rem;
  margin: 0 0 2.5rem 0;
  padding: 0;
  line-height: 1.6;
  text-align: left
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
  margin: 0;
  padding: 0
}

/* ── Orbit Illustration ── */
.hero-visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center
}

.hero-main-element {
  position: relative;
  z-index: 5;
  width: 280px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0
}

.main-core {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none
}

.orbiting-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .94;
}

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0px), var(--start-y, 0px)) rotate(var(--start-r, 0deg));
  transition: transform var(--settle-duration, 1.5s) cubic-bezier(.2, .82, .22, 1) var(--settle-delay, 0s), opacity .7s ease var(--settle-delay, 0s);
  opacity: .78;
}

.node-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .46rem;
  min-width: 128px;
  padding: .6rem 1.05rem;
  background: linear-gradient(135deg, rgba(8, 24, 39, .9), rgba(8, 33, 49, .82));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(75, 132, 167, .44);
  border-radius: .95rem;
  font-size: .84rem;
  font-weight: 700;
  color: rgba(215, 236, 248, .95);
  box-shadow: 0 10px 22px rgba(5, 26, 49, .36), inset 0 0 0 1px rgba(2, 197, 244, .06);
  text-shadow: 0 0 12px rgba(0, 220, 255, .14);
  animation: hero-node-chaos 2.8s ease-in-out infinite;
}

.node-icon {
  width: .9rem;
  height: .9rem;
  stroke: #18dcff;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(13, 220, 255, .24));
  flex: 0 0 auto;
}

.badge-mini {
  width: 3rem;
  height: 3rem;
  background: var(--gradient-primary);
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  box-shadow: var(--glow-blue)
}

.hero-visual.is-organized .orbit-item {
  transform: translate(-50%, -50%) translate(var(--final-x, 0px), var(--final-y, 0px)) rotate(0deg);
  opacity: 1;
}

.hero-visual.is-organized .node-box {
  animation: hero-node-breathe 4.3s ease-in-out infinite;
  border-color: rgba(95, 160, 198, .58);
  box-shadow: 0 14px 24px rgba(4, 22, 43, .45), inset 0 0 0 1px rgba(22, 217, 255, .08);
}

.orbit-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .12;
  transform: scale(.88);
  transition: opacity 1.3s ease, transform 1.5s cubic-bezier(.19, .82, .22, 1);
}

.hero-link-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .06;
  transform: scale(.86);
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.19, .82, .22, 1);
}

.hero-link-lines .hero-link line {
  stroke: rgba(113, 172, 210, .55);
  stroke-width: 1.1;
  stroke-dasharray: 5 8;
  animation: hero-link-dash 15s linear infinite;
}

.hero-link-lines .link-dot {
  fill: rgba(27, 215, 255, .68);
}

.hero-link-lines .link-core-dot {
  fill: rgba(24, 224, 255, .85);
  animation: hero-link-core 2.6s ease-in-out infinite;
}

.hero-visual.is-organized .hero-link-lines {
  opacity: .34;
  transform: scale(1);
}

.hero-visual.is-organized .orbit-rings {
  opacity: .34;
  transform: scale(1);
}

@keyframes hero-node-chaos {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }

  50% {
    transform: translateY(-8px) rotate(1.6deg);
  }
}

@keyframes hero-node-breathe {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes hero-link-dash {
  to {
    stroke-dashoffset: 170;
  }
}

@keyframes hero-link-core {
  0%,
  100% {
    opacity: .62;
  }

  50% {
    opacity: 1;
  }
}

@media(max-width:980px) {
  .node-box {
    min-width: 104px;
    font-size: .75rem;
    padding: .52rem .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-item {
    transition: none;
  }

  .node-box {
    animation: none !important;
  }

  .hero-link-lines .hero-link line,
  .hero-link-lines .link-core-dot {
    animation: none !important;
  }
}


/* ── Cards ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all .3s;
  position: relative;
  overflow: hidden
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px)
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(47, 91, 255, .04), rgba(31, 224, 193, .04));
  opacity: 0;
  transition: opacity .5s
}

.card:hover::before {
  opacity: 1
}

.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: var(--gradient-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative
}

.card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: .5rem;
  position: relative
}

.card p {
  font-size: .875rem;
  color: var(--fg-muted);
  line-height: 1.6;
  position: relative
}

/* Benefit */
.card-benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start
}

.benefit-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 0 30px rgba(47, 91, 255, .15)
}

/* Feature */
.card-feature {
  padding: 1.25rem
}

.feature-tag {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
  margin-bottom: .75rem
}

/* Testimonial */
.card-testimonial {
  padding: 1.75rem
}

.stars {
  color: var(--teal);
  font-size: .875rem;
  letter-spacing: 2px;
  margin-bottom: 1rem
}

.quote {
  line-height: 1.7;
  margin-bottom: 1.5rem
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: .75rem
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .875rem;
  font-weight: 700
}

.testimonial-author strong {
  font-size: .875rem
}

.testimonial-author small {
  font-size: .75rem;
  color: var(--fg-muted)
}

/* ── Fragmentation Visual (Mesh Grid) ── */
.frag-visual {
  position: relative;
  height: 22rem; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.mesh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3rem;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 500px;
}

.frag-node {
  position: relative;
  backdrop-filter: blur(24px);
  background: rgba(15, 23, 42, .8);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .75rem;
  padding: .75rem 1rem;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 100px;
  transform: scale(var(--node-scale, 1));
}

.frag-node:hover {
  transform: translateY(-8px) scale(calc(var(--node-scale, 1) * 1.1)) !important;
  border-color: var(--teal);
  box-shadow: 0 10px 40px rgba(0, 255, 206, 0.15);
  z-index: 10 !important;
}

.frag-label {
  display: block;
  font-size: .5rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .4);
  margin-bottom: .25rem
}

.frag-name {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .8)
}

.mesh-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.mesh-lines line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}

@media(max-width:480px) {
  .mesh-grid {
    gap: 1.5rem;
    scale: 0.8;
  }
  .frag-visual {
    height: 24rem;
  }
}

#fragmentacao.section {
  padding: 4rem 0;
}

/* Bullet list */
.bullet-list {
  margin-bottom: 1.5rem
}

.bullet-list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .7);
  margin-bottom: .5rem
}

.bullet-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0
}

/* ── Stats ── */
.stats-grid {
  max-width: 56rem;
  margin: 0 auto
}

.stat-card {
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .1);
  transition: all .3s
}

.stat-card:hover {
  transform: scale(1.03)
}

.stat-value {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 800;
  margin-bottom: .75rem
}

.stat-desc {
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.5
}

.stat-featured {
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: var(--glow-blue)
}

.stat-featured .stat-value {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff
}

.stat-featured .stat-desc {
  color: rgba(255, 255, 255, .8)
}

/* ── Platform Image ── */
.platform-img {
  position: relative;
  max-width: 64rem;
  margin: 0 auto
}

.platform-glow {
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  border-radius: 1.5rem;
  filter: blur(48px);
  opacity: .1;
  transform: scale(1.05);
  z-index: 0
}

.platform-frame {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hover)
}

.platform-placeholder {
  background: linear-gradient(135deg, #f0f4ff, #e8fdf8);
  padding: 6rem 2rem;
  text-align: center;
  color: var(--fg-muted)
}

.platform-placeholder .logo-mark {
  margin: 0 auto 1rem;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  display: flex
}

.platform-main-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
}

/* ── CTA Form ── */
.cta-form-wrap {
  max-width: 56rem;
  margin: 0 auto
}

.cta-form {
  border-radius: 1rem;
  padding: 2rem
}

@media(min-width:1024px) {
  .cta-form {
    padding: 2.5rem
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem
}

@media(min-width:640px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

.form-field label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  margin-bottom: .375rem
}

.form-field input,
.form-field select {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  font-family: var(--font-body);
  font-size: .875rem;
  outline: none;
  transition: border-color .3s
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--blue)
}

.form-field select option {
  background: var(--deep);
  color: #fff
}

.cta-success {
  border-radius: 1rem;
  padding: 3rem;
  text-align: center;
  color: #fff
}

.cta-success h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: .5rem 0
}

.cta-success p {
  color: rgba(255, 255, 255, .6)
}

/* ── Footer ── */
.site-footer {
  background: linear-gradient(180deg, #001a28 0%, var(--deep) 38%);
  color: rgba(255, 255, 255, .6);
  padding: 4rem 0
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem
}

@media(min-width:640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width:1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr
  }
}

.footer-grid h4 {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 1rem
}

.footer-grid ul {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.footer-grid a {
  font-size: .875rem;
  transition: color .3s
}

.footer-grid a:hover {
  color: #fff
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 1.5rem;
  text-align: center
}

.footer-bottom p {
  font-size: .75rem;
  color: rgba(255, 255, 255, .3)
}

/* ── Radial overlays ── */
.radial-accent {
  position: absolute;
  inset: 0;
  pointer-events: none
}

/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

/* ── Internal pages ── */
.internal-hero {
  position: relative;
  padding: 9rem 0 4rem;
  background: var(--gradient-hero);
  overflow: hidden
}

.internal-hero .section-header {
  margin-bottom: 0
}

.internal-hero .section-header p {
  color: rgba(255, 255, 255, .72)
}

.internal-hero .eyebrow {
  color: rgba(255, 255, 255, .62)
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
  margin-bottom: .75rem
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: 999px
}

.content-wrap {
  max-width: 62rem;
  margin: 0 auto
}

.content-wrap h2 {
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  margin: 0 0 .9rem
}

.content-wrap h3 {
  font-size: 1.15rem;
  margin: 0 0 .5rem
}

.content-wrap p {
  margin: 0 0 1rem;
  color: var(--fg-muted);
  line-height: 1.75
}

.content-wrap strong {
  color: var(--fg)
}

.content-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem
}

@media(min-width:1024px) {
  .content-block {
    padding: 2rem
  }
}

.content-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0 0 1rem;
  padding: 0
}

.content-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--fg-muted)
}

.content-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal)
}

.inline-note {
  font-size: .95rem;
  color: var(--fg);
  font-weight: 600
}

.internal-cta {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem
}

.site-footer .logo {
  margin-bottom: 1rem
}

/* ── Motion layer ── */
[data-parallax] {
  translate: 0 var(--parallax-offset, 0px);
  will-change: translate
}

.page-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  background: linear-gradient(155deg, var(--deep), #15264b 55%, #0f172a);
  transition: transform .38s cubic-bezier(.77, .11, .17, .98), opacity .2s ease;
}

body.page-enter main {
  animation: page-enter .55s cubic-bezier(.2, .8, .24, 1)
}

body.is-leaving .page-transition-layer {
  opacity: 1;
  transform: translateY(0)
}

@keyframes page-enter {
  0% {
    opacity: 0;
    transform: translateY(12px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-layer {
    display: none
  }

  body.page-enter main {
    animation: none
  }

  [data-parallax] {
    translate: 0 0
  }
}

/* ── Internal content system ── */
.internal-page {
  padding-top: 5rem
}

.content-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 3.5rem 2rem
}

.legal-doc {
  max-width: 860px
}

.h1 {
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  margin-bottom: 1rem
}

.h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 1rem
}

.h3 {
  font-size: 1.2rem;
  margin-bottom: .75rem
}

.body {
  font-size: 1.05rem;
  color: var(--fg-muted);
  line-height: 1.75
}

.small {
  font-size: .92rem;
  color: var(--fg-muted);
  line-height: 1.65
}

.legal-doc h2 {
  margin-top: 1.6rem
}

.legal-doc p {
  color: var(--fg-muted);
  line-height: 1.75;
  margin: 0 0 1rem;
}

.legal-doc .h1 {
  margin-bottom: 1.2rem;
}

.legal-doc .h3 {
  margin-top: 1.4rem;
}

.legal-doc ul {
  display: grid;
  gap: .55rem;
  margin: 0 0 1rem 0;
  padding-left: 1.1rem;
  list-style: disc
}

/* ── Produto page ── */
.produto-hero {
  padding-top: 8rem;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden
}

.produto-hero-shell {
  position: relative;
  z-index: 2
}

.produto-hero .eyebrow {
  color: rgba(255, 255, 255, .65)
}

.produto-hero .h1 {
  color: #fff;
  max-width: 18ch
}

.produto-hero .body {
  color: rgba(255, 255, 255, .75);
  max-width: 48ch;
  margin-bottom: 1.5rem
}

.what__diagram-shell {
  margin-top: 2rem
}

.what__diagram {
  position: relative;
  min-height: 420px;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(140deg, rgba(47, 91, 255, .18), rgba(15, 23, 42, .35));
  overflow: hidden
}

.what__diagram {
  transition: transform .28s ease, box-shadow .28s ease;
  transform-style: preserve-3d
}

.what__diagram:hover {
  box-shadow: 0 22px 52px rgba(10, 17, 40, .3)
}

.what__ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(36px);
  opacity: .45
}

.what__ambient--a {
  width: 220px;
  height: 220px;
  left: -4%;
  top: -8%;
  background: #2f5bff
}

.what__ambient--b {
  width: 190px;
  height: 190px;
  right: 8%;
  top: 12%;
  background: #1da1c7
}

.what__ambient--c {
  width: 180px;
  height: 180px;
  left: 28%;
  bottom: -8%;
  background: #1fe0c1
}

.what__ring {
  position: absolute;
  inset: 15% 18%;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 999px
}

.what__ring--two {
  inset: 24% 28%
}

.what__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: var(--gradient-primary);
  display: grid;
  place-items: center;
  box-shadow: var(--glow-blue)
}

.what__logo {
  font: 800 1.8rem var(--font-heading);
  color: #fff
}

.what__orbit {
  position: absolute;
  inset: 0
}

.what__node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotate(var(--angle)) translate(180px) rotate(calc(-1 * var(--angle)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .38rem
}

.what__node-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .65rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22)
}

.what__node-label {
  font-size: .8rem;
  color: #fff
}

.produto-intro-shell,
.features-editorial-shell,
.produto-scale-shell {
  max-width: 980px
}

.produto-intro .h2,
.produto-scale .h2 {
  max-width: 22ch
}

.produto-intro .body {
  margin-bottom: .65rem
}

.intro-nowrap {
  white-space: normal
}

.produto-intro-cta {
  margin-top: 1.25rem
}

.features-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin: 1.5rem 0
}

.feature-tab {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: #fff;
  color: var(--fg);
  font: 600 .9rem var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: .25s
}

.feature-tab.is-active,
.feature-tab:hover {
  border-color: #9db5ff;
  background: linear-gradient(135deg, rgba(47, 91, 255, .08), rgba(31, 224, 193, .06))
}

.feature-tab-icon {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: .4rem;
  background: var(--gradient-primary);
  opacity: .8
}

.feature-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.4rem
}

.feature-panel.panel-pop {
  animation: panel-pop .28s ease
}

.feature-eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
  margin-bottom: .5rem
}

.feature-subheadline {
  font-weight: 700;
  color: var(--fg);
  margin-bottom: .7rem
}

.feature-storyline {
  display: grid;
  gap: .7rem;
  margin-bottom: .8rem
}

.feature-impact {
  font-weight: 700;
  margin-bottom: .9rem
}

.feature-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem
}

.feature-benefit-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: .7rem;
  padding: .7rem .8rem
}

/* ── OCC page ── */
.occ-page {
  padding-top: 5rem;
  background: var(--bg)
}

.occ-progress {
  position: fixed;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: .45rem;
  z-index: 60
}

@media(min-width:1200px) {
  .occ-progress {
    display: flex
  }
}

.occ-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #cbd5e1
}

.occ-dot.is-active {
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(47, 91, 255, .14)
}

.occ-section {
  padding: 5.5rem 0
}

.occ-hero,
.occ-dark {
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden
}

.occ-light {
  background: var(--bg)
}

.occ-final {
  background: linear-gradient(135deg, #f4f8ff, #ecfffb)
}

.occ-hero .h1,
.occ-dark .h2,
.occ-dark .h3 {
  color: #fff
}

.occ-hero .body,
.occ-dark .body,
.occ-dark .small {
  color: rgba(255, 255, 255, .76)
}

.occ-hero-copy {
  max-width: 920px
}

.occ-lead {
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: .8rem
}

.occ-hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem
}

.occ-hero-strip span {
  padding: .4rem .65rem;
  border-radius: .6rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .78rem;
  color: #fff
}

.occ-copy-shell {
  max-width: 980px;
  margin: 0 auto
}

.occ-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem
}

@media(min-width:980px) {
  .occ-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem
  }
}

.occ-kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin: 1rem 0
}

@media(min-width:768px) {
  .occ-kpi-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

.occ-kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 1rem
}

.occ-kpi-value {
  font: 800 2rem var(--font-heading);
  color: var(--fg);
  margin-bottom: .35rem
}

.occ-problem-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem
}

.occ-problem-card {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  border-radius: .9rem;
  padding: 1rem
}

.occ-problem-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .4rem
}

.occ-problem-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: .45rem;
  background: rgba(255, 255, 255, .16);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .75rem
}

.occ-horizontal-intro,
.occ-horizontal-stage {
  max-width: 1100px;
  margin: 0 auto
}

.occ-tool-icons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem
}

.occ-tool-icons span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .55rem;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: .55rem;
  font-size: .78rem;
  color: var(--fg-muted)
}

.occ-tool-icons svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5
}

.occ-horizontal-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin-top: 1rem
}

@media(min-width:900px) {
  .occ-horizontal-track {
    grid-template-columns: repeat(4, 1fr)
  }
}

.occ-stage-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 1rem
}

.occ-stage-card.is-active {
  border-color: #94a8ff;
  box-shadow: 0 10px 28px rgba(47, 91, 255, .12)
}

.occ-stage-icon {
  display: inline-flex;
  padding: .2rem .45rem;
  border-radius: 999px;
  background: var(--bg);
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: .4rem
}

.occ-ai-visual {
  position: relative;
  min-height: 360px;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden
}

.occ-ai-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.occ-ai-links line {
  stroke: #cbd5e1;
  stroke-width: 1.1
}

.occ-ai-orbit,
.occ-ai-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: .45rem .7rem;
  border-radius: .65rem;
  border: 1px solid var(--border);
  background: #fff;
  font-size: .82rem
}

.occ-ai-center {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  font-weight: 700
}

.orbit-top {
  top: 14%
}

.orbit-right {
  left: 84%
}

.orbit-bottom {
  top: 86%
}

.orbit-left {
  left: 16%
}

.occ-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin: 1rem 0
}

@media(min-width:860px) {
  .occ-compare-grid {
    grid-template-columns: 1fr 1fr
  }
}

.occ-compare-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .9rem;
  padding: 1rem
}

.occ-compare-card ul {
  list-style: disc;
  padding-left: 1.05rem;
  display: grid;
  gap: .35rem
}

.occ-compare-card li {
  color: rgba(255, 255, 255, .82)
}

.occ-compare-card-accent {
  background: rgba(31, 224, 193, .14);
  border-color: rgba(31, 224, 193, .3)
}

.occ-final-shell {
  max-width: 980px;
  margin: 0 auto
}

.occ-claim {
  font: 700 1.2rem var(--font-heading);
  margin: .9rem 0 1rem
}

.occ-final-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem
}

.btn-secondary {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--fg)
}

@media(min-width:900px) {
  .features-topics {
    grid-template-columns: repeat(2, 1fr)
  }

  .feature-benefits-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@keyframes panel-pop {
  0% {
    opacity: .55;
    transform: translateY(8px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.hero .container {
  max-width: 100%;
  text-align: left;
  justify-content: start;
  align-items: start;
  padding: 8rem 2rem 5rem;
  width: 1280px;
}

@media(max-width:1000px) {
  .hero .container {
    width: 100%;
    padding: 5rem 2rem !important;
  }
}

/* ── Recursos page experience ── */
.page-recursos {
  background: #f3f7fb;
}

.page-recursos .desktop-nav a {
  color: rgba(255, 255, 255, .84);
}

.page-recursos .mobile-toggle span {
  background: rgba(255, 255, 255, .84);
}

.rec-hero {
  min-height: 100vh;
  height: auto;
  padding-top: 6.5rem;
}

.rec-hero-grid {
  align-items: center;
}

.rec-hero-copy {
  animation: hero-enter .75s ease both;
}

.rec-hero-system {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  animation: hero-enter .9s ease both;
}

.hero-system-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-system-lines line {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  animation: dash 18s linear infinite;
}

.hero-system-center,
.hero-system-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(13, 26, 38, .88);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  backdrop-filter: blur(12px);
}

.hero-system-center {
  padding: .9rem 1.4rem;
  background: linear-gradient(135deg, rgba(0, 183, 255, .95), rgba(0, 255, 206, .85));
  color: #032533;
  border: none;
  box-shadow: 0 12px 36px rgba(0, 183, 255, .24);
}

.hero-system-node {
  padding: .5rem .8rem;
}

.hero-system-node.n1 {
  left: 18%;
  top: 24%;
}

.hero-system-node.n2 {
  left: 30%;
  top: 74%;
}

.hero-system-node.n3 {
  left: 80%;
  top: 21%;
}

.hero-system-node.n4 {
  left: 83%;
  top: 66%;
}

.hero-system-node.n5 {
  left: 51%;
  top: 12%;
}

.rec-map-section .section-header {
  margin-bottom: 2.2rem;
}

.system-map {
  position: relative;
  min-height: 680px;
  border-radius: 1.35rem;
  padding: 1rem;
  background:
    radial-gradient(circle at 16% 20%, rgba(0, 183, 255, .08), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(0, 255, 206, .08), transparent 32%),
    #ffffff;
  border: 1px solid #dbe6f3;
  box-shadow: 0 14px 40px rgba(6, 23, 42, .08);
}

.system-map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.system-map-lines line {
  stroke: rgba(61, 81, 117, .26);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
}

.system-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 214px;
  text-align: center;
  font: 700 .95rem var(--font-heading);
  color: #07293a;
  padding: 1.1rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(130deg, rgba(0, 183, 255, .21), rgba(0, 255, 206, .17));
  border: 1px solid rgba(0, 183, 255, .35);
  box-shadow: 0 12px 26px rgba(0, 183, 255, .18);
}

.module-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  border: 1px solid #cfe0f3;
  background: #fff;
  border-radius: .8rem;
  padding: .58rem .78rem;
  font: 600 .79rem var(--font-body);
  color: #17314e;
  cursor: pointer;
  max-width: 220px;
  text-align: left;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.module-node:hover,
.module-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.04);
  border-color: #7bbbf9;
  box-shadow: 0 14px 28px rgba(0, 99, 155, .16);
  outline: none;
}

.module-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 14, 24, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .36s ease;
  z-index: 300;
}

.module-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.module-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(460px, 92vw);
  background: #fff;
  padding: 2.2rem 1.6rem 1.4rem;
  border-left: 1px solid #d7e5f3;
  transform: translateX(102%);
  transition: transform .36s ease;
  overflow-y: auto;
}

.module-overlay.is-open .module-drawer {
  transform: translateX(0);
}

.drawer-close {
  position: absolute;
  right: .85rem;
  top: .75rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid #d3dfec;
  background: #f7fbff;
  cursor: pointer;
}

.drawer-kicker {
  font-size: .75rem;
  text-transform: uppercase;
  color: #1f6392;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: .6rem;
}

.module-drawer h3 {
  font-size: 1.35rem;
  margin-bottom: .65rem;
}

.drawer-headline {
  color: #0f3758;
  font-weight: 700;
  margin-bottom: .55rem;
}

.drawer-body {
  color: #506582;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.drawer-effects {
  display: grid;
  gap: .55rem;
  list-style: none;
}

.drawer-effects li {
  border: 1px solid #deebf8;
  border-radius: .7rem;
  background: #f7fbff;
  color: #24445f;
  font-size: .85rem;
  padding: .58rem .72rem;
}

.nao-funcionalidades {
  position: relative;
}

.nf-visual {
  position: relative;
  min-height: 300px;
  margin-top: 1.1rem;
}

.nf-core,
.nf-piece {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.nf-core {
  padding: .95rem 1.35rem;
  color: #042436;
  background: linear-gradient(135deg, rgba(0, 183, 255, .95), rgba(0, 255, 206, .85));
  font: 700 .9rem var(--font-heading);
}

.nf-piece {
  padding: .48rem .8rem;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #d5f3ff;
  background: rgba(255, 255, 255, .08);
  transition: transform .65s cubic-bezier(.2, .8, .2, 1), opacity .65s ease;
}

.nf-piece.p1 { transform: translate(-280%, -90%); }
.nf-piece.p2 { transform: translate(-190%, 115%); }
.nf-piece.p3 { transform: translate(-50%, -230%); }
.nf-piece.p4 { transform: translate(95%, 110%); }
.nf-piece.p5 { transform: translate(165%, -70%); }

.nf-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: left center;
  height: 2px;
  background: rgba(0, 229, 255, .8);
  width: 0;
  transition: width .65s ease;
}

.nf-link.l1 { transform: translate(-50%, -50%) rotate(-160deg); }
.nf-link.l2 { transform: translate(-50%, -50%) rotate(-120deg); }
.nf-link.l3 { transform: translate(-50%, -50%) rotate(-90deg); }
.nf-link.l4 { transform: translate(-50%, -50%) rotate(60deg); }
.nf-link.l5 { transform: translate(-50%, -50%) rotate(15deg); }

.nf-visual.is-connected .nf-piece.p1 { transform: translate(-130%, -56%); }
.nf-visual.is-connected .nf-piece.p2 { transform: translate(-110%, 86%); }
.nf-visual.is-connected .nf-piece.p3 { transform: translate(-50%, -150%); }
.nf-visual.is-connected .nf-piece.p4 { transform: translate(36%, 92%); }
.nf-visual.is-connected .nf-piece.p5 { transform: translate(56%, -57%); }
.nf-visual.is-connected .nf-link { width: 112px; }

.connection-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem;
}

.flow-step {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid #d4e3f2;
  background: #fff;
  border-radius: .8rem;
  padding: .82rem 1rem;
  font-weight: 700;
  color: #17314e;
  transform: translateY(18px);
  opacity: 0;
  transition: transform .55s ease, opacity .55s ease;
}

.flow-step.visible {
  transform: translateY(0);
  opacity: 1;
}

.flow-arrow {
  color: #6d84a2;
  font-weight: 700;
}

.flow-icon {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: .35rem;
  border: 1px solid #c2d8ef;
  background: #eef6ff;
}

.flow-icon.icon-processos { background: linear-gradient(145deg, #e5f2ff, #d6ebff); }
.flow-icon.icon-documentos { background: linear-gradient(145deg, #e6fbff, #d6f7ff); }
.flow-icon.icon-conhecimento { background: linear-gradient(145deg, #f0f7ff, #dcecff); }
.flow-icon.icon-ia { background: linear-gradient(145deg, #e1fbf8, #c9f5ee); }
.flow-icon.icon-pessoas { background: linear-gradient(145deg, #eef4ff, #dbe7ff); }

.feature-modules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media(min-width:768px) {
  .feature-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width:1100px) {
  .feature-modules-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-module-card {
  text-align: left;
  border: 1px solid #d6e4f3;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.feature-module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(6, 23, 42, .09);
}

.feature-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  background: #eaf5ff;
  color: #0e4b74;
  font-size: .77rem;
  font-weight: 800;
  margin-bottom: .65rem;
}

.feature-module-card h3 {
  margin-bottom: .45rem;
}

.feature-module-card p {
  color: #21405f;
  font-weight: 600;
  margin-bottom: .32rem;
}

.feature-module-card small {
  color: #5b7290;
}

.ia-split {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}

@media(min-width:992px) {
  .ia-split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.chat-simulation {
  border: 1px solid #d6e5f4;
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
  display: grid;
  gap: .6rem;
}

.chat-msg {
  max-width: 88%;
  border-radius: .75rem;
  padding: .62rem .75rem;
  font-size: .87rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}

.chat-msg.from-user {
  margin-left: auto;
  background: #eaf6ff;
  color: #0f3655;
}

.chat-msg.from-ai {
  margin-right: auto;
  background: #f3f8fc;
  color: #284865;
}

.chat-msg.visible {
  opacity: 1;
  transform: translateY(0);
}

.analytics-box {
  border: 1px solid #d6e5f4;
  border-radius: 1rem;
  background: #fff;
  padding: 1.2rem;
}

.analytics-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: .8rem;
  min-height: 230px;
}

.bar {
  position: relative;
  border-radius: .65rem .65rem .35rem .35rem;
  background: linear-gradient(180deg, rgba(0, 183, 255, .88), rgba(0, 255, 206, .78));
  height: var(--h);
  box-shadow: 0 10px 20px rgba(0, 183, 255, .2);
}

.bar span {
  position: absolute;
  left: 50%;
  bottom: -1.45rem;
  transform: translateX(-50%);
  font-size: .72rem;
  color: #516a86;
  white-space: nowrap;
}

.rec-final-cta .section-header {
  margin-bottom: 0;
}

.rec-final-cta .btn {
  margin-top: 1.1rem;
}

@media(max-width:980px) {
  .system-map {
    min-height: auto;
    padding: 1rem;
    display: grid;
    gap: .65rem;
    grid-template-columns: 1fr;
  }

  .system-map-lines {
    display: none;
  }

  .system-core {
    position: static;
    transform: none;
    margin-bottom: .4rem;
  }

  .module-node {
    position: static;
    transform: none;
    max-width: none;
    width: 100%;
  }

  .module-node:hover,
  .module-node:focus-visible {
    transform: scale(1.01);
  }

  .nf-link {
    display: none;
  }

  .nf-piece {
    position: static;
    transform: none !important;
    display: inline-flex;
    margin: .2rem;
  }

  .nf-core {
    position: static;
    transform: none;
    display: inline-flex;
    margin: .2rem;
  }

  .nf-visual {
    min-height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media(max-width:760px) {
  .module-drawer {
    width: 100%;
    border-left: 0;
    border-top: 1px solid #d7e5f3;
  }

  .module-overlay {
    background: rgba(2, 14, 24, .58);
  }

  .analytics-bars {
    gap: .45rem;
    min-height: 200px;
  }

  .flow-arrow {
    display: none;
  }
}

@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 240;
  }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Recursos em camadas ── */
.page-recursos-layers {
  background: #f4f8fc;
}

.page-recursos-layers .desktop-nav a {
  color: rgba(255, 255, 255, .84);
}

.page-recursos-layers .mobile-toggle span {
  background: rgba(255, 255, 255, .84);
}

.layers-hero {
  min-height: 100vh;
  height: auto;
  padding-top: 6.5rem;
}

.layers-hero-grid {
  align-items: center;
}

.layers-hero-visual {
  position: relative;
  width: min(500px, 100%);
  min-height: 420px;
  margin-inline: auto;
}

.stack-card,
.stack-core {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  text-align: center;
  padding: .7rem 1rem;
  border-radius: .85rem;
  font: 700 .84rem var(--font-heading);
  transition: transform .35s ease;
}

.stack-card {
  border: 1px solid rgba(255, 255, 255, .2);
  color: #d9f3ff;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
}

.stack-core {
  top: 79%;
  border: none;
  color: #032a3b;
  background: linear-gradient(135deg, rgba(0, 183, 255, .95), rgba(0, 255, 206, .85));
  box-shadow: 0 12px 32px rgba(0, 183, 255, .25);
}

.stack-card.s1 { top: 8%; width: 64%; }
.stack-card.s2 { top: 20%; width: 70%; }
.stack-card.s3 { top: 32%; width: 76%; }
.stack-card.s4 { top: 44%; width: 82%; }
.stack-card.s5 { top: 56%; width: 88%; }

.stack-card:hover {
  transform: translateX(-50%) translateY(-4px);
}

.layers-intro .section-header {
  margin-bottom: 2rem;
}

.intro-assembly {
  position: relative;
  min-height: 270px;
  border: 1px solid #d9e7f6;
  border-radius: 1rem;
  background: #fff;
}

.intro-center,
.intro-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.intro-center {
  padding: .75rem 1rem;
  background: linear-gradient(135deg, rgba(0, 183, 255, .95), rgba(0, 255, 206, .86));
  color: #032536;
  font: 700 .84rem var(--font-heading);
}

.intro-node {
  padding: .45rem .76rem;
  border: 1px solid #d3e5f5;
  background: #f8fcff;
  color: #1a4266;
  font-size: .76rem;
  opacity: .7;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease;
}

.intro-node.i1 { transform: translate(-250%, -120%); }
.intro-node.i2 { transform: translate(-170%, 135%); }
.intro-node.i3 { transform: translate(-52%, -210%); }
.intro-node.i4 { transform: translate(70%, -140%); }
.intro-node.i5 { transform: translate(150%, 120%); }
.intro-node.i6 { transform: translate(235%, -10%); }

.intro-assembly.is-assembled .intro-node { opacity: 1; }
.intro-assembly.is-assembled .intro-node.i1 { transform: translate(-130%, -85%); }
.intro-assembly.is-assembled .intro-node.i2 { transform: translate(-120%, 95%); }
.intro-assembly.is-assembled .intro-node.i3 { transform: translate(-52%, -145%); }
.intro-assembly.is-assembled .intro-node.i4 { transform: translate(48%, -90%); }
.intro-assembly.is-assembled .intro-node.i5 { transform: translate(48%, 85%); }
.intro-assembly.is-assembled .intro-node.i6 { transform: translate(115%, 0%); }

.layer-sequence {
  position: relative;
}

.layer-progress {
  position: fixed;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: .5rem;
}

@media(min-width:1240px) {
  .layer-progress {
    display: flex;
  }
}

.layer-progress-dot {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: #bfd0e2;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.layer-progress-dot.is-active {
  background: #0aa6e8;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(10, 166, 232, .2);
}

.op-layer {
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  border: 1px solid #dbe8f6;
  border-radius: 1rem;
  background: #fff;
  padding: 1.1rem;
  margin-bottom: 1rem;
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}

@media(min-width:980px) {
  .op-layer {
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    padding: 1.2rem;
  }
}

.op-layer.is-in-view {
  border-color: #a9d0f4;
  box-shadow: 0 14px 34px rgba(7, 29, 56, .08);
  transform: translateY(-2px);
}

.layer-index {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #2d678f;
  font-weight: 700;
  margin-bottom: .35rem;
}

.op-layer h3 {
  font-size: clamp(1.2rem, 2.7vw, 1.65rem);
  margin-bottom: .6rem;
}

.layer-resources {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .7rem;
}

.layer-resources li {
  border: 1px solid #c8ddf1;
  border-radius: 999px;
  padding: .3rem .55rem;
  font-size: .73rem;
  color: #1f4f74;
}

.op-layer-copy p {
  color: #4f6784;
  margin-bottom: .6rem;
}

.copy-collapse {
  margin-top: -.15rem;
}

.collapse-toggle {
  border: 1px solid #c9ddf1;
  background: #f4faff;
  color: #17496c;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
}

.op-layer-visual {
  min-height: 150px;
  border: 1px solid #ddebf7;
  border-radius: .9rem;
  background: #f8fcff;
  position: relative;
  overflow: hidden;
}

.visual-org .org-node {
  position: absolute;
  border: 1px solid #c7dcf1;
  border-radius: .55rem;
  background: #fff;
  color: #1c4c70;
  font-size: .74rem;
  padding: .4rem .5rem;
}

.visual-org .org-node.c { left: 50%; top: 18%; transform: translateX(-50%); }
.visual-org .org-node.a { left: 18%; top: 62%; }
.visual-org .org-node.b { left: 44%; top: 62%; }
.visual-org .org-node.d { left: 70%; top: 62%; }

.visual-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem;
  padding: .7rem;
}

.visual-flow span {
  border: 1px dashed #bad3ea;
  border-radius: .55rem;
  background: #fff;
  color: #2a5d85;
  font-size: .74rem;
  padding: .55rem;
}

.visual-knowledge {
  padding: .7rem;
  display: grid;
  gap: .45rem;
}

.visual-knowledge .k-task {
  border: 1px solid #97c8f5;
  background: #e9f5ff;
  color: #0d4773;
  border-radius: .55rem;
  font-size: .74rem;
  padding: .5rem;
}

.visual-knowledge .k-card {
  border: 1px solid #cfe2f3;
  background: #fff;
  color: #2d5f86;
  border-radius: .55rem;
  font-size: .73rem;
  padding: .45rem;
}

.visual-comms {
  display: grid;
  gap: .5rem;
  padding: .7rem;
}

.visual-comms .bubble {
  border: 1px solid #cde0f2;
  background: #fff;
  border-radius: .7rem;
  font-size: .73rem;
  color: #28577d;
  padding: .5rem;
}

.visual-ai {
  display: grid;
  place-items: center;
}

.visual-ai .ai-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  padding: .6rem .85rem;
  background: linear-gradient(135deg, rgba(0, 183, 255, .92), rgba(0, 255, 206, .82));
  color: #032a3b;
  font-weight: 800;
}

.visual-ai .ai-node {
  position: absolute;
  border: 1px solid #c9def2;
  background: #fff;
  border-radius: .55rem;
  padding: .38rem .5rem;
  color: #27597f;
  font-size: .72rem;
}

.visual-ai .ai-node:nth-child(2) { left: 14%; top: 22%; }
.visual-ai .ai-node:nth-child(3) { right: 12%; top: 25%; }
.visual-ai .ai-node:nth-child(4) { left: 50%; bottom: 14%; transform: translateX(-50%); }

.visual-analytics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  align-items: end;
  padding: .8rem;
}

.visual-analytics .a-bar {
  position: relative;
  height: var(--bar-h);
  border-radius: .55rem .55rem .35rem .35rem;
  background: linear-gradient(180deg, rgba(0, 183, 255, .86), rgba(0, 255, 206, .74));
  color: #17496c;
  font-size: .66rem;
  text-align: center;
  padding-top: .35rem;
}

.layer-connection .section-header {
  margin-bottom: 1.6rem;
}

.connection-lines {
  display: grid;
  gap: .55rem;
}

.connection-lines span {
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 183, 255, .22), rgba(0, 183, 255, .75), rgba(0, 255, 206, .2));
  border-radius: 999px;
  animation: pulse-line 2.6s ease-in-out infinite;
}

.connection-lines span:nth-child(2) { animation-delay: .2s; }
.connection-lines span:nth-child(3) { animation-delay: .4s; }
.connection-lines span:nth-child(4) { animation-delay: .6s; }
.connection-lines span:nth-child(5) { animation-delay: .8s; }
.connection-lines span:nth-child(6) { animation-delay: 1s; }

.final-system-view .section-header {
  margin-bottom: 1.8rem;
}

.unified-system {
  border: 1px solid #d7e6f5;
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
  display: grid;
  gap: .6rem;
}

@media(min-width:900px) {
  .unified-system {
    grid-template-columns: repeat(3, 1fr);
  }
}

.unified-system .u-layer {
  border: 1px solid #cae0f3;
  background: #f5fbff;
  border-radius: .75rem;
  padding: .7rem;
  color: #22557d;
  text-align: center;
  font: 700 .78rem var(--font-heading);
  opacity: .65;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}

.unified-system.is-linked .u-layer {
  opacity: 1;
  transform: translateY(0);
}

.unified-system.is-linked .u-layer:nth-child(1) { transition-delay: .05s; }
.unified-system.is-linked .u-layer:nth-child(2) { transition-delay: .1s; }
.unified-system.is-linked .u-layer:nth-child(3) { transition-delay: .15s; }
.unified-system.is-linked .u-layer:nth-child(4) { transition-delay: .2s; }
.unified-system.is-linked .u-layer:nth-child(5) { transition-delay: .25s; }
.unified-system.is-linked .u-layer:nth-child(6) { transition-delay: .3s; }

.rec-layers-cta .section-header {
  margin-bottom: 0;
}

.rec-layers-cta .btn {
  margin-top: 1rem;
}

@media(max-width:760px) {
  .intro-node {
    position: static;
    transform: none !important;
    display: inline-flex;
    margin: .2rem;
  }

  .intro-center {
    position: static;
    transform: none;
    display: inline-flex;
    margin: .2rem;
  }

  .intro-assembly {
    min-height: auto;
    padding: .6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@keyframes pulse-line {
  0%,
  100% {
    opacity: .42;
    transform: scaleX(.98);
  }

  50% {
    opacity: .9;
    transform: scaleX(1);
  }
}

/* ── Recursos escaneaveis ── */
.page-recursos-ops {
  background: #f5f9fd;
}

.page-recursos-ops .desktop-nav a {
  color: rgba(255, 255, 255, .86);
}

.page-recursos-ops .mobile-toggle span {
  background: rgba(255, 255, 255, .86);
}

.ops-hero {
  min-height: 92vh;
  height: auto;
  display: block;
  padding: 8.5rem 0 6rem;
}

.ops-hero .container {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: 1fr;
}

@media(min-width:980px) {
  .ops-hero .container {
    grid-template-columns: 1.2fr .8fr;
  }
}

.ops-hero-content {
  max-width: 46rem;
}

.ops-hero-content h1 {
  font-size: clamp(2.15rem, 5.2vw, 3.55rem);
  color: #fff;
  line-height: 1.08;
  margin-bottom: 1.15rem;
}

.ops-hero-support {
  color: rgba(255, 255, 255, .62);
  max-width: 39rem;
  margin-bottom: 1.3rem;
}

.ops-hero-visual {
  position: relative;
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .03);
}

.ops-hero-visual .v-node {
  position: absolute;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #00b7ff, #00ffce);
  box-shadow: 0 0 0 5px rgba(0, 183, 255, .15);
}

.ops-hero-visual .n1 { left: 22%; top: 30%; }
.ops-hero-visual .n2 { left: 48%; top: 18%; }
.ops-hero-visual .n3 { right: 23%; top: 34%; }
.ops-hero-visual .n4 { left: 50%; bottom: 22%; transform: translateX(-50%); }

.ops-hero-visual .v-link {
  position: absolute;
  height: 2px;
  background: rgba(0, 229, 255, .6);
  transform-origin: left center;
}

.ops-hero-visual .l1 { left: 24%; top: 31%; width: 30%; transform: rotate(-12deg); }
.ops-hero-visual .l2 { left: 48%; top: 20%; width: 24%; transform: rotate(30deg); }
.ops-hero-visual .l3 { left: 32%; top: 52%; width: 20%; transform: rotate(55deg); }

.ops-transition .section-header,
.ops-connection .section-header,
.ops-final-vision .section-header {
  max-width: 52rem;
}

.resources-sticky {
  position: sticky;
  top: 4.4rem;
  z-index: 80;
  border-top: 1px solid #d8e6f4;
  border-bottom: 1px solid #d8e6f4;
  background: rgba(245, 249, 253, .92);
  backdrop-filter: blur(10px);
}

.resources-sticky-inner {
  display: grid;
  gap: .55rem;
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.resources-sticky-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #47627f;
  font-weight: 700;
}

.resources-sticky-scroll {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.resources-sticky-scroll::-webkit-scrollbar {
  display: none;
}

.resources-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfe0f2;
  background: #fff;
  color: #204463;
  border-radius: 999px;
  padding: .45rem .72rem;
  font-size: .76rem;
  white-space: nowrap;
  transition: all .24s ease;
}

.resources-nav-link:hover {
  border-color: #8bbef0;
  background: #f2f9ff;
  transform: translateY(-1px);
}

.resources-nav-link.is-active {
  border-color: #1aa1df;
  background: #def3ff;
  color: #0c4c73;
  box-shadow: inset 0 0 0 1px rgba(26, 161, 223, .2);
}

.feature-section {
  transition: background-color .25s ease;
}

.feature-section.is-current {
  background: linear-gradient(180deg, rgba(210, 236, 255, .35), rgba(245, 249, 253, .6));
}

.feature-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
  align-items: center;
}

@media(min-width:980px) {
  .feature-grid {
    grid-template-columns: 1.1fr .9fr;
    gap: 2.2rem;
  }
}

.feature-copy {
  max-width: 44rem;
}

.feature-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #2f6c98;
  font-weight: 700;
  margin-bottom: .5rem;
}

.feature-copy h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.35rem);
  margin-bottom: .7rem;
  line-height: 1.12;
}

.feature-subheadline {
  color: #174f79;
  font-weight: 700;
  margin-bottom: .7rem;
}

.feature-copy p {
  color: #4a6482;
  margin-bottom: .75rem;
  max-width: 62ch;
}

.feature-list {
  display: grid;
  gap: .45rem;
  margin-bottom: .75rem;
}

.feature-list li {
  position: relative;
  padding-left: 1rem;
  color: #2a4f70;
  font-size: .9rem;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .57rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #12abe6;
}

.feature-result {
  font-weight: 700;
  color: #163d5c;
}

.feature-visual {
  min-height: 205px;
  border: 1px solid #d8e7f6;
  border-radius: 1rem;
  background: #fff;
  padding: .95rem;
  transition: transform .25s ease, box-shadow .25s ease;
}

.feature-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(6, 23, 42, .09);
}

.visual-flow-steps,
.visual-knowledge-cards,
.visual-chat,
.visual-org,
.visual-policy,
.visual-ai-chat,
.visual-ai-agents,
.visual-events {
  display: grid;
  gap: .55rem;
}

.visual-flow-steps span,
.visual-knowledge-cards span,
.visual-chat span,
.visual-org span,
.visual-policy span,
.visual-ai-chat span,
.visual-ai-agents span,
.visual-events span {
  border: 1px solid #cddff2;
  border-radius: .7rem;
  background: #f7fbff;
  color: #2b577e;
  font-size: .79rem;
  padding: .55rem .62rem;
}

.visual-doc-links {
  position: relative;
}

.visual-doc-links .doc-main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #8abff0;
  border-radius: .7rem;
  background: #e8f5ff;
  color: #0f4d75;
  font-weight: 700;
  font-size: .8rem;
  padding: .55rem .65rem;
}

.visual-doc-links .doc-item {
  position: absolute;
  border: 1px solid #ccdef0;
  border-radius: .6rem;
  background: #fff;
  color: #2d5b80;
  font-size: .74rem;
  padding: .45rem .55rem;
}

.visual-doc-links .doc-item:nth-child(2) { left: 8%; top: 16%; }
.visual-doc-links .doc-item:nth-child(3) { right: 8%; top: 20%; }
.visual-doc-links .doc-item:nth-child(4) { left: 36%; bottom: 10%; }

.visual-analytics-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .45rem;
  align-items: end;
}

.visual-analytics-bars span {
  height: var(--h);
  border-radius: .55rem .55rem .3rem .3rem;
  background: linear-gradient(180deg, rgba(0, 183, 255, .88), rgba(0, 255, 206, .74));
}

.ops-final-note {
  text-align: center;
  font: 700 1rem var(--font-heading);
  color: #1b4b6f;
}

.ops-final-cta .section-header {
  margin-bottom: 0;
}

.ops-final-actions {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.05rem;
}

.ops-section-footer {
  text-align: center;
  padding: 2.4rem 0;
}

.ops-section-footer p {
  color: #4e6683;
  font-weight: 700;
}

@media(max-width:760px) {
  .resources-sticky {
    top: 4.1rem;
  }
}

/* ── OCC redesigned page ── */
.occ2-page {
  background: #f5f9fd;
}

.occ2-hero {
  padding-top: 7.5rem;
}

.occ2-hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
}

@media(min-width:980px) {
  .occ2-hero-grid {
    grid-template-columns: 1.1fr .9fr;
  }
}

.occ2-lead {
  max-width: 48ch;
}

.occ2-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.1rem;
}

.occ2-hero-visual {
  position: relative;
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .04);
}

.occ2-node {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .75rem;
  padding: .45rem .7rem;
}

.occ2-node.n-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(0, 183, 255, .92), rgba(0, 255, 206, .78));
  border: none;
  color: #03283a;
  font-weight: 800;
}

.occ2-node.n1 { left: 10%; top: 20%; }
.occ2-node.n2 { left: 38%; top: 12%; }
.occ2-node.n3 { right: 12%; top: 23%; }
.occ2-node.n4 { left: 18%; bottom: 18%; }
.occ2-node.n5 { right: 18%; bottom: 16%; }

.occ2-subnav {
  position: sticky;
  top: 4.4rem;
  z-index: 70;
  background: rgba(245, 249, 253, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid #d8e6f4;
  border-bottom: 1px solid #d8e6f4;
}

.occ2-subnav-inner {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .65rem 2rem;
  scrollbar-width: none;
}

.occ2-subnav-inner::-webkit-scrollbar {
  display: none;
}

.occ2-subnav-link {
  border: 1px solid #cfe0f2;
  background: #fff;
  border-radius: 999px;
  padding: .4rem .72rem;
  white-space: nowrap;
  font-size: .82rem;
  color: #1f4463;
  transition: all .22s ease;
}

.occ2-subnav-link:hover {
  border-color: #8ebff0;
  background: #f3faff;
}

.occ2-subnav-link.is-active {
  border-color: #1aa1df;
  background: #def3ff;
  color: #0c4c73;
}

.occ2-block {
  max-width: 980px;
}

.occ2-cards {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}

@media(min-width:860px) {
  .occ2-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.occ2-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 1rem;
}

.occ2-grid-2 {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media(min-width:980px) {
  .occ2-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
}

.occ2-stats {
  display: grid;
  gap: .7rem;
}

.occ2-stat {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  border-radius: .85rem;
  padding: .85rem;
}

.occ2-stat-value {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  margin-bottom: .35rem;
}

.occ2-flow {
  margin-top: 1rem;
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(2, 1fr);
}

@media(min-width:900px) {
  .occ2-flow {
    grid-template-columns: repeat(6, 1fr);
  }
}

.occ2-flow span {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .7rem;
  padding: .55rem;
  text-align: center;
  font-size: .78rem;
  color: var(--fg);
}

.occ2-compare {
  margin-top: .8rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}

@media(min-width:760px) {
  .occ2-compare {
    grid-template-columns: 1fr 1fr;
  }
}

.occ2-compare-card {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .06);
  padding: .9rem;
}

.occ2-compare-card-accent {
  border-color: rgba(31, 224, 193, .34);
  background: rgba(31, 224, 193, .12);
}

.occ2-ai-points {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.occ2-ai-points span {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  padding: .35rem .65rem;
  font-size: .75rem;
  color: #fff;
}

.occ2-ai-points .is-core {
  background: linear-gradient(135deg, rgba(0, 183, 255, .92), rgba(0, 255, 206, .8));
  color: #03283a;
  border: none;
  font-weight: 700;
}

.legal-page .content-shell {
  padding-top: 2.2rem;
}

/* ── Recursos V2 (image-matched) ── */
.page-recursos-v2 {
  background: #edf1f6;
}

.recursos-v2-main {
  background: #edf1f6;
}

.recursos-v2-hero {
  background:
    radial-gradient(circle at 86% 88%, rgba(0, 220, 255, .16), transparent 34%),
    linear-gradient(110deg, #011622 0%, #011822 52%, #032734 100%);
  min-height: 84vh;
  display: flex;
  align-items: center;
  padding: 6.8rem 0 3rem;
  position: relative;
}

.recursos-v2-hero .container {
  max-width: 100%;
  width: 1280px;
  padding-left: 2rem;
  padding-right: 2rem;
}

.recursos-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  color: rgba(208, 227, 238, .76);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  animation: recursos-scroll-soft 2.2s ease-in-out infinite;
}

.recursos-scroll-hint span {
  opacity: .78;
}

.recursos-scroll-hint svg {
  width: 1rem;
  height: 1rem;
}

.recursos-scroll-hint svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media(max-width:1000px) {
  .recursos-v2-hero .container {
    width: 100%;
  }

  .recursos-scroll-hint {
    bottom: .55rem;
    font-size: .67rem;
  }
}

.recursos-v2-hero-grid {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  grid-template-columns: 1fr;
}

@media(min-width:1050px) {
  .recursos-v2-hero-grid {
    grid-template-columns: 1.12fr .88fr;
  }
}

.recursos-kicker {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 199, 255, .35);
  border-radius: 999px;
  padding: .42rem .9rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #1ad5ff;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 0 1px rgba(0, 200, 255, .14), 0 0 24px rgba(0, 189, 255, .25);
  animation: recursos-glow-pulse 2.8s ease-in-out infinite;
}

.recursos-v2-copy h1 {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.06;
  color: #e9eef3;
  margin-bottom: .45rem;
  font-weight: 700;
  max-width: 16ch;
}

.recursos-v2-copy {
  max-width: 48rem;
}

.recursos-v2-copy h1 span {
  color: #13d6f7;
  text-shadow: 0 0 26px rgba(19, 214, 247, .35);
}

.recursos-v2-copy p {
  color: rgba(224, 236, 246, .72);
  font-size: 1.05rem;
  line-height: 1.68;
  max-width: 35rem;
  text-wrap: pretty;
}

.recursos-v2-copy > p:first-of-type {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 35rem;
  margin-bottom: 0;
}

.recursos-v2-copy .recursos-v2-muted {
  margin-top: .1rem;
  color: rgba(194, 208, 220, .64);
  max-width: 35rem;
}

.hero-anchor-menu {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.hero-anchor-menu a {
  border: 1px solid rgba(125, 169, 194, .35);
  background: rgba(8, 34, 47, .56);
  color: rgba(213, 236, 249, .92);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  padding: .35rem .68rem;
  transition: all .26s ease;
}

.hero-anchor-menu a:hover {
  border-color: rgba(0, 206, 255, .64);
  background: rgba(0, 181, 236, .16);
  color: #fff;
  box-shadow: 0 0 18px rgba(0, 200, 255, .26);
}

.recursos-v2-hero-map {
  position: relative;
  display: grid;
  gap: .62rem;
  grid-template-columns: repeat(2, 1fr);
  width: min(508px, 100%);
  margin-left: auto;
  padding: .25rem;
}

.recursos-v2-hero-map::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.recursos-v2-hero-map .hero-map-card {
  border: 1px solid rgba(115, 156, 179, .22);
  border-radius: .9rem;
  min-height: 4.75rem;
  padding: .54rem .6rem;
  display: grid;
  place-items: center;
  justify-items: center;
  align-content: center;
  gap: .08rem;
  color: rgba(213, 230, 240, .92);
  background: linear-gradient(102deg, rgba(7, 33, 47, .82), rgba(10, 44, 60, .72));
  box-shadow: inset 0 0 0 1px rgba(0, 176, 226, .05), 0 8px 15px rgba(2, 20, 33, .2);
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease, background .32s ease;
  will-change: transform;
  text-align: center;
  position: relative;
  z-index: 1;
}

.recursos-v2-hero-map .hero-map-card:nth-child(2n) {
  animation-delay: .35s;
}

.recursos-v2-hero-map .hero-map-card:hover,
.recursos-v2-hero-map .hero-map-card:focus-visible {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(0, 220, 255, .45);
  box-shadow: 0 0 24px rgba(0, 209, 255, .22);
  background: rgba(7, 44, 60, .7);
  outline: none;
}

.recursos-v2-hero-map .hero-map-card.is-auto-active {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(0, 220, 255, .45);
  box-shadow: 0 0 24px rgba(0, 209, 255, .24);
  background: rgba(7, 44, 60, .72);
}

.recursos-v2-hero-map .hero-map-card svg {
  width: 1.28rem;
  height: 1.28rem;
  color: #0fd6ff;
  margin-bottom: .02rem;
  filter: drop-shadow(0 0 7px rgba(8, 215, 247, .25));
  animation: recursos-icon-float 3.2s ease-in-out infinite;
}

.recursos-v2-hero-map .hero-map-card span {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.1;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .01em;
}

.recursos-v2-hero-map .hero-map-card:nth-child(1) svg { color: #13caff; }
.recursos-v2-hero-map .hero-map-card:nth-child(2) svg { color: #1de7ff; }
.recursos-v2-hero-map .hero-map-card:nth-child(3) svg { color: #15f5d7; }
.recursos-v2-hero-map .hero-map-card:nth-child(4) svg { color: #12c8ff; }
.recursos-v2-hero-map .hero-map-card:nth-child(5) svg { color: #2be0ff; }
.recursos-v2-hero-map .hero-map-card:nth-child(6) svg { color: #16ffd7; }
.recursos-v2-hero-map .hero-map-card:nth-child(7) svg { color: #22c3ff; }
.recursos-v2-hero-map .hero-map-card:nth-child(8) svg { color: #00e7ff; }
.recursos-v2-hero-map .hero-map-card:nth-child(9) svg { color: #23ffd4; }
.recursos-v2-hero-map .hero-map-card:nth-child(10) svg { color: #18cfff; }
.recursos-v2-hero-map .hero-map-card:nth-child(2) svg,
.recursos-v2-hero-map .hero-map-card:nth-child(4) svg,
.recursos-v2-hero-map .hero-map-card:nth-child(6) svg,
.recursos-v2-hero-map .hero-map-card:nth-child(8) svg,
.recursos-v2-hero-map .hero-map-card:nth-child(10) svg { animation-delay: .28s; }

.recursos-v2-intro {
  background: #f6f9fc;
  border-bottom: 1px solid #dce6f1;
  padding-top: 4.8rem;
  padding-bottom: 3.2rem;
}

.recursos-v2-intro .container {
  text-align: center;
  max-width: 58rem;
}

.recursos-v2-intro h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.08;
  margin-bottom: .85rem;
  color: #061a3d;
}

.recursos-v2-intro p {
  color: #435a78;
  font-size: 1.05rem;
  line-height: 1.72;
}

.page-recursos-v2 .resources-sticky {
  position: sticky;
  top: 5.2rem;
  z-index: 75;
  border-top: 1px solid #d5e1ef;
  border-bottom: 1px solid #d5e1ef;
  background: rgba(245, 249, 253, .95);
  backdrop-filter: blur(10px);
}

.page-recursos-v2 .resources-sticky-inner {
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.page-recursos-v2 .resources-sticky-scroll {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-recursos-v2 .resources-sticky-scroll::-webkit-scrollbar {
  display: none;
}

.page-recursos-v2 .resources-nav-link {
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  color: #395379;
  font-weight: 700;
  font-size: .88rem;
  padding: .43rem .9rem;
  white-space: nowrap;
  transition: all .22s ease;
}

.page-recursos-v2 .resources-nav-link svg {
  width: .92rem;
  height: .92rem;
  color: #5b7093;
}

.page-recursos-v2 .resources-nav-link.is-active svg {
  color: #03b8ea;
}

.page-recursos-v2 .resources-nav-link:hover {
  border-color: #b9d4ea;
  background: #eef6fd;
}

.page-recursos-v2 .resources-nav-link.is-active {
  border-color: #8fd5f4;
  background: #dff4ff;
  color: #00aae2;
  box-shadow: 0 0 0 1px rgba(23, 190, 244, .22), 0 0 18px rgba(0, 183, 239, .22);
}

.resource-card-block {
  padding: 3.5rem 0;
  scroll-margin-top: 8.6rem;
}

.resource-card-block:first-of-type {
  padding-top: 4.2rem;
}

.resource-card-block:last-of-type {
  padding-bottom: 4.4rem;
}

.resource-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid #d8e3ef;
  border-radius: 1.6rem;
  overflow: hidden;
  background: #f9fbfd;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.resource-card:hover {
  transform: translateY(-3px);
  border-color: #b7d6ec;
  box-shadow: 0 20px 34px rgba(7, 33, 66, .08);
}

@media(min-width:980px) {
  .resource-card {
    grid-template-columns: 280px 1fr;
  }

  .resource-card-block.side-right .resource-card {
    grid-template-columns: 1fr 280px;
  }

  .resource-card-block.side-right .resource-card-media {
    order: 2;
  }

  .resource-card-block.side-right .resource-card-content {
    order: 1;
  }
}

.resource-card-media {
  background: #e9eef4;
  border-right: 1px solid #d7e1ec;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}

.resource-icon {
  width: 88px;
  height: 88px;
  border-radius: 1rem;
  border: 1px solid #9dd8f2;
  background: #dbf3ff;
  display: grid;
  place-items: center;
  color: #00b7e5;
  font-weight: 800;
  font-size: .92rem;
}

.resource-icon svg {
  width: 1.95rem;
  height: 1.95rem;
}

.resource-lines {
  display: grid;
  gap: .28rem;
}

.resource-lines span {
  display: block;
  height: .28rem;
  border-radius: 999px;
  background: #bfe9f7;
}

.resource-lines span:nth-child(1) { width: 4.1rem; }
.resource-lines span:nth-child(2) { width: 3.5rem; }
.resource-lines span:nth-child(3) { width: 3.8rem; }
.resource-lines span:nth-child(4) { width: 2.9rem; }

.resource-card-media p {
  margin-top: .2rem;
}

.resource-card-media p {
  color: #2ec7ec;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: .95rem;
}

.resource-card-content {
  padding: 2rem 2rem 1.85rem;
}

.resource-label {
  color: #08b7f4;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: .45rem;
}

.resource-card-content h2 {
  font-size: 1.8rem;
  line-height: 1.08;
  margin-bottom: .4rem;
  color: #06193e;
}

.resource-card-content h3 {
  font-size: 1.05rem;
  color: #0c2f5f;
  margin-bottom: .62rem;
}

.resource-card-content p {
  color: #4a6283;
  font-size: .98rem;
  line-height: 1.68;
}

.resource-bullets {
  margin-top: .68rem;
  margin-bottom: .78rem;
  display: grid;
  gap: .36rem;
}

.resource-bullets li {
  color: #1f436f;
  font-size: .98rem;
  position: relative;
  padding-left: 1.45rem;
}

.resource-bullets li::before {
  content: "○";
  position: absolute;
  left: 0;
  top: .01rem;
  color: #00b7ef;
  font-weight: 700;
}

.resource-result {
  border: 1px solid #a9e8c2;
  background: #e9f8ee;
  border-radius: .85rem;
  padding: .78rem .9rem;
  color: #0a6e3c !important;
  font-size: .98rem !important;
  font-weight: 700;
  box-shadow: 0 0 24px rgba(90, 235, 147, .16);
}

@media(min-width:1200px) {
  .resource-card-content h2 {
    font-size: 2rem;
  }
}

.page-recursos-v2 .feature-section.is-current .resource-card {
  border-color: #b9d6ec;
  box-shadow: 0 14px 36px rgba(7, 33, 66, .09), 0 0 0 1px rgba(0, 194, 255, .16);
}

.recursos-v2-connection {
  background: #f8fbfe;
  margin-top: 4.4rem;
  border-top: 1px solid #dbe5f0;
}

.recursos-v2-connection .container {
  text-align: center;
  max-width: 62rem;
}

.recursos-v2-connection h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: #06173a;
  line-height: 1.08;
  margin-bottom: .75rem;
}

.recursos-v2-connection h2 span {
  color: #12c8eb;
}

.recursos-v2-connection p {
  color: #405a79;
  font-size: 1.05rem;
  line-height: 1.72;
}

.recursos-v2-system-orbit {
  margin: 1.5rem auto 0;
  width: min(650px, 100%);
  aspect-ratio: 1;
  position: relative;
}

.recursos-v2-system-orbit .orbit-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 130, 196, .2), transparent 66%);
}

.recursos-v2-system-orbit .orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(76, 148, 188, .34);
  border-radius: 50%;
}

.recursos-v2-system-orbit .orbit-ring.r1 {
  width: 63%;
  height: 63%;
}

.recursos-v2-system-orbit .orbit-ring.r2 {
  width: 82%;
  height: 82%;
}

.recursos-v2-system-orbit .orbit-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.recursos-v2-system-orbit .orbit-links line {
  stroke: rgba(79, 149, 188, .28);
  stroke-width: 1.25;
  stroke-dasharray: 5 9;
  animation: recursos-orbit-line-dash 18s linear infinite;
}

.recursos-v2-system-orbit .orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 2rem;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(6, 32, 45, .92) 0%, rgba(7, 38, 54, .9) 58%, rgba(6, 27, 41, .94) 100%);
  border: 1px solid rgba(27, 201, 245, .42);
  box-shadow: 0 0 0 8px rgba(16, 176, 230, .15), 0 0 40px rgba(16, 176, 230, .26);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.recursos-v2-system-orbit .orbit-core::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 2.4rem;
  border: 1px solid rgba(34, 213, 255, .2);
}

.recursos-v2-system-orbit .orbit-core::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 52% 70%, rgba(14, 203, 255, .18), transparent 55%);
}

.recursos-v2-system-orbit .orbit-core img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: saturate(1.12) brightness(1.08) drop-shadow(0 0 10px rgba(12, 228, 220, .24));
  position: relative;
  z-index: 2;
}

.recursos-v2-system-orbit .orbit-node {
  position: absolute;
  left: 50%;
  top: 50%;
  --x: 0px;
  --y: 0px;
  transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), 0);
  min-width: 150px;
  border: 1px solid #c8dceb;
  border-radius: .95rem;
  background: #f8fcff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .46rem;
  padding: .55rem .75rem;
  font-size: .92rem;
  font-weight: 700;
  color: #2f4f72;
  box-shadow: 0 8px 18px rgba(6, 31, 57, .08);
  animation: recursos-orbit-node-float 6.4s cubic-bezier(.25,.46,.45,.94) infinite;
  will-change: transform;
}

.recursos-v2-system-orbit .orbit-node svg {
  width: 1rem;
  height: 1rem;
  color: #09bfe9;
}

.recursos-v2-system-orbit .orbit-node.n-top { --x: 0px; --y: -215px; }
.recursos-v2-system-orbit .orbit-node.n-top-right { --x: 165px; --y: -162px; animation-delay: .2s; }
.recursos-v2-system-orbit .orbit-node.n-right { --x: 230px; --y: 0px; animation-delay: .4s; }
.recursos-v2-system-orbit .orbit-node.n-bottom-right { --x: 160px; --y: 162px; animation-delay: .6s; }
.recursos-v2-system-orbit .orbit-node.n-bottom { --x: 0px; --y: 215px; animation-delay: .8s; }
.recursos-v2-system-orbit .orbit-node.n-bottom-left { --x: -160px; --y: 162px; animation-delay: 1s; }
.recursos-v2-system-orbit .orbit-node.n-left { --x: -230px; --y: 0px; animation-delay: 1.2s; }
.recursos-v2-system-orbit .orbit-node.n-top-left { --x: -165px; --y: -162px; animation-delay: 1.4s; }

.recursos-v2-vision {
  background: #edf1f6;
  text-align: center;
  border-top: 1px solid #d9e3ef;
  padding-top: 8.4rem;
  padding-bottom: 8.4rem;
}

.recursos-v2-vision .container {
  max-width: 66rem;
}

.recursos-v2-vision h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.12;
  margin-bottom: .8rem;
  color: #07173c;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.recursos-v2-vision p {
  color: #425a79;
  font-size: 1.05rem;
  line-height: 1.72;
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

.recursos-v2-highlight {
  margin-top: 1rem;
  color: #13c7e9 !important;
  font-weight: 800;
  font-size: clamp(1.2rem, 2.3vw, 1.6rem) !important;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35 !important;
  text-wrap: balance;
}

.recursos-v2-cta {
  background:
    radial-gradient(circle at 20% 50%, rgba(0, 195, 255, .14), transparent 34%),
    linear-gradient(110deg, #021723 0%, #021a27 54%, #032a39 100%);
  text-align: center;
  padding-top: 9.2rem;
  padding-bottom: 9.2rem;
}

.recursos-v2-cta .container {
  max-width: 62rem;
}

@media(min-width:1200px) {
  .resource-card-block {
    padding: 3.9rem 0;
  }

  .resource-card-block:first-of-type {
    padding-top: 4.8rem;
  }

  .resource-card-block:last-of-type {
    padding-bottom: 5rem;
  }

  .recursos-v2-connection {
    margin-top: 5rem;
  }

  .recursos-v2-vision {
    padding-top: 9.2rem;
    padding-bottom: 9.2rem;
  }

  .recursos-v2-cta {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

.recursos-v2-cta h2 {
  color: #ecf2f8;
  font-size: clamp(1.8rem, 3.6vw, 2.45rem);
  line-height: 1.12;
  text-shadow: 0 0 24px rgba(0, 206, 255, .18);
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.recursos-v2-cta p {
  color: rgba(212, 224, 233, .7);
  font-size: 1.05rem;
  line-height: 1.72;
}

.recursos-v2-cta-actions {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.recursos-v2-cta .btn-primary {
  box-shadow: 0 0 24px rgba(0, 202, 255, .42);
}

.recursos-v2-cta .btn-glass {
  border-color: rgba(152, 197, 220, .3);
}

@media(max-width:980px) {
  .recursos-v2-hero {
    min-height: auto;
    padding-top: 6.3rem;
  }

  .hero-anchor-menu {
    margin-top: .9rem;
  }

  .resource-card-media {
    border-right: 0;
    border-bottom: 1px solid #d7e1ec;
    min-height: 190px;
  }

  .resource-card-content {
    padding: 1.5rem 1.2rem;
  }

  .resource-card-block {
    padding: 1.2rem 0;
  }

  .resource-card-block:first-of-type {
    padding-top: 1.55rem;
  }

  .resource-card-block:last-of-type {
    padding-bottom: 1.75rem;
  }

  .recursos-v2-connection {
    margin-top: 1rem;
  }

  .recursos-v2-vision {
    padding-top: 3.9rem;
    padding-bottom: 3.9rem;
  }

  .recursos-v2-cta {
    padding-top: 4.4rem;
    padding-bottom: 4.4rem;
  }

  .recursos-v2-system-orbit {
    width: min(430px, 100%);
    margin-top: 1rem;
  }

  .recursos-v2-system-orbit .orbit-core {
    width: 106px;
    height: 106px;
    border-radius: 1.4rem;
  }

  .recursos-v2-system-orbit .orbit-core img {
    width: 70px;
    height: 70px;
  }

  .recursos-v2-system-orbit .orbit-node {
    min-width: 108px;
    font-size: .72rem;
    padding: .36rem .45rem;
  }

  .recursos-v2-system-orbit .orbit-node.n-top { --x: 0px; --y: -142px; }
  .recursos-v2-system-orbit .orbit-node.n-top-right { --x: 112px; --y: -112px; }
  .recursos-v2-system-orbit .orbit-node.n-right { --x: 154px; --y: 0px; }
  .recursos-v2-system-orbit .orbit-node.n-bottom-right { --x: 112px; --y: 112px; }
  .recursos-v2-system-orbit .orbit-node.n-bottom { --x: 0px; --y: 142px; }
  .recursos-v2-system-orbit .orbit-node.n-bottom-left { --x: -112px; --y: 112px; }
  .recursos-v2-system-orbit .orbit-node.n-left { --x: -154px; --y: 0px; }
  .recursos-v2-system-orbit .orbit-node.n-top-left { --x: -112px; --y: -112px; }

  .page-recursos-v2 .resources-sticky {
    top: 5.15rem;
  }

  .recursos-v2-hero-map {
    width: 100%;
    padding: 0;
  }

  .recursos-v2-hero-map .hero-map-card {
    min-height: 4.6rem;
  }

  .recursos-v2-hero-map .hero-map-card svg {
    width: 1.08rem;
    height: 1.08rem;
  }

  .recursos-v2-hero-map .hero-map-card span {
    font-size: .72rem;
  }
}

@keyframes recursos-card-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes recursos-scroll-soft {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: .7;
  }

  50% {
    transform: translateX(-50%) translateY(4px);
    opacity: 1;
  }
}

@keyframes recursos-icon-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2.5px);
  }
}

@keyframes recursos-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(0, 200, 255, .14), 0 0 20px rgba(0, 189, 255, .22);
  }

  50% {
    box-shadow: 0 0 0 1px rgba(0, 200, 255, .35), 0 0 36px rgba(0, 189, 255, .42);
  }
}

@keyframes recursos-orbit-node-float {
  0%,
  100% {
    transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), 0);
  }

  50% {
    transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y) - 5px), 0);
  }
}

@keyframes recursos-orbit-line-dash {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 220;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recursos-kicker,
  .recursos-v2-hero-map .hero-map-card svg,
  .recursos-v2-system-orbit .orbit-links line,
  .recursos-v2-system-orbit .orbit-node,
  .recursos-scroll-hint,
  .occ1-scroll-hint {
    animation: none !important;
  }
}

/* ── OCC1 page ── */
.occ1-page {
  background: #edf1f6;
}

.occ1-main {
  background: #edf1f6;
}

.occ1-hero,
.occ1-cause,
.occ1-compare,
.occ1-final {
  background:
    radial-gradient(circle at 18% 14%, rgba(0, 213, 255, .13), transparent 34%),
    linear-gradient(125deg, #021521 0%, #021925 58%, #042834 100%);
}

.occ1-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6.8rem 0 3rem;
  position: relative;
}

.occ1-hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
}

@media(min-width:1080px) {
  .occ1-hero-grid {
    grid-template-columns: 1.02fr .98fr;
  }
}

.occ1-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 194, 247, .36);
  border-radius: 999px;
  padding: .4rem .9rem;
  color: #13c9f0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(0, 117, 159, .18);
}

.occ1-pill-light {
  background: #dff1ff;
  color: #0aa9e8;
  border-color: #c1e2f7;
}

.occ1-hero-copy h1 {
  margin-top: .9rem;
  margin-bottom: .9rem;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.1;
  color: #f0f6fb;
}

.occ1-hero-copy h1 span {
  color: #10d6f3;
}

.occ1-lead {
  font-size: 1.02rem;
  color: #d8e9f5;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: .7rem;
}

.occ1-hero-copy p {
  color: rgba(209, 223, 233, .88);
  font-size: 1.05rem;
  line-height: 1.72;
  max-width: 52ch;
}

.occ1-hero-gap {
  margin-top: .95rem;
}

.occ1-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  color: rgba(208, 227, 238, .76);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  animation: occ1-scroll-soft 2.2s ease-in-out infinite;
}

.occ1-scroll-hint span {
  opacity: .78;
}

.occ1-scroll-hint svg {
  width: 1rem;
  height: 1rem;
}

.occ1-scroll-hint svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.occ1-hero-actions {
  margin-top: 1rem;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

.occ1-hero-orbit {
  position: relative;
  width: min(620px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}

.occ1-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 142px;
  height: 142px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #05293b;
  background: linear-gradient(135deg, #1cd8f6, #29d6c5);
  box-shadow: 0 0 70px rgba(24, 223, 255, .42);
  z-index: 3;
  animation: occ1-core-pulse 3.1s ease-in-out infinite;
}

.occ1-core svg {
  width: 2.2rem;
  height: 2.2rem;
}

.occ1-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(21, 193, 235, .34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.occ1-ring.r1 { width: 310px; height: 310px; }
.occ1-ring.r2 { width: 420px; height: 420px; }
.occ1-ring.r3 { width: 520px; height: 520px; }

.occ1-orbit-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: #09cef0;
  background: rgba(7, 37, 52, .9);
  border: 1px solid rgba(35, 187, 225, .28);
  transform: translate(-50%, -50%);
  animation: occ1-node-float 4.8s ease-in-out infinite;
}

.occ1-orbit-node svg { width: 1.4rem; height: 1.4rem; }
.occ1-orbit-node.n1 { transform: translate(-50%, -50%) translate(-120px, -210px); }
.occ1-orbit-node.n2 { transform: translate(-50%, -50%) translate(140px, -210px); animation-delay: .35s; }
.occ1-orbit-node.n3 { transform: translate(-50%, -50%) translate(250px, 0px); animation-delay: .7s; }
.occ1-orbit-node.n4 { transform: translate(-50%, -50%) translate(130px, 205px); animation-delay: 1s; }
.occ1-orbit-node.n5 { transform: translate(-50%, -50%) translate(-120px, 215px); animation-delay: 1.3s; }
.occ1-orbit-node.n6 { transform: translate(-50%, -50%) translate(-245px, 10px); animation-delay: 1.6s; }

.occ1-context,
.occ1-layer {
  background: #edf1f6;
}

.occ1-head {
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}

.occ1-head h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  line-height: 1.08;
  color: #07183b;
  margin: .9rem 0;
}

.occ1-head p {
  color: #445d7d;
  font-size: 1.05rem;
  line-height: 1.7;
}

.occ1-kpi-grid {
  margin-top: 2rem;
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}

@media(min-width:900px) {
  .occ1-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.occ1-kpi-card {
  border: 1px solid #d5e3f2;
  border-radius: 1.2rem;
  background: #f8fbff;
  padding: 1.2rem;
  transition: transform .26s ease, box-shadow .26s ease;
}

.occ1-kpi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 26px rgba(9, 37, 70, .1);
}

.occ1-kpi-card span {
  width: 3rem;
  height: 3rem;
  border-radius: .85rem;
  background: linear-gradient(135deg, #11c9f2, #19d5cc);
  display: grid;
  place-items: center;
  color: #fff;
}

.occ1-kpi-card span svg {
  width: 1.25rem;
  height: 1.25rem;
}

.occ1-kpi-card h3 {
  margin-top: .8rem;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: #11bdea;
  line-height: 1;
}

.occ1-kpi-card p {
  margin-top: .7rem;
  color: #4b6482;
  font-size: .95rem;
  line-height: 1.6;
}

.occ1-context-note {
  margin: 2rem auto 0;
  max-width: 60rem;
  text-align: center;
  color: #3d5675;
  font-size: .95rem;
  line-height: 1.7;
}

.occ1-cause {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

.occ1-cause-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}

@media(min-width:1050px) {
  .occ1-cause-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.occ1-cause h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  color: #f2f7fb;
  line-height: 1.08;
  margin: .9rem 0;
}

.occ1-cause p {
  color: rgba(213, 224, 233, .9);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 50ch;
}

.occ1-cause-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}

@media(min-width:900px) {
  .occ1-cause-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.occ1-problem-card {
  border: 1px solid rgba(115, 153, 176, .24);
  border-radius: 1.1rem;
  background: rgba(11, 37, 53, .65);
  padding: .95rem;
}

.occ1-problem-card span {
  width: 3rem;
  height: 3rem;
  border-radius: .8rem;
  background: rgba(0, 194, 247, .16);
  border: 1px solid rgba(0, 207, 255, .32);
  color: #08d5f7;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.occ1-problem-card span svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.occ1-problem-card h3 {
  margin-top: .7rem;
  margin-bottom: .35rem;
  color: #f0f6fb;
  font-size: 1.05rem;
  line-height: 1.2;
}

.occ1-problem-card p {
  color: rgba(204, 219, 230, .93);
  font-size: .95rem;
  line-height: 1.6;
}

.occ1-layer {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.occ1-timeline {
  margin-top: 2.2rem;
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media(min-width:980px) {
  .occ1-timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: .9rem;
  }
}

.occ1-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, rgba(100, 182, 222, .25), rgba(0, 184, 235, .9), rgba(40, 214, 191, .65));
}

.occ1-step {
  position: relative;
  text-align: center;
  padding-top: 1.1rem;
}

.occ1-step span {
  position: relative;
  z-index: 2;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid #9fd6f3;
  display: inline-grid;
  place-items: center;
  background: #f0f7fd;
  color: #0fa9e5;
  font: 800 1.55rem var(--font-heading);
}

.occ1-step h3 {
  margin-top: .9rem;
  color: #0a1f43;
  font-size: 1.05rem;
}

.occ1-step p {
  margin-top: .45rem;
  color: #4a617f;
  font-size: .95rem;
  line-height: 1.6;
}

.occ1-step.is-featured span {
  background: linear-gradient(135deg, #1ad6f5, #19d4cb);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 12px rgba(24, 211, 246, .25);
}

.occ1-compare {
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
}

.occ1-compare .occ1-head h2,
.occ1-compare .occ1-head p {
  color: #f0f6fb;
}

.occ1-compare-grid {
  margin-top: 2rem;
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
}

@media(min-width:980px) {
  .occ1-compare-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.occ1-compare-card {
  border: 1px solid rgba(99, 142, 167, .34);
  border-radius: 1.25rem;
  background: rgba(8, 35, 51, .72);
  padding: 1.25rem;
}

.occ1-compare-card h3 {
  color: #f0f6fb;
  font-size: 1.05rem;
  margin-bottom: .9rem;
}

.occ1-compare-card ul {
  display: grid;
  gap: .7rem;
}

.occ1-compare-card li {
  color: #d6e5ef;
  font-size: .95rem;
  position: relative;
  padding-left: 1.5rem;
}

.occ1-compare-card li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: .02rem;
  color: #f2818f;
  font-weight: 700;
}

.occ1-compare-card.is-positive {
  border-color: rgba(0, 208, 255, .55);
  background: rgba(0, 89, 120, .34);
  box-shadow: inset 0 0 44px rgba(0, 203, 255, .09);
}

.occ1-compare-card.is-positive li::before {
  content: "✓";
  color: #18e2c6;
}

.occ1-final {
  text-align: center;
  padding-top: 5.2rem;
  padding-bottom: 5.2rem;
}

.occ1-final .container {
  max-width: 78rem;
}

.occ1-final h2 {
  margin-top: 1rem;
  color: #f1f7fb;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.1;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

.occ1-final p {
  margin: .9rem auto 0;
  max-width: 54rem;
  color: rgba(214, 226, 235, .9);
  font-size: 1rem;
  line-height: 1.7;
}

.occ1-final-highlight {
  color: #14d6f4 !important;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem) !important;
  line-height: 1.25 !important;
}

.occ1-final .occ1-hero-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

@media(min-width:1280px) {
  .occ1-hero-copy h1 {
    font-size: 3rem;
  }

  .occ1-head h2,
  .occ1-cause h2,
  .occ1-final h2 {
    font-size: 2.45rem;
  }
}

.occ1-animate-onview .occ1-kpi-card,
.occ1-animate-onview .occ1-problem-card,
.occ1-animate-onview .occ1-step,
.occ1-animate-onview .occ1-compare-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}

.occ1-animate-onview.is-active .occ1-kpi-card,
.occ1-animate-onview.is-active .occ1-problem-card,
.occ1-animate-onview.is-active .occ1-step,
.occ1-animate-onview.is-active .occ1-compare-card {
  opacity: 1;
  transform: translateY(0);
}

.occ1-animate-onview.is-active .occ1-kpi-card:nth-child(2),
.occ1-animate-onview.is-active .occ1-problem-card:nth-child(2),
.occ1-animate-onview.is-active .occ1-step:nth-child(3),
.occ1-animate-onview.is-active .occ1-compare-card:nth-child(2) {
  transition-delay: .12s;
}

.occ1-animate-onview.is-active .occ1-kpi-card:nth-child(3),
.occ1-animate-onview.is-active .occ1-problem-card:nth-child(3),
.occ1-animate-onview.is-active .occ1-step:nth-child(4) {
  transition-delay: .22s;
}

.occ1-animate-onview.is-active .occ1-problem-card:nth-child(4),
.occ1-animate-onview.is-active .occ1-step:nth-child(5) {
  transition-delay: .3s;
}

@keyframes occ1-core-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes occ1-scroll-soft {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: .7;
  }

  50% {
    transform: translateX(-50%) translateY(4px);
    opacity: 1;
  }
}

@keyframes occ1-node-float {
  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -6px;
  }
}

@media(max-width:980px) {
  .occ1-hero {
    min-height: auto;
    padding-top: 7rem;
  }

  .occ1-lead {
    font-size: 1.05rem;
  }

  .occ1-hero-copy p,
  .occ1-head p,
  .occ1-cause p,
  .occ1-final p {
    font-size: 1rem;
  }

  .occ1-cause,
  .occ1-layer,
  .occ1-compare,
  .occ1-final {
    padding-top: 4.3rem;
    padding-bottom: 4.3rem;
  }

  .occ1-hero-orbit {
    width: min(420px, 100%);
  }

  .occ1-ring.r1 { width: 230px; height: 230px; }
  .occ1-ring.r2 { width: 305px; height: 305px; }
  .occ1-ring.r3 { width: 370px; height: 370px; }

  .occ1-core {
    width: 110px;
    height: 110px;
  }

  .occ1-orbit-node {
    width: 48px;
    height: 48px;
  }

  .occ1-orbit-node.n1 { transform: translate(-50%, -50%) translate(-86px, -145px); }
  .occ1-orbit-node.n2 { transform: translate(-50%, -50%) translate(92px, -145px); }
  .occ1-orbit-node.n3 { transform: translate(-50%, -50%) translate(170px, 0px); }
  .occ1-orbit-node.n4 { transform: translate(-50%, -50%) translate(86px, 146px); }
  .occ1-orbit-node.n5 { transform: translate(-50%, -50%) translate(-84px, 150px); }
  .occ1-orbit-node.n6 { transform: translate(-50%, -50%) translate(-168px, 8px); }

  .occ1-head h2,
  .occ1-cause h2,
  .occ1-final h2 {
    font-size: clamp(1.7rem, 8.2vw, 2.3rem);
  }

  .occ1-step h3,
  .occ1-compare-card h3 {
    font-size: 1.05rem;
  }

  .occ1-step p,
  .occ1-compare-card li {
    font-size: .95rem;
  }

  .occ1-line {
    display: none;
  }
}