:root{
  --carbon:#101418;
  --bone:#F7F2EA;
  --signal-teal:#0F766E;
  --pulse-lime:#C9F27B;
  --clay:#C88E62;
  --white:#ffffff;
  --ink:#131A1F;
  --ink-soft:#5B666E;
  --border:rgba(16,20,24,.08);
  --border-strong:rgba(16,20,24,.14);
  --shadow-xl:0 24px 70px rgba(16,20,24,.18);
  --shadow-md:0 12px 28px rgba(16,20,24,.12);
  --radius-xxl:24px;
  --radius-xl:18px;
  --radius-lg:16px;
  --radius-md:14px;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Arimo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(15,118,110,.24), transparent 26%),
    radial-gradient(circle at 88% 90%, rgba(200,142,98,.14), transparent 22%),
    linear-gradient(180deg, #151b20 0%, #101418 58%, #0C1114 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%}
button,a{font:inherit}

a[x-apple-data-detectors],
a[href^="tel"],
a[href^="sms"]{
  color:inherit !important;
  text-decoration:none !important;
}

.page-shell{
  position:relative;
  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(10px, 2.8vw, 24px);
  overflow:hidden;
}

.page-shell__glow{
  position:absolute;
  border-radius:999px;
  filter:blur(80px);
  opacity:.2;
  pointer-events:none;
}

.page-shell__glow--teal{
  width:260px;
  height:260px;
  background:var(--signal-teal);
  top:-90px;
  left:-34px;
}

.page-shell__glow--clay{
  width:220px;
  height:220px;
  background:var(--clay);
  right:-64px;
  bottom:-76px;
}

.payment-card{
  position:relative;
  width:min(640px, 100%);
  background:linear-gradient(180deg, rgba(247,242,234,.985) 0%, rgba(247,242,234,.955) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-xxl);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
}

.hero{
  position:relative;
  padding:16px 16px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(201,242,123,.16), transparent 24%),
    linear-gradient(180deg, #11181D 0%, #0F1519 100%);
  color:var(--bone);
}

.hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}

.brand-lockup__mark{
  width:72px;
  height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:rgba(247,242,234,.06);
  border:1px solid rgba(247,242,234,.10);
  flex:0 0 auto;
  backdrop-filter:blur(8px);
}

.brand-lockup__mark img{
  width:100%;
  height:auto;
}

.brand-lockup__name{
  min-width:0;
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.hero__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(201,242,123,.14);
  color:var(--pulse-lime);
  border:1px solid rgba(201,242,123,.22);
  font-size:.84rem;
  font-weight:700;
  white-space:nowrap;
  flex:0 0 auto;
}

.hero__body{
  margin-top:14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.hero__title{
  margin:0;
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:clamp(1.95rem, 8vw, 3rem);
  line-height:.94;
  font-weight:800;
  letter-spacing:-.04em;
  max-width:6.2ch;
  text-wrap:balance;
}

.hero__route{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:4px;
  flex:0 0 auto;
}

.hero__route span{
  display:block;
  height:8px;
  border-radius:999px;
  background:rgba(247,242,234,.16);
}

.hero__route span:nth-child(1){width:34px}
.hero__route span:nth-child(2){width:10px;background:var(--signal-teal)}
.hero__route span:nth-child(3){width:22px;background:var(--pulse-lime)}

.details{
  padding:12px;
  display:grid;
  gap:10px;
}

.hint{display:none}

.field{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 13px 13px 15px;
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
}

.field__accent{
  position:absolute;
  top:15px;
  left:10px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--signal-teal);
}

.field__meta{
  min-width:0;
  flex:1 1 auto;
}

.label{
  margin:0 0 5px;
  padding-left:12px;
  color:var(--ink-soft);
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:.72rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.value{
  display:block;
  max-width:100%;
  padding-left:12px;
  color:var(--ink);
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:clamp(1.05rem, 4.4vw, 1.22rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
  user-select:text;
  outline:none;
  cursor:pointer;
}

.value--mono{
  font-family:"Arimo", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:clamp(.92rem, 3.8vw, 1.06rem);
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.value:focus-visible{
  box-shadow:0 0 0 3px rgba(15,118,110,.18);
  border-radius:10px;
}

.copy-btn{
  appearance:none;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:108px;
  min-height:42px;
  padding:0 13px;
  border-radius:14px;
  background:var(--carbon);
  color:var(--bone);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  transition:transform .16s ease, background-color .2s ease, box-shadow .2s ease;
}

.copy-btn svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.copy-btn:hover,
.copy-btn:focus-visible{
  background:#182126;
  transform:translateY(-1px);
}

.copy-btn:focus-visible,
.whatsapp-btn:focus-visible{
  outline:3px solid rgba(201,242,123,.45);
  outline-offset:3px;
}

.copy-btn:active,
.whatsapp-btn:active{
  transform:translateY(1px);
}

.card-cta{
  padding:0 12px 12px;
}

.whatsapp-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:56px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, #D6F791 0%, var(--pulse-lime) 100%);
  color:var(--carbon);
  text-decoration:none;
  font-family:"Cabin", "Arimo", system-ui, sans-serif;
  font-size:clamp(.98rem, 4vw, 1.08rem);
  font-weight:800;
  letter-spacing:-.01em;
  border:1px solid rgba(16,20,24,.12);
  box-shadow:0 14px 32px rgba(16,20,24,.10), inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .16s ease, filter .2s ease, box-shadow .2s ease;
}

.whatsapp-btn:hover{
  filter:brightness(1.02);
  box-shadow:0 18px 36px rgba(16,20,24,.12), inset 0 1px 0 rgba(255,255,255,.48);
}

.whatsapp-btn__icon{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(16,20,24,.08);
  flex:0 0 auto;
}

.whatsapp-btn__icon svg{
  width:18px;
  height:18px;
}

.toast{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 14px);
  left:50%;
  z-index:9999;
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:calc(100vw - 24px);
  padding:12px 16px;
  border-radius:999px;
  background:rgba(16,20,24,.96);
  color:var(--bone);
  box-shadow:0 18px 42px rgba(16,20,24,.28);
  transform:translate(-50%, -14px);
  opacity:0;
  pointer-events:none;
  transition:transform .28s ease, opacity .28s ease;
}

.toast::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--pulse-lime);
}

.toast.show{
  transform:translate(-50%, 0);
  opacity:1;
}

.toast svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

@media (min-width: 740px){
  .payment-card{width:min(700px, 100%)}
  .hero{padding:18px 18px 16px}
  .details{padding:14px}
  .field{padding:14px 14px 14px 16px}
  .copy-btn{min-width:104px}
}

@media (max-width: 420px){
  .page-shell{padding:8px}

  .payment-card{
    border-radius:20px;
  }

  .hero{
    padding:14px 14px 12px;
  }

  .brand-lockup{
    gap:10px;
  }

  .brand-lockup__mark{
    width:64px;
    height:40px;
    padding:0 10px;
    border-radius:14px;
  }

  .brand-lockup__name{
    font-size:1.12rem;
  }

  .hero__chip{
    min-height:32px;
    padding:7px 11px;
    font-size:.79rem;
  }

  .hero__body{
    margin-top:12px;
    gap:12px;
  }

  .hero__title{
    font-size:clamp(1.78rem, 8.4vw, 2.16rem);
  }

  .hero__route span{
    height:7px;
  }

  .hero__route span:nth-child(1){width:30px}
  .hero__route span:nth-child(2){width:9px}
  .hero__route span:nth-child(3){width:20px}

  .details{
    padding:10px;
    gap:9px;
  }

  .field{
    padding:12px 12px 12px 14px;
    gap:8px 10px;
    border-radius:16px;
  }

  .field__accent{
    top:14px;
    left:9px;
    width:5px;
    height:5px;
  }

  .label{
    padding-left:10px;
    font-size:.68rem;
    margin-bottom:4px;
  }

  .value{
    padding-left:10px;
    font-size:clamp(1rem, 4.4vw, 1.1rem);
  }

  .value--mono{
    font-size:clamp(.86rem, 3.7vw, .98rem);
  }

  .copy-btn{
    min-width:100px;
    min-height:40px;
    padding:0 12px;
    font-size:.84rem;
    border-radius:13px;
  }

  .copy-btn svg{
    width:17px;
    height:17px;
    flex-basis:17px;
  }

  .card-cta{
    padding:0 10px 10px;
  }

  .whatsapp-btn{
    min-height:54px;
    padding:14px 15px;
    border-radius:16px;
  }

  .whatsapp-btn__icon{
    width:28px;
    height:28px;
  }

  .whatsapp-btn__icon svg{
    width:17px;
    height:17px;
  }

  .toast{
    top:calc(env(safe-area-inset-top) + 10px);
    padding:11px 14px;
    font-size:.92rem;
  }
}

@media (max-width: 340px){
  .brand-lockup__name{font-size:1.04rem}
  .hero__chip{font-size:.74rem;padding:6px 10px}
  .copy-btn span{display:none}
  .copy-btn{min-width:44px;padding:0 12px}
}

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