:root {
    --navy: #060c1a;
    --navy-2: #0b1530;
    --blue: #1454ff;
    --blue-light: #3d7bff;
    --blue-glow: rgba(20, 84, 255, 0.35);
    --white: #ffffff;
    --gray-100: #f4f6fb;
    --gray-300: #c8cedb;
    --gray-600: #6b7488;
    --radius: 14px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Vazirmatn', sans-serif;
    background: var(--gray-100);
    color: #151b2c;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ============ TOPBAR ============ */
.topbar {
    background: var(--navy);
    color: var(--gray-300);
    font-size: 0.85rem;
    padding: 6px 0;
}
.topbar-info span { margin-inline-end: 18px; }
.topbar-info i { color: var(--blue-light); margin-inline-end: 4px; }
.topbar-social a {
    color: var(--gray-300);
    margin-inline-start: 12px;
    transition: color .2s;
}
.topbar-social a:hover { color: var(--blue-light); }

/* ============ NAVBAR ============ */
.main-navbar {
    background: var(--navy-2);
    padding: 14px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.navbar-brand { font-weight: 800; font-size: 1.4rem; }
.brand-mark { color: var(--white); }
.brand-360 { color: var(--blue-light); margin-inline-start: 4px; }
.main-navbar .nav-link {
    color: var(--gray-300);
    font-weight: 500;
    padding: 8px 14px !important;
    border-radius: 8px;
    transition: all .2s;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { color: var(--white); background: rgba(255,255,255,.06); }
.main-navbar .dropdown-menu {
    background: var(--navy-2);
    border: 1px solid rgba(255,255,255,.08);
}
.main-navbar .dropdown-item { color: var(--gray-300); }
.main-navbar .dropdown-item:hover { background: var(--blue); color: var(--white); }
.nav-search { max-width: 260px; }
.nav-search .form-control {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--white);
    border-radius: 8px 0 0 8px;
}
.nav-search .form-control::placeholder { color: var(--gray-300); }
.btn-search { background: var(--blue); color: var(--white); border-radius: 0 8px 8px 0; border: none; }
.navbar-toggler { border-color: rgba(255,255,255,.2); }

/* ============ HERO / SLIDER ============ */
.hero-slider {
    position: relative;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, #10306b 100%);
    color: var(--white);
    overflow: hidden;
}
.hero-slide { padding: 90px 0; }
.hero-slide h1 { font-weight: 800; font-size: 2.6rem; line-height: 1.4; }
.hero-slide p { color: var(--gray-300); font-size: 1.1rem; margin: 20px 0 30px; }
.hero-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 80% 30%, var(--blue-glow), transparent 55%);
}
.btn-glow {
    background: var(--blue);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 8px 24px var(--blue-glow);
    border: none;
    transition: transform .2s, box-shadow .2s;
}
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--blue-glow); color: var(--white); }
.carousel-indicators [data-bs-target] { background: var(--blue-light); }

/* ============ SECTION TITLES ============ */
.section-pad { padding: 70px 0; }
.section-eyebrow {
    color: var(--blue);
    font-weight: 700;
    letter-spacing: .5px;
    font-size: .9rem;
    text-transform: uppercase;
}
.section-title { font-weight: 800; font-size: 2rem; margin-bottom: 12px; }
.section-sub { color: var(--gray-600); max-width: 640px; }
.bg-navy { background: var(--navy); color: var(--white); }
.bg-navy .section-sub { color: var(--gray-300); }

/* ============ FEATURE / SERVICE CARDS ============ */
.feature-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 32px 26px;
    height: 100%;
    box-shadow: 0 6px 24px rgba(15, 25, 60, .06);
    transition: transform .25s, box-shadow .25s;
    border: 1px solid rgba(15,25,60,.05);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(15, 25, 60, .12); }
