@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --gold: #c9a24b;
    --gold-light: #e8cf87;
    --gold-dark: #9c7c2f;
    --black: #0a0a0a;
    --black-soft: #141414;
    --black-card: #1b1b1b;
    --white: #f5f2ea;
    --gray: #8c8c8c;
    --radius: 14px;
    --shadow: 0 20px 50px rgba(0,0,0,.45);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Vazirmatn', sans-serif;
    background: var(--black);
    color: var(--white);
    direction: rtl;
    overflow-x: hidden;
    line-height: 1.9;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { font-family: inherit; cursor:pointer; }

.container { width:92%; max-width:1200px; margin:0 auto; }

.section-head { text-align:center; margin-bottom:60px; }
.section-head .tag { color: var(--gold); letter-spacing:2px; font-size:14px; font-weight:600; display:block; margin-bottom:10px; text-transform:uppercase; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); font-weight:800; position:relative; display:inline-block; }
.section-head h2::after {
    content:'';
    position:absolute;
    bottom:-16px; left:50%; transform:translateX(-50%);
    width:70px; height:3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    border-radius:5px;
}

.btn {
    display:inline-block;
    padding: 15px 38px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color: #111;
    font-weight:700;
    font-size:15px;
    border:none;
    transition: .35s;
    box-shadow: 0 10px 25px rgba(201,162,75,.25);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(201,162,75,.4); }
.btn.outline { background:transparent; border:2px solid var(--gold); color: var(--gold-light); box-shadow:none; }

/* ---------- Preloader ---------- */
#preloader {
    position: fixed; inset:0; background: var(--black);
    display:flex; align-items:center; justify-content:center;
    z-index: 9999; transition: opacity .5s, visibility .5s;
}
#preloader.hide { opacity:0; visibility:hidden; }
.loader-logo { font-size:34px; font-weight:900; color: var(--gold); letter-spacing:4px; animation: pulse 1.2s infinite ease-in-out; }
@keyframes pulse { 0%,100%{ opacity:.4; transform:scale(.96);} 50%{ opacity:1; transform:scale(1.04);} }

/* ---------- Header ---------- */
header {
    position: fixed; top:0; right:0; left:0; z-index:1000;
    padding: 18px 0;
    transition: .35s;
    background: transparent;
}
header.scrolled {
    background: rgba(10,10,10,.85);
    backdrop-filter: blur(12px);
    padding: 12px 0;
    box-shadow: 0 5px 25px rgba(0,0,0,.35);
}
header .container { display:flex; align-items:center; justify-content:space-between; }
.logo { font-size: 26px; font-weight:900; letter-spacing:2px; color: var(--white); }
.logo span { color: var(--gold); }

nav ul { display:flex; gap:36px; }
nav a { font-weight:500; font-size:15px; position:relative; padding:6px 0; }
nav a::after { content:''; position:absolute; right:0; bottom:0; width:0; height:2px; background: var(--gold); transition:.3s; }
nav a:hover::after, nav a.active::after { width:100%; }

.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; z-index:1100; }
.burger span { width:26px; height:2px; background: var(--white); transition:.3s; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    background:
        linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.85) 70%, var(--black) 100%),
        radial-gradient(circle at 30% 20%, rgba(201,162,75,.18), transparent 45%),
        var(--black-soft);
    overflow:hidden;
}
.hero::before {
    content:'';
    position:absolute; inset:0;
    background-image: repeating-linear-gradient(45deg, rgba(201,162,75,.035) 0 2px, transparent 2px 40px);
    animation: shift 20s linear infinite;
}
@keyframes shift { to { background-position: 400px 400px; } }

.hero-content { position:relative; z-index:2; padding-top: 60px; }
.hero-content .tag {
    display:inline-block; padding:8px 22px; border:1px solid var(--gold);
    border-radius:50px; color: var(--gold-light); font-size:13px; letter-spacing:2px;
    margin-bottom:26px; text-transform:uppercase;
    animation: fadeDown 1s ease;
}
.hero-content h1 {
    font-size: clamp(42px, 8vw, 86px);
    font-weight:900;
    background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
    -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
    margin-bottom:22px;
    animation: fadeUp 1s ease .2s both;
    letter-spacing:2px;
}
.hero-content p {
    font-size: clamp(16px, 2vw, 20px);
    color: var(--gray);
    max-width:600px; margin:0 auto 40px;
    animation: fadeUp 1s ease .4s both;
}
.hero-content .btns { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; animation: fadeUp 1s ease .6s both; }

