/* ============================================================
   START OUT ESG — Global Internationalization Program
   style.css — Main Stylesheet
   Brand: Black / Neon Green / White — Inspired by media kit
   ============================================================ */

 /* ============================================================
   CSS CUSTOM PROPERTIES (Brand Tokens)
============================================================ */
 :root {
   /* Brand Colors */
   --green: #7FFF00;
   /* Neon chartreuse — primary accent */
   --green-glow: #7FFF0066;
   /* Green with alpha for glows */
   --green-dark: #4db800;
   /* Deeper green for hover states */
   --black: #060A06;
   /* Near-true black background */
   --black-card: #0D120D;
   /* Slightly lighter for cards */
   --black-border: #1a2a1a;
   /* Subtle green-tinted borders */
   --white: #F4FFF4;
   /* Off-white with green tint */
   --white-muted: #a8bfa8;
   /* Muted text */
   --surface: #111811;
   /* Card surfaces */
   --surface-2: #162016;
   /* Elevated card surfaces */

   /* Typography */
   --font-display: 'Bebas Neue', 'Impact', sans-serif;
   --font-body: 'DM Sans', 'Georgia', serif;
   --font-ui: 'Space Grotesk', sans-serif;

   /* Spacing */
   --section-pad: 120px;
   --container: 1200px;
   --gutter: 24px;

   /* Transitions */
   --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 /* ============================================================
   RESET & BASE
============================================================ */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
   font-size: 16px;
 }

 body {
   background-color: var(--black);
   color: var(--white);
   font-family: var(--font-body);
   line-height: 1.7;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
 }

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

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

 ul {
   list-style: none;
 }

 /* ============================================================
   UTILITY CLASSES
============================================================ */
 .container {
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 var(--gutter);
 }

 .section {
   padding: var(--section-pad) 0;
   position: relative;
 }

 .section-label {
   font-family: var(--font-ui);
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   color: var(--green);
   margin-bottom: 1rem;
 }

 .section-title {
   font-family: var(--font-display);
   font-size: clamp(2.5rem, 5vw, 4.5rem);
   line-height: 1.0;
   letter-spacing: 0.02em;
   color: var(--white);
   margin-bottom: 1.5rem;
 }

 .section-subtitle {
   font-family: var(--font-body);
   font-size: 1.125rem;
   color: var(--white-muted);
   max-width: 640px;
   margin-bottom: 4rem;
   line-height: 1.8;
 }

 .section-subtitle.text-center,
 .section-title.text-center {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
 }

 .accent-text {
   color: var(--green);
   font-style: normal;
 }

 .body-text {
   font-family: var(--font-body);
   color: var(--white-muted);
   font-size: 1.0625rem;
   line-height: 1.8;
   margin-bottom: 1.25rem;
 }

 /* ============================================================
   BUTTONS
============================================================ */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.875rem 2rem;
   font-family: var(--font-ui);
   font-size: 0.9rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   border-radius: 3px;
   cursor: pointer;
   transition: all 0.3s var(--ease);
   border: 2px solid transparent;
   position: relative;
   overflow: hidden;
 }

 .btn::after {
   content: '';
   position: absolute;
   inset: 0;
   background: white;
   opacity: 0;
   transition: opacity 0.2s;
 }

 .btn:hover::after {
   opacity: 0.06;
 }

 .btn-primary {
   background: var(--green);
   color: var(--black);
   border-color: var(--green);
 }

 .btn-primary:hover {
   background: var(--green-dark);
   border-color: var(--green-dark);
   transform: translateY(-2px);
   box-shadow: 0 8px 32px var(--green-glow);
 }

 .btn-ghost {
   background: transparent;
   color: var(--white);
   border-color: rgba(255, 255, 255, 0.2);
 }

 .btn-ghost:hover {
   border-color: var(--green);
   color: var(--green);
   transform: translateY(-2px);
 }

 .btn-outline {
   background: transparent;
   color: var(--green);
   border-color: var(--green);
 }

 .btn-outline:hover {
   background: var(--green);
   color: var(--black);
   transform: translateY(-2px);
   box-shadow: 0 8px 32px var(--green-glow);
 }

 /* ============================================================
   NAVIGATION
============================================================ */
 .navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 1.25rem 0;
   transition: all 0.4s var(--ease);
 }

 .navbar.scrolled {
   background: rgba(6, 10, 6, 0.96);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--black-border);
   padding: 0.875rem 0;
 }

 .nav-container {
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 var(--gutter);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .nav-logo {
   font-family: var(--font-display);
   font-size: 1.5rem;
   letter-spacing: 0.1em;
   display: flex;
   gap: 0.15em;
 }

 .logo-start {
   color: var(--white);
 }

 .logo-out {
   color: var(--white);
 }

 .logo-esg {
   color: var(--green);
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 2rem;
 }

 .nav-link {
   font-family: var(--font-ui);
   font-size: 0.85rem;
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--white-muted);
   transition: color 0.2s;
   position: relative;
 }

 .nav-link::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 1px;
   background: var(--green);
   transition: width 0.3s var(--ease);
 }

 .nav-link:hover {
   color: var(--white);
 }

 .nav-link:hover::after {
   width: 100%;
 }

 .nav-cta {
   font-family: var(--font-ui);
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--black);
   background: var(--green);
   padding: 0.6rem 1.4rem;
   border-radius: 3px;
   transition: all 0.3s var(--ease);
 }

 .nav-cta:hover {
   background: var(--green-dark);
   box-shadow: 0 4px 20px var(--green-glow);
   transform: translateY(-1px);
 }

 /* Hamburger */
 .hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
 }

 .hamburger span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--white);
   border-radius: 2px;
   transition: all 0.3s var(--ease);
 }

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

 .hamburger.active span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0);
 }

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

 /* Mobile nav */
 @media (max-width: 900px) {
   .hamburger {
     display: flex;
   }

   .nav-links {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     flex-direction: column;
     gap: 0;
     background: rgba(6, 10, 6, 0.98);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--black-border);
     padding: 1.5rem 0;
     align-items: stretch;
   }

   .nav-links.open {
     display: flex;
   }

   .nav-links li {
     text-align: center;
     padding: 0.75rem 1.5rem;
   }

   .nav-cta {
     margin: 0.5rem 1.5rem;
     text-align: center;
     display: block;
   }
 }

 /* ============================================================
   HERO SECTION
============================================================ */
 .hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
   padding: 140px 0 80px;
 }

 /* Grid background texture */
 .hero-bg-grid {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(127, 255, 0, 0.04) 1px, transparent 1px),
     linear-gradient(90deg, rgba(127, 255, 0, 0.04) 1px, transparent 1px);
   background-size: 60px 60px;
   animation: gridFloat 20s linear infinite;
 }

 @keyframes gridFloat {
   0% {
     transform: translateY(0);
   }

   100% {
     transform: translateY(60px);
   }
 }

 /* Glowing orbs */
 .hero-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(100px);
   pointer-events: none;
 }

 .hero-orb-1 {
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(127, 255, 0, 0.12) 0%, transparent 70%);
   top: -10%;
   right: -10%;
   animation: orbPulse 8s ease-in-out infinite;
 }

 .hero-orb-2 {
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(127, 255, 0, 0.08) 0%, transparent 70%);
   bottom: 10%;
   left: -5%;
   animation: orbPulse 12s ease-in-out infinite reverse;
 }

 @keyframes orbPulse {

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

   50% {
     transform: scale(1.15);
     opacity: 0.7;
   }
 }

 .hero-content {
   position: relative;
   z-index: 2;
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 var(--gutter);
 }

 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   font-family: var(--font-ui);
   font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--green);
   border: 1px solid rgba(127, 255, 0, 0.3);
   padding: 0.5rem 1.2rem;
   border-radius: 100px;
   margin-bottom: 2rem;
   background: rgba(127, 255, 0, 0.05);
   backdrop-filter: blur(4px);
 }

 .badge-dot {
   width: 6px;
   height: 6px;
   background: var(--green);
   border-radius: 50%;
   animation: blink 2s ease-in-out infinite;
 }

 @keyframes blink {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: 0.3;
   }
 }

 .hero-title {
   font-family: var(--font-display);
   font-size: clamp(5rem, 14vw, 12rem);
   line-height: 0.9;
   letter-spacing: 0.02em;
   margin-bottom: 2rem;
   display: flex;
   flex-direction: column;
 }

 .title-line {
   display: block;
 }

 .title-esg {
   color: var(--green);
   text-shadow: 0 0 80px rgba(127, 255, 0, 0.4);
 }

 .hero-tagline {
   font-family: var(--font-ui);
   font-size: clamp(1.1rem, 2vw, 1.4rem);
   font-weight: 400;
   color: var(--white);
   margin-bottom: 1rem;
   line-height: 1.6;
 }

 .hero-tagline strong {
   color: var(--green);
   font-weight: 700;
 }

 .hero-sub {
   font-family: var(--font-body);
   font-size: 1.0625rem;
   color: var(--white-muted);
   line-height: 1.7;
   margin-bottom: 2.5rem;
 }

 .hero-actions {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: 4rem;
 }

 /* Stats bar */
 .hero-stats {
   display: flex;
   align-items: center;
   gap: 0;
   padding: 2rem 2.5rem;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--black-border);
   border-radius: 6px;
   width: fit-content;
   backdrop-filter: blur(8px);
 }

 .stat-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 2rem;
 }

 .stat-number {
   font-family: var(--font-display);
   font-size: 3rem;
   line-height: 1;
   color: var(--green);
   text-shadow: 0 0 30px rgba(127, 255, 0, 0.5);
 }

 .stat-label {
   font-family: var(--font-ui);
   font-size: 0.7rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--white-muted);
   margin-top: 0.3rem;
 }

 .stat-divider {
   width: 1px;
   height: 48px;
   background: var(--black-border);
 }

 /* Scroll indicator */
 .hero-scroll-indicator {
   position: absolute;
   bottom: 2rem;
   right: var(--gutter);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
   font-family: var(--font-ui);
   font-size: 0.65rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--white-muted);
   writing-mode: vertical-rl;
 }

 .scroll-line {
   width: 1px;
   height: 60px;
   background: linear-gradient(to bottom, var(--green), transparent);
   animation: scrollDrop 2s ease-in-out infinite;
 }

 @keyframes scrollDrop {
   0% {
     transform: scaleY(0);
     transform-origin: top;
   }

   50% {
     transform: scaleY(1);
     transform-origin: top;
   }

   51% {
     transform: scaleY(1);
     transform-origin: bottom;
   }

   100% {
     transform: scaleY(0);
     transform-origin: bottom;
   }
 }

 /* Hero animation classes */
 .animate-up {
   opacity: 0;
   transform: translateY(30px);
   animation: fadeUp 0.8s var(--ease) forwards;
 }

 .delay-1 {
   animation-delay: 0.1s;
 }

 .delay-2 {
   animation-delay: 0.25s;
 }

 .delay-3 {
   animation-delay: 0.4s;
 }

 .delay-4 {
   animation-delay: 0.55s;
 }

 .delay-5 {
   animation-delay: 0.7s;
 }

 .delay-6 {
   animation-delay: 0.85s;
 }

 @keyframes fadeUp {
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* ============================================================
   ABOUT SECTION
============================================================ */
 .about {
   background: linear-gradient(180deg, var(--black) 0%, var(--black-card) 100%);
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: start;
 }

 .about-left .section-title {
   margin-bottom: 1.5rem;
 }

 .about-right {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   padding-top: 1rem;
 }

 .problem-card {
   background: var(--surface);
   border: 1px solid var(--black-border);
   border-radius: 8px;
   padding: 1.5rem;
   display: flex;
   gap: 1rem;
   align-items: flex-start;
   transition: all 0.3s var(--ease);
 }

 .problem-card:hover {
   border-color: rgba(127, 255, 0, 0.3);
   background: var(--surface-2);
   transform: translateX(6px);
 }

 .problem-icon {
   font-size: 1.5rem;
   flex-shrink: 0;
   margin-top: 0.1rem;
 }

 .problem-card h3 {
   font-family: var(--font-ui);
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 0.4rem;
   letter-spacing: 0.02em;
 }

 .problem-card p {
   font-family: var(--font-body);
   font-size: 0.9rem;
   color: var(--white-muted);
   line-height: 1.6;
 }

 /* ============================================================
   TRILATERAL HUB
============================================================ */
 .trilateral {
   background: var(--black-card);
   overflow: hidden;
 }

 .trilateral::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 800px;
   height: 800px;
   border-radius: 50%;
   border: 1px solid rgba(127, 255, 0, 0.05);
   pointer-events: none;
 }

 .trilateral-hub {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3rem;
   margin-bottom: 3rem;
   position: relative;
 }

 /* Center node */
 .hub-center {
   position: relative;
   z-index: 2;
 }

 .hub-center-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(127, 255, 0, 0.15) 0%, rgba(127, 255, 0, 0.03) 70%);
   border: 2px solid var(--green);
   box-shadow: 0 0 60px rgba(127, 255, 0, 0.2), inset 0 0 40px rgba(127, 255, 0, 0.05);
   animation: nodePulse 3s ease-in-out infinite;
 }

 @keyframes nodePulse {

   0%,
   100% {
     box-shadow: 0 0 40px rgba(127, 255, 0, 0.2), inset 0 0 30px rgba(127, 255, 0, 0.05);
   }

   50% {
     box-shadow: 0 0 80px rgba(127, 255, 0, 0.4), inset 0 0 50px rgba(127, 255, 0, 0.1);
   }
 }

 .hub-center-icon {
   font-size: 2rem;
   margin-bottom: 0.3rem;
 }

 .hub-center-label {
   font-family: var(--font-ui);
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--green);
   text-align: center;
   line-height: 1.3;
 }

 .hub-center-label small {
   font-size: 0.65rem;
   font-weight: 400;
   color: var(--white-muted);
 }

 .hub-center-sub {
   font-family: var(--font-ui);
   font-size: 0.6rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--white-muted);
   margin-top: 0.25rem;
 }

 /* Three poles */
 .hub-poles {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
   width: 100%;
 }

