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

 html {
   scroll-behavior: smooth
 }

 body {
   font-family: 'Inter', sans-serif;
   font-weight: 300;
   color: #111827;
   background: #fff;
   line-height: 1.6
 }

 a {
   text-decoration: none;
   color: inherit
 }

 img {
   max-width: 100%;
   display: block
 }

 ul {
   list-style: none
 }

 button {
   cursor: pointer;
   font-family: inherit
 }


 /* ─── Variables ─── */
 :root {
   --blue: #1095F5;
   --blue-mid: #0B7ED4;
   --blue-lt: #E0F2FE;
   --blue-dk: #0870C4;
   --slate: #0F172A;
   --gray1: #F8FAFC;
   --gray2: #F1F5F9;
   --gray3: #94A3B8;
   --gray4: #64748B;
   --radius: 10px;
   --sh-sm: 0 1px 4px rgba(0, 0, 0, .07);
   --sh-md: 0 4px 18px rgba(0, 0, 0, .10);
   --sh-lg: 0 12px 40px rgba(0, 0, 0, .13);
 }

 /* ─── Layout ─── */
 .container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 28px
 }

 /* ─── Page switcher ─── */
 .page {
   display: none
 }

 .page.active {
   display: block
 }

 /* ════════════════════════════════════════════
    1. ANNOUNCE BAR
 ════════════════════════════════════════════ */
 #announce {
   background: var(--blue);
   color: #fff;
   text-align: center;
   font-size: 13px;
   font-weight: 500;
   padding: 8px 16px;
 }

 #announce a {
   color: #93C5FD;
   font-weight: 600
 }

 /* ════════════════════════════════════════════
    2. NAV + MEGA MENU  — Black Minimal
 ════════════════════════════════════════════ */
 #navbar {
   background: #000;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
   position: sticky;
   top: 0;
   z-index: 999;
   transition: box-shadow .3s ease;
 }

 .nav-inner {
   display: flex;
   align-items: center;
   height: 60px;
   gap: 0;
 }

 /* Logo */
 .nav-logo {
   display: flex;
   align-items: center;
   gap: 0;
   flex-shrink: 0;
   margin-right: 44px;
   text-decoration: none;
 }

 .nav-logo-img {
   height: 34px;
   width: auto;
   display: block;
   filter: brightness(0) invert(1);
 }

 .nav-logo-box {
   display: none
 }

 /* Nav items */
 .nav-items {
   display: flex;
   align-items: center;
   height: 100%;
   flex: 1;
   gap: 0
 }

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

 .nav-link {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 0 14px;
   height: 100%;
   font-size: 13.5px;
   font-weight: 400;
   color: rgba(255, 255, 255, .75);
   border-bottom: 2px solid transparent;
   transition: color .2s, border-bottom .2s;
   white-space: nowrap;
   letter-spacing: .01em;
 }

 .nav-link:hover,
 .nav-item.open .nav-link {
   color: #fff;
   border-bottom-color: var(--blue);
 }

 .nav-link i {
   font-size: 9px;
   transition: transform .2s;
   color: rgba(255, 255, 255, .4)
 }

 .nav-item.open .nav-link i {
   transform: rotate(180deg)
 }

 /* Nav right */
 .nav-right {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   margin-left: auto;
   position: relative;
 }

 /* Nav App download buttons */
 .nav-app-btns {
   display: flex;
   gap: 6px;
   align-items: center
 }

 .nav-app-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   border-radius: 7px;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, .22);
   background: rgba(255, 255, 255, .08);
   color: rgba(255, 255, 255, .85);
   font-size: 12px;
   font-weight: 600;
   transition: background .18s, border-color .18s, color .18s;
   white-space: nowrap;
 }

 .nav-app-btn:hover {
   background: rgba(255, 255, 255, .16);
   border-color: rgba(255, 255, 255, .4);
   color: #fff
 }
