/* Service pages styles */

.page-service .service-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    color: #fff;
}

.page-service .service-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 22%),
        radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.1), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 45%);
    pointer-events: none;
}

.page-service .service-hero .container {
    position: relative;
    z-index: 1;
}

.page-service .service-hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #e6fbff;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-service .service-hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.08;
}

.page-service .service-hero p {
    color: rgba(255, 255, 255, 0.82);
}

.page-service .service-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 32px;
    padding: 0;
    list-style: none;
}

.page-service .service-hero-points li {
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
}

.page-service .service-hero-visual {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-service .service-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.9;
}

.page-service .service-hero-orb-one {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 72%);
}

.page-service .service-hero-orb-two {
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    animation: heroPulse 8s ease-in-out infinite;
}

.page-service .service-hero-card {
    position: relative;
    width: min(100%, 340px);
    padding: 34px 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    box-shadow: 0 25px 60px rgba(10, 15, 30, 0.24);
}

.page-service .service-hero-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.page-service .service-hero-card h5 {
    color: #fff;
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.page-service .service-hero-card p {
    margin-bottom: 0;
}

.page-service .service-hero-web {
    background: linear-gradient(135deg, #0f1d38 0%, #12395e 55%, #06bbcc 100%);
}

.page-service .service-hero-ecommerce {
    background: linear-gradient(135deg, #18223d 0%, #25435f 45%, #1f9f88 100%);
}

.page-service .service-hero-uiux {
    background: linear-gradient(135deg, #1d1e4f 0%, #263c7f 45%, #08b8d8 100%);
}

.page-service .service-hero-graphic {
    background: linear-gradient(135deg, #35174e 0%, #6b2da3 48%, #ff8b5f 100%);
}

.page-service .service-hero-animation {
    background: linear-gradient(135deg, #1f1b49 0%, #5237b5 45%, #ff7d6c 100%);
}

.page-service .service-hero-ebooks {
    background: linear-gradient(135deg, #14213f 0%, #285a73 45%, #0dc2e3 100%);
}

.page-service .service-hero-lms {
    background: linear-gradient(135deg, #0f2440 0%, #1c4d75 48%, #24c36a 100%);
}

.page-service .service-hero-hosting {
    background: linear-gradient(135deg, #101b33 0%, #214c85 50%, #3ca6ff 100%);
}

.page-service .service-bg {
    position: relative;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 50px;
}

.page-service .service-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.7;
}

.page-service .service-bg > .container,
.page-service .service-bg > .container-xxl,
.page-service .service-bg > div {
    position: relative;
    z-index: 1;
}

/* Unified service detail cards */
.page-service .service-detail-card {
    position: relative;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background:
        radial-gradient(circle at 12% 12%, rgba(6, 187, 204, 0.16), transparent 36%),
        radial-gradient(circle at 90% 10%, rgba(107, 13, 236, 0.12), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 100%);
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    overflow: hidden;
    transform: translateY(0);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, filter .35s ease;
}

.page-service .service-detail-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, #06bbcc 0%, #0ca7f1 58%, #6b0dec 100%);
}

.page-service .service-detail-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -110px;
    bottom: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 187, 204, 0.18) 0%, rgba(6, 187, 204, 0) 72%);
    pointer-events: none;
}

.page-service .service-detail-card h4 {
    color: #12244f;
    font-weight: 900;
    margin-bottom: 14px;
    letter-spacing: 0.2px;
}

.page-service .service-detail-card p {
    margin-bottom: 0;
    color: #55627d;
    line-height: 1.8;
}

.page-service .service-detail-card ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.page-service .service-detail-card ul li {
    position: relative;
    padding-left: 26px;
    color: #4f5d79;
    line-height: 1.75;
    margin-bottom: 8px;
}

.page-service .service-detail-card ul li:last-child {
    margin-bottom: 0;
}

.page-service .service-detail-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06bbcc 0%, #0ca7f1 100%);
    box-shadow: 0 0 0 5px rgba(6, 187, 204, 0.15);
}

.page-service .service-detail-card .btn {
    margin-top: 18px;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(6, 187, 204, 0.22);
}

.page-service .service-detail-card:hover {
    transform: translateY(-9px);
    border-color: rgba(255, 255, 255, 0.46);
    filter: saturate(1.04);
}

/* App hero (special template) */
.page-service .app-hero-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(6, 187, 204, 0.2), transparent 22%),
        radial-gradient(circle at 82% 18%, rgba(12, 167, 241, 0.18), transparent 20%),
        linear-gradient(135deg, #10182d 0%, #18264a 55%, #0f3250 100%);
}

.page-service .app-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 58%);
    pointer-events: none;
}

