/* =========================================================
   OXNARD IT SOLUTIONS
   Homepage Styles
   ========================================================= */


/* =========================================================
   1. BRAND VARIABLES
   ========================================================= */

:root {
    --navy: #0B1F33;
    --navy-light: #113552;
    --navy-soft: #163E5C;

    --blue: #1677FF;
    --blue-deep: #075CD8;

    --cyan: #20C4D9;
    --cyan-soft: #73E4EF;

    --orange: #F4A261;
    --orange-light: #FFBC77;

    --off-white: #F7F9FC;
    --white: #FFFFFF;

    --text: #1F2937;
    --text-soft: #5F6B7A;
    --border: #E3EAF2;

    --shadow-sm:
        0 8px 25px rgba(11, 31, 51, 0.08);

    --shadow-md:
        0 18px 50px rgba(11, 31, 51, 0.12);

    --shadow-blue:
        0 18px 45px rgba(22, 119, 255, 0.22);

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;

    --transition: 0.25s ease;

    --max-width: 1200px;
}


/* =========================================================
   2. RESET / BASE
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: var(--off-white);
    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.container {
    width: min(92%, var(--max-width));
    margin-inline: auto;
}


/* =========================================================
   3. HEADER / NAVIGATION
   ========================================================= */

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(247, 249, 252, 0.94);

    border-bottom:
        1px solid rgba(11, 31, 51, 0.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nav-container {
    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.nav-logo {
    width: 350px;
    height: auto;
}

.main-nav {
    display: flex;
    align-items: center;

    gap: 28px;
}

.main-nav > a:not(.nav-cta) {
    position: relative;

    color: var(--navy);

    font-size: 0.94rem;
    font-weight: 700;

    transition:
        color var(--transition),
        transform var(--transition);
}

.main-nav > a:not(.nav-cta)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    transition: width var(--transition);
}

.main-nav > a:not(.nav-cta):hover,
.main-nav > a.active {
    color: var(--blue);
}

.main-nav > a:not(.nav-cta):hover::after,
.main-nav > a.active::after {
    width: 100%;
}


/* GET IT HELP BUTTON */

.nav-cta {
    padding: 12px 20px;

    border-radius: 50px;

    color: var(--white);

    font-size: 0.91rem;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    box-shadow:
        0 8px 25px rgba(22, 119, 255, 0.22);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.nav-cta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(22, 119, 255, 0.32);
}


/* MOBILE MENU BUTTON */

.menu-toggle {
    display: none;

    border: 0;
    background: transparent;

    cursor: pointer;

    padding: 8px;
}

.menu-toggle span {
    display: block;

    width: 27px;
    height: 3px;

    margin: 5px 0;

    border-radius: 10px;

    background: var(--navy);
}


/* =========================================================
   4. HERO
   ========================================================= */

.hero {
    min-height: 720px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        85px 0
        130px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(32, 196, 217, 0.13),
            transparent 28%
        ),

        radial-gradient(
            circle at 8% 65%,
            rgba(22, 119, 255, 0.09),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F7FBFF 48%,
            #EEF8FC 100%
        );
}


/* Background glow */

.hero-glow {
    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(10px);
}

.hero-glow-one {
    width: 450px;
    height: 450px;

    top: -220px;
    right: -100px;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.16),
            transparent 70%
        );
}

.hero-glow-two {
    width: 420px;
    height: 420px;

    bottom: -240px;
    left: -120px;

    background:
        radial-gradient(
            circle,
            rgba(22, 119, 255, 0.14),
            transparent 70%
        );
}


.hero-grid {
    position: relative;

    z-index: 10;

    display: grid;

    grid-template-columns:
        minmax(0, 1.07fr)
        minmax(390px, 0.93fr);

    align-items: center;

    gap: 65px;
}

.hero-content {
    position: relative;

    z-index: 5;
}


/* LOCATION LABEL */

.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 8px 14px;

    margin-bottom: 24px;

    border:
        1px solid rgba(22, 119, 255, 0.15);

    border-radius: 50px;

    color: var(--navy);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 8px 25px rgba(11, 31, 51, 0.05);
}

.eyebrow-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 0 5px rgba(32, 196, 217, 0.14);
}


/* HERO TITLE */

.hero h1 {
    max-width: 720px;

    color: var(--navy);

    font-size:
        clamp(2.9rem, 5.2vw, 5.15rem);

    line-height: 0.99;

    letter-spacing: -0.055em;

    margin-bottom: 26px;
}

.hero h1 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    background-clip: text;

    -webkit-background-clip: text;
}

.hero-description {
    max-width: 650px;

    color: var(--text-soft);

    font-size:
        clamp(1.04rem, 1.6vw, 1.22rem);

    margin-bottom: 34px;
}


/* HERO BUTTONS */

.hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 30px;
}

.btn {
    min-height: 54px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 0 25px;

    border-radius: 50px;

    font-weight: 800;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-primary {
    color: var(--white);

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

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

.btn-primary:hover {
    box-shadow:
        0 22px 45px rgba(22, 119, 255, 0.30);
}

.btn-secondary {
    color: var(--navy);

    background: var(--white);

    border:
        1px solid rgba(11, 31, 51, 0.12);

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

.btn-secondary:hover {
    border-color: var(--cyan);
}


/* HERO TRUST POINTS */

.hero-trust {
    display: flex;
    flex-wrap: wrap;

    gap: 22px;

    color: var(--navy);

    font-weight: 700;
}

.trust-item {
    display: flex;
    align-items: center;

    gap: 8px;
}

.trust-check {
    width: 23px;
    height: 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--white);

    font-size: 0.73rem;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );
}


/* =========================================================
   5. HERO LOGO VISUAL
   ========================================================= */

.hero-visual {
    min-height: 510px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* MAIN NAVY LOGO CARD */

.hero-logo-card {
    width: min(100%, 470px);

    position: relative;

    z-index: 4;

    padding: 30px;

    border:
        1px solid rgba(255, 255, 255, 0.75);

    border-radius: 36px;

    background:
        linear-gradient(
            145deg,
            #0B1F33,
            #103B5D
        );

    box-shadow:
        0 35px 70px rgba(11, 31, 51, 0.28);

    overflow: hidden;
}


/* ORANGE SUNSET GLOW */

.hero-logo-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    top: -55px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(244, 162, 97, 0.50),
            transparent 68%
        );
}


/* CYAN GLOW */

.logo-card-glow {
    position: absolute;

    width: 260px;
    height: 260px;

    left: -80px;
    bottom: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.32),
            transparent 68%
        );
}

.hero-logo-card img {
    position: relative;

    z-index: 3;

    width: 100%;
}


/* STATUS PILL */

.visual-status {
    width: fit-content;

    position: relative;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 9px;

    margin:
        10px auto
        0;

    padding: 8px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50px;

    color: #D9F9FD;

    font-size: 0.78rem;
    font-weight: 700;

    background:
        rgba(255, 255, 255, 0.06);
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 12px var(--cyan);
}


/* NETWORK-LIKE RINGS */

.visual-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(22, 119, 255, 0.16);
}

.visual-ring-one {
    width: 500px;
    height: 500px;
}

.visual-ring-two {
    width: 390px;
    height: 390px;

    border-color:
        rgba(32, 196, 217, 0.18);
}


/* FLOATING SERVICE CARDS */

.floating-card {
    position: absolute;

    z-index: 8;

    min-width: 170px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 15px;

    border:
        1px solid rgba(11, 31, 51, 0.08);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.94);

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

.floating-card strong,
.floating-card span {
    display: block;
}

.floating-card strong {
    color: var(--navy);

    font-size: 0.91rem;
}

.floating-card span {
    color: var(--text-soft);

    font-size: 0.72rem;
}

.floating-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: var(--blue);

    background:
        linear-gradient(
            135deg,
            rgba(22, 119, 255, 0.10),
            rgba(32, 196, 217, 0.15)
        );

    font-size: 1.35rem;
}

.floating-card-network {
    left: -28px;
    top: 72px;
}

.floating-card-cloud {
    right: -25px;
    bottom: 52px;
}


/* =========================================================
   6. HERO COASTAL WAVES
   ========================================================= */

.hero-waves {
    height: 100px;

    position: absolute;

    left: 0;
    right: 0;
    bottom: -35px;

    pointer-events: none;
}

.wave {
    position: absolute;

    left: -5%;

    width: 110%;

    border-radius:
        50% 50% 0 0;
}

.wave-back {
    height: 100px;

    bottom: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(22, 119, 255, 0.07),
            rgba(32, 196, 217, 0.20)
        );

    transform: rotate(-1.5deg);
}

.wave-middle {
    height: 73px;

    bottom: 5px;

    background:
        linear-gradient(
            90deg,
            rgba(22, 119, 255, 0.13),
            rgba(32, 196, 217, 0.10)
        );

    transform: rotate(1deg);
}

.wave-front {
    height: 54px;

    bottom: -8px;

    background: var(--off-white);
}


/* =========================================================
   7. SHARED SECTION STYLES
   ========================================================= */

.services-section,
.business-section,
.story-section {
    padding: 105px 0;
}

.section-heading {
    max-width: 730px;

    margin:
        0 auto
        50px;

    text-align: center;
}

.section-label {
    display: block;

    margin-bottom: 12px;

    color: var(--blue);

    font-size: 0.74rem;
    font-weight: 900;

    letter-spacing: 0.18em;
}

.section-heading h2,
.story-content h2,
.philosophy-heading h2,
.final-cta h2 {
    color: var(--navy);

    font-size:
        clamp(2rem, 4vw, 3.5rem);

    line-height: 1.08;

    letter-spacing: -0.04em;
}

.section-heading h2 span,
.story-content h2 span,
.philosophy-heading h2 span,
.final-cta h2 span {
    color: var(--blue);
}

.section-heading p {
    max-width: 610px;

    margin:
        18px auto
        0;

    color: var(--text-soft);

    font-size: 1.05rem;
}


/* =========================================================
   8. SERVICES
   ========================================================= */

.services-section {
    position: relative;

    background: var(--off-white);
}

.services-grid {
    display: grid;

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

    gap: 18px;
}

.service-card {
    min-height: 355px;

    position: relative;

    display: flex;
    flex-direction: column;

    padding: 28px 23px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    box-shadow:
        0 10px 30px rgba(11, 31, 51, 0.045);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.service-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(32, 196, 217, 0.48);

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

.service-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 23px;

    border-radius: 17px;

    color: var(--blue);

    font-size: 1.65rem;

    background:
        linear-gradient(
            135deg,
            rgba(22, 119, 255, 0.10),
            rgba(32, 196, 217, 0.14)
        );
}

.service-card h3 {
    color: var(--navy);

    font-size: 1.18rem;

    margin-bottom: 3px;
}

.service-tagline {
    color: var(--blue);

    font-size: 0.77rem;
    font-weight: 800;

    margin-bottom: 16px;
}

.service-card p {
    color: var(--text-soft);

    font-size: 0.90rem;

    margin-bottom: 24px;
}

.service-card a {
    margin-top: auto;

    color: var(--blue);

    font-size: 0.87rem;
    font-weight: 800;
}

.service-card a span {
    display: inline-block;

    margin-left: 4px;

    transition:
        transform var(--transition);
}

