* {
  box-sizing: border-box;
}

:root {
  --black: #050505;
  --graphite: #111111;
  --white: #ffffff;
  --orange: #ff5a00;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

.landing {
  position: relative;
  width: 100%;
  height: 100dvh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 75% at 51% 22%, #282828 0%, #1d1d1d 30%, #121212 58%, #070707 100%);
}

/* Abstract dark background inspired by the supplied reference. */
.background {
  position: absolute;
  inset: -15%;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 48% at 49% 31%, rgba(55,55,55,.36), transparent 68%),
    radial-gradient(ellipse 48% 60% at 83% 76%, rgba(63,63,63,.18), transparent 68%),
    radial-gradient(ellipse 45% 55% at 9% 80%, rgba(35,35,35,.26), transparent 72%);
}

.orb,
.wave {
  position: absolute;
  display: block;
  pointer-events: none;
}

.orb {
  border-radius: 50%;
  filter: blur(1px);
}

.orb-1 {
  width: 78vw;
  height: 78vw;
  min-width: 760px;
  min-height: 760px;
  left: -5vw;
  top: -49vw;
  background: #292929;
  box-shadow: inset -30px -30px 80px rgba(0,0,0,.18);
}

.orb-2 {
  width: 92vw;
  height: 92vw;
  min-width: 900px;
  min-height: 900px;
  right: -43vw;
  bottom: -60vw;
  background: linear-gradient(135deg, #171717 35%, #0a0a0a 75%);
  box-shadow: inset 30px 10px 80px rgba(255,255,255,.035);
  transform: rotate(-17deg);
}

.orb-3 {
  width: 65vw;
  height: 65vw;
  min-width: 620px;
  min-height: 620px;
  right: -29vw;
  top: -18vw;
  background: rgba(12,12,12,.74);
}

.wave {
  border-radius: 50%;
  transform: rotate(-19deg);
}

.wave-1 {
  width: 120vw;
  height: 60vw;
  left: -16vw;
  bottom: -28vw;
  border-top: 1px solid rgba(255,255,255,.035);
  background: linear-gradient(170deg, transparent 0 40%, rgba(66,66,66,.16) 63%, rgba(18,18,18,.1) 82%, transparent 83%);
  filter: blur(.3px);
}

.wave-2 {
  width: 100vw;
  height: 46vw;
  right: -22vw;
  bottom: -11vw;
  border-top: 1px solid rgba(255,255,255,.045);
  background: linear-gradient(166deg, transparent 0 48%, rgba(88,88,88,.14) 60%, rgba(15,15,15,.18) 75%, transparent 76%);
}

.wave-3 {
  width: 78vw;
  height: 44vw;
  right: -18vw;
  top: 30%;
  border-top: 1px solid rgba(255,255,255,.025);
  background: linear-gradient(156deg, transparent 0 52%, rgba(70,70,70,.09) 63%, transparent 78%);
  opacity: .8;
}

.content {
  position: relative;
  z-index: 2;
  width: min(92vw, 620px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 20px;
  transform: translateY(-1.5vh);
}

.logo {
  width: clamp(190px, 16.6vw, 318px);
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  animation: logoIn .75s cubic-bezier(.22,1,.36,1) both;
}

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(54px, 5vw, 82px);
  margin-top: clamp(66px, 6.2vh, 88px);
  animation: socialIn .75s .12s cubic-bezier(.22,1,.36,1) both;
}

.social-link {
  width: clamp(68px, 5.6vw, 108px);
  height: clamp(68px, 5.6vw, 108px);
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  transition: transform .25s ease, filter .25s ease;
}

.social-link svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-link svg .dot,
.social-link svg .fill {
  fill: currentColor;
  stroke: none;
}


.social-link:hover,
.social-link:focus-visible {
  transform: scale(1.06);
  filter: brightness(1.16);
  outline: none;
}

.products-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(280px, 19vw, 376px);
  height: clamp(52px, 4.2vw, 62px);
  margin-top: clamp(38px, 4.1vh, 55px);
  padding: 0 28px;
  border-radius: 14px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-size: clamp(18px, 1.35vw, 25px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
  animation: buttonIn .75s .22s cubic-bezier(.22,1,.36,1) both;
}

.products-button:hover,
.products-button:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  outline: none;
}