.nav-app-btn .icon{
  width: 13px;height: 13px;
}
 .nav-app-btn i {
   font-size: 14px
 }

 .nav-app-btn-label {
   display: flex;
   flex-direction: column;
   line-height: 1.1
 }

 .nav-app-btn-sub {
   font-size: 9px;
   font-weight: 400;
   opacity: .6
 }

 .nav-app-btn-name {
   font-size: 11px;
   font-weight: 700
 }

 @media(max-width:900px) {
   .nav-app-btns {
     display: none
   }
 }

 .nav-icon {
   width: 34px;
   height: 34px;
   border-radius: 7px;
   border: none;
   background: transparent;
   color: rgba(255, 255, 255, .55);
   font-size: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .15s, color .15s;
 }

 .nav-icon:hover {
   background: rgba(255, 255, 255, .1);
   color: #fff
 }

 /* ── Language Switcher ── */
 .lang-switcher {
   position: relative;
   display: flex;
   align-items: center;
 }

 .nav-lang {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12.5px;
   font-weight: 500;
   color: rgba(255, 255, 255, .7);
   padding: 5px 10px;
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 6px;
   background: transparent;
   cursor: pointer;
   transition: border-color .15s, background .15s, color .15s;
   white-space: nowrap;
 }

 .nav-lang:hover {
   border-color: rgba(255, 255, 255, .4);
   color: #fff;
   background: rgba(255, 255, 255, .06)
 }

 .nav-lang .lang-flag {
   font-size: 15px;
   line-height: 1
 }

 .nav-lang .lang-code {
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: .04em
 }

 .nav-lang .lang-caret {
   font-size: 8px;
   color: rgba(255, 255, 255, .35);
   margin-left: 1px;
   transition: transform .2s;
 }

 .lang-switcher.open .nav-lang {
   border-color: var(--blue);
   color: #fff;
   background: rgba(16, 149, 245, .15);
 }

 .lang-switcher.open .lang-caret {
   transform: rotate(180deg)
 }

 /* Dropdown panel */
 .lang-dropdown {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   min-width: 192px;
   background: #1a1a1a;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 12px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
   padding: 6px;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-6px) scale(.97);
   transform-origin: top right;
   transition: opacity .18s, transform .18s;
   z-index: 1100;
 }

 .lang-switcher.open .lang-dropdown {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0) scale(1);
 }

 .lang-option {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 12px;
   border-radius: 8px;
   cursor: pointer;
   transition: background .12s;
 }

 .lang-option:hover {
   background: rgba(255, 255, 255, .08)
 }

 .lang-option.active {
   background: rgba(16, 149, 245, .18)
 }

 .lang-option .lo-flag {
   font-size: 20px;
   flex-shrink: 0
 }

 .lang-option .lo-info {
   display: flex;
   flex-direction: column;
   gap: 1px
 }

 .lang-option .lo-name {
   font-size: 13.5px;
   font-weight: 600;
   color: #fff
 }

 .lang-option .lo-native {
   font-size: 11.5px;
   color: rgba(255, 255, 255, .45)
 }

 .lang-option .lo-check {
   margin-left: auto;
   color: var(--blue);
   font-size: 13px;
   opacity: 0;
   transition: opacity .15s;
 }

 .lang-option.active .lo-check {
   opacity: 1
 }

 /* Hide on mobile (handled separately) */
 @media(max-width:768px) {
   .lang-switcher {
     display: none
   }
 }

 .btn-nav-outline {
   padding: 6px 14px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, .25);
   color: rgba(255, 255, 255, .8);
   font-size: 13px;
   font-weight: 500;
   background: transparent;
   transition: all .15s;
 }

 .btn-nav-outline:hover {
   border-color: #fff;
   color: #fff;
   background: rgba(255, 255, 255, .07)
 }

 .btn-nav-fill {
   padding: 6px 16px;
   border-radius: 6px;
   border: none;
   background: var(--blue);
   color: #fff;
   font-size: 13px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: all .15s;
 }

 .btn-nav-fill:hover {
   background: #0e7ee0;
   transform: translateY(-1px);
 }

 /* ── Mega Menu ── */
 .mega-wrap {
   position: fixed;
   top: 60px;
   /* updated dynamically by JS */
   left: 0;
   right: 0;
   background: #111;
   border-top: 1px solid rgba(255, 255, 255, .08);
   box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
   z-index: 998;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-8px);
   transition: opacity .2s, transform .2s;
 }

 .nav-item.open .mega-wrap {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
 }

 /* ── MEGA MENU v2 ── */
 .mega-v2-inner {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 28px;
 }

 .mega-col {
   padding: 28px 24px;
   border-right: 1px solid rgba(255, 255, 255, .07);
   transition: background .15s;
 }

 .mega-col:last-child {
   border-right: none
 }

 .mega-col-featured {
   background: rgba(16, 149, 245, .1);
 }

 .mega-col-hd {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: 14px;
   font-weight: 700;
   color: rgba(255, 255, 255, .9);
   margin-bottom: 16px;
   cursor: pointer;
   padding-bottom: 12px;
   border-bottom: 2px solid rgba(255, 255, 255, .1);
 }

 .mega-col-featured .mega-col-hd {
   border-color: var(--blue);
   color: #60A5FA
 }

 .mega-col-hd>i:first-child {
   width: 30px;
   height: 30px;
   border-radius: 8px;
   background: var(--blue);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   flex-shrink: 0;
 }

 .mega-col-featured .mega-col-hd>i:first-child {
   background: var(--blue)
 }

 .mega-col-hd span {
   flex: 1
 }

 .mega-col-arr {
   font-size: 11px;
   color: var(--gray3);
   transition: transform .2s
 }

 .mega-col:hover .mega-col-arr {
   transform: translateX(3px);
   color: var(--blue)
 }

 .mega-sub {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 2px
 }

 .mega-sub li {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 9px 10px;
   border-radius: 7px;
   font-size: 13px;
   color: rgba(255, 255, 255, .55);
   cursor: pointer;
   transition: background .15s, color .15s;
 }

 .mega-sub li:hover {
   background: rgba(255, 255, 255, .07);
   color: #fff;
 }

 .mega-sub li i {
   width: 16px;
   text-align: center;
   font-size: 12px;
   color: var(--blue);
   opacity: .8;
   flex-shrink: 0
 }

 .mega-view-all {
   margin-top: 20px;
   padding-top: 14px;
   border-top: 1px solid rgba(255, 255, 255, .08);
   font-size: 13px;
   font-weight: 600;
   color: #60A5FA;
   display: flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
 }

 .mega-view-all:hover {
   text-decoration: underline
 }

 /* Keep legacy class refs working */
 .mega-inner {
   display: none
 }

 .mega-cats,
 .mega-products {
   display: none
 }

 /* ── About Us dropdown ── */
 .about-drop {
   position: absolute;
   top: calc(100% + 1px);
   left: 50%;
   transform: translateX(-50%) translateY(-6px);
   min-width: 210px;
   background: #111;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 12px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
   padding: 8px;
   opacity: 0;
   pointer-events: none;
   transition: opacity .18s, transform .18s;
   z-index: 998;
 }

 .nav-item.open .about-drop {
   opacity: 1;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0);
 }

 /* Wider dropdown variant for Support menu */
 .about-drop--wide {
   min-width: 280px;
   white-space: nowrap;
 }

 /* small arrow caret */
 .about-drop::before {
   content: '';
   position: absolute;
   top: -6px;
   left: 50%;
   transform: translateX(-50%);
   width: 12px;
   height: 6px;
   background: #111;
   clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
 }

 .about-drop-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 14px;
   border-radius: 8px;
   cursor: pointer;
   transition: background .15s, color .15s;
   text-decoration: none;
   color: rgba(255, 255, 255, .65);
 }

 .about-drop-item:hover {
   background: rgba(255, 255, 255, .07);
   color: #fff;
 }

 .about-drop-icon {
   width: 34px;
   height: 34px;
   border-radius: 8px;
   flex-shrink: 0;
   background: rgba(16, 149, 245, .15);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .about-drop-icon i {
   font-size: 15px;
   color: var(--blue);
 }

 .about-drop-item:hover .about-drop-icon {
   background: var(--blue);
 }

 .about-drop-item:hover .about-drop-icon i {
   color: #fff;
 }

 .about-drop-label {
   font-size: 13.5px;
   font-weight: 600;
   line-height: 1;
   color: rgba(255, 255, 255, .9);
 }

 .about-drop-sub {
   font-size: 11px;
   color: rgba(255, 255, 255, .35);
   margin-top: 2px;
 }

 .about-drop-item:hover .about-drop-sub {
   color: rgba(255, 255, 255, .55);
 }

 .about-drop-divider {
   height: 1px;
   background: rgba(255, 255, 255, .07);
   margin: 4px 8px;
 }

 /* ════════════════════════════════════════════
    3. HERO — Full-screen immersive slider
 ════════════════════════════════════════════ */
 #hero {
   position: relative;
   height: 100vh;
   min-height: 620px;
   max-height: 940px;
   overflow: hidden;
   display: flex;
   align-items: stretch;
 }

 /* ── Slider track ── */
 .hero-slider {
   position: absolute;
   inset: 0;
   display: flex;
   transition: transform .85s cubic-bezier(.77, 0, .18, 1);
   will-change: transform;
 }

 .hero-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
   position: relative;
 }

 .hero-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 20%;
   display: block;
 }

 /* per-slide gradient overlays */
 .hero-slide::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to right,
       rgba(4, 12, 44, .92) 0%,
       rgba(4, 12, 44, .80) 28%,
       rgba(4, 12, 44, .42) 55%,
       rgba(4, 12, 44, .10) 72%,
       transparent 85%);
 }

 /* Slide 2 & 3 extra warm-to-blue toning overlay */
 .hero-slide:nth-child(2)::after,
 .hero-slide:nth-child(3)::after {
   background: linear-gradient(to right,
       rgba(0, 20, 80, .92) 0%,
       rgba(0, 20, 80, .78) 28%,
       rgba(0, 20, 80, .40) 55%,
       rgba(0, 15, 50, .12) 72%,
       rgba(0, 10, 30, .04) 85%);
 }

 .hero-slide::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(to top, rgba(4, 12, 44, .55) 0%, transparent 35%);
 }

 /* Surveillance scan-line effect */
 #hero::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 2;
   background: repeating-linear-gradient(0deg,
       transparent,
       transparent 3px,
       rgba(0, 0, 0, .06) 3px,
       rgba(0, 0, 0, .06) 4px);
   pointer-events: none;
 }

 /* Corner HUD markers */
 #hero .hero-hud {
   position: absolute;
   z-index: 5;
   pointer-events: none;
 }

 #hero .hero-hud-tl {
   top: 80px;
   left: 20px
 }

 #hero .hero-hud-tr {
   top: 80px;
   right: 20px
 }

 #hero .hero-hud-br {
   bottom: 80px;
   right: 20px
 }

 .hud-corner {
   width: 24px;
   height: 24px;
   opacity: .35;
 }

 .hud-corner-tl {
   border-top: 2px solid #60a5fa;
   border-left: 2px solid #60a5fa
 }

 .hud-corner-tr {
   border-top: 2px solid #60a5fa;
   border-right: 2px solid #60a5fa
 }

 .hud-corner-br {
   border-bottom: 2px solid #60a5fa;
   border-right: 2px solid #60a5fa
 }

 .hud-rec {
   position: absolute;
   top: 84px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 10px;
   font-weight: 700;
   color: rgba(239, 68, 68, .8);
   letter-spacing: .1em;
   pointer-events: none;
 }

 .hud-rec-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #ef4444;
   animation: recBlink 1.2s ease-in-out infinite
 }

 @keyframes recBlink {

   0%,
   100% {
     opacity: 1
   }

   50% {
     opacity: .2
   }
 }

 /* ── Content layer ── */
 #hero>.container {
   display: flex;
   align-items: center;
   padding-top: 0;
   position: relative;
   z-index: 4;
 }

 /* ── Hero panels (one per slide, stacked) ── */
 .hero-panels {
   position: absolute;
   inset: 0;
   z-index: 3;
   pointer-events: none;
 }

 .hero-panel {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   opacity: 0;
   transition: opacity .5s ease;
   pointer-events: none;
 }

 .hero-panel.active {
   opacity: 1;
   pointer-events: auto;
 }

 .hero-panel .container {
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 28px
 }

 .hero-text {
   width: 800px;
   flex-shrink: 0;
   color: #fff;
 }

 /* Badge */
 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, .13);
   backdrop-filter: blur(8px);
   color: #CBD5FF;
   font-size: 12px;
   font-weight: 600;
   padding: 5px 14px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, .22);
   margin-bottom: 20px;
 }

 .hero-badge i {
   color: #93C5FD
 }

 /* Title */
 .hero-title {
   font-size: clamp(38px, 4.5vw, 58px);
   font-weight: 800;
   line-height: 1.08;
   margin-bottom: 18px;
   text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
   letter-spacing: -.02em;
 }

 .hero-title em {
   color: #60A5FA;
   font-style: normal
 }

 .hero-title .hero-title-accent {
   display: block;
   background: linear-gradient(90deg, #60A5FA, #93C5FD);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 /* Body */
 .hero-body {
   font-size: 16.5px;
   color: rgba(255, 255, 255, .82);
   line-height: 1.72;
   margin-bottom: 34px;
   text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
   max-width: 420px;
 }

 /* CTA */
 .hero-cta {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
 }

 .btn-hero-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 28px;
   border-radius: 9px;
   border: none;
   background: #fff;
   color: var(--blue);
   font-size: 15px;
   font-weight: 700;
   transition: background .2s, box-shadow .2s, transform .15s;
   box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
 }

 .btn-hero-primary:hover {
   background: #EFF6FF;
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
 }

 .btn-hero-ghost {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 26px;
   border-radius: 9px;
   border: 1.5px solid rgba(255, 255, 255, .45);
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   background: transparent;
   transition: border-color .2s, background .2s, transform .15s;
 }

 .btn-hero-ghost:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .1);
   transform: translateY(-2px);
 }

 /* Stats */
 .hero-stats {
   display: flex;
   gap: 36px;
   margin-top: 44px;
   padding-top: 28px;
   border-top: 1px solid rgba(255, 255, 255, .18);
 }

 .hstat-num {
   font-size: 28px;
   font-weight: 800;
   color: #fff;
   letter-spacing: -.02em
 }

 .hstat-lbl {
   font-size: 11.5px;
   color: rgba(255, 255, 255, .58);
   margin-top: 2px;
   font-weight: 500
 }

 /* ── Slide indicators ── */
 .hero-dots {
   position: absolute;
   bottom: 80px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 10px;
   z-index: 5;
 }

 .hero-dot {
   width: 28px;
   height: 3px;
   border-radius: 3px;
   background: rgba(255, 255, 255, .35);
   cursor: pointer;
   transition: background .3s, width .3s;
   border: none;
   padding: 0;
 }

 .hero-dot.active {
   background: #fff;
   width: 52px
 }

 /* ── Arrow buttons ── */
 .hero-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .14);
   backdrop-filter: blur(8px);
   border: 1.5px solid rgba(255, 255, 255, .25);
   color: #fff;
   font-size: 16px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .2s, transform .2s;
 }

 .hero-arrow:hover {
   background: rgba(255, 255, 255, .26);
   transform: translateY(-50%) scale(1.08)
 }

 .hero-arrow.prev {
   left: 28px
 }

 .hero-arrow.next {
   right: 28px
 }

 /* ── Slide label chip (top-right) ── */
 .hero-slide-label {
   position: absolute;
   top: 32px;
   right: 32px;
   z-index: 5;
   background: rgba(0, 82, 204, .75);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, .2);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   padding: 6px 14px;
   border-radius: 20px;
   letter-spacing: .05em;
   transition: opacity .4s;
 }

 /* ── AI notify card ── */
 .hero-notify {
   position: absolute;
   z-index: 5;
   right: 5%;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, .97);
   backdrop-filter: blur(16px);
   border-radius: 16px;
   padding: 16px 20px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 260px;
   max-width: 290px;
   animation: floatUp .8s ease .7s both;
   border: 1px solid rgba(0, 82, 204, .1);
 }

 .hero-notify-row {
   display: flex;
   align-items: center;
   gap: 10px
 }

 @keyframes floatUp {
   from {
     opacity: 0;
     transform: translateY(calc(-50% + 20px))
   }

   to {
     opacity: 1;
     transform: translateY(-50%)
   }
 }

 .hnotify-pulse {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #22C55E;
   flex-shrink: 0;
   box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
   animation: pulseDot 2s infinite;
 }

 @keyframes pulseDot {

   0%,
   100% {
     box-shadow: 0 0 0 3px rgba(34, 197, 94, .22)
   }

   50% {
     box-shadow: 0 0 0 6px rgba(34, 197, 94, .08)
   }
 }

 .hnotify-icon {
   width: 36px;
   height: 36px;
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
 }

 .hnotify-icon.green {
   background: #DCFCE7;
   color: #16A34A
 }

 .hnotify-icon.blue {
   background: #DBEAFE;
   color: #1D4ED8
 }

 .hnotify-icon.orange {
   background: #FEF3C7;
   color: #D97706
 }

 .hnotify-ttl {
   font-size: 12.5px;
   font-weight: 700;
   color: #111827;
   line-height: 1.3
 }

 .hnotify-sub {
   font-size: 11px;
   color: #6B7280;
   margin-top: 1px
 }

 .hnotify-divider {
   height: 1px;
   background: #F1F5F9;
   margin: 0 -4px
 }

 .hnotify-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .hnotify-live {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 11px;
   color: #059669;
   font-weight: 600;
 }

 .hnotify-live-dot {
   width: 6px;
   height: 6px;
   background: #059669;
   border-radius: 50%;
   animation: pulseDot 1.5s infinite;
 }

 .hnotify-view {
   font-size: 11px;
   color: var(--blue);
   font-weight: 600;
   cursor: pointer;
 }

 /* Scroll hint */
 .hero-scroll {
   position: absolute;
   bottom: 26px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   opacity: .5;
   animation: scrollBounce 2s infinite;
 }

 .hero-scroll span {
   font-size: 10px;
   color: #fff;
   letter-spacing: .1em;
   text-transform: uppercase;
   font-weight: 500
 }

 .hero-scroll i {
   color: #fff;
   font-size: 12px
 }

 @keyframes scrollBounce {

   0%,
   100% {
     transform: translateX(-50%) translateY(0)
   }

   50% {
     transform: translateX(-50%) translateY(6px)
   }
 }

 /* ── Progress bar ── */
 .hero-progress {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 5;
   height: 3px;
   background: rgba(255, 255, 255, .15);
 }

 .hero-progress-bar {
   height: 100%;
   background: linear-gradient(90deg, #3B82F6, #60A5FA);
   width: 0%;
   transition: width linear;
 }

 @media(max-width:900px) {
   .hero-text {
     width: 100%;
     max-width: 440px
   }

   .hero-notify {
     display: none
   }

   .hero-arrow {
     display: none
   }
 }

 @media(max-width:600px) {
   .hero-title {
     font-size: 34px
   }

   .hero-dots {
     bottom: 60px
   }
 }

 @keyframes bounce {

   0%,
   100% {
     transform: translateX(-50%) translateY(0)
   }

   50% {
     transform: translateX(-50%) translateY(5px)
   }
 }

 /* ════════════════════════════════════════════
    4. FEATURE STRIP
 ════════════════════════════════════════════ */
 #strip {
   background: var(--blue);
   padding: 22px 0
 }

 .strip-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
 }

 .strip-item {
   display: flex;
   align-items: center;
   gap: 9px;
   color: #fff
 }

 .strip-icon {
   width: 38px;
   height: 38px;
   border-radius: 8px;
   background: rgba(255, 255, 255, .12);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
 }

 .strip-name {
   font-size: 13px;
   font-weight: 600
 }

 .strip-sub {
   font-size: 11px;
   color: rgba(255, 255, 255, .58)
 }

 .strip-div {
   width: 1px;
   height: 38px;
   background: rgba(255, 255, 255, .14)
 }

 /* ════════════════════════════════════════════
    5. PRODUCT CATEGORIES
 ════════════════════════════════════════════ */
 #categories {
   padding: 60px 0 30px;
   background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
 }

 .sec-label {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 8px
 }

 .sec-title {
   font-size: clamp(26px, 3.5vw, 40px);
   font-weight: 800;
   color: var(--slate)
 }

 .sec-sub {
   font-size: 16px;
   color: var(--gray4);
   margin-top: 12px;
   max-width: 560px
 }

 .cat-hd {
   text-align: center;
   margin-bottom: 44px
 }

 .cat-hd .sec-sub {
   margin: 12px auto 0
 }

 /* Legacy cat-grid (kept for safety) */
 .cat-grid {
   display: none
 }

 /* ── NEW 4-column category grid ── */
 #categories {
   padding: 60px 0 30px;
   background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
 }

 .cat-grid-v2 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
 }

 .cat-card-v2 {
   border-radius: 16px;
   overflow: hidden;
   border: 1.5px solid #E8EEF6;
   background: #fff;
   cursor: pointer;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
   transition: transform .28s, box-shadow .28s, border-color .28s;
 }

 .cat-card-v2:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 32px rgba(16, 149, 245, .13);
   border-color: #BFDBFE;
 }

 .cat-v2-img {
   aspect-ratio: 16/10;
   overflow: hidden;
   background: #F8FAFC;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .cat-v2-img img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 16px;
   transition: transform .5s;
 }

 .cat-card-v2:hover .cat-v2-img img {
   transform: scale(1.06)
 }

 .cat-v2-body {
   padding: 18px 18px 20px
 }

 .cat-v2-icon {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   background: #0A1628;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
 }

 .cat-v2-icon i {
   color: #fff;
   font-size: 16px
 }

 .cat-v2-name {
   font-size: 16px;
   font-weight: 800;
   color: var(--slate);
   margin-bottom: 6px;
 }

 .cat-v2-desc {
   font-size: 12.5px;
   color: #64748B;
   line-height: 1.5;
   margin-bottom: 12px;
 }

 .cat-v2-subs {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   margin-bottom: 14px;
 }

 .cat-v2-subs span {
   font-size: 11px;
   color: #475569;
   background: #F1F5F9;
   border-radius: 4px;
   padding: 2px 7px;
 }

 .cat-v2-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   font-weight: 700;
   color: var(--blue);
 }

 .cat-card-v2:hover .cat-v2-link i {
   transform: translateX(3px)
 }

 .cat-v2-link i {
   transition: transform .2s
 }

 .cat-v2-featured {
   border-color: var(--blue);
   background: linear-gradient(180deg, #EFF6FF 0%, #fff 100%);
 }

 /* ── Reolink Style: Minimal Headers ── */
 .cat-hd-minimal,
 .prod-hd-minimal {
   margin-bottom: 32px;
 }

 .sec-title-minimal {
   font-size: 28px;
   font-weight: 600;
   color: #000;
   letter-spacing: -.02em;
 }

 /* ── Reolink Style: Category Grid (2x2) ── */
 .cat-grid-reolink {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
   margin-bottom: 80px;
 }

 .cat-reolink-card {
   cursor: pointer;
   transition: all .2s;
   border: 1px solid #E5E7EB;
   border-radius: 16px;
   padding: 24px;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
 }

 .cat-reolink-card:hover {
   border-color: #1095F5;
   box-shadow: 0 8px 24px rgba(16, 149, 245, .12);
   transform: translateY(-4px);
 }

 .cat-reolink-img {
   aspect-ratio: 16/9;
   overflow: hidden;
   border-radius: 8px;
   background: #fff;
   margin-bottom: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 @media(max-width:768px) {
  .cat-reolink-img {height: 180px;aspect-ratio:initial}
 }
 .cat-reolink-img img {
   max-width: 100%;
   max-height: 100%;
   object-fit: cover;
 }

 .cat-reolink-info {
   text-align: left;
 }

 .cat-reolink-title {
   font-size: 20px;
   font-weight: 600;
   color: #000;
   margin-bottom: 6px;
 }

 .cat-reolink-desc {
   font-size: 14px;
   font-weight: 300;
   color: #666;
   line-height: 1.5;
 }

 /* ── Reolink Style: Product Grid (2x2) ── */
 .prod-grid-reolink {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
 }

 .prod-reolink-card {
   cursor: pointer;
   transition: all .2s;
   border: 1px solid #E5E7EB;
   border-radius: 16px;
   padding: 24px;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
 }

 .prod-reolink-card:hover {
   border-color: #1095F5;
   box-shadow: 0 8px 24px rgba(16, 149, 245, .12);
   transform: translateY(-4px);
 }

 .prod-reolink-img {
   aspect-ratio: 4/3;
   overflow: hidden;
   border-radius: 8px;
   background: #F9FAFB;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .prod-reolink-img img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 16px;
 }

 .prod-reolink-info {
   text-align: left;
 }

 .prod-reolink-model {
   font-size: 18px;
   font-weight: 600;
   color: #000;
   margin-bottom: 12px;
 }

 .prod-reolink-features {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }

 .prod-reolink-features li {
   font-size: 14px;
   font-weight: 300;
   color: #666;
   padding-left: 16px;
   position: relative;
 }

 .prod-reolink-features li::before {
   content: '•';
   position: absolute;
   left: 0;
   color: #000;
   font-weight: 600;
 }

 /* ════════════════════════════════════════════
    6. FEATURED PRODUCTS  – Dark Tech Full-Screen
 ════════════════════════════════════════════ */
 #products {
   padding: 0;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: #050A14;
   position: relative;
   overflow: hidden;
 }

 /* Ambient glow blobs */
 #products::before {
   content: '';
   position: absolute;
   top: -160px;
   left: -120px;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(16, 149, 245, .13) 0%, transparent 65%);
   pointer-events: none;
   z-index: 0;
 }

 #products::after {
   content: '';
   position: absolute;
   bottom: -100px;
   right: -80px;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(99, 102, 241, .10) 0%, transparent 65%);
   pointer-events: none;
   z-index: 0;
 }

 /* Header */
 .prod-hd-dark {
   position: relative;
   z-index: 1;
   text-align: center;
   padding: 80px 28px 56px;
 }

 .prod-hd-dark .sec-label {
   color: #60A5FA
 }

 .prod-hd-dark h2 {
   font-size: clamp(28px, 3.5vw, 44px);
   font-weight: 800;
   color: #fff;
   letter-spacing: -.02em;
   margin: 8px 0 0;
 }

 .prod-hd-dark-sub {
   margin: 14px 0 0;
   font-size: 15px;
   color: rgba(255, 255, 255, .45);
   font-weight: 400;
 }

 /* 4-col grid */
 .prod-grid-dark {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   flex: 1;
   position: relative;
   z-index: 1;
 }

 /* Individual card */
 .prod-card-dark {
   position: relative;
   overflow: hidden;
   border-right: 1px solid rgba(255, 255, 255, .07);
   border-top: 1px solid rgba(255, 255, 255, .07);
   display: flex;
   flex-direction: column;
   cursor: pointer;
   transition: background .35s;
 }

 .prod-card-dark:last-child {
   border-right: none
 }

 .prod-card-dark:nth-child(4n) {
   border-right: none
 }

 .prod-card-dark:hover {
   background: rgba(16, 149, 245, .05)
 }

 /* Hover top accent line */
 .prod-card-dark::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--blue), transparent);
   transform: scaleX(0);
   transform-origin: center;
   transition: transform .4s cubic-bezier(.4, 0, .2, 1);
   z-index: 2;
 }

 .prod-card-dark:hover::before {
   transform: scaleX(1)
 }

 /* Image area */
 .prod-dark-img {
   position: relative;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(160deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .01) 100%);
   overflow: hidden;
   padding: 40px;
 }

 /* Subtle grid pattern */
 .prod-dark-img::after {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
   background-size: 40px 40px;
   pointer-events: none;
 }

 .prod-dark-img img {
   position: relative;
   z-index: 1;
   width: 78%;
   height: 78%;
   object-fit: contain;
   transition: transform .55s cubic-bezier(.25, .8, .25, 1);
   filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .5));
 }

 .prod-card-dark:hover .prod-dark-img img {
   transform: scale(1.08) translateY(-6px);
 }

 /* Content area */
 .prod-dark-info {
   padding: 32px 36px 40px;
   flex: 1;
   display: flex;
   flex-direction: column;
   border-top: 1px solid rgba(255, 255, 255, .06);
   padding-bottom: 70px;
 }

 .prod-dark-series {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #60A5FA;
   margin-bottom: 8px;
 }

 .prod-dark-name {
   font-size: clamp(18px, 2vw, 22px);
   font-weight: 800;
   color: #fff;
   margin-bottom: 18px;
   line-height: 1.2;
   letter-spacing: -.01em;
 }

 .prod-dark-specs ul {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 28px;
   flex: 1;
 }

 .prod-dark-specs ul li {
   display: flex;
   align-items: center;
   gap: 10px;
   position: relative;
   font-size: 13.5px;
   color: rgba(255, 255, 255, .65);
   font-weight: 400;
   padding-left: 15px;
 }

 .prod-dark-specs ul li::before {
  content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--blue);
   flex-shrink: 0;
   box-shadow: 0 0 6px rgba(16, 149, 245, .6);
   position: absolute;
   left: 0;
 }



 /* CTA link */
 .prod-dark-cta {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   align-self: flex-start;
   padding: 10px 22px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, .15);
   background: rgba(255, 255, 255, .05);
   transition: all .25s;
   position: absolute;
   bottom: 34px;
 }

 .prod-dark-cta i {
   font-size: 11px;
   transition: transform .25s;
   color: var(--blue);
 }

 .prod-card-dark:hover .prod-dark-cta {
   background: var(--blue);
   border-color: var(--blue);
   color: #fff;
 }

 .prod-card-dark:hover .prod-dark-cta i {
   transform: translateX(4px);
   color: #fff;
 }

 /* View all row */
 .prod-view-all-dark {
   position: relative;
   z-index: 1;
   text-align: center;
   padding: 48px 28px 56px;
   border-top: 1px solid rgba(255, 255, 255, .07);
 }

 .btn-view-all-dark {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 30px;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, .2);
   color: rgba(255, 255, 255, .8);
   font-size: 14px;
   font-weight: 600;
   background: transparent;
   transition: all .25s;
   cursor: pointer;
 }

 .btn-view-all-dark:hover {
   border-color: var(--blue);
   background: rgba(16, 149, 245, .1);
   color: #fff;
 }

 /* Bottom graphical tech band */
 .prod-tech-band {
   position: relative;
   z-index: 1;
   background: #fff;
   padding: 64px 0 0;
   overflow: hidden;
 }

 .prod-tech-band-inner {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 48px;
 }

 /* SVG circuit / grid overlay */
 .prod-tech-band::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(16, 149, 245, .06) 1px, transparent 1px),
     linear-gradient(90deg, rgba(16, 149, 245, .06) 1px, transparent 1px);
   background-size: 48px 48px;
   pointer-events: none;
 }

 /* Fade edges */
 .prod-tech-band::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 78%);
   pointer-events: none;
 }

 .ptb-stats {
   display: flex;
   gap: 56px;
   flex-wrap: wrap;
   position: relative;
   z-index: 1;
 }

 .ptb-stat {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

 .ptb-stat-num {
   font-size: clamp(32px, 3.5vw, 48px);
   font-weight: 900;
   letter-spacing: -.03em;
   background: linear-gradient(135deg, #0A1628 0%, var(--blue) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .ptb-stat-label {
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #64748B;
   margin-top: 4px;
 }

 .ptb-divider {
   width: 1px;
   height: 56px;
   background: #E2E8F0;
   flex-shrink: 0;
 }

 .ptb-cta-area {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: flex-end;
 }

 .ptb-cta-text {
   font-size: 14px;
   color: #64748B;
   font-weight: 500;
 }

 .ptb-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 13px 28px;
   border-radius: 8px;
   background: linear-gradient(135deg, #0A1628 0%, var(--blue) 100%);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   transition: opacity .25s, transform .2s;
   box-shadow: 0 6px 20px rgba(16, 149, 245, .25);
 }

 .ptb-cta-btn:hover {
   opacity: .88;
   transform: translateY(-2px)
 }

 /* Circuit decorative dots */
 .prod-tech-dots {
   position: relative;
   z-index: 1;
   display: flex;
   justify-content: center;
   gap: 8px;
   padding: 28px 0 48px;
   border-top: 1px solid rgba(16, 149, 245, .08);
   margin-top: 48px;
 }

 .ptd-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(16, 149, 245, .15);
 }

 .ptd-dot.active {
   background: var(--blue);
   box-shadow: 0 0 8px rgba(16, 149, 245, .5)
 }

 .ptd-line {
   width: 40px;
   height: 1px;
   background: rgba(16, 149, 245, .15);
   align-self: center;
 }

 @media(max-width:1100px) {
   .prod-grid-dark {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media(max-width:900px) {
   .prod-grid-dark {
     grid-template-columns: 1fr;
     min-height: auto
   }

   .prod-card-dark {
     border-right: none;
     border-bottom: 1px solid rgba(255, 255, 255, .07)
   }

   .prod-tech-band-inner {
     flex-direction: column;
     align-items: flex-start
   }

   .ptb-cta-area {
     align-items: flex-start
   }

   .ptb-stats {
     gap: 32px
   }

   .prod-card-dark:last-child {
     border-bottom: none
   }

   #products {
     min-height: auto
   }
 }

 /* Keep legacy prod-grid / prod-card stubs for other pages */
 .prod-hd {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 36px;
   flex-wrap: wrap;
   gap: 14px
 }

 .prod-tabs {
   display: flex;
   gap: 6px
 }

 .prod-tab {
   padding: 7px 18px;
   border-radius: 8px;
   font-size: 13.5px;
   font-weight: 600;
   border: 1.5px solid #E2E8F0;
   background: transparent;
   color: var(--gray4);
   transition: all .2s;
 }

 .prod-tab.active,
 .prod-tab:hover {
   border-color: var(--blue);
   color: var(--blue);
   background: var(--blue-lt)
 }

 .prod-tab.active {
   background: var(--blue);
   color: #fff;
   border-color: var(--blue)
 }

 .prod-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
 }

 .prod-card {
   background: #fff;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--sh-sm);
   transition: transform .3s, box-shadow .3s;
   cursor: pointer;
 }

 .prod-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--sh-md)
 }

 .prod-img {
   position: relative;
   aspect-ratio: 4/3;
   background: var(--gray2);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .prod-img img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 8px;
   transition: transform .4s;
   background: #fff
 }

 .prod-card:hover .prod-img img {
   transform: scale(1.05)
 }

 .prod-img i {
   font-size: 48px;
   color: var(--blue);
   opacity: .25
 }

 .prod-badge-wrap {
   position: absolute;
   top: 10px;
   left: 10px;
   display: flex;
   gap: 5px
 }

 .prod-badge {
   font-size: 10.5px;
   font-weight: 700;
   padding: 3px 8px;
   border-radius: 4px;
   background: var(--blue);
   color: #fff;
 }

 .prod-badge.new {
   background: #059669
 }

 .prod-badge.wire {
   background: #7C3AED
 }

 .prod-info {
   padding: 16px
 }

 .prod-family {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 3px
 }

 .prod-name {
   font-size: 15.5px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 10px
 }

 .prod-specs {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-bottom: 14px
 }

 .prod-spec {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12.5px;
   color: #4B5563
 }

 .prod-spec i {
   color: var(--blue);
   font-size: 11px;
   width: 12px
 }

 .prod-foot {
   display: flex;
   align-items: center;
   justify-content: space-between
 }

 .prod-price {
   font-size: 17px;
   font-weight: 800;
   color: var(--blue)
 }

 .prod-price span {
   font-size: 12px;
   color: var(--gray4);
   font-weight: 400
 }

 .btn-learn {
   padding: 7px 15px;
   border-radius: 6px;
   font-size: 13px;
   font-weight: 600;
   background: var(--blue-lt);
   color: var(--blue);
   border: none;
   transition: background .2s, color .2s;
 }

 .btn-learn:hover {
   background: var(--blue);
   color: #fff
 }

 .prod-view-all {
   text-align: center;
   margin-top: 36px
 }

 /* ════════════════════════════════════════════
    7. APP & CLOUD
 ════════════════════════════════════════════ */
 /* ── App Section – UI Showcase ── */
 #app {
   padding: 100px 0;
   position: relative;
   overflow: hidden;
   background: linear-gradient(160deg, #060c1a 0%, #0a1628 45%, #091322 100%);
 }

 #app::before {
   content: '';
   position: absolute;
   top: -200px;
   right: -200px;
   width: 700px;
   height: 700px;
   background: radial-gradient(circle, rgba(16, 149, 245, .18) 0%, transparent 65%);
   pointer-events: none;
 }

 #app::after {
   content: '';
   position: absolute;
   bottom: -100px;
   left: -100px;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(99, 102, 241, .12) 0%, transparent 65%);
   pointer-events: none;
 }

 /* Content layout */
 #app .container {
   position: relative;
   z-index: 2;
   width: 100%;
 }

 .app-ui-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 /* Left text */
 .app-ui-text {}

 .app-ui-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #60A5FA;
   background: rgba(96, 165, 250, .1);
   border: 1px solid rgba(96, 165, 250, .2);
   padding: 5px 13px;
   border-radius: 20px;
   margin-bottom: 22px;
 }

 .app-ui-title {
   font-size: clamp(36px, 3.5vw, 52px);
   font-weight: 800;
   color: #fff;
   line-height: 1.12;
   margin: 0 0 20px;
   letter-spacing: -.02em;
 }

 .app-ui-title em {
   color: #60A5FA;
   font-style: normal;
   background: linear-gradient(90deg, #60A5FA, #93C5FD);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .app-ui-desc {
   font-size: 16px;
   font-weight: 300;
   color: rgba(255, 255, 255, .65);
   line-height: 1.75;
   margin-bottom: 36px;
   max-width: 460px;
 }

 /* Feature bullets */
 .app-ui-feats {
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-bottom: 40px;
 }

 .app-ui-feat {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .app-ui-feat-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   flex-shrink: 0;
   background: rgba(16, 149, 245, .15);
   border: 1px solid rgba(16, 149, 245, .25);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   color: #60A5FA;
 }

 .app-ui-feat-text strong {
   display: block;
   font-size: 14px;
   font-weight: 600;
   color: #fff;
 }

 .app-ui-feat-text span {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .48);
 }

 /* Store btns */
 .store-btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
 }

 .store-btn {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 24px;
   background: rgba(255, 255, 255, .07);
   backdrop-filter: blur(12px);
   color: #fff;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, .15);
   transition: all .28s;
 }

 .store-btn:hover {
   background: rgba(255, 255, 255, .13);
   border-color: rgba(255, 255, 255, .3);
   transform: translateY(-2px);
 }
 .store-btn .icon{
  width: 24px;
  height: 24px;
 }
 .store-btn i {
   font-size: 26px
 }

 .store-sub {
   font-size: 11px;
   color: rgba(255, 255, 255, .6)
 }

 .store-name {
   font-size: 16px;
   font-weight: 700
 }

 /* Right: Phone UI mockup */
 .app-ui-mockup {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .app-phone-frame {
   position: relative;
   width: 660px;
   flex-shrink: 0;
 }

 .app-phone-frame img {
   width: 100%;
 }

 .app-phone-outer {
   background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
   border-radius: 44px;
   padding: 10px;
   box-shadow:
     0 0 0 1px rgba(255, 255, 255, .08),
     0 40px 80px rgba(0, 0, 0, .7),
     0 0 60px rgba(16, 149, 245, .15);
 }

 .app-phone-screen {
   background: #0a0a14;
   border-radius: 36px;
   overflow: hidden;
   aspect-ratio: 9/19;
   position: relative;
 }

 /* Status bar */
 .app-phone-status {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 18px 0;
   font-size: 10px;
   color: rgba(255, 255, 255, .6);
   font-weight: 500;
 }

 /* App header */
 .app-scr-hd {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px 0;
 }

 .app-scr-title {
   font-size: 13px;
   font-weight: 700;
   color: #fff
 }

 .app-scr-dot {
   display: flex;
   gap: 5px;
 }

 .app-scr-dot span {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .15);
 }

 .app-scr-dot span.on {
   background: #22C55E
 }

 /* Live cam thumbnail */
 .app-cam-thumb {
   margin: 10px 14px 0;
   border-radius: 12px;
   overflow: hidden;
   position: relative;
 }

 .app-cam-thumb img {
   width: 100%;
   display: block;
   aspect-ratio: 16/9;
   object-fit: cover;
 }

 .app-cam-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, .7));
 }

 .app-cam-live {
   position: absolute;
   top: 8px;
   left: 8px;
   display: flex;
   align-items: center;
   gap: 4px;
   background: rgba(0, 0, 0, .55);
   backdrop-filter: blur(4px);
   padding: 3px 8px;
   border-radius: 20px;
   font-size: 9px;
   color: #fff;
   font-weight: 700;
 }

 .app-cam-live-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #ef4444;
   animation: pulseDot 1.2s infinite;
 }

 .app-cam-time {
   position: absolute;
   bottom: 8px;
   right: 8px;
   font-size: 9px;
   color: rgba(255, 255, 255, .7);
   font-weight: 500;
 }

 /* Alert row */
 .app-alerts {
   padding: 10px 14px 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }

 .app-alert-row {
   display: flex;
   align-items: center;
   gap: 9px;
   background: rgba(255, 255, 255, .04);
   border-radius: 10px;
   padding: 8px 10px;
   border: 1px solid rgba(255, 255, 255, .06);
 }

 .app-alert-icon {
   width: 28px;
   height: 28px;
   border-radius: 7px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
 }

 .app-alert-icon.blue {
   background: rgba(59, 130, 246, .2);
   color: #60A5FA
 }

 .app-alert-icon.green {
   background: rgba(34, 197, 94, .15);
   color: #4ADE80
 }

 .app-alert-icon.orange {
   background: rgba(251, 146, 60, .15);
   color: #FB923C
 }

 .app-alert-text strong {
   display: block;
   font-size: 10px;
   font-weight: 600;
   color: rgba(255, 255, 255, .85);
 }

 .app-alert-text span {
   font-size: 9px;
   color: rgba(255, 255, 255, .35);
 }

 .app-alert-time {
   margin-left: auto;
   font-size: 8.5px;
   color: rgba(255, 255, 255, .28);
   white-space: nowrap;
 }

 /* Bottom nav */
 .app-bottom-nav {
   display: flex;
   justify-content: space-around;
   padding: 10px 0 8px;
   margin-top: 10px;
   border-top: 1px solid rgba(255, 255, 255, .06);
 }

 .app-bnav-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   font-size: 8px;
   color: rgba(255, 255, 255, .3);
 }

 .app-bnav-item.active {
   color: #60A5FA
 }

 .app-bnav-item i {
   font-size: 13px
 }

 /* Floating cards around phone */
 .app-float-card {
   position: absolute;
   background: rgba(255, 255, 255, .06);
   backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 14px;
   padding: 12px 16px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
   white-space: nowrap;
 }

 .app-float-card.fc1 {
   left: -120px;
   top: 15%;
   animation: floatCard1 5s ease-in-out infinite;
 }

 .app-float-card.fc2 {
   right: -110px;
   top: 40%;
   animation: floatCard2 6s ease-in-out infinite;
 }

 .app-float-card.fc3 {
   left: -90px;
   bottom: 20%;
   animation: floatCard1 7s ease-in-out infinite reverse;
 }

 @keyframes floatCard1 {

   0%,
   100% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(-10px)
   }
 }

 @keyframes floatCard2 {

   0%,
   100% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(8px)
   }
 }

 .fc-icon {
   font-size: 16px;
   margin-bottom: 5px
 }

 .fc-val {
   font-size: 18px;
   font-weight: 800;
   color: #fff
 }

 .fc-lbl {
   font-size: 10px;
   color: rgba(255, 255, 255, .45)
 }

 .fc-pill {
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .fc-pulse {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #22C55E;
   flex-shrink: 0;
   animation: pulseDot 1.5s infinite;
 }

 .fc-pill span {
   font-size: 11px;
   font-weight: 600;
   color: #fff
 }

 .fc-pill small {
   font-size: 10px;
   color: rgba(255, 255, 255, .4)
 }

 @media(max-width:900px) {
   .app-ui-layout {
     grid-template-columns: 1fr;
     gap: 60px
   }

   .app-ui-mockup {
     order: -1
   }

   .app-float-card {
     display: none
   }
 }

 @media(max-width:600px) {
   .app-phone-frame {
     width: 200px
   }
 }

 /* Keep legacy carousel refs safe */
 .app-carousel-wrap {
   display: none
 }

 .app-carousel-nav {
   display: none
 }

 .app-carousel-dot {
   display: none
 }

 /* ════════════════════════════════════════════
    8. TRUST
 ════════════════════════════════════════════ */
 #trust {
   padding: 80px 0;
   background: var(--gray1)
 }

 .trust-hd {
   text-align: center;
   margin-bottom: 52px
 }

 .trust-hd .sec-sub {
   margin: 12px auto 0
 }

 .stats-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: 56px
 }

 .stat-card {
   background: #fff;
   border-radius: var(--radius);
   padding: 26px 22px;
   text-align: center;
   box-shadow: var(--sh-sm);
   transition: transform .3s, box-shadow .3s;
 }

 .stat-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--sh-md)
 }

 .sc-icon {
   width: 46px;
   height: 46px;
   background: var(--blue-lt);
   border-radius: 12px;
   margin: 0 auto 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 19px;
   color: var(--blue);
 }

 .sc-num {
   font-size: 36px;
   font-weight: 800;
   color: var(--blue);
   line-height: 1
 }

 .sc-lbl {
   font-size: 13.5px;
   color: var(--gray4);
   margin-top: 5px
 }

 /* ── Reviews Hero with Big Rating ── */
 .rev-hero {
   display: flex;
   align-items: center;
   gap: 48px;
   margin-bottom: 48px;
   padding: 40px;
   background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
   border-radius: 16px;
   border: 1px solid rgba(56, 189, 248, 0.2);
 }

 .rev-hero-rating {
   flex-shrink: 0;
   text-align: center;
   padding: 24px 32px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }

 .rev-hero-stars {
   font-size: 32px;
   margin-bottom: 8px
 }

 .rev-hero-score {
   font-size: 64px;
   font-weight: 900;
   background: linear-gradient(135deg, #F59E0B, #EA580C);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
 }

 .rev-hero-score span {
   font-size: 28px;
   font-weight: 600;
   color: #94A3B8
 }

 .rev-hero-count {
   font-size: 13px;
   color: #64748B;
   margin-top: 8px;
   font-weight: 500;
 }

 .rev-hero-text {
   flex: 1
 }

 /* ── Reviews – Testimonial Carousel ── */
 /* ══ TVC VIDEO SECTION ══ */
 #reviews {
   padding: 0;
   background: #f7f8fa;
   overflow: hidden;
 }

 /* Section header */
 .tvc-header {
   padding: 64px 0 40px;
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
 }

 .tvc-header-left .tvc-eyebrow {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #1d84e8;
   margin-bottom: 8px;
 }

 .tvc-header-left h2 {
   font-size: clamp(26px, 3vw, 38px);
   font-weight: 900;
   color: #111;
   letter-spacing: -.03em;
   line-height: 1.15;
   margin: 0;
 }

 .tvc-header-right {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
 }

 .tvc-hdr-link {
   font-size: 13.5px;
   font-weight: 600;
   color: #1d84e8;
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 8px 16px;
   border: 1.5px solid #d0e8ff;
   border-radius: 30px;
   transition: background .2s, color .2s;
 }

 .tvc-hdr-link:hover {
   background: #1d84e8;
   color: #fff;
   border-color: #1d84e8
 }

 /* 3-column video grid — full width */
 .tvc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 15px;
   width: 100%;
 }

 .tvc-item {
   position: relative;
   overflow: hidden;
   background: #000;
   cursor: pointer;
 }

 /* thumbnail img fills column */
 .tvc-item-thumb {
   display: block;
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   transition: transform .5s ease, filter .3s ease;
 }

 .tvc-item:hover .tvc-item-thumb {
   transform: scale(1.04);
   filter: brightness(.82);
 }

 /* no overlay needed — captions are below */
 .tvc-item::after {
   display: none
 }

 /* play button */
 .tvc-item-play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
   pointer-events: none;
 }

 .tvc-item-play-circle {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .88);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform .25s, background .25s;
   box-shadow: 0 6px 28px rgba(0, 0, 0, .35);
 }

 .tvc-item-play-circle i {
   font-size: 22px;
   color: #111;
   margin-left: 4px
 }

 .tvc-item:hover .tvc-item-play-circle {
   transform: scale(1.12);
   background: #fff;
 }

 /* caption below the video */
 .tvc-card {
   display: flex;
   flex-direction: column;
   background: #f7f8fa;
 }

 .tvc-item-cap {
   padding: 14px 20px 20px;
 }

 .tvc-item-tag {
   display: inline-block;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #1d84e8;
   margin-bottom: 6px;
 }

 .tvc-item-title {
   font-size: 14.5px;
   font-weight: 800;
   color: #111;
   line-height: 1.4;
   letter-spacing: -.01em;
 }

 .tvc-item-sub {
   font-size: 12px;
   color: #6b7280;
   margin-top: 4px;
   font-weight: 500;
 }

 /* iframe overlay */
 .tvc-item-iframe {
   display: none;
   position: absolute;
   inset: 0;
   z-index: 10;
 }

 .tvc-item-iframe iframe, .tvc-item-iframe .info-video {
   width: 100%;
   height: 100%;
   border: none;
 }

 .tvc-item-iframe-close {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 11;
   background: rgba(0, 0, 0, .7);
   color: #fff;
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   pointer-events: all;
 }

 /* Responsive */
 @media(max-width:900px) {
   .tvc-grid {
     grid-template-columns: 1fr 1fr
   }

   .tvc-grid .tvc-card:last-child {
     display: none
   }

   .tvc-header {
     padding: 48px 24px 28px
   }
 }

 @media(max-width:580px) {
   .tvc-grid {
     grid-template-columns: 1fr
   }

   .tvc-grid .tvc-card:last-child {
     display: flex
   }

   .tvc-header {
     padding: 40px 16px 22px
   }
 }

 /* ══ keep old vars for responsive overrides below ══ */
 .rev-card,
 .rev-carousel-wrap,
 .rev-ctrl,
 .rev-dots,
 .rev-top {
   display: none
 }

 .rev-card:hover {}

 .rev-card-top {}

 .rev-avatar {
   display: none
 }

 .rev-avatar-placeholder {
   display: none
 }

 .rev-name {
   display: none
 }

 .rev-meta {
   display: none
 }

 .rev-card-stars {
   display: none
 }

 .rev-rating-badge {
   display: none
 }

 .rev-quote {
   display: none
 }

 .rev-product-tag {
   display: none
 }

 .rev-card-footer {
   display: none
 }

 .rev-source {
   display: none
 }

 .rev-verified {
   display: none;
   font-size: 11px;
   color: #059669;
   font-weight: 600;
 }

 .rev-verified i {
   font-size: 10px
 }

 /* Dots */
 .rev-dots {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 32px;
 }

 .rev-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #D1D5DB;
   cursor: pointer;
   transition: all .3s;
   border: none;
   padding: 0;
 }

 .rev-dot.active {
   background: #000;
   width: 24px;
   border-radius: 4px
 }

 .certs {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   flex-wrap: wrap;
   margin-top: 64px;
   padding-top: 40px;
   border-top: 1px solid #E2E8F0;
 }

 .cert {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--gray4)
 }

 .cert i {
   color: var(--blue);
   font-size: 18px
 }

 /* ════════════════════════════════════════════
    9. WHY YOOSEE
 ════════════════════════════════════════════ */
 #why {
   padding: 96px 0;
   background: linear-gradient(135deg, #002E9A 0%, #1095F5 55%, #0070E0 100%);
   position: relative;
   overflow: hidden;
 }

 #why::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, .05) 0%, transparent 55%);
 }

 .why-hd {
   text-align: center;
   margin-bottom: 56px;
   position: relative;
   z-index: 1
 }

 .why-hd .sec-label {
   color: #93C5FD
 }

 .why-hd .sec-title {
   color: #fff
 }

 .why-hd .sec-sub {
   color: rgba(255, 255, 255, .72);
   margin: 12px auto 0
 }

 .why-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   position: relative;
   z-index: 1
 }

 .why-card {
   background: rgba(255, 255, 255, .1);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: var(--radius);
   padding: 28px 24px;
   transition: background .3s, transform .3s;
 }

 .why-card:hover {
   background: rgba(255, 255, 255, .16);
   transform: translateY(-4px)
 }

 .why-icon {
   width: 48px;
   height: 48px;
   background: rgba(255, 255, 255, .14);
   border-radius: 11px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: #93C5FD;
   margin-bottom: 16px;
 }

 .why-ttl {
   font-size: 17px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 8px
 }

 .why-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, .7);
   line-height: 1.65
 }

 /* ════════════════════════════════════════════
    10. SUPPORT
 ════════════════════════════════════════════ */
 /* ── UGREEN Style: Support Cards with Images ── */
 #support {
   padding: 0;
   background: #fff;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
 }

 /* Header area */
 .sup-hd {
   text-align: center;
   padding: 80px 28px 52px;
   background: linear-gradient(180deg, #F9FAFB 0%, #fff 100%)
 }

 .sup-hd .sec-label {
   font-size: 12px;
   font-weight: 700;
   color: var(--blue);
   text-transform: uppercase;
   letter-spacing: 1.2px;
   margin-bottom: 10px
 }

 .sup-hd .sec-title {
   font-size: clamp(28px, 3.5vw, 42px);
   font-weight: 800;
   color: #000;
   margin-bottom: 12px;
   letter-spacing: -.02em
 }

 .sup-hd .sec-sub {
   font-size: 16px;
   font-weight: 300;
   color: #6B7280;
   margin: 0 auto;
   max-width: 560px
 }

 /* 3-col grid for 3 cards, 1 screen height */
 .sup-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   flex: 1;
   min-height: 0;
 }

 .sup-card {
   background: #fff;
   overflow: hidden;
   transition: all .3s;
   cursor: pointer;
   border-right: 1px solid #E8EEF6;
   display: flex;
   flex-direction: column;
   position: relative;
 }

 .sup-card:last-child {
   border-right: none
 }

 .sup-card:hover {
   background: #F8FAFF;
 }

 .sup-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--blue);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s;
 }

 .sup-card:hover::after {
   transform: scaleX(1)
 }

 .sup-img {
   width: 100%;
   height: 260px;
   overflow: hidden;
   background: #F1F5F9;
   flex-shrink: 0;
 }

 .sup-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s;
 }

 .sup-card:hover .sup-img img {
   transform: scale(1.07);
 }

 .sup-content {
   padding: 36px 40px 40px;
   flex: 1;
   display: flex;
   flex-direction: column;
 }

 .sup-ttl {
   font-size: 22px;
   font-weight: 700;
   color: #000;
   margin-bottom: 12px;
 }

 .sup-desc {
   font-size: 15px;
   font-weight: 300;
   color: #6B7280;
   line-height: 1.7;
   margin-bottom: 24px;
   flex: 1;
 }

 .sup-lnk {
   font-size: 15px;
   font-weight: 700;
   color: #000;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: gap .2s, color .2s;
   align-self: flex-start;
 }

 .sup-lnk i {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #000;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   flex-shrink: 0;
   transition: background .2s, transform .2s;
 }

 .sup-card:hover .sup-lnk {
   color: var(--blue)
 }

 .sup-card:hover .sup-lnk i {
   background: var(--blue);
   transform: translateX(3px)
 }

 @media(max-width:900px) {
   .sup-grid {
     grid-template-columns: 1fr;
     min-height: auto
   }

   .sup-card {
     border-right: none;
     border-bottom: 1px solid #E8EEF6
   }

   #support {
     min-height: auto;
     padding-bottom: 60px
   }
 }

 /* Bottom CTA */
 .cta-box {
   margin-top: 60px;
   background: var(--blue-lt);
   border-radius: 18px;
   padding: 52px 36px;
   text-align: center;
 }

 .cta-box .sec-sub {
   margin: 12px auto 24px
 }

 .cta-btns {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap
 }

 .btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 26px;
   border-radius: 8px;
   border: none;
   background: var(--blue);
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   transition: background .2s, box-shadow .2s;
 }

 .btn-primary:hover {
   background: var(--blue-dk);
   box-shadow: 0 6px 20px rgba(0, 82, 204, .28)
 }

 .btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 26px;
   border-radius: 8px;
   border: 1.5px solid var(--blue);
   color: var(--blue);
   font-size: 15px;
   font-weight: 600;
   background: transparent;
   transition: background .2s;
 }

 .btn-outline:hover {
   background: var(--blue-lt)
 }

 /* ════════════════════════════════════════════
    11. FOOTER
 ════════════════════════════════════════════ */
 #footer {
   background: var(--slate);
   color: rgba(255, 255, 255, .78)
 }

 .ft-top {
   padding: 60px 0 44px;
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 56px;
 }

 .ft-logo {
   display: flex;
   align-items: center;
   gap: 0;
   margin-bottom: 14px
 }

 .ft-logo-img {
   height: 30px;
   width: auto;
   display: block;
   filter: brightness(0) invert(1);
 }

 .ft-logo-box {
   display: none
 }

 .ft-tagline {
   font-size: 13.5px;
   color: rgba(255, 255, 255, .5);
   margin-bottom: 18px
 }

 .ft-social {
   display: flex;
   gap: 7px
 }

 .soc-btn {
   width: 34px;
   height: 34px;
   border-radius: 8px;
   background: rgba(255, 255, 255, .08);
   color: rgba(255, 255, 255, .65);
   border: none;
   font-size: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .2s, color .2s;
 }

 .soc-btn:hover {
   background: var(--blue);
   color: #fff
 }

 .ft-sub {
   margin-top: 18px
 }

 .ft-sub p {
   font-size: 13px;
   color: rgba(255, 255, 255, .5);
   margin-bottom: 8px
 }

 .sub-row {
   display: flex;
   gap: 7px
 }

 .sub-inp {
   flex: 1;
   padding: 9px 12px;
   border-radius: 7px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .12);
   color: #fff;
   font-size: 13.5px;
 }

 .sub-inp::placeholder {
   color: rgba(255, 255, 255, .28)
 }

 .sub-inp:focus {
   outline: none;
   border-color: var(--blue)
 }

 .sub-go {
   padding: 9px 16px;
   border-radius: 7px;
   background: var(--blue);
   color: #fff;
   border: none;
   font-size: 13.5px;
   font-weight: 600;
   white-space: nowrap;
 }

 .ft-links {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 48px;
   margin-left: 60px;
 }

 .ft-col-ttl {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: math-auto;
   color: #fff;
   margin-bottom: 14px
 }

 .ft-col ul {
   display: flex;
   flex-direction: column;
   gap: 7px
 }

 .ft-col li a {
   font-size: 13.5px;
   color: rgba(255, 255, 255, .5);
   transition: color .15s
 }

 .ft-col li a:hover {
   color: #fff
 }

 .ft-bot {
   padding: 18px 0;
   border-top: 1px solid rgba(255, 255, 255, .07);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 12.5px;
   color: rgba(255, 255, 255, .38);
 }

 .ft-bot-links {
   display: flex;
   gap: 18px;
 }

 .ft-bot-links a {
   color: rgba(255, 255, 255, .38);
   transition: color .15s
 }

 .ft-bot-links a:hover {
   color: #fff
 }

 @media(max-width:768px) {
  .ft-bot-links {
    flex-wrap: wrap;gap: 8px;
  }
  
 .ft-bot-links a {
  width: calc(50% - 8px);
 }
 }

 /* ════════════════════════════════════════════
    PRODUCT CENTER PAGE — 4-col full-screen white
 ════════════════════════════════════════════ */
 #page-products {
   background: #fff;
   min-height: 100vh
 }

 /* Category tab bar */
 .pch-cat-bar {
   background: #fff;
   border-bottom: 1px solid #E8EEF6;
   position: sticky;
   top: 60px;
   z-index: 90;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
 }

 .pch-cat-bar-inner {
   max-width: 100%;
   margin: 0;
   padding: 0 32px;
   display: flex;
   align-items: center;
   gap: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }

 .pch-cat-bar-inner::-webkit-scrollbar {
   display: none
 }

 .pch-cat-tab {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 15px 22px;
   font-size: 13.5px;
   font-weight: 600;
   color: #64748B;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all .2s;
   white-space: nowrap;
   flex-shrink: 0;
 }

 .pch-cat-tab:hover {
   color: #000
 }

 .pch-cat-tab.active {
   color: #000;
   border-bottom-color: #000
 }

 .pch-cat-tab i {
   font-size: 13px
 }

 .pch-cat-tab-all {
   border-right: 1px solid #E8EEF6
 }

 /* Container – full width, no padding */
 .pch-container {
   width: 100%;
   padding: 0;
   margin: 0;
 }

 /* Each category block */
 .pch-section {
   border-bottom: 1px solid #E5E7EB;
 }

 .pch-section:last-of-type {
   border-bottom: none
 }

 /* ═══════════════════════════════════════════════
    Section header – Linearity Tech Background
 ═══════════════════════════════════════════════ */
 .pch-sec-hd,
 .rl-sec-hd {
   padding: 56px 48px 40px;
   border-bottom: 1px solid rgba(0, 0, 0, .06);
   position: relative;
   overflow: hidden;
   background: #0B1220;
 }

 /* SVG grid + line decoration – injected via pseudo */
 .pch-sec-hd::before,
 .rl-sec-hd::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(56, 182, 255, .13) 1px, transparent 1px),
     linear-gradient(90deg, rgba(56, 182, 255, .13) 1px, transparent 1px);
   background-size: 40px 40px;
   mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
   pointer-events: none;
 }

 /* Glowing accent line at the top */
 .pch-sec-hd::after,
 .rl-sec-hd::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg,
       transparent 0%,
       rgba(56, 182, 255, .5) 20%,
       #38B6FF 50%,
       rgba(56, 182, 255, .5) 80%,
       transparent 100%);
   pointer-events: none;
 }

 /* Per-section accent colours */
 [data-section="indoor"] .rl-sec-hd {
   background: linear-gradient(135deg, #0B1220 0%, #0F1A30 60%, #0D1E38 100%);
 }

 [data-section="outdoor"] .rl-sec-hd {
   background: linear-gradient(135deg, #081810 0%, #0A1F18 60%, #0C2318 100%);
 }

 [data-section="4glte"] .rl-sec-hd {
   background: linear-gradient(135deg, #10100A 0%, #1A1A0A 60%, #1E1E0C 100%);
 }

 [data-section="others"] .rl-sec-hd {
   background: linear-gradient(135deg, #100A1A 0%, #170E25 60%, #1C1030 100%);
 }

 [data-section="outdoor"] .rl-sec-hd::before {
   background-image:
     linear-gradient(rgba(52, 211, 153, .14) 1px, transparent 1px),
     linear-gradient(90deg, rgba(52, 211, 153, .14) 1px, transparent 1px);
   background-size: 40px 40px;
 }

 [data-section="outdoor"] .rl-sec-hd::after {
   background: linear-gradient(90deg,
       transparent 0%,
       rgba(52, 211, 153, .5) 20%,
       #34D399 50%,
       rgba(52, 211, 153, .5) 80%,
       transparent 100%);
 }

 [data-section="4glte"] .rl-sec-hd::before {
   background-image:
     linear-gradient(rgba(251, 191, 36, .13) 1px, transparent 1px),
     linear-gradient(90deg, rgba(251, 191, 36, .13) 1px, transparent 1px);
   background-size: 40px 40px;
 }

 [data-section="4glte"] .rl-sec-hd::after {
   background: linear-gradient(90deg,
       transparent 0%,
       rgba(251, 191, 36, .5) 20%,
       #FBBF24 50%,
       rgba(251, 191, 36, .5) 80%,
       transparent 100%);
 }

 [data-section="others"] .rl-sec-hd::before {
   background-image:
     linear-gradient(rgba(167, 139, 250, .14) 1px, transparent 1px),
     linear-gradient(90deg, rgba(167, 139, 250, .14) 1px, transparent 1px);
   background-size: 40px 40px;
 }

 [data-section="others"] .rl-sec-hd::after {
   background: linear-gradient(90deg,
       transparent 0%,
       rgba(167, 139, 250, .5) 20%,
       #A78BFA 50%,
       rgba(167, 139, 250, .5) 80%,
       transparent 100%);
 }

 /* Diagonal scan line overlay */
 .rl-sec-hd .rl-hd-scanline {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
 }

 .rl-sec-hd .rl-hd-scanline::before {
   content: '';
   position: absolute;
   top: -60%;
   left: -30%;
   width: 80%;
   height: 220%;
   background: linear-gradient(105deg,
       transparent 0%,
       rgba(255, 255, 255, .025) 45%,
       rgba(255, 255, 255, .045) 50%,
       rgba(255, 255, 255, .025) 55%,
       transparent 100%);
   transform: rotate(0deg);
 }

 /* Corner decorative dots */
 .rl-sec-hd .rl-hd-corner {
   position: absolute;
   bottom: 16px;
   right: 48px;
   display: flex;
   gap: 6px;
   align-items: center;
   pointer-events: none;
 }

 .rl-sec-hd .rl-hd-corner span {
   display: block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgba(56, 182, 255, .4);
 }

 .rl-sec-hd .rl-hd-corner span:nth-child(2) {
   opacity: .6;
   width: 4px;
   height: 4px;
 }

 .rl-sec-hd .rl-hd-corner span:nth-child(3) {
   opacity: .3;
   width: 3px;
   height: 3px;
 }

 [data-section="outdoor"] .rl-hd-corner span {
   background: rgba(52, 211, 153, .45);
 }

 [data-section="4glte"] .rl-hd-corner span {
   background: rgba(251, 191, 36, .45);
 }

 [data-section="others"] .rl-hd-corner span {
   background: rgba(167, 139, 250, .45);
 }

 /* Eyebrow & titles on dark bg */
 .pch-sec-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #38B6FF;
   margin-bottom: 10px;
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }

 [data-section="outdoor"] .pch-sec-eyebrow {
   color: #34D399;
 }

 [data-section="4glte"] .pch-sec-eyebrow {
   color: #FBBF24;
 }

 [data-section="others"] .pch-sec-eyebrow {
   color: #A78BFA;
 }

 .rl-sec-title,
 .pch-sec-title {
   font-size: clamp(26px, 3vw, 38px);
   font-weight: 800;
   color: #F1F5F9;
   margin: 0 0 8px;
   letter-spacing: -.02em;
   position: relative;
   z-index: 1;
 }

 .rl-sec-count,
 .pch-sec-count {
   font-size: 13px;
   color: rgba(148, 163, 184, .7);
   font-weight: 500;
   margin-top: 2px;
   position: relative;
   z-index: 1;
   letter-spacing: .04em;
 }

 /* ── 4-column product grid ── */
 .pch-grid,
 .rl-sec-products {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
 }

 /* Product card */
 .pch-card {
   background: #fff;
   overflow: hidden;
   border-right: 1px solid #EAECF0;
   border-bottom: 1px solid #EAECF0;
   cursor: pointer;
   transition: background .22s, box-shadow .22s;
   display: flex;
   flex-direction: column;
   position: relative;
 }

 /* last card in row: no right border */
 .pch-card:nth-child(4n) {
   border-right: none
 }

 .pch-card:hover {
   background: #F8FAFF;
   box-shadow: inset 0 0 0 2px var(--blue);
   z-index: 2;
 }

 /* top accent on hover */
 .pch-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--blue);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s;
   z-index: 1;
 }

 .pch-card:hover::before {
   transform: scaleX(1)
 }

 .pch-card-img {
   aspect-ratio: 1/1;
   position: relative;
   overflow: hidden;
   background: #F9FAFB;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
 }

 .pch-card-img img {
   width: 80%;
   height: 80%;
   object-fit: contain;
   transition: transform .4s cubic-bezier(.25, .8, .25, 1);
 }

 .pch-card:hover .pch-card-img img {
   transform: scale(1.08)
 }

 .pch-badge {
   position: absolute;
   top: 12px;
   left: 12px;
   font-size: 10px;
   font-weight: 700;
   padding: 3px 10px;
   border-radius: 20px;
   letter-spacing: .04em;
   z-index: 2;
 }

 .pch-badge-blue {
   background: var(--blue);
   color: #fff
 }

 .pch-badge-green {
   background: #059669;
   color: #fff
 }

 .pch-badge-purple {
   background: #7C3AED;
   color: #fff
 }

 .pch-badge-orange {
   background: #D97706;
   color: #fff
 }

 .pch-card-body {
   padding: 20px 24px 28px;
   display: flex;
   flex-direction: column;
   flex: 1;
   border-top: 1px solid #F1F5F9;
 }

 .pch-card-cat {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 6px;
 }

 .pch-card-name {
   font-size: 16px;
   font-weight: 700;
   color: #111827;
   margin-bottom: 12px;
   line-height: 1.3;
 }

 .pch-card-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   flex: 1;
 }

 .pch-card-tags span {
   font-size: 11.5px;
   color: #475569;
   background: #F1F5F9;
   border-radius: 4px;
   padding: 3px 8px;
 }

 @media(max-width:1100px) {

   .pch-grid,
   .rl-sec-products {
     grid-template-columns: repeat(3, 1fr)
   }

   .pch-card:nth-child(4n) {
     border-right: 1px solid #EAECF0
   }

   .pch-card:nth-child(3n) {
     border-right: none
   }
 }

 @media(max-width:700px) {

   .pch-grid,
   .rl-sec-products {
     grid-template-columns: repeat(2, 1fr)
   }

   .pch-card:nth-child(3n) {
     border-right: 1px solid #EAECF0
   }

   .pch-card:nth-child(2n) {
     border-right: none
   }

   .pch-sec-hd,
   .rl-sec-hd {
     padding: 36px 24px 28px
   }
 }

 /* keep rl-sec aliases */
 .rl-sec-title {
   font-size: clamp(26px, 3vw, 38px)
 }

 /* rl-sec-products: now inherits pch-grid 4-col above */
 /* Inner wrapper div (legacy v4) – make it stretch to fill card */
 .pch-card>div {
   display: contents;
 }

 /* Section spacing reset – handled by border-bottom on .pch-section */
 .pch-section {
   margin-bottom: 0;
   background: #fff;
 }

 /* ── Legacy pc-* / pch-nav stubs (kept to avoid JS errors) ── */
 .pch-layout {
   display: contents
 }

 .pch-nav {
   display: none !important
 }

 .pch-main {
   display: contents
 }

 /* ── Legacy pc-* classes kept as stubs to avoid JS errors ── */
 .pc-layout {
   display: none
 }

 .pc-sidebar {}

 .pc-sidebar-section {
   background: #fff;
   border-radius: var(--radius);
   padding: 18px;
   box-shadow: var(--sh-sm);
   margin-bottom: 16px;
 }

 .pc-sidebar-title {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--gray4);
   margin-bottom: 12px;
   padding-bottom: 10px;
   border-bottom: 1px solid #F1F5F9;
 }

 .pc-filter-item {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px 4px;
   cursor: pointer;
   border-radius: 6px;
   transition: background .15s;
 }

 .pc-filter-item:hover {
   background: var(--blue-lt)
 }

 .pc-filter-item input[type=checkbox] {
   width: 15px;
   height: 15px;
   accent-color: var(--blue);
   flex-shrink: 0;
   cursor: pointer;
 }

 .pc-filter-item label {
   font-size: 13.5px;
   color: #374151;
   cursor: pointer;
   flex: 1
 }

 .pc-filter-item .fc {
   font-size: 12px;
   color: var(--gray3)
 }

 .pc-clear {
   font-size: 12.5px;
   font-weight: 600;
   color: var(--blue);
   background: none;
   border: none;
   padding: 0;
   margin-top: 8px;
 }

 .pc-clear:hover {
   text-decoration: underline
 }

 /* Tag filters */
 .pc-tag-bar {
   background: #fff;
   border-radius: var(--radius);
   padding: 16px 20px;
   box-shadow: var(--sh-sm);
   margin-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
 }

 .pc-tag-bar-label {
   font-size: 12px;
   font-weight: 700;
   color: var(--gray4);
   margin-right: 4px;
   display: flex;
   align-items: center;
   gap: 5px;
 }

 .pc-tag {
   padding: 5px 12px;
   border-radius: 20px;
   border: 1.5px solid #E2E8F0;
   font-size: 12.5px;
   font-weight: 500;
   color: #374151;
   cursor: pointer;
   background: #fff;
   transition: all .15s;
   white-space: nowrap;
 }

 .pc-tag:hover,
 .pc-tag.active {
   border-color: var(--blue);
   color: var(--blue);
   background: var(--blue-lt);
 }

 /* Toolbar */
 .pc-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
   flex-wrap: wrap;
   gap: 10px;
 }

 .pc-result-count {
   font-size: 13.5px;
   color: var(--gray4)
 }

 .pc-result-count strong {
   color: var(--slate)
 }

 .pc-sort {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   color: var(--gray4);
 }

 .pc-sort-select {
   padding: 6px 12px;
   border-radius: 7px;
   border: 1.5px solid #E2E8F0;
   font-size: 13.5px;
   color: var(--slate);
   background: #fff;
   outline: none;
   cursor: pointer;
 }

 .pc-sort-select:focus {
   border-color: var(--blue)
 }

 /* Product grid */
 .pc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
 }

 .pc-card {
   background: #fff;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--sh-sm);
   border: 1.5px solid transparent;
   transition: transform .3s, box-shadow .3s, border-color .3s;
   cursor: pointer;
 }

 .pc-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--sh-md);
   border-color: #DBEAFE
 }

 .pc-card-img {
   aspect-ratio: 4/3;
   background: var(--gray2);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .pc-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s
 }

 .pc-card:hover .pc-card-img img {
   transform: scale(1.05)
 }

 .pc-card-img i {
   font-size: 52px;
   color: var(--blue);
   opacity: .2
 }

 .pc-badge-wrap {
   position: absolute;
   top: 10px;
   left: 10px;
   display: flex;
   gap: 5px;
   flex-wrap: wrap
 }

 .pc-badge {
   font-size: 10.5px;
   font-weight: 700;
   padding: 3px 8px;
   border-radius: 4px;
 }

 .pc-badge.b-blue {
   background: var(--blue);
   color: #fff
 }

 .pc-badge.b-green {
   background: #059669;
   color: #fff
 }

 .pc-badge.b-purple {
   background: #7C3AED;
   color: #fff
 }

 .pc-badge.b-orange {
   background: #D97706;
   color: #fff
 }

 .pc-card-info {
   padding: 18px
 }

 .pc-card-family {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 3px
 }

 .pc-card-name {
   font-size: 16px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 8px
 }

 .pc-card-specs {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 14px
 }

 .pc-spec-tag {
   font-size: 11.5px;
   font-weight: 500;
   color: var(--gray4);
   background: var(--gray1);
   padding: 3px 10px;
   border-radius: 20px;
   border: 1px solid #E8EEF6;
 }

 .pc-card-foot {
   display: flex;
   align-items: center;
   justify-content: space-between
 }

 .pc-price {
   font-size: 18px;
   font-weight: 800;
   color: var(--blue)
 }

 .pc-price small {
   font-size: 12px;
   color: var(--gray4);
   font-weight: 400
 }

 .btn-pc-learn {
   padding: 8px 16px;
   border-radius: 7px;
   font-size: 13px;
   font-weight: 600;
   background: var(--blue-lt);
   color: var(--blue);
   border: none;
   transition: background .2s, color .2s;
 }

 .btn-pc-learn:hover {
   background: var(--blue);
   color: #fff
 }

 /* Pagination */
 .pc-pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin-top: 36px;
 }

 .pg-btn {
   width: 36px;
   height: 36px;
   border-radius: 7px;
   border: 1.5px solid #E2E8F0;
   background: #fff;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--gray4);
   transition: all .2s;
 }

 .pg-btn:hover,
 .pg-btn.active {
   border-color: var(--blue);
   color: var(--blue);
   background: var(--blue-lt);
 }

 .pg-btn.active {
   background: var(--blue);
   color: #fff
 }

 /* ─── Scroll reveal ─── */
 .reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .55s, transform .55s
 }

 .reveal.visible {
   opacity: 1;
   transform: none
 }

 /* ════════════════════════════════════════════
    BUNDLES PAGE
 ════════════════════════════════════════════ */

 /* Bundles Hero */
 .bun-hero {
   position: relative;
   background: linear-gradient(135deg, #001F6B 0%, #1095F5 55%, #0070E0 100%);
   padding: 80px 0 70px;
   overflow: hidden;
 }

 .bun-hero-bg {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 70% 50%, rgba(255, 255, 255, .06) 0%, transparent 60%),
     radial-gradient(circle at 20% 80%, rgba(0, 100, 255, .18) 0%, transparent 45%);
 }

 .bun-hero::after {
   content: '';
   position: absolute;
   right: -80px;
   top: 50%;
   transform: translateY(-50%);
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
 }

 .bun-hero-inner {
   position: relative;
   z-index: 1;
   max-width: 640px
 }

 .bun-hero-label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, .12);
   backdrop-filter: blur(8px);
   color: #93C5FD;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, .18);
   margin-bottom: 18px;
 }

 .bun-hero-title {
   font-size: clamp(32px, 4vw, 52px);
   font-weight: 800;
   color: #fff;
   line-height: 1.1;
   margin-bottom: 16px;
 }

 .bun-hero-title em {
   color: #60A5FA;
   font-style: normal
 }

 .bun-hero-sub {
   font-size: 17px;
   color: rgba(255, 255, 255, .78);
   line-height: 1.65;
   margin-bottom: 28px;
 }

 .bun-hero-cta {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   align-items: center
 }

 .bun-btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 12px 24px;
   border-radius: 8px;
   border: none;
   background: #fff;
   color: var(--blue);
   font-size: 14.5px;
   font-weight: 700;
   cursor: pointer;
   transition: background .2s, box-shadow .2s;
   text-decoration: none;
 }

 .bun-btn-primary:hover {
   background: #EFF6FF;
   box-shadow: 0 4px 18px rgba(0, 0, 0, .16)
 }

 .bun-btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 11px 22px;
   border-radius: 8px;
   border: 1.5px solid rgba(255, 255, 255, .45);
   color: #fff;
   font-size: 14.5px;
   font-weight: 600;
   background: transparent;
   cursor: pointer;
   transition: border-color .2s, background .2s;
   text-decoration: none;
 }

 .bun-btn-ghost:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .08)
 }

 /* Bundles Tab Bar */
 .bun-tab-bar {
   background: #fff;
   border-bottom: 1px solid #E2E8F0;
   position: sticky;
   top: 60px;
   z-index: 98;
 }

 .bun-tabs {
   display: flex;
   gap: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }

 .bun-tabs::-webkit-scrollbar {
   display: none
 }

 .bun-tab {
   flex-shrink: 0;
   padding: 14px 20px;
   border: none;
   background: none;
   font-size: 14px;
   font-weight: 600;
   color: var(--gray4);
   border-bottom: 2px solid transparent;
   cursor: pointer;
   transition: color .15s, border-color .15s;
   white-space: nowrap;
 }

 .bun-tab:hover {
   color: var(--blue)
 }

 .bun-tab.active {
   color: var(--blue);
   border-bottom-color: var(--blue)
 }

 /* Bundles Page Body */
 .bun-page-body {
   background: var(--gray1);
   padding: 52px 0 96px
 }

 /* Bundles Section */
 .bun-section {
   margin-bottom: 72px
 }

 .bun-sec-hd {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 28px;
   flex-wrap: wrap;
   gap: 12px;
 }

 .bun-sec-eyebrow {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 5px;
 }

 .bun-sec-title {
   font-size: clamp(22px, 3vw, 30px);
   font-weight: 800;
   color: var(--slate);
   margin-bottom: 5px
 }

 .bun-sec-sub {
   font-size: 15px;
   color: var(--gray4)
 }

 .bun-view-all {
   font-size: 14px;
   font-weight: 600;
   color: var(--blue);
   display: flex;
   align-items: center;
   gap: 5px;
   flex-shrink: 0;
 }

 .bun-view-all:hover {
   text-decoration: underline
 }

 /* Bundles Grid 4-col */
 .bun-grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
 }

 /* Bundles Grid 3-col */
 .bun-grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
 }

 /* Bundles Card */
 .bun-card {
   background: #fff;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--sh-sm);
   border: 1.5px solid transparent;
   transition: transform .3s, box-shadow .3s, border-color .3s;
   display: flex;
   flex-direction: column;
 }

 .bun-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--sh-md);
   border-color: #DBEAFE
 }

 .bun-card.bun-card-lg {
   flex-direction: row
 }

 .bun-card-img-wrap {
   position: relative;
   flex-shrink: 0;
   background: var(--gray2);
   overflow: hidden;
 }

 .bun-card:not(.bun-card-lg) .bun-card-img-wrap {
   aspect-ratio: 4/3
 }

 .bun-card-lg .bun-card-img-wrap {
   width: 200px
 }

 .bun-card-img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s;
 }

 .bun-card:hover .bun-card-img-wrap img {
   transform: scale(1.04)
 }

 .bun-card-badge {
   position: absolute;
   top: 10px;
   left: 10px;
   font-size: 10.5px;
   font-weight: 700;
   padding: 3px 9px;
   border-radius: 4px;
 }

 .bun-card-badge.best {
   background: var(--blue);
   color: #fff
 }

 .bun-card-badge.new {
   background: #059669;
   color: #fff
 }

 .bun-card-badge.popular {
   background: #7C3AED;
   color: #fff
 }

 .bun-card-badge.sale {
   background: #DC2626;
   color: #fff
 }

 /* Card body */
 .bun-card-body {
   padding: 18px;
   flex: 1;
   display: flex;
   flex-direction: column
 }

 .bun-card-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 3px;
 }

 .bun-card-name {
   font-size: 16px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 8px
 }

 .bun-card-desc {
   font-size: 13.5px;
   color: var(--gray4);
   line-height: 1.6;
   margin-bottom: 12px;
   flex: 1
 }

 .bun-card-includes {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px 8px;
   margin-bottom: 16px;
 }

 .bun-card-includes span {
   font-size: 12px;
   color: #374151;
   display: flex;
   align-items: center;
   gap: 5px;
 }

 .bun-card-includes i {
   color: #059669;
   font-size: 10px;
   flex-shrink: 0
 }

 .bun-card-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 12px;
   border-top: 1px solid #F1F5F9;
 }

 .bun-card-price {
   font-size: 20px;
   font-weight: 800;
   color: var(--blue);
 }

 .bun-card-price small {
   font-size: 13px;
   color: var(--gray4);
   font-weight: 400
 }

 .bun-card-save {
   font-size: 11.5px;
   color: #059669;
   font-weight: 600;
   margin-top: 2px
 }

 .bun-btn-shop {
   padding: 8px 16px;
   border-radius: 7px;
   border: none;
   background: var(--blue);
   color: #fff;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: background .2s;
   white-space: nowrap;
 }

 .bun-btn-shop:hover {
   background: var(--blue-dk)
 }

 /* Featured / Hero card variants */
 .bun-card-featured {
   grid-column: span 2;
   flex-direction: row;
 }

 .bun-card-featured .bun-card-img-wrap {
   width: 260px;
   flex-shrink: 0;
   aspect-ratio: auto;
 }

 /* Business banner */
 .bun-biz-banner {
   background: linear-gradient(135deg, #001F6B, #1095F5);
   border-radius: 16px;
   padding: 40px 40px 40px 44px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: center;
   overflow: hidden;
   position: relative;
 }

 .bun-biz-banner::before {
   content: '';
   position: absolute;
   right: -60px;
   top: 50%;
   transform: translateY(-50%);
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
 }

 .bun-biz-text {
   position: relative;
   z-index: 1
 }

 .bun-biz-features {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   position: relative;
   z-index: 1;
 }

 .bun-biz-feat {
   display: flex;
   gap: 10px;
   align-items: flex-start;
 }

 .bun-biz-feat i {
   font-size: 16px;
   color: #60A5FA;
   flex-shrink: 0;
   margin-top: 2px;
 }

 .bun-biz-feat div {
   display: flex;
   flex-direction: column;
   gap: 2px
 }

 .bun-biz-feat strong {
   font-size: 13px;
   font-weight: 700;
   color: #fff
 }

 .bun-biz-feat span {
   font-size: 12px;
   color: rgba(255, 255, 255, .6)
 }

 /* Bundle Summary section */
 .bun-summary-card {
   background: #fff;
   border-radius: var(--radius);
   padding: 24px;
   box-shadow: var(--sh-sm);
   border: 1.5px solid #E8EEF6;
   transition: border-color .2s, box-shadow .2s, transform .2s;
   cursor: pointer;
 }

 .bun-summary-card:hover {
   border-color: var(--blue);
   box-shadow: var(--sh-md);
   transform: translateY(-3px);
 }

 .bun-summary-icon {
   width: 46px;
   height: 46px;
   background: var(--blue-lt);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 19px;
   color: var(--blue);
   margin-bottom: 14px;
 }

 .bun-summary-title {
   font-size: 16px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 6px
 }

 .bun-summary-card p {
   font-size: 13.5px;
   color: var(--gray4);
   margin-bottom: 12px;
   line-height: 1.6
 }

 .bun-summary-link {
   font-size: 13px;
   font-weight: 600;
   color: var(--blue);
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .bun-summary-link:hover {
   text-decoration: underline
 }

 /* Small primary button variant */
 .bun-btn-primary-sm {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 9px 18px;
   border-radius: 7px;
   border: none;
   background: var(--blue);
   color: #fff;
   font-size: 13.5px;
   font-weight: 600;
   cursor: pointer;
   transition: background .2s;
 }

 .bun-btn-primary-sm:hover {
   background: var(--blue-dk)
 }

 /* Small ghost button variant */
 .bun-btn-ghost-sm {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   border-radius: 7px;
   border: 1.5px solid var(--blue);
   color: var(--blue);
   font-size: 13.5px;
   font-weight: 600;
   background: transparent;
   cursor: pointer;
   transition: background .2s, color .2s;
 }

 .bun-btn-ghost-sm:hover {
   background: var(--blue-lt)
 }

 /* Feature card — wide layout (Arlo style) */
 .bun-feature-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px
 }

 .bun-feature-card {
   background: #fff;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--sh-sm);
   border: 1.5px solid transparent;
   transition: transform .3s, box-shadow .3s, border-color .3s;
   display: flex;
   flex-direction: column;
 }

 .bun-feature-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--sh-md);
   border-color: #DBEAFE
 }

 .bun-feature-img {
   position: relative;
   aspect-ratio: 16/9;
   background: var(--gray2);
   overflow: hidden;
 }

 .bun-feature-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s
 }

 .bun-feature-card:hover .bun-feature-img img {
   transform: scale(1.04)
 }

 .bun-feature-info {
   padding: 24px;
   flex: 1;
   display: flex;
   flex-direction: column
 }

 .bun-feat-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 20px;
 }

 .bun-feat-list li {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   color: #374151;
 }

 .bun-feat-list li i {
   color: var(--blue);
   font-size: 12px;
   width: 14px;
   flex-shrink: 0
 }

 .bun-feature-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   padding-top: 16px;
   border-top: 1px solid #F1F5F9;
   margin-top: auto;
 }

 .bun-feature-btns {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
 }

 /* Bundle summary grid – 4 cols */
 .bun-summary-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
 }

 /* ─── Responsive ─── */
 @media(max-width:1200px) {
   .cat-grid-v2 {
     grid-template-columns: repeat(2, 1fr)
   }

   .pch-grid {
     grid-template-columns: repeat(3, 1fr)
   }
 }

 @media(max-width:1024px) {
   .prod-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .why-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .stats-row {
     grid-template-columns: repeat(2, 1fr)
   }

   .mega-v2-inner {
     grid-template-columns: repeat(2, 1fr)
   }

   .mega-col {
     border-right: none;
     border-bottom: 1px solid #F1F5F9
   }

   .pch-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .rev-grid-ugreen {
     grid-template-columns: repeat(2, 1fr);
     gap: 32px
   }

   #reviews {
     min-height: auto;
     padding: 80px 0
   }
 }

 @media(max-width:1024px) {

   /* Product Center 响应式 – 平板保持 2 列 */
   .rl-sec-hd {
     padding: 80px 24px 48px
   }

   .rl-sec-title {
     font-size: 40px
   }

   .rl-sec-products .pch-card {
     min-height: 90vh;
     padding: 80px 60px;
   }

   .rl-sec-products .pch-card-img {
     max-width: 420px;
     margin-bottom: 36px;
   }

   .rl-sec-products .pch-card-name {
     font-size: 32px
   }
 }

 @media(max-width:768px) {

   .nav-items,
   .nav-icon:not(.mobile-only) {
     display: none
   }

   .lang-switcher {
     display: flex
   }

   .hero-title {
     font-size: 34px;
     white-space: normal
   }

   .hero-text {
     width: 100%;
     max-width: 420px
   }

   .ft-top {
     grid-template-columns: 1fr
   }

   #app {
     min-height: 80vh
   }

   .app-content h2 {
     font-size: 42px
   }

   .app-content p {
     font-size: 17px;
     margin-bottom: 36px
   }

   .app-carousel-nav {
     bottom: 40px
   }

   .store-btn {
     padding: 14px 24px;
     gap: 12px
   }

   .store-btn i {
     font-size: 24px
   }

   .store-sub {
     font-size: 11px
   }

   .store-name {
     font-size: 15px
   }

   .why-grid {
     grid-template-columns: 1fr
   }

   .rev-hero {
     flex-direction: column;
     gap: 24px;
     padding: 28px 20px;
     text-align: center
   }

   .rev-hero-rating {
     padding: 20px 24px
   }

   .rev-hero-score {
     font-size: 52px
   }

   .rev-grid-ugreen {
     grid-template-columns: 1fr;
     gap: 28px
   }

   #reviews {
     padding: 60px 0
   }

   .rev-play-icon {
     width: 64px;
     height: 64px
   }

   .rev-play-icon i {
     font-size: 24px
   }

   .rev-nav-btn {
     width: 38px;
     height: 38px;
     font-size: 14px
   }

   .sup-grid {
     grid-template-columns: 1fr;
     gap: 24px
   }

   .ft-links {
     grid-template-columns: repeat(2, 1fr);
     margin-left: 0;
   }

   .hero-notify {
     right: 12px;
     min-width: 200px
   }

   .mega-v2-inner {
     grid-template-columns: 1fr
   }

   .cat-grid-v2 {
     grid-template-columns: repeat(2, 1fr)
   }

   .cat-grid-reolink {
     grid-template-columns: 1fr;
     gap: 32px
   }

   .pch-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .prod-grid-reolink {
     grid-template-columns: 1fr;
     gap: 32px
   }

   .pch-container {
     padding: 32px 16px 60px
   }

   .pch-cat-bar-inner {
     padding: 0 16px
   }

   .pch-cat-tab {
     padding: 12px 16px;
     font-size: 13px
   }

   /* Product Center 手机端 – 单列全屏布局 */
   .rl-sec-hd {
     padding: 48px 20px 36px;
     text-align: center
   }

   .rl-sec-title {
     font-size: 32px
   }

   .rl-sec-count {
     font-size: 15px
   }

   .rl-sec-hd .rl-hd-corner {
     right: 20px;
     bottom: 12px
   }

   .pch-sec-eyebrow {
     justify-content: center
   }

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

   .rl-sec-products .pch-card {
     min-height: auto;
     padding: 20px 22px;
     border-right: none;
   }

   .rl-sec-products .pch-card-img {
     max-width: 360px;
     margin-bottom: 32px;
     padding: 32px;
   }

   .rl-sec-products .pch-card-name {
     font-size: 19px;
     margin-bottom: 20px;
   }

   .rl-sec-products .pch-card-tags span {
     padding: 8px 14px;
     font-size: 12px;
   }

   /* Product Detail KV */
   .pd-kv-title {
     font-size: 38px
   }

   .pd-kv-tagline {
     font-size: 17px
   }

   .pd-kv-content {
     padding: 60px 0 120px
   }

   .pd-kv-features {
     gap: 10px
   }

   .pd-kv-feat {
     padding: 8px 14px;
     font-size: 13px
   }

   .pd-kv-thumbs {
     bottom: 20px;
     gap: 8px
   }

   .pd-kv-thumb {
     width: 60px;
     height: 60px
   }
 }

 @media(max-width:480px) {
   .prod-grid {
     grid-template-columns: 1fr
   }

   .prod-grid-reolink {
     grid-template-columns: 1fr
   }

   .sup-grid {
     grid-template-columns: 1fr;
     gap: 20px
   }

   .sup-img {
     height: 200px
   }

   .hero-cta {
     flex-direction: column
   }

   .cat-grid-v2 {
     grid-template-columns: 1fr
   }

   .cat-grid-reolink {
     grid-template-columns: 1fr
   }

   .pch-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .rl-sec-banner {
     padding: 20px 16px
   }

   .rl-sec-title {
     font-size: 17px
   }

   .rl-sec-products,
   .rl-sec-products.cols-3,
   .rl-sec-products.cols-2 {
     grid-template-columns: 1fr
   }

   .rl-sec-products .pch-card:nth-child(n) {
     border-right: none
   }

   /* Product Detail KV */
   .pd-kv-title {
     font-size: 32px
   }

   .pd-kv-tagline {
     font-size: 15px
   }

   .pd-kv-features {
     flex-direction: column;
     align-items: flex-start
   }

   .pd-kv-cta {
     flex-direction: column
   }

   .pd-kv-cta .btn-primary,
   .pd-kv-cta .btn-outline {
     width: 100%
   }

   .pd-kv-thumbs {
     display: none
   }

   /* App fullscreen */
   #app {
     min-height: 70vh
   }

   .app-content h2 {
     font-size: 36px
   }

   .app-content p {
     font-size: 16px;
     margin-bottom: 32px
   }

   .app-carousel-nav {
     bottom: 30px
   }

   .store-btns {
     flex-direction: column;
     gap: 12px
   }

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

 /* ── Bundles Responsive ── */
 @media(max-width:1024px) {
   .bun-grid-4 {
     grid-template-columns: repeat(2, 1fr)
   }

   .bun-grid-3 {
     grid-template-columns: repeat(2, 1fr)
   }

   .bun-biz-banner {
     grid-template-columns: 1fr;
     gap: 24px
   }

   .bun-summary-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media(max-width:768px) {
   .bun-grid-4 {
     grid-template-columns: 1fr
   }

   .bun-grid-3 {
     grid-template-columns: 1fr
   }

   .bun-card.bun-card-lg {
     flex-direction: column
   }

   .bun-card-lg .bun-card-img-wrap {
     width: 100%;
     aspect-ratio: 16/9
   }

   .bun-biz-features {
     grid-template-columns: 1fr
   }

   .bun-hero {
     padding: 52px 0 48px
   }

   .bun-summary-grid {
     grid-template-columns: 1fr
   }

   .bun-feature-row {
     grid-template-columns: 1fr
   }
 }

 @media(max-width:480px) {
   .bun-sec-hd {
     flex-direction: column;
     align-items: flex-start
   }

   .bun-card-includes {
     grid-template-columns: 1fr
   }

   .bun-feature-foot {
     flex-direction: column;
     align-items: flex-start
   }
 }

 /* ════════════════════════════════════════════
    BUNDLES MINI HOVER CARD MENU
 ════════════════════════════════════════════ */
 .bun-mini-wrap {
   position: absolute;
   top: calc(100% + 1px);
   left: 50%;
   transform: translateX(-50%) translateY(-10px);
   min-width: 660px;
   background: #fff;
   border: 1px solid #E8EEF6;
   box-shadow: 0 16px 48px rgba(0, 0, 0, .14);
   border-radius: 14px;
   z-index: 998;
   opacity: 0;
   pointer-events: none;
   transition: opacity .22s ease, transform .22s ease;
 }

 #nav-bundles.open .bun-mini-wrap {
   opacity: 1;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0);
 }

 .bun-mini-inner {
   padding: 24px 28px 20px
 }

 .bun-mini-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 18px;
   padding-bottom: 14px;
   border-bottom: 1px solid #F1F5F9;
 }

 .bun-mini-badge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: var(--blue-lt);
   color: var(--blue);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   padding: 5px 12px;
   border-radius: 20px;
 }

 .bun-mini-tagline {
   font-size: 13px;
   color: var(--gray4)
 }

 .bun-mini-tagline strong {
   color: var(--blue)
 }

 .bun-mini-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-bottom: 18px;
 }

 .bun-mini-card {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
   border-radius: 10px;
   background: var(--gray1);
   border: 1.5px solid transparent;
   cursor: pointer;
   position: relative;
   transition: background .18s, box-shadow .18s, border-color .18s;
 }

 .bun-mini-card:hover {
   background: #fff;
   box-shadow: 0 4px 18px rgba(0, 82, 204, .10);
   border-color: #DBEAFE;
 }

 .bun-mini-icon {
   width: 42px;
   height: 42px;
   border-radius: 10px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 17px;
 }

 .bun-mini-card-info {
   flex: 1;
   min-width: 0
 }

 .bun-mini-card-name {
   font-size: 13px;
   font-weight: 700;
   color: var(--slate);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
 }

 .bun-mini-card-sub {
   font-size: 11.5px;
   color: var(--gray4);
   margin-top: 1px
 }

 .bun-mini-card-price {
   font-size: 12.5px;
   font-weight: 700;
   color: var(--blue);
   margin-top: 4px
 }

 .bun-mini-tag {
   position: absolute;
   top: 8px;
   right: 8px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .05em;
   text-transform: uppercase;
   padding: 2px 8px;
   border-radius: 20px;
 }

 .bun-mini-tag.best {
   background: #FEF3C7;
   color: #D97706
 }

 .bun-mini-tag.new-tag {
   background: #DCFCE7;
   color: #16A34A
 }

 .bun-mini-tag.popular-tag {
   background: #FEE2E2;
   color: #DC2626
 }

 .bun-mini-tag.biz-tag {
   background: #EDE9FE;
   color: #7C3AED
 }

 .bun-mini-tag.wireless-tag {
   background: #FFE4E6;
   color: #E11D48
 }

 .bun-mini-tag.pro-tag {
   background: #D1FAE5;
   color: #059669
 }

 .bun-mini-footer {
   padding-top: 14px;
   border-top: 1px solid #F1F5F9;
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
 }

 .bun-mini-footer a {
   font-size: 13px;
   font-weight: 600;
   color: var(--blue);
   display: inline-flex;
   align-items: center;
   gap: 5px;
 }

 .bun-mini-footer a:hover {
   text-decoration: underline
 }

 /* ════════════════════════════════════════════
    FLOATING CHAT BALL + DIALOG
 ════════════════════════════════════════════ */

 /* Floating Ball */
 .float-ball {
   position: fixed;
   bottom: 32px;
   right: 32px;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--blue) 0%, #1A6EDB 100%);
   box-shadow: 0 6px 24px rgba(0, 82, 204, .38);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 1200;
   border: none;
   transition: transform .2s, box-shadow .2s;
   animation: float-bounce 3s ease-in-out infinite;
 }

 .float-ball:hover {
   transform: scale(1.08);
   box-shadow: 0 10px 32px rgba(0, 82, 204, .48);
 }

 .float-ball i {
   font-size: 22px;
   color: #fff;
   transition: transform .2s
 }

 .float-ball.open i {
   transform: rotate(45deg)
 }

 .float-ball-badge {
   position: absolute;
   top: -2px;
   right: -2px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: #EF4444;
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid #fff;
   animation: badge-pulse 2s ease-in-out infinite;
 }

 @keyframes float-bounce {

   0%,
   100% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(-6px)
   }
 }

 @keyframes badge-pulse {

   0%,
   100% {
     transform: scale(1)
   }

   50% {
     transform: scale(1.18)
   }
 }

 .float-ball.open {
   animation: none
 }

 /* Chat Dialog */
 .chat-dialog {
   position: fixed;
   bottom: 102px;
   right: 32px;
   width: 380px;
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
   z-index: 1199;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transform: translateY(16px) scale(.97);
   transform-origin: bottom right;
   transition: opacity .25s ease, transform .25s ease;
 }

 .chat-dialog.open {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0) scale(1);
 }

 /* Dialog Header */
 .chat-hd {
   background: linear-gradient(135deg, #001F6B 0%, #1095F5 100%);
   padding: 18px 20px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .chat-hd-avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .18);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: #fff;
   flex-shrink: 0;
   border: 2px solid rgba(255, 255, 255, .3);
 }

 .chat-hd-info {
   flex: 1
 }

 .chat-hd-name {
   font-size: 20.5px;
   font-weight: 700;
   color: #fff
 }

 .chat-hd-status {
   font-size: 12px;
   color: rgba(255, 255, 255, .78);
   display: flex;
   align-items: center;
   gap: 5px;
   margin-top: 2px;
 }

 .chat-hd-status::before {
   content: '';
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #4ADE80;
   display: inline-block;
 }

 .chat-hd-close {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .15);
   border: none;
   color: #fff;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .15s;
   flex-shrink: 0;
 }

 .chat-hd-close:hover {
   background: rgba(255, 255, 255, .28)
 }

 /* Tab switcher */
 .chat-tabs {
   display: flex;
   background: #F8FAFC;
   border-bottom: 1px solid #E8EEF6;
 }

 .chat-tab {
   flex: 1;
   padding: 11px 0;
   border: none;
   background: none;
   font-size: 13px;
   font-weight: 600;
   color: var(--gray4);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: color .15s, border-color .15s;
 }

 .chat-tab.active {
   color: var(--blue);
   border-bottom-color: var(--blue)
 }

 /* Tab panels */
 .chat-panel {
   display: none;
   flex-direction: column
 }

 .chat-panel.active {
   display: flex
 }

 /* Chat panel – message area */
 .chat-messages {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-height: 220px;
   background: #F8FAFC;
 }

 .chat-msg {
   display: flex;
   gap: 8px;
   align-items: flex-start
 }

 .chat-msg-avatar {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--blue-lt);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   color: var(--blue);
   font-weight: 700;
 }

 .chat-bubble {
   background: #fff;
   border-radius: 0 10px 10px 10px;
   padding: 10px 13px;
   font-size: 13px;
   color: #374151;
   line-height: 1.5;
   box-shadow: var(--sh-sm);
   max-width: 260px;
 }

 .chat-bubble-time {
   font-size: 10.5px;
   color: var(--gray3);
   margin-top: 4px
 }

 .chat-quick-btns {
   padding: 12px 14px 8px;
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   background: #F8FAFC;
 }

 .chat-quick-btn {
   padding: 6px 13px;
   border-radius: 20px;
   border: 1.5px solid #DBEAFE;
   background: #fff;
   color: var(--blue);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: background .15s, border-color .15s;
 }

 .chat-quick-btn:hover {
   background: var(--blue-lt);
   border-color: var(--blue)
 }

 .chat-input-row {
   display: flex;
   gap: 8px;
   padding: 10px 14px 14px;
   background: #fff;
   border-top: 1px solid #F1F5F9;
 }

 .chat-input {
   flex: 1;
   padding: 9px 13px;
   border: 1.5px solid #E2E8F0;
   border-radius: 8px;
   font-size: 13px;
   font-family: inherit;
   color: #111827;
   background: #fff;
   outline: none;
   transition: border-color .15s;
   resize: none;
 }

 .chat-input:focus {
   border-color: var(--blue)
 }

 .chat-attach-btn {
   width: 38px;
   height: 38px;
   border-radius: 9px;
   border: 1.5px solid #E2E8F0;
   background: #fff;
   color: #64748B;
   font-size: 15px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: all .15s;
   align-self: flex-end;
 }

 .chat-attach-btn:hover {
   background: #F8FAFC;
   border-color: #CBD5E1;
   color: var(--blue)
 }

 .chat-send-btn {
   width: 38px;
   height: 38px;
   border-radius: 9px;
   border: none;
   background: var(--blue);
   color: #fff;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: background .15s;
   align-self: flex-end;
 }

 .chat-send-btn:hover {
   background: var(--blue-dk)
 }

 /* Contact form panel */
 .chat-form {
   padding: 16px 18px 18px;
   display: flex;
   flex-direction: column;
   gap: 13px
 }

 .chat-form-title {
   font-size: 14.5px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 2px;
 }

 .chat-form-sub {
   font-size: 12.5px;
   color: var(--gray4);
   line-height: 1.5
 }

 .chat-field {
   display: flex;
   flex-direction: column;
   gap: 5px;
   min-width: -webkit-fill-available;
 }

 .chat-field label {
   font-size: 12px;
   font-weight: 600;
   color: var(--gray4)
 }

 .chat-field input,
 .chat-field select,
 .chat-field textarea {
   padding: 9px 12px;
   border: 1.5px solid #E2E8F0;
   border-radius: 8px;
   font-size: 13px;
   font-family: inherit;
   color: #111827;
   outline: none;
   transition: border-color .15s;
   background: #fff;
 }

 .chat-field input:focus,
 .chat-field select:focus,
 .chat-field textarea:focus {
   border-color: var(--blue);
 }

 .chat-field textarea {
   resize: vertical;
   min-height: 68px;
   max-height: 120px
 }

 .chat-field-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px
 }

 .chat-submit-btn {
   padding: 11px;
   border-radius: 9px;
   border: none;
   background: var(--blue);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   transition: background .15s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   margin-top: 2px;
 }

 .chat-submit-btn:hover {
   background: var(--blue-dk)
 }

 .chat-submit-btn:disabled {
   background: var(--gray3);
   cursor: not-allowed
 }

 /* Success state */
 .chat-success {
   display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 32px 20px;
   text-align: center;
   gap: 12px;
 }

 .chat-success.show {
   display: flex
 }

 .chat-success-icon {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #D1FAE5;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   color: #059669;
 }

 .chat-success h4 {
   font-size: 16px;
   font-weight: 700;
   color: var(--slate)
 }

 .chat-success p {
   font-size: 13px;
   color: var(--gray4);
   line-height: 1.55
 }

 /* ══════════════════════════════════════════════
    MODAL (Reviews, etc.)
 ══════════════════════════════════════════════ */
 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.65);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 10000;
   padding: 20px;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }

 .modal-overlay.open {
   display: flex
 }

 .modal-content {
   background: #fff;
   border-radius: 16px;
   width: 100%;
   position: relative;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   animation: modalSlideIn .3s ease-out;
 }

 @keyframes modalSlideIn {
   from {
     opacity: 0;
     transform: translateY(-20px)
   }

   to {
     opacity: 1;
     transform: translateY(0)
   }
 }

 .modal-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   padding: 24px 28px;
   border-bottom: 1.5px solid #E2E8F0;
 }

 .modal-close {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   border: none;
   background: #F1F5F9;
   color: #64748B;
   font-size: 16px;
   cursor: pointer;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .15s;
 }

 .modal-close:hover {
   background: #E2E8F0;
   color: #0F172A
 }

 .modal-body {
   padding: 24px 28px
 }

 /* Notify dot on ball when dialog closed */
 .float-ball-tooltip {
   position: absolute;
   right: calc(100% + 12px);
   top: 50%;
   transform: translateY(-50%);
   background: var(--slate);
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   padding: 6px 12px;
   border-radius: 8px;
   pointer-events: none;
   opacity: 0;
   transition: opacity .2s;
 }

 .float-ball-tooltip::after {
   content: '';
   position: absolute;
   right: -6px;
   top: 50%;
   transform: translateY(-50%);
   border: 6px solid transparent;
   border-right: none;
   border-left-color: var(--slate);
 }

 .float-ball:hover .float-ball-tooltip {
   opacity: 1
 }

 /* ════════════════════════════════════════════
    AI CARE PAGE  — dark tech design
 ════════════════════════════════════════════ */
 #page-plans {
   background: #050a14;
   min-height: 100vh;
   color: #e2e8f0
 }

 /* ══════════════════════════════════════════════
    AI CARE PAGE  (Yoosee App / Cloud / 4G / AI)
 ══════════════════════════════════════════════ */

 /* ── Hero ── */
 .sp-hero {
   position: relative;
   overflow: hidden;
   background: #f0f4f8;
   padding: 0;
   min-height: 480px;
   display: flex;
   align-items: center;
   text-align: center;
 }

 /* Hero bg grid */
 .sp-hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
 }

 /* Surveillance grid overlay */
 .sp-hero-grid {
   position: absolute;
   inset: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 3px;
   opacity: .18;
 }

 .sp-hero-cell {
   background: #b0bec5;
   position: relative;
   overflow: hidden;
 }

 .sp-hero-cell::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, #90a4ae, #546e7a);
 }

 /* Timestamp overlay effect */
 .sp-hero-cell-ts {
   position: absolute;
   bottom: 4px;
   left: 6px;
   font-size: 9px;
   color: rgba(255, 255, 255, .7);
   font-family: monospace;
   z-index: 1;
   text-shadow: 0 0 4px rgba(0, 0, 0, .8);
 }

 /* Gradient overlay */
 .sp-hero-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(to bottom,
       rgba(240, 244, 248, .1) 0%,
       rgba(240, 244, 248, .75) 40%,
       rgba(240, 244, 248, .97) 100%);
 }

 /* Hero content */
 .sp-hero-inner {
   position: relative;
   z-index: 2;
   max-width: 640px;
   margin: 0 auto;
   padding: 80px 24px 72px;
 }

 .sp-hero-cloud-icon {
   width: 56px;
   height: 56px;
   margin: 0 auto 20px;
 }

 .sp-hero-cloud-icon svg {
   width: 100%;
   height: 100%
 }

 .sp-hero-title {
   font-size: clamp(28px, 4vw, 46px);
   font-weight: 800;
   color: #1a1a2e;
   line-height: 1.1;
   margin-bottom: 12px;
 }

 .sp-hero-sub {
   font-size: 16px;
   color: #555;
   line-height: 1.65;
   margin-bottom: 32px;
 }

 /* App download buttons */
 .sp-app-btns {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
 }

 .sp-app-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 22px;
   border-radius: 10px;
   text-decoration: none;
   border: 1.5px solid #1a1a2e;
   color: #1a1a2e;
   background: #fff;
   font-size: 14px;
   font-weight: 600;
   transition: background .2s, color .2s, box-shadow .2s;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
 }

 .sp-app-btn:hover {
   background: #1a1a2e;
   color: #fff;
   box-shadow: 0 6px 20px rgba(0, 0, 0, .2)
 }

 .sp-app-btn i {
   font-size: 20px
 }

 .sp-app-btn-label {
   display: flex;
   flex-direction: column;
   text-align: left;
   line-height: 1.2
 }

 .sp-app-btn-sub {
   font-size: 10px;
   font-weight: 400;
   opacity: .7
 }

 .sp-app-btn-name {
   font-size: 15px;
   font-weight: 700
 }

 /* ── Section shared styles ── */
 .sp-body {
   background: #fff;
   padding: 0
 }

 .sp-section {
   padding: 80px 0;
   border-top: 1px solid #eef0f4;
 }

 .sp-section:first-child {
   border-top: none
 }

 .sp-section-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
 }

 .sp-section-inner.reverse {
   direction: rtl
 }

 .sp-section-inner.reverse>* {
   direction: ltr
 }

 /* Text side */
 .sp-sec-eyebrow {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .06em;
   color: #666;
   text-transform: uppercase;
   margin-bottom: 10px;
 }

 .sp-sec-title {
   font-size: clamp(24px, 3vw, 36px);
   font-weight: 800;
   color: #1a1a2e;
   line-height: 1.2;
   margin-bottom: 16px;
 }

 .sp-sec-body {
   font-size: 15px;
   color: #555;
   line-height: 1.8;
   margin-bottom: 28px;
 }

 .sp-sec-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 24px;
   border-radius: 8px;
   background: #1d4ed8;
   color: #fff;
   border: none;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   text-decoration: none;
   transition: background .2s, box-shadow .2s;
 }

 .sp-sec-btn:hover {
   background: #1e40af;
   box-shadow: 0 4px 14px rgba(29, 78, 216, .35)
 }

 /* Image side */
 .sp-sec-img {
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 12px 48px rgba(0, 0, 0, .1);
   background: #f1f5f9;
 }

 .sp-sec-img img {
   width: 100%;
   display: block;
 }

 /* Illustration panels */
 .sp-sec-illus {
   border-radius: 16px;
   overflow: hidden;
   background: linear-gradient(135deg, #e8f4fd, #dbeafe);
   padding: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 300px;
 }

 /* Phone mockup */
 .sp-phone-wrap {
   display: flex;
   justify-content: center;
   padding: 20px 0;
 }

 .sp-phone {
   width: 240px;
   background: #1a1a2e;
   border-radius: 36px;
   padding: 10px 8px;
   box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
   position: relative;
 }

 .sp-phone::before {
   content: '';
   display: block;
   width: 80px;
   height: 6px;
   background: #333;
   border-radius: 3px;
   margin: 0 auto 8px;
 }

 .sp-phone-screen {
   background: #0d1b2a;
   border-radius: 28px;
   overflow: hidden;
 }

 .sp-phone-header {
   background: #1d2d44;
   padding: 12px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .sp-ph-logo {
   font-size: 13px;
   font-weight: 800;
   color: #60a5fa;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .sp-ph-logo i {
   font-size: 14px
 }

 .sp-ph-edit {
   font-size: 12px;
   color: #60a5fa;
   font-weight: 600
 }

 .sp-phone-filters {
   background: #162032;
   padding: 8px 14px;
   display: flex;
   gap: 16px;
 }

 .sp-pf {
   font-size: 11px;
   color: #94a3b8
 }

 .sp-pf span {
   color: #60a5fa;
   font-size: 10px
 }

 .sp-phone-date {
   padding: 6px 14px;
   font-size: 11px;
   color: #94a3b8;
   background: #0d1b2a;
 }

 .sp-phone-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2px;
   padding: 2px;
   background: #0d1b2a;
 }

 .sp-phone-thumb {
   background: #1e3a5f;
   aspect-ratio: 4/3;
   position: relative;
   overflow: hidden;
 }

 .sp-phone-thumb::after {
   content: attr(data-label);
   position: absolute;
   bottom: 3px;
   left: 4px;
   font-size: 8px;
   color: rgba(255, 255, 255, .6);
   font-family: monospace;
 }

 .sp-phone-thumb.t1 {
   background: linear-gradient(135deg, #1a3a5c, #2d6a8a)
 }

 .sp-phone-thumb.t2 {
   background: linear-gradient(135deg, #1c4a2c, #2d7a44)
 }

 .sp-phone-thumb.t3 {
   background: linear-gradient(135deg, #2a1a4a, #4a2a6a)
 }

 .sp-phone-thumb.t4 {
   background: linear-gradient(135deg, #1a2a1a, #2a4a2a)
 }

 .sp-phone-bottom {
   background: #162032;
   padding: 8px 14px;
 }

 .sp-pb-info {
   font-size: 10px;
   color: #64748b;
   display: flex;
   justify-content: space-between
 }

 /* SIM card illustration */
 .sp-sim-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }

 .sp-sim-visual {
   width: 220px;
   height: 220px;
   background: radial-gradient(ellipse at center, #e8f4fd 0%, #bfdbfe 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }

 .sp-sim-card {
   width: 100px;
   height: 70px;
   background: linear-gradient(135deg, #d1fae5, #6ee7b7);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
   position: relative;
 }

 .sp-sim-card::before {
   content: '';
   position: absolute;
   top: 8px;
   left: 8px;
   width: 30px;
   height: 24px;
   background: linear-gradient(135deg, #fbbf24, #f59e0b);
   border-radius: 4px;
 }

 .sp-sim-glow {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: radial-gradient(circle at 50% 50%, rgba(96, 165, 250, .2) 0%, transparent 70%);
   animation: simPulse 2.5s ease-in-out infinite;
 }

 @keyframes simPulse {

   0%,
   100% {
     transform: scale(1);
     opacity: .5
   }

   50% {
     transform: scale(1.08);
     opacity: 1
   }
 }

 .sp-4g-badge {
   position: absolute;
   top: -10px;
   right: -10px;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, #1d4ed8, #3b82f6);
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 14px rgba(29, 78, 216, .4);
 }

 /* AI visual */
 .sp-ai-visual {
   background: linear-gradient(135deg, #0f172a, #1e3a5f);
   border-radius: 16px;
   padding: 32px;
   min-height: 300px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   justify-content: center;
 }

 .sp-ai-box {
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(96, 165, 250, .2);
   border-radius: 10px;
   padding: 14px 16px;
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .sp-ai-icon {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
 }

 .sp-ai-icon.blue {
   background: rgba(59, 130, 246, .2);
   color: #60a5fa
 }

 .sp-ai-icon.green {
   background: rgba(34, 197, 94, .2);
   color: #4ade80
 }

 .sp-ai-icon.amber {
   background: rgba(251, 191, 36, .2);
   color: #fbbf24
 }

 .sp-ai-icon.purple {
   background: rgba(168, 85, 247, .2);
   color: #c084fc
 }

 .sp-ai-text {
   flex: 1
 }

 .sp-ai-label {
   font-size: 13px;
   font-weight: 700;
   color: #e2e8f0;
   margin-bottom: 2px
 }

 .sp-ai-sub {
   font-size: 11px;
   color: rgba(255, 255, 255, .45)
 }

 .sp-ai-badge {
   font-size: 10px;
   font-weight: 700;
   padding: 3px 8px;
   border-radius: 6px;
   background: rgba(34, 197, 94, .15);
   color: #4ade80;
 }

 /* Privacy illustration */
 .sp-priv-visual {
   background: linear-gradient(135deg, #dbeafe, #bfdbfe);
   border-radius: 16px;
   padding: 32px;
   min-height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .sp-priv-shield {
   width: 80px;
   height: 92px;
   background: linear-gradient(135deg, #1d4ed8, #3b82f6);
   clip-path: polygon(50% 0%, 100% 25%, 100% 70%, 50% 100%, 0% 70%, 0% 25%);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 2;
 }

 .sp-priv-shield i {
   font-size: 30px;
   color: #fff
 }

 .sp-priv-rings {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .sp-ring {
   position: absolute;
   border-radius: 50%;
   border: 1.5px solid rgba(29, 78, 216, .2);
 }

 .sp-ring:nth-child(1) {
   width: 160px;
   height: 160px
 }

 .sp-ring:nth-child(2) {
   width: 220px;
   height: 220px
 }

 .sp-ring:nth-child(3) {
   width: 280px;
   height: 280px
 }

 .sp-priv-dots {
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(29, 78, 216, .15) 1px, transparent 1px);
   background-size: 20px 20px;
 }

 .sp-cloud-node {
   position: absolute;
   background: #fff;
   border-radius: 10px;
   padding: 8px 12px;
   box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 11px;
   font-weight: 600;
   color: #1a1a2e;
 }

 .sp-cloud-node i {
   color: #1d4ed8;
   font-size: 12px
 }

 .sp-cloud-node-1 {
   top: 20px;
   left: 20px
 }

 .sp-cloud-node-2 {
   bottom: 20px;
   right: 20px
 }

 /* Need Help section */
 .sp-need-help {
   padding: 72px 0;
   background: #f8fafc;
   border-top: 1px solid #eef0f4;
   text-align: center;
 }

 .sp-nh-title {
   font-size: clamp(22px, 3vw, 32px);
   font-weight: 800;
   color: #1a1a2e;
   margin-bottom: 36px;
 }

 .sp-nh-cards {
   display: flex;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
 }

 .sp-nh-card {
   background: #fff;
   border: 1.5px solid #e2e8f0;
   border-radius: 12px;
   padding: 28px 32px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   min-width: 140px;
   cursor: pointer;
   text-decoration: none;
   transition: border-color .2s, box-shadow .2s, transform .2s;
   color: #1a1a2e;
 }

 .sp-nh-card:hover {
   border-color: #1d4ed8;
   box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
   transform: translateY(-2px);
 }

 .sp-nh-card i,
 .sp-nh-card svg {
   font-size: 26px;
   color: #1a1a2e;
 }

 .sp-nh-card-label {
   font-size: 13px;
   font-weight: 600;
   color: #1a1a2e
 }

 /* Responsive */
 /* ── AI Care Hero ── */
 .ac-hero {
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #050a14 0%, #0a1628 60%, #0d1f3c 100%);
   height: 100vh;
   display: flex;
   align-items: center;
   text-align: center;
   padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 }
 /* .ac-hero::after {
  z-index: 1;
  content: '';
  position: absolute;
  inset: 0;
  opacity: .4;
  background: linear-gradient(135deg, #050a14 0%, #0a1628 60%, #0d1f3c 100%);
}*/
 .ac-hero::before {
  z-index: 2;
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(16, 149, 245, .18) 0%, transparent 70%);
 } 

 /* Grid lines */
 .ac-hero-grid {
   position: absolute;
   inset: 0;z-index: 2;
   background-image:
     linear-gradient(rgba(16, 149, 245, .06) 1px, transparent 1px),
     linear-gradient(90deg, rgba(16, 149, 245, .06) 1px, transparent 1px);
   background-size: 80px 80px;
   mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 40%, transparent 100%);
 }

 /* Scanning line animation */
 .ac-hero-scan {
   position: absolute;
   left: 0;
   right: 0;z-index: 2;
   height: 2px;
   background: linear-gradient(90deg, transparent, rgba(16, 149, 245, .6), transparent);
   animation: acScan 4s linear infinite;
   top: 0;
 }

 @keyframes acScan {
   0% {
     top: 0%;
     opacity: 0
   }

   5% {
     opacity: 1
   }

   95% {
     opacity: 1
   }

   100% {
     top: 100%;
     opacity: 0
   }
 }

 .ac-hero-inner {
   position: relative;
   z-index: 2;
   max-width: 700px;
   margin: 0 auto;
   padding: 100px 24px 88px;
 }

 .ac-hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(16, 149, 245, .12);
   border: 1px solid rgba(16, 149, 245, .3);
   border-radius: 100px;
   padding: 6px 16px;
   font-size: 12px;
   font-weight: 700;
   color: #60a5fa;
   letter-spacing: .06em;
   text-transform: uppercase;
   margin-bottom: 24px;
 }

 .ac-hero-badge i {
   font-size: 10px
 }

 .ac-hero-title {
   font-size: clamp(34px, 5vw, 60px);
   font-weight: 900;
   color: #fff;
   line-height: 1.08;
   margin-bottom: 20px;
   letter-spacing: -.02em;
 }

 .ac-hero-title span {
   background: linear-gradient(90deg, #60a5fa, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .ac-hero-sub {
   font-size: 17px;
   color: #94a3b8;
   line-height: 1.7;
   margin-bottom: 40px;
 }

 /* App download buttons */
 .ac-app-btns {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 48px;
 }

 .ac-app-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 14px 26px;
   border-radius: 12px;
   text-decoration: none;
   background: rgba(255, 255, 255, .06);
   border: 1.5px solid rgba(255, 255, 255, .15);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   transition: all .25s;
   backdrop-filter: blur(8px);
 }

 .ac-app-btn:hover {
   background: rgba(16, 149, 245, .15);
   border-color: rgba(16, 149, 245, .5);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(16, 149, 245, .2);
 }

 .ac-app-btn i {
   font-size: 22px;
   color: #60a5fa
 }

 .ac-app-btn-label {
   display: flex;
   flex-direction: column;
   text-align: left;
   line-height: 1.2
 }

 .ac-app-btn-sub {
   font-size: 10px;
   font-weight: 400;
   color: #94a3b8
 }

 .ac-app-btn-name {
   font-size: 16px;
   font-weight: 700;
   color: #fff
 }

 /* Stats row */
 .ac-hero-stats {
   display: flex;
   gap: 0;
   justify-content: center;
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding-top: 32px;
 }

 .ac-stat {
   flex: 1;
   max-width: 140px;
   padding: 0 12px;
   border-right: 1px solid rgba(255, 255, 255, .08);
 }

 .ac-stat:last-child {
   border-right: none
 }

 .ac-stat-num {
   font-size: 28px;
   font-weight: 900;
   background: linear-gradient(135deg, #60a5fa, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin-bottom: 4px;
 }

 .ac-stat-lbl {
   font-size: 11px;
   color: #64748b;
   font-weight: 500
 }

 /* ── Feature sections ── */
 .ac-body {
   background: #050a14
 }

 .ac-section {
   padding: 100px 0;
   border-top: 1px solid rgba(255, 255, 255, .05);
   position: relative;
   overflow: hidden;
 }

 .ac-section:first-child {
   border-top: none
 }

 .ac-section-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .ac-section-inner.rev {
   direction: rtl
 }

 .ac-section-inner.rev>* {
   direction: ltr
 }

 /* Ambient glow behind each section */
 .ac-section::before {
   content: '';
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   filter: blur(120px);
   opacity: .12;
   pointer-events: none;
 }

 .ac-section.glow-blue::before {
   background: #1095F5;
   top: -100px;
   left: -100px
 }

 .ac-section.glow-purple::before {
   background: #7c3aed;
   top: -100px;
   right: -100px
 }

 .ac-section.glow-green::before {
   background: #059669;
   top: -100px;
   left: -100px
 }

 .ac-section.glow-rose::before {
   background: #e11d48;
   top: -100px;
   right: -100px
 }

 /* Text side */
 .ac-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   color: #60a5fa;
   text-transform: uppercase;
   margin-bottom: 16px;
 }

 .ac-eyebrow-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #60a5fa;
   animation: acPulse 2s ease-in-out infinite
 }

 @keyframes acPulse {

   0%,
   100% {
     opacity: 1;
     transform: scale(1)
   }

   50% {
     opacity: .4;
     transform: scale(.8)
   }
 }

 .ac-sec-title {
   font-size: clamp(26px, 3.5vw, 42px);
   font-weight: 900;
   color: #fff;
   line-height: 1.12;
   margin-bottom: 20px;
   letter-spacing: -.02em;
 }

 .ac-sec-title em {
   font-style: normal;
   background: linear-gradient(90deg, #60a5fa, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .ac-sec-body {
   font-size: 15px;
   color: #94a3b8;
   line-height: 1.85;
   margin-bottom: 28px;
 }

 .ac-feature-list {
   list-style: none;
   padding: 0;
   margin: 0 0 32px;
   display: flex;
   flex-direction: column;
   gap: 12px
 }

 .ac-feature-list li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 14px;
   color: #cbd5e1;
   line-height: 1.5;
 }

 .ac-feature-list li i {
   color: #34d399;
   font-size: 14px;
   margin-top: 2px;
   flex-shrink: 0
 }

 .ac-sec-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 24px;
   border-radius: 8px;
   background: linear-gradient(135deg, #1095F5, #6366f1);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   text-decoration: none;
   transition: opacity .2s, transform .2s;
 }

 .ac-sec-btn:hover {
   opacity: .88;
   transform: translateY(-1px)
 }

 /* ── Visual panels ── */
 /* App mockup panel */
 .ac-phone-panel {
   background: linear-gradient(135deg, #0a1628, #0f2040);
   border: 1px solid rgba(16, 149, 245, .15);
   border-radius: 20px;
   padding: 32px;
   box-shadow: 0 32px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04) inset;
   position: relative;
   overflow: hidden;
 }

 .ac-phone-panel::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .4), transparent);
 }

 .ac-phone {
   width: 220px;
   margin: 0 auto;
   background: #0d1b2a;
   border-radius: 32px;
   padding: 10px 8px;
   box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
   position: relative
 }

 .ac-phone::before {
   content: '';
   display: block;
   width: 70px;
   height: 5px;
   background: #1e293b;
   border-radius: 3px;
   margin: 0 auto 8px
 }

 .ac-phone-screen {
   background: #060e1a;
   border-radius: 26px;
   overflow: hidden
 }

 .ac-ph-header {
   background: #0d1f3a;
   padding: 10px 12px;
   display: flex;
   align-items: center;
   justify-content: space-between
 }

 .ac-ph-logo {
   font-size: 12px;
   font-weight: 800;
   color: #60a5fa;
   display: flex;
   align-items: center;
   gap: 5px
 }

 .ac-ph-status {
   font-size: 10px;
   color: #34d399;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 4px
 }

 .ac-ph-status-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #34d399;
   animation: acPulse 2s infinite
 }

 .ac-ph-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2px;
   padding: 2px;
   background: #060e1a
 }

 .ac-ph-cell {
   aspect-ratio: 4/3;
   position: relative;
   overflow: hidden
 }

 .ac-ph-cell.c1 {
   background: linear-gradient(135deg, #0d2a4a, #1a4a6a)
 }

 .ac-ph-cell.c2 {
   background: linear-gradient(135deg, #0a2a1a, #1a4a2a)
 }

 .ac-ph-cell.c3 {
   background: linear-gradient(135deg, #1a0a3a, #3a1a5a)
 }

 .ac-ph-cell.c4 {
   background: linear-gradient(135deg, #0a1a2a, #1a2a3a)
 }

 .ac-ph-cell::after {
   content: attr(data-lbl);
   position: absolute;
   bottom: 3px;
   left: 4px;
   font-size: 7px;
   color: rgba(255, 255, 255, .5);
   font-family: monospace
 }

 .ac-ph-cell-badge {
   position: absolute;
   top: 4px;
   right: 4px;
   background: rgba(239, 68, 68, .9);
   border-radius: 4px;
   padding: 1px 5px;
   font-size: 7px;
   color: #fff;
   font-weight: 700
 }

 .ac-ph-footer {
   background: #0d1f3a;
   padding: 8px 12px;
   display: flex;
   align-items: center;
   justify-content: space-between
 }

 .ac-ph-alert {
   font-size: 9px;
   color: #fbbf24;
   display: flex;
   align-items: center;
   gap: 4px
 }

 .ac-ph-ok {
   font-size: 9px;
   color: #34d399
 }

 /* 4G panel */
 .ac-4g-panel {
   background: linear-gradient(135deg, #050f1a, #091929);
   border: 1px solid rgba(52, 211, 153, .12);
   border-radius: 20px;
   padding: 48px 32px;
   box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 320px;
 }

 .ac-4g-visual {
   position: relative;
   width: 220px;
   height: 220px;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .ac-4g-rings {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .ac-4g-ring {
   position: absolute;
   border-radius: 50%;
   border: 1.5px solid rgba(52, 211, 153, .2);
   animation: ac4gRing 3s ease-in-out infinite;
 }

 .ac-4g-ring:nth-child(1) {
   width: 200px;
   height: 200px
 }

 .ac-4g-ring:nth-child(2) {
   width: 150px;
   height: 150px;
   animation-delay: .6s
 }

 .ac-4g-ring:nth-child(3) {
   width: 100px;
   height: 100px;
   animation-delay: 1.2s
 }

 @keyframes ac4gRing {

   0%,
   100% {
     opacity: .3;
     transform: scale(1)
   }

   50% {
     opacity: .7;
     transform: scale(1.04)
   }
 }

 .ac-4g-core {
   width: 76px;
   height: 76px;
   border-radius: 50%;
   background: linear-gradient(135deg, #059669, #34d399);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 40px rgba(52, 211, 153, .35);
   position: relative;
   z-index: 2;
 }

 .ac-4g-core i {
   font-size: 28px;
   color: #fff
 }

 .ac-4g-badge {
   position: absolute;
   top: -12px;
   right: -12px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: linear-gradient(135deg, #1095F5, #60a5fa);
   color: #fff;
   font-size: 13px;
   font-weight: 900;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 16px rgba(16, 149, 245, .5);
   z-index: 3;
 }

 .ac-4g-tags {
   position: absolute;
   display: flex;
   flex-direction: column;
   gap: 8px;
   right: -120px;
   top: 50%;
   transform: translateY(-50%);
 }

 .ac-4g-tag {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 8px;
   padding: 6px 12px;
   font-size: 11px;
   color: #94a3b8;
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .ac-4g-tag i {
   color: #34d399;
   font-size: 10px
 }

 /* AI panel */
 .ac-ai-panel {
   background: linear-gradient(135deg, #0a0f1e, #0d1832);
   border: 1px solid rgba(99, 102, 241, .15);
   border-radius: 20px;
   padding: 28px;
   box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .ac-ai-row {
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(99, 102, 241, .12);
   border-radius: 12px;
   padding: 14px 16px;
   display: flex;
   align-items: center;
   gap: 14px;
   transition: border-color .3s;
 }

 .ac-ai-row:hover {
   border-color: rgba(99, 102, 241, .35)
 }

 .ac-ai-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
 }

 .ac-ai-icon.blue {
   background: rgba(96, 165, 250, .15);
   color: #60a5fa
 }

 .ac-ai-icon.amber {
   background: rgba(251, 191, 36, .12);
   color: #fbbf24
 }

 .ac-ai-icon.green {
   background: rgba(52, 211, 153, .12);
   color: #34d399
 }

 .ac-ai-icon.purple {
   background: rgba(168, 85, 247, .12);
   color: #c084fc
 }

 .ac-ai-text {
   flex: 1
 }

 .ac-ai-label {
   font-size: 13px;
   font-weight: 700;
   color: #e2e8f0;
   margin-bottom: 2px
 }

 .ac-ai-sub {
   font-size: 11px;
   color: #475569
 }

 .ac-ai-chip {
   font-size: 10px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 100px;
   background: rgba(52, 211, 153, .12);
   color: #34d399;
   white-space: nowrap;
 }

 .ac-ai-chip.amber {
   background: rgba(251, 191, 36, .12);
   color: #fbbf24
 }

 .ac-ai-chip.blue {
   background: rgba(96, 165, 250, .12);
   color: #60a5fa
 }

 .ac-ai-chip.purple {
   background: rgba(168, 85, 247, .12);
   color: #c084fc
 }

 /* AI accuracy bar */
 .ac-ai-acc-wrap {
   margin-top: 4px
 }

 .ac-ai-acc-track {
   height: 3px;
   background: rgba(255, 255, 255, .06);
   border-radius: 3px;
   overflow: hidden
 }

 .ac-ai-acc-fill {
   height: 100%;
   border-radius: 3px;
   background: linear-gradient(90deg, #34d399, #60a5fa);
   transition: width .8s ease
 }

 /* Privacy panel */
 .ac-priv-panel {
   background: linear-gradient(135deg, #0a0f1e, #130a24);
   border: 1px solid rgba(232, 33, 100, .12);
   border-radius: 20px;
   padding: 40px 32px;
   box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 320px;
   position: relative;
   overflow: hidden;
 }

 .ac-shield-wrap {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .ac-shield-rings {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .ac-shield-ring {
   position: absolute;
   border-radius: 50%;
   border: 1px solid rgba(232, 33, 100, .15);
   animation: acShieldRing 4s ease-in-out infinite;
 }

 .ac-shield-ring:nth-child(1) {
   width: 240px;
   height: 240px
 }

 .ac-shield-ring:nth-child(2) {
   width: 180px;
   height: 180px;
   animation-delay: .8s
 }

 .ac-shield-ring:nth-child(3) {
   width: 120px;
   height: 120px;
   animation-delay: 1.6s
 }

 @keyframes acShieldRing {

   0%,
   100% {
     opacity: .3
   }

   50% {
     opacity: .8
   }
 }

 .ac-shield-icon {
   width: 96px;
   height: 96px;
   background: linear-gradient(135deg, #7c3aed, #a855f7);
   clip-path: polygon(50% 0%, 100% 20%, 100% 65%, 50% 100%, 0% 65%, 0% 20%);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 50px rgba(168, 85, 247, .3);
   position: relative;
   z-index: 2;
 }

 .ac-shield-icon i {
   font-size: 36px;
   color: #fff
 }

 /* Floating lock tags */
 .ac-priv-tags {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   pointer-events: none;
 }

 .ac-priv-tag {
   position: absolute;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 8px;
   padding: 5px 10px;
   font-size: 10px;
   color: #94a3b8;
   display: flex;
   align-items: center;
   gap: 5px;
 }

 .ac-priv-tag i {
   color: #a855f7;
   font-size: 9px
 }

 /* ── Trust strip (removed, keep rules hidden) ── */
 .ac-trust-strip {
   display: none
 }

 /* ══ AC GLOBAL MAP SECTION ══ */
 .ac-globe-section {
   position: relative;
   width: 100%;
   min-height: 100vh;
   background: #000;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 /* SVG world map fills background */
 .ac-globe-map {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: .18;
 }

 /* subtle scanline overlay */
 .ac-globe-scan {
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(0deg,
       transparent, transparent 3px,
       rgba(255, 255, 255, .015) 3px, rgba(255, 255, 255, .015) 4px);
   pointer-events: none;
   z-index: 1;
 }

 /* radial glow centre */
 .ac-globe-glow {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: min(700px, 90vw);
   height: min(700px, 90vw);
   background: radial-gradient(circle, rgba(16, 149, 245, .12) 0%, transparent 70%);
   pointer-events: none;
   z-index: 1;
 }

 /* content sits above map */
 .ac-globe-inner {
   position: relative;
   z-index: 4;
   width: 100%;
   max-width: 1100px;
   padding: 80px 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 }

 .ac-globe-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: #1095F5;
   border: 1px solid rgba(16, 149, 245, .35);
   padding: 5px 16px;
   border-radius: 30px;
   background: rgba(16, 149, 245, .08);
   margin-bottom: 28px;
 }

 .ac-globe-title {
   font-size: clamp(32px, 5vw, 60px);
   font-weight: 900;
   color: #fff;
   line-height: 1.1;
   letter-spacing: -.03em;
   margin-bottom: 16px;
 }

 .ac-globe-title em {
   background: linear-gradient(90deg, #1095F5, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-style: normal;
 }

 .ac-globe-sub {
   font-size: 16px;
   color: #64748b;
   line-height: 1.7;
   max-width: 560px;
   margin-bottom: 56px;
 }

 /* Stats row */
 .ac-globe-stats {
   display: flex;
   gap: 0;
   flex-wrap: wrap;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 16px;
   background: rgba(255, 255, 255, .03);
   backdrop-filter: blur(12px);
   overflow: hidden;
   width: 100%;
   max-width: 860px;
   margin-bottom: 56px;
 }

 .ac-globe-stat {
   flex: 1;
   min-width: 170px;
   padding: 32px 24px;
   border-right: 1px solid rgba(255, 255, 255, .07);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
 }

 .ac-globe-stat:last-child {
   border-right: none
 }

 .ac-globe-stat-num {
   font-size: clamp(26px, 3.5vw, 40px);
   font-weight: 900;
   color: #fff;
   line-height: 1;
   font-variant-numeric: tabular-nums;
 }

 .ac-globe-stat-num span {
   background: linear-gradient(90deg, #1095F5, #60a5fa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .ac-globe-stat-label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #475569;
   margin-top: 2px;
 }

 .ac-globe-stat-sub {
   font-size: 11px;
   color: #334155;
 }

 /* Pulse dots on map canvas */
 .ac-globe-canvas {
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
 }

 /* Live ticker bar */
 .ac-globe-ticker {
   position: relative;
   z-index: 4;
   width: 100%;
   border-top: 1px solid rgba(255, 255, 255, .06);
   background: rgba(0, 0, 0, .6);
   backdrop-filter: blur(8px);
   padding: 14px 0;
   overflow: hidden;
   margin-top: auto;
 }

 .ac-globe-ticker-inner {
   display: flex;
   gap: 0;
   align-items: center;
   white-space: nowrap;
   animation: ac-ticker-scroll 28s linear infinite;
 }

 .ac-globe-ticker-inner:hover {
   animation-play-state: paused
 }

 @keyframes ac-ticker-scroll {
   0% {
     transform: translateX(0)
   }

   100% {
     transform: translateX(-50%)
   }
 }

 .ac-globe-ticker-item {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 0 40px;
   font-size: 12px;
   font-weight: 600;
   color: #475569;
   border-right: 1px solid rgba(255, 255, 255, .06);
 }

 .ac-globe-ticker-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #1095F5;
   flex-shrink: 0;
   animation: ac-pulse-dot 1.8s ease-in-out infinite;
 }

 .ac-globe-ticker-dot.red {
   background: #ef4444;
   animation-delay: .4s
 }

 .ac-globe-ticker-dot.green {
   background: #22c55e;
   animation-delay: .8s
 }

 .ac-globe-ticker-dot.purple {
   background: #a855f7;
   animation-delay: 1.2s
 }

 @keyframes ac-pulse-dot {

   0%,
   100% {
     opacity: 1;
     transform: scale(1)
   }

   50% {
     opacity: .4;
     transform: scale(.7)
   }
 }

 /* Alert counter badge */
 .ac-globe-counter {
   position: absolute;
   top: 28px;
   right: 32px;
   z-index: 5;
   background: rgba(239, 68, 68, .12);
   border: 1px solid rgba(239, 68, 68, .3);
   border-radius: 12px;
   padding: 14px 20px;
   text-align: right;
 }

 .ac-globe-counter-num {
   font-size: 28px;
   font-weight: 900;
   color: #ef4444;
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }

 .ac-globe-counter-label {
   font-size: 10px;
   color: #94a3b8;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   margin-top: 3px;
 }

 /* Response latency badge */
 .ac-globe-latency {
   position: absolute;
   top: 28px;
   left: 32px;
   z-index: 5;
   background: rgba(16, 149, 245, .1);
   border: 1px solid rgba(16, 149, 245, .25);
   border-radius: 12px;
   padding: 14px 20px;
 }

 .ac-globe-latency-num {
   font-size: 28px;
   font-weight: 900;
   color: #1095F5;
   line-height: 1;
 }

 .ac-globe-latency-label {
   font-size: 10px;
   color: #94a3b8;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   margin-top: 3px;
 }

 @media(max-width:700px) {
   .ac-globe-inner {
     padding: 60px 20px
   }

   .ac-globe-stat {
     min-width: 140px;
     padding: 22px 16px
   }

   .ac-globe-counter,
   .ac-globe-latency {
     display: none
   }
 }

 /* ── CTA Banner ── */
 .ac-cta {
   background: linear-gradient(135deg, #0d1f3c 0%, #1a1040 100%);
   padding: 80px 24px;
   text-align: center;
   border-top: 1px solid rgba(255, 255, 255, .06);
   position: relative;
   overflow: hidden;
 }

 .ac-cta::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(99, 102, 241, .15) 0%, transparent 70%);
 }

 .ac-cta-inner {
   position: relative;
   z-index: 1;
   max-width: 580px;
   margin: 0 auto
 }

 .ac-cta h2 {
   font-size: clamp(26px, 4vw, 40px);
   font-weight: 900;
   color: #fff;
   margin-bottom: 12px
 }

 .ac-cta p {
   font-size: 15px;
   color: #94a3b8;
   line-height: 1.7;
   margin-bottom: 36px
 }

 .ac-cta-btns {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap
 }

 .ac-cta-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 28px;
   border-radius: 10px;
   background: linear-gradient(135deg, #1095F5, #6366f1);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   text-decoration: none;
   transition: opacity .2s, transform .2s;
 }

 .ac-cta-primary:hover {
   opacity: .88;
   transform: translateY(-2px)
 }

 .ac-cta-ghost {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 28px;
   border-radius: 10px;
   background: transparent;
   border: 1.5px solid rgba(255, 255, 255, .2);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   text-decoration: none;
   transition: border-color .2s, background .2s;
 }

 .ac-cta-ghost:hover {
   border-color: rgba(255, 255, 255, .5);
   background: rgba(255, 255, 255, .06)
 }

 /* Social buttons in CTA */
 .ac-cta-social {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 8px;
 }

 .ac-social-btn {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 11px 20px;
   border-radius: 50px;
   font-size: 13px;
   font-weight: 700;
   text-decoration: none;
   border: 1.5px solid transparent;
   transition: transform .2s, box-shadow .2s, opacity .2s;
   letter-spacing: .02em;
 }

 .ac-social-btn i {
   font-size: 16px;
 }

 .ac-social-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
   opacity: .92
 }

 .ac-social-btn.fb {
   background: #1877F2;
   color: #fff;
   border-color: #1877F2
 }

 .ac-social-btn.dc {
   background: #5865F2;
   color: #fff;
   border-color: #5865F2
 }

 .ac-social-btn.yt {
   background: #FF0000;
   color: #fff;
   border-color: #FF0000
 }

 .ac-social-btn.tt {
   background: #010101;
   color: #fff;
   border-color: rgba(255, 255, 255, .18)
 }

 .ac-social-btn.ig {
   background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
   color: #fff;
   border-color: transparent;
 }

 /* ── AC Hero (updated: no stats/buttons) ── */
 .ac-hero-inner {
   padding: 120px 24px 100px;
 }

 .ac-hero-sub {
   margin-bottom: 0;
 }

 /* ── Section 2: Video ── */
 .ac-video-section {
   background: #050a14;
   padding: 80px 0 0;
 }

 .ac-video-wrap {
   position: relative;
   max-width: 1100px;
   margin: 0 auto;
   border-radius: 20px;
   overflow: hidden;
   cursor: pointer;
   box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
 }

 .ac-video-wrap img {
   width: 100%;
   display: block;
   object-fit: cover;
   transition: transform .4s ease;
 }

 .ac-video-wrap:hover img {
   transform: scale(1.02)
 }

 .ac-video-play-btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1095F5;
   font-size: 22px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
   transition: transform .2s, background .2s;
   padding-left: 4px;
 }

 .ac-video-play-btn:hover {
   transform: translate(-50%, -50%) scale(1.1);
   background: #fff;
 }

 /* ── Section 3: Recording ── */
 .ac-rec-section {
   background: #050a14;
   padding: 100px 0;
 }

 .ac-sec-eyebrow-center {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #60a5fa;
   margin-bottom: 16px;
 }

 .ac-rec-title {
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 900;
   color: #fff;
   text-align: center;
   margin-bottom: 56px;
   letter-spacing: -.02em;
 }

 .ac-rec-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px;
 }

 .ac-rec-card {
   background: rgba(255, 255, 255, .03);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 20px;
   overflow: hidden;
   transition: border-color .3s, transform .3s;
 }

 .ac-rec-card:hover {
   border-color: rgba(96, 165, 250, .3);
   transform: translateY(-4px);
 }

 .ac-rec-img-wrap {
   aspect-ratio: 16/9;
   overflow: hidden;
 }

 .ac-rec-img-bg {
   width: 100%;
   height: 100%;
   gap: 24px;
   overflow: hidden;
 }

 .ac-rec-img-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .loop-bg {
   background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 100%);
   border-bottom: 1px solid rgba(96, 165, 250, .15);
 }

 .cloud-bg {
   background: linear-gradient(135deg, #071a14 0%, #0a2818 100%);
   border-bottom: 1px solid rgba(52, 211, 153, .15);
 }

 .ac-rec-icon-wrap {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: rgba(96, 165, 250, .12);
   border: 1.5px solid rgba(96, 165, 250, .3);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   color: #60a5fa;
 }

 .ac-rec-icon-wrap.cloud {
   background: rgba(52, 211, 153, .12);
   border-color: rgba(52, 211, 153, .3);
   color: #34d399;
 }

 .ac-rec-loop-visual,
 .ac-cloud-visual {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
 }

 .ac-loop-track {
   display: flex;
   align-items: flex-end;
   gap: 5px;
   height: 40px;
 }

 .ac-loop-bar {
   width: 8px;
   border-radius: 4px;
   background: linear-gradient(180deg, #60a5fa, rgba(96, 165, 250, .3));
   animation: loopPulse 1.4s ease-in-out infinite;
 }

 .ac-loop-bar.b1 {
   height: 60%;
   animation-delay: 0s
 }

 .ac-loop-bar.b2 {
   height: 90%;
   animation-delay: .1s
 }

 .ac-loop-bar.b3 {
   height: 45%;
   animation-delay: .2s
 }

 .ac-loop-bar.b4 {
   height: 80%;
   animation-delay: .3s
 }

 .ac-loop-bar.b5 {
   height: 55%;
   animation-delay: .4s
 }

 .ac-loop-bar.b6 {
   height: 70%;
   animation-delay: .5s
 }

 .ac-loop-bar.b7 {
   height: 40%;
   animation-delay: .6s
 }

 @keyframes loopPulse {

   0%,
   100% {
     opacity: .5;
     transform: scaleY(.8)
   }

   50% {
     opacity: 1;
     transform: scaleY(1)
   }
 }

 .ac-loop-label,
 .ac-cloud-label {
   font-size: 11px;
   color: #64748b;
   letter-spacing: .06em;
   font-weight: 600;
   text-transform: uppercase;
 }

 .ac-cloud-ring {
   border-radius: 50%;
   border: 1px solid rgba(52, 211, 153, .2);
   position: absolute;
 }

 .ac-cloud-visual {
   position: relative;
   height: 60px;
   justify-content: center;
 }

 .ac-cloud-ring.r1 {
   width: 80px;
   height: 80px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: cloudPulse 2s ease-in-out infinite
 }

 .ac-cloud-ring.r2 {
   width: 120px;
   height: 120px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: cloudPulse 2s ease-in-out infinite .5s
 }

 .ac-cloud-dots {
   display: flex;
   gap: 8px;
   position: relative;
   z-index: 2
 }

 .ac-cloud-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #34d399;
   animation: cloudDot 1.5s ease-in-out infinite;
 }

 .ac-cloud-dot:nth-child(2) {
   animation-delay: .2s
 }

 .ac-cloud-dot:nth-child(3) {
   animation-delay: .4s
 }

 @keyframes cloudPulse {

   0%,
   100% {
     opacity: .3;
     transform: translate(-50%, -50%) scale(.9)
   }

   50% {
     opacity: .6;
     transform: translate(-50%, -50%) scale(1.05)
   }
 }

 @keyframes cloudDot {

   0%,
   100% {
     opacity: .4;
     transform: scale(.8)
   }

   50% {
     opacity: 1;
     transform: scale(1)
   }
 }

 .ac-rec-body {
   padding: 28px 32px 32px
 }

 .ac-rec-card-title {
   font-size: 20px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
 }

 .ac-rec-card-desc {
   font-size: 15px;
   color: #94a3b8;
   line-height: 1.7;
   margin-bottom: 20px
 }

 .ac-rec-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
 }

 .ac-rec-tag {
   font-size: 12px;
   font-weight: 600;
   border: 1px solid rgba(96, 165, 250, .3);
   color: #60a5fa;
   padding: 4px 12px;
   border-radius: 100px;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .ac-rec-tag i {
   font-size: 10px
 }

 /* ── Section 4: Three-col features ── */
 .ac-feat3-section {
   background: #070d1a;
   padding: 100px 0;
   border-top: 1px solid rgba(255, 255, 255, .05);
 }

 .ac-feat3-title {
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 900;
   color: #fff;
   text-align: center;
   margin-bottom: 56px;
   letter-spacing: -.02em;
 }

 .ac-feat3-title em {
   background: linear-gradient(90deg, #60a5fa, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-style: normal;
 }

 .ac-feat3-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }

 .ac-feat3-card {
   background: rgba(255, 255, 255, .03);
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 20px;
   overflow: hidden;
   transition: border-color .3s, transform .3s, box-shadow .3s;
 }

 .ac-feat3-card:hover {
   border-color: rgba(96, 165, 250, .25);
   transform: translateY(-6px);
   box-shadow: 0 20px 60px rgba(16, 149, 245, .1);
 }

 .ac-feat3-img {
   aspect-ratio: 4/3;
   overflow: hidden;
 }

 .ac-feat3-img-inner {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }

 .ac-feat3-img-inner img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .detect-bg {
   background: linear-gradient(135deg, #080f22, #0f1e3d)
 }

 .call-bg {
   background: linear-gradient(135deg, #120800, #2a1500)
 }

 .push-bg {
   background: linear-gradient(135deg, #0c0818, #180f2e)
 }

 /* Detection visual */
 .ac-detect-visual {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   width: 100%;
   padding: 20px
 }

 .ac-detect-frame {
   width: 80px;
   height: 90px;
   border: 2px solid #60a5fa;
   border-radius: 4px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .ac-detect-corner {
   position: absolute;
   width: 12px;
   height: 12px;
   border-color: #60a5fa;
   border-style: solid;
 }

 .ac-detect-corner.tl {
   top: -2px;
   left: -2px;
   border-width: 2px 0 0 2px
 }

 .ac-detect-corner.tr {
   top: -2px;
   right: -2px;
   border-width: 2px 2px 0 0
 }

 .ac-detect-corner.bl {
   bottom: -2px;
   left: -2px;
   border-width: 0 0 2px 2px
 }

 .ac-detect-corner.br {
   bottom: -2px;
   right: -2px;
   border-width: 0 2px 2px 0
 }

 .ac-detect-icon {
   font-size: 32px;
   color: rgba(96, 165, 250, .6)
 }

 .ac-detect-chips {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   justify-content: center
 }

 .ac-detect-chip {
   font-size: 11px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 100px;
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .ac-detect-chip.person {
   background: rgba(96, 165, 250, .15);
   color: #60a5fa;
   border: 1px solid rgba(96, 165, 250, .3)
 }

 .ac-detect-chip.vehicle {
   background: rgba(251, 191, 36, .12);
   color: #fbbf24;
   border: 1px solid rgba(251, 191, 36, .3)
 }

 .ac-detect-chip.pet {
   background: rgba(52, 211, 153, .12);
   color: #34d399;
   border: 1px solid rgba(52, 211, 153, .3)
 }

 /* Call visual */
 .ac-call-visual {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   padding: 20px
 }

 .ac-call-phone {
   width: 150px;
   background: #111;
   border-radius: 20px;
   border: 2px solid rgba(255, 255, 255, .1);
   overflow: hidden;
   position: relative;
   z-index: 2;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
 }

 .ac-call-screen {
   background: linear-gradient(180deg, #1a0a00, #2d1400);
   padding: 20px 16px 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
 }

 .ac-call-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: rgba(251, 191, 36, .2);
   border: 2px solid rgba(251, 191, 36, .4);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fbbf24;
   font-size: 18px;
 }

 .ac-call-name {
   font-size: 13px;
   font-weight: 700;
   color: #fff
 }

 .ac-call-status {
   font-size: 11px;
   color: rgba(255, 255, 255, .5)
 }

 .ac-call-btns {
   display: flex;
   gap: 24px;
   margin-top: 4px
 }

 .ac-call-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
 }

 .ac-call-btn.decline {
   background: #ef4444;
   color: #fff
 }

 .ac-call-btn.accept {
   background: #22c55e;
   color: #fff;
   animation: callPulse 1.5s ease-in-out infinite
 }

 @keyframes callPulse {

   0%,
   100% {
     box-shadow: 0 0 0 0 rgba(34, 197, 94, .4)
   }

   50% {
     box-shadow: 0 0 0 8px rgba(34, 197, 94, 0)
   }
 }

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

 .ac-call-ring {
   position: absolute;
   border-radius: 50%;
   border: 1px solid rgba(251, 191, 36, .2);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .ac-call-ring.rr1 {
   width: 180px;
   height: 180px;
   animation: callRing 2s ease-in-out infinite
 }

 .ac-call-ring.rr2 {
   width: 240px;
   height: 240px;
   animation: callRing 2s ease-in-out infinite .5s
 }

 @keyframes callRing {
   0% {
     opacity: .8;
     transform: translate(-50%, -50%) scale(.8)
   }

   100% {
     opacity: 0;
     transform: translate(-50%, -50%) scale(1.2)
   }
 }

 /* Push notification visual */
 .ac-push-visual {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 20px;
   width: 100%
 }

 .ac-push-notif {
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 14px;
   padding: 12px 14px;
   backdrop-filter: blur(8px);
 }

 .ac-push-notif.second {
   opacity: .7;
   transform: scale(.96)
 }

 .ac-push-header {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px
 }

 .ac-push-app-icon {
   width: 24px;
   height: 24px;
   border-radius: 6px;
   background: linear-gradient(135deg, #1095F5, #7c3aed);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 10px;
 }

 .ac-push-app-name {
   font-size: 12px;
   font-weight: 700;
   color: #fff;
   flex: 1
 }

 .ac-push-time {
   font-size: 11px;
   color: #64748b
 }

 .ac-push-body {
   display: flex;
   align-items: center;
   gap: 10px
 }

 .ac-push-text {
   flex: 1
 }

 .ac-push-title {
   font-size: 13px;
   font-weight: 700;
   color: #fff
 }

 .ac-push-sub {
   font-size: 11px;
   color: #94a3b8
 }

 .ac-push-thumb {
   width: 44px;
   height: 44px;
   border-radius: 8px;
   background: rgba(96, 165, 250, .15);
   border: 1px solid rgba(96, 165, 250, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #60a5fa;
   font-size: 16px;
   flex-shrink: 0;
 }

 .ac-push-thumb.car {
   background: rgba(251, 191, 36, .12);
   border-color: rgba(251, 191, 36, .2);
   color: #fbbf24
 }

 .ac-feat3-body {
   padding: 24px 24px 28px
 }

 .ac-feat3-icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   margin-bottom: 14px;
 }

 .ac-feat3-body h3 {
   font-size: 18px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 10px;
 }

 .ac-feat3-body p {
   font-size: 14px;
   color: #94a3b8;
   line-height: 1.7;
 }

 /* ── Section 5: AI Features Interactive ── */
 .ac-ai-feat-section {
   background: #050a14;
   padding: 100px 0;
   border-top: 1px solid rgba(255, 255, 255, .05);
 }

 .ac-ai-feat-title {
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 900;
   color: #fff;
   text-align: center;
   margin-bottom: 12px;
   letter-spacing: -.02em;
 }

 .ac-ai-feat-title em {
   background: linear-gradient(90deg, #60a5fa, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-style: normal;
 }

 .ac-ai-feat-sub {
   font-size: 16px;
   color: #94a3b8;
   text-align: center;
   max-width: 660px;
   margin: 0 auto 64px;
   line-height: 1.7;
 }

 .ac-ai-feat-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: start;
 }

 /* Left media panel */
 .ac-ai-feat-media {
   position: sticky;
   top: 100px;
 }

 .ac-ai-feat-slides {
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .1);
   background: #0a1628;
   height: 362px;
   position: relative;
 }

 .ac-ai-feat-slide {
   height: 100%;
   display: none;
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity .4s;
 }

 .ac-ai-feat-slide.active {
   display: flex;
   opacity: 1;
   position: relative
 }

 .ac-ai-slide-img {
   width: 100%;
   padding: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* Mock UIs */
 .ac-summary-mock,
 .ac-search-mock,
 .ac-chat-mock,
 .ac-voice-mock {
   width: 100%;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, .08);
   overflow: hidden;
   background: #0d1b2e;
 }

 .ac-summary-header {
   background: rgba(16, 149, 245, .1);
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   font-weight: 700;
   color: #60a5fa;
 }

 .ac-summary-live {
   margin-left: auto;
   background: #ef4444;
   color: #fff;
   font-size: 10px;
   font-weight: 800;
   padding: 2px 8px;
   border-radius: 100px;
 }

 .ac-summary-content {
   display: flex;
   gap: 14px;
   padding: 16px
 }

 .ac-summary-thumb {
   width: 56px;
   height: 56px;
   flex-shrink: 0;
   border-radius: 10px;
   background: rgba(96, 165, 250, .12);
   border: 1px solid rgba(96, 165, 250, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: #60a5fa;
 }

 .ac-summary-title {
   font-size: 13px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 6px
 }

 .ac-summary-detail {
   font-size: 12px;
   color: #94a3b8;
   line-height: 1.6;
   margin-bottom: 6px
 }

 .ac-summary-meta {
   font-size: 11px;
   color: #64748b;
   display: flex;
   align-items: center;
   gap: 4px
 }

 .ac-summary-footer {
   display: flex;
   gap: 8px;
   padding: 12px 16px;
   border-top: 1px solid rgba(255, 255, 255, .06);
   flex-wrap: wrap;
 }

 .ac-summary-tag {
   font-size: 11px;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: 100px;
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .ac-summary-tag.person {
   background: rgba(96, 165, 250, .1);
   color: #60a5fa;
   border: 1px solid rgba(96, 165, 250, .2)
 }

 .ac-summary-tag.safe {
   background: rgba(52, 211, 153, .1);
   color: #34d399;
   border: 1px solid rgba(52, 211, 153, .2)
 }

 .ac-summary-tag.ai {
   background: rgba(167, 139, 250, .1);
   color: #a78bfa;
   border: 1px solid rgba(167, 139, 250, .2)
 }

 /* Search mock */
 .ac-search-bar {
   background: rgba(255, 255, 255, .05);
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   color: #60a5fa;
   font-size: 13px;
 }

 .ac-search-typed {
   color: #fff;
   flex: 1
 }

 .ac-cursor {
   animation: blink 1s step-end infinite;
   color: #60a5fa
 }

 @keyframes blink {

   0%,
   100% {
     opacity: 1
   }

   50% {
     opacity: 0
   }
 }

 .ac-search-results {
   padding: 8px 0
 }

 .ac-search-result {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 16px;
   border-bottom: 1px solid rgba(255, 255, 255, .04);
 }

 .ac-search-result:last-child {
   border-bottom: none
 }

 .ac-sr-thumb {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   flex-shrink: 0;
   background: rgba(251, 191, 36, .12);
   border: 1px solid rgba(251, 191, 36, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fbbf24;
   font-size: 16px;
 }

 .ac-sr-info {
   flex: 1
 }

 .ac-sr-title {
   font-size: 13px;
   font-weight: 600;
   color: #fff
 }

 .ac-sr-time {
   font-size: 11px;
   color: #64748b
 }

 .ac-sr-match {
   font-size: 12px;
   font-weight: 700;
   color: #34d399
 }

 /* Chat mock */
 .ac-chat-header {
   background: rgba(16, 149, 245, .1);
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 700;
   color: #60a5fa;
 }

 .ac-chat-messages {
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px
 }

 .ac-chat-msg {
   max-width: 85%;
   padding: 10px 14px;
   border-radius: 14px;
   font-size: 13px;
   line-height: 1.5;
 }

 .ac-chat-msg.user {
   background: rgba(16, 149, 245, .15);
   color: #93c5fd;
   border: 1px solid rgba(96, 165, 250, .2);
   align-self: flex-end;
   border-radius: 14px 14px 4px 14px;
 }

 .ac-chat-msg.ai {
   background: rgba(255, 255, 255, .06);
   color: #e2e8f0;
   border: 1px solid rgba(255, 255, 255, .08);
   align-self: flex-start;
   border-radius: 14px 14px 14px 4px;
 }

 .ac-chat-input {
   border-top: 1px solid rgba(255, 255, 255, .06);
   padding: 12px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #475569;
   font-size: 13px;
 }

 .ac-chat-send {
   color: #60a5fa
 }

 /* Voice mock */
 .ac-voice-title {
   background: rgba(16, 149, 245, .08);
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   padding: 12px 16px;
   font-size: 13px;
   font-weight: 700;
   color: #60a5fa;
 }

 .ac-voice-list {
   padding: 8px 0
 }

 .ac-voice-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 16px;
   border-bottom: 1px solid rgba(255, 255, 255, .04);
   cursor: pointer;
   transition: background .2s;
 }

 .ac-voice-item:last-child {
   border-bottom: none
 }

 .ac-voice-item.active {
   background: rgba(96, 165, 250, .08)
 }

 .ac-voice-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   flex-shrink: 0;
 }

 .ac-voice-avatar.f1 {
   background: rgba(236, 72, 153, .15);
   color: #ec4899;
   border: 1px solid rgba(236, 72, 153, .3)
 }

 .ac-voice-avatar.f2 {
   background: rgba(251, 191, 36, .12);
   color: #fbbf24;
   border: 1px solid rgba(251, 191, 36, .3)
 }

 .ac-voice-avatar.f3 {
   background: rgba(52, 211, 153, .12);
   color: #34d399;
   border: 1px solid rgba(52, 211, 153, .3)
 }

 .ac-voice-avatar.f4 {
   background: rgba(167, 139, 250, .12);
   color: #a78bfa;
   border: 1px solid rgba(167, 139, 250, .3)
 }

 .ac-voice-info {
   flex: 1
 }

 .ac-voice-name {
   font-size: 13px;
   font-weight: 700;
   color: #fff
 }

 .ac-voice-type {
   font-size: 11px;
   color: #64748b
 }

 .ac-voice-wave {
   display: flex;
   align-items: center;
   gap: 2px;
   height: 24px
 }

 .ac-voice-wave span {
   width: 3px;
   border-radius: 2px;
   background: #60a5fa;
   animation: waveBar 1s ease-in-out infinite;
 }

 .ac-voice-wave span:nth-child(1) {
   height: 30%;
   animation-delay: 0s
 }

 .ac-voice-wave span:nth-child(2) {
   height: 80%;
   animation-delay: .1s
 }

 .ac-voice-wave span:nth-child(3) {
   height: 50%;
   animation-delay: .2s
 }

 .ac-voice-wave span:nth-child(4) {
   height: 90%;
   animation-delay: .3s
 }

 .ac-voice-wave span:nth-child(5) {
   height: 40%;
   animation-delay: .4s
 }

 @keyframes waveBar {

   0%,
   100% {
     transform: scaleY(.5);
     opacity: .5
   }

   50% {
     transform: scaleY(1);
     opacity: 1
   }
 }

 .ac-voice-play {
   color: #475569;
   font-size: 12px
 }

 .ac-ai-feat-dots {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: 16px;
 }

 .ac-ai-feat-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .2);
   border: none;
   cursor: pointer;
   transition: background .2s, transform .2s;
   padding: 0;
 }

 .ac-ai-feat-dot.active {
   background: #60a5fa;
   transform: scale(1.3)
 }

 /* Right feature list */
 .ac-ai-feat-list {
   display: flex;
   flex-direction: column;
   gap: 4px
 }

 .ac-ai-feat-item {
   padding: 20px 20px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, .06);
   cursor: pointer;
   transition: all .25s;
   display: flex;
   align-items: flex-start;
   gap: 14px;
 }

 .ac-ai-feat-item:hover {
   border-color: rgba(96, 165, 250, .2);
   background: rgba(96, 165, 250, .04);
 }

 .ac-ai-feat-item.active {
   border-color: rgba(96, 165, 250, .3);
   background: rgba(96, 165, 250, .07);
 }

 .ac-ai-feat-item-icon {
   width: 38px;
   height: 38px;
   flex-shrink: 0;
   border-radius: 10px;
   background: rgba(96, 165, 250, .1);
   border: 1px solid rgba(96, 165, 250, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #60a5fa;
   font-size: 15px;
   margin-top: 2px;
 }

 .ac-ai-feat-item.active .ac-ai-feat-item-icon {
   background: rgba(96, 165, 250, .2);
 }

 .ac-ai-feat-item-content {
   flex: 1
 }

 .ac-ai-feat-item-title {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 6px
 }

 .ac-ai-feat-item-desc {
   font-size: 13px;
   color: #64748b;
   line-height: 1.6;
   display: none;
 }

 .ac-ai-feat-item.active .ac-ai-feat-item-desc {
   display: block;
   color: #94a3b8
 }

 .ac-ai-feat-item-arrow {
   font-size: 11px;
   color: #475569;
   margin-top: 4px;
   flex-shrink: 0;
   transition: transform .25s;
 }

 .ac-ai-feat-item.active .ac-ai-feat-item-arrow {
   transform: rotate(180deg);
   color: #60a5fa
 }

 /* ── Section 6: Membership Table ── */
 .ac-member-section {
   background: #070d1a;
   padding: 100px 0 120px;
   border-top: 1px solid rgba(255, 255, 255, .05);
 }

 .ac-member-title {
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 900;
   color: #fff;
   text-align: center;
   margin-bottom: 12px;
   letter-spacing: -.02em;
 }

 .ac-member-title em {
   background: linear-gradient(90deg, #fbbf24, #f97316);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-style: normal;
 }

 .ac-member-sub {
   font-size: 16px;
   color: #94a3b8;
   text-align: center;
   margin-bottom: 56px;
 }

 .ac-member-table-wrap {
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(16, 149, 245, .2);
   background: rgba(255, 255, 255, .02);
   overflow-x: auto;
   position: relative;
   box-shadow: 0 0 60px rgba(16, 149, 245, .08), inset 0 0 60px rgba(16, 149, 245, .04);
 }

 .ac-member-table-wrap::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(16, 149, 245, .5), rgba(124, 58, 237, .5), transparent);
 }

 .ac-member-table {
   min-width: 700px;
   position: relative;
   z-index: 1
 }

 /* Table Header */
 .ac-mt-header {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.3fr;
   background: linear-gradient(135deg, #0a1628, #0d1f3c);
   border-bottom: 1px solid rgba(255, 255, 255, .1);
 }

 .ac-mt-feature-col {
   padding: 24px 28px;
   font-size: 13px;
   font-weight: 700;
   color: #64748b;
   text-transform: uppercase;
   letter-spacing: .08em;
   display: flex;
   align-items: flex-end;
 }

 .ac-mt-plan-col {
   padding: 24px 16px 20px;
   text-align: center;
   border-left: 1px solid rgba(255, 255, 255, .08);
   position: relative;
 }

 .ac-mt-plan-col.unlimited {
   background: linear-gradient(180deg, rgba(16, 149, 245, .1), rgba(124, 58, 237, .06));
   border-left: 1px solid rgba(96, 165, 250, .3) !important;
   position: relative;
 }

 .ac-mt-plan-col.unlimited::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 1px;
   background: rgba(96, 165, 250, .2);
 }

 .ac-mt-plan-badge {
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #64748b;
   margin-bottom: 8px;
 }

 .ac-mt-plan-badge.popular {
   color: #fbbf24;
 }

 .ac-mt-plan-col.unlimited .ac-mt-plan-badge {
   display: inline-block;
   background: linear-gradient(90deg, #1095F5, #7c3aed);
   color: #fff;
   padding: 3px 12px;
   border-radius: 100px;
   font-size: 10px;
 }

 .ac-mt-plan-name {
   font-size: 16px;
   font-weight: 800;
   color: #fff;
   line-height: 1.3;
 }

 .ac-mt-plan-col.plus .ac-mt-plan-name {
   color: #60a5fa
 }

 .ac-mt-plan-col.unlimited .ac-mt-plan-name {
   background: linear-gradient(90deg, #60a5fa, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 /* Table Rows */
 .ac-mt-row {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.3fr;
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   transition: background .2s;
 }

 .ac-mt-row:hover {
   background: rgba(255, 255, 255, .02)
 }

 .ac-mt-row.last {
   border-bottom: none
 }

 .ac-mt-feature {
   padding: 18px 28px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: #cbd5e1;
   font-weight: 500;
 }

 .ac-mt-feature i {
   width: 18px;
   text-align: center;
   color: #475569;
   font-size: 14px;
   flex-shrink: 0;
 }

 .ac-mt-val {
   padding: 18px 16px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   color: #94a3b8;
   border-left: 1px solid rgba(255, 255, 255, .05);
 }

 .ac-mt-val.unlimited {
   background: linear-gradient(180deg, rgba(16, 149, 245, .05), rgba(124, 58, 237, .03));
   border-left: 1px solid rgba(96, 165, 250, .2) !important;
 }

 .ac-mt-highlight {
   background: linear-gradient(90deg, #60a5fa, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-weight: 800;
   font-size: 15px;
 }

 .ac-mt-check {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: rgba(52, 211, 153, .1);
   border: 1.5px solid rgba(52, 211, 153, .25);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #34d399;
   font-size: 11px;
 }

 .ac-mt-check.plus {
   background: rgba(96, 165, 250, .1);
   border-color: rgba(96, 165, 250, .3);
   color: #60a5fa;
 }

 .ac-mt-check.unlimited {
   background: rgba(96, 165, 250, .15);
   border-color: rgba(96, 165, 250, .4);
   color: #60a5fa;
   box-shadow: 0 0 12px rgba(96, 165, 250, .2);
 }

 .ac-mt-dash {
   color: #334155;
   font-size: 18px;
   font-weight: 300
 }

 /* Responsive */
 @media(max-width:900px) {
   .ac-section-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }

   .ac-section-inner.rev {
     direction: ltr
   }

   .ac-4g-tags {
     display: none
   }

   .ac-rec-grid {
     grid-template-columns: 1fr
   }

   .ac-feat3-grid {
     grid-template-columns: 1fr
   }

   .ac-ai-feat-layout {
     grid-template-columns: 1fr;
     gap: 40px
   }

   .ac-ai-feat-media {
     position: static
   }
 }

 @media(max-width:600px) {
   .ac-hero-inner {
     padding: 72px 20px 64px
   }

   .ac-section {
     padding: 64px 0
   }

   .ac-rec-section,
   .ac-feat3-section,
   .ac-ai-feat-section,
   .ac-member-section {
     padding: 64px 0
   }

   .ac-video-section {
     padding: 48px 0 0
   }
 }

 /* ════════════════════════════════════════════
    SERVICES PAGE
 ════════════════════════════════════════════ */
 #page-services {
   background: #F8FAFC;
   min-height: 100vh
 }

 /* ══════════════════════════════════════════
    CONTACT CUSTOMER SUPPORT PAGE
 ══════════════════════════════════════════ */

 /* Page header */
 .cs-page-header {
   background: #f5f6f8;
   border-bottom: 1px solid #e4e6ea;
   padding: 40px 0 32px;
 }

 .cs-breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: #888;
   margin-bottom: 16px;
   flex-wrap: wrap;
 }

 .cs-breadcrumb a {
   color: #888;
   text-decoration: none
 }

 .cs-breadcrumb a:hover {
   color: #1095F5
 }

 .cs-breadcrumb i {
   font-size: 10px;
   color: #bbb
 }

 .cs-breadcrumb span {
   color: #333
 }

 .cs-page-title {
   font-size: clamp(24px, 3vw, 34px);
   font-weight: 800;
   color: #1a1a1a;
   margin-bottom: 8px;
 }

 .cs-page-sub {
   font-size: 15px;
   color: #666;
   line-height: 1.6
 }

 /* Body */
 .cs-body {
   background: #f5f6f8;
   padding: 40px 0 80px;
 }

 .cs-layout {
   display: grid;
   grid-template-columns: 1fr 340px;
   gap: 32px;
   align-items: start;
 }

 /* Form card */
 .cs-form-wrap {}

 .cs-form-card {
   background: #fff;
   border: 1px solid #e4e6ea;
   border-radius: 12px;
   overflow: hidden;
 }

 .cs-form-header {
   padding: 28px 32px 20px;
   border-bottom: 1px solid #f0f0f0;
 }

 .cs-form-title {
   font-size: 17px;
   font-weight: 700;
   color: #1a1a1a;
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 4px;
 }

 .cs-form-title i {
   color: #1095F5
 }

 .cs-form-sub {
   font-size: 13px;
   color: #888
 }

 /* Topic tabs */
 .cs-topic-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   padding: 16px 32px 0;
   border-bottom: 1px solid #f0f0f0;
 }

 .cs-topic-tab {
   padding: 10px 16px;
   border: none;
   background: none;
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
   color: #666;
   display: flex;
   align-items: center;
   gap: 6px;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   transition: color .2s, border-color .2s;
 }

 .cs-topic-tab:hover {
   color: #1095F5
 }

 .cs-topic-tab.active {
   color: #1095F5;
   border-bottom-color: #1095F5;
   font-weight: 600
 }

 .cs-topic-tab i {
   font-size: 12px
 }

 /* Form fields */
 .cs-form {
   padding: 24px 32px 32px
 }

 .cs-form-row {
   display: grid;
   gap: 16px
 }

 .cs-form-row-2 {
   grid-template-columns: 1fr 1fr
 }

 .cs-field-group {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 16px
 }

 .cs-field-group:last-of-type {
   margin-bottom: 0
 }

 .cs-label {
   font-size: 13px;
   font-weight: 600;
   color: #333;
 }

 .cs-required {
   color: #e53e3e;
   margin-left: 2px
 }

 .cs-hint {
   color: #aaa;
   font-weight: 400;
   font-size: 12px
 }

 .cs-input,
 .cs-textarea {
   width: 100%;
   box-sizing: border-box;
   padding: 10px 14px;
   border: 1px solid #dde1e7;
   border-radius: 8px;
   font-size: 14px;
   color: #1a1a1a;
   background: #fafbfc;
   outline: none;
   transition: border-color .2s, box-shadow .2s;
   font-family: inherit;
 }

 .cs-input:focus,
 .cs-textarea:focus {
   border-color: #1095F5;
   box-shadow: 0 0 0 3px rgba(16, 149, 245, .12);
   background: #fff;
 }

 .cs-textarea {
   resize: vertical;
   min-height: 120px;
   line-height: 1.6
 }

 .cs-input::placeholder,
 .cs-textarea::placeholder {
   color: #bbb
 }

 /* File input */
 .cs-file-label {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border: 1px dashed #d0d5dc;
   border-radius: 8px;
   cursor: pointer;
   color: #888;
   font-size: 13px;
   background: #fafbfc;
   transition: border-color .2s, color .2s;
 }

 .cs-file-label:hover {
   border-color: #1095F5;
   color: #1095F5
 }

 .cs-file-label i {
   color: #1095F5;
   font-size: 14px
 }

 /* Submit */
 .cs-submit-btn {
   width: 100%;
   margin-top: 20px;
   padding: 13px 24px;
   background: #1095F5;
   color: #fff;
   border: none;
   border-radius: 8px;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   transition: background .2s, transform .15s;
 }

 .cs-submit-btn:hover {
   background: #0d7fd6;
   transform: translateY(-1px)
 }

 .cs-form-note {
   margin-top: 14px;
   font-size: 12px;
   color: #aaa;
   text-align: center;
   line-height: 1.6;
 }

 .cs-form-note a {
   color: #1095F5;
   text-decoration: none
 }

 /* Success state */
 .cs-form-success {
   padding: 60px 32px;
   text-align: center;
 }

 .cs-success-icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: #d1fae5;
   margin: 0 auto 20px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .cs-success-icon i {
   font-size: 28px;
   color: #059669
 }

 .cs-success-title {
   font-size: 22px;
   font-weight: 800;
   color: #1a1a1a;
   margin-bottom: 10px
 }

 .cs-success-sub {
   font-size: 14px;
   color: #666;
   max-width: 380px;
   margin: 0 auto 28px;
   line-height: 1.6
 }

 .cs-success-btn {
   padding: 11px 28px;
   border: 1.5px solid #1095F5;
   border-radius: 8px;
   color: #1095F5;
   background: none;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background .2s, color .2s;
 }

 .cs-success-btn:hover {
   background: #1095F5;
   color: #fff
 }

 /* Sidebar */
 .cs-sidebar {
   display: flex;
   flex-direction: column;
   gap: 16px
 }

 .cs-sidebar-card {
   background: #fff;
   border: 1px solid #e4e6ea;
   border-radius: 12px;
   padding: 20px 22px;
 }

 .cs-sc-title {
   font-size: 14px;
   font-weight: 700;
   color: #1a1a1a;
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   gap: 7px;
 }

 .cs-sc-title i {
   color: #1095F5
 }

 /* Response time list */
 .cs-rt-list {
   display: flex;
   flex-direction: column;
   gap: 12px
 }

 .cs-rt-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 13px;
 }

 .cs-rt-channel {
   display: flex;
   align-items: center;
   gap: 7px;
   color: #555
 }

 .cs-rt-channel i {
   color: #1095F5;
   width: 14px;
   text-align: center
 }

 .cs-rt-time {
   color: #059669;
   font-weight: 600;
   font-size: 12px
 }

 /* Quick links */
 .cs-quick-links {
   display: flex;
   flex-direction: column;
   gap: 0
 }

 .cs-quick-link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 0;
   border-bottom: 1px solid #f0f0f0;
   text-decoration: none;
   color: #333;
   transition: color .2s;
 }

 .cs-quick-link:last-child {
   border-bottom: none
 }

 .cs-quick-link:hover {
   color: #1095F5
 }

 .cs-quick-link>i:first-child {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: #f0f7ff;
   color: #1095F5;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   flex-shrink: 0;
 }

 .cs-ql-label {
   font-size: 13px;
   font-weight: 600
 }

 .cs-ql-sub {
   font-size: 11px;
   color: #999;
   margin-top: 1px
 }

 .cs-ql-ext {
   font-size: 10px;
   color: #bbb;
   margin-left: auto
 }

 /* Warranty card */
 .cs-sc-warranty {
   text-align: center;
   padding: 24px 22px
 }

 .cs-sc-icon {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #e0f0ff;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .cs-sc-icon i {
   font-size: 18px;
   color: #1095F5
 }

 .cs-sc-desc {
   font-size: 13px;
   color: #666;
   margin: 8px 0 14px;
   line-height: 1.6
 }

 .cs-sc-link {
   font-size: 13px;
   color: #1095F5;
   text-decoration: none;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
 }

 .cs-sc-link:hover {
   text-decoration: underline
 }

 /* Community banner */
 .cs-community-banner {
   position: relative;
   overflow: hidden;
   border-radius: 14px;
   margin-top: 40px;
   min-height: 180px;
   display: flex;
   align-items: center;
 }

 .cs-cb-bg {
   position: absolute;
   inset: 0;
 }

 .cs-cb-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   filter: brightness(.6);
 }

 .cs-cb-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0, 20, 60, .8) 0%, rgba(0, 20, 60, .4) 60%, transparent 100%);
 }

 .cs-cb-content {
   position: relative;
   z-index: 1;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   padding: 32px 40px;
 }

 .cs-cb-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .7);
   margin-bottom: 6px;
 }

 .cs-cb-title {
   font-size: clamp(20px, 2.5vw, 28px);
   font-weight: 800;
   color: #fff;
   margin-bottom: 6px;
 }

 .cs-cb-sub {
   font-size: 14px;
   color: rgba(255, 255, 255, .75);
   max-width: 420px;
   line-height: 1.5
 }

 .cs-cb-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   flex-shrink: 0
 }

 .cs-cb-btn-primary {
   padding: 11px 22px;
   border-radius: 8px;
   background: #1095F5;
   color: #fff;
   border: none;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 7px;
   transition: background .2s;
 }

 .cs-cb-btn-primary:hover {
   background: #0d7fd6
 }

 .cs-cb-btn-outline {
   padding: 10px 22px;
   border-radius: 8px;
   background: none;
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .6);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 7px;
   transition: border-color .2s, background .2s;
 }

 .cs-cb-btn-outline:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .1)
 }

 /* Responsive */
 @media(max-width:900px) {
   .cs-layout {
     grid-template-columns: 1fr
   }

   .cs-sidebar {
     flex-direction: row;
     flex-wrap: wrap
   }

   .cs-sidebar-card {
     flex: 1;
     min-width: 240px
   }
 }

 @media(max-width:640px) {
   .cs-form-row-2 {
     grid-template-columns: 1fr
   }

   .cs-form {
     padding: 20px 20px 24px
   }

   .cs-form-header {
     padding: 20px 20px 16px
   }

   .cs-topic-tabs {
     padding: 12px 20px 0;
     gap: 0
   }

   .cs-topic-tab {
     padding: 8px 12px;
     font-size: 12px
   }

   .cs-cb-content {
     padding: 24px 20px;
     flex-direction: column;
     align-items: flex-start
   }
 }

 /* ── Services Hero ── */
 .sv-hero {
   position: relative;
   overflow: hidden;
   background: linear-gradient(105deg, #001F6B 0%, #1095F5 55%, #0070E0 100%);
   padding: 80px 0 0;
 }

 .sv-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 70% 50%, rgba(255, 255, 255, .07) 0%, transparent 60%);
 }

 .sv-hero-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: flex-end;
   position: relative;
   z-index: 1;
 }

 .sv-hero-text {
   padding-bottom: 72px
 }

 .sv-hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, .13);
   backdrop-filter: blur(8px);
   color: #93C5FD;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, .2);
   margin-bottom: 18px;
 }

 .sv-hero-title {
   font-size: clamp(30px, 4vw, 50px);
   font-weight: 800;
   color: #fff;
   line-height: 1.1;
   margin-bottom: 14px;
 }

 .sv-hero-title em {
   color: #60A5FA;
   font-style: normal
 }

 .sv-hero-sub {
   font-size: 17px;
   color: rgba(255, 255, 255, .78);
   line-height: 1.65;
   margin-bottom: 28px;
 }

 .sv-hero-cta {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
 }

 .sv-btn-white {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 26px;
   border-radius: 8px;
   border: none;
   background: #fff;
   color: var(--blue);
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: background .2s, box-shadow .2s;
 }

 .sv-btn-white:hover {
   background: #EFF6FF;
   box-shadow: 0 4px 18px rgba(0, 0, 0, .18)
 }

 .sv-btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 24px;
   border-radius: 8px;
   border: 1.5px solid rgba(255, 255, 255, .45);
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   background: transparent;
   cursor: pointer;
   transition: border-color .2s, background .2s;
 }

 .sv-btn-ghost:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .1)
 }

 /* Hero image panel */
 .sv-hero-img {
   position: relative;
   align-self: flex-end;
 }

 .sv-hero-img img {
   width: 100%;
   border-radius: 16px 16px 0 0;
   display: block;
   object-fit: cover;
   max-height: 420px;
 }

 .sv-hero-trust {
   position: absolute;
   bottom: 24px;
   left: 24px;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(10px);
   border-radius: 12px;
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
 }

 .sv-trust-icon {
   width: 36px;
   height: 36px;
   background: #DCFCE7;
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   color: #16A34A;
   flex-shrink: 0;
 }

 .sv-trust-ttl {
   font-size: 13px;
   font-weight: 700;
   color: #111
 }

 .sv-trust-sub {
   font-size: 11px;
   color: #6B7280
 }

 /* ── Breadcrumb ── */
 .sv-breadcrumb {
   background: #fff;
   border-bottom: 1px solid #E8EEF6;
   padding: 12px 0;
 }

 .sv-bc-inner {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13.5px;
   color: var(--gray4)
 }

 .sv-bc-inner a {
   color: var(--blue);
   font-weight: 500
 }

 .sv-bc-inner a:hover {
   text-decoration: underline
 }

 .sv-bc-inner i {
   font-size: 11px;
   color: var(--gray3)
 }

 .sv-bc-inner span {
   font-weight: 600;
   color: var(--slate)
 }

 /* ── Services Body ── */
 .sv-body {
   padding: 56px 0 96px
 }

 /* ── Section heading shared ── */
 .sv-sec-hd {
   text-align: center;
   margin-bottom: 48px
 }

 .sv-sec-hd .sec-label {
   margin-bottom: 6px
 }

 .sv-sec-hd .sec-title {
   font-size: clamp(22px, 3vw, 34px);
   font-weight: 800;
   color: var(--slate);
   margin-bottom: 10px
 }

 .sv-sec-hd p {
   font-size: 15.5px;
   color: var(--gray4);
   max-width: 580px;
   margin: 0 auto;
   line-height: 1.65
 }

 /* ══ MAIN SERVICE CARDS (Ring-style big split cards) ══ */
 .sv-main-cards {
   display: flex;
   flex-direction: column;
   gap: 24px;
   margin-bottom: 80px
 }

 .sv-main-card {
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
   border: 1.5px solid #E8EEF6;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr 1fr;
   transition: box-shadow .3s, border-color .3s;
 }

 .sv-main-card:hover {
   box-shadow: 0 8px 36px rgba(0, 0, 0, .11);
   border-color: #DBEAFE
 }

 .sv-main-card.reverse {
   direction: rtl
 }

 .sv-main-card.reverse>* {
   direction: ltr
 }

 .sv-card-img {
   position: relative;
   overflow: hidden;
   min-height: 320px;
   background: var(--gray2);
 }

 .sv-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s
 }

 .sv-main-card:hover .sv-card-img img {
   transform: scale(1.04)
 }

 .sv-card-badge-wrap {
   position: absolute;
   top: 18px;
   left: 18px;
   display: flex;
   gap: 7px;
 }

 .sv-card-badge {
   font-size: 11px;
   font-weight: 700;
   padding: 4px 12px;
   border-radius: 20px;
 }

 .sv-card-badge.pro {
   background: var(--blue);
   color: #fff
 }

 .sv-card-badge.free {
   background: #059669;
   color: #fff
 }

 .sv-card-badge.new {
   background: #7C3AED;
   color: #fff
 }

 .sv-card-badge.popular {
   background: #D97706;
   color: #fff
 }

 .sv-card-body {
   padding: 40px 44px;
   display: flex;
   flex-direction: column;
   justify-content: center
 }

 .sv-card-eyebrow {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 8px;
 }

 .sv-card-title {
   font-size: 26px;
   font-weight: 800;
   color: var(--slate);
   margin-bottom: 12px;
   line-height: 1.2
 }

 .sv-card-desc {
   font-size: 15px;
   color: var(--gray4);
   line-height: 1.7;
   margin-bottom: 20px
 }

 .sv-card-points {
   display: flex;
   flex-direction: column;
   gap: 9px;
   margin-bottom: 26px
 }

 .sv-card-point {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 14px;
   color: #374151
 }

 .sv-card-point i {
   color: #059669;
   font-size: 12px;
   width: 16px;
   flex-shrink: 0;
   margin-top: 2px
 }

 .sv-card-price-row {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 22px;
   padding: 14px 16px;
   background: var(--gray1);
   border-radius: 10px;
   border: 1px solid #E8EEF6;
 }

 .sv-price-from {
   font-size: 12px;
   color: var(--gray4)
 }

 .sv-price-val {
   font-size: 26px;
   font-weight: 800;
   color: var(--blue)
 }

 .sv-price-unit {
   font-size: 13px;
   color: var(--gray4)
 }

 .sv-price-note {
   font-size: 12px;
   color: var(--gray3);
   margin-left: auto
 }

 .sv-card-actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap
 }

 .sv-btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 11px 22px;
   border-radius: 8px;
   border: none;
   background: var(--blue);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   transition: background .2s, box-shadow .2s;
 }

 .sv-btn-primary:hover {
   background: var(--blue-dk);
   box-shadow: 0 4px 16px rgba(0, 82, 204, .28)
 }

 .sv-btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 10px 20px;
   border-radius: 8px;
   border: 1.5px solid var(--blue);
   color: var(--blue);
   font-size: 14px;
   font-weight: 600;
   background: transparent;
   cursor: pointer;
   transition: background .2s;
 }

 .sv-btn-outline:hover {
   background: var(--blue-lt)
 }

 /* ══ HOW IT WORKS ══ */
 .sv-how {
   background: var(--gray1);
   border-radius: 20px;
   padding: 56px 48px;
   margin-bottom: 80px;
 }

 .sv-steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   position: relative;
   margin-top: 0;
 }

 .sv-steps::before {
   content: '';
   position: absolute;
   top: 28px;
   left: calc(12.5%);
   right: calc(12.5%);
   height: 2px;
   background: linear-gradient(to right, var(--blue), #60A5FA);
   z-index: 0;
 }

 .sv-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 0 16px;
   position: relative;
   z-index: 1;
 }

 .sv-step-num {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   font-size: 18px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 16px rgba(0, 82, 204, .3);
   margin-bottom: 16px;
   flex-shrink: 0;
   border: 3px solid #fff;
 }

 .sv-step-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 6px
 }

 .sv-step-desc {
   font-size: 13px;
   color: var(--gray4);
   line-height: 1.6
 }

 /* ══ ADD-ON SERVICES GRID ══ */
 .sv-addon-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-bottom: 80px;
 }

 .sv-addon-card {
   background: #fff;
   border-radius: 14px;
   border: 1.5px solid #E8EEF6;
   padding: 28px 24px;
   transition: border-color .2s, box-shadow .2s, transform .2s;
   cursor: pointer;
 }

 .sv-addon-card:hover {
   border-color: var(--blue);
   box-shadow: 0 8px 28px rgba(0, 82, 204, .1);
   transform: translateY(-3px);
 }

 .sv-addon-icon {
   width: 50px;
   height: 50px;
   border-radius: 13px;
   background: var(--blue-lt);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: var(--blue);
   margin-bottom: 16px;
   transition: background .2s, color .2s;
 }

 .sv-addon-card:hover .sv-addon-icon {
   background: var(--blue);
   color: #fff
 }

 .sv-addon-title {
   font-size: 17px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 7px
 }

 .sv-addon-desc {
   font-size: 13.5px;
   color: var(--gray4);
   line-height: 1.65;
   margin-bottom: 14px
 }

 .sv-addon-link {
   font-size: 13px;
   font-weight: 600;
   color: var(--blue);
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .sv-addon-link:hover {
   text-decoration: underline
 }

 /* ══ PARTNER LOGOS ══ */
 .sv-partners {
   background: #fff;
   border-radius: 16px;
   padding: 40px 48px;
   margin-bottom: 80px;
   border: 1.5px solid #E8EEF6;
 }

 .sv-partners-title {
   text-align: center;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--gray3);
   margin-bottom: 28px;
 }

 .sv-partner-logos {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 40px;
   flex-wrap: wrap;
 }

 .sv-partner-logo {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: 16px;
   font-weight: 800;
   color: var(--gray4);
   opacity: .65;
   transition: opacity .2s;
 }

 .sv-partner-logo:hover {
   opacity: 1
 }

 .sv-partner-logo i {
   font-size: 22px
 }

 .sv-partner-logo .sv-pl-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--gray3);
 }

 /* ══ GUARANTEE / TRUST STRIP ══ */
 .sv-guarantee {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-bottom: 80px;
 }

 .sv-guarantee-card {
   background: #fff;
   border-radius: 12px;
   padding: 24px 20px;
   text-align: center;
   border: 1.5px solid #E8EEF6;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
 }

 .sv-guarantee-icon {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: var(--blue-lt);
   margin: 0 auto 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: var(--blue);
 }

 .sv-guarantee-title {
   font-size: 14px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 5px
 }

 .sv-guarantee-desc {
   font-size: 12.5px;
   color: var(--gray4);
   line-height: 1.6
 }

 /* ══ TESTIMONIALS ══ */
 .sv-reviews-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-bottom: 80px;
 }

 .sv-review-card {
   background: #fff;
   border-radius: 12px;
   padding: 24px;
   border: 1.5px solid #E8EEF6;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
   transition: transform .3s, box-shadow .3s;
 }

 .sv-review-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .09)
 }

 .sv-review-stars {
   color: #F59E0B;
   font-size: 13px;
   margin-bottom: 10px
 }

 .sv-review-text {
   font-size: 14px;
   color: #374151;
   line-height: 1.7;
   margin-bottom: 14px;
   font-style: italic;
 }

 .sv-review-author {
   display: flex;
   align-items: center;
   gap: 10px
 }

 .sv-review-av {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--blue), var(--blue-dk));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   flex-shrink: 0;
 }

 .sv-review-name {
   font-size: 13.5px;
   font-weight: 700;
   color: var(--slate)
 }

 .sv-review-meta {
   font-size: 11.5px;
   color: var(--gray3)
 }

 /* ══ FAQ ══ */
 .sv-faq-wrap {
   max-width: 800px;
   margin: 0 auto 80px;
   display: flex;
   flex-direction: column;
   gap: 10px
 }

 .sv-faq-item {
   background: #fff;
   border-radius: 12px;
   border: 1.5px solid #E2E8F0;
   overflow: hidden;
   transition: border-color .2s, box-shadow .2s;
 }

 .sv-faq-item:hover,
 .sv-faq-item.open {
   border-color: var(--blue)
 }

 .sv-faq-item.open {
   box-shadow: 0 4px 18px rgba(0, 82, 204, .1)
 }

 .sv-faq-q {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 22px;
   gap: 12px;
   cursor: pointer;
 }

 .sv-faq-q span {
   font-size: 15px;
   font-weight: 600;
   color: var(--slate);
   line-height: 1.4
 }

 .sv-faq-q i {
   color: var(--gray3);
   font-size: 13px;
   flex-shrink: 0;
   transition: transform .25s, color .15s
 }

 .sv-faq-item.open .sv-faq-q i {
   transform: rotate(180deg);
   color: var(--blue)
 }

 .sv-faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .32s ease, padding .28s
 }

 .sv-faq-item.open .sv-faq-a {
   max-height: 260px
 }

 .sv-faq-a p {
   padding: 0 22px 20px;
   font-size: 14px;
   color: var(--gray4);
   line-height: 1.75;
   border-top: 1px solid #F1F5F9;
   padding-top: 14px;
 }

 /* ══ CTA ══ */
 .sv-cta {
   background: linear-gradient(135deg, #001F6B, #1095F5);
   border-radius: 20px;
   padding: 60px 48px;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .sv-cta::after {
   content: '';
   position: absolute;
   right: -80px;
   bottom: -80px;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .08);
 }

 .sv-cta h2 {
   font-size: clamp(24px, 3vw, 36px);
   font-weight: 800;
   color: #fff;
   margin-bottom: 12px;
   position: relative;
   z-index: 1
 }

 .sv-cta p {
   font-size: 16px;
   color: rgba(255, 255, 255, .75);
   margin-bottom: 28px;
   max-width: 520px;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.65;
   position: relative;
   z-index: 1
 }

 .sv-cta-btns {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   position: relative;
   z-index: 1
 }

 /* ── Responsive ── */
 @media(max-width:1024px) {
   .sv-main-card {
     grid-template-columns: 1fr
   }

   .sv-main-card.reverse {
     direction: ltr
   }

   .sv-card-img {
     min-height: 240px
   }

   .sv-addon-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .sv-guarantee {
     grid-template-columns: repeat(2, 1fr)
   }

   .sv-reviews-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .sv-steps {
     grid-template-columns: repeat(2, 1fr);
     gap: 24px
   }

   .sv-steps::before {
     display: none
   }

   .sv-hero-inner {
     grid-template-columns: 1fr;
     gap: 0
   }

   .sv-hero-img {
     display: none
   }
 }

 @media(max-width:768px) {
   .sv-addon-grid {
     grid-template-columns: 1fr
   }

   .sv-guarantee {
     grid-template-columns: 1fr
   }

   .sv-reviews-grid {
     grid-template-columns: 1fr
   }

   .sv-how {
     padding: 36px 24px
   }

   .sv-card-body {
     padding: 28px 24px
   }

   .sv-cta {
     padding: 40px 24px
   }

   .sv-partners {
     padding: 28px 24px
   }
 }

 @media(max-width:480px) {
   .sv-steps {
     grid-template-columns: 1fr
   }

   .sv-hero-text {
     padding-bottom: 48px
   }
 }

 /* ════════════════════════════════════════════
    COMMUNITY FORUM PAGE
 ════════════════════════════════════════════ */
 #page-community {
   background: #F5F6FA;
   min-height: 100vh
 }

 /* Hero */
 .cf-hero {
   background: linear-gradient(120deg, #001F6B 0%, #1095F5 55%, #1A6EDB 100%);
   padding: 52px 0 48px;
   position: relative;
   overflow: hidden;
 }

 .cf-hero::after {
   content: '';
   position: absolute;
   right: -60px;
   top: -60px;
   width: 360px;
   height: 360px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .08);
 }

 .cf-hero-inner {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap
 }

 .cf-hero-text {}

 .cf-hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, .13);
   backdrop-filter: blur(8px);
   color: #93C5FD;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 5px 13px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, .2);
   margin-bottom: 14px;
 }

 .cf-hero-title {
   font-size: clamp(26px, 3.5vw, 42px);
   font-weight: 800;
   color: #fff;
   line-height: 1.15;
   margin-bottom: 10px
 }

 .cf-hero-title em {
   color: #60A5FA;
   font-style: normal
 }

 .cf-hero-sub {
   font-size: 15px;
   color: rgba(255, 255, 255, .75);
   line-height: 1.6;
   margin-bottom: 22px;
   max-width: 520px
 }

 .cf-hero-stats {
   display: flex;
   gap: 28px;
   flex-wrap: wrap
 }

 .cf-hero-stat {
   text-align: center
 }

 .cf-hero-stat-num {
   font-size: 22px;
   font-weight: 800;
   color: #fff
 }

 .cf-hero-stat-label {
   font-size: 11.5px;
   color: rgba(255, 255, 255, .6);
   margin-top: 2px
 }

 .cf-hero-search {
   display: flex;
   gap: 0;
   max-width: 340px;
   width: 100%;
   background: rgba(255, 255, 255, .15);
   backdrop-filter: blur(10px);
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, .25);
   overflow: hidden;
 }

 .cf-hero-search input {
   flex: 1;
   padding: 11px 16px;
   background: transparent;
   border: none;
   color: #fff;
   font-size: 14px;
   font-family: inherit;
   outline: none;
 }

 .cf-hero-search input::placeholder {
   color: rgba(255, 255, 255, .55)
 }

 .cf-hero-search button {
   padding: 0 18px;
   background: rgba(255, 255, 255, .18);
   border: none;
   color: #fff;
   font-size: 15px;
   cursor: pointer;
   transition: background .15s;
 }

 .cf-hero-search button:hover {
   background: rgba(255, 255, 255, .28)
 }

 /* Breadcrumb */
 .cf-breadcrumb {
   background: #fff;
   border-bottom: 1px solid #E8EEF6;
   padding: 10px 0;
   font-size: 13px;
   color: var(--gray4);
 }

 .cf-breadcrumb a {
   color: var(--blue);
   font-weight: 500
 }

 .cf-breadcrumb span {
   margin: 0 6px;
   color: var(--gray3)
 }

 /* Social banner */
 .cf-social-bar {
   background: linear-gradient(90deg, #1095F5 0%, #1A6EDB 100%);
   padding: 14px 0;
 }

 .cf-social-bar-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
 }

 .cf-social-bar-text {
   color: rgba(255, 255, 255, .9);
   font-size: 14px;
   font-weight: 500
 }

 .cf-social-bar-text strong {
   color: #fff
 }

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

 .cf-social-btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 7px 16px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   border: none;
   transition: transform .15s, box-shadow .15s;
   text-decoration: none;
 }

 .cf-social-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, .2)
 }

 .cf-social-btn.facebook {
   background: #1877F2;
   color: #fff
 }

 .cf-social-btn.discord {
   background: #5865F2;
   color: #fff
 }

 .cf-social-btn.youtube {
   background: #FF0000;
   color: #fff
 }

 .cf-social-btn.tiktok {
   background: #010101;
   color: #fff
 }

 .cf-social-btn.instagram {
   background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
   color: #fff
 }

 /* Main layout */
 .cf-layout {
   display: grid;
   grid-template-columns: 1fr 300px;
   gap: 24px;
   padding: 28px 0 80px;
   align-items: start;
 }
