:root {
    --primary: #2563eb;
    --dark: #0f172a;
    --text: #64748b
}

body {
    font-family: Inter, Segoe UI, sans-serif;
    color: #1e293b
}

html {
    scroll-behavior: smooth
}

.hero {
    min-height: 100vh;
    padding-top: 100px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #f8fbff, #fff)
}

.hero-image {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12)
}

.section-title {
    margin-bottom: 3rem
}

.section-title h2 {
    font-weight: 800
}

.service-card {
    border: none;
    border-radius: 20px;
    transition: .3s
}

.service-card:hover {
    transform: translateY(-6px)
}

.tech-box {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
    text-align: center;
    font-weight: 700
}

.cta {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border-radius: 24px
}

footer {
    background: #0f172a;
    color: #fff
}