:root {
  --bg-darkest:#ffffff;
  --bg-header:#f9fafb;
  --bg-subnav:#2c2950;
  --bg-hero-top:#ffffff;
  --bg-hero-bottom:#ffffff;
  --gold:#587EFF;
  --gold-soft:#8eb0ff;
  --green:#3ddc84;
  --blue-link:#6fa8e0;
  --text-light:#111827;
  --text-muted:#6b7280;
  --text-faint:rgba(107,114,128,0.7);
  --border-soft:#46406b;
  --cube-line:rgba(255,255,255,0.045);
}

/* ===== OVERLAY BASE ===== */
.overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
}
.overlay.visible{
    opacity:1;
    visibility:visible;
}

/* ===== PRELOADER ===== */
#preloader{
    background:radial-gradient(ellipse 900px 400px at 50% 110%, rgba(88,126,255,0.1) 0%, #ffffff 55%, #f3f4f6 100%);
    flex-direction:column;
    gap:26px;
}

.preloader-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    width:300px;
    text-align:center;
}

.preloader-logo{
    height:52px;
    width:auto;
    margin-bottom:4px;
}

.spinner{
    width:58px;
    height:58px;
    border-radius:50%;
    border:4px solid rgba(88,126,255,0.18);
    border-top-color:var(--gold);
    animation:spin .9s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg);}}

.preloader-text{
    font-size:15px;
    font-weight:500;
    color:var(--text-muted);
    letter-spacing:0.2px;
    transition:opacity .22s ease;
}

.preloader-bar-wrap{
    width:100%;
    height:3px;
    background:rgba(88,126,255,0.15);
    border-radius:99px;
    overflow:hidden;
}

.preloader-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--gold-soft), var(--gold), #a8c5ff);
    border-radius:99px;
    transition:width .55s cubic-bezier(.4,0,.2,1);
}

.preloader-step{
    font-size:12px;
    color:var(--text-faint);
    letter-spacing:0.4px;
}

/* ===== MODAL ===== */
#modalOverlay{
    background:rgba(4,4,10,0.78);
    backdrop-filter:blur(4px);
    padding:24px;
}

.modal-card{
    position:relative;
    width:100%;
    max-width:440px;
    background:#ffffff;
    border:1px solid var(--border-soft);
    border-radius:20px;
    padding:40px 36px 36px;
    box-shadow:0 30px 70px rgba(0,0,0,0.65);
    transform:translateY(14px) scale(0.97);
    transition:transform .28s ease;
}

#modalOverlay.visible .modal-card{
    transform:translateY(0) scale(1);
}

.modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:transparent;
    border:none;
    color:var(--text-muted);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}
.modal-close:hover{
    background:rgba(0,0,0,0.08);
    color:var(--text-light);
}
.modal-close svg{width:18px;height:18px;}

.modal-logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}
.modal-logo-img{
    height:32px;
    width:auto;
    flex-shrink:0;
}
.modal-logo-text{
    font-weight:700;
    font-size:18px;
    letter-spacing:0.3px;
    color:var(--gold);
}

.modal-title{
    font-weight:800;
    font-size:28px;
    letter-spacing:-0.3px;
    color:var(--text-light);
    margin-bottom:8px;
}

.modal-sub{
    font-size:14px;
    color:var(--text-muted);
    margin-bottom:28px;
}

.field-group{
    margin-bottom:18px;
    text-align: left;
}
.field-group label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--text-muted);
    margin-bottom:7px;
}
.field-group input,
.field-group textarea{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid var(--border-soft);
    background:#f9fafb;
    color:var(--text-light);
    font-size:14px;
    font-family:inherit;
    outline:none;
    transition:border-color .15s ease, background .15s ease;
}
.field-group input{height:46px;}
.field-group textarea{height:90px;resize:none;line-height:1.5;}
.field-group input::placeholder,
.field-group textarea::placeholder{color:rgba(107,114,128,0.5);}
.field-group input:focus,
.field-group textarea:focus{
    border-color:var(--gold-soft);
    background:rgba(88,126,255,0.06);
}

.modal-submit{
    width:100%;
    height:50px;
    margin-top:10px;
    background:linear-gradient(135deg, var(--gold) 0%, #4261db 100%);
    color:#ffffff;
    font-size:15px;
    font-weight:700;
    border:none;
    border-radius:12px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-family:inherit;
    transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
    box-shadow:0 4px 14px rgba(88,126,255,0.25);
}
.modal-submit:hover:not(:disabled):not(.failed){
    transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(88,126,255,0.35);
}
.modal-submit.loading{
    opacity:0.75;
    cursor:not-allowed;
}
.modal-submit.failed{
    background:#ef4444;
    color:#ffffff;
    cursor:default;
    box-shadow:none;
}

.btn-spinner{
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid rgba(26,19,6,0.22);
    border-top-color:#ffffff;
    animation:spin .7s linear infinite;
    flex-shrink:0;
}

#modalOverlay.visible { opacity: 1 !important; visibility: visible !important; z-index: 999999 !important; display: flex !important; }