.home-page main { padding-top: 0; }

.home-service-card-websites::before,
.home-service-card-websites::after {
    content: "";
    position: absolute;
    border: 1px solid rgb(255 255 255 / 18%);
    background: rgb(255 255 255 / 8%);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
    backdrop-filter: blur(1.5px) saturate(112%);
    -webkit-backdrop-filter: blur(1.5px) saturate(112%);
    pointer-events: none;
}

.home-hero-desktop-line { display: inline; }

.home-hero-foreground {
    position: absolute;
    z-index: 2;
    left: 4.5%;
    bottom: 18%;
    display: block;
    width: 90%;
    height: auto;
    filter: drop-shadow(0 24px 34px rgb(5 38 70 / 14%));
}

.home-section { margin-top: clamp(76px, 8vw, 104px); scroll-margin-top: 150px; }
.home-section-heading { max-width: 730px; margin-bottom: 34px; }
.home-section-heading h2 { font-size: clamp(2.25rem, 4vw, 2.7rem); }
.home-section-heading p { max-width: 650px; margin-top: 16px; color: var(--ink-soft); font-size: 1.05rem; }

.home-service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 20px;
}

.home-service-card { position: relative; min-height: 500px; overflow: hidden; padding: clamp(36px, 5vw, 58px); border-radius: 30px; box-shadow: var(--shadow); }
.home-service-card-content { position: relative; z-index: 2; display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; }
.home-service-icon { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: 62px; border-radius: 17px; }
.home-service-icon svg { width: 29px; height: 29px; }
.home-service-card h3 { margin-bottom: 16px; font-size: clamp(2rem, 3.5vw, 2.45rem); }
.home-service-card p { max-width: 520px; margin-bottom: 28px; line-height: 1.65; }
.home-service-card .button { margin-top: auto; }

.home-service-card-websites { color: #fff; background: var(--gradient); border: 1px solid rgb(255 255 255 / 18%); }
.home-service-card-websites p { color: rgb(255 255 255 / 86%); }
.home-service-card-websites .home-service-icon { color: var(--navy); background: rgb(255 255 255 / 93%); }
.home-service-card-websites::before { width: 610px; height: 610px; right: -260px; bottom: -315px; }
.home-service-card-websites::after { width: 420px; height: 420px; right: -165px; bottom: -220px; }

.home-service-card-ict { color: var(--navy); background: var(--soft-glass-color); border: 1px solid var(--soft-glass-border); }
.home-service-card-ict p { color: var(--ink-soft); }
.home-service-card-ict .home-service-icon { color: var(--ocean); background: var(--mist); }

.home-service-highlights,
.home-service-topics { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 34px; padding: 0; list-style: none; }
.home-service-highlights li,
.home-service-topics li { padding: 7px 10px; border-radius: 9px; font-size: .76rem; font-weight: 700; }
.home-service-highlights li { color: #fff; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 24%); }
.home-service-topics li { color: var(--ink-soft); background: var(--mist); border: 1px solid var(--line); }

.home-about {
    display: grid;
    min-height: 390px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: center;
    gap: clamp(30px, 6vw, 80px);
    overflow: hidden;
    margin-top: clamp(76px, 8vw, 104px);
    padding: clamp(38px, 6vw, 70px);
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: 30px;
}

.home-about-copy { max-width: 680px; }
.home-about h2 { max-width: 680px; font-size: clamp(2.25rem, 4vw, 2.8rem); }
.home-about-copy > p:not(.eyebrow) { max-width: 650px; margin-top: 20px; color: var(--ink-soft); font-size: 1.05rem; }
.home-about .hero-actions { margin-top: 28px; }
.home-about-portrait { position: relative; width: min(100%, 340px); justify-self: center; }
.home-about-portrait img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgb(11 42 74 / 18%)); }

.home-service-card,
.home-about {
    background-clip: padding-box;
    box-shadow: none;
}

@media (min-width: 981px) {
    .home-hero-desktop-line { display: block; }
}

@media (max-width: 980px) {
    .home-service-grid { grid-template-columns: 1fr; gap: 18px; }
    .home-service-card { min-height: 460px; }
    .home-about { grid-template-columns: 1fr; }
    .home-about-portrait { order: -1; width: min(300px, 78%); }
}

@media (max-width: 640px) {
    .home-section { width: min(calc(100% - 28px), var(--container)); margin-top: 62px; scroll-margin-top: 120px; }
    .home-section-heading { margin-bottom: 24px; }
    .home-section-heading h2 { font-size: 2rem; }
    .home-section-heading p { margin-top: 12px; font-size: 1rem; }
    .home-service-grid { gap: 14px; }
    .home-service-card { min-height: 430px; padding: 30px 24px; border-radius: 24px; }
    .home-service-icon { width: 52px; height: 52px; margin-bottom: 42px; }
    .home-service-card h3 { font-size: 2rem; }
    .home-service-card p { margin-bottom: 24px; }
    .home-service-card-websites::before { width: 460px; height: 460px; right: -210px; bottom: -245px; }
    .home-service-card-websites::after { width: 320px; height: 320px; right: -140px; bottom: -175px; }
    .home-service-card .button { width: 100%; }
    .home-about { width: min(calc(100% - 28px), var(--container)); min-height: 0; gap: 20px; margin-top: 62px; padding: 30px 24px; border-radius: 24px; }
    .home-about-portrait { width: min(250px, 78%); }
    .home-about h2 { font-size: 2rem; }
    .home-about-copy > p:not(.eyebrow) { margin-top: 16px; font-size: 1rem; }
    .home-about .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-foreground,
    .home-about-portrait img { filter: none; }
}