:root{
  --bg1:#F7FAFF;
  --bg2:#F2F7FF;
  --text: rgba(10,24,48,.92);
  --muted: rgba(10,24,48,.62);
  --line: rgba(25,85,170,.12);

  /* 主题霓虹：绿色为主（匹配logo） */
  --neon1:#22C55E;
  --neon2:#16A34A;
  --neon3:#8B5CF6;

  --shadow: 0 18px 55px rgba(8,20,50,.10);
  --shadow2: 0 28px 90px rgba(8,20,50,.14);
  --r: 16px;
  --r2: 24px;
  --max: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC","Noto Sans SC","Microsoft YaHei", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(34,197,94,.16), transparent 55%),
    radial-gradient(1100px 750px at 90% 12%, rgba(139,92,246,.12), transparent 55%),
    radial-gradient(1200px 850px at 55% 105%, rgba(22,163,74,.12), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
  font-size:14px;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.gridlines{
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  opacity:.34;
  background-image:
    linear-gradient(rgba(25,85,170,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,85,170,.06) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,1), rgba(0,0,0,0) 75%);
}
.noise{
  position:fixed; inset:-50%; pointer-events:none; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  transform:scale(1.2);
  opacity:.032;
}

/* Topbar sticky + auto-hide */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(247,250,255,.92), rgba(247,250,255,.70));
  border-bottom:1px solid var(--line);
  will-change: transform;
  transition: transform .28s ease;
}
.topbar.hide{ transform: translateY(-110%); }

.nav{
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--text);
  min-width: 250px;
}
.logoBox{
  width:46px; height:46px; border-radius:16px;
  background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(139,92,246,.14));
  border:1px solid rgba(25,85,170,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75) inset, 0 18px 45px rgba(8,20,50,.10);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.logoBox:before{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(from 90deg, transparent, rgba(34,197,94,.55), transparent, rgba(139,92,246,.45), transparent);
  animation: spin 8s linear infinite;
  opacity:.55;
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand b{font-weight:950; letter-spacing:.2px; font-size:14px}
.brand small{display:block; margin-top:2px; color:var(--muted); font-weight:650; font-size:12px}

.links{display:flex; gap:6px; flex-wrap:wrap; justify-content:center;}
.links a{
  color: rgba(10,24,48,.70);
  text-decoration:none;
  font-weight:900;
  font-size:12.5px;
  padding:9px 10px;
  border-radius:14px;
  border:1px solid transparent;
  transition: .2s ease;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.navI{
  width:18px; height:18px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(25,85,170,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 28px rgba(8,20,50,.08);
  flex:0 0 auto;
}
.navI svg{width:12px; height:12px; opacity:.88}
.links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.65);
  border-color: rgba(25,85,170,.12);
}
.links a.active{
  color: var(--text);
  border-color: rgba(34,197,94,.35);
  background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(139,92,246,.08));
  box-shadow: 0 14px 40px rgba(8,20,50,.10);
}

.cta{display:flex; gap:10px; align-items:center; min-width: 200px; justify-content:flex-end;}

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 13px;
  border-radius:14px;
  border:1px solid rgba(25,85,170,.14);
  background: rgba(255,255,255,.72);
  color:var(--text);
  text-decoration:none;
  font-weight:950;
  font-size:12.5px;
  letter-spacing:.02em;
  box-shadow: 0 18px 55px rgba(8,20,50,.10);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(34,197,94,.42); box-shadow: 0 22px 70px rgba(8,20,50,.14)}
.btn.primary{
  border-color: rgba(34,197,94,.35);
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(139,92,246,.12));
}
.btn .shine{
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 35%, transparent 70%);
  transform: translateX(-120%);
  transition: .55s ease;
  opacity:.85;
  pointer-events:none;
}
.btn:hover .shine{transform: translateX(120%)}

/* HUD */
.hud{
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.54));
  border: 1px solid rgba(25,85,170,.12);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position:relative; overflow:hidden;
}
.hud:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 450px at 18% 20%, rgba(34,197,94,.11), transparent 58%),
    radial-gradient(900px 450px at 82% 26%, rgba(139,92,246,.09), transparent 58%);
  opacity:.95; pointer-events:none;
}
.corner{position:absolute; width:18px; height:18px; border:2px solid rgba(34,197,94,.34); opacity:.55}
.corner.tl{top:14px; left:14px; border-right:none; border-bottom:none; border-top-left-radius:10px}
.corner.tr{top:14px; right:14px; border-left:none; border-bottom:none; border-top-right-radius:10px}
.corner.bl{bottom:14px; left:14px; border-right:none; border-top:none; border-bottom-left-radius:10px}
.corner.br{bottom:14px; right:14px; border-left:none; border-top:none; border-bottom-right-radius:10px}

