:root {
            --ink: #14151A;
            --ink-soft: #3B3E46;
            --paper: #FFFFFF;
            --panel: #F4F5F7;
            --line: #E4E6EA;
            --red: #E63329;
            --red-dim: #C22A21;
            --red-tint: #FCEBEA;
            --muted: #6B6F78;
            --teal-deep: #B5251D;
            --radius: 2px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
            color: var(--ink-soft);
            background: var(--paper);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }


         ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        html {
            scroll-behavior: smooth;
        }

        /* WhatsApp Floating Icon Animation */
        .whatsapp-float {
            position: relative;
            transition: all 0.3s ease-in-out;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .whatsapp-float::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background-color: rgba(72, 211, 88, 0.4);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: water-drop 1.8s infinite;
            z-index: -1;
        }

        @keyframes water-drop {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.6;
            }

            100% {
                transform: translate(-50%, -50%) scale(2.5);
                opacity: 0;
            }
        }

        .form-error  {
    display: block;
    color: #dc2626;
    font-size: 13px;
    margin-top: 5px;
}

.recaptcha-error{
    display: block;
    color: #dc2626;
    font-size: 13px;
    margin-top: 5px;
}

        h1,
        h3,
        h4,
        .display {
            font-family: 'Space Grotesk', 'Inter', sans-serif;
            color: var(--ink);
            margin: 0;
            letter-spacing: -0.01em;
        }

        /* h2 {
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.15;
            font-weight: 600;
        } */
  h2 {
            font-size: 29px !important;
            line-height: 1.22 !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            font-weight: 800 !important;
            letter-spacing: -0.04em !important;
            text-align: start !important;
            max-width: 860px !important;
            margin: 0 auto 0 !important;
        }
        h2 span
        {
color: var(--teal-deep);
        }


        h3 {
            font-size: 1.2rem;
            font-weight: 600;
            line-height: 1.3;
        }

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

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

        .wrap {
             width: 100%;
            max-width: clamp(720px, 83vw, 1320px);
            margin: 0 auto;
            padding: 0 24px;
        }

        /* .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--red);
            letter-spacing: 0.02em;
            margin-bottom: 14px;
        }

        .eyebrow::before {
            content: "";
            width: 18px;
            height: 2px;
            background: var(--red);
            display: inline-block;
        } */

          .eyebrow {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 12px;

            color: var(--teal-deep);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;

            margin-bottom: 18px;

        }

        .eyebrow::before {
            content: "";
            width: 40px;
            height: 3px;
            background: var(--teal-deep);
            display: inline-block;
            flex: 0 0 auto;
        }

        p {
            max-width: 70ch;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 13px 26px;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 0.95rem;
            border: 1.5px solid transparent;
            cursor: pointer;
        }

        .btn-primary {
            background: var(--red);
            color: #fff;
        }

        .btn-primary:hover {
            background: var(--red-dim);
        }

        .btn-outline {
            border-color: rgba(255, 255, 255, 0.35);
            color: #fff;
        }

        .btn-outline:hover {
            border-color: #fff;
        }

        .btn-outline-dark {
            border-color: var(--line);
            color: var(--ink);
        }

        .btn-outline-dark:hover {
            border-color: var(--ink);
        }

        /* Header */
        /* header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(20, 21, 26, 0.96);
            backdrop-filter: blur(6px);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 24px;
            max-width: 1180px;
            margin: 0 auto;
        }

        .logo {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 1.25rem;
            color: #fff;
        }

        .logo span {
            color: var(--red);
        }

        .nav-links {
            display: flex;
            gap: 32px;
            align-items: center;
        }

        .nav-links a {
            color: #D4D5D9;
            font-size: 0.92rem;
            font-weight: 500;
        }

        .nav-links a:hover {
            color: #fff;
        }

        .nav .btn-primary {
            padding: 10px 20px;
            font-size: 0.88rem;
        }

        .nav-toggle {
            display: none;
            background: none;
            border: none;
            color: #fff;
            font-size: 1.4rem;
            cursor: pointer;
        } */

        /* Hero */
        /* .hero {
            background: var(--ink);
            color: #fff;
            padding: 76px 0 64px;
            position: relative;
            overflow: hidden;
            border-bottom: 3px solid var(--red);
        }

        .hero::after {
            content: "";
            position: absolute;
            right: -120px;
            top: -120px;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(230, 51, 41, 0.18) 0%, rgba(230, 51, 41, 0) 70%);
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 56px;
            align-items: end;
            position: relative;
        }

        .hero h1 {
            font-size: clamp(2.1rem, 4.2vw, 3.15rem);
            line-height: 1.08;
            font-weight: 700;
            color: #fff;
            max-width: 16ch;
        }

        .hero p.lede {
            color: #C6C8CE;
            font-size: 1.08rem;
            max-width: 52ch;
            margin-top: 20px;
        }

        .hero-cta {
            display: flex;
            gap: 14px;
            margin-top: 32px;
            flex-wrap: wrap;
        }

        .hero-panel {
            border-left: 1px solid rgba(255, 255, 255, 0.16);
            padding-left: 32px;
        }

        .hero-panel .stat-row {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .hero-stat {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            padding-bottom: 14px;
        }

        .hero-stat b {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.7rem;
            color: #fff;
            font-weight: 700;
        }

        .hero-stat span {
            color: #9A9DA5;
            font-size: 0.85rem;
            text-align: right;
            max-width: 16ch;
        } */

 header{
    position:sticky;top:0;z-index:50;
    background:rgba(20,21,26,0.96);
    backdrop-filter:blur(6px);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1180px;margin:0 auto;}
  .logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:#fff;}
  .logo span{color:var(--red);}
  .nav-links{display:flex;gap:32px;align-items:center;}
  .nav-links a{color:#D4D5D9;font-size:0.92rem;font-weight:500;}
  .nav-links a:hover{color:#fff;}
  .nav .btn-primary{padding:10px 20px;font-size:0.88rem;}
  .nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer;}
        .hero {
    position: relative;
    overflow: hidden;

    background: var(--ink);
    color: #ffffff;

    padding: 42px 0 64px;

    border-bottom: 3px solid var(--red);
}


/* =====================================================
   HERO GLOW
===================================================== */

.hero::after {
    content: "";

    position: absolute;

    right: -120px;
    top: -120px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(230, 51, 41, 0.18) 0%,
            rgba(230, 51, 41, 0) 70%
        );

    pointer-events: none;
}


