/* Masha Soft&Sec - Minimal Dark Red */

:root {
    --bg: #0a0a0c;
    --bg-up: #111114;
    --bg-card: #16161a;
    --red: #dc2626;
    --red-light: #ef4444;
    --red-glow: rgba(220,38,38,0.12);
    --text: #f0f0f0;
    --text-muted: #888;
    --text-dim: #444;
    --border: #1c1c20;
    --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --t: 0.2s ease;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}

body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}

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

.container{width:100%;max-width:680px;margin:0 auto;padding:0 1.25rem}

.red{color:var(--red)}

/* Nav */
.nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(10,10,12,0.92);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    border-bottom:1px solid var(--border);
}

.nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:680px;
    margin:0 auto;
    padding:0.875rem 1.25rem;
}

.logo{font-weight:700;font-size:1.05rem;letter-spacing:-0.3px}
.logo .red{font-weight:700}

.menu-btn{
    background:none;
    border:none;
    color:var(--text);
    font-size:1.6rem;
    cursor:pointer;
    padding:0;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.nav-links{
    position:fixed;
    top:0;
    right:-100%;
    width:70%;
    max-width:260px;
    height:100vh;
    background:var(--bg-up);
    border-left:1px solid var(--border);
    padding:5rem 1.75rem 2rem;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    transition:right 0.3s ease;
    z-index:99;
    list-style:none;
}

.nav-links.open{right:0}

.nav-links a{
    font-size:1rem;
    font-weight:500;
    color:var(--text-muted);
    transition:var(--t);
    padding:0.25rem 0;
}

.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active{border-left:2px solid var(--red);padding-left:0.75rem}

/* Hero */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6rem 1.25rem 4rem;
    text-align:center;
}

.hero-inner{max-width:560px}

.hero-label{
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--red);
    margin-bottom:1.25rem;
}

.hero h1{
    font-size:clamp(2rem,6.5vw,3.2rem);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-1.5px;
    margin-bottom:1.25rem;
}

.hero-desc{
    color:var(--text-muted);
    font-size:1rem;
    margin-bottom:2.25rem;
    max-width:460px;
    margin-left:auto;
    margin-right:auto;
}

.hero-btns{
    display:flex;
    gap:0.875rem;
    justify-content:center;
    flex-wrap:wrap;
}

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.8rem 1.75rem;
    border-radius:8px;
    font-weight:600;
    font-size:0.9rem;
    transition:var(--t);
    cursor:pointer;
    border:none;
    font-family:var(--font);
}

.btn-red{
    background:var(--red);
    color:#fff;
}

.btn-red:hover{
    background:var(--red-light);
    transform:translateY(-2px);
    box-shadow:0 6px 24px var(--red-glow);
}

.btn-ghost{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
}

.btn-ghost:hover{
    border-color:var(--red);
    color:var(--red);
}

.btn-lg{padding:0.9rem 2.25rem;font-size:0.95rem}

/* Sections */
.section{padding:4.5rem 0}

.section-dark{
    background:var(--bg-up);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.section-label{
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--red);
    margin-bottom:0.75rem;
}

.section-title{
    font-size:clamp(1.4rem,3.5vw,1.8rem);
    font-weight:700;
    margin-bottom:2rem;
    letter-spacing:-0.5px;
}

/* Services Home */
.services{
    display:flex;
    flex-direction:column;
    gap:0.875rem;
}

.service-box{
    display:block;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:1.5rem;
    transition:var(--t);
    position:relative;
    overflow:hidden;
}

.service-box::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:3px;
    height:100%;
    background:var(--red);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 0.3s ease;
}

.service-box:hover{
    border-color:rgba(220,38,38,0.25);
    transform:translateX(3px);
}

.service-box:hover::before{transform:scaleY(1)}

.service-num{
    font-size:0.7rem;
    font-weight:700;
    color:var(--red);
    letter-spacing:1px;
    display:block;
    margin-bottom:0.6rem;
}

