html,
body{
    background:var(--bg)!important;
}

body:not(.light-theme){
  --contact-accent:#FFD84D;
}

body.light-theme{
    --contact-accent:#4D82FF;
}

body:not(.light-theme){
    --contact-focus:#4D82FF;
}

body.light-theme{
    --contact-focus:#000;
}


.preview-item{

    position:relative;
}

.remove-image{

    position:absolute;

    top:-8px;
    right:-8px;

    width:24px;
    height:24px;

    border:none;

    border-radius:50%;

    background:#ff4d4d;

    color:white;

    cursor:pointer;

    font-size:16px;

    line-height:24px;
}

.contact-page{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:14rem 2rem 8rem;
    background:var(--bg);
}

.contact-container{
    width:100%;
    max-width:760px;
    opacity:0;
    transform:translateY(40px);
    animation:contactReveal 1s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes contactReveal{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.contact-header{
    text-align:center;
    margin-bottom:4rem;
}

.contact-label{
    display:block;
    letter-spacing:.35em;
    font-size:.85rem;
    color:var(--text);
    opacity:.75;
}

.contact-title{
    margin:.8rem auto 0;
    color:var(--contact-accent);
    font-size:clamp(3rem,6vw,5rem);
    line-height:1;
    text-align:center;
}

.contact-subtitle{
    margin:1.8rem auto 0;
    max-width:620px;
    height:28px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--text);
    opacity:.75;
    font-family:Arial,Helvetica,sans-serif;
    font-size:1rem;
    position:relative;
    overflow:hidden;
}

.contact-subtitle span{
    position:absolute;
    opacity:0;
    transform:translateY(20px);
    animation:subtitleRotate 25s infinite;
}

.contact-subtitle span:nth-child(1){animation-delay:0s;}
.contact-subtitle span:nth-child(2){animation-delay:5s;}
.contact-subtitle span:nth-child(3){animation-delay:10s;}
.contact-subtitle span:nth-child(4){animation-delay:15s;}
.contact-subtitle span:nth-child(5){animation-delay:20s;}

@keyframes subtitleRotate{
    0%{opacity:0;transform:translateY(20px);}
    5%{opacity:1;transform:translateY(0);}
    15%{opacity:1;transform:translateY(0);}
    20%{opacity:0;transform:translateY(-20px);}
    100%{opacity:0;transform:translateY(-20px);}
}

.contact-form{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:2rem;
}

.contact-page,
.contact-footer-copy{
    transition:
        filter .32s ease,
        opacity .32s ease;
}

.contact-page.status-visible,
body:has(.form-status-overlay[aria-hidden="false"]) .contact-footer-copy{
    filter:blur(8px);
    opacity:.36;
    pointer-events:none;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
}

.contact-form input,
.contact-form textarea{

    width:100%;

    background:none;

    border:none;

    border-bottom:
    1px solid
    var(--contact-accent);

    color:var(--text);

    padding:1rem 0;

    font-size:1rem;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    transition:.25s;
}


.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--contact-focus);
    box-shadow:
        0 1px 0 var(--contact-focus);
}

.contact-form textarea{
    min-height:180px;
    resize:none;
}

.message-counter{
    margin-top:-1.4rem;
    color:var(--text);
    opacity:.48;
    font-family:Arial,Helvetica,sans-serif;
    font-size:.85rem;
    text-align:right;
}

.message-counter.limit-reached,
.file-counter.limit-reached{
    color:#ff4d4d;
    opacity:1;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:var(--text);
    opacity:.35;
}

.drop-zone{
    position:relative;
    border:1px solid var(--contact-accent);
    border-radius:24px;
    background:rgba(255,255,255,.02);
    backdrop-filter:blur(10px);
    padding:3rem;
    text-align:center;
    cursor:pointer;
    transition:.35s;
}

.drop-zone:hover{
    border-color:var(--contact-accent);
    background:rgba(77,130,255,.05);
}