/* =====================================================
   HERO WRAPPER
===================================================== */

.hero-grid {
    position: relative;
    z-index: 1;

    display: grid;

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

    gap: 56px;

    align-items: stretch;
}


/* =====================================================
   LEFT HERO CONTENT
===================================================== */

.hero-content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 18px 0 28px;
}

.hero-content .eyebrow {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 0.12em;
}


/* =====================================================
   HERO H1
===================================================== */

.hero h1 {
    margin: 0;

    /*
       Same font size across desktop.
       clamp keeps it responsive without making
       the highlighted span a different size.
    */

    font-size: clamp(2.4rem, 3.2vw, 3.15rem);

    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -0.025em;

    color: #ffffff;

    max-width: 760px;
}


/* Highlighted part */

.hero h1 .hero-h1 {
    color: var(--red);

    font-size: inherit;
    font-weight: inherit;
}


/* =====================================================
   HERO DESCRIPTION
===================================================== */

.hero p.lede {
    margin: 24px 0 0;

    max-width: 56ch;

    color: #c6c8ce;

    font-size: 1.08rem;

    line-height: 1.7;
}


/* =====================================================
   HERO BUTTONS
===================================================== */

.hero-cta {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 34px;

    flex-wrap: wrap;
}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.hero-cta .btn-primary {
    display: inline-flex;

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

    height: 50px;

    padding: 0 20px;

    border: 1px solid #ff4a4a;

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #f83232 0%,
            #e51f1f 100%
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 0 15px rgba(255, 35, 35, 0.25),
        0 5px 15px rgba(0, 0, 0, 0.25);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* =====================================================
   PRIMARY BUTTON HOVER
===================================================== */

.hero-cta .btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            #ff4141 0%,
            #ed2222 100%
        );

    box-shadow:
        0 0 22px rgba(255, 35, 35, 0.45),
        0 6px 18px rgba(0, 0, 0, 0.3);

    transform: translateY(-1px);
}


/* =====================================================
   OUTLINE BUTTON
===================================================== */

.hero-cta .btn-outline {
    display: inline-flex;

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

    height: 50px;

    padding: 0 20px;

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

    border-radius: 8px;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.hero-cta .btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);

    border-color: rgba(255, 255, 255, 0.6);

    transform: translateY(-1px);
}


