/* Editorial de Dados: preto profundo, papel branco, verde de ação; layout assimétrico, sinais editoriais e motion contido. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#0b0d0c; --paper:#f5f6f2; --white:#fff; --mist:#e5e8e1; --green:#16A34A; --lime:#9BEA06; --line:rgba(11,13,12,.16); --muted:#66706a; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible { outline:3px solid var(--lime); outline-offset:4px; }
.site-shell { overflow:hidden; }
.site-header { position:absolute; z-index:10; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:28px clamp(22px,5vw,72px); color:white; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:190px; height:auto; max-height:58px; object-fit:contain; object-position:left center; }
.brand-lockup { display:flex; flex-direction:column; gap:2px; }
.brand-lockup strong, .footer-brand strong { font:600 15px/1 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.brand-lockup i, .footer-brand i { color:var(--lime); font-style:normal; }
.brand-lockup small { font-size:9px; letter-spacing:.09em; text-transform:uppercase; opacity:.58; }
.main-nav { display:flex; align-items:center; gap:clamp(18px,3vw,42px); font-size:12px; font-weight:600; letter-spacing:.02em; }
.main-nav a { opacity:.74; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.main-nav a:hover { opacity:1; transform:translateY(-2px); }
.main-nav .nav-cta { display:flex; align-items:center; gap:8px; color:var(--ink); background:var(--lime); opacity:1; padding:13px 17px; border:1px solid rgba(155,234,6,.7); box-shadow:0 8px 20px rgba(155,234,6,.12); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .main-nav .nav-cta:hover { transform:scale(1.02) translateY(-2px); box-shadow:0 11px 24px rgba(155,234,6,.2); } .main-nav .nav-cta:active { transform:scale(.98); }
.menu-button { display:none; border:0; color:white; background:transparent; }
.hero { min-height:780px; position:relative; display:flex; align-items:center; padding:150px clamp(22px,9vw,150px) 92px; color:white; background:var(--ink); isolation:isolate; }
.hero-art { position:absolute; inset:0; z-index:-3; background-position:center; background-size:cover; opacity:.62; }
.hero::after { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(11,13,12,.98) 0%,rgba(11,13,12,.83) 39%,rgba(11,13,12,.32) 100%); }
.hero-grid-line { position:absolute; z-index:-1; top:0; bottom:0; left:9%; width:1px; background:rgba(255,255,255,.13); }
.hero-content { max-width:670px; animation:rise .7s var(--ease) both; }
.section-kicker, .aside-label, .stage-label { color:var(--green); font:600 11px/1.2 'Space Grotesk',sans-serif; letter-spacing:.17em; text-transform:uppercase; }
.kicker-dot { display:inline-block; width:7px; height:7px; margin-right:10px; background:var(--lime); border-radius:50%; }
.hero h1 { margin:23px 0 22px; font:600 clamp(61px,9.3vw,145px)/.83 'Space Grotesk',sans-serif; letter-spacing:-.095em; } .hero-brand-e { color:var(--lime); }
.hero-lede { max-width:540px; margin:0 0 22px; font:500 clamp(22px,2.8vw,37px)/1.06 'Space Grotesk',sans-serif; letter-spacing:-.045em; }
.hero-copy { max-width:480px; margin:0 0 10px; color:rgba(255,255,255,.7); font-size:15px; line-height:1.6; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px 20px; margin-top:34px; }
.hero-actions > span { max-width:210px; color:rgba(255,255,255,.55); font-size:11px; line-height:1.35; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 20px; font-size:13px; font-weight:700; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .button .cta-arrow, .nav-cta .cta-arrow { transition:transform .2s var(--ease); } .button:hover .cta-arrow, .nav-cta:hover .cta-arrow { transform:translateX(4px); } .button:active, .nav-cta:active { transform:scale(.98); }
.button:hover { transform:translateY(-3px); }
.button:active { transform:scale(.97); }
.button-primary { background:var(--green); color:white; border:1px solid rgba(155,234,6,.48); box-shadow:0 12px 28px rgba(22,163,74,.24), 0 0 0 1px rgba(155,234,6,.08); animation:cta-breathe 5.8s ease-in-out infinite; }
.button-primary:hover { background:#1bb653; transform:scale(1.025) translateY(-2px); box-shadow:0 17px 34px rgba(22,163,74,.34), 0 0 22px rgba(155,234,6,.16); }
.button-lime { background:var(--lime); color:var(--ink); border:1px solid rgba(155,234,6,.85); box-shadow:0 10px 22px rgba(155,234,6,.14); animation:cta-breathe-soft 7.2s ease-in-out infinite; } .button-lime:hover { background:#a7f21a; transform:scale(1.02) translateY(-2px); box-shadow:0 14px 28px rgba(155,234,6,.22); }
.hero-aside { position:absolute; right:clamp(22px,9vw,150px); bottom:110px; width:220px; animation:rise .8s .2s var(--ease) both; }
.aside-label { color:rgba(255,255,255,.48); margin-bottom:18px; }
.aside-line { display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.22); padding:13px 0; color:rgba(255,255,255,.58); font-size:12px; }
.aside-line strong { color:rgba(255,255,255,.4); font:500 11px 'Space Grotesk',sans-serif; }
.aside-line.active { color:white; border-color:var(--lime); }
.aside-line.active strong { color:var(--lime); }
.aside-note { margin-top:20px; color:rgba(255,255,255,.52); font-size:11px; line-height:1.5; }
.scroll-cue { position:absolute; bottom:28px; left:clamp(22px,9vw,150px); display:flex; gap:14px; align-items:center; color:rgba(255,255,255,.5); font:600 10px 'Space Grotesk',sans-serif; letter-spacing:.16em; }
.section-light, .section-paper, .criteria, .about { background:var(--paper); }
.process { position:relative; display:grid; grid-template-columns:minmax(220px,.75fr) minmax(220px,.7fr) minmax(360px,1.3fr); gap:clamp(32px,5vw,85px); padding:145px clamp(22px,9vw,150px); }
.section-intro h2, .criteria-heading h2, .transparency h2, .about h2 { margin:20px 0; max-width:420px; font:600 clamp(35px,4.4vw,64px)/.94 'Space Grotesk',sans-serif; letter-spacing:-.07em; }
.section-intro p, .criteria-heading p { max-width:290px; color:var(--muted); font-size:15px; line-height:1.6; }
.process-visual { min-height:300px; align-self:start; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:20px; }
.process-visual span { color:var(--ink); font:500 11px/1.05 'Space Grotesk',sans-serif; letter-spacing:.12em; }
.process-visual b { color:var(--green); }
.stage-list { border-top:1px solid var(--line); }
.stage { display:grid; grid-template-columns:42px 35px 1fr; gap:14px; padding:22px 0; border-bottom:1px solid var(--line); }
.stage-number, .criterion-index { color:var(--green); font:600 12px 'Space Grotesk',sans-serif; }
.stage-icon { color:var(--green); }
.stage h3 { margin:4px 0 7px; font:600 20px/1.1 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.stage p { max-width:315px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.principle { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; padding:150px clamp(22px,9vw,150px) 130px; color:white; background:var(--ink); }
.principle-copy h2 { max-width:720px; margin:20px 0 27px; font:600 clamp(42px,6vw,88px)/.91 'Space Grotesk',sans-serif; letter-spacing:-.085em; }
.principle-copy p { max-width:500px; margin:0 0 14px; color:rgba(255,255,255,.65); font-size:15px; line-height:1.65; }
.principle-art { min-height:350px; background-size:cover; background-position:center; align-self:center; position:relative; }
.comparison-tag { position:absolute; right:18px; bottom:18px; padding:12px 14px; background:var(--lime); color:var(--ink); font:600 10px/1.05 'Space Grotesk',sans-serif; letter-spacing:.08em; }
.comparison-tag strong { font-size:11px; }
.principle blockquote { grid-column:1/-1; max-width:830px; margin:54px 0 0; padding:25px 0 0 24px; border-left:2px solid var(--lime); color:white; font:500 clamp(20px,2.5vw,31px)/1.15 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.criteria { display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; padding:145px clamp(22px,9vw,150px); }
.criteria-list { border-top:1px solid var(--line); }
.criterion { display:grid; grid-template-columns:43px 1fr 20px; align-items:center; gap:12px; min-height:65px; border-bottom:1px solid var(--line); font-size:14px; }
.criterion svg { color:var(--green); }
.criterion:hover { background:rgba(155,234,6,.08); padding:0 12px; margin:0 -12px; }
.community { position:relative; isolation:isolate; display:flex; justify-content:space-between; align-items:center; gap:40px; min-height:455px; padding:100px clamp(22px,9vw,150px); background:var(--ink); color:white; } .community::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.42; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px, transparent 1px); background-size:52px 52px; mask-image:linear-gradient(90deg,black,transparent 76%); } .community-index { position:absolute; top:34px; right:clamp(22px,9vw,150px); color:rgba(255,255,255,.38); font:600 10px/1.4 'Space Grotesk',sans-serif; letter-spacing:.15em; text-align:right; } .community-index span { color:var(--lime); font-size:9px; }
.community .section-kicker { color:var(--lime); }
.community-inner h2 { max-width:560px; margin:20px 0 17px; font:600 clamp(43px,6vw,82px)/.9 'Space Grotesk',sans-serif; letter-spacing:-.08em; }
.community-inner p { max-width:420px; margin:0 0 30px; color:rgba(255,255,255,.78); font-size:16px; line-height:1.55; }
.community-inner small { display:block; margin-top:14px; color:rgba(255,255,255,.62); font-size:11px; }
.community-mark { display:grid; place-items:center; width:260px; height:260px; border:1px solid rgba(255,255,255,.35); background:rgba(22,163,74,.11); }
.community-mark img { width:190px; height:auto; max-width:82%; }
.transparency { display:grid; grid-template-columns:1fr 2fr; gap:9vw; padding:130px clamp(22px,9vw,150px); }
.transparency-label { display:flex; flex-direction:column; gap:38px; }
.vertical-rule { width:1px; min-height:145px; background:var(--green); }
.transparency h2 { max-width:620px; margin-top:0; }
.transparency-copy p { max-width:620px; color:var(--muted); font-size:16px; line-height:1.65; }
.notice { display:grid; grid-template-columns:120px 1fr 1fr; gap:36px; padding:43px clamp(22px,9vw,150px); background:#dce0d9; }
.notice-index { color:var(--green); font:600 11px 'Space Grotesk',sans-serif; letter-spacing:.16em; }
.notice p { max-width:420px; margin:0; color:#4e5751; font-size:13px; line-height:1.55; }
.about { display:grid; grid-template-columns:120px 1fr; gap:36px; padding:135px clamp(22px,9vw,150px); }
.about-index { color:var(--green); font:600 13px/1.5 'Space Grotesk',sans-serif; letter-spacing:.12em; } .about-index span { color:var(--muted); font-size:9px; }
.about h2 { max-width:680px; }
.about p { max-width:630px; color:var(--muted); font-size:16px; line-height:1.65; }
.about-boundary { display:inline-block; margin-top:20px; padding:10px 12px; border-left:2px solid var(--lime); background:#e9ece6; color:#465048; font-size:12px; }
.site-footer { display:grid; grid-template-columns:1fr auto; gap:40px; padding:52px clamp(22px,9vw,150px) 30px; background:var(--ink); color:white; }
.footer-brand { display:flex; align-items:center; gap:12px; } .footer-brand .brand-mark { width:190px; }
.footer-brand span { display:block; margin-top:6px; color:rgba(255,255,255,.45); font-size:10px; }
.footer-links { display:flex; align-items:center; gap:24px; color:rgba(255,255,255,.65); font-size:11px; }
.footer-links a:hover { color:var(--lime); }
.footer-meta { grid-column:1/-1; display:flex; justify-content:space-between; padding-top:25px; border-top:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.35); font:500 10px 'Space Grotesk',sans-serif; letter-spacing:.04em; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } @keyframes cta-breathe { 0%,100% { box-shadow:0 12px 28px rgba(22,163,74,.24), 0 0 0 1px rgba(155,234,6,.08); } 50% { box-shadow:0 14px 31px rgba(22,163,74,.29), 0 0 16px rgba(155,234,6,.12); } } @keyframes cta-breathe-soft { 0%,100% { box-shadow:0 10px 22px rgba(155,234,6,.14); } 50% { box-shadow:0 12px 25px rgba(155,234,6,.2); } }
@media (max-width:900px) { .hero { min-height:750px; } .hero-aside { display:none; } .process { grid-template-columns:1fr 1fr; } .process-visual { min-height:220px; } .stage-list { grid-column:1/-1; } .principle { grid-template-columns:1fr; } .principle-art { min-height:280px; max-width:500px; width:100%; } }
@media (max-width:680px) { .site-header { padding:20px 20px; } .brand-mark { width:150px; max-height:48px; } .brand-lockup small { font-size:8px; } .menu-button { display:block; z-index:2; } .main-nav { position:absolute; top:0; left:0; right:0; display:none; flex-direction:column; align-items:flex-start; gap:22px; padding:86px 22px 25px; background:var(--ink); box-shadow:0 18px 30px rgba(0,0,0,.25); } .main-nav.is-open { display:flex; } .main-nav .nav-cta { width:100%; justify-content:center; } .hero { min-height:760px; padding:135px 22px 80px; } .hero::after { background:linear-gradient(90deg,rgba(11,13,12,.96),rgba(11,13,12,.64)); } .hero-grid-line { left:22px; } .hero h1 { font-size:70px; } .hero-lede { font-size:27px; } .hero-copy { font-size:14px; } .hero-actions { align-items:flex-start; flex-direction:column; } .scroll-cue { left:22px; } .process, .criteria, .transparency, .about { display:block; padding:92px 22px; } .process-visual { min-height:165px; margin:42px 0 34px; } .section-intro h2, .criteria-heading h2, .transparency h2, .about h2 { font-size:46px; } .stage { grid-template-columns:35px 28px 1fr; gap:8px; } .stage h3 { font-size:18px; } .principle { padding:95px 22px 85px; } .principle-copy h2, .community-inner h2 { font-size:50px; } .principle-art { min-height:220px; margin-top:20px; } .criteria-list { margin-top:45px; } .criterion { min-height:62px; font-size:13px; } .community { min-height:530px; align-items:flex-start; flex-direction:column; padding:90px 22px; } .community-mark { width:130px; height:130px; margin-top:20px; } .community-mark img { width:100px; height:auto; max-width:80%; } .transparency-label { margin-bottom:38px; } .transparency-copy p { font-size:15px; } .notice, .about { display:block; padding:42px 22px; } .notice-index, .about-index { margin-bottom:20px; } .notice p + p { margin-top:14px; } .about h2 { margin-top:20px; } .site-footer { display:block; padding:45px 22px 25px; } .footer-links { flex-wrap:wrap; gap:12px 18px; margin:35px 0; } .footer-meta { gap:12px; flex-direction:column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } .button, .nav-cta { animation:none !important; } }