* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; background: #fff; color: #000; }
body { font-family: 'Inter', Arial, sans-serif; }
.hero p, .hero h1 { margin: 0; }
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 500px;
  overflow: clip;
  background:#fdfdfd;
}
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.navigation { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; font-family: 'Inter Display', Arial, sans-serif; letter-spacing: -.04em; }
.adaptive-text,
.blended-text {
  color: #fff;
  mix-blend-mode: difference;
}
.role-btn .adaptive-text {
  color: #111 !important;
  mix-blend-mode: normal !important;
}
.book-call .adaptive-text {
  color: #fff !important;
  mix-blend-mode: normal !important;
}
.brand { font-size: 20px; line-height: 1; font-weight: 700; white-space: nowrap; }
.time { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.time-zone { display: inline-flex; align-items: baseline; gap: 5px; }
.time-zone strong { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.time-divider { opacity: .55; }
.main-links { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1; font-weight: 600; white-space: nowrap; }
.main-links a { color: inherit; text-decoration: none; }
.main-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.separator { font-family: 'Saira Condensed', Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.book-call { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px 12px 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; background: rgba(8, 10, 14, .94); box-shadow: 0 8px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.book-call__label { display: inline-block; }
.book-call__arrow { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.13); color: #fff; font-size: 13px; transition: transform .28s cubic-bezier(.2,.8,.2,1), background-color .28s ease; }
.book-call:hover .book-call__arrow { transform: translate(2px,-2px); background: rgba(255,255,255,.22); }
.role-buttons { position:absolute; z-index:2; inset:0; pointer-events:none; }
.role-card {
  --btn-color:#f3f1eb;
  --drawer-color:#17191d;
  --corner-color:rgba(17,24,39,.16);
  --corner-dist:24px;
  --corner-multiplier:1.5;
  --timing-function:cubic-bezier(0,0,0,2.5);
  --duration:250ms;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:232px;
  height:48px;
  pointer-events:auto;
}
.role-btn {
  position:relative;
  min-width:232px;
  min-height:calc(var(--corner-dist) * 2);
  border-radius:16px;
  border:none;
  padding:.25em 1em;
  background:linear-gradient(rgba(255,255,255,.18),rgba(0,0,0,.045)),var(--btn-color);
  box-shadow:
    1px 1px 2px -1px rgba(255,255,255,.95) inset,
    0 2px 1px rgba(0,0,0,.06),
    0 4px 2px rgba(0,0,0,.05),
    0 8px 4px rgba(0,0,0,.04),
    0 16px 8px rgba(0,0,0,.035),
    0 32px 16px rgba(0,0,0,.025);
  transition:
    transform var(--duration) var(--timing-function),
    filter var(--duration) var(--timing-function);
  cursor:pointer;
  z-index:2;
  pointer-events:auto;
  font-family:'Poppins','Inter',Arial,sans-serif;
}
.role-drawer {
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:32px;
  border-radius:16px;
  border:none;
  padding:.25em 1em;
  font-size:9px;
  font-weight:600;
  font-family:'Poppins','Inter',Arial,sans-serif;
  letter-spacing:.015em;
  color:rgba(255,255,255,.86);
  background:linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,.08)),var(--drawer-color);
  opacity:0;
  transition:
    transform calc(.5 * var(--duration)) ease,
    filter var(--duration) var(--timing-function),
    opacity calc(.5 * var(--duration)) ease;
  filter:blur(2px);
  z-index:1;
  pointer-events:none;
  white-space:nowrap;
}
.role-drawer--top {
  top:0;
  left:0;
  border-radius:12px 12px 0 0;
  align-items:flex-start;
}
.role-drawer--bottom {
  bottom:0;
  right:0;
  border-radius:0 0 12px 12px;
  align-items:flex-end;
}
.role-btn__label {
  display:inline-block;
  font-size:11.5px;
  line-height:1.2;
  font-family:'Poppins','Inter',Arial,sans-serif;
  font-weight:600;
  text-align:center;
  color:transparent;
  background-image:linear-gradient(#303238,rgba(0,0,0,.72));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.48)) drop-shadow(0 -1px 0 rgba(0,0,0,.18));
  transition:
    transform var(--duration) var(--timing-function),
    filter var(--duration) var(--timing-function),
    color var(--duration) var(--timing-function);
}
.role-corner {
  position:absolute;
  width:32px;
  fill:none;
  stroke:var(--corner-color);
  opacity:1;
  transition:
    transform var(--duration) var(--timing-function),
    filter var(--duration) var(--timing-function);
  z-index:1;
  pointer-events:none;
}
.role-corner--tl {
  top:0;left:0;
  transform:translate(calc(-1 * var(--corner-dist)),calc(-1 * var(--corner-dist))) rotate(90deg);
}
.role-corner--tr {
  top:0;right:0;
  transform:translate(var(--corner-dist),calc(-1 * var(--corner-dist))) rotate(180deg);
}
.role-corner--br {
  bottom:0;right:0;
  transform:translate(var(--corner-dist),var(--corner-dist)) rotate(-90deg);
}
.role-corner--bl {
  bottom:0;left:0;
  transform:translate(calc(-1 * var(--corner-dist)),var(--corner-dist)) rotate(0deg);
}
.role-card:hover .role-btn,
.role-card:focus-within .role-btn {
  transform:scale(1.05);
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.13));
}
.role-card:hover .role-drawer--top,
.role-card:focus-within .role-drawer--top {
  transform:translateY(-24px) rotateZ(4deg);
  filter:blur(0);
  opacity:1;
}
.role-card:hover .role-drawer--bottom,
.role-card:focus-within .role-drawer--bottom {
  transform:translateY(24px) rotateZ(4deg);
  filter:blur(0);
  opacity:1;
}
.role-card:hover .role-btn__label,
.role-card:focus-within .role-btn__label {
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.48)) drop-shadow(0 -1px 0 rgba(0,0,0,.18)) drop-shadow(0 6px 2px rgba(0,0,0,.16));
  transform:scale(1.05);
}
.role-card:hover { --corner-color:rgba(17,24,39,.28); }
.role-card:hover .role-corner--tl,
.role-card:focus-within .role-corner--tl {
  transform:translate(calc(-1 * var(--corner-multiplier) * var(--corner-dist)),calc(-1 * var(--corner-multiplier) * var(--corner-dist))) rotate(90deg);
  filter:drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
}
.role-card:hover .role-corner--tr,
.role-card:focus-within .role-corner--tr {
  transform:translate(calc(var(--corner-multiplier) * var(--corner-dist)),calc(-1 * var(--corner-multiplier) * var(--corner-dist))) rotate(180deg);
  filter:drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
}
.role-card:hover .role-corner--br,
.role-card:focus-within .role-corner--br {
  transform:translate(calc(var(--corner-multiplier) * var(--corner-dist)),calc(var(--corner-multiplier) * var(--corner-dist))) rotate(-90deg);
  filter:drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
}
.role-card:hover .role-corner--bl,
.role-card:focus-within .role-corner--bl {
  transform:translate(calc(-1 * var(--corner-multiplier) * var(--corner-dist)),calc(var(--corner-multiplier) * var(--corner-dist))) rotate(0deg);
  filter:drop-shadow(-10px 10px 1px var(--corner-color)) drop-shadow(-20px 20px 2px var(--corner-color));
}
.role-btn:active {
  transform:scale(.95)!important;
  filter:drop-shadow(0 10px 4px rgba(0,0,0,.13))!important;
}
.role-btn:focus-visible { outline:2px solid #17191d; outline-offset:5px; }
.role-btn[data-busy="true"] { opacity:1!important; pointer-events:none; cursor:default; }

@media (hover:none),(pointer:coarse){
  .role-drawer,.role-corner{display:none}
  .role-card:hover .role-btn{transform:none;filter:none}
}

.hero-coffee-line {
  position:absolute;
  z-index:7;
  left:61.2%;
  top:48.8%;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#17191d;
  font-family:'Comic Neue','Comic Sans MS','Bradley Hand',cursive;
  font-size:clamp(16px,1.7vw,25px);
  font-weight:700;
  letter-spacing:.005em;
  line-height:1;
  text-align:left;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translate(7px,2px) rotate(-2deg);
  transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1);
}
.hero-coffee-line::before {
  content:"";
  position:absolute;
  right:calc(100% + 8px);
  top:55%;
  width:58px;
  height:1.5px;
  background:#17191d;
  border-radius:999px;
  transform-origin:right center;
  transform:rotate(5deg);
}
.hero-coffee-line.is-visible { opacity:1; transform:translate(0,0) rotate(-2deg); }
@media (hover: none), (pointer: coarse) { .hero-coffee-line { display: none; } }
.role-card--va { left:12%; top:25%; }
.role-card--coder { left:13.5%; top:41%; }
.role-card--engineer { right:13%; top:25%; }
.role-card--myself { right:13.5%; top:41%; }
.hero-intro { position:absolute!important; inset:auto 0 0 0!important; width:100%; height:auto!important; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:22px 28px; pointer-events:none; }
.hero h1 { font-family: 'Inter Display', Arial, sans-serif; font-size: 88px; font-weight: 700; line-height: .92; letter-spacing: -.045em; white-space: nowrap; }
.description { flex:0 0 390px; width:390px; max-width:34vw; font-size:clamp(15px,1.35vw,20px); font-weight:600; line-height:1.12; letter-spacing:-.02em; }
.loader { display: none; position: fixed; inset: 0; z-index: 10; overflow: clip; pointer-events: none; }
.has-js .loader { display: block; }
.loader-mask { position: absolute; left: -10%; top: 0; width: 120%; height: 100%; background: #fdfdfd; display: flex; align-items: center; justify-content: center; overflow: clip; border-radius: 0; }
.loader-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; flex: .83 0 0; height: 100%; padding: 12px; overflow: clip; background: #fdfdfd; }
.loader-spacer { width: 100%; height: 151px; flex: 0 0 151px; }
.loader-video { display: block; width: 319px; height: 222px; flex: 0 0 222px; object-fit: cover; object-position: center; }
.counter-row { width: 100%; display: flex; align-items: center; justify-content: flex-end; }
.counter { display: flex; align-items: baseline; font-family: 'Inter Display', Arial, sans-serif; font-size: 200px; font-weight: 300; line-height: .8; letter-spacing: -.06em; }
.percent { font-family: 'Inter', Arial, sans-serif; font-size: 48px; font-weight: 300; line-height: .8; letter-spacing: -.06em; }
.loader.is-exiting .loader-mask { animation: curtain-exit 1.25s cubic-bezier(.76,0,.24,1) forwards; }
.loader.is-complete { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes curtain-exit { from { transform: translateY(0); border-radius: 0; } to { transform: translateY(calc(-100% - 8px)); border-radius: 50%; } }
/* The supplied captures contain desktop geometry only. Keep that geometry
   unchanged above, and fit the same content to narrower screens below. */
@media (max-width: 900px) {
  .navigation { padding: 16px 20px; }
  .hero-intro { padding: 22px 20px; }
  .hero h1 { font-size: clamp(44px, 7vw, 72px); }
  .description { flex-basis:320px; width:320px; max-width:40vw; font-size:clamp(14px,2vw,18px); }
}
@media (max-width: 640px) {
  .hero { min-height: 660px; }
  .role-buttons { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 96px 20px 0; }
  .role-card, .role-card--va, .role-card--coder, .role-card--engineer, .role-card--myself { position:relative; inset:auto; width:100%; height:48px; }
  .role-btn { min-width:100%; min-height:48px; padding:8px 12px; }
  .role-btn__label { font-size:10px; }
  .role-drawer, .role-corner { display:none; }
  .navigation { flex-wrap: wrap; row-gap: 16px; padding: 18px 20px; }
  .brand { flex-basis: auto; }
  .time { order: 3; width: 100%; justify-content: center; gap: 8px; font-size: 12px; }
  .time-zone strong { font-size: 9px; }
  .main-links { font-size: 13px; gap: 8px; }
  .book-call { padding: 10px 12px 10px 15px; font-size: 11px; }
  .hero-intro { flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 20px; }
  .hero h1 { font-size: clamp(38px, 11.8vw, 70px); }
  .description { flex-basis: auto; width: min(317px, 100%); }
  .loader-spacer { height: 100px; flex-basis: 100px; }
  .loader-video { width: min(319px, 85vw); height: auto; aspect-ratio: 319 / 222; flex-basis: auto; }
  .counter { font-size: clamp(120px, 35vw, 200px); }
  .percent { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader.is-exiting .loader-mask { animation: none; transform: translateY(-110%); }
  .role-btn::before { transition:none; }
  .role-btn, .role-btn__arrow, .book-call__arrow { transition: none; }
}


/* Hero blend-mode compositing fix.
   The free-floating copy must blend directly with the canvas backdrop, not a
   nested z-index stacking context. */
.hero > .navigation,
.hero > .hero-intro{
  z-index:auto!important;
  isolation:auto!important;
}
.hero > .navigation > .adaptive-text,
.hero > .hero-intro > :is(.blended-text,.adaptive-text){
  position:relative;
  z-index:1;
  mix-blend-mode:difference!important;
  color:#fff!important;
  isolation:auto!important;
}
.hero > .navigation .book-call{
  position:relative;
  z-index:3;
  mix-blend-mode:normal!important;
}


/* The Hero itself is the curtain. It only leaves normal flow for the 1.25s
   transition; the dashboard is already behind it while the animation runs. */
.hero.hero-curtain--fixed{
  position:fixed!important;
  inset:0!important;
  z-index:1000000!important;
  width:100%!important;
  height:100vh!important;
  height:100svh!important;
  margin:0!important;
  transform:translate3d(0,0,0);
  border-radius:0;
  pointer-events:auto;
  will-change:transform,border-radius;
}
.hero.hero-curtain--exiting{
  pointer-events:none!important;
  animation:hero-curtain-exit 1.25s cubic-bezier(.76,0,.24,1) forwards!important;
}
.hero.hero-curtain--above{
  transform:translate3d(0,calc(-100% - 10px),0);
  border-radius:0 0 50% 50% / 0 0 22% 22%;
  pointer-events:none!important;
}
.hero.hero-curtain--entering{
  pointer-events:none!important;
  animation:hero-curtain-enter 1.25s cubic-bezier(.76,0,.24,1) forwards!important;
}
@keyframes hero-curtain-exit{
  from{
    transform:translate3d(0,0,0);
    border-radius:0;
  }
  to{
    transform:translate3d(0,calc(-100% - 10px),0);
    border-radius:0 0 50% 50% / 0 0 22% 22%;
  }
}
@keyframes hero-curtain-enter{
  from{
    transform:translate3d(0,calc(-100% - 10px),0);
    border-radius:0 0 50% 50% / 0 0 22% 22%;
  }
  to{
    transform:translate3d(0,0,0);
    border-radius:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero.hero-curtain--exiting,
  .hero.hero-curtain--entering{
    animation-duration:.01ms!important;
  }
}


/* Hero hardening: while the real Hero is crossing the viewport, freeze user
   scrolling so wheel/touch/keyboard bursts cannot corrupt transition state. */
html.hero-curtain-transition,
body.hero-curtain-transition{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
.hero.hero-curtain--fixed{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* LET'S CONNECT — exact Uiverse interaction supplied by user, scoped to hero. */
.hero-connect-uiverse {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 166px;
  min-height: 72px;
  overflow: visible;
  z-index: 4;
}
.hero-connect-uiverse .button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  background-image: linear-gradient(#3470fa, #313ed7);
  color: white;
  border: solid 2px #0618db;
  height: 50px;
  padding: 0px 20px;
  border-radius: 5px;
  font-weight: 600;
  transform: scale(0.89);
  position: relative;
  font-family: inherit;
  white-space: nowrap;
}
.hero-connect-uiverse .button:not(:hover) .hide,
.hero-connect-uiverse .button:not(:hover) .icon::before,
.hero-connect-uiverse .button:not(:hover) .icon::after {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.4);
}
.hero-connect-uiverse .hide {
  transition: all 0.2s ease;
}
.hero-connect-uiverse .button:active {
  background-image: linear-gradient(#313ed7, #3470fa);
  border-color: #313ed7;
}
.hero-connect-uiverse .icon {
  position: relative;
}
.hero-connect-uiverse .icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 100%;
}
.hero-connect-uiverse .icon::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(-19%, -60%);
  width: 100px;
  height: 33px;
  background-color: transparent;
  border-radius: 12px 22px 2px 2px;
  border-right: solid 2px #ffffff;
  border-top: solid 2px transparent;
}
.hero-connect-uiverse .icon .text-icon {
  color: #ffffff;
  position: absolute;
  font-size: 12px;
  left: -37px;
  top: -38px;
}
.hero-connect-uiverse .icon svg {
  width: 20px;
  height: 20px;
  border: solid 2px transparent;
  display: flex;
}
.hero-connect-uiverse .button:hover .icon svg {
  border: solid 2px #ffffff;
}
.hero-connect-uiverse .padding-left {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #ffffff;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hero-connect-uiverse .padding-left:before {
  content: "";
  width: 2px;
  height: 10px;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hero-connect-uiverse .padding-left:after {
  content: "";
  width: 2px;
  height: 10px;
  background-color: #ffffff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hero-connect-uiverse .padding-left-line {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #ffffff;
  left: -24px;
  top: 11px;
  transform: rotate(-50deg);
}
.hero-connect-uiverse .padding-left-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 100%;
}
.hero-connect-uiverse .padding-left-text {
  color: #ffffff;
  font-size: 12px;
  position: absolute;
  white-space: nowrap;
  transform: rotate(50deg);
  bottom: 30px;
  left: -67px;
}
.hero-connect-uiverse .padding-right {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #ffffff;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hero-connect-uiverse .padding-right:before {
  content: "";
  width: 2px;
  height: 10px;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hero-connect-uiverse .padding-right:after {
  content: "";
  width: 2px;
  height: 10px;
  background-color: #ffffff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hero-connect-uiverse .padding-right-line {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #ffffff;
  right: -24px;
  top: 11px;
  transform: rotate(50deg);
}
.hero-connect-uiverse .padding-right-line::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 100%;
}
.hero-connect-uiverse .padding-right-text {
  color: #ffffff;
  font-size: 12px;
  position: absolute;
  white-space: nowrap;
  transform: rotate(-50deg);
  bottom: 34px;
  left: 21px;
}
.hero-connect-uiverse .background {
  position: absolute;
}
.hero-connect-uiverse .background::before {
  content: "";
  position: absolute;
  right: 27px;
  bottom: -70px;
  width: 100px;
  height: 53px;
  background-color: transparent;
  border-radius: 0px 0px 22px 22px;
  border-right: solid 2px #ffffff;
  border-bottom: solid 2px transparent;
}
.hero-connect-uiverse .background::after {
  content: "";
  position: absolute;
  right: 25px;
  bottom: -20px;
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 100%;
}
.hero-connect-uiverse .background-text {
  position: absolute;
  color: #ffffff;
  font-size: 12px;
  bottom: -70px;
  left: -115px;
}
.hero-connect-uiverse .border {
  position: absolute;
  right: 0;
  top: 0;
}
.hero-connect-uiverse .border:before {
  content: "";
  width: 15px;
  height: 15px;
  border: solid 2px #ffffff;
  position: absolute;
  right: 0%;
  top: 0;
  transform: translate(50%, -50%);
  border-radius: 100%;
}
.hero-connect-uiverse .border:after {
  content: "";
  width: 2px;
  height: 25px;
  background-color: #ffffff;
  position: absolute;
  right: -10px;
  top: -15px;
  transform: translate(50%, -50%) rotate(60deg);
}
.hero-connect-uiverse .border .border-text {
  position: absolute;
  color: #ffffff;
  font-size: 12px;
  right: -112px;
  top: -30px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hero-connect-uiverse {
    min-width: 132px;
    min-height: 62px;
  }
  .hero-connect-uiverse .button {
    font-size: 11px;
    height: 46px;
    padding: 0 14px;
  }
  .hero-connect-uiverse .button:hover .hide,
  .hero-connect-uiverse .button:hover .icon::before,
  .hero-connect-uiverse .button:hover .icon::after {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-connect-uiverse .hide { transition: none; }
}


/* Revision lock: preserve hero geometry; only recolor the supplied LET'S CONNECT component. */
.hero-connect-uiverse .button {
  background-image:linear-gradient(#2b2d31,#17191d)!important;
  border-color:#0f1114!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(23,25,29,.16)!important;
}
.hero-connect-uiverse .button:active {
  background-image:linear-gradient(#17191d,#2b2d31)!important;
  border-color:#0f1114!important;
}