:root {
--bg: #050505;
--surface: #111;
--surface-2: #0b0b0b;
--text: #ffffff;
--white: #ffffff;
--text-1: #000000;
--text-m: #888;
--accent: #a91612;
--glass: rgba(255, 255, 255, 0.03);
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.16);
--shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
--transit: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
--header-bg:rgba(5, 5, 5, 0.7);
--hide:block;
--section-title:#ffffff;
--dropdown-bg: rgba(15, 15, 15, 0.95);
--cta-section:
radial-gradient(circle at center, rgba(0, 122, 255, 0.08), transparent 60%),
linear-gradient(to bottom, #0b0b0b, #050505);
 --transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
--language-bg: rgba(15, 15, 15, 0.96);
--container:1280px;
--cta-section-bg:linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0.18) 100%), linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.3) 100%);
}
[data-theme="light"]{
  --bg: #f6f3f1;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-2: #ffffff;

  --text: #181311;
  --white: #ffffff;
  --text-1: #000000;
  --text-m: #7c706c;

  --accent: #a91612;

  --glass: rgba(255, 255, 255, 0.6);
  --border: rgba(24, 19, 17, 0.08);
  --border-strong: rgba(24, 19, 17, 0.14);

  --shadow: 0 18px 40px rgba(41, 24, 18, 0);

  --transit: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);

  --header-bg: rgba(246, 243, 241, 0.78);
  --hide: block;
  --section-title: #181311;

  --dropdown-bg: rgba(255, 255, 255, 0.96);
  --language-bg: rgba(255, 255, 255, 0.96);

  --container: 1280px;

  --cta-section:
    radial-gradient(circle at center, rgba(169, 22, 18, 0.08), transparent 60%),
    linear-gradient(to bottom, #f8f5f3, #f2ece8);

  --cta-section-bg:
    linear-gradient(to right, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.74) 45%, rgba(255, 255, 255, 0.58) 100%),
    linear-gradient(to top, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.18) 40%, rgba(255, 255, 255, 0.42) 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
body.menu-open {
overflow: hidden;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
display: block;
max-width: 100%;
}
.reveal {
  opacity: 0; /* 初始隐藏 */
  transform: translateY(30px);
  -webkit-transform: translateY(30px); /* Safari/老浏览器 */
  transition: opacity 0.6s ease, transform 0.6s ease;
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

.delay-1 {
  -webkit-transition-delay: 0.1s; /* Safari, Chrome */
  -moz-transition-delay: 0.1s;    /* Firefox 老版本 */
  -o-transition-delay: 0.1s;      /* Opera 老版本 */
  transition-delay: 0.1s;         /* 标准 */
}

.delay-2 {
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.delay-3 {
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
padding: 7px 15px;
border-radius: 20em;
transition: var(--transit);
color: var(--text);
background: transparent;
white-space: nowrap;
}

.btn:hover {
transform: translateY(-2px);
}

.btn-primary {
background-color: var(--accent);
border-color: var(--accent);
color: #fff;
}

.btn-primary:hover {
box-shadow: 0 0 20px rgba(0, 122, 255, 0.35);
}

.btn-secondary {
background: rgba(255, 255, 255, 0.02);
}

.btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
}
.container{max-width:var(--container);margin:0 auto;padding:0 12px}

.section {
padding: 100px 5%;
max-width: 1400px;
margin: 0 auto;
}

.section-dark {
background: var(--surface);
position: relative;
overflow: hidden;
max-width: none;
padding-left: 5%;
padding-right: 5%;
}

.section-title {
font-size: 2rem;
color: var(--section-title);
}

.section-desc {
color: var(--text-m);
margin-top: 10px;
}

.section-head-between {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
gap: 20px;
}

.grid {
display: grid;
grid-template-columns: repeat(3,minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}

.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
transition: var(--transit);
position: relative;
overflow: hidden;
}

.card:hover {
border-color: var(--accent);
transform: translateY(-10px);
}

.card-tag {
color: var(--accent);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 1rem;
display: block;
letter-spacing: 0.8px;
}

.card-desc {
color: var(--text-m);
font-size: 0.9rem;
margin: 15px 0;
}

header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
padding: 0 6%;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--header-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
z-index: 1000;
}

.logo {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: 2px;
position: relative;
z-index: 100;
}

.nav-center {
display: flex;
gap: 40px;
}

.nav-item {
position: relative;
height: 80px;
display: flex;
align-items: center;
}

.nav-item > a {
color: var(--text);
font-size: 0.95rem;
transition: 0.3s;
}

.dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background:var(--dropdown-bg);
border: 1px solid var(--border);
border-radius: 12px;
opacity: 0;
visibility: hidden;
transition: var(--transit);
pointer-events: none;
box-shadow: var(--shadow);
}

.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}

.mega-menu {
width: 800px;
padding: 2.5rem;
display: grid;
/*grid-template-columns: 1fr 1fr 1.2fr;*/
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem;
}

.mega-col h4 {
font-size: 0.8rem;
color: var(--accent);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}

.mega-col li {
margin-bottom: 0.8rem;
}

.mega-col li a {
font-size: 0.9rem;
color: var(--text-m);
transition: var(--transit);
display: block;
}

.mega-col li a:hover {
color: var(--text);
transform: translateX(5px);
}

.dropdown-list {
width: 200px;
padding: 10px 0;
}

.dropdown-list li a {
padding: 10px 20px;
display: block;
color: var(--text-m);
transition: var(--transit);
}

.dropdown-list li a:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.04);
}

.mega-feat {
background: var(--glass);
border-radius: 8px;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
border: 1px solid var(--border);
}

.mega-feat-label {
font-size: 0.8rem;
color: var(--accent);
}

.mega-feat-link {
font-size: 0.8rem;
display: block;
margin-top: 8px;
}

.nav-tools {
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 1002;
}

.search-btn {
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.02);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
cursor: pointer;
transition: var(--transit);
padding: 0;
}

.search-btn:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--border-strong);
transform: translateY(-1px);
}

.search-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transition: var(--transit);
}

.search-btn:hover svg {
transform: scale(1.05);
}

.lang-switch {
position: relative;
}

.lang-current {
min-width: 72px;
height: 42px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.02);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
transition: var(--transit);
}

.lang-current:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--border-strong);
}

.lang-current span {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.5px;
}

.lang-current svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s ease;
}

.lang-switch.open .lang-current svg {
transform: rotate(180deg);
}

.lang-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 150px;
padding: 8px;
background:var(--language-bg);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: var(--transit);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

.lang-switch.open .lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.lang-option {
width: 100%;
min-height: 40px;
padding: 0 12px;
border: none;
border-radius: 10px;
background: transparent;
color: var(--text-m);
text-align: left;
font-size: 0.86rem;
cursor: pointer;
transition: var(--transit);
}

.lang-option:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text);
}

.lang-option.active {
background: rgba(255, 255, 255, 0.08);
color: var(--text);
}

.mode-switch {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.02);
}

.mode-btn {
min-width: 48px;
height: 34px;
padding: 0 14px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--text-m);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.4px;
cursor: pointer;
transition: var(--transit);
}

.mode-btn:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.05);
}

.mode-btn.active {
color: var(--bg);
background: var(--text);
box-shadow: 0 6px 18px rgba(255, 255, 255, 0.12);
}

.menu-btn {
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.02);
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
cursor: pointer;
padding: 0;
transition: var(--transit);
color: var(--text);
user-select: none;
}

