:root { --navy:#0A2540; --deep:#061729; --gold:#C5A059; }
html { scroll-padding-top: 80px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#header.scrolled { background: rgba(6,23,41,.96); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(197,160,89,.25); }
.nav-link { color:#e2e8f0; transition:color .2s; } .nav-link:hover { color:var(--gold); }

.btn-gold, .btn-outline { display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.7rem; font-weight:600; font-size:.95rem; border-radius:2px; transition:background .2s,color .2s,border-color .2s; }
.btn-gold { background:var(--gold); color:var(--deep); } .btn-gold:hover { background:#d6b472; }
.btn-gold:disabled { opacity:.6; cursor:wait; }
.btn-outline { border:1px solid var(--gold); color:var(--gold); } .btn-outline:hover { background:var(--gold); color:var(--deep); }

.hero { background: radial-gradient(ellipse at 80% 20%, rgba(10,37,64,.9), transparent 60%), linear-gradient(180deg, var(--deep), #07192e); }
.seal { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:260px; height:260px; padding:2rem; border-radius:50%;
  border:1px solid var(--gold); box-shadow: inset 0 0 0 10px var(--deep), inset 0 0 0 11px rgba(197,160,89,.45); }

.pillar { border-left:2px solid var(--gold); padding-left:1.25rem; } .pillar p { margin-top:.35rem; color:#cbd5e1; font-size:.95rem; }
.area { border-top:1px solid rgba(197,160,89,.4); padding-top:1.5rem; }
.area i { font-size:1.6rem; color:var(--gold); }
.area h3 { margin-top:1rem; font-family:'Cinzel',serif; font-size:1.2rem; color:#fff; }
.area p { margin-top:.5rem; color:#cbd5e1; font-size:.95rem; line-height:1.6; }

.lbl { display:block; margin-bottom:.4rem; font-size:.85rem; color:#cbd5e1; }
.field { width:100%; background:rgba(6,23,41,.7); border:1px solid rgba(255,255,255,.18); padding:.8rem 1rem; color:#fff; border-radius:2px; }
.field:focus { border-color:var(--gold); outline:none; }
.field[aria-invalid="true"] { border-color:#f87171; }

.wa-float { position:fixed; right:1.25rem; bottom:1.25rem; z-index:60; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; font-size:2rem; box-shadow:0 6px 20px rgba(0,0,0,.4); transition:transform .2s; }
.wa-float:hover { transform:scale(1.08); }
@media (prefers-reduced-motion: reduce) { *, html { scroll-behavior:auto !important; transition:none !important; } }