:root{
    --orange: #FF7A00;
    --ink: #14161A;
    --ink-soft: #4A4E57;
    --white: #FFFFFF;
    --line: #E7E7E9;
    --overlay: rgba(10,10,12,0.55);
    --header-h-desktop: 84px;
    --header-h-mobile: 60px;
    --ease: cubic-bezier(.4,0,.2,1);
  }

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

  body{
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
  }

  a{ text-decoration:none; color:inherit; }
  button{ font: inherit; border:none; background:none; cursor:pointer; color:inherit; }
  ul{ list-style:none; }

  /* ============ HEADER ============ */
  .site-header{
    position: fixed;
    top:0; left:0; right:0;
    z-index: 900;
    height: var(--header-h-desktop);
    display:flex;
    align-items:center;
    background: transparent;
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
  }

  .site-header.scrolled{
    background: var(--white);
    box-shadow: 0 2px 18px rgba(20,22,26,0.08);
  }

  .header-inner{
    width:100%;
    max-width: none;
    padding: 0 30px;
    display:flex;
    align-items:center;
    justify-content: space-between;
  }

  /* Logo */
  /* =========================
          HEADER LOGO
    ========================= */

.logo{
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo img{
    height:50px;
    width:auto;
    display:block;
    transition:all .35s ease;
}

/* Default (Hero Section) */
.logo-white{
    display:block !important;
}

.logo-color{
    display:none !important;
}

/* Scroll */
.site-header.scrolled .logo-white{
    display:none !important;
}

.site-header.scrolled .logo-color{
    display:block !important;
}

/* Mobile Header */
@media (max-width:991px){

    .logo{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }

    .logo img{
        height:50px;
    }


  }
  .site-header.scrolled .logo{ color: var(--ink); }
  .logo .mark{ width:30px; height:30px; flex-shrink:0; }
  .logo .mark path{ fill: var(--orange); }
  .logo span.dim{ font-weight:400; opacity:.8; }

  /* Desktop nav */
  .desktop-nav{ display:flex; align-items:center; gap:44px; }
  .desktop-nav ul{ display:flex; align-items:center; gap:36px; }

  .nav-link{
    position:relative;
    font-size: 17px;
    font-weight: 600;
    color: var(--white);
    padding: 6px 0;
    transition: color .35s var(--ease);
  }
  .site-header.scrolled .nav-link{ color: var(--ink); }

  .nav-link::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-4px;
    height:2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .nav-link:hover::after{ transform: scaleX(1); }
  .nav-link.active{ color: var(--orange) !important; }
  .nav-link.active::after{ transform: scaleX(1); }

  .icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:50%;
    color: var(--white);
    transition: color .35s var(--ease), background-color .2s var(--ease);
  }
  .site-header.scrolled .icon-btn{ color: var(--ink); }
  .icon-btn:hover{ background: rgba(120,120,130,0.1); }
  .icon-btn svg{ width:19px; height:19px; }

  .mobile-controls, .hamburger{ display:none; }

  /* ============ MOBILE / TABLET HEADER ============ */
  @media (max-width: 991px){
    .site-header{ height: var(--header-h-mobile); }
    .desktop-nav{ display:none; }

    .header-inner{ padding: 0 16px; position:relative; height:100%; }

    .mobile-controls{ display:flex; align-items:center; gap:4px; }

    .logo{
      position:absolute;
      left:50%; top:50%;
      transform: translate(-50%,-50%);
      font-size: 17px;
    }
    .logo .mark{ width:24px; height:24px; }

    .hamburger{
      display:flex;
      align-items:center;
      justify-content:center;
      width:38px; height:38px;
      color: var(--white);
      transition: color .35s var(--ease);
    }
    .site-header.scrolled .hamburger{ color: var(--ink); }
    .hamburger svg{ width:22px; height:22px; }
  }

  /* ============ MOBILE MENU (Imou-style, full width) ============ */
  .menu-overlay{
    position:fixed; inset:0;
    background: var(--overlay);
    z-index: 950;
    opacity:0;
    visibility:hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .menu-overlay.open{ opacity:1; visibility:visible; }

  .mobile-panel{
    position:fixed;
    top:0; right:0;
    height:40%;
    width: 100%;
    background: var(--white);
  
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;

    z-index: 960;
    transform: translateX(100%);
    transition: transform .38s var(--ease);
    display:flex;
    flex-direction:column;
  }
  .mobile-panel.open{ transform: translateX(0); }

  .mobile-panel-top{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    height:var(--header-h-mobile);
    padding:0 20px;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
}

.mobile-panel-top .logo{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.mobile-panel-top .logo img{
    height:50px;
    width:auto;
}

  .close-btn{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    border-radius:50%;
    color: var(--ink);
  }
  .close-btn:hover{ background: rgba(120,120,130,0.1); }
  .close-btn svg{ width:24px; height:24px; }

  .mobile-menu-list{ flex:1; overflow-y:auto; padding: 0 20px; }
  .mobile-menu-list li a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height: 76px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 21px;
    font-weight: 500;
    color: var(--ink);
    transition: color .2s;
  }
  .mobile-menu-list li a:active,
  .mobile-menu-list li a:hover{ color: var(--orange); }
  .mobile-menu-list li a svg{ width:20px; height:20px; flex-shrink:0; color: var(--ink); }
  .mobile-menu-list li a:hover svg{ color: var(--orange); }

  /* ============ SEARCH OVERLAY ============ */
  .search-overlay{ position:fixed; inset:0; z-index: 1000; visibility:hidden; }
  .search-overlay.open{ visibility:visible; }

  .search-backdrop{
    position:absolute; inset:0;
    background: var(--overlay);
    opacity:0;
    transition: opacity .3s var(--ease);
  }
  .search-overlay.open .search-backdrop{ opacity:1; }

  .search-panel{
    position:absolute;
    top:0; left:0; right:0;
    background: var(--white);
    padding: 28px max(24px, calc((100% - 1440px)/2 + 40px));
    transform: translateY(-100%);
    transition: transform .38s var(--ease);
    box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  }
  .search-overlay.open .search-panel{ transform: translateY(0); }

  .search-row{ display:flex; align-items:center; gap:16px; max-width: 1440px; margin: 0 auto; }
  .search-row svg.search-icon{ width:20px; height:20px; color:var(--ink-soft); flex-shrink:0; }

  .search-row input{
    flex:1; border:none; outline:none;
    font-size: 20px; font-weight:500; color: var(--ink);
    background:transparent; padding: 8px 0;
    border-bottom: 2px solid var(--line);
  }
  .search-row input:focus{ border-bottom-color: var(--orange); }
  .search-row input::placeholder{ color:#B7BAC1; }

  @media (max-width: 600px){
    .search-panel{ padding: 20px 16px; }
    .search-row input{ font-size:16px; }
    .mobile-menu-list li a{ font-size: 18px; min-height: 66px; padding: 18px 2px; }
  }