.menu-btn:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--border-strong);
}

.menu-btn span {
width: 16px;
height: 1.6px;
background: var(--text);
border-radius: 999px;
transition: 0.3s ease;
transform-origin: center;
}

.menu-btn.active span:nth-child(1) {
transform: translateY(5.6px) rotate(45deg);
}

.menu-btn.active span:nth-child(2) {
opacity: 0;
}

.menu-btn.active span:nth-child(3) {
transform: translateY(-5.6px) rotate(-45deg);
}

.nav-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
z-index: 999;
}

.nav-overlay.active {
opacity: 1;
visibility: visible;
}

.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transit);
    padding: 32px 20px;
    overflow-y: auto;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-panel {
    width: min(100%, 980px);
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    padding: 28px;
}

.search-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.search-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0,122,255,.14);
    color: #b4d6ff;
    border: 1px solid rgba(0,122,255,.20);
    font-size: .74rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.search-title {
    font-size: 1.8rem;
    letter-spacing: -.5px;
}

.search-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    color: var(--text);
    cursor: pointer;
    transition: var(--transit);
}

.search-close:hover {
    background: rgba(255,255,255,.08);
}

.search-box-wrap {
    margin-bottom: 18px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    transition: var(--transit);
}

.search-box:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(0,122,255,.12);
}

.search-box svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-m);
    stroke-width: 2;
    fill: none;
    flex: 0 0 auto;
}

.search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
}

.search-input::placeholder {
    color: #666;
}

.search-clear {
    border: none;
    background: transparent;
    color: var(--text-m);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: var(--transit);
    white-space:nowrap;
}

.search-clear.show {
    opacity: 1;
    pointer-events: auto;
}

.search-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--text-m);
    font-size: .88rem;
}

.search-results {
    display: grid;
    gap: 12px;
}

.search-result-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(255,255,255,.02);
    transition: var(--transit);
}

.search-result-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0,122,255,.22);
    background: rgba(255,255,255,.03);
}

.search-result-thumb {
    width: 110px;
    height: 110px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.04);
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-title {
    font-size: 1rem;
    margin-bottom: 8px;
    line-height: 1.4;
}

.search-result-price {
    color: #b4d6ff;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.search-result-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-m);
}

.search-result-item:hover .search-result-link {
    color: var(--text);
}

.search-empty {
    display: none;
    margin-top: 12px;
    padding: 36px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: 20px;
    background: rgba(255,255,255,.015);
    text-align: center;
}

.search-empty.show {
    display: block;
}

.search-empty h4 {
    margin-bottom: 8px;
    font-size: 1rem;
}

.search-empty p {
    color: var(--text-m);
    line-height: 1.7;
}

.search-tip {
    margin-top: 18px;
    color: var(--text-m);
    font-size: .84rem;
}

mark {
    background: rgba(0,122,255,.18);
    color: #fff;
    border-radius: 4px;
    padding: 0 3px;
}

@media (max-width: 768px) {
    .search-overlay {
        padding: 12px;
    }

    .search-panel {
        width: 100%;
        min-height: calc(100vh - 24px);
        border-radius: 20px;
        padding: 18px;
    }

    .search-title {
        font-size: 1.25rem;
    }

    .search-close {
        width: 38px;
        height: 38px;
    }

    .search-box {
        min-height: 52px;
        padding: 0 14px;
    }

    .search-results-head span:first-child {
        display: none;
    }

    .search-result-item {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        border-radius: 16px;
    }

    .search-result-thumb {
        width: 80px;
        height: 80px;
        border-radius: 12px;
    }

    .search-result-title {
        font-size: .92rem;
        margin-bottom: 6px;
    }

    .search-result-price {
        font-size: .88rem;
        margin-bottom: 6px;
    }

    .search-result-link {
        font-size: .82rem;
    }

    .search-tip {
        font-size: .76rem;
    }
}

@media (max-width: 480px) {
    .search-result-item {
        grid-template-columns: 1fr;
    }

    .search-result-thumb {
        width: 100%;
        height: 170px;
    }
}
.result-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.result-tag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(0,122,255,.14);
  color:#b4d6ff;
  border:1px solid rgba(0,122,255,.20);
  font-size:.74rem;
  font-weight:700;
}
.result-date {
    color: var(--text-m);
    font-size: .8rem;
}
.hero-carousel {
position: relative;
width: 100%;
height: 100vh;
min-height: 680px;
overflow: hidden;
background: #000;
}

.hero-slider {
position: relative;
width: 100%;
height: 100%;
}

.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.9s ease, transform 1.2s ease;
transform: scale(1.03);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.hero-slide.active {
opacity: 1;
visibility: visible;
transform: scale(1);
z-index: 2;
}

.hero-slide::before {
content: "";
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.02);
}


.hero-overlay {
position: absolute;
inset: 0;
display: var(--hide);
background:
linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0.18) 100%),
linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.3) 100%);
z-index: 1;
}

.hero-content {
position: relative;
z-index: 2;
height: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 140px 6% 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.hero-kicker {
display: inline-block;
margin-bottom: 20px;
color: var(--accent);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}

.hero-title {
max-width: 760px;
font-size: clamp(2.8rem, 6vw, 5.5rem);
color: var(--white);
line-height: 1.05;
letter-spacing: -2px;
margin-bottom: 20px;
}

.hero-desc {
max-width: 680px;
color: rgba(255, 255, 255, 0.78);
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 36px;
}

.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}

.hero-controls {
position: absolute;
right: 5%;
bottom: 110px;
z-index: 5;
display: flex;
gap: 12px;
}

.hero-arrow {
width: 52px;
height: 52px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: #fff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transit);
}

.hero-arrow:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
}

.hero-arrow span {
font-size: 1rem;
line-height: 1;
}

.hero-pagination {
position: absolute;
left: 5%;
bottom: 58px;
z-index: 5;
display: flex;
gap: 10px;
align-items: center;
}

.hero-dot {
width: 34px;
height: 4px;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.25);
cursor: pointer;
transition: var(--transit);
padding: 0;
}

.hero-dot.active {
width: 52px;
background: var(--accent);
}

.product-filter {
display: flex;
gap: 12px;
margin-top: 20px;
flex-wrap: wrap;
}

.filter-btn {
padding: 8px 18px;
border-radius: 20px;
border: 1px solid var(--border);
background: transparent;
color: var(--section-title);
cursor: pointer;
font-size: 0.85rem;
transition: var(--transit);
  min-width: auto;
}

.filter-btn:hover {
color: var(--section-title);
border-color: var(--accent);
}

.filter-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}

.product-grid {
align-items: start;
}

.product-card {
transition: 0.35s ease;
max-width: 380px;
width: 100%;
}

.product-card.hide {
display: none;
transform: scale(0.9);
pointer-events: none;
}
.product-card h3{
color: var(--section-title);
}
.sol-card h3{
color: var(--white);
}
.sol-card p{
 color: var(--text-m);   
}
.product-render {
background: var(--glass);
border-radius: 8px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
aspect-ratio: 16 / 10;
}

.product-render img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transit);
}

.card:hover .product-render img {
transform: scale(1.08);
}

.carousel-controls {
display: flex;
gap: 15px;
}

.scroll-btn {
background: var(--glass);
border: 1px solid var(--border);
color: var(--text);
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
transition: var(--transit);
display: flex;
align-items: center;
justify-content: center;
}

.scroll-btn:hover {
background: var(--text);
color: var(--bg);
}

