/* =======================================================================================
    Turkmenhimiya — Shared Design System
    Single source of truth for the modern site skin (header, buttons, cards,
    page heroes, product tabs, forms, gallery, footer, animations).
    Loaded by every page after Bootstrap / navigation.css / stylesheet.css.
   ========================================================================================== */

:root {
    --page-bg: #f3f6fb;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: #ffffff;
    --ink: #102033;
    --muted: #607089;
    --accent: #18a57a;
    --accent-dark: #0b6b5f;
    --accent-soft: rgba(24, 165, 122, 0.12);
    --sun: #f2b134;
    --border: rgba(16, 32, 51, 0.08);
    --shadow: 0 20px 60px rgba(16, 32, 51, 0.08);
    --shadow-hover: 0 30px 70px rgba(24, 165, 122, 0.15);
    --radius: 24px;
}

/* stylesheet.css sets `html { font-size: 24px }` for the old template's own
   rem scale (its headings are sized like 1.602rem against that 24px root).
   Every measurement in this file is authored in rem against the standard
   16px root, so left alone everything here — padding, gaps, button and
   input sizing — renders 1.5x too large. Reset it back explicitly. */
/* overflow-x:hidden lives on html, not body: setting it on body makes body
   its own internal scroll container instead of the viewport (per spec the
   overflow should propagate up, but that didn't happen reliably here),
   which silently breaks `position: sticky` for the nav bar inside it. */
html { scroll-behavior: smooth; font-size: 16px !important; overflow-x: hidden; }

/* stylesheet.css also carries ~20 explicit `font-family: 'Poppins'` rules
   (and one 'Open Sans' rule) directly on h1-h6/p/a/etc. An element's own
   font-family always wins over an inherited value from body, so setting
   the stack only on body here never actually reached headings, buttons,
   or links. Restate it explicitly on the text-bearing elements (not `i`,
   so Font Awesome icon glyphs are untouched). */
