:root{
    --bg: #000000;
    --title-color: #e6ffe6;
    --soon-color: #a6ffb0;
    --matrix-green: #18e44d;
    --matrix-dark: #003200;
    --logo-size: 120px;
    --side-width: clamp(90px, 20vw, 160px);
    --max-content-width: 920px;
}

@font-face{
    font-family: "Neue Machina";
    src:
    url("img/fonts/PPNeueMachina-InktrapUltrabold.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "Neue Machina";
    src:
    url("img/fonts/PPNeueMachina-InktrapUltrabold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    background:var(--bg);
    color:var(--title-color);
    font-family: "Neue Machina", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow:hidden;
}

.matrix-side{
    position:fixed;
    top:0;
    height:100vh;
    width:var(--side-width);
    z-index:0;
    pointer-events:none;
}
#matrix-left{ left:0; }
#matrix-right{ right:0; }

.center{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    width: min(100%, var(--max-content-width));
    max-width: calc(100% - 40px);
    flex-direction:column;
}
.center-content{
    width:100%;
    max-width:680px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

/* Лого */
.logo-wrap{ display:flex; align-items:center; justify-content:center; }
.logo{
    width: 50%;
    height: auto;
    display:block;
    object-fit:contain;
    filter: drop-shadow(0 6px 18px rgba(0,255,120,0.06));
}

/* Заголовки */
.title{
    font-size: clamp(22px, 5.5vw, 56px);
    color:var(--title-color);
    margin: 6px 0 0 0;
    font-weight:700;
    letter-spacing:0.6px;
}
.subtitle{
    font-size: clamp(13px, 2.6vw, 18px);
    color: #bfffcf;
    margin: 4px 0 10px 0;
    opacity:0.9;
    font-weight:400;
}

/* QR */
.qr-block{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:6px;
}
.qr-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    color:inherit;
}
.qr-image{
    border-radius:10px;
    background: var(--title-color);
    padding:6px;
    box-shadow: 0 6px 18px rgba(0,255,120,0.06);
}
.qr-caption{
    margin-top:8px;
    font-size:13px;
    color: #9fffbf;
    opacity:0.95;
}

/* Кнопка в стиле матрицы */
.btn-wrap{ margin-top:12px; }
.btn{
    display:inline-block;
    padding: 10px 22px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    transition: transform .14s ease, box-shadow .14s ease;
    font-family: "Neue Machina", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.matrix-btn{
    background: linear-gradient(180deg, rgba(0,210,80,0.18), rgba(0,140,40,0.06));
    color: var(--matrix-green);
    border: 1px solid rgba(0,220,120,0.2);
    box-shadow: 0 6px 24px rgba(0,120,40,0.06), inset 0 -2px 6px rgb(0, 0, 0);
}
.matrix-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0,200,100,0.12);
}

/* Мобильная адаптивность */
@media (max-width: 768px){
    :root { --side-width: clamp(68px, 16vw, 120px); }
    .center{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        padding:20px 16px;
        width:100%;
        max-width:100%;
    }
    body{overflow:auto}
    .center-content{ gap:8px; max-width:520px; }
    :root{ --logo-size: 96px; }
}
@media (max-width:480px){
    :root{ --logo-size: 150px; --side-width: 86px; }
    .logo{ width: var(--logo-size); }
    .title{ font-size: clamp(18px, 8vw, 34px); }
    .subtitle{ font-size:13px; }
    .qr-image{ width:140px; height:140px; }
    .btn{ padding: 8px 18px; }
}