/* =====================================================
   CONTACT BOX
===================================================== */

.contact-box {
    width: 100%;

    /*
       Slightly reduced padding so the right side
       does not become unnecessarily tall.
    */

    padding: 25px 22px;

    box-sizing: border-box;

    background: rgba(24, 26, 31, 0.88);

    border: 1px solid rgba(130, 135, 145, 0.65);

    border-radius: 16px;

    box-shadow:
        0 0 25px rgba(255, 30, 30, 0.08),
        inset 0 0 30px rgba(255, 255, 255, 0.02);

    color: #ffffff;

    /*
       Makes the box fill its grid cell.
    */

    align-self: stretch;
}


/* =====================================================
   SUCCESS MESSAGE
===================================================== */

.success-message {
    margin-bottom: 18px;
}


.success-message p {
    margin: 0;

    padding: 9px 14px;

    text-align: center;

    color: #16a34a;

    background: #dcfce7;

    border: 1px solid #86efac;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 600;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.08);
}


/* =====================================================
   CONTACT TITLE
===================================================== */

.contact-title {
    position: relative;

    margin: 0 0 22px;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 700;

    color: #ffffff;
}


/* Red underline */

.contact-title::after {
    content: "";

    display: block;

    width: 43px;

    height: 2px;

    margin-top: 10px;

    background: #ff2b2b;

    box-shadow:
        0 0 8px rgba(255, 43, 43, 0.7);
}


/* =====================================================
   FORM
===================================================== */

.contact-form {
    display: grid;

    grid-template-columns: 1fr;

    row-gap: 12px;
}


.form-group {
    width: 100%;
}


/* =====================================================
   INPUTS
===================================================== */

.form-input {
    display: block;
    width: 100%;
    height: 47px;
    padding: 0 14px;

    box-sizing: border-box;

    font-family: inherit;
    font-size: 15px;
    line-height: 22px;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(20, 23, 28, 0.95) !important;

    border: 1px solid #505762;
    border-radius: 8px;

    outline: none;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.02);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.form-input:focus,
.form-input:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: rgba(20, 23, 28, 0.95) !important;

    border-color: #777f8b;

    outline: none;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04);
}


/* Placeholder */

.form-input::placeholder {
    color: #aeb4bd;

    opacity: 1;
}
/* Input text selection */
.form-input::selection {
    background: #3a3f47 !important;
    color: #ffffff !important;
}

.form-input::-moz-selection {
    background: #3a3f47 !important;
    color: #ffffff !important;
}

/* Textarea text selection */
.form-textarea::selection {
    background: #3a3f47 !important;
    color: #ffffff !important;
}

.form-textarea::-moz-selection {
    background: #3a3f47 !important;
    color: #ffffff !important;
}
.form-input,
.form-textarea {
    color-scheme: dark;
}





/* =====================================================
   TEXTAREA
===================================================== */

.form-textarea {
    height: 68px;

    min-height: 68px;

    padding-top: 11px;
    padding-bottom: 11px;

    resize: vertical;
}


/* =====================================================
   CONSENT
===================================================== */

.consent-group {
    margin-top: 0;
}


.consent-label {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-size: 13px;

    line-height: 19px;

    color: #e1e3e7;

    cursor: pointer;
}


/* =====================================================
   CHECKBOX
===================================================== */

.consent-checkbox {
    width: 20px;
    height: 20px;

    margin-top: 0;

    flex: 0 0 20px;

    appearance: none;

    background: transparent;

    border: 2px solid #d4d7dc;

    border-radius: 5px;

    cursor: pointer;

    position: relative;
}


/* Checked */

.consent-checkbox:checked {
    background: #ef2929;

    border-color: #ef2929;
}


/* Checkmark */

.consent-checkbox:checked::after {
    content: "✓";

    position: absolute;

    top: 50%;
    left: 50%;

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

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}


/* =====================================================
   RECAPTCHA
===================================================== */

.recaptcha-group {
    margin-top: 0;
}


.g-recaptcha {
    min-height: 70px;
    transform-origin: left top;
}


/* =====================================================
   ERROR MESSAGE
===================================================== */

.error-message {
    display: block;

    margin-top: 3px;

    font-size: 12px;

    line-height: 16px;

    color: #ff5b5b;
}


/* =====================================================
   SUBMIT
===================================================== */

