/* Altarmak public-site visual system, 2026-10 */
:root {
    --primary: #1e5aa8;
    --primary-dark: #17437d;
    --primary-light: #3a78c0;
    --secondary: #102a43;
    --secondary-light: #1d3c5d;
    --accent: #c9343b;
    --dark: #0b1f33;
    --dark-2: #122b45;
    --dark-3: #203b56;
    --gray-900: #172b40;
    --gray-800: #314459;
    --gray-700: #52667a;
    --gray-600: #6c7f91;
    --gray-500: #8797a6;
    --gray-400: #aebbc7;
    --gray-300: #cdd7e0;
    --gray-200: #e3eaf0;
    --gray-100: #f3f6f9;
    --white: #ffffff;
    --shadow-sm: 0 2px 8px rgba(16, 42, 67, .06);
    --shadow-md: 0 10px 30px rgba(16, 42, 67, .10);
    --shadow-lg: 0 20px 52px rgba(16, 42, 67, .14);
    --shadow-glow: 0 0 30px rgba(30, 90, 168, .18);
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 28px;
}

html { scroll-padding-top: 90px; }
body { color: #263a4e; background: #fff; }
.container { max-width: 1320px; }
.section-padding { padding: clamp(58px, 7vw, 96px) 0; }
.bg-light { background: #f4f7fa; }

.top-bar {
    padding: 9px 0;
    background: #0c2239;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-bar-left i { color: #e15a60; }
.main-header {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e6edf3;
    box-shadow: 0 4px 18px rgba(16,42,67,.045);
    backdrop-filter: blur(16px);
}
.main-header.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(16,42,67,.09); }
.header-inner { min-height: 82px; }
.logo { gap: 11px; }
.brand-logo { display: block; width: auto; height: 62px; max-width: 180px; object-fit: contain; background: #fff; border-radius: 8px; }
.footer-logo .brand-logo { height: 76px; max-width: 190px; }
.logo-icon,
.footer-logo .logo-icon {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(145deg, #17437d, #2d6db4);
    box-shadow: 0 8px 18px rgba(30,90,168,.22);
}
.logo-icon::after,
.footer-logo .logo-icon::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: -2px;
    bottom: -2px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--accent);
}
.logo-brand { color: #102a43; letter-spacing: 1.8px; }
.logo-sub { color: #6b7d90; letter-spacing: 2.6px; }
.nav-list > li > a { color: #30475d; font-weight: 600; }
.nav-list > li > a:hover,
.nav-list > li.active > a { color: var(--primary); }
.nav-list > li.active > a::after { background: var(--accent); }
.dropdown { border: 1px solid #e5ecf3; box-shadow: 0 18px 38px rgba(16,42,67,.12); }
.btn-quote { background: var(--primary); box-shadow: 0 8px 18px rgba(30,90,168,.18); }
.btn-quote:hover { background: var(--primary-dark); }
.btn-whatsapp { background: #25a866; }

.hero-section { background: #102a43; }
.hero-slide { min-height: min(720px, 78vh); }
.hero-slide .hero-bg img { object-position: center 44%; }
/* Keep the factory photo visible until the hero video has painted. */
.hero-slide.video-active .hero-bg img { opacity: 1 !important; }
.hero-content { max-width: 780px; padding-top: 56px; padding-bottom: 56px; }
.hero-badge {
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: rgba(13,39,65,.4);
    backdrop-filter: blur(10px);
    letter-spacing: .02em;
}
.hero-title { max-width: 760px; font-size: clamp(2.5rem, 5.5vw, 4.8rem); line-height: 1.04; letter-spacing: -.04em; }
.hero-title span { color: #f17378; }
.hero-desc { max-width: 680px; font-size: clamp(1rem, 1.45vw, 1.2rem); color: rgba(255,255,255,.88); }
.hero-buttons { gap: 12px; }
.hero-buttons .btn-primary,
.btn-primary {
    border-color: var(--primary);
    background: linear-gradient(135deg, #1e5aa8, #286db7);
    box-shadow: 0 10px 22px rgba(30,90,168,.20);
}
.hero-buttons .btn-primary:hover,
.btn-primary:hover { border-color: var(--primary-dark); background: var(--primary-dark); }
.hero-buttons .btn-outline { border-color: rgba(255,255,255,.62); color: #fff; background: rgba(255,255,255,.06); }
.hero-buttons .btn-outline:hover { background: #fff; color: var(--secondary); }
.swiper-pagination-bullet-active { background: #ef7075; }
.hero-decoration .hex { border-color: rgba(255,255,255,.13); }

.section-tag {
    color: var(--primary);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.section-tag i { color: var(--accent); }
.section-title { color: #102a43; letter-spacing: -.035em; }
.section-title span { color: var(--accent); }
.section-desc { color: #64788c; }
.about-image img { box-shadow: var(--shadow-lg); }
.about-experience-badge { background: linear-gradient(145deg, #1e5aa8, #17437d); box-shadow: 0 12px 28px rgba(16,42,67,.18); }
.about-features i { color: var(--accent); }

.product-card,
.service-card,
.testimonial-card,
.blog-card,
.video-card {
    border: 1px solid #e5ecf2;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(16,42,67,.055);
}
.product-card:hover,
.service-card:hover,
.blog-card:hover,
.video-card:hover {
    border-color: #cad9e8;
    box-shadow: 0 18px 38px rgba(16,42,67,.12);
}
.product-card-image { background: #edf2f7; }
.product-card-body h3 a { color: #173958; }
.product-card-footer { border-top-color: #edf1f5; }
.service-card-icon { color: var(--primary); background: #eaf2fb; }
.btn-outline-primary { color: var(--primary); border-color: #b9cde2; }
.btn-outline-primary:hover { color: #fff; border-color: var(--primary); background: var(--primary); }

.stats-section {
    background: linear-gradient(115deg, #0c2239 0%, #153b62 68%, #1e5aa8 100%);
}
.stats-section::after { background: radial-gradient(circle, rgba(201,52,59,.18), transparent 68%); }
.stat-item .stat-icon { color: #f17b80; }
.stat-item .stat-number { color: #fff; }
.stat-item .stat-label { color: rgba(255,255,255,.76); }

.tech-specs {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0c2239, #153b62);
}
.tech-specs::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(#c9343b, #ef777b);
}
.tech-card { border-color: rgba(255,255,255,.12); border-radius: 18px; }
.tech-card-icon { background: linear-gradient(145deg, #1e5aa8, #2d6db4); }
.tech-card .tech-value { color: #f17b80; }

.cta-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, #0d243c, #174779 72%, #1e5aa8);
}
.cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 74px;
    height: 4px;
    transform: translateX(-50%);
    background: #d64b52;
}
.cta-section .btn { color: var(--primary-dark); box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.cta-section .btn:hover { color: var(--accent); }
.cta-phone { color: #fff; }

.breadcrumb-bar { background: #f4f7fa; }
.breadcrumb a { color: var(--primary); }
.page-hero { background: linear-gradient(110deg, #102a43, #1e5aa8); }
.page-hero::after { background: linear-gradient(90deg, rgba(201,52,59,.9), rgba(201,52,59,0)); }
.main-footer { background: #0c2239; }
.footer-title::after { background: var(--accent); }
.footer-links a:hover,
.footer-social a:hover { color: #f17b80; }
.footer-bottom { background: #091b2e; }
.whatsapp-float { background: #25a866; }

@media (max-width: 991px) {
    .hero-slide { min-height: 620px; }
    .header-inner { min-height: 72px; }
    .hero-content { padding-top: 42px; padding-bottom: 42px; }
}
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
    .top-bar { display: none; }
    .hero-slide { min-height: 610px; }
    /* Keep the hero video from forcing a 750px-wide page on phones. */
    .hero-video-bg { display: none !important; }
    .hero-video-bg iframe { display: none !important; min-width: 0; min-height: 0; }
    .hero-slide.video-active .hero-bg img { opacity: 1 !important; }
    .hero-content { padding-top: 28px; padding-bottom: 32px; }
    .hero-title { font-size: clamp(2rem, 10vw, 3.15rem); }
    .hero-desc { font-size: 1rem; }
    .hero-buttons { display: grid; grid-template-columns: 1fr; width: min(100%, 360px); }
    .hero-buttons .btn { justify-content: center; min-height: 48px; }
    .section-padding { padding: 56px 0; }
    .cta-section { padding: 52px 0; }
    .cta-section h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
    .cta-section p { font-size: 1rem; }
    .product-card,
    .service-card,
    .testimonial-card,
    .blog-card { border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}