@keyframes fadeUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeDown { from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }

.scroll-down {
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    width:26px; height:42px; border:2px solid var(--gold); border-radius:20px;
    display:flex; justify-content:center; padding-top:8px; z-index:2;
}
.scroll-down span { width:4px; height:8px; background: var(--gold); border-radius:3px; animation: scrollDot 1.5s infinite; }
@keyframes scrollDot { 0%{opacity:1; transform:translateY(0);} 100%{opacity:0; transform:translateY(14px);} }

/* ---------- About ---------- */
.about { padding: 120px 0; position:relative; }
.about-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; }
.about-visual {
    position:relative; height: 420px; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--black-card), #0d0d0d);
    border: 1px solid rgba(201,162,75,.25);
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow);
}
.about-visual .frame-text { font-size:100px; font-weight:900; color: rgba(201,162,75,.15); }
.about-text h2 { font-size: clamp(26px,3.5vw,38px); font-weight:800; margin-bottom:24px; }
.about-text p { color: var(--gray); font-size:16px; margin-bottom:30px; }
.about-stats { display:flex; gap:40px; flex-wrap:wrap; }
.about-stats div { text-align:center; }
.about-stats strong { display:block; font-size:32px; color: var(--gold); font-weight:800; }
.about-stats span { color: var(--gray); font-size:13px; }

/* ---------- Services ---------- */
.services { padding: 120px 0; background: var(--black-soft); position:relative; }
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 30px; }
.service-card {
    background: var(--black-card);
    border: 1px solid rgba(201,162,75,.15);
    border-radius: var(--radius);
    padding: 40px 30px;
    text-align:center;
    transition:.4s;
    position:relative;
    overflow:hidden;
}
.service-card::before {
    content:''; position:absolute; inset:0; opacity:0;
    background: linear-gradient(160deg, rgba(201,162,75,.12), transparent 60%);
    transition:.4s;
}
.service-card:hover { transform: translateY(-10px); border-color: var(--gold); box-shadow: var(--shadow); }
.service-card:hover::before { opacity:1; }
.service-icon {
    width:70px; height:70px; margin:0 auto 24px;
    border-radius:50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#111; font-weight:800;
}
.service-card h3 { font-size:20px; font-weight:700; margin-bottom:14px; }
.service-card p { color: var(--gray); font-size:14.5px; }

/* ---------- Portfolio ---------- */
.portfolio { padding: 120px 0; }
.portfolio-filter { display:flex; justify-content:center; gap:14px; margin-bottom:44px; flex-wrap:wrap; }
.portfolio-filter button {
    background:transparent; border:1px solid rgba(201,162,75,.4); color: var(--gray);
    padding:9px 24px; border-radius:50px; font-size:14px; transition:.3s;
}
.portfolio-filter button.active, .portfolio-filter button:hover { background: var(--gold); color:#111; border-color: var(--gold); }

.portfolio-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; }
.portfolio-item {
    position:relative; border-radius: var(--radius); overflow:hidden;
    aspect-ratio: 4/5; background: var(--black-card);
    cursor:pointer;
    border: 1px solid rgba(201,162,75,.12);
}
.portfolio-item img, .portfolio-item video { width:100%; height:100%; object-fit:cover; transition: .6s; }
.portfolio-item:hover img, .portfolio-item:hover video { transform: scale(1.08); }
.portfolio-item .overlay {
    position:absolute; inset:0;
    background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 55%);
    display:flex; align-items:flex-end; padding:22px;
    opacity:0; transition:.35s;
}
.portfolio-item:hover .overlay { opacity:1; }
.portfolio-item .overlay h4 { font-size:16px; font-weight:700; }
.portfolio-item .play-icon {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:56px; height:56px; border-radius:50%;
    background: rgba(201,162,75,.9);
    display:flex; align-items:center; justify-content:center; font-size:20px; color:#111;
}
.empty-note { text-align:center; color: var(--gray); padding: 40px 0; }

