/* === HERO SECTION === */
.hero-section {
    min-height: 100vh;
    width: 100%;
    padding-top: 90px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(110deg, #212328 50%, #14171b 100%);
    opacity: 0.97;
}

.hero-content {
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 62px 36px 28px 36px;
}

.hero-left {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.hero-title {
    font-size: 2.9rem;
    line-height: 1.13;
    font-weight: 700;
    color: #fff;
    margin: 0 0 7px 0;
}

.hero-title-gradient {
    display: block;
    font-size: 2.18rem;
    background: linear-gradient(90deg, #19d7ff 20%, #22b4e9 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.22rem;
    font-weight: 400;
    max-width: 540px;
    margin-bottom: 20px;
}

.hero-actions {
    margin-top: 14px;
}

.hero-btn {
    background: #22b4e9;
    color: #fff;
    font-weight: 600;
    font-size: 1.17rem;
    padding: 16px 38px;
    border-radius: 40px;
    border: none;
    box-shadow: 0 6px 28px 0 rgba(34,180,233,0.18);
    cursor: pointer;
    transition: background 0.13s, color 0.15s, box-shadow 0.17s;
    letter-spacing: 0.8px;
    outline: none;
}

.hero-btn:hover {
    background: #1a8ec5;
    color: #fff;
    box-shadow: 0 8px 38px 0 rgba(34,180,233,0.20);
}

.hero-right {
    flex: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image {
    max-width: 445px;
    width: 100%;
    border-radius: 40px;
    box-shadow: 0 8px 40px 0 rgba(34,180,233,0.14);
    border: 5px solid rgba(34,180,233,0.12);
    object-fit: contain;
    background: transparent;
    animation: heroFadeIn 1.3s cubic-bezier(0.17,0.67,0.83,0.67);
}

@keyframes heroFadeIn {
    0% { opacity: 0; transform: scale(0.92) translateY(40px);}
    100% { opacity: 1; transform: scale(1) translateY(0);}
}

/* HERO SCROLL ANIMATION */
.hero-scroll-cta {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.9;
    animation: scrollCtaFadeIn 2s;
}

@keyframes scrollCtaFadeIn {
    0% { opacity: 0; transform: translateY(12px);}
    100% { opacity: 0.9; transform: translateY(0);}
}

.scroll-arrow {
    font-size: 2.3rem;
    color: #22b4e9;
    animation: bounceArrow 1.6s infinite;
}

@keyframes bounceArrow {
    0%, 100% { transform: translateY(0);}
    40% { transform: translateY(8px);}
    60% { transform: translateY(3px);}
}

.scroll-text {
    font-size: 1.04rem;
    color: #fff;
    margin-top: 5px;
    opacity: 0.88;
    letter-spacing: 1px;
}

/* === WHY US SECTION === */
.why-section {
    width: 100%;
    padding: 80px 0 64px 0;
    background: #191a1e;
    position: relative;
    z-index: 2;
    min-height: 380px;
}

.why-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #22b4e9;
    margin-bottom: 48px;
    text-align: center;
    letter-spacing: 1px;
}

.why-cards {
    width: 100%;
    display: flex;
    gap: 38px;
    justify-content: center;
    align-items: stretch;
}

.why-card {
    background: #23272b;
    border-radius: 28px;
    padding: 36px 28px 32px 28px;
    flex: 1;
    min-width: 210px;
    max-width: 370px;
    box-shadow: 0 4px 32px 0 rgba(34,180,233,0.10);
    text-align: center;
    transition: transform 0.17s, box-shadow 0.17s;
    position: relative;
}

.why-card:hover {
    transform: translateY(-8px) scale(1.025);
    box-shadow: 0 8px 48px 0 rgba(34,180,233,0.18);
}

.why-icon {
    margin-bottom: 17px;
}

.why-icon img {
    width: 54px;
    height: 54px;
}

.why-card-title {
    font-size: 1.29rem;
    color: #fff;
    margin-bottom: 11px;
    font-weight: 600;
}

.why-card-desc {
    font-size: 1.06rem;
    color: #d7d7d7;
    line-height: 1.7;
    font-weight: 400;
}

.why-card-highlight {
    color: #22b4e9;
    font-weight: 600;
}