:root {
  --bg: #050505;
  --fg: #f5f5f5;
  --muted: #8a8a8a;
  --line: rgba(255, 255, 255, .08);
  --gap: clamp(24px, 4vw, 48px);
  --max: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 255, 255, .09), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero {
  min-height: 52vh;
  display: grid;
  place-items: center;
  padding: 96px 20px 56px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 7.5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #7a7a7a 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  margin-top: 28px;
  font-size: clamp(.8rem, 2.4vw, 1rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
}

main {
  width: min(100% - 40px, var(--max));
  margin: 0 auto;
  padding-bottom: 160px;
  display: grid;
  gap: clamp(72px, 10vw, 128px);
}

/* ---------- vídeos ---------- */
.videos { display: grid; grid-template-columns: 1fr; gap: var(--gap); }

/* desktop: vídeos verticais lado a lado, juntos na largura do horizontal */
@media (min-width: 801px) {
  .videos { grid-template-columns: 1fr 1fr; }
  .videos .frame { grid-column: 1 / -1; }
  .videos .frame.portrait { grid-column: auto; width: 100%; }
}

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}

.frame.portrait {
  width: min(100%, 420px, 72vh * 9 / 16);
  margin-inline: auto;
}

.frame video,
.frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}

/* ---------- banners ---------- */
.banners {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

.banners figure {
  grid-column: span 3;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #111;
}

/* verticais: 4 por linha; horizontal: linha inteira, sempre por último */
.banners figure.wide { grid-column: 1 / -1; order: 1; }

.banners img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.banners figure:hover img { transform: scale(1.04); }

@media (max-width: 700px) {
  .banners { grid-template-columns: 1fr; }
  .banners figure,
  .banners figure.wide { grid-column: 1; }
}

/* ---------- site de exemplo ---------- */
.site {
  display: grid;
  justify-items: center;
  gap: 40px;
}

.browser {
  display: block;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0c0c0c;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  transition: transform .4s ease;
}

.browser:hover { transform: translateY(-4px); }

.browser-bar {
  display: flex;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #111;
}

.browser-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.browser img { display: block; width: 100%; height: auto; }

.btn {
  display: inline-block;
  padding: 18px 38px;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff, #cfcfcf);
  color: #000;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  transition: transform .25s ease;
}

.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn:focus-visible, .browser:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- WhatsApp ---------- */
.whatsapp {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #000;
  background: linear-gradient(145deg, #fff, #cfcfcf);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .2);
  transition: transform .25s ease, box-shadow .25s ease;
  z-index: 10;
}

.whatsapp:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px rgba(0, 0, 0, .7); }
.whatsapp:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }