:root{
  --ink:#281a2b; --muted:#6f6573; --card:#ffffff;
  --rad:18px; --shadow:0 12px 30px rgba(29,0,45,.08), 0 2px 8px rgba(29,0,45,.06);
}
*{box-sizing:border-box}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink);
  background-color:#ffffff;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(255,122,162,0.16) 0%,
    rgba(138,199,255,0.14) 40%,
    rgba(97,229,180,0.16) 100%
  );
  background-repeat:no-repeat;
}

.wrap{max-width:820px; margin:0 auto; padding:24px;}
header.hero{position:relative; display:flex; align-items:center; gap:16px; margin:16px 0 8px; flex-wrap:wrap}
.avatar{width:92px; aspect-ratio:1/1; border-radius:50%; overflow:hidden; border:3px solid #fff; box-shadow:var(--shadow); background:#fff; flex-shrink:0; position:relative; z-index:2}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.title{font-family:"Baloo 2", system-ui; font-size:36px; font-weight:700; display:flex; align-items:center; gap:8px}
.tag{color:var(--muted); font-size:14px}

/* ===== Painel flutuante (padrão dos cards) ===== */
.panel-float{
  position: fixed;
  top: 16px;
  right: 16px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,0.92);
  color: #2b2230;
  text-decoration: none;

  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);

  opacity: 0.92;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  z-index: 999;
}
.panel-float:hover{
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}

/* Logo do X */
.x-logo{
  font-weight: 800;
  font-size: 20px;
  font-family: 'Inter', sans-serif;
}