.cf-layouts{
  display: grid;
   grid-template-columns: 1fr 0;
   gap: 24px;
   padding: 28px 0 80px;
   align-items: start;
}
 /* ── LEFT: Main Feed ── */
 .cf-main {}

 /* Category tabs */
 .cf-tabs-bar {
   background: #fff;
   border-radius: 12px;
   padding: 0 20px;
   margin-bottom: 20px;
   box-shadow: var(--sh-sm);
   display: flex;
   align-items: center;
   gap: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }

 .cf-tabs-bar::-webkit-scrollbar {
   display: none
 }

 .cf-tab {
   flex-shrink: 0;
   padding: 14px 18px;
   border: none;
   background: none;
   font-size: 14px;
   font-weight: 600;
   color: var(--gray4);
   border-bottom: 2px solid transparent;
   cursor: pointer;
   transition: color .15s, border-color .15s;
   white-space: nowrap;
 }

 .cf-tab:hover {
   color: var(--blue)
 }

 .cf-tab.active {
   color: var(--blue);
   border-bottom-color: var(--blue)
 }

 /* Sub-filter chips */
 .cf-filter-row {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 18px
 }

 .cf-chip {
   padding: 6px 14px;
   border-radius: 20px;
   border: 1.5px solid #E2E8F0;
   background: #fff;
   color: var(--gray4);
   font-size: 12.5px;
   font-weight: 600;
   cursor: pointer;
   transition: all .15s;
   white-space: nowrap;
 }

 .cf-chip:hover {
   border-color: var(--blue);
   color: var(--blue)
 }

 .cf-chip.active {
   background: var(--blue);
   border-color: var(--blue);
   color: #fff
 }

 /* Post card */
 .cf-post-card {
   background: #fff;
   border-radius: 12px;
   box-shadow: var(--sh-sm);
   display: flex;
   gap: 0;
   margin-bottom: 16px;
   overflow: hidden;
   border: 1px solid #E8EEF6;
   transition: box-shadow .2s, border-color .2s;
   cursor: pointer;
 }

 .cf-post-card:hover {
   box-shadow: var(--sh-md);
   border-color: #DBEAFE
 }

 .cf-post-thumb {
   width: 180px;
   flex-shrink: 0;
   overflow: hidden;
   background: var(--gray2);
   position: relative;
 }

 .cf-post-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
 }

 .cf-post-thumb-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--gray2), #E2E8F0);
   font-size: 32px;
   color: var(--gray3);
 }

 .cf-post-type-badge {
   position: absolute;
   top: 8px;
   left: 8px;
   padding: 3px 9px;
   border-radius: 20px;
   font-size: 10.5px;
   font-weight: 700;
   backdrop-filter: blur(6px);
 }

 .cf-post-body {
   flex: 1;
   padding: 16px 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-width: 0
 }

 .cf-post-category {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 10px;
   border-radius: 20px;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .04em;
   margin-bottom: 8px;
   width: fit-content;
 }

 .cf-post-title {
   font-size: 15.5px;
   font-weight: 700;
   color: var(--slate);
   line-height: 1.4;
   margin-bottom: 6px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 .cf-post-title.f-28{
  font-size: 28px;
 }

 .cf-post-excerpt {
   font-size: 13px;
   color: var(--gray4);
   line-height: 1.5;
   margin-bottom: 10px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
 }

 .cf-post-tags {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
   margin-bottom: 10px
 }

 .cf-post-tag {
   padding: 2px 9px;
   border-radius: 20px;
   background: var(--gray2);
   color: var(--gray4);
   font-size: 11px;
   font-weight: 600;
 }

 .cf-post-meta {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 12px;
   color: var(--gray3);
   flex-wrap: wrap;
 }
 .border-b{
  border-bottom: 1px #E8EEF6 solid;
  padding-bottom: 10px;
  margin-bottom: 15px;
 }
 .contentx{
  margin-top: 10px;
 }
 .contentx table, .contentx img, .contentx video{
  max-width: 100%;
 }
 .cf-post-author {
   display: flex;
   align-items: center;
   gap: 6px
 }

 .cf-post-avatar {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   font-weight: 700;
   color: #fff;
   flex-shrink: 0;
 }

 .cf-post-author-name {
   font-size: 12px;
   font-weight: 600;
   color: #374151
 }

 .cf-post-verified {
   color: var(--blue);
   font-size: 10px
 }

 .cf-post-stat {
   display: flex;
   align-items: center;
   gap: 4px
 }

 .cf-post-stat i {
   font-size: 11px
 }

 .cf-post-divider {
   color: #E2E8F0
 }

 .cf-pinned-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 2px 8px;
   border-radius: 4px;
   background: #FEF3C7;
   color: #D97706;
   font-size: 10.5px;
   font-weight: 700;
 }

 /* Section label */
 .cf-section-label {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 28px 0 14px;
 }

 .cf-section-label h3 {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--gray3)
 }

 .cf-section-label::after {
   content: '';
   flex: 1;
   height: 1px;
   background: #E8EEF6
 }

 /* Board cards (category overview) */
 .cf-boards-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-bottom: 24px
 }

 .cf-board-card {
   background: #fff;
   border-radius: 12px;
   border: 1.5px solid #E8EEF6;
   padding: 18px 20px;
   cursor: pointer;
   transition: border-color .18s, box-shadow .18s;
   display: flex;
   align-items: flex-start;
   gap: 14px;
 }

 .cf-board-card:hover {
   border-color: var(--blue);
   box-shadow: 0 4px 18px rgba(0, 82, 204, .09)
 }

 .cf-board-icon {
   width: 46px;
   height: 46px;
   border-radius: 12px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
 }

 .cf-board-info {}

 .cf-board-name {
   font-size: 14.5px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 4px
 }

 .cf-board-desc {
   font-size: 12.5px;
   color: var(--gray4);
   line-height: 1.45;
   margin-bottom: 8px
 }

 .cf-board-stats {
   display: flex;
   gap: 12px;
   font-size: 11.5px;
   color: var(--gray3)
 }

 .cf-board-stats span {
   display: flex;
   align-items: center;
   gap: 4px
 }

 /* Announce strip inside forum */
 .cf-announce-card {
   background: linear-gradient(90deg, #EFF6FF, #E0EEFF);
   border-radius: 12px;
   border: 1.5px solid #DBEAFE;
   padding: 16px 20px;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .cf-announce-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: var(--blue);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
 }

 .cf-announce-text {}

 .cf-announce-title {
   font-size: 14px;
   font-weight: 700;
   color: var(--slate);
   margin-bottom: 3px
 }

 .cf-announce-sub {
   font-size: 12.5px;
   color: var(--gray4)
 }

 /* Load more */
 .cf-load-more {
   text-align: center;
   padding: 24px 0 0;
 }

 .cf-load-more-btn {
   padding: 11px 32px;
   border-radius: 9px;
   border: 1.5px solid var(--blue);
   color: var(--blue);
   font-size: 14px;
   font-weight: 700;
   background: #fff;
   cursor: pointer;
   transition: background .15s;
 }

 .cf-load-more-btn:hover {
   background: var(--blue-lt)
 }

 /* ── RIGHT: Sidebar ── */
 .cf-sidebar {
   display: flex;
   flex-direction: column;
   gap: 18px;
   position: sticky;
   top: 82px
 }

 .cf-sidebar-card {
   background: #fff;
   border-radius: 12px;
   box-shadow: var(--sh-sm);
   border: 1px solid #E8EEF6;
   overflow: hidden;
 }

 .cf-sidebar-hd {
   padding: 14px 18px 12px;
   border-bottom: 1px solid #F1F5F9;
   font-size: 13px;
   font-weight: 700;
   color: var(--slate);
   display: flex;
   align-items: center;
   gap: 7px;
 }

 .cf-sidebar-hd i {
   color: var(--blue);
   font-size: 13px
 }

 /* Action buttons */
 .cf-action-btns {
   padding: 16px 16px 18px;
   display: flex;
   flex-direction: column;
   gap: 10px
 }

 .cf-action-btn {
   width: 100%;
   padding: 12px 0;
   border-radius: 9px;
   border: none;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: .04em;
   text-transform: uppercase;
   cursor: pointer;
   transition: transform .15s, box-shadow .15s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
 }

 .cf-action-btn:hover {
   transform: translateY(-2px);
   box-shadow: var(--sh-md)
 }

 .cf-action-btn.primary {
   background: #1095F5;
   color: #fff
 }

 .cf-action-btn.secondary {
   background: #F1F5F9;
   color: var(--slate)
 }

 /* Popular categories */
 .cf-pop-cats {
   padding: 16px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px
 }

 .cf-pop-cat {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 12px 8px;
   border-radius: 10px;
   background: var(--gray1);
   cursor: pointer;
   transition: background .15s, box-shadow .15s;
   border: 1.5px solid transparent;
 }

 .cf-pop-cat:hover {
   background: #fff;
   box-shadow: var(--sh-sm);
   border-color: #DBEAFE
 }

 .cf-pop-cat i {
   font-size: 20px;
   color: var(--blue)
 }

 .cf-pop-cat span {
   font-size: 11.5px;
   font-weight: 700;
   color: var(--slate);
   text-align: center
 }

 /* Announcements sidebar list */
 .cf-announce-list {
   padding: 12px 0
 }

 .cf-announce-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 10px 18px;
   border-bottom: 1px solid #F8FAFC;
   cursor: pointer;
   transition: background .15s;
 }

 .cf-announce-item:last-child {
   border-bottom: none
 }

 .cf-announce-item:hover {
   background: #F8FAFC
 }

 .cf-announce-num {
   width: 22px;
   height: 22px;
   border-radius: 6px;
   background: var(--blue-lt);
   color: var(--blue);
   font-size: 11px;
   font-weight: 800;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1px;
 }

 .cf-announce-item-text {
   font-size: 13px;
   color: #374151;
   line-height: 1.45;
   font-weight: 500
 }

 /* Hot posts */
 .cf-hot-list {
   padding: 12px 0
 }

 .cf-hot-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 9px 18px;
   border-bottom: 1px solid #F8FAFC;
   cursor: pointer;
   transition: background .15s;
 }

 .cf-hot-item:last-child {
   border-bottom: none
 }

 .cf-hot-item:hover {
   background: #F8FAFC
 }

 .cf-hot-rank {
   width: 20px;
   height: 20px;
   border-radius: 5px;
   font-size: 11px;
   font-weight: 800;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1px;
 }

 .cf-hot-rank.r1 {
   background: #FEF3C7;
   color: #D97706
 }

 .cf-hot-rank.r2 {
   background: #F1F5F9;
   color: var(--slate)
 }

 .cf-hot-rank.r3 {
   background: #FEF3C7;
   color: #92400E
 }

 .cf-hot-rank.rn {
   background: #F1F5F9;
   color: var(--gray4)
 }

 .cf-hot-title {
   font-size: 12.5px;
   color: #374151;
   line-height: 1.4;
   font-weight: 500
 }

 /* Active creators */
 .cf-creators-list {
   padding: 12px 0
 }

 .cf-creator-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 18px;
   cursor: pointer;
   transition: background .15s;
 }

 .cf-creator-item:hover {
   background: #F8FAFC
 }

 .cf-creator-avatar {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 700;
   color: #fff;
 }

 .cf-creator-info {
   flex: 1;
   min-width: 0
 }

 .cf-creator-name {
   font-size: 13px;
   font-weight: 700;
   color: var(--slate)
 }

 .cf-creator-stats {
   font-size: 11px;
   color: var(--gray3)
 }

 /* Social sidebar card */
 .cf-social-card-links {
   padding: 14px 16px 18px;
   display: flex;
   flex-direction: column;
   gap: 9px
 }

 .cf-social-link-btn {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border-radius: 9px;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   border: none;
   text-decoration: none;
   transition: transform .15s, box-shadow .15s;
 }

 .cf-social-link-btn:hover {
   transform: translateX(3px);
   box-shadow: var(--sh-sm)
 }

 .cf-social-link-btn i {
   font-size: 16px;
   width: 20px;
   text-align: center
 }

 .cf-social-link-btn span {
   flex: 1
 }

 .cf-social-link-btn .cf-social-members {
   font-size: 11px;
   font-weight: 500;
   opacity: .75
 }

 .cf-social-link-btn.discord {
   background: #EEF0FF;
   color: #5865F2
 }

 .cf-social-link-btn.twitter {
   background: #F0F0F0;
   color: #111
 }

 .cf-social-link-btn.facebook {
   background: #E8F0FE;
   color: #1877F2
 }

 .cf-social-link-btn.youtube {
   background: #FEE2E2;
   color: #FF0000
 }

 /* Responsive */
 @media(max-width:1024px) {
   .cf-layout {
     grid-template-columns: 1fr;
     gap: 20px
   }

   .cf-sidebar {
     position: static;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px
   }
 }

 @media(max-width:768px) {
   .cf-post-thumb {
     width: 130px
   }

   .cf-boards-grid {
     grid-template-columns: 1fr
   }

   .cf-sidebar {
     grid-template-columns: 1fr
   }
 }

 @media(max-width:560px) {
   .cf-post-card {
     flex-direction: column
   }

   .cf-post-thumb {
     width: 100%;
     height: 160px
   }

   .cf-hero-inner {
     flex-direction: column;
     gap: 20px
   }
 }

 /* ════════════════════════════════════════════
    DISCOVER PAGE  (Insta360-style full-screen)
 ════════════════════════════════════════════ */
 #page-discover {
   background: #000;
   color: #fff;
   overflow-x: hidden;
 }

 /* ── Shared full-screen section ── */
 .dsc-full {
   position: relative;
   width: 100%;
   height: 100vh;
   min-height: 560px;
   display: flex;
   align-items: center;
   overflow: hidden;
 }

 .dsc-full-bg {
   /* position: absolute; */
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   z-index: 0;
   transition: transform 8s ease;
 }

 .dsc-full:hover .dsc-full-bg {
   transform: scale(1.04);
 }

 .dsc-full-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
 }

 .dsc-full-content {
   position: absolute;
   z-index: 2;
   width: 100%;
   top:0;
   left: 0;
   top:50%;
   transform: translateY(-50%);
  
 }

 /* ── HERO ── */
 .dsc-hero .dsc-full-overlay {
   background:
     linear-gradient(105deg,
       rgba(0, 8, 24, .88) 0%,
       rgba(0, 15, 50, .72) 30%,
       rgba(0, 20, 60, .40) 58%,
       rgba(0, 10, 30, .10) 80%,
       transparent 100%),
     linear-gradient(to top,
       rgba(0, 5, 20, .55) 0%,
       transparent 40%);
 }

 .dsc-hero-text {
   max-width: 700px;
   padding: 0 0 0 0;
 }

 .dsc-hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: #60A5FA;
   margin-bottom: 24px;
 }

 .dsc-hero-eyebrow::before {
   content: '';
   width: 32px;
   height: 2px;
   background: #60A5FA;
   display: inline-block;
 }

 .dsc-hero-title {
   font-size: clamp(48px, 7vw, 96px);
   font-weight: 900;
   line-height: 1.0;
   letter-spacing: -.02em;
   margin-bottom: 28px;
 }

 .dsc-hero-title span {
   display: block;
   background: linear-gradient(90deg, #fff 0%, #60A5FA 60%, #93C5FD 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .dsc-hero-sub {
   font-size: 18px;
   color: rgba(255, 255, 255, .75);
   line-height: 1.65;
   margin-bottom: 40px;
   max-width: 500px;
 }

 .dsc-hero-cta {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   align-items: center
 }

 .dsc-btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 15px 32px;
   border-radius: 50px;
   border: none;
   background: #1095F5;
   color: #fff;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: background .2s, transform .2s, box-shadow .2s;
   text-decoration: none;
   letter-spacing: .01em;
 }

 .dsc-btn-primary:hover {
   background: #1A6EDB;
   transform: translateY(-2px);
   box-shadow: 0 8px 32px rgba(0, 82, 204, .5);
 }

 .dsc-btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 30px;
   border-radius: 50px;
   border: 1.5px solid rgba(255, 255, 255, .45);
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   background: transparent;
   cursor: pointer;
   transition: border-color .2s, background .2s;
   text-decoration: none;
 }

 .dsc-btn-ghost:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .08)
 }

 /* Scroll indicator */
 .dsc-scroll-hint {
   position: absolute;
   bottom: 36px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: rgba(255, 255, 255, .5);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
 }

 .dsc-scroll-line {
   width: 1px;
   height: 52px;
   background: linear-gradient(to bottom, rgba(255, 255, 255, .5), transparent);
   animation: scroll-pulse 2s ease-in-out infinite;
 }

 @keyframes scroll-pulse {

   0%,
   100% {
     opacity: .4
   }

   50% {
     opacity: 1
   }
 }

 /* ── Number stats strip ── */
 .dsc-stats-strip {
   background: #0A0F1E;
   border-top: 1px solid rgba(255, 255, 255, .06);
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   padding: 52px 0;
 }

 .dsc-stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
 }

 .dsc-stat-item {
   text-align: center;
   padding: 0 32px;
   border-right: 1px solid rgba(255, 255, 255, .08);
 }

 .dsc-stat-item:last-child {
   border-right: none
 }

 .dsc-stat-num {
   font-size: clamp(40px, 5vw, 64px);
   font-weight: 900;
   background: linear-gradient(135deg, #fff 0%, #60A5FA 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin-bottom: 10px;
   letter-spacing: -.02em;
 }

 .dsc-stat-label {
   font-size: 13px;
   font-weight: 500;
   color: rgba(255, 255, 255, .5);
   letter-spacing: .06em;
   text-transform: uppercase;
 }

 /* ── Mission section ── */
 .dsc-mission {
   background: #040C1E;
   padding: 120px 0;
 }

 .dsc-mission-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .dsc-mission-text {}

 .dsc-section-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: #60A5FA;
   margin-bottom: 18px;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .dsc-section-eyebrow::before {
   content: '';
   width: 24px;
   height: 2px;
   background: #60A5FA;
   flex-shrink: 0;
 }

 .dsc-section-title {
   color: #fff;
   font-size: clamp(32px, 2.5vw, 52px);
   font-weight: 900;
   line-height: 1.1;
   letter-spacing: -.02em;
   margin-bottom: 24px;
 }

 .dsc-section-body {
   font-size: 16px;
   color: rgba(255, 255, 255, .65);
   line-height: 1.8;
   margin-bottom: 32px;
 }

 .dsc-mission-visual {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   aspect-ratio: 4/3;
 }

 .dsc-mission-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
 }

 .dsc-mission-visual-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(0, 82, 204, .3), transparent);
 }

 /* Floating badge on image */
 .dsc-img-badge {
   position: absolute;
   bottom: 24px;
   left: 24px;
   background: rgba(0, 0, 0, .75);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 12px;
   padding: 12px 18px;
 }

 .dsc-img-badge-num {
   font-size: 24px;
   font-weight: 900;
   color: #60A5FA
 }

 .dsc-img-badge-text {
   font-size: 11px;
   color: rgba(255, 255, 255, .6);
   margin-top: 2px
 }

 /* ── Alternating story sections ── */
 .dsc-story {
   position: relative;
   height: 100vh;
   min-height: 520px;
   display: flex;
   align-items: center;
   overflow: hidden;
 }

 .dsc-story .dsc-full-bg {
   z-index: 0;
 }

 .dsc-story-overlay-left {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(to right, rgba(0, 5, 20, .90) 0%, rgba(0, 10, 40, .78) 40%, rgba(0, 10, 40, .15) 70%, transparent 100%);
 }

 .dsc-story-overlay-right {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(to left, rgba(0, 5, 20, .90) 0%, rgba(0, 10, 40, .78) 40%, rgba(0, 10, 40, .15) 70%, transparent 100%);
 }

 .dsc-story-content {
   position: relative;
   z-index: 2;
   max-width: 520px;
 }
 .dsc-story-content.dsc-story-contenta {
  max-width: 800px;
}
 .dsc-story-content.right {
   margin-left: auto;
 }

 .dsc-story-number {
   font-size: 120px;
   font-weight: 900;
   color: rgba(255, 255, 255, .04);
   line-height: 1;
   margin-bottom: -16px;
   letter-spacing: -.04em;
 }

 .dsc-story-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 5px 14px;
   border-radius: 20px;
   border: 1px solid rgba(96, 165, 250, .4);
   color: #60A5FA;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   margin-bottom: 18px;
 }

 .dsc-story-title {
   color: #fff;
   font-size: clamp(28px, 3.5vw, 46px);
   font-weight: 900;
   line-height: 1.1;
   letter-spacing: -.02em;
   margin-bottom: 18px;
 }

 .dsc-story-body {
   font-size: 15px;
   color: rgba(255, 255, 255, .65);
   line-height: 1.75;
   margin-bottom: 28px;
 }

 .dsc-story-list {
   /* display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 32px; */
 }
 .dsc-story-list  ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
 }
 .dsc-story-list  ul li{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .8);
  font-weight: 500;
  position: relative;
  line-height: 1.6;

 }
 .dsc-story-list  ul li::before{
  font-family: "Font Awesome 6 Free";
  content: "\f058";
  color: #60A5FA;
  font-size: 14px;
  flex-shrink: 0;
  left: 0;
  font-weight: 900;
 }
 /* .dsc-story-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   color: rgba(255, 255, 255, .8);
   font-weight: 500;
 }

 .dsc-story-item i {
   color: #60A5FA;
   font-size: 12px;
   flex-shrink: 0
 } */

 /* ── Video / dark full bleed CTA ── */
 .dsc-dark-cta {
   position: relative;
   height: 80vh;
   min-height: 480px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   text-align: center;
 }

 .dsc-dark-cta .dsc-full-bg {
   filter: brightness(.35) saturate(1.5);
 }

 .dsc-dark-cta-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: radial-gradient(ellipse at center, rgba(0, 30, 80, .5) 0%, rgba(0, 0, 0, .6) 100%);
 }

 .dsc-dark-cta-content {
   position: relative;
   z-index: 2;
   max-width: 720px;
 }

 .dsc-dark-cta-kicker {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: #60A5FA;
   margin-bottom: 20px;
 }

 .dsc-dark-cta-title {
   color: #fff;
   font-size: clamp(36px, 5.5vw, 72px);
   font-weight: 900;
   line-height: 1.05;
   letter-spacing: -.02em;
   margin-bottom: 22px;
 }

 .dsc-dark-cta-title em {
   color: #60A5FA;
   font-style: normal
 }

 .dsc-dark-cta-sub {
   font-size: 17px;
   color: rgba(255, 255, 255, .7);
   line-height: 1.65;
   margin-bottom: 40px;
 }

 /* play button */
 .dsc-play-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 16px 36px;
   border-radius: 50px;
   background: rgba(255, 255, 255, .1);
   backdrop-filter: blur(12px);
   border: 1.5px solid rgba(255, 255, 255, .3);
   color: #fff;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: background .2s, border-color .2s, transform .2s;
   text-decoration: none;
 }

 .dsc-play-btn:hover {
   background: rgba(255, 255, 255, .2);
   border-color: #fff;
   transform: scale(1.03)
 }

 .dsc-play-icon {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #1095F5;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* ── Timeline / milestones ── */
 .dsc-timeline {
   background: #040C1E;
   padding: 120px 0;
   padding-bottom: 0px;
 }

 .dsc-timeline-hd {
   text-align: center;
   margin-bottom: 72px
 }

 .dsc-timeline-track {
   position: relative;
   display: flex;
   /*grid-template-columns:repeat(4,1fr);
   gap:0; */
   height: 240px;
   width: 100%;
 
 }
 .hxscrollbar{
  flex-wrap: nowrap;        /* 禁止换行，强制一行显示 */
   overflow-x: auto;          /* 水平方向溢出时显示滚动条 */
   overflow-y: hidden;        /* 隐藏垂直溢出 */
   scroll-behavior: smooth;   /* 平滑滚动 */
   -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
   padding-bottom: 20px;
 }
 .hxscrollbar::before {
   content: '';
   position: absolute;
   top: 24px;
   left: 12%;
   right: 12.5%;
   height: 2px;
   background: linear-gradient(to right, transparent, #1A6EDB, #60A5FA, #1A6EDB, transparent);
 }
 .hxscrollbar::-webkit-scrollbar {
  height: 6px;
}
.hxscrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}
.hxscrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  backdrop-filter: blur(5px);
}
.hxscrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.8);
}

 .dsc-milestone {
   flex: 0 0 calc(25%);
   min-width: 250px;     
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 20px;
   text-align: center;
   float: left;
 }

 .dsc-milestone-dot {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, #1095F5, #60A5FA);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   position: relative;
   z-index: 1;
   box-shadow: 0 0 0 8px rgba(0, 82, 204, .15);
   font-size: 18px;
   color: #fff;
 }
