:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 280px; }
body { margin: 0; min-width: 280px; background: #080709; }

.scene {
  position: relative;
  isolation: isolate;
  width: min(100%, 560px);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  overflow: hidden;
  background: url("assets/photo.jpg") center 25% / cover no-repeat;
  box-shadow: 0 0 90px #0009;
}

.scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #06121a05 0%, #06121a0d 32%, #06121a20 54%, #06121aa8 100%);
}

.online {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 35px;
  padding: 6px 13px 6px 10px;
  border: 1px solid #ffffff76;
  border-radius: 100px;
  background: #0a1c27a8;
  box-shadow: 0 5px 28px #0004;
  font-size: 13px;
  font-weight: 750;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.dot {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2ee37c;
  box-shadow: 0 0 0 5px #2ee37c2b, 0 0 12px #2ee37caa;
  animation: pulse 1.8s ease-in-out infinite;
}

.content {
  position: absolute;
  right: 14px;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 14px;
}

.glass {
  padding: 23px 22px 20px;
  border: 1px solid #ffffff8a;
  border-radius: 26px;
  background: #092d4438;
  box-shadow: inset 0 1px #ffffff40, 0 20px 38px #00152142;
  backdrop-filter: blur(3px) saturate(130%);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
}

h1 {
  margin: 0;
  font-size: clamp(36px, 9.8vw, 58px);
  font-weight: 870;
  letter-spacing: -.068em;
  line-height: 1.04;
  white-space: nowrap;
  text-shadow: 0 2px 16px #00152499;
}

h1 em { color: var(--name); font-style: italic; }

.tagline {
  margin: 11px 0 0;
  font-size: clamp(8px, 2.25vw, 11px);
  font-weight: 800;
  letter-spacing: .21em;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 1px 8px #000b;
}

.tagline span { padding-inline: .2em; }

.cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 72px;
  margin-top: 13px;
  padding: 10px 15px;
  overflow: hidden;
  border: 1px solid #ffffff94;
  border-radius: 21px;
  background: var(--button);
  box-shadow: 0 13px 28px var(--shadow), inset 0 1px #ffffff84;
  color: #fff;
  font-size: clamp(11px, 3.6vw, 17px);
  font-weight: 830;
  letter-spacing: -.035em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.cta::before {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -60%;
  width: 58%;
  transform: skewX(-23deg);
  background: linear-gradient(90deg, #fff0, #fff8, #fff0);
  filter: blur(5px);
  animation: sweep 4s ease-in-out infinite;
  pointer-events: none;
}

.cta > * { position: relative; z-index: 1; }
.cta > span:last-child { flex: 1; }
.cta:focus-visible { outline: 3px solid white; outline-offset: 3px; }

.icon {
  display: grid;
  flex: 0 0 47px;
  place-items: center;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: white;
  color: var(--icon);
}

.icon svg { width: 23px; height: 23px; }

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 12px);
  margin: 20px 0 0;
  color: #f3edefc7;
  font-size: clamp(7px, 1.85vw, 10px);
  font-weight: 760;
  letter-spacing: .14em;
  white-space: nowrap;
  text-shadow: 0 1px 5px #000c;
}

