/* ============================================================
   Guardexa — landing page (Landing Page V2, Claude Design)
   Shared by /, /en/ and /pt-br/. One markup tree serves both
   approved compositions: mobile is the base layout, desktop
   applies at ≥960 × ≥580 px (the design's own breakpoint).
   ============================================================ */

/* Plus Jakarta Sans (variable, latin subset) — self-hosted, OFL-1.1 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #0F1BA8;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: #DCE4FF;
}

a:hover {
  color: #FFFFFF;
}

/* ── Mobile composition (base) ──────────────────────────── */
.lp {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse 130% 60% at 50% 30%, #3656FF 0%, #1D33D8 50%, #0F1BA8 100%);
}

.lp-glow-anchor {
  position: absolute;
  left: 50%;
  top: 4%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.lp-glow {
  position: absolute;
  left: -60vw;
  top: 0;
  width: 120vw;
  height: 120vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 170, 255, 0.45) 0%, rgba(143, 170, 255, 0) 62%);
}

.lp-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.lp-header {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 0 20px;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: 10px;
}

.lp-brand:focus-visible {
  outline: 3px solid #FFD95A;
  outline-offset: 4px;
}

.lp-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.28);
}

.lp-brand span {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Language selector: globe + EN | PT, active language = white chip */
.lp-lang {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.lp-lang svg {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0 3px 0 6px;
  stroke-width: 2.2;
}

.lp-lang button {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  height: 28px;
  min-width: 38px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  background: transparent;
  color: #DCE4FF;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.lp-lang button[aria-pressed="true"] {
  background: #FFFFFF;
  color: #1D33D8;
}

/* Stretches each chip's tap area to 44px tall on touch layouts */
.lp-lang button::before {
  content: '';
  position: absolute;
  inset: -8px -1px;
}

.lp-lang button:focus-visible {
  outline: 2px solid #FFD95A;
  outline-offset: 2px;
}

.lp-stage {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 250px;
}

/* The bottom-fade mask sits on this wrapper, not on the <img>: a mask
   clips to its own box, and on the image box that cut the wolf's
   drop-shadow off in straight lines beside the paw and above the ears.
   The wrapper bleeds past the image on every side but the bottom
   (the top bleed is padded back, so the image keeps its exact size
   and position) and the gradient stops are mapped onto the image. */
.lp-wolf-frame {
  --bleed: 120px;
  position: absolute;
  left: -200px;
  right: -200px;
  top: calc(6px - var(--bleed));
  bottom: -92px;
  padding-top: var(--bleed);
  display: flex;
  justify-content: center;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--bleed) + 0.5 * min(100% - var(--bleed), 106.6vw)), transparent calc(var(--bleed) + 0.92 * min(100% - var(--bleed), 106.6vw)));
  mask-image: linear-gradient(180deg, #000 calc(var(--bleed) + 0.5 * min(100% - var(--bleed), 106.6vw)), transparent calc(var(--bleed) + 0.92 * min(100% - var(--bleed), 106.6vw)));
}

.lp-wolf-frame picture {
  display: contents;
}

.lp-wolf {
  flex: none;
  height: min(100%, 106.6vw);
  width: auto;
  display: block;
  filter: drop-shadow(0 24px 50px rgba(4, 10, 90, 0.5));
}

/* Mobile incident preview — only when the phone is tall enough */
.lp-chip {
  display: none;
  position: absolute;
  left: max(14px, calc(50% - 186px));
  bottom: 12px;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 7px;
  border-radius: 16px;
  background: rgba(10, 16, 80, 0.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 26px rgba(4, 10, 90, 0.4);
}

.lp-chip img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.lp-chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  white-space: nowrap;
}

.lp-chip-title {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
}

.lp-chip-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: #DCE4FF;
}

.lp-chip-meta .lp-count {
  color: #FFB3B6;
}

.lp-main {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(15, 27, 168, 0) 0px, rgba(15, 27, 168, 0.72) 96px);
}