.page-service .app-hero-tag {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #d7fbff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-service .app-hero-visual {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-service .app-hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(138, 234, 255, 0.24);
    animation: heroPulse 8s ease-in-out infinite;
}

.page-service .app-hero-ring-one {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(6, 187, 204, 0.22) 0%, rgba(6, 187, 204, 0) 72%);
}

.page-service .app-hero-ring-two {
    width: 310px;
    height: 310px;
    border-color: rgba(12, 167, 241, 0.2);
    animation-delay: 1.2s;
}

.page-service .app-hero-ring-three {
    width: 400px;
    height: 400px;
    border-color: rgba(255, 255, 255, 0.12);
    animation-delay: 2.2s;
}

.page-service .app-hero-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 187, 204, 0.42) 0%, rgba(6, 187, 204, 0) 72%);
    filter: blur(10px);
}

.page-service .app-hero-robot {
    position: relative;
    width: min(250px, 62vw);
    height: auto;
    z-index: 1;
    filter: drop-shadow(0 22px 45px rgba(0, 0, 0, 0.28));
    mix-blend-mode: multiply;
}

.page-service .service-extension-section,
.page-service .service-related-section {
    position: relative;
    overflow: hidden;
}

.page-service .service-extension-section::before,
.page-service .service-related-section::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 187, 204, 0.12) 0%, rgba(6, 187, 204, 0) 72%);
    pointer-events: none;
}

.page-service .service-extension-section::before {
    top: 10px;
    left: -140px;
}

.page-service .service-related-section::before {
    right: -140px;
    bottom: 10px;
}

.page-service .service-extension-intro {
    color: #5b6781;
    line-height: 1.8;
}

.page-service .service-extension-card,
.page-service .service-related-card {
    position: relative;
    border-radius: 26px;
    border: 1px solid rgba(6, 187, 204, 0.16);
    background:
        radial-gradient(circle at 16% 16%, rgba(6, 187, 204, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 251, 255, 0.95) 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    padding: 28px 24px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.page-service .service-extension-card:hover,
.page-service .service-related-card:hover {
    transform: translateY(-10px);
    border-color: rgba(6, 187, 204, 0.3);
    box-shadow: 0 34px 82px rgba(15, 23, 42, 0.14);
}

.page-service .service-extension-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    background: linear-gradient(135deg, #06bbcc 0%, #0ca7f1 60%, #6b0dec 100%);
    box-shadow: 0 18px 34px rgba(12, 167, 241, 0.2);
}

.page-service .service-extension-card h4,
.page-service .service-related-card h4 {
    color: #11224d;
    font-size: 1.28rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.page-service .service-extension-card p,
.page-service .service-related-card p {
    color: #5a6781;
    line-height: 1.8;
    margin-bottom: 0;
}

.page-service .service-related-meta {
    margin-bottom: 14px;
}

.page-service .service-related-meta span {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(6, 187, 204, 0.1);
    color: #0d8fae;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-service .service-related-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #11224d;
    font-weight: 800;
}

.page-service .service-related-link i {
    transition: transform .3s ease;
}

.page-service .service-related-card:hover .service-related-link i {
    transform: translateX(4px);
}

.page-service .service-system-section,
.page-service .service-tech-section {
    position: relative;
    overflow: hidden;
}

.page-service .service-panel-card {
    position: relative;
    padding: 26px 20px;
    border-radius: 22px;
    border: 1px solid rgba(107, 13, 236, 0.14);
    background:
        radial-gradient(circle at 100% 0%, rgba(107, 13, 236, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 244, 255, 0.94) 100%);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.page-service .service-panel-card:hover {
    transform: translateY(-8px);
    border-color: rgba(107, 13, 236, 0.24);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.14);
}

.page-service .service-panel-card h4 {
    color: #11224d;
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.page-service .service-panel-card p {
    color: #5a6781;
    line-height: 1.8;
    margin-bottom: 0;
}

.page-service .service-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.page-service .service-tech-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 86px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(6, 187, 204, 0.16);
    background:
        radial-gradient(circle at 20% 12%, rgba(6, 187, 204, 0.1), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 252, 255, 0.94) 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    text-align: center;
}

.page-service .service-tech-chip span {
    color: #11224d;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

@media (max-width: 767.98px) {
    .page-service .service-extension-card,
    .page-service .service-related-card {
        border-radius: 22px;
        padding: 24px 20px;
    }

    .page-service .service-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}