:root{
    --bg1:#0f172a;
    --bg2:#0b1020;
    --accent:#ffb703;
    --muted:#9aa4b2;
    --card:#0c1420;
    --glass: rgba(255,255,255,0.04);
    --fontColor: #e6eef8;
}
*{
    box-sizing:border-box
}

html,body{
    height:100%;
    margin:0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
    background: radial-gradient(ellipse at 10% 10%, rgba(255,183,3,0.06), transparent 10%), linear-gradient(135deg,var(--bg1),var(--bg2)); 
    color:#e6eef8
}

.container{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3rem
}
.card{
    width:100%;
    max-width:980px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:16px;
    padding:36px;
    position:relative;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(2,6,23,0.6);
    backdrop-filter: blur(6px);
}
        /* animated background lines */
.card::before, 
.card::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none

}

.card::before {
    background:linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 60%);
    transform:skewX(-12deg);
    mix-blend-mode:overlay;
    opacity:0.6
}

.card::after {
    background:repeating-linear-gradient(45deg, rgba(255,255,255,0.01) 0 2px, transparent 2px 20px);
    animation:move 12s linear infinite;
    opacity:0.3
}

 @keyframes move { 
    from {background-position:0 0} 
    to {background-position:400px 400px}
}

.left {
    padding-right:28px
}
.logo {
    display:flex;
    align-items:center;
    gap:14px
}

.logo .dot {
    width:44px;
    height:44px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--accent),#ff8a00);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#082032;
    font-weight:700;
    font-size:18px;
    box-shadow:0 6px 18px rgba(255,183,3,0.12), inset 0 -4px 12px rgba(0,0,0,0.12);
    transform:translateY(-2px)
}

h1 { 
    margin:6px 0 0;
    font-size:30px;
    line-height:1.05
}

p.lead {
    color:var(--muted);
    margin-top:8px
}

        /* Status animation */
.status {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:18px
}

.pulse { 
    width:12px;
    height:12px;
    border-radius:50%;
    margin-right: 12px;
    background:var(--accent);
    box-shadow:0 0 0 rgba(255,183,3,0.6);
    animation:pulse 1.8s infinite
}

@keyframes pulse{
    0% {
        transform:scale(0.9);
        box-shadow:0 0 0 0 rgba(255,183,3,0.35)
    }
    70% {
        transform:scale(1);
        box-shadow:0 0 0 18px rgba(255,183,3,0)
    } 
    100% {
        transform:scale(0.9);
        box-shadow:0 0 0 0 rgba(255,183,3,0)
    }
}

/* contact panel */
.contacts{ 
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:22px
}

.contact {
    background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
    padding:18px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.03);
    display:flex;
    gap:12px;
    align-items:center;
    transition:transform .28s ease,box-shadow .28s ease
}

.contact:hover {
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(2,6,23,0.6)
} 

.icon {
    width:44px;
    height:44;
    border-radius:10px;
    background:var(--glass);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent);
    flex-shrink:0
}

.contact .meta{
    font-size:14px
}

.contact .meta .title {
    color:var(--muted);
    font-size:12px
}


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

 
/* decorative image */
.illustration {
    position:absolute;
    right:-80px;
    top:-60px;
    opacity:0.08;
    transform:rotate(-12deg);
    filter:blur(1px);
    width:420px;
    height:420px
}

  
/* footer note */
.note { 
    margin-top: 5px;
    color:var(--muted);
    font-size:13px
}

 
/* responsive */
@media (max-width:880px){
    .contacts {
        grid-template-columns:repeat(1,1fr)
    }        
    .illustration {
        display:none
    }
    h1 {
        font-size:24px
    }
    .card {
        padding:22px
    }
}

#subtitle {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--accent);
    margin-bottom: 4px;
}