body.light-theme .drop-zone:hover{
    background:rgba(255,216,77,.05);
}

.drop-zone.dragover{
    border-color:var(--contact-accent);
    box-shadow:0 0 40px rgba(77,130,255,.12);
}

body.light-theme .drop-zone.dragover{
    box-shadow:0 0 40px rgba(255,216,77,.12);
}

.drop-zone input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.drop-content{
    display:flex;
    flex-direction:column;
    gap:.7rem;
}

.drop-title{
    color:var(--text);
    letter-spacing:.15em;
    font-size:1rem;
}

.drop-subtitle{
    color:var(--text);
    opacity:.5;
    font-family:Arial,Helvetica,sans-serif;
}

.file-counter{
    color:var(--contact-accent);
    font-family:Arial,Helvetica,sans-serif;
    margin-top:.5rem;
}

.preview-container{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}

.preview-container img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.1);
}

.send-button{
    height:68px;
    background:none;
    border:2px solid #FFD84D;
    border-radius:18px;
    color:#FFD84D;
    font-family:"Morgenta";
    font-size:1rem;
    letter-spacing:.18em;
    cursor:pointer;
    transition:.35s;
}

.send-button:disabled{
    opacity:.55;
    cursor:wait;
    transform:none;
}

.send-button:hover{
    background:#FFD84D;
    color:#000;
    transform:translateY(-2px);
    box-shadow:0 0 30px rgba(255,216,77,.35);
}

body.light-theme .send-button{
    border-color:#4D82FF;
    color:#4D82FF;
    box-shadow:0 0 14px rgba(77,130,255,.12);
}

body.light-theme .send-button:hover{
    background:#4D82FF;
    color:#fff;
    box-shadow:0 0 26px rgba(77,130,255,.32);
}

@media(max-width:768px){
    .contact-page{
        padding:10rem 1.5rem 4rem;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .contact-title{
        font-size:clamp(2rem,12vw,3.6rem);
    }

    .drop-zone{
        padding:2rem;
    }
}

.image-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:99999;
}

.image-modal.active{
    opacity:1;
    visibility:visible;
}

.image-modal img{
    max-width:90vw;
    max-height:90vh;

    border-radius:20px;

    transform:scale(.8);
    transition:.35s ease;

    box-shadow:
        0 0 40px rgba(0,0,0,.5);
}

.image-modal.active img{
    transform:scale(1);
}


.preview-image{
    cursor:zoom-in;
}

.preview-item{
    position:relative;
}



.contact-footer-copy{
    margin-top:0;
    margin-bottom:4rem;
}

.form-status-overlay{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2rem;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:20;
    transition:
        opacity .32s ease,
        visibility .32s ease;
}

.form-status-overlay[aria-hidden="false"]{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.form-status-panel{
    width:min(100%, 30rem);
    padding:1.55rem 1.8rem;
    border:2px solid var(--contact-accent);
    border-radius:24px;
    background:rgba(0,0,0,.72);
    color:var(--text);
    text-align:center;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:
        0 0 34px rgba(77,130,255,.22),
        inset 0 0 18px rgba(255,255,255,.04);
    transform:scale(.94);
    transition:
        transform .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}

.form-status-overlay[aria-hidden="false"] .form-status-panel{
    transform:scale(1);
}

body.light-theme .form-status-panel{
    background:rgba(255,255,255,.82);
    box-shadow:
        0 0 34px rgba(77,130,255,.18),
        inset 0 0 18px rgba(255,255,255,.4);
}

.form-status-panel p{
    margin:0 auto;
    max-width:24rem;
    color:var(--text);
    opacity:.9;
    font-family:Arial,Helvetica,sans-serif;
    font-size:1rem;
    line-height:1.55;
}

.form-status-overlay.error .form-status-panel{
    border-color:#ff4d4d;
    box-shadow:
        0 0 34px rgba(255,77,77,.22),
        inset 0 0 18px rgba(255,77,77,.06);
}