.dsc-milestone-dot img{
  max-width: 60%;
  max-height: 60%;
}
 .dsc-milestone-year {
   font-size: 13px;
   font-weight: 700;
   color: #60A5FA;
   letter-spacing: .08em;
   margin-bottom: 8px;
 }

 .dsc-milestone-title {
   font-size: 14.5px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 8px;
   line-height: 1.3;
 }

 .dsc-milestone-body {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .5);
   line-height: 1.6;
 }

 /* ── Awards / certifications ── */
 .dsc-awards {
   background: #000;
   padding: 80px 0;
   border-top: 1px solid rgba(255, 255, 255, .06);
 }

 .dsc-awards-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 48px;
   flex-wrap: wrap;
 }

 .dsc-award-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   opacity: .55;
   transition: opacity .2s;
   cursor: default;
 }

 .dsc-award-item:hover {
   opacity: 1
 }

 .dsc-award-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   color: #93C5FD;
 }

 .dsc-award-name {
   font-size: 12px;
   font-weight: 700;
   color: rgba(255, 255, 255, .7);
   letter-spacing: .04em
 }

 /* ── Team / culture section ── */
 .dsc-culture {
   background: #040C1E;
   padding: 120px 0;
 }

 .dsc-culture-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 2px;
   margin-top: 60px;
   border-radius: 20px;
   overflow: hidden;
 }

 .dsc-culture-cell {
   position: relative;
   aspect-ratio: 1;
   overflow: hidden;
 }

 .dsc-culture-cell.tall {
   grid-row: span 2;
   aspect-ratio: auto;
 }

 .dsc-culture-cell img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .5s ease;
 }

 .dsc-culture-cell:hover img {
   transform: scale(1.06);
 }

 .dsc-culture-cell-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, transparent 55%);
   display: flex;
   align-items: flex-end;
   padding: 20px;
 }

 .dsc-culture-label {
   font-size: 14px;
   font-weight: 700;
   color: #fff
 }

 /* ── Join us / final CTA ── */
 .dsc-join {
   position: relative;
   height: 85vh;
   min-height: 520px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   text-align: center;
 }

 .dsc-join .dsc-full-bg {
   filter: brightness(.25) saturate(1.2) contrast(1.1)
 }

 .dsc-join-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: radial-gradient(ellipse at 50% 40%, rgba(0, 40, 120, .50) 0%, rgba(0, 0, 0, .75) 100%);
 }

 .dsc-join-content {
   position: relative;
   z-index: 2;
   max-width: 760px
 }

 .dsc-join-kicker {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: #60A5FA;
   margin-bottom: 20px;
 }

 .dsc-join-title {
   color: #fff;
   font-size: clamp(40px, 6vw, 80px);
   font-weight: 900;
   line-height: 1.0;
   letter-spacing: -.03em;
   margin-bottom: 22px;
 }

 .dsc-join-title em {
   background: linear-gradient(90deg, #60A5FA, #93C5FD);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-style: normal;
 }

 .dsc-join-sub {
   font-size: 17px;
   color: rgba(255, 255, 255, .65);
   line-height: 1.65;
   margin-bottom: 44px;
 }

 .dsc-join-btns {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap
 }

 .dsc-join-btn-primary {
   padding: 15px 40px;
   border-radius: 50px;
   border: none;
   background: linear-gradient(90deg, #1095F5, #1A6EDB);
   color: #fff;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: transform .2s, box-shadow .2s;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .dsc-join-btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 40px rgba(0, 82, 204, .55)
 }

 .dsc-join-btn-ghost {
   padding: 14px 36px;
   border-radius: 50px;
   border: 1.5px solid rgba(255, 255, 255, .35);
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   background: transparent;
   cursor: pointer;
   transition: border-color .2s, background .2s;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .dsc-join-btn-ghost:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .08)
 }

 /* ── Responsive ── */
 @media(max-width:1100px) {
   .dsc-stats-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 32px
   }

   .dsc-stat-item {
     border-right: none
   }

   .dsc-mission-inner {
     grid-template-columns: 1fr;
     gap: 40px
   }

   /* .dsc-timeline-track {
     grid-template-columns: repeat(2, 1fr);
     gap: 40px
   }
    */
   /* .dsc-timeline-track::before {
     display: none
   } */

   .dsc-culture-grid {
     grid-template-columns: 1fr 1fr
   }
 }

 @media(max-width:768px) {
   .dsc-full {
     height: 90vh
   }

   .dsc-hero-title {
     font-size: 48px
   }

   .dsc-story {
     height: 70vh
   }

   .dsc-dark-cta {
     height: 65vh
   }

   .dsc-culture-grid {
     grid-template-columns: 1fr
   }

   .dsc-culture-cell.tall {
     grid-row: span 1
   }
 }

 @media(max-width:480px) {
   .dsc-timeline-track {
     grid-template-columns: 1fr
   }

   .dsc-stats-grid {
     grid-template-columns: 1fr 1fr
   }

   .dsc-awards-inner {
     gap: 24px
   }
 }

 /* ════════════════════════════════════════════
    PRODUCT DETAIL PAGE  (pd = product detail)
 ════════════════════════════════════════════ */
 #page-pd {
   background: #fff;
   min-height: 100vh
 }

 /* ── Breadcrumb ── */
 .pd-breadcrumb {
   background: #fff;
   border-bottom: 1px solid #E2E8F0;
   padding: 12px 0;
 }

 .pd-bc-inner {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   color: var(--gray4);
 }

 .pd-bc-inner a {
   color: var(--gray4);
   transition: color .15s
 }

 .pd-bc-inner a:hover {
   color: var(--blue)
 }

 .pd-bc-inner .bc-sep {
   font-size: 9px;
   color: #CBD5E1
 }

 .pd-bc-inner .bc-cur {
   color: #1E293B;
   font-weight: 500
 }

 /* ── KV Hero Fullscreen ── */
 .pd-kv-hero {
   position: relative;
   min-height: 90vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: #000;
 }

 .pd-kv-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
 }
