@font-face {
  font-family: 'Oxanium';
  src: url('../fonts/oxanium-variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --display-tech: 'Oxanium', 'Sora', sans-serif;
  --scroll-vel: 0;
  --scroll-ratio: 0;
  --stack-spread: 0.55;
  --accent-cyan: #7ce0ff;
  --accent-ice: #d6eeff;
  --accent-amber: #ffcf96;
  --glass-bg: linear-gradient(135deg, rgba(18, 30, 44, 0.82), rgba(7, 13, 21, 0.92));
  --glass-border: rgba(168, 212, 255, 0.26);
}

/* Global Scroll-Driven 3D Background Canvas */
#webgl-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.72;
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
.is-paused #webgl-stage {
  opacity: 0.22;
}

main, .header, .references-section, .footer {
  position: relative;
  z-index: 2;
}

/* Custom Magnetic Cursor Ring */
.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  margin-top: -19px;
  border: 1px solid rgba(156, 216, 255, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(124, 224, 255, 0.08) 0%, transparent 70%);
  box-shadow: 0 0 20px rgba(124, 224, 255, 0.16);
  transition: width 0.28s var(--ease), height 0.28s var(--ease), margin 0.28s var(--ease), border-color 0.28s, background 0.28s;
  will-change: transform;
}
.cursor-follower::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #dff3ff;
  box-shadow: 0 0 8px #7ce0ff;
  transition: transform 0.25s var(--ease), opacity 0.25s;
}
.cursor-follower.is-hover {
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  border-color: rgba(214, 238, 255, 0.9);
  background: radial-gradient(circle, rgba(124, 224, 255, 0.18) 0%, rgba(124, 224, 255, 0.02) 72%);
}
.cursor-follower.is-hover::after {
  transform: scale(1.8);
}
.is-paused .cursor-follower {
  display: none !important;
}

/* Magnetic & Mouse-Spotlight Interactive Buttons */
.magnetic {
  position: relative;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s, box-shadow 0.28s, background 0.28s;
  will-change: transform;
  overflow: hidden;
  isolation: isolate;
}
.magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%), rgba(165, 222, 255, 0.28), transparent 70%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: -1;
}
.magnetic:hover::before,
.magnetic:focus-visible::before {
  opacity: 1;
}
.magnetic-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transform: translate3d(var(--itx, 0px), var(--ity, 0px), 0);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