.products-button:active {
  transform: translateY(0) scale(.99);
}

.social-link:focus-visible,
.products-button:focus-visible {
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 5px;
}

@keyframes logoIn {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes socialIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes buttonIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- TABLET ---------- */
@media (max-width: 900px) {
  .content {
    width: min(94vw, 560px);
  }

  .logo {
    width: clamp(170px, 28vw, 280px);
  }

  .socials {
    gap: clamp(40px, 6vw, 64px);
    margin-top: clamp(48px, 5.5vh, 72px);
  }

  .social-link {
    width: clamp(64px, 9vw, 88px);
    height: clamp(64px, 9vw, 88px);
  }

  .products-button {
    min-width: clamp(240px, 42vw, 340px);
    height: clamp(50px, 5.5vw, 58px);
    font-size: clamp(17px, 2.2vw, 22px);
  }
}

/* ---------- CELULAR ---------- */
@media (max-width: 700px) {
  .landing {
    min-height: 100svh;
  }

  .content {
    width: 100%;
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    transform: none;
  }

  .logo {
    width: min(56vw, 240px);
  }

  .socials {
    gap: 40px;
    margin-top: clamp(40px, 6vh, 56px);
  }

  .social-link {
    width: 68px;
    height: 68px;
  }

  .products-button {
    width: min(88vw, 320px);
    min-width: 0;
    height: 52px;
    margin-top: clamp(28px, 4vh, 40px);
    border-radius: 12px;
    font-size: 17px;
  }

  .orb-1 {
    width: 125vw;
    height: 125vw;
    min-width: 0;
    min-height: 0;
    left: -31vw;
    top: -72vw;
  }

  .orb-2 {
    width: 145vw;
    height: 145vw;
    min-width: 0;
    min-height: 0;
    right: -72vw;
    bottom: -80vw;
  }

  .orb-3 {
    width: 110vw;
    height: 110vw;
    min-width: 0;
    min-height: 0;
    right: -58vw;
    top: 3vh;
  }

  .wave-1 {
    width: 175vw;
    height: 105vw;
    left: -46vw;
    bottom: -46vw;
  }

  .wave-2 {
    width: 155vw;
    height: 90vw;
    right: -52vw;
    bottom: -24vw;
  }
}

/* ---------- CELULAR PEQUENO ---------- */
@media (max-width: 380px) {
  .logo {
    width: min(62vw, 200px);
  }

  .socials {
    gap: 32px;
    margin-top: 36px;
  }

  .social-link {
    width: 58px;
    height: 58px;
  }

  .products-button {
    width: min(90vw, 280px);
    height: 48px;
    font-size: 15px;
    margin-top: 24px;
  }
}

/* ---------- LANDSCAPE (celular deitado) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .landing {
    min-height: 100svh;
    height: 100svh;
  }

  .content {
    padding: 12px 24px;
    transform: none;
    justify-content: center;
  }

  .logo {
    width: min(28vh, 180px);
  }

  .socials {
    gap: 36px;
    margin-top: 16px;
  }

  .social-link {
    width: 48px;
    height: 48px;
  }

  .products-button {
    height: 42px;
    margin-top: 14px;
    font-size: 15px;
    min-width: 200px;
  }
}

/* ---------- DESKTOP GRANDE ---------- */
@media (min-width: 1400px) {
  .logo {
    width: clamp(280px, 14vw, 360px);
  }

  .social-link {
    width: clamp(90px, 5vw, 120px);
    height: clamp(90px, 5vw, 120px);
  }

  .products-button {
    min-width: clamp(340px, 18vw, 420px);
    height: clamp(58px, 3.5vw, 68px);
    font-size: clamp(22px, 1.2vw, 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================
   IMAGENS PERSONALIZÁVEIS POR LINK
   ===================================================== */
.background.has-custom-background {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.background.has-custom-background .orb,
.background.has-custom-background .wave {
  opacity: 0;
}

.custom-social-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* WhatsApp PNG ocupa o container inteiro; Instagram SVG tem margem no viewBox.
   Ajusta para os dois ficarem com o mesmo tamanho visual. */
#whatsappIcon,
a#whatsappLink .custom-social-icon {
  width: 82%;
  height: 82%;
  margin: auto;
}