/* =========================================================
   V558 TRUE HTML/CSS LOGIN
   IMPORTANT: only staff photo is raster. All text/UI is live HTML/CSS.
   ========================================================= */

.v557x-login-page{
  grid-template-columns:62.5% 37.5%!important;
  min-height:720px!important;
  background:#f8f9f8!important;
  font-family:Arial,Helvetica,sans-serif!important;
}

/* LEFT */
.v557x-visual{
  position:relative!important;
  overflow:hidden!important;
  background:#00462c!important;
  isolation:isolate!important;
}
.v557x-visual-art{
  position:absolute!important;
  inset:0!important;
  z-index:-4!important;
  background:
    linear-gradient(90deg,rgba(0,65,39,.96) 0%,rgba(0,69,41,.86) 22%,rgba(0,73,43,.58) 57%,rgba(0,73,43,.25) 82%,rgba(0,73,43,.08) 100%),
    linear-gradient(180deg,rgba(0,40,25,.04),rgba(0,40,25,.40)),
    url("/assets/v558-team-photo-real.jpg") 58% center/cover no-repeat!important;
  transform:scale(1.005);
}

/* golden curved separator */
.v557x-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:20!important;
  right:-34px!important;
  top:-4%!important;
  width:66px!important;
  height:108%!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#f6dd7c 0%,#d5a932 50%,#f2ce62 100%)!important;
  box-shadow:0 0 22px rgba(205,158,39,.20)!important;
  pointer-events:none!important;
}