html, body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, button, input, textarea, select, label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body {
    background:
        radial-gradient(circle at top left, rgba(24, 165, 122, 0.08), transparent 28%),
        radial-gradient(circle at 85% 12%, rgba(242, 177, 52, 0.06), transparent 20%),
        linear-gradient(180deg, #fbfcfe 0%, var(--page-bg) 100%);
    color: var(--ink);
    /* stylesheet.css independently sets `body { overflow-x: hidden }`. With
       html *also* clipping overflow-x (above), both html and body become
       separate scroll containers — and position:sticky descendants then
       resolve against body's (never-moving) scroll offset instead of the
       real page scroll, so the nav silently stops sticking. Only one
       element should own scrolling; let it be html. */
    overflow: visible !important;
}

.container, .container-fluid { margin: 0 auto; position: relative; }

::selection { background: var(--accent); color: #fff; }

/* ===============================================
    HEADER & NAVIGATION
   =============================================== */
.top-header {
    background: rgba(7, 17, 31, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.top-header .container, .main-nav .container { margin: 0 auto; }

.top-header .header-left p,
.top-header .header-right,
.top-header .header-right a,
.top-header .header-left strong {
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.3s ease;
}

.top-header .header-right a:hover { color: var(--accent); text-decoration: none; }

.top-header .header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.top-header .ht-right-social a {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.top-header .ht-right-social a:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

/* navigation.css ships `#navbar { position: fixed; top: 50px; }` — an ID rule
   that beats a plain .main-nav class no matter the source order, and
   stylesheet.css fixes .top-header too. Both collapse <header> to zero
   height, so every page's content renders underneath the floating bar.
   Reassert normal flow + sticky nav here with matching specificity. */
.top-header {
    position: static !important;
    top: auto !important;
    height: 50px;
    overflow: hidden;
    transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

/* Collapses the green contact bar away as the page scrolls, so the sticky
   nav condenses to just logo + links — the "fades while scrolling" effect. */
body.is-scrolled .top-header {
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.main-nav, #navbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 100% !important;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-bottom: 1px solid transparent;
}

.main-nav.is-scrolled, body.is-scrolled .main-nav {
    box-shadow: 0 12px 40px rgba(16, 32, 51, 0.08);
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);
}

body.is-scrolled .main-nav #navigation1 { height: 60px; }
body.is-scrolled .main-nav .nav-menu > li > a { height: 60px; padding-top: 21px; padding-bottom: 21px; }

/* --- Nav bar wrapping fix ---
   navigation.css's <nav class="navigation"> is `display:table; width:100%`
   sitting as the lone child of Bootstrap's `.row` (display:flex). A
   percentage width on a flex item can't resolve against an auto-sized flex
   container, so browsers fall back to the item's own content width instead
   of stretching to fill the bar — which squeezed the menu down to ~595px
   and forced the last two links onto a second line. A flex row with a
   single child doesn't need flex behaviour; block layout resolves the
   percentage width against the container correctly. */
.main-nav .row { display: block; margin: 0; }

.navigation .nav-menu > li > a {
    color: var(--ink);
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 13px;
    transition: color 0.3s ease;
}

.navigation .nav-menu > li > a:hover,
.navigation .nav-menu > li.current-menu-item > a { color: var(--accent); }

.navigation .nav-dropdown a { font-weight: 600; }
.navigation .nav-dropdown li.current-menu-item > a { color: var(--accent) !important; }

/* .main-nav's backdrop-filter creates a new containing block for fixed
   descendants, so navigation.css's `height: 100%` on the off-canvas panel
   resolves against the nav bar's own box instead of the viewport. `vh`
   units aren't containing-block-relative, so they sidestep it. Scoped to
   .navigation-portrait (mobile off-canvas mode only) — unscoped, it also
   forces the desktop inline menu wrapper to 100vh, which inflates <header>. */
.navigation-portrait .nav-menus-wrapper { height: 100vh !important; }

/* ===============================================
    BUTTONS
   =============================================== */
.get, .hero-link, .hero-cta, .cta-link, .footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.95rem 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
    cursor: pointer;
}

.get, .hero-cta, .footer-cta {
    background: linear-gradient(135deg, var(--accent), #1fc18d);
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(24, 165, 122, 0.3);
    outline: none;
}

/* .hero-link sits on the dark hero photo/page-hero banner and needs light-on-dark
   contrast; .cta-link sits on light section backgrounds and needs the opposite. */
.hero-link {
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.cta-link {
    background: rgba(16, 32, 51, 0.05);
    color: var(--ink) !important;
    border-color: transparent;
}

.get:hover, .hero-cta:hover, .footer-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(24, 165, 122, 0.4);
}

.hero-link:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

.cta-link:hover {
    background: rgba(16, 32, 51, 0.08);
    transform: translateY(-2px);
}

.btn-outline-light-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.9rem 1.5rem;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.btn-outline-light-alt:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }

/* ===============================================
    PAGE HERO (breadcrumb banner for interior pages)
   =============================================== */
.page-hero {
    position: relative;
    padding: 5.5rem 0 4.5rem;
    background:
        radial-gradient(circle at 12% 20%, rgba(24, 165, 122, 0.25), transparent 45%),
        radial-gradient(circle at 88% 0%, rgba(242, 177, 52, 0.12), transparent 40%),
        linear-gradient(125deg, #060e18 0%, #102033 55%, #0b3a30 150%);
    color: #fff;
    overflow: hidden;
    border-radius: 0 0 40px 40px;
}

.page-hero .container { position: relative; z-index: 2; }

.breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.5rem;
}

.breadcrumb-trail a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.3s ease; }
.breadcrumb-trail a:hover { color: var(--accent); }
.breadcrumb-trail span.sep { opacity: 0.5; }
.breadcrumb-trail span.current { color: var(--accent); }

.page-hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 1rem;
    color: #fff;
    max-width: 900px;
}

.page-hero .lead {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 62ch;
    margin-bottom: 0;
}

.page-hero-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.page-hero-tags span {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    backdrop-filter: blur(10px);
}

/* ===============================================
    HERO CAROUSEL (home page)
   =============================================== */
.homepage { position: relative; }
.hero-section { padding: 1.25rem 0 4rem; }

.hero-carousel .carousel-item {
    min-height: 88vh;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 0 0 40px 40px;
    overflow: hidden;
}

.hero-carousel .carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(6, 14, 24, 0.9) 0%, rgba(6, 14, 24, 0.5) 48%, rgba(6, 14, 24, 0.1) 100%);
}

