:root { --gold:#e5ad59; --gold-light:#ffe9ae; --cream:#f6e7c8; --ink:#090603; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body {
  margin:0; color:var(--cream); overflow-x:hidden;
  background:radial-gradient(circle at 50% 23%,rgba(255,157,46,.16),transparent 30%),linear-gradient(rgba(7,4,2,.48),rgba(7,4,2,.86)),url("assets/background.jpg") center/cover no-repeat fixed;
  font-family:Georgia,"Times New Roman",serif;
}
body::after { content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 38%,rgba(255,149,34,.18),transparent 28%); animation:fire-glow 3.8s ease-in-out infinite alternate; }
.vignette { position:fixed; inset:0; pointer-events:none; z-index:1; background:radial-gradient(ellipse at center,transparent 32%,rgba(0,0,0,.3) 69%,rgba(0,0,0,.78) 100%); }
.fog { position:fixed; inset:-20%; z-index:2; pointer-events:none; opacity:.34; filter:blur(28px); mix-blend-mode:screen; }
.fog-one { background:radial-gradient(ellipse at 18% 68%,rgba(214,176,120,.62) 0,transparent 38%); animation:fog-left 11s ease-in-out infinite alternate; }
.fog-two { background:radial-gradient(ellipse at 82% 38%,rgba(223,175,98,.58) 0,transparent 34%); animation:fog-right 14s ease-in-out infinite alternate; }
.embers i { position:fixed; z-index:4; left:var(--x); bottom:-12px; width:var(--s); height:var(--s); border-radius:50%; background:#fff1ae; box-shadow:0 0 7px 2px rgba(255,140,39,.92),0 0 20px rgba(255,92,15,.65); animation:rise 10s linear var(--d) infinite; pointer-events:none; }
.page { position:relative; z-index:3; min-height:100svh; display:grid; place-items:center; padding:42px 18px; }
.card { position:relative; width:min(900px,100%); padding:clamp(32px,5vw,58px) clamp(20px,5vw,62px) 32px; text-align:center; border:1px solid rgba(229,173,89,.56); border-radius:4px; background:linear-gradient(135deg,rgba(255,211,132,.06),transparent 27%),linear-gradient(180deg,rgba(28,16,7,.88),rgba(8,5,3,.93)); box-shadow:0 0 80px rgba(0,0,0,.92),inset 0 0 38px rgba(255,177,71,.07),0 0 0 5px rgba(42,23,9,.38); backdrop-filter:blur(6px); }
.card::before,.card::after { content:""; position:absolute; width:70px; height:70px; border-color:var(--gold); opacity:.65; }
.card::before { top:9px; left:9px; border-top:1px solid; border-left:1px solid; }
.card::after { right:9px; bottom:9px; border-right:1px solid; border-bottom:1px solid; }
.ornament { display:flex; align-items:center; gap:12px; color:var(--gold); margin:-4px auto 22px; width:min(470px,80%); font-size:9px; }
.ornament::before,.ornament::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament::after { transform:scaleX(-1); }
.logo-wrap { width:min(640px,94%); margin:0 auto 16px; }
.logo-wrap img { display:block; width:100%; height:auto; filter:drop-shadow(0 7px 2px rgba(0,0,0,.88)) drop-shadow(0 0 18px rgba(255,139,44,.4)); }
.subtitle { margin:0 0 24px; color:var(--gold-light); text-transform:uppercase; letter-spacing:clamp(2px,.65vw,6px); font-size:clamp(.8rem,1.8vw,1.1rem); text-shadow:0 2px 6px #000; }
.divider { display:flex; align-items:center; gap:13px; width:min(540px,82%); margin:0 auto 22px; color:var(--gold); font-size:11px; }
.divider::before,.divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); box-shadow:0 0 10px rgba(255,181,82,.55); }
h1 { margin:0 0 12px; color:#fffaf0; font-size:clamp(2.9rem,7vw,5.2rem); line-height:1; letter-spacing:-.035em; text-shadow:0 0 15px rgba(255,174,72,.78),0 3px 0 #542509,0 11px 30px #000; }
.lead { max-width:680px; margin:0 auto 28px; color:#e2cda5; font-size:clamp(1rem,2vw,1.18rem); line-height:1.62; }
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 auto 30px; }
.features span { padding:12px 8px; color:var(--gold-light); border:1px solid rgba(229,173,89,.37); background:linear-gradient(rgba(122,67,25,.23),rgba(0,0,0,.27)); text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; box-shadow:inset 0 0 12px rgba(255,174,72,.04); }
.actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.button { min-width:205px; padding:13px 22px; border:1px solid var(--gold); border-radius:2px; font-family:Georgia,"Times New Roman",serif; font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:transform .2s,box-shadow .2s,filter .2s; }
.button.primary { color:#2a1608; background:linear-gradient(#ffe6a3,#c57a27); box-shadow:0 0 19px rgba(255,174,72,.28); cursor:default; opacity:1; }
.button.secondary { color:var(--gold-light); background:rgba(0,0,0,.28); }
.button.secondary:hover { transform:translateY(-2px); box-shadow:0 0 23px rgba(255,174,72,.35); filter:brightness(1.15); }
.note { min-height:1.2em; margin:17px 0 0; color:var(--gold); font-size:.8rem; opacity:0; transform:translateY(4px); transition:opacity .25s,transform .25s; }
.note.visible { opacity:1; transform:translateY(0); }
.copyright { margin:18px 0 0; color:#98774d; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
@keyframes fog-left { to { transform:translate(5%,-2%); opacity:.35; } }
@keyframes fog-right { to { transform:translate(-6%,4%); opacity:.1; } }
@keyframes fire-glow { from { opacity:.5; transform:scale(.98); } to { opacity:1; transform:scale(1.04); } }
@keyframes rise { 0% { transform:translate3d(0,0,0) scale(.65); opacity:0; } 10% { opacity:1; } 75% { opacity:.8; } 100% { transform:translate3d(var(--drift),-112vh,0) scale(1.25); opacity:0; } }
@media (max-width:680px) { body { background-position:42% center; } .page { padding:18px 12px; } .card { padding:30px 17px 25px; } .features { grid-template-columns:repeat(2,1fr); } .logo-wrap { width:96%; } }
@media (max-width:390px) { .features { gap:7px; } .features span { font-size:.66rem; } .button { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }