:root{
  --bg: #050505;
  --bg-soft: #0F0F10;

  /* Refined Gold Palette - More metallic/luxurious */
  --gold: #D4AF37;
  --gold-light: #F9E79F;
  --gold-dark: #8A6D1F;
  --gold-gradient: linear-gradient(135deg, #F5E6A6 0%, #D4AF37 50%, #8A6D1F 100%);

  --text: #F0F0F0;
  --muted: #B0B0B0;
  --card-bg: rgba(20, 20, 20, 0.7);
  --stroke: rgba(212,175,55,0.25);

  --radius: 20px;
  --shadow: 0 10px 40px -10px rgba(0,0,0,0.8);
  --glass: blur(16px) saturate(180%);
}

*{box-sizing:border-box}

html,body{
  margin:0;padding:0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% 50%, rgba(212,175,55,0.03), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(212,175,55,0.02), transparent 25%);
  color:var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height:1.7;
  overflow-x: hidden;
  position: relative;
}

/* --- Improved Sparkle Animation --- */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: transparent;
  overflow: hidden;
}

/* Small twinkling stars */
.stars::after {
  content: "";
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  box-shadow:
    10vw 15vh 0 #fff, 20vw 40vh 1px #D4AF37, 35vw 10vh 0 #fff,
    50vw 80vh 1px #D4AF37, 70vw 25vh 0 #fff, 85vw 60vh 1px #D4AF37,
    15vw 85vh 0 #fff, 40vw 50vh 1px #D4AF37, 60vw 15vh 0 #fff,
    80vw 90vh 1px #D4AF37, 90vw 30vh 0 #fff, 5vw 45vh 1px #D4AF37;
  animation: star-twinkle 6s ease-in-out infinite;
  opacity: 0.3;
}

/* Larger glowing particles */
.stars::before {
  content: "";
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  box-shadow:
    5vw 20vh 2px #D4AF37, 25vw 70vh 1px #fff, 45vw 30vh 2px #D4AF37,
    65vw 80vh 1px #fff, 85vw 10vh 2px #D4AF37, 95vw 50vh 1px #fff;
  animation: star-float 10s ease-in-out infinite alternate;
  opacity: 0.2;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.5); }
}
@keyframes star-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-30px); }
}


/* --- Typography & Links --- */
h1,h2,h3,h4{ margin: 0 0 1rem 0; font-family: "Playfair Display", serif; font-weight: 700; }

a{color:var(--gold);text-decoration:none; transition: all 0.3s ease;}
a:hover{color: var(--gold-light); text-shadow: 0 0 10px rgba(212,175,55,0.4);}

img{max-width:100%;display:block}
.container{width:min(1240px,94%);margin-inline:auto}


/* --- Header --- */
header{
  position:sticky;top:0;z-index:100;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: var(--glass);
  border-bottom: 1px solid var(--stroke);
  transition: all 0.3s ease;
}

.nav{display:flex;align-items:center;justify-content:space-between;padding: 1rem 0}

.brand{display:flex;align-items:center;gap:.85rem}
.brand__logo{
  width:44px;height:44px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #FDF2C8, #D4AF37, #705615);
  box-shadow: 0 0 20px rgba(212,175,55,0.3);
  position: relative;
  border: 1px solid rgba(255,255,255,0.2);
}
/* Shimmer effect on logo */
.brand__logo::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shine 4s infinite linear;
    opacity: 0.6;
}
@keyframes shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.brand__name{font-family:"Playfair Display",serif;font-weight:700;font-size: 1.25rem; letter-spacing:0.5px; color: #FFF; text-shadow: 0 2px 10px rgba(0,0,0,0.5);}

.nav-links{display:flex;gap:2rem;font-size: 0.95rem;font-weight: 500;}
.nav-links a{color: var(--muted); position: relative; padding: 5px 0;}
.nav-links a:hover, .nav-links a.active{color: #FFF;}
.nav-links a::after{
    content:""; position:absolute; width:0; height:1px; bottom:0; left:50%;
    background: var(--gold); transition: all 0.3s ease; transform: translateX(-50%);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

/* --- Buttons --- */
.cta-phone{
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;
  border-radius:999px;
  background: var(--gold-gradient);
  color:#1a1200; font-weight:700; font-size: 0.95rem;
  box-shadow: 0 4px 20px rgba(212,175,55,0.25);
  border:1px solid rgba(255,255,255,0.3);
}
.cta-phone:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212,175,55,0.5);
    filter: brightness(1.1);
}

.btn{
  display:inline-flex;justify-content:center;align-items:center;gap:.6rem;
  padding:.9rem 1.8rem; border-radius:12px; border:0; font-weight:600; cursor:pointer;
  transition: all 0.3s ease; font-size: 0.95rem;
  position: relative; overflow: hidden; z-index: 1;
}
.btn--gold{
  background: var(--gold-gradient);
  color:#1b1200;
  box-shadow: 0 6px 20px rgba(212,175,55,0.15);
}
.btn--gold::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, #FFD700, #F9E79F);
    opacity: 0; z-index: -1; transition: opacity 0.3s;
}
.btn--gold:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,175,55,0.3); }
.btn--gold:hover::before { opacity: 1; }