.pd-kv-bg::after {
  position: absolute;
  content: "";
  z-index: 3;
  width: 100%;
  height: 25vh;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 40%, transparent 70%);
}
 .pd-kv-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.65;
 }

 .pd-kv-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(16, 149, 245, 0.3) 100%);
   z-index: 2;
 }

 .pd-kv-content {
   position: relative;
   z-index: 3;
   width: 100%;
   padding: 80px 0 140px;
 }

 .pd-kv-inner {
   max-width: 720px;
 }

 .pd-kv-badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .08em;
   padding: 6px 14px;
   border-radius: 20px;
   margin-bottom: 12px;
   text-transform: uppercase;
 }

 .pd-kv-eyebrow {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .06em;
   color: rgba(255, 255, 255, 0.85);
   text-transform: uppercase;
   margin-bottom: 12px;
 }

 .pd-kv-title {
   font-size: 56px;
   font-weight: 900;
   line-height: 1.1;
   color: #fff;
   margin-bottom: 16px;
   text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
 }

 .pd-kv-tagline {
   font-size: 20px;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
   margin-bottom: 24px;
 }

 .pd-kv-rating {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 32px;
   padding: 12px 20px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 12px;
   width: fit-content;
 }

 .pd-kv-rating .pd-stars i {
   color: #FBBF24;
   font-size: 16px
 }

 .pd-kv-rating .pd-rating-num {
   color: #fff;
   font-size: 15px;
   font-weight: 700
 }

 .pd-kv-rating .pd-rating-count {
   color: rgba(255, 255, 255, 0.75);
   font-size: 13.5px
 }

 .pd-kv-features {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 40px;
 }

 .pd-kv-feat {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 18px;
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 10px;
   color: #fff;
   font-size: 14px;
   font-weight: 600;
 }

 .pd-kv-feat i {
   font-size: 16px;
   color: #38BDF8
 }

 .pd-kv-cta {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 .pd-kv-cta .btn-primary,
 .pd-kv-cta .btn-outline {
   padding: 13px 28px;
   font-size: 15px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }

 .pd-kv-cta .btn-outline {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.3);
   color: #fff;
 }

 .pd-kv-cta .btn-outline:hover {
   background: rgba(255, 255, 255, 0.2);
 }

 /* Thumbnail strip at bottom */
 .pd-kv-thumbs {
   position: absolute;
   bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 10px;
   z-index: 10;
 }

 .pd-kv-thumb {
   width: 80px;
   height: 80px;
   border-radius: 10px;
   overflow: hidden;
   border: 3px solid rgba(255, 255, 255, 0.3);
   cursor: pointer;
   transition: all .3s;
   opacity: 0.7;
 }

 .pd-kv-thumb:hover {
   border-color: rgba(255, 255, 255, 0.8);
   opacity: 1;
   transform: scale(1.05);
 }

 .pd-kv-thumb.active {
   border-color: #fff;
   opacity: 1;
   box-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
 }

 .pd-kv-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover
 }

 /* ── Gallery ── */
 .pd-gallery {}

 .pd-gallery-main {
   position: relative;
   background: #F8FAFC;
   border-radius: 16px;
   overflow: hidden;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
 }

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

 .pd-gallery-main:hover img {
   transform: scale(1.03)
 }

 .pd-gallery-badge {
   position: absolute;
   top: 16px;
   left: 16px;
   background: #1A1A1A;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .06em;
   padding: 5px 11px;
   border-radius: 6px;
 }

 .pd-gallery-thumbs {
   display: flex;
   gap: 10px;
   margin-top: 14px;
   overflow-x: auto;
   padding-bottom: 4px;
 }

 .pd-gallery-thumbs::-webkit-scrollbar {
   height: 4px
 }

 .pd-gallery-thumbs::-webkit-scrollbar-thumb {
   background: #CBD5E1;
   border-radius: 4px
 }

 .pd-thumb {
   flex-shrink: 0;
   width: 76px;
   height: 76px;
   border-radius: 10px;
   overflow: hidden;
   border: 2.5px solid transparent;
   cursor: pointer;
   transition: border-color .15s, transform .15s;
   background: #F8FAFC;
 }

 .pd-thumb:hover {
   border-color: var(--blue);
   transform: scale(1.04)
 }

 .pd-thumb.active {
   border-color: var(--blue)
 }

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

 /* ── Purchase Panel ── */
 .pd-purchase {
   position: sticky;
   top: 80px
 }

 .pd-eyebrow {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .08em;
   color: var(--blue);
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .pd-title {
   font-size: 32px;
   font-weight: 800;
   line-height: 1.2;
   color: #0F172A;
   margin-bottom: 6px;
 }

 .pd-tagline {
   font-size: 15px;
   color: var(--gray4);
   font-weight: 500;
   margin-bottom: 18px;
 }

 /* Rating */
 .pd-rating {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 24px;
 }

 .pd-stars {
   display: flex;
   gap: 2px
 }

 .pd-stars i {
   color: #F59E0B;
   font-size: 14px
 }

 .pd-stars i.half {
   color: #F59E0B
 }

 .pd-rating-num {
   font-size: 13.5px;
   font-weight: 700;
   color: #1E293B
 }

 .pd-rating-count {
   font-size: 13px;
   color: var(--gray4)
 }

 /* Pack picker */
 .pd-pack-label {
   font-size: 13px;
   font-weight: 600;
   color: #374151;
   margin-bottom: 10px
 }

 .pd-packs {
   display: flex;
   gap: 10px;
   margin-bottom: 26px;
   flex-wrap: wrap
 }

 .pd-pack {
   flex: 1;
   min-width: 90px;
   padding: 12px 10px;
   border: 2px solid #E2E8F0;
   border-radius: 10px;
   cursor: pointer;
   text-align: center;
   transition: border-color .15s, background .15s;
   position: relative;
 }

 .pd-pack:hover {
   border-color: var(--blue)
 }

 .pd-pack.active {
   border-color: var(--blue);
   background: #EFF6FF
 }

 .pd-pack-save {
   position: absolute;
   top: -10px;
   left: 50%;
   transform: translateX(-50%);
   background: #EF4444;
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   padding: 2px 7px;
   border-radius: 4px;
   white-space: nowrap;
 }

 .pd-pack-n {
   font-size: 13px;
   font-weight: 700;
   color: #1E293B
 }

 .pd-pack-each {
   font-size: 11.5px;
   color: var(--gray4);
   margin-top: 2px
 }

 .pd-pack-price {
   font-size: 14px;
   font-weight: 800;
   color: var(--blue);
   margin-top: 4px
 }

 .pd-pack-orig {
   font-size: 11px;
   color: #94A3B8;
   text-decoration: line-through
 }

 /* Price display */
 .pd-price-row {
   display: flex;
   align-items: flex-end;
   gap: 12px;
   margin-bottom: 8px;
 }

 .pd-price-big {
   font-size: 36px;
   font-weight: 800;
   color: #0F172A;
   line-height: 1
 }

 .pd-price-orig {
   font-size: 16px;
   color: #94A3B8;
   text-decoration: line-through;
   padding-bottom: 3px;
 }

 .pd-price-save {
   font-size: 12px;
   font-weight: 700;
   background: #FEF2F2;
   color: #EF4444;
   padding: 3px 8px;
   border-radius: 5px;
   padding-bottom: 4px;
 }

 /* Qty + CTA */
 .pd-qty-row {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 20px 0 14px;
 }

 .pd-qty-label {
   font-size: 13px;
   font-weight: 600;
   color: #374151
 }

 .pd-qty-ctrl {
   display: flex;
   align-items: center;
   border: 1.5px solid #E2E8F0;
   border-radius: 8px;
   overflow: hidden;
 }

 .pd-qty-btn {
   width: 34px;
   height: 36px;
   border: none;
   background: #fff;
   font-size: 18px;
   color: #374151;
   cursor: pointer;
   transition: background .12s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .pd-qty-btn:hover {
   background: #F1F5F9
 }

 .pd-qty-num {
   width: 44px;
   height: 36px;
   border: none;
   text-align: center;
   font-size: 15px;
   font-weight: 700;
   color: #1E293B;
   background: #fff;
   outline: none;
 }

 .pd-btn-cart {
   width: 100%;
   padding: 16px;
   border-radius: 10px;
   border: none;
   background: var(--blue);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: .01em;
   cursor: pointer;
   transition: background .15s, transform .1s;
   margin-bottom: 12px;
 }

 .pd-btn-cart:hover {
   background: var(--blue-dk);
   transform: translateY(-1px)
 }

 .pd-btn-cart:active {
   transform: translateY(0)
 }

 .pd-btn-wishlist {
   width: 100%;
   padding: 14px;
   border-radius: 10px;
   border: 1.5px solid #E2E8F0;
   background: #fff;
   color: #374151;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: border-color .15s, color .15s, background .15s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
 }

 .pd-btn-wishlist:hover {
   border-color: var(--blue);
   color: var(--blue);
   background: var(--blue-lt)
 }

 .pd-stock {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   font-weight: 500;
   color: #059669;
   margin: 10px 0;
 }

 .pd-stock-dot {
   width: 8px;
   height: 8px;
   background: #059669;
   border-radius: 50%
 }

 .pd-returns {
   font-size: 13px;
   color: var(--gray4);
   display: flex;
   align-items: center;
   gap: 6px;
   margin-top: 6px;
 }

 .pd-returns i {
   color: var(--gray3)
 }

 /* Feature icons strip */
 .pd-feat-icons {
   display: flex;
   gap: 0;
   border: 1.5px solid #E2E8F0;
   border-radius: 12px;
   overflow: hidden;
   margin-top: 20px;
 }

 .pd-feat-icon {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 14px 8px;
   border-right: 1px solid #E2E8F0;
   font-size: 11px;
   color: #374151;
   font-weight: 500;
   text-align: center;
   line-height: 1.3;
 }

 .pd-feat-icon:last-child {
   border-right: none
 }

 .pd-feat-icon i {
   font-size: 22px;
   color: var(--blue)
 }

 .pd-feat-icon svg {
   width: 28px;
   height: 28px;
   fill: var(--blue)
 }

 /* ── Feature Tabs Navigation ── */
 .pd-tabs-nav {
   background: #fff;
   border-bottom: 2px solid #E2E8F0;
   position: sticky;
   top: 60px;
   z-index: 100;
 }

 .pd-tabs-inner {
   display: flex;
   gap: 0;
   overflow-x: auto;
 }

 .pd-tabs-inner::-webkit-scrollbar {
   display: none
 }

 .pd-tab {
   padding: 18px 28px;
   font-size: 15px;
   font-weight: 600;
   color: #64748B;
   border-bottom: 2.5px solid transparent;
   margin-bottom: -2px;
   cursor: pointer;
   white-space: nowrap;
   transition: color .15s, border-color .15s;
   background: none;
   border-top: none;
   border-left: none;
   border-right: none;
 }

 .pd-tab:hover {
   color: #1E293B
 }

 .pd-tab.active {
   color: #0F172A;
   border-bottom-color: var(--blue)
 }

 /* ══════════════════════════════════════
    PRODUCT DETAIL – REOLINK DARK STYLE
 ══════════════════════════════════════ */

 /* ── Shared dark section base ── */
 #page-pd section,
 #page-pd .pd-breadcrumb {
   background: #000;
 }

 #page-pd .pd-breadcrumb {
   background: #111;
   border-bottom: 1px solid #222;
   padding: 14px 0;
 }

 #page-pd .pd-bc-inner {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: #666;
 }

 #page-pd .pd-bc-inner a {
   color: #888;
   text-decoration: none;
   transition: color .15s
 }

 #page-pd .pd-bc-inner a:hover {
   color: #fff
 }

 #page-pd .pd-bc-inner .bc-sep {
   font-size: 9px;
   color: #444
 }

 #page-pd .pd-bc-inner .bc-cur {
   color: #fff;
   font-weight: 600
 }

 /* ── KV Hero ── */
 .pd-kv-hero {
   position: relative;
   min-height: 88vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: #000;
 }

 .pd-kv-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1
 }

 .pd-kv-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 1
 }

 .pd-kv-content {
   position: relative;
   z-index: 3;
   width: 100%;
   padding: 0 0 80px;
   /* background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 40%, transparent 70%); */
 }

 .pd-kv-inner {
   max-width: 640px;
   padding-top: 60px
 }

 .pd-kv-badge {
   display: inline-block;
   background: rgba(255, 255, 255, .12);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, .2);
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .1em;
   padding: 5px 13px;
   border-radius: 20px;
   margin-bottom: 14px;
   text-transform: uppercase;
 }

 .pd-kv-eyebrow {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .08em;
   color: rgba(255, 255, 255, .65);
   text-transform: uppercase;
   margin-bottom: 10px;
 }

 .pd-kv-title {
   font-size: clamp(36px, 5vw, 64px);
   font-weight: 900;
   line-height: 1.08;
   color: #fff;
   margin-bottom: 14px;
 }

 .pd-kv-tagline {
   font-size: 18px;
   color: rgba(255, 255, 255, .8);
   font-weight: 400;
 }

 /* ── Shared dark section typography ── */
 .pd-rl-section {
   background: #000;
   padding: 100px 0;
 }

 .pd-rl-section-alt {
   background: #0d0d0d;
   padding: 100px 0;
 }

 .pd-rl-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #666;
   margin-bottom: 20px;
 }

 .pd-rl-title {
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 800;
   line-height: 1.1;
   color: #fff;
   margin-bottom: 0;
 }

 .pd-rl-title em {
   color: #1095F5;
   font-style: normal
 }

 .pd-rl-title .rl-underline {
   text-decoration: underline;
   text-decoration-color: #1095F5;
   text-underline-offset: 4px;
 }

 .pd-rl-body {
   font-size: 15px;
   line-height: 1.75;
   color: #888;
   max-width: 680px;
   margin: 20px auto 0;
   text-align: center;
 }

 .pd-rl-body-left {
   font-size: 15px;
   line-height: 1.75;
   color: #888;
   margin-top: 20px;
   text-align: left;
 }

 /* ── Section: 4-card intro grid ── */
 .pd-features {
   background: #000;
   padding: 80px 0 100px
 }

 .pd-feat-cards {
   /* display: grid;
   grid-template-columns: repeat(4, 1fr); */
   gap: 1px;
   display:flex;

   margin-top: 64px;
   background: #222;
   border: 1px solid #222;
   border-radius: 12px;
   overflow: hidden;
 }

 @media(max-width:1000px) {
   .pd-feat-cards {
    display:grid;
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media(max-width:600px) {
   .pd-feat-cards {
    display:grid;
     grid-template-columns: 1fr
   }
 }

 .pd-feat-card {
   background: #111;
   padding: 36px 28px 40px;
   transition: background .2s;
   max-width: calc(100% / 4);
 }

 .pd-feat-card:hover {
   background: #161616
 }

 .pd-fc-icon {
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
 }

 .pd-fc-icon i {
   color: #1095F5;
   font-size: 26px
 }

 .pd-fc-title {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   line-height: 1.3;
   margin-bottom: 10px;
 }

 .pd-fc-desc {
   font-size: 13.5px;
   color: #666;
   line-height: 1.7
 }

 /* ── Solar Story Section ── */
 .pd-solar {
   background: #000;
   padding: 100px 0;
   overflow: hidden
 }

 .pd-solar-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 @media(max-width:900px) {
   .pd-solar-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .pd-section-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .14em;
   color: #1095F5;
   text-transform: uppercase;
   margin-bottom: 16px;
 }

 .pd-section-title {
   font-size: clamp(28px, 3.5vw, 44px);
   font-weight: 800;
   line-height: 1.1;
   color: #fff;
   margin-bottom: 16px;
 }

 .pd-section-title em {
   color: #1095F5;
   font-style: normal
 }

 .pd-section-body {
   font-size: 15px;
   line-height: 1.75;
   color: #777;
   margin-bottom: 28px;
 }

 .pd-bullet-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
   color: #777;
   line-height: 1.8;
 }

 .pd-bullet-list  ul{
  display: flex;
   flex-direction: column;
   gap: 12px
 }
 .pd-bullet-list ul li{
  display: flex;
  /* align-items: center; */
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #999;
 }
 .pd-bullet-list  ul li::before{
  font-family: "Font Awesome 6 Free";
  content: "\f058";
  color: #1095F5;
  font-size: 14px;
  flex-shrink: 0;
  font-weight: 900;
  left: 0;
 }

 
 .pd-video-frame {
   border-radius: 12px;
   overflow: hidden;
   position: relative;
   background: #000;
 }

 .pd-video-frame img {
   width: 100%;
   display: block
 }

 .pd-video-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .25);
 }

 .pd-play-btn {
   width: 64px;
   height: 64px;
   background: rgba(255, 255, 255, .15);
   backdrop-filter: blur(8px);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: 1.5px solid rgba(255, 255, 255, .25);
   transition: background .2s, transform .2s;
 }

 .pd-play-btn:hover {
   background: rgba(255, 255, 255, .25);
   transform: scale(1.06)
 }

 .pd-play-btn i {
   color: #fff;
   font-size: 22px;
   margin-left: 3px
 }

 /* ── AI Tracking Section ── */
 .pd-ai {
   background: #0d0d0d;
   padding: 100px 0
 }

 .pd-ai-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 @media(max-width:900px) {
   .pd-ai-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .pd-ai-img {
   border-radius: 12px;
   overflow: hidden;
   position: relative
 }

 .pd-ai-img img {
   width: 100%;
   display: block
 }

 .pd-ai-tag {
   position: absolute;
   bottom: 20px;
   left: 20px;
   background: rgba(16, 149, 245, .9);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .05em;
   padding: 5px 12px;
   border-radius: 4px;
 }

 .pd-ai-right {
   color: #fff
 }

 .pd-ai-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   margin-top: 36px;
   background: #222;
   border: 1px solid #222;
   border-radius: 10px;
   overflow: hidden;
 }

 .pd-ai-stat {
   background: #111;
   padding: 20px 22px
 }

 .pd-ai-stat-num {
   font-size: 32px;
   font-weight: 800;
   color: #1095F5;
   line-height: 1;
   margin-bottom: 6px;
 }

 .pd-ai-stat-label {
   font-size: 12px;
   color: #666;
   line-height: 1.4
 }

 /* ── Mounting / Battery Section ── */
 .pd-mount {
   padding: 100px 0;
   background: #000
 }


 .pd-mount-blocks {
   display: flex;
   flex-direction: column;
   gap: 100px
 }

 .pd-mount-block {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .pd-mount-block:nth-child(2n) {
   direction: rtl
 }

 .pd-mount-block:nth-child(2n)>* {
   direction: ltr
 }

 @media(max-width:900px) {
   .pd-mount-block {
     grid-template-columns: 1fr;
     gap: 40px
   }

   .pd-mount-block.reverse {
     direction: ltr
   }
 }

 .pd-mount-img {
   border-radius: 12px;
   overflow: hidden
 }

 .pd-mount-img img {
   width: 100%;
   display: block
 }

 .pd-mount-title {
   font-size: clamp(24px, 3vw, 36px);
   font-weight: 800;
   color: #fff;
   line-height: 1.15;
   margin-bottom: 14px;
 }

 .pd-mount-desc {
   font-size: 15px;
   color: #777;
   line-height: 1.8
 }

 /* ── Tech Specs Section ── */
 .pd-specs {
   background: var(--gray1);
   padding: 80px 0;
 }

 .pd-specs-title {
   font-size: 32px;
   font-weight: 800;
   color: #0F172A;
   margin-bottom: 40px;
   text-align: center;
 }

 .pd-specs-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
 }

 @media(max-width:700px) {
   .pd-specs-grid {
     grid-template-columns: 1fr
   }
 }

 .pd-spec-group {
   background: #fff;
   border-radius: 16px;
   padding: 28px 32px;
   border: 1.5px solid #E2E8F0;
 }

 .pd-spec-group-title {
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 18px;
   padding-bottom: 12px;
   border-bottom: 1px solid #F1F5F9;
 }

 .pd-spec-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 16px;
   padding: 10px 0;
   border-bottom: 1px solid #F8FAFC;
   font-size: 14px;
 }

 .pd-spec-row:last-child {
   border-bottom: none
 }

 .pd-spec-key {
   color: #64748B;
   font-weight: 500;
   flex-shrink: 0;
   min-width: 130px
 }

 .pd-spec-val {
   color: #1E293B;
   font-weight: 600;
   text-align: right
 }

 /* ── In-the-Box ── */
 .pd-inbox {
   padding: 100px 0;
   background: #0d0d0d
 }

 .pd-inbox-grid {
   display: flex;
    /*grid-template-columns: repeat(5, 1fr);
   gap: 1px; */
   margin-top: 52px;
   background: #1a1a1a;
   border: 1px solid #1a1a1a;
   border-radius: 10px;
    padding-bottom: 0;
 }

 /* @media(max-width:900px) {
   .pd-inbox-grid {
     grid-template-columns: repeat(3, 1fr)
   }
 }

 @media(max-width:500px) {
   .pd-inbox-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 } */

 .pd-inbox-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   /* gap: 12px; */
   text-align: center;
   padding: 32px 16px;
   background: #0d0d0d;
   transition: background .2s;
   flex: 0 0 calc(20%);
   min-width: 200px;
 }

 .pd-inbox-item:hover {
   background: #111
 }

 .pd-inbox-icon {
   width: 60px;
   height: 60px;
   background: #161616;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .pd-inbox-icon i {
   font-size: 26px;
   color: #1095F5
 }

 .pd-inbox-name {
   font-size: 13px;
   font-weight: 600;
   color: #ccc;
   line-height: 1.4
 }

 .pd-inbox-qty {
   font-size: 12px;
   color: #555;
   margin-top: 2px
 }

 /* ── FAQ Section ── */
 .pd-faq {
   background: #000;
   padding: 100px 0
 }

 .pd-faq-list {
   max-width: 800px;
   margin: 52px auto 0;
   display: flex;
   flex-direction: column;
   gap: 0
 }

 .pd-faq-item {
   border-bottom: 1px solid #1a1a1a
 }

 .pd-faq-q {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   cursor: pointer;
   padding: 20px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   font-size: 15px;
   font-weight: 600;
   color: #ccc;
   transition: color .15s;
 }

 .pd-faq-q:hover {
   color: #fff
 }

 .pd-faq-q i {
   font-size: 13px;
   color: #444;
   flex-shrink: 0;
   transition: transform .25s, color .15s
 }

 .pd-faq-item.open .pd-faq-q {
   color: #fff
 }

 .pd-faq-item.open .pd-faq-q i {
   transform: rotate(180deg);
   color: #1095F5
 }

 .pd-faq-a {
   max-height: 0;
   overflow: hidden;
   font-size: 14px;
   color: #666;
   line-height: 1.8;
   transition: max-height .35s ease, padding .25s ease;
 }

 .pd-faq-item.open .pd-faq-a {
   max-height: 500px;
   padding-bottom: 22px
 }

 /* ── CTA Banner ── */
 .pd-cta {
   background: #0d0d0d;
   padding: 100px 0;
   text-align: center;
   border-top: 1px solid #1a1a1a;
 }

 .pd-cta-inner {
   position: relative;
   z-index: 1
 }

 .pd-cta-title {
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 800;
   color: #fff;
   line-height: 1.1;
   margin-bottom: 14px;
 }

 .pd-cta-sub {
   font-size: 16px;
   color: #666;
   max-width: 520px;
   margin: 0 auto 40px;
   line-height: 1.7;
 }

 .pd-cta-btns {
   display: flex;
   justify-content: center;
   gap: 14px;
   flex-wrap: wrap
 }

 .pd-cta-btn-primary {
   padding: 14px 36px;
   border-radius: 6px;
   background: #1095F5;
   color: #fff;
   border: none;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: background .15s, transform .1s;
 }

 .pd-cta-btn-primary:hover {
   background: #0d7fd6;
   transform: translateY(-1px)
 }

 .pd-cta-btn-outline {
   padding: 14px 36px;
   border-radius: 6px;
   border: 1px solid #333;
   background: transparent;
   color: #ccc;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: border-color .15s, color .15s;
 }

 .pd-cta-btn-outline:hover {
   border-color: #666;
   color: #fff
 }

 /* ══════════════════════════════════════════
    PRODUCT VIDEO SECTION — Wyze Style
 ══════════════════════════════════════════ */
 .pd-video-section {
   background: #000;
   padding: 100px 0 0;
   overflow: hidden;
 }


 .pd-video-header {
   text-align: center;
   padding: 0 24px 0px;
   max-width: 800px;
   margin: 0 auto;
 }

 /* Video wrap — full-width cinematic frame */
 .pd-video-wrap {
   position: relative;
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   border-radius: 16px 16px 0 0;
   overflow: hidden;
   cursor: pointer;
   background: #0a0a0a;
   box-shadow: 0 -40px 100px rgba(16, 149, 245, .12);
 }

 @media (max-width: 1479px) and (min-width: 1024px){
  .pd-video-wrap {
    width: calc(100vw - 80px);
  }
 }

 .pd-video-wrap::before {
   content: '';
   display: block;
   padding-top: 56.25%;
   /* 16:9 */
 }

 .pd-video-poster {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .6s ease, filter .6s ease;
 }

 .pd-video-wrap:hover .pd-video-poster {
   transform: scale(1.02);
   filter: brightness(.85);
 }

 /* Overlay gradient on poster */
 .pd-video-wrap::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom,
       rgba(0, 0, 0, .1) 0%,
       rgba(0, 0, 0, .3) 60%,
       rgba(0, 0, 0, .7) 100%);
   pointer-events: none;
   z-index: 1;
   transition: opacity .4s;
 }

 /* Play button */
 .pd-video-play-btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 3;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   transition: transform .3s ease;
 }

 .pd-video-play-btn:hover {
   transform: translate(-50%, -50%) scale(1.1);
 }

 .pd-video-play-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .15);
   border: 2px solid rgba(255, 255, 255, .5);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   transition: background .3s, border-color .3s, box-shadow .3s;
   box-shadow: 0 0 0 0 rgba(16, 149, 245, 0);
 }

 .pd-video-play-btn:hover .pd-video-play-icon {
   background: rgba(16, 149, 245, .85);
   border-color: rgba(16, 149, 245, 1);
   box-shadow: 0 0 40px rgba(16, 149, 245, .5);
 }

 .pd-video-play-icon i {
   font-size: 28px;
   color: #fff;
   margin-left: 4px;
   /* optical center for play triangle */
 }

 /* Actual video player (hidden until play) */
 .pd-video-player {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: none;
   z-index: 2;
 }

 .pd-video-player.playing {
   display: block;
 }

 /* Caption bar at bottom */
 .pd-video-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 4;
   padding: 20px 32px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 100%);
 }

 .pd-video-caption-dots {
   display: flex;
   gap: 6px;
   align-items: center;
 }

 .pd-content-section{
  background: #000;
  padding: 60px 0 ;
  

 }
