/* ==========================================================================
   Magekha Holdings — landing page
   Dark, editorial parent-brand look: deep black/green base, warm gold accent,
   Playfair Display for the wordmark, Inter for body. Slideshow uses real
   Magekha Electrical project photography.
   ========================================================================== */

:root{
  --black:      #0A0A0A;
  --dark:       #16181A;
  --green:      #1B5E20;
  --midgreen:   #2E7D32;
  --lightgreen: #4CAF50;
  --gold:       #D4A843;
  --lightgold:  #F0D78C;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; height:100%; }
body{
  font-family: var(--font-body);
  background: var(--black);
  color:#fff;
  overflow-x:hidden;
}
button{ font-family: inherit; cursor:pointer; background:none; border:none; color:inherit; }
a{ text-decoration:none; color:inherit; }
i[data-lucide]{ display:inline-block; width:1em; height:1em; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ---------- Slideshow ---------- */
.slideshow{ position:relative; width:100%; min-height:100vh; overflow:hidden; }
.slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.4s ease;
  transform: scale(1.04);
}
.slide.active{ opacity:1; }
.slide-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.72) 55%, rgba(10,10,10,0.92) 100%),
    linear-gradient(135deg, rgba(10,10,10,0.55) 0%, rgba(27,94,32,0.28) 100%);
}

.hero-content{
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 100px 24px 140px;
}
.rule{ width:80px; height:3px; margin: 0 auto; background: linear-gradient(90deg, var(--gold), var(--lightgold)); border-radius:2px; }
.hero-content h1{
  font-family: var(--font-heading); font-weight:800;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  letter-spacing: 0.03em;
  margin: 22px 0 0;
  color:#fff;
}
.hero-content h2{
  font-family: var(--font-heading); font-weight:300;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  letter-spacing: 0.42em;
  color: var(--gold);
  margin: 2px 0 22px;
  padding-left: 0.42em; /* optical balance for extreme letter-spacing */
}
.tagline{
  max-width: 620px; color: #C8C8C8; font-weight:300;
  font-size: clamp(0.98rem, 1.6vw, 1.15rem); line-height:1.7;
  margin: 6px 0 48px;
}

.cards{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px; width:100%; max-width: 1100px;
}
.card{
  position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--dark), var(--black));
  border: 1px solid rgba(46,125,50,0.35);
  border-radius: 14px;
  padding: 30px 22px;
  text-align:center;
  transition: transform .35s cubic-bezier(.175,.885,.32,1.275), box-shadow .35s ease, border-color .35s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 20px 50px rgba(212,168,67,0.22); border-color: rgba(212,168,67,0.4); }
.card-icon{
  width:52px; height:52px; margin: 0 auto 16px;
  border-radius:50%; background: rgba(46,125,50,0.18);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold); font-size: 1.5rem;
}
.card h3{ font-family: var(--font-heading); font-size: 1.08rem; font-weight:600; margin: 0 0 8px; color:#fff; }
.card p{ font-size: 0.86rem; color:#9A9A9A; line-height:1.55; margin:0; min-height: 2.6em; }
.card-cta{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top: 18px; font-size: 0.84rem; font-weight:600;
  color: var(--lightgreen);
}
.card-cta i{ width:14px; height:14px; }
.card-cta-live{ color: var(--gold); }

/* ---------- Dots ---------- */
.dots{
  position:absolute; left:50%; bottom: 32px; transform: translateX(-50%);
  z-index:3; display:flex; gap: 10px;
}
.sdot{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,0.3); cursor:pointer; transition: all .3s ease; }
.sdot.active{ background: var(--gold); transform: scale(1.35); }

.corner-credit{
  position:absolute; right: 28px; bottom: 32px; z-index:3;
  font-size: 0.68rem; letter-spacing: 0.18em; color: rgba(212,168,67,0.55);
  text-transform: uppercase;
}
@media (max-width: 700px){ .corner-credit{ display:none; } }

/* ---------- Coming soon overlay ---------- */
.coming-soon{
  position:fixed; inset:0; z-index: 50;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .4s ease, visibility .4s ease;
}
.coming-soon.active{ opacity:1; visibility:visible; pointer-events:auto; }
.coming-soon-bg{
  position:absolute; inset:0; background: var(--black);
  background-image: url('images/coming-soon-bg.jpg');
  background-size: cover; background-position: center;
}
.coming-soon-bg::after{
  content:""; position:absolute; inset:0; background: rgba(8,9,10,0.93);
}
.coming-soon-content{ position:relative; z-index:1; text-align:center; padding: 24px; max-width: 520px; }
.cs-icon{
  width:74px; height:74px; margin: 0 auto 24px; border-radius:50%;
  background: rgba(46,125,50,0.2); color: var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:2rem;
}
.coming-soon-content h2{ font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 14px; }
.coming-soon-content p{ color:#9A9A9A; margin: 0 0 6px; font-size: 1.02rem; }
.cs-sub{ font-size: 0.85rem !important; color:#6E6E6E !important; margin-bottom: 32px !important; }
.cs-back{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 28px; border-radius: 8px;
  background: var(--green); color:#fff; font-weight:600; font-size:0.92rem;
  transition: background-color .2s ease;
}
.cs-back:hover{ background: var(--midgreen); }
.cs-back i{ width:16px; height:16px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .hero-content{ padding: 90px 18px 110px; }
  .hero-content h2{ letter-spacing: 0.3em; }
  .cards{ grid-template-columns: 1fr; max-width: 340px; }
  .card p{ min-height: 0; }
}