.sol-scroll-container {
display: flex;
gap: 25px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 20px 0 40px;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x mandatory;
cursor: grab;
user-select: none;
}

.sol-scroll-container::-webkit-scrollbar {
display: none;
}

.sol-scroll-container.dragging {
cursor: grabbing;
scroll-behavior: auto;
scroll-snap-type: none;
}

.sol-scroll-container.dragging .sol-card {
pointer-events: none;
}

.sol-card {
max-width: 400px;
height: 500px;
scroll-snap-align: start;
flex-shrink: 0;
cursor: grab;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-size: cover;
background-position: center;
}

.sol-card:active {
cursor: grabbing;
}

.news-container {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 30px;
margin-top: 50px;
}

.news-main {
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
padding: 40px;
/* min-height: 450px; */
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
border: none;
}

.news-main:hover {
transform: scale(1.02);
}

.news-main-badge {
background: var(--accent);
color: #fff;
padding: 4px 12px;
font-size: 0.7rem;
border-radius: 4px;
width: max-content;
margin-bottom: 15px;
}

.news-main-title {
font-size: 1.8rem;
margin-bottom: 10px;
color:var(--white)
}

.news-main-desc {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin-bottom: 20px;
}

.news-main-link {
color: var(--white);
font-weight: 600;
}

.news-list {
display: flex;
flex-direction: column;
gap: 20px;
}

.news-item {
cursor: pointer;
border: 1px solid transparent !important;
background: rgba(255, 255, 255, 0.02) !important;
padding: 20px;
display: flex;
gap: 20px;
align-items: center;
}
[data-theme="light"] .news-item {
border-color: var(--border) !important;
}
.news-item:hover {
background: rgba(255, 255, 255, 0.05) !important;
border-color: var(--border) !important;
}

.news-date {
min-width: 80px;
text-align: center;
border-right: 1px solid var(--border);
padding-right: 20px;
}

.news-date-day {
display: block;
font-size: 1.2rem;
font-weight: 700;
}

.news-date-month {
font-size: 0.7rem;
color: var(--text-m);
text-transform: uppercase;
}

.news-item-title {
font-size: 1rem;
margin-bottom: 5px;
}

.news-item-desc {
font-size: 0.8rem;
color: var(--text-m);
}

.cta-section {
position: relative;
padding: 140px 5%;
text-align: center;
background:var(--cta-section-bg);
border-top: 1px solid var(--border);
overflow: hidden;
}

section.cta-section:after {
    content: '';
    background: var(--cta-section-bg);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .6;
}
.cta-glow {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(0, 122, 255, 0.18), transparent 70%);
transform: translate(-50%, -50%);
filter: blur(60px);
opacity: 0.7;
}

.cta-container {
position: relative;
z-index: 2;
max-width: 900px;
margin: auto;
}

.cta-title {
font-size: clamp(2.2rem, 4vw, 3rem);
letter-spacing: -1px;
margin-bottom: 20px;
}

.cta-desc {
color: var(--text-m);
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 40px;
}

.cta-actions {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

.cta-btn-primary,
.cta-btn-secondary {
padding: 14px 36px;
border-radius: 6px;
transition: var(--transit);
}

.cta-btn-primary {
background: var(--accent);
color: #fff;
font-weight: 600;
}

.cta-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 122, 255, 0.35);
}

.cta-btn-secondary {
border: 1px solid var(--border);
color: var(--text);
}

.cta-btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
}

.mega-footer {
padding: 100px 6% 40px;
background: #070707;
border-top: 1px solid var(--border);
color: #fff;
}

.footer-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
}

.footer-brand-text {
color: var(--text-m);
font-size: 0.9rem;
line-height: 1.8;
margin-bottom: 20px;
max-width: 300px;
}

.social-links {
display: flex;
gap: 10px;
}

.social-links a,
.footer-col a {
color: var(--text-m);
transition: var(--transit);
}

.footer-col-title,
.footer-subscribe-title {
margin-bottom: 20px;
letter-spacing: 1px;
}

.footer-list {
display: flex;
flex-direction: column;
gap: 18px;
}

.footer-link {
color: var(--text-m);
font-size: 0.9rem;
}

.footer-subscribe-text {
color: var(--text-m);
font-size: 0.9rem;
margin-bottom: 14px;
}

.subscribe-form {
display: flex;
border-bottom: 1px solid var(--border);
padding-bottom: 10px;
}

.subscribe-input {
background: none;
border: none;
color: #fff;
width: 100%;
outline: none;
font-size: 0.9rem;
}

.subscribe-btn {
background:var(--accent);
border: none;
color: var(--text);
cursor: pointer;
font-weight: 600;
padding:5px 8px;
white-space: nowrap;
}

.footer-bottom {
max-width: 1400px;
margin: 40px auto 0;
padding-top: 40px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
color: var(--text-m);
font-size: 0.8rem;
gap: 20px;
}

.footer-bottom-links {
display: flex;
gap: 20px;
}

.footer-col a:hover,
.social-links a:hover,
.footer-bottom a:hover {
color: var(--text-m);
}

@media (max-width: 992px) {
.nav-tools {
gap: 10px;
}

.btn-pc {
display: none;
}

.menu-btn {
display: inline-flex;
}

.search-btn,
.lang-current,
.menu-btn {
width: 40px;
height: 40px;
}

.lang-current {
min-width: 64px;
padding: 0 12px;
}

.lang-current span {
font-size: 0.74rem;
}

.lang-dropdown {
right: 0;
min-width: 140px;
}

.nav-center {
position: fixed;
top: 0;
right: -100%;
width: min(86vw, 380px);
height: 100vh;
padding: 96px 24px 32px;
background:var(--bg);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
overflow-y: auto;
transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1001;
}

.nav-center.active {
right: 0;
}

.nav-item {
position: relative;
height: auto;
display: flex;
flex-direction: column;
align-items: stretch;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 4px 0;
}

.nav-item > a {
width: 100%;
min-height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1rem;
font-weight: 500;
}

.nav-item.has-dropdown > a::after {
content: "+";
font-size: 1.2rem;
color: var(--text-m);
transition: transform 0.3s ease, color 0.3s ease;
}

.nav-item.open > a::after {
content: "−";
color: var(--text);
}

.dropdown {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 100% !important;
margin-top: 0;
padding: 0;
max-height: 0;
overflow: hidden;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
transition: max-height 0.4s ease, padding 0.3s ease, margin 0.3s ease;
}

.dropdown.show {
max-height: 1000px;
padding: 12px 0 16px;
margin-top: 4px;
}

.mega-menu {
display: block !important;
width: 100% !important;
padding: 0 !important;
background: transparent !important;
grid-template-columns: none !important;
gap: 0 !important;
}

.mega-col {
margin-bottom: 18px;
padding-left: 8px;
}

.mega-col h4 {
font-size: 0.78rem;
margin-bottom: 10px;
letter-spacing: 1px;
}

.mega-col li {
margin-bottom: 0;
}

.mega-col li a {
display: block;
padding: 10px 0;
font-size: 0.95rem;
color: var(--text-m);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transform: none !important;
}

.mega-col li a:hover {
color: var(--text);
}

.mega-feat {
margin-top: 10px;
padding: 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
}

.footer-container {
grid-template-columns: 1fr 1fr;
}

.hero-carousel {
min-height: 620px;
height: 92vh;
}

.hero-content {
padding-top: 120px;
padding-bottom: 120px;
}

.hero-desc {
max-width: 580px;
font-size: 1rem;
}

.hero-controls {
right: 5%;
bottom: 90px;
}
}