.submit-wrapper {
    margin-top: 8px;
}


.submit-button {
    width: 100%;

    height: 48px;

    padding: 0 20px;

    border: 1px solid #ff4a4a;

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #f83232 0%,
            #e51f1f 100%
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 0 15px rgba(255, 35, 35, 0.25),
        0 5px 15px rgba(0, 0, 0, 0.25);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* =====================================================
   SUBMIT HOVER
===================================================== */

.submit-button:hover {
    background:
        linear-gradient(
            180deg,
            #ff4141 0%,
            #ed2222 100%
        );

    box-shadow:
        0 0 22px rgba(255, 35, 35, 0.45),
        0 6px 18px rgba(0, 0, 0, 0.3);

    transform: translateY(-1px);
}


/* =====================================================
   SUBMIT FOCUS
===================================================== */

.submit-button:focus {
    outline: none;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.15),
        0 0 20px rgba(255, 35, 35, 0.4);
}

.submit-button:active {
    transform: translateY(0);
}

.submit-button.sending {
    background: #555 !important;
    border-color: #666 !important;
    color: #ffffff !important;
    cursor: not-allowed;

    box-shadow: none !important;
    transform: none !important;
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1400px) {

    .hero {
        padding-top: 48px;
        padding-bottom: 70px;
    }

    .hero-grid {
        gap: 70px;
    }

    .hero-content {
        padding-top: 25px;
        padding-bottom: 35px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .hero {
        padding: 42px 0 55px;
    }

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

        gap: 42px;
    }

    .hero-content {
        padding: 0;
    }

    .hero h1 {
        max-width: 800px;
    }

    .hero p.lede {
        max-width: 65ch;
    }

    .contact-box {
        max-width: 650px;

        margin: 0 auto;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .hero {
        padding: 34px 0 45px;
    }

    .hero-grid {
        gap: 34px;
    }

    .eyebrow {
        font-size: 11px;

        letter-spacing: 0.09em;

        margin-bottom: 14px;
    }

    .hero h1 {
        font-size: clamp(2rem, 9vw, 2.6rem);

        line-height: 1.1;

        letter-spacing: -0.02em;
    }

    .hero p.lede {
        margin-top: 18px;

        font-size: 1rem;

        line-height: 1.6;
    }

    .hero-cta {
        margin-top: 26px;

        gap: 10px;
    }

    .hero-cta .btn-primary,
    .hero-cta .btn-outline {
        width: 100%;
    }

    .contact-box {
        padding: 22px 16px;

        border-radius: 14px;
    }

    .contact-title {
        font-size: 24px;

        margin-bottom: 20px;
    }

    .form-input {
        height: 46px;
    }

    .form-textarea {
        height: 70px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .hero h1 {
        font-size: 1.9rem;
    }

    .contact-box {
        padding: 20px 14px;
    }

    .consent-label {
        font-size: 12px;

        line-height: 18px;
    }

}

        section {
            padding: 72px 0;
        }

        .section-alt {
            background: var(--panel);
        }

        .lead-block {
            max-width: 800px;
            margin-bottom: 44px;
        }

        .lead-block p {
            max-width: 74ch;
            color: var(--ink-soft);
            font-size: 1.02rem;
        }

        /* Intro two column */
        .intro-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: start;
        }

        .intro-grid .callout {
            background: var(--ink);
            color: #fff;
            padding: 30px 32px;
            border-left: 4px solid var(--red);
        }

        .intro-grid .callout p {
            color: #E3E4E7;
            margin: 0;
            font-size: 1rem;
        }

        /* Capability tag cloud */
        .tag-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1px;
            background: var(--line);
            border: 1px solid var(--line);
            margin-top: 8px;
        }

        .tag-grid div {
            background: #fff;
            padding: 16px 18px;
            font-size: 0.94rem;
            font-weight: 500;
            color: var(--ink);
        }

        /* Outcomes checklist */
        .outcome-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--line);
            border: 1px solid var(--line);
        }

        .outcome-grid div {
            background: #fff;
            padding: 20px 22px;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--ink-soft);
            position: relative;
            padding-left: 38px;
        }

        .outcome-grid div::before {
            content: "";
            position: absolute;
            left: 18px;
            top: 24px;
            width: 8px;
            height: 8px;
            background: var(--red);
        }

        /* Solutions grid (compact) */
        .sol-grid-in {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: transparent
            /* border: 1px solid var(--line); */
        }

        .sol-card-in {
            background: #fff;
            padding: 22px 24px;
        }

        .sol-card-in .sol-num-in {
            display: block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--red);
            margin-bottom: 10px;
            letter-spacing: 0.02em;
        }

        .sol-card-in h3 {
            font-size: 1rem;
            margin-bottom: 8px;
        }

        .sol-card-in p {
            color: var(--muted);
            font-size: 0.88rem;
            margin: 0;
        }

        /* Architecture flow */
        .flow {
            border: 1px solid var(--line);
        }

        .flow-row {
            display: flex;
            align-items: center;
            padding: 26px 30px;
            border-bottom: 1px solid var(--line);
            gap: 24px;
            background: #fff;
        }

        .flow-row:last-child {
            border-bottom: none;
        }

        .flow-row .fnum {
            font-family: 'Space Grotesk', sans-serif;
            color: var(--muted);
            font-weight: 700;
            font-size: 0.85rem;
            width: 26px;
            flex-shrink: 0;
        }

        .flow-row .flabel {
            width: 190px;
            flex-shrink: 0;
            font-weight: 700;
            color: var(--ink);
            font-size: 0.95rem;
        }

        .flow-row .fitems {
            color: var(--ink-soft);
            font-size: 0.95rem;
        }

        .flow-row.accent {
            background: var(--ink);
        }

        .flow-row.accent .flabel,
        .flow-row.accent .fitems {
            color: #fff;
        }

        .flow-row.accent .fnum {
            color: var(--red);
        }

        /* Industries grid */
        .ind-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: transparent;
            /* border: 1px solid var(--line); */
        }

        .ind-card {
            background: #fff;
            padding: 26px 24px;
        }

        .ind-card h3 {
            font-size: 1.02rem;
            margin-bottom: 8px;
        }

        .ind-card p {
            font-size: 0.88rem;
            color: var(--muted);
            margin: 0;
        }

        /* Table */
        table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
        }

        th,
        td {
            text-align: left;
            padding: 16px 20px;
            border-bottom: 1px solid var(--line);
            font-size: 0.94rem;
        }

        th {
            background: var(--ink);
            color: #fff;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 0.02em;
        }

        tr:nth-child(even) td {
            background: var(--panel);
        }

        td:last-child {
            color: var(--red-dim);
            font-weight: 600;
        }

        /* Why Aeologic — interactive tabs */
        .why-tabs {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr;
            border: 1px solid var(--line);
            background: #fff;
            min-height: 230px;
        }

        .why-tab-list {
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--line);
        }

        .why-tab {
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 22px;
            border-bottom: 1px solid var(--line);
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 0.92rem;
            color: var(--ink-soft);
            transition: background 0.15s ease, color 0.15s ease;
        }

        .why-tab:last-child {
            border-bottom: none;
        }

        .why-tab .wt-num {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 0.8rem;
            color: var(--muted);
            flex-shrink: 0;
        }

        .why-tab:hover {
            background: var(--panel);
            color: var(--ink);
        }

        .why-tab.active {
            background: var(--red);
            color: #fff;
        }

        .why-tab.active .wt-num {
            color: rgba(255, 255, 255, 0.75);
        }

        /* .why-tab-panel {
            position: relative;
            padding: 34px 38px;
            display: flex;
            align-items: center;
        } */
         .why-tab-panel {
    position: relative;
    padding: 34px 38px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 100% 70%,
            rgba(239, 68, 68, 0.18),
            transparent 38%
        ),
        radial-gradient(
            circle at 80% 10%,
            rgba(239, 68, 68, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffafa 48%,
            #ffeaea 100%
        );
}

