:root {
  --navy: #07345c;
  --blue: #0866c6;
  --red: #f0444c;
  --aqua: #25b8e6;
  --white: #ffffff;
  --ice: #eaf8fc;
  --cloud: #f6f8fa;
  --ink: #162631;
  --slate: #60717c;
  --mist: #dde7ec;
  --onplay: #745bb3;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--navy); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Alexandria", Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 14%, rgba(37, 184, 230, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 87% 30%, rgba(255, 255, 255, .12) 0 3px, transparent 4px),
    linear-gradient(160deg, #052b4d 0%, var(--navy) 58%, #0a497a 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 42%);
}

a, button { -webkit-tap-highlight-color: transparent; }

.page-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: max(22px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
}

.ambient {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
}

.ambient-one { width: 330px; height: 330px; top: -190px; left: -110px; }
.ambient-two { width: 220px; height: 220px; right: -135px; bottom: 7%; }

.link-card {
  width: min(100%, 500px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 32px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 30px 80px rgba(0, 18, 34, .35), 0 3px 0 rgba(255,255,255,.2) inset;
  animation: rise .65s cubic-bezier(.2,.8,.2,1) both;
}

.brand-panel {
  position: relative;
  padding: 38px 28px 28px;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, var(--ice) 100%);
}

.brand-panel::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -2px;
  width: 105px;
  height: 11px;
  border-radius: 50% 0 0 50%;
  background: var(--red);
  transform: rotate(-8deg);
  opacity: .96;
}

.eyebrow {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid rgba(8,102,198,.15);
  border-radius: 999px;
  color: var(--blue);
  font: 800 10px/1 "Manrope", sans-serif;
  letter-spacing: .13em;
}

.cleanzo-logo {
  display: block;
  width: min(82%, 360px);
  height: auto;
  margin: 22px auto 19px;
}

.brand-panel h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(20px, 5.8vw, 27px);
  line-height: 1.45;
  letter-spacing: -.02em;
}

.brand-panel p { margin: 8px 0 0; color: var(--slate); font-size: 13px; }

.actions { display: grid; gap: 12px; padding: 22px 20px 8px; }

.action {
  display: grid;
  grid-template-columns: 1fr 58px;
  align-items: center;
  min-height: 82px;
  padding: 11px 12px 11px 18px;
  border: 1px solid transparent;
  border-radius: 22px;
  color: var(--navy);
  text-decoration: none;
  box-shadow: 0 10px 23px rgba(7,52,92,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.action:hover { transform: translateY(-2px); box-shadow: 0 15px 28px rgba(7,52,92,.13); }
.action:active { transform: scale(.985); }
.action:focus-visible, .social-button:focus-visible, .onplay:focus-visible { outline: 3px solid rgba(8,102,198,.28); outline-offset: 3px; }

.action-copy { display: grid; gap: 4px; padding-right: 4px; text-align: right; }
.action-copy strong { font-size: 16px; line-height: 1.45; }
.action-copy small { color: var(--slate); font-size: 11px; line-height: 1.55; }
.action-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; }
.action-icon svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.action-website { border-color: rgba(8,102,198,.18); background: linear-gradient(110deg, #fff, #eef7ff); }
.action-website .action-icon { color: #fff; background: var(--blue); }
.action-whatsapp { color: #fff; background: linear-gradient(110deg, #128c7e, #22ad8e); }
.action-whatsapp .action-copy small { color: rgba(255,255,255,.82); }
.action-whatsapp .action-icon { color: #0a766c; background: rgba(255,255,255,.9); }
.brand-icon {
  display: block;
  width: 25px;
  height: 25px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.brand-whatsapp {
  width: 31px;
  height: 31px;
  -webkit-mask-image: url('./assets/tabler-brand-whatsapp.svg');
  mask-image: url('./assets/tabler-brand-whatsapp.svg');
}
.brand-facebook {
  -webkit-mask-image: url('./assets/tabler-brand-facebook.svg');
  mask-image: url('./assets/tabler-brand-facebook.svg');
}
.brand-instagram {
  -webkit-mask-image: url('./assets/tabler-brand-instagram.svg');
  mask-image: url('./assets/tabler-brand-instagram.svg');
}
.brand-tiktok {
  -webkit-mask-image: url('./assets/tabler-brand-tiktok.svg');
  mask-image: url('./assets/tabler-brand-tiktok.svg');
}
.action-call { border-color: rgba(240,68,76,.2); background: linear-gradient(110deg, #fff, #fff3f3); }
.action-call .action-icon { color: #fff; background: var(--red); }

.social-section { padding: 20px 20px 6px; }
.section-heading { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.section-heading span { height: 1px; background: var(--mist); }
.section-heading h2 { margin: 0; color: var(--slate); font-size: 13px; font-weight: 600; }
.socials { display: flex; justify-content: center; gap: 14px; padding: 16px 0 8px; }

.social-button {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--mist);
  border-radius: 16px;
  color: var(--navy);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}

.social-button:hover { color: #fff; background: var(--navy); transform: translateY(-3px); }

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 20px 20px 24px;
  border-top: 1px solid #edf1f3;
  color: var(--slate);
  font: 800 12px/1 "Manrope", sans-serif;
}

.onplay { display: inline-flex; align-items: center; text-decoration: none; }
.onplay img { display: block; width: 124px; height: auto; }

.toast {
  position: fixed;
  z-index: 10;
  right: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(22,38,49,.95);
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 18px);
  transition: .22s ease;
}
.toast.is-visible { opacity: 1; transform: translate(50%, 0); }

@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

@media (max-width: 390px) {
  .page-shell { padding-inline: 10px; }
  .link-card { border-radius: 26px; }
  .brand-panel { padding: 30px 20px 23px; }
  .actions { padding-inline: 13px; }
  .action { min-height: 76px; border-radius: 19px; }
  .footer { padding-inline: 10px; }
}

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