:root{--navy:#031d2d;--deep:#001522;--ink:#0b2440;--muted:#617286;--cyan:#16b8ed;--teal:#21a6c7;--line:#dce5ea;--paper:#f6f8f9;--white:#fff;--max:1280px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#1aa8dc}.eyebrow.light{color:#59cbee}.display{font-size:clamp(42px,5.25vw,76px);line-height:.98;letter-spacing:-.052em;font-weight:500;margin:18px 0 24px}.title{font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.04em;font-weight:500;margin:12px 0 22px}.lede{font-size:17px;line-height:1.75;color:#50647a}.dark{background:var(--deep);color:white}.dark .lede{color:#b7c8d2}.btn{display:inline-flex;align-items:center;gap:20px;border:1px solid #b8c7d0;border-radius:999px;padding:13px 20px;font-size:13px;font-weight:700;transition:.25s}.btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}.btn.primary{background:#fff;color:#07233a;border-color:#fff}.btn.primary:hover{background:var(--cyan);border-color:var(--cyan)}header{position:absolute;z-index:10;width:100%;border-bottom:1px solid #ffffff20}.nav{height:78px;display:flex;align-items:center;gap:34px;color:#fff}.brand{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:20px;letter-spacing:.28em}.brand span{font-size:7px;letter-spacing:.38em;margin-top:7px}.menu{display:flex;align-items:center;gap:32px;margin-left:auto;font-size:12px}.menu a{color:#d7e4eb;position:relative}.menu a:hover,.menu a.active{color:#fff}.menu a.active:after{content:"";position:absolute;left:25%;right:25%;bottom:-29px;height:2px;background:var(--cyan)}.languages{font-size:10px;letter-spacing:.14em;color:#b7c6d0}.contact{font-size:11px;border:1px solid #66b8dd;border-radius:999px;padding:10px 18px}.hero{min-height:760px;position:relative;display:flex;align-items:center;background:linear-gradient(90deg,#001522 0%,#001522ed 34%,#00152262 68%,#00152232),url("/img/v2/about-hero-v1.webp") center/cover;color:#fff;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00152220 55%,#001522da)}.hero-copy{position:relative;z-index:2;padding-top:90px;max-width:680px}.hero .display span{color:#4bc7f0}.hero p{font-size:17px;max-width:590px;color:#d9e5ea}.hero-note{position:absolute;z-index:2;right:max(32px,calc((100vw - var(--max))/2));bottom:80px;border-left:1px solid #36b8de;padding-left:24px;font-size:10px;line-height:2;letter-spacing:.24em;text-transform:uppercase;color:#d8e9ef}.timeline-section{padding:108px 0;background:#f8fafb}.split-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:start}.split-head .lede{max-width:650px}.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:72px;position:relative}.timeline:before{content:"";position:absolute;top:18px;left:0;right:0;height:1px;background:#b8ced9}.milestone{position:relative;padding-top:50px}.milestone:before{content:"";position:absolute;top:13px;left:0;width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid var(--cyan);z-index:1}.milestone time{position:absolute;top:-18px;font-weight:700;font-size:16px}.milestone .thumb{height:118px;border-radius:3px;margin-bottom:22px;background:#eaf2f5;overflow:hidden;position:relative}.milestone .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.65)}.milestone .symbol{height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50%,#073e5d,#061f30);color:#62d5f5}.milestone .symbol svg{width:44px;height:44px}.milestone h3{margin:0 0 7px;font-size:16px}.milestone .sub{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#269eca;margin-bottom:10px}.milestone p{font-size:12px;line-height:1.6;color:#667788;margin:0}.belief{min-height:500px;display:flex;align-items:center;position:relative;background:linear-gradient(90deg,#f9fbfc 0%,#f9fbfc 39%,#f9fbfcaa 54%,#00182736),url("/img/v2/hero-oceantek-v3.webp") 72% 49%/cover}.belief-copy{width:42%;padding:96px 0}.belief .title{font-size:clamp(42px,5vw,70px)}.belief .quote{position:absolute;right:7%;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#fff;line-height:2;border-left:2px solid var(--cyan);padding-left:20px}.operations{padding:105px 0}.operations-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:90px;align-items:center}.principle-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}.principle-flow:before{content:"";position:absolute;left:8%;right:8%;top:33px;height:1px;background:#cee2eb}.op-step{text-align:center;position:relative}.icon-ring{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#edf7fb;color:#036d9d;margin:0 auto 20px;position:relative}.icon-ring svg{width:27px;height:27px}.op-step strong{display:block;font-size:14px;line-height:1.35}.op-step span{font-size:11px;color:#738291}.core{padding:110px 0;position:relative;overflow:hidden;background:radial-gradient(circle at 58% 50%,#064669 0,#01253a 30%,#001522 70%)}.core:before{content:"";position:absolute;inset:0;background:url("/img/v2/jellyfish.webp") right center/55% auto no-repeat;opacity:.12}.core-grid{display:grid;grid-template-columns:.72fr 1fr 1fr;gap:60px;align-items:center;position:relative}.core-stack{height:380px;position:relative;display:grid;place-items:center}.layer{position:absolute;width:300px;height:92px;border:1px solid #25c2ef88;background:linear-gradient(180deg,#10a8d41f,#072b4222);transform:rotate(30deg) skew(-30deg);box-shadow:0 0 32px #13b7e818}.layer:nth-child(1){top:30px}.layer:nth-child(2){top:90px}.layer:nth-child(3){top:150px}.layer:nth-child(4){top:210px}.layer:nth-child(5){top:270px;background:#0aa8d02d}.stack-label{position:absolute;text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:#d8f6ff}.stack-label.l1{top:62px}.stack-label.l2{top:122px}.stack-label.l3{top:182px}.stack-label.l4{top:242px}.stack-label.l5{top:302px;font-size:12px;font-weight:700}.cap-list{display:grid;gap:18px}.cap{display:grid;grid-template-columns:50px 1fr;gap:14px;align-items:center}.cap .icon-ring{width:46px;height:46px;margin:0;background:#073b57;color:#31c9f1}.cap .icon-ring svg{width:20px;height:20px}.cap strong{font-size:14px}.cap span{display:block;font-size:11px;color:#9fb5c0}.companies{padding:105px 0}.companies-head{display:grid;grid-template-columns:.8fr 1fr auto;gap:65px;align-items:end}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}.company{border:1px solid var(--line);background:#fff;transition:.3s}.company:hover{transform:translateY(-5px);box-shadow:0 18px 42px #062a4013}.company img{width:100%;height:210px;object-fit:cover}.company-body{padding:24px 26px 28px}.company h3{font-size:21px;margin:0 0 4px}.company small{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#1aa3d3}.company p{font-size:13px;color:#637487;min-height:62px}.company a{font-size:12px;color:#008fca;font-weight:700}.ventures{min-height:430px;display:flex;align-items:center;background:linear-gradient(90deg,#001522 0%,#001522e8 39%,#00152270),url("/img/v2/jellyfish.webp") 77% 48%/cover}.ventures-copy{max-width:600px;padding:88px 0}.ventures-note{float:right;margin-top:20px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#8acde0;line-height:2}.thinking{padding:95px 0;background:#f6f9fa}.thinking-grid{display:grid;grid-template-columns:.78fr 1.7fr;gap:80px;align-items:start}.values{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.value{text-align:center}.value .icon-ring{width:55px;height:55px}.value .icon-ring svg{width:23px;height:23px}.value strong{display:block;font-size:12px;line-height:1.35}.value span{font-size:10px;color:#768697}.leadership{padding:90px 0}.lead-grid{display:grid;grid-template-columns:.75fr 1.5fr;gap:80px;align-items:center}.leaders{display:grid;grid-template-columns:1fr 1fr;gap:18px}.leader{display:grid;grid-template-columns:110px 1fr;background:#f4f7f8;border:1px solid #e3eaed}.monogram{display:grid;place-items:center;background:linear-gradient(145deg,#0a334b,#001724);color:#62d8f6;font-size:30px;letter-spacing:.08em}.leader-copy{padding:22px}.leader h3{margin:0;font-size:18px}.leader small{display:block;color:#0799cf;font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin:4px 0 12px}.leader p{font-size:11px;color:#627488;margin:0}.finale{min-height:430px;display:flex;align-items:center;background:linear-gradient(90deg,#001522f5 0%,#001522cc 55%,#00152266),url("/img/v2/about-hero-v1.webp") center 73%/cover}.finale-grid{display:grid;grid-template-columns:.65fr 1fr;gap:80px;align-items:center}.finale .lede{font-size:14px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}footer{background:#00121d;color:#fff;padding:48px 0 30px;border-top:1px solid #ffffff1a}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:60px}.footer-col{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#9fb1bc}.footer-col strong{color:#fff;margin-bottom:8px}.footer-bottom{border-top:1px solid #ffffff1a;margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.08em;color:#758b98}.reveal{opacity:0;transform:translateY(18px);transition:.75s ease}.reveal.visible{opacity:1;transform:none}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
@media(max-width:980px){.menu{display:none}.nav{gap:18px}.languages{margin-left:auto}.wrap{width:min(100% - 40px,var(--max))}.split-head,.operations-grid,.core-grid,.companies-head,.thinking-grid,.lead-grid,.finale-grid{grid-template-columns:1fr;gap:34px}.hero{min-height:680px}.hero-note{display:none}.timeline{grid-template-columns:1fr 1fr}.timeline:before{display:none}.milestone{padding-top:40px}.milestone:before{top:4px}.milestone time{top:0}.belief{background-position:55%}.belief-copy{width:65%}.belief .quote{display:none}.core-grid{grid-template-columns:1fr 1fr}.core-grid>div:first-child{grid-column:1/-1}.companies-head{align-items:start}.values{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1.2fr 1fr 1fr}.footer-grid>div:last-child{display:none}}
@media(max-width:640px){.wrap{width:calc(100% - 32px)}.contact,.languages{display:none}.nav{height:68px}.hero{min-height:720px;background-position:66% center}.hero-copy{padding-top:60px}.hero p{font-size:14px}.timeline-section,.operations,.companies,.thinking,.leadership{padding:72px 0}.timeline,.cards,.leaders{grid-template-columns:1fr}.milestone .thumb{height:160px}.belief{min-height:560px;background:linear-gradient(180deg,#f9fbfc 0%,#f9fbfce5 56%,#00182730),url("/img/v2/hero-oceantek-v3.webp") 62%/cover}.belief-copy{width:100%;padding:70px 0 230px}.principle-flow{grid-template-columns:1fr 1fr}.principle-flow:before{display:none}.core{padding:76px 0}.core-grid{grid-template-columns:1fr}.core-stack{height:330px}.layer{width:240px}.values{grid-template-columns:1fr 1fr}.company img{height:190px}.ventures{background-position:64%;}.leader{grid-template-columns:82px 1fr}.monogram{font-size:22px}.finale{padding:74px 0;min-height:510px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{gap:20px;flex-direction:column}}
.leader-photo{width:110px;height:100%;min-height:168px;object-fit:cover;object-position:center top;background:#061f30}
.leader-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:#078fbe;font-size:10px;font-weight:700;letter-spacing:.04em}.leader-link:hover{text-decoration:underline}.leader-link svg{width:14px;height:14px;fill:currentColor}
@media(max-width:640px){.leader-photo{width:82px;min-height:158px}}
.belief{background:linear-gradient(90deg,#f9fbfc 0%,#f9fbfc 39%,#f9fbfca6 56%,#00182724),url("/img/v2/technology-leverage-v1.webp") 72% center/cover no-repeat}
.ventures{background:linear-gradient(90deg,#001522 0%,#001522e8 39%,#00152262),url("/img/v2/about-ventures-v1.webp") 77% center/cover no-repeat}
.finale{background:linear-gradient(90deg,#001522f5 0%,#001522cc 55%,#00152255),url("/img/v2/about-finale-v1.webp") center 68%/cover no-repeat}
.milestone .thumb{background-image:url("/img/v2/about-timeline-v1.webp");background-repeat:no-repeat;background-size:500% 100%;filter:saturate(.78)}
.milestone:nth-child(1) .thumb{background-position:0 50%}.milestone:nth-child(2) .thumb{background-position:25% 50%}.milestone:nth-child(3) .thumb{background-position:50% 50%}.milestone:nth-child(4) .thumb{background-position:75% 50%}.milestone:nth-child(5) .thumb{background-position:100% 50%}
@media(max-width:640px){.belief{background:linear-gradient(180deg,#f9fbfc 0%,#f9fbfce5 56%,#00182722),url("/img/v2/technology-leverage-v1.webp") 65% center/cover no-repeat}.ventures{background-position:70% center}.finale{background-position:63% center}}

/* Complementos comuns a todas as páginas do site v2.
   Carregado DEPOIS do CSS da página, então pode corrigir/estender o layout.
   Regras de aparência de cada página ficam em css/v2/pages/<pagina>.css. */

/* --- Fallback sem JS ------------------------------------------------------
   O layout original esconde os blocos .reveal com opacity:0 e só os mostra
   via IntersectionObserver. Sem JS (ou se o script falhar) a página ficava
   em branco. A classe .js é adicionada no <head> antes da renderização. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .arrow, .link .arrow { transition: none !important; transform: none !important; }
  .reveal { opacity: 1 !important; }
  html { scroll-behavior: auto; }
}

/* --- Claim do footer (era style inline no layout original) --- */
.footer-claim { color: rgba(255,255,255,.6); margin-top: 24px; }

/* --- Foco visível: acessibilidade de teclado --- */
a:focus-visible, button:focus-visible {
  outline: 2px solid #24c9c5;
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Navegação mobile -----------------------------------------------------
   O layout original simplesmente escondia o menu abaixo de 980px, deixando o
   site sem navegação no celular. Aqui entra um menu lateral acessível. */
.nav-toggle {
  display: none;
  position: relative;
  /* Acima do drawer: o botão vira o "X" que fecha o menu. */
  z-index: 70;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle[aria-expanded="true"] { color: #fff; }
.nav-toggle span {
  display: block;
  height: 2px; width: 22px;
  margin: 0 auto;
  background: currentColor;
  transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 84vw);
  z-index: 60;
  background: #031923;
  color: #fff;
  padding: 92px 32px 32px;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
}
.nav-drawer[hidden] { display: block; visibility: hidden; }
.nav-drawer.open { transform: translateX(0); visibility: visible; }
.nav-close {
  position: absolute;
  top: 26px; right: 26px;
  width: 40px; height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.nav-close span {
  position: absolute;
  top: 50%; left: 9px;
  width: 22px; height: 2px;
  background: currentColor;
}
.nav-close span:nth-child(1) { transform: rotate(45deg); }
.nav-close span:nth-child(2) { transform: rotate(-45deg); }

.nav-drawer nav { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer a {
  padding: 14px 0;
  font-size: 1.05rem;
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-drawer a.active, .nav-drawer a:hover { color: #24c9c5; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(3,20,30,.6);
  opacity: 0;
  transition: opacity .3s;
}
.nav-backdrop.open { opacity: 1; }

body.nav-open { overflow: hidden; }

@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  header .nav { gap: 16px; }
}

/* No celular o botão "Fale conosco" disputa espaço com o hambúrguer e quebra
   em duas linhas — o mesmo link já está dentro do menu lateral como "Contato". */
@media (max-width: 620px) {
  header .pill, header .contact { display: none; }
}
@media (min-width: 1041px) {
  .nav-drawer, .nav-backdrop { display: none !important; }
}

/* --- Imagens responsivas: o layout usa fotos grandes em grids --- */
img { max-width: 100%; }