.btn--outline{
    background: transparent; border: 1px solid var(--gold); color: var(--gold);
}
.btn--outline:hover{ background: rgba(212,175,55,0.08); color: var(--gold-light); border-color: var(--gold-light); }


/* --- Hero Section --- */
.hero{
    position:relative; border-bottom:1px solid var(--stroke);
    padding: 80px 0;
}
/* Subtle spotlight effect */
.hero::before{
  content:"";position:absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 80%; height: 80%;
  background:radial-gradient(ellipse at center, rgba(212,175,55,0.08), transparent 70%);
  pointer-events: none; z-index:-1;
  filter: blur(60px);
}

.hero-wrap{display:grid;grid-template-columns:1.2fr .9fr;gap:60px;align-items:center;}
@media(max-width:980px){.hero-wrap{grid-template-columns:1fr;gap:40px}}

.eyebrow{
    font-size:.8rem; color:var(--gold); letter-spacing:.25em; text-transform:uppercase; font-weight: 700;
    margin-bottom: 1rem; display: block;
}
.h1{
    font-size:clamp(36px,5vw,64px); line-height:1.1; margin-bottom: 1.5rem;
    color: #FFF;
    background: -webkit-linear-gradient(#FFF, #E0E0E0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.h1 span {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lead{font-size:1.15rem;color: var(--muted); max-width:55ch; margin-bottom: 2rem;}

.badges{display:flex;gap:12px;flex-wrap:wrap;}
.badge{
    border:1px solid rgba(255,255,255,0.1); color: #CCC;
    padding:.4rem 1rem; border-radius:99px; font-size:.85rem;
    background: rgba(255,255,255,0.03); backdrop-filter: blur(5px);
}

/* --- Hero Form Card --- */
.hero-card{
  background: rgba(30, 30, 30, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: var(--radius); padding:32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  position: relative;
}
/* Corner accents for premium feel */
.hero-card::after, .hero-card::before {
    content: ""; position: absolute; width: 20px; height: 20px;
    border: 1px solid var(--gold); pointer-events: none; opacity: 0.5;
    transition: all 0.3s;
}
.hero-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.hero-card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }

.stack{display:flex;gap:12px;flex-wrap:wrap}
.stack > *{flex:1}

.input, select, textarea{
  width:100%; padding:1rem 1.2rem; border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.3);
  color:#FFF; outline:none; font-family: inherit; font-size: 0.95rem;
  transition: all 0.3s;
}
.input:focus, select:focus, textarea:focus{
    border-color: var(--gold);
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 4px rgba(212,175,55,0.1);
}
.input::placeholder { color: rgba(255,255,255,0.3); }

/* --- Sections & Cards --- */
section{padding:90px 0; border-bottom:1px solid rgba(255,255,255,0.05);}
.sec-head{text-align:center; max-width:800px; margin: 0 auto 60px;}
.sec-title{
    font-size:clamp(32px,4vw,48px);
    background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}
.sec-desc{color:var(--muted); font-size: 1.1rem;}

.grid{display:grid;gap:30px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1024px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--radius); padding:30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex; flex-direction: column; align-items: flex-start;
}
.card:hover{
    transform: translateY(-8px);
    border-color: var(--stroke);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(212,175,55,0.05);
}