.service-card a:hover span {
    transform: translateX(5px);
}


/* FEATURED NETWORKING CARD */

.featured-service {
    border-color:
        rgba(22, 119, 255, 0.22);

    box-shadow:
        0 17px 40px rgba(22, 119, 255, 0.10);
}

.popular-label {
    position: absolute;

    right: 16px;
    top: 17px;

    padding: 5px 8px;

    border-radius: 50px;

    color: var(--white);

    font-size: 0.55rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );
}


/* =========================================================
   9. PHILOSOPHY SECTION
   ========================================================= */

.philosophy-section {
    position: relative;

    padding: 115px 0;

    color: var(--white);

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            #07192A,
            #0B1F33 44%,
            #103A56
        );
}

.philosophy-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -170px;
    top: -150px;

    border-radius: 50%;

    border:
        1px solid rgba(32, 196, 217, 0.13);
}

.philosophy-glow {
    width: 470px;
    height: 470px;

    position: absolute;

    left: -140px;
    bottom: -270px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 119, 255, 0.22),
            transparent 68%
        );
}

.philosophy-heading {
    max-width: 700px;

    margin-bottom: 55px;
}

.light-label {
    color: var(--cyan);
}

.philosophy-heading h2 {
    color: var(--white);
}

.philosophy-heading h2 span {
    color: var(--cyan);
}

.philosophy-heading p {
    max-width: 600px;

    margin-top: 20px;

    color: #BFD0DF;

    font-size: 1.07rem;
}

.principles-grid {
    position: relative;

    z-index: 3;

    display: grid;

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

    gap: 40px;
}

.principle {
    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}

.principle-number {
    color: var(--cyan);

    font-size: 0.74rem;
    font-weight: 900;

    letter-spacing: 0.14em;
}

.principle-line {
    width: 45px;
    height: 3px;

    margin:
        16px 0
        20px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );
}

.principle h3 {
    margin-bottom: 12px;

    font-size: 1.25rem;

    letter-spacing: 0.08em;
}

.principle p {
    color: #AFC1D0;

    font-size: 0.93rem;
}


/* =========================================================
   10. LOCAL BUSINESSES
   ========================================================= */

.business-section {
    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            var(--off-white)
        );
}

.business-grid {
    display: grid;

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

    gap: 17px;
}

.business-card {
    min-height: 145px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 22px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    box-shadow:
        0 8px 23px rgba(11, 31, 51, 0.04);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.business-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(22, 119, 255, 0.30);

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

.business-card span {
    font-size: 2rem;

    margin-bottom: 10px;
}

.business-card h3 {
    color: var(--navy);

    font-size: 0.95rem;
}

.business-cta {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 14px;

    margin-top: 35px;

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

.business-cta a {
    color: var(--blue);

    font-weight: 800;
}


/* =========================================================
   11. COMMUNITY STORY
   ========================================================= */

.story-section {
    background: var(--white);
}

.story-grid {
    display: grid;

    grid-template-columns:
        minmax(330px, 0.85fr)
        minmax(0, 1.15fr);

    align-items: center;

    gap: 75px;
}


/* VISUAL CARD */

.story-visual {
    min-height: 470px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 36px;

    background:
        linear-gradient(
            160deg,
            #0B1F33,
            #104364
        );

    overflow: hidden;

    box-shadow:
        0 30px 70px rgba(11, 31, 51, 0.20);
}


/* OXNARD SUNSET ACCENT */

.sunset-circle {
    width: 260px;
    height: 260px;

    position: absolute;

    right: -75px;
    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--orange-light) 0%,
            var(--orange) 28%,
            rgba(244, 162, 97, 0.12) 69%,
            transparent 70%
        );
}

.story-logo-wrap {
    position: relative;

    z-index: 5;

    width: 65%;
}

.story-logo-wrap img {
    width: 100%;

    filter:
        drop-shadow(
            0 20px 25px rgba(0, 0, 0, 0.19)
        );
}


/* STORY WAVES */

.story-wave {
    position: absolute;

    left: -15%;

    width: 130%;

    border-radius: 50%;
}

.story-wave-one {
    height: 90px;

    bottom: -48px;

    background:
        rgba(32, 196, 217, 0.24);

    transform: rotate(-3deg);
}

.story-wave-two {
    height: 80px;

    bottom: -60px;

    background:
        rgba(22, 119, 255, 0.28);

    transform: rotate(4deg);
}


.story-content h2 {
    margin-bottom: 25px;
}

.story-content h2 span {
    display: block;
}

.story-content p {
    color: var(--text-soft);

    margin-bottom: 17px;

    font-size: 1rem;
}

.text-link {
    display: inline-flex;

    margin-top: 10px;

    color: var(--blue);

    font-weight: 900;
}

.text-link span {
    margin-left: 7px;

    transition:
        transform var(--transition);
}

.text-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   12. FINAL CTA
   ========================================================= */

.final-cta {
    position: relative;

    padding: 115px 0;

    color: var(--white);

    text-align: center;

    overflow: hidden;

    background:
        linear-gradient(
            130deg,
            #07192A,
            var(--navy),
            #104766
        );
}

.final-cta::before,
.final-cta::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(32, 196, 217, 0.12);
}

.final-cta::before {
    width: 500px;
    height: 500px;

    left: -250px;
    top: -240px;
}

.final-cta::after {
    width: 420px;
    height: 420px;

    right: -200px;
    bottom: -270px;
}

.final-cta-content {
    position: relative;

    z-index: 5;

    max-width: 780px;
}

.cta-icon {
    width: 92px;
    height: 92px;

    object-fit: contain;

    margin:
        0 auto
        24px;

    filter:
        drop-shadow(
            0 12px 24px rgba(0, 0, 0, 0.25)
        );
}

.final-cta h2 {
    color: var(--white);

    margin-bottom: 20px;
}

.final-cta h2 span {
    color: var(--cyan);
}

.final-cta p {
    max-width: 610px;

    margin:
        0 auto
        28px;

    color: #C2D2DE;

    font-size: 1.05rem;
}

.btn-large {
    min-height: 58px;

    padding: 0 32px;
}

.final-cta small {
    display: block;

    margin-top: 18px;

    color: #91A9BA;
}


/* =========================================================
   13. FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    padding:
        70px 0
        35px;

    overflow: hidden;

    color: #AFC1D0;

    background: #061523;
}

.footer-grid {
    position: relative;

    z-index: 4;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1.35fr;

    gap: 45px;
}

.footer-logo {
    width: 280px;

    margin-bottom: 13px;
}

.footer-brand p {
    color: #88A4B8;

    font-size: 0.90rem;
}

.footer-grid h4 {
    color: var(--white);

    margin-bottom: 17px;
}

.footer-links {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}

.footer-links a {
    margin-bottom: 9px;

    color: #9DB2C2;

    font-size: 0.88rem;

    transition:
        color var(--transition);
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--cyan);
}

.footer-contact p {
    margin-bottom: 8px;

    font-size: 0.89rem;
}

.footer-contact a {
    display: inline-block;

    margin-top: 10px;

    color: var(--cyan);

    font-weight: 800;
}


/* FOOTER BOTTOM */

.footer-bottom {
    position: relative;

    z-index: 4;

    display: flex;
    justify-content: space-between;

    gap: 25px;

    margin-top: 50px;

    padding-top: 22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    color: #728DA1;

    font-size: 0.78rem;
}


/* SUBTLE WAVE IN FOOTER */

.footer-wave {
    position: absolute;

    width: 600px;
    height: 180px;

    right: -120px;
    bottom: -130px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(22, 119, 255, 0.24),
            rgba(32, 196, 217, 0.18)
        );
}


/* =========================================================
   14. RESPONSIVE - SMALL LAPTOP / TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .nav-logo {
        width: 230px;
    }

    .main-nav {
        gap: 18px;
    }

    .hero-grid {
        grid-template-columns:
            1fr 0.9fr;

        gap: 35px;
    }

    .services-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* =========================================================
   15. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 900px) {

    .nav-container {
        min-height: 78px;
    }


    /* MOBILE NAV */

    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;

        top: 78px;
        left: 4%;
        right: 4%;

        display: none;

        flex-direction: column;
        align-items: stretch;

        padding: 24px;

        border:
            1px solid var(--border);

        border-radius: 20px;

        background:
            rgba(255, 255, 255, 0.98);

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

    .main-nav.open {
        display: flex;
    }

    .nav-cta {
        text-align: center;
    }


    /* HERO */

    .hero {
        padding-top: 65px;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .hero-description {
        margin-inline: auto;
    }

    .hero-buttons,
    .hero-trust {
        justify-content: center;
    }

    .hero-visual {
        min-height: 480px;

        max-width: 600px;

        width: 100%;

        margin-inline: auto;
    }


    /* SERVICES */

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


    /* BUSINESSES */

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


    /* STORY */

    .story-grid {
        grid-template-columns: 1fr;
    }

    .story-visual {
        max-width: 620px;

        width: 100%;

        margin-inline: auto;
    }

    .story-content {
        text-align: center;
    }


    /* FOOTER */

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

}


/* =========================================================
   16. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .container {
        width: min(90%, var(--max-width));
    }

    .nav-logo {
        width: 195px;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding:
            58px 0
            110px;
    }

    .eyebrow {
        font-size: 0.66rem;
    }

    .hero h1 {
        font-size:
            clamp(2.65rem, 13vw, 4rem);
    }

    .hero-description {
        font-size: 0.98rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .hero-trust {
        gap: 13px;
    }

    .hero-visual {
        min-height: 390px;
    }

    .hero-logo-card {
        width: 90%;

        padding: 20px;

        border-radius: 27px;
    }


    /* NETWORK RINGS */

    .visual-ring-one {
        width: 360px;
        height: 360px;
    }

    .visual-ring-two {
        width: 290px;
        height: 290px;
    }


    /* FLOATING CARDS */

    .floating-card {
        min-width: 145px;

        padding: 10px 12px;
    }

    .floating-card-network {
        left: 0;
        top: 20px;
    }

    .floating-card-cloud {
        right: 0;
        bottom: 16px;
    }


    /* SECTIONS */

    .services-section,
    .business-section,
    .story-section {
        padding: 78px 0;
    }


    /* SERVICES */

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
    }


    /* PHILOSOPHY */

    .philosophy-section {
        padding: 85px 0;
    }

    .principles-grid {
        grid-template-columns: 1fr;
    }


    /* BUSINESSES */

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

    .business-cta {
        flex-direction: column;
    }


    /* STORY */

    .story-grid {
        gap: 50px;
    }

    .story-visual {
        min-height: 350px;
    }


    /* CTA */

    .final-cta {
        padding: 85px 0;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .footer-logo {
        margin-inline: auto;
    }

    .footer-links {
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;

        text-align: center;
    }

}


/* =========================================================
   17. RESPONSIVE - SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .business-grid {
        grid-template-columns: 1fr;
    }

    .nav-logo {
        width: 175px;
    }

    .floating-card {
        display: none;
    }

}





/* =========================================================
   SERVICES PAGE
   Add below existing homepage styles
   ========================================================= */


/* =========================================================
   18. SERVICES HERO
   ========================================================= */

.services-hero {
    min-height: 690px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    padding: 90px 0 140px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(32, 196, 217, 0.15),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(22, 119, 255, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F7FBFF 48%,
            #EDF8FC 100%
        );
}