.hero-carousel .hero-slide {
    position: relative;
    z-index: 2;
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: 6rem 0 4rem;
}

.hero-copy { max-width: 720px; color: #fff; animation: floatIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.hero-kicker, .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.section-kicker { background: var(--accent-soft); color: var(--accent-dark); }
.section-kicker.on-dark { background: rgba(255, 255, 255, 0.12); color: #fff; }

.hero-copy h1 {
    color: #fff;
    font-size: clamp(2.8rem, 6vw, 5.8rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 1.25rem;
    font-weight: 800;
}

.hero-copy p { color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; line-height: 1.8; max-width: 55ch; margin-bottom: 2rem; }

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.hero-tags span {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.hero-tags span:hover { background: rgba(255, 255, 255, 0.15); }

.hero-carousel .carousel-indicators { bottom: 3rem; margin-bottom: 0; gap: 8px; }
.hero-carousel .carousel-indicators li {
    width: 10px; height: 10px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, 0.3); transition: all 0.3s ease;
}
.hero-carousel .carousel-indicators .active { background: #fff; transform: scale(1.3); }

/* ===============================================
    METRICS & CARDS
   =============================================== */
.hero-metrics {
    margin-top: -3.5rem;
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.metric-card, .solution-card, .about-panel, .gallery-card, .cta-panel, .value-card, .role-card, .perk-card {
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.metric-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.85);
}
.metric-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.metric-card strong { font-size: clamp(2rem, 3vw, 2.8rem); color: var(--accent-dark); line-height: 1; font-weight: 800; }
.metric-card span { color: var(--muted); font-size: 0.95rem; font-weight: 500; }

.section-block { padding: 6rem 0; position: relative; }
.section-block.tight { padding: 3.5rem 0; }

.section-heading { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.section-heading.align-left { margin-left: 0; text-align: left; }

.section-heading h2 {
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    font-weight: 800;
}

.section-heading p, .about-copy p, .cta-panel p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; }

/* ===============================================
    SOLUTION GRID (product cards)
   =============================================== */
.solution-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.solution-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.solution-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.solution-card { overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 100%; }
.solution-card:hover, .gallery-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); }

.solution-card__media, .gallery-card { position: relative; overflow: hidden; }
.solution-card__media img, .gallery-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.solution-card:hover .solution-card__media img, .gallery-card:hover img { transform: scale(1.08); }
.solution-card__media { aspect-ratio: 4 / 3; }
.solution-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; background: #fff; }
.solution-card__body h3, .gallery-card__overlay h3, .cta-panel h2 { margin-bottom: 0; color: var(--ink); font-weight: 700; }
.solution-card__body h3 { font-size: 1.1rem; }
.solution-card__body p, .gallery-card__overlay p { margin-bottom: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.solution-card__badge, .gallery-card__overlay span {
    display: inline-flex; width: fit-content; padding: 0.35rem 0.75rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-dark); font-size: 10px;
    letter-spacing: 0.15em; text-transform: uppercase; font-weight: 800;
}

/* ===============================================
    ABOUT SECTION
   =============================================== */
.about-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; }
.about-layout.reverse { grid-template-columns: 0.95fr 1.05fr; }
.about-layout.reverse .about-visual { order: -1; }

.about-panel { padding: 2.5rem; background: #fff; }
.about-copy h2 { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.1; margin-bottom: 1rem; font-weight: 800; }
.about-copy .lead { color: var(--ink); font-weight: 600; font-size: 1.1rem; }

.about-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.about-point { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.1rem; border-radius: 18px; background: rgba(16, 32, 51, 0.03); transition: background 0.3s ease; }
.about-point:hover { background: rgba(16, 32, 51, 0.06); }
.about-point i { color: var(--accent); margin-top: 0.2rem; font-size: 1.1rem; }

.about-visual { display: grid; gap: 1.25rem; }
.about-main-card { position: relative; min-height: 420px; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.about-main-card img { width: 100%; height: 100%; object-fit: cover; }
.about-main-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 14, 24, 0.05), rgba(6, 14, 24, 0.70)); }
.about-floating-card { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 2; padding: 1.2rem 1.5rem; border-radius: 20px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); }
.about-floating-card strong { display: block; color: var(--ink); margin-bottom: 0.25rem; font-weight: 700; }
.about-floating-card p { margin-bottom: 0; font-size: 14px; color: var(--muted); }

