:root{
  --yellow:#d7af29;
  --white:#ffffff;
  --pill-border:rgba(255,255,255,.95);
  --pill-bg:rgba(255,255,255,.04);
  --shadow:0 18px 36px rgba(0,0,0,.14);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body{
  min-height:100vh;
  font-family:'Poppins', sans-serif;
  background:var(--yellow);
  color:var(--white);
  overflow:hidden;
}

.page{
  position:relative;
  min-height:100vh;
  background:var(--yellow);
  isolation:isolate;
}

/* -------------------------
   LAYOUT
-------------------------- */
.hero{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:grid;
  grid-template-columns: 330px minmax(760px, 1fr);
  gap:32px;
  align-items:start;
  padding:68px 56px 40px 180px;
}

.hero__left{
  position:relative;
  z-index:5;
  padding-top:4px;
}

.logo{
  width:140px;
  display:block;
  margin-bottom:36px;
}

.headline{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
  font-size:2.15rem;
  line-height:1.12;
  letter-spacing:-0.02em;
  font-weight:300;
}

.headline--strong{
  font-weight:700;
}

.contact-list{
  display:flex;
  gap:10px;
  margin-top:46px;
  flex-wrap:nowrap;
}

.contact-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border:1.5px solid var(--pill-border);
  border-radius:999px;
  color:var(--white);
  text-decoration:none;
  background:var(--pill-bg);
  box-shadow:var(--shadow);
  font-size:1rem;
  font-weight:600;
  transition:
    transform .35s var(--ease),
    background .35s var(--ease),
    box-shadow .35s var(--ease);
}

.contact-pill:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.12);
  box-shadow:0 20px 36px rgba(0,0,0,.18);
}

.contact-pill__icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.95);
  border-radius:4px;
  font-size:.72rem;
  line-height:1;
  flex:0 0 18px;
}

/* -------------------------
   ONDA
-------------------------- */
.wave-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.wave{
  position:absolute;
  left:355px;
  top:85px;
  width:1015px;
  max-width:none;
  opacity:1;
  transition:transform .18s ease-out;
  will-change:transform;
}

/* -------------------------
   ILUSTRAÇÃO ÚNICA
-------------------------- */
.hero__art{
  position:relative;
  z-index:3;
  width:100%;
  height:660px;
}

.full-block{
  position:absolute;
  top:8px;            /* subiu */
  left:28px;
  width:910px;        /* diminuiu um pouco */
  max-width:none;
  opacity:0;
  transform:translateY(18px) scale(.96);
  transform-origin:center center;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.14));
  animation:blockReveal .75s var(--ease) .35s forwards;
  transition:transform .18s ease-out;
  will-change:transform;
}

/* -------------------------
   INTRO TEXTO
-------------------------- */
.intro{
  opacity:0;
  transform:translateY(20px);
  animation:introUp .6s var(--ease) forwards;
}

.intro-1{ animation-delay:.04s; }
.intro-2{ animation-delay:.08s; }
.intro-3{ animation-delay:.14s; }
.intro-4{ animation-delay:.20s; }
.intro-5{ animation-delay:.26s; }
.intro-6{ animation-delay:.32s; }
.intro-7{ animation-delay:.38s; }

/* -------------------------
   KEYFRAMES
-------------------------- */
@keyframes introUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes blockReveal{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.96);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* -------------------------
   RESPONSIVO
-------------------------- */
@media (max-width: 1360px){
  .hero{
    padding:56px 40px 40px 90px;
    grid-template-columns:310px 1fr;
  }

  .wave{
    left:300px;
    top:88px;
    width:930px;
  }

  .hero__art{
    height:600px;
  }

  .full-block{
    width:840px;
    left:0;
    top:28px;
  }
}

@media (max-width: 1120px){
  body{
    overflow:auto;
  }

  .hero{
    grid-template-columns:1fr;
    gap:24px;
    padding:40px 24px 32px;
  }

  .hero__left{
    max-width:420px;
  }

  .contact-list{
    flex-wrap:wrap;
  }

  .wave{
    left:180px;
    top:220px;
    width:820px;
    opacity:.95;
  }

  .hero__art{
    height:480px;
  }

  .full-block{
    width:720px;
    left:0;
    top:16px;
  }
}

@media (max-width: 720px){
  .hero{
    padding:28px 18px 24px;
  }

  .logo{
    width:118px;
    margin-bottom:24px;
  }

  .headline{
    font-size:1.72rem;
  }

  .contact-pill{
    width:100%;
    justify-content:center;
  }

  .wave{
    left:120px;
    top:280px;
    width:660px;
  }

  .hero__art{
    height:300px;
  }

  .full-block{
    width:500px;
    left:0;
    top:10px;
  }
}