.services-hero-grid {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    align-items: center;
    gap: 70px;
}

.services-hero-content h1 {
    max-width: 730px;

    margin-bottom: 27px;

    color: var(--navy);

    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.services-hero-content h1 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.services-hero-content > p {
    max-width: 650px;

    margin-bottom: 34px;

    color: var(--text-soft);

    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
}

.services-hero-note {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 5px;

    color: var(--navy);

    font-size: 0.88rem;
    font-weight: 700;
}

.services-hero-note > span {
    width: 25px;
    height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--white);
    font-size: 0.72rem;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );
}


/* BACKGROUND GLOWS */

.services-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.services-glow-one {
    width: 480px;
    height: 480px;

    right: -210px;
    top: -220px;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.15),
            transparent 68%
        );
}

.services-glow-two {
    width: 420px;
    height: 420px;

    left: -200px;
    bottom: -260px;

    background:
        radial-gradient(
            circle,
            rgba(22, 119, 255, 0.13),
            transparent 68%
        );
}


/* =========================================================
   19. SERVICES HERO VISUAL
   ========================================================= */

.services-hero-visual {
    min-height: 500px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.services-logo-panel {
    width: min(100%, 460px);

    position: relative;
    z-index: 5;

    padding: 34px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.8);

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #0B1F33,
            #103B5D
        );

    box-shadow:
        0 35px 75px rgba(11, 31, 51, 0.26);
}

.services-logo-panel img {
    width: 100%;

    position: relative;
    z-index: 4;
}

.services-sunset {
    width: 190px;
    height: 190px;

    position: absolute;

    right: -65px;
    top: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 188, 119, 0.72),
            rgba(244, 162, 97, 0.32) 40%,
            transparent 70%
        );
}

.services-cyan-glow {
    width: 300px;
    height: 300px;

    position: absolute;

    left: -130px;
    bottom: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.32),
            transparent 68%
        );
}

.services-panel-label {
    width: fit-content;

    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 8px;

    margin: 12px auto 0;

    padding: 8px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius: 50px;

    color: #D7F7FB;

    font-size: 0.75rem;
    font-weight: 700;

    background:
        rgba(255, 255, 255, 0.06);
}

.services-panel-label span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 12px var(--cyan);
}


/* NETWORK RINGS */

.services-visual-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(22, 119, 255, 0.18);
}

.services-ring-large {
    width: 510px;
    height: 510px;
}

.services-ring-small {
    width: 385px;
    height: 385px;

    border-color:
        rgba(32, 196, 217, 0.20);
}


/* FLOATING NETWORK NODES */

.services-floating-node {
    position: absolute;
    z-index: 8;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    box-shadow:
        0 0 0 8px rgba(32, 196, 217, 0.07),
        0 8px 20px rgba(22, 119, 255, 0.25);
}

.node-one {
    width: 18px;
    height: 18px;

    left: 10px;
    top: 88px;
}

.node-two {
    width: 12px;
    height: 12px;

    right: 6px;
    top: 125px;
}

.node-three {
    width: 15px;
    height: 15px;

    right: 65px;
    bottom: 32px;

    background: var(--orange);
}


/* SERVICES COASTAL WAVES */

.services-hero-wave {
    height: 110px;

    position: absolute;

    left: 0;
    right: 0;
    bottom: -35px;

    pointer-events: none;
}

.services-wave {
    position: absolute;

    left: -5%;

    width: 110%;

    border-radius: 50% 50% 0 0;
}

.services-wave-one {
    height: 100px;
    bottom: 20px;

    transform: rotate(-1deg);

    background:
        linear-gradient(
            90deg,
            rgba(22, 119, 255, 0.08),
            rgba(32, 196, 217, 0.21)
        );
}

.services-wave-two {
    height: 76px;
    bottom: 7px;

    transform: rotate(1.2deg);

    background:
        linear-gradient(
            90deg,
            rgba(32, 196, 217, 0.11),
            rgba(22, 119, 255, 0.12)
        );
}

.services-wave-three {
    height: 52px;
    bottom: -5px;

    background: var(--white);
}


/* =========================================================
   20. SERVICES INTRO
   ========================================================= */

.services-intro {
    padding: 90px 0 80px;

    background: var(--white);
}

.service-philosophy-strip {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 20px;

    padding: 28px 30px;

    border:
        1px solid var(--border);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF,
            #F5FAFF
        );

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

.service-philosophy-strip > div:not(.strip-arrow) {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.service-philosophy-strip strong {
    color: var(--blue);

    font-size: 0.69rem;

    letter-spacing: 0.12em;
}

.service-philosophy-strip span {
    color: var(--navy);

    font-size: 0.89rem;
    font-weight: 800;
}

.strip-arrow {
    color: var(--cyan);

    font-size: 1.35rem;
}


/* =========================================================
   21. SERVICE DETAIL SECTIONS
   ========================================================= */

.service-detail-section {
    position: relative;

    padding: 110px 0;
}

.service-light {
    background: var(--white);
}

.service-blue-soft {
    background:
        linear-gradient(
            135deg,
            #EDF8FC,
            #F7FBFF 48%,
            #EFF7FF
        );
}

.service-detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.9fr);

    align-items: center;

    gap: 80px;
}

.reverse-layout {
    grid-template-columns:
        minmax(380px, 0.9fr)
        minmax(0, 1fr);
}

.service-number {
    display: inline-block;

    margin-bottom: 19px;

    color: var(--blue);

    font-size: 0.69rem;
    font-weight: 900;

    letter-spacing: 0.16em;
}

.service-title-row {
    display: flex;
    align-items: center;

    gap: 17px;

    margin-bottom: 26px;
}

.detail-service-icon {
    width: 66px;
    height: 66px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 19px;

    color: var(--blue);

    font-size: 1.85rem;

    background:
        linear-gradient(
            135deg,
            rgba(22, 119, 255, 0.10),
            rgba(32, 196, 217, 0.17)
        );
}

.service-title-row h2 {
    color: var(--navy);

    font-size:
        clamp(1.8rem, 3vw, 2.7rem);

    line-height: 1.06;

    letter-spacing: -0.035em;
}

.detail-tagline {
    margin-top: 4px;

    color: var(--blue);

    font-size: 0.88rem;
    font-weight: 800;
}

.service-lead {
    max-width: 650px;

    margin-bottom: 28px;

    color: var(--text-soft);

    font-size: 1.05rem;
}


/* FEATURE LIST */

.service-feature-list {
    display: grid;

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

    gap: 13px 24px;

    margin-bottom: 35px;

    list-style: none;
}

.service-feature-list li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: var(--text);

    font-size: 0.92rem;
}

.service-feature-list li > span {
    width: 21px;
    height: 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin-top: 1px;

    border-radius: 50%;

    color: var(--white);

    font-size: 0.63rem;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );
}


/* =========================================================
   22. SERVICE PRICING ROW
   ========================================================= */

.service-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding-top: 27px;

    border-top:
        1px solid var(--border);
}

.service-price-row > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 7px;
}

.service-price-row > div > span {
    color: var(--text-soft);

    font-size: 0.78rem;
    font-weight: 700;
}

.service-price-row strong {
    color: var(--navy);

    font-size: 2rem;

    line-height: 1;
}

.service-price-row small {
    color: var(--text-soft);

    font-size: 0.78rem;
}

.service-quote-link {
    color: var(--blue);

    font-size: 0.88rem;
    font-weight: 900;

    transition:
        transform var(--transition),
        color var(--transition);
}

.service-quote-link:hover {
    color: var(--cyan);

    transform: translateX(3px);
}


/* =========================================================
   23. SERVICE VISUAL CONTAINERS
   ========================================================= */

.service-detail-visual {
    min-height: 430px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px;

    overflow: hidden;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #0B1F33,
            #10405F
        );

    box-shadow:
        0 30px 65px rgba(11, 31, 51, 0.18);
}

.service-detail-visual::before {
    content: "";

    width: 220px;
    height: 220px;

    position: absolute;

    right: -80px;
    top: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(244, 162, 97, 0.48),
            transparent 68%
        );
}

.service-detail-visual::after {
    content: "";

    width: 280px;
    height: 280px;

    position: absolute;

    left: -120px;
    bottom: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.28),
            transparent 70%
        );
}

.visual-caption {
    position: absolute;
    z-index: 10;

    bottom: 20px;

    padding: 7px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50px;

    color: #D4F6FA;

    background:
        rgba(255, 255, 255, 0.07);

    font-size: 0.70rem;
    font-weight: 700;

    letter-spacing: 0.04em;
}


/* =========================================================
   24. WEBSITE BROWSER VISUAL
   ========================================================= */

.browser-demo {
    width: 92%;

    position: relative;
    z-index: 5;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 17px;

    background: #FFFFFF;

    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.22);
}

.browser-top {
    height: 43px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 0 13px;

    background: #EAF0F5;
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.browser-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.browser-dots span:nth-child(1) {
    background: #F4A261;
}

.browser-dots span:nth-child(2) {
    background: #FFD166;
}

.browser-dots span:nth-child(3) {
    background: #20C4D9;
}

.browser-address {
    flex: 1;

    padding: 4px 10px;

    border-radius: 7px;

    color: #748394;

    background: #FFFFFF;

    font-size: 0.63rem;
}

.browser-content {
    min-height: 275px;

    padding: 32px 28px;

    background:
        linear-gradient(
            145deg,
            #FBFEFF,
            #EFF8FC
        );
}

.browser-brand-line {
    width: 32%;
    height: 7px;

    margin-bottom: 28px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );
}

.browser-copy {
    width: 72%;
    height: 9px;

    margin-bottom: 9px;

    border-radius: 20px;

    background: #D7E2EC;
}

.browser-copy-large {
    width: 88%;
    height: 20px;

    background: var(--navy);
}

.browser-copy-short {
    width: 50%;
}

.browser-button {
    width: 100px;
    height: 28px;

    margin-top: 22px;

    border-radius: 40px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );
}

.browser-cards {
    display: grid;

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

    gap: 9px;

    margin-top: 30px;
}

.browser-cards div {
    height: 55px;

    border:
        1px solid #E3EAF2;

    border-radius: 9px;

    background: #FFFFFF;
}


/* =========================================================
   25. NETWORK VISUAL
   ========================================================= */

.network-diagram {
    width: 330px;
    height: 330px;

    position: relative;
    z-index: 5;
}

.network-center {
    width: 92px;
    height: 92px;

    position: absolute;

    left: 50%;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    color: var(--white);

    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    box-shadow:
        0 0 0 14px rgba(32, 196, 217, 0.07),
        0 15px 40px rgba(22, 119, 255, 0.32);
}

.network-device {
    width: 67px;
    height: 67px;

    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 18px;

    color: #D9F9FD;

    background:
        rgba(255, 255, 255, 0.09);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.15);

    font-size: 0.65rem;
    font-weight: 900;
}

.network-device-one {
    left: 10px;
    top: 29px;
}

.network-device-two {
    right: 8px;
    top: 40px;
}

.network-device-three {
    left: 20px;
    bottom: 21px;
}

.network-device-four {
    right: 5px;
    bottom: 28px;
}

