main.about-page {
    min-height: 70vh;
    color: #f4f7ff;

    background:
        radial-gradient(
            ellipse 100% 600px at 50% 0%,
            rgba(20, 105, 210, 0.22),
            transparent 100%
        );
}


.about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 24px 120px;
    
}


.about-hero-content {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}


.about-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    color: #58b9ff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
}

.about-hero h1 {
    max-width: 800px;
    margin: 0 auto 25px;
    text-align: center;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
    font-weight: 800;
}

.about-hero p {
    max-width: 700px;
    margin: 0 auto 18px;
    color: #b9c7dc;
    font-size: 1.05rem;
    line-height: 1.8;
}

.about-cta {
    display: inline-block;
    margin-top: 18px;
    padding: 14px 25px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1688ff, #00c8ff);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 174, 255, 0.25);
}

@media (max-width: 600px) {
    .about-hero {
        padding: 80px 22px 90px;
    }

    .about-eyebrow {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }

    .about-hero p {
        font-size: 1rem;
    }
}

/* ABOUT APPROACH SECTION */

.about-approach {
    position: relative;
    padding: 90px 24px 110px;
    background: rgba(8, 17, 34, 0.65);
    border-top: 1px solid rgba(90, 160, 255, 0.12);
  
}


.about-approach-content {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}



.about-approach h2 {
    max-width: 750px;
    margin: 0 auto 22px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
}


.about-approach-intro {
    max-width: 750px;
    margin: 0 auto 45px;
    color: #b9c7dc;
    font-size: 1.05rem;
    line-height: 1.8;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.about-value {
    padding: 28px;
    border: 1px solid rgba(90, 160, 255, 0.2);
    border-radius: 14px;
    background: rgba(14, 28, 50, 0.65);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.about-value:hover {
    transform: translateY(-5px);
    border-color: rgba(65, 175, 255, 0.65);
}

.about-value h3 {
    margin: 0 0 14px;
    color: #62bdff;
    font-size: 1rem;
    line-height: 1.5;
}

.about-value p {
    margin: 0;
    color: #b9c7dc;
    font-size: 0.95rem;
    line-height: 1.75;
}

@media (max-width: 800px) {
    .about-values {
        grid-template-columns: 1fr;
    }

    .about-approach {
        padding: 70px 22px 80px;
    }

    .about-value {
        padding: 24px;
    }
}

/* ABOUT SERVICES SECTION */

.about-services {
    position: relative;
    padding: 90px 24px 110px;
}


.about-services-content {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}



.about-services h2 {
    max-width: 800px;
    margin: 0 auto 22px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
}


.about-services-intro {
    max-width: 760px;
    margin: 0 auto 45px;
    color: #b9c7dc;
    font-size: 1.05rem;
    line-height: 1.8;
}

.about-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.about-service {
    position: relative;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(90, 160, 255, 0.22);
    border-radius: 16px;
    background: linear-gradient(
        145deg,
        rgba(16, 35, 63, 0.9),
        rgba(8, 17, 34, 0.95)
    );
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.about-service:hover {
    transform: translateY(-5px);
    border-color: rgba(65, 175, 255, 0.7);
}

.about-service-number {
    display: block;
    margin-bottom: 24px;
    color: #55b9ff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.about-service h3 {
    margin: 0 0 16px;
    font-size: 1.25rem;
    color: #f4f7ff;
}

.about-service p {
    margin: 0 0 24px;
    color: #b9c7dc;
    line-height: 1.8;
}

.about-service a {
    display: inline-block;
    color: #62bdff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.about-service a:hover {
    color: #ffffff;
}

@media (max-width: 700px) {
    .about-services-grid {
        grid-template-columns: 1fr;
    }
}
/* ABOUT CONTACT SECTION */

.about-contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 24px;
    text-align: center;
    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 119, 255, 0.14),
            transparent 65%
        ),
        rgba(8, 17, 34, 0.65);
    border-top: 1px solid rgba(90, 160, 255, 0.15);
}


.about-contact-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}


.about-contact h2 {
    margin: 0 0 22px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
}

.about-contact p {
    max-width: 700px;
    margin: 0 auto 20px;
    color: #b9c7dc;
    font-size: 1.05rem;
    line-height: 1.8;
}

@media (max-width: 600px) {
    .about-contact {
        padding: 75px 22px;
    }
}

main.about-page {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

/* HEX PATTERN — OUR APPROACH */

.about-approach {
    position: relative;
    isolation: isolate;
}

.about-approach::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='90' viewBox='0 0 104 90'%3E%3Cg fill='none' stroke='%2362aaff' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M26 1 L52 16 L52 46 L26 61 L0 46 L0 16 Z'/%3E%3Cpath d='M78 1 L104 16 L104 46 L78 61 L52 46 L52 16 Z'/%3E%3Cpath d='M52 46 L78 61 L78 91 L52 106 L26 91 L26 61 Z'/%3E%3C/g%3E%3C/svg%3E");

    background-size: 104px 90px;
    background-repeat: repeat;
    opacity: 0.10;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
}

/* CIRCUIT PATTERN — ABOUT SERVICES */

.about-services {
    position: relative;
    isolation: isolate;
}

.about-services::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'%3E%3Cg fill='none' stroke='%233b9cff' stroke-width='1'%3E%3Cpath d='M0 35 H35 V65 H75 V95 H105'/%3E%3Cpath d='M240 25 H205 V55 H175 V85 H140'/%3E%3Cpath d='M0 145 H45 V120 H80'/%3E%3Cpath d='M240 155 H200 V125 H165 V105'/%3E%3C/g%3E%3Cg fill='%235bc8ff'%3E%3Ccircle cx='105' cy='95' r='2'/%3E%3Ccircle cx='140' cy='85' r='2'/%3E%3Ccircle cx='80' cy='120' r='2'/%3E%3Ccircle cx='165' cy='105' r='2'/%3E%3C/g%3E%3C/svg%3E");

    background-size: 240px 180px;
    background-repeat: repeat;
    opacity: 0.13;

    -webkit-mask-image: linear-gradient(
        to right,
        black,
        transparent 45%,
        transparent 55%,
        black
    );
    mask-image: linear-gradient(
        to right,
        black,
        transparent 45%,
        transparent 55%,
        black
    );
}