/* === BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { font-family: 'Cormorant Garamond', Georgia, serif; background: #010d1a; color: #fff; min-height: 100vh; overflow-x: hidden; }
a { text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

/* === PARTICLES === */
#particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.glow-top { position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(ellipse, rgba(212,175,55,0.12) 0%, transparent 70%); z-index: 0; pointer-events: none; }

/* === WRAPPER === */
.wrapper { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; opacity: 0; animation: fadeIn 1.2s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* === TOPBAR === */
.topbar { border-bottom: 1px solid rgba(212,175,55,0.15); padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.topbar-left { display: flex; align-items: center; gap: 8px; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #D4AF37; display: inline-block; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.8); } }
.topbar-label { color: rgba(212,175,55,0.7); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; }
.topbar-phone { color: rgba(255,255,255,0.6); font-size: 13px; letter-spacing: 1px; font-family: 'Montserrat', sans-serif; }

/* === HERO === */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }

/* Deco Lines */
.deco-lines { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.deco-line { width: 60px; height: 1px; background: linear-gradient(to right, transparent, #D4AF37); }
.deco-line-rev { background: linear-gradient(to left, transparent, #D4AF37); }
.deco-diamond { width: 8px; height: 8px; border: 1px solid #D4AF37; transform: rotate(45deg); }

/* Logo */
.logo-ring { width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(212,175,55,0.5); display: flex; align-items: center; justify-content: center; margin-bottom: 40px; position: relative; box-shadow: 0 0 40px rgba(212,175,55,0.15), inset 0 0 30px rgba(212,175,55,0.05); }
.logo-ring-outer { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(212,175,55,0.2); }
.logo-img { width: 80px; height: 80px; border-radius: 50%; object-fit: contain; }

/* Firm Name */
.established { color: #D4AF37; font-size: 11px; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 16px; font-family: 'Montserrat', sans-serif; }
.firm-name-white { color: #fff; font-size: clamp(32px,6vw,72px); font-weight: 700; line-height: 1.1; text-shadow: 0 0 60px rgba(212,175,55,0.2); }
.firm-name-gold { color: #D4AF37; font-size: clamp(32px,6vw,72px); font-weight: 400; font-style: italic; line-height: 1.1; margin-bottom: 10px; }
.tagline-sub { color: rgba(255,255,255,0.4); font-size: 13px; letter-spacing: 4px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; }

/* Star Divider */
.star-divider { display: flex; align-items: center; gap: 20px; margin: 36px 0; }
.divider-line { height: 1px; width: 80px; background: rgba(212,175,55,0.3); }

/* Quote */
.quote { color: rgba(255,255,255,0.65); font-size: clamp(15px,2vw,19px); max-width: 580px; line-height: 1.8; margin-bottom: 50px; font-style: italic; font-weight: 300; }

/* Countdown */
.countdown-label { color: rgba(212,175,55,0.6); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; }
.countdown { display: flex; gap: clamp(12px,3vw,30px); justify-content: center; align-items: flex-end; margin-bottom: 60px; }
.countdown-box { text-align: center; }
.countdown-num { display: block; color: #D4AF37; font-size: clamp(26px,4vw,48px); font-weight: 700; font-family: 'Cormorant Garamond', serif; line-height: 1; padding: clamp(12px,2vw,20px) clamp(14px,2.5vw,28px); min-width: clamp(56px,8vw,80px); background: linear-gradient(135deg,rgba(212,175,55,0.12),rgba(212,175,55,0.05)); border: 1px solid rgba(212,175,55,0.3); border-radius: 8px; box-shadow: 0 4px 30px rgba(0,0,0,0.4); }
.countdown-unit { display: block; color: rgba(255,255,255,0.35); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; margin-top: 8px; }

/* CTA Buttons */
.cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 70px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; }
.btn-gold { background: linear-gradient(135deg,#D4AF37,#b8942e); color: #010d1a; box-shadow: 0 4px 25px rgba(212,175,55,0.3); }
.btn-whatsapp { background: transparent; color: #25D366; border: 1px solid rgba(37,211,102,0.5); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: 20px; width: 100%; max-width: 900px; margin-bottom: 60px; }
.card { background: linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)); border: 1px solid rgba(212,175,55,0.2); border-radius: 8px; padding: 30px 24px; text-align: center; backdrop-filter: blur(10px); }
.card-featured { background: linear-gradient(135deg,rgba(212,175,55,0.08),rgba(212,175,55,0.02)); border-color: rgba(212,175,55,0.35); }
.card-icon { width: 44px; height: 44px; border: 1px solid rgba(212,175,55,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.card-icon-gold { background: rgba(212,175,55,0.15); }
.card-title { color: #D4AF37; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; font-family: 'Montserrat', sans-serif; }
.card-link { color: rgba(255,255,255,0.75); font-size: 13px; display: block; margin-bottom: 6px; font-family: 'Montserrat', sans-serif; word-break: break-word; }
.card-phone { color: #fff; font-size: 18px; font-weight: 600; display: block; margin-bottom: 8px; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; }
.card-wa { display: inline-flex; align-items: center; gap: 6px; color: #25D366; font-size: 11px; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; }
.card-address { color: rgba(255,255,255,0.75); font-size: 13px; line-height: 1.8; font-family: 'Montserrat', sans-serif; }
.gold { color: #D4AF37; }

/* Practice Areas */
.practice-wrap { max-width: 700px; margin-bottom: 60px; }
.practice-title { color: rgba(212,175,55,0.5); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 24px; font-family: 'Montserrat', sans-serif; }
.practice-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tag { padding: 7px 18px; border: 1px solid rgba(212,175,55,0.25); border-radius: 30px; color: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 1px; font-family: 'Montserrat', sans-serif; background: rgba(212,175,55,0.04); }

/* Bottom Deco */
.bottom-deco { display: flex; align-items: center; gap: 16px; }
.deco-line-sm { width: 40px; height: 1px; }
.deco-line-right { background: linear-gradient(to right, transparent, rgba(212,175,55,0.4)); }
.deco-line-left { background: linear-gradient(to left, transparent, rgba(212,175,55,0.4)); }
.deco-diamond-sm { width: 4px; height: 4px; border: 1px solid rgba(212,175,55,0.4); transform: rotate(45deg); }

/* Footer */
.footer { border-top: 1px solid rgba(212,175,55,0.1); padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-copy { color: rgba(255,255,255,0.2); font-size: 11px; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; }
.footer-loc { color: rgba(212,175,55,0.3); font-size: 10px; font-family: 'Montserrat', sans-serif; letter-spacing: 2px; text-transform: uppercase; }

/* Responsive */
@media (max-width: 600px) {
  .topbar { padding: 14px 20px; }
  .hero { padding: 40px 16px; }
  .footer { padding: 20px; }
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}