.lp-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-title {
  margin: 0;
  max-width: 420px;
  font-size: clamp(30px, 8.8vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(8, 16, 110, 0.35);
}

.lp-mark {
  display: inline-block;
  padding: 0 0.2em 0.07em;
  border-radius: 0.3em;
  background: #3A62FF;
  box-shadow: inset 0 0 0 2px #8FAAFF;
  line-height: 1.06;
  /* Only kicks in when the word can't fit on one line (large
     accessibility text); otherwise it would be clipped. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.lp-sub {
  margin: 12px 0 0;
  max-width: 330px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: #DCE4FF;
  text-wrap: pretty;
}

.lp-cta {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  min-height: 60px;
  padding: 0 24px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0E1330;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 34px rgba(4, 10, 90, 0.45);
}

.lp-cta:hover {
  background: #EEF2FF;
  color: #0E1330;
}

.lp-cta:active {
  transform: scale(0.98);
}

.lp-cta:focus-visible {
  outline: 3px solid #FFD95A;
  outline-offset: 3px;
}

.lp-cta svg {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
  color: #1D33D8;
}

.lp-trust {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #DCE4FF;
}

.lp-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lp-trust svg {
  width: 14px;
  height: 14px;
  display: block;
  flex: none;
  stroke-width: 2.4;
}

/* The mobile footer sits in the same darkened band as the copy
   above it (the gradient's solid end-stop continues here). */
.lp-footer {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 20px calc(14px + env(safe-area-inset-bottom));
  background: rgba(15, 27, 168, 0.72);
  font-size: 12.5px;
  font-weight: 600;
  color: #B7C6FF;
}

.lp-footer a {
  color: #C9D4FF;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 6px;
}

.lp-footer a:hover {
  color: #FFFFFF;
}

.lp-footer a:focus-visible {
  outline: 2px solid #FFD95A;
  outline-offset: 1px;
}

.lp-desktop-only,
.lp-proof {
  display: none;
}

@media (min-height: 640px) {
  .lp-chip {
    display: flex;
  }
}

/* Desktop incident preview card */
.lp-proof {
  margin: 0;
  position: absolute;
  left: 7%;
  bottom: 6%;
  width: 300px;
  flex-direction: column;
  gap: 12px;
}

.lp-proof-card {
  background: #F3F5FA;
  border-radius: 24px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 30px 70px rgba(4, 10, 90, 0.5);
}

.lp-proof-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 2px;
}

.lp-proof-head img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: block;
}

.lp-proof-head span {
  flex: 1;
  font-size: 15px;
  font-weight: 800;
  color: #0E1330;
  letter-spacing: -0.01em;
}

.lp-proof-photo {
  position: relative;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(14, 19, 48, 0.14);
}

.lp-proof-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-proof-tag {
  position: absolute;
  top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(14, 19, 48, 0.72);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
}

.lp-proof-tag-start {
  left: 10px;
}

.lp-proof-tag-end {
  right: 10px;
  padding: 5px 9px;
}

.lp-proof-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.lp-stat {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lp-stat-label,
.lp-stat-note {
  font-size: 12px;
  font-weight: 700;
  color: #5D667D;
}

.lp-stat-note {
  font-weight: 600;
}

.lp-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: #0E1330;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.lp-stat-value .lp-count {
  color: #E0393E;
}

.lp-proof figcaption {
  padding-left: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #DCE4FF;
}