.network-line {
    position: absolute;

    width: 110px;
    height: 2px;

    left: 50%;
    top: 50%;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            rgba(32, 196, 217, 0.15)
        );
}

.line-one {
    transform:
        rotate(220deg);
}

.line-two {
    transform:
        rotate(320deg);
}

.line-three {
    transform:
        rotate(140deg);
}

.line-four {
    transform:
        rotate(40deg);
}


/* =========================================================
   26. TECHNOLOGY SETUP VISUAL
   ========================================================= */

.setup-workspace {
    width: 90%;
    height: 300px;

    position: relative;
    z-index: 5;
}

.setup-monitor {
    width: 220px;

    position: absolute;

    left: 50%;
    top: 45px;

    transform: translateX(-50%);
}

.setup-screen {
    height: 135px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow: hidden;

    border:
        4px solid #DDE7EE;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #081B2C,
            #10415D
        );

    box-shadow:
        0 20px 30px rgba(0, 0, 0, 0.24);
}

.setup-screen img {
    width: 82px;
    height: 82px;

    object-fit: contain;
}

.monitor-stand {
    width: 60px;
    height: 35px;

    position: relative;

    margin-inline: auto;

    border-bottom:
        7px solid #DDE7EE;
}

.monitor-stand::before {
    content: "";

    width: 6px;
    height: 29px;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    background: #DDE7EE;
}

.setup-device {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    color: #CFF8FC;

    background:
        rgba(255, 255, 255, 0.08);

    font-size: 0.58rem;
    font-weight: 900;
}

.setup-printer {
    width: 100px;
    height: 80px;

    left: 7px;
    bottom: 20px;

    border-radius: 15px;
}

.setup-router {
    width: 115px;
    height: 55px;

    right: 0;
    bottom: 35px;

    border-radius: 13px;
}

.setup-router i {
    width: 6px;
    height: 6px;

    margin-right: 5px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);
}

.setup-router span {
    margin-left: 8px;
}


/* =========================================================
   27. SERVERS & CLOUD DARK SECTION
   ========================================================= */

.cloud-service-section {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    color: var(--white);

    background:
        linear-gradient(
            125deg,
            #061725,
            #0B1F33 45%,
            #104762
        );
}

.cloud-service-grid {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(350px, 0.9fr);

    align-items: center;

    gap: 80px;
}

.cloud-service-glow {
    position: absolute;

    border-radius: 50%;
}

.cloud-glow-one {
    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -280px;

    background:
        radial-gradient(
            circle,
            rgba(22, 119, 255, 0.24),
            transparent 68%
        );
}

.cloud-glow-two {
    width: 390px;
    height: 390px;

    right: -180px;
    top: -180px;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.17),
            transparent 68%
        );
}

.service-number-dark {
    color: var(--cyan);
}

.dark-title-row h2 {
    color: var(--white);
}

.dark-service-icon {
    color: var(--cyan);

    border:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(22, 119, 255, 0.22),
            rgba(32, 196, 217, 0.14)
        );
}

.cyan-tagline {
    color: var(--cyan);
}

.cloud-lead {
    max-width: 650px;

    margin-bottom: 30px;

    color: #BFD0DE;

    font-size: 1.04rem;
}

.cloud-features {
    display: grid;

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

    gap: 13px 22px;

    margin-bottom: 37px;
}

.cloud-features > div {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #D2DEE7;

    font-size: 0.91rem;
}

.cloud-features > div > span {
    width: 21px;
    height: 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #062232;
    font-size: 0.63rem;
    font-weight: 900;

    background: var(--cyan);
}

.cloud-price-row {
    border-top-color:
        rgba(255, 255, 255, 0.12);
}

.cloud-price-row > div > span {
    color: #9CB3C4;
}

.cloud-price-row strong {
    color: var(--white);
}

.cloud-quote-link {
    color: var(--cyan);

    font-size: 0.88rem;
    font-weight: 900;
}

.cloud-quote-link:hover {
    color: var(--white);
}


/* =========================================================
   28. CLOUD SERVER VISUAL
   ========================================================= */

.cloud-visual {
    min-height: 460px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.cloud-network {
    width: 350px;
    height: 400px;

    position: relative;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.24);

    backdrop-filter: blur(10px);
}

.cloud-symbol {
    width: 92px;
    height: 92px;

    position: absolute;

    left: 50%;
    top: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateX(-50%);

    border-radius: 50%;

    color: var(--white);

    font-size: 2.4rem;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    box-shadow:
        0 0 0 14px rgba(32, 196, 217, 0.06),
        0 20px 40px rgba(22, 119, 255, 0.27);
}

.server-rack {
    width: 220px;

    position: absolute;

    left: 50%;
    top: 175px;

    transform: translateX(-50%);

    padding: 12px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 18px;

    background:
        rgba(4, 17, 28, 0.45);
}

.server-unit {
    height: 45px;

    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 8px;

    padding: 0 13px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.06);
}

.server-unit:last-child {
    margin-bottom: 0;
}

.server-unit span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 7px var(--cyan);
}

.server-unit i {
    width: 70px;
    height: 5px;

    margin-left: auto;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.12);
}

.cloud-node {
    position: absolute;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 12px var(--cyan);
}

.cloud-node-one {
    width: 10px;
    height: 10px;

    left: 35px;
    top: 105px;
}

.cloud-node-two {
    width: 8px;
    height: 8px;

    right: 34px;
    top: 150px;

    background: var(--blue);
}

.cloud-node-three {
    width: 11px;
    height: 11px;

    right: 55px;
    bottom: 52px;

    background: var(--orange);

    box-shadow:
        0 0 12px rgba(244, 162, 97, 0.55);
}

.cloud-network-label {
    position: absolute;

    left: 50%;
    bottom: 17px;

    transform: translateX(-50%);

    color: #87A5B9;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    white-space: nowrap;
}


/* =========================================================
   29. IT SUPPORT SECTION
   ========================================================= */

.support-service-section {
    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #F7FBFF
        );
}

.support-pricing-card {
    overflow: hidden;

    border:
        1px solid rgba(22, 119, 255, 0.15);

    border-radius: 30px;

    background: var(--white);

    box-shadow:
        0 28px 65px rgba(11, 31, 51, 0.13);
}

.support-card-header {
    padding: 34px 35px 29px;

    text-align: center;

    color: var(--white);

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(244, 162, 97, 0.24),
            transparent 29%
        ),
        linear-gradient(
            140deg,
            #0B1F33,
            #104461
        );
}

.support-card-header img {
    width: 75px;
    height: 75px;

    margin:
        0 auto
        14px;

    object-fit: contain;
}

.support-card-header > span {
    display: block;

    margin-bottom: 5px;

    color: var(--cyan);

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.15em;
}

.support-card-header h3 {
    margin-bottom: 7px;

    font-size: 2rem;

    letter-spacing: -0.03em;
}

.support-card-header p {
    color: #BFD2DE;

    font-size: 0.88rem;
}

.support-rate {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 30px;

    border-bottom:
        1px solid var(--border);
}

.support-rate > span {
    color: var(--navy);

    font-size: 0.92rem;
    font-weight: 800;
}

.support-rate > div {
    display: flex;
    align-items: baseline;
}

.support-rate strong {
    color: var(--blue);

    font-size: 1.8rem;
}

.support-rate small {
    margin-left: 3px;

    color: var(--text-soft);

    font-size: 0.72rem;
}

.support-minimum {
    padding: 15px 30px;

    color: var(--text-soft);

    text-align: center;

    font-size: 0.73rem;

    background: #F8FAFC;
}

.support-pricing-card > .btn {
    width: calc(100% - 60px);

    margin: 25px 30px 30px;
}


/* =========================================================
   30. PRICING NOTE
   ========================================================= */

.pricing-note-section {
    padding: 45px 0 90px;

    background: #F7FBFF;
}

.pricing-note {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 22px;

    padding: 30px 34px;

    border:
        1px solid rgba(22, 119, 255, 0.14);

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(22, 119, 255, 0.045),
            rgba(32, 196, 217, 0.07)
        );
}

.pricing-note-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--white);

    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );
}

.pricing-note h3 {
    margin-bottom: 6px;

    color: var(--navy);
}

.pricing-note p {
    max-width: 900px;

    color: var(--text-soft);

    font-size: 0.91rem;
}

.pricing-note .pricing-small {
    margin-top: 10px;

    font-size: 0.78rem;

    color: #778493;
}


/* =========================================================
   31. SERVICES FINAL CTA
   ========================================================= */

.services-final-cta {
    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(244, 162, 97, 0.13),
            transparent 26%
        ),
        linear-gradient(
            130deg,
            #061725,
            #0B1F33,
            #104660
        );
}


/* =========================================================
   32. SERVICES RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .services-hero-grid {
        grid-template-columns:
            1fr 0.85fr;

        gap: 40px;
    }

    .service-detail-grid,
    .reverse-layout {
        grid-template-columns:
            1fr 0.85fr;

        gap: 50px;
    }

    .cloud-service-grid {
        gap: 45px;
    }

}


/* =========================================================
   33. SERVICES TABLET
   ========================================================= */

@media (max-width: 900px) {

    .services-hero {
        padding-top: 70px;
    }

    .services-hero-grid {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .services-hero-content > p {
        margin-inline: auto;
    }

    .services-hero-content .hero-buttons {
        justify-content: center;
    }

    .services-hero-note {
        justify-content: center;
    }

    .services-hero-visual {
        width: 100%;
        max-width: 600px;

        min-height: 480px;

        margin-inline: auto;
    }


    /* PROCESS STRIP */

    .service-philosophy-strip {
        grid-template-columns:
            1fr 1fr;

        gap: 20px;
    }

    .strip-arrow {
        display: none;
    }

    .service-philosophy-strip > div:not(.strip-arrow) {
        padding: 10px;
    }


    /* SERVICE SECTIONS */

    .service-detail-grid,
    .reverse-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .reverse-layout .service-detail-visual {
        order: 2;
    }

    .reverse-layout .service-detail-content {
        order: 1;
    }

    .service-detail-visual {
        width: 100%;
        max-width: 650px;

        margin-inline: auto;
    }


    /* CLOUD */

    .cloud-service-grid {
        grid-template-columns: 1fr;
    }

    .cloud-visual {
        min-height: 430px;
    }

}


/* =========================================================
   34. SERVICES MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .services-hero {
        min-height: auto;

        padding:
            58px 0
            120px;
    }

    .services-hero-content h1 {
        font-size:
            clamp(2.6rem, 12vw, 3.8rem);
    }

    .services-hero-visual {
        min-height: 390px;
    }

    .services-logo-panel {
        width: 90%;

        padding: 22px;

        border-radius: 28px;
    }

    .services-ring-large {
        width: 360px;
        height: 360px;
    }

    .services-ring-small {
        width: 285px;
        height: 285px;
    }

    .services-floating-node {
        display: none;
    }


    /* INTRO */

    .services-intro {
        padding: 75px 0 65px;
    }

    .service-philosophy-strip {
        grid-template-columns: 1fr;

        text-align: center;

        padding: 22px;
    }


    /* SERVICE DETAILS */

    .service-detail-section {
        padding: 80px 0;
    }

    .service-title-row {
        align-items: flex-start;
    }

    .detail-service-icon {
        width: 55px;
        height: 55px;

        border-radius: 16px;

        font-size: 1.45rem;
    }

    .service-feature-list {
        grid-template-columns: 1fr;
    }

    .service-price-row {
        flex-direction: column;

        align-items: flex-start;
    }

    .service-detail-visual {
        min-height: 350px;

        padding: 22px;
    }


    /* WEBSITE VISUAL */

    .browser-demo {
        width: 100%;
    }

    .browser-content {
        min-height: 235px;

        padding: 25px 20px;
    }


    /* NETWORK VISUAL */

    .network-diagram {
        width: 280px;
        height: 280px;

        transform: scale(0.9);
    }


    /* SETUP VISUAL */

    .setup-workspace {
        width: 100%;
    }

    .setup-monitor {
        width: 190px;
    }

    .setup-screen {
        height: 120px;
    }

    .setup-printer {
        width: 78px;
        height: 68px;
    }

    .setup-router {
        width: 95px;
    }


    /* CLOUD */

    .cloud-service-section {
        padding: 85px 0;
    }

    .cloud-features {
        grid-template-columns: 1fr;
    }

    .cloud-price-row {
        align-items: flex-start;
    }

    .cloud-network {
        width: 300px;
        height: 380px;
    }


    /* SUPPORT */

    .support-rate {
        padding:
            20px
            22px;
    }

    .support-card-header {
        padding:
            30px
            24px;
    }


    /* PRICING NOTE */

    .pricing-note-section {
        padding-bottom: 70px;
    }

    .pricing-note {
        grid-template-columns: 1fr;

        text-align: center;

        padding: 25px;
    }

    .pricing-note-icon {
        margin-inline: auto;
    }

}