@media (max-width: 768px) {
    

.grid {
display: grid;
grid-template-columns: repeat(1, minmax(200px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.news-container {
grid-template-columns: 1fr;
}

.sol-card {
min-width: 85vw;
height: 400px;
}

.hero-carousel {
min-height: 560px;
height: 88vh;
}

.hero-content {
align-items: flex-start;
padding: 120px 5% 120px;
}

.hero-title {
letter-spacing: -1px;
}

.hero-desc {
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 28px;
}

.hero-actions {
width: 100%;
/*flex-direction: column;*/
align-items: stretch;
max-width: 280px;
}

.hero-controls {
right: 5%;
bottom: 84px;
}

.hero-arrow {
width: 46px;
height: 46px;
}

.hero-pagination {
left: 5%;
bottom: 42px;
}

.hero-dot {
width: 26px;
}

.hero-dot.active {
width: 42px;
}

.section-head-between {
flex-direction: column;
align-items: flex-start;
}
}

@media (max-width: 600px) {
.lang-current {
min-width: 60px;
padding: 0 10px;
}

.lang-current span {
font-size: 0.72rem;
}

.lang-dropdown {
min-width: 132px;
}

.footer-container {
grid-template-columns: 1fr;
}

.cta-actions {
flex-direction: column;
}

.cta-title {
font-size: 1.2rem;
}
.cta-section{
    padding: 100px 5%;
}
.cta-desc{
        font-size: .8rem;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
margin-top: 0;
}
}

@media (max-width: 480px) {
.hero-content {
padding-top: 110px;
padding-bottom: 110px;
}

.hero-kicker {
font-size: 0.74rem;
letter-spacing: 1.5px;
}

.hero-desc {
font-size: 0.92rem;
}
}

.breadcrumb{padding:100px 0px 0;display:flex;gap:10px;color:var(--text-m);font-size:.86rem;flex-wrap:wrap;    margin-bottom: 20px;}
.breadcrumb span:last-child{color:var(--text-m)}

.products .breadcrumb{padding:100px 0 0}
.news .hero{padding:28px 40px 34px}
.news .hero-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);padding:36px;display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:stretch}
.news .hero-copy-top{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.news .badge{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(0,122,255,.14);color:#b4d6ff;font-size:.76rem;font-weight:700;border:1px solid rgba(0,122,255,.20)}
.news .hero h1{font-size:clamp(2.3rem,4vw,3.8rem);line-height:1.03;letter-spacing:-1.5px;margin-bottom:14px}
.news .hero-desc{color:var(--text-m);font-size:1rem;line-height:1.8;max-width:620px;margin-bottom:24px}
.news .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px}
.news .hero-stat{padding:16px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.02)}
.news .hero-stat strong{display:block;font-size:1.08rem;margin-bottom:6px}
.news .hero-stat span{display:block;color:var(--text-m);font-size:.82rem;line-height:1.55}
.news .hero-featured{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border);background-size:cover;background-position:center;display:flex;align-items:end;box-shadow:var(--shadow)}
.news .hero-featured::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.18))}
.news .hero-featured-content{position:relative;z-index:2;padding:28px}
.news .hero-featured-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.news .hero-featured-meta span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:.74rem;font-weight:700}
.news .hero-featured h2{font-size:1.7rem;line-height:1.2;margin-bottom:10px}
.news .hero-featured p{color:rgba(255,255,255,.78);font-size:.94rem;line-height:1.75;margin-bottom:18px;max-width:520px}
.news .hero-featured-link{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600}

.news .toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:6px 40px 28px;flex-wrap:wrap}
.news .toolbar-left{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.news .searchbox{min-width:280px;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.02)}
.news .searchbox svg{width:16px;height:16px;stroke:var(--text-m);stroke-width:2;fill:none;flex:0 0 auto}
.news .searchbox input{width:100%;border:none;background:transparent;outline:none;color:var(--text)}
.news .filter-chips{display:flex;gap:10px;flex-wrap:wrap}
.news .filter-chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text-m);font-size:.88rem;cursor:pointer;transition:var(--transit)}
.news .filter-chip:hover,.filter-chip.active{color:var(--text);border-color:rgba(0,122,255,.28);background:rgba(0,122,255,.10)}
.news .toolbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.news .result-text{color:var(--text-m);font-size:.9rem}
.news .select{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text);outline:none}

.news .news-layout{display:grid;gap:24px;padding-bottom:28px}
.news .news-main{display:grid;gap:18px}
.news .news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.news .news-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transit);display:flex;flex-direction:column}
.news .news-card:hover{transform:translateY(-6px);border-color:rgba(0,122,255,.22)}
.news .news-thumb{position:relative;height:220px;overflow:hidden}
.news .news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.news .news-card:hover .news-thumb img{transform:scale(1.04)}
.news .news-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.28),transparent)}
.news .news-body{padding:22px;display:flex;flex-direction:column;flex:1}
.news .news-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.news .news-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(0,122,255,.14);color:#b4d6ff;border:1px solid rgba(0,122,255,.20);font-size:.74rem;font-weight:700}
.news .news-date{color:var(--text-m);font-size:.8rem}
.news .news-title{font-size:1.18rem;line-height:1.35;margin-bottom:10px}
.news .news-excerpt{color:var(--text-m);font-size:.92rem;line-height:1.75;margin-bottom:18px;flex:1}
.news .news-link{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600}

.news .news-list-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:22px}
.news .news-list-card h3{font-size:1.08rem;margin-bottom:16px}
.news .sidebar-list{display:grid;gap:14px}
.news .sidebar-item{padding:14px;border-radius:18px;background:rgba(255,255,255,.02);border:1px solid var(--border);transition:var(--transit)}
.news .sidebar-item:hover{border-color:rgba(0,122,255,.22)}
.news .sidebar-item span{display:inline-block;color:var(--accent-2);font-size:.76rem;font-weight:700;margin-bottom:8px}
.news .sidebar-item h4{font-size:.95rem;line-height:1.45;margin-bottom:8px}
.news .sidebar-item p{color:var(--text-m);font-size:.84rem;line-height:1.7}
.news .sidebar-section+.sidebar-section{margin-top:18px}
.news .newsletter{padding:18px;border-radius:20px;background:linear-gradient(180deg,rgba(0,122,255,.10),rgba(255,255,255,.02));border:1px solid rgba(0,122,255,.16)}
.news .newsletter h3{font-size:1.08rem;margin-bottom:10px}
.news .newsletter p{color:var(--text-m);font-size:.88rem;line-height:1.75;margin-bottom:14px}
.news .newsletter p{color:var(--text-m);font-size:.88rem;line-height:1.75;margin-bottom:14px}
.news .newsletter .field{width:100%;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text);outline:none;margin-bottom:10px}
.news .newsletter .btn{width:100%}

.news .pagination{display:flex;justify-content:center;gap:10px;padding:10px 0 90px;flex-wrap:wrap}
.news .page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text-m);cursor:pointer;transition:var(--transit)}
.news .page-btn:hover,.page-btn.active{color:var(--text);border-color:rgba(0,122,255,.28);background:rgba(0,122,255,.10)}
.news .empty-state{display:none;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px dashed var(--border-strong);border-radius:24px;box-shadow:var(--shadow);padding:44px 28px;text-align:center;color:var(--text-m)}
.news .empty-state.show{display:block}

