*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Typography */
      --font-primary: 'Outfit', 'Inter', "PingFang SC", "Microsoft YaHei", sans-serif;
      
      /* Rich Custom Color Palette */
      --cl333: #0f172a;        /* Deep Slate Blue */
      --cl666: #475569;        /* Medium Slate Neutral */
      --cl999: #94a3b8;        /* Light Slate Neutral */
      --white: #ffffff;
      --bg-light: #f8fafc;     /* Clean Soft Cool Gray */
      --border: #e2e8f0;       /* Modern Delicate Slate Border */
      
      /* Clean Energy Accents */
      --orange: #0ea5e9;       /* Electric Sky (Primary Tech Accent) */
      --orange-hover: #0284c7; /* Sky Deep Blue */
      --yellow: #ff9f0a;       /* Solar Gold/Orange (Solar Energy Accent) */
      --yellow-hover: #e08200; /* Rich Solar Amber */
      
      /* Layout Config */
      --headh: 84px;
      --cont1600: min(1600px, calc(100% - 80px));
      --cont1680: min(1680px, calc(100% - 80px));
      --space140: 140px;
      --space60: 60px;
      --radiu: 24px;            /* Increased radius for premium aesthetic */

      /* Premium Shadows & Transitions */
      --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.03);
      --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.05);
      --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.08);
      --shadow-glow: 0 0 25px rgba(14, 165, 233, 0.25);
      --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      --transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-primary);
      color: var(--cl333);
      background: var(--white);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    .container { width: var(--cont1600); margin: 0 auto; }
    .container-wide { width: var(--cont1680); margin: 0 auto; }

    /* ── Header ── */
    .header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      transition: var(--transition-smooth);
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0) 100%);
    }
    .header.scrolled {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 4px 30px rgba(15, 23, 42, 0.04);
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    .header-top {
      display: flex; justify-content: flex-end;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      transition: var(--transition-smooth);
    }
    .header.scrolled .header-top { border-color: rgba(226, 232, 240, 0.8); }
    .header-top ul { display: flex; gap: 30px; padding: 8px 40px; }
    .header-top a {
      color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500;
      transition: var(--transition-smooth); position: relative;
    }
    .header-top a::after {
      content: ''; position: absolute; bottom: -8px; left: 0;
      width: 100%; height: 2px;
      background: var(--yellow); transform: scaleX(0); transition: var(--transition-smooth);
    }
    .header-top a:hover { color: var(--yellow); }
    .header-top a:hover::after { transform: scaleX(1); }
    .header.scrolled .header-top a { color: var(--cl666); }
    .header.scrolled .header-top a:hover { color: var(--orange); }
    .header.scrolled .header-top a::after { background: var(--orange); }

    .header-main {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 40px; height: var(--headh);
    }
    .header-left { display: flex; align-items: center; gap: 58px; }
    .logo { display: flex; flex-direction: column; line-height: 1.1; min-width: 140px; }
    .logo-name {
      font-size: 28px; font-weight: 800; letter-spacing: 0.08em;
      color: var(--white); transition: var(--transition-smooth);
    }
    .logo-tag {
      font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--yellow); margin-top: 3px;
      transition: var(--transition-smooth);
    }
    .logo-light { display: block; }
    .logo-normal { display: none; }
    .header.scrolled .logo-light { display: none !important; }
    .header.scrolled .logo-normal { display: block !important; }
    .header.scrolled .logo-name { color: var(--cl333); }
    .header.scrolled .logo-tag { color: var(--orange); }

    .lang-menu { position: relative; }
    .lang-dropdown {
      display: none; position: absolute; top: calc(100% + 8px); right: 0;
      min-width: 160px; background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px); border-radius: 16px;
      border: 1px solid rgba(226, 232, 240, 0.8);
      box-shadow: var(--shadow-lg); overflow: hidden; z-index: 100;
      animation: navFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes navFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .lang-menu.open .lang-dropdown { display: block; }
    .lang-dropdown button,
    .lang-dropdown a {
      display: block; width: 100%; text-align: left; padding: 12px 18px;
      font-size: 14px; color: var(--cl333); transition: var(--transition-smooth);
      font-weight: 500; text-decoration: none;
    }
    .lang-dropdown button:hover, .lang-dropdown button.active,
    .lang-dropdown a:hover, .lang-dropdown a.active {
      background: rgba(14, 165, 233, 0.08); color: var(--orange);
    }

    .nav { display: flex; gap: 40px; }
    .nav a {
      font-size: 16px; font-weight: 600; line-height: var(--headh); color: var(--white);
      white-space: nowrap; transition: var(--transition-smooth); position: relative;
    }
    .nav a::after {
      content: ''; position: absolute; bottom: calc(var(--headh) / 2 - 14px); left: 0;
      width: 100%; height: 2px; background: var(--yellow);
      transform: scaleX(0); transition: var(--transition-smooth);
    }
    .nav a:hover { color: var(--yellow); }
    .nav a:hover::after { transform: scaleX(1); }
    .nav a.active { color: var(--yellow); }
    .nav a.active::after { transform: scaleX(1); }
    .header.scrolled .nav a { color: var(--cl333); }
    .header.scrolled .nav a:hover, .header.scrolled .nav a.active { color: var(--orange); }
    .header.scrolled .nav a::after { background: var(--orange); }

    .header-right { display: flex; align-items: center; gap: 24px; }
    .header-search {
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      color: var(--white); transition: var(--transition-smooth);
      border-radius: 50%;
    }
    .header-search:hover { background: rgba(255, 255, 255, 0.1); }
    .header.scrolled .header-search { color: var(--cl333); }
    .header.scrolled .header-search:hover { background: rgba(15, 23, 42, 0.05); }
    .header-search svg { width: 22px; height: 22px; }

    /* Search Overlay */
    .search-overlay {
      position: fixed; inset: 0; z-index: 1200;
      background: rgba(9, 14, 26, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: flex-start; justify-content: center;
      padding: 100px 24px 24px;
      opacity: 0; visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .search-overlay.open { opacity: 1; visibility: visible; }
    .search-overlay-inner {
      background: var(--white);
      width: 100%; max-width: 660px;
      border-radius: 24px;
      box-shadow: 0 30px 80px -20px rgba(2, 8, 23, 0.5), 0 0 0 1px rgba(255,255,255,0.06);
      padding: 30px;
      position: relative;
      overflow: hidden;
      transform: translateY(-24px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .search-overlay-inner::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, var(--orange), var(--yellow));
    }
    .search-overlay.open .search-overlay-inner { transform: translateY(0) scale(1); }
    .search-overlay-close {
      position: absolute; top: 20px; right: 20px;
      width: 34px; height: 34px; border-radius: 50%;
      border: none; background: var(--bg-light); color: var(--cl666);
      font-size: 22px; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition-smooth);
    }
    .search-overlay-close:hover { background: var(--border); color: var(--cl333); transform: rotate(90deg); }
    .search-overlay-form-wrap { padding-right: 40px; }
    .search-overlay-form {
      display: flex; align-items: center; gap: 14px;
      border-bottom: 2px solid var(--border);
      padding-bottom: 16px;
      transition: border-color 0.2s ease;
    }
    .search-overlay-form:focus-within { border-color: var(--orange); }
    .search-form-icon { width: 22px; height: 22px; color: var(--cl999); flex-shrink: 0; }
    .search-overlay-form:focus-within .search-form-icon { color: var(--orange); }
    .search-overlay-form input {
      flex: 1; border: none; outline: none; font-size: 19px;
      font-family: var(--font-primary); font-weight: 500; color: var(--cl333);
      background: transparent;
    }
    .search-overlay-form input::placeholder { color: var(--cl999); font-weight: 400; }
    .search-spinner {
      width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
      border: 2px solid var(--border); border-top-color: var(--orange);
      opacity: 0; transition: opacity 0.15s ease;
    }
    .search-spinner.spinning { opacity: 1; animation: searchSpin 0.7s linear infinite; }
    @keyframes searchSpin { to { transform: rotate(360deg); } }
    .search-overlay-hint {
      font-size: 12.5px; color: var(--cl999); margin-top: 10px;
    }
    .search-suggestions {
      max-height: 400px; overflow-y: auto;
      margin-top: 0;
      transition: margin-top 0.2s ease;
    }
    .search-suggestions.has-results { margin-top: 18px; }
    .search-suggestion-item {
      display: flex; align-items: center; gap: 14px;
      padding: 11px 10px; border-radius: 14px;
      text-decoration: none; color: inherit;
      transition: background 0.15s ease, transform 0.15s ease;
      opacity: 0; animation: searchItemIn 0.3s ease forwards;
    }
    @keyframes searchItemIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .search-suggestion-item:hover,
    .search-suggestion-item.is-active {
      background: var(--bg-light);
      transform: translateX(2px);
    }
    .search-suggestion-thumb {
      width: 58px; height: 58px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
      background: var(--bg-light); border: 1px solid var(--border);
    }
    .search-suggestion-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .search-suggestion-body { flex: 1; min-width: 0; }
    .search-suggestion-item h5 {
      font-size: 14.5px; font-weight: 700; color: var(--cl333); margin: 0 0 3px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .search-suggestion-item p {
      font-size: 12.5px; color: var(--cl666); margin: 0;
      display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    }
    .search-suggestion-item mark {
      background: rgba(14, 165, 233, 0.16); color: var(--orange-hover);
      border-radius: 3px; padding: 0 1px; font-weight: 700;
    }
    .search-suggestion-tag {
      flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
      color: var(--orange); background: rgba(14, 165, 233, 0.08);
      padding: 5px 10px; border-radius: 50px; white-space: nowrap;
    }
    .search-view-all {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      text-align: center; padding: 14px; margin-top: 6px;
      font-size: 13.5px; font-weight: 700; color: var(--orange);
      text-decoration: none; border-top: 1px solid var(--border);
      transition: color 0.15s ease;
    }
    .search-view-all svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
    .search-view-all:hover { color: var(--orange-hover); }
    .search-view-all:hover svg { transform: translateX(3px); }
    .search-no-results {
      padding: 36px 6px 20px; color: var(--cl666); text-align: center;
    }
    .search-no-results svg { width: 36px; height: 36px; color: var(--cl999); margin-bottom: 12px; }
    .search-no-results p { font-size: 14.5px; font-weight: 700; color: var(--cl333); margin: 0 0 4px; }
    .search-no-results span { font-size: 12.5px; color: var(--cl999); }
    @media (max-width: 640px) {
      .search-overlay { padding: 70px 14px 14px; }
      .search-overlay-inner { padding: 22px; border-radius: 18px; }
      .search-suggestion-tag { display: none; }
    }

    /* Search Results Page */
    .search-page-form {
      max-width: 620px; margin: 0 auto 56px;
      display: flex; align-items: center; gap: 12px;
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: 50px; padding: 6px 8px 6px 24px;
      box-shadow: var(--shadow-sm);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .search-page-form:focus-within { border-color: var(--orange); box-shadow: var(--shadow-md); }
    .search-page-form svg { width: 20px; height: 20px; color: var(--cl999); flex-shrink: 0; }
    .search-page-form:focus-within svg { color: var(--orange); }
    .search-page-form input {
      flex: 1; border: none; outline: none; background: transparent;
      font-size: 15.5px; font-family: var(--font-primary); color: var(--cl333);
    }
    .search-page-form .btn-more { flex-shrink: 0; }
    .search-empty-state {
      text-align: center; padding: 60px 20px; color: var(--cl666);
    }
    .search-empty-state svg { width: 44px; height: 44px; color: var(--cl999); margin-bottom: 16px; }
    .search-empty-state p { font-size: 17px; font-weight: 700; color: var(--cl333); margin: 0 0 6px; }
    .search-empty-state span { font-size: 14px; color: var(--cl666); }
    @media (max-width: 560px) {
      .search-page-form { flex-wrap: wrap; border-radius: 20px; padding: 14px 18px; }
      .search-page-form .btn-more { width: 100%; justify-content: center; }
    }

    .btn-contact {
      padding: 12px 28px; border-radius: 50px; font-size: 15px; font-weight: 600;
      border: 1.5px solid var(--white); color: var(--white);
      background: transparent; transition: var(--transition-smooth); white-space: nowrap;
    }
    .btn-contact:hover {
      border-color: var(--yellow); background: var(--yellow); color: var(--cl333);
      box-shadow: var(--shadow-glow);
    }
    .header.scrolled .btn-contact {
      border-color: var(--orange); background: var(--orange); color: var(--white);
    }
    .header.scrolled .btn-contact:hover {
      background: var(--orange-hover); border-color: var(--orange-hover);
      box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
    }

    .lang-btn {
      display: flex; align-items: center; gap: 6px;
      color: var(--white); font-size: 14px; font-weight: 500;
      transition: var(--transition-smooth); padding: 8px 14px;
      border-radius: 50px; cursor: pointer;
    }
    .lang-btn:hover { background: rgba(255, 255, 255, 0.12); }
    .header.scrolled .lang-btn { color: var(--cl333); }
    .header.scrolled .lang-btn:hover { background: rgba(15, 23, 42, 0.05); }
    .lang-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .lang-code { display: none; }
    .lang-full-name { display: inline; }
    .lang-chevron { font-size: 10px; margin-left: 2px; opacity: 0.7; transition: transform 0.25s ease; }
    .lang-menu.open .lang-chevron { transform: rotate(180deg); }

    .menu-toggle {
      display: none; flex-direction: column; gap: 5px; padding: 8px;
    }
    .menu-toggle span {
      display: block; width: 24px; height: 2px; background: var(--white);
      transition: var(--transition-smooth);
    }
    .header.scrolled .menu-toggle span { background: var(--cl333); }

    /* ── Buttons ── */
    .btn-more {
      display: inline-flex; align-items: center; justify-content: space-between;
      border-radius: 50px; background: var(--white);
      padding: 8px 8px 8px 36px; transition: var(--transition-smooth);
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: var(--shadow-sm);
    }
    .btn-more p { font-size: 16px; font-weight: 600; color: var(--cl333); padding-right: 28px; transition: var(--transition-smooth); }
    .btn-more .arrow {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--cl333); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: var(--transition-bounce);
    }
    .btn-more .arrow svg { width: 18px; height: 18px; transition: var(--transition-bounce); }
    .btn-more:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: rgba(14, 165, 233, 0.2);
    }
    .btn-more:hover p { color: var(--orange); }
    .btn-more:hover .arrow { background: var(--yellow); transform: rotate(-45deg); }
    .btn-more:hover .arrow svg path { stroke: var(--cl333); }

    .btn-more-outline {
      border: 1.5px solid var(--cl333); padding: 6px 6px 6px 30px;
      min-width: 200px; justify-content: space-between;
      background: transparent;
    }
    .btn-more-outline p { padding-right: 12px; }
    .btn-more-outline .arrow { width: 42px; height: 42px; background: var(--cl333); }
    .btn-more-outline:hover {
      background: var(--cl333);
      border-color: var(--cl333);
    }
    .btn-more-outline:hover p { color: var(--white); }
    .btn-more-outline:hover .arrow { background: var(--yellow); }

    .btn-more-white {
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 6px 6px 6px 30px;
    }
    .btn-more-white p { color: var(--white); }
    .btn-more-white .arrow { background: var(--white); }
    .btn-more-white .arrow svg path { stroke: var(--cl333); }
    .btn-more-white:hover {
      border-color: var(--white);
      background: var(--white);
    }
    .btn-more-white:hover p { color: var(--cl333); }
    .btn-more-white:hover .arrow { background: var(--yellow); }

    .btn-more-wide { min-width: 320px; justify-content: space-between; }
    .btn-more-wide p { padding-right: 16px; }

    /* ── Hero ── */
    .hero {
      position: relative; height: 100vh; min-height: 600px; overflow: hidden;
      background: #021526;
    }
    .hero-slide {
      position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
      pointer-events: none;
    }
    .hero-slide.active { opacity: 1; z-index: 1; pointer-events: auto; }
    .hero-media-wrap {
      position: absolute; inset: 0; overflow: hidden;
      transform: scale(1.1);
      transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .hero-slide.active .hero-media-wrap {
      transform: scale(1);
    }
    .hero-video {
      width: 100%; height: 100%; object-fit: cover;
    }
    .hero-video-embed {
      position: absolute; top: 50%; left: 50%;
      width: max(100%, 177.78vh); height: max(100%, 56.25vw);
      border: 0; transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .hero-overlay {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(0deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.4) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.1) 50%, rgba(15, 23, 42, 0.7) 100%);
    }
    .hero-content {
      position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%);
      z-index: 3; width: var(--cont1680); padding: 0 40px;
    }
    .hero-content-inner {
      opacity: 0; transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    }
    .hero-slide.active .hero-content-inner {
      opacity: 1; transform: translateY(0);
    }
    .hero-content h1,
    .hero-content h2 {
      font-size: clamp(38px, 5vw, 84px); font-weight: 800;
      color: var(--white); line-height: 1.15; margin-bottom: 24px;
      letter-spacing: -0.02em;
      text-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    .hero-content .subtitle {
      font-size: clamp(16px, 1.8vw, 22px); color: rgba(255, 255, 255, 0.85); line-height: 1.6;
      margin-bottom: 48px; max-width: 750px;
      text-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }
    .hero-card {
      position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
      z-index: 4; width: var(--cont1680); padding: 0 40px;
      display: flex; justify-content: flex-end;
    }
    .hero-card-inner {
      width: 420px; border-radius: 20px;
      background: rgba(15, 23, 42, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 24px; display: flex; gap: 20px; align-items: center;
      transition: var(--transition-smooth);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }
    .hero-card-inner:hover {
      background: rgba(15, 23, 42, 0.6);
      border-color: rgba(255, 255, 255, 0.24);
      transform: translateY(-5px);
    }
    .hero-card-thumb {
      width: 76px; height: 76px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
      border: 1.5px solid rgba(255, 255, 255, 0.15);
    }
    .hero-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .hero-card-text .label { font-size: 15px; color: var(--yellow); font-weight: 700; margin-bottom: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
    .hero-card-text p { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); line-height: 1.55; }

    .hero-dots {
      position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
      z-index: 5; width: var(--cont1680); padding: 0 40px;
      display: flex; gap: 12px;
    }
    .hero-dot {
      width: 60px; height: 4px; border-radius: 2px;
      background: rgba(255, 255, 255, 0.25); cursor: pointer; transition: var(--transition-smooth);
      position: relative; overflow: hidden; padding: 0; border: none;
    }
    .hero-dot-fill {
      position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
      background: var(--yellow);
      transition: none;
    }
    .hero-dot.active .hero-dot-fill {
      width: 100%;
      transition: width 6000ms linear;
    }
    .hero-dot.active {
      background: rgba(255, 255, 255, 0.15);
      box-shadow: 0 0 10px rgba(255, 159, 10, 0.2);
    }

    .hero-controls {
      position: absolute; bottom: 50px; right: max(40px, calc((100% - 1680px) / 2 + 40px));
      z-index: 6; display: flex; gap: 12px;
    }
    .hero-ctrl-btn {
      width: 48px; height: 48px; border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.25);
      background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--white); display: flex; align-items: center; justify-content: center;
      transition: var(--transition-smooth);
    }
    .hero-ctrl-btn:hover {
      background: var(--yellow); border-color: var(--yellow); color: var(--cl333);
      box-shadow: 0 0 15px rgba(255, 159, 10, 0.3);
      transform: translateY(-2px);
    }
    .hero-ctrl-btn svg { width: 20px; height: 20px; }

    .hero-video-badge {
      position: absolute; bottom: 24px; left: 24px; z-index: 2;
      padding: 6px 12px; border-radius: 20px;
      background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      font-size: 11px; color: rgba(255,255,255,0.85); letter-spacing: 0.05em;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }


    @media (prefers-reduced-motion: reduce) {
      .hero-video { display: none; }
      .hero-media-wrap { background-size: cover; background-position: center; }
    }

    /* ── Sections common ── */
    .section-pad { padding: var(--space140) 0; }
    .section-pad-top { padding-top: var(--space140); }
    .label-tag {
      font-size: 18px; color: var(--orange); line-height: 1.7;
      opacity: 0.7; margin-bottom: 13px; text-align: center;
    }
    .section-title {
      font-size: clamp(28px, 3vw, 44px); font-weight: 500;
      line-height: 1.3; color: var(--cl333); text-align: center;
    }
    .section-desc {
      font-size: 18px; color: var(--cl666); line-height: 1.7;
      text-align: center; max-width: 700px; margin: 0 auto;
    }
    .section-header { margin-bottom: var(--space60); }
    .section-header .section-title { margin-bottom: 30px; }
    .section-header .section-desc { margin-bottom: var(--space60); }
    .section-actions { display: flex; justify-content: center; margin-top: 40px; }

    /* ── Sister Concern Brands Step-Focus Carousel ── */
    .brands-section { background: #f8fafc; padding: 90px 0; overflow: hidden; position: relative; }
    .brands-section .section-header { margin-bottom: 40px; }
    
    .brands-focus-stage {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding: 50px 0;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
    
    .brands-focus-stage:active {
      cursor: grabbing;
    }
    
    .brands-focus-track {
      display: flex;
      align-items: center;
      gap: 36px;
      width: max-content;
      transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: transform;
      padding: 10px 0;
    }
    
    .brand-focus-card {
      flex-shrink: 0;
      width: 220px;
      height: 108px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 28px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
      transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                  opacity 0.8s ease, 
                  border-color 0.4s ease, 
                  box-shadow 0.4s ease, 
                  background 0.4s ease;
      opacity: 0.4;
      transform: scale(0.85);
      position: relative;
      cursor: pointer;
    }
    
    .brand-focus-card img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: grayscale(80%);
      opacity: 0.7;
      pointer-events: none;
      -webkit-user-drag: none;
      user-select: none;
      transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    /* Center Active Focused Card */
    .brand-focus-card.active {
      opacity: 1;
      transform: scale(1.25);
      z-index: 10;
      border-color: #ea580c;
      box-shadow: 0 20px 45px rgba(234, 88, 12, 0.18);
      background: linear-gradient(135deg, #ffffff 0%, #fff8f5 100%);
    }
    
    .brand-focus-card.active img {
      filter: grayscale(0%);
      opacity: 1;
      transform: scale(1.06);
    }

    @media (max-width: 640px) {
      .brand-focus-card { width: 160px; height: 86px; padding: 14px; }
      .brand-focus-card.active { transform: scale(1.15); }
      .brands-focus-track { gap: 20px; }
    }

    /* ── Solutions tabs ── */
    .solutions-tabs { padding: var(--space140) 45px; max-width: 1920px; margin: 0 auto; }
    .tab-nav {
      display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
      margin-bottom: 60px;
    }
    .tab-nav button {
      padding: 14px 28px; border-radius: 40px; font-size: 15px; font-weight: 600;
      color: var(--cl666); background: var(--bg-light); border: 1.5px solid transparent;
      transition: var(--transition-smooth);
    }
    .tab-nav button.active, .tab-nav button:hover {
      color: var(--cl333); background: var(--white);
      border-color: var(--yellow);
      box-shadow: var(--shadow-sm);
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; animation: panelReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    @keyframes panelReveal {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tab-layout {
      display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
      gap: 32px;
    }
    .tab-image {
      width: 28%; border-radius: var(--radiu); overflow: hidden;
      background: var(--bg-light); aspect-ratio: 3/4;
      box-shadow: var(--shadow-md);
      transition: var(--transition-smooth);
    }
    .tab-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
    .tab-image:hover img { transform: scale(1.05); }
    .tab-image.offset { margin-top: 0; }
    .tab-content {
      width: 36%; text-align: center; padding: 40px 20px;
    }
    .tab-content .label-tag { text-align: center; }
    .tab-content .section-title { text-align: center; margin-bottom: 24px; font-size: 40px; font-weight: 800; letter-spacing: -0.01em; }
    .tab-content .section-desc { text-align: center; margin-bottom: 40px; font-size: 16px; color: var(--cl666); line-height: 1.7; }

    /* ── About ── */
    .about-section {
      background: linear-gradient(180deg, #f0f7ff 0%, #f8fafc 40%, var(--white) 100%);
      padding: 120px 0;
    }
    .about-inner {
      display: grid; grid-template-columns: minmax(280px, 42%) 1fr;
      gap: 80px; align-items: center;
      width: min(1320px, calc(100% - 80px)); margin: 0 auto;
    }
    .about-title {
      font-size: clamp(34px, 3.5vw, 48px); font-weight: 800;
      color: var(--orange-hover); line-height: 1.15; margin-bottom: 28px;
      letter-spacing: -0.01em;
    }
    .about-text {
      font-size: 16px; line-height: 1.75; color: var(--cl666);
      margin-bottom: 40px; max-width: 440px;
    }
    .about-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 28px; border: 1.5px solid var(--orange); border-radius: 50px;
      color: var(--orange); font-size: 15px; font-weight: 600; background: transparent;
      transition: var(--transition-smooth);
    }
    .about-btn:hover { background: var(--orange); color: var(--white); box-shadow: var(--shadow-glow); }
    .about-btn svg { width: 16px; height: 16px; transition: var(--transition-smooth); }
    .about-btn:hover svg { transform: translateX(4px); }

    .about-stats-top {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 48px 56px; padding-bottom: 48px; margin-bottom: 48px;
      border-bottom: 1.5px solid rgba(226, 232, 240, 0.8);
    }
    .about-stats-bottom {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 48px 40px;
    }
    .about-stat {
      transition: var(--transition-smooth);
    }
    .about-stat:hover {
      transform: translateY(-4px);
    }
    .about-stat-num {
      font-size: clamp(48px, 4.5vw, 68px); font-weight: 800;
      line-height: 1; margin-bottom: 14px; letter-spacing: -0.03em;
    }
    .about-stat-num.is-blue { color: var(--orange); }
    .about-stat-num.is-navy { color: #1e3a8a; }
    .about-stat-label {
      font-size: 14.5px; line-height: 1.6; color: var(--cl666); max-width: 240px;
    }

    /* ── Innovation (video + floating card) ── */
    .innovation-section {
      position: relative; min-height: 600px;
      display: flex; align-items: center; justify-content: center;
      padding: 120px 40px 180px; overflow: visible;
    }
    .innovation-bg {
      position: absolute; inset: 0; overflow: hidden;
      background: #021526 url('../images/page-22.jpg') center/cover no-repeat;
    }
    .innovation-bg video {
      position: absolute; inset: 0; z-index: 0;
      width: 100%; height: 100%; object-fit: cover;
      transform: scale(1.02);
    }
    .innovation-overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.75) 100%);
    }
    .innovation-inner {
      position: relative; z-index: 2; text-align: center;
      max-width: 820px; color: var(--white);
    }
    .innovation-inner h2 {
      font-size: clamp(34px, 3.8vw, 52px); font-weight: 800;
      line-height: 1.2; margin-bottom: 24px; letter-spacing: -0.01em;
    }
    .innovation-inner p {
      font-size: 16.5px; line-height: 1.8; color: rgba(255,255,255,0.9);
    }
    .innovation-card-wrap {
      position: absolute; bottom: 0; left: 50%;
      transform: translate(-50%, 50%); z-index: 3;
      width: min(1320px, calc(100% - 80px));
    }
    .innovation-card {
      display: grid; grid-template-columns: repeat(4, 1fr);
      background: rgba(255, 255, 255, 0.95); border-radius: var(--radiu);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: var(--shadow-lg);
      padding: 44px 20px;
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .innovation-card-item {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; padding: 0 24px;
      border-right: 1.5px solid rgba(226, 232, 240, 0.8);
      transition: var(--transition-smooth);
    }
    .innovation-card-item:hover {
      transform: translateY(-5px);
    }
    .innovation-card-item:last-child { border-right: none; }
    .innovation-card-icon {
      width: 48px; height: 48px; color: var(--orange);
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition-bounce);
    }
    .innovation-card-item:hover .innovation-card-icon {
      transform: scale(1.15) rotate(5deg);
    }
    .innovation-card-icon svg { width: 38px; height: 38px; }
    .innovation-card-label {
      margin-top: 20px; font-size: 15px; line-height: 1.55;
      color: var(--orange-hover); font-weight: 700; max-width: 200px;
    }
    .innovation-section + #home-ess + .solutions-tabs,
    .innovation-section + #home-ess + .solutions-showcase-section {
      padding-top: calc(var(--space140) + 120px);
    }

    /* ── Products ── */
    .products-carousel-wrap { position: relative; overflow: hidden; padding: 44px 0; }
    .products-track {
      display: flex; gap: 28px;
      transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .product-card {
      position: relative; flex: 0 0 calc(33.333% - 19px); min-width: 260px;
      aspect-ratio: 3 / 4; border-radius: var(--radiu);
      overflow: hidden; background: var(--bg-light); cursor: pointer;
      transform: scale(0.85); opacity: 0.55;
      transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.65s ease, box-shadow 0.65s ease;
      border: 1px solid rgba(226, 232, 240, 0.5);
    }
    .product-card.is-active {
      transform: scale(1); opacity: 1; z-index: 2;
      box-shadow: var(--shadow-lg);
      border-color: rgba(14, 165, 233, 0.15);
    }
    .product-card .product-img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .product-card:hover .product-img { transform: scale(1.06); }

    .product-title-bar {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      padding: 30px 24px;
      background: linear-gradient(0deg, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0) 100%);
      transition: opacity 0.4s ease;
    }
    .product-title-bar h3,
    .product-title-bar h4 {
      color: var(--white); font-size: 19px; font-weight: 600; line-height: 1.4;
      margin: 0;
    }
    .product-card:hover .product-title-bar { opacity: 0; }

    .product-overlay {
      position: absolute; inset: 0; z-index: 3;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 36px 28px;
      background: linear-gradient(0deg, rgba(15,23,42,0.96) 0%, rgba(15,23,42,0.7) 60%, rgba(15,23,42,0.2) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transform: translateY(100%); opacity: 0;
      transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    }
    .product-card:hover .product-overlay { transform: translateY(0); opacity: 1; }
    .product-overlay h3,
    .product-overlay h4 {
      color: var(--white); font-size: 21px; font-weight: 700;
      line-height: 1.35; margin-bottom: 12px;
    }
    .product-overlay p {
      color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.6;
      margin-bottom: 24px;
    }
    .product-learn {
      display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
      padding: 10px 24px; border: 1.5px solid rgba(255,255,255,0.3);
      border-radius: 50px; color: var(--white); font-size: 13.5px; font-weight: 600;
      background: rgba(255,255,255,0.08);
      transition: var(--transition-smooth);
    }
    .product-learn:hover {
      background: var(--yellow); border-color: var(--yellow); color: var(--cl333);
      box-shadow: 0 4px 15px rgba(255, 159, 10, 0.3);
    }
    .product-learn svg {
      width: 14px; height: 14px; transition: var(--transition-bounce);
    }
    .product-learn:hover svg { transform: translateX(4px); }

    .carousel-nav {
      display: flex; justify-content: center; gap: 16px; margin-top: 40px;
    }
    .carousel-btn {
      width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition-smooth);
    }
    .carousel-btn rect { fill: rgba(15, 23, 42, 0.4); stroke: rgba(255, 255, 255, 0.1); }
    .carousel-btn:hover rect { fill: var(--yellow) !important; }
    .carousel-btn:hover path { fill: var(--cl333) !important; }
    .carousel-btn:hover { transform: scale(1.05); }

    /* ── Why CHUXU ── */
    .why-section {
      position: relative; overflow: hidden;
      background: linear-gradient(135deg, #021526 0%, #032b4d 50%, #083354 100%);
      color: var(--white);
    }
    .why-section .label-tag { color: var(--yellow); }
    .why-section .section-title { color: var(--white); }
    .why-section .btn-more-outline {
      border-color: rgba(255,255,255,0.3); background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(8px);
    }
    .why-section .btn-more-outline p { color: var(--white); }
    .why-section .btn-more-outline .arrow {
      background: var(--white);
    }
    .why-section .btn-more-outline .arrow path { fill: var(--cl333); stroke: var(--cl333); }
    .why-section .btn-more-outline:hover {
      background: var(--white);
      border-color: var(--white);
    }
    .why-section .btn-more-outline:hover p { color: var(--cl333); }
    .why-section .btn-more-outline:hover .arrow { background: var(--yellow); }

    .stats-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 40px; margin-top: 80px; text-align: center;
    }
    .stat-num {
      font-size: 68px; font-weight: 800; line-height: 1.1; margin-bottom: 12px;
      color: var(--yellow);
      letter-spacing: -0.02em;
    }
    .stat-num span { font-size: 68px; }
    .stat-label { font-size: 16px; color: rgba(255,255,255,0.8); line-height: 1.6; }

    .why-particles {
      position: absolute; right: 0; top: 50%; transform: translateY(-50%);
      width: 45%; opacity: 0.4; pointer-events: none;
    }

    /* ── Cases ── */
    .cases-section { padding: var(--space140) 0 0; }
    .cases-header {
      display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px;
      align-items: center; margin-bottom: 60px;
    }
    .cases-header .section-title, .cases-header .section-desc { text-align: left; }
    .cases-header .section-desc { margin: 20px 0 30px; font-size: 16.5px; }

    /* Stat Cards Grid */
    .cases-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .cases-stat-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      padding: 28px 24px;
      text-align: center;
      transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      position: relative;
      overflow: hidden;
    }
    .cases-stat-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(234,88,12,0.04) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .cases-stat-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(234, 88, 12, 0.10);
      border-color: rgba(234, 88, 12, 0.3);
    }
    .cases-stat-card:hover::before { opacity: 1; }
    .cases-stat-card--highlight {
      background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
      border-color: transparent;
    }
    .cases-stat-card--highlight .cases-stat-icon,
    .cases-stat-card--highlight .cases-stat-num,
    .cases-stat-card--highlight .cases-stat-label { color: #ffffff !important; }
    .cases-stat-card--highlight:hover {
      box-shadow: 0 20px 40px rgba(234, 88, 12, 0.35);
    }
    .cases-stat-icon {
      font-size: 22px;
      color: #ea580c;
      margin-bottom: 12px;
      display: block;
    }
    .cases-stat-num {
      font-family: 'Outfit', sans-serif;
      font-size: 38px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
      margin-bottom: 8px;
      letter-spacing: -1px;
    }
    .cases-stat-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #94a3b8;
    }

    .cases-banner {
      position: relative; overflow: hidden;
      min-height: 600px; display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
      padding: 100px 40px 180px;
    }
    .cases-banner-bg { position: absolute; inset: 0; z-index: 0; }
    .cases-banner-bg img {
      width: 100%; height: 100%; object-fit: cover; transform: scale(1.05);
      transition: transform 10s ease;
    }
    .cases-banner:hover .cases-banner-bg img { transform: scale(1.12); }
    .cases-banner-bg::after {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(120% 90% at 50% 0%, rgba(14,165,233,0.1) 0%, transparent 60%),
        linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.8) 48%, rgba(15,23,42,0.95) 100%);
    }
    .cases-banner-content { position: relative; z-index: 2; max-width: 880px; color: var(--white); }
    .cases-banner-eyebrow {
      color: var(--yellow); font-size: 13px; letter-spacing: 0.2em;
      text-transform: uppercase; font-weight: 700; margin-bottom: 20px;
    }
    .cases-banner-content h2 {
      font-size: clamp(34px, 4.2vw, 56px); font-weight: 800;
      line-height: 1.15; margin-bottom: 24px; letter-spacing: -0.02em;
    }
    .cases-banner-sub {
      font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.85);
      margin-bottom: 40px; max-width: 680px; margin-left: auto; margin-right: auto;
    }
    .country-chips {
      display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 48px;
    }
    .country-chips li {
      padding: 10px 22px; border: 1.5px solid rgba(255,255,255,0.18);
      border-radius: 50px; font-size: 14px; font-weight: 600; color: var(--white);
      background: rgba(255,255,255,0.05); backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: var(--transition-bounce);
    }
    .country-chips li:hover {
      background: var(--yellow); border-color: var(--yellow);
      color: var(--cl333); transform: translateY(-4px) scale(1.05);
      box-shadow: 0 4px 15px rgba(255, 159, 10, 0.3);
    }
    .cases-banner .btn-more-white { display: inline-flex; }

    /* ── News ── */
    .news-section {
      position: relative; margin-top: -90px; z-index: 3;
      background: var(--white); border-radius: var(--radiu) var(--radiu) 0 0;
      padding-top: var(--space140);
      box-shadow: 0 -20px 40px rgba(15, 23, 42, 0.03);
    }
    .news-track {
      display: flex; gap: 28px;
      transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .news-card {
      position: relative; flex: 0 0 calc(33.333% - 19px); min-width: 280px;
      border-radius: var(--radiu); overflow: hidden;
      background: var(--white); border: 1.5px solid rgba(226, 232, 240, 0.8); cursor: pointer;
      transform: scale(0.85); opacity: 0.55;
      transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.65s ease, box-shadow 0.65s ease, border-color 0.65s ease;
    }
    .news-card.is-active {
      transform: scale(1); opacity: 1; z-index: 2;
      border-color: transparent; box-shadow: var(--shadow-lg);
    }
    .news-card .img-wrap {
      position: relative; aspect-ratio: 4 / 3; overflow: hidden;
      background: var(--bg-light);
    }
    .news-card .img-wrap img {
      width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .news-card .img-wrap.contain {
      background: linear-gradient(160deg, #f0f7ff 0%, #f8fafc 100%);
      display: flex; align-items: center; justify-content: center; padding: 30px;
    }
    .news-card .img-wrap.contain img {
      object-fit: contain; filter: drop-shadow(0 10px 24px rgba(15,23,42,0.08));
    }
    .news-card.is-active:hover .img-wrap img { transform: scale(1.05); }
    .news-card .tag-badge {
      position: absolute; top: 16px; left: 16px; z-index: 2;
      padding: 6px 16px; border-radius: 50px;
      background: var(--yellow); color: var(--cl333);
      font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(255, 159, 10, 0.25);
    }
    .news-card-body { padding: 28px 24px 32px; }
    .news-card-body .date {
      display: block; font-size: 11px; color: var(--cl666);
      margin-bottom: 12px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .news-card h3,
    .news-card h5 {
      font-size: 17.5px; line-height: 1.55; font-weight: 600;
      color: var(--cl333); transition: color 0.3s;
      margin: 0;
    }
       /* ── Contact ── */
    .contact-section {
      position: relative; overflow: hidden;
      background:
        radial-gradient(120% 80% at 88% 0%, rgba(14,165,233,0.1) 0%, transparent 60%),
        linear-gradient(135deg, #021526 0%, #082d4d 55%, #021526 100%);
      padding: var(--space140) 0;
    }
    .contact-inner {
      width: min(1320px, calc(100% - 80px)); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
    }
    .contact-info { color: var(--white); }
    .contact-info .label-tag { text-align: left; color: var(--yellow); opacity: 1; font-weight: 700; }
    .contact-info h2 {
      font-size: clamp(34px, 3.5vw, 52px); font-weight: 800;
      line-height: 1.15; margin: 16px 0 20px; letter-spacing: -0.01em;
    }
    .contact-intro {
      font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.8);
      margin-bottom: 44px; max-width: 480px;
    }
    .contact-list { display: flex; flex-direction: column; gap: 24px; }
    .contact-item { display: flex; gap: 20px; align-items: flex-start; transition: var(--transition-smooth); }
    .contact-item:hover { transform: translateX(6px); }
    .contact-item .ic {
      flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px;
      background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center; color: var(--yellow);
      transition: var(--transition-smooth);
    }
    .contact-item:hover .ic { background: var(--yellow); color: var(--cl333); border-color: var(--yellow); box-shadow: 0 0 15px rgba(255, 159, 10, 0.3); }
    .contact-item .ic svg { width: 22px; height: 22px; }
    .contact-item .ct-label {
      font-size: 11px; color: rgba(255,255,255,0.5);
      letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; font-weight: 700;
    }
    .contact-item .ct-value { font-size: 16px; color: var(--white); line-height: 1.6; }
    .contact-item .ct-value a { color: var(--white); transition: var(--transition-smooth); }
    .contact-item .ct-value a:hover { color: var(--yellow); }

    .contact-form-card {
      background: var(--white); border-radius: var(--radiu); padding: 48px;
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .contact-form-card h3 { font-size: 24px; font-weight: 800; margin-bottom: 6px; color: var(--cl333); letter-spacing: -0.01em; }
    .contact-form-card .form-sub { font-size: 14.5px; color: var(--cl666); margin-bottom: 32px; }
    .contact-form { display: flex; flex-direction: column; gap: 20px; }
    .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .contact-form .field label {
      display: block; font-size: 13.5px; font-weight: 600;
      color: var(--cl333); margin-bottom: 8px;
    }
    .contact-form input, .contact-form textarea {
      width: 100%; border: 1.5px solid #e2e8f0; border-radius: 14px;
      padding: 14px 18px; font-size: 15px; font-family: inherit; outline: none;
      background: #f8fafc; transition: var(--transition-smooth);
      color: var(--cl333);
    }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--cl999); }
    .contact-form input:focus, .contact-form textarea:focus {
      border-color: var(--orange); background: var(--white);
      box-shadow: 0 0 0 4px rgba(14,165,233,0.12);
    }
    .contact-form textarea { resize: vertical; min-height: 120px; }
    .contact-submit {
      margin-top: 10px; width: 100%; border-radius: 14px; background: var(--orange);
      color: var(--white); padding: 16px; font-size: 16px; font-weight: 700;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: var(--transition-smooth);
      box-shadow: 0 4px 14px rgba(14, 165, 233, 0.2);
    }
    .contact-submit:hover {
      background: var(--orange-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3);
    }
    .contact-submit svg { width: 18px; height: 18px; transition: var(--transition-bounce); }
    .contact-submit:hover svg { transform: translateX(4px); }

    /* ── Footer ── */
    .footer { background: #0b0f19; padding: 100px 0 40px; color: #94a3b8; border-top: 1px solid #1e293b; overflow: hidden; }
    .footer > .footer-container {
      width: 100% !important;
      max-width: none !important;
      margin-inline: auto !important;
      padding-inline: 40px;
    }
    .footer-grid {
      display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr);
      gap: 30px; margin-bottom: 70px;
    }
    .footer-col { min-width: 0; }
    .footer-col h3,
    .footer-col h4 {
      font-size: 15px; font-weight: 700; margin-bottom: 24px; color: var(--white);
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .footer-col ul li { margin-bottom: 14px; }
    .footer-col a { font-size: 14.5px; color: #94a3b8; transition: var(--transition-smooth); word-break: break-word; overflow-wrap: anywhere; }
    .footer-col a:hover { color: var(--yellow); }
    .footer-emails-list a { word-break: break-all; overflow-wrap: anywhere; }
    .footer-apps { display: flex; flex-direction: column; gap: 14px; }
    .footer-apps a {
      display: block; padding: 12px 18px; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08); color: var(--white);
      border-radius: 12px; font-size: 14px; font-weight: 600; text-align: center;
      transition: var(--transition-smooth);
    }
    .footer-apps a:hover {
      background: rgba(255,255,255,0.1); border-color: var(--yellow); color: var(--yellow);
    }
    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center;
      padding-top: 40px; border-top: 1px solid #1e293b;
      font-size: 14px; color: #64748b; flex-wrap: wrap; gap: 16px;
    }
    .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
    .footer-links a { transition: var(--transition-smooth); }
    .footer-bottom .footer-credit-link { color: var(--orange); font-weight: 600; }
    .footer-links a:hover,
    .footer-bottom > p a:hover { color: var(--yellow); }

    /* ── Cookie banner ── */
    .cookie-banner {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      z-index: 9999; width: min(680px, calc(100% - 40px));
      background: rgba(255, 255, 255, 0.85); border-radius: var(--radiu);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(226, 232, 240, 0.8);
      box-shadow: var(--shadow-lg);
      padding: 32px; display: flex; flex-direction: column; gap: 20px;
      animation: cookieSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes cookieSlideUp {
      from { opacity: 0; transform: translate(-50%, 30px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }
    .cookie-banner.hidden { display: none; }
    .cookie-banner h3,
    .cookie-banner h4 { font-size: 19px; font-weight: 800; color: var(--cl333); letter-spacing: -0.01em; margin: 0; }
    .cookie-banner p { font-size: 14px; color: var(--cl666); line-height: 1.65; }
    .cookie-actions { display: flex; gap: 14px; }
    .cookie-actions button {
      padding: 12px 28px; border-radius: 50px; font-size: 14px; font-weight: 700;
      transition: var(--transition-smooth);
    }
    .cookie-accept { background: var(--orange); color: var(--white); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15); }
    .cookie-accept:hover { background: var(--orange-hover); transform: translateY(-1px); box-shadow: 0 6px 15px rgba(14, 165, 233, 0.25); }
    .cookie-reject { background: var(--bg-light); color: var(--cl333); border: 1.5px solid rgba(226, 232, 240, 0.8); }
    .cookie-reject:hover { background: #e2e8f0; }

    /* ── Mobile nav ── */
    .mobile-nav {
      position: fixed; inset: 0; z-index: 2000; background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      overflow-y: auto; padding: 32px 24px;
    }
    .mobile-nav.open { transform: translateX(0); }
    .mobile-nav-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 40px;
    }
    .mobile-nav-close { font-size: 32px; color: var(--cl333); transition: var(--transition-smooth); }
    .mobile-nav-close:hover { transform: rotate(90deg); color: var(--orange); }
    .mobile-nav a {
      display: block; padding: 18px 0; font-size: 18px; font-weight: 600;
      border-bottom: 1.5px solid rgba(226, 232, 240, 0.6); color: var(--cl333);
      transition: var(--transition-smooth);
    }
    .mobile-nav a:hover { padding-left: 10px; color: var(--orange); }

    /* ── Scroll reveal animations ── */
    .reveal {
      opacity: 0; transform: translateY(32px);
      transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1), transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: opacity, transform;
    }
    .reveal.reveal-left { transform: translateX(-40px); }
    .reveal.reveal-right { transform: translateX(40px); }
    .reveal.reveal-zoom { transform: scale(0.95); }
    .reveal.in-view { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* ── Responsive ── */
    @media (max-width: 1200px) {
      .nav, .header-top, .lang-btn { display: none; }
      .about-inner { grid-template-columns: 1fr; gap: 56px; }
      .about-text { max-width: none; }
      .about-stats-top { grid-template-columns: 1fr 1fr; gap: 32px; }
      .about-stats-bottom { grid-template-columns: 1fr 1fr; }
      .innovation-card { grid-template-columns: repeat(2, 1fr); }
      .innovation-card-item:nth-child(2) { border-right: none; }
      .innovation-card-item:nth-child(1),
      .innovation-card-item:nth-child(2) {
        border-bottom: 1px solid rgba(226, 232, 240, 0.8); padding-bottom: 32px;
      }
      .innovation-card-item:nth-child(odd) { border-right: 1px solid rgba(226, 232, 240, 0.8); }
      .menu-toggle { display: flex; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .tab-image { width: 45%; }
      .tab-content { width: 100%; order: -1; padding: 0; }
      .cases-header { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
      .contact-inner { grid-template-columns: 1fr; gap: 56px; }
    }

    @media (max-width: 768px) {
      :root { --space140: 80px; --headh: 70px; }
      .header-main { padding: 0 20px; height: 70px; }
      .hero { min-height: 500px; }
      .hero-content h1 { font-size: 38px; }
      .hero-card { display: none; }
      .hero-dots { bottom: 30px; }
      .hero-controls { bottom: 30px; right: 20px; }
      .about-stats-top, .about-stats-bottom { grid-template-columns: 1fr; gap: 36px; }
      .about-stat-num { font-size: 48px; }
      .innovation-section { min-height: 480px; padding: 80px 20px 120px; }
      .innovation-card-wrap { width: calc(100% - 40px); }
      .innovation-card {
        grid-template-columns: 1fr 1fr; gap: 36px 0; padding: 36px 16px;
      }
      .innovation-card-item {
        padding: 0 16px; border-right: none;
        border-bottom: 1px solid rgba(226, 232, 240, 0.8); padding-bottom: 28px;
      }
      .innovation-card-item:nth-child(3),
      .innovation-card-item:nth-child(4) { border-bottom: none; padding-bottom: 0; }
      .innovation-card-item:nth-child(odd) { border-right: 1px solid rgba(226, 232, 240, 0.8); }
      .innovation-section + #home-ess + .solutions-tabs {
        padding-top: calc(var(--space140) + 140px);
      }
      .tab-image { width: 100%; }
      .product-card { flex: 0 0 calc(80% - 18px); }
      .news-card { flex: 0 0 calc(85% - 18px); }
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
      .stat-num, .stat-num span { font-size: 44px; }
      .cases-banner { min-height: 480px; padding: 70px 24px 150px; }
      .contact-form-card { padding: 32px 24px; }
      .contact-form .form-row { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
      .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
      .footer > .footer-container {
        width: 100% !important;
        padding-inline: 16px;
      }
      .btn-more-wide { min-width: auto; width: 100%; }
      .container, .container-wide { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
    }

    /* ════════════════ SUBPAGE STYLES ════════════════ */
    .nav a.active { color: var(--orange-hover); }
    .header.scrolled .nav a.active { color: var(--orange-hover); }

    /* Page hero banner */
    .page-hero {
      position: relative; overflow: hidden;
      min-height: 460px; display: flex; align-items: flex-end;
      padding: calc(var(--headh) + 100px) 0 80px;
    }
    .page-hero-bg { position: absolute; inset: 0; z-index: 0; }
    .page-hero-bg img, .page-hero-bg video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
    .page-hero-bg::after {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(120% 90% at 80% 0%, rgba(14,165,233,0.1) 0%, transparent 60%),
        linear-gradient(180deg, rgba(15,23,42,0.8) 0%, rgba(15,23,42,0.6) 45%, rgba(15,23,42,0.9) 100%);
    }
    .page-hero-inner { position: relative; z-index: 2; width: var(--cont1600); margin: 0 auto; color: var(--white); }
    .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 18px; }
    .breadcrumb a { color: rgba(255,255,255,0.7); transition: var(--transition-smooth); }
    .breadcrumb a:hover { color: var(--yellow); }
    .breadcrumb span { color: var(--yellow); }
    .page-hero h1 { font-size: clamp(34px, 4.5vw, 56px); font-weight: 800; line-height: 1.15; max-width: 900px; letter-spacing: -0.01em; }
    .page-hero p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.85); max-width: 620px; margin-top: 18px; }

    /* Generic section intro */
    .sec-eyebrow { color: var(--orange); font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
    .sec-title { font-size: clamp(30px, 3vw, 44px); font-weight: 800; line-height: 1.2; color: var(--cl333); letter-spacing: -0.01em; }
    .sec-lead { font-size: 17px; line-height: 1.75; color: var(--cl666); }
    .narrow { max-width: 760px; }
    .center { text-align: center; margin-left: auto; margin-right: auto; }

    /* Two-column split */
    .split {
      display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
    }
    .split.reverse .split-media { order: 2; }
    .split + .split { margin-top: 90px; }
    .split-media { border-radius: var(--radiu); overflow: hidden; background: var(--bg-light); aspect-ratio: 4/3; box-shadow: var(--shadow-md); transition: var(--transition-smooth); }
    .split-media:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .split-media img { width: 100%; height: 100%; object-fit: cover; }
    .split-body h2,
    .split-body h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.25; margin: 14px 0 18px; color: var(--cl333); letter-spacing: -0.01em; }
    .split-body p { font-size: 16px; line-height: 1.75; color: var(--cl666); margin-bottom: 18px; }

    /* Feature grid */
    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .feature-card {
      background: var(--white); border: 1.5px solid rgba(226, 232, 240, 0.8); border-radius: var(--radiu);
      padding: 40px 32px; transition: var(--transition-smooth);
    }
    .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
    .feature-icon {
      width: 56px; height: 56px; border-radius: 16px; margin-bottom: 24px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(14, 165, 233, 0.08); color: var(--orange);
      transition: var(--transition-bounce);
    }
    .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); background: var(--orange); color: var(--white); }
    .feature-icon svg { width: 24px; height: 24px; }
    .feature-card h3,
    .feature-card h4 { font-size: 19px; font-weight: 700; margin-bottom: 10px; color: var(--cl333); letter-spacing: -0.01em; margin-top: 0; }
    .feature-card p { font-size: 14.5px; line-height: 1.65; color: var(--cl666); }

    /* Value / stats strip */
    .value-strip {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px;
      background: linear-gradient(135deg, #021526 0%, #082d4d 55%, #021526 100%);
      border-radius: var(--radiu); padding: 54px 40px; color: var(--white);
    }
    .value-item { text-align: center; }
    .value-num { font-size: clamp(36px, 3.4vw, 52px); font-weight: 800; color: var(--yellow); line-height: 1; letter-spacing: -0.02em; }
    .value-label { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.5; }

    /* Spec table */
    .spec-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radiu); overflow: hidden; box-shadow: var(--shadow-md); border: 1.5px solid rgba(226, 232, 240, 0.8); }
    .spec-table th, .spec-table td { text-align: left; padding: 18px 24px; font-size: 15px; border-bottom: 1.5px solid rgba(226, 232, 240, 0.8); }
    .spec-table th { background: var(--bg-light); color: var(--cl333); font-weight: 700; width: 38%; }
    .spec-table td { color: var(--cl666); }
    .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

    /* Pill list */
    .pill-list { display: flex; flex-wrap: wrap; gap: 12px; }
    .pill-list li {
      padding: 10px 22px; border-radius: 50px; border: 1.5px solid var(--border);
      font-size: 14.5px; font-weight: 600; color: var(--cl333); background: var(--white); transition: var(--transition-bounce);
    }
    .pill-list li:hover { background: var(--yellow); border-color: var(--yellow); color: var(--cl333); transform: translateY(-3px); }

    /* CTA band */
    .cta-band {
      position: relative; overflow: hidden; border-radius: var(--radiu);
      background: linear-gradient(135deg, #021526 0%, #082d4d 55%, #021526 100%);
      padding: 80px 60px; text-align: center; color: var(--white);
    }
    .cta-band h2 { font-size: clamp(30px, 3.2vw, 48px); font-weight: 800; margin-bottom: 16px; letter-spacing: -0.01em; }
    .cta-band p { font-size: 16px; color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto 36px; line-height: 1.7; }
    .cta-band .btn-more { display: inline-flex; }

    /* Static grids (reset carousel card transforms) */
    .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .product-grid .product-card {
      flex: none; min-width: 0; transform: none; opacity: 1;
      box-shadow: var(--shadow-sm);
      border: 1.5px solid rgba(226, 232, 240, 0.8);
    }
    .product-grid .product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
    .cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .cert-grid .news-card {
      flex: none; min-width: 0; transform: none; opacity: 1;
      box-shadow: var(--shadow-sm);
      border: 1.5px solid rgba(226, 232, 240, 0.8);
    }
    .cert-grid .news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
    .cert-grid .news-card:hover .img-wrap img { transform: scale(1.04); }
    .cert-grid .news-card:hover h5 { color: var(--orange); }

    @media (max-width: 992px) {
      .feature-grid, .feature-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
      .value-strip { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
      .split { grid-template-columns: 1fr; gap: 36px; }
      .split.reverse .split-media { order: 0; }
      .split + .split { margin-top: 56px; }
      .product-grid, .cert-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .feature-grid, .feature-grid.cols-4 { grid-template-columns: 1fr; }
      .value-strip { grid-template-columns: 1fr 1fr; }
      .cta-band { padding: 50px 26px; }
      .page-hero { min-height: 380px; }
      .product-grid, .cert-grid { grid-template-columns: 1fr; }
    }

    /* ════════════════ PRODUCT DETAIL PAGE ════════════════ */
    /* 1. Full-width video hero */
    .pd-video { position: relative; width: 100%; height: 80vh; min-height: 540px; overflow: hidden; background: #021526; }
    .pd-video video { width: 100%; height: 100%; object-fit: cover; }
    .pd-video::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(15,23,42,0.5) 0%, rgba(15,23,42,0.1) 32%, rgba(15,23,42,0.7) 100%);
    }
    .pd-video-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
    .pd-video-caption .container { padding-bottom: 60px; color: var(--white); }
    .pd-video-caption .breadcrumb { color: rgba(255,255,255,0.75); }
    .pd-video-caption h1 { font-size: clamp(34px, 4.5vw, 60px); font-weight: 800; line-height: 1.15; max-width: 880px; letter-spacing: -0.02em; }
    .pd-video-caption p { font-size: 17px; color: rgba(255,255,255,0.85); max-width: 600px; margin-top: 18px; }

    /* 2. Intro (PV-Module style) */
    .pd-intro { background: linear-gradient(180deg, #f0f7ff 0%, #f8fafc 38%, #ffffff 100%); padding: var(--space140) 0; }
    .pd-intro-grid { display: grid; grid-template-columns: minmax(280px, 42%) 1fr; gap: 64px; align-items: center; }
    .pd-intro h2 { font-size: clamp(32px, 3vw, 44px); font-weight: 800; color: var(--orange-hover); line-height: 1.2; margin-bottom: 24px; letter-spacing: -0.01em; }
    .pd-intro p { font-size: 16px; line-height: 1.8; color: var(--cl666); }
    .pd-stats-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
    .pd-stat-card {
      background: var(--white); border: 1.5px solid rgba(226, 232, 240, 0.8); border-radius: var(--radiu);
      padding: 44px 32px; text-align: center; box-shadow: var(--shadow-sm);
      transition: var(--transition-smooth);
    }
    .pd-stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
    .pd-stat-ic { width: 48px; height: 48px; margin: 0 auto 20px; color: var(--orange); transition: var(--transition-bounce); }
    .pd-stat-card:hover .pd-stat-ic { transform: scale(1.1) rotate(5deg); }
    .pd-stat-ic svg { width: 100%; height: 100%; }
    .pd-stat-num { font-size: clamp(30px, 3vw, 42px); font-weight: 800; color: var(--cl333); margin-bottom: 14px; line-height: 1; letter-spacing: -0.02em; }
    .pd-stat-num span { color: var(--orange); }
    .pd-stat-card p { font-size: 14px; line-height: 1.65; color: var(--cl666); }

    /* 4. Core advantages (dark + floating cards) */
    .pd-adv {
      position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center;
      text-align: center; padding: 120px 40px 160px; overflow: visible;
    }
    .pd-adv-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
    .pd-adv-bg img { width: 100%; height: 100%; object-fit: cover; }
    .pd-adv-bg::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.8) 50%, rgba(15,23,42,0.95) 100%);
    }
    .pd-adv-inner { position: relative; z-index: 2; color: var(--white); max-width: 820px; }
    .pd-adv-inner h2 { font-size: clamp(26px, 2.8vw, 42px); font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; }
    .pd-adv-cards-wrap { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 3; width: min(1320px, calc(100% - 80px)); }
    .pd-adv-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .pd-adv-card { background: var(--white); border-radius: var(--radiu); box-shadow: var(--shadow-lg); padding: 40px 28px; text-align: center; border: 1.5px solid rgba(226, 232, 240, 0.8); transition: var(--transition-smooth); }
    .pd-adv-card:hover { transform: translateY(-5px); }
    .pd-adv-card .num { font-size: 34px; font-weight: 800; color: var(--orange); margin-bottom: 8px; letter-spacing: -0.01em; }
    .pd-adv-card h4 { font-size: 18px; font-weight: 700; color: var(--cl333); margin-bottom: 12px; letter-spacing: -0.01em; }
    .pd-adv-card p { font-size: 13.5px; line-height: 1.6; color: var(--cl666); }
    .pd-after-adv { padding-top: calc(var(--space140) + 120px) !important; }

    /* 6. Project reference cards */
    .proj-card {
      position: relative; flex: 0 0 calc(50% - 14px); min-width: 300px; aspect-ratio: 16/10;
      border-radius: var(--radiu); overflow: hidden; cursor: pointer;
      transform: scale(0.9); opacity: 0.55;
      transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.65s, box-shadow 0.65s;
    }
    .proj-card.is-active { transform: scale(1); opacity: 1; z-index: 2; box-shadow: var(--shadow-lg); }
    .proj-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 10s ease; }
    .proj-card:hover img { transform: scale(1.05); }
    .proj-card .proj-overlay {
      position: absolute; inset: 0; display: flex; align-items: flex-end;
      background: linear-gradient(0deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.3) 55%, transparent 100%);
    }
    .proj-specs { display: flex; gap: 30px; padding: 28px 30px; color: var(--white); flex-wrap: wrap; }
    .proj-specs .ps { display: flex; flex-direction: column; gap: 4px; }
    .proj-specs .ps .v { font-size: 18px; font-weight: 700; color: var(--yellow); }
    .proj-specs .ps .l { font-size: 12px; color: rgba(255,255,255,0.78); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }

    @media (max-width: 992px) {
      .pd-intro-grid { grid-template-columns: 1fr; gap: 40px; }
      .pd-adv-cards { grid-template-columns: 1fr 1fr; gap: 18px; }
      .pd-adv-cards-wrap { width: calc(100% - 40px); }
      .pd-after-adv { padding-top: calc(var(--space140) + 240px) !important; }
    }
    @media (max-width: 640px) {
      .pd-video { height: 60vh; min-height: 420px; }
      .pd-stats-2 { grid-template-columns: 1fr; }
      .pd-adv-cards { grid-template-columns: 1fr; }
      .pd-after-adv { padding-top: calc(var(--space140) + 480px) !important; }
      .proj-card { flex: 0 0 calc(85% - 14px); }
    }

    /* ── Scroll Reveal Animations ── */
    .reveal {
      opacity: 0;
      transform: translateY(35px);
      transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1), transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: transform, opacity;
    }

    .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-left {
      transform: translateX(-40px);
    }

    .reveal-left.in-view {
      transform: translateX(0);
    }

    .reveal-right {
      transform: translateX(40px);
    }

    .reveal-right.in-view {
      transform: translateX(0);
    }

    .reveal-zoom {
      transform: scale(0.94);
    }

    .reveal-zoom.in-view {
      transform: scale(1);
    }

    /* ── Solax Power Style Mega Menu ── */
    .nav-item-has-mega {
      position: static; /* Allows mega menu to span full width of the header container */
    }

    .nav-link-mega {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .nav-arrow {
      font-size: 10px;
      margin-left: 4px;
      transition: var(--transition-smooth);
    }

    .nav-item-has-mega:hover .nav-arrow {
      transform: rotate(180deg);
      color: var(--orange);
    }

    .mega-menu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background: var(--white);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(15px);
      transition: var(--transition-smooth);
      z-index: 999;
      padding: 40px 0;
    }

    .nav-item-has-mega:hover .mega-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .mega-menu-inner {
      width: var(--cont1600);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 320px 1fr 340px;
      gap: 50px;
    }

    .mega-column h4 {
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--cl999);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 24px;
      border-bottom: 1.5px solid var(--border);
      padding-bottom: 10px;
    }

    /* Category list styling */
    .category-list ul {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .category-list li a {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 16px;
      font-weight: 600;
      color: var(--cl333);
      padding: 10px 14px;
      border-radius: 12px;
      transition: var(--transition-smooth);
    }

    .category-list li a i {
      font-size: 18px;
      color: var(--orange);
      transition: var(--transition-smooth);
      width: 24px;
      text-align: center;
    }

    .category-list li a:hover {
      background: var(--bg-light);
      color: var(--orange);
      transform: translateX(4px);
    }

    /* Featured Products layout */
    .featured-products {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .featured-product-card {
      display: flex;
      gap: 18px;
      padding: 16px;
      background: var(--bg-light);
      border: 1px solid var(--border);
      border-radius: 16px;
      transition: var(--transition-smooth);
      cursor: pointer;
    }

    .featured-product-card:hover {
      border-color: var(--orange);
      box-shadow: var(--shadow-sm);
      transform: translateY(-2px);
    }

    .featured-product-card img {
      width: 70px;
      height: 70px;
      object-fit: cover;
      border-radius: 12px;
    }

    .featured-product-card h5 {
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--cl333);
      margin-bottom: 6px;
    }

    .featured-product-card p {
      font-size: 13px;
      color: var(--cl666);
      line-height: 1.4;
    }

    .icon-large-container {
      width: 70px;
      height: 70px;
      background: rgba(14, 165, 233, 0.08);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .icon-large {
      font-size: 32px;
      color: var(--orange);
    }

    /* Promo Banner styling */
    .promo-card {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(2, 132, 199, 0.03) 100%);
      border: 1.5px solid rgba(14, 165, 233, 0.15);
      border-radius: 20px;
      padding: 30px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .promo-card.bg-dark {
      background: var(--cl333);
      border: none;
      color: var(--white);
    }

    .promo-card.bg-dark h5 {
      color: var(--white);
    }

    .promo-card.bg-dark p {
      color: var(--cl999);
    }

    .promo-card .badge {
      align-self: flex-start;
      margin-bottom: 16px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 4px 10px;
      border-radius: 30px;
    }

    .badge-accent {
      background: var(--yellow);
      color: var(--white);
    }

    .promo-card h5 {
      font-family: 'Outfit', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--cl333);
      margin-bottom: 10px;
    }

    .promo-card p {
      font-size: 14px;
      color: var(--cl666);
      line-height: 1.5;
      margin-bottom: 20px;
    }

    .btn-promo {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: var(--orange);
      transition: var(--transition-smooth);
    }

    .btn-promo i {
      transition: var(--transition-smooth);
    }

    .btn-promo:hover {
      color: var(--orange-hover);
    }

    .btn-promo:hover i {
      transform: translateX(4px);
    }

    .promo-card.bg-dark .btn-promo {
      color: var(--yellow);
    }
    .promo-card.bg-dark .btn-promo:hover {
      color: var(--yellow-hover);
    }

    /* ── Slide Progress Bar ── */
    .hero-slide-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 4px;
      background: var(--orange);
      width: 0%;
      z-index: 10;
      transition: width 0.1s linear;
    }

    /* Active header mega item link styles when header is scrolled */
    .header.scrolled .nav-item-has-mega:hover > a {
      color: var(--orange) !important;
    }
    
    .header:not(.scrolled) .nav-item-has-mega:hover > a {
      color: var(--yellow) !important;
    }

    /* Blur background effect when mega menu is open */
    .body-mega-active::after {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(15, 23, 42, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 900;
      pointer-events: none;
      animation: fadeInBlur 0.3s ease forwards;
    }

    @keyframes fadeInBlur {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* ── Language Dropdown Links ── */
    .lang-dropdown a {
      display: block;
      width: 100%;
      padding: 10px 18px;
      text-align: left;
      font-size: 13.5px;
      font-weight: 550;
      color: var(--cl333);
      transition: var(--transition-smooth);
      border-radius: 8px;
    }
    .lang-dropdown a:hover {
      background: var(--bg-light);
      color: var(--orange);
    }
    .lang-dropdown a.active {
      color: var(--orange);
      background: rgba(14, 165, 233, 0.06);
    }

    /* ── Cases Section Responsive ── */
    @media (max-width: 1024px) {
      .cases-header {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      .cases-stats-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 480px) {
      .cases-stats-grid {
        grid-template-columns: 1fr;
      }
    }

/* =============================================
   RTL (Right-to-Left) Support — Arabic
============================================= */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .header-left { flex-direction: row-reverse; }
[dir="rtl"] .nav { direction: rtl; }
[dir="rtl"] .header-right { flex-direction: row-reverse; }
[dir="rtl"] .header-top ul { direction: rtl; }
[dir="rtl"] .breadcrumb { direction: rtl; text-align: right; }
[dir="rtl"] .split { direction: rtl; }
[dir="rtl"] .split.reverse { direction: rtl; }
[dir="rtl"] .footer-grid { direction: rtl; text-align: right; }
[dir="rtl"] .footer-bottom { direction: rtl; }
[dir="rtl"] .contact-inner { direction: rtl; }
[dir="rtl"] .contact-list { text-align: right; }
[dir="rtl"] .contact-item { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .contact-item .ic { margin-left: 16px; margin-right: 0; }
[dir="rtl"] .contact-form-card { text-align: right; }
[dir="rtl"] .contact-form label { text-align: right; }
[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form textarea { text-align: right; direction: rtl; }
[dir="rtl"] .about-inner { direction: rtl; }
[dir="rtl"] .section-header { text-align: center; }
[dir="rtl"] .hero-content { text-align: right; }
[dir="rtl"] .hero-card-text { text-align: right; }
[dir="rtl"] .btn-more .arrow { transform: scaleX(-1); }
[dir="rtl"] .innovation-inner { text-align: right; }
[dir="rtl"] .cases-header > div[data-reveal="left"] { text-align: right; }
[dir="rtl"] .cases-banner-content { text-align: right; }
[dir="rtl"] .feature-card { text-align: right; }
[dir="rtl"] .value-strip { direction: rtl; }
[dir="rtl"] .pill-list { direction: rtl; }
[dir="rtl"] .mobile-nav { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .mobile-nav.open { transform: translateX(0); }
[dir="rtl"] .spec-table th { text-align: right; }
[dir="rtl"] .cta-band { text-align: center; }
[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
[dir="rtl"] .cookie-banner { text-align: right; }

/* Premium Image Reveal & Hover Effects */

/* 1. Solutions Tab Images Float & Parallax Zoom */
.tab-image {
  overflow: hidden;
  border-radius: var(--radiu);
  box-shadow: var(--shadow-md);
  position: relative;
  background: #f1f5f9;
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.tab-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reveal sweep line & scale down when tab pane becomes active */
.tab-panel.active .tab-image img {
  animation: tabImgZoomIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tabImgZoomIn {
  from { transform: scale(1.15) translateY(10px); }
  to { transform: scale(1) translateY(0); }
}

/* Floating float animation for layout dynamics */
.tab-image:not(.offset) {
  animation: floatImg 8s ease-in-out infinite;
}
.tab-image.offset {
  animation: floatImgReverse 8s ease-in-out infinite;
}

@keyframes floatImg {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
}
@keyframes floatImgReverse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-0.5deg); }
}

/* Solutions Hover Sheen sweep */
.tab-image::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
}
.tab-image:hover::after {
  left: 150%;
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab-image:hover img {
  transform: scale(1.06) !important;
}

/* 2. Product Card Hover Glare & Scaling */
.product-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radiu);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.product-card::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 5;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}
.product-card:hover::after {
  left: 150%;
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-img {
  transform: scale(1.08) rotate(0.5deg);
}
.product-img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. Global Reach Banner Parallax Ken Burns Zoom */
.cases-banner-bg {
  overflow: hidden;
}
.cases-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cases-banner-bg.in-view img {
  animation: kenBurnsEffect 24s ease-in-out infinite alternate;
}

@keyframes kenBurnsEffect {
  0% { transform: scale(1); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* 4. Certifications Card Sheen & Lift */
.news-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}
.news-card .img-wrap {
  overflow: hidden;
  position: relative;
}
.news-card .img-wrap img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.news-card:hover .img-wrap img {
  transform: scale(1.06);
}
.news-card .img-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
}
.news-card:hover .img-wrap::after {
  left: 150%;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 5. Generic Clip-path Shutter reveal for new section images on scroll */
.reveal-shutter {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-shutter.in-view {
  clip-path: inset(0 0 0 0);
}
.reveal-shutter img {
  transform: scale(1.15);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-shutter.in-view img {
  transform: scale(1);
}

/* Floating WhatsApp Widget Styling */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #fff !important;
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.whatsapp-float::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #25d366;
  opacity: 0.6;
  z-index: -1;
  animation: waPulse 2s infinite;
}

@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.whatsapp-float:hover {
  background-color: #128c7e;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(18, 140, 126, 0.4);
}

.whatsapp-tooltip {
  position: absolute;
  right: 76px;
  background: #0f172a;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateX(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* RTL layout overrides */
html[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 24px;
}
html[dir="rtl"] .whatsapp-tooltip {
  right: auto;
  left: 76px;
  transform: translateX(-10px);
}
html[dir="rtl"] .whatsapp-float:hover .whatsapp-tooltip {
  transform: translateX(0);
}

/* Solution Detail Page Styling */
.pd-video-caption {
  padding: 160px 0 90px;
}
.solution-hero-title {
  color: var(--white);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 18px;
}
.solution-hero-sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.6;
  max-width: 680px;
}
.solution-detail-section {
  padding: 100px 0;
  background: var(--white);
}
.solution-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.solution-detail-media {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radiu);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-light);
}
.solution-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solution-overview-title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  color: var(--cl333);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.solution-overview-desc {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--cl666);
  margin-bottom: 32px;
}
.solution-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1.5px solid var(--border);
  padding-top: 28px;
}
.spec-item-box h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cl999);
  margin-bottom: 6px;
  font-weight: 700;
}
.spec-item-box p {
  font-size: 16px;
  font-weight: 700;
  color: var(--cl333);
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE UX DESIGN SYSTEM
   ========================================================================== */

/* Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  .btn-more, .nav a, .mobile-nav a, .tab-btn, .cookie-actions button {
    touch-action: manipulation;
  }
}

/* --- Medium Displays & Tablets (max-width: 1024px) --- */
@media (max-width: 1024px) {
  :root {
    --space140: 80px;
    --space100: 60px;
  }

  .container {
    padding: 0 24px;
  }

  .split {
    gap: 40px;
  }

  .cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tab-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .tab-image.offset {
    display: none;
  }

  .cases-banner-content h2 {
    font-size: clamp(24px, 4vw, 36px);
  }
}

/* Offcanvas Drawer Base Rules (Hidden globally by default) */
.mobile-nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 320px !important;
  max-width: 85vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background: #090d16 !important;
  background: linear-gradient(180deg, #0b101d 0%, #05080e 100%) !important;
  border-left: 1px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: -25px 0 60px rgba(0, 0, 0, 0.85) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease !important;
}

.mobile-nav.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

/* --- Mobile Devices & Tablet Portrait (max-width: 768px) --- */
@media (max-width: 768px) {
  :root {
    --space140: 50px;
    --space100: 40px;
  }

  .container {
    padding: 0 16px;
  }

  /* Header & Navigation */
  .header-top {
    display: none; /* Hide top utility strip on small screens to save vertical space */
  }

  .header-main {
    height: 64px;
    padding: 0 16px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .logo img {
    height: 40px !important;
    max-width: 160px !important;
  }

  .logo-name {
    font-size: 20px !important;
  }

  .nav {
    display: none !important; /* Hide desktop nav links */
  }

  .btn-contact {
    display: none !important; /* Managed via mobile drawer & float dock */
  }

  .header-right {
    gap: 10px !important;
  }

  .lang-menu {
    display: block !important;
  }

  .lang-code {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--white);
  }

  .lang-full-name {
    display: none !important;
  }

  .lang-btn {
    padding: 7px 11px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: var(--white) !important;
  }

  .header.scrolled .lang-btn {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
    color: var(--cl333) !important;
  }

  .header.scrolled .lang-code {
    color: var(--cl333) !important;
  }

  .lang-dropdown {
    right: 0 !important;
    top: calc(100% + 8px) !important;
    min-width: 155px !important;
    background: rgba(11, 16, 29, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65) !important;
    z-index: 10001 !important;
    overflow: hidden;
  }

  .lang-dropdown a {
    color: #e2e8f0 !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .lang-dropdown a:hover,
  .lang-dropdown a.active {
    background: rgba(14, 165, 233, 0.22) !important;
    color: #38bdf8 !important;
  }

  .menu-toggle {
    display: flex !important;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    align-items: center;
    justify-content: center;
  }

  /* Mobile Offcanvas Drawer Menu */
  .mobile-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    z-index: 100000 !important;
    background: #090d16 !important;
    background: linear-gradient(180deg, #0b101d 0%, #05080e 100%) !important;
    border-left: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-nav.open {
    transform: translateX(0) !important;
  }

  .mobile-nav-header {
    height: 70px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    background: rgba(15, 23, 42, 0.4);
  }

  .mobile-nav-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-nav-close:hover,
  .mobile-nav-close:active {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
  }

  .mobile-nav-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav-body a {
    padding: 12px 16px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid transparent !important;
    transition: all 0.25s ease !important;
  }

  .mobile-nav-body a span {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-nav-body a span i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #64748b;
    transition: color 0.25s ease;
  }

  .mobile-nav-body a .arrow-icon {
    font-size: 12px;
    opacity: 0.4;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .mobile-nav-body a.active,
  .mobile-nav-body a:hover {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
  }

  .mobile-nav-body a.active span i,
  .mobile-nav-body a:hover span i {
    color: #38bdf8;
  }

  .mobile-nav-body a.active .arrow-icon,
  .mobile-nav-body a:hover .arrow-icon {
    opacity: 1;
    transform: translateX(4px);
    color: #38bdf8;
  }

  /* Mobile Nav Language Switcher */
  .mobile-nav-lang {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-lang-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 10px;
    padding: 0 2px;
  }

  .mobile-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .mobile-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #e2e8f0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.25s ease;
  }

  .mobile-lang-btn .lang-flag {
    font-size: 16px;
    line-height: 1;
  }

  .mobile-lang-btn:hover,
  .mobile-lang-btn.active {
    background: rgba(14, 165, 233, 0.16) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
  }

  /* Clean & Gorgeous Mobile Nav Footer Buttons */
  .mobile-nav-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(9, 13, 22, 0.95);
  }

  .btn-drawer-phone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 20px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .btn-drawer-phone i {
    color: #0ea5e9;
    font-size: 15px;
  }

  .btn-drawer-phone:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #0ea5e9 !important;
    color: #ffffff !important;
  }

  .btn-drawer-contact {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 20px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4) !important;
    transition: all 0.25s ease !important;
  }

  .btn-drawer-contact i {
    font-size: 15px;
  }

  .btn-drawer-contact:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.55) !important;
  }

  /* Hero Section Mobile Optimization */
  .hero {
    min-height: 520px !important;
    height: 85vh !important;
    padding: 0 !important;
  }

  .hero-content {
    top: 48% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95% !important;
    max-width: 500px !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  .hero-content h1,
  .hero-content h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 14px !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  }

  .hero-content p.subtitle {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
    opacity: 0.95 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
  }

  .hero-content .btn-more {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    padding: 6px 6px 6px 24px !important;
    font-size: 14px !important;
  }

  .hero-content .btn-more p {
    font-size: 14.5px !important;
    padding-right: 16px !important;
  }

  .hero-content .btn-more .arrow {
    width: 40px !important;
    height: 40px !important;
  }

  .hero-card {
    display: none !important; /* Hide bottom float box on mobile to free up space */
  }

  /* Page Hero for Subpages */
  .page-hero {
    padding: 90px 0 35px !important;
    min-height: auto !important;
  }

  .page-hero h1 {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .page-hero p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .page-hero-inner {
    padding: 0 16px;
  }

  /* Solution Detail Mobile Overrides */
  .pd-video-caption {
    padding: 100px 0 40px !important;
  }
  .solution-hero-title {
    font-size: clamp(22px, 6vw, 32px) !important;
    margin: 10px 0 12px !important;
  }
  .solution-hero-sub {
    font-size: 14px !important;
  }
  .solution-detail-section {
    padding: 40px 0 !important;
  }
  .solution-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .solution-detail-media {
    aspect-ratio: 16/10 !important;
    border-radius: 16px !important;
  }
  .solution-overview-title {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    margin-bottom: 12px !important;
  }
  .solution-overview-desc {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }
  .solution-spec-grid {
    gap: 16px !important;
    padding-top: 20px !important;
  }
  .spec-item-box p {
    font-size: 14.5px !important;
  }

  /* Layout Splits (Vertical Stacking) */
  .split,
  .split.reverse {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .split-media,
  .split-body {
    width: 100% !important;
    flex: none !important;
  }

  .split-body h2,
  .split-body h3 {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.3 !important;
  }

  /* Grids & Cards */
  .cols-4,
  .cols-3,
  .feature-grid,
  .cert-grid,
  .factory-gallery-grid,
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .feature-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .news-card {
    border-radius: 16px !important;
  }

  .news-card-body {
    padding: 18px !important;
  }

  /* Stats / Value Strip */
  .value-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  .value-num {
    font-size: 26px !important;
  }

  .value-label {
    font-size: 12px !important;
  }

  /* Specs Table Overflow Fix */
  .spec-table-wrap,
  .split-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .spec-table {
    min-width: 100%;
    font-size: 13.5px;
  }

  .spec-table th,
  .spec-table td {
    padding: 10px 12px;
  }

  /* Country Chips in Banners */
  .country-chips {
    gap: 8px !important;
    margin: 16px 0 24px !important;
  }

  .country-chips li {
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 50px !important;
  }

  /* Cases Banner */
  .cases-banner {
    padding: 32px 20px !important;
    border-radius: 20px !important;
  }

  .cases-banner-content {
    max-width: 100% !important;
  }

  /* Footer */
  .footer {
    padding: 50px 0 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 20px !important;
  }

  .footer-col.footer-apps {
    grid-column: span 2;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center;
  }

  /* Floating WhatsApp Button Adjustment */
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    font-size: 26px;
  }

  .whatsapp-tooltip {
    display: none !important; /* Hide hover tooltip on touch screens */
  }

  /* Search Overlay Mobile Fix */
  .search-overlay-inner {
    padding: 30px 20px;
  }

  .search-overlay-form input {
    font-size: 18px !important;
  }

  /* Cookie Banner Mobile */
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 20px;
    border-radius: 16px;
  }

  .cookie-actions {
    flex-direction: column;
    gap: 8px;
  }

  .cookie-actions button {
    width: 100%;
  }
}

/* --- Small Smartphones (max-width: 480px) --- */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-col.footer-apps {
    grid-column: span 1;
  }

  .value-strip {
    grid-template-columns: 1fr !important;
  }

  .cases-banner {
    padding: 24px 16px !important;
  }

  .btn-more {
    width: 100%;
    justify-content: center;
  }
}