/* =========================================================
   35. SERVICES SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .services-hero-content h1 {
        font-size: 2.55rem;
    }

    .service-title-row h2 {
        font-size: 1.65rem;
    }

    .service-detail-visual {
        min-height: 315px;
    }

    .visual-caption {
        font-size: 0.61rem;
    }

    .network-diagram {
        transform: scale(0.78);
    }

    .cloud-network {
        width: 270px;
    }

    .server-rack {
        width: 195px;
    }

    .support-rate {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

}



/* =========================================================
   ABOUT PAGE
   Add below existing Homepage + Services styles
   ========================================================= */


/* =========================================================
   36. ABOUT HERO
   ========================================================= */

.about-hero {
    min-height: 700px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        90px 0
        140px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(32, 196, 217, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(22, 119, 255, 0.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F7FBFF 48%,
            #EDF8FC 100%
        );
}

.about-hero-grid {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);

    align-items: center;

    gap: 70px;
}


/* HERO COPY */

.about-hero-content h1 {
    max-width: 720px;

    margin-bottom: 27px;

    color: var(--navy);

    font-size:
        clamp(3rem, 5vw, 5rem);

    line-height: 1;

    letter-spacing: -0.055em;
}

.about-hero-content h1 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.about-hero-lead {
    max-width: 650px;

    margin-bottom: 34px;

    color: var(--text-soft);

    font-size:
        clamp(1.03rem, 1.5vw, 1.2rem);
}


/* HERO VALUES */

.about-hero-values {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 5px;

    color: var(--navy);

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.04em;
}

.about-hero-values i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 8px rgba(32, 196, 217, 0.6);
}


/* HERO GLOWS */

.about-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.about-glow-one {
    width: 480px;
    height: 480px;

    right: -210px;
    top: -230px;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.16),
            transparent 68%
        );
}

.about-glow-two {
    width: 400px;
    height: 400px;

    left: -180px;
    bottom: -230px;

    background:
        radial-gradient(
            circle,
            rgba(22, 119, 255, 0.14),
            transparent 68%
        );
}


/* =========================================================
   37. ABOUT HERO VISUAL
   ========================================================= */

.about-hero-visual {
    min-height: 510px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.about-logo-scene {
    width: min(100%, 460px);

    position: relative;
    z-index: 5;

    padding: 34px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.75);

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #0B1F33,
            #10415F
        );

    box-shadow:
        0 35px 75px rgba(11, 31, 51, 0.27);
}

.about-logo-scene img {
    width: 100%;

    position: relative;
    z-index: 4;
}


/* SUNSET */

.about-sunset {
    width: 210px;
    height: 210px;

    position: absolute;

    right: -76px;
    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 188, 119, 0.82) 0%,
            rgba(244, 162, 97, 0.42) 33%,
            rgba(244, 162, 97, 0.12) 59%,
            transparent 70%
        );
}


/* OCEAN GLOW */

.about-ocean-glow {
    width: 300px;
    height: 300px;

    position: absolute;

    left: -120px;
    bottom: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.35),
            transparent 68%
        );
}


/* PROUDLY LOCAL BADGE */

.community-badge {
    width: fit-content;

    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 8px;

    margin:
        13px auto
        0;

    padding: 8px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50px;

    color: #D9F8FB;

    font-size: 0.76rem;
    font-weight: 800;

    background:
        rgba(255, 255, 255, 0.06);
}

.community-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--orange);

    box-shadow:
        0 0 10px rgba(244, 162, 97, 0.7);
}


/* NETWORK RINGS */

.about-visual-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(22, 119, 255, 0.17);
}

.ring-outer {
    width: 510px;
    height: 510px;
}

.ring-inner {
    width: 390px;
    height: 390px;

    border-color:
        rgba(32, 196, 217, 0.20);
}


/* FLOATING NODES */

.about-node {
    position: absolute;

    z-index: 8;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    box-shadow:
        0 0 0 8px rgba(32, 196, 217, 0.07),
        0 9px 20px rgba(22, 119, 255, 0.24);
}

.node-local {
    width: 17px;
    height: 17px;

    left: 7px;
    top: 105px;
}

.node-tech {
    width: 12px;
    height: 12px;

    right: 5px;
    top: 145px;
}

.node-community {
    width: 15px;
    height: 15px;

    right: 62px;
    bottom: 36px;

    background: var(--orange);

    box-shadow:
        0 0 0 8px rgba(244, 162, 97, 0.06),
        0 8px 18px rgba(244, 162, 97, 0.28);
}


/* =========================================================
   38. ABOUT HERO WAVES
   ========================================================= */

.about-hero-waves {
    height: 110px;

    position: absolute;

    left: 0;
    right: 0;
    bottom: -35px;

    pointer-events: none;
}

.about-wave {
    position: absolute;

    left: -5%;

    width: 110%;

    border-radius:
        50% 50% 0 0;
}

.about-wave-back {
    height: 100px;

    bottom: 19px;

    transform: rotate(-1.1deg);

    background:
        linear-gradient(
            90deg,
            rgba(22, 119, 255, 0.08),
            rgba(32, 196, 217, 0.21)
        );
}

.about-wave-middle {
    height: 76px;

    bottom: 7px;

    transform: rotate(1deg);

    background:
        linear-gradient(
            90deg,
            rgba(32, 196, 217, 0.11),
            rgba(22, 119, 255, 0.12)
        );
}

.about-wave-front {
    height: 52px;

    bottom: -5px;

    background: var(--white);
}


/* =========================================================
   39. OUR STORY
   ========================================================= */

.about-story-section {
    padding: 115px 0;

    background: var(--white);
}

.about-story-grid {
    display: grid;

    grid-template-columns:
        minmax(350px, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 85px;
}

.about-story-copy h2 {
    margin-bottom: 27px;

    color: var(--navy);

    font-size:
        clamp(2.2rem, 4vw, 3.6rem);

    line-height: 1.06;

    letter-spacing: -0.045em;
}

.about-story-copy h2 span {
    display: block;

    color: var(--blue);
}

.about-story-copy p {
    margin-bottom: 17px;

    color: var(--text-soft);

    font-size: 1rem;
}

.about-story-copy .about-story-lead {
    color: var(--navy);

    font-size: 1.15rem;
    font-weight: 700;

    line-height: 1.55;
}


/* =========================================================
   40. STORY ART
   ========================================================= */

.about-story-art {
    min-height: 500px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 38px;

    background:
        linear-gradient(
            155deg,
            #091B2C,
            #0B1F33 43%,
            #104B67
        );

    box-shadow:
        0 32px 70px rgba(11, 31, 51, 0.22);
}

.story-art-sun {
    width: 270px;
    height: 270px;

    position: absolute;

    right: -90px;
    top: -95px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 188, 119, 0.88),
            rgba(244, 162, 97, 0.40) 35%,
            rgba(244, 162, 97, 0.08) 63%,
            transparent 70%
        );
}

.story-art-logo {
    width: 210px;
    height: 210px;

    position: relative;
    z-index: 7;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    box-shadow:
        0 0 0 18px rgba(32, 196, 217, 0.025),
        0 22px 50px rgba(0, 0, 0, 0.2);
}

.story-art-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 20px rgba(0, 0, 0, 0.2)
        );
}


/* NETWORK LINES */

.story-art-line {
    height: 2px;

    position: absolute;
    z-index: 2;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(32, 196, 217, 0.05),
            rgba(32, 196, 217, 0.55),
            rgba(22, 119, 255, 0.05)
        );
}

.line-a {
    width: 250px;

    left: 10%;
    top: 35%;

    transform: rotate(22deg);
}

.line-b {
    width: 285px;

    right: 2%;
    top: 52%;

    transform: rotate(-21deg);
}

.line-c {
    width: 250px;

    left: 15%;
    bottom: 25%;

    transform: rotate(-10deg);
}


/* ART NODES */

.story-art-node {
    position: absolute;
    z-index: 6;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 15px rgba(32, 196, 217, 0.8);
}

.art-node-one {
    width: 14px;
    height: 14px;

    left: 13%;
    top: 27%;
}

.art-node-two {
    width: 11px;
    height: 11px;

    right: 13%;
    top: 45%;

    background: var(--blue);
}

.art-node-three {
    width: 14px;
    height: 14px;

    right: 20%;
    bottom: 19%;

    background: var(--orange);

    box-shadow:
        0 0 15px rgba(244, 162, 97, 0.6);
}


/* ART WAVES */

.art-wave {
    position: absolute;

    left: -15%;

    width: 130%;

    border-radius: 50%;
}

.art-wave-one {
    height: 100px;

    bottom: -53px;

    transform: rotate(-3deg);

    background:
        rgba(32, 196, 217, 0.20);
}

.art-wave-two {
    height: 84px;

    bottom: -62px;

    transform: rotate(4deg);

    background:
        rgba(22, 119, 255, 0.25);
}


/* =========================================================
   41. ABOUT MISSION
   ========================================================= */

.about-mission {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    color: var(--white);

    background:
        linear-gradient(
            125deg,
            #061725,
            #0B1F33 45%,
            #10435F
        );
}

.about-mission::before {
    content: "";

    width: 450px;
    height: 450px;

    position: absolute;

    right: -210px;
    top: -220px;

    border:
        1px solid rgba(32, 196, 217, 0.12);

    border-radius: 50%;
}

.about-mission-glow {
    width: 540px;
    height: 540px;

    position: absolute;

    left: -250px;
    bottom: -310px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 119, 255, 0.23),
            transparent 68%
        );
}

.about-mission-inner {
    position: relative;
    z-index: 5;
}

