/* ============ tokens ============ */
:root{
  --bg:        #171310;
  --bg-soft:   #1E1812;
  --surface:   #241D16;
  --ink:       #F3EBDD;
  --ink-dim:   #B7A98F;
  --ink-faint: #8A7D66;
  --gold:      #D4A24C;
  --gold-dim:  #9C7A3C;
  --wood:      #8B5E3C;
  --line:      rgba(243,235,221,0.12);
  --radius-s:  10px;
  --radius-m:  16px;
  --font: 'Vazirmatn', Tahoma, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.75;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-weight:800; letter-spacing:-0.01em;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ============ topbar ============ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6%;
  background:linear-gradient(to bottom, rgba(15,12,9,0.75), transparent);
}
.brand{font-weight:700; font-size:0.98rem; letter-spacing:0.01em;}
.brand em{font-style:normal; color:var(--ink-dim); font-weight:400;}
.topbar-call{
  display:flex; align-items:center; gap:8px;
  font-size:0.92rem; font-weight:600;
  padding:8px 16px; border:1px solid rgba(243,235,221,0.35); border-radius:999px;
  backdrop-filter:blur(6px);
  transition:border-color .2s ease, background .2s ease;
}
.topbar-call:hover{border-color:var(--gold); background:rgba(212,162,76,0.1);}

/* ============ hero ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(120% 90% at 50% 20%, #241a10 0%, #120e0b 70%);
}
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0.55;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(15,12,9,0.55) 0%, rgba(15,12,9,0.35) 40%, rgba(15,12,9,0.88) 100%);
}

/* stylised soundwave — plays under the headline as a modern animated accent */
.wave-field{
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  height:38%;
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(4px,1vw,10px);
  padding-bottom:0;
  mask-image:linear-gradient(to top, black, transparent);
  opacity:0.55;
}
.wave-field span{
  display:block; width:clamp(3px,0.6vw,7px); border-radius:6px 6px 0 0;
  background:linear-gradient(to top, var(--gold), transparent);
  animation:wave 2.6s ease-in-out infinite;
}
.wave-field span:nth-child(1){height:20%; animation-delay:-2.1s;}
.wave-field span:nth-child(2){height:55%; animation-delay:-1.4s;}
.wave-field span:nth-child(3){height:30%; animation-delay:-0.6s;}
.wave-field span:nth-child(4){height:70%; animation-delay:-1.9s;}
.wave-field span:nth-child(5){height:40%; animation-delay:-0.3s;}
.wave-field span:nth-child(6){height:85%; animation-delay:-2.4s;}
.wave-field span:nth-child(7){height:35%; animation-delay:-1.1s;}
.wave-field span:nth-child(8){height:60%; animation-delay:-0.8s;}
.wave-field span:nth-child(9){height:25%; animation-delay:-1.7s;}
.wave-field span:nth-child(10){height:75%; animation-delay:-0.2s;}
.wave-field span:nth-child(11){height:45%; animation-delay:-2.3s;}
.wave-field span:nth-child(12){height:65%; animation-delay:-1.0s;}
.wave-field span:nth-child(13){height:20%; animation-delay:-0.5s;}
.wave-field span:nth-child(14){height:50%; animation-delay:-1.6s;}
.wave-field span:nth-child(15){height:30%; animation-delay:-2.0s;}
@keyframes wave{
  0%, 100%{transform:scaleY(0.4);}
  50%{transform:scaleY(1);}
}