section{padding: 20px 0}

/* Banner slider */
.bannerWrap{padding: 16px 0 4px;}
.banner{
  position:relative;
  overflow:hidden;
  border-radius: var(--r2);
  border: 1px solid rgba(25,85,170,.12);
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.55);
}
.slides{display:flex; width:100%; transform: translateX(0%); transition: transform .65s cubic-bezier(.2,.9,.2,1);}
.slide{
  flex: 0 0 100%;
  width:100%;
  min-height: 350px;
  padding: 26px 22px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:center;
  position:relative;
}
.slideBg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter: brightness(1.25) saturate(1.13) contrast(1.02);
  opacity:.50;
}
.slide:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 10% 25%, rgba(34,197,94,.14), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(139,92,246,.12), transparent 60%);
  pointer-events:none;
  opacity:.3;
  z-index:1;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(10,24,48,.62);
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:10.5px;
  position:relative; z-index:2;
}
.dot2{width:8px; height:8px; border-radius:99px; background: linear-gradient(135deg, var(--neon1), var(--neon2)); box-shadow: 0 0 18px rgba(34,197,94,.35);}
.hTitle{
  margin:10px 0 8px;
  font-size: clamp(26px, 3vw, 40px);
  line-height:1.08;
  letter-spacing:-.02em;
  position:relative; z-index:2;
}
.grad{
  background: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  margin: 0;
  color: rgba(10,24,48,.66);
  font-size: 13.5px;
  line-height:1.8;
  max-width: 70ch;
  position:relative; z-index:2;
}
.heroActions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:2}

.rightBadge{
  border-radius: var(--r);
  border:1px solid rgba(25,85,170,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.52));
  padding: 14px 14px;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow);
  z-index:2;
}
.rightBadge:after{
  content:"";
  position:absolute; left:-60%; top:0; bottom:0;
  width:55%;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.20), transparent);
  transform: skewX(-18deg);
  animation: sweep 4.6s ease-in-out infinite;
  opacity:.55;
}
@keyframes sweep{
  0%,40%{transform: translateX(0) skewX(-18deg); opacity:0}
  55%{opacity:.6}
  100%{transform: translateX(320%) skewX(-18deg); opacity:0}
}
.rightBadge b{display:block; font-size:13px; margin-bottom:4px; color:rgba(10,24,48,.88)}
.rightBadge span{color: rgba(10,24,48,.62); font-size:12px; line-height:1.6}

.bannerControls{
  position:absolute; inset:auto 14px 14px 14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  z-index:5;
  pointer-events:none;
}
.dots{display:flex; gap:8px; pointer-events:auto}
.dotBtn{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(25,85,170,.20);
  background: rgba(255,255,255,.75);
  cursor:pointer;
  padding:0;
}
.dotBtn.active{
  background: linear-gradient(135deg, rgba(34,197,94,.80), rgba(22,163,74,.65));
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
}
.arrows{display:flex; gap:8px; pointer-events:auto}
.arrow{
  width:40px; height:40px;
  border-radius: 14px;
  border:1px solid rgba(25,85,170,.14);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
  cursor:pointer;
  font-weight:950;
  color: rgba(10,24,48,.82);
}
.arrow:hover{border-color: rgba(34,197,94,.42)}

/* section headings */
.sectionHead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px;
  margin: 6px 0 14px;
}
.sectionHead h2{margin:0; font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.sIcon{
  width:28px; height:28px; border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(25,85,170,.10);
  background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(139,92,246,.08));
  box-shadow: 0 16px 44px rgba(8,20,50,.10);
}
.sIcon svg{width:16px; height:16px; opacity:.9}
.sectionHead p{margin:0; color:var(--muted); max-width:78ch; line-height:1.65; font-size:12.5px}

/* cards */
.card{
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.54));
  border:1px solid rgba(25,85,170,.10);
  box-shadow: var(--shadow2);
  padding: 16px 16px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.card:hover,
