/* ==========================================
   VIA DIGITAL SYSTEMS
   Complete Website Styles
========================================== */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


:root {

    --bg:#09090B;
    --surface:#111113;
    --surface2:#18181B;

    --text:#FAFAFA;
    --muted:#A1A1AA;

    --accent:#60A5FA;
    --accent-light:#93C5FD;

    --border:#27272A;

    --radius:20px;

}




/* RESET */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    background:var(--bg);

    color:var(--text);

    font-family:"Inter",Arial,sans-serif;

    line-height:1.6;

}


a {

    color:inherit;

    text-decoration:none;

}


p {

    color:var(--muted);

}



.container {

    width:min(90%,1200px);

    margin:auto;

}


section {

    padding:120px 0;

}







/* NAVIGATION */


.navbar {


    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%);


    width:min(92%,1150px);


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:16px 28px;


    background:rgba(9,9,11,.75);

    backdrop-filter:blur(20px);


    border:1px solid var(--border);


    border-radius:999px;


    z-index:1000;


}



.logo {

    font-size:1.15rem;

    font-weight:700;

    letter-spacing:-.04em;

}



.logo span {

    color:var(--accent);

}



.nav-links {

    display:flex;

    gap:32px;

    color:var(--muted);

}



.nav-links a:hover {

    color:white;

}



.nav-button {


    background:white;

    color:black;


    padding:10px 22px;


    border-radius:999px;


    font-weight:600;


}







/* HERO */


.hero {


    min-height:100vh;

    display:flex;

    align-items:center;


    padding-top:150px;


}


.label {


    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:.2em;

    font-size:.75rem;

    margin-bottom:25px;


}



.hero h1 {


    font-size:clamp(3.5rem,7vw,6rem);

    line-height:1;

    letter-spacing:-.07em;


    max-width:1000px;


}



.hero p {


    margin-top:35px;


    font-size:1.25rem;


    max-width:650px;


}



.hero-actions {


    display:flex;

    gap:20px;

    margin-top:45px;


}



.button {


    display:inline-block;


    padding:15px 30px;


    border-radius:999px;


    font-weight:600;


}


.primary {


    background:var(--accent);

    color:#000;


}



.primary:hover {

    background:var(--accent-light);

}



.secondary {


    border:1px solid var(--border);


}







/* HEADINGS */


.section-title {


    font-size:clamp(2rem,5vw,3.5rem);

    letter-spacing:-.05em;

    max-width:750px;

    margin:25px 0 60px;


}







/* WEBSITE MOCKUPS */


.showcase-grid {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;


}



.website-preview {


    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:20px;


}


.browser {


    background:#050505;

    border-radius:15px;

    overflow:hidden;

    border:1px solid var(--border);

}



.browser-bar {


    padding:12px;

    background:#111;

    color:#555;

    font-size:.8rem;

}



.mock-site {


    padding:35px;

    min-height:280px;


    background:white;

    color:#111;


}



.mock-site.dark {


    background:#18181B;

    color:white;


}



.mock-content h2 {


    margin:30px 0 15px;

    font-size:1.8rem;


}



.mock-content button {


    margin-top:25px;

    padding:10px 20px;

    border:none;

    border-radius:20px;

    background:#60A5FA;


}



.website-preview h3 {


    margin-top:25px;

}



.website-preview p {


    font-size:.95rem;

}







/* CAPABILITIES */


.capability {


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:40px 0;


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


}



.capability h3 {


    font-size:2.4rem;

    letter-spacing:-.05em;


}



.capability p {


    max-width:450px;

}







/* PRICING */


.pricing-grid {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;


}



.price-card {


    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);


    padding:40px;


}



.price-card.featured {


    border-color:var(--accent);


}



.price-card h2 {


    font-size:3rem;

    margin:25px 0;


}



.price-card li {


    color:var(--muted);

    margin:10px 0;


}







/* INDUSTRIES */


.industry-list {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;


}



.industry-list div {


    padding:30px;


    border:1px solid var(--border);

    border-radius:15px;


    font-size:1.3rem;


}







/* PROCESS */


.process {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;


}



.process span {


    color:var(--accent);


}



.process h3 {


    margin:15px 0;


}







/* CONTACT */


.contact-layout {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;


}



form {


    display:flex;

    flex-direction:column;

    gap:15px;


}



input,
textarea {


    background:var(--surface);

    border:1px solid var(--border);

    padding:15px;

    border-radius:12px;


    color:white;


}



textarea {


    height:160px;

}





/* CTA */


.cta {


    text-align:center;


}



.cta h2 {


    font-size:clamp(2.5rem,6vw,5rem);

    letter-spacing:-.06em;


}







/* FOOTER */


footer {


    border-top:1px solid var(--border);

    padding:50px 0;


}







/* MOBILE */


@media(max-width:900px){


.nav-links {

    display:none;

}



.showcase-grid,
.pricing-grid,
.process,
.industry-list,
.contact-layout {

    grid-template-columns:1fr;

}



.capability {

    display:block;

}



.capability h3 {

    margin-bottom:15px;

}



.hero h1 {

    font-size:3.2rem;

}



.text-muted{
    color:var(--muted);
}

.accent{
    color:var(--accent);
    font-weight:600;
}

.contact-layout h2{
    font-size:clamp(2rem,4vw,3rem);
    letter-spacing:-.04em;
    margin-bottom:20px;
}

.contact-layout p{
    margin-bottom:18px;
}

form label{
    font-size:.9rem;
    font-weight:600;
    color:var(--text);
    margin-top:8px;
}

input:focus,
textarea:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(96,165,250,.15);
}

textarea{
    resize:vertical;
    min-height:170px;
}

form .button{
    margin-top:15px;
    cursor:pointer;
    border:none;
}

form .button:hover{
    transform:translateY(-2px);
}

}