.about-mission-inner > h2 {
    max-width: 820px;

    color: var(--white);

    font-size:
        clamp(2.3rem, 4vw, 3.8rem);

    line-height: 1.07;

    letter-spacing: -0.045em;
}

.about-mission-inner > h2 span {
    display: block;

    color: var(--cyan);
}

.about-mission-inner > p {
    max-width: 720px;

    margin-top: 21px;

    color: #B9CDDA;

    font-size: 1.05rem;
}


/* MISSION CARDS */

.mission-pillars {
    display: grid;

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

    gap: 22px;

    margin-top: 58px;
}

.mission-pillar {
    position: relative;

    padding: 33px 29px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.025)
        );

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.mission-pillar:hover {
    transform: translateY(-7px);

    border-color:
        rgba(32, 196, 217, 0.28);

    background:
        linear-gradient(
            145deg,
            rgba(22, 119, 255, 0.11),
            rgba(32, 196, 217, 0.045)
        );
}

.pillar-number {
    display: block;

    margin-bottom: 22px;

    color: var(--cyan);

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 0.15em;
}

.pillar-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 16px;

    color: var(--cyan);

    font-size: 1.4rem;

    background:
        rgba(32, 196, 217, 0.09);
}

.mission-pillar h3 {
    margin-bottom: 10px;

    color: var(--white);

    font-size: 1.1rem;

    letter-spacing: 0.07em;
}

.mission-pillar p {
    color: #AFC4D2;

    font-size: 0.91rem;
}


/* =========================================================
   42. PROJECT TO RELATIONSHIP
   ========================================================= */

.about-approach {
    padding: 115px 0;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #F7FBFF
        );
}

.relationship-path {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 15px;

    margin-top: 65px;
}

.relationship-step {
    min-height: 295px;

    position: relative;

    padding: 29px 24px;

    border:
        1px solid var(--border);

    border-radius: 22px;

    background: var(--white);

    box-shadow:
        0 10px 30px rgba(11, 31, 51, 0.05);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.relationship-step:hover {
    transform: translateY(-7px);

    border-color:
        rgba(32, 196, 217, 0.4);

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

.relationship-number {
    margin-bottom: 20px;

    color: var(--blue);

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 0.14em;
}

.relationship-icon {
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 17px;

    color: var(--blue);

    font-size: 1.45rem;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            rgba(22, 119, 255, 0.10),
            rgba(32, 196, 217, 0.15)
        );
}

.relationship-step h3 {
    margin-bottom: 11px;

    color: var(--navy);

    font-size: 1.05rem;
}

.relationship-step p {
    color: var(--text-soft);

    font-size: 0.89rem;
}

.relationship-line {
    width: 40px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(22, 119, 255, 0.2),
            var(--cyan),
            rgba(22, 119, 255, 0.2)
        );
}


/* =========================================================
   43. TECHNICAL FOUNDATION
   ========================================================= */

.technical-foundation {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    color: var(--white);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(244, 162, 97, 0.10),
            transparent 24%
        ),
        linear-gradient(
            130deg,
            #061522,
            #0A2034,
            #10435F
        );
}

.technical-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);

    align-items: center;

    gap: 80px;
}

.technical-content h2 {
    max-width: 680px;

    color: var(--white);

    font-size:
        clamp(2.2rem, 4vw, 3.7rem);

    line-height: 1.07;

    letter-spacing: -0.045em;
}

.technical-content h2 span {
    display: block;

    color: var(--cyan);
}

.technical-content > p {
    max-width: 650px;

    margin:
        21px 0
        30px;

    color: #B8CBD8;

    font-size: 1.02rem;
}


/* TECH TAGS */

.technical-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    max-width: 650px;
}

.technical-tags span {
    padding: 8px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50px;

    color: #CDE0EA;

    font-size: 0.73rem;
    font-weight: 700;

    background:
        rgba(255, 255, 255, 0.04);

    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.technical-tags span:hover {
    color: var(--white);

    border-color:
        rgba(32, 196, 217, 0.35);

    background:
        rgba(32, 196, 217, 0.08);
}

.technical-link {
    display: inline-block;

    margin-top: 30px;

    color: var(--cyan);

    font-weight: 900;
}


/* =========================================================
   44. TECH ORBIT VISUAL
   ========================================================= */

.technical-visual {
    min-height: 470px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-center {
    width: 145px;
    height: 145px;

    position: relative;
    z-index: 8;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(22, 119, 255, 0.18),
            rgba(32, 196, 217, 0.12)
        );

    box-shadow:
        0 0 0 17px rgba(32, 196, 217, 0.025),
        0 25px 55px rgba(0, 0, 0, 0.24);
}

.tech-center img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ORBITS */

.tech-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(32, 196, 217, 0.14);
}

.orbit-one {
    width: 240px;
    height: 240px;
}

.orbit-two {
    width: 350px;
    height: 350px;

    border-color:
        rgba(22, 119, 255, 0.16);
}

.orbit-three {
    width: 440px;
    height: 440px;

    border-color:
        rgba(255, 255, 255, 0.07);
}


/* TECH NODES */

.tech-node {
    position: absolute;
    z-index: 9;

    min-width: 94px;

    padding: 9px 14px;

    text-align: center;

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius: 50px;

    color: #D7F7FA;

    background:
        rgba(255, 255, 255, 0.06);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.13);

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.09em;
}

.tech-node::before {
    content: "";

    width: 7px;
    height: 7px;

    display: inline-block;

    margin-right: 7px;

    border-radius: 50%;

    vertical-align: 1px;

    background: var(--cyan);

    box-shadow:
        0 0 8px var(--cyan);
}

.tech-node-network {
    left: 10px;
    top: 80px;
}

.tech-node-linux {
    right: 3px;
    top: 125px;
}

.tech-node-cloud {
    left: 35px;
    bottom: 78px;
}

.tech-node-web {
    right: 40px;
    bottom: 45px;
}

.tech-node-web::before {
    background: var(--orange);

    box-shadow:
        0 0 8px rgba(244, 162, 97, 0.7);
}


/* =========================================================
   45. COMMUNITY / WHO WE HELP
   ========================================================= */

.about-community {
    padding: 115px 0;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            var(--off-white)
        );
}

.about-community-grid {
    display: grid;

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

    gap: 17px;
}

.about-community-grid article {
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 22px;

    border:
        1px solid var(--border);

    border-radius: 20px;

    background: var(--white);

    box-shadow:
        0 8px 23px rgba(11, 31, 51, 0.04);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.about-community-grid article:hover {
    transform: translateY(-6px);

    border-color:
        rgba(22, 119, 255, 0.3);

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

.about-community-grid article > span {
    margin-bottom: 10px;

    font-size: 2rem;
}

.about-community-grid h3 {
    color: var(--navy);

    font-size: 0.95rem;
}


/* =========================================================
   46. WHY LOCAL MATTERS
   ========================================================= */

.about-closing {
    padding: 105px 0;

    background: var(--white);
}

.about-closing-grid {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: start;

    gap: 80px;
}

.about-closing h2 {
    color: var(--navy);

    font-size:
        clamp(2.1rem, 4vw, 3.4rem);

    line-height: 1.08;

    letter-spacing: -0.04em;
}

.about-closing h2 span {
    display: block;

    color: var(--blue);
}

.about-closing-copy {
    padding-left: 35px;

    border-left:
        3px solid var(--cyan);
}

.about-closing-copy p {
    margin-bottom: 15px;

    color: var(--text-soft);

    font-size: 1.02rem;
}

.about-closing-copy strong {
    display: block;

    margin-top: 25px;

    color: var(--navy);

    font-size:
        clamp(1.2rem, 2vw, 1.5rem);
}


/* =========================================================
   47. ABOUT FINAL CTA
   ========================================================= */

.about-final-cta {
    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(244, 162, 97, 0.14),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(32, 196, 217, 0.10),
            transparent 28%
        ),
        linear-gradient(
            130deg,
            #061725,
            #0B1F33,
            #104660
        );
}


/* =========================================================
   48. ABOUT RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .about-hero-grid {
        gap: 40px;
    }

    .about-story-grid {
        gap: 55px;
    }

    .technical-grid {
        gap: 45px;
    }

    .relationship-path {
        grid-template-columns:
            1fr 1fr;

        gap: 20px;
    }

    .relationship-line {
        display: none;
    }

}


/* =========================================================
   49. ABOUT RESPONSIVE - 900PX
   ========================================================= */

@media (max-width: 900px) {

    /* HERO */

    .about-hero {
        padding-top: 70px;
    }

    .about-hero-grid {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .about-hero-lead {
        margin-inline: auto;
    }

    .about-hero-content .hero-buttons {
        justify-content: center;
    }

    .about-hero-values {
        justify-content: center;
    }

    .about-hero-visual {
        width: 100%;
        max-width: 600px;

        min-height: 480px;

        margin-inline: auto;
    }


    /* STORY */

    .about-story-grid {
        grid-template-columns: 1fr;
    }

    .about-story-art {
        width: 100%;
        max-width: 620px;

        margin-inline: auto;
    }

    .about-story-copy {
        text-align: center;
    }


    /* MISSION */

    .mission-pillars {
        grid-template-columns: 1fr;
    }


    /* TECH */

    .technical-grid {
        grid-template-columns: 1fr;
    }

    .technical-content {
        text-align: center;
    }

    .technical-content h2,
    .technical-content > p,
    .technical-tags {
        margin-left: auto;
        margin-right: auto;
    }

    .technical-tags {
        justify-content: center;
    }

    .technical-visual {
        width: 100%;
        max-width: 600px;

        margin-inline: auto;
    }


    /* COMMUNITY */

    .about-community-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* CLOSING */

    .about-closing-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


/* =========================================================
   50. ABOUT RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 680px) {

    /* HERO */

    .about-hero {
        min-height: auto;

        padding:
            58px 0
            120px;
    }

    .about-hero-content h1 {
        font-size:
            clamp(2.6rem, 12vw, 3.8rem);
    }

    .about-hero-values {
        gap: 9px;

        font-size: 0.74rem;
    }

    .about-hero-visual {
        min-height: 390px;
    }

    .about-logo-scene {
        width: 90%;

        padding: 22px;

        border-radius: 28px;
    }

    .ring-outer {
        width: 360px;
        height: 360px;
    }

    .ring-inner {
        width: 285px;
        height: 285px;
    }

    .about-node {
        display: none;
    }


    /* STORY */

    .about-story-section {
        padding: 80px 0;
    }

    .about-story-art {
        min-height: 380px;

        border-radius: 28px;
    }

    .story-art-logo {
        width: 165px;
        height: 165px;

        padding: 22px;
    }

    .about-story-copy h2 {
        font-size:
            clamp(2rem, 9vw, 2.8rem);
    }


    /* MISSION */

    .about-mission {
        padding: 85px 0;
    }

    .mission-pillars {
        margin-top: 42px;
    }


    /* RELATIONSHIP */

    .about-approach {
        padding: 80px 0;
    }

    .relationship-path {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }

    .relationship-step {
        min-height: auto;
    }


    /* TECH */

    .technical-foundation {
        padding: 85px 0;
    }

    .technical-visual {
        min-height: 390px;
    }

    .orbit-one {
        width: 190px;
        height: 190px;
    }

    .orbit-two {
        width: 285px;
        height: 285px;
    }

    .orbit-three {
        width: 365px;
        height: 365px;
    }

    .tech-center {
        width: 125px;
        height: 125px;
    }

    .tech-node {
        min-width: 80px;

        padding: 8px 10px;

        font-size: 0.56rem;
    }

    .tech-node-network {
        left: 0;
        top: 68px;
    }

    .tech-node-linux {
        right: 0;
        top: 115px;
    }

    .tech-node-cloud {
        left: 8px;
        bottom: 68px;
    }

    .tech-node-web {
        right: 12px;
        bottom: 48px;
    }


    /* COMMUNITY */

    .about-community {
        padding: 80px 0;
    }

    .about-community-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* CLOSING */

    .about-closing {
        padding: 80px 0;
    }

    .about-closing-copy {
        padding-left: 23px;
    }

}


/* =========================================================
   51. ABOUT RESPONSIVE - SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .about-hero-content h1 {
        font-size: 2.5rem;
    }

    .about-hero-values i {
        display: none;
    }

    .about-hero-values {
        flex-direction: column;
    }

    .about-story-art {
        min-height: 330px;
    }

    .story-art-logo {
        width: 145px;
        height: 145px;
    }

    .about-community-grid {
        grid-template-columns: 1fr;
    }

    .technical-visual {
        min-height: 340px;
    }

    .orbit-one {
        width: 175px;
        height: 175px;
    }

    .orbit-two {
        width: 250px;
        height: 250px;
    }

    .orbit-three {
        width: 315px;
        height: 315px;
    }

    .tech-node-network {
        left: -5px;
    }

    .tech-node-linux {
        right: -5px;
    }

}



/* =========================================================
   CONTACT PAGE
   Add below existing Homepage + Services + About styles
   ========================================================= */


/* =========================================================
   52. CONTACT HERO
   ========================================================= */

.contact-hero {
    min-height: 700px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 90px 0 140px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(32, 196, 217, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 9% 78%,
            rgba(22, 119, 255, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F7FBFF 48%,
            #EDF8FC 100%
        );
}

.contact-hero-grid {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);

    align-items: center;

    gap: 70px;
}


/* HERO COPY */

.contact-hero-content h1 {
    max-width: 750px;

    margin-bottom: 26px;

    color: var(--navy);

    font-size:
        clamp(3rem, 5vw, 5rem);

    line-height: 1;

    letter-spacing: -0.055em;
}

.contact-hero-content h1 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.contact-hero-lead {
    max-width: 650px;

    margin-bottom: 16px;

    color: var(--text-soft);

    font-size:
        clamp(1.03rem, 1.5vw, 1.2rem);
}

.contact-hero-message {
    max-width: 600px;

    margin-bottom: 32px;

    color: var(--navy);

    font-size: 0.97rem;
    font-weight: 700;
}


/* TRUST ITEMS */

.contact-trust-row {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 28px;
}

.contact-trust-row > div {
    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--navy);

    font-size: 0.80rem;
    font-weight: 700;
}

.contact-trust-row > div > span {
    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--white);

    font-size: 0.63rem;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );
}