.feature-icon {
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue), var(--navy));
    color: var(--white); font-size: 1.5rem;
    margin-bottom: 18px;
}
.feature-card h5 { font-weight: 700;color: #060c1a; }
.feature-card p { color: var(--gray-600); font-size: .95rem; margin-bottom: 0; }

/* ============ CATEGORY GRID ============ */
.category-card {
    display: block;
    background: var(--white);
    border-radius: var(--radius);
    padding: 26px 18px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(15,25,60,.06);
    transition: all .25s;
    color: #151b2c;
    height: 100%;
}
.category-card:hover { background: var(--navy); color: var(--white); transform: translateY(-4px); }
.category-card i { font-size: 2rem; color: var(--blue); display: block; margin-bottom: 10px; }
.category-card:hover i { color: var(--blue-light); }
.category-card span { font-weight: 600; font-size: .95rem; }

/* ============ PRODUCT CARDS ============ */
.product-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15,25,60,.06);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(15,25,60,.12); }
.product-thumb { position: relative; aspect-ratio: 1/1; background: var(--gray-100); overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-badge {
    position: absolute; top: 10px; inset-inline-start: 10px;
    background: var(--blue); color: var(--white);
    font-size: .75rem; padding: 3px 10px; border-radius: 20px; font-weight: 600;
}
.product-body { padding: 16px 16px 18px; flex-grow: 1; display: flex; flex-direction: column; }
.product-cat { color: var(--blue); font-size: .78rem; font-weight: 600; margin-bottom: 4px; }
.product-title { font-weight: 700; font-size: .98rem; margin-bottom: 8px; color: #151b2c; flex-grow: 1; }
.product-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.price-current { font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.price-old { text-decoration: line-through; color: var(--gray-600); font-size: .85rem; }
.btn-product {
    background: var(--navy); color: var(--white);
    border-radius: 8px; padding: 8px; font-weight: 600; font-size: .9rem;
    border: none; width: 100%; transition: background .2s;
}
.btn-product:hover { background: var(--blue); color: var(--white); }

/* ============ STATS ============ */
.stats-strip { background: var(--navy); color: var(--white); }
.stat-item { text-align: center; padding: 10px; }
.stat-item i { font-size: 1.8rem; color: var(--blue-light); margin-bottom: 10px; display: block; }
.stat-item h3 { font-weight: 800; font-size: 2.2rem; margin-bottom: 4px; }
.stat-item span { color: var(--gray-300); font-size: .9rem; }

/* ============ TESTIMONIALS ============ */
.testimonial-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: 0 4px 18px rgba(15,25,60,.06);
    height: 100%;
}
.testimonial-card .stars { color: #ffb400; margin-bottom: 10px; }
.testimonial-card p { color: #3a4257; }
.testimonial-user { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.testimonial-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* ============ BRAND LOGOS ============ */
.brand-strip { padding: 40px 0; background: var(--white); }
.brand-strip img { max-height: 42px; opacity: .6; filter: grayscale(1); transition: all .25s; }
.brand-strip img:hover { opacity: 1; filter: grayscale(0); }

/* ============ FAQ ============ */
.accordion-button:not(.collapsed) { background: var(--navy); color: var(--white); }
.accordion-button:focus { box-shadow: none; }

/* ============ CONTACT ============ */
.contact-info-card {
    background: var(--navy);
    color: var(--white);
    border-radius: var(--radius);
    padding: 30px;
}
.contact-info-card .info-item { display: flex; gap: 14px; margin-bottom: 20px; }
.contact-info-card .info-item i { font-size: 1.3rem; color: var(--blue-light); }
.map-frame { border-radius: var(--radius); overflow: hidden; border: 0; width: 100%; min-height: 300px; }

/* ============ BREADCRUMB ============ */
.breadcrumb-bar { background: var(--navy); color: var(--gray-300); padding: 18px 0; }
.breadcrumb-bar a { color: var(--gray-300); }
.breadcrumb-bar a:hover { color: var(--white); }
.breadcrumb-bar .active { color: var(--blue-light); }

/* ============ PRODUCT DETAIL ============ */
.product-gallery-main { border-radius: var(--radius); overflow: hidden; background: var(--white); aspect-ratio: 1/1; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs img {
    width: 70px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer;
    border: 2px solid transparent;
}
.gallery-thumbs img.active { border-color: var(--blue); }
.spec-table th { width: 40%; color: var(--gray-600); font-weight: 600; background: var(--gray-100); }

/* ============ FOOTER ============ */
.site-footer { background: var(--navy); color: var(--gray-300); padding-top: 60px; }
.footer-brand { color: var(--white); font-weight: 800; font-size: 1.3rem; }
.footer-brand span { color: var(--blue-light); }
.footer-about { font-size: .9rem; margin-top: 14px; line-height: 1.9; }
.footer-title { color: var(--white); font-weight: 700; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--gray-300); font-size: .9rem; transition: color .2s; }
.footer-links a:hover { color: var(--blue-light); }
.footer-contact { list-style: none; padding: 0; font-size: .9rem; }
.footer-contact li { margin-bottom: 12px; display: flex; gap: 8px; }
.footer-contact i { color: var(--blue-light); margin-top: 2px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding: 18px 0; font-size: .85rem; }

.back-to-top {
    position: fixed; bottom: 24px; inset-inline-end: 24px;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px var(--blue-glow); z-index: 999;
}

/* ============ PAGINATION ============ */
.pagination-nav { display: flex; justify-content: center; margin-top: 30px; }
.pagination { list-style: none; display: flex; gap: 6px; padding: 0; }
.pagination .page-item a {
    display: block; width: 40px; height: 40px; line-height: 40px; text-align: center;
    border-radius: 8px; background: var(--white); color: #151b2c; box-shadow: 0 2px 8px rgba(15,25,60,.06);
}
.pagination .page-item.active a { background: var(--blue); color: var(--white); }

/* ============ 404 ============ */
.error-page { text-align: center; padding: 100px 0; }
.error-page h1 { font-size: 6rem; font-weight: 800; color: var(--blue); }

/* ============ MISC ============ */
.badge-stock-out { background: #dc3545; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .2rem var(--blue-glow); }

@media (max-width: 767px) {
    .hero-slide { padding: 55px 0; }
    .hero-slide h1 { font-size: 1.8rem; }
    .section-pad { padding: 45px 0; }
}