/* Opulence Web Solutions — style.css
   Black background, gold accent, classy + minimal
*/

:root{
  --bg: #050505;
  --card: #0e0e0e;
  --accent: #D4AF37; /* classy gold */
  --muted: #bdbdbd;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --maxw: 1100px;
  --pad: 24px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#f4f4f4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Utility container */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding: 0 20px;
}

/* HERO */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:80px 0;
  text-align:center;
  background:linear-gradient(0deg, rgba(255,255,255,0.02), transparent 40%);
}

.hero-inner{z-index:2; max-width:900px}

.brand{
  font-size:2.25rem;
  margin:0 0 8px;
  letter-spacing:1px;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
}

.sub{
  font-size:1.25rem;
  color:var(--muted);
  margin: 6px 0 18px;
  min-height:44px;
}

/* Typewriter cursor look */
#typewriter{
  border-right: 2px solid var(--accent);
  padding-right:6px;
  display:inline-block;
  font-weight:600;
  color:#fff;
}

.lead{
  margin: 10px 0 20px;
  color: #dcdcdc;
  font-weight:500;
}

/* CTA */
.cta{
  display:inline-block;
  padding:12px 22px;
  border-radius: 28px;
  background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(212,175,55,0.10));
  color: var(--accent);
  text-decoration:none;
  border: 1px solid rgba(212,175,55,0.25);
  font-weight:600;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.6)}

/* decorative faint vignette */
.hero-decor{
  position:absolute;
  inset:0;
  background: radial-gradient(600px 200px at 50% 40%, rgba(212,175,55,0.03), transparent 10%);
  pointer-events:none;
}

/* SECTION STYLING */
.section{
  padding:64px 0;
  border-top:1px solid rgba(255,255,255,0.02);
}

.section-title{
  text-align:center;
  color:#fff;
  margin:0 0 10px;
  font-size:1.5rem;
  font-weight:700;
}

.section-lead{
  text-align:center;
  color:var(--muted);
  margin:0 auto 32px;
  max-width:820px;
}

/* ABOUT GRID */
.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:28px;
}

.info-card{
  background:var(--card);
  padding:20px;
  border-radius:var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  text-align:left;
  border:1px solid rgba(255,255,255,0.02);
}
.info-card h3{margin:0 0 8px; color:var(--accent)}
.info-card p{margin:0; color:var(--muted)}

/* SERVICES CARDS */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:26px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:14px;
  padding:20px;
  border:1px solid rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:240px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.card.popular{
  outline: 2px solid rgba(212,175,55,0.12);
  transform: translateY(-6px);
}

.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card-head h3{margin:0; font-size:1.1rem; color:var(--accent)}
.price{font-weight:700; font-size:1.05rem; color:#fff}

.features{list-style:none; padding:12px 0 0; margin:0; color:var(--muted)}
.features li{padding:6px 0; border-bottom:1px dashed rgba(255,255,255,0.02); font-size:0.95rem}

.card-foot{margin-top:12px; color:var(--muted); font-weight:600; font-size:0.9rem}

/* CONTACT GRID */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:18px;
  justify-items:center;
}
.contact-card{
  width:100%;
  max-width:420px;
  background:var(--glass);
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  text-align:center;
}
.contact-card h3{margin:0 0 6px; color:var(--accent)}
.contact-card a{color:#fff; text-decoration:none; font-weight:600}
.small{color:var(--muted); text-align:center; margin-top:14px}

/* FOOTER */
.footer{
  text-align:center;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,0.02);
  color:var(--muted);
}

/* Responsive */
@media (max-width:900px){
  .info-grid, .cards-grid{grid-template-columns:repeat(1,1fr)}
  .contact-grid{grid-template-columns:repeat(1,1fr)}
  .hero{padding:60px 12px}
  .brand{font-size:1.6rem}
}

/* small visuals for accessibility focus */
a:focus{outline:2px dashed rgba(212,175,55,0.3); outline-offset:3px}
/* HOVER EFFECTS FOR INTERACTIVITY */
.info-card {
  background: var(--card);
  padding:20px;
  border-radius:var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  text-align:left;
  border:1px solid rgba(255,255,255,0.02);
  transition: transform .25s ease, box-shadow .25s ease, border .25s ease;
}
.info-card:hover {
  transform: translateY(-6px);
  border:1px solid var(--accent);
  box-shadow: 0 12px 30px rgba(212,175,55,0.2);
}

.card {
  transition: transform .25s ease, box-shadow .25s ease, border .25s ease;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
  border:1px solid var(--accent);
  box-shadow: 0 16px 40px rgba(212,175,55,0.25);
}
/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .sub {
    font-size: 1rem;
  }
  .lead {
    font-size: 0.95rem;
  }
  .cta {
    padding: 12px 22px;
    font-size: 0.9rem;
  }

  /* About & Services: stack cleaner on mobile */
  .info-grid, .cards-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  /* Contact section alignment */
  .contact-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }

  .contact-card {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  /* Hover fix for mobile (reduce lag) */
  .info-card:hover, .card:hover {
    transform: none;
    box-shadow: 0 6px 20px rgba(212,175,55,0.15);
  }
}
/* Contact Section Fix */
#contact {
  max-width: 800px;
  margin: 50px auto;
  text-align: center;
  padding: 40px 30px;
  background: #1c1c1c; /* keeps elegant contrast */
  border-radius: 12px;
}

#contact p {
  margin: 10px 0;
  color: #ddd;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
}

/* Section Differentiation */
section:nth-of-type(odd) {
  background-color: #111; /* dark base */
}

section:nth-of-type(even) {
  background-color: #181818; /* slightly lighter */
  border-top: 1px solid #2a2a2a; /* clean divider */
}

/* Phone Optimization */
@media (max-width: 600px) {
  #contact {
    padding: 30px 15px;
  }

  #contact h2 {
    font-size: 1.5rem;
  }

  #contact p {
    font-size: 0.95rem;
  }
}