/* BETONIX V5 — two genuinely different visitor-selectable designs. */

/* Theme chooser */
.site-utility .design-theme-selector { margin-left: auto; }
.site-utility .design-theme-selector + a { margin-left: 0; }
.design-theme-selector { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; background: rgba(255,255,255,.05); }
.design-theme-selector button { min-height: 22px; padding: 2px 8px; color: #8ea6b2; border: 0; border-radius: 4px; background: transparent; font-size: .57rem; font-weight: 750; letter-spacing: .04em; cursor: pointer; transition: color .18s, background .18s; }
.design-theme-selector button:hover { color: #fff; }
.design-theme-selector button.is-active { color: #071b2b; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.design-theme-selector button[data-design-theme-option="cinematic"].is-active { color: #fff; background: #ff6a21; }
.design-theme-selector--mobile { width: 100%; margin-bottom: 8px; border-color: var(--v1-line); background: var(--v1-surface-soft); }
.design-theme-selector--mobile button { min-height: 34px; flex: 1; color: var(--v1-copy); font-size: .68rem; }

/* The two hero structures never overlap. */
.home-professional { display: none; }
html[data-design-theme="professional"] .home-cinematic,
html[data-design-theme="professional"] .home-cinematic + .labrix-marquee { display: none !important; }
html[data-design-theme="professional"] .home-professional { display: block; }
html[data-design-theme="cinematic"] .home-professional,
html[data-design-theme="cinematic"] .home-professional-only { display: none !important; }

/* ---------------------------
   MODERN CINEMATIC
   --------------------------- */
html[data-design-theme="cinematic"] body { background: #061923; }
html[data-design-theme="cinematic"] .site-header-v1 { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(5,20,31,.96); box-shadow: 0 10px 36px rgba(0,0,0,.22); }
html[data-design-theme="cinematic"] .site-header-v1 .nav-link,
html[data-design-theme="cinematic"] .site-header-v1 .login-link { color: #e6eff3; }
html[data-design-theme="cinematic"] .site-header-v1 .navbar-brand img { filter: drop-shadow(0 2px 7px rgba(255,255,255,.16)); }
html[data-design-theme="cinematic"] .site-header-v1 .nav-icon-action { color: #e6eff3; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
html[data-design-theme="cinematic"] .site-header-v1 .navbar-toggler { border-color: rgba(255,255,255,.2); }
html[data-design-theme="cinematic"] .site-header-v1 .navbar-toggler-icon { filter: invert(1); }
html[data-design-theme="cinematic"] .site-header-v1 .dropdown-menu { color: #eef7fa; border-color: #234452; background: #0a2734; }
html[data-design-theme="cinematic"] .site-header-v1 .dropdown-item { color: #e9f2f5; }
html[data-design-theme="cinematic"] .site-header-v1 .dropdown-item:hover { background: #123846; }
html[data-design-theme="cinematic"] .home-cinematic { border-bottom: 1px solid #18394a; }
html[data-design-theme="cinematic"] .home-cinematic:after { display: none; }
html[data-design-theme="cinematic"] .article-home-section,
html[data-design-theme="cinematic"] #uzmanliklar,
html[data-design-theme="cinematic"] .service-offers,
html[data-design-theme="cinematic"] .solution-partners { background: #071b26; }
html[data-design-theme="cinematic"] .article-home-section:nth-of-type(even) { background: #0a2430; }
html[data-design-theme="cinematic"] .public-article-card,
html[data-design-theme="cinematic"] .expertise-card.expertise-card-v2,
html[data-design-theme="cinematic"] .service-offer-card,
html[data-design-theme="cinematic"] .solution-partner-card { border-color: #24434f; background: #0c2935; }

/* Article pages need their own dark surfaces. The legacy article stylesheet
   uses fixed white cards, while Cinematic switches the global copy to light. */
html[data-design-theme="cinematic"] .article-detail,
html[data-design-theme="cinematic"] .article-hero,
html[data-design-theme="cinematic"] .related-articles { color: #e7f0f3; background: #061923; }
html[data-design-theme="cinematic"] .article-hero { border-bottom: 1px solid #183946; background: #071f2a; }
html[data-design-theme="cinematic"] .article-hero h1,
html[data-design-theme="cinematic"] .article-content h2,
html[data-design-theme="cinematic"] .article-content h3,
html[data-design-theme="cinematic"] .article-content h4,
html[data-design-theme="cinematic"] .article-share > strong,
html[data-design-theme="cinematic"] .author-box h2,
html[data-design-theme="cinematic"] .related-articles .section-heading h2 { color: #f4fafb; }
html[data-design-theme="cinematic"] .article-summary,
html[data-design-theme="cinematic"] .article-meta,
html[data-design-theme="cinematic"] .article-breadcrumb,
html[data-design-theme="cinematic"] .article-content,
html[data-design-theme="cinematic"] .article-content p,
html[data-design-theme="cinematic"] .article-content li,
html[data-design-theme="cinematic"] .article-content td { color: #bed0d6; }
html[data-design-theme="cinematic"] .article-breadcrumb a,
html[data-design-theme="cinematic"] .article-toc a,
html[data-design-theme="cinematic"] .article-content a { color: #75dbc8; }
html[data-design-theme="cinematic"] .article-toc,
html[data-design-theme="cinematic"] .author-box { color: #e7f0f3; border: 1px solid #244550; background: #0c2935; }
html[data-design-theme="cinematic"] .article-toc { border-left: 3px solid #39bda3; }
html[data-design-theme="cinematic"] .article-toc li,
html[data-design-theme="cinematic"] .author-copy > span,
html[data-design-theme="cinematic"] .author-box p { color: #afc3ca; }
html[data-design-theme="cinematic"] .author-copy > strong { color: #75dbc8; }
html[data-design-theme="cinematic"] .article-content th,
html[data-design-theme="cinematic"] .article-content td { border-color: #294b56; }
html[data-design-theme="cinematic"] .article-content th { color: #edf7f8; background: #123744; }
html[data-design-theme="cinematic"] .article-content blockquote,
html[data-design-theme="cinematic"] .article-content .note { color: #d8e7ea; background: #0e303c; }
html[data-design-theme="cinematic"] .article-content .note-warning { color: #f8e6b5; border-color: #d99314; background: #3b301b; }
html[data-design-theme="cinematic"] .article-content .note-standard { border-color: #55b9c7; background: #102f3c; }
html[data-design-theme="cinematic"] .article-tags,
html[data-design-theme="cinematic"] .article-share { border-top-color: #294b56; }
html[data-design-theme="cinematic"] .article-tags span { color: #bdf4e8; border: 1px solid #2f625f; background: #103b3b; }
html[data-design-theme="cinematic"] .article-share button,
html[data-design-theme="cinematic"] .article-share a { color: #dcecef; border-color: #31515c; background: #0e303c; }
html[data-design-theme="cinematic"] .article-share button:hover,
html[data-design-theme="cinematic"] .article-share a:hover { color: #071f2a; border-color: #75dbc8; background: #75dbc8; }
html[data-design-theme="cinematic"] .article-card-body h3 a { color: #f1f7f8; }
html[data-design-theme="cinematic"] .article-card-body p,
html[data-design-theme="cinematic"] .article-card-body footer { color: #afc3ca; }
html[data-design-theme="cinematic"] .article-card-body footer { border-top-color: #294b56; }
html[data-design-theme="cinematic"] .public-category-filter a,
html[data-design-theme="cinematic"] .article-pagination a { color: #dcecef; border-color: #31515c; background: #0c2935; }
html[data-design-theme="cinematic"] .public-category-filter a.active,
html[data-design-theme="cinematic"] .article-pagination a.active { color: #061923; border-color: #75dbc8; background: #75dbc8; }

/* ---------------------------
   CLEAN PROFESSIONAL
   --------------------------- */
html[data-design-theme="professional"] body { color: #102333; background: #f6f8f9; }
html[data-design-theme="professional"] .site-utility { color: #70828d; border-bottom: 1px solid #e1e7ea; background: #f3f6f7; }
html[data-design-theme="professional"] .site-utility a { color: #d94f0e; }
html[data-design-theme="professional"] .site-utility .design-theme-selector { border-color: #d9e1e5; background: #fff; }
html[data-design-theme="professional"] .site-utility .design-theme-selector button { color: #687d88; }
html[data-design-theme="professional"] .site-utility .design-theme-selector button:hover { color: #102333; }
html[data-design-theme="professional"] .site-header-v1 { border-bottom: 1px solid #e1e7ea; background: rgba(255,255,255,.97); box-shadow: 0 8px 26px rgba(20,45,61,.055); }
html[data-design-theme="professional"] .site-header-v1 .nav-link,
html[data-design-theme="professional"] .site-header-v1 .login-link { color: #102333 !important; }
html[data-design-theme="professional"] .site-header-v1 .nav-icon-action { color: #102333; border-color: #dce4e8; background: #fff; }

.professional-hero { position: relative; overflow: hidden; padding: 66px 0 27px; color: #102333; background: #fff; }
.professional-hero:before { content: ""; position: absolute; top: -140px; right: -80px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(220,231,236,.7), rgba(244,248,249,0) 68%); pointer-events: none; }
.professional-hero-grid { position: relative; z-index: 1; display: grid; min-height: 440px; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 56px; }
.professional-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #e65715; font-size: .67rem; font-weight: 800; letter-spacing: .17em; }
.professional-kicker:before { content: ""; width: 27px; height: 2px; background: #ff6a21; }
.professional-hero-copy h1 { margin: 0 0 20px; color: #102333; font-size: clamp(2.75rem, 4.55vw, 4.85rem); font-weight: 680; line-height: .99; letter-spacing: -.06em; }
.professional-hero-copy h1 em { display: inline; color: #ff6a21; font-style: normal; }
.professional-hero-copy > p { max-width: 575px; margin: 0; color: #5f737f; font-size: 1.01rem; line-height: 1.6; }
.professional-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.professional-actions .btn { min-height: 45px; padding: .65rem 1.1rem; border-radius: 7px; font-size: .82rem; }
.btn-professional-outline { color: #102333; border: 1px solid #cfd9de; background: #fff; }
.btn-professional-outline:hover { color: #e65715; border-color: #ff6a21; }
.professional-proof { display: grid; max-width: 530px; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 31px; padding-top: 18px; border-top: 1px solid #dfe6e9; }
.professional-proof > div + div { padding-left: 20px; border-left: 1px solid #e2e8eb; }
.professional-proof strong, .professional-proof span { display: block; }
.professional-proof strong { color: #102333; font-size: 1.1rem; }
.professional-proof span { margin-top: 2px; color: #71838d; font-size: .64rem; }

/* Angled engineering collage inspired by the approved B concept. */
.professional-collage { position: relative; display: grid; min-width: 0; height: 414px; grid-template-columns: 1.47fr .75fr; gap: 10px; transform: skewX(-5deg); }
.professional-collage a { position: relative; overflow: hidden; min-width: 0; color: #fff; border-radius: 10px; background: #0b2638; box-shadow: 0 14px 36px rgba(9,34,50,.13); }
.professional-collage a:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,20,31,.78), transparent 58%); }
.professional-collage img { width: 100%; height: 100%; object-fit: cover; transform: skewX(5deg) scale(1.08); transition: transform .45s ease; }
.professional-collage a:hover img { transform: skewX(5deg) scale(1.13); }
.professional-collage span { position: absolute; z-index: 2; right: 18px; bottom: 15px; left: 18px; display: block; transform: skewX(5deg); font-size: .63rem; font-weight: 700; letter-spacing: .08em; }
.professional-collage span b { display: block; margin-bottom: 4px; color: #ff8b53; font-size: .78rem; }
.professional-collage-stack { display: grid; min-width: 0; grid-template-rows: repeat(3, 1fr); gap: 10px; }
.professional-collage-stack span { color: #fff; font-size: .58rem; }
.professional-shortcuts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; border: 1px solid #dfe6e9; border-radius: 9px; background: #fff; box-shadow: 0 14px 36px rgba(12,38,53,.055); }
.professional-shortcuts a { display: grid; min-height: 88px; grid-template-columns: 30px 1fr; align-content: center; column-gap: 9px; padding: 15px 20px; color: #102333; }
.professional-shortcuts a + a { border-left: 1px solid #e2e8eb; }
.professional-shortcuts a > span { grid-row: span 2; color: #ff6a21; font-size: .65rem; font-weight: 800; }
.professional-shortcuts strong { font-size: .76rem; }
.professional-shortcuts small { margin-top: 3px; color: #71838d; font-size: .6rem; }
.professional-shortcuts a:hover strong { color: #e65715; }

html[data-design-theme="professional"] .theme-labrix .section { padding: 70px 0; }
html[data-design-theme="professional"] .theme-labrix .section-heading h2,
html[data-design-theme="professional"] .theme-labrix .service-offers-heading h2 { color: #102333; font-weight: 650; }
html[data-design-theme="professional"] .article-home-section,
html[data-design-theme="professional"] #uzmanliklar,
html[data-design-theme="professional"] .service-offers,
html[data-design-theme="professional"] .solution-partners { background: #f6f8f9; }
html[data-design-theme="professional"] .article-home-section:nth-of-type(even) { background: #fff; }
html[data-design-theme="professional"] .public-article-card,
html[data-design-theme="professional"] .expertise-card.expertise-card-v2,
html[data-design-theme="professional"] .service-offer-card,
html[data-design-theme="professional"] .solution-partner-card { color: #102333; border: 1px solid #dfe6e9; background: #fff; box-shadow: 0 10px 30px rgba(10,35,50,.06); }
html[data-design-theme="professional"] .public-article-card p,
html[data-design-theme="professional"] .expertise-card p,
html[data-design-theme="professional"] .service-offer-body p,
html[data-design-theme="professional"] .solution-partner-copy p { color: #657984; }
html[data-design-theme="professional"] .theme-labrix .technical { color: #102333; border-color: #dce5e9; background: #fff; background-image: none; box-shadow: 0 18px 46px rgba(10,35,50,.055); }
html[data-design-theme="professional"] .theme-labrix .technical:before { display: none; }
html[data-design-theme="professional"] .theme-labrix .technical .section-heading h2 { color: #102333; }
html[data-design-theme="professional"] .theme-labrix .technical .section-heading p { color: #657984; }
html[data-design-theme="professional"] .theme-labrix .technical .section-heading a { color: #e65715; }
html[data-design-theme="professional"] .theme-labrix .technical-card { color: #102333; border-color: #dde6ea; background: #f5f8f9; backdrop-filter: none; }
html[data-design-theme="professional"] .theme-labrix .technical-card.featured { color: #fff; border-color: #ff6a21; background: linear-gradient(135deg, #ff6a21, #e65210); }
html[data-design-theme="professional"] .theme-labrix .technical-card > span { color: #e65715; }
html[data-design-theme="professional"] .theme-labrix .technical-card.featured > span { color: #fff0e8; }
html[data-design-theme="professional"] .theme-labrix .technical-card h3 { color: #102333; }
html[data-design-theme="professional"] .theme-labrix .technical-card.featured h3 { color: #fff; }
html[data-design-theme="professional"] .theme-labrix .technical-card p { color: #657984; }
html[data-design-theme="professional"] .theme-labrix .technical-card.featured p { color: #fff3ed; }
html[data-design-theme="professional"] .theme-labrix .technical-card a { color: #e65715; }
html[data-design-theme="professional"] .theme-labrix .technical-card.featured a { color: #fff; }
html[data-design-theme="professional"] .theme-labrix .cta { color: #102333; border: 1px solid #dbe5e8; background: #fff; box-shadow: 0 18px 42px rgba(10,35,50,.07); }
html[data-design-theme="professional"] .theme-labrix .cta h2 { color: #102333; }
html[data-design-theme="professional"] .theme-labrix .cta p { color: #657984; }
html[data-design-theme="professional"] .theme-labrix .cta .btn-outline-brand { color: #102333; border-color: #ccd8dd; }

@media (max-width: 1199.98px) {
    .site-utility .design-theme-selector { display: none; }
    .professional-hero-grid { grid-template-columns: .88fr 1.12fr; gap: 30px; }
    .professional-collage { height: 370px; }
}

@media (max-width: 991.98px) {
    .professional-hero { padding-top: 52px; }
    .professional-hero-grid { grid-template-columns: 1fr; }
    .professional-hero-copy { max-width: 720px; }
    .professional-collage { height: 480px; }
    .professional-shortcuts { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .professional-shortcuts a:nth-child(3) { border-top: 1px solid #e2e8eb; border-left: 0; }
    .professional-shortcuts a:nth-child(4) { border-top: 1px solid #e2e8eb; }
}

@media (max-width: 767.98px) {
    .professional-hero { padding: 42px 0 20px; }
    .professional-hero-grid { gap: 34px; }
    .professional-hero-copy h1 { font-size: clamp(2.55rem, 11vw, 3.8rem); }
    .professional-actions .btn { width: 100%; }
    .professional-proof { gap: 0; }
    .professional-proof > div + div { padding-left: 10px; }
    .professional-collage { height: 390px; grid-template-columns: 1fr; transform: none; }
    .professional-collage-main { min-height: 220px; }
    .professional-collage-stack { grid-template-columns: repeat(3, 1fr); grid-template-rows: 135px; }
    .professional-collage img,
    .professional-collage a:hover img { transform: none; }
    .professional-collage span { right: 10px; bottom: 9px; left: 10px; transform: none; }
    .professional-shortcuts { margin-top: 18px; }
}

@media (max-width: 480px) {
    .professional-collage { height: 330px; }
    .professional-collage-main { min-height: 195px; }
    .professional-collage-stack { grid-template-rows: 115px; }
    .professional-collage-stack span { font-size: .48rem; }
    .professional-shortcuts a { min-height: 80px; padding: 12px; }
    .professional-shortcuts a > span { display: none; }
    .professional-shortcuts a { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .professional-collage img,
    .design-theme-selector button { transition: none; }
}