.chip{
    display:inline-block; padding:.3rem .8rem;
    border-radius:50px; border:1px solid rgba(212,175,55,0.3);
    color: var(--gold); font-size:.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    background: rgba(212,175,55,0.05); margin-bottom: 1rem;
}
.service-title{font-size:1.4rem; color: #FFF; margin-bottom: 0.5rem;}
.card p { color: var(--muted); margin-bottom: 1.5rem; flex-grow: 1; }

/* Blog Cards Specifics */
.blog-card { justify-content: space-between; height: 100%; }
.blog-card:hover h3 { color: var(--gold); }

/* FAQ Details */
details{
    border:1px solid rgba(255,255,255,0.08); border-radius:16px;
    background: rgba(255,255,255,0.01); padding:20px;
    transition: all 0.3s;
}
details[open]{
    border-color: var(--stroke);
    background: rgba(212,175,55,0.03);
}
summary{
    cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
    font-weight: 600; color: #FFF; font-size: 1.1rem;
}
summary::-webkit-details-marker{display:none}
.plus{
    width:28px;height:28px;display:grid;place-content:center;border-radius:50%;
    border:1px solid var(--gold); color:var(--gold); font-size: 1.2rem;
    transition: transform 0.3s;
}
details[open] .plus { transform: rotate(45deg); background: var(--gold); color: #000; }
details p { margin-top: 1rem; color: var(--muted); }

/* --- Footer --- */
footer{
    padding:60px 0 40px; color:var(--muted); text-align:center;
    background: linear-gradient(to top, #000 0%, #050505 100%);
    border-top: 1px solid var(--stroke);
    font-size: 0.9rem;
}

/* --- Sticky CTA --- */
.sticky-cta{
  position:fixed;right:20px;bottom:20px;left:20px;
  display:flex;gap:12px;
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(16px);
  padding:12px; border-radius:18px;
  border: 1px solid rgba(212,175,55,0.4);
  box-shadow: 0 10px 40px rgba(0,0,0,0.9);
  z-index: 900;
  max-width: 450px;
  margin: 0 auto;
}
@media(min-width:768px){ .sticky-cta{ left: auto; } }

/* --- Select Custom --- */
.select-wrap{ position: relative; width: 100%; }
select.input{ appearance:none; padding-right: 2.5rem; cursor: pointer;}
select.input option{ background-color:#111; color:#FFF; padding: 10px; }
.select-caret{
  pointer-events:none; position:absolute; right:15px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:12px;
}

/* --- Article / Blog Page Styles --- */
.breadcrumb{
    display:flex; gap:8px; color:var(--muted); font-size:0.9rem; margin-bottom:1.5rem; align-items: center;
}
.breadcrumb a{color:var(--muted); border-bottom: 1px solid transparent;}
.breadcrumb a:hover{color: var(--gold); border-color: var(--gold);}
.breadcrumb span{color:var(--gold);}

.content-grid{display:grid; grid-template-columns: 2fr 1fr; gap: 50px;}
@media(max-width:900px){.content-grid{grid-template-columns: 1fr;}}

.article h2{
    font-size: 2rem; color: #FFF; margin-top: 2.5rem; margin-bottom: 1rem;
    padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article p{color:#C0C0C0; margin-bottom:1.5rem; font-size: 1.05rem; line-height: 1.8;}
.article ul, .article ol{ padding-left:1.5rem; color:#C0C0C0; margin-bottom: 1.5rem;}
.article li{margin-bottom:0.8rem; position: relative; list-style-type: none;}
.article li::before{
    content: "✦"; color: var(--gold); position: absolute; left: -1.5rem; top: 2px; font-size: 0.8rem;
}
.article strong { color: #FFF; font-weight: 600; }

.sidebar{position:sticky; top:120px; height:fit-content;}
.sidebar-card{
    background: rgba(255,255,255,0.02);
    border:1px solid var(--stroke); border-radius:var(--radius);
    padding:24px; box-shadow:var(--shadow);
}
.sidebar-card ul li a { color: var(--text); display: block; padding: 5px 0; transition: color 0.2s;}
.sidebar-card ul li a:hover { color: var(--gold); transform: translateX(5px); display: block; }