@media (max-width:1100px){
.news .hero-card,.news-layout{grid-template-columns:1fr}
.news .news-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media (max-width:768px){
.breadcrumb {
padding: 100px 0px 0;
}
.news .hero,.news .toolbar,.news .news-main{padding:22px 0px}
.news .nav{display:none}
.news .header-inner{height:auto;padding:16px 0}
.news .hero-card,.news .news-list-card,.news .empty-state{padding:22px}
.news .hero-stats,.news .news-grid{grid-template-columns:1fr}
.news .hero-featured{min-height:320px}
.news .toolbar,.news .toolbar-left,.news .toolbar-right{width:100%}
.news .searchbox{min-width:0;width:100%}
.news .select{width:100%}
.news .header-actions{flex-direction:column;align-items:stretch}
}



.products .delay-1 { transition-delay: 0.08s; }
.products .delay-2 { transition-delay: 0.16s; }
.products .delay-3 { transition-delay: 0.24s; }

.products .page-hero {
    position: relative;
    padding: 150px 5% 70px;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 20% 20%, rgba(0,122,255,0.12), transparent 35%),
        linear-gradient(to bottom, #0a0a0a, #050505);
}

.products .page-hero-inner {
    max-width: 1400px;
    margin: 0 auto;
}


.products .page-kicker {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.products .page-title {
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -1.5px;
    max-width: 900px;
    margin-bottom: 18px;
}

.products .page-desc {
    max-width: 760px;
    color: rgba(255,255,255,0.72);
    font-size: 1.02rem;
    line-height: 1.9;
}

.products .product-page {
    padding: 60px 5% 100px;
}

.products .product-page-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.products .sidebar {
    position: sticky;
    top: 104px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow);
}

.products .sidebar-title {
    font-size: 0.78rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 18px;
}

.products .category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.products .category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    color: var(--text-m);
    transition: var(--transit);
    background: transparent;
    border: 1px solid transparent;
}

.products .category-link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.05);
}

.products .category-link.active {
    color: #fff;
    background: rgba(0,122,255,0.14);
    border-color: rgba(0,122,255,0.32);
}

.products .category-link span:last-child {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.4);
}

.products .sidebar-box {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.products .sidebar-note {
    color: var(--text-m);
    font-size: 0.88rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.products .content-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.products .content-top-left h2 {
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.products  .content-top-left p {
    color: var(--text-m);
    font-size: 0.95rem;
}

.products .result-meta {
    color: var(--text-m);
    font-size: 0.88rem;
}

.products .product-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.products .product-item {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 26px;
    padding: 24px;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border: 1px solid var(--border);
    border-radius: 22px;
    transition: var(--transit);
    overflow: hidden;
}

.products .product-item:hover {
    transform: translateY(-6px);
    border-color: rgba(0,122,255,0.26);
    box-shadow: 0 18px 50px rgba(0,0,0,0.3);
}

.products .product-media {
    position: relative;
    min-height: 220px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 30%, rgba(0,122,255,0.12), transparent 45%),
        rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.products .product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transit);
}

.products .product-item:hover .product-media img {
    transform: scale(1.04);
}

.products .product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(0,122,255,0.9);
    color: #fff;
}

.products .product-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.products .product-topline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.products .product-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
}

.products .product-series {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.42);
}

.products .product-name {
    font-size: 1.7rem;
    line-height: 1.2;
    margin-bottom: 12px;
}

.products .product-desc {
    color: var(--text-m);
    font-size: 0.95rem;
    line-height: 1.85;
    max-width: 760px;
    margin-bottom: 18px;
}

.products .spec-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.products .spec-card {
    padding: 14px 14px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}

.products .spec-label {
    display: block;
    font-size: 0.76rem;
    color: var(--text-m);
    margin-bottom: 4px;
}

.products .spec-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.products .product-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.products .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.products .page-btn {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
    color: var(--text-m);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transit);
}

.products  .page-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: rgba(255,255,255,0.06);
}

.products .page-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}


@media (max-width: 1100px) {
  .products  .product-page-inner {
        grid-template-columns: 1fr;
    }

  .products  .sidebar {
        position: static;
    }
}

@media (max-width: 992px) {
  .products  .product-item {
        grid-template-columns: 1fr;
    }

  .products  .product-media {
        min-height: 260px;
    }
}

@media (max-width: 768px) {
  .products  .page-hero {
        padding-top: 130px;
    }

  .products  .content-top {
        flex-direction: column;
        align-items: flex-start;
    }

  .products  .spec-grid {
        grid-template-columns: 1fr;
    }

  .products  .product-name {
        font-size: 1.45rem;
    }
}

@media (max-width: 600px) {
  .products  .product-actions {
        flex-direction: column;
        align-items: stretch;
    } 
}

/* ===== Floating Inquiry Widget ===== */
.inquiry-float{
position: fixed;
right:100px;
bottom: 26px;
z-index: 999;
display: flex;
align-items: flex-end;
gap: 14px;
z-index: 99999;
pointer-events: auto;
}

.inquiry-panel{
border:1px solid var(--border);
border-radius:24px;
overflow:hidden;
background:linear-gradient(180deg, rgba(255, 255, 255, .045), rgb(0 0 0 / 80%));
box-shadow:0 24px 70px rgba(0,0,0,.55);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
transform-origin:bottom right;
opacity:0;
height: 0;
width: 0;
visibility:hidden;
transform:translateY(18px) scale(.96);
transition:var(--transit);
pointer-events:none;
}

.inquiry-float.open .inquiry-panel{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
pointer-events:auto;
height: auto;
width:min(380px,calc(100vw - 32px));

}

.inquiry-header{
padding:18px 18px 16px;
border-bottom:1px solid var(--border);
background:
radial-gradient(circle at right top, rgba(0,122,255,.18), transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
}

.inquiry-header-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;

}

.inquiry-badge{
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:rgba(0,122,255,.14);
color:#b4d6ff;
border:1px solid rgba(0,122,255,.22);
font-size:.74rem;
font-weight:700;
letter-spacing:.4px;
}

.inquiry-close{
width:34px;
height:34px;
border:none;
border-radius:999px;
background:rgba(255,255,255,.05);
color:var(--text);
cursor:pointer;
transition:var(--transit);
}
.inquiry-close:hover{background:rgba(255,255,255,.1)}

.inquiry-title{
font-size:1.08rem;
margin-bottom:6px;
}

.inquiry-subtitle{
color:var(--text-m);
font-size:.76rem;
line-height:1.7;
}

.inquiry-body{
padding:18px;
}

.inquiry-form{
display:grid;
gap:12px;
}

.inquiry-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.inquiry-group{
display:grid;
gap:7px;
}
.inquiry-group.full{grid-column:1 / -1}

.inquiry-label{
font-size:.82rem;
color:var(--text-m);
}

.inquiry-input,
.inquiry-select,
.inquiry-textarea{
width:100%;
min-height:34px;
padding:0 14px;
border-radius:14px;
border:1px solid var(--border);
background:rgba(255,255,255,.02);
color:var(--text);
outline:none;
transition:var(--transit);
}

.inquiry-textarea{
min-height:80px;
padding:14px;
resize:vertical;
}

.inquiry-input:focus,
.inquiry-select:focus,
.inquiry-textarea:focus{
border-color:var(--border-strong);
box-shadow:0 0 0 3px rgba(0,122,255,.12);
}

.inquiry-note{
color:var(--text-m);
font-size:.78rem;
line-height:1.7;
}