.service-box h3{
    font-size:1.05rem;
    font-weight:600;
    margin-bottom:0.4rem;
}

.service-box p{
    color:var(--text-muted);
    font-size:0.85rem;
    line-height:1.55;
}

.arrow{
    position:absolute;
    right:1.5rem;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-dim);
    font-size:1.1rem;
    transition:var(--t);
}

.service-box:hover .arrow{
    color:var(--red);
    transform:translateY(-50%) translateX(3px);
}

/* CTA */
.cta{
    text-align:center;
    max-width:460px;
    margin:0 auto;
}

.cta h2{
    font-size:clamp(1.4rem,3.5vw,1.8rem);
    font-weight:700;
    margin-bottom:0.75rem;
}

.cta p{
    color:var(--text-muted);
    margin-bottom:1.75rem;
    font-size:0.95rem;
}

/* Page Header */
.page-header{
    padding:7rem 0 2.5rem;
    text-align:center;
    border-bottom:1px solid var(--border);
}

.page-label{
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:3px;
    color:var(--red);
    margin-bottom:0.75rem;
}

.page-header h1{
    font-size:clamp(1.8rem,5vw,2.6rem);
    font-weight:700;
    letter-spacing:-1px;
}

/* Service Detail */
.service-detail{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.service-detail-item{
    padding:1.75rem 0;
    border-bottom:1px solid var(--border);
}

.service-detail-item:last-child{border-bottom:none}

.service-tag{
    display:inline-block;
    font-size:0.65rem;
    font-weight:700;
    color:var(--red);
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:0.75rem;
    padding:0.2rem 0.6rem;
    border:1px solid var(--border);
    border-radius:4px;
}

.service-detail-item h2{
    font-size:1.35rem;
    font-weight:700;
    margin-bottom:0.75rem;
    letter-spacing:-0.5px;
}

.service-detail-item p{
    color:var(--text-muted);
    line-height:1.65;
    margin-bottom:1.25rem;
    max-width:520px;
    font-size:0.9rem;
}

.service-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}

.service-list li{
    color:var(--text-muted);
    font-size:0.85rem;
    padding-left:1.1rem;
    position:relative;
}

.service-list li::before{
    content:'-';
    position:absolute;
    left:0;
    color:var(--red);
    font-weight:700;
}

/* Contact */
.contact{
    display:flex;
    flex-direction:column;
    gap:0.875rem;
    max-width:440px;
    margin:0 auto;
}

.contact-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:1.25rem 1.5rem;
    transition:var(--t);
}

.contact-link:hover{
    border-color:rgba(220,38,38,0.25);
    transform:translateX(3px);
}

.contact-label{
    font-size:0.65rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--text-dim);
    display:block;
    margin-bottom:0.2rem;
}

.contact-value{
    font-size:0.95rem;
    font-weight:600;
    color:var(--text);
}

.contact-link .arrow{
    position:static;
    transform:none;
    color:var(--text-dim);
    font-size:1.1rem;
    transition:var(--t);
}

.contact-link:hover .arrow{
    color:var(--red);
    transform:translateX(3px);
}

/* Footer */
.footer{
    padding:2.5rem 0;
    border-top:1px solid var(--border);
    text-align:center;
}

.footer-logo{font-weight:700;font-size:0.95rem;margin-bottom:0.4rem}
.footer-copy{font-size:0.75rem;color:var(--text-dim)}

/* Responsive */
@media(min-width:768px){
    .menu-btn{display:none}

    .nav-links{
        position:static;
        width:auto;
        height:auto;
        flex-direction:row;
        padding:0;
        background:transparent;
        border:none;
        gap:1.75rem;
    }

    .nav-links a{font-size:0.85rem}

    .nav-links a.active{
        border-left:none;
        padding-left:0;
        border-bottom:2px solid var(--red);
        padding-bottom:0.2rem;
    }

    .services{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:0.875rem;
    }

    .service-box .arrow{display:none}

    .hero-btns{flex-wrap:nowrap}
}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

::selection{background:var(--red);color:#fff}