*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans","Manrope",Arial,sans-serif;color:#17243a;background:#050f1e}
a{text-decoration:none;color:inherit}
.wrap{width:min(1240px,calc(100% - 48px));margin:auto}

/* TOPLINE */
.topline{background:#030a14;color:#a3b3c9;font-size:12px;border-bottom:1px solid rgba(255,255,255,0.08)}
.top-inner{height:42px;display:flex;align-items:center;justify-content:space-between}
.top-left,.top-right{display:flex;align-items:center;gap:14px}
.top-left span{display:inline-flex;align-items:center;gap:6px;color:#cbd5e1;font-size:12px}
.sep{color:rgba(255,255,255,0.2)}
.lang-switch{display:flex;gap:4px}
.lang-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff;padding:3px 8px;border-radius:3px;font-size:11px;font-weight:700;cursor:pointer}
.lang-btn.active{background:#e5b255;color:#050f1e;border-color:#e5b255}

/* HEADER */
.header{height:80px;background:rgba(5,15,30,0.85);backdrop-filter:blur(10px);color:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,0.08)}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand-copy{display:flex;flex-direction:column;gap:2px}
.brand-copy strong{font-size:20px;letter-spacing:1px;color:#fff;font-weight:800;white-space:nowrap}
.brand-copy em{font-style:normal;color:#e5b255}
.brand-copy small{font-size:8px;letter-spacing:1.5px;color:#94a3b8;font-weight:600}
.nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500;color:#cbd5e1}
.nav a{position:relative;padding:6px 0;transition:color .2s}
.nav a:hover,.nav a.active{color:#fff}
.nav a.active::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#e5b255;border-radius:2px}
.nav a.has-drop{display:inline-flex;align-items:center;gap:5px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border-radius:4px;font-size:13px;font-weight:700;transition:.2s;cursor:pointer}
.btn-gold{background:#e5b255;color:#071325}
.btn-gold:hover{background:#f3c46b;transform:translateY(-1px)}
.btn-small{padding:6px 14px;font-size:11px}
.btn-outline{border:1px solid rgba(255,255,255,0.4);color:#fff;background:rgba(255,255,255,0.03)}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.1)}
.menu-toggle{display:none;background:none;border:0;color:white;font-size:24px}

/* HERO SECTION */
.hero{position:relative;overflow:hidden;background:#050f1e;color:white;padding-top:40px}
.hero-image{position:absolute;inset:0;background-image:url("assets/hero-image.png");background-size:cover;background-position:center;opacity:1}
.hero-shade{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%, rgba(14,42,77,0.15) 0%, rgba(5,15,30,0.4) 70%)}

.hero-arrow{position:absolute;top:38%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);background:rgba(5,15,30,0.5);color:#fff;font-size:24px;cursor:pointer;z-index:5;display:grid;place-items:center;transition:.2s}
.hero-arrow:hover{background:rgba(229,178,85,0.8);border-color:#e5b255;color:#050f1e}
.hero-arrow.prev{left:14px}
.hero-arrow.next{right:14px}

.hero-content{position:relative;z-index:2;padding:50px 0 20px 45px}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#e5b255;display:flex;align-items:center;gap:12px;margin-bottom:20px}
.eyebrow .line{width:35px;height:2px;background:#e5b255}
.hero h1{font-size:clamp(48px,5.5vw,76px);line-height:1.02;letter-spacing:-1.5px;margin:0 0 16px;font-weight:800}
.hero h1 .highlight{color:#e5b255}
.hero-slogan{font-size:20px;font-weight:700;margin:0 0 12px;color:#f1f5f9}
.hero-desc{max-width:520px;color:#94a3b8;font-size:15px;line-height:1.7;margin:0 0 28px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}

/* HERO DOTS (CENTERED) */
.hero-dots{display:flex;gap:8px;margin:0 auto 30px auto;justify-content:center;width:fit-content}
.hero-dots .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:.2s}
.hero-dots .dot.active{background:#e5b255;width:24px;border-radius:6px}

/* HERO CARDS */
.hero-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:45px}
.hero-card{background:rgba(12,27,48,0.85);backdrop-filter:blur(12px);border:1px solid rgba(229,178,85,0.25);border-radius:10px;overflow:hidden;display:flex;align-items:stretch;box-shadow:0 12px 30px rgba(0,0,0,0.3);transition:.3s}
.hero-card:hover{border-color:rgba(229,178,85,0.7);transform:translateY(-3px)}
.card-img{width:38%;min-height:130px;background-size:cover;background-position:center;position:relative}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 50%, rgba(12,27,48,0.9) 100%)}
.card-body{padding:16px 18px;width:62%;display:flex;align-items:center;gap:14px}
.card-icon{flex-shrink:0;display:grid;place-items:center}
.card-info{flex:1}
.card-info h3{font-size:16px;margin:0 0 3px;color:#fff;font-weight:700}
.card-info p{font-size:11px;color:#94a3b8;margin:0 0 8px;line-height:1.3}
.card-link{font-size:11px;color:#e5b255;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.card-link:hover{color:#f3c46b}

/* HERO BOTTOM PROOF */
.hero-bottom{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);width:100%;border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);background:rgba(5,15,30,0.85);backdrop-filter:blur(10px);padding:24px 40px;margin-top:40px}
.hero-proof{display:flex;align-items:center;gap:14px;padding:0 20px;border-right:1px solid rgba(255,255,255,0.1)}
.hero-proof:first-child{padding-left:0}
.hero-proof:last-child{border-right:none}
.proof-svg{flex-shrink:0}
.hero-proof b{display:block;font-size:14px;color:#fff;font-weight:700}
.hero-proof small{display:block;font-size:11px;color:#94a3b8;margin-top:2px}

/* BELOW SECTIONS */
.section{padding:92px 0;background:#fff;color:#17243a}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.section-kicker{font-size:10px;letter-spacing:2px;font-weight:700;color:#d8ad58;margin-bottom:17px}
.section h2{font-size:clamp(30px,4vw,46px);line-height:1.13;letter-spacing:-1.4px;margin:0;color:#13233d}
.section h2 span{color:#bd9141}
.intro-copy p,.section-head>p{font-size:14px;line-height:1.9;color:#647084;margin:0 0 22px}
.text-link{font-size:12px;font-weight:700;color:#9b7028;border-bottom:1px solid #d9ad58;padding-bottom:8px}
.text-link span{margin-left:12px}
.products{background:#f4f5f7}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}
.section-head>p{max-width:360px;margin-bottom:4px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{background:white;box-shadow:0 10px 30px rgba(16,31,53,.06)}
.product-photo{height:255px;position:relative;background-size:cover;background-position:center;overflow:hidden}
.product-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,18,36,.55),transparent 55%)}
.cement {background-image:url("assets/cement-index.jpg")}
.tiles{background-image:url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=80")}
.slabs{background-image:url("https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=900&q=80")}
.product-number,.photo-label{position:absolute;z-index:1;color:white}
.product-number{top:17px;left:18px;font-size:11px;letter-spacing:1px}
.photo-label{bottom:18px;left:20px;font-size:10px;letter-spacing:1.7px;font-weight:700}
.product-info{padding:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.product-info h3{font-size:18px;margin:0 0 8px;color:#14243c}
.product-info p{font-size:11px;line-height:1.7;color:#778194;margin:0;max-width:280px}
.product-info>a{width:36px;height:36px;flex:0 0 36px;border:1px solid #e4e7eb;border-radius:50%;display:grid;place-items:center;color:#a87c32}
.approach{background:#0b1b34;color:#fff}
.approach-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}
.section-kicker.light{color:#d9ad58}
.approach h2{color:#fff;font-size:48px}
.approach-lead>p{color:#c4cedb;line-height:1.8;font-size:13px;max-width:370px;margin-top:20px}
.steps{border-top:1px solid rgba(255,255,255,.2)}
.step{display:flex;gap:25px;padding:23px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.step>span{font-size:12px;color:#d9ad58;padding-top:4px}
.step h3{font-size:16px;margin:0 0 7px}
.step p{font-size:12px;color:#bdc7d5;line-height:1.7;margin:0}
.cta{padding:65px 0;background:#fff}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #e8e9eb;padding:42px 48px}
.cta h2{font-size:34px}
.cta p{font-size:13px;color:#687487;margin:12px 0 0}
.footer{background:#07152a;color:#fff;padding:30px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-brand{min-width:unset}
.footer-brand .brand-mark{width:38px;height:38px}
.footer-brand .brand-copy strong{font-size:16px}
.footer-brand .brand-copy small{font-size:7px}
.footer-inner>p{font-size:12px;color:#d8ad58}
.footer-inner>small{font-size:10px;color:#aeb8c6}

/* RESPONSIVE TABLET */
@media(max-width:1024px){
    .hero-cards-grid{grid-template-columns:1fr;gap:12px}
    .hero-card{width:100%}
    .hero-bottom{grid-template-columns:repeat(2,1fr);gap:20px;padding:24px 20px}
    .hero-proof{border-right:none}
}

/* ================= MOBILE FIX (768px و کمتر) ================= */
@media(max-width:768px){
    /* فاصله کناری کمتر */
    .wrap, .catalog-wrap {width:calc(100% - 28px)}

    /* TOPBAR: زیر هم */
    .topbar {height:auto; padding:6px 0;}
    .topbar-inner {flex-direction:column; height:auto; gap:6px;}
    .top-contact {flex-wrap:wrap; justify-content:center; gap:6px; font-size:10px;}
    .top-contact i {display:none;}
    .top-actions {justify-content:center; width:100%;}

    /* HEADER: لوگو بالا، منو زیرش */
    .catalog-header {height:auto;}
    .header-inner {flex-wrap:wrap; gap:10px; padding:10px 0;}
    .catalog-brand {min-width:unset;}
    .catalog-nav {margin-right:0;}
    .mobile-menu {display:block; margin-left:auto;}

    /* HERO: محتوا زیر هم */
    .hero {padding-top:20px;}
    .hero-content {padding:20px 12px 20px 12px;}
    .hero h1 {font-size:34px; letter-spacing:-.5px;}
    .hero-slogan {font-size:16px;}
    .hero-desc {font-size:13px;}
    .hero-buttons {flex-direction:column; align-items:stretch;}
    .hero-buttons .btn {width:100%;}
    .hero-arrow {width:34px; height:34px; font-size:20px; top:26%;}
    .hero-arrow.prev {left:6px;}
    .hero-arrow.next {right:6px;}

    /* کارت‌های هیرو */
    .hero-cards-grid {grid-template-columns:1fr; gap:12px; margin-top:24px;}
    .hero-card {flex-direction:column;}
    .card-img {width:100%; min-height:140px;}
    .card-img::after {background:linear-gradient(0deg,rgba(12,27,48,0.9) 0%,transparent 60%);}
    .card-body {width:100%; padding:14px 16px;}

    /* نوار پایین هیرو */
    .hero-bottom {grid-template-columns:1fr; gap:0; padding:10px 16px; margin-top:24px;}
    .hero-proof {padding:14px 0; border-right:none; border-bottom:1px solid rgba(255,255,255,.1);}
    .hero-proof:last-child {border-bottom:none;}

    /* سکشن‌ها */
    .section {padding:50px 0;}
    .intro-grid {grid-template-columns:1fr; gap:24px;}
    .intro-copy p,.section-head>p {font-size:13px;}
    
    /* عنوان و متن زیر هم */
    .section-head {flex-direction:column; align-items:flex-start; gap:12px;}
    .section-head>p {max-width:100%;}

    /* محصولات: یک ستون */
    .product-grid {grid-template-columns:1fr;}
    .product-photo {height:220px;}

    /* رویکرد: یک ستون */
    .approach-grid {grid-template-columns:1fr; gap:30px;}
    .approach h2 {font-size:32px;}
    .approach-lead>p {max-width:100%;}

    /* CTA: زیر هم */
    .cta-box {flex-direction:column; align-items:flex-start; padding:24px 20px; gap:18px;}
    .cta-box .btn {width:100%;}
    .cta h2 {font-size:26px;}

    /* فوتر */
    .footer-inner {flex-direction:column; text-align:center; gap:12px;}
}