/* NETWORK LINES */
.why-tab-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image:
        /* main diagonal connections */
        linear-gradient(
            32deg,
            transparent 48.8%,
            rgba(239, 68, 68, 0.22) 49%,
            transparent 49.2%
        ),
        linear-gradient(
            145deg,
            transparent 43%,
            rgba(239, 68, 68, 0.18) 43.2%,
            transparent 43.4%
        ),
        linear-gradient(
            70deg,
            transparent 65%,
            rgba(239, 68, 68, 0.16) 65.2%,
            transparent 65.4%
        ),
        linear-gradient(
            118deg,
            transparent 55%,
            rgba(239, 68, 68, 0.15) 55.2%,
            transparent 55.4%
        );

    background-size:
        330px 250px,
        390px 300px,
        420px 330px,
        360px 280px;

    background-position:
        20px 20px,
        120px -20px,
        -60px 80px,
        200px 100px;

    opacity: 0.8;
}

/* NETWORK NODES */
.why-tab-panel::after {
    content: "";
    position: absolute;

    width: 7px;
    height: 7px;

    top: 25%;
    right: 22%;

    border-radius: 50%;

    background: #ef4444;

    box-shadow:
        /* main node */
        0 0 0 6px rgba(239, 68, 68, 0.08),
        0 0 20px rgba(239, 68, 68, 0.35),

        /* nodes */
        100px 65px 0 0 #ef4444,
        100px 65px 0 6px rgba(239, 68, 68, 0.07),

        190px -40px 0 0 #ef4444,
        190px -40px 0 6px rgba(239, 68, 68, 0.06),

        275px 85px 0 0 #ef4444,
        275px 85px 0 6px rgba(239, 68, 68, 0.07),

        -120px 90px 0 0 #ef4444,
        -120px 90px 0 6px rgba(239, 68, 68, 0.06),

        -190px -55px 0 0 #ef4444,
        -190px -55px 0 6px rgba(239, 68, 68, 0.05),

        40px 150px 0 0 #ef4444,
        40px 150px 0 6px rgba(239, 68, 68, 0.06),

        340px 150px 0 0 #ef4444,
        340px 150px 0 6px rgba(239, 68, 68, 0.05);
}

