:root {
  --green: #087443;
  --green-deep: #06452e;
  --green-dark: #092d24;
  --gold: #f5c400;
  --gold-soft: #ffe27a;
  --red: #c94732;
  --cream: #f8f6ef;
  --ink: #16372d;
  --muted: #6b7c72;
  --white: #fffdf8;
  --line: #dce3db;
  --shadow: 0 18px 50px rgba(8, 68, 43, .1);
  --display: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --body: 'Segoe UI', Tahoma, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: var(--body); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.section-pad { padding: 120px 0; }
.eyebrow { align-items: center; color: var(--green); display: flex; font-size: .72rem; font-weight: 800; gap: 10px; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { background: var(--gold); display: inline-block; height: 3px; width: 28px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; }
h1 { color: var(--white); font-size: clamp(3.25rem, 6.4vw, 5.8rem); letter-spacing: -.06em; }
h2 { font-size: clamp(2.6rem, 5vw, 4.55rem); letter-spacing: -.055em; }
h1 em, h2 em { color: var(--gold); font-style: normal; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-size: .82rem; font-weight: 800; gap: 20px; justify-content: center; letter-spacing: .04em; min-height: 54px; padding: 0 23px; transition: .3s ease; }
.button span { font-size: 1.25rem; transition: transform .3s ease; }
.button:hover span { transform: translateX(4px); }
.button-primary { background: var(--gold); color: var(--green-dark); }
.button-primary:hover { background: var(--white); box-shadow: 0 8px 20px rgba(245,196,0,.23); transform: translateY(-2px); }
.button-ghost { border-color: rgba(255,253,248,.45); color: var(--white); }
.button-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.button-light { background: var(--white); color: var(--green-dark); }
.button-light:hover { background: var(--gold); transform: translateY(-2px); }

.site-header { background: rgba(248,246,239,.94); border-bottom: 1px solid rgba(16,70,48,.08); left: 0; position: fixed; right: 0; top: 0; z-index: 20; }
.navbar { align-items: center; display: flex; height: 82px; justify-content: space-between; }
.brand { align-items: center; display: inline-flex; gap: 11px; }
.brand-logo { display: block; height: 38px; object-fit: contain; width: 38px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { color: var(--green-dark); font-family: var(--display); font-size: 1.35rem; letter-spacing: .08em; }
.brand-copy small { color: var(--muted); font-size: .52rem; font-weight: 800; letter-spacing: .08em; margin-top: 5px; text-transform: uppercase; }
.nav-menu { align-items: center; display: flex; gap: 30px; }
.nav-menu > a { color: #355348; font-size: .76rem; font-weight: 700; position: relative; }
.nav-menu > a:not(.nav-cta)::after { background: var(--gold); bottom: -8px; content: ''; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .25s; width: 100%; }
.nav-menu > a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { background: var(--green); color: var(--white) !important; padding: 12px 17px; }
.nav-cta span { color: var(--gold); font-size: 1.05rem; margin-left: 7px; }
.menu-toggle { background: none; border: 0; display: none; padding: 5px; }
.menu-toggle span { background: var(--green-dark); display: block; height: 2px; margin: 5px 0; transition: .3s; width: 26px; }

.hero { background: var(--green); min-height: 740px; overflow: hidden; padding-top: 82px; position: relative; }
.hero::before { background: var(--red); border-radius: 50%; content: ''; height: 500px; opacity: .14; position: absolute; right: -180px; top: -180px; width: 500px; }
.hero-pattern { background-image: linear-gradient(135deg, rgba(245,196,0,.1) 12%, transparent 12%, transparent 50%, rgba(245,196,0,.1) 50%, rgba(245,196,0,.1) 62%, transparent 62%); background-size: 45px 45px; bottom: 0; left: 0; opacity: .3; position: absolute; top: 0; width: 45%; }
.hero-grid { align-items: center; display: grid; grid-template-columns: 1.07fr .93fr; min-height: 658px; position: relative; }
.hero-content { padding: 50px 0; position: relative; z-index: 1; }
.hero .eyebrow { color: var(--gold-soft); margin-bottom: 30px; }
.hero-lead { color: rgba(255,253,248,.78); font-size: 1.05rem; max-width: 535px; padding: 28px 0 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { align-items: center; color: rgba(255,253,248,.53); display: flex; font-size: .72rem; gap: 12px; margin-top: 34px; }
.note-line { background: var(--red); display: inline-block; height: 2px; width: 32px; }
.hero-visual { height: 500px; position: relative; }
.visual-ring { border: 1px solid rgba(255,226,122,.35); border-radius: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.ring-one { height: 380px; width: 380px; }
.ring-two { border-color: rgba(255,253,248,.22); height: 280px; width: 280px; }
.visual-core { align-items: center; background: var(--gold); border-radius: 50%; color: var(--green-dark); display: flex; flex-direction: column; height: 156px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 156px; }
.visual-core span { font-family: var(--display); font-size: 2.2rem; font-weight: 800; letter-spacing: .1em; }
.visual-core small { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.visual-tag { background: rgba(255,253,248,.1); border: 1px solid rgba(255,253,248,.27); color: var(--white); font-size: .73rem; padding: 13px 15px; position: absolute; }
.visual-tag b { color: var(--gold); font-size: 1.1rem; margin-left: 25px; }
.tag-top { right: 0; top: 19%; }.tag-bottom { bottom: 17%; left: 2%; }.visual-dot { background: var(--red); border-radius: 50%; height: 10px; position: absolute; width: 10px; }.dot-one { left: 19%; top: 30%; }.dot-two { background: var(--gold); right: 18%; top: 67%; }.dot-three { bottom: 13%; right: 30%; }
.scroll-cue { align-items: center; bottom: 29px; color: rgba(255,253,248,.55); display: flex; font-size: .67rem; gap: 11px; left: max(32px, calc((100vw - 1160px) / 2)); letter-spacing: .14em; position: absolute; text-transform: uppercase; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }.scroll-cue span { background: var(--gold); height: 2px; width: 30px; }

.intro-section { background: var(--cream); }.intro-grid { display: grid; gap: 90px; grid-template-columns: .9fr 1.1fr; }.intro-text { max-width: 600px; }.large-copy { color: var(--green-dark); font-family: var(--display); font-size: 1.42rem; line-height: 1.45; margin-bottom: 20px; }.intro-text > p:not(.large-copy) { color: var(--muted); font-size: .95rem; }.values-row { border-top: 1px solid var(--line); display: flex; gap: 30px; margin-top: 31px; padding-top: 17px; }.values-row span { color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.vision-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 86px; }.vision-card { background: var(--white); border-top: 3px solid var(--gold); box-shadow: var(--shadow); min-height: 270px; padding: 29px 29px 24px; position: relative; transition: transform .3s, box-shadow .3s; }.vision-card:hover { box-shadow: 0 24px 50px rgba(8,68,43,.16); transform: translateY(-7px); }.vision-card:nth-child(2) { border-top-color: var(--red); }.vision-card:nth-child(3) { border-top-color: var(--green); }.card-number { color: #afbbb3; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }.card-icon { color: var(--green); font-size: 2.25rem; line-height: 1; margin: 28px 0 16px; }.vision-card h3 { font-size: 1.35rem; margin-bottom: 11px; }.vision-card p { color: var(--muted); font-size: .88rem; }

.dark-section, .method-section { background: var(--green-dark); color: var(--white); }.section-heading-light .eyebrow { color: var(--gold-soft); }.section-heading-light h2 { color: var(--white); }.section-heading-light { margin-bottom: 68px; }.objective-grid { display: grid; grid-template-columns: repeat(3, 1fr); }.objective-card { border-bottom: 1px solid rgba(255,255,255,.16); border-right: 1px solid rgba(255,255,255,.16); min-height: 230px; padding: 28px 34px 25px; position: relative; transition: background .3s; }.objective-card:nth-child(3n) { border-right: 0; }.objective-card:nth-child(n+4) { border-bottom: 0; }.objective-card:hover { background: rgba(255,255,255,.04); }.objective-card > span { color: var(--gold); font-size: .72rem; font-weight: 800; }.line-icon { color: var(--gold); font-size: 2rem; margin: 27px 0 12px; }.objective-card h3 { font-size: 1.35rem; }.objective-card p { color: rgba(255,255,255,.57); font-size: .82rem; margin-top: 8px; max-width: 215px; }

.domains-section { background: var(--cream); }.split-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 58px; }.split-heading > p { color: var(--muted); max-width: 320px; }.domain-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }.domain-card { background: var(--white); border-bottom: 3px solid transparent; min-height: 220px; padding: 24px; position: relative; transition: .3s; }.domain-card:hover { border-bottom-color: var(--green); box-shadow: var(--shadow); transform: translateY(-5px); }.domain-feature { background: var(--green); color: var(--white); grid-row: span 2; min-height: 452px; }.domain-feature:hover { border-bottom-color: var(--gold); }.domain-index { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }.domain-feature .domain-index { color: var(--gold-soft); }.domain-symbol { color: var(--green); font-size: 2rem; margin: 36px 0 21px; }.domain-feature .domain-symbol { color: var(--gold); margin-top: 112px; }.domain-card h3 { font-size: 1.35rem; }.domain-feature h3 { font-size: 2rem; }.domain-card p { color: rgba(255,255,255,.65); font-size: .85rem; margin-top: 15px; max-width: 200px; }.domain-card > a { bottom: 21px; color: var(--green); font-size: 1.5rem; position: absolute; right: 22px; transition: .3s; }.domain-card:hover > a { transform: translateX(5px); }.domain-feature > a { color: var(--gold); }

.method-section { background: var(--green); }.method-track { align-items: start; display: flex; justify-content: space-between; }.method-step { flex: 0 0 115px; text-align: center; }.method-step > span { color: var(--gold-soft); font-size: .68rem; font-weight: 800; }.method-node { align-items: center; background: var(--white); border-radius: 50%; color: var(--green); display: flex; font-size: 1.5rem; height: 64px; justify-content: center; margin: 17px auto; position: relative; width: 64px; }.method-step:nth-child(even) .method-node { background: var(--gold); }.method-step h3 { font-size: 1.03rem; }.method-step p { color: rgba(255,255,255,.58); font-size: .72rem; margin-top: 7px; }.method-connector { background: rgba(255,255,255,.35); height: 1px; margin-top: 49px; width: 42px; }

.studies-section { background: var(--white); }.studies-grid { align-items: center; display: grid; gap: 100px; grid-template-columns: 1fr 1fr; }.heading-text { color: var(--muted); font-size: .95rem; margin-top: 27px; max-width: 430px; }.coming-soon { border: 1px solid var(--line); padding: 52px; position: relative; }.coming-mark { color: var(--green); font-family: var(--display); font-size: 3.5rem; font-weight: 800; letter-spacing: .08em; opacity: .14; position: absolute; right: 36px; top: 27px; }.coming-label { color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.coming-soon h3 { font-size: 3rem; margin: 22px 0 11px; }.coming-soon > p:not(.coming-label) { color: var(--muted); font-size: .9rem; max-width: 340px; }.status-pill { align-items: center; background: #eff4ec; color: var(--green); display: inline-flex; font-size: .7rem; font-weight: 800; gap: 8px; margin-top: 28px; padding: 8px 12px; }.status-pill i { background: var(--gold); border-radius: 50%; height: 7px; width: 7px; }

.participate-section { background: var(--red); color: var(--white); padding: 105px 0; }.participate-grid { display: grid; gap: 120px; grid-template-columns: .9fr 1.1fr; }.participate-content .eyebrow { color: var(--gold-soft); }.participate-content h2 { margin: 30px 0 24px; }.participate-content > p:not(.eyebrow) { color: rgba(255,255,255,.75); max-width: 390px; }.participate-content .button { margin-top: 30px; }.participation-list { border-top: 1px solid rgba(255,255,255,.35); }.participation-item { align-items: center; border-bottom: 1px solid rgba(255,255,255,.35); display: grid; gap: 24px; grid-template-columns: 45px 1fr 30px; min-height: 92px; transition: padding .3s, background .3s; }.participation-item:hover { background: rgba(0,0,0,.08); padding: 0 15px; }.participation-number { color: var(--gold-soft); font-size: .7rem; font-weight: 800; }.participation-item strong { display: block; font-family: var(--display); font-size: 1.22rem; }.participation-item small { color: rgba(255,255,255,.63); font-size: .75rem; }.participation-item b { color: var(--gold); font-size: 1.4rem; }

.contact-section { background: var(--cream); }.contact-grid { display: grid; gap: 120px; grid-template-columns: .85fr 1.15fr; }.contact-detail { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 15px; margin-top: 45px; max-width: 320px; padding-top: 18px; }.contact-detail > span { color: var(--red); font-size: 1.6rem; }.contact-detail small, .contact-detail strong { display: block; }.contact-detail small { color: var(--muted); font-size: .68rem; text-transform: uppercase; }.contact-detail strong { color: var(--green); font-size: .93rem; }.contact-form { background: var(--white); box-shadow: var(--shadow); padding: 38px; }.form-row { margin-bottom: 22px; }.form-row label { color: var(--green-dark); display: block; font-size: .73rem; font-weight: 800; margin-bottom: 8px; }.form-row input, .form-row textarea { background: transparent; border: 1px solid var(--line); color: var(--ink); outline: 0; padding: 13px 15px; resize: vertical; transition: .25s; width: 100%; }.form-row input:focus, .form-row textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(8,116,67,.1); }.form-row input.invalid, .form-row textarea.invalid { border-color: var(--red); }.field-error { color: var(--red); display: block; font-size: .72rem; min-height: 15px; padding-top: 4px; }.contact-form .button { border: 0; cursor: pointer; }.form-status { color: var(--green); font-size: .78rem; margin-top: 15px; min-height: 20px; }

.site-footer { background: var(--green-dark); color: var(--white); padding: 66px 0 24px; }.footer-top { display: grid; gap: 45px; grid-template-columns: 2fr 1fr 1fr 1fr; padding-bottom: 62px; }.footer-brand .brand-copy strong { color: var(--white); }.footer-brand p { color: rgba(255,255,255,.55); font-size: .82rem; margin-top: 24px; max-width: 240px; }.footer-links h3, .footer-social h3 { color: var(--gold-soft); font-family: var(--body); font-size: .7rem; letter-spacing: .12em; margin-bottom: 19px; text-transform: uppercase; }.footer-links a { color: rgba(255,255,255,.65); display: block; font-size: .78rem; margin-bottom: 10px; transition: color .2s; }.footer-links a:hover { color: var(--gold); }.footer-social > div { display: flex; gap: 8px; }.footer-social a { align-items: center; border: 1px solid rgba(255,255,255,.3); display: flex; height: 34px; justify-content: center; transition: .2s; width: 34px; }.social-icon { display: block; height: 17px; width: 17px; }.social-facebook { color: #1877f2; }.social-whatsapp { color: #25d366; }.social-linkedin { color: #0a66c2; }.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-dark); }.footer-bottom { border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.45); display: flex; font-size: .67rem; justify-content: space-between; padding-top: 20px; }
.back-to-top { background: var(--gold); border: 0; bottom: 24px; color: var(--green-dark); cursor: pointer; font-size: 1.4rem; height: 42px; opacity: 0; pointer-events: none; position: fixed; right: 24px; transition: .3s; width: 42px; z-index: 15; }.back-to-top.visible { opacity: 1; pointer-events: auto; }.back-to-top:hover { background: var(--white); transform: translateY(-3px); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-delay { transition-delay: .14s; }

@media (max-width: 900px) { .container { width: min(100% - 42px, 700px); }.nav-menu { background: var(--white); box-shadow: 0 20px 30px rgba(8,68,43,.15); display: flex; flex-direction: column; gap: 22px; padding: 25px; position: absolute; right: 21px; top: 72px; transform: translateY(-12px); transition: .25s; visibility: hidden; width: min(270px, calc(100vw - 42px)); }.nav-menu.open { transform: translateY(0); visibility: visible; }.menu-toggle { display: block; }.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.menu-toggle.active span:nth-child(2) { opacity: 0; }.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }.hero-grid, .intro-grid, .studies-grid, .participate-grid, .contact-grid { gap: 55px; grid-template-columns: 1fr; }.hero { min-height: auto; }.hero-grid { padding-bottom: 90px; padding-top: 50px; }.hero-visual { height: 390px; }.intro-grid { gap: 35px; }.vision-grid { margin-top: 55px; }.domain-grid { grid-template-columns: repeat(2, 1fr); }.domain-feature { grid-row: span 1; min-height: 290px; }.domain-feature .domain-symbol { margin-top: 58px; }.method-track { flex-wrap: wrap; gap: 28px 10px; justify-content: center; }.method-connector { display: none; }.method-step { flex-basis: 115px; }.participate-grid, .contact-grid { gap: 60px; }.footer-top { grid-template-columns: 1.5fr 1fr 1fr; }.footer-social { grid-column: 2 / 4; }.scroll-cue { display: none; } }
@media (max-width: 560px) { .container { width: min(100% - 34px, 430px); }.section-pad { padding: 78px 0; }.navbar { height: 72px; }.brand-copy small { font-size: .44rem; }.hero { padding-top: 72px; }.hero-grid { padding-bottom: 55px; padding-top: 55px; }.hero-content { padding: 0; }.hero h1 { font-size: clamp(2.9rem, 14vw, 4rem); }.hero-lead { font-size: .95rem; }.hero-visual { height: 310px; }.ring-one { height: 270px; width: 270px; }.ring-two { height: 200px; width: 200px; }.visual-core { height: 116px; width: 116px; }.visual-core span { font-size: 1.6rem; }.visual-core small { font-size: .5rem; }.tag-top { right: 0; top: 10%; }.tag-bottom { bottom: 9%; left: 0; }.intro-grid { gap: 28px; }.large-copy { font-size: 1.2rem; }.vision-grid, .objective-grid { grid-template-columns: 1fr; }.vision-card { min-height: auto; }.objective-card { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); min-height: 190px; padding-left: 20px; }.objective-card:last-child { border-bottom: 0; }.split-heading { align-items: start; flex-direction: column; gap: 24px; }.domain-grid { grid-template-columns: 1fr 1fr; }.domain-card { min-height: 195px; padding: 18px; }.domain-feature { min-height: 260px; }.domain-feature h3 { font-size: 1.55rem; }.domain-symbol { margin: 25px 0 15px; }.domain-feature .domain-symbol { margin-top: 53px; }.domain-card h3 { font-size: 1.05rem; }.method-track { gap: 26px 5px; }.method-step { flex-basis: 100px; }.method-node { height: 54px; width: 54px; }.studies-grid { gap: 40px; }.coming-soon { padding: 32px 25px; }.participate-section { padding: 78px 0; }.participation-item { gap: 11px; grid-template-columns: 30px 1fr 20px; }.participation-item strong { font-size: 1rem; }.participation-item small { font-size: .68rem; }.contact-form { padding: 25px 20px; }.footer-top { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / 3; }.footer-social { grid-column: auto; }.footer-bottom { flex-direction: column; gap: 7px; }.values-row { gap: 17px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
