:root{
  --navy:#0a0f1c;
  --gold:#d4af37;
  --muted:#bfc7d1;
  --card:#0f1720;
  --accent:#dce5f1;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{color:#e9eef6;background:var(--navy);font-size:16px;line-height:1.6}

/* Backgrounds for pages/
.bg-home{background:linear-gradient(rgba(4,7,14,0.6),rgba(4,7,14,0.6)), url('../assets/bg-home.jpg') center/cover no-repeat fixed;}
.bg-pricing{background:linear-gradient(rgba(4,7,14,0.65),rgba(4,7,14,0.65)), url('../assets/bg-pricing.jpg') center/cover no-repeat fixed;}
.bg-portfolio{background:linear-gradient(rgba(4,7,14,0.65),rgba(4,7,14,0.65)), url('../assets/bg-portfolio.jpg') center/cover no-repeat fixed;}
.bg-contact{background:linear-gradient(rgba(4,7,14,0.65),rgba(4,7,14,0.65)), url('../assets/bg-contact.jpg') center/cover no-repeat fixed;}
.bg-privacy{background:linear-gradient(rgba(4,7,14,0.7),rgba(4,7,14,0.7)), url('../assets/bg-privacy.jpg') center/cover no-repeat fixed;}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;background:rgba(8,12,20,0.6);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03);z-index:60}
.container{max-width:1100px;margin:0 auto;padding:18px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;object-fit:contain;border-radius:8px}
.studio-name{font-weight:700;color:var(--gold);font-size:18px}
.tagline{color:var(--muted);font-size:13px}
.main-nav{display:flex;gap:18px;align-items:center}
.main-nav a{color:#e6eef8;text-decoration:none;opacity:0.95}
.main-nav a.active{color:var(--gold);font-weight:700}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:20px}

/* Hero */
.hero{padding-top:120px;padding-bottom:60px;min-height:60vh;display:flex;align-items:center}
.hero-inner{max-width:760px;color:#fff}
.hero h1{font-size:34px;margin:0 0 10px;color:var(--gold)}
.lead{color:var(--muted);margin-bottom:18px}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:#fff}
.btn.primary{background:var(--gold);color:#07101a;border-color:transparent;font-weight:700}

/* Sections */
.section-alt{padding:80px 0}
.about ul{list-style:disc;margin-left:20px;color:var(--muted)}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.pricing-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.pricing-card.featured{transform:translateY(-8px);box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.price{font-size:20px;color:var(--gold);margin:8px 0}

/* Portfolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.portfolio-grid img{width:100%;height:160px;object-fit:cover;border-radius:10px;display:block;box-shadow:0 8px 24px rgba(2,6,14,0.6)}

/* Contact */


.connect-container {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.contact-box {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  max-width: 600px;
  width: 100%;
}

.contact-box h1 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 24px;
  color: #222;
}

.contact-box .tagline {
  text-align: center;
  font-style: italic;
  color: #555;
  margin-bottom: 20px;
}

.contact-item {
  margin-bottom: 15px;
  font-size: 15px;
  color: #333;
}

.contact-item a {
  color: #0073e6;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

.map-container {
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

/* Policies */
.policy-list{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);color:var(--muted)}



/* Floating phone */
.phone-floating{position:fixed;right:18px;bottom:18px;background:var(--gold);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(2,6,14,0.6);z-index:100}
.phone-floating svg{display:block}

/* Terms specific */
.terms-overlay{min-height:100vh;background:linear-gradient(rgba(4,7,14,0.85),rgba(4,7,14,0.85)), url('../assets/bg-privacy.jpg') center/cover no-repeat}
.terms-header{display:flex;align-items:center;gap:12px;padding:26px;color:var(--gold)}
.logo-small{width:48px;height:48px;object-fit:contain}
.terms-main{padding:20px 0}
.terms-main h1{color:var(--gold);margin-bottom:12px}

/* Responsive */
@media (max-width:900px){
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;top:64px;right:18px;background:rgba(6,10,16,0.9);padding:12px;border-radius:8px;flex-direction:column;gap:8px}
  .main-nav a{display:block}
  .contact-columns{grid-template-columns:1fr}
  .hero{padding-top:100px}
}
/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.portfolio-grid img {
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.3s;
}
.portfolio-grid img:hover {
  transform: scale(1.05);
}

/* Modal (Lightbox) */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}
.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 10px;
}
#caption {
  margin: 15px auto;
  text-align: center;
  color: #ccc;
  font-size: 18px;
}
.close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: red;
}

/* Pricing Card Styling */
.pricing-card {
  background-color: rgba(255, 255, 255, 0.05); /* light transparent white */
  padding: 20px;
  border-radius: 10px;
  border: 2px solid black; /* ✅ Black border */
  transition: transform 0.3s ease;
}
/* Background Video */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* full screen cover karega */
  z-index: -1;         /* content ke peeche */
}

/* Optional: Dark Overlay (agar text aur clear karna ho) */
.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* thoda dark effect */
  z-index: 0;
}

/* Page Content */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: #fff;
  position: relative;
  z-index: 1;
}
.site-footer {
  background: #111;
  color: #eee7e7;
  padding: 20px 0;
  font-size: 14px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-contact p {
  margin: 5px 0;
}

.footer-contact a {
  color: #f0c14b;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.terms-link {
  color: #f0c14b;
  text-decoration: none;
  font-weight: 500;
}

.terms-link:hover {
  text-decoration: underline;
}