/* =========================================================
   SMARTTOOLS PRO - HOME PAGE
   ========================================================= */

/* Hero */

.home-hero {
    position: relative;

    overflow: hidden;

    padding: 90px 20px;

    background:
        linear-gradient(
            135deg,
            #0b63ce,
            #084b9d
        );

    color: #ffffff;

    text-align: center;
}

.home-hero-content {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: auto;
}

.home-hero h1 {
    font-size:
        clamp(35px, 6vw, 58px);

    line-height: 1.1;

    margin-bottom: 18px;
}

.home-hero p {
    max-width: 760px;

    margin: auto;

    font-size: 18px;

    opacity: 0.95;
}

.home-hero-buttons {
    margin-top: 28px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}

.home-hero .btn-primary {
    background: #ffffff;

    color: var(--primary);
}

.home-hero .btn-primary:hover {
    background: #f1f5f9;
}

/* Service cards */

.service-grid {
    display: grid;

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

    gap: 24px;
}

.service-card {
    background: #ffffff;

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

    border-radius: 18px;

    padding: 28px;

    box-shadow: var(--shadow-sm);

    transition: all 0.25s ease;
}

.service-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);
}

.service-icon {
    width: 60px;
    height: 60px;

    border-radius: 16px;

    background: #eaf3ff;

    color: var(--primary);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 28px;

    margin-bottom: 16px;
}

/* Feature section */

.feature-list {
    display: grid;

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

    gap: 18px;
}

.feature-item {
    display: flex;

    gap: 14px;

    padding: 18px;

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

    border-radius: 13px;

    background: #ffffff;
}

.feature-check {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #e8f8f3;

    color: var(--secondary);

    display: flex;

    align-items: center;
    justify-content: center;

    font-weight: 800;
}