*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#e8c07d;
  --gold-2:#c48a2c;
  --gold-glow:rgba(232,192,125,.32);
  --ink:#0a0a0c;
  --card-bg:#121216;
  --text:#fff;
  --brand-color:#ffffff;
  --muted:rgba(255,255,255,.7);
  --glass-brd:rgba(255,255,255,.14);
  --cta-color:#e8c07d;
  --radius:22px;
}

html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:var(--ink);
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

[contenteditable="true"]{outline:none;border-radius:6px;padding:0 2px;transition:background .15s ease}
[contenteditable="true"]:hover{background:rgba(232,192,125,.08)}
[contenteditable="true"]:focus{background:rgba(232,192,125,.14)}

/* ========= FUNDO ========= */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#000}
.bg .slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 1s ease;
}
.bg .slide.is-active{opacity:1}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.85) 100%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.35) 40%, rgba(10,10,12,.85) 100%);
}

/* ========= CARD ========= */
.card{
  position:relative;
  width:100%;max-width:460px;
  padding:44px 28px 26px;
  border-radius:calc(var(--radius) + 8px);
  background:color-mix(in srgb, var(--card-bg) 55%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--glass-brd);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;
  opacity:0;transform:translateY(14px);
  animation:cardIn .5s ease-out forwards;
}
@keyframes cardIn{to{opacity:1;transform:none}}

/* ========= BRAND ========= */
.brand{margin-bottom:30px}

.logo-wrap{
  width:150px;height:150px;margin:0 auto 16px;
  display:grid;place-items:center;
  position:relative;
}
.logo-wrap::after{
  content:"";position:absolute;inset:12px;border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow), transparent 70%);
  filter:blur(14px);z-index:-1;
}
.logo{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}

.brand-name{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem, 5vw, 2.25rem);
  letter-spacing:.5px;
  line-height:1.05;
  color:var(--brand-color);
}

.tagline{
  margin-top:8px;
  font-size:.78rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;align-items:center;gap:10px;
}
.tagline .dot{width:20px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.tagline .dot:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

/* ========= LINKS (leves) ========= */
.links{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}

.link{
  display:flex;align-items:center;gap:16px;
  padding:14px 16px;
  text-decoration:none;color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.link:hover{
  background:rgba(255,255,255,.09);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.link:active{transform:translateY(0)}

/* Ícone como imagem */
.icon{
  width:64px;height:64px;flex:0 0 64px;
  display:grid;place-items:center;
  border-radius:16px;
  overflow:hidden;
}
.icon img{width:100%;height:100%;display:block}

.text{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:2px}
.text strong{font-size:1.05rem;font-weight:600;letter-spacing:.2px}
.text small{font-size:.8rem;color:var(--muted);font-weight:400}

.cta{
  flex-shrink:0;
  font-size:.72rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
  color:var(--cta-color);
  border:1px solid color-mix(in srgb, var(--cta-color) 40%, transparent);
  background:color-mix(in srgb, var(--cta-color) 8%, transparent);
  transition:background .2s ease, color .2s ease;
}
.link:hover .cta{
  color:#1a1208;
  background:var(--cta-color);
  border-color:var(--cta-color);
}

/* ========= FOOTER ========= */
.footer{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:.72rem;letter-spacing:1px;
  color:var(--muted);text-transform:uppercase;
}
.footer strong{color:var(--gold);font-weight:600;letter-spacing:1.2px}
.footer .line{flex:1;max-width:50px;height:1px;background:linear-gradient(90deg,transparent,var(--glass-brd),transparent)}
.footer a{color:inherit;text-decoration:none}
.footer a:hover strong{text-decoration:underline}

/* ========= PAINEL DE CUSTOMIZAÇÃO ========= */
.customize-btn{
  position:fixed;top:16px;right:16px;z-index:10;
  width:28px;height:28px;border-radius:50%;
  background:rgba(20,20,24,.7);
  color:var(--gold);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(10px);
  display:grid;place-items:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.customize-btn:hover{background:rgba(30,30,34,.85);transform:rotate(45deg)}

.customize-panel{
  position:fixed;top:54px;right:16px;z-index:10;
  width:260px;padding:16px;
  background:rgba(18,18,22,.92);
  border:1px solid var(--glass-brd);
  border-radius:16px;
  backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  color:var(--text);
  animation:cardIn .25s ease-out;
}
.cp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:.85rem;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.cp-head button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem}
.cp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);padding:6px 0;cursor:pointer}
.cp-row input[type="color"]{
  width:40px;height:28px;border:1px solid var(--glass-brd);border-radius:6px;
  background:transparent;padding:0;cursor:pointer;
}
.cp-reset{
  margin-top:10px;width:100%;padding:8px;
  background:transparent;color:var(--gold);
  border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius:8px;cursor:pointer;font-size:.75rem;letter-spacing:1px;text-transform:uppercase;
  transition:background .2s ease;
}
.cp-reset:hover{background:color-mix(in srgb, var(--gold) 12%, transparent)}
.cp-hint{margin-top:10px;font-size:.7rem;color:var(--muted);line-height:1.4}

/* ========= MOBILE ========= */
@media (max-width:480px){
  body{padding:20px 14px}
  .card{padding:36px 20px 22px;border-radius:26px}
  .logo-wrap{width:124px;height:124px}
  .brand-name{font-size:1.65rem}
  .tagline{font-size:.68rem;letter-spacing:2px}
  .tagline .dot{width:14px}
  .link{padding:12px 12px;gap:14px;border-radius:18px}
  .icon{width:56px;height:56px;flex-basis:56px;border-radius:14px}
  .text strong{font-size:1rem}
  .text small{font-size:.75rem}
  .cta{padding:6px 10px;font-size:.65rem}
  .customize-panel{width:calc(100vw - 32px);right:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bg .slide.is-active{opacity:1}
}

/* ========= LOGO ANIMATION ========= */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.logo{
  animation: logoFloat 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .logo{ animation:none; }
}