.hero-content{
  position:relative; z-index:2;
  text-align:center;
  max-width:720px;
  padding:0 24px;
  animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{
  from{opacity:0; transform:translateY(22px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-eyebrow{
  color:var(--gold);
  font-size:0.95rem; font-weight:600;
  margin-bottom:18px;
}
.hero-title{
  font-size:clamp(2.3rem, 6vw, 4.2rem);
  line-height:1.2;
  margin-bottom:22px;
}
.hero-sub{
  color:var(--ink-dim);
  font-size:clamp(1rem, 2vw, 1.15rem);
  max-width:520px; margin:0 auto 34px;
}
.hero-actions{
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px;
  font-weight:700; font-size:0.98rem;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{
  background:var(--gold); color:#1a1409;
}
.btn-primary:hover{background:#e2b25e;}
.btn-ghost{
  border:1px solid rgba(243,235,221,0.35);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn-ghost--light{border-color:rgba(23,19,16,0.35); color:var(--bg);}
.btn-ghost--light:hover{border-color:var(--bg);}

.scroll-cue{
  position:absolute; z-index:2; bottom:28px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid rgba(243,235,221,0.5); border-radius:999px;
  display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{
  width:4px; height:8px; border-radius:999px; background:var(--gold);
  animation:cue 1.6s ease-in-out infinite;
}
@keyframes cue{
  0%{opacity:1; transform:translateY(0);}
  70%{opacity:0; transform:translateY(10px);}
  100%{opacity:0;}
}

/* ============ value props ============ */
.props{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.prop{
  background:var(--bg);
  padding:44px 34px;
}
.prop svg{color:var(--gold); margin-bottom:18px;}
.prop h3{font-size:1.1rem; margin-bottom:10px;}
.prop p{color:var(--ink-dim); font-size:0.95rem; max-width:34ch;}

/* ============ section heads ============ */
.section-head{max-width:640px; margin:0 auto 44px; text-align:center; padding:0 24px;}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:12px;}
.section-head p{color:var(--ink-dim);}
.section-eyebrow{color:var(--gold); font-weight:600; margin-bottom:14px;}
.section-eyebrow--light{color:var(--wood);}

/* ============ gallery ============ */
.gallery{padding:100px 6% 90px;}
.video-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  max-width:1180px; margin:0 auto;
}
.video-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
}
.video-card--wide{grid-column:span 3;}
.video-card video{width:100%; aspect-ratio:16/9; background:#0f0c09; object-fit:cover;}
.video-card--wide video{aspect-ratio:21/9;}
.play-btn{
  position:absolute; top:0; right:0; left:0;
  height:calc(100% - 74px);
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,12,9,0.28);
  color:var(--ink);
  border:none; cursor:pointer;
  opacity:1; transition:opacity .2s ease, background .2s ease;
}
.play-btn::after{
  content:''; position:absolute; width:56px; height:56px; border-radius:50%;
  background:rgba(23,19,16,0.55); border:1.5px solid rgba(243,235,221,0.6);
  z-index:-1;
}
.play-btn:hover{background:rgba(15,12,9,0.15);}
.video-card video:not([paused]) ~ .play-btn,
.video-card.is-playing .play-btn{opacity:0; pointer-events:none;}
.video-info{padding:16px 18px 20px;}
.video-info h3{font-size:1rem; margin-bottom:4px;}
.video-info p{color:var(--ink-faint); font-size:0.88rem;}

/* ============ about ============ */
.about{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px;
  align-items:center;
  max-width:1180px; margin:0 auto; padding:60px 6% 110px;
}
.about-frame{
  aspect-ratio:4/5; border-radius:var(--radius-m);
  background:
    radial-gradient(circle at 30% 20%, rgba(212,162,76,0.35), transparent 55%),
    linear-gradient(155deg, var(--wood) 0%, #3a2a1c 60%, #1a140d 100%);
  border:1px solid var(--line);
}
.about-text p{color:var(--ink-dim); margin-top:16px; max-width:52ch;}
.about-text h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-top:4px;}

/* ============ contact ============ */
.contact{
  background:var(--gold);
  color:#1a1409;
  text-align:center;
  padding:100px 6%;
}
.contact h2{font-size:clamp(1.7rem,3.6vw,2.4rem); max-width:16ch; margin:0 auto 30px;}
.phone-link{
  display:inline-block; font-size:clamp(2.1rem,5vw,3rem); font-weight:800;
  letter-spacing:0.02em; direction:ltr;
  border-bottom:3px solid rgba(23,19,16,0.35);
  padding-bottom:6px;
}
.contact-note{margin-top:18px; opacity:0.75; font-size:0.92rem;}
.contact-actions{
  margin-top:36px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}
.contact .btn-primary{background:#1a1409; color:var(--gold);}
.contact .btn-primary:hover{background:#2a2011;}

/* ============ footer ============ */
.footer{
  text-align:center; padding:34px; color:var(--ink-faint); font-size:0.85rem;
}

/* ============ floating call ============ */
.fab-call{
  position:fixed; z-index:50; bottom:24px; left:24px;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:#1a1409;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(212,162,76,0.5);}
  70%{box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 14px rgba(212,162,76,0);}
  100%{box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(212,162,76,0);}
}

/* ============ focus ============ */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* ============ responsive ============ */
@media (max-width:900px){
  .props{grid-template-columns:1fr;}
  .video-grid{grid-template-columns:repeat(2,1fr);}
  .video-card--wide{grid-column:span 2;}
  .about{grid-template-columns:1fr; gap:36px;}
  .about-frame{max-width:340px; margin:0 auto;}
}
@media (max-width:600px){
  .topbar{padding:14px 5%;}
  .brand em{display:none;}
  .video-grid{grid-template-columns:1fr;}
  .video-card--wide{grid-column:span 1;}
  .video-card--wide video{aspect-ratio:16/9;}
  .contact{padding:70px 6%;}
}