:root {
  --brand: #004f59;
  --brand-dark: #003941;
  --ink: #102124;
  --paper: #f4f3ee;
  --white: #ffffff;
  --line: rgba(16, 33, 36, 0.16);
  --muted: #5d6a6c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }

.site-header {
  height: 104px;
  padding: 0 clamp(24px, 5.5vw, 88px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.logo-link { display: inline-flex; align-items: center; }
.logo-link img { display: block; width: 144px; height: auto; }
.status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(0, 79, 89, .12);
}

.hero {
  min-height: calc(100svh - 104px);
  padding: clamp(64px, 8vw, 120px) clamp(24px, 5.5vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  align-items: center;
  gap: clamp(48px, 7vw, 120px);
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 28px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
h1 {
  margin: 0;
  font-size: clamp(58px, 7vw, 112px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.07em;
}
h1 span { color: var(--brand); }
.intro {
  max-width: 640px;
  margin: 38px 0 34px;
  color: var(--muted);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.58;
  letter-spacing: -.02em;
}
.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 52px;
  padding: 17px 20px 17px 22px;
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  transition: background .25s ease, transform .25s ease;
}
.primary-link span { font-size: 18px; }
.primary-link:hover { background: var(--brand); transform: translateY(-2px); }

.hero-visual {
  position: relative;
  min-height: 570px;
  aspect-ratio: 1 / 1.12;
}
.signal {
  position: absolute;
  border: 1px solid rgba(0, 79, 89, .32);
  border-radius: 50%;
}
.signal--one { width: 96%; aspect-ratio: 1; top: 1%; right: -13%; }
.signal--two { width: 72%; aspect-ratio: 1; top: 13%; right: -1%; border-color: rgba(0, 79, 89, .52); }
.signal--three { width: 46%; aspect-ratio: 1; top: 27%; right: 12%; border-color: rgba(0, 79, 89, .72); }
.visual-disc {
  position: absolute;
  width: min(400px, 80%);
  aspect-ratio: 1;
  right: 0;
  bottom: 3%;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 34px 80px rgba(0, 57, 65, .18);
}
.visual-mark {
  font-size: clamp(150px, 16vw, 265px);
  font-weight: 500;
  line-height: .72;
  letter-spacing: -.14em;
  transform: translateX(-.06em);
}
.visual-disc small {
  margin-top: 40px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.55;
  text-align: center;
  text-transform: uppercase;
  opacity: .75;
}
.connector {
  position: absolute;
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 7px var(--paper);
}
.connector--one { top: 6%; right: 18%; }
.connector--two { bottom: 13%; left: 10%; }

.brand-story {
  padding: clamp(84px, 9vw, 145px) clamp(24px, 5.5vw, 88px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 10vw;
}
h2 {
  margin: 0;
  font-size: clamp(44px, 5vw, 78px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.06em;
}
.story-copy { align-self: end; max-width: 590px; }
.story-copy p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}
.story-copy p:first-child { color: var(--ink); font-size: 21px; line-height: 1.55; letter-spacing: -.025em; }

.product-lines {
  margin: 0 clamp(24px, 5.5vw, 88px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.product-lines article {
  position: relative;
  min-height: 420px;
  padding: 34px clamp(24px, 3vw, 48px);
  overflow: hidden;
  border-right: 1px solid var(--line);
}
.product-lines article:last-child { border-right: 0; }
.product-lines article > span { color: var(--brand); font-size: 11px; font-weight: 700; }
.product-lines h3 { margin: 74px 0 18px; font-size: 32px; font-weight: 600; letter-spacing: -.05em; }
.product-lines p { max-width: 310px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.line-icon { position: absolute; right: -24px; bottom: -36px; width: 170px; height: 170px; opacity: .12; }
.line-icon--cable { border: 28px solid var(--brand); border-radius: 50%; border-left-color: transparent; transform: rotate(-28deg); }
.line-icon--support { border: 26px solid var(--brand); border-radius: 24px; transform: rotate(45deg); }
.line-icon--future { border-radius: 50%; background: var(--brand); box-shadow: -82px 0 0 rgba(0,79,89,.55), 0 -82px 0 rgba(0,79,89,.35); }

.soon {
  margin: clamp(88px, 10vw, 160px) clamp(24px, 5.5vw, 88px) 0;
  padding: clamp(58px, 7vw, 100px);
  background: var(--brand);
  color: var(--white);
  display: grid;
  grid-template-columns: 1.25fr .55fr;
  align-items: end;
  gap: 8vw;
  position: relative;
  overflow: hidden;
}
.soon::after {
  content: "V";
  position: absolute;
  right: -4%;
  top: -63%;
  font-size: 510px;
  font-weight: 600;
  color: rgba(255,255,255,.055);
  line-height: 1;
}
.soon .eyebrow { color: var(--white); opacity: .7; }
.soon-copy { position: relative; z-index: 1; }
.soon-copy p { margin: 0 0 28px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.65; }
.soon-copy a { display: inline-flex; gap: 18px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: 14px; font-weight: 700; }

footer {
  min-height: 174px;
  padding: 40px clamp(24px, 5.5vw, 88px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}
footer img { width: 116px; height: auto; }
footer p { margin: 0; }
footer p:nth-child(2) { text-align: center; }
footer p:last-child { text-align: right; }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 480px; max-width: 600px; width: 100%; margin: 0 auto; }
  .brand-story { grid-template-columns: 1fr; gap: 56px; }
  .product-lines { grid-template-columns: 1fr; }
  .product-lines article { min-height: 320px; border-right: 0; border-bottom: 1px solid var(--line); }
  .product-lines article:last-child { border-bottom: 0; }
  .product-lines h3 { margin-top: 46px; }
  .soon { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-header { height: 82px; }
  .logo-link img { width: 112px; }
  .status { font-size: 0; }
  .status::after { content: "Em breve"; font-size: 10px; }
  .hero { min-height: auto; padding-top: 68px; }
  h1 { font-size: clamp(52px, 16vw, 72px); }
  .intro { margin-top: 28px; }
  .hero-visual { min-height: 370px; }
  .visual-disc { width: 78%; }
  .visual-disc small { margin-top: 28px; }
  .brand-story { padding-top: 84px; }
  .product-lines { margin: 0; }
  .soon { margin-left: 0; margin-right: 0; padding: 66px 24px; }
  footer { grid-template-columns: 1fr; gap: 24px; }
  footer p:nth-child(2), footer p:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}