/* Hero: retain the cinematic depth, with the core panel removed. */
.hero{display:flex;align-items:center;gap:0;padding-top:132px;padding-bottom:86px}
.hero-content{position:relative;width:min(72%,780px)!important;max-width:780px;z-index:3}
.hero-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.ambient-light{position:absolute;display:block;pointer-events:none;will-change:transform}
.ambient-light-ice{width:58%;height:85%;top:3%;right:-10%;background:radial-gradient(ellipse at center,#9bd9ff18 0%,#71b9f20b 38%,transparent 70%);transform:translate3d(var(--ambient-x,0px),var(--ambient-y,0px),0) rotate(var(--ambient-angle,0deg))}
.ambient-light-silver{width:48%;height:38%;right:0;bottom:3%;background:radial-gradient(ellipse at center,#ddecff14,transparent 70%);transform:translate3d(calc(var(--ambient-x,0px) * -.6),calc(var(--ambient-y,0px) * -.5),0)}
.is-paused .ambient-light{will-change:auto}

/* Fixed editorial transition. Only its thin rule follows the scroll. */
.approach-bridge{--approach-progress:0;position:relative;z-index:3;padding:21px var(--gutter) 25px;border-top:1px solid #a8d4ff28;border-bottom:1px solid #a8d4ff28;background:linear-gradient(110deg,#0d1722f5,#070d14f2);overflow:clip}
.approach-caption{display:block;color:#91a6bb;font-size:9px;letter-spacing:.17em;line-height:1.6;text-transform:uppercase;margin-bottom:14px}
.approach-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.approach-step{position:relative;display:flex;align-items:flex-start;gap:15px;min-width:0;min-height:68px;padding:4px 26px 2px 0;color:#dce8f5;transition:color .25s}
.approach-step+.approach-step{padding-left:27px;border-left:1px solid #adcdeb29}
.approach-number{padding-top:4px;flex-shrink:0;font-size:10px;line-height:1.6;color:#84b2db}
.approach-copy{display:block;min-width:0;flex:1}
.approach-copy strong{display:block;font:500 clamp(15px,1.25vw,19px)/1.4 var(--display);letter-spacing:-.035em;margin-bottom:7px}
.approach-copy>span{display:block;font-size:11px;line-height:1.7;color:#94a8be;max-width:36ch}
.approach-arrow{padding-top:2px;font-size:18px;color:#a5c9eb;transition:transform .25s,color .25s}
.approach-step:hover,.approach-step:focus-visible{color:#fff}
.approach-step:hover .approach-arrow,.approach-step:focus-visible .approach-arrow{color:#e2f3ff;transform:translate(2px,-2px)}
.approach-progress{position:absolute;bottom:0;left:var(--gutter);right:var(--gutter);height:1px;background:linear-gradient(90deg,#5f9dc4,#e2f3ff,#6da8d2);box-shadow:0 0 10px #8acaff66;transform-origin:left;transform:scaleX(var(--approach-progress,0));pointer-events:none}
.is-paused .approach-progress{transform:scaleX(1)}

/* Original animated identity, recoloured by a live SVG filter. */
.brand,.footer-brand{position:relative;display:block;isolation:isolate;overflow:visible}
.brand{width:250px;max-width:27%;flex-shrink:0}
.brand-logo,.footer-logo{width:100%;height:auto;aspect-ratio:3/1;object-fit:contain;filter:url(#logo-silver-blue) drop-shadow(0 0 4px #89c4ff28)}
.logo-energy{position:absolute;inset:0;display:block;pointer-events:none;opacity:0;transition:opacity .3s}
.logo-energy svg{display:block;width:100%;height:100%;overflow:visible}
.logo-live .logo-energy{opacity:.92}
.logo-current{stroke:#d4efff;stroke-width:3.8;stroke-dasharray:13 87;stroke-dashoffset:100;animation:logo-current-flow 4.8s linear infinite;animation-play-state:paused}
.logo-current-halo{stroke:#88cdff;stroke-width:12;filter:url(#logo-energy-glow);opacity:.7}
.logo-current-word{stroke:#d9efff;stroke-width:3;stroke-dasharray:9 91;animation-duration:5.8s;animation-delay:-1.6s;opacity:.8}
.logo-live .logo-current{animation-play-state:running}
@keyframes logo-current-flow{0%{stroke-dashoffset:100;opacity:0}10%{opacity:.9}78%{opacity:.9}94%,100%{stroke-dashoffset:0;opacity:0}}
@media(max-width:1180px){.brand{width:220px;max-width:26%}.approach-step{gap:12px;padding-right:20px}.approach-step+.approach-step{padding-left:20px}.approach-copy strong{font-size:15px}.approach-copy>span{font-size:10px}}
@media(max-width:1024px){.hero-content{width:min(90%,780px)!important}}
@media(max-width:900px){.brand{width:245px;max-width:50%}.approach-step{padding-right:17px;gap:10px}.approach-step+.approach-step{padding-left:17px}.approach-arrow{display:none}.approach-copy strong{font-size:14px}}
@media(max-width:600px){.brand{width:224px;max-width:calc(100% - 113px)}.hero-content{width:100%!important}.hero-atmosphere{opacity:.75}.approach-bridge{padding:19px var(--gutter) 18px}.approach-caption{font-size:8px;margin-bottom:8px}.approach-steps{grid-template-columns:1fr}.approach-step,.approach-step+.approach-step{padding:13px 0;min-height:0;border-left:0;gap:15px}.approach-step+.approach-step{border-top:1px solid #a6c8e51f}.approach-copy strong{font-size:14px;margin-bottom:3px}.approach-copy>span{max-width:none;font-size:10px}.approach-arrow{display:block;font-size:17px;padding:8px 0 0 8px}.ambient-light-ice{width:85%;right:-25%}}
@media(prefers-reduced-motion:reduce){.logo-current{animation:none!important}.logo-energy{display:none}.ambient-light{transform:none!important;will-change:auto}.approach-progress{transform:scaleX(1)!important}.approach-step{opacity:1!important;transform:none!important}}
@media print{.hero-atmosphere,.logo-energy{display:none}.approach-step{opacity:1!important;transform:none!important}.approach-bridge{background:white;color:black}.approach-copy>span{color:#444}}


/* 3D Perspective Tilt Service Cards & Live 3D Polyhedron Badges */
.service-grid {
  perspective: 1200px;
}
.service-card {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
  will-change: transform;
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 30%), rgba(160, 220, 255, 0.2), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}
.service-card:hover::after {
  opacity: 1;
}
.card-3d-badge {
  position: absolute;
  left: 14px;
  top: 12px;
  width: 44px;
  height: 44px;
  z-index: 3;
  border-radius: 10px;
  border: 1px solid rgba(168, 212, 255, 0.3);
  background: rgba(7, 13, 22, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.card-3d-canvas {
  width: 38px;
  height: 38px;
  display: block;
}

/* Section 02: Interactive 3D Showcase Slide Deck */
.showcase-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(8, 15, 24, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.showcase-counter {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 13px/1 var(--display-tech);
  color: #e4f2ff;
  letter-spacing: 0.12em;
}
.showcase-progress {
  width: 110px;
  height: 3px;
  background: rgba(168, 212, 255, 0.18);
  border-radius: 3px;
  overflow: hidden;
}
.showcase-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #7ce0ff, #ffffff);
  transform-origin: left;
  transform: scaleX(0.25);
  transition: transform 0.4s var(--ease);
}
.showcase-nav-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.slide-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 40px;
  border: 1px solid rgba(168, 212, 255, 0.34);
  background: rgba(13, 24, 37, 0.85);
  color: #dff0ff;
  font: 500 11px/1 var(--mono);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.slide-nav-btn:hover {
  border-color: #b8e2ff;
  background: rgba(26, 48, 72, 0.92);
  box-shadow: 0 0 18px rgba(124, 224, 255, 0.28);
}

.project-visual {
  position: relative;
  perspective: 1100px;
  transform-style: preserve-3d;
  cursor: grab;
}
.project-visual:active {
  cursor: grabbing;
}
#slide-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
}
.slide-metrics {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
}
.slide-metrics span {
  padding: 6px 11px;
  border-radius: 30px;
  background: rgba(6, 12, 20, 0.82);
  border: 1px solid rgba(156, 214, 255, 0.35);
  color: #d6ecff;
  font: 500 10px/1.2 var(--mono);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.project-layout.is-transitioning .project-visual,
.project-layout.is-transitioning .project-content {
  animation: slide-morph 0.52s cubic-bezier(0.22, 0.7, 0.25, 1);
}
@keyframes slide-morph {
  0% { opacity: 0.35; transform: perspective(900px) translateY(14px) rotateY(-5deg) scale(0.98); }
  100% { opacity: 1; transform: perspective(900px) translateY(0) rotateY(0deg) scale(1); }
}

/* Section 03: Scroll-Driven 3D Exploding Architectural Stack */
.system-3d-section {
  background: radial-gradient(ellipse at 50% 45%, #0e1b2a 0%, #070b10 75%);
}
.system-3d-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
.stack-3d-stage-wrap {
  position: relative;
  padding: 28px 24px 24px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(145deg, rgba(14, 25, 38, 0.86), rgba(6, 11, 18, 0.94));
  box-shadow: inset 0 1px 2px rgba(214, 238, 255, 0.15), 0 28px 60px rgba(0, 0, 0, 0.5);
}
.stack-3d-stage {
  position: relative;
  height: 410px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  overflow: visible;
}
.stack-3d-tower {
  position: relative;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(var(--stack-rot-z, -38deg));
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.stack-plate {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1.5px solid rgba(154, 214, 255, 0.55);
  background: linear-gradient(135deg, rgba(24, 48, 74, 0.78), rgba(9, 19, 31, 0.88));
  box-shadow: inset 0 0 22px rgba(124, 224, 255, 0.22), 0 18px 36px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.25, 1), border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.stack-plate::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(170, 220, 255, 0.28);
  border-radius: 10px;
  pointer-events: none;
}
.stack-plate[data-layer="0"] {
  transform: translateZ(calc(var(--stack-spread, 0.55) * -135px));
}
.stack-plate[data-layer="1"] {
  transform: translateZ(calc(var(--stack-spread, 0.55) * -45px));
}
.stack-plate[data-layer="2"] {
  transform: translateZ(calc(var(--stack-spread, 0.55) * 45px));
}
.stack-plate[data-layer="3"] {
  transform: translateZ(calc(var(--stack-spread, 0.55) * 135px));
}
.stack-plate.is-selected,
.stack-plate:hover {
  border-color: #d6eeff;
  background: linear-gradient(135deg, rgba(46, 92, 138, 0.88), rgba(16, 36, 58, 0.94));
  box-shadow: inset 0 0 32px rgba(156, 228, 255, 0.45), 0 0 32px rgba(124, 224, 255, 0.35);
}
.stack-plate-index {
  font: 700 13px/1 var(--display-tech);
  color: #8fd8ff;
  letter-spacing: 0.14em;
}
.stack-plate-label {
  font: 600 14px/1.3 var(--display);
  color: #f0f8ff;
}
.stack-plate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.stack-plate-grid i {
  height: 5px;
  border-radius: 3px;
  background: rgba(156, 220, 255, 0.42);
}

.stack-controls {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(168, 212, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stack-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font: 500 11px/1.4 var(--mono);
  color: #b4cbe2;
}
.stack-slider-row input[type="range"] {
  flex: 1;
  accent-color: #8fd4ff;
  cursor: ew-resize;
}
.stack-cards-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.layer-card {
  text-align: left;
  width: 100%;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid rgba(168, 212, 255, 0.22);
  background: linear-gradient(135deg, rgba(16, 28, 40, 0.82), rgba(8, 14, 22, 0.92));
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.layer-card:hover,
.layer-card.is-selected {
  border-color: #9ed8ff;
  background: linear-gradient(135deg, rgba(25, 45, 66, 0.92), rgba(11, 21, 33, 0.96));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38), inset 0 1px 2px rgba(214, 238, 255, 0.25);
  transform: translateX(6px);
}
.layer-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.layer-card-name {
  font: 600 10px/1.4 var(--mono);
  color: #8fd4ff;
  letter-spacing: 0.14em;
}
.layer-card-meta {
  font: 400 10px/1.4 var(--mono);
  color: #8ea6be;
}
.layer-card h3 {
  font-size: clamp(17px, 1.5vw, 21px);
  color: #eaf4ff;
  margin-bottom: 6px;
}
.layer-card p {
  font-size: 13px;
  line-height: 1.75;
  color: #b7c8d9;
}

/* Floating Scroll-Reactive 3D Progress Orb Button */
.scroll-orb {
  position: fixed;
  left: 22px;
  bottom: 18px;
  z-index: 45;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(168, 212, 255, 0.35);
  background: rgba(8, 16, 26, 0.9);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(214, 238, 255, 0.2);
  color: #e4f2ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.scroll-orb svg {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.scroll-orb circle {
  fill: none;
  stroke-width: 2;
}
.scroll-orb .orb-track {
  stroke: rgba(168, 212, 255, 0.15);
}
.scroll-orb .orb-bar {
  stroke: #8fd4ff;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.12s linear;
}
.scroll-orb-pct {
  font: 700 10px/1 var(--display-tech);
  letter-spacing: 0.04em;
  color: #d8eeff;
}
.scroll-orb-arrow {
  font-size: 11px;
  line-height: 1;
  color: #8fd4ff;
  margin-top: 2px;
  transition: transform 0.25s var(--ease);
}
.scroll-orb.is-bottom .scroll-orb-arrow {
  transform: rotate(180deg);
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 120px;
  }

  .system-3d-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {


  .stack-3d-stage {
    height: 320px;
  }
  .stack-3d-tower {
    width: 200px;
    height: 200px;
  }
  .scroll-orb {
    left: 12px;
    bottom: 12px;
    width: 46px;
    height: 46px;
  }
  .showcase-controls-bar {
    padding: 10px 12px;
  }
  .layer-card-meta {
    display: none;
  }
}

/* Revision 18: compact chrome lettering and a borderless digital Earth. */
.hero .hero-content{width:60%!important;max-width:700px}
.hero h1.chrome-title{position:relative;width:min(100%,640px)}
.hero .chrome-art{width:100%;margin-left:0}
.title-reflection{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(110deg,transparent 40%,#c5e9ff22 46%,#fff9 50%,#b7dfff33 54%,transparent 60%);
 background-size:300% 100%;background-position:150% 0;
 -webkit-mask:url('../images/lettering/hero.svg') center/100% 100% no-repeat;
 mask:url('../images/lettering/hero.svg') center/100% 100% no-repeat;
 mix-blend-mode:screen;animation:chrome-reflection 8s ease-in-out infinite}
@keyframes chrome-reflection{0%,15%{background-position:150% 0}75%,100%{background-position:-50% 0}}
.digital-earth{position:absolute;right:3.5%;top:50%;transform:translateY(-43%);width:37%;max-width:490px;aspect-ratio:1;z-index:2;pointer-events:none}
.digital-earth canvas{display:block;width:100%;height:100%}
.is-paused .title-reflection{animation-play-state:paused}
@media(min-width:1600px){.hero h1.chrome-title{width:680px;max-width:100%}}
@media(max-width:1024px) and (min-width:701px){.hero .hero-content{width:63%!important}.digital-earth{right:0;width:36%}.hero h1.chrome-title{width:100%}}
@media(max-width:700px){.hero{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:72px}.hero .hero-content{width:100%!important}.hero h1.chrome-title{width:88%;max-width:560px}.digital-earth{position:relative;top:auto;right:auto;transform:none;width:min(72%,300px);align-self:center;margin:4px auto -12px}.hero-side{display:none}}
@media(prefers-reduced-motion:reduce){.title-reflection{animation:none;background-position:50% 0}}