:root{

    --primary:#15314b;
    --accent:#f59e0b;
    --bg:#f6f8fa;
    --card:#ffffff;
    --text:#2d3748;
    --border:#dde4ea;

}

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.7;

}

.container{

    width:min(1100px,92%);
    margin:auto;

}

header{

    background:white;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:10;

}

.nav{

    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px;

}

.logo img{

    height:56px;

}

nav{

    display:flex;
    gap:28px;

}

nav a{

    text-decoration:none;
    color:var(--text);
    font-weight:500;

}

nav a:hover{

    color:var(--accent);

}

.hero{

    background:linear-gradient(135deg,#15314b,#20496b);
    color:white;
    padding:90px 0;

}

.hero-grid{

    display:grid;
    align-items:center;

}

.hero h1{

    font-size:clamp(2.3rem,4vw,3.8rem);
    line-height:1.2;
    margin-bottom:20px;

}

.hero p{

    max-width:650px;
    font-size:1.15rem;
    opacity:.92;

}

.button{

    display:inline-block;
    margin-top:35px;
    background:var(--accent);
    color:white;
    text-decoration:none;
    padding:14px 28px;
    border-radius:8px;
    font-weight:600;

}

section{

    padding:80px 0;

}

h2{

    text-align:center;
    margin-bottom:50px;
    color:var(--primary);

}

.cards{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;

}

.card{

    background:var(--card);
    padding:30px;
    border-radius:12px;
    border:1px solid var(--border);
    box-shadow:0 8px 18px rgba(0,0,0,.04);

}

.card h3{

    margin-bottom:15px;
    color:var(--primary);

}

.about{

    background:white;

}

.features{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:18px;
    text-align:center;
    font-weight:600;

}

.contact{

    max-width:500px;
    margin:auto;
    text-align:center;
    background:white;
    padding:40px;
    border-radius:12px;
    border:1px solid var(--border);

}

.contact a{

    color:var(--primary);
    text-decoration:none;

}

footer{

    background:#102535;
    color:#d7dee5;
    padding:40px 20px;
    text-align:center;

}

.footer-links{

    display:flex;
    justify-content:center;
    gap:25px;
    margin-bottom:20px;
    flex-wrap:wrap;

}

.footer-links a{

    color:white;
    text-decoration:none;

}

.footer-links a:hover{

    color:var(--accent);

}

footer p{

    margin:8px 0;

}

@media(max-width:850px){

    .nav{

        flex-direction:column;
        height:auto;
        padding:20px 0;

    }

    nav{

        margin-top:20px;
        flex-wrap:wrap;
        justify-content:center;

    }

}

.page{

    max-width:850px;
    margin:auto;
    background:white;
    padding:45px;
    border-radius:12px;
    border:1px solid var(--border);
    box-shadow:0 8px 18px rgba(0,0,0,.04);

}

.page h1{

    color:var(--primary);
    margin-bottom:40px;
    text-align:center;

}

.page h2{

    text-align:left;
    margin-top:35px;
    margin-bottom:15px;
    font-size:1.25rem;

}

.page p{

    margin-bottom:18px;

}

.page a{

    color:var(--primary);
    text-decoration:none;

}

.page a:hover{

    color:var(--accent);

}

.page ul{

    margin:15px 0 25px 25px;

}

.page li{

    margin-bottom:8px;

}