:root {
  --navy-950: #02031d;
  --navy-900: #05072c;
  --navy-800: #0b1246;
  --teal: #10cabb;
  --teal-light: #40e3d3;
  --blue: #1183e7;
  --ink: #090d31;
  --muted: #6f7891;
  --line: #e5e9f0;
  --card: #ffffff;
  --error: #c5273e;
  --success: #078b65;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--navy-950);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(460px, 1.35fr) minmax(390px, 0.93fr);
  align-items: stretch;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 48%, rgba(18, 32, 99, 0.65), transparent 33%),
    linear-gradient(118deg, #03041f 0%, #030522 52%, #07092c 100%);
}

.ambient { position: absolute; z-index: -1; border-radius: 999px; filter: blur(8px); pointer-events: none; }
.ambient-one { width: 420px; height: 420px; right: 22%; top: -250px; background: rgba(11, 143, 221, 0.09); }
.ambient-two { width: 350px; height: 350px; left: 42%; bottom: -260px; background: rgba(11, 205, 187, 0.1); }

.intro-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(34px, 4vw, 64px) 0 clamp(36px, 4vw, 64px) clamp(30px, 4.2vw, 74px);
}

.brand {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  color: #fff;
  text-decoration: none;
  font-size: clamp(32px, 3.15vw, 54px);
  font-weight: 700;
  letter-spacing: -0.085em;
  line-height: 1;
}

.brand-decor {
  background: linear-gradient(90deg, #1685e6, #18a7e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-fun {
  position: relative;
  margin-left: .02em;
  background: linear-gradient(90deg, #10d1c1, #25e1cf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-fun::before,
.brand-fun::after {
  content: "";
  position: absolute;
  top: -0.02em;
  width: .08em;
  height: .08em;
  border-radius: 50%;
  background: #20dacb;
}
.brand-fun::before { left: .14em; }
.brand-fun::after { left: .31em; }

.intro-copy {
  margin-top: auto;
  margin-bottom: auto;
  padding: 48px 0 34px;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--teal-light);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .34em;
}

.intro-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(55px, 5.8vw, 88px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.075em;
}

.intro-copy h1 em {
  color: var(--teal);
  font-style: normal;
}

.subtitle {
  max-width: 365px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.65;
}

.benefits {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.3vw, 34px);
}

.benefit {
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  line-height: 1.35;
}

.benefit-icon { width: 43px; height: 43px; color: var(--teal); }
.benefit-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.benefit-divider { width: 1px; height: 62px; background: rgba(255,255,255,.18); }

.product-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.product-panel::before {
  content: "";
  position: absolute;
  inset: 8% 2% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 41, 114, .5), transparent 67%);
  filter: blur(14px);
}

.product-panel img {
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  height: 96svh;
  max-height: 1080px;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: normal;
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.2));
}