/* DIGITAL DOT FIELD */
.why-tab-panel {
    background-image:
        radial-gradient(
            circle,
            rgba(239, 68, 68, 0.20) 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 100% 75%,
            rgba(239, 68, 68, 0.20),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffafa 50%,
            #ffe9e9 100%
        );

    background-size:
        18px 18px,
        100% 100%,
        100% 100%;

    background-position:
        78% 15%,
        center,
        center;
}

/* SOFT HORIZONTAL NETWORK GLOW */
.why-tab-panel {
    box-shadow:
        inset 0 0 80px rgba(239, 68, 68, 0.04);
}

/* CONTENT ABOVE GRAPHICS */
.why-tab-panel > * {
    position: relative;
    z-index: 5;
}

        .why-panel-item {
            display: none;
            font-size: 1.05rem;
            line-height: 1.65;
            color: var(--ink-soft);
            margin: 0;
        }

        .why-panel-item.active {
            display: block;
        }

        /* Who we work with + client ecosystem (combined) */
        .who-section {
            background: var(--ink);
            padding: 72px 0;
            display: none;
        }

        .who-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .who-chips span {
            font-size: 0.85rem;
            font-weight: 600;
            color: #E3E4E7;
            border: 1px solid rgba(255, 255, 255, 0.18);
            padding: 9px 16px;
            border-radius: 20px;
        }

        .who-divider {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 44px 0 24px;
            color: #8E9099;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .who-divider::before,
        .who-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: rgba(255, 255, 255, 0.14);
        }

        .logo-wall {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .logo-card {
            background: #1B1C22;
            padding: 22px 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            color: #EDEDEF;
            font-size: 0.92rem;
            transition: background 0.15s ease;
        }

        .logo-card:hover {
            background: #232430;
        }

        .logo-card .mono {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--red);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.01em;
        }

        /* CTA band */
        .cta-band {
            background: var(--red);
            color: #fff;
            padding: 56px 0;
            text-align: left;
        }

        .cta-band .wrap {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .cta-band h2 {
            color: #fff;
           text-align: center !important;
        }

        .cta-band .btn-primary {
            background: #fff;
            color: var(--red);
            display: flex;
            
        }

        .cta-band .btn-primary:hover {
            background: #F3F3F3;
        }

        /* FAQ */
        .faq-item-in {
            border-bottom: 1px solid var(--line);
        }

        .faq-q-in {
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            padding: 22px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            color: var(--ink);
            font-size: 1.02rem;
        }

        .faq-q-in .plus-in {
            font-size: 1.4rem;
            color: var(--red);
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .faq-item-in.open-in .plus-in {
            transform: rotate(45deg);
        }

        .faq-a-in {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.25s ease;
        }

        .faq-a-in p {
            padding-bottom: 22px;
            margin: 0;
            color: var(--ink-soft);
            font-size: 0.96rem;
        }

        .faq-item-in.open-in .faq-a-in {
            max-height: 400px;
        }

        /* footer {
            background: var(--ink);
            color: #9A9DA5;
            padding: 56px 0 26px;
            font-size: 0.88rem;
        }

        .foot-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 36px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }

        footer .logo {
            margin-bottom: 14px;
        }

        footer h4 {
            color: #fff;
            font-size: 0.85rem;
            margin-bottom: 16px;
            font-family: 'Space Grotesk', sans-serif;
        }

        footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        footer a:hover {
            color: #fff;
        }

        .foot-bottom {
            display: flex;
            justify-content: space-between;
            padding-top: 22px;
            flex-wrap: wrap;
            gap: 12px;
        } */

         footer{background:var(--ink);color:#9A9DA5;padding:56px 0 26px;font-size:0.88rem;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.12);}
  footer .logo{margin-bottom:14px;}
  footer h4{color:#fff;font-size:0.85rem;margin-bottom:16px;font-family:'Space Grotesk',sans-serif;}
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
  footer a:hover{color:#fff;}
  .foot-bottom{display:flex;justify-content:space-between;padding-top:22px;flex-wrap:wrap;gap:12px;}

  @media (max-width:920px){
    .nav-links{display:none;}
    .nav-toggle{display:block;}
    .hero-grid{grid-template-columns:1fr;gap:36px;}
    .hero-panel{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,0.16);padding-top:28px;}
    .hero-panel .stat-row{flex-direction:row;flex-wrap:wrap;}
    .hero-stat{flex-direction:column;align-items:flex-start;gap:6px;flex:1 1 40%;border-bottom:none;}
    .intro-grid{grid-template-columns:1fr;}
    .outcome-grid{grid-template-columns:1fr 1fr;}
    .ind-grid{grid-template-columns:1fr 1fr;}
    .why-grid{grid-template-columns:1fr;}
    .sol-item{grid-template-columns:1fr;gap:8px;}
    .flow-row{flex-wrap:wrap;}
    .flow-row .flabel{width:auto;}
    table{font-size:0.85rem;}
    .foot-grid{grid-template-columns:1fr;gap:28px;}
  }
  @media (max-width:560px){
    .outcome-grid{grid-template-columns:1fr;}
    .ind-grid{grid-template-columns:1fr;}
    .cta-band .wrap{text-align:left;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .faq-a{transition:none;}
  }

        @media (max-width:920px) {
            /* .nav-links {
                display: none;
            }

            .nav-toggle {
                display: block;
            }

            .hero-grid {
                grid-template-columns: 1fr;
                gap: 36px;
            }

            .hero-panel {
                border-left: none;
                padding-left: 0;
                border-top: 1px solid rgba(255, 255, 255, 0.16);
                padding-top: 28px;
            }

            .hero-panel .stat-row {
                flex-direction: row;
                flex-wrap: wrap;
            }

            .hero-stat {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
                flex: 1 1 40%;
                border-bottom: none;
            } */

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

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

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

            .why-tabs {
                grid-template-columns: 1fr;
            }

            .why-tab-list {
                border-right: none;
                border-bottom: 1px solid var(--line);
            }

            .why-tab-panel {
                padding: 24px;
            }

            .logo-wall {
                grid-template-columns: 1fr 1fr;
            }

            .sol-grid-in {
                grid-template-columns: 1fr 1fr;
            }

            .flow-row {
                flex-wrap: wrap;
            }

            .flow-row .flabel {
                width: auto;
            }

            table {
                font-size: 0.85rem;
            }

            .foot-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }
        }

        @media (max-width:560px) {
            .outcome-grid {
                grid-template-columns: 1fr;
            }

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

            .sol-grid-in {
                grid-template-columns: 1fr;
            }

            .logo-wall {
                grid-template-columns: 1fr;
            }

            .cta-band .wrap {
                text-align: left;
            }
        }

        @media (prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto;
            }

            .faq-a-in {
                transition: none;
            }
        }
  .form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background-color: rgba(20, 23, 28, 0.95) !important;

    -webkit-box-shadow:
        0 0 0 1000px rgba(20, 23, 28, 0.95) inset !important;

    box-shadow:
        0 0 0 1000px rgba(20, 23, 28, 0.95) inset !important;
}