/* Lightbox */
#lightbox {
    position:fixed; inset:0; background: rgba(0,0,0,.94); z-index:3000;
    display:none; align-items:center; justify-content:center; padding: 30px;
}
#lightbox.show { display:flex; }
#lightbox .lb-content { max-width: 900px; width:100%; max-height:88vh; }
#lightbox img, #lightbox video { width:100%; max-height:80vh; object-fit:contain; border-radius:10px; }
#lightbox .lb-close {
    position:absolute; top:26px; left:26px; font-size:22px; color: var(--gold);
    background: rgba(255,255,255,.08); width:44px; height:44px; border-radius:50%; border:none;
}
#lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); background: rgba(255,255,255,.08); color: var(--gold); border:none; width:48px; height:48px; border-radius:50%; font-size:22px; }
#lightbox .lb-prev { right:26px; }
#lightbox .lb-next { left:26px; }
#lightbox .lb-caption { text-align:center; color: var(--gray); margin-top:16px; }

/* ---------- Testimonials ---------- */
.testimonials { padding: 120px 0; background: var(--black-soft); }
.testi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:28px; }
.testi-card { background: var(--black-card); border:1px solid rgba(201,162,75,.15); border-radius: var(--radius); padding: 34px; }
.testi-card .stars { color: var(--gold); margin-bottom:16px; letter-spacing:3px; }
.testi-card p { color: var(--gray); margin-bottom:22px; font-size:15px; }
.testi-card .name { font-weight:700; color: var(--white); }
.testi-card .name::before { content:'— '; color: var(--gold); }

/* ---------- Contact ---------- */
.contact { padding: 120px 0; }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:50px; }
.contact-info h2 { font-size: clamp(26px,3.5vw,38px); font-weight:800; margin-bottom:20px; }
.contact-info p { color: var(--gray); margin-bottom:34px; }
.contact-info ul li { display:flex; align-items:center; gap:14px; margin-bottom:22px; font-size:15px; }
.contact-info ul li a { transition:.25s; }
.contact-info ul li a:hover { color: var(--gold-light); }
.contact-info ul li .ic { width:44px; height:44px; border-radius:50%; background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); display:flex; align-items:center; justify-content:center; color:#111; font-weight:800; flex-shrink:0; }
.social-row { display:flex; gap:14px; margin-top:30px; }
.social-row a { width:44px; height:44px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--gold-light); transition:.3s; }
.social-row a:hover { background: var(--gold); color:#111; }
.map-box { border-radius: var(--radius); overflow:hidden; min-height:340px; border:1px solid rgba(201,162,75,.2); background: var(--black-card); display:flex; align-items:center; justify-content:center; color: var(--gray); }

/* ---------- Footer ---------- */
footer { background:#050505; padding: 40px 0; text-align:center; border-top:1px solid rgba(201,162,75,.15); }
footer p { color: var(--gray); font-size:14px; }
footer .foot-logo { font-size:20px; font-weight:800; color: var(--gold); margin-bottom:14px; }

/* Floating whatsapp */
.float-btn {
    position:fixed; bottom:26px; left:26px; z-index:900;
    width:58px; height:58px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 25px rgba(201,162,75,.4);
    font-size:26px; color:#111; animation: floaty 2.6s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

/* Reveal on scroll */
.reveal { opacity:0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.show { opacity:1; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .about-grid, .contact-grid { grid-template-columns: 1fr; }
    .about-visual { height:280px; }
}
@media (max-width: 768px) {
    nav { position:fixed; top:0; left:0; width:78%; height:100vh; background: var(--black-soft); flex-direction:column; padding:100px 30px; transition:.4s; transform: translateX(-110%); z-index:1050; }
    nav.open { transform: translateX(0); }
    nav ul { flex-direction:column; gap:26px; }
    .burger { display:flex; }
}