/* =========================================
   DJ MONTECRISTO – CLEAN PRODUCTION STYLE
========================================= */

/* ========= THEME TOKENS ========= */
:root{
  --accent:#FF6E00;
  --accent-soft:#ff8c33;

  --bg:#0a0a0a;
  --text:#f5f5f5;

  --panel:#111111;
  --panelBorder: rgba(255,255,255,0.08);

  --radius-sm: 10px;
  --radius-md: 14px;

  --space-1: clamp(10px, 1.6vw, 14px);
  --space-2: clamp(14px, 2.2vw, 18px);
  --space-3: clamp(18px, 3.0vw, 26px);
  --space-4: clamp(22px, 4.0vw, 40px);

  --h1: clamp(22px, 3.2vw, 30px);
  --h2: clamp(17px, 2.0vw, 19px);
  --hero-title: clamp(20px, 4.8vw, 32px);
  --hero-services: clamp(15px, 3.2vw, 20px);
  --small: 14px;

  --shadow-soft: 0 10px 28px rgba(0,0,0,0.35);
  --shadow-lift: 0 16px 44px rgba(0,0,0,0.55);

  --sheen: linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02) 35%,
    rgba(255,255,255,0.00) 70%
  );
}

/* ========= BASE ========= */
*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* remove default link styling globally */
a{
  text-decoration:none;
  color:inherit;
}

/* ========= LAYOUT ========= */
section{
  padding: var(--space-4) var(--space-2);
  text-align:center;
}

/* ========= HERO ========= */
.hero-card{
  max-width:900px;
  margin:0 auto 10px;
  text-align:center;
  background: var(--sheen), rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md);
  padding: clamp(18px, 2.8vw, 26px) clamp(14px, 2.4vw, 20px);
  box-shadow: var(--shadow-soft);
  position:relative;
}

.hero-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
}

.hero-logo{
  width:160px;
  border-radius: var(--radius-sm);
  margin-bottom:14px;
}

.hero-title{
  margin:0 0 10px;
  font-size: var(--hero-title);
  font-weight:800;
  color: var(--accent);
  line-height:1.1;
}

/* SERVICES LINE */
.hero-services{
  margin:0 0 8px;
  font-size: var(--hero-services);
  font-weight:800;
  letter-spacing:0.15px;
  line-height:1.15;
}

/* Digital Services – identical look */
.hero-services a,
.hero-services a:link,
.hero-services a:visited,
.hero-services a:hover,
.hero-services a:active,
.hero-services a:focus{
  color:inherit !important;
  text-decoration:none !important;
  font:inherit !important;
  letter-spacing:inherit !important;
  line-height:inherit !important;
  background:none !important;
  box-shadow:none !important;
  outline:none !important;
  -webkit-text-fill-color: currentColor !important;
}

.hero-tagline{
  margin:0 0 10px;
  font-weight:600;
  opacity:0.82;
}

.hero-name{
  margin:22px 0 14px;
  font-size: var(--small);
  font-weight:600;
  opacity:0.9;
}

.hero-name::before{
  content:"";
  display:block;
  width:90px;
  height:1px;
  margin:0 auto 16px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
}

/* CONTACT IN HERO */
.hero-contact a{
  color: var(--accent);
  font-weight:700;
}

/* ========= HEADINGS ========= */
h1{ font-size: var(--h1); }
h2{
  font-size: var(--h2);
  opacity:0.9;
  margin:12px 0 18px;
}

.about h2,
.services h2,
.faq h2{
  color: var(--accent);
  font-weight:800;
}

/* ========= ABOUT ========= */
.about-text{
  max-width:900px;
  margin:0 auto;
}

.about-text p{
  text-align:left;
  line-height:1.75;
  opacity:0.95;
}

/* ========= SERVICES GRID ========= */
.services-grid{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}

.service-card{
  text-align:left;
  background: var(--sheen), var(--panel);
  border:1px solid var(--panelBorder);
  border-radius: var(--radius-md);
  padding:16px;
  box-shadow: var(--shadow-soft);
}

.service-card h3{
  margin:0 0 8px;
  color: var(--accent);
  font-weight:800;
}

.service-card p{
  margin:0;
  line-height:1.7;
}

/* ========= REVIEWS ========= */
.review-card{
  background: var(--sheen), var(--panel);
  border-left:3px solid var(--accent);
  border-radius: var(--radius-md);
  padding:16px;
  box-shadow: var(--shadow-soft);
  text-align:left;
}

/* ========= FAQ ========= */
.faq-item{
  background: var(--sheen), var(--panel);
  border:1px solid var(--panelBorder);
  border-radius: var(--radius-md);
  padding:16px;
  margin-bottom:12px;
  box-shadow: var(--shadow-soft);
}

.faq-item h3{
  color: var(--accent);
  font-weight:800;
}

/* ========= FOOTER ========= */
footer{
  text-align:center;
  padding:20px;
  background:#111;
  color:#aaa;
}

/* ========= RESPONSIVE ========= */
@media (min-width:900px){
  .services-grid{ grid-template-columns:1fr 1fr; }
}

/* ========= VIDEO 9:16 (YouTube vertical playlist) ========= */
.video-vertical{
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 9 / 16;
  margin: 18px auto 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

.video-vertical iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========= WeddingEla strip ========= */
.weddingela-strip{
  max-width:900px;
  margin: 26px auto;
  padding: 14px 0;
  position:relative;
  text-align:center;
}

.weddingela-strip::before,
.weddingela-strip::after{
  content:"";
  display:block;
  height:2px;
  margin: 14px 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
}

.weddingela-link{
  display:inline-block;
  font-size: var(--hero-services);
  font-weight:800;
  letter-spacing:.3px;
  opacity:.92;
  transition: opacity .25s ease, transform .25s ease;
}

.weddingela-link:hover{
  opacity:1;
  transform: translateY(-1px);
}

.weddingela-brand{
  color: var(--accent);
}