.footer i { width: 1px; height: 13px; background: #ffffff80; }

html[data-theme="azul"] {
  --name: #a9e9ff;
  --button: linear-gradient(110deg, #1196d6, #34b8ed 55%, #128acb);
  --icon: #168fce;
  --shadow: #0068aa77;
}

html[data-variant="borda-completa"] .content {
  right: 13px;
  bottom: max(19px, env(safe-area-inset-bottom));
  left: 13px;
  padding: 23px 18px 19px;
  border: 1.5px solid #d8f4ffb5;
  border-radius: 32px;
  background: #082d4226;
  box-shadow: inset 0 1px #ffffff5c, 0 19px 43px #0014215c;
  backdrop-filter: blur(1.5px) saturate(125%);
  -webkit-backdrop-filter: blur(1.5px) saturate(125%);
}

html[data-variant="borda-completa"] .scene::before {
  background: linear-gradient(180deg, #06121a05 0%, #06121a0d 35%, #06121a1c 57%, #06121a80 100%);
}

html[data-variant="borda-completa"] .glass {
  padding: 0 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-variant="borda-completa"] .cta { margin-top: 22px; }
html[data-variant="borda-completa"] .footer { margin-top: 20px; }

html[data-theme="rosa"] {
  --name: #ffd2e8;
  --button: linear-gradient(110deg, #ed2682, #ff62aa 55%, #e92d90);
  --icon: #eb318b;
  --shadow: #cc0e6870;
}

html[data-theme="rosa"] .scene::before {
  background: linear-gradient(180deg, #3a051106 0%, #3a05110b 34%, #450f301d 57%, #2f0925ac 100%);
}

html[data-theme="rosa"] .online {
  left: auto;
  right: 20px;
  background: #451529a8;
}

html[data-theme="rosa"] .glass {
  padding: 20px 15px 21px;
  border-color: #ffe0efb3;
  border-radius: 34px 34px 10px 10px;
  background: #5c153538;
  text-align: center;
  backdrop-filter: blur(2px) saturate(130%);
  -webkit-backdrop-filter: blur(2px) saturate(130%);
}

html[data-theme="rosa"] .content { bottom: max(28px, env(safe-area-inset-bottom)); }
html[data-theme="rosa"] .cta { margin-top: 17px; border-radius: 100px; }
html[data-theme="rosa"] .footer { margin-top: 20px; }

html[data-theme="laranja"] {
  --name: #ffcf90;
  --button: linear-gradient(110deg, #e86b20, #ffa14a 54%, #e97528);
  --icon: #e97a2c;
  --shadow: #b744087a;
}

html[data-theme="laranja"] .scene::before {
  background: linear-gradient(180deg, #5a240308 0%, #5a24030c 35%, #3e1c131e 55%, #26130ab3 100%);
}

html[data-theme="laranja"] .online {
  top: auto;
  bottom: 358px;
  left: 23px;
  background: #572d1db0;
}

html[data-theme="laranja"] .glass {
  padding: 20px 18px 22px;
  border: 1px solid #ffe3b48c;
  border-left: 4px solid #ff9c42;
  border-radius: 5px 25px 25px 5px;
  background: #6c381b2b;
  backdrop-filter: blur(2px) saturate(125%);
  -webkit-backdrop-filter: blur(2px) saturate(125%);
}

html[data-theme="laranja"] .content { bottom: max(23px, env(safe-area-inset-bottom)); }
html[data-theme="laranja"] .cta { width: calc(100% - 23px); margin: 16px 0 0 auto; border-radius: 10px 24px 24px 10px; }
html[data-theme="laranja"] .footer { justify-content: flex-start; margin-left: 6px; }

@media (max-width: 360px) {
  .content { right: 9px; left: 9px; }
  .glass { padding-inline: 15px; }
  h1 { font-size: clamp(30px, 9.4vw, 36px); }
  .tagline { font-size: 7px; letter-spacing: .19em; }
  .cta { padding-inline: 10px; font-size: 11px; }
  .icon { flex-basis: 42px; width: 42px; height: 42px; }
  .footer { font-size: 6.7px; letter-spacing: .1em; gap: 6px; }
  html[data-theme="laranja"] .online { bottom: 325px; }
  html[data-variant="borda-completa"] .content { right: 8px; left: 8px; padding: 17px 11px 14px; }
}

@media (max-height: 650px) {
  .content { bottom: 12px !important; }
  .glass { padding-block: 14px !important; }
  .cta { min-height: 62px; margin-top: 9px !important; }
  .footer { margin-top: 12px !important; }
  html[data-theme="laranja"] .online { bottom: 284px; }
  html[data-variant="borda-completa"] .content { padding-top: 15px; padding-bottom: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .dot, .cta::before { animation: none; }
  .cta::before { display: none; }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px #2ee37c22, 0 0 7px #2ee37c88; }
  50% { box-shadow: 0 0 0 7px #2ee37c30, 0 0 17px #2ee37cdd; }
}

@keyframes sweep {
  0%, 17% { left: -60%; opacity: 0; }
  31% { opacity: .5; }
  65% { left: 115%; opacity: .5; }
  75%, 100% { left: 115%; opacity: 0; }
}