/* HERO GLOWS */

.contact-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.contact-glow-one {
    width: 500px;
    height: 500px;

    right: -225px;
    top: -240px;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.17),
            transparent 68%
        );
}

.contact-glow-two {
    width: 420px;
    height: 420px;

    left: -200px;
    bottom: -250px;

    background:
        radial-gradient(
            circle,
            rgba(22, 119, 255, 0.14),
            transparent 68%
        );
}


/* =========================================================
   53. CONTACT HERO VISUAL
   ========================================================= */

.contact-hero-visual {
    min-height: 510px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-logo-panel {
    width: min(100%, 460px);

    position: relative;
    z-index: 5;

    padding: 34px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.75);

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #0B1F33,
            #10415F
        );

    box-shadow:
        0 35px 75px rgba(11, 31, 51, 0.27);
}

.contact-logo-panel img {
    width: 100%;

    position: relative;
    z-index: 4;
}


/* SUNSET */

.contact-sunset {
    width: 210px;
    height: 210px;

    position: absolute;

    right: -75px;
    top: -85px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 188, 119, 0.82),
            rgba(244, 162, 97, 0.42) 34%,
            rgba(244, 162, 97, 0.10) 61%,
            transparent 70%
        );
}


/* CYAN GLOW */

.contact-ocean-glow {
    width: 310px;
    height: 310px;

    position: absolute;

    left: -130px;
    bottom: -175px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.35),
            transparent 68%
        );
}


/* AVAILABILITY PILL */

.contact-availability {
    width: fit-content;

    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 8px;

    margin: 13px auto 0;

    padding: 8px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50px;

    color: #D9F8FB;

    font-size: 0.75rem;
    font-weight: 800;

    background:
        rgba(255, 255, 255, 0.06);
}

.contact-availability span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 11px var(--cyan);
}


/* NETWORK RINGS */

.contact-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(22, 119, 255, 0.17);
}

.contact-ring-one {
    width: 510px;
    height: 510px;
}

.contact-ring-two {
    width: 390px;
    height: 390px;

    border-color:
        rgba(32, 196, 217, 0.20);
}


/* NETWORK NODES */

.contact-node {
    position: absolute;

    z-index: 8;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    box-shadow:
        0 0 0 8px rgba(32, 196, 217, 0.07),
        0 8px 20px rgba(22, 119, 255, 0.25);
}

.contact-node-one {
    width: 17px;
    height: 17px;

    left: 8px;
    top: 105px;
}

.contact-node-two {
    width: 12px;
    height: 12px;

    right: 5px;
    top: 145px;
}

.contact-node-three {
    width: 15px;
    height: 15px;

    right: 62px;
    bottom: 37px;

    background: var(--orange);

    box-shadow:
        0 0 0 8px rgba(244, 162, 97, 0.06),
        0 8px 20px rgba(244, 162, 97, 0.28);
}


/* =========================================================
   54. CONTACT HERO WAVES
   ========================================================= */

.contact-hero-waves {
    height: 110px;

    position: absolute;

    left: 0;
    right: 0;
    bottom: -35px;

    pointer-events: none;
}

.contact-wave {
    position: absolute;

    left: -5%;

    width: 110%;

    border-radius:
        50% 50% 0 0;
}

.contact-wave-one {
    height: 100px;

    bottom: 19px;

    transform: rotate(-1.1deg);

    background:
        linear-gradient(
            90deg,
            rgba(22, 119, 255, 0.08),
            rgba(32, 196, 217, 0.21)
        );
}

.contact-wave-two {
    height: 76px;

    bottom: 7px;

    transform: rotate(1deg);

    background:
        linear-gradient(
            90deg,
            rgba(32, 196, 217, 0.11),
            rgba(22, 119, 255, 0.12)
        );
}

.contact-wave-three {
    height: 52px;

    bottom: -5px;

    background: var(--white);
}


/* =========================================================
   55. CONTACT INTRO
   ========================================================= */

.contact-intro {
    padding:
        90px 0
        45px;

    background: var(--white);
}


/* =========================================================
   56. MAIN CONTACT AREA
   ========================================================= */

.contact-main-section {
    padding:
        40px 0
        115px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #F5FAFD
        );
}

.contact-main-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(500px, 1.15fr);

    align-items: start;

    gap: 70px;
}


/* =========================================================
   57. CONTACT INFO COLUMN
   ========================================================= */

.contact-info-column {
    padding-top: 15px;
}

.contact-info-column > h2 {
    max-width: 540px;

    margin-bottom: 20px;

    color: var(--navy);

    font-size:
        clamp(2rem, 3.5vw, 3rem);

    line-height: 1.07;

    letter-spacing: -0.04em;
}

.contact-info-column > p {
    max-width: 560px;

    margin-bottom: 15px;

    color: var(--text-soft);

    font-size: 0.98rem;
}


/* SERVICE QUICK LIST */

.contact-service-list {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 35px;
}

.contact-service-list > div {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px 16px;

    border:
        1px solid var(--border);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.72);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.contact-service-list > div:hover {
    transform: translateX(5px);

    border-color:
        rgba(32, 196, 217, 0.38);

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

.contact-service-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 13px;

    color: var(--blue);

    font-size: 1.15rem;

    background:
        linear-gradient(
            135deg,
            rgba(22, 119, 255, 0.10),
            rgba(32, 196, 217, 0.15)
        );
}

.contact-service-list strong,
.contact-service-list small {
    display: block;
}

.contact-service-list strong {
    margin-bottom: 2px;

    color: var(--navy);

    font-size: 0.90rem;
}

.contact-service-list small {
    color: var(--text-soft);

    font-size: 0.74rem;
    line-height: 1.4;
}


/* LOCAL CARD */

.contact-local-card {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 28px;

    padding: 22px;

    overflow: hidden;

    border-radius: 20px;

    color: var(--white);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(244, 162, 97, 0.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0B1F33,
            #10425E
        );

    box-shadow:
        0 18px 40px rgba(11, 31, 51, 0.15);
}

.contact-local-card img {
    width: 70px;
    height: 70px;

    flex-shrink: 0;

    object-fit: contain;
}

.contact-local-card span {
    color: var(--cyan);

    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.13em;
}

.contact-local-card h3 {
    margin:
        2px 0
        2px;

    font-size: 1.15rem;
}

.contact-local-card p {
    color: #BBD0DD;

    font-size: 0.78rem;
}


/* =========================================================
   58. CONTACT FORM CARD
   ========================================================= */

.contact-form-card {
    border:
        1px solid rgba(22, 119, 255, 0.13);

    border-radius: 30px;

    overflow: hidden;

    background: var(--white);

    box-shadow:
        0 30px 70px rgba(11, 31, 51, 0.13);
}


/* FORM HEADER */

.contact-form-heading {
    padding:
        35px 38px
        30px;

    color: var(--white);

    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(244, 162, 97, 0.21),
            transparent 33%
        ),
        linear-gradient(
            135deg,
            var(--navy),
            #104662
        );
}

.contact-form-heading > span {
    display: block;

    margin-bottom: 7px;

    color: var(--cyan);

    font-size: 0.64rem;
    font-weight: 900;

    letter-spacing: 0.15em;
}

.contact-form-heading h2 {
    margin-bottom: 8px;

    font-size:
        clamp(1.6rem, 3vw, 2.2rem);

    line-height: 1.12;

    letter-spacing: -0.035em;
}

.contact-form-heading p {
    max-width: 580px;

    color: #BED1DD;

    font-size: 0.88rem;
}


/* =========================================================
   59. CONTACT FORM
   ========================================================= */

