@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap');


:root {
    --primary: #222;             /* Deep Blue-Grey */
    --primary-dark: #111;        /* Very Deep Blue */
    --front-blue: #091135;          /* Even Deeper Blue for hero */
    --primary-zinc: #111;
    --accent: #2688ff;              /* Bright Blue Accent */
    --glass-bg: rgba(20, 26, 44, 0.58);    /* Bluish-Deep Glass BG for cards */
    --glass-bg-light: rgba(26,30,54,0.33); /* Lighter glass for cards */
    --glass-blur: 16px;
    --text: #f5f9ff;
    --light-text: #b9c6d9;
    --shadow: 0 6px 40px 0 rgba(20,22,40,0.33);
}

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

body {
    font-family: "Elms Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-zinc) 100%);
    color: var(--text);
    margin: 0;
    padding: 0;
}

a, nav a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover, nav a:hover {
    color: #74aaff;
}

header {
    background: rgba(10,16,44,0.84);
    border-bottom: 1.6px solid var(--front-blue);
    padding: 0.5rem 0;
    backdrop-filter: blur(var(--glass-blur));
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 44px;
    filter: drop-shadow(0 2px 6px #181f3444);
}

nav a {
    margin-left: 2rem;
    font-weight: 600;
    letter-spacing: 0.02rem;
    color: var(--text);
    text-shadow: 0 1px 2px #10153469;
}

.hero {
    background: linear-gradient(120deg, var(--front-blue) 68%, #072d51 100%);
    color: #eaf2ff;
    padding: 3.5rem 0 2.2rem 0;
    min-height: 40vh;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 26px 0 #10153fa0;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.hero-content > div {
    flex: 1;
}

.hero h1 {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.14;
    margin-bottom: 1rem;
    text-shadow: 0 4px 18px #0a102a90;
}

.hero-img {
    width: 375px;
    border-radius: 2rem;
    box-shadow: 0 10px 44px 0 #09113599;
    flex-shrink: 0;
    filter: blur(0.2px) brightness(1.07);
}

.cta-btn {
    display: inline-block;
    margin-top: 1.4rem;
    padding: 0.95rem 2.8rem;
    border-radius: 2rem;
    background: linear-gradient(90deg, #1750df 0%, #091135 100%);
    color: var(--text);
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: 1.2px;
    box-shadow: 0 2px 12px 0 #09113522;
    border: 1.5px solid var(--accent);
    backdrop-filter: blur(2.5px);
    transition: all 0.2s;
    text-shadow: 0 1px 6px #18205780;
}

.cta-btn:hover {
    color: var(--accent);
    background: linear-gradient(90deg, #18347d 38%, #091135 100%);
    border-color: #0376f4;
}

.features {
    margin: 3rem 0 2.5rem 0;
}

.features h2 {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--accent);
    letter-spacing: 1.2px;
    text-shadow: 0 2px 10px #0e1a4a70;
}

.features-grid {
    display: flex;
    gap: 2.3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.feature {
    background: var(--glass-bg);
    border-radius: 2rem;
    box-shadow: var(--shadow);
    flex: 1 1 220px;
    max-width: 350px;
    min-width: 220px;
    padding: 2rem 1.6rem 1.6rem 1.6rem;
    text-align: center;
    backdrop-filter: blur(var(--glass-blur));
    border: 1.5px solid rgba(38,54,94,0.24);
    margin-bottom: 1rem;
}

.feature img {
    width: 56px;
    margin-bottom: 1.05rem;
    filter: brightness(0) saturate(100%) invert(20%) sepia(40%) saturate(780%) hue-rotate(185deg) brightness(85%) contrast(104%);
}

.feature h3 {
    margin: 0.4rem 0;
    color: var(--accent);
    font-weight: 600;
}

.feature p {
    color: var(--light-text);
    font-weight: 400;
    font-size: 1.025rem;
}

.work {
    background: none;
    backdrop-filter: blur(var(--glass-blur));
    padding: 2.7rem 0 2.3rem 0;
}

.work h2 {
    text-align: center;
    margin-bottom: 2.2rem;
    color: var(--accent);
    letter-spacing: 1.2px;
    text-shadow: 0 2px 10px #14284a70;
}

.work-grid {
    display: flex;
    gap: 1.7rem;
    flex-wrap: wrap;
    justify-content: center;
}

.work-item {
    background: var(--glass-bg-light);
    border-radius: 2rem;
    overflow: hidden;
    width: 315px;
    box-shadow: var(--shadow);
    border: 1.5px solid rgba(38,54,94,0.13);
    backdrop-filter: blur(var(--glass-blur));
    margin-bottom: 1rem;
    transition: transform 0.18s;
}
.work-item:hover {
    transform: translateY(-8px) scale(1.025);
    box-shadow: 0 8px 48px 0 #10153fa0;
}
.work-item img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}

.work-info {
    padding: 1.22rem 1.05rem 1.22rem 1.05rem;
}

.work-info h4 {
    color: var(--accent);
    margin-bottom: 0.5rem;
    margin-top: 0;
    font-size: 1.13rem;
}

.work-info p {
    color: var(--light-text);
    font-size: 0.99rem;
}

.cta-bar {
    background: linear-gradient(90deg, rgba(18,29,67,0.84) 60%, rgba(14,34,68,0.93));
    color: #fff;
    text-align: center;
    padding: 2.3rem 0;
    border-radius: 1.5rem;
    width: 96%;
    max-width: 1280px;
    margin: 3rem auto 1.5rem auto;
    box-shadow: 0 3px 30px #10153faa;
    backdrop-filter: blur(var(--glass-blur));
}

.cta-inner h2 {
    margin: 0 0 1.1rem 0;
    line-height: 1.15;
    font-size: 2rem;
    text-shadow: 0 2px 12px #14224d88;
}

footer {
    background: linear-gradient(120deg, #0c1120 80%, #181f34 100%);
    color: #c5cfe3;
    padding: 2.2rem 0;
    border-top: 2px solid #091135;
}

.footer-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2.2rem;
}

.logo-footer {
    width: 36px;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 6px #09113b88);
}

footer h4 {
    margin-top: 0;
    margin-bottom: 0.9rem;
    color: var(--accent);
}

footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

footer li {
    margin-bottom: 0.4rem;
    font-size: 0.99rem;
}
footer a {
    color: #e5eafd;
}
footer a:hover {
    color: var(--accent);
}

@media (max-width: 1050px) {
    .hero-content, .features-grid, .work-grid, .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .hero-img {
        width: 95vw;
        max-width: 500px;
        margin-top: 2rem;
    }
}

@media (max-width: 500px) {
    .container {
        width: 97%;
    }
    nav a {
        margin-left: 1rem;
    }
    .hero, .features, .work {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
    .cta-bar {
        border-radius: 1.2rem;
        padding: 1.5rem 0;
    }
}