.inquiry-actions{
display:flex;
gap:10px;
align-items:center;
}

.inquiry-btn{
flex:1;
min-height:44px;
border:none;
border-radius:999px;
font-weight:600;
cursor:pointer;
transition:var(--transit);
}

.inquiry-btn.primary{
background:var(--text);
color:var(--bg);
}
.inquiry-btn.primary:hover{transform:translateY(-2px)}

.inquiry-btn.secondary{
background:transparent;
color:var(--text);
border:1px solid var(--border);
}
.inquiry-btn.secondary:hover{background:var(--glass-2)}

.inquiry-trigger{
width:64px;
height:64px;
border:none;
border-radius:999px;
background:radial-gradient(circle at 30% 30%, rgba(56, 189, 248, .3), transparent 30%), linear-gradient(135deg, rgb(0 0 0 / 95%), rgb(0 105 208 / 95%));
color:#fff;
box-shadow:0 18px 40px rgba(0,122,255,.28), 0 8px 24px rgba(0,0,0,.35);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:var(--transit);
position:relative;
overflow:hidden;
}

.inquiry-trigger::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 48%);
pointer-events:none;
}

.inquiry-trigger:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:0 22px 46px rgba(0,122,255,.34), 0 12px 28px rgba(0,0,0,.4);
}

.inquiry-trigger svg{
width:24px;
height:24px;
stroke:currentColor;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}

.inquiry-pulse{
position:absolute;
inset:-8px;
border-radius:999px;
border:1px solid rgba(0,122,255,.28);
animation:pulse 2.4s ease-out infinite;
}

@keyframes pulse{
0%{transform:scale(.92);opacity:.8}
70%{transform:scale(1.18);opacity:0}
100%{transform:scale(1.18);opacity:0}
}

@media (max-width:768px){
.demo-card{padding:24px;border-radius:24px}

.inquiry-float{
right:12px;
left:12px;
bottom:24px;
display:block;
}

/* 绉诲姩绔敼涓哄簳閮ㄦ娊灞夛紝鏇撮€傚悎鎵嬫寚鎿嶄綔 */
.inquiry-panel{
width:100%;
/*max-height:min(78vh,680px);*/
border-radius:22px 22px 18px 18px;
transform-origin:bottom center;
transform:translateY(24px);
overflow:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}

.inquiry-panel::-webkit-scrollbar{
display:none;
}

.inquiry-float.open .inquiry-panel{
transform:translateY(0);
}

.inquiry-header{
position:sticky;
top:0;
z-index:2;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}

.inquiry-grid{
grid-template-columns:1fr;
}

.inquiry-actions{
flex-direction:column;
}

.inquiry-btn{
width:100%;
}

.inquiry-trigger{
width:56px;
height:56px;
position:fixed;
right:16px;
bottom:16px;
z-index:1001;
}

.inquiry-pulse{
inset:-6px;
}

.product-filter{
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
}

}


.aero-icon-facebook {
    background-color: #3b5998
}

.aero-icon-twitter {
    background-color: #1da1f2
}

.aero-icon-linkedin {
    background-color: #0077b5
}

.aero-icon-whatsapp {
    background-color: #4dc247
}

.aero-icon-telegram {
    background-color: #24a1de
}

.aero-icon-skype {
    background-color: #00aff0
}

.aero-icon-instagram {
    background-color: #bb2a7b
}

.aero-icon-pinterest {
    background-color: #cb2027
}

.aero-icon-tiktok {
    background-color: #000
}

.aero-icon-youtube {
    background-color: #fa0001
}

.aero-icon-tumblr {
    background-color: #2f4f6e
}

.aero-icon-vk {
    background-color: #6383a8
}

.aero-icon-weibo {
    background-color: #e6162d
}

.aero-icon-wechat {
    background-color: #3dbe5b
}

.aero-icon-qq {
    background-color: #21b3f7
}

.aero-icon-email {
    background-color: #0a88ff
}

.aero-icon-print {
    background-color: #738a8d
}

/* ===== Floating Contact Nav ===== */
.contact-float{
  position:fixed;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  z-index:999;
}

.contact-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.contact-item{
  position:relative;
}

.contact-btn{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--glass);
  backdrop-filter:blur(10px);
  color:#fff;
  cursor:pointer;
  transition:var(--transit);
}

.contact-btn:hover{
  background:var(--glass-2);
  transform:translateX(-4px);
}

.contact-btn svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
}

.contact-label{
  position:absolute;
  right:70px;
  top:50%;
  transform:translateY(-50%) translateX(10px);
  background:rgba(0,0,0,.85);
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:8px;
  font-size:.78rem;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:var(--transit);
}