.card:focus-within{
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(34,197,94,.36);
  box-shadow: 0 32px 120px rgba(8,20,50,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.54));
}
.card:hover::after,
.card:focus-within::after{
  opacity:1;
  background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(139,92,246,.10));
}
.scan{
  position:absolute; inset:-40%;
  background: linear-gradient(180deg, transparent 0%, rgba(34,197,94,.18) 45%, transparent 60%);
  transform: translateY(-60%) rotate(8deg);
  animation: scan 5.2s ease-in-out infinite;
  opacity:.26;
  pointer-events:none;
}
@keyframes scan{
  0%,45%{transform: translateY(-70%) rotate(8deg); opacity:0}
  55%{opacity:.32}
  100%{transform: translateY(90%) rotate(8deg); opacity:0}
}
.card h3{margin:0 0 6px; font-size:14.5px}
.card p{margin:0; color: rgba(10,24,48,.66); line-height:1.75; font-size:13px}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.grid4{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
@media (max-width: 980px){ .grid2, .grid3, .grid4{grid-template-columns:1fr} }

/* chips (green dots) */
.chip{
  padding: 8px 10px;
  border-radius: 14px;
  border:1px solid rgba(25,85,170,.10);
  background: rgba(255,255,255,.70);
  font-size:12px;
  color: rgba(10,24,48,.66);
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.chip i{
  width:8px; height:8px; border-radius:99px;
  background: linear-gradient(135deg, var(--neon1), var(--neon2));
  display:inline-block;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

/* image boxes */
.imgBox{
  border-radius:16px;
  border:1px solid rgba(25,85,170,.10);
  background:rgba(255,255,255,.72);
  padding:10px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.img{
  width:100%;
  display:block;
  border-radius:12px;
  object-fit:cover;
  opacity:.98;
  transform: scale(1);
  transition: transform .22s ease;
}
.imgBox:hover .img{ transform: scale(1.06); }
.img.h150{height:150px}
.img.h180{height:180px}
.cap{
  margin-top:8px;
  font-size:12px;
  color: rgba(10,24,48,.62);
  font-weight:850;
}

/* DC */
.dcCard .dcPhoto{margin-bottom:12px}
.dcCard h3{display:flex; align-items:center; justify-content:space-between; gap:10px}
.dcMeta{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.kv{margin-top:12px; display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.kv .pill{
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(25,85,170,.10);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow);
}
.kv b{display:block; font-size:12.5px; margin-bottom:4px}
.kv span{color: rgba(10,24,48,.62); font-size:12px; line-height:1.6}
@media (max-width: 560px){ .kv{grid-template-columns:1fr} }

/* Compute: NO background images, uniform layout, no truncation */
.priceCard{
  display:flex; flex-direction:column; gap:10px;
  min-height: 292px;
}
.priceCard::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, rgba(34,197,94,.85), rgba(139,92,246,.70));
  opacity:.85;
}
.priceTop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.priceTop .left{min-width:0}
.priceTop .right{text-align:right; white-space:nowrap}
.tag{
  font-size:10.5px;
  font-weight:950;
  letter-spacing:.14em;
  color: rgba(10,24,48,.60);
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}
.tag i{width:8px; height:8px; border-radius:99px; background:linear-gradient(135deg,var(--neon1),var(--neon2)); display:inline-block}
.price{font-weight:1000; font-size: 18px; letter-spacing:-.01em;}
.price small{font-weight:850; font-size:12px; color: rgba(10,24,48,.62); margin-left:6px;}
.priceCard .desc{
  color: rgba(10,24,48,.66);
  font-size:12.8px;
  line-height:1.7;
  /* 不省略内容：允许完整显示 */
  margin:0;
}
.spec{display:flex; flex-wrap:wrap; gap:8px;}
.spec span{
  padding:8px 10px;
  border-radius: 14px;
  border:1px solid rgba(25,85,170,.10);
  background: rgba(255,255,255,.74);
  color: rgba(10,24,48,.66);
  font-size:12px;
  font-weight:850;
}
.priceNote{margin-top:auto; color: rgba(10,24,48,.60); font-size:12px; line-height:1.7}

/* promo: bg images only here */
.promoCard{position:relative; padding: 16px 16px;}
.promoCard::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--promoimg);
  background-size: cover;
  background-position:center;
  opacity:.14;
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.06);
  pointer-events:none;
}
.promoCard > *{position:relative; z-index:1}

