:root{
  --navy:#030B17;
  --navy2:#061527;
  --panel:#071A31;
  --panel2:#0B213C;
  --blue:#3F7CFF;
  --blue2:#5EA0FF;
  --cyan:#64D7FF;
  --ink:#EAF2FF;
  --muted:#95A8C4;
  --line:rgba(130,170,230,.18);
  --white:#FFFFFF;
  --shadow:0 30px 90px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--navy);color:var(--ink)}
a{text-decoration:none;color:inherit}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);background-size:28px 28px}
.login-page{min-height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 10%,rgba(63,124,255,.20),transparent 28%),linear-gradient(145deg,#020711,#071B31)}
.glow{position:fixed;border-radius:999px;filter:blur(24px);animation:float 11s ease-in-out infinite}
.glow-one{width:420px;height:420px;left:8%;top:11%;background:rgba(63,124,255,.20)}
.glow-two{width:500px;height:500px;right:2%;bottom:1%;background:rgba(100,215,255,.16);animation-delay:1.7s}
.glow-three{width:230px;height:230px;right:25%;top:18%;background:rgba(94,160,255,.18);animation-delay:3.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
.login-stage{position:relative;z-index:2;width:min(760px,92vw);display:grid;place-items:center;text-align:center}
.login-panel{width:100%;padding:70px 58px;border:1px solid var(--line);border-radius:40px;background:linear-gradient(180deg,rgba(11,33,60,.72),rgba(3,11,23,.72));box-shadow:var(--shadow);backdrop-filter:blur(24px)}
.login-logo{display:block;width:min(360px,82vw);margin:0 auto 30px;object-fit:contain}
.divider{width:112px;height:1px;margin:0 auto 30px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.login-panel h1{max-width:650px;margin:0 auto 18px;font-size:54px;line-height:1.02;letter-spacing:-.055em;text-align:center}
.login-panel p{max-width:520px;margin:0 auto 34px;color:var(--muted);font-size:20px;text-align:center;line-height:1.55}
.primary-button{display:inline-flex;align-items:center;justify-content:center;min-width:190px;border:0;border-radius:18px;padding:17px 26px;background:linear-gradient(90deg,var(--blue),var(--blue2),var(--cyan));color:white;font-size:16px;font-weight:900;box-shadow:0 18px 42px rgba(63,124,255,.34);cursor:pointer}
.micro{display:block;margin-top:20px;color:#7489A9;font-size:13px;text-align:center}
.login-footer{position:fixed;bottom:22px;left:0;right:0;text-align:center;color:#7489A9;font-size:13px}

.app-page{background:linear-gradient(145deg,#030B17,#071A31);min-height:100vh}
.app-shell{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar{height:100vh;position:sticky;top:0;padding:26px 20px;background:rgba(3,11,23,.76);border-right:1px solid var(--line);backdrop-filter:blur(20px)}
.brand-block{padding:12px 10px 34px}
.brand-block img{width:210px;display:block}
.nav{display:grid;gap:8px}
.nav a{color:var(--muted);font-weight:800;padding:13px 15px;border-radius:15px;transition:.2s}
.nav a.active,.nav a:hover{background:rgba(63,124,255,.14);color:white}
.sidebar-card{position:absolute;left:20px;right:20px;bottom:86px;border:1px solid var(--line);border-radius:22px;padding:18px;background:linear-gradient(180deg,rgba(11,33,60,.82),rgba(7,26,49,.64))}
.sidebar-card span,.sidebar-card small{display:block;color:var(--muted);font-size:13px}.sidebar-card strong{display:block;margin:7px 0;color:white}
.logout-button{position:absolute;left:20px;right:20px;bottom:24px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:white;font-weight:900;border-radius:16px;padding:13px;cursor:pointer}
.main{padding:34px;max-width:1340px;width:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.eyebrow{color:var(--cyan);font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.topbar h1{font-size:42px;line-height:1;letter-spacing:-.05em;margin:0}
.user-pill{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--muted)}
.user-pill span{width:10px;height:10px;border-radius:50%;background:#5DFFB3;box-shadow:0 0 16px rgba(93,255,179,.7)}
.hero-card{position:relative;overflow:hidden;min-height:440px;border:1px solid var(--line);border-radius:38px;padding:46px;background:radial-gradient(circle at 80% 12%,rgba(100,215,255,.20),transparent 32%),linear-gradient(145deg,rgba(11,33,60,.95),rgba(3,11,23,.88));display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;box-shadow:var(--shadow)}
.tag{display:inline-flex;border:1px solid rgba(100,215,255,.26);background:rgba(100,215,255,.08);color:#BEEFFF;border-radius:999px;padding:9px 13px;font-size:13px;font-weight:900}
.hero-card h2{max-width:720px;margin:20px 0 18px;font-size:58px;line-height:1;letter-spacing:-.06em}
.hero-card p{max-width:720px;color:var(--muted);font-size:19px;line-height:1.65}
.signal-card{border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));padding:28px;backdrop-filter:blur(18px)}
.signal-top,.signal-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.signal-top span,.signal-row span,.signal-meter small{color:var(--muted)}
.signal-top b,.signal-row b{color:#C9F3FF;background:rgba(100,215,255,.10);border:1px solid rgba(100,215,255,.18);border-radius:999px;padding:6px 10px;font-size:12px}
.signal-meter{width:180px;height:180px;border-radius:50%;margin:28px auto;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--cyan) 0 84%,rgba(255,255,255,.10) 84% 100%);box-shadow:inset 0 0 0 16px rgba(3,11,23,.9)}
.signal-meter strong{font-size:44px}.signal-meter small{display:block;max-width:110px;margin:auto;font-size:12px}
.signal-row{padding:14px 0;border-top:1px solid var(--line)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 0}
.kpi-grid article,.content-card,.contact-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(11,33,60,.82),rgba(7,26,49,.58));border-radius:28px;box-shadow:0 20px 58px rgba(0,0,0,.20)}
.kpi-grid article{padding:24px}.kpi-grid span{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:14px;background:rgba(63,124,255,.16);color:#BFD8FF;font-weight:900}.kpi-grid strong{display:block;margin:18px 0 8px;font-size:19px}.kpi-grid p,.content-card p,.contact-card p{color:var(--muted);line-height:1.65}
.content-card,.contact-card{padding:36px;margin:24px 0}
.content-card h2,.contact-card h2{margin:0 0 16px;font-size:36px;line-height:1.05;letter-spacing:-.04em}
.rich-text p{margin:0 0 14px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.section-head span{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px}
.file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.file-card{display:block;border:1px solid var(--line);border-radius:22px;padding:22px;background:rgba(255,255,255,.035);transition:.2s}
.file-card:hover{transform:translateY(-3px);border-color:rgba(100,215,255,.34)}
.file-card strong{display:block;font-size:20px;margin-bottom:8px}
.file-card span{display:block;color:var(--muted);line-height:1.55}
.file-card em{display:inline-block;margin-top:16px;color:#BEEFFF;font-style:normal;font-weight:900}
.updates-list{display:grid;gap:14px}
.update-item{display:grid;grid-template-columns:120px 1fr;gap:20px;border-left:4px solid var(--cyan);padding:12px 0 12px 18px}
.update-item time{color:#BEEFFF;font-weight:900}.update-item strong{display:block;margin-bottom:5px}.update-item span{color:var(--muted)}
.timeline{display:grid;gap:14px}
.timeline div{display:grid;grid-template-columns:240px 1fr;gap:20px;border-left:4px solid var(--blue);padding:12px 0 12px 18px}
.timeline strong{font-size:17px}.timeline span{color:var(--muted)}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:24px;background:radial-gradient(circle at 80% 20%,rgba(100,215,255,.14),transparent 36%),linear-gradient(180deg,rgba(11,33,60,.9),rgba(7,26,49,.68))}
.contact-card a{background:linear-gradient(90deg,var(--blue),var(--blue2),var(--cyan));color:white;border-radius:17px;padding:16px 20px;font-weight:900}
.lock-screen{display:none;position:fixed;inset:0;z-index:20;background:radial-gradient(circle at 50% 10%,rgba(63,124,255,.18),transparent 28%),linear-gradient(145deg,#020711,#071B31);align-items:center;justify-content:center}
.lock-card{width:min(470px,90vw);border:1px solid var(--line);border-radius:32px;background:linear-gradient(180deg,rgba(11,33,60,.88),rgba(3,11,23,.88));padding:38px;text-align:center;box-shadow:var(--shadow)}
.lock-card img{width:230px;margin-bottom:20px}.lock-card p{color:var(--muted)}.back-link{display:block;margin-top:18px;color:#BEEFFF;font-weight:800}
body.locked .app-shell{filter:blur(7px);pointer-events:none}
body.locked .lock-screen{display:flex}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:1050px){
  .app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.sidebar-card,.logout-button{position:relative;left:auto;right:auto;bottom:auto;margin-top:18px;width:100%}.main{padding:20px}.topbar,.section-head,.contact-card{display:block}.user-pill{display:inline-flex;margin-top:16px}.hero-card{grid-template-columns:1fr;padding:30px}.hero-card h2,.login-panel h1{font-size:40px}.kpi-grid,.file-grid{grid-template-columns:1fr}.timeline div,.update-item{grid-template-columns:1fr}.login-panel{padding:44px 24px}.login-logo{width:min(300px,80vw)}
}


/* PAYLIO V4 LOGIN */
.login-v4{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 10%, rgba(63,124,255,.18), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(15,100,255,.24), transparent 32%),
    linear-gradient(145deg,#020711 0%,#031122 48%,#061D36 100%);
}

.v4-panel{
  width:min(820px,92vw);
  padding:68px 40px 54px;
  border:none;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  text-align:center;
}

.v4-logo{
  width:min(400px,78vw);
  margin:0 auto 52px;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.42));
}

.v4-headline{
  margin:0 auto;
  max-width:780px;
  text-align:center;
  font-size:clamp(42px,6vw,76px);
  line-height:1.16;
  letter-spacing:-.055em;
  font-weight:900;
  color:#F7FAFF;
  text-shadow:0 8px 22px rgba(0,0,0,.42);
}

.v4-headline span{
  color:#5EA0FF;
  text-shadow:0 0 28px rgba(94,160,255,.36);
}

.v4-subtext{
  margin:38px auto 34px!important;
  max-width:520px!important;
  color:#B9C5D8!important;
  font-size:20px!important;
  text-align:center!important;
}

.secure-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:0 auto 36px;
  color:#3F7CFF;
}

.secure-divider i{
  display:block;
  width:130px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(63,124,255,.55),transparent);
}

.secure-divider span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(63,124,255,.45);
  border-radius:50%;
  color:#62A4FF;
  box-shadow:0 0 30px rgba(63,124,255,.18);
  font-size:18px;
}

.v4-button{
  min-width:360px;
  height:76px;
  border-radius:18px;
  font-size:22px;
  gap:22px;
  background:linear-gradient(90deg,#246BFF 0%,#3F8CFF 54%,#58C9FF 100%);
  border:1px solid rgba(146,202,255,.46);
  box-shadow:
    0 22px 60px rgba(36,107,255,.34),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.v4-button .lock-icon{
  font-size:19px;
  opacity:.9;
}

.v4-button .arrow{
  font-size:34px;
  line-height:1;
  margin-top:-2px;
}

.v4-footer{
  display:grid;
  gap:10px;
  bottom:28px;
  color:#7F90AA;
}

.v4-footer small{
  color:#7F90AA;
  font-size:14px;
}

.wave{
  position:fixed;
  pointer-events:none;
  border-radius:50%;
  opacity:.55;
}

.wave-top{
  width:520px;
  height:520px;
  left:-270px;
  top:-270px;
  border:1px solid rgba(63,124,255,.30);
  box-shadow:
    0 0 0 32px rgba(63,124,255,.045),
    0 0 0 68px rgba(63,124,255,.035),
    0 0 0 108px rgba(63,124,255,.025);
}

.wave-bottom{
  width:720px;
  height:720px;
  right:-270px;
  bottom:-380px;
  background:
    radial-gradient(circle, rgba(100,215,255,.5) 1.2px, transparent 1.8px);
  background-size:18px 18px;
  transform:rotate(-22deg);
  opacity:.42;
  filter:drop-shadow(0 0 35px rgba(63,124,255,.55));
}

@media(max-width:700px){
  .v4-panel{
    padding:36px 18px 40px;
  }
  .v4-logo{
    width:min(300px,82vw);
    margin-bottom:38px;
  }
  .v4-headline{
    font-size:clamp(36px,11vw,52px);
  }
  .v4-subtext{
    font-size:17px!important;
    margin-top:28px!important;
  }
  .secure-divider i{
    width:78px;
  }
  .v4-button{
    min-width:0;
    width:100%;
    height:66px;
    font-size:19px;
  }
  .wave-bottom{
    right:-430px;
  }
}


/* PAYLIO V5 PORTAL IMAGE */
.visual-preview{
  overflow:hidden;
}

.portal-preview-image{
  display:block;
  width:100%;
  height:auto;
  margin-top:22px;
  border-radius:24px;
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.38);
  background:#030B17;
}

.portal-preview-image:hover{
  transform:scale(1.005);
  transition:transform .25s ease;
}


/* PAYLIO V6 - SIMPLE LOGIN + IMAGE PORTAL */
.simple-portal{
  background:
    radial-gradient(circle at 18% 5%, rgba(63,124,255,.18), transparent 28%),
    radial-gradient(circle at 86% 80%, rgba(100,215,255,.15), transparent 30%),
    linear-gradient(145deg,#020711 0%,#031122 48%,#061D36 100%);
}

.simple-main{
  min-height:100vh;
  width:min(1500px,94vw);
  margin:0 auto;
  padding:32px 0 54px;
}

.simple-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:42px;
}

.simple-logo{
  width:220px;
  max-width:45vw;
  display:block;
}

.simple-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.user-status{
  color:#95A8C4;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(255,255,255,.04);
  font-size:14px;
}

.simple-logout{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:white;
  font-weight:900;
  border-radius:14px;
  padding:11px 15px;
  cursor:pointer;
}

.simple-hero{
  text-align:center;
}

.simple-hero h1{
  margin:0 auto 12px;
  max-width:900px;
  font-size:clamp(34px,5vw,64px);
  line-height:1.05;
  letter-spacing:-.05em;
  color:#F7FAFF;
}

.simple-hero > p:not(.eyebrow){
  margin:0 auto 28px;
  color:#95A8C4;
  font-size:18px;
}

.image-open-button{
  display:block;
  width:100%;
  padding:0;
  border:1px solid rgba(100,215,255,.24);
  border-radius:28px;
  background:rgba(255,255,255,.035);
  cursor:zoom-in;
  overflow:hidden;
  box-shadow:0 34px 100px rgba(0,0,0,.42);
}

.main-overview-image{
  display:block;
  width:100%;
  height:auto;
  background:#030B17;
}

.image-open-button:hover{
  transform:translateY(-2px);
  border-color:rgba(100,215,255,.5);
  box-shadow:0 40px 120px rgba(32,105,255,.28);
  transition:.22s ease;
}

.image-modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,6,16,.94);
  backdrop-filter:blur(12px);
}

.image-modal.open{
  display:flex;
}

.image-modal img{
  display:block;
  max-width:96vw;
  max-height:92vh;
  width:auto;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(100,215,255,.25);
  box-shadow:0 30px 120px rgba(0,0,0,.6);
}

.modal-close{
  position:fixed;
  top:22px;
  right:26px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:white;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  z-index:1000;
}

.modal-close:hover{
  background:rgba(94,160,255,.25);
}

@media(max-width:760px){
  .simple-main{
    padding:22px 0 36px;
  }
  .simple-header{
    display:grid;
    justify-items:center;
    margin-bottom:30px;
  }
  .simple-actions{
    flex-wrap:wrap;
    justify-content:center;
  }
  .simple-logo{
    width:200px;
    max-width:75vw;
  }
  .image-open-button{
    border-radius:18px;
  }
}


/* PAYLIO V8 - ORIGINAL APPROVED LOGO + CUSTOM LOGIN */
.login-v8{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 10%, rgba(63,124,255,.18), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(15,100,255,.24), transparent 32%),
    linear-gradient(145deg,#020711 0%,#031122 48%,#061D36 100%);
}

.v8-login-shell{
  position:relative;
  z-index:4;
  width:min(1180px,92vw);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}

.v8-brand{
  text-align:center;
}

.v8-logo{
  display:block;
  width:min(420px,82vw);
  height:auto;
  margin:0 auto 48px;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.42));
}

.v8-brand h1{
  margin:0 auto;
  max-width:780px;
  text-align:center;
  font-size:clamp(44px,5.4vw,74px);
  line-height:1.12;
  letter-spacing:-.055em;
  font-weight:900;
  color:#F7FAFF;
  text-shadow:0 8px 22px rgba(0,0,0,.42);
}

.v8-brand h1 span{
  color:#5EA0FF;
  text-shadow:0 0 28px rgba(94,160,255,.36);
}

.v8-brand p{
  margin:36px auto 0;
  max-width:520px;
  color:#B9C5D8;
  font-size:20px;
  text-align:center;
  line-height:1.55;
}

.v8-login-card{
  width:100%;
  border:1px solid rgba(130,170,230,.20);
  border-radius:34px;
  padding:42px;
  background:linear-gradient(180deg,rgba(11,33,60,.82),rgba(3,11,23,.72));
  box-shadow:0 30px 90px rgba(0,0,0,.38);
  backdrop-filter:blur(24px);
}

.v8-card-label{
  display:inline-flex;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(94,160,255,.12);
  border:1px solid rgba(94,160,255,.24);
  color:#BEEFFF;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.v8-login-card h2{
  margin:22px 0 8px;
  color:white;
  font-size:38px;
  line-height:1;
  letter-spacing:-.04em;
}

.v8-card-text{
  margin:0 0 28px;
  color:#95A8C4;
  line-height:1.6;
}

.v8-login-card label{
  display:block;
  margin:16px 0 8px;
  color:#DDEBFF;
  font-size:13px;
  font-weight:900;
}

.v8-login-card input{
  width:100%;
  height:56px;
  border-radius:16px;
  border:1px solid rgba(130,170,230,.22);
  background:rgba(255,255,255,.055);
  color:white;
  padding:0 16px;
  font-size:16px;
  outline:none;
}

.v8-login-card input::placeholder{
  color:#71849F;
}

.v8-login-card input:focus{
  border-color:rgba(100,215,255,.55);
  box-shadow:0 0 0 4px rgba(63,124,255,.14);
}

.v8-submit{
  width:100%;
  height:60px;
  margin-top:22px;
  border:1px solid rgba(146,202,255,.46);
  border-radius:17px;
  background:linear-gradient(90deg,#246BFF 0%,#3F8CFF 54%,#58C9FF 100%);
  color:white;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
  box-shadow:
    0 22px 60px rgba(36,107,255,.34),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.v8-submit:hover{
  transform:translateY(-1px);
  box-shadow:
    0 26px 70px rgba(36,107,255,.42),
    inset 0 1px 0 rgba(255,255,255,.36);
}

.v8-link-button{
  display:block;
  margin:18px auto 0;
  border:0;
  background:transparent;
  color:#BEEFFF;
  font-weight:800;
  cursor:pointer;
}

.login-message{
  min-height:22px;
  margin:16px 0 0;
  font-size:14px;
  text-align:center;
}

.login-message.error{color:#FFB8B8}
.login-message.success{color:#BEEFFF}

.v8-portal-logo{
  width:230px;
  max-width:52vw;
  object-fit:contain;
}

.lock-card img{
  width:260px;
  max-width:75vw;
  object-fit:contain;
}

@media(max-width:980px){
  .v8-login-shell{
    grid-template-columns:1fr;
    gap:32px;
    padding:32px 0 100px;
  }
  .v8-logo{
    width:min(340px,80vw);
    margin-bottom:34px;
  }
  .v8-brand h1{
    font-size:clamp(38px,10vw,58px);
  }
  .v8-brand p{
    margin-top:26px;
  }
  .v8-login-card{
    padding:30px 22px;
  }
}


/* PAYLIO V10 - ORIGINAL APPROVED LOGO, CORRECT TEXT */
.login-v10{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 10%, rgba(63,124,255,.18), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(15,100,255,.24), transparent 32%),
    linear-gradient(145deg,#020711 0%,#031122 48%,#061D36 100%);
}

.v10-login-shell{
  position:relative;
  z-index:4;
  width:min(1180px,92vw);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}

.v10-brand{
  text-align:center;
}

.v10-logo{
  display:block;
  width:min(360px,70vw);
  height:auto;
  margin:0 auto 48px;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.42));
}

.v10-brand h1{
  margin:0 auto;
  max-width:780px;
  text-align:center;
  font-size:clamp(44px,5.4vw,74px);
  line-height:1.12;
  letter-spacing:-.055em;
  font-weight:900;
  color:#F7FAFF;
  text-shadow:0 8px 22px rgba(0,0,0,.42);
}

.v10-brand h1 span{
  color:#5EA0FF;
  text-shadow:0 0 28px rgba(94,160,255,.36);
}

.v10-brand p{
  margin:36px auto 0;
  max-width:520px;
  color:#B9C5D8;
  font-size:20px;
  text-align:center;
  line-height:1.55;
}

.v10-login-card{
  width:100%;
  border:1px solid rgba(130,170,230,.20);
  border-radius:34px;
  padding:42px;
  background:linear-gradient(180deg,rgba(11,33,60,.82),rgba(3,11,23,.72));
  box-shadow:0 30px 90px rgba(0,0,0,.38);
  backdrop-filter:blur(24px);
}

.v10-card-label{
  display:inline-flex;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(94,160,255,.12);
  border:1px solid rgba(94,160,255,.24);
  color:#BEEFFF;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.v10-login-card h2{
  margin:22px 0 8px;
  color:white;
  font-size:38px;
  line-height:1;
  letter-spacing:-.04em;
}

.v10-card-text{
  margin:0 0 28px;
  color:#95A8C4;
  line-height:1.6;
}

.v10-login-card label{
  display:block;
  margin:16px 0 8px;
  color:#DDEBFF;
  font-size:13px;
  font-weight:900;
}

.v10-login-card input{
  width:100%;
  height:56px;
  border-radius:16px;
  border:1px solid rgba(130,170,230,.22);
  background:rgba(255,255,255,.055);
  color:white;
  padding:0 16px;
  font-size:16px;
  outline:none;
}

.v10-login-card input::placeholder{
  color:#71849F;
}

.v10-login-card input:focus{
  border-color:rgba(100,215,255,.55);
  box-shadow:0 0 0 4px rgba(63,124,255,.14);
}

.v10-submit{
  width:100%;
  height:60px;
  margin-top:22px;
  border:1px solid rgba(146,202,255,.46);
  border-radius:17px;
  background:linear-gradient(90deg,#246BFF 0%,#3F8CFF 54%,#58C9FF 100%);
  color:white;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
  box-shadow:
    0 22px 60px rgba(36,107,255,.34),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.v10-submit:hover{
  transform:translateY(-1px);
  box-shadow:
    0 26px 70px rgba(36,107,255,.42),
    inset 0 1px 0 rgba(255,255,255,.36);
}

.v10-link-button{
  display:block;
  margin:18px auto 0;
  border:0;
  background:transparent;
  color:#BEEFFF;
  font-weight:800;
  cursor:pointer;
}

.login-message{
  min-height:22px;
  margin:16px 0 0;
  font-size:14px;
  text-align:center;
}

.login-message.error{color:#FFB8B8}
.login-message.success{color:#BEEFFF}

.v10-portal-logo{
  width:210px;
  max-width:52vw;
  object-fit:contain;
}

.lock-card img{
  width:230px;
  max-width:75vw;
  object-fit:contain;
}

@media(max-width:980px){
  .v10-login-shell{
    grid-template-columns:1fr;
    gap:32px;
    padding:32px 0 100px;
  }
  .v10-logo{
    width:min(320px,70vw);
    margin-bottom:34px;
  }
  .v10-brand h1{
    font-size:clamp(38px,10vw,58px);
  }
  .v10-brand p{
    margin-top:26px;
  }
  .v10-login-card{
    padding:30px 22px;
  }
}


/* PAYLIO V11 CONTACT MODAL */
.footer-contact-button{
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:0;
}

.footer-contact-button:hover{
  color:#BEEFFF;
}

.contact-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,6,16,.88);
  backdrop-filter:blur(14px);
}

.contact-modal.open{
  display:flex;
}

.contact-box{
  position:relative;
  width:min(560px,94vw);
  border:1px solid rgba(130,170,230,.22);
  border-radius:30px;
  padding:36px;
  background:linear-gradient(180deg,rgba(11,33,60,.94),rgba(3,11,23,.94));
  box-shadow:0 30px 100px rgba(0,0,0,.55);
}

.contact-box h2{
  margin:0 0 10px;
  color:white;
  font-size:36px;
  letter-spacing:-.04em;
}

.contact-box p{
  margin:0 0 24px;
  color:#95A8C4;
}

.contact-box label{
  display:block;
  margin:16px 0 8px;
  color:#DDEBFF;
  font-size:13px;
  font-weight:900;
}

.contact-box input,
.contact-box textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(130,170,230,.22);
  background:rgba(255,255,255,.055);
  color:white;
  padding:15px 16px;
  font-size:16px;
  outline:none;
  resize:vertical;
}

.contact-box input:focus,
.contact-box textarea:focus{
  border-color:rgba(100,215,255,.55);
  box-shadow:0 0 0 4px rgba(63,124,255,.14);
}

.contact-submit{
  width:100%;
  height:58px;
  margin-top:22px;
  border:1px solid rgba(146,202,255,.46);
  border-radius:17px;
  background:linear-gradient(90deg,#246BFF 0%,#3F8CFF 54%,#58C9FF 100%);
  color:white;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
}

.contact-close{
  position:absolute;
  top:18px;
  right:20px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:white;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}


/* PAYLIO V12 FORM SUPPORT */
.hidden-field{
  display:none!important;
}

.thank-you-page{
  position:relative;
  z-index:5;
  width:min(640px,92vw);
  margin:auto;
  text-align:center;
  padding:54px 34px;
  border:1px solid rgba(130,170,230,.22);
  border-radius:34px;
  background:linear-gradient(180deg,rgba(11,33,60,.86),rgba(3,11,23,.78));
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}

.thank-you-logo{
  display:block;
  width:min(300px,70vw);
  margin:0 auto 34px;
}

.thank-you-page h1{
  margin:0 0 12px;
  color:white;
  font-size:42px;
  letter-spacing:-.04em;
}

.thank-you-page p{
  margin:0 0 28px;
  color:#95A8C4;
  font-size:18px;
}


/* PAYLIO V13 INLINE FORM CONFIRMATION */
.contact-status{
  min-height:24px;
  margin:16px 0 0;
  text-align:center;
  font-size:14px;
  font-weight:800;
}

.contact-status.sending{
  color:#BEEFFF;
}

.contact-status.success{
  color:#5DFFB3;
}

.contact-status.error{
  color:#FFB8B8;
}


/* PAYLIO V14 FORM FIX */
form[hidden]{
  display:none!important;
}

.contact-status{
  min-height:24px;
  margin:16px 0 0;
  text-align:center;
  font-size:14px;
  font-weight:800;
}

.contact-status.sending{
  color:#BEEFFF;
}

.contact-status.success{
  color:#5DFFB3;
}

.contact-status.error{
  color:#FFB8B8;
}