.contact-item:hover .contact-label{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

.qr-box{
  position:absolute;
  right:70px;
  top:50%;
  transform:translateY(-50%) scale(.95);
  width:160px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#0b0b0b;
  box-shadow:var(--shadow);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:var(--transit);
}

.contact-item:hover .qr-box{
  opacity:1;
  transform:translateY(-50%) scale(1);
}

.qr-box img{
  width:100%;
  border-radius:6px;
  margin-bottom:6px;
}

.qr-box span{
  font-size:.75rem;
  color:var(--text-m);
}

@media (max-width:768px){
  .contact-float{
    right:12px;
    bottom:20px;
    top:auto;
    transform:none;
  }

  .contact-list{
    flex-direction:row;
    gap:10px;
  }

  .contact-btn{
    width:48px;
    height:48px;
    border-radius:14px;
  }

  .contact-label{
    display:none;
  }

  .qr-box{
    right:auto;
    left:50%;
    top:auto;
    bottom:64px;
    transform:translateX(-50%) scale(.9);
  }

  .contact-item:hover .qr-box{
    transform:translateX(-50%) scale(1);
  }
}

.single .hero{padding:0px 0 26px}
.single .hero-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.single .hero-main{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.single .hero-inner{padding:34px 34px 0}
.single .hero-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.single .hero-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.single .badge{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(0,122,255,.14);color:#b4d6ff;font-size:.76rem;font-weight:700;border:1px solid rgba(0,122,255,.20)}
.single .meta-text{color:var(--text-m);font-size:.86rem}
.single .hero-title{font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.08;letter-spacing:-1.4px;margin-bottom:16px;max-width:900px}
.single .hero-desc{color:var(--text-m);font-size:1rem;line-height:1.8;max-width:820px}
/*.single .hero-cover{position:relative;height:420px;border-top:1px solid var(--border);overflow:hidden}*/
.single .hero-cover img{width:100%;height:100%;object-fit:cover}
.single .hero-cover::after{content:"";position:absolute;inset:0;}
.single .hero-side{display:grid;gap:18px;position:sticky;top:100px}
.single .side-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:22px}
.stat-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
}
.stat-card strong {
    display: block;
    font-size: 1.12rem;
    margin-bottom: 6px;
}
.stat-card span {
    display: block;
    color: var(--text-m);
    font-size: .84rem;
    line-height: 1.6;
}

.hero-cover{position:relative;border-top:1px solid var(--border);overflow:hidden;}
.product-gallery{position:relative;z-index:9}
.gallery-stage{position:relative;overflow:hidden;border-radius:12px}
.gallery-slides{display:flex;height:100%;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.gallery-slide{min-width:100%;height:100%;position:relative;flex:0 0 100%}
.gallery-slide img{width:100%;height:100%;object-fit:cover}
.gallery-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.34),transparent 42%)}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--border-strong);background:rgba(10,10,10,.48);backdrop-filter:blur(10px);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:var(--transit)}
.gallery-nav:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.gallery-prev{left:18px}
.gallery-next{right:18px}
.gallery-caption{position:absolute;left:24px;right:24px;bottom:18px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.gallery-caption strong{font-size:1.06rem}
.gallery-caption span{display:block;color:rgba(255,255,255,.7);font-size:.84rem;margin-top:6px;line-height:1.6}
.gallery-count{padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12);font-size:.82rem;color:#f3f3f3}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 0px;}
.gallery-thumb{position:relative;height:82px;overflow:hidden;border:1px solid transparent;background:none;padding:0;cursor:pointer;transition:var(--transit);border-radius:12px}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:var(--transit)}
.gallery-thumb.active{border-color:rgba(0,122,255,.45);box-shadow:inset 0 0 0 1px rgba(0,122,255,.24)}
.gallery-thumb.active img,.gallery-thumb:hover img{opacity:1;transform:scale(1.04)}
.gallery-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:none;gap:8px;z-index:2}
.gallery-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.32);border:none;padding:0;cursor:pointer;transition:var(--transit)}
.gallery-dot.active{width:24px;background:#fff}
.table-wrap{margin:24px 0;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.02)}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--border);font-size:.92rem}
.spec-table th{width:220px;color:var(--text-m);font-weight:600;background:rgba(255,255,255,.02)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}
.single .hero-stats {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 14px; margin: 24px 0}
.single .side-card h3{font-size:1.04rem;margin-bottom:14px}
.single .side-card p{color:var(--text-m);font-size:.9rem;line-height:1.75}
.single .author-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.single .author-avatar{width:48px;height:48px;border-radius:999px;background:linear-gradient(135deg,rgba(0,122,255,.25),rgba(255,255,255,.06));display:flex;align-items:center;justify-content:center;font-weight:700;color:#dbeafe;border:1px solid rgba(255,255,255,.08);overflow:hidden}

.single .author-info strong{display:block;font-size:.96rem;margin-bottom:4px}
.single .author-info span{color:var(--text-m);font-size:.82rem}
.single .side-list{display:grid;gap:12px}
.single .side-item{padding:14px;border-radius:18px;background:rgba(255,255,255,.02);border:1px solid var(--border);transition:var(--transit)}
.single .side-item:hover{border-color:rgba(0,122,255,.22)}
.single .side-item span{display:inline-block;color:var(--accent);font-size:.75rem;font-weight:700;margin-bottom:8px}
.single .side-item h4{font-size:.94rem;line-height:1.45;margin-bottom:6px}
.single .side-item p{font-size:.84rem;line-height:1.65}
.single .share-row{display:flex;gap:10px;flex-wrap:wrap}
.single .share-btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text-m);transition:var(--transit);cursor:pointer}
.single .share-btn:hover{color:var(--text);border-color:rgba(0,122,255,.24);background:rgba(0,122,255,.08)}
.single .share-btn.facebook{background:#3b5998}
.single .share-btn .icon-socialmedia{background:transparent}
.single .content-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;padding-bottom:28px}
.single .article-card{padding:34px }
.single .article-body{max-width:var(--content)}
.single .article-body p{color:#d8d8d8;line-height:1.95;font-size:1rem;margin-bottom:22px}
.single .article-body h2{font-size:1.8rem;line-height:1.25;letter-spacing:-.6px;margin:0px 0 16px}
.single .article-body h3{font-size:1.2rem;line-height:1.35;margin:26px 0 12px}
.single .article-body ul{margin:0 0 22px 20px;color:#d8d8d8}
.single .article-body li{margin-bottom:10px;line-height:1.85}
.single .article-body blockquote{margin:30px 0;padding:22px 24px;border-left:3px solid var(--accent);background:rgba(255,255,255,.03);border-radius:0 18px 18px 0;color:#eef6ff;line-height:1.9}
.single .article-body figure{margin:28px 0}
.single .article-body figure img{width:100%;border-radius:22px;border:1px solid var(--border);box-shadow:var(--shadow);max-height:460px;object-fit:cover}
.single .article-body figcaption{margin-top:10px;color:var(--text-m);font-size:.84rem;line-height:1.6}
.single .article-highlight{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0px 0 12px}
.single .highlight-card{padding:18px;border-radius:18px;font-size:14px;color:var(--text-m);border:1px solid var(--border);background:rgba(255,255,255,.02)}
.single .highlight-card strong{display:block;font-size:1rem;margin-bottom:8px;color:var(--white)}
.single .highlight-card span{display:block;color:var(--text-m);font-size:.88rem;line-height:1.7}
.single .article-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--border)}
.single .article-tag{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text-m);font-size:.84rem}

.single .sticky-panel{display:grid;gap:18px;position:sticky;top:100px;align-self:start}
.single .toc-list{display:grid;gap:10px}
.single .toc-link{display:block;padding:10px 12px;border-radius:14px;color:var(--text-m);background:rgba(255,255,255,.02);border:1px solid transparent;transition:var(--transit);font-size:.88rem}
.single .toc-link:hover,.single .toc-link.active{color:var(--text);background:rgba(0,122,255,.08);border-color:rgba(0,122,255,.20)}
.single .download-panel{padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(0,122,255,.10),rgba(255,255,255,.02));border:1px solid rgba(0,122,255,.16)}
.single .download-panel p{margin-bottom:14px}

.single .related-section{padding:0 0 26px}
.single .related-card-wrap{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);padding:30px}
.single .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.single .section-head h2{font-size:1.6rem;letter-spacing:-.5px}
.single .section-head p{color:var(--text-m);line-height:1.8;max-width:760px}
.single .related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.single .related-card{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:22px;overflow:hidden;transition:var(--transit)}
.single .related-card:hover{transform:translateY(-5px);border-color:rgba(0,122,255,.22)}
.single .related-thumb{height:200px;overflow:hidden}
.single .related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.single .related-card:hover .related-thumb img{transform:scale(1.04)}
.single .related-body{padding:18px}
.single .related-body span{display:inline-block;color:var(--accent);font-size:.76rem;font-weight:700;margin-bottom:8px}
.single .related-body h3{font-size:1.02rem;line-height:1.45;margin-bottom:8px}
.single .related-body p{color:var(--text-m);font-size:.88rem;line-height:1.7}

