:root {
  --teal: #004652;
  --deep: #00262d;
  --orange: #ff6700;
  --soft: #f4fbfb;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--deep);
  background:
    radial-gradient(circle at 80% 16%, rgba(255,103,0,.12), transparent 32%),
    radial-gradient(circle at 12% 82%, rgba(0,70,82,.11), transparent 34%),
    linear-gradient(rgba(0,70,82,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,70,82,.045) 1px, transparent 1px),
    #fff;
  background-size: auto, auto, 62px 62px, 62px 62px, auto;
  overflow-x: hidden;
}

.login-header,
.login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px clamp(20px, 5vw, 80px);
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(0,70,82,.1);
  backdrop-filter: blur(18px);
}

.login-logo {
  position: relative;
  display: block;
  width: 300px;
  max-width: 54vw;
  isolation: isolate;
}

.login-logo img {
  display: block;
  width: 100%;
  height: auto;
  content: url("../assets/efforts4u-logo-final-header-no4.png?v=14");
}

.pp-jump-four {
  position: absolute;
  left: 64.72%;
  top: 32.48%;
  width: 9.35%;
  height: 37.25%;
  z-index: 5;
  pointer-events: none;
  background: url("../assets/logo-four-jump.png") center / contain no-repeat;
  transform-origin: 50% 88%;
  animation: loginLogoJump 2.18s cubic-bezier(.42,0,.18,1) infinite both;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.16));
}

.footer-login-logo .pp-jump-four {
  left: 67.18%;
  top: 33.54%;
  width: 10.78%;
  height: 36.35%;
}

.login-logo:hover .pp-jump-four { animation-duration: 1.22s; }

@keyframes loginLogoJump {
  0%, 74%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  10% { transform: translate3d(0,-2px,0) rotate(-.55deg) scale(1.006); }
  22% { transform: translate3d(0,-8px,0) rotate(-2.25deg) scale(1.035); }
  36% { transform: translate3d(0,-3px,0) rotate(.85deg) scale(1.012); }
  48% { transform: translate3d(0,.65px,0) rotate(1.25deg) scale(.992); }
  61% { transform: translate3d(0,-3.2px,0) rotate(-.35deg) scale(1.01); }
}

.login-header nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-weight: 900;
}

a { color: inherit; text-decoration: none; }

.login-header nav a {
  transition: color .25s ease, transform .25s ease;
}

.login-header nav a:hover {
  color: var(--orange);
  transform: translateY(-2px);
}

.login-main {
  min-height: calc(100vh - 180px);
  padding: clamp(62px, 9vw, 140px) clamp(20px, 5vw, 92px);
}

.login-hero {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
}

.login-copy > span,
.login-card small {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--teal);
  font-weight: 900;
  letter-spacing: 3px;
}

.login-copy > span i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 10px rgba(255,103,0,.12);
}

.login-copy h1 {
  margin: 18px 0;
  font: 900 clamp(64px, 10vw, 150px)/.88 "Manrope", sans-serif;
  color: var(--teal);
  letter-spacing: -7px;
}

.login-copy p {
  max-width: 760px;
  font-size: clamp(19px, 1.6vw, 27px);
  line-height: 1.65;
  color: rgba(0,38,45,.7);
}

.login-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.login-btn,
.login-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 62px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), #ff8a1f);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 20px 44px rgba(255,103,0,.24);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.login-btn:hover,
.login-card button:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(255,103,0,.32);
}

.login-link {
  color: var(--teal);
  font-weight: 900;
  border-bottom: 1px solid rgba(0,70,82,.32);
  padding-bottom: 8px;
}

.login-card {
  display: grid;
  gap: 18px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(0,70,82,.12);
  border-radius: 38px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 34px 100px rgba(0,70,82,.13);
}

.login-card label {
  display: grid;
  gap: 10px;
  color: var(--teal);
  font-weight: 900;
}

.login-card input {
  width: 100%;
  border: 1px solid rgba(0,70,82,.16);
  border-radius: 20px;
  padding: 18px 20px;
  font: 800 16px/1.2 "DM Sans", sans-serif;
  color: var(--deep);
  outline: none;
}

.login-card input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 5px rgba(255,103,0,.12);
}

.login-note {
  color: rgba(0,38,45,.62);
  line-height: 1.55;
}

.login-success {
  display: none;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0,70,82,.08);
  color: var(--teal);
  font-weight: 900;
}