/* ── Desktop composition ────────────────────────────────── */
@media (min-width: 960px) and (min-height: 580px) {
  .lp {
    background: radial-gradient(ellipse 62% 90% at 72% 42%, #3656FF 0%, #1D33D8 48%, #0F1BA8 100%);
  }

  .lp-glow-anchor {
    left: 70%;
    top: 30%;
  }

  .lp-glow {
    left: -380px;
    top: -380px;
    width: 760px;
    height: 760px;
    max-width: none;
    max-height: none;
    background: radial-gradient(circle, rgba(143, 170, 255, 0.42) 0%, rgba(143, 170, 255, 0) 64%);
  }

  .lp-shell {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(40px, 6.5vw, 104px);
    box-sizing: border-box;
  }

  .lp-header {
    height: 96px;
    padding: 0;
    gap: 24px;
  }

  .lp-brand {
    gap: 12px;
    border-radius: 12px;
  }

  .lp-brand img {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .lp-brand span {
    font-size: 23px;
    letter-spacing: -0.015em;
  }

  .lp-lang {
    padding: 4px;
    background: rgba(10, 16, 80, 0.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .lp-lang svg {
    width: 16px;
    height: 16px;
    margin: 0 4px 0 8px;
    stroke-width: 2;
  }

  .lp-lang button {
    position: static;
    height: 34px;
    min-width: 46px;
    padding: 0 12px;
    font-size: 13.5px;
  }

  .lp-lang button::before {
    content: none;
  }

  .lp-chip,
  .lp-mobile-only {
    display: none;
  }

  .lp-stage {
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 44%;
    right: 0;
    z-index: 1;
    min-height: 0;
  }

  /* Side bleed covers the widest possible overflow of the wolf past
     its column (≈ half its ~97.6vh width) plus the shadow. */
  .lp-wolf-frame {
    left: calc(-50vh - 120px);
    right: calc(-50vh - 120px);
    top: calc(-1 * var(--bleed));
    bottom: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--bleed) + 0.68 * (100% - var(--bleed))), transparent calc(var(--bleed) + 0.99 * (100% - var(--bleed))));
    mask-image: linear-gradient(180deg, #000 calc(var(--bleed) + 0.68 * (100% - var(--bleed))), transparent calc(var(--bleed) + 0.99 * (100% - var(--bleed))));
  }

  .lp-wolf {
    height: 100%;
    filter: drop-shadow(0 40px 80px rgba(4, 10, 90, 0.5));
  }

  .lp-main {
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 0 24px;
    background: none;
  }

  .lp-copy {
    width: min(47vw, 660px);
    align-items: flex-start;
    text-align: left;
  }

  .lp-title {
    max-width: none;
    font-size: clamp(44px, min(4.6vw, 7.4vh), 68px);
    font-size: clamp(44px, min(4.6vw, 7.4svh), 68px);
    line-height: 1.08;
    letter-spacing: -0.038em;
    text-shadow: none;
  }

  .lp-mark {
    padding: 0 0.18em 0.06em;
    border-radius: 0.26em;
    box-shadow: inset 0 0 0 3px #8FAAFF;
  }

  .lp-sub {
    margin-top: 24px;
    max-width: 480px;
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.5;
  }

  .lp-desktop-only {
    display: inline;
  }

  .lp-cta {
    margin-top: 36px;
    display: inline-flex;
    gap: 16px;
    width: auto;
    max-width: none;
    min-height: 74px;
    min-width: 340px;
    padding: 0 44px 0 36px;
    font-size: 21px;
    box-shadow: 0 18px 44px rgba(4, 10, 90, 0.45);
  }

  .lp-cta:hover {
    transform: translateY(-1px);
  }

  .lp-cta:active {
    transform: scale(0.98);
  }

  .lp-cta:focus-visible {
    outline-offset: 4px;
  }

  .lp-cta svg {
    width: 26px;
    height: 26px;
  }

  .lp-trust {
    margin-top: 26px;
    justify-content: flex-start;
    gap: 10px 22px;
    font-size: 15px;
    line-height: normal;
  }

  .lp-trust-item {
    gap: 8px;
  }

  .lp-trust svg {
    width: 17px;
    height: 17px;
    stroke-width: 2.2;
  }

  .lp-footer {
    z-index: 3;
    height: 64px;
    padding: 0;
    justify-content: flex-start;
    gap: 24px;
    background: none;
    font-size: 13.5px;
    color: #C9D4FF;
  }

  .lp-footer a {
    color: #DCE4FF;
    display: inline;
    min-height: 0;
    padding: 0;
    border-radius: 4px;
  }

  .lp-footer a:focus-visible {
    outline-offset: 3px;
  }
}

@media (min-width: 960px) and (min-height: 760px) {
  .lp-proof {
    display: flex;
  }
}

/* ── Motion (skipped entirely for prefers-reduced-motion) ── */
@keyframes lp-wolf-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lp-glow {
  from {
    transform: translate(-3%, -2%) scale(1);
    opacity: 0.8;
  }
  to {
    transform: translate(3%, 2%) scale(1.07);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-wolf {
    animation: lp-wolf-in 900ms cubic-bezier(.2, .7, .2, 1) backwards;
  }

  .lp-title,
  .lp-sub,
  .lp-chip,
  .lp-proof {
    animation: lp-rise 520ms cubic-bezier(.2, .7, .2, 1) backwards;
  }

  .lp-sub {
    animation-delay: 60ms;
  }

  .lp-chip {
    animation-delay: 260ms;
  }

  .lp-proof {
    animation-delay: 300ms;
  }

  .lp-glow {
    animation: lp-glow 9s ease-in-out infinite alternate;
  }
}