/* partners */
.logos{display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
@media (max-width: 980px){ .logos{grid-template-columns: repeat(2, 1fr);} }
.logoTile{
  border-radius: 16px;
  border:1px solid rgba(25,85,170,.10);
  background: rgba(255,255,255,.72);
  padding: 14px;
  display:flex; align-items:center; justify-content:center;
  min-height: 72px;
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.logoTile img{max-width: 100%; max-height: 34px; opacity:.92; filter: saturate(1.15)}
.logoTile:hover{transform: translateY(-2px) scale(1.01); border-color: rgba(34,197,94,.30); box-shadow: 0 26px 90px rgba(8,20,50,.16); background: rgba(255,255,255,.80)}

/* about */
.aboutGrid{display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px;}
@media (max-width: 980px){ .aboutGrid{grid-template-columns:1fr} }
.credBox .img{height: 160px; object-fit:contain; background: rgba(255,255,255,.65)}
.envBox .img{height: 160px}

/* contact */
.contactPanel{padding:16px;}
.contactRow{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:stretch;}
@media (max-width: 980px){ .contactRow{grid-template-columns:1fr} }
.contactList{display:grid; gap:10px; margin-top:10px}
.contactItem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(25,85,170,.10);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
}
.contactItem b{font-size:13px}
.contactItem span{color: rgba(10,24,48,.62); font-size:12px; font-weight:750}
.contactCTA{
  border-radius: 16px;
  border:1px solid rgba(25,85,170,.10);
  background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(139,92,246,.08));
  box-shadow: var(--shadow);
  padding: 14px;
  display:flex; flex-direction:column; justify-content:space-between; gap:12px;
}
.contactCTA b{font-size:14px}
.contactCTA p{margin:0; color: rgba(10,24,48,.62); font-size:12.5px; line-height:1.7}

/* footer */
.footer{padding: 18px 0 36px; border-top: 1px solid rgba(25,85,170,.10); color: rgba(10,24,48,.62); font-size: 12px;}

/* modal */
.modalMask{position:fixed; inset:0; background: rgba(8,20,50,.45); display:none; align-items:center; justify-content:center; padding: 18px; z-index: 120;}
.modal{width:min(860px, 100%); border-radius: var(--r2); background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66)); border:1px solid rgba(25,85,170,.12); box-shadow: 0 50px 160px rgba(8,20,50,.22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position:relative; overflow:hidden;}
.modal .x{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius: 14px; border:1px solid rgba(25,85,170,.12); background: rgba(255,255,255,.85); color:rgba(10,24,48,.86); font-weight:950; cursor:pointer;}
.modalBody{padding: 20px 16px 16px}
.qrRow{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 560px){ .qrRow{grid-template-columns:1fr} }
.qrBox{border-radius: 16px; border:1px solid rgba(25,85,170,.10); background: rgba(255,255,255,.74); padding: 14px; box-shadow: var(--shadow); display:flex; gap:12px; align-items:center;}
.qrBox img{width:92px; height:92px; border-radius:12px; object-fit:cover}

/* preview overlay */
.previewMask{position:fixed; inset:0; background: rgba(8,20,50,.35); display:none; align-items:center; justify-content:center; padding: 18px; z-index: 130;}
.previewMask.show{display:flex;}
.previewCard{width:min(980px, 96vw); border-radius: var(--r2); background: rgba(255,255,255,.86); border:1px solid rgba(25,85,170,.12); box-shadow: 0 60px 180px rgba(8,20,50,.24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow:hidden; pointer-events:auto;}
.previewCard img{width:100%; height:auto; display:block; object-fit:contain; max-height: 80vh; background: rgba(255,255,255,.80);}

/* reveal progressive enhancement */
.reveal{opacity:1; transform:none; filter:none}
.has-js .reveal{opacity:0; transform: translateY(10px); filter: blur(6px); transition: .8s cubic-bezier(.2,.9,.2,1)}
.has-js .reveal.on{opacity:1; transform:none; filter:none}

/* responsive */
@media (max-width: 980px){
  .links{display:none}
  .brand small{display:none}
  .cta{min-width:auto}
  .slide{grid-template-columns:1fr; min-height: 390px}
}
@media (max-width: 560px){
  .nav{height:auto; padding:10px 0}
  .brand{min-width:auto}
  .cta{gap:8px}
  .btn{padding:9px 12px}
  .bannerControls{inset:auto 10px 10px 10px}
}