.about-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.mini-stat { padding: 1.25rem; background: var(--surface-strong); border-radius: 20px; border: 1px solid var(--border); transition: all 0.3s ease; }
.mini-stat:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.mini-stat strong { display: block; font-size: 1.6rem; color: var(--accent-dark); margin-bottom: 0.3rem; font-weight: 800; }
.mini-stat span { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ===============================================
    VALUE / FEATURE CARDS (vision · mission · values, careers perks)
   =============================================== */
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.value-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.value-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.value-card, .perk-card {
    padding: 2.25rem 2rem;
    background: #fff;
    text-align: left;
}
.value-card:hover, .perk-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--accent-soft); }

.value-card__icon, .perk-card__icon {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 18px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
}
.value-card:hover .value-card__icon, .perk-card:hover .perk-card__icon { background: var(--accent); color: #fff; transform: scale(1.08) rotate(-4deg); }

.value-card h3, .perk-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.65rem; color: var(--ink); }
.value-card p, .perk-card p { color: var(--muted); font-size: 0.98rem; line-height: 1.75; margin-bottom: 0; }

/* ===============================================
    STAT STRIP (numbers band, on dark)
   =============================================== */
.stat-strip {
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0b1626, #10382f);
    color: #fff;
    padding: 3rem 2.5rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    box-shadow: var(--shadow);
}
.stat-strip .stat-item { text-align: center; padding: 0 1rem; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.stat-strip .stat-item:last-child { border-right: none; }
.stat-strip strong { display: block; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; color: #fff; margin-bottom: 0.35rem; }
.stat-strip span { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; letter-spacing: 0.02em; }

/* ===============================================
    PRODUCT TAB SHELL (steel / aluminum / zinc / cement / fertilizers / textile)
   =============================================== */
.product-shell {
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: 1rem;
}

#TabContainer .tabs-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.9rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
#TabContainer .tabs-navigation li { display: block !important; }

.tabs-navigation__button {
    display: inline-flex !important;
    align-items: center;
    background: rgba(16, 32, 51, 0.04) !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
    padding: 0.7rem 1.35rem !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    margin: 0 !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tabs-navigation__button:hover { background: var(--accent-soft) !important; color: var(--accent-dark) !important; }
.tabs-navigation__button[aria-selected="true"] {
    background: linear-gradient(135deg, var(--accent), #1fc18d) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(24, 165, 122, 0.32);
}

.tabs-init .tabs-container__title,
.accordion--closed .tabs-container__title {
    background: linear-gradient(135deg, var(--accent), #1fc18d) !important;
    color: #fff !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    margin: 0.5rem 0.9rem !important;
    padding: 1rem 1.35rem !important;
}
.tabs-container__title[aria-selected="true"] {
    background: var(--ink) !important;
    color: #fff !important;
    border-radius: 14px !important;
    margin: 0.5rem 0.9rem !important;
}

.tabs-container__panel { padding: 1.75rem 2rem 2.25rem !important; }
.tabs-container__panel h2 { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin-bottom: 1rem; }
.tabs-container__panel p { color: #3c4a5c; line-height: 1.85; font-size: 1rem; }
.tabs-container__panel b, .tabs-container__panel strong { color: var(--ink); }

.product-media { display: grid; gap: 1rem; position: sticky; top: 6.5rem; }
.product-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform 0.4s ease;
}
.product-media img:hover { transform: scale(1.02); }

/* Spec table — replaces legacy inline-styled tables */
.spec-table-wrapper { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); margin: 1.25rem 0 1.5rem; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 0; }
.spec-table th {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 0.75rem 1rem;
    letter-spacing: 0.01em;
}
.spec-table td { padding: 0.65rem 1rem; border-top: 1px solid var(--border); color: #3c4a5c; }
.spec-table tr:nth-child(even) td { background: rgba(16, 32, 51, 0.02); }
.spec-table td strong { color: var(--ink); }
.spec-note { font-size: 0.88rem; color: var(--muted); background: var(--accent-soft); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 1rem 0; }

.product-fact-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.55rem; }
.product-fact-list li { display: flex; gap: 0.6rem; align-items: flex-start; color: #3c4a5c; line-height: 1.6; }
.product-fact-list li i { color: var(--accent); margin-top: 0.3rem; font-size: 0.85rem; }
.product-fact-list li strong { color: var(--ink); }

/* ===============================================
    GALLERY (filter + masonry)
   =============================================== */
.gallery-shell { padding-top: 2rem; }
.filter-container .filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; list-style: none; margin: 1.5rem 0 3rem; padding: 0; }
.filter-container .filter li {
    padding: 0.85rem 1.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.filter-container .filter li .count { opacity: 0.55; font-weight: 600; margin-left: 0.2rem; }
.filter-container .filter li:hover, .filter-container .filter li.active {
    background: var(--ink); color: #fff; border-color: transparent;
    box-shadow: 0 10px 20px rgba(16, 32, 51, 0.15); transform: translateY(-2px);
}

.grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.grid-sizer { display: contents; }
.grid-box { width: 100%; }
.gallery-card { min-height: 320px; aspect-ratio: 4 / 3; display: block; border-radius: 24px; }
.gallery-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 30, 0.0), rgba(10, 18, 30, 0.8)); transition: opacity 0.3s ease; }
.gallery-card:hover::after { opacity: 0.9; }
.gallery-card__overlay { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 2; text-align: left; color: #fff; transform: translateY(10px); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gallery-card:hover .gallery-card__overlay { transform: translateY(0); }
.gallery-card__overlay h3 { color: #fff; margin: 0.6rem 0 0.35rem; font-size: 1.3rem; }
.gallery-card__overlay p { color: rgba(255, 255, 255, 0.7); opacity: 0; transition: opacity 0.4s ease 0.1s; }
.gallery-card:hover .gallery-card__overlay p { opacity: 1; }

/* ===============================================
    CTA PANEL
   =============================================== */
.cta-panel { padding: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: #fff; }
.cta-panel h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 0.8rem; font-weight: 800; }
.cta-panel.on-dark { background: linear-gradient(135deg, #0b1626, #10382f); color: #fff; }
.cta-panel.on-dark h2, .cta-panel.on-dark p { color: #fff; }
.cta-panel.on-dark p { color: rgba(255, 255, 255, 0.75); }

/* ===============================================
    FORMS (contact + careers)
   =============================================== */
.contact-form-panel { background: #fff; padding: 3rem; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }
.contact-form-panel h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--ink); }
.contact-form-panel .form-intro { color: var(--muted); margin-bottom: 1.75rem; }
.form-group { margin-bottom: 1.5rem; }
.form-label-alt { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }

.form-control.customize {
    background: rgba(16, 32, 51, 0.02);
    border: 1px solid rgba(16, 32, 51, 0.08);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    font-size: 1rem;
    color: var(--ink);
    transition: all 0.3s ease;
    box-shadow: none;
    width: 100%;
}
.form-control.customize::placeholder { color: #a0abbf; }
.form-control.customize:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
textarea.form-control.customize { resize: vertical; min-height: 140px; }
select.form-control.customize { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath fill='none' stroke='%23607089' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; }

.file-drop {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    background: rgba(16, 32, 51, 0.02);
    transition: all 0.3s ease;
    cursor: pointer;
}
.file-drop:hover, .file-drop.has-file { border-color: var(--accent); background: var(--accent-soft); }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop i { font-size: 1.5rem; color: var(--accent); margin-bottom: 0.5rem; display: block; }
.file-drop span.file-drop__label { display: block; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.file-drop span.file-drop__hint { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.25rem; }
.file-drop span.file-drop__filename { display: block; color: var(--accent-dark); font-size: 0.85rem; margin-top: 0.4rem; font-weight: 600; }

.form-note { font-size: 0.85rem; color: var(--muted); margin-top: -0.75rem; margin-bottom: 1.25rem; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; margin: 4rem 0; align-items: start; }
.contact-sidebar { display: flex; flex-direction: column; }
.contact-info-card {
    background: #fff; padding: 1.75rem; border-radius: 20px; border: 1px solid var(--border);
    box-shadow: var(--shadow); display: flex; align-items: flex-start; gap: 1.25rem;
    margin-bottom: 1.25rem; transition: all 0.3s ease;
}
.contact-info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--accent-soft); }
.ci-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.ci-text h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--ink); }
.ci-text p, .ci-text a { margin: 0; color: var(--muted); line-height: 1.6; text-decoration: none; transition: color 0.3s ease; }
.ci-text a:hover { color: var(--accent); }

@media (max-width: 991.98px) { .contact-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ===============================================
    MAP
   =============================================== */
.map-wrapper { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); height: 500px; margin-bottom: 2rem; background: #fff; padding: 0.5rem; }
.map-wrapper iframe { width: 100%; height: 100%; border-radius: 18px; border: none; }

/* ===============================================
    FOOTER
   =============================================== */
footer { background: var(--ink); color: rgba(255, 255, 255, 0.7); padding: 5rem 0 2rem; border-radius: 40px 40px 0 0; margin-top: 2rem; position: relative; overflow: hidden; }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); }
.footer-col { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 2.5rem; border-radius: var(--radius); height: 100%; backdrop-filter: blur(10px); transition: background 0.3s ease; }
.footer-col:hover { background: rgba(255, 255, 255, 0.05); }
.footer-logo img { filter: brightness(0) invert(1); max-width: 200px; margin-bottom: 1.5rem; }
.footer-col h4 { color: #fff; margin-bottom: 1.5rem; font-weight: 700; letter-spacing: 0.1em; font-size: 1.1rem; }
.popular-links ul { list-style: none; padding: 0; margin: 0; }
.popular-links li { margin-bottom: 0.8rem; }
.footer-col p, .footer-col a { color: rgba(255, 255, 255, 0.6); line-height: 1.8; text-decoration: none; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-icon { display: flex; flex-direction: column; gap: 1.25rem; }
.span-fi p, .span-fi a { display: flex; align-items: flex-start; gap: 1rem; margin: 0; }
.span-fi i { color: var(--accent); font-size: 1.2rem; margin-top: 0.25rem; }
footer .divider { border-color: rgba(255, 255, 255, 0.08); margin: 3rem 0 2rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.fb-social { display: flex; gap: 0.75rem; }
.fb-social a { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: #fff; transition: all 0.3s ease; }
.fb-social a:hover { background: var(--accent); transform: translateY(-3px); }

/* ===============================================
    SCROLL TOP BUTTON
   =============================================== */
.cd-top { background: var(--ink); color: #fff; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 12px; text-transform: uppercase; font-weight: 700; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; }
.cd-top:hover { background: var(--accent); color: #fff; transform: translateY(-5px); }

/* ===============================================
    REVEAL ANIMATIONS
   =============================================== */
.reveal { opacity: 0; transform: translateY(35px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 500ms; }

@keyframes floatIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===============================================
    RESPONSIVE
   =============================================== */
@media (max-width: 1199.98px) {
    .solution-grid, .solution-grid.cols-4, .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .about-layout, .about-layout.reverse, .cta-panel { grid-template-columns: 1fr; display: grid; }
    .about-layout.reverse .about-visual { order: 0; }
    .value-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-strip .stat-item:nth-child(2) { border-right: none; }
    .stat-strip .stat-item { margin-bottom: 1rem; }
    .product-media { position: static; }
}

@media (max-width: 991.98px) {
    .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solution-grid, .solution-grid.cols-3, .solution-grid.cols-4, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .value-grid, .value-grid.cols-2, .value-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    footer .footer-col { margin-bottom: 1.5rem; }
}

@media (max-width: 767.98px) {
    .top-header .header-right { justify-content: flex-start; margin-top: 0.75rem; }
    .hero-section { padding-top: 0.5rem; }
    .hero-carousel .carousel-item, .hero-carousel .hero-slide { min-height: 75vh; padding-top: 4rem; }
    .hero-copy h1 { max-width: none; }
    .hero-actions, .about-points, .hero-metrics, .solution-grid, .grid, .about-mini-grid,
    .value-grid, .value-grid.cols-2, .value-grid.cols-3, .value-grid.cols-4, .stat-strip {
        grid-template-columns: 1fr; display: grid;
    }
    .stat-strip .stat-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 1rem; }
    .stat-strip .stat-item:last-child { border-bottom: none; }
    .cta-panel { padding: 2rem 1.5rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .page-hero { padding: 4rem 0 3rem; border-radius: 0 0 28px 28px; }
    .contact-form-panel { padding: 2rem; }
    .map-wrapper { height: 350px; }
}