/* VIFOOD brand at top */
.v558h-brand-top{
  position:absolute;
  z-index:4;
  left:4.3vw;
  top:5.2vh;
  color:#fff;
}
.v558h-logo{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  font-weight:900;
  font-size:clamp(34px,3.2vw,56px);
  line-height:1;
  letter-spacing:-.055em;
  text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.v558h-logo-vi{color:#fff}
.v558h-logo-food{color:#f4bd39}
.v558h-logo-leaf{
  position:absolute;
  right:8px;
  top:-14px;
  color:#4bc36d;
  font-style:normal;
  font-size:.38em;
  transform:rotate(38deg);
}
.v558h-brand-top small{
  display:block;
  margin-top:8px;
  font-size:clamp(11px,.86vw,14px);
  color:rgba(255,255,255,.95);
  font-weight:500;
  letter-spacing:.01em;
}

/* Hero copy */
.v558h-hero-copy{
  position:absolute;
  z-index:4;
  left:4.3vw;
  top:21%;
  width:min(42%,540px);
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.20);
}
.v558h-hero-copy h1{
  margin:0 0 18px;
  font-size:clamp(46px,5.0vw,84px);
  line-height:.98;
  font-weight:900;
  letter-spacing:-.025em;
}
.v558h-hero-copy h2,
.v558h-hero-copy h3{
  margin:0;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.005em;
}
.v558h-hero-copy h2{
  font-size:clamp(23px,2.3vw,39px);
  color:#fff;
}
.v558h-hero-copy h3{
  margin-top:8px;
  font-size:clamp(23px,2.3vw,39px);
  color:#f4c04a;
}
.v558h-gold-line{
  width:54%;
  height:2px;
  margin:27px 0 28px;
  background:linear-gradient(90deg,#f3c44f,rgba(243,196,79,.12));
}
.v558h-values{
  display:grid;
  gap:18px;
}
.v558h-value{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-width:0;
}
.v558h-value b{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:50%;
  background:rgba(0,137,76,.83);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-size:25px;
  line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.v558h-value span{
  display:block;
  font-size:clamp(15px,1.15vw,20px);
  line-height:1.2;
  font-weight:600;
  color:#fff;
}
.v558h-value em{
  display:block;
  margin-top:3px;
  font-style:normal;
  color:#fff;
}

/* Decorative digital globe, pure CSS/HTML */
.v558h-tech{
  position:absolute;
  z-index:3;
  left:47%;
  bottom:2.5%;
  width:285px;
  height:205px;
  pointer-events:none;
  opacity:.92;
}
.v558h-tech::before,
.v558h-tech::after{
  content:"";
  position:absolute;
  left:-120px;
  bottom:34px;
  width:520px;
  height:150px;
  border-bottom:2px solid rgba(244,190,58,.78);
  border-radius:50%;
  transform:rotate(-5deg);
}
.v558h-tech::after{
  bottom:12px;
  border-bottom-color:rgba(0,221,131,.28);
  transform:rotate(4deg);
}
.v558h-orbit{
  position:absolute;
  left:76px;
  top:27px;
  width:145px;
  height:145px;
  border:1px solid rgba(0,234,142,.38);
  border-radius:50%;
  box-shadow:0 0 25px rgba(0,218,127,.15);
}
.v558h-orbit.o2{
  left:51px;
  top:3px;
  width:195px;
  height:195px;
  opacity:.55;
}
.v558h-globe{
  position:absolute;
  left:107px;
  top:57px;
  display:grid;
  place-items:center;
  width:84px;
  height:84px;
  border-radius:50%;
  color:#04e28a;
  font-size:70px;
  background:radial-gradient(circle,rgba(0,226,138,.20),rgba(0,104,61,.20) 55%,rgba(0,51,30,.15));
  box-shadow:0 0 34px rgba(0,230,139,.28);
}
.v558h-node{
  position:absolute;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(0,240,147,.46);
  border-radius:50%;
  background:rgba(0,94,56,.78);
  color:#5df4b5;
  font-size:21px;
  box-shadow:0 0 17px rgba(0,226,137,.20);
}
.v558h-node.n1{left:35px;top:75px}
.v558h-node.n2{right:15px;top:55px}
.v558h-node.n3{right:27px;bottom:14px}
.v558h-node.n4{left:72px;bottom:0}

/* RIGHT SIDE — all live HTML/CSS */
.v557x-login-side{
  background:
    radial-gradient(circle at 86% 8%,rgba(223,228,225,.45) 1px,transparent 1.5px) 0 0/14px 14px,
    #fafbfa!important;
}
.v557x-card{
  width:min(84%,470px)!important;
  padding:46px 42px 39px!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 24px 62px rgba(15,23,42,.13)!important;
}
.v557x-card,
.v557x-card *{
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.v557x-welcome{font-size:15px!important}
.v557x-brand{font-size:50px!important}
.v557x-subbrand{font-size:12px!important}
.v557x-input-wrap input{
  height:54px!important;
  font-size:14px!important;
  border-radius:9px!important;
}
.v557x-submit{
  height:54px!important;
  font-size:14px!important;
}
.v557x-google{height:52px!important}
.v557x-secure{font-size:12px!important}
.v557x-copyright{font-size:12px!important}

/* Responsive */
@media(max-width:1180px){
  .v557x-login-page{grid-template-columns:58% 42%!important}
  .v558h-hero-copy{width:52%;left:4vw}
  .v558h-tech{left:42%;transform:scale(.84);transform-origin:left bottom}
  .v558h-value{grid-template-columns:45px 1fr;gap:11px}
  .v558h-value b{width:43px;height:43px;font-size:21px}
}
@media(max-width:1100px){
  .v557x-login-page{
    display:flex!important;
    flex-direction:column!important;
    min-height:100dvh!important;
    height:auto!important;
    overflow:auto!important;
  }
  .v557x-visual{
    flex:0 0 245px!important;
    min-height:245px!important;
  }
  .v557x-visual-art{
    background:
      linear-gradient(90deg,rgba(0,65,39,.84),rgba(0,65,39,.28)),
      url("/assets/v558-team-photo-real.jpg") center 34%/cover no-repeat!important;
  }
  .v557x-visual::after{display:none!important}
  .v558h-brand-top{left:22px;top:24px}
  .v558h-logo{font-size:34px}
  .v558h-brand-top small{font-size:10px}
  .v558h-hero-copy{
    left:22px;
    top:105px;
    width:72%;
  }
  .v558h-hero-copy h1{font-size:34px;margin-bottom:7px}
  .v558h-hero-copy h2{font-size:15px}
  .v558h-hero-copy h3{font-size:15px;margin-top:4px}
  .v558h-gold-line{margin:10px 0 0;width:50%}
  .v558h-values,.v558h-tech{display:none}
  .v557x-login-side{padding:0 12px 24px!important}
  .v557x-card{
    width:min(calc(100% - 12px),520px)!important;
    margin-top:-24px!important;
    padding:31px 24px 27px!important;
    border-radius:18px!important;
  }
  .v557x-copyright{
    position:static!important;
    margin-top:22px!important;
  }
}