.pd-content-wrap{
  position: relative;
   width: 100%;
   font-size: 15px;
    line-height: 1.75;
    color: #888;
}
.pd-content-wrap.max-com{
  width: 80%;
  margin: 0 auto;
}
.pd-content-section .images-box{
  width: 100%;
}
.pd-content-section .images-box .img{
  width: 100%;
  margin-top: 30px;
  text-align: center;
 
}
.pd-content-section .images-box .img img{
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  
}
.pd-content-wrap img,.pd-content-wrap table{
  max-width: 100%;
  
}
.pd-content-wrap img{
  display: inline-block;
}

 .pd-vc-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .3);
   transition: background .3s, width .3s;
   cursor: pointer;
 }

 .pd-vc-dot.active {
   background: #fff;
   width: 20px;
   border-radius: 3px;
 }

 .pd-video-caption-chips {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 }

 .pd-vc-chip {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 5px 12px;
   border-radius: 20px;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .15);
   color: rgba(255, 255, 255, .85);
   font-size: 12px;
   font-weight: 500;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }

 .pd-vc-chip i {
   color: #1095F5;
   font-size: 11px;
 }

 /* Responsive */
 @media(max-width:768px) {
   .pd-video-section {
     padding: 70px 0 0
   }

   .pd-video-header {
     padding: 0 20px 40px
   }

   .pd-video-play-icon {
     width: 64px;
     height: 64px
   }

   .pd-video-play-icon i {
     font-size: 22px
   }

   .pd-video-caption {
     padding: 14px 16px 18px
   }

   .pd-vc-chip {
     font-size: 11px;
     padding: 4px 10px
   }
 }

 @media(max-width:480px) {

   .pd-video-caption-dots {
     display: none
   }

   .pd-vc-chip {
     font-size: 10px
   }
 }

 /* ── Before/After Slider Section ── */
 .pd-slider-section {
   background: #000;
   padding: 100px 0;
   padding-bottom: 0;
 }

 .pd-slider-section .items .item {
   display: none;
 }

 .pd-slider-section .items .item.active {
   display: block;
 }

 .pd-slider-header {
   text-align: center;
   margin-bottom: 60px
 }

 .pd-compare-wrap {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   cursor: col-resize;
   user-select: none;
   -webkit-user-select: none;
   max-width: 1400px;
   margin: 0 auto;
 }
 @media (max-width: 1479px) and (min-width: 1024px){
  .pd-compare-wrap {
    width: calc(100vw - 80px);
  }
 }
 .pd-compare-wrap img {
   width: 100%;
   display: block;
   pointer-events: none
 }

 .pd-compare-after {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   width: 50%;
 }

 .pd-compare-after img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   max-width: none;
 }

 .pd-compare-handle {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 2px;
   background: #fff;
   left: 50%;
   transform: translateX(-50%);
   pointer-events: none;
 }

 .pd-compare-knob {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #1095F5;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
 }

 .pd-compare-knob i {
   color: #fff;
   font-size: 14px
 }

 .pd-compare-label {
   position: absolute;
   bottom: 16px;
   padding: 4px 12px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .05em;
   background: rgba(0, 0, 0, .6);
   color: #fff;
   pointer-events: none;
 }

 .pd-compare-label.left {
   left: 16px
 }

 .pd-compare-label.right {
   right: 16px
 }

 .pd-slider-tabs {
   display: flex;
   justify-content: center;
   gap: 0;
   margin-top: 32px;
   border-bottom: 1px solid #1a1a1a;
 }

 .pd-slider-tab {
   padding: 14px 24px;
   font-size: 14px;
   font-weight: 600;
   color: #555;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   cursor: pointer;
   transition: color .15s, border-color .15s;
   background: none;
   border-top: none;
   border-left: none;
   border-right: none;
 }
 @media (max-width: 768px){
  .pd-content-wrap.max-com{
    width: calc(100% - 40px);
  }
  .pd-slider-tab {
    padding: 10px;
    font-size: 12px;
    font-weight: 300;
  }
 }


 .pd-slider-tab:hover {
   color: #ccc
 }

 .pd-slider-tab.active {
   color: #fff;
   border-bottom-color: #1095F5
 }

 /* ── Accordion Detection Section ── */
 .pd-detect-section {
   background: #000;
   padding: 100px 0
 }

 .pd-detect-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: start;
 }

 @media(max-width:900px) {
   .pd-detect-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .pd-detect-left {}

 .pd-detect-title {
   font-size: clamp(28px, 3.5vw, 42px);
   font-weight: 800;
   color: #fff;
   line-height: 1.1;
   margin-bottom: 36px;
 }

 .pd-detect-items {
   display: flex;
   flex-direction: column;
   gap: 0
 }

 .pd-detect-item {
   border-top: 1px solid #1a1a1a;
   overflow: hidden;
 }

 .pd-detect-item:last-child {
   border-bottom: 1px solid #1a1a1a
 }

 .pd-detect-btn {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   cursor: pointer;
   padding: 20px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
 }

 .pd-detect-btn-label {
   font-size: 15px;
   font-weight: 600;
   color: #888;
   transition: color .2s;
 }

 .pd-detect-item.open .pd-detect-btn-label {
   color: #fff
 }

 .pd-detect-btn-icon {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   border: 1.5px solid #2a2a2a;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: border-color .2s, background .2s;
 }

 .pd-detect-btn-icon i {
   font-size: 10px;
   color: #444;
   transition: transform .3s, color .2s
 }

 .pd-detect-item.open .pd-detect-btn-icon {
   border-color: #1095F5;
   background: rgba(16, 149, 245, .12)
 }

 .pd-detect-item.open .pd-detect-btn-icon i {
   transform: rotate(180deg);
   color: #1095F5
 }

 .pd-detect-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease, padding .25s ease;
 }

 .pd-detect-item.open .pd-detect-body {
   max-height: 200px;
   padding-bottom: 20px
 }

 .pd-detect-desc {
   font-size: 14px;
   color: #666;
   line-height: 1.75;
   padding-left: 0
 }

 .pd-detect-right {}

 .pd-detect-img-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3px;
   border-radius: 12px;
   overflow: hidden;
 }

 .pd-detect-img-grid img {
   width: 100%;
   aspect-ratio: 1;
   object-fit: cover;
   display: block;
   transition: transform .4s;
 }

 .pd-detect-img-grid img:hover {
   transform: scale(1.03)
 }

 /* ── Shared section header ── */
 .pd-sec-header {
   text-align: center;
   margin-bottom: 0
 }

 .pd-sec-eyebrow {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #666;
   margin-bottom: 16px;
 }

 .pd-sec-title {
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 800;
   color: #fff;
   line-height: 1.1;
 }

 .pd-sec-sub {
   font-size: 15px;
   color: #777;
   max-width: 640px;
   margin: 16px auto 0;
   line-height: 1.7;
 }

 /* ── Feature Grid 4-up ── */
 .pd-feat4 {
   background: #000;
   padding: 100px 0
 }

 .pd-feat4-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   margin-top: 60px;
   background: #1a1a1a;
   border: 1px solid #1a1a1a;
   border-radius: 12px;
   overflow: hidden;
 }

 @media(max-width:700px) {
   .pd-feat4-grid {
     grid-template-columns: 1fr
   }
 }

 .pd-feat4-cell {
   background: #0d0d0d;
   padding: 0;
   overflow: hidden;
   position: relative;
   cursor: pointer;
 }

 .pd-feat4-cell-img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   display: block;
   transition: transform .5s ease;
   filter: brightness(.8);
 }

 .pd-feat4-cell:hover .pd-feat4-cell-img {
   transform: scale(1.04);
   filter: brightness(.95)
 }

 .pd-feat4-cell-info {
   padding: 24px 28px 32px
 }

 .pd-feat4-cell-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   border: 1px solid #2a2a2a;
   color: #555;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .06em;
   padding: 3px 9px;
   border-radius: 3px;
   margin-bottom: 10px;
 }

 .pd-feat4-cell-title {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 8px;
   line-height: 1.3
 }

 .pd-feat4-cell-desc {
   font-size: 13px;
   color: #666;
   line-height: 1.65
 }

 /* ── 2K WDR Section ── */
 .pd-wdr {
   background: #0d0d0d;
   padding: 100px 0
 }

 .pd-wdr-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 @media(max-width:900px) {
   .pd-wdr-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .pd-wdr-img {
   border-radius: 12px;
   overflow: hidden;
   position: relative
 }

 .pd-wdr-img img {
   width: 100%;
   display: block
 }

 .pd-wdr-zoom {
   position: absolute;
   bottom: 16px;
   right: 16px;
   background: rgba(16, 149, 245, .85);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   padding: 5px 12px;
   border-radius: 4px;
 }

 /* ── Weatherproof Section ── */
 .pd-weather {
   background: #000;
   padding: 100px 0
 }

 .pd-weather-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 @media(max-width:900px) {
   .pd-weather-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .pd-weather-img {
   border-radius: 12px;
   overflow: hidden
 }

 .pd-weather-img img {
   width: 100%;
   display: block
 }

 .pd-weather-icons {
   display: flex;
   gap: 10px;
   margin-top: 28px;
   flex-wrap: wrap
 }

 .pd-weather-icon-chip {
   display: flex;
   align-items: center;
   gap: 7px;
   border: 1px solid #2a2a2a;
   color: #aaa;
   font-size: 13px;
   font-weight: 500;
   padding: 9px 14px;
   border-radius: 6px;
   background: #111;
 }

 .pd-weather-icon-chip i {
   color: #1095F5;
   font-size: 15px
 }

 /* ── Install Video + More to Love ── */
 .pd-install {
   background: #0d0d0d;
   padding: 100px 0
 }

 .pd-install-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: start;
 }

 @media(max-width:900px) {
   .pd-install-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .pd-install-video {
   border-radius: 12px;
   overflow: hidden;
   position: relative
 }

 .pd-install-video img {
   width: 100%;
   display: block;
   filter: brightness(.75)
 }

 .pd-install-video-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 55%);
 }

 .pd-install-title-overlay {
   position: absolute;
   bottom: 24px;
   left: 24px;
   right: 24px
 }

 .pd-install-title-overlay h3 {
   font-size: 16px;
   font-weight: 700;
   color: #fff
 }

 .pd-install-title-overlay p {
   font-size: 12px;
   color: rgba(255, 255, 255, .6);
   margin-top: 3px
 }

 /* ── More to Love Accordion (Reolink style) ── */
 .pd-more-love {
   color: #fff
 }

 .pd-more-love-title {
   font-size: clamp(24px, 3vw, 32px);
   font-weight: 800;
   color: #fff;
   margin-bottom: 8px;
 }

 .pd-more-love-sub {
   font-size: 14px;
   color: #666;
   margin-bottom: 32px
 }

 .pd-more-item {
   border-bottom: 1px solid #1f1f1f
 }

 .pd-more-btn {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   cursor: pointer;
   padding: 20px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   font-size: 15px;
   font-weight: 600;
   color: #ccc;
   transition: color .15s;
 }

 .pd-more-btn:hover {
   color: #fff
 }

 .pd-more-btn .pd-more-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 1.5px solid #333;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: border-color .2s, background .2s;
 }

 .pd-more-btn .pd-more-icon i {
   font-size: 11px;
   color: #666;
   transition: transform .25s, color .2s
 }

 .pd-more-item.open .pd-more-btn {
   color: #fff
 }

 .pd-more-item.open .pd-more-btn .pd-more-icon {
   border-color: #1095F5;
   background: rgba(16, 149, 245, .1)
 }

 .pd-more-item.open .pd-more-btn .pd-more-icon i {
   transform: rotate(45deg);
   color: #1095F5
 }

 .pd-more-body {
   max-height: 0;
   overflow: hidden;
   font-size: 14px;
   color: #666;
   line-height: 1.75;
   transition: max-height .35s ease, padding .25s ease;
 }

 .pd-more-item.open .pd-more-body {
   max-height: 300px;
   padding-bottom: 22px
 }


 /* ════════════════════════════════════════════
    BUSINESS PAGE
 ════════════════════════════════════════════ */
 #page-business {
   background: #fff;
 }

 /* ── Hero ── */
 .biz-hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: #020C1B;
 }

 .biz-hero-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 40%;
   opacity: 1;
 }

 .biz-hero-overlay {
   position: absolute;
   inset: 0;
   background:
     linear-gradient(105deg,
       rgba(2, 12, 27, .92) 0%,
       rgba(2, 12, 27, .78) 30%,
       rgba(2, 12, 27, .38) 58%,
       rgba(2, 12, 27, .08) 80%,
       transparent 100%),
     linear-gradient(to top,
       rgba(2, 12, 27, .55) 0%,
       transparent 40%);
 }

 /* full-width flex wrapper — mirrors .dsc-full-content */
 .biz-hero-full {
   position: relative;
   z-index: 2;
   width: 100%;
 }

 .biz-hero-content {
   max-width: 100%;
   color: #fff;
   padding: 80px 0 60px;
   /* top offset for sticky nav + breathing room */
 }

 .biz-hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: #1095F5;
   margin-bottom: 24px;
 }

 .biz-hero-eyebrow::before {
   content: '';
   width: 28px;
   height: 2px;
   background: #1095F5;
   display: inline-block;
 }

 .biz-hero-title {
   font-size: clamp(30px, 5.5vw, 56px);
   font-weight: 900;
   line-height: 1.05;
   letter-spacing: -.025em;
   margin-bottom: 24px;
 }

 .biz-hero-title em {
   font-style: normal;
   background: linear-gradient(90deg, #1095F5 0%, #38BDF8 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .biz-hero-sub {
   font-size: 18px;
   color: rgba(255, 255, 255, .72);
   line-height: 1.7;
   margin-bottom: 40px;
   max-width: 520px;
 }

 .biz-hero-cta {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   align-items: center
 }

 .biz-btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #1095F5;
   color: #fff;
   font-size: 15px;
   font-weight: 700;
   padding: 14px 28px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
   transition: background .2s, transform .15s, box-shadow .2s;
   box-shadow: 0 4px 20px rgba(16, 149, 245, .45);
 }

 .biz-btn-primary:hover {
   background: #0B7ED4;
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(16, 149, 245, .5)
 }

 .biz-btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   padding: 14px 28px;
   border-radius: 8px;
   border: 1.5px solid rgba(255, 255, 255, .35);
   cursor: pointer;
   transition: border-color .2s, background .2s;
 }

 .biz-btn-ghost:hover {
   border-color: #1095F5;
   background: rgba(16, 149, 245, .1)
 }

 /* floating dots */
 .biz-hero-dots {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
   z-index: 1
 }

 .biz-hero-dots span {
   position: absolute;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(16, 149, 245, .4), transparent);
   animation: biz-float 8s ease-in-out infinite;
 }

 .biz-hero-dots span:nth-child(1) {
   width: 300px;
   height: 300px;
   top: 10%;
   right: 15%;
   animation-delay: 0s
 }

 .biz-hero-dots span:nth-child(2) {
   width: 180px;
   height: 180px;
   top: 55%;
   right: 35%;
   animation-delay: 2s
 }

 .biz-hero-dots span:nth-child(3) {
   width: 120px;
   height: 120px;
   bottom: 20%;
   right: 10%;
   animation-delay: 4s
 }

 .biz-hero-dots span:nth-child(4) {
   width: 80px;
   height: 80px;
   top: 30%;
   right: 50%;
   animation-delay: 1s
 }

 .biz-hero-dots span:nth-child(5) {
   width: 200px;
   height: 200px;
   bottom: 10%;
   left: 40%;
   animation-delay: 3s
 }

 @keyframes biz-float {

   0%,
   100% {
     transform: translateY(0) scale(1);
     opacity: .35
   }

   50% {
     transform: translateY(-20px) scale(1.08);
     opacity: .6
   }
 }

 .biz-hero-stats {
   display: flex;
   align-items: center;
   gap: 0;
   margin-top: 56px;
   padding-top: 32px;
   border-top: 1px solid rgba(255, 255, 255, .1);
   flex-wrap: wrap;
 }

 .biz-hero-stat-item {
   padding: 0 36px 0 0;
   flex-shrink: 0
 }

 .biz-hero-stat-item:first-child {
   padding-left: 0
 }

 .biz-hero-stat-divider {
   width: 1px;
   height: 40px;
   background: rgba(255, 255, 255, .15);
   margin-right: 36px;
   flex-shrink: 0;
 }

 .biz-hero-stat-num {
   font-size: 34px;
   font-weight: 900;
   color: #fff;
   line-height: 1
 }

 .biz-hero-stat-num span {
   font-size: .6em;
   color: #38BDF8;
   font-weight: 700
 }

 .biz-hero-stat-lbl {
   font-size: 12px;
   color: rgba(255, 255, 255, .5);
   margin-top: 4px;
   letter-spacing: .02em
 }

 /* ── Use Cases ── */
 .biz-usecases {
   background: #fff;
   padding: 80px 0;
   border-top: 1px solid #E2E8F0;
 }

 .biz-uc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
 }

 @media(max-width:900px) {
   .biz-uc-grid {
     grid-template-columns: 1fr
   }
 }

 .biz-uc-card {
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid #E2E8F0;
   transition: border-color .2s, box-shadow .2s, transform .2s;
   background: #fff;
 }

 .biz-uc-card:hover {
   border-color: #BFDBFE;
   box-shadow: 0 20px 60px rgba(16, 149, 245, .12);
   transform: translateY(-6px);
 }

 .biz-uc-img {
   position: relative;
   height: 220px;
   overflow: hidden;
 }

 .biz-uc-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
 }

 .biz-uc-card:hover .biz-uc-img img {
   transform: scale(1.06)
 }

 .biz-uc-overlay {
   position: absolute;
   bottom: 16px;
   left: 16px;
 }

 .biz-uc-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(16, 149, 245, .9);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   padding: 5px 12px;
   border-radius: 20px;
   backdrop-filter: blur(6px);
 }

 .biz-uc-body {
   padding: 24px 28px 28px
 }

 .biz-uc-body h3 {
   font-size: 18px;
   font-weight: 800;
   color: #0A0F1E;
   margin-bottom: 10px;
 }

 .biz-uc-body p {
   font-size: 14px;
   color: #64748B;
   line-height: 1.7;
   margin-bottom: 16px;
 }

 .biz-uc-chips {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 }

 .biz-uc-chips span {
   font-size: 11px;
   font-weight: 700;
   color: #1095F5;
   background: #EFF6FF;
   padding: 4px 10px;
   border-radius: 6px;
   border: 1px solid #BFDBFE;
 }

 /* ── Partner types strip ── */
 .biz-types {
   background: #F8FAFC;
   padding: 72px 0;
   border-bottom: 1px solid #E2E8F0;
 }

 .biz-section-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #1095F5;
   margin-bottom: 14px;
 }

 .biz-section-title {
   font-size: clamp(28px, 3.5vw, 44px);
   font-weight: 900;
   color: #0A0F1E;
   letter-spacing: -.02em;
   line-height: 1.15;
   margin-bottom: 16px;
 }

 .biz-section-sub {
   font-size: 17px;
   color: #64748B;
   line-height: 1.65;
   max-width: 760px;
 }

 .biz-types-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 48px;
 }

 @media(max-width:900px) {
   .biz-types-grid {
     grid-template-columns: 1fr
   }
 }

 .biz-type-card {
   background: #fff;
   border: 1px solid #E2E8F0;
   border-radius: 16px;
   padding: 36px 32px;
   transition: border-color .2s, box-shadow .2s, transform .2s;
   position: relative;
   overflow: hidden;
 }

 .biz-type-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, #1095F5, #38BDF8);
   opacity: 0;
   transition: opacity .2s;
 }

 .biz-type-card:hover {
   border-color: #BFDBFE;
   box-shadow: 0 12px 40px rgba(16, 149, 245, .12);
   transform: translateY(-4px);
 }

 .biz-type-card:hover::before {
   opacity: 1
 }

 .biz-type-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
 }

 .biz-type-icon i {
   font-size: 24px;
   color: #1095F5
 }

 .biz-type-name {
   font-size: 20px;
   font-weight: 800;
   color: #0A0F1E;
   margin-bottom: 10px
 }

 .biz-type-desc {
   font-size: 14px;
   color: #64748B;
   line-height: 1.7;
   margin-bottom: 20px
 }

 .biz-type-list {
   margin-bottom: 24px
 }

 .biz-type-list li {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   font-size: 13px;
   color: #475569;
   padding: 5px 0;
 }

 .biz-type-list li i {
   color: #1095F5;
   margin-top: 2px;
   flex-shrink: 0
 }

 .biz-type-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #EFF6FF;
   color: #1095F5;
   font-size: 12px;
   font-weight: 700;
   padding: 6px 14px;
   border-radius: 20px;
 }

 /* ── Why Yoosee ── */
 .biz-why {
   background: #F8FAFC;
   padding: 96px 0;
   border-top: 1px solid #E2E8F0;
   border-bottom: 1px solid #E2E8F0;
 }

 .biz-why-header {
   text-align: center;
   margin-bottom: 64px
 }

 .biz-why-header .biz-section-sub {
   margin: 12px auto 0
 }

 .biz-why-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
 }

 @media(max-width:1000px) {
   .biz-why-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media(max-width:600px) {
   .biz-why-grid {
     grid-template-columns: 1fr
   }
 }

 .biz-why-item {
   text-align: center;
   padding: 40px 24px;
   background: #fff;
   border: 1px solid #E2E8F0;
   border-radius: 20px;
   transition: border-color .2s, box-shadow .2s, transform .2s;
 }

 .biz-why-item:hover {
   border-color: #BFDBFE;
   box-shadow: 0 16px 48px rgba(16, 149, 245, .1);
   transform: translateY(-4px);
 }

 .biz-why-icon {
   width: 56px;
   height: 56px;
   border-radius: 16px;
   background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
 }

 .biz-why-icon i {
   font-size: 22px;
   color: #1095F5
 }

 .biz-why-num {
   font-size: 52px;
   font-weight: 900;
   line-height: 1;
   background: linear-gradient(135deg, #1095F5, #38BDF8);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 8px;
 }

 .biz-why-num span {
   font-size: .5em
 }

 .biz-why-label {
   font-size: 15px;
   font-weight: 700;
   color: #0A0F1E;
   margin-bottom: 8px
 }

 .biz-why-desc {
   font-size: 13px;
   color: #94A3B8;
   line-height: 1.65
 }

 /* ── Benefits ── */
 .biz-benefits {
   background: #020C1B;
   padding: 96px 0;
   position: relative;
   overflow: hidden;
 }

 .biz-benefits::before {
   content: '';
   position: absolute;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(16, 149, 245, .12) 0%, transparent 70%);
   top: -200px;
   right: -100px;
   pointer-events: none;
 }

 .biz-benefits-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 @media(max-width:900px) {
   .biz-benefits-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .biz-benefits-text .biz-section-title {
   color: #fff
 }

 .biz-benefits-text .biz-section-sub {
   color: rgba(255, 255, 255, .6)
 }

 .biz-benefits-text .biz-section-eyebrow {
   color: #38BDF8
 }

 .biz-benefits-list {
   margin-top: 36px;
   display: flex;
   flex-direction: column;
   gap: 20px
 }

 .biz-benefit-row {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 20px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .07);
   transition: background .2s, border-color .2s;
 }

 .biz-benefit-row:hover {
   background: rgba(16, 149, 245, .1);
   border-color: rgba(16, 149, 245, .3)
 }

 .biz-benefit-icon {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   border-radius: 10px;
   background: rgba(16, 149, 245, .15);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .biz-benefit-icon i {
   color: #1095F5;
   font-size: 18px
 }

 .biz-benefit-title {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 4px
 }

 .biz-benefit-desc {
   font-size: 13px;
   color: rgba(255, 255, 255, .5);
   line-height: 1.65
 }

 .biz-benefits-visual {
   position: relative
 }

 .biz-benefits-img {
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
   position: relative;
 }

 .biz-benefits-img img {
   width: 100%;
   display: block
 }

 .biz-benefits-img-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(2, 12, 27, .4) 0%, transparent 60%);
 }

 .biz-benefits-card {
   position: absolute;
   bottom: -20px;
   left: -24px;
   background: #fff;
   border-radius: 14px;
   padding: 18px 22px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
   min-width: 200px;
 }

 .biz-benefits-card-num {
   font-size: 28px;
   font-weight: 900;
   color: #1095F5;
   line-height: 1;
 }

 .biz-benefits-card-lbl {
   font-size: 12px;
   color: #94A3B8;
   margin-top: 4px
 }

 .biz-benefits-card-flag {
   display: flex;
   gap: 4px;
   margin-top: 10px;
   flex-wrap: wrap;
 }

 .biz-benefits-card-flag span {
   font-size: 10px;
   background: #EFF6FF;
   color: #1095F5;
   padding: 3px 8px;
   border-radius: 4px;
   font-weight: 600;
 }

 .biz-cert-badge {
   position: absolute;
   top: -20px;
   right: -24px;
   background: rgba(16, 149, 245, .15);
   border: 1px solid rgba(16, 149, 245, .35);
   border-radius: 14px;
   padding: 14px 18px;
   backdrop-filter: blur(12px);
 }

 .biz-cert-title {
   font-size: 11px;
   font-weight: 700;
   color: #38BDF8;
   letter-spacing: .08em;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .biz-cert-chips {
   display: flex;
   gap: 6px;
   flex-wrap: wrap
 }

 .biz-cert-chips span {
   font-size: 10px;
   font-weight: 800;
   color: #fff;
   background: rgba(255, 255, 255, .12);
   padding: 3px 8px;
   border-radius: 4px;
   border: 1px solid rgba(255, 255, 255, .2);
 }

 @media(max-width:768px) {
   .biz-cert-badge {
     top: auto;
     right: 0;
     bottom: 160px
   }
 }

 /* ── How It Works ── */
 .biz-howto {
   background: #fff;
   padding: 80px 0;
   border-top: 1px solid #E2E8F0;
 }

 .biz-howto-steps {
   display: flex;
   align-items: flex-start;
   gap: 0;
   margin-top: 56px;
   flex-wrap: wrap;
   justify-content: center;
 }

 .biz-howto-step {
   flex: 1;
   min-width: 180px;
   max-width: 220px;
   text-align: center;
   padding: 0 16px;
 }

 .biz-howto-num {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .14em;
   color: #1095F5;
   text-transform: uppercase;
   margin-bottom: 16px;
 }

 .biz-howto-icon {
   width: 64px;
   height: 64px;
   border-radius: 18px;
   background: linear-gradient(135deg, #1095F5, #38BDF8);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   box-shadow: 0 8px 24px rgba(16, 149, 245, .3);
 }

 .biz-howto-icon i {
   font-size: 24px;
   color: #fff
 }

 .biz-howto-title {
   font-size: 16px;
   font-weight: 800;
   color: #0A0F1E;
   margin-bottom: 10px;
 }

 .biz-howto-desc {
   font-size: 13px;
   color: #64748B;
   line-height: 1.7;
 }

 .biz-howto-arrow {
   display: flex;
   align-items: center;
   padding: 0 8px;
   margin-top: 48px;
   color: #BFDBFE;
   font-size: 20px;
   flex-shrink: 0;
 }

 @media(max-width:768px) {
   .biz-howto-arrow {
     display: none
   }
 }

 /* ── Horizontal Fishbone Timeline ── */
 .biz-timeline {
   background: #F8FAFC;
   padding: 72px 0 80px;
   border-top: 1px solid #E2E8F0;
 }

 .biz-timeline-header {
   text-align: center;
   margin-bottom: 56px
 }

 /* ── Fishbone wrapper (horizontal scroll on mobile) ── */
 .biz-fishbone-wrap {
   position: relative;
   overflow-x: auto;
   overflow-y: visible;
   padding-bottom: 8px;
   /* hide scrollbar but keep scroll */
   scrollbar-width: thin;
   scrollbar-color: rgba(16, 149, 245, .3) transparent;
 }

 .biz-fishbone-wrap::-webkit-scrollbar {
   height: 4px
 }

 .biz-fishbone-wrap::-webkit-scrollbar-track {
   background: transparent
 }

 .biz-fishbone-wrap::-webkit-scrollbar-thumb {
   background: rgba(16, 149, 245, .3);
   border-radius: 2px
 }

 .biz-fishbone {
   display: flex;
   flex-direction: column;
   gap: 0;
   min-width: 900px;
   /* ensures horizontal layout holds on small screens */
   position: relative;
   padding: 60px 0 60px;
 }

 /* the central horizontal spine */
 .biz-fishbone::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   height: 3px;
   background: linear-gradient(90deg, transparent 0%, #1095F5 5%, #38BDF8 50%, #1095F5 95%, transparent 100%);
   z-index: 0;
 }

 /* row above the spine */
 .biz-fb-top,
 /* row below the spine */
 .biz-fb-bot {
   display: flex;
   align-items: flex-end;
   /* top row: content aligns to its bottom edge (close to spine) */
   position: relative;
   z-index: 1;
 }

 .biz-fb-bot {
   align-items: flex-start;
 }

 /* each milestone cell occupies equal width */
 .biz-fb-node {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
 }

 /* --- TOP nodes --- */
 .biz-fb-top .biz-fb-node {
   flex-direction: column-reverse;
   /* card → stem → dot */
   padding-bottom: 0;
 }

 /* --- BOT nodes --- */
 .biz-fb-bot .biz-fb-node {
   flex-direction: column;
   /* dot → stem → card */
   padding-top: 0;
 }

 /* the vertical stem connecting card to spine */
 .biz-fb-stem {
   width: 2px;
   background: linear-gradient(to bottom, rgba(16, 149, 245, .6), rgba(16, 149, 245, .2));
   flex-shrink: 0;
 }

 .biz-fb-top .biz-fb-stem {
   height: 32px;
   background: linear-gradient(to top, rgba(16, 149, 245, .6), rgba(16, 149, 245, .2));
 }

 .biz-fb-bot .biz-fb-stem {
   height: 32px;
 }

 /* the dot sitting ON the spine */
 .biz-fb-dot {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: linear-gradient(135deg, #1095F5, #38BDF8);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 0 5px rgba(16, 149, 245, .15), 0 3px 10px rgba(16, 149, 245, .4);
   flex-shrink: 0;
   z-index: 2;
   position: relative;
 }

 .biz-fb-dot i {
   font-size: 13px;
   color: #fff
 }

 /* the card with text */
 .biz-fb-card {
   background: #fff;
   border: 1px solid #E2E8F0;
   border-radius: 12px;
   padding: 14px 16px;
   width: 148px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
   transition: border-color .2s, box-shadow .2s, transform .2s;
   position: relative;
 }

 .biz-fb-card:hover {
   border-color: #BFDBFE;
   box-shadow: 0 8px 28px rgba(16, 149, 245, .14);
   transform: translateY(-3px);
 }

 .biz-fb-bot .biz-fb-card:hover {
   transform: translateY(3px);
 }

 .biz-fb-year {
   font-size: 13px;
   font-weight: 900;
   color: #1095F5;
   letter-spacing: .04em;
   margin-bottom: 4px;
 }

 .biz-fb-title {
   font-size: 12px;
   font-weight: 700;
   color: #0A0F1E;
   line-height: 1.35;
   margin-bottom: 4px;
 }

 .biz-fb-desc {
   font-size: 11px;
   color: #94A3B8;
   line-height: 1.5;
 }

 /* special: last node (2026) uses accent gradient */
 .biz-fb-node.accent .biz-fb-dot {
   background: linear-gradient(135deg, #f59e0b, #ef4444);
   box-shadow: 0 0 0 5px rgba(245, 158, 11, .15), 0 3px 10px rgba(239, 68, 68, .4);
 }

 .biz-fb-node.accent .biz-fb-year {
   color: #f59e0b;
 }

 .biz-fb-node.accent .biz-fb-card {
   border-color: #FDE68A;
 }

 .biz-fb-node.accent .biz-fb-card:hover {
   border-color: #F59E0B;
   box-shadow: 0 8px 28px rgba(245, 158, 11, .2);
 }

 @media(max-width:900px) {
   .biz-fishbone {
     min-width: 860px
   }

   .biz-fb-card {
     width: 128px;
     padding: 12px 12px
   }
 }

 /* ── Partners logos ── */
 /* ── Revenue Engines ── */
 .biz-revenue {
   background: #fff;
   padding: 96px 0;
   border-bottom: 1px solid #E2E8F0;
 }

 .biz-rev-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
 }

 @media(max-width:1024px) {
   .biz-rev-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media(max-width:640px) {
   .biz-rev-grid {
     grid-template-columns: 1fr
   }
 }

 .biz-rev-card {
   background: #fff;
   border: 1px solid #E2E8F0;
   border-radius: 16px;
   padding: 32px 28px;
   transition: border-color .2s, box-shadow .2s, transform .2s;
   position: relative;
   overflow: hidden;
 }

 .biz-rev-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, #1095F5, #38BDF8);
   opacity: 0;
   transition: opacity .3s;
 }

 .biz-rev-card:hover {
   border-color: #BFDBFE;
   box-shadow: 0 16px 48px rgba(16, 149, 245, .12);
   transform: translateY(-6px);
 }

 .biz-rev-card:hover::before {
   opacity: 1
 }

 .biz-rev-icon {
   width: 56px;
   height: 56px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   color: #fff;
   font-size: 24px;
 }

 .biz-rev-title {
   font-size: 19px;
   font-weight: 800;
   color: #0A0F1E;
   margin-bottom: 12px;
   line-height: 1.3;
 }

 .biz-rev-desc {
   font-size: 14px;
   color: #64748B;
   line-height: 1.7;
   margin-bottom: 20px;
 }

 .biz-rev-highlight {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: #1095F5;
   background: #EFF6FF;
   padding: 6px 14px;
   border-radius: 20px;
   border: 1px solid #BFDBFE;
 }

 .biz-rev-cta {
   margin-top: 56px;
   padding: 32px 40px;
   background: linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%);
   border: 1px solid #BFDBFE;
   border-radius: 16px;
   display: flex;
   align-items: center;
   gap: 28px;
   flex-wrap: wrap;
 }

 @media(max-width:768px) {
   .biz-rev-cta {
     flex-direction: column;
     text-align: center;
     gap: 20px
   }
 }

 .biz-rev-cta-icon {
   width: 56px;
   height: 56px;
   border-radius: 12px;
   background: linear-gradient(135deg, #1095F5, #0B7ED4);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 24px;
   flex-shrink: 0;
 }

 .biz-rev-cta-text {
   flex: 1;
   min-width: 0
 }

 .biz-rev-cta-text h4 {
   font-size: 18px;
   font-weight: 800;
   color: #0A0F1E;
   margin-bottom: 6px;
 }

 .biz-rev-cta-text p {
   font-size: 14px;
   color: #64748B;
   line-height: 1.7;
   margin: 0;
 }

 .biz-rev-cta .biz-btn-primary {
   flex-shrink: 0;
 }

 .biz-logos {
   background: #fff;
   padding: 64px 0;
   border-top: 1px solid #E2E8F0;
   border-bottom: 1px solid #E2E8F0;
 }

 .biz-logos-label {
   text-align: center;
   font-size: 13px;
   font-weight: 600;
   color: #94A3B8;
   letter-spacing: .12em;
   text-transform: uppercase;
   margin-bottom: 36px;
 }

 .biz-logos-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 48px;
   flex-wrap: wrap;
 }

 .biz-logo-chip {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 700;
   color: #94A3B8;
   opacity: .65;
   transition: opacity .2s;
 }

 .biz-logo-chip:hover {
   opacity: 1;
   color: #1095F5
 }

 .biz-logo-chip i {
   font-size: 20px
 }

 /* ── Apply form ── */
 .biz-apply {
   background: linear-gradient(135deg, #020C1B 0%, #051A35 50%, #020C1B 100%);
   padding: 96px 0;
   position: relative;
   overflow: hidden;
 }

 .biz-apply::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 30% 50%, rgba(16, 149, 245, .15) 0%, transparent 60%);
   pointer-events: none;
 }

 .biz-apply-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: start;
 }

 @media(max-width:900px) {
   .biz-apply-inner {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .biz-apply-text .biz-section-title {
   color: #fff
 }

 .biz-apply-text .biz-section-sub {
   color: rgba(255, 255, 255, .6)
 }

 .biz-apply-text .biz-section-eyebrow {
   color: #38BDF8
 }

 .biz-apply-steps {
   margin-top: 36px;
   display: flex;
   flex-direction: column;
   gap: 16px
 }

 .biz-apply-step {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 14px;
   color: rgba(255, 255, 255, .65);
   font-weight: 500;
 }

 .biz-apply-step-num {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: rgba(16, 149, 245, .25);
   border: 1.5px solid rgba(16, 149, 245, .5);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 800;
   color: #38BDF8;
   flex-shrink: 0;
 }

 .biz-form {
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 20px;
   padding: 40px 36px;
   backdrop-filter: blur(12px);
 }

 .biz-form h3 {
   font-size: 22px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 6px;
 }

 .biz-form p {
   font-size: 14px;
   color: rgba(255, 255, 255, .5);
   margin-bottom: 28px
 }

 .biz-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
 }

 @media(max-width:600px) {
   .biz-form-row {
     grid-template-columns: 1fr
   }
 }

 .biz-form-group {
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 6px
 }

 .biz-form-group label {
   font-size: 12px;
   font-weight: 600;
   color: rgba(255, 255, 255, .55);
   text-transform: uppercase;
   letter-spacing: .06em;
 }

 .biz-form-group input,
 .biz-form-group select,
 .biz-form-group textarea {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 8px;
   padding: 12px 14px;
   font-size: 14px;
   color: #fff;
   font-family: inherit;
   outline: none;
   transition: border-color .2s, background .2s;
 }

 .biz-form-group input::placeholder,
 .biz-form-group textarea::placeholder {
   color: rgba(255, 255, 255, .3)
 }

 .biz-form-group input:focus,
 .biz-form-group select:focus,
 .biz-form-group textarea:focus {
   border-color: #1095F5;
   background: rgba(16, 149, 245, .08);
 }

 .biz-form-group select option {
   background: #0D1B2E;
   color: #fff
 }

 .biz-form-group textarea {
   resize: vertical;
   min-height: 90px
 }

 .biz-form-submit {
   width: 100%;
   padding: 15px;
   background: linear-gradient(90deg, #1095F5, #0B7ED4);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   transition: opacity .2s, transform .15s;
   margin-top: 8px;
   box-shadow: 0 6px 24px rgba(16, 149, 245, .4);
 }

 .biz-form-submit:hover {
   opacity: .9;
   transform: translateY(-1px)
 }

 .biz-form-note {
   text-align: center;
   font-size: 12px;
   color: rgba(255, 255, 255, .35);
   margin-top: 14px;
 }

 @media(max-width:768px) {
   .biz-hero-content {
     padding: 100px 0 60px
   }

   .biz-benefits-card {
     left: 0;
     bottom: -10px
   }

   .biz-form {
     padding: 28px 20px
   }
 }

 .nav-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   transform: translateY(-100%);
   transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
   background: transparent;
   pointer-events: none;
 }

 .nav-container.open {
   transform: translateY(0);
   pointer-events: auto;
 }

 /* 导航栏主体 */
 .nav-bar {
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(10px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   border-radius: 0 0 24px 24px;
   max-height: 80vh;
   overflow-y: auto;
   padding-bottom: env(safe-area-inset-bottom, 12px);
 }

 .nav-bar::-webkit-scrollbar {
   width: 4px;
 }

 .nav-bar::-webkit-scrollbar-track {
   background: #e9eef3;
   border-radius: 4px;
 }

 .nav-bar::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 4px;
 }

 /* 导航头部 */
 .nav-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 1.25rem;
   border-bottom: 1px solid #eef2f6;
   position: sticky;
   top: 0;
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: blur(12px);
   z-index: 10;
 }

 .nav-header h3 {
   font-size: 1.2rem;
   font-weight: 600;
   color: #0f172a;
 }

 .close-nav {
   background: #f1f5f9;
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 20px;
   font-size: 1.4rem;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #475569;
   transition: all 0.2s;
   -webkit-tap-highlight-color: transparent;
 }

 .close-nav:active {
   background: #e2e8f0;
   transform: scale(0.92);
 }

 /* 一级菜单 */
 .nav-level-1 {
   list-style: none;
   padding: 0.25rem 0;
   padding-bottom: 0;
 }

 .nav-item-1 {
   border-bottom: 1px solid #f0f2f5;
 }

 .nav-item-1:last-child {
   border-bottom: none;
 }

 /* 一级标题行 */
 .nav-title-1-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.9rem 1.25rem;
   background: white;
 }

 .nav-title-1-link {
   flex: 1;
   font-weight: 600;
   font-size: 1rem;
   color: #1e293b;
   text-decoration: none;
   display: block;
   transition: opacity 0.2s;
   -webkit-tap-highlight-color: transparent;
 }

 .nav-title-1-link:active {
   opacity: 0.6;
 }

 .arrow-btn {
   background: transparent;
   border: none;
   width: 36px;
   height: 36px;
   border-radius: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: transform 0.25s ease;
   color: #64748b;
   font-size: 1.1rem;
   margin-left: 8px;
   flex-shrink: 0;
   -webkit-tap-highlight-color: transparent;
 }

 .arrow-btn:active {
   background: transparent;
   /* 无背景反馈 */
 }

 .arrow-btn.expanded {
   transform: rotate(180deg);
 }

 /* 二级菜单容器 */
 .nav-level-2 {
   list-style: none;
   background: #fafcff;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s cubic-bezier(0.33, 1, 0.68, 1);
   padding-left: 0;
 }

 .nav-level-2.show {
   max-height: 600px;
 }

 .nav-item-2 {
   border-top: 1px solid #eef2f8;
 }

 /* 二级标题行 */
 .nav-title-2-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1.25rem 0.75rem 2rem;
   background: #fafcff;
 }

 .nav-title-2-link {
   flex: 1;
   font-weight: 500;
   font-size: 0.95rem;
   color: #334155;
   text-decoration: none;
   display: block;
   transition: opacity 0.2s;
   -webkit-tap-highlight-color: transparent;
 }

 .nav-title-2-link:active {
   opacity: 0.6;
 }

 /* 三级菜单容器 */
 .nav-level-3 {
   list-style: none;
   background: #ffffff;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.28s ease;
   padding-left: 0;
 }

 .nav-level-3.show {
   max-height: 400px;
 }

 .nav-item-3 {
   padding: 0.65rem 1.25rem 0.65rem 3rem;
   font-size: 0.9rem;
   border-top: 1px solid #f1f5f9;
 }

 .nav-item-3 a {
   color: #475569;
   text-decoration: none;
   display: block;
   width: 100%;
   transition: opacity 0.2s;
   -webkit-tap-highlight-color: transparent;
 }

 .nav-item-3 a:active {
   opacity: 0.6;
 }

 .nav-item-3:first-child {
   border-top: none;
 }

 .bottom-placeholder {
   height: 8px;
 }

 @media (max-width: 768px){
  .pd-mount,.pd-feat4,.pd-install,.pd-inbox {
    padding: 50px 0;
  }
  .pd-mount-blocks{
    gap: 50px
  }
 }

 .pc2-header{
  background:#fff;
  padding-top:52px;
  padding-bottom:0;
}
.pc2-eyebrow{
  font-size:11.5px;font-weight:500;color:#999;
  margin-bottom:10px;letter-spacing:.04em;
  text-transform:uppercase;
}
.pc2-title{
  font-size:clamp(26px,3vw,38px);font-weight:800;
  color:#111;letter-spacing:-.025em;
  margin:0 0 28px;line-height:1.1;
}
/* Pill tabs */
.pc2-pills{
  display:flex;gap:8px;flex-wrap:wrap;
}
.pc2-pill{
  padding:8px 18px;border-radius:999px;
  font-size:13px;font-weight:500;
  border:1.5px solid #E0E0E0;
  background:#F5F5F5;color:#555;
  cursor:pointer;transition:all .18s;
  white-space:nowrap;letter-spacing:.01em;
}
.pc2-pill:hover{background:#EBEBEB;color:#111;border-color:#CCC;}
.pc2-pill.active{background:#111;color:#fff;border-color:#111;}

/* ── KV Hero：wrapper 用 .container 对齐，图片铺满 wrapper ── */
.pc2-kv-section{padding-top:24px;}
.pc2-kv-wrap{
  width:100%;
  border-radius:14px;overflow:hidden;
  position:relative;
  /* height:460px; */
  background:#1A1A1A;
}
.pc2-kv{
  display:none;
  /* position:absolute; */
  inset:0;
}
.pc2-kv.active{display:block;}
.pc2-kv-img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.pc2-kv-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px 36px;
  background:linear-gradient(transparent,rgba(0,0,0,.62));
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;
}
.pc2-kv-text{flex:1;}
.pc2-kv-title{
  font-size:clamp(16px,1.7vw,22px);font-weight:700;
  color:#fff;margin:0 0 5px;letter-spacing:-.01em;
}
.pc2-kv-sub{
  font-size:13px;color:rgba(255,255,255,.78);
  margin:0;font-weight:400;
}
.pc2-kv-link{
  font-size:13px;color:#fff;white-space:nowrap;
  text-decoration:none;font-weight:600;
  display:flex;align-items:center;gap:4px;
  opacity:.88;transition:opacity .15s;flex-shrink:0;
}
.pc2-kv-link:hover{opacity:1;text-decoration:underline;}

/* ── Products area：同样用 .container 对齐 ── */
.pc2-products-area{
  padding-top:40px;
  /* padding-bottom:80px; */
}
.pc2-sec-label{
  font-size:15px;font-weight:700;color:#111;
  margin-bottom:20px;letter-spacing:-.01em;
}

/* ── Product Grid 4 列 ── */
.pc2-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

/* ── Product Card ── */
.pc2-card{
  background:#F4F5F7;
  border-radius:12px;overflow:hidden;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.25,.8,.25,1),box-shadow .22s;
  display:flex;flex-direction:column;
}
.pc2-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 36px rgba(0,0,0,.09);
}
.pc2-card-img-wrap{
  position:relative;
  aspect-ratio:1/1;
  background:#F4F5F7;
  display:flex;align-items:center;justify-content:center;
  padding:28px;
}
.pc2-card-img-wrap img{
  width:80%;height:80%;object-fit:contain;
  transition:transform .38s cubic-bezier(.25,.8,.25,1);
}
.pc2-card:hover .pc2-card-img-wrap img{transform:scale(1.06);}
/* Badge：右上角彩色文字标签 */
.pc2-card-badge{
  position:absolute;top:12px;right:12px;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--blue);text-transform: capitalize;
}
.pc2-card-badge.green{color:#059669;}
.pc2-card-badge.orange{color:#D97706;}
.pc2-card-badge.purple{color:#7C3AED;}
.pc2-card-badge.red{color:#DC2626;}
/* Card info 区域 */
.pc2-card-info{
  padding:16px 18px 20px;
  background:#fff;flex:1;
  display:flex;flex-direction:column;
  align-items:flex-start;
}
.pc2-card-name{
  font-size:14px;font-weight:700;color:#111;
  margin:0 0 5px;line-height:1.35;
  letter-spacing:-.01em;
}
.pc2-card-spec{
  font-size:11.5px;color:#6B7280;
  margin:0 0 16px;line-height:1.55;flex:1;
}
.pc2-card-actions{
  width:100%;display:flex;justify-content:flex-start;
}
.pc2-btn-primary{
  padding:8px 24px;border-radius:999px;
  background:transparent;color:#999;
  font-size:12px;font-weight:600;
  border:1.5px solid #E0E0E0;cursor:pointer;
  transition:background .22s, color .22s, border-color .22s;
  letter-spacing:.02em;
}
.pc2-card:hover .pc2-btn-primary{
  background:#111;color:#fff;border-color:#111;
}

/* ── Responsive ── */
@media(max-width:1200px){
  .pc2-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:860px){
  .pc2-kv-wrap{height:320px;border-radius:10px;}
  .pc2-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
}
@media(max-width:540px){
  .pc2-kv-wrap{height:220px;border-radius:8px;}
  .pc2-kv-title{font-size:15px;}
  .pc2-kv-overlay{padding:16px 18px;}
  .pc2-kv-sub{display:none;}
  .pc2-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .pc2-card-name{font-size:13px;}
  .pc2-card-spec{font-size:11px;}
}
.pch-main{display:contents}