.dot-grid {
  position: absolute;
  z-index: 2;
  top: 13%;
  left: 4%;
  display: grid;
  grid-template-columns: repeat(5, 8px);
  gap: 18px;
}
.dot-grid i { width: 7px; height: 7px; border-radius: 50%; background: #137fdd; box-shadow: 0 0 10px rgba(19,127,221,.45); }

.form-panel {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px clamp(28px, 3vw, 58px) 34px 16px;
}

.form-card {
  width: min(100%, 510px);
  padding: clamp(28px, 2.4vw, 42px);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 30px;
  background: rgba(255,255,255,.985);
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(0,0,0,.28), 0 2px 0 rgba(255,255,255,.8) inset;
}

.form-header { text-align: center; }
.form-header p { margin: 0 0 9px; color: #1a97cb; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.form-header h2 { margin: 0; font-size: clamp(28px, 2.2vw, 39px); line-height: 1.15; letter-spacing: -.05em; }
.form-header span { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.fields { display: grid; gap: 13px; margin-top: 27px; }

.field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.field:focus-within { border-color: #74b8e7; box-shadow: 0 0 0 4px rgba(31, 145, 209, .1); }
.field.is-invalid { border-color: #e09aa5; box-shadow: 0 0 0 4px rgba(197,39,62,.07); }
.field-icon { flex: 0 0 54px; display: grid; place-items: center; color: #8c96aa; }
.field-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field input { width: 100%; height: 56px; padding: 0 15px 0 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.field input::placeholder { color: #8f97a9; }
.field-error { position: absolute; left: 10px; bottom: -16px; color: var(--error); font-size: 10px; }

.consent-box {
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 22px;
  padding: 15px;
  border: 1px solid #e7e9ef;
  border-radius: 10px;
  background: #fafbfc;
  color: #4e5871;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.55;
}

.consent-box input { position: absolute; opacity: 0; pointer-events: none; }
.check-ui { display: grid; place-items: center; width: 23px; height: 23px; margin-top: 1px; border: 2px solid #a7aebd; border-radius: 5px; background: #fff; transition: all .18s ease; }
.check-ui svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.7); transition: .18s ease; }
.consent-box input:checked + .check-ui { border-color: var(--teal); background: var(--teal); }
.consent-box input:checked + .check-ui svg { opacity: 1; transform: scale(1); }
.consent-box input:focus-visible + .check-ui { outline: 3px solid rgba(16,202,187,.2); outline-offset: 2px; }
.consent-box strong { color: #e84b5e; }
.consent-error { display: block; margin: 9px 3px 0; color: #7b8395; font-size: 11px; line-height: 1.4; }
.consent-error.is-error { color: var(--error); }

.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

.submit-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 61px;
  margin-top: 24px;
  padding: 0 22px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #0caeaa, #0ac9b6);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 25px rgba(8, 178, 166, .24);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.submit-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(8, 178, 166, .3); }
.submit-button:disabled { cursor: not-allowed; background: #bac3d8; box-shadow: none; opacity: .86; }
.submit-button.is-loading .button-label,
.submit-button.is-loading .download-icon { opacity: 0; }
.download-icon { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s ease; }
.spinner { position: absolute; width: 25px; height: 25px; border: 3px solid rgba(255,255,255,.38); border-top-color: #fff; border-radius: 50%; opacity: 0; }
.submit-button.is-loading .spinner { opacity: 1; animation: spin .75s linear infinite; }

.form-message { min-height: 18px; margin: 11px 0 0; text-align: center; font-size: 12px; line-height: 1.45; }
.form-message.is-error { color: var(--error); }
.form-message.is-success { color: var(--success); }

.privacy-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 8px auto 0; color: #8a91a1; font-size: 10px; line-height: 1.5; text-align: center; }
.privacy-note svg { flex: 0 0 16px; width: 16px; height: 16px; stroke: #8590a4; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

.modal { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; padding: 20px; }
.modal.is-open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2, 3, 29, .75); backdrop-filter: blur(8px); }
.modal-dialog { position: relative; width: min(100%, 430px); padding: 38px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.32); text-align: center; animation: modalIn .22s ease both; }
.success-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; background: rgba(16,202,187,.13); color: #0baa9a; font-size: 27px; font-weight: 800; }
.modal-eyebrow { margin: 0; color: #1592c5; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.modal-dialog h2 { margin: 10px 0 0; font-size: 31px; letter-spacing: -.045em; }
.modal-dialog p:not(.modal-eyebrow) { margin: 14px auto 24px; color: #6e778b; font-size: 13px; line-height: 1.6; }
.modal-button { display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 11px; background: #0a2e77; color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; }
.modal-close { margin-top: 14px; border: 0; background: transparent; color: #747d90; cursor: pointer; font-size: 12px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes modalIn { from { transform: translateY(12px) scale(.97); opacity: 0; } }

@media (max-width: 1320px) {
  .hero { grid-template-columns: minmax(260px, .85fr) minmax(390px, 1.22fr) minmax(360px, .95fr); }
  .intro-panel { padding-left: 34px; }
  .form-panel { padding-right: 26px; }
  .benefit { font-size: 12px; }
  .product-panel img { width: 108%; max-width: none; }
}

@media (max-width: 1030px) {
  .hero {
    grid-template-columns: 42% 58%;
    grid-template-rows: auto auto;
    min-height: 100svh;
  }
  .intro-panel { grid-column: 1; grid-row: 1; min-height: 600px; padding: 36px 24px 42px 36px; }
  .product-panel { grid-column: 2; grid-row: 1; min-height: 600px; }
  .product-panel img { width: 100%; height: 600px; }
  .form-panel { grid-column: 1 / -1; grid-row: 2; padding: 0 26px 48px; }
  .form-card { width: min(100%, 700px); margin-top: -72px; }
  .fields { grid-template-columns: 1fr 1fr; gap: 20px 13px; }
}

@media (max-width: 720px) {
  .hero { display: flex; flex-direction: column; min-height: 100svh; overflow: visible; }
  .intro-panel { min-height: auto; padding: 28px 22px 10px; }
  .brand { font-size: 39px; }
  .intro-copy { padding: 45px 0 16px; }
  .eyebrow { margin-bottom: 12px; font-size: 10px; }
  .intro-copy h1 { font-size: clamp(51px, 17vw, 72px); line-height: .96; }
  .subtitle { max-width: 330px; margin-top: 22px; font-size: 15px; }
  .benefits { display: none; }
  .product-panel { min-height: 390px; align-items: flex-end; overflow: hidden; }
  .product-panel img { width: min(108%, 520px); height: 430px; object-position: center bottom; }
  .dot-grid { top: 3%; left: 10%; transform: scale(.75); }
  .form-panel { padding: 0 14px 28px; }
  .form-card { margin-top: -28px; padding: 26px 18px; border-radius: 24px; }
  .fields { grid-template-columns: 1fr; gap: 16px; }
  .field { min-height: 56px; }
  .field input { height: 54px; }
  .modal-dialog { padding: 31px 23px; }
}

@media (max-width: 390px) {
  .intro-copy h1 { font-size: 49px; }
  .product-panel { min-height: 340px; }
  .product-panel img { width: 116%; height: 380px; }
  .form-header h2 { font-size: 29px; }
}

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


/* Logo oficial Decorfun */
.brand {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  text-decoration: none;
}

.brand-logo {
  display: block !important;
  width: 190px !important;
  height: auto !important;
  max-width: 100%;
  object-fit: contain;
  background: transparent !important;
}

.brand-decor,
.brand-fun,
.brand-fun::before,
.brand-fun::after {
  display: none !important;
}

@media (max-width: 768px) {
  .brand-logo {
    width: 155px !important;
  }
}