.hub-pole {
background: var(--surface);
border: 1px solid var(--black-border);
border-radius: 10px;
padding: 2rem;
text-align: center;
transition: all 0.4s var(--ease);
position: relative;
overflow: hidden;
min-height: 320px; /* <--- ADICIONE ESTA LINHA COM A ALTURA QUE DESEJAR */
}

 .hub-pole::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--green);
   transform: scaleX(0);
   transition: transform 0.4s var(--ease);
 }

 .hub-pole:hover {
   border-color: rgba(127, 255, 0, 0.3);
   transform: translateY(-6px);
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(127, 255, 0, 0.08);
 }

 .hub-pole:hover::before {
   transform: scaleX(1);
 }

 .pole-flag {
   font-size: 2.5rem;
   margin-bottom: 0.75rem;
 }

 .hub-pole h3 {
   font-family: var(--font-display);
   font-size: 2rem;
   letter-spacing: 0.05em;
   color: var(--green);
   margin-bottom: 0.5rem;
 }

 .pole-desc {
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--white-muted);
   margin-bottom: 1.25rem;
   line-height: 1.6;
 }

 .pole-benefits {
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }

 .pole-benefits li {
   font-family: var(--font-ui);
   font-size: 0.8rem;
   color: var(--white-muted);
   padding-left: 1rem;
   position: relative;
   line-height: 1.5;
 }

 .pole-benefits li::before {
   content: '→';
   position: absolute;
   left: 0;
   color: var(--green);
   font-size: 0.75rem;
 }

 .hub-tagline {
   text-align: center;
   font-family: var(--font-display);
   font-size: clamp(1.2rem, 2.5vw, 2rem);
   letter-spacing: 0.05em;
   padding: 2rem;
   border: 1px solid var(--black-border);
   border-radius: 6px;
   background: var(--surface);
 }

 .hub-sub-tagline {
   font-family: var(--font-body);
   font-size: 1rem;
   color: var(--white-muted);
   font-style: italic;
 }

 /* ============================================================
   PROGRAM CYCLE
============================================================ */
 .program {
   background: var(--black);
 }

 .cycle-track {
   position: relative;
   margin-bottom: 4rem;
 }

 .cycle-progress-bar {
   position: absolute;
   top: 2rem;
   left: 2rem;
   width: 4px;
   height: calc(100% - 4rem);
   background: var(--black-border);
   border-radius: 4px;
 }

 .cycle-progress-fill {
   width: 100%;
   background: linear-gradient(to bottom, var(--green), rgba(127, 255, 0, 0.3));
   border-radius: 4px;
   height: 0;
   transition: height 1.5s var(--ease);
 }

 .cycle-steps {
   display: flex;
   flex-direction: column;
   gap: 3rem;
   padding-left: 5rem;
 }

 .cycle-step {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 2rem;
   align-items: start;
   opacity: 0;
   transform: translateX(-20px);
   transition: all 0.6s var(--ease);
 }

 .cycle-step.visible {
   opacity: 1;
   transform: translateX(0);
 }

 .step-node {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--surface-2);
   border: 2px solid var(--black-border);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: all 0.4s var(--ease);
   position: relative;
 }

 .cycle-step:hover .step-node {
   border-color: var(--green);
   box-shadow: 0 0 30px rgba(127, 255, 0, 0.3);
 }

 .step-number {
   font-family: var(--font-display);
   font-size: 1.5rem;
   color: var(--green);
 }

 .step-content {
   background: var(--surface);
   border: 1px solid var(--black-border);
   border-radius: 10px;
   padding: 2rem;
   transition: all 0.4s var(--ease);
 }

 .cycle-step:hover .step-content {
   border-color: rgba(127, 255, 0, 0.2);
   background: var(--surface-2);
 }

 .step-phase {
   font-family: var(--font-ui);
   font-size: 0.7rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--green);
   margin-bottom: 0.4rem;
 }

 .step-title {
   font-family: var(--font-display);
   font-size: 2rem;
   letter-spacing: 0.05em;
   color: var(--white);
   margin-bottom: 0.25rem;
 }

 .step-duration {
   font-family: var(--font-ui);
   font-size: 0.8rem;
   color: var(--white-muted);
   margin-bottom: 1rem;
 }

 .step-desc {
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: var(--white-muted);
   line-height: 1.75;
   margin-bottom: 1rem;
 }

 .step-tag {
   display: inline-flex;
   font-family: var(--font-ui);
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--black);
   background: var(--green);
   padding: 0.3rem 0.8rem;
   border-radius: 100px;
 }

 /* Roadmap */
 .roadmap {
   background: var(--surface);
   border: 1px solid var(--black-border);
   border-radius: 12px;
   padding: 2.5rem;
 }

 .roadmap-title {
   font-family: var(--font-display);
   font-size: 1.8rem;
   letter-spacing: 0.05em;
   color: var(--white);
   margin-bottom: 2rem;
 }

 .roadmap-timeline {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
   position: relative;
 }

 .roadmap-timeline::before {
   content: '';
   position: absolute;
   top: 1.5rem;
   left: 6%;
   right: 6%;
   height: 1px;
   background: var(--green);
   opacity: 0.3;
 }

 .roadmap-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
 }

 .roadmap-month {
   font-family: var(--font-display);
   font-size: 1.5rem;
   color: var(--green);
   margin-bottom: 0.75rem;
   background: var(--surface);
   padding: 0 0.75rem;
   position: relative;
   z-index: 1;
 }

 .roadmap-event {
   font-family: var(--font-ui);
   font-size: 0.8rem;
   color: var(--white-muted);
   line-height: 1.5;
 }

 /* ============================================================
   METHODOLOGY
============================================================ */
 .methodology {
   background: var(--black-card);
 }

