/* =====================================================
   ABOUT PAGE
   GETCLOUD v3.0
===================================================== */

/* =====================================================
   Breadcrumb
===================================================== */

.breadcrumb{

    margin-top:80px;

    padding:18px 0;

    background:#f8fbff;

    border-bottom:
    1px solid #edf2f7;
}

.breadcrumb .container{

    display:flex;

    align-items:center;

    gap:10px;

    color:#64748b;

    font-size:14px;
}

.breadcrumb a{

    color:var(--primary);

    font-weight:600;
}

/* =====================================================
   About Hero
===================================================== */

.about-hero{

    padding:100px 0;

    background:
    linear-gradient(
        180deg,
        #f7fbff 0%,
        #ffffff 100%
    );
}

.about-grid{

    display:grid;

    grid-template-columns:
    1.1fr 0.9fr;

    gap:60px;

    align-items:center;
}

.about-content h1{

    font-size:64px;

    line-height:1.2;

    color:#102a5c;

    margin-bottom:25px;
}

.about-content p{

    font-size:20px;

    color:var(--text-light);

    margin-bottom:35px;

    max-width:650px;
}

.about-image img{

    width:100%;

    max-width:560px;

    margin:auto;
}

.hero-buttons{

    display:flex;

    gap:15px;
}

/* =====================================================
   Company Intro
===================================================== */

.company-intro{

    padding:100px 0;

    background:#fff;
}

.intro-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:60px;

    align-items:center;
}

.intro-text p{

    margin-bottom:25px;

    color:var(--text-light);

    font-size:18px;

    line-height:1.9;
}

.intro-image img{

    border-radius:24px;

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

/* =====================================================
   Core Values
===================================================== */

.core-values{

    padding:100px 0;

    background:#f8fbff;
}

.value-grid{

    display:grid;

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

    gap:25px;
}

.value-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.3s;
}

.value-card:hover{

    transform:translateY(-8px);

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

.value-card .icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:
    rgba(37,99,235,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;
}

.value-card h3{

    margin-bottom:12px;

    color:#102a5c;
}

.value-card p{

    color:var(--text-light);
}

/* =====================================================
   About Strength
===================================================== */

.about-strength{

    padding:100px 0;

    background:#fff;
}

/* 使用首頁的 .stats-grid 與 .stat-card */

/* =====================================================
   Vision
===================================================== */

.vision{

    padding:120px 0;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #10b981,
        #8b5cf6
    );

    color:#fff;
}

.vision-content{

    max-width:900px;

    margin:auto;

    text-align:center;
}

.vision-content h2{

    font-size:48px;

    margin-bottom:25px;
}

.vision-content p{

    font-size:20px;

    line-height:2;
}

/* =====================================================
   Why Us
===================================================== */

.why-us{

    padding:100px 0;

    background:#fff;
}

.why-grid{

    display:grid;

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

    gap:25px;
}

.why-item{

    background:#f8fbff;

    padding:24px 30px;

    border-radius:16px;

    font-size:18px;

    font-weight:600;

    color:#102a5c;

    border-left:
    5px solid var(--primary);

    transition:.3s;
}

.why-item:hover{

    transform:translateX(6px);

    background:#eef5ff;
}

/* =====================================================
   Process
===================================================== */

.about-process{

    padding:100px 0;

    background:#f8fbff;
}

.process-grid{

    display:grid;

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

    gap:25px;
}

.process-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.3s;
}

.process-card:hover{

    transform:translateY(-8px);
}

.step{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:var(--gradient);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;
}

.process-card h3{

    margin-bottom:15px;

    color:#102a5c;
}

.process-card p{

    color:var(--text-light);
}

/* =====================================================
   Responsive
===================================================== */

@media (max-width:1200px){

    .value-grid{

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

    .process-grid{

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

@media (max-width:992px){

    .about-grid{

        grid-template-columns:
        1fr;

        text-align:center;
    }

    .intro-grid{

        grid-template-columns:
        1fr;
    }

    .about-content h1{

        font-size:52px;
    }

    .hero-buttons{

        justify-content:center;
    }
}

@media (max-width:768px){

    .value-grid{

        grid-template-columns:
        1fr;
    }

    .why-grid{

        grid-template-columns:
        1fr;
    }

    .process-grid{

        grid-template-columns:
        1fr;
    }

    .about-content h1{

        font-size:42px;
    }

    .vision-content h2{

        font-size:36px;
    }

    .vision-content p{

        font-size:18px;
    }
}

@media (max-width:576px){

    .about-content h1{

        font-size:34px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary{

        width:100%;
    }

    .vision{

        padding:80px 0;
    }

    .vision-content h2{

        font-size:30px;
    }
}