/* css/style.css - PREMIUM EDITION - Quiet Luxury */
:root{
  --bg:#0a1410;
  --paper:#fdfaf6;
  --ink:#111e19;
  --muted:#5a6f68;
  --muted2:#6b837b;
  --gold:#c5a46a;
  --gold-soft:#d4be8b;
  --line:#ebe3d1;
}

*{box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
html,body{margin:0; padding:0}
body{min-height:100vh; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:56px 18px; overflow-x:hidden}

/* Fundo */
.bg{position:fixed; inset:0; z-index:0; background:var(--bg); overflow:hidden}
.bg-grain{position:absolute; inset:0; opacity:0.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.blob{position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none}
.b1{width:420px; height:420px; left:-60px; top:-80px; background:radial-gradient(circle, rgba(197,164,106,0.18) 0%, rgba(197,164,106,0.06) 35%, transparent 70%)}
.b2{width:480px; height:480px; right:-60px; top:-40px; background:radial-gradient(circle, rgba(212,190,139,0.14) 0%, rgba(197,164,106,0.05) 40%, transparent 72%)}
.b3{width:460px; height:460px; left:22%; bottom:-120px; background:radial-gradient(circle, rgba(197,164,106,0.10) 0%, transparent 70%)}

/* Neve */
.snow{position:absolute; inset:0; pointer-events:none}
.snow span{position:absolute; top:-10px; background:#fff; border-radius:50%; animation: snowFall linear infinite; will-change:transform,opacity}
@keyframes snowFall{0%{transform:translate3d(var(--drift-start), -12vh, 0); opacity:0}10%{opacity:var(--op)}90%{opacity:var(--op)}100%{transform:translate3d(var(--drift-end), 112vh, 0); opacity:0}}

/* Wrapper */
.wrapper{position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center}

.card{
  width:100%; max-width:540px;
  background:var(--paper);
  border-radius:32px;
  border:1px solid rgba(197,164,106,0.18);
  box-shadow:0 40px 120px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.8) inset;
  overflow:hidden;
  animation: rise 1.1s cubic-bezier(0.16,1,0.3,1) both;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s cubic-bezier(0.16,1,0.3,1);
}
.card:hover{transform:scale(1.005)}
@keyframes rise{from{opacity:0; transform:translateY(28px) scale(0.985)} to{opacity:1; transform:translateY(0) scale(1)}}

.card-top{height:3px; background:linear-gradient(90deg, var(--gold), #e8dcc3, var(--gold))}
.card-bottom-line{height:1px; background:var(--line); opacity:0.8}
.card-inner{padding:38px 40px 36px; text-align:center; position:relative}

.corner{position:absolute; pointer-events:none}
.corner.tl{left:16px; top:16px}
.corner.tr{right:16px; top:16px; transform:scaleX(-1)}
.corner.bl{left:16px; bottom:16px; transform:scaleY(-1)}

.monogram{width:42px; height:42px; margin:0 auto 16px; border-radius:50%; border:1px solid var(--gold); border-width:1px; display:grid; place-items:center; color:var(--gold); font-size:16px; background:var(--paper); box-shadow:0 2px 12px rgba(197,164,106,0.15)}
.eyebrow{font-family:'Inter',sans-serif; font-weight:500; font-size:9.5px; letter-spacing:0.32em; text-transform:uppercase; color:#b89a5e; margin:0}
h1{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:62px; line-height:0.92; letter-spacing:-0.03em; color:var(--ink); margin:14px 0 0}
.subtitle{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:19px; line-height:1.25; color:var(--muted); margin-top:12px}

.lights{display:flex; justify-content:center; gap:20px; margin-top:26px}
.lights span{width:7px; height:7px; border-radius:999px; background:radial-gradient(circle at 35% 35%, #ffeab0 0%, var(--gold) 55%, #a68a4f 100%); box-shadow:0 0 10px rgba(197,164,106,0.6), 0 0 18px rgba(197,164,106,0.25); animation: twinkle 3.2s ease-in-out infinite}
.lights span:nth-child(2){animation-delay:0.5s}
.lights span:nth-child(3){animation-delay:1s}
.lights span:nth-child(4){animation-delay:1.5s}
.lights span:nth-child(5){animation-delay:2s}
@keyframes twinkle{0%,100%{opacity:0.38; transform:scale(0.92)}50%{opacity:1; transform:scale(1.12)}}

.message{margin-top:28px; max-width:360px; margin-left:auto; margin-right:auto; font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.9; color:#2e3d37}

.divider{display:flex; align-items:center; gap:14px; width:100%; max-width:300px; margin:32px auto 0}
.divider span{flex:1; height:1px; background:var(--line)}
.divider em{font-style:normal; font-family:'Cormorant Garamond',serif; color:var(--gold); font-size:12px}

.footer{margin-top:28px; display:flex; align-items:center; justify-content:center; gap:16px}
.logo-box{width:80px; height:80px; border-radius:16px; border:1px dashed #d6c6a6; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:0.18em; color:#8aa095; text-transform:uppercase}
.logo-box small{font-size:8px; letter-spacing:0.12em; margin-top:2px}
.company{font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:500; color:var(--ink); letter-spacing:-0.02em; line-height:1; margin:0}
.city{font-family:'Inter',sans-serif; font-size:11px; color:var(--muted2); letter-spacing:0.14em; text-transform:uppercase; margin-top:4px}

.seal{position:absolute; right:18px; bottom:18px; opacity:0.06; pointer-events:none}

.outside{margin-top:36px; display:flex; flex-direction:column; align-items:center; gap:10px}
.outside .line{width:84px; height:1px; background:rgba(255,255,255,0.1)}
.outside p{font-family:'Inter',sans-serif; font-size:10px; letter-spacing:0.08em; color:rgba(255,255,255,0.38); margin:0}

@media(max-width:640px){
  h1{font-size:52px !important}
  .card-inner{padding:30px 24px 28px}
  .seal{right:14px; bottom:14px}
}