.single .cta{padding:10px 0 90px}
.single .cta-box{background:radial-gradient(circle at center, rgba(0,122,255,.14), transparent 42%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--border);color:var(--text);border-radius:28px;padding:42px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;box-shadow:var(--shadow)}
.single .cta-box h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:10px;letter-spacing:-1px}
.single .cta-box p{color:var(--text-m);line-height:1.8;max-width:760px}
.single .cta-actions{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:1100px){
.single .hero-wrap,.single .content-wrap,.single .cta-box{grid-template-columns:1fr;gap:0}
.single .hero-side,.single .sticky-panel{position:static}
.single .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


.hero-flex {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 600px;
    gap: 24px;
    align-items: start;
    margin-bottom: 30px;
}
@media (max-width:768px){
  .gallery-stage{height:280px}
  .gallery-nav{width:42px;height:42px}
  .gallery-caption{left:16px;right:16px;bottom:14px}
  .g
.single .nav{display:none}
.single .header-inner{height:auto;padding:16px 0}
.single .header-actions{flex-direction:column;align-items:stretch}
.single .hero-inner,.single .article-card,.single .side-card,.single .related-card-wrap,.single .cta-box{padding:22px}
/*.single .hero-cover{height:260px}*/
.single .article-highlight,.single .related-grid{grid-template-columns:1fr}
.single .cta-actions{flex-direction:column;align-items:stretch}
.single .hero-flex{
    display:inherit;
     grid-template-columns:inherit ;
}
    .single .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .single .hero-top{display:none}
     .single   .hero-inner{padding:12px}
     .single .hero-flex .hero-inner{padding:0}
     .single .hero-title {
        font-size: clamp(1.25rem, 4vw, 3.6rem);
        margin-bottom: 12px;
     }
    .single .hero-desc ,.single .article-body,.single .article-body p,.single .section-head p,.stat-card strong,.single .highlight-card,.single .highlight-card strong{
        font-size: 0.875rem;
    }
    .single .article-body h2 ,.single .section-head h2{
        font-size: 1rem;
        padding-bottom: 12px;
    }
    .spec-table th {
        width: 180px;
        font-size: 0.875rem;
    }
    .single .side-card{display:none;}
    .single .stat-card{font-size:0.875rem;padding:14px}
    .mega-footer {
        padding: 50px 6% 40px;
    }
    
    .single .hero-main {
        background: transparent;
        border: none;
        overflow: inherit;
    }
    .single .hero-main .hero-inner,.single .hero-main .article-card{padding:0}
    .single .hero-desc{margin-bottom:12px}
    .single .article-body blockquote {
        margin: 15px 0;
        padding:12px;
      
    }

}



/* ===== detail page ===== */
  .single .detail-page {
  padding: 0 0 88px;
}

  .single .detail-main {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 34px;
  align-items: start;
  margin-bottom: 34px;
}

  .single .panel,
  .single .section-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

/* ===== gallery ===== */
  .single .gallery {
  position: sticky;
  top: 96px;
}

  .single .gallery-main {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #111 0%, #080808 100%);
  border: 1px solid rgba(255,255,255,0.06);
  aspect-ratio: 1 / 1;
}

  .single .gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

  .single .gallery-main:hover img {
  transform: scale(1.04);
}

  .single .gallery-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
}

  .single .gallery-thumbs-wrap {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
}

  .single .gallery-thumbs-slider {
  overflow: hidden;
}

  .single .gallery-thumbs-track {
  display: flex;
  gap: 12px;
}

  .single .thumb {
  flex: 0 0 88px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.7;
  transition: var(--transition);
}

  .single .thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

  .single .thumb:hover,
  .single .thumb.active {
  opacity: 1;
  border-color: rgba(47, 124, 255, 0.65);
  box-shadow: 0 0 0 2px rgba(47,124,255,0.14);
  transform: translateY(-2px);
}

  .single .thumb-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background:var(--bg);
  color:var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

  .single .thumb-arrow:hover {
  background: rgba(47, 124, 255, 0.12);
  border-color: rgba(47, 124, 255, 0.45);
  transform: translateY(-2px);
}

/* ===== summary ===== */
  .single .summary {
  padding: 34px;
  border-radius: 34px;
}

  .single .detail-category {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(47, 124, 255, 0.22);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

  .single .detail-title {
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
  font-weight: 700;
}

  .single .detail-intro {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.9;
  margin-bottom: 24px;
}

  .single .detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

  .single .detail-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color:var(--text);
  transition: var(--transition);
}

  .single .detail-tags span:hover {
  background: rgba(47, 124, 255, 0.10);
  border-color: rgba(47, 124, 255, 0.40);
}

  .single .detail-highlight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

  .single .highlight-item {
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

  .single .highlight-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

  .single .highlight-value {
  display: block;
  font-size: 14px;
  color: #fff;
  /*font-weight: 600;*/
}

  .single .detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}


  .single .contact-note {
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.85;
}

  .single .contact-note strong {
  color: #fff;
  font-weight: 600;
}

/* ===== section cards ===== */
  .single .detail-sections {
  display: grid;
  gap: 24px;
}

  .single .section-card {
  overflow: hidden;
}

  .single .section-head {
        font-size: 1.4rem;
}
.single .section-head p{
    font-size: 16px;
}



/* ===== features ===== */
  .single .feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

  .single .feature-item {
  padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: var(--transition);
}

  .single .feature-item:hover {
  transform: translateY(-4px);
  border-color: rgba(47,124,255,0.24);
  box-shadow: 0 14px 34px rgba(0,0,0,0.25);
}

  .single .feature-item h4 {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 10px;
  color: #fff;
}

  .single .feature-item p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-muted);
}

/* ===== spec table ===== */
  .single .spec-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.015);
}

  .single .spec-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

  .single .spec-table tbody tr:last-child {
  border-bottom: none;
}

  .single .spec-table th,
  .single .spec-table td {
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.8;
}

  .single .spec-table th {
  width: 220px;
  color: var(--text-muted);
  font-weight: 500;
  background: rgba(255,255,255,0.02);
}

  .single .spec-table td {
  color: #fff;
}

/* ===== app grid ===== */
  .single .app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

  .single .app-item {
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: var(--transition);
}

  .single .app-item:hover {
  transform: translateY(-4px);
  border-color: rgba(47,124,255,0.24);
}

.app-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

  .single .app-item > div {
  padding: 20px;
}

  .single .app-item h4 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff;
}

  .single .app-item p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.85;
}

/* ===== related ===== */
  .single .related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

  .single .related-card {
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: var(--transition);
}

  .single .related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47,124,255,0.24);
  box-shadow: 0 18px 36px rgba(0,0,0,0.26);
}

  .single .related-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

  .single .related-body {
  padding: 22px;
}

  .single .related-body > span {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

  .single .related-body h3 {
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 10px;
  color: #fff;
}

  .single .related-body p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.85;
  margin-bottom: 18px;
}

  .single .small-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

  .single .small-btn:hover {
  background: rgba(47,124,255,0.12);
  border-color: rgba(47,124,255,0.36);
}

/* ===== responsive ===== */
@media (max-width: 1100px) {
   .single  .detail-main {
    grid-template-columns: 1fr;
  }

  .single   .gallery {
    position: static;
  }

   .single  .feature-grid,
   .single  .app-grid,
   .single  .related-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {


   .single  .page-banner {
    padding: 64px 0 52px;
  }

  .single   .detail-page {
    padding: 0px 0 64px;
  }

   .single  .gallery,
   .single  .summary {
    padding:0;
  }

   .single  .section-head {
    padding: 20px 0px;
    font-size: 18px;
  }

  .single   .detail-title {
    font-size: 32px;
  }

   .single  .detail-highlight {
    grid-template-columns: 1fr;
  }

   .single  .detail-actions {
    flex-direction: column;
  }

 
   .single  .gallery-thumbs-wrap {
    grid-template-columns: 36px 1fr 36px;
    gap: 10px;
  }

   .single  .thumb {
    flex-basis: 72px;
  }

   .single  .thumb-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

   .single  .spec-table th,
   .single  .spec-table td {
    display: block;
    width: 100%;
    padding: 14px 16px;
  }

   .single  .spec-table th {
    /*padding-bottom: 4px;*/
    padding: 0;
    background: transparent;
  }

  .single   .spec-table td {
   
    padding: 0;
  }
  .single .section-head{
      margin-bottom: 0;
      justify-content: center;
  }
  .single   .spec-table tbody tr {
    display: flex;
    border: none;
    }
}
.contact-actions {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}