.login-success.show { display: block; }

.login-footer {
  justify-content: flex-start;
  border-top: 1px solid rgba(0,70,82,.1);
  border-bottom: 0;
}

.login-footer .login-logo { width: 260px; }

.login-footer p {
  font-weight: 900;
  color: rgba(0,38,45,.68);
}

@media (max-width: 900px) {
  .login-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .login-header nav {
    flex-wrap: wrap;
    gap: 18px;
  }

  .login-hero {
    grid-template-columns: 1fr;
  }

  .login-copy h1 {
    letter-spacing: -4px;
  }
}

@media (max-width: 620px) {
  .login-logo { width: 252px; max-width: 78vw; }
  .login-copy h1 { font-size: 58px; }
  .login-card { border-radius: 26px; }
}

/* Final logo symbol animation lock for Partner Login */
.login-logo.pp-logo-jump {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.login-logo.pp-logo-jump .pp-jump-four {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  left: 64.72% !important;
  top: 32.48% !important;
  width: 9.35% !important;
  height: 37.25% !important;
  animation: loginVisibleSymbolJump84 1.5s cubic-bezier(.34,0,.18,1) infinite !important;
  animation-play-state: running !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}

.footer-login-logo.pp-logo-jump .pp-jump-four {
  left: 67.18% !important;
  top: 33.54% !important;
  width: 10.78% !important;
  height: 36.35% !important;
}

@keyframes loginVisibleSymbolJump84 {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  16% { transform: translate3d(0,-5px,0) rotate(-.7deg) scale(1.025); }
  34% { transform: translate3d(0,-16px,0) rotate(-3.4deg) scale(1.1); }
  51% { transform: translate3d(0,1.5px,0) rotate(1.4deg) scale(.985); }
  68% { transform: translate3d(0,-6px,0) rotate(-.5deg) scale(1.035); }
  84% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}

@media (max-width: 620px) {
  .login-logo.pp-logo-jump .pp-jump-four {
    left: 64.9% !important;
    top: 32.9% !important;
    width: 9.5% !important;
    height: 36.8% !important;
  }

  .footer-login-logo.pp-logo-jump .pp-jump-four {
    left: 67.25% !important;
    top: 33.7% !important;
    width: 10.85% !important;
    height: 36.1% !important;
  }
}

/* No-stop logo symbol motion */
.login-logo.pp-logo-jump .pp-jump-four {
  animation-name: loginAlwaysMovingJump85 !important;
  animation-duration: 1.18s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  animation-play-state: running !important;
}

.login-logo.pp-logo-jump:hover .pp-jump-four {
  animation-duration: 1.18s !important;
}

@keyframes loginAlwaysMovingJump85 {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  12% { transform: translate3d(0,-4px,0) rotate(-.7deg) scale(1.02); }
  28% { transform: translate3d(0,-15px,0) rotate(-3.2deg) scale(1.09); }
  43% { transform: translate3d(0,-5px,0) rotate(.8deg) scale(1.03); }
  54% { transform: translate3d(0,1.6px,0) rotate(1.7deg) scale(.985); }
  68% { transform: translate3d(0,-6px,0) rotate(-.8deg) scale(1.035); }
  84% { transform: translate3d(0,-1px,0) rotate(.25deg) scale(1.006); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}

/* TRUE FINAL: visible partner login logo-symbol dance */
.login-logo.pp-logo-jump img {
  content: url("../assets/efforts4u-logo-final-header-no4.png?v=15") !important;
}

.login-logo.pp-logo-jump .pp-jump-four {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 999 !important;
  background: url("../assets/logo-four-jump.png?v=15") center / contain no-repeat !important;
  animation: loginFourVisibleDance86 1.08s linear infinite !important;
  transform-origin: 50% 86% !important;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.22)) saturate(1.08) !important;
}

@keyframes loginFourVisibleDance86 {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  10% { transform: translate3d(0,-5px,0) rotate(-1deg) scale(1.04); }
  23% { transform: translate3d(0,-18px,0) rotate(-5deg) scale(1.16); }
  38% { transform: translate3d(0,-6px,0) rotate(1.5deg) scale(1.05); }
  52% { transform: translate3d(0,3px,0) rotate(2.4deg) scale(.96); }
  66% { transform: translate3d(0,-9px,0) rotate(-1.5deg) scale(1.07); }
  82% { transform: translate3d(0,-2px,0) rotate(.5deg) scale(1.015); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}