:root {
    --ie-dark: #0b1020;
    --ie-accent: #f5a623;
}

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2937; }

.site-nav { background: rgba(11, 16, 32, .96); backdrop-filter: blur(8px); padding: .65rem 0; }
.site-nav .navbar-brand { color: #fff; font-weight: 700; display: flex; align-items: center; gap: .55rem; }
.site-nav .brand-mark {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--ie-accent), #ef6c00); color: #0b1020; font-weight: 800; font-size: .9rem;
}
.site-nav .nav-link { color: #d5dbec; font-size: .92rem; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; }
.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .3); }
.site-nav .navbar-toggler-icon { filter: invert(1); }
.branch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; }

.hero {
    background: linear-gradient(135deg, #0b1020 0%, #16255a 60%, #1d4ed8 100%);
    color: #fff; padding: 5rem 0 4rem; position: relative; overflow: hidden;
}
.hero::after {
    content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(245, 166, 35, .28), transparent 70%);
}
.hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; line-height: 1.12; }
.hero p.lead { color: #cbd5f5; max-width: 44rem; }

.stat-pill {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px; padding: .85rem 1rem; text-align: center;
}
.stat-pill strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.stat-pill span { font-size: .76rem; color: #cbd5f5; }

.section { padding: 3.5rem 0; }
.section-title { font-weight: 700; margin-bottom: .35rem; }
.section-subtitle { color: #6b7280; margin-bottom: 2rem; }

.branch-card {
    border: 1px solid #e6e9f2; border-radius: 14px; padding: 1.4rem; height: 100%;
    background: #fff; transition: transform .18s ease, box-shadow .18s ease; text-decoration: none; color: inherit;
    display: block;
}
.branch-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 23, 42, .1); color: inherit; }
.branch-card .branch-badge {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    color: #fff; font-weight: 700; margin-bottom: .8rem;
}

.product-card {
    border: 1px solid #e6e9f2; border-radius: 14px; overflow: hidden; background: #fff;
    height: 100%; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease;
}
.product-card:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, .1); transform: translateY(-3px); }
.product-card .product-image { position: relative; }
.product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eef1f7; display: block; }
.product-card .product-branch {
    position: absolute; top: .6rem; left: .6rem; font-size: .68rem; padding: .18rem .55rem;
    border-radius: 999px; color: #fff; font-weight: 600;
}
.product-card .card-body { padding: .9rem; flex: 1; display: flex; flex-direction: column; }
.product-card .product-title { font-size: .98rem; font-weight: 600; margin-bottom: .2rem; }
.product-card .product-meta { font-size: .78rem; color: #6b7280; }
.product-card .product-price { font-weight: 700; color: #1d4ed8; }

.filter-panel { background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 1.1rem; }

.gallery-main img { width: 100%; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; background: #eef1f7; }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.gallery-thumbs img {
    width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
    cursor: pointer; border: 2px solid transparent;
}
.gallery-thumbs img.active { border-color: #1d4ed8; }

.spec-table th { width: 45%; font-weight: 500; color: #6b7280; font-size: .85rem; }
.spec-table td { font-size: .88rem; }

.site-footer { background: var(--ie-dark); color: #fff; padding: 3rem 0 1.5rem; margin-top: 4rem; }
.site-footer h5, .site-footer h6 { font-weight: 700; margin-bottom: .9rem; }
.site-footer a { color: #cbd5f5; text-decoration: none; font-size: .88rem; }
.site-footer a:hover { color: #fff; }
.site-footer li { margin-bottom: .35rem; }
.social-links a { font-size: 1.15rem; margin-right: .7rem; }

.cta-band { background: linear-gradient(120deg, #1d4ed8, #4338ca); color: #fff; border-radius: 16px; padding: 2.2rem; }