:root{
  /* Fundo mais profundo e refinado */
  --bg1: #b99876;
  --bg2: #8f6c4f;
  --bg3: #5f4634;

  /* Card com contraste elegante */
  --card: #e4d3c2;

  /* Texto */
  --text:#2b221c;
  --muted:#6b5a4b;

  /* Dourado mais sofisticado */
  --gold:#a67c45;
  --gold-dark:#8a6437;

  --border: rgba(0,0,0,.12);
  --shadow-soft: 0 28px 70px rgba(0,0,0,.35);

  --radius: 22px;
}
/* Reset */
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
}

/* Layout */
.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
}

.top{
  width:100%;
  max-width:950px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:55px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Avatar */
.avatar{
  width:110px;
  height:110px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid rgba(255,255,255,.5);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}


.avatar:hover{
  transform: scale(1.04);
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Brand text */
.brand__text .eyebrow{
  margin:0;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

.brand__text h1{
  margin:2px 0 0;
  font-size:22px;
  color:white;
}

/* Status pill */
.pill{
  padding:10px 18px;
  border-radius:999px;
  background: rgba(255,255,255,.25);
  font-size:13px;
  color:white;
  backdrop-filter: blur(6px);
  transition: all .3s ease;
}

.pill:hover{
  background: rgba(255,255,255,.4);
  transform: translateY(-2px);
}

/* Hero */
.hero{
  max-width:950px;
  text-align:center;
  background: var(--card);
  padding:55px 45px;
  border-radius:var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(15px); }
  to{ opacity:1; transform: translateY(0); }
}

.hero h2{
  font-size:32px;
  margin-bottom:18px;
}

.accent{
  color: var(--gold);
}

.lead{
  color: var(--muted);
  margin-bottom:30px;
  font-size:16px;
}

/* Botões */
.cta{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:30px;
}

.btn{
  padding:13px 24px;
  border-radius:14px;
  text-decoration:none;
  color:#3d342c;
  background:white;
  border:1px solid rgba(0,0,0,.05);
  transition: all .25s ease;
  font-weight:500;
}

.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.btn--primary{
  background: linear-gradient(135deg, #e2c9a6, #d2b48c);
}

.btn--primary:hover{
  background: linear-gradient(135deg, #d8bc96, #caa977);
}

/* Footer */
.footer{
  font-size:14px;
  color: var(--muted);
}

.footer strong{
  color: var(--gold-dark);
}

/* PrismCut credit */
.credit{
  margin-top:20px;
  font-size:13px;
  color:#6b5a4a;
  opacity:.8;
}

.credit span{
  font-weight:600;
}




/* =========================
   ANIMAÇÕES PREMIUM (sutil)
========================= */

/* 1) Entrada do card */
.hero{
  animation: heroIn .9s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes heroIn{
  from{ opacity:0; transform: translateY(14px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* 2) Glow “respirando” no background */
body::before{
  content:"";
  position: fixed;
  inset: -40vh -20vw auto -20vw;
  height: 70vh;
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%);
  filter: blur(10px);
  pointer-events:none;
  animation: glowBreath 6.5s ease-in-out infinite;
  z-index:0;
}

body::after{
  content:"";
  position: fixed;
  inset: auto -25vw -45vh -25vw;
  height: 80vh;
  background: radial-gradient(closest-side, rgba(255,255,255,.06), transparent 70%);
  filter: blur(18px);
  pointer-events:none;
  animation: glowBreath2 8s ease-in-out infinite;
  z-index:0;
}

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

@keyframes glowBreath{
  0%,100%{ transform: translateY(0) scale(1); opacity:.55; }
  50%{ transform: translateY(12px) scale(1.03); opacity:.75; }
}
@keyframes glowBreath2{
  0%,100%{ transform: translateY(0) scale(1); opacity:.40; }
  50%{ transform: translateY(-10px) scale(1.02); opacity:.62; }
}

/* 3) Botões com “shine” */
.btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.btn::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
  transform: translateX(-40%) rotate(10deg);
  opacity: 0;
  transition: opacity .22s ease;
}

.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

.btn:hover::after{
  opacity: 1;
  animation: shine 1.1s ease forwards;
}

@keyframes shine{
  from{ transform: translateX(-55%) rotate(10deg); }
  to{ transform: translateX(55%) rotate(10deg); }
}

/* 4) Avatar dá uma “respirada” bem leve */
.avatar{
  animation: avatarFloat 5.5s ease-in-out infinite;
}
@keyframes avatarFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

/* Acessibilidade: respeita quem desativa animações */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}