.contact-form {
    display: grid;

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

    gap: 21px;

    padding: 35px 38px 40px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.form-group-full {
    grid-column:
        1 / -1;
}

.form-group label {
    color: var(--navy);

    font-size: 0.78rem;
    font-weight: 800;
}

.form-group label > span {
    color: var(--orange);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    border:
        1px solid #D9E3EB;

    border-radius: 12px;

    outline: none;

    color: var(--navy);

    background: #FAFCFE;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-group input,
.form-group select {
    min-height: 50px;

    padding:
        0 14px;
}

.form-group textarea {
    min-height: 155px;

    padding: 14px;

    resize: vertical;

    line-height: 1.55;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9AA7B4;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color:
        rgba(22, 119, 255, 0.30);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--cyan);

    background: var(--white);

    box-shadow:
        0 0 0 4px rgba(32, 196, 217, 0.10);
}


/* SELECT ARROW */

.form-group select {
    cursor: pointer;
}


/* SUBMIT */

.form-submit-area {
    padding-top: 6px;
}

.contact-submit {
    width: 100%;

    border: none;

    cursor: pointer;
}

.contact-submit span {
    margin-left: 8px;

    transition:
        transform var(--transition);
}

.contact-submit:hover span {
    transform:
        translateX(4px);
}

.form-submit-area > p {
    margin-top: 11px;

    color: var(--text-soft);

    text-align: center;

    font-size: 0.72rem;
}


/* =========================================================
   60. WHAT HAPPENS NEXT
   ========================================================= */

.contact-process {
    padding: 115px 0;

    background: var(--white);
}

.contact-process-grid {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 24px;

    margin-top: 55px;
}

.contact-process-card {
    min-height: 285px;

    padding: 30px 27px;

    border:
        1px solid var(--border);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #FBFDFF
        );

    box-shadow:
        0 10px 30px rgba(11, 31, 51, 0.05);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.contact-process-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(32, 196, 217, 0.38);

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

.process-number {
    margin-bottom: 18px;

    color: var(--blue);

    font-size: 0.68rem;
    font-weight: 900;

    letter-spacing: 0.15em;
}

.process-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 21px;

    border-radius: 17px;

    color: var(--blue);

    font-size: 1.4rem;

    background:
        linear-gradient(
            135deg,
            rgba(22, 119, 255, 0.10),
            rgba(32, 196, 217, 0.16)
        );
}

.contact-process-card h3 {
    margin-bottom: 10px;

    color: var(--navy);

    font-size: 1.08rem;
}

.contact-process-card p {
    color: var(--text-soft);

    font-size: 0.88rem;
}

.process-arrow {
    color: var(--cyan);

    font-size: 1.7rem;
}


/* =========================================================
   61. LOCAL COMMUNITY MESSAGE
   ========================================================= */

.contact-community-message {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    color: var(--white);

    background:
        linear-gradient(
            125deg,
            #061725,
            #0B1F33 45%,
            #10445F
        );
}

.contact-community-glow {
    width: 540px;
    height: 540px;

    position: absolute;

    right: -280px;
    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 196, 217, 0.18),
            transparent 68%
        );
}

.contact-community-grid {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(350px, 0.85fr)
        minmax(0, 1.15fr);

    align-items: center;

    gap: 80px;
}


/* COMMUNITY ART */

.contact-community-visual {
    min-height: 420px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 34px;

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.20);
}

.contact-community-visual img {
    width: 48%;

    position: relative;
    z-index: 6;

    filter:
        drop-shadow(
            0 18px 25px rgba(0, 0, 0, 0.22)
        );
}

.community-sun {
    width: 230px;
    height: 230px;

    position: absolute;

    right: -80px;
    top: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 188, 119, 0.85),
            rgba(244, 162, 97, 0.36) 35%,
            transparent 69%
        );
}

.community-wave {
    position: absolute;

    left: -15%;

    width: 130%;

    border-radius: 50%;
}

.community-wave-one {
    height: 100px;

    bottom: -50px;

    transform:
        rotate(-3deg);

    background:
        rgba(32, 196, 217, 0.23);
}

.community-wave-two {
    height: 82px;

    bottom: -61px;

    transform:
        rotate(4deg);

    background:
        rgba(22, 119, 255, 0.28);
}


/* COPY */

.contact-community-copy h2 {
    max-width: 700px;

    color: var(--white);

    font-size:
        clamp(2.2rem, 4vw, 3.6rem);

    line-height: 1.07;

    letter-spacing: -0.045em;
}

.contact-community-copy h2 span {
    display: block;

    color: var(--cyan);
}

.contact-community-copy > p {
    max-width: 640px;

    margin-top: 18px;

    color: #B8CCD9;

    font-size: 1rem;
}

.contact-community-copy > strong {
    display: block;

    margin-top: 28px;

    color: var(--white);

    font-size: 1.15rem;
}


/* =========================================================
   62. CONTACT FINAL CTA
   ========================================================= */

.contact-final-cta {
    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(244, 162, 97, 0.14),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(32, 196, 217, 0.10),
            transparent 28%
        ),
        linear-gradient(
            130deg,
            #061725,
            #0B1F33,
            #104660
        );
}


/* =========================================================
   63. CONTACT RESPONSIVE - TABLET/LAPTOP
   ========================================================= */

@media (max-width: 1050px) {

    .contact-hero-grid {
        gap: 40px;
    }

    .contact-main-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(450px, 1.1fr);

        gap: 45px;
    }

    .contact-community-grid {
        gap: 50px;
    }

}


/* =========================================================
   64. CONTACT RESPONSIVE - 900PX
   ========================================================= */

@media (max-width: 900px) {

    /* HERO */

    .contact-hero {
        padding-top: 70px;
    }

    .contact-hero-grid {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .contact-hero-lead,
    .contact-hero-message {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-trust-row {
        justify-content: center;
    }

    .contact-hero-visual {
        width: 100%;
        max-width: 600px;

        min-height: 480px;

        margin-inline: auto;
    }


    /* CONTACT AREA */

    .contact-main-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .contact-info-column {
        width: 100%;
        max-width: 690px;

        margin-inline: auto;

        text-align: center;
    }

    .contact-info-column > h2,
    .contact-info-column > p {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-service-list {
        text-align: left;
    }

    .contact-local-card {
        max-width: 600px;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }


    /* FORM */

    .contact-form-card {
        width: 100%;
        max-width: 730px;

        margin-inline: auto;
    }


    /* PROCESS */

    .contact-process-grid {
        grid-template-columns:
            repeat(3, 1fr);

        align-items: stretch;
    }

    .process-arrow {
        display: none;
    }


    /* COMMUNITY */

    .contact-community-grid {
        grid-template-columns: 1fr;
    }

    .contact-community-visual {
        width: 100%;
        max-width: 620px;

        margin-inline: auto;
    }

    .contact-community-copy {
        text-align: center;
    }

    .contact-community-copy h2,
    .contact-community-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

}


/* =========================================================
   65. CONTACT RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 680px) {

    /* HERO */

    .contact-hero {
        min-height: auto;

        padding:
            58px 0
            120px;
    }

    .contact-hero-content h1 {
        font-size:
            clamp(2.6rem, 12vw, 3.8rem);
    }

    .contact-hero-visual {
        min-height: 390px;
    }

    .contact-logo-panel {
        width: 90%;

        padding: 22px;

        border-radius: 28px;
    }

    .contact-ring-one {
        width: 360px;
        height: 360px;
    }

    .contact-ring-two {
        width: 285px;
        height: 285px;
    }

    .contact-node {
        display: none;
    }

    .contact-trust-row {
        flex-direction: column;

        align-items: center;
    }


    /* INTRO */

    .contact-intro {
        padding:
            75px 0
            30px;
    }


    /* MAIN CONTACT */

    .contact-main-section {
        padding:
            30px 0
            80px;
    }

    .contact-local-card {
        flex-direction: column;

        text-align: center;
    }


    /* FORM */

    .contact-form-heading {
        padding:
            30px
            24px
            27px;

        text-align: center;
    }

    .contact-form {
        grid-template-columns: 1fr;

        padding:
            28px
            24px
            32px;
    }

    .form-group-full {
        grid-column: auto;
    }

    .contact-form-card {
        border-radius: 24px;
    }


    /* PROCESS */

    .contact-process {
        padding: 80px 0;
    }

    .contact-process-grid {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 45px;
    }

    .contact-process-card {
        min-height: auto;
    }


    /* COMMUNITY */

    .contact-community-message {
        padding: 85px 0;
    }

    .contact-community-visual {
        min-height: 350px;

        border-radius: 27px;
    }

    .contact-community-visual img {
        width: 52%;
    }

}


/* =========================================================
   66. CONTACT RESPONSIVE - SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .contact-hero-content h1 {
        font-size: 2.5rem;
    }

    .contact-service-list > div {
        align-items: flex-start;
    }

    .contact-form-heading h2 {
        font-size: 1.65rem;
    }

    .contact-form {
        padding:
            25px
            18px
            28px;
    }

    .contact-community-visual {
        min-height: 310px;
    }

    .contact-community-visual img {
        width: 58%;
    }

}




/* =========================================================
   SHARED MOBILE MENU POLISH
   ========================================================= */

.menu-toggle span {
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform:
        translateY(8px)
        rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform:
        translateY(-8px)
        rotate(-45deg);
}



/* =========================================================
   CONTACT FORM INTERACTION STATES
   ========================================================= */

.contact-submit:disabled {
    cursor: not-allowed;

    opacity: 0.78;

    transform: none;
}


/* SENDING SPINNER */

.submit-spinner {
    width: 17px;
    height: 17px;

    display: inline-block;

    margin-left: 9px;

    border:
        2px solid rgba(255, 255, 255, 0.35);

    border-top-color: var(--white);

    border-radius: 50%;

    animation:
        contact-spinner
        0.75s linear
        infinite;
}

@keyframes contact-spinner {

    to {
        transform: rotate(360deg);
    }

}


/* STATUS MESSAGE */

.form-status {
    display: none;

    margin-top: 18px;

    padding: 16px 18px;

    border-radius: 14px;

    text-align: left;
}

.form-status strong,
.form-status span {
    display: block;
}

.form-status strong {
    margin-bottom: 4px;

    font-size: 0.88rem;
}

.form-status span {
    font-size: 0.78rem;

    line-height: 1.5;
}


/* SUCCESS */

.form-status-success {
    display: block;

    border:
        1px solid rgba(32, 196, 217, 0.28);

    color: #0B5260;

    background:
        linear-gradient(
            135deg,
            rgba(32, 196, 217, 0.10),
            rgba(22, 119, 255, 0.06)
        );
}

.form-status-success strong {
    color: #087687;
}


/* ERROR */

.form-status-error {
    display: block;

    border:
        1px solid rgba(210, 68, 68, 0.20);

    color: #8A3030;

    background:
        rgba(210, 68, 68, 0.07);
}

.form-status-error strong {
    color: #A52D2D;
}


/* =========================================================
   CONTACT FORM HONEYPOT
   Anti-spam field hidden from normal visitors
   ========================================================= */

.form-honeypot {
    position: absolute;

    left: -10000px;
    top: auto;

    width: 1px;
    height: 1px;

    overflow: hidden;
}

.form-honeypot input {
    width: 1px;
    height: 1px;
}



/* =========================================================
   CLOUDFLARE TURNSTILE
   ========================================================= */

.form-security {
    margin-top: 4px;
}

.security-description {
    margin:
        -1px 0
        10px;

    color: var(--text-soft);

    font-size: 0.76rem;
}

.turnstile-wrapper {
    min-height: 70px;

    display: flex;
    align-items: center;

    padding: 13px 15px;

    border:
        1px solid var(--border);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #FAFCFE,
            #F5FAFD
        );
}


/* MOBILE */

@media (max-width: 420px) {

    .turnstile-wrapper {
        padding:
            12px
            10px;
    }

    .cf-turnstile {
        max-width: 100%;
    }

}