/* Base */
:root{
--bg:#0b0b0c;
--card:#111114;
--text:#f3f4f6;
--muted:#a6adbb;
--accent:#ffffff;
--glow:0 0 0.5rem rgba(255,255,255,.35), 0 0 1rem rgba(255,255,255,.15);
--radius:14px;
}
html{scroll-behavior:smooth; overflow-x:hidden;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Montserrat,Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6; overflow-x:hidden;}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none}
.container{max-width:1325px;margin:0 auto;padding:0 20px}
/* Animated background (enabled, subtle and performant) */
.animated-bg{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-layer{position:absolute;inset:0;will-change:transform, opacity}
.bg-grid{display:none}
.bg-lines{display:none}
.bg-glow{z-index:1;opacity:.55}
.bg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:.02;mix-blend-mode:normal;background-size:160px 160px;background-repeat:repeat;background-image:url("data:image/svg+xml;utf8,")}
/* Multi-glow field with slow diagonal sweep */
.bg-glow{filter:blur(1.2px);background:
radial-gradient(800px 260px at 18% 8%, rgba(255,255,255,.07), transparent 70%),
radial-gradient(900px 320px at 82% 6%, rgba(255,255,255,.06), transparent 72%),
radial-gradient(700px 280px at 50% 92%, rgba(255,255,255,.05), transparent 70%);
animation:bgSweep 28s ease-in-out infinite alternate}
/* Disable moving glow layer site-wide */
.bg-glow{display:none}
@keyframes bgFloat{from{transform:translateY(0)}to{transform:translateY(70px)}}
@keyframes bgDrift{from{transform:translateX(0)}to{transform:translateX(-160px)}}
@keyframes bgSweep{from{transform:translate3d(-4%, -2%, 0)}to{transform:translate3d(4%, 2%, 0)}}
@media (prefers-reduced-motion: reduce){
.animated-bg .bg-layer{animation:none !important}
}
/* Header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(20,20,24,.60), rgba(20,20,24,.35));backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid rgba(255,255,255,.04);box-shadow:0 10px 30px rgba(0,0,0,.25);transition:box-shadow .3s, background .3s}
.site-header.scrolled{box-shadow:0 14px 36px rgba(0,0,0,.45);background:rgba(22,22,26,.55)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px;position:relative}
.logo img{max-width:215px;filter:drop-shadow(0 0 8px rgba(255,255,255,.2))}
.menu-toggle{display:none;align-items:center;gap:8px;background:transparent;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:10px;padding:8px 10px}
/* Hamburger icon */
.menu-toggle .hamburger{display:inline-block;width:18px;height:12px;position:relative}
.menu-toggle .hamburger::before,.menu-toggle .hamburger::after,.menu-toggle .hamburger .bar{content:"";position:absolute;left:0;right:0;height:2px;background:#fff;opacity:.9;border-radius:2px}
.menu-toggle .hamburger::before{top:0}
.menu-toggle .hamburger::after{bottom:0}
.menu-toggle .hamburger .bar{top:50%;transform:translateY(-50%)}
.menu-toggle .menu-text{font-size:14px}
.nav{display:flex;gap:12px;align-items:center;justify-content:center;position:absolute;left:50%;transform:translateX(-50%)}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-link{position:relative;padding:8px 10px;border-radius:10px;transition:color .25s ease, text-shadow .25s ease;opacity:.9;font-size:14px}
/* Remove underline under nav links */
.nav-link::after{display:none}
.nav-link:hover{opacity:1;color:#fff;text-shadow:0 0 4px rgba(255,255,255,.18)}
/* Ensure no underline appears on hover/active */
.nav-link:hover::after{display:none}
.nav-link.active{opacity:1;color:#fff;font-weight:550}
.nav .has-dropdown.active > .nav-link{opacity:1;color:#fff;font-weight:550}
.nav-link.active::after{display:none}
.nav-item{position:relative}
.nav-item .nav-parent{background:transparent;border:none;color:inherit;font:inherit;cursor:pointer;font-size:14px;padding:8px 10px}
/* Chevron icon (uses mask so it inherits currentColor) */
.nav-item .nav-parent.nav-link::after{display:inline-block}
.nav-item .nav-parent::after{content:"";display:inline-block;width:10px;height:10px;margin-left:8px;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;transform:rotate(90deg);transition:transform .2s ease, color .2s ease;opacity:.9;position:static}
.has-dropdown.open > .nav-parent::after{transform:rotate(-90deg)}
/* Two-column dropdown with up to 4 rows per column; new column after 4 */
.has-dropdown .dropdown{position:absolute;top:100%;left:0;min-width:180px;width:max-content;background:rgba(15,15,18,.98);border:1px solid rgba(255,255,255,.08);border-radius:0;padding:6px;margin-top:6px;display:none;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:40;grid-auto-flow:row;grid-template-columns:1fr;grid-auto-rows:auto;gap:2px 8px}
.has-dropdown.open .dropdown{display:grid}
.has-dropdown .dropdown.wide{grid-auto-flow:column;grid-template-rows:repeat(4,auto);grid-auto-columns:minmax(140px,1fr);grid-template-columns:none;width:auto}
.has-dropdown .dropdown.adapters-dropdown.wide{grid-auto-flow:column;grid-template-rows:repeat(5,auto);grid-auto-columns:minmax(140px,1fr);grid-template-columns:none;width:auto}
.dropdown-link{padding:6px 10px;border-radius:0;color:var(--text);font-size:13px}
.dropdown-link:hover{background:transparent;color:#fff;text-shadow:0 0 4px rgba(255,255,255,.18)}
/* Vertical divider for two-column header dropdowns (desktop only) */
@media (min-width: 961px){
.has-dropdown .dropdown.wide::before{
content:"";position:absolute;top:6px;bottom:6px;left:50%;width:1px;
background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
pointer-events:none
}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0;background:#18181b;color:var(--text);border:1px solid rgba(255,255,255,.12);padding:10px 16px;border-radius:12px;transition:.25s;text-align:center;position:relative;cursor:pointer}
.btn i{margin-right:8px}
.btn.icon-left{padding-left:16px}
.btn.icon-left i{position:static;margin-right:8px}
.btn:hover{box-shadow:var(--glow);transform:translateY(-1px)}
.btn.cta{background:linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(220, 220, 220, 0.1));border-color:rgba(192, 192, 192, 0.4);color:#e0e0e0;position:relative;overflow:hidden;text-align:center;align-items: center;display: flex;justify-content: center;transition: all 0.3s ease;}
.btn.cta:before{content:"";position:absolute;inset:-2px;background:linear-gradient(90deg, rgba(192, 192, 192, 0), rgba(192, 192, 192, 0.4), rgba(192, 192, 192, 0));transform:translateX(-100%);transition:transform .6s ease}
.btn.cta:hover{background:linear-gradient(135deg, rgba(192, 192, 192, 0.25), rgba(220, 220, 220, 0.2));border-color:rgba(192, 192, 192, 0.6);color:#f0f0f0;transform:translateY(-2px);box-shadow:0 8px 20px rgba(192, 192, 192, 0.3);}
.btn.cta:hover:before{transform:translateX(100%)}
/* Language selector alignment next to CTA */
.lang-select{margin-right:0}
.lang-select .dropdown{min-width:140px}
.lang-select .label-short{display:none}
/* Header CTA button - smaller size */
.header-actions .btn.cta{padding:10px 16px;font-size:15px}
/* Hero */
.hero{padding:120px 0;background:#0b0b0c;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;top:0;left:-20%;right:-20%;bottom:0;background:transparent;animation:heroSweep 16s ease-in-out infinite alternate;pointer-events:none;mix-blend-mode:screen}
@keyframes heroSweep{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.hero:after{content:"";position:absolute;inset:0;background:transparent;pointer-events:none}
.hero h1{font-size:42px;line-height:1.2;margin:0 0 10px;color:var(--text)}
.text-silver-gradient{background:linear-gradient(135deg, #b8b8b8, #9a9a9a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#b8b8b8}
.hero p{color:var(--muted);max-width:800px}
.hero .actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
/* Hero two-column layout */
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.hero-col{min-width:0}
@media (max-width: 960px){
.hero-grid{grid-template-columns:1fr}
}
/* Hero media rotator */
.hero-media{width:100%;aspect-ratio:16/9;background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;position:relative;box-shadow:0 14px 36px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04)}
.hero-media:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,.35) 100%)}
.hero-media:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;border-radius:inherit;background:linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 60%);opacity:.12;filter:blur(8px);transform:translate3d(-20%, -20%, 0);animation:mediaSweepDiag 14s linear infinite;mix-blend-mode:screen;pointer-events:none;will-change:transform;z-index:3}
@keyframes mediaSweepDiag{from{transform:translate3d(-20%, -20%, 0)}to{transform:translate3d(20%, 20%, 0)}}
@keyframes mediaSweepDiag2{from{transform:translate3d(-25%, -25%, 0)}to{transform:translate3d(25%, 25%, 0)}}
.hero-media-stage{position:absolute;inset:0;z-index:1}
.hero-media-stage > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
/* Make homepage hero media taller on desktop/tablet */
.page-home .hero-media{aspect-ratio:1/1}
@media (max-width: 760px){
.page-home .hero-media{aspect-ratio:1/1}
}
/* Tighten homepage hero spacing and gap to carousel */
.page-home .hero{padding:40px 0 40px}
.page-home .logo-carousel{padding-top:24px;padding-bottom:30px}
/* Homepage hero: remove frame and softly blend media into background */
.page-home .hero-media{background:transparent;border:none;box-shadow:none;overflow:hidden;border-radius:32px;padding:1px}
.page-home .hero-media-stage{inset:1px;border-radius:inherit;overflow:hidden}
.page-home .hero-media:before{display:none}
.page-home .hero-media-stage > *{
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* Homepage-specific hero with black background */
.home .hero{background:#000000}
.home .hero:after{background:#000000}
/* New: Background-style hero with bottom overlay text */
.hero-bg{padding:0; min-height:80vh; background:#000000; width:100vw; position:relative; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); left:0; right:0;}
.hero-bg .hero-bg-stage{position:absolute;inset:0;z-index:1; width:100%; height:100%;}
.hero-bg .hero-bg-stage > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.hero-bg .hero-overlay{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:center;min-height:80vh;padding:28px 20px; width:100%; padding-top:25vh;}
.hero-bg .hero-overlay-inner{background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.72));padding:18px 18px 22px;border-radius:14px;text-align:center; max-width:1200px; margin:0 auto;}
@media (max-width: 768px){
.hero-bg .hero-overlay{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:center;min-height:60vh;padding:28px 20px; width:100%; padding-top:10vh;}
}
/* Ensure hero-bg breaks out of any container constraints */
.hero-bg{transform:translateX(0);}
/* Remove body padding since we're not using fixed positioning */
body.page-home{padding-top:0;}
.hero-bg .hero-overlay-inner .pill,
.hero-bg .hero-overlay-inner h1,
.hero-bg .hero-overlay-inner p.muted{transition:opacity .9s ease}
.hero-bg .hero-overlay-inner h1{margin:6px 0 6px}
.hero-bg .actions{margin-top:10px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hero-bg .actions .nav-link{display:inline-flex;align-items:center;padding:10px 16px;border-radius:12px;line-height:1;border:1px solid transparent}
/* Keep full video height, crop sides if needed; favor top alignment */
.hero-bg .hero-bg-stage{position:absolute;inset:0;overflow:hidden}
.hero-bg .hero-bg-stage video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover}
/* 404 page specific styling */
.page-404 .hero p{text-align:center !important}
/* Sections */
section{padding:64px 0;border-top:1px solid rgba(255,255,255,.06)}
section .section-title{font-size:28px;margin:0 0 24px;text-align:center}
/* Directional gradients per home section for flowing contrast */
.page-home #features{ /* dark → lighter */
background:
linear-gradient(180deg,
rgba(0,0,0,.28) 0%,
rgba(0,0,0,.265) 10%,
rgba(0,0,0,.25) 20%,
rgba(0,0,0,.22) 30%,
rgba(0,0,0,.18) 40%,
rgba(0,0,0,.145) 50%,
rgba(0,0,0,.12) 60%,
rgba(0,0,0,.10) 70%,
rgba(0,0,0,.07) 80%,
rgba(0,0,0,.05) 90%,
rgba(0,0,0,.03) 100%
),
radial-gradient(1100px 360px at 50% 110%, rgba(255,255,255,.05), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
.page-home #models{ /* lighter → dark */
background:
linear-gradient(180deg,
rgba(0,0,0,.03) 0%,
rgba(0,0,0,.045) 10%,
rgba(0,0,0,.06) 20%,
rgba(0,0,0,.09) 30%,
rgba(0,0,0,.12) 40%,
rgba(0,0,0,.14) 50%,
rgba(0,0,0,.16) 60%,
rgba(0,0,0,.20) 70%,
rgba(0,0,0,.24) 85%,
rgba(0,0,0,.28) 100%
),
radial-gradient(1100px 360px at 50% -12%, rgba(255,255,255,.05), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
.page-home #testimonials{ /* dark → lighter */
background:
linear-gradient(180deg,
rgba(0,0,0,.28) 0%,
rgba(0,0,0,.265) 10%,
rgba(0,0,0,.25) 20%,
rgba(0,0,0,.22) 30%,
rgba(0,0,0,.18) 40%,
rgba(0,0,0,.145) 50%,
rgba(0,0,0,.12) 60%,
rgba(0,0,0,.10) 70%,
rgba(0,0,0,.07) 80%,
rgba(0,0,0,.05) 90%,
rgba(0,0,0,.03) 100%
),
radial-gradient(1100px 360px at 50% 110%, rgba(255,255,255,.05), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
.page-home #learn-more{ /* lighter → dark */
background:
linear-gradient(180deg,
rgba(0,0,0,.03) 0%,
rgba(0,0,0,.045) 10%,
rgba(0,0,0,.06) 20%,
rgba(0,0,0,.09) 30%,
rgba(0,0,0,.12) 40%,
rgba(0,0,0,.14) 50%,
rgba(0,0,0,.16) 60%,
rgba(0,0,0,.20) 70%,
rgba(0,0,0,.24) 85%,
rgba(0,0,0,.28) 100%
),
radial-gradient(1100px 360px at 50% -12%, rgba(255,255,255,.05), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
/* OKLCH gradients for smoother tone transitions (with fallback above) */
@supports (color: oklch(50% 0 0)){
.hero{
background:
linear-gradient(180deg,
oklch(16% 0 0) 0%,
oklch(15.6% 0 0) 10%,
oklch(15.2% 0 0) 20%,
oklch(14.8% 0 0) 30%,
oklch(14.4% 0 0) 40%,
oklch(14.0% 0 0) 50%,
oklch(13.6% 0 0) 60%,
oklch(13.2% 0 0) 70%,
oklch(12.6% 0 0) 85%,
oklch(12% 0 0) 100%
),
radial-gradient(1000px 400px at 50% -10%, color-mix(in oklch, white 6%, transparent), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
.page-home #features{
background:
linear-gradient(180deg,
oklch(12% 0 0) 0%,
oklch(12.8% 0 0) 25%,
oklch(13.6% 0 0) 50%,
oklch(14.3% 0 0) 75%,
oklch(15% 0 0 / 0) 100%
),
radial-gradient(1100px 360px at 50% 110%, color-mix(in oklch, white 5%, transparent), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
.page-home #models{
background:
linear-gradient(180deg,
oklch(15% 0 0 / 0) 0%,
oklch(14.3% 0 0) 25%,
oklch(13.6% 0 0) 50%,
oklch(12.8% 0 0) 75%,
oklch(12% 0 0) 100%
),
radial-gradient(1100px 360px at 50% -12%, color-mix(in oklch, white 5%, transparent), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
.page-home #testimonials{
background:
linear-gradient(180deg,
oklch(12% 0 0) 0%,
oklch(12.8% 0 0) 25%,
oklch(13.6% 0 0) 50%,
oklch(14.3% 0 0) 75%,
oklch(15% 0 0 / 0) 100%
),
radial-gradient(1100px 360px at 50% 110%, color-mix(in oklch, white 5%, transparent), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
.page-home #learn-more{
background:
linear-gradient(180deg,
oklch(15% 0 0 / 0) 0%,
oklch(14.3% 0 0) 25%,
oklch(13.6% 0 0) 50%,
oklch(12.8% 0 0) 75%,
oklch(12% 0 0) 100%
),
radial-gradient(1100px 360px at 50% -12%, color-mix(in oklch, white 5%, transparent), transparent),
url("data:image/svg+xml;utf8,");
background-repeat:no-repeat,no-repeat,repeat;
background-size:auto,auto,128px 128px;
}
}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.product-card .product-media{width:100%;aspect-ratio:4/3;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:8px 0;position:relative}
.product-card .product-media img{width:85%;height:auto;object-fit:contain;transition:transform .25s ease;will-change:transform;position:relative;z-index:1}
.product-card h3{margin:4px 0 6px;font-size:18px}
.page-models .product-card h3{font-size:16px}
.page-models .product-card p{display:none}
.product-card .product-thumb{width:100%;height:54px;border:none;border-radius:10px;background:transparent;display:flex;align-items:center;justify-content:center}
.product-card .product-thumb img{max-height:52px;width:auto;object-fit:contain}
/* Models page: remove frame and spacing around main image; round only the image */
.page-models .product-card .product-media{background:transparent;border:none;border-radius:0;display:block;margin:2px 0 0;overflow:visible}
.page-models .product-card .product-media img{width:100%;height:auto;object-fit:cover;border-radius:12px;transition:transform .25s ease;will-change:transform}
/* Under-image light glow for models */
.page-models .product-card .product-media{position:relative}
.page-models .product-card .product-media img{position:relative;z-index:1}
.home-model-media{position:relative;margin:8px 0}
.home-model-media img{position:relative;z-index:1;width:100%;height:auto;object-fit:contain}
.home-model-media::after{content:none}
.page-models .product-card .product-media::after{content:none}
/* Models: enlarge product-thumb and keep separator straight */
.page-models .product-card .product-thumb{height:68px;border-radius:0}
.page-models .product-card .product-thumb img{max-height:64px}
/* Models page: plain hero media (no frame, no sheen, no crossfade) */
/* .page-models .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
@media (max-width: 960px){.page-models .hero-grid{grid-template-columns:1fr}}
.page-models .hero-media-stage > *{opacity:1;transition:none;object-fit:cover} */
/* More information link */
.more-link{display:inline-block;margin-top:8px;color:var(--muted);opacity:.9;padding:0 0;border:none;border-radius:0;transition:all .3s ease}
.more-link:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;transform:translateY(-1px);}
/* Home page models section: center and enlarge the CTA link */
#models .more-link{display:block;margin:28px auto 0;font-size:18px;text-align:center}
/* Home: reduce space under the Models section CTA */
.page-home #models{padding-bottom:36px}
/* Divider between main image and thumbnail on models */
.page-models .product-media + .product-thumb{border-top:1px solid rgba(255,255,255,.10);margin-top:6px;padding-top:10px;padding-bottom: 4px;}
/* Center content in models cards */
.page-models .product-card{ text-align:center }
.page-models .more-link{ display:inline-block; margin:8px auto 0 }
.page-accessories .product-card .product-media{background:transparent;border:none;border-radius:0;display:block;margin:6px 0;overflow:visible}
.page-accessories .product-card .product-media img{width:100%;height:auto;object-fit:cover;border-radius:12px;transition:transform .25s ease;will-change:transform}
/* Center content in accessories cards */
.page-accessories .product-card{ text-align:center }
/* Under-image light glow for accessories */
.page-accessories .product-card .product-media{position:relative}
.page-accessories .product-card .product-media img{position:relative;z-index:1}
.page-accessories .product-card .product-media::after{content:none}
/* Professional background glow behind product images */
.product-card .product-media::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;height:58%;border-radius:40%;pointer-events:none;z-index:0;
background:radial-gradient(ellipse at center,
rgba(255,255,255,.18) 0%,
rgba(255,255,255,.10) 35%,
rgba(255,255,255,.04) 65%,
rgba(255,255,255,0) 100%);
filter:blur(10px);opacity:.9
}
.product-card:hover .product-media::before{opacity:1}
/* Filter tabs */
.filter-bar{position:sticky;top:70px;z-index:40;background:linear-gradient(180deg, rgba(20,20,24,.45), rgba(20,20,24,.25));backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid rgba(255,255,255,.05)}
.filter-inner{display:flex;align-items:stretch;justify-content:space-between;gap:10px;padding:6px 0}
.filter-tabs{flex:1;display:flex;flex-wrap:wrap;gap:0;justify-content:center;align-items:center}
.filter-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;flex:1 1 0;min-width:120px;height:40px;padding:0 12px;border-radius:0;background:transparent;border:none;color:var(--text);font-family:Montserrat,Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;font-size:13.5px;font-weight:400;line-height:1.25;cursor:pointer;transition:background .2s, color .2s;white-space:nowrap;max-width:none}
.filter-tab + .filter-tab{border-left:1px solid rgba(255,255,255,.12)}
.filter-tab:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);opacity:.0;transform:translateX(-20%);transition:opacity .35s, transform .35s;mix-blend-mode:screen;pointer-events:none}
.filter-tab:hover{background:rgba(255,255,255,.04)}
.filter-tab:hover:before{opacity:.18;transform:translateX(0)}
.filter-tab.active{background:rgba(255,255,255,.075); color:var(--text); box-shadow:0 0 0 1px rgba(255,255,255,.16) inset, 0 0 22px rgba(255,255,255,.06); font-weight:500}
.filter-tab.active:before{opacity:.26}
.filter-clear{margin-left:auto}
/* Utility */
.hidden{display:none !important}
/* Spacing between product group containers */
[data-group-container] + [data-group-container]{margin-top:28px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:22px;transition:transform .2s ease, box-shadow .2s ease;position:relative;overflow:hidden;will-change:transform;transform-origin:center}
.card:hover{box-shadow:var(--glow);transform:scale(1.02)}
.card:focus-within{box-shadow:var(--glow);transform:scale(1.02)}
/* Card headings - normal styling */
.card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--text);
}
.reveal{opacity:0;transform:translateY(20px) scale(.98);transform-origin:center bottom;transition:opacity .4s cubic-bezier(.25,.46,.45,.94) var(--delay,0ms), transform .4s cubic-bezier(.25,.46,.45,.94) var(--delay,0ms);will-change:opacity, transform}
.page-models .reveal,.page-accessories .reveal{transition-duration:.2s}
.page-models .product-grid .reveal,.page-accessories .product-grid .reveal{transition-duration:.18s}
/* Enable lightweight reveals on product cards (short duration, no stagger) */
.reveal.in{opacity:1;transform:none}
/* Remove reveal delay on hover so enlarge effect is instant */
.reveal:hover{transition-delay:0ms !important}
/* Disable hover effects for text elements with reveal class */
h1.reveal:hover, h2.reveal:hover, h3.reveal:hover, h4.reveal:hover, h5.reveal:hover, h6.reveal:hover,
p.reveal:hover, span.reveal:hover, .muted.reveal:hover, .section-title.reveal:hover, .section-subtitle.reveal:hover,
.pill.reveal:hover, .actions.reveal:hover{transform:none !important; box-shadow:inherit !important}
/* Ensure hover scale wins over reveal transforms for cards */
.card.reveal:hover,.reveal.card:hover,.reveal.in:hover{transform:scale(1.02)}
/* Special delay for hero section to prevent twitching during page load */
#hero .reveal{--delay:300ms}
#hero h1.reveal{--delay:400ms}
#hero p.reveal{--delay:500ms}
#hero .actions.reveal{--delay:600ms}
/* Disable hover effects on Contact and Decoder pages */
.page-contact .card:hover,
.page-contact .card:focus-within,
.page-contact .card.reveal:hover,
.page-contact .reveal.card:hover,
.page-contact .reveal.in:hover,
.page-decoder .card:hover,
.page-decoder .card:focus-within,
.page-decoder .card.reveal:hover,
.page-decoder .reveal.card:hover,
.page-decoder .reveal.in:hover {
transform: none;
}
.page-models .product-card:hover .product-media img,.page-accessories .product-card:hover .product-media img{transform:translateY(-8px) scale(1.03)}
.muted{color:var(--muted)}
/* Gradient text: silver → grey (tasteful, subtle) */
.text-silver-gradient{
/* Fallback solid color */
color:#e8eef5;
display:inline-block;
background-image:linear-gradient(90deg,
#8a9097 0%,
#a6acb3 12%,
#d5dbe2 24%,
#ffffff 36%,
#e2e8ef 50%,
#fbfdff 64%,
#e6ecf3 76%,
#c1c7ce 88%,
#8e949b 100%
);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
/* subtle depth to enhance metallic feel on dark bg */
text-shadow:0 1px 1px rgba(0,0,0,.28)
}
/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.site-footer h4{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--text);margin-top:0px}
.site-footer p{font-size:13.5px;line-height:1.4;color:var(--muted)}
.footer-grid{display:grid;gap:18px;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;padding:48px 0;align-items:start}
.footer-logo{height:35px;margin-bottom:10px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:6px 0}
.footer-links a{color:var(--muted);font-size:13px;line-height:1.3}
.footer-links a:hover{color:var(--text);text-shadow:0 0 4px rgba(255,255,255,.18)}
.footer-contact a{color:var(--text);text-decoration:none;font-size:13px;line-height:1.4}
.footer-contact a:hover{text-decoration:underline;text-underline-offset:3px}
.contact-info{position:relative;overflow:hidden;text-align:center}
.contact-info:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, rgba(192,192,192,0.3), rgba(220,220,220,0.1), rgba(192,192,192,0.3))}
.contact-info a{color:var(--text);text-decoration:none;transition:color 0.3s ease}
.contact-info a:hover{color:rgba(192,192,192,0.8);text-decoration:underline;text-underline-offset:3px}
.contact-brand{height:40px;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.contact-separator{height:1px;background:linear-gradient(90deg, transparent, rgba(192,192,192,0.3), transparent);margin:20px 0;width:100%}
.company-info-header{font-size:14px;font-weight:500;color:rgba(192,192,192,0.8);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.contact-info h3{margin:8px 0 12px;font-size:18px;font-weight:600;color:var(--text);position:relative}
.contact-item{display:flex;align-items:center;gap:0.75rem;margin:8px 0;padding:4px 0;transition:all 0.3s ease;justify-content:center}
.contact-item:hover{padding-left:8px;background:rgba(255,255,255,0.02);border-radius:4px;margin-left:-4px;margin-right:-4px;padding-right:4px}
.contact-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(192,192,192,0.1), rgba(220,220,220,0.05));border-radius:6px;color:var(--text);transition:all 0.3s ease}
.contact-item:hover .contact-icon{background:linear-gradient(135deg, rgba(192,192,192,0.2), rgba(220,220,220,0.1));transform:scale(1.05)}
.contact-item p{margin:0;flex:1;text-align:left}
.contact-item-centered{display:flex;align-items:center;gap:0.75rem;margin:6px 0;padding:4px 0;transition:all 0.3s ease;justify-content:center}
.contact-item-centered:hover{padding-left:8px;background:rgba(255,255,255,0.02);border-radius:4px;margin-left:-4px;margin-right:-4px;padding-right:4px}
.contact-item-centered:hover .contact-icon{background:linear-gradient(135deg, rgba(192,192,192,0.2), rgba(220,220,220,0.1));transform:scale(1.05)}
.contact-item-centered p{margin:0;text-align:center}
.socials{display:flex;gap:12px;margin-top:8px}
.icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.1);color:var(--text);text-decoration:none;transition:all 0.3s ease}
.icon:hover{box-shadow:var(--glow);color:var(--text);transform:translateY(-2px)}
.icon i{font-size:16px}
.footer-bottom{
padding: 12px 0;
border-top: 1px solid rgba(255,255,255,.06);
color: var(--muted);
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.powered-by-logo{
height: 30px;
width: auto;
opacity: 0.15;
transition: opacity 0.3s ease;
}
.footer-bottom a:hover .powered-by-logo{
opacity: 1;
}
/* PDF Viewer */
.pdf-viewer-container{
margin: 40px 0;
background: var(--card);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.pdf-viewer-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: white;
}
.pdf-viewer-header h3{
margin: 0;
font-size: 18px;
font-weight: 600;
}
.btn-download{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255,255,255,0.2);
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.3);
}
.btn-download:hover{
background: rgba(255,255,255,0.3);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.btn-download svg{
width: 16px;
height: 16px;
}
.pdf-viewer{
position: relative;
background: white;
}
.pdf-container{
position: relative;
background: var(--card);
overflow-y: auto;
max-height: 100vh;
padding: 20px;
}
.pdf-pages{
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.pdf-page{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.pdf-page canvas{
max-width: 100%;
height: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-radius: 4px;
}
.pdf-loading{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
z-index: 10;
}
.spinner{
width: 32px;
height: 32px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.pdf-loading p{
margin: 0;
font-size: 14px;
color: var(--text);
}
@media (max-width: 768px){
.pdf-viewer-header{
flex-direction: column;
gap: 16px;
text-align: center;
}
.pdf-viewer-header h3{
font-size: 16px;
}
.pdf-container{
max-height: 400px;
padding: 10px;
}
.pdf-pages{
gap: 15px;
}
.pdf-page canvas{
max-width: 100%;
}
}
/* Components */
.logo-carousel{padding-top:26px}
/* Section styling */
.section-accent{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.section-header{text-align:center;margin-bottom:3rem}
.section-header .section-title{margin-bottom:1rem}
.section-subtitle{color:var(--muted);font-size:16px;line-height:1.5;max-width:600px;margin:0 auto}
.section-cta{text-align:center;margin-top:3rem}
/* Homepage section spacing */
.page-home section{padding:6rem 0}
.page-home #hero{padding:4rem 0 6rem}
.page-home #features{padding:6rem 0}
.page-home #models{padding:4rem 0}
.page-home #accessories{padding:5rem 0}
.page-home #resources{padding:5rem 0}
.page-home #testimonials{padding:5rem 0}
.page-home #cta{padding:6rem 0}
.section-accent .section-cta .btn.cta{padding:0.875rem 2rem;font-size:15px;max-width:280px;margin:0 auto}
/* Accessories Grid */
.accessories-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));gap:2rem;margin-bottom:2.5rem}
/* Pinouts Grid - 3 columns */
.pinouts-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem;margin-bottom:2.5rem}
.pinout-card{display:block;text-decoration:none;color:inherit;transition:all 0.3s ease;position:relative;overflow:visible;background:white;border:1px solid #e5e5e5;border-radius:12px;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px rgba(0,0,0,0.05)}
.pinout-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:12px;background:radial-gradient(ellipse at center, transparent 93%, rgba(0,0,0,0.03) 95%, rgba(0,0,0,0.06) 100%);pointer-events:none;z-index:1}
.pinout-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.4);text-decoration:none;color:inherit}
.pinout-card h3{margin:0 0 0.5rem;font-size:17px;font-weight:600;color:var(--card);text-align:center;position:relative;z-index:2}
.pinout-spec{font-size:12px;color:rgba(0,0,0,0.6);margin:0 0 1rem;padding:0;text-align:center;font-family:var(--font-mono);position:relative;z-index:2}
.pinout-media{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:visible;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.pinout-media img{width:100%;height:auto;object-fit:cover;transition:transform .25s ease;will-change:transform;position:relative;z-index:10}
.pinout-card:hover .pinout-media img{transform:translateY(-8px) scale(1.03)}
/* Responsive pinouts grid */
@media (max-width: 960px){
.pinouts-grid{grid-template-columns:repeat(2, 1fr);gap:1.25rem}
}
@media (max-width: 640px){
.pinouts-grid{grid-template-columns:1fr;gap:1rem}
.pinout-card h3{font-size:15px}
}
.accessory-item{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;transition:all 0.3s ease;position:relative;overflow:hidden}
.accessory-item:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, rgba(192,192,192,0.3), transparent)}
.accessory-item:hover{background:rgba(255,255,255,.04);border-color:rgba(192,192,192,0.2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.accessory-icon{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(192,192,192,0.1), rgba(220,220,220,0.05));border-radius:10px;border:1px solid rgba(192,192,192,0.2);color:var(--text)}
.accessory-content{flex:1;min-width:0}
.accessory-content h3{margin:0 0 0.5rem;font-size:16px;font-weight:600;color:var(--text)}
.accessory-content p{margin:0;font-size:14px;color:var(--muted);line-height:1.4}
.accessory-link{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(192,192,192,0.1);border-radius:6px;color:var(--muted);transition:all 0.3s ease;text-decoration:none}
.accessory-link:hover{background:rgba(192,192,192,0.2);color:var(--text);transform:scale(1.1)}
/* Resources List - Minimalist Style */
.section-minimal{background:transparent;border:none}
.resources-list{max-width:900px;margin:0 auto}
.resource-row{display:flex;align-items:center;justify-content:space-between;padding:2rem 0;border-bottom:1px solid rgba(255,255,255,.06);transition:all 0.3s ease;position:relative;border-radius:8px;margin:0 -1rem;padding-left:1rem;padding-right:1rem}
.resource-row:hover{background:rgba(255,255,255,0.02);border-color:rgba(192,192,192,0.2);transform:translateX(4px);margin:0 -2rem;padding-left:2rem;padding-right:2rem}
.resource-row:last-child{border-bottom:none}
.resource-info{display:flex;align-items:center;gap:1.25rem;flex:1;min-width:0}
.resource-icon-minimal{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(192,192,192,0.05);border-radius:10px;border:1px solid rgba(192,192,192,0.1);color:var(--text);transition:all 0.3s ease}
.resource-row:hover .resource-icon-minimal{background:rgba(192,192,192,0.15);border-color:rgba(192,192,192,0.3);transform:scale(1.1)}
.resource-text{flex:1;min-width:0}
.resource-text h3{margin:0 0 0.5rem;font-size:17px;font-weight:600;color:var(--text)}
.resource-text p{margin:0;font-size:15px;color:var(--muted);line-height:1.4}
.resource-btn{flex-shrink:0;display:flex;align-items:center;gap:0.5rem;padding:0.875rem 1.25rem;background:rgba(192,192,192,0.08);border:1px solid rgba(192,192,192,0.15);border-radius:8px;color:var(--text);text-decoration:none;font-size:15px;font-weight:500;transition:all 0.3s ease;white-space:nowrap;min-width:130px;justify-content:center;position:relative;overflow:hidden}
.resource-btn:hover{background:rgba(192,192,192,0.25);border-color:rgba(192,192,192,0.4);transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px rgba(192,192,192,0.3), 0 4px 12px rgba(0,0,0,0.3);color:var(--text)}
.resource-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);transition:left 0.6s ease;z-index:1}
.resource-btn:hover:before{left:100%}
.resource-btn svg{transition:transform 0.3s ease;position:relative;z-index:2}
.resource-btn:hover svg{transform:translateX(3px) scale(1.1)}
.resource-btn span{position:relative;z-index:2}
/* Card icons (legacy) */
.card-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 16px;background:linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(220, 220, 220, 0.05));border-radius:16px;border:1px solid rgba(192, 192, 192, 0.2);color:var(--text);transition:all 0.3s ease}
.card:hover .card-icon{background:linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(220, 220, 220, 0.1));border-color:rgba(192, 192, 192, 0.3);transform:scale(1.05)}
/* Text center utility */
.text-center{text-align:center}
.logo-carousel-viewport{position:relative;overflow:hidden;border:none;border-radius:14px;background:transparent;padding:10px;-webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 70px, rgba(0,0,0,1) calc(100% - 70px), rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 70px, rgba(0,0,0,1) calc(100% - 70px), rgba(0,0,0,0) 100%)}
.logo-carousel .section-title{margin-bottom:10px}
.logo-carousel-viewport{padding-top:8px}
.logo-track{display:flex;gap:48px;align-items:center;white-space:nowrap;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.logo-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;opacity:.9;transition:opacity .2s ease}
.logo-item:hover{opacity:1}
.logo-item img{height:64px;width:auto;filter:grayscale(100%);opacity:.9;transition:filter .25s ease, opacity .25s ease}
.logo-item:hover img,.logo-item.is-centered img{filter:none;opacity:1}
.logo-item .logo-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:180px;text-align:center}
.logo-card .country-name{font-weight:600;letter-spacing:.01em}
.logo-card .country-count{color:var(--muted);font-size:14px}
.logo-mask{display:none}
@keyframes logo-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Subpage gallery placeholders */
.gallery-placeholder{display:flex;flex-direction:column;gap:12px}
.gallery-placeholder .img-ph{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#fff}
@keyframes ph-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
/* Subpage image stack */
.subpage-gallery{display:flex;flex-direction:column;gap:12px}
.subpage-gallery .subpage-img{background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);padding:8px}
.subpage-gallery .subpage-img img{width:100%;height:auto;object-fit:contain;background:#fff}
/* Resellers grid */
.reseller-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reseller-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.reseller-head{display:flex;align-items:center;justify-content:center;gap:12px;position:relative;padding:16px}
.reseller-head:before{content:"";position:absolute;inset:8px;border-radius:16px;background:rgba(255,255,255,.9);pointer-events:none}
.reseller-flag{font-weight:600;color:#ff6}
.reseller-logo{height:84px;max-width:220px;object-fit:contain;filter:grayscale(10%)}
.reseller-title{font-weight:700;margin:0}
.reseller-meta{font-size:14px;color:var(--muted);line-height:1.5}
.reseller-links a{color:var(--text);text-decoration:none}
.reseller-links a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width: 960px){.reseller-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.reseller-grid{grid-template-columns:1fr}}
/* Center last orphan in 3-col grid */
.reseller-grid > .reseller-card:last-child:nth-child(3n+1){grid-column:2}
#faq .card:hover{box-shadow:var(--glow);transform:scale(1.005)}
.faq-item{border-bottom:1px solid rgba(255,255,255,.08);padding:12px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
/* Replace text arrows with chevron mask */
.faq-q:after{content:"";margin-left:12px;color:var(--muted);transition:transform .25s ease,color .25s;display:inline-block;width:12px;height:12px;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;transform:rotate(90deg)}
.faq-item.active .faq-q:after{transform:rotate(-90deg);color:var(--text)}
.faq-a{max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;color:var(--muted);transition:max-height .35s ease,padding .35s ease}
.faq-item.active .faq-a{padding-top:6px;padding-bottom:6px}
.slider{position:relative;overflow:hidden}
.slides{display:flex;transition:transform .5s ease}
.slide{min-width:100%;padding:20px}
/* Alternating media rows */
.feature-rows{padding:24px 0}
.feature-row{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;margin:28px 0}
.feature-row .feature-media,.feature-row .feature-content{align-self:center}
.feature-row{position:relative}
.feature-rows .feature-row + .feature-row{border-top:1px solid rgba(255,255,255,.12);padding-top:28px;margin-top:40px}
.feature-rows .feature-row + .feature-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));pointer-events:none}
.feature-media{position:relative;border-radius:16px;overflow:hidden}
.feature-media .frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.feature-media .frame img{width:100%;height:100%;object-fit:cover}
.feature-content h3{margin:0 0 8px}
.feature-content p{margin:0;color:var(--muted)}
@media (max-width: 960px){.feature-row{grid-template-columns:1fr}}
/* Testimonials Carousel */
.testimonials-wrapper {
overflow: hidden;
position: relative;
width: 100vw;
max-width: none;
margin: 2rem calc(50% - 50vw);
}
.testimonials-carousel {
overflow: visible;
margin: 0;
position: relative;
padding: 20px 0;
}
.testimonials-carousel::before,
.testimonials-carousel::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 80px;
z-index: 10;
pointer-events: none;
}
/* .testimonials-carousel-top::before {
left: 0;
background: linear-gradient(to right, var(--bg) 0%, var(--bg) 20%, rgba(0,0,0,0.3) 60%, transparent 100%);
}
.testimonials-carousel-top::after {
right: 0;
background: linear-gradient(to left, var(--bg) 0%, var(--bg) 20%, rgba(0,0,0,0.3) 60%, transparent 100%);
}
.testimonials-carousel-bottom::before {
left: 0;
background: linear-gradient(to right, var(--bg) 0%, var(--bg) 20%, rgba(0,0,0,0.3) 60%, transparent 100%);
}
.testimonials-carousel-bottom::after {
right: 0;
background: linear-gradient(to left, var(--bg) 0%, var(--bg) 20%, rgba(0,0,0,0.3) 60%, transparent 100%);
} */
.testimonials-track {
display: flex;
gap: 1.5rem;
animation: scroll-right 80s linear infinite;
will-change: transform;
transform: translateZ(0);
width: max-content;
overflow: visible;
}
.testimonials-carousel-bottom .testimonials-track {
animation: scroll-left 80s linear infinite;
}
.testimonial-card {
flex: 0 0 350px;
background: var(--card);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
position: relative;
min-height: 180px;
display: flex;
flex-direction: column;
transform: translateZ(0);
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
z-index: 1;
opacity: 1;
}
.testimonial-card:hover {
transform: translateY(-8px) translateZ(0);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
z-index: 10;
}
.quote-icon {
font-size: 2rem;
color: #e8eef5;
font-weight: bold;
margin-bottom: 0.5rem;
line-height: 1;
background-image: linear-gradient(90deg,
#8a9097 0%,
#a6acb3 12%,
#d5dbe2 24%,
#ffffff 36%,
#e2e8ef 50%,
#fbfdff 64%,
#e6ecf3 76%,
#c1c7ce 88%,
#8e949b 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.testimonial-text {
color: var(--text);
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 1rem 0;
flex-grow: 1;
}
.testimonial-author {
margin-top: auto;
}
.author-name {
color: var(--text);
font-weight: 600;
font-size: 0.9rem;
}
@keyframes scroll-right {
from { transform: translateX(0); }
to { transform: translateX(-33.333%); }
}
@keyframes scroll-left {
from { transform: translateX(-33.333%); }
to { transform: translateX(0); }
}
/* Pause animation on hover */
.testimonials-carousel:hover .testimonials-track {
animation-play-state: paused;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.testimonial-card {
flex: 0 0 280px;
padding: 1.25rem;
min-height: 160px;
}
.testimonials-track {
gap: 1rem;
}
.testimonials-carousel::before,
.testimonials-carousel::after {
width: 60px;
}
}
/* Strong mobile overrides to keep dots/arrows below the card */
@media (max-width: 768px) {
.models-carousel .carousel-controls{
position: relative !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
transform: none !important;
justify-content: center; gap: 1rem; margin-top: 10px;
z-index: auto !important; pointer-events: all;
}
.models-carousel .carousel-prev,
.models-carousel .carousel-next{ position: static !important; }
.models-carousel .carousel-dots{
position: relative !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
margin-top: 8px; display: flex; justify-content: center;
z-index: 1 !important;
}
}
/* Final cascade-safe overrides for models carousel on small screens */
@media (max-width: 768px){
.models-carousel .carousel-container{ position: relative !important; padding-bottom: 20px; }
/* Hide controls and dots on mobile; rely on swipe */
.models-carousel .carousel-controls{ display:none !important; }
.models-carousel .carousel-dots{ display:none !important; }
.models-carousel .carousel-prev,
.models-carousel .carousel-next{ position: static !important; }
}
@media (max-width: 480px) {
.testimonial-card {
flex: 0 0 250px;
padding: 1rem;
min-height: 140px;
}
.quote-icon {
font-size: 1.5rem;
}
.testimonial-text {
font-size: 0.9rem;
}
.testimonials-carousel::before,
.testimonials-carousel::after {
width: 40px;
}
}
.cookie-banner{position:fixed;left:0;right:0;bottom:20px;z-index:60;display:none}
.cookie-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 16px}
/* Utilities */
.center{text-align:center}
.pill{display:inline-block;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px;color:var(--muted)}
.back-to-top{position:fixed;right:20px;bottom:20px;z-index:60;display:none}
/* Chevron icon for back-to-top, matching header chevrons */
.back-to-top{width:40px;height:40px;padding:0;border-radius:10px;display:none;align-items:center;justify-content:center}
.back-to-top:before{content:"";display:inline-block;width:14px;height:14px;background:#fff;opacity:.9;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;transform:rotate(-90deg)}
.back-to-top:hover:before{opacity:1}
/* Contact form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--muted);font-family:Montserrat,Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.input,.textarea{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0f0f12;color:#fff;width:100%;font-family:Montserrat,Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:.1px}
.input:focus,.textarea:focus{outline:none;box-shadow:var(--glow)}
.invalid{border-color:#c33}
.error{color:#f19999;font-size:12px}
.form-grid .btn{font-size:16px;padding:12px 20px}
/* Page specific hero accents */
.page-features .hero{background:radial-gradient(900px 300px at 20% -10%, rgba(255,255,255,.07), transparent),linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
/* Compact hero spacing for all pages */
.hero--compact{padding:56px 0}
/* Features sticky subnav */
/* (removed) features subnav */
/* Features: benefits grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card .thumb{width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0f0f12;margin:4px 0 10px}
.feature-card .thumb img{width:100%;height:100%;object-fit:cover}
.feature-card h3{margin:0 0 6px}
@media (max-width: 960px){.feature-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.feature-grid{grid-template-columns:1fr}}
/* Features: Workflow Steps - Horizontal */
.workflow-steps{display:flex;align-items:center;justify-content:center;gap:2rem;margin:3rem 0;flex-wrap:wrap}
.workflow-step{display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(20px);transition:all 0.6s ease;max-width:200px;flex:1;min-width:180px}
.workflow-step.animate{opacity:1;transform:translateY(0)}
.step-icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg, rgba(192,192,192,0.1), rgba(220,220,220,0.05));border:2px solid rgba(192,192,192,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:all 0.3s ease}
.workflow-step.animate .step-icon{background:linear-gradient(135deg, rgba(192,192,192,0.2), rgba(220,220,220,0.1));border-color:rgba(192,192,192,0.4);box-shadow:0 4px 16px rgba(192,192,192,0.15)}
.step-icon svg{color:var(--text);transition:all 0.3s ease}
.workflow-step.animate .step-icon svg{color:rgba(192,192,192,0.9)}
.step-content h3{font-size:18px;margin-bottom:8px;color:var(--text);font-weight:600}
.step-content p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.workflow-arrow{opacity:0;transform:translateX(-10px);transition:all 0.6s ease 0.3s;color:rgba(192,192,192,0.4)}
.workflow-arrow.animate{opacity:1;transform:translateX(0)}
@media (max-width: 960px){
.workflow-steps{gap:1.5rem;margin:2rem 0}
.workflow-step{min-width:150px;max-width:160px}
.step-icon{width:56px;height:56px}
.step-icon svg{width:28px;height:28px}
.workflow-arrow{display:none}
}
@media (max-width: 640px){
.workflow-steps{flex-direction:column;gap:2rem}
.workflow-step{max-width:none;min-width:auto}
}
/* Features: Compatibility - Minimal split with media */
.compat-minimal{display:flex;justify-content:center;gap:3rem;margin:2rem 0;flex-wrap:wrap}
.compat-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.85rem;padding:0 1.5rem;max-width:380px;color:var(--text);opacity:0.9;transition:opacity .25s ease}
.compat-item:hover{opacity:1}
.compat-item:not(:last-child):after{content:"";position:absolute;top:18%;right:-1.5rem;width:1px;height:64%;background:rgba(255,255,255,0.25)}
.compat-item h3{margin:0;font-size:18px;font-weight:600;color:var(--text)}
.compat-media{width:250px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,0.3)}
.compat-media img{width:100%;height:100%;object-fit:cover;display:block}
.compat-desc{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
@media (max-width: 960px){
.compat-minimal{gap:2rem}
.compat-item:not(:last-child):after{right:-1rem}
}
@media (max-width: 560px){
.compat-minimal{flex-direction:column;gap:1rem;align-items:center}
.compat-item:not(:last-child):after{display:none}
}
/* Features: Support - Minimalist */
.support-minimal{text-align:center;max-width:600px;margin:0 auto;padding:2rem 0}
.support-minimal h3{font-size:24px;margin-bottom:2rem;color:var(--text)}
.support-features{display:grid;gap:1rem;margin-bottom:2rem}
.support-feature{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:8px;transition:all 0.3s ease}
.support-feature:hover{background:rgba(255,255,255,0.04);border-color:rgba(192,192,192,0.2)}
.support-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(192,192,192,0.2), rgba(220,220,220,0.1));border-radius:50%;color:var(--text);font-size:12px;font-weight:600}
.support-feature span:last-child{color:var(--text);font-size:15px;line-height:1.4}
@media (max-width: 560px){
.support-minimal{padding:1.5rem 0}
.support-minimal h3{font-size:20px;margin-bottom:1.5rem}
.support-features{gap:0.75rem;margin-bottom:1.5rem}
.support-feature{padding:0.625rem 0.875rem}
.support-icon{width:18px;height:18px;font-size:11px}
.support-feature span:last-child{font-size:14px}
}
.page-models .hero{background:radial-gradient(900px 300px at 80% -10%, rgba(255,255,255,.07), transparent),linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.page-accessories .hero{background:radial-gradient(600px 200px at 50% -10%, rgba(255,255,255,.06), transparent),linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.page-videos .hero{background:radial-gradient(1000px 350px at 50% -10%, rgba(255,255,255,.08), transparent),linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.page-resellers .hero{background:radial-gradient(800px 240px at 50% -10%, rgba(255,255,255,.07), transparent),linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.page-decoder .hero{background:radial-gradient(800px 240px at 50% -10%, rgba(255,255,255,.07), transparent),linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.page-pinouts .hero{background:radial-gradient(900px 300px at 80% -10%, rgba(255,255,255,.07), transparent),linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
/* Video modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:80}
.modal-overlay.open{display:flex}
.modal{width:min(900px,90vw);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);position:relative}
.modal .close{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;padding:6px 10px}
/* Contact success modal: compact and auto-height */
#contactModal .modal{width:min(550px,120vw);aspect-ratio:auto;background:var(--card);border:1px solid rgba(255,255,255,.12);padding:16px}
#contactModal .modal .card{background:transparent;border:none;box-shadow:none;padding:0}
#contactModal .modal h3{margin:0 0 6px}
/* Video grid */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Lite YouTube placeholder */
.video-embed.lite{background:#000;cursor:pointer;position:relative}
.video-embed.lite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px}
.video-embed.lite:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center, rgba(0,0,0,.05), rgba(0,0,0,.35));pointer-events:none;border-radius:14px;z-index:1}
.video-embed.lite .lite-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;box-shadow:var(--glow);z-index:2}
.video-embed.lite .lite-play:before{content:"";display:block;border-left:14px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:3px}
@media (max-width: 760px){.video-embed.lite .lite-play{width:54px;height:54px}}
@media (max-width: 760px){.video-grid{grid-template-columns:1fr}}
/* Responsive */
@media (max-width: 960px){
.grid.cols-3{grid-template-columns:1fr 1fr}
.grid.cols-4{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr 1fr 1fr}
.menu-toggle{display:inline-flex;border:none;outline:none}
/* Make mobile menu cover full screen width under header */
.nav{position:fixed;top:60px;left:0;right:0;display:flex;flex-direction:column;background:rgba(0,0,0,.95);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08);padding:12px;z-index:60;transform:none;
/* Smooth open/close */
max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .28s ease, opacity .22s ease;
}
.nav.open{max-height:calc(100vh - 60px); opacity:1; pointer-events:auto}
.nav .has-dropdown{width:100%}
/* Mobile: stack dropdown as static grid under parent with smooth transition */
.nav .has-dropdown .dropdown{position:static;display:grid;margin:6px 0 0;background:rgba(15,15,18,.92);min-width:0;width:100%;grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr;padding:0; overflow:hidden;
max-height:0; opacity:0; visibility:hidden; transition:max-height .25s ease, opacity .2s ease, padding .2s ease;
}
.nav .has-dropdown.open .dropdown{max-height:700px; opacity:1; visibility:visible; padding:8px 0}
/* Normalize all dropdowns (including .wide) to single column and full width on mobile */
.nav .has-dropdown .dropdown.wide{grid-auto-flow:row !important;grid-template-rows:none !important;grid-auto-columns:auto !important;grid-template-columns:1fr !important;width:100% !important}
/* Make every dropdown link occupy full row width for consistent look */
.nav .has-dropdown .dropdown a,
.nav .has-dropdown .dropdown .dropdown-link{display:block;width:100%}
/* Replace
with a space in mobile dropdown labels */
.nav .has-dropdown .dropdown br{ display:inline !important; }
.nav .has-dropdown .dropdown br::after{ content:" \00a0"; }
/* Language: short labels and right-anchored full-width menu */
.lang-select .label-full{display:none}
.lang-select .label-short{display:inline}
.header-actions .lang-select .dropdown{position:fixed;top:60px;right:0;left:auto;width:100vw;margin:0;border-radius:0;min-width:0;z-index:61;
/* Smooth open/close */
max-height:0; opacity:0; overflow:hidden; transform:translateY(-6px); transition:max-height .25s ease, opacity .2s ease, transform .25s ease;
}
.lang-select.open .dropdown{max-height:60vh; opacity:1; transform:translateY(0)}
/* Right-align language options in the mobile dropdown */
.header-actions .lang-select .dropdown a,
.header-actions .lang-select .dropdown .dropdown-link{ text-align:right; }
/* Utility to show items only on mobile */
.nav .only-mobile{display:none !important}
.only-mobile{display:none !important}
@media (max-width: 960px){ .only-mobile{display:block !important} }
/* Use PL/EN short labels */
.lang-select .label-full{display:none}
.lang-select .label-short{display:inline}
/* Hide the header contact button on mobile; contact lives inside menu */
.header-actions .btn.cta{display:none !important}
/* Homepage section spacing - tablet */
.page-home section{padding:4rem 0}
.page-home #hero{padding:3rem 0 4rem}
.page-home #features{padding:4rem 0}
.page-home #models{padding:4rem 0}
.page-home #accessories{padding:4rem 0}
.page-home #resources{padding:4rem 0}
.page-home #testimonials{padding:4rem 0}
.page-home #cta{padding:4rem 0}
}
/* Compact header layout on phones/tablets (same breakpoint as hamburger) */
@media (max-width: 960px){
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:60px}
/* Pin primary controls to the first row to prevent wrapping below the logo */
.header-inner > .menu-toggle{grid-column:1;grid-row:1;justify-self:start}
.header-inner > .logo{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;margin:0}
.header-inner > .header-actions{grid-column:3;grid-row:1;justify-self:end;gap:8px}
.logo img{max-width:150px;display:block}
.header-actions .btn.cta{padding:8px 10px;font-size:12px}
.lang-select .nav-parent{padding:8px 10px;font-size:12px}
.nav .nav-link,.nav .nav-parent{display:block;width:100%;text-align:left}
}
@media (max-width: 560px){
.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.hero h1{font-size:32px}
/* Header layout redesign for small screens */
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:60px}
.menu-toggle{grid-column:1;justify-self:start}
.logo{grid-column:2;justify-self:center}
.logo img{max-width:150px}
.header-actions{grid-column:3;justify-self:end;gap:8px}
/* Compact contact button */
.header-actions .btn.cta{padding:8px 10px;font-size:12px}
/* Language switcher short label and full-width dropdown */
.lang-select .nav-parent{padding:8px 10px;font-size:12px}
.lang-select .label-full{display:none}
.lang-select .label-short{display:inline}
.header-actions .lang-select .dropdown{position:fixed;top:60px;right:0;left:auto;width:100vw;margin:0;border-radius:0;min-width:0;z-index:51}
.header-actions .lang-select .dropdown a{padding:12px 16px}
/* Mobile nav links full-width */
.nav .nav-link,.nav .nav-parent{display:block;width:100%;text-align:left}
/* Homepage section spacing - mobile */
.page-home section{padding:3rem 0}
.page-home #hero{padding:2.5rem 0 3rem}
.page-home #features{padding:3rem 0}
.page-home #models{padding:3rem 0}
.page-home #accessories{padding:3rem 0}
.page-home #resources{padding:3rem 0}
.page-home #testimonials{padding:3rem 0}
.page-home #cta{padding:3rem 0}
/* Responsive sections */
.accessories-grid{grid-template-columns:1fr;gap:1.5rem;margin-bottom:2rem}
.accessory-item{flex-direction:column;text-align:center;gap:0.75rem;padding:1.5rem}
.accessory-icon{width:44px;height:44px}
.accessory-content h3{font-size:16px}
.accessory-content p{font-size:14px}
/* Resources responsive */
.resource-row{flex-direction:column;align-items:stretch;gap:1.25rem;padding:1.75rem 0}
.resource-row:hover{margin:0;padding:1.75rem;border-radius:8px}
.resource-info{justify-content:center;text-align:center;gap:1rem}
.resource-icon-minimal{width:44px;height:44px}
.resource-text h3{font-size:16px}
.resource-text p{font-size:14px}
.resource-btn{justify-content:center;padding:0.75rem 1.125rem;font-size:14px;min-width:110px}
}
/* Force 2-column product grids on mobile for models & accessories */
@media (max-width: 560px){
.page-models .product-grid,
.page-accessories .product-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
.product-card h3{ font-size: 12px }
.product-card .product-thumb{ height: 40px }
.product-card .product-thumb img{ max-height: 36px }
}
/* Force 2-column pinouts grid on mobile */
@media (max-width: 560px){
.pinouts-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 12px }
.pinout-card{ padding: 8px }
.pinout-card h3{ font-size: 12px }
}
/* Center footer columns and content on mobile */
@media (max-width: 560px){
.site-footer .footer-grid{ justify-items: center; }
.site-footer .footer-grid > div{ text-align: center; }
.site-footer .footer-links{ display: inline-block; text-align: center; }
.site-footer .footer-links a{ display: inline-block; }
.site-footer .socials{ justify-content: center; }
/* Center VR-Table external link image */
.site-footer .vr-table{ display:flex; flex-direction:column; align-items:center; }
.site-footer .vr-table a{ display:inline-block; }
.site-footer .vr-table img{ display:block; margin:0 auto; }
}
/* Decoder (scoped) */
.decoder-wrap{--toggle-size:36px;--toggle-radius:6px;max-width:760px;margin:0 auto}
.decoder-wrap .decoder-table{width:100%;border-collapse:separate;border-spacing:6px 8px}
.decoder-wrap .decoder-table th{font-weight:600;color:var(--muted);text-align:center;font-size:14px}
.decoder-wrap .decoder-table td{vertical-align:middle;text-align:center}
.decoder-wrap .decoder-table td.r{text-align:right;padding-right:6px;white-space:nowrap;color:var(--muted);font-size:14px}
.decoder-wrap .decoder-table col.col-label{width:80px}
.decoder-wrap .decoder-table col.col-switch{width:60px}
.decoder-wrap .decoder-table col.col-gap{width:36px}
.decoder-wrap .decoder-table col.col-id{width:auto}
.decoder-wrap .nand{width:48px;text-align:center;padding:8px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:#0f0f12;color:#fff;font-weight:600;letter-spacing:.04em;font-size:15px}
.decoder-wrap .nand:focus{outline:none;box-shadow:var(--glow)}
.decoder-wrap .decode-actions{display:flex;justify-content:center;margin:8px 0 12px}
.decoder-wrap .decode-actions .btn{font-size:17px;padding:14px 22px}
.decoder-wrap .switch{position:relative;display:inline-block;width:var(--toggle-size);height:var(--toggle-size)}
.decoder-wrap .switch input{opacity:0;width:0;height:0}
.decoder-wrap .switch,.decoder-wrap .slider{cursor:pointer}
.decoder-wrap .decoder-table td.r{cursor:pointer;user-select:none}
.decoder-wrap .slider{position:absolute;inset:0;border-radius:var(--toggle-radius);background:rgba(255,255,255,.18);transition:background .25s ease, box-shadow .25s ease;box-shadow:inset 0 -2px 0 rgba(255,255,255,.18)}
.decoder-wrap .slider:before{content:"";position:absolute;left:6px;right:6px;height:6px;bottom:6px;background:#fff;border-radius:4px;transition:transform .25s ease}
.decoder-wrap .switch input:checked + .slider{background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12))}
.decoder-wrap .switch input:checked + .slider:before{transform:translateY(calc(-1 * (var(--toggle-size) - 18px)))}
/* Removed heavy backdrop blur for performance */
/* Per-line highlight colors */
.decoder-wrap .switch input:checked + #decslider1{background:#5b5b5c}
.decoder-wrap .switch input:checked + #decslider2{background:#954A4A}
.decoder-wrap .switch input:checked + #decslider3{background:#d93333}
.decoder-wrap .switch input:checked + #decslider4{background:#ea801f}
.decoder-wrap .switch input:checked + #decslider5{background:#f5d514}
.decoder-wrap .switch input:checked + #decslider6{background:#61ac28}
.decoder-wrap .switch input:checked + #decslider7{background:#2f68bd}
.decoder-wrap .switch input:checked + #decslider8{background:#763e9d}
/* Active state glow */
.decoder-wrap .switch.on .slider{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 0 14px rgba(255,255,255,.18)}
.decoder-wrap tr.active-row td.r{color:#fff;font-weight:600;transition:color .2s ease}
.decoder-wrap tr td.r{transition:color .2s ease}
.decoder-wrap tr.active-row td{filter:saturate(120%)}
/* Spacer column to create left gap */
.decoder-wrap .decoder-table th.gap,.decoder-wrap .decoder-table td.gap{width:28px}
/* ===== COUNTDOWN PAGE ===== */
.page-countdown {
background: #000000;
min-height: 100vh;
overflow: hidden;
}
.countdown-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
background: #0f0f0f;
position: relative;
}
.countdown-content {
text-align: center;
z-index: 1;
position: relative;
max-width: 800px;
width: 100%;
}
.countdown-logo {
margin-bottom: 4rem;
display: flex;
justify-content: center;
align-items: center;
}
.countdown-logo img {
max-width: 450px;
width: 100%;
height: auto;
filter: drop-shadow(0 0 30px rgba(192, 192, 192, 0.4));
transition: transform 0.3s ease;
}
.countdown-logo img:hover {
transform: scale(1.02);
}
.countdown-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg,
#8a9097 0%,
#a6acb3 12%,
#d5dbe2 24%,
#ffffff 36%,
#e2e8ef 50%,
#fbfdff 64%,
#e6ecf3 76%,
#c1c7ce 88%,
#8e949b 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #e8eef5;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.countdown-timer {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.countdown-unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.countdown-number {
font-size: 4rem;
font-weight: 700;
background: linear-gradient(135deg,
#8a9097 0%,
#a6acb3 12%,
#d5dbe2 24%,
#ffffff 36%,
#e2e8ef 50%,
#fbfdff 64%,
#e6ecf3 76%,
#c1c7ce 88%,
#8e949b 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #e8eef5;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1;
min-width: 80px;
text-align: center;
}
.countdown-label {
font-size: 0.9rem;
color: rgba(192, 192, 192, 0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.countdown-separator {
font-size: 3rem;
font-weight: 300;
color: rgba(192, 192, 192, 0.4);
line-height: 1;
}
/* Responsive countdown */
@media (max-width: 768px) {
.countdown-container {
padding: 1rem;
}
.countdown-logo {
margin-bottom: 3rem;
}
.countdown-logo img {
max-width: 350px;
}
.countdown-title {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.countdown-timer {
gap: 1rem;
margin-bottom: 2.5rem;
}
.countdown-number {
font-size: 2.5rem;
min-width: 60px;
}
.countdown-separator {
font-size: 2rem;
}
.countdown-label {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.countdown-logo img {
max-width: 280px;
}
.countdown-timer {
gap: 0.75rem;
}
.countdown-number {
font-size: 2rem;
min-width: 50px;
}
.countdown-separator {
font-size: 1.5rem;
}
.countdown-title {
font-size: 2rem;
}
}
/* ===== MODELS CAROUSEL ===== */
.models-carousel {
margin: 2rem 0;
}
.carousel-container {
position: relative;
min-height: 500px;
overflow: hidden;
padding: 0 100px;
width: 100%;
margin: 0 auto;
}
.carousel-track {
position: relative;
width: 100%;
height: 100%;
}
.carousel-slide {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-sizing: border-box;
}
.carousel-slide.active {
opacity: 1;
pointer-events: auto;
}
/* Directional slide animation helpers */
@media (max-width: 768px){
/* Faster mobile transition to minimize perceived gap */
.carousel-slide{ transition: opacity 0.26s ease, transform 0.26s ease; }
/* Directional variants: mimic card sliding */
.carousel-slide.pre-enter.from-right{ opacity:0; transform: translateX(-50%) translateX(80px); }
.carousel-slide.pre-enter.from-left{ opacity:0; transform: translateX(-50%) translateX(-80px); }
.carousel-slide.entering{ opacity:1; transform: translateX(-50%) translateX(0); z-index:2; }
.carousel-slide.leaving.to-left{ opacity:0; transform: translateX(-50%) translateX(-80px); z-index:1; }
.carousel-slide.leaving.to-right{ opacity:0; transform: translateX(-50%) translateX(80px); z-index:1; }
}
.slide-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
padding: 2rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
position: relative;
overflow: hidden;
margin: 0;
box-sizing: border-box;
transition: all 0.3s ease;
}
/* .carousel-slide:hover .slide-content {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.2);
} */
.slide-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(192, 192, 192, 0.05), rgba(169, 169, 169, 0.02));
pointer-events: none;
}
.slide-media {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.slide-media img {
max-width: 100%;
height: auto;
max-height: 300px;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
transition: transform 0.3s ease;
}
.slide-media:hover img {
transform: scale(1.05);
}
.slide-info {
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.slide-info h3 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text);
}
.slide-description {
font-size: 1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 2rem;
}
.slide-features {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-left: 3px solid rgba(192, 192, 192, 0.4);
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(255, 255, 255, 0.08);
border-left-color: rgba(192, 192, 192, 0.7);
transform: translateX(5px);
}
.feature-icon {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
color: #c0c0c0;
transition: color 0.3s ease;
}
.feature-item:hover .feature-icon {
color: #d3d3d3;
}
.feature-item span {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.carousel-controls {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 2;
transform: translateY(-50%);
}
.carousel-prev,
.carousel-next {
width: 48px;
height: 48px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #c0c0c0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
pointer-events: all;
backdrop-filter: blur(10px);
}
.carousel-prev,
.carousel-next {
transform: none !important;
}
.carousel-prev:hover,
.carousel-next:hover {
background: rgba(0, 0, 0, 0.8) !important;
border-color: rgba(192, 192, 192, 0.4) !important;
color: #d3d3d3 !important;
transform: none !important;
}
.carousel-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 2rem;
padding: 0.5rem 0;
}
/* Compact counter indicator (mobile only by default) */
.models-carousel .carousel-counter{ display:none; position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:12px; color:var(--muted); pointer-events:none; }
@media (max-width: 768px){ .models-carousel .carousel-counter{ display:block; } }
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: none;
cursor: pointer;
transition: all 0.3s ease;
margin: 0 0.25rem;
}
.carousel-dot:hover {
background: rgba(138, 138, 138, 0.7);
transform: scale(1.05);
}
.carousel-dot.active {
background: #8a8a8a;
transform: scale(1.1);
box-shadow: 0 0 0 2px rgba(138, 138, 138, 0.4), 0 0 8px rgba(138, 138, 138, 0.5);
}
/* Global site loader */
#site-loader{
position:fixed;
inset:0;
z-index:999;
background:radial-gradient(circle at center, rgba(15,15,18,.96), rgba(8,8,10,.96));
backdrop-filter:blur(12px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:22px;
transition:opacity .45s ease, visibility .45s ease;
}
#site-loader.hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease, visibility .45s ease .2s;}
#site-loader .loader-logo img{height:78px;width:auto;filter:drop-shadow(0 0 24px rgba(255,255,255,.28));}
#site-loader .loader-status{margin:0;font-size:15px;letter-spacing:2px;color:#f3f4f6;text-transform:uppercase;font-weight:500;font-family:Montserrat, Inter, system-ui, sans-serif}
#site-loader .loader-progress{width:320px;height:12px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}
#site-loader .loader-bar{width:0;height:100%;background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,.55));box-shadow:0 0 18px rgba(255,255,255,.45);transition:width .3s ease;transform-origin:left center}
#site-loader.done .loader-progress{opacity:0;transform:translateY(-8px);transition:opacity .35s ease, transform .35s ease;}
#site-loader.done .loader-status{color:#ffffff;transition:color .35s ease;}
#site-loader.hidden .loader-progress{transition:none;}
#site-loader.hidden .loader-status{transition:none;}
html.loader-skip #site-loader{display:none !important;}
@media (max-width: 768px) {
.carousel-container { padding: 0 20px 14px; overflow: visible; }
.slide-content { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
/* Hide verbose feature list on mobile to prevent card cut-off */
.models-carousel .slide-features { display: none !important; }
.slide-media img { max-height: 200px; }
.slide-info h3 { font-size: 1.5rem; text-align: center; }
.slide-description { text-align: center; }
/* Place arrows below the card on mobile */
.carousel-controls { position: static; justify-content: center; gap: 1.5rem; margin-top: 0.75rem; pointer-events: all; transform: none; }
.carousel-prev,
.carousel-next { transform: none; position: static; }
/* Ensure dots sit below the card content */
.carousel-dots { position: static !important; margin-top: 0.75rem; }
}
/* Enforce mobile-only visibility helper (very strong precedence) */
.only-mobile{display:none !important}
.site-header .nav a.only-mobile{display:none !important}
@media (max-width: 960px){
.only-mobile{display:block !important}
.site-header .nav a.only-mobile{display:block !important}
.header-actions .btn.cta{display:none !important}
.menu-toggle{border:none !important}
}
@media (min-width: 961px){
.only-mobile{display:none !important}
.site-header .nav a.only-mobile{display:none !important}
}
/* Sticky filter bar on desktop (keep filters accessible while scrolling) */
@media (min-width: 961px){
.page-models .filter-bar,
.page-accessories .filter-bar,
.page-pinouts .filter-bar{
position: sticky;
top: 70px; /* desktop header height */
z-index: 49; /* below header (50), above content */
}
/* Also apply stickiness to inner container without changing sizing */
.page-models .filter-bar .filter-inner,
.page-accessories .filter-bar .filter-inner,
.page-pinouts .filter-bar .filter-inner{
position: sticky;
top: 70px;
z-index: 49;
}
/* Fallback when native sticky is not honored (via JS adds .stuck) */
.page-models .filter-bar.stuck,
.page-accessories .filter-bar.stuck,
.page-pinouts .filter-bar.stuck{ position: fixed; top: 0px; left:0; right:0; z-index:49; }
}