/* Price tag */
.price-tag{
  position:absolute; top:8px; right:12px;
  background: linear-gradient(135deg,#ff7a2f,#ffb347);
  color:#fff; font-weight:800; font-size:13px;
  padding:4px 10px; border-radius:8px;
  transform: rotate(8deg);
  box-shadow:0 4px 8px rgba(0,0,0,.15);
  pointer-events:none;
  animation: price-pop 2.2s ease-in-out infinite;
  overflow:hidden;
}
.price-tag::after{
  content:""; position:absolute; inset:-20% -40%;
  transform: translateX(-120%) rotate(20deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
  filter: blur(2px);
  animation: price-shine 5.5s ease-in-out infinite;
}

@keyframes price-pop{
  0%, 100% { transform: rotate(8deg) scale(1); box-shadow:0 4px 8px rgba(0,0,0,.15); }
  35%      { transform: rotate(8deg) scale(1.06); box-shadow:0 6px 14px rgba(0,0,0,.18); }
  55%      { transform: rotate(8deg) scale(1.00); }
}
@keyframes price-shine{
  0%   { transform: translateX(-120%) rotate(20deg); opacity:0; }
  8%   { opacity:.9; }
  18%  { transform: translateX(140%) rotate(20deg); opacity:0; }
  100% { opacity:0; }
}

/* mobile: ligeiramente menor */
@media (max-width:420px){
  .price-tag{ font-size:12px; padding:3px 8px; right:10px; top:8px; }
}

/* acessibilidade: desativa animação se o usuário prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .price-tag, .price-tag::after{ animation:none }
}

.grid{display:grid; gap:14px; margin:24px 0}
.cta{
  display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid rgba(0,0,0,.08);
  padding:16px 18px; border-radius:var(--rad); text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .18s ease, background .25s ease;
  will-change: transform; contain: paint; position:relative; overflow:hidden
}
.cta:hover{transform:translateY(-2px)}
.logo{width:32px; height:32px; display:grid; place-items:center}
.logo img, .logo svg{width:100%; height:100%; object-fit:contain}
.text{display:flex; flex-direction:column}
.name{font-weight:800; letter-spacing:.2px}
.sub{font-size:12px; color:var(--muted)}
.cta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  opacity:0; transform:translate3d(-120%,0,0);
  transition: transform .6s ease, opacity .3s ease; pointer-events:none
}
.cta:hover::after{opacity:.5; transform:translate3d(120%,0,0)}

/* Hover colorido por plataforma */
.cta.privacy:hover, .cta.privacy-free:hover{background:linear-gradient(90deg,#ffb347,#ffcc33)}
.cta.telegram:hover, .cta.vip:hover{background:linear-gradient(90deg,#37AEE2,#7acfff)}
.cta.instagram:hover{background:linear-gradient(90deg,#f58529,#dd2a7b,#8134af,#515bd4)}
.cta.twitter:hover{background:linear-gradient(90deg,#2a2a2a,#555555); color:#fff}
.cta.only:hover{background:linear-gradient(90deg,#00aff0,#61d0ff)}

footer{margin:36px 0 18px; color:#8b8194; font-size:12px; text-align:center}
/* Headline layout */
.headline{display:grid; gap:6px}
.emote.heart{filter: drop-shadow(0 2px 0 rgba(0,0,0,.08)) drop-shadow(0 6px 16px rgba(255,0,80,.25)); transform-origin:60% 60%; animation: heart-pop .9s ease-in-out infinite alternate; font-size:28px}
.emotes{display:flex; gap:8px; align-items:center}

/* Sticker style: cria contorno tipo adesivo usando text-shadow */
.sticker{
  position:relative; display:inline-block; font-size:26px; line-height:1; transform: translateZ(0);
  text-shadow:
    0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff,
    1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
    0 0 8px rgba(0,0,0,.06);
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.06));
  animation: bob 2.6s calc(var(--d,0s)) ease-in-out infinite;
}
.sticker.sparkles{font-size:24px}

/* Interações sutis */
.sticker:hover{
  animation: wiggle .35s ease-in-out;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.12));
}

/* Animações */
@keyframes bob{ 0%{ transform:translateY(0)} 50%{ transform:translateY(-4px)} 100%{ transform:translateY(0)} }
@keyframes wiggle{ 0%{ transform:rotate(0)} 25%{ transform:rotate(-6deg)} 50%{ transform:rotate(6deg)} 100%{ transform:rotate(0)} }
@keyframes heart-pop{ from{ transform:scale(1)} to{ transform:scale(1.12)} }

/* Respeita reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .emote.heart, .sticker{ animation:none }
}

/* Wrapper do avatar para posicionar stickers ao redor */
.avatar-wrap{position:relative; width:92px; height:92px; flex-shrink:0}
.orb-sticker{
  position:absolute; font-size:20px; line-height:1; pointer-events:none; z-index:1;
  text-shadow:0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff,
              1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
              0 0 8px rgba(0,0,0,.06);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
  animation: bob 3.2s ease-in-out infinite;
}

/* Responsivo: aumenta levemente em telas muito pequenas */
@media (max-width:420px){
  .avatar-wrap, .avatar{width:100px; height:100px}
  .orb-sticker{font-size:22px}
}

/* === Partículas com rotação (com filho) === */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: fixed;
  top: 110vh;
  will-change: transform, opacity;
  animation: floatUp var(--dur,18s) linear infinite;
}

.particle > span {
  display: inline-block;
  color: #ff4fa3;
  animation: spin var(--spinDur,12s) linear infinite;
  font-size: var(--fs, 18px);
}

@keyframes floatUp {
  0%   { transform: translateY(0);    opacity: var(--o, .55); }
  85%  { transform: translateY(-105vh);opacity: 0;}
  100% { transform: translateY(-120vh);}
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
  .particle, .particle > span { animation: none !important; }
}

/* === Contador regressivo === */
.countdown {
  margin: 20px 0;
  text-align: center;
  font-family: Inter, sans-serif;
}

.countdown-title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
  color: #000;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.countdown-box {
  background: #fff;
  color: #000;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 70px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-box span {
  font-size: 22px;
  font-weight: 800;
}

.countdown-box small {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  margin-top: 2px;
}

.colon {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

/* Portal button (front-only) */
.cta.portal .logo{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
}