:root{--blue:#1565c0;--navy:#123b67;--orange:#ff7a00;--green:#16a34a;--ink:#202124;--muted:#64748b;--surface:#f5f7fa;--line:#dce6f1;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.container{width:min(1160px,calc(100% - 32px));margin:auto}.topbar{background:var(--navy);color:#fff;font-size:13px;padding:7px 0}.topbar .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}.logo{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--navy)}.logo img{width:58px;height:58px;object-fit:contain}.logo span{font-size:18px;line-height:1.1}.logo small{display:block;font-size:10px;color:var(--muted);letter-spacing:1px}.navlinks{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:14px;font-weight:700}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:11px 16px;font-weight:800;border:1px solid transparent;cursor:pointer;text-decoration:none}.btn.primary{background:var(--orange);color:#fff}.btn.blue{background:var(--blue);color:#fff}.btn.green{background:var(--green);color:#fff}.btn.outline{background:#fff;color:var(--blue);border-color:#b9cfe8}.hero{background:linear-gradient(120deg,#eaf4ff,#fff 60%,#f8fbff);padding:64px 0}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.eyebrow{color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:1.5px;font-size:12px}.hero h1{font-size:clamp(32px,4.4vw,58px);line-height:1.1;margin:12px 0;color:var(--navy)}.hero p{font-size:18px;color:#52647a;max-width:650px}.hero-image{width:100%;border-radius:20px;border:1px solid #cfe0f3;box-shadow:0 16px 40px #123b6718}.section{padding:54px 0}.section.alt{background:var(--surface)}h2{font-size:32px;line-height:1.2;color:var(--navy);margin:0 0 10px}h3{color:var(--navy);line-height:1.25}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{border:1px solid var(--line);border-radius:15px;background:#fff;padding:18px;min-width:0}.card img{width:100%;height:125px;object-fit:cover;border-radius:10px;margin-bottom:12px}.card h3{margin:0 0 6px;font-size:18px}.card p{margin:0;color:var(--muted);font-size:14px}.card .link{display:inline-block;margin-top:12px;font-weight:800}.finder{border:1px solid #cfe0f3;background:#fff;border-radius:18px;padding:24px;box-shadow:0 8px 30px #123b670d}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{width:100%;padding:12px;border:1px solid #cbd8e7;border-radius:9px;background:#fff;font:inherit}.field:focus{outline:3px solid #b8dcff;border-color:var(--blue)}label{display:block;font-size:13px;font-weight:800;color:#536781;margin-bottom:5px}.breadcrumb{padding:18px 0;font-size:13px;color:var(--muted)}.page-hero{background:var(--surface);padding:36px 0;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(30px,4vw,48px);line-height:1.15;color:var(--navy);margin:8px 0}.content-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:28px}.sidebox{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:20px;height:max-content}.taglist{display:flex;gap:8px;flex-wrap:wrap}.tag{background:#eaf4ff;border:1px solid #cfe0f3;color:var(--navy);padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}.footer{background:var(--navy);color:#dceafa;padding:42px 0 90px}.footer a{color:#fff}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:26px}.footer h3{color:#fff;font-size:16px}.footer p,.footer li{font-size:13px}.footer ul{padding:0;list-style:none}.bottom-actions{position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--line);display:flex;gap:8px;padding:8px 12px}.bottom-actions a{flex:1;text-align:center;font-size:12px;padding:10px 4px;border-radius:8px;color:#fff;font-weight:900}.bottom-actions .call{background:var(--blue)}.bottom-actions .wa{background:var(--green)}.bottom-actions .book{background:var(--orange)}.notice{padding:13px 16px;border-left:4px solid var(--orange);background:#fff8ef;border-radius:8px}.search{max-width:420px}.pagination-note{font-size:13px;color:var(--muted)}@media(max-width:900px){.hero-grid,.content-grid{grid-template-columns:1fr}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.navlinks{display:none}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.container{width:min(100% - 24px,1160px)}.hero{padding:35px 0}.hero p{font-size:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{padding:12px}.card h3{font-size:15px}.card img{height:100px}.section{padding:34px 0}.formgrid{grid-template-columns:1fr}.nav{padding:8px 0}.logo img{width:48px;height:48px}.logo span{font-size:16px}h2{font-size:26px}.footer-grid{grid-template-columns:1fr}.topbar{font-size:11px}}

/* Rebuild accessibility and responsive refinements */
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible{outline:3px solid #f6c453;outline-offset:3px}
.site-footer{background:#07111f;color:#d9e5f3;padding:36px 0;margin-top:48px}
.site-footer a{color:#8ed8ff}
@media (max-width:760px){
  .nav{flex-wrap:wrap;gap:12px}
  .navlinks{width:100%;display:flex;flex-wrap:wrap;gap:10px}
  .actions{flex-wrap:wrap}
  .hero-grid,.content-grid{grid-template-columns:1fr!important}
  h1{font-size:clamp(1.8rem,7vw,2.6rem)}
  .container{width:min(100% - 28px,1120px)}
}

/* Dynamic card and homepage presentation */
.dynamic-card{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.dynamic-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#101d2d}
.card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.card-tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.card-body h3{margin:.45rem 0}
.card-body p{flex:1}
.card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn.small{padding:9px 13px;font-size:.85rem}
.mini-wa{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border-radius:999px;background:#d9fbe5;color:#075e2b;font-size:.78rem;font-weight:700;text-decoration:none}
.home-hero{padding:56px 0}
.eyebrow{font-size:.78rem;letter-spacing:.12em;font-weight:800}
.hero-visual{display:flex;align-items:center;justify-content:center}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feature{padding:22px;border:1px solid var(--border,#26384c);border-radius:18px}
.soft{background:rgba(100,130,160,.06)}
@media(max-width:760px){.feature-grid{grid-template-columns:1fr}.home-hero{padding:32px 0}.card-actions{align-items:stretch}}

/* SSV Electronics interactive polish: hover, focus, scroll rails and mobile auto-fit */
:root{--ssv-accent:#f5b942;--ssv-green:#18b875;--ssv-blue:#35a9ff;--ssv-ink:#0a1422}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
a,button,.card,.feature,.logo img,.hero-image,.section-head h2,.section-head p,.navlinks a,.mini-wa{transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease,border-color .22s ease,opacity .22s ease,filter .22s ease}
a:hover{color:var(--ssv-accent)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.18);filter:saturate(1.12)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn:focus-visible,.mini-wa:focus-visible,.navlinks a:focus-visible{outline:3px solid var(--ssv-accent);outline-offset:4px}
.btn::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transition:transform .5s ease;z-index:-1}
.btn:hover::after{transform:translateX(120%)}
.card{position:relative;border:1px solid rgba(130,160,190,.22);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;background:rgba(16,29,45,.7)}
.card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(0,0,0,.22);border-color:rgba(245,185,66,.65)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(245,185,66,.08),transparent 42%,rgba(53,169,255,.06));opacity:0;transition:opacity .25s ease}
.card:hover::before{opacity:1}
.dynamic-card img{transition:transform .45s ease,filter .45s ease}
.card:hover img{transform:scale(1.045);filter:brightness(1.08) saturate(1.08)}
.card-body h3{transition:color .22s ease,transform .22s ease}
.card:hover .card-body h3{color:var(--ssv-accent);transform:translateX(2px)}
.mini-wa:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 7px 18px rgba(24,184,117,.25);background:#bdf5d1!important}
.navlinks a{position:relative}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;background:var(--ssv-accent);transition:right .22s ease}
.navlinks a:hover::after{right:0}
.logo:hover img{transform:rotate(-3deg) scale(1.06)}
.hero-image:hover{filter:drop-shadow(0 16px 24px rgba(53,169,255,.15))}
.feature:hover{transform:translateY(-4px);border-color:rgba(245,185,66,.55);box-shadow:0 12px 28px rgba(0,0,0,.15)}
.scroll-rail{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:8px 4px 18px;scrollbar-width:thin}
.scroll-rail>.dynamic-card{flex:0 0 min(310px,82vw);scroll-snap-align:start}
.scroll-rail::-webkit-scrollbar{height:8px}
.scroll-rail::-webkit-scrollbar-thumb{background:rgba(130,160,190,.45);border-radius:99px}
.rail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rail-heading a{font-size:.9rem;font-weight:700}
@media(max-width:900px){.nav{align-items:flex-start}.navlinks{gap:9px}.navlinks a{font-size:.9rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.container{width:min(100% - 24px,1120px)}.grid{grid-template-columns:1fr}.hero-grid,.content-grid{grid-template-columns:1fr!important}.navlinks{width:100%;display:flex;flex-wrap:wrap}.actions{width:100%;display:flex;flex-wrap:wrap}.btn{min-height:42px}.card:hover{transform:translateY(-3px)}.page-hero{padding:28px 0}.section{padding:28px 0}.scroll-rail>.dynamic-card{flex-basis:84vw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}.card:hover,.feature:hover,.btn:hover{transform:none}}

/* =========================================================
   SSV ELECTRONICS — FINAL CENTRALIZED THEME SYSTEM
   Midnight Blue + Electric Blue
   ========================================================= */
:root{
  --page-bg:#080B1A;
  --card-bg:#11152B;
  --card-bg-2:#151C36;
  --card-border:#263653;
  --card-border-strong:#31527D;
  --heading:#FFFFFF;
  --body-text:#AEB5D0;
  --body-text-strong:#D7DDF0;
  --accent:#38BDF8;
  --accent-hover:#0EA5E9;
  --accent-soft:#7DD3FC;
  --button-text:#06111D;
  --header-bg:#0A1022;
  --input-bg:#0D1428;
  --muted-bg:#0D1224;
  --success:#22C55E;
  --shadow:0 10px 30px rgba(0,0,0,.28);
  --shadow-accent:0 12px 34px rgba(56,189,248,.20);
}

*{box-sizing:border-box}
html{background:var(--page-bg)!important;scroll-behavior:smooth}
body{
  margin:0!important;
  background:var(--page-bg)!important;
  color:var(--body-text)!important;
  line-height:1.65;
  overflow-x:hidden;
}
body, p, li, small, label, span, .muted, .description, .excerpt, .meta{
  color:var(--body-text);
}
h1,h2,h3,h4,h5,h6,
.hero h1,.page-hero h1,.card h3,.card-body h3,
.section h2,.section h3,.feature h3,.footer h3{
  color:var(--heading)!important;
  text-shadow:none!important;
}
h1,h2,h3,h4,h5,h6{line-height:1.2}
a{color:var(--accent);text-decoration:none;transition:color .2s ease,transform .2s ease,opacity .2s ease}
a:hover{color:var(--accent-soft);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--accent-soft)!important;
  outline-offset:3px;
}

.topbar,.header,.site-header,header,nav{
  background:var(--header-bg)!important;
  color:var(--body-text)!important;
  border-color:var(--card-border)!important;
}
.header{box-shadow:0 4px 18px rgba(0,0,0,.18)}
.logo,.logo span,.logo small{color:var(--heading)!important}
.logo small{color:var(--body-text)!important}
.navlinks a{color:var(--body-text)!important}
.navlinks a:hover{color:var(--accent)!important;transform:translateY(-1px)}
.logo img{filter:drop-shadow(0 0 12px rgba(56,189,248,.16))}

.hero,.home-hero,.page-hero,.section,.section.alt{
  background:var(--page-bg)!important;
  color:var(--body-text)!important;
}
.hero{
  background:
    radial-gradient(circle at 85% 15%,rgba(56,189,248,.10),transparent 28%),
    linear-gradient(135deg,#080B1A 0%,#0B1226 55%,#080B1A 100%)!important;
}
.hero p,.page-hero p{color:var(--body-text)!important}
.eyebrow{color:var(--accent)!important}
.breadcrumb{color:var(--body-text)!important}
.breadcrumb a{color:var(--accent)!important}

.card,.dynamic-card,.service-card,.brand-card,.area-card,.problem-card,
.blog-card,.feature-card,.content-card,.info-card,.finder,.sidebox,
article,.rail-card,.feature,.notice{
  background:var(--card-bg)!important;
  color:var(--body-text)!important;
  border:1px solid var(--card-border)!important;
  box-shadow:var(--shadow)!important;
  border-radius:15px;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease;
}
.card:hover,.dynamic-card:hover,.service-card:hover,.brand-card:hover,
.area-card:hover,.problem-card:hover,.blog-card:hover,.feature-card:hover,
.content-card:hover,.info-card:hover,.finder:hover,.sidebox:hover,
article:hover,.rail-card:hover,.feature:hover{
  background:var(--card-bg-2)!important;
  border-color:var(--accent)!important;
  box-shadow:var(--shadow-accent)!important;
  transform:translateY(-4px);
}
.card p,.dynamic-card p,.card-body p{color:var(--body-text)!important}
.card h3,.card-body h3{color:var(--heading)!important}
.card img,.dynamic-card img,.hero-image{
  border:1px solid var(--card-border)!important;
  background:#0D1428!important;
}
.card:hover img,.dynamic-card:hover img{transform:scale(1.025)}

.section-head{color:var(--heading)!important}
.section-head .muted{color:var(--body-text)!important}

.btn,.button,button,a.btn,a.button,.view-btn,.cta,input[type=submit]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px;
  background:var(--accent)!important;
  color:var(--button-text)!important;
  border:1px solid var(--accent)!important;
  border-radius:10px!important;
  font-weight:800!important;
  box-shadow:none;
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.btn:hover,.button:hover,button:hover,a.btn:hover,a.button:hover,
.view-btn:hover,.cta:hover,input[type=submit]:hover{
  background:var(--accent-hover)!important;
  color:#FFFFFF!important;
  border-color:var(--accent-hover)!important;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(14,165,233,.30)!important;
}
.btn.outline,.button.outline{
  background:transparent!important;
  color:var(--accent)!important;
  border-color:var(--accent)!important;
}
.btn.outline:hover,.button.outline:hover{
  background:var(--accent)!important;
  color:var(--button-text)!important;
}
.btn.green,.mini-wa,.bottom-actions .wa{
  background:#16A34A!important;
  color:#FFFFFF!important;
  border-color:#16A34A!important;
}
.btn.green:hover,.mini-wa:hover,.bottom-actions .wa:hover{
  background:#22C55E!important;
  color:#06111D!important;
}
.mini-wa{
  white-space:nowrap;
  padding:8px 11px!important;
  border-radius:9px!important;
  font-size:.78rem;
}
.card-actions,.actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}
.card-actions .btn,.card-actions .mini-wa{flex:0 0 auto}
.btn.small{padding:9px 12px!important;font-size:.82rem!important}

input,textarea,select,.field{
  background:var(--input-bg)!important;
  color:var(--heading)!important;
  border:1px solid var(--card-border)!important;
  border-radius:9px!important;
}
input::placeholder,textarea::placeholder{color:#7F8AAA!important}
label{color:var(--body-text-strong)!important}

.tag,.badge,.pill{
  background:#17213B!important;
  color:#BAE6FD!important;
  border:1px solid #31527D!important;
}
.footer,.site-footer{
  background:#060A16!important;
  color:var(--body-text)!important;
  border-top:1px solid var(--card-border)!important;
}
.footer h3,.site-footer h3{color:var(--heading)!important}
.footer a,.site-footer a{color:var(--accent)!important}
.bottom-actions{
  background:#0A1022!important;
  border-top:1px solid var(--card-border)!important;
  box-shadow:0 -6px 18px rgba(0,0,0,.22);
}
.bottom-actions a{border:1px solid transparent}
.bottom-actions .call{background:#2563EB!important;color:#fff!important}
.bottom-actions .book{background:var(--accent)!important;color:var(--button-text)!important}
hr,.divider{border-color:var(--card-border)!important}
.scroll-rail{
  scrollbar-color:var(--accent) var(--input-bg);
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.scroll-rail>*{scroll-snap-align:start}
.scroll-rail::-webkit-scrollbar{height:8px}
.scroll-rail::-webkit-scrollbar-track{background:var(--input-bg);border-radius:99px}
.scroll-rail::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
img{max-width:100%;height:auto}
button,.btn,a.btn,a.button,.view-btn,.mini-wa{cursor:pointer}

@media(max-width:900px){
  .hero-grid,.content-grid{grid-template-columns:1fr!important}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .navlinks{gap:10px}
}
@media(max-width:620px){
  .container{width:calc(100% - 24px)!important}
  .hero,.home-hero{padding:32px 0!important}
  .section{padding:30px 0!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .card,.dynamic-card{border-radius:13px!important}
  .card-body{padding:13px!important}
  .card h3,.card-body h3{font-size:15px!important}
  .card p,.card-body p{font-size:13px!important}
  .card-actions{gap:6px!important}
  .card-actions .btn.small{padding:8px 9px!important;font-size:11px!important}
  .card-actions .mini-wa{padding:8px 9px!important;font-size:11px!important}
  .nav{gap:10px!important}
  .logo img{width:48px!important;height:48px!important}
  .logo span{font-size:16px!important}
  h1{font-size:clamp(28px,8vw,40px)!important}
  h2{font-size:25px!important}
}
@media(max-width:380px){
  .grid{grid-template-columns:1fr!important}
  .card-actions{flex-wrap:wrap!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* =========================================================
   VISIBLE HORIZONTAL SCROLL SYSTEM
   ========================================================= */
.related-rail{position:relative;overflow:hidden}
.related-rail .container{min-width:0}
.rail-heading{position:relative;z-index:2;margin-bottom:12px}
.rail-heading h2{margin:0}
.rail-scroll-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border:1px solid var(--card-border);
  border-radius:999px;
  background:#0D1428;
  color:var(--accent)!important;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
.scroll-rail{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch;
  gap:16px!important;
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:8px 28px 20px 4px!important;
  scroll-behavior:smooth!important;
  scroll-snap-type:x mandatory!important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  position:relative;
  isolation:isolate;
}
.scroll-rail::after{
  content:"";
  position:sticky;
  right:0;
  flex:0 0 18px;
  align-self:stretch;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(8,11,26,.92));
  z-index:3;
}
.scroll-rail>.dynamic-card,
.scroll-rail>.card{
  flex:0 0 286px!important;
  width:286px!important;
  min-width:286px!important;
  max-width:286px!important;
  scroll-snap-align:start!important;
}
.scroll-rail .card-actions{
  flex-wrap:nowrap!important;
}
.scroll-rail::-webkit-scrollbar{height:10px!important}
.scroll-rail::-webkit-scrollbar-track{
  background:#0D1428!important;
  border:1px solid var(--card-border);
  border-radius:999px;
}
.scroll-rail::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#38BDF8,#0EA5E9)!important;
  border-radius:999px;
  border:2px solid #0D1428;
}
.scroll-rail{scrollbar-color:#38BDF8 #0D1428!important;scrollbar-width:auto!important}
@media(max-width:620px){
  .rail-heading{align-items:flex-start!important}
  .rail-scroll-hint{font-size:10px;padding:4px 8px}
  .scroll-rail{gap:12px!important;padding:6px 24px 16px 2px!important}
  .scroll-rail>.dynamic-card,.scroll-rail>.card{
    flex-basis:244px!important;
    width:244px!important;
    min-width:244px!important;
    max-width:244px!important;
  }
}
@media(max-width:380px){
  .scroll-rail>.dynamic-card,.scroll-rail>.card{
    flex-basis:228px!important;
    width:228px!important;
    min-width:228px!important;
    max-width:228px!important;
  }
}


/* FINAL ASSET + SCROLL RAIL SYSTEM */
.page-asset-hero{width:100%;margin:0 auto 22px;display:flex;justify-content:center}
.page-asset-hero img{display:block;width:100%;max-width:980px;aspect-ratio:16/9;object-fit:cover;border-radius:18px;border:1px solid #263653;background:#0D1428;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.scroll-rail{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:16px!important;padding:12px 28px 22px 4px!important;scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important;touch-action:pan-x;cursor:grab}
.scroll-rail:active{cursor:grabbing}
.scroll-rail:focus-visible{outline:3px solid #7DD3FC;outline-offset:4px}
.scroll-rail>.card,.scroll-rail>.dynamic-card,.scroll-rail>article{flex:0 0 280px!important;width:280px!important;min-width:280px!important;scroll-snap-align:start!important}
.scroll-rail::-webkit-scrollbar{height:11px}
.scroll-rail::-webkit-scrollbar-track{background:#0D1428;border:1px solid #263653;border-radius:99px}
.scroll-rail::-webkit-scrollbar-thumb{background:#38BDF8;border:2px solid #0D1428;border-radius:99px}
.scroll-rail{scrollbar-color:#38BDF8 #0D1428;scrollbar-width:auto}
.scroll-rail .card-actions{display:flex!important;flex-wrap:nowrap!important;gap:8px!important}
.scroll-rail .card-actions a{flex:0 0 auto!important}
.rail-scroll-controls{display:flex;gap:8px;justify-content:flex-end;margin:0 0 10px}
.rail-scroll-controls button{background:#38BDF8;color:#06111D;border:1px solid #38BDF8;border-radius:9px;padding:8px 12px;font-weight:800;cursor:pointer}
.rail-scroll-controls button:hover{background:#0EA5E9;color:#fff;transform:translateY(-2px)}
@media(max-width:620px){
 .scroll-rail{gap:12px!important;padding-bottom:18px!important}
 .scroll-rail>.card,.scroll-rail>.dynamic-card,.scroll-rail>article{flex-basis:245px!important;width:245px!important;min-width:245px!important}
 .page-asset-hero img{border-radius:13px}
}