/* DEPOIS */
.methodology-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.method-card {
  height: 100%;
}

 .method-card {
   background: var(--surface);
   border: 1px solid var(--black-border);
   border-radius: 10px;
   padding: 2rem;
   transition: all 0.4s var(--ease);
 }

 .method-card:hover {
   border-color: rgba(127, 255, 0, 0.25);
   transform: translateY(-4px);
 }

 .method-card--featured {
   background: linear-gradient(135deg, rgba(127, 255, 0, 0.08) 0%, var(--surface-2) 100%);
   border-color: rgba(127, 255, 0, 0.3);
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .method-icon {
   font-size: 2rem;
   margin-bottom: 1rem;
 }

 .method-card h3 {
   font-family: var(--font-ui);
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 1rem;
   line-height: 1.4;
 }

 .method-card ul {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
 }

 .method-card ul li {
   font-family: var(--font-body);
   font-size: 0.85rem;
   color: var(--white-muted);
   padding-left: 1rem;
   position: relative;
   line-height: 1.5;
 }

 .method-card ul li::before {
   content: '▸';
   position: absolute;
   left: 0;
   color: var(--green);
   font-size: 0.7rem;
 }

 .method-card p {
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: var(--white-muted);
   line-height: 1.75;
 }

 .method-badge {
   display: inline-flex;
   margin-top: 1.25rem;
   font-family: var(--font-ui);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--green);
   border: 1px solid rgba(127, 255, 0, 0.4);
   padding: 0.4rem 0.9rem;
   border-radius: 100px;
 }

 /* ============================================================
   SELECTION SECTION
============================================================ */
 .selection {
   background: var(--black);
 }

 .criteria-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
   margin-bottom: 4rem;
 }

 .criteria-card {
   background: var(--surface);
   border: 1px solid var(--black-border);
   border-radius: 10px;
   padding: 2rem;
   text-align: center;
   transition: all 0.4s var(--ease);
 }

 .criteria-card:hover {
   border-color: rgba(127, 255, 0, 0.3);
   transform: translateY(-6px);
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
 }

 .criteria-icon {
   font-size: 2rem;
   margin-bottom: 1rem;
 }

 .criteria-card h3 {
   font-family: var(--font-ui);
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--green);
   margin-bottom: 0.75rem;
   letter-spacing: 0.03em;
 }

 .criteria-card p {
   font-family: var(--font-body);
   font-size: 0.85rem;
   color: var(--white-muted);
   line-height: 1.65;
 }

 /* Value Matrix */
 .value-matrix {
   background: var(--surface);
   border: 1px solid var(--black-border);
   border-radius: 12px;
   overflow: hidden;
 }

 .matrix-title {
   font-family: var(--font-ui);
   font-size: 1rem;
   font-weight: 700;
   color: var(--white);
   padding: 1.5rem 2rem;
   border-bottom: 1px solid var(--black-border);
   background: var(--surface-2);
 }

 .matrix-table {
   padding: 1.5rem 2rem;
 }

 .matrix-header,
 .matrix-row {
   display: grid;
   grid-template-columns: 1.5fr 2fr 2fr;
   gap: 1rem;
   padding: 0.75rem 0;
   border-bottom: 1px solid var(--black-border);
 }

 .matrix-header {
   border-bottom: 2px solid rgba(127, 255, 0, 0.2);
 }

 .matrix-cell {
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--white-muted);
   line-height: 1.5;
 }

 .matrix-col-header {
   font-family: var(--font-ui);
   font-size: 0.8rem;
   font-weight: 700;
   color: var(--green);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 .matrix-col-header small {
   font-weight: 400;
   text-transform: none;
   letter-spacing: 0;
   color: var(--white-muted);
 }

 .matrix-row-header {
   font-family: var(--font-ui);
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--white);
   letter-spacing: 0.03em;
 }

 .matrix-synergy {
   font-family: var(--font-body);
   font-size: 0.9rem;
   color: var(--white-muted);
   padding: 1.25rem 2rem 1.5rem;
   font-style: italic;
   line-height: 1.6;
 }

 /* ============================================================
   GOVERNANCE SECTION
============================================================ */
 .governance {
   background: var(--black-card);
 }

 .governance-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
   margin-bottom: 4rem;
 }

 .gov-card {
   background: var(--surface);
   border: 1px solid var(--black-border);
   border-radius: 10px;
   padding: 2.5rem;
   transition: all 0.4s var(--ease);
   position: relative;
   overflow: hidden;
 }

 .gov-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--green);
   transform: scaleX(0);
   transition: transform 0.4s var(--ease);
 }

 .gov-card:hover {
   border-color: rgba(127, 255, 0, 0.2);
   transform: translateY(-4px);
 }

 .gov-card:hover::after {
   transform: scaleX(1);
 }

 .gov-number {
   font-family: var(--font-display);
   font-size: 4rem;
   color: rgba(127, 255, 0, 0.15);
   line-height: 1;
   margin-bottom: 1rem;
 }

 .gov-card h3 {
   font-family: var(--font-ui);
   font-size: 1rem;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 0.75rem;
 }

 .gov-card p {
   font-family: var(--font-body);
   font-size: 0.9rem;
   color: var(--white-muted);
   line-height: 1.7;
 }

 .governance-quote {
   text-align: center;
   padding: 4rem 2rem;
   border: 1px solid var(--black-border);
   border-radius: 12px;
   background: linear-gradient(135deg, rgba(127, 255, 0, 0.04) 0%, transparent 100%);
   position: relative;
 }

 .governance-quote::before {
   content: '"';
   position: absolute;
   top: -2rem;
   left: 50%;
   transform: translateX(-50%);
   font-family: var(--font-display);
   font-size: 8rem;
   color: rgba(127, 255, 0, 0.1);
   line-height: 1;
 }

 blockquote {
   font-family: var(--font-display);
   font-size: clamp(2rem, 4vw, 3.5rem);
   letter-spacing: 0.04em;
   color: var(--white);
   line-height: 1.2;
   margin-bottom: 1.5rem;
 }

 blockquote .accent-text {
   display: block;
 }

 cite {
   font-family: var(--font-ui);
   font-size: 0.8rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--white-muted);
   font-style: normal;
 }

 /* ============================================================
   CTA SECTION
============================================================ */
 .cta-section {
   background: var(--black);
   overflow: hidden;
 }

 .cta-bg-effect {
   position: absolute;
   inset: 0;
   background:
     radial-gradient(ellipse 80% 60% at 50% 100%, rgba(127, 255, 0, 0.06) 0%, transparent 70%);
   pointer-events: none;
 }

 .cta-inner {
   position: relative;
   z-index: 1;
 }

 .cta-title {
   font-family: var(--font-display);
   font-size: clamp(3.5rem, 8vw, 7rem);
   line-height: 0.95;
   letter-spacing: 0.02em;
   margin-bottom: 1.5rem;
 }

 .cta-body {
   font-family: var(--font-body);
   font-size: 1.125rem;
   color: var(--white-muted);
   max-width: 680px;
   line-height: 1.8;
   margin-bottom: 3.5rem;
 }

 .cta-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   margin-bottom: 3rem;
 }

 .cta-card {
   background: var(--surface);
   border: 1px solid var(--black-border);
   border-radius: 12px;
   padding: 2.5rem;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   transition: all 0.4s var(--ease);
   position: relative;
 }

 .cta-card:hover {
   border-color: rgba(127, 255, 0, 0.3);
   transform: translateY(-6px);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
 }

 .cta-card--featured {
   border-color: rgba(127, 255, 0, 0.4);
   background: linear-gradient(135deg, rgba(127, 255, 0, 0.1) 0%, var(--surface-2) 100%);
 }

 .cta-card-badge {
   position: absolute;
   top: -0.75rem;
   right: 1.5rem;
   font-family: var(--font-ui);
   font-size: 0.65rem;
   font-weight: 900;
   letter-spacing: 0.15em;
   color: var(--black);
   background: var(--green);
   padding: 0.2rem 0.7rem;
   border-radius: 100px;
 }

 .cta-card-icon {
   font-size: 2.5rem;
 }

 .cta-card h3 {
   font-family: var(--font-ui);
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--white);
   line-height: 1.4;
 }

 .cta-card p {
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--white-muted);
   line-height: 1.6;
   flex: 1;
 }

 .cta-contact {
   display: flex;
   align-items: center;
   gap: 1rem;
   font-family: var(--font-ui);
   font-size: 0.875rem;
   color: var(--white-muted);
   flex-wrap: wrap;
 }

 .cta-contact a {
   color: var(--green);
   transition: color 0.2s;
 }

 .cta-contact a:hover {
   color: var(--white);
 }

 .contact-divider {
   color: var(--black-border);
 }

 /* ============================================================
   FOOTER
============================================================ */
 .footer {
   background: var(--black-card);
   border-top: 1px solid var(--black-border);
   padding: 5rem 0 2rem;
 }

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

 .footer-logo {
   font-family: var(--font-display);
   font-size: 2rem;
   letter-spacing: 0.1em;
   display: flex;
   gap: 0.15em;
   margin-bottom: 1rem;
 }

 .footer-tagline {
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--white-muted);
   line-height: 1.7;
   margin-bottom: 1.25rem;
 }

 .footer-flags {
   display: flex;
   gap: 0.75rem;
   font-size: 1.5rem;
 }

 .footer-links h4,
 .footer-contact h4 {
   font-family: var(--font-ui);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--green);
   margin-bottom: 1.25rem;
 }

 .footer-links ul {
   display: flex;
   flex-direction: column;
   gap: 0.7rem;
 }

 .footer-links a {
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--white-muted);
   transition: color 0.2s;
 }

 .footer-links a:hover {
   color: var(--green);
 }

 .footer-contact p,
 .footer-contact a {
   display: block;
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--white-muted);
   margin-bottom: 0.5rem;
   transition: color 0.2s;
 }

 .footer-contact a:hover {
   color: var(--green);
 }

 .footer-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 2rem;
   border-top: 1px solid var(--black-border);
   font-family: var(--font-ui);
   font-size: 0.75rem;
   color: var(--white-muted);
   flex-wrap: wrap;
   gap: 0.5rem;
 }

 .footer-powered {
   color: rgba(127, 255, 0, 0.5);
 }

 /* ============================================================
   SCROLL REVEAL ANIMATIONS
============================================================ */
 .reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
 }

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

 .reveal-delay-1 {
   transition-delay: 0.1s;
 }

 .reveal-delay-2 {
   transition-delay: 0.2s;
 }

 .reveal-delay-3 {
   transition-delay: 0.3s;
 }

 .reveal-delay-4 {
   transition-delay: 0.4s;
 }

 /* ============================================================
   RESPONSIVE — TABLET
============================================================ */
 @media (max-width: 1024px) {
   :root {
     --section-pad: 80px;
   }

   .about-grid {
     grid-template-columns: 1fr;
     gap: 3rem;
   }

   .hub-poles {
     grid-template-columns: 1fr;
     gap: 1rem;
   }

   .methodology-grid {
     grid-template-columns: 1fr 1fr;
   }

   .criteria-grid {
     grid-template-columns: 1fr 1fr;
   }

   .governance-grid {
     grid-template-columns: 1fr 1fr;
   }

   .cta-cards {
     grid-template-columns: 1fr;
     max-width: 480px;
     margin-left: auto;
     margin-right: auto;
   }

   .footer-grid {
     grid-template-columns: 1fr 1fr;
     gap: 2.5rem;
   }

   .roadmap-timeline {
     grid-template-columns: 1fr 1fr;
   }
 }

 /* ============================================================
   RESPONSIVE — MOBILE
============================================================ */
 @media (max-width: 640px) {
   :root {
     --section-pad: 60px;
   }

   .hero-stats {
     flex-wrap: wrap;
     justify-content: center;
     gap: 1.5rem;
     width: 100%;
   }

   .stat-divider {
     display: none;
   }

   .cycle-steps {
     padding-left: 2rem;
   }

   .cycle-progress-bar {
     left: 0;
   }

   .methodology-grid {
     grid-template-columns: 1fr;
   }

   .criteria-grid {
     grid-template-columns: 1fr;
   }

   .governance-grid {
     grid-template-columns: 1fr;
   }

   .roadmap-timeline {
     grid-template-columns: 1fr;
   }

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

   .matrix-table {
     overflow-x: auto;
   }

   .matrix-header,
   .matrix-row {
     min-width: 500px;
   }

   .hub-tagline {
     font-size: 1rem;
   }

   .footer-bottom {
     flex-direction: column;
     text-align: center;
   }

   .hero-scroll-indicator {
     display: none;
   }
 }

 .method-center-command {
   border: 1px solid rgba(127, 255, 0, 0.6);
   border-radius: 12px;
   padding: 16px 24px;
   margin-bottom: 30px;
   text-align: center;
   background: rgba(127, 255, 0, 0.05);
 }

 .method-center-content h3 {
   margin: 6px 0;
   color: #7FFF00;
 }

 .method-center-content p {
   font-size: 14px;
   opacity: 0.85;
   margin: 0;
 }

 .method-center-icon {
   font-size: 20px;
 }


 /* ============================================================
   SVG ICON SYSTEM — Replaces emoji throughout the page
   Thin-line style matching the START OUT ESG media kit
============================================================ */

 /* Base SVG icon — inherits color from parent, scales cleanly */
 .svg-icon {
   display: block;
   width: 100%;
   height: 100%;
   color: var(--green);
   stroke: var(--green);
 }

 /* ---- Problem cards (About section) ---- */
 .problem-icon {
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   margin-top: 0.1rem;
   color: var(--green);
   filter: drop-shadow(0 0 6px rgba(127, 255, 0, 0.5));
   transition: filter 0.3s;
 }

 .problem-card:hover .problem-icon {
   filter: drop-shadow(0 0 12px rgba(127, 255, 0, 0.9));
 }

 /* ---- Hub center icon ---- */
 .hub-center-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   margin-bottom: 0.3rem;
   color: var(--green);
   filter: drop-shadow(0 0 8px rgba(127, 255, 0, 0.7));
 }

 /* ---- Method center command icon ---- */
 .method-center-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 56px;
   margin-bottom: 1rem;
   color: var(--green);
   filter: drop-shadow(0 0 10px rgba(127, 255, 0, 0.6));
 }

 /* ---- Method card icons (E, S, G) ---- */
 .method-icon {
   width: 48px;
   height: 48px;
   margin-bottom: 1rem;
   color: var(--green);
   filter: drop-shadow(0 0 6px rgba(127, 255, 0, 0.5));
   transition: filter 0.3s;
 }

 .method-card:hover .method-icon {
   filter: drop-shadow(0 0 14px rgba(127, 255, 0, 0.9));
 }

 /* ---- Selection criteria icons ---- */
 .criteria-icon {
   width: 52px;
   height: 52px;
   margin: 0 auto 1rem;
   color: var(--green);
   filter: drop-shadow(0 0 6px rgba(127, 255, 0, 0.5));
   transition: filter 0.3s, transform 0.3s;
 }

 .criteria-card:hover .criteria-icon {
   filter: drop-shadow(0 0 14px rgba(127, 255, 0, 0.9));
   transform: scale(1.08);
 }

 /* ---- CTA card icons ---- */
 .cta-card-icon {
   width: 52px;
   height: 52px;
   color: var(--green);
   filter: drop-shadow(0 0 8px rgba(127, 255, 0, 0.5));
   transition: filter 0.3s, transform 0.3s;
 }

 .cta-card:hover .cta-card-icon {
   filter: drop-shadow(0 0 16px rgba(127, 255, 0, 1));
   transform: translateY(-3px);
 }

 /* ---- Governance quote update — no icon needed ---- */
 /* FIX — garantir visibilidade do ciclo */
.cycle-step {
  opacity: 1 !important;
  transform: none !important;
}