@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-dark: #000000;
    --bg-deep-blue: #0b1c38;
    --bg-card: #050b18;
    --accent: #0b7f8c;
    --accent-glow: rgba(14, 127, 140, 0.4);
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: rgba(255, 255, 255, 0.7);
    --glass-dark: rgba(0, 0, 0, 0.6);
    --glass-blue: rgba(11, 28, 56, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.4;
    overflow-x: hidden;
}

/* Animations */
@keyframes orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(11, 127, 140, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 60px rgba(11, 127, 140, 0.4);
        transform: scale(1.02);
    }
}

@keyframes inner-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.5;
        filter: blur(2px);
    }

    50% {
        opacity: 1;
        filter: blur(5px);
    }
}

/* Header */
header {
    position: fixed;
    top: 20px;
    left: 5%;
    right: 5%;
    width: 90%;
    z-index: 1000;
    padding: 0.8rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(11, 28, 56, 0.8), rgba(0, 0, 0, 0.8));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    transition: var(--transition);
}

header:hover {
    border-color: rgba(11, 127, 140, 0.3);
    background: linear-gradient(135deg, rgba(11, 28, 56, 0.9), rgba(0, 0, 0, 0.9));
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    /* margin-bottom: 1.2rem; */
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 15px var(--accent-glow);
}

.logo-text {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

nav ul li a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
}

nav ul li a:hover {
    color: var(--accent);
}

.btn-nav-contact {
    background: #ffffff;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    color: #0b1c38 !important;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-nav-contact:hover {
    transform: translateY(-2px);
    background: var(--accent);
    color: white !important;
}

/* Burger Menu Toggle */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}


.section-description {
    font-size: 1rem;
    color: #475569;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    header {
        padding: 0.8rem 1.5rem;
    }

    .menu-toggle {
        display: flex;
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(5, 11, 24, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
        z-index: 1000;
    }

    nav.active {
        right: 0;
    }

    nav ul {
        flex-direction: column;
        gap: 2.5rem;
        text-align: center;
    }

    nav ul li a {
        font-size: 1.5rem;
    }
}

/* Glassy Background Ornaments */
.glass-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.35;
}

.blob-1 {
    width: 500px;
    height: 500px;
    background: #0b1c38;
    top: -200px;
    right: 5%;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: #0b7f8c;
    bottom: -100px;
    left: 10%;
}

/* Hero Section */
.hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1c38, #000000);
}

.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 70px 5% 60px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (max-width: 1100px) {
    .hero-container {
        grid-template-columns: 1fr;
        padding-top: 0px;
        text-align: center;
    }

    .hero-content {
        margin: 0 auto;
    }

    .cta-group {
        justify-content: center;
    }

    .hero-visual {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .hero-container {
        padding-top: 70px;
    }

    h1 {
        font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
    }

    .cta-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-modern {
        width: 100%;
        justify-content: center;
    }
}

/* Diagonal Background with Glassmorphism */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.8), rgba(11, 28, 56, 0.5));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    z-index: 1;
    border-right: 1px solid var(--glass-border);
}

.hero-content-glass {
    background: linear-gradient(135deg, rgba(11, 28, 56, 0.4), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    padding: 1.5rem 2.5rem;
    border-radius: 32px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
    margin-top: 50px;
}

/* Problem Section */
.problem-section {
    padding: 70px 5%;
    background: linear-gradient(180deg, #000000 0%, #050b18 50%, #0b1c38 100%);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.problem-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.section-tag {
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.section-tag::before {
    content: '';
    width: 30px;
    height: 2px;
    background: var(--accent);
}

.problem-intro {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    max-width: 850px;
    letter-spacing: -0.5px;
}

.problem-body {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* --- Solution Section Redesign --- */
.solution-section {
    padding: 120px 5%;
    background: linear-gradient(135deg, #0b1c38 0%, #000000 100%);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.solution-section .glass-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.4;
    animation: blob-float 10s infinite alternate ease-in-out;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: rgba(14, 124, 134, 0.2);
    bottom: -200px;
    left: -200px;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: rgba(11, 28, 56, 0.3);
    top: -100px;
    right: 10%;
    animation-delay: -5s !important;
}

@keyframes blob-float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, 40px) scale(1.1);
    }
}

.solution-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.solution-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.solution-tag {
    color: var(--accent);
    border-color: rgba(11, 127, 140, 0.3);
    margin-bottom: 2rem;
}

.solution-heading {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 3rem;
    letter-spacing: -1.5px;
}

.accent-text {
    color: var(--accent);
    background: linear-gradient(120deg, var(--accent), #00f2ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.solution-main-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.solution-cards-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 2.5rem;
}

.solution-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    transition: var(--transition);
}

.solution-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(11, 127, 140, 0.2);
    transform: translateY(-5px);
}

.card-icon {
    width: 50px;
    height: 50px;
    background: rgba(11, 127, 140, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.solution-card p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.solution-result {
    position: relative;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.2), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(11, 127, 140, 0.4);
    border-radius: 24px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    overflow: hidden;
}

.result-icon-glow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--accent);
    filter: blur(50px);
    opacity: 0.15;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.solution-result i {
    width: 44px;
    height: 44px;
    color: var(--accent);
    flex-shrink: 0;
}

.solution-result p {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
}

.solution-right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.solution-visual {
    position: relative;
    width: 100%;
    max-width: 550px;
    animation: image-float 6s infinite ease-in-out;
}

@keyframes image-float {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

.solution-3d-image {
    width: 100%;
    height: auto;
    border-radius: 40px;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.visual-overlay {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.2) 0%, transparent 70%);
    z-index: 1;
}

@media (max-width: 1100px) {
    .solution-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .solution-right {
        order: -1;
    }

    .solution-visual {
        max-width: 450px;
    }
}

@media (max-width: 768px) {
    .solution-cards-wrapper {
        grid-template-columns: 1fr;
    }

    .solution-result {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem;
    }
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    position: relative;
    margin-top: 30px;
}

/* Centered VS Badge */
.vs-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: #000000;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--accent);
    z-index: 3;
    box-shadow: 0 0 30px rgba(0, 0, 0, 1);
}

.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 1.6rem 2rem;
    border-radius: 32px;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.glass-card:hover {
    border-color: rgba(11, 127, 140, 0.4);
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.card-icon {
    width: 48px;
    height: 10px;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.glass-card h4 {
    font-size: 0.9rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

.glass-card p {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.25;
    color: #ffffff;
}

.architectural-note {
    background: linear-gradient(90deg, rgba(11, 127, 140, 0.15), transparent);
    border-left: 6px solid var(--accent);
    padding: 2rem;
    border-radius: 4px 32px 32px 4px;
    margin: 2rem 0;
    position: relative;
}

.architectural-note::after {
    content: '"';
    position: absolute;
    top: -20px;
    right: 40px;
    font-size: 10rem;
    color: rgba(11, 127, 140, 0.1);
    font-family: serif;
    line-height: 1;
}

.architectural-note h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 30px;
}

.architectural-note p {
    font-size: 1.15rem;
    font-weight: 400;
    color: #ffffffb3;
    line-height: 1.8;
}

.key-message {
    text-align: center;
    padding: 2rem 2rem;
    border-radius: 20px;
    background: radial-gradient(circle at center, rgba(11, 127, 140, 0.08) 0%, transparent 80%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.key-message h3 {
    font-size: 1.7rem;
    font-weight: 900;
    margin: 0 auto;
    line-height: 1.5;
    background: linear-gradient(to right, #ffffff, #0b7f8c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    position: relative;
    z-index: 2;
    height: 100%;
}

.hero-content {
    padding-right: 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content h1 {
    font-size: clamp(1.8rem, 6vw, 2rem);
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: .8rem;
    color: #ffffff;
}

.hero-content h1 .color-split {
    /* display: block; */
    color: #0b7f8c;
    /* Changed to teal for better visibility on dark background */
}

.hero-content .modern-subheading {
    border-left: 4px solid #ffffff;
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}

.hero-content .modern-subheading p {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.hero-content .main-body-text {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.cta-group {
    display: flex;
    gap: 1.5rem;
}

.btn-modern {
    padding: .9rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.btn-demo {
    background: #ffffff;
    color: #0b7f8c;
}

.btn-demo:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-explore {
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.btn-explore:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Visualization */
.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.orbit-system {
    position: relative;
    width: 390px;
    height: 390px;
    margin-top: 6vw;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(14, 124, 134, 0.3);
    border-radius: 50%;
}

.ring-1 {
    width: 100px;
    height: 100px;
}

.ring-2 {
    width: 240px;
    height: 240px;
}

.ring-3 {
    width: 340px;
    height: 340px;
}

.shield-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(14, 124, 134, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    box-shadow: 0 0 30px rgba(14, 124, 134, 0.3);
}

.node {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #00f2ff;
    border-radius: 50%;
    box-shadow: 0 0 15px #00f2ff;
}

.node-1 {
    top: 53px;
    left: 50%;
    animation: orbit 10s linear infinite;
    transform-origin: 0 116px;
}

.node-2 {
    top: 50%;
    left: -5px;
    animation: orbit 15s linear infinite reverse;
    transform-origin: 158px 0;
}

/* Footer */
footer {
    padding: 50px 5% 20px;
    background: linear-gradient(180deg, #050b18 0%, #000000 100%);
    border-top: 1px solid rgba(11, 127, 140, 0.2);
    position: relative;
    z-index: 2;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 30px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.footer-brand .logo-text {
    font-size: 1.8rem;
    margin-bottom: 0;
    display: block;
}

.footer-description {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 350px;
}

.social-links {
    display: flex;
    gap: 1.2rem;
}

.social-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition);
    text-decoration: none;
}

.social-icon:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(11, 127, 140, 0.4);
}

.footer-col h4 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 0.8rem;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--accent);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 1.2rem;
}

.footer-col ul li a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition);
    display: inline-block;
}

.footer-col ul li a:hover {
    color: var(--accent);
    transform: translateX(5px);
}

.contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.contact-list li i {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-list li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    display: inline;
}

.contact-list li a:hover {
    color: var(--accent);
    transform: none;
}


.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: center;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}

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

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

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

    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
}


/* Responsive */
@media (max-width: 1100px) {
    nav ul {
        gap: 1rem;
    }

    .hero::before {
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 50%);
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        padding-right: 0;
        align-items: center;
        margin-bottom: 3rem;
    }

    .hero-content .modern-subheading {
        border-left: none;
        border-top: 4px solid #ffffff;
        padding-left: 0;
        padding-top: 1.5rem;
    }

    .cta-group {
        justify-content: center;
    }

    .orbit-system {
        width: 300px;
        height: 300px;
    }

    .ring-1 {
        width: 100px;
        height: 100px;
    }

    .ring-2 {
        width: 200px;
        height: 200px;
    }

    .ring-3 {
        width: 300px;
        height: 300px;
    }
}

/* Solution Section */
.solution-section {
    padding: 70px 5%;
    background: linear-gradient(135deg, rgba(248, 249, 251, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #0b1c38;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.solution-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: start;
    position: relative;
    z-index: 2;
}

.solution-section .glass-blob {
    opacity: 0.2;
    background: var(--accent);
    filter: blur(80px);
    pointer-events: none;
}

.solution-left {
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.solution-heading {
    font-size: clamp(2.5rem, 5vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 2.5rem;
    color: #0b1c38;
}

.solution-intro {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 3rem;
    color: #1b3668;
}

.solution-intro p {
    margin-bottom: 1.5rem;
}

.solution-list {
    list-style: none;
    margin-bottom: 4rem;
    padding: 0;
}

.solution-list li {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1c38;
}

.solution-list li i {
    color: #0b7f8c;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.solution-highlight {
    background: rgba(5, 11, 24, 0.95);
    backdrop-filter: blur(15px);
    color: #ffffff;
    padding: 3rem;
    border-radius: 20px;
    border-left: 6px solid var(--accent);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.solution-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle at top right, rgba(11, 127, 140, 0.1), transparent 70%);
}

.solution-highlight p {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    font-style: normal;
    margin: 0 0 1.2rem 0;
    letter-spacing: -0.2px;
    color: #ffffffad;
}

.solution-highlight ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.solution-highlight ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.solution-highlight ul li i {
    color: var(--accent);
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Zero Storage Circle */
.solution-right {
    display: flex;
    justify-content: center;
}

.solution-right .solution-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 1px 1px 33px rgba(11, 127, 140, 0.4);
    margin-top: 4rem;
}

.zero-storage-circle {
    width: clamp(280px, 45vw, 500px);
    height: clamp(280px, 45vw, 500px);
    background: #050b18;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    padding: 5rem;
    text-align: center;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3),
        inset 0 0 50px rgba(11, 127, 140, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* animation: pulse-glow 8s ease-in-out infinite; */
}

.zero-storage-circle::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border: 1px dashed rgba(11, 127, 140, 0.2);
    border-radius: 50%;
    animation: orbit 60s linear infinite;
}

.zero-storage-circle::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid rgba(11, 127, 140, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: inner-rotate 15s linear infinite;
}

.circle-content {
    position: relative;
    z-index: 2;
}

.circle-content h3 {
    font-size: 3.2rem;
    font-weight: 950;
    margin-bottom: 1.5rem;
    background: linear-gradient(to bottom, #ffffff 30%, #0b7f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.circle-sub {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-weight: 500;
}

.circle-main {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.4;
    color: #ffffff;
}

@media (max-width: 1100px) {
    .solution-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4rem;
    }

    .solution-left {
        max-width: 100%;
        margin: 0 auto;
    }

    .solution-list li {
        justify-content: center;
    }

    .solution-highlight {
        text-align: left;
    }

    .zero-storage-circle {
        width: 320px;
        height: 320px;
        padding: 2rem;
    }

    .circle-content h3 {
        font-size: 2rem;
    }

    .circle-main {
        font-size: 1rem;
    }
}

/* --- Platform Sections Redesign (Exact Image Match) --- */

/* Core Capabilities Section */
.capabilities-section {
    padding: 70px 0;
    background: #08152a;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
}

.capabilities-section .section-tag {
    color: #0b7f8c;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: 2rem;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
}

.section-heading {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin-bottom: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.4;
}

.section-intro {
    max-width: 1200px;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    font-size: 1.1rem;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1%;
}

.cap-card {
    background: rgba(11, 28, 56, 0.35);
    /* Darker blue-glass seen in image */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3.5rem;
    text-align: left;
    border-radius: 4px;
    transition: all 0.4s ease;
    position: relative;
}

.cap-card:hover {
    border-color: rgba(11, 127, 140, 0.3);
    background: rgba(11, 28, 56, 0.45);
}

.cap-icon {
    width: 60px;
    height: 60px;
    background: rgba(11, 127, 140, 0.1);
    /* Subtle teal box */
    border: 1px solid rgba(11, 127, 140, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #0b7f8c;
}

.cap-icon i,
.cap-icon svg {
    width: 35px;
    height: 35px;
}

.cap-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1.2rem;
    font-weight: 750;
    color: #ffffff;
}

.cap-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.cap-footer {
    margin-top: 5rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Proof Section: Built & Proven */
.proof-section {
    padding: 70px 5%;
    background: linear-gradient(135deg, #ffffff 0%, rgb(11 127 140 / 51%) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #0b1c38;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.proof-section p {
    color: #0b1c38;
    margin-bottom: 20px;
}

.proof-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6rem;
    position: relative;
    z-index: 2;
    border: 1px #ccc solid;
    box-shadow: 1px 2px 5px rgba(11, 127, 140, 0.4);
    background: #fff;
    border-radius: 46px;
    padding: 3rem 3rem;
}

ul.opportunity-list li span {
    font-weight: 700;
    color: #0b7f8c;
}

.proof-visual {
    flex: 0 0 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shield-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid #0b7f8c;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0b7f8c;
    background: rgba(11, 127, 140, 0.05);
    box-shadow: 0 0 50px rgba(11, 127, 140, 0.15);
}

.shield-circle i,
.shield-circle svg {
    width: 85px;
    height: 85px;
}

.proof-content {
    flex: 1;
    text-align: left;
}

.proof-content .section-tag {
    color: #0b7f8c;
    font-size: 0.8rem;
    letter-spacing: 2.5px;
    display: block;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
}

.proof-content .section-heading {
    font-size: clamp(1rem, 5vw, 1.8rem);
    margin-bottom: 1rem;
    font-weight: 800;
    color: #0b1c38;
    letter-spacing: -0.01em;
}

.proof-content .section-intro {
    color: #1b3668;
    line-height: 1.5;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.proof-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
    margin-bottom: 2rem;
}

.proof-item-mini {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: .9rem;
    color: #0b1c38;
    font-weight: 700;
}

.proof-item-mini i {
    color: #0b7f8c;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
}

.proof-summary-bold {
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #0b1c38;
    border-top: 1.5px solid rgba(11, 127, 140, 0.2);
    padding-top: 1.5rem;
}

/* Value Proposition Section */
.value-section {
    padding: 70px 0;
    background: #08152a;
    color: #ffffff;
    text-align: center;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 4rem auto 0;
    padding: 0 2rem;
}

.value-card {
    background: #0b1c38;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    text-align: left;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.value-card i {
    color: #0b7f8c;
}

.value-card svg {
    stroke: #0b7f8c;
    width: 62px;
    height: 40px;
}

.value-card h3 {
    font-size: 1.01rem;
    font-weight: 400;
    line-height: 1.6;
}

.value-card.highlight-card {
    background: #0b7f8c;
    color: #ffffff;
    border: none;
    justify-content: center;
}

.value-card.highlight-card p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

/* Market Urgency Section */
.urgency-section {
    padding: 70px 0;
    background: #0b1c38;
    color: #ffffff;
    text-align: center;
}

.urgency-icon-top {
    font-size: 2.5rem;
    color: #ff4757;
    margin-bottom: 1rem;
    display: inline-block;
}

.urgency-section .section-intro {
    max-width: 1100px;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, 0.7);
}

.urgency-section .section-heading {
    font-size: 2.3rem;
    font-weight: 900;
    margin-bottom: 1rem;
}



.urgency-icon-top svg.lucide.lucide-alert-circle {
    width: 50px;
    height: 50px;
    background: #bc19194f;
    padding: 12px;
    border-radius: 50%;
}

.urgency-statement-card {
    max-width: 1100px;
    margin: 0 auto;
    background: #122543;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    border-radius: 8px;
    text-align: left;
}

.urgency-statement-card h4 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1.1rem;
}

.urgency-statement-card p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    font-size: 0.95rem;
}

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

@media (max-width: 1200px) {

    .container,
    .hero-container,
    .problem-container,
    .solution-container,
    .capabilities-grid,
    .proof-container,
    .value-grid,
    .urgency-statement-card {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1024px) {
    header {
        padding: 0.8rem 1.5rem;
    }

    .menu-toggle {
        display: flex;
    }

    nav {
        position: fixed;
        top: 0;
        right: -106%;
        width: 100%;
        height: 100vh;
        background: rgba(5, 11, 24, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: flex;
        align-items: start;
        justify-content: center;
        transition: var(--transition);
        z-index: 1000;
    }

    nav.active {
        right: 0;
    }

    nav ul {
        flex-direction: column;
        gap: 2.5rem;
        text-align: center;
        width: 100%;
        padding: 0 2%;
        margin-top: 70px;
    }

    nav ul li a {
        font-size: 1.1rem;
    }

    /* Hero Section */
    .hero-container {
        grid-template-columns: 1fr;
        padding-top: 0px;
        text-align: center;
    }

    .hero-content {
        margin: 0 auto;
        padding-right: 0;
    }

    /* .hero-content h1 {
        font-size: clamp(2.5rem, 8vw, 2rem) !important;
    } */

    .cta-group {
        justify-content: center;
    }

    .hero-visual {
        display: flex;
        justify-content: center;
        margin-top: 3rem;
        display: none;
    }

    .orbit-system {
        width: 350px;
        height: 350px;
    }

    .ring-1 {
        width: 100px;
        height: 100px;
    }

    .ring-2 {
        width: 200px;
        height: 200px;
    }

    .ring-3 {
        width: 300px;
        height: 300px;
    }

    /* Problem Section */
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
        margin-top: 3rem;
    }

    /* .vs-badge {
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    } */

    /* Solution Section */
    .solution-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .solution-left {
        max-width: 100%;
        margin: 0 auto;
    }

    .solution-list li {
        justify-content: center;
    }

    .zero-storage-circle {
        width: 350px;
        height: 350px;
        margin: 0 auto;
    }

    /* Proof Section */
    .proof-container {
        flex-direction: column;
        padding: 4rem 2rem;
        gap: 3rem;
        text-align: center;
    }

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

    .proof-checklist {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto 3rem;
        text-align: left;
    }

    /* Grid Stacking */
    .capabilities-grid,
    .value-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    section {
        padding: 20px 0 0;
    }

    .section-heading {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .mission-card h3 {
        font-size: 1.2rem !important;
    }

    .mission-card p {
        font-size: 1rem !important;
    }

    .section-intro {
        font-size: 0.95rem !important;
        margin-bottom: 2rem !important;
        line-height: 1.5 !important;
    }

    /* Hero Section Refinements */
    .hero-container {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .hero-content h1 {
        margin-bottom: 1rem !important;
    }

    .hero-content .modern-subheading {
        margin-bottom: 1.5rem !important;
    }

    .hero-content .main-body-text {
        margin-bottom: 2rem !important;
        font-size: 0.95rem;
    }

    /* Card & Container Spacing */
    .glass-card {
        padding: 1.5rem !important;
        border-radius: 20px !important;
    }

    .architectural-note {
        padding: 1.5rem !important;
        margin: 1.5rem 0 !important;
    }

    .architectural-note h3 {
        font-size: 1.2rem;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .key-message {
        padding: 2rem 1.5rem;
    }

    .key-message h3 {
        font-size: 1.5rem;
    }

    /* Solution Items */
    .solution-highlight {
        padding: 1.5rem !important;
        border-radius: 12px !important;
    }

    .solution-highlight p {
        font-size: 1.1rem;
    }

    .solution-heading {
        margin-bottom: 1.5rem !important;
    }

    .solution-intro {
        margin-bottom: 2rem !important;
    }

    .solution-list {
        margin-bottom: 2rem !important;
    }

    /* Capabilities & Value Grids */
    .capabilities-grid,
    .value-grid {
        gap: 1.2rem;
    }

    .value-card {
        padding: 1.5rem !important;
    }

    /* CTA Section */
    .cta-content {
        padding: 2.5rem 1.5rem !important;
        border-radius: 24px !important;
    }

    .cta-btns .btn-modern {
        padding: 1rem 2rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        margin-bottom: 25px;
    }

    .footer-col h4 {
        margin-bottom: 1rem;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1.2rem;
        text-align: center;
        padding-top: 1.5rem;
    }

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
}



/* CTA Section */
.cta-section {
    padding: 40px 0;
    background: #050b18;
    background: linear-gradient(135deg, #050b18 0%, rgb(11 127 140 / 51%) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
    z-index: 2;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.15) 0%, transparent 70%);
    z-index: 1;
}

.cta-content {
    text-align: center;
    padding: 2rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.cta-content:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 127, 140, 0.4) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.cta-content .section-heading {
    color: #ffffff;
    margin-bottom: 0rem;
    font-size: clamp(1.2rem, 5vw, 2rem);
}

.cta-content .section-intro {
    color: rgba(255, 255, 255, 0.8);
    /* max-width: 850px; */
    margin: 0 auto 0rem;
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 300;
}

.cta-btns {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btns .btn-modern {
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
}

.cta-btns .btn-explore {
    border-color: rgba(255, 255, 255, 0.3);
}

.solution-left span.section-tag {
    justify-content: left;
}


@media (max-width: 768px) {

    p,
    .architectural-note p {
        font-size: 1rem;
    }

    .hero-content-glass {
        padding: 1rem;
    }

    .problem-intro {
        font-size: 2rem;
        margin-bottom: 20px;
        line-height: 1.1;
    }

    .problem-body {
        margin-bottom: 2rem;
    }

    .architectural-note .problem-body {
        margin-bottom: 2rem;
    }

    .section-tag {
        justify-content: center;
    }

    .solution-left span.section-tag {
        justify-content: center;
    }

    .solution-heading {
        font-size: 1.5rem;
    }

    .solution-list li {
        text-align: left;
        align-items: start;
    }

    .solution-list li svg.lucide.lucide-check-circle-2 {
        width: 28px;
        height: 28px;
    }

    .solution-list li span {
        width: 85%;
    }

    .circle-main {
        font-size: .8rem;
        font-weight: 400;
    }

    .circle-sub {
        margin-bottom: 1rem;
    }

    .circle-content h3 {
        margin-bottom: .9rem;
    }

    .capabilities-section,
    .value-section,
    .urgency-section {
        padding: 38px 20px;
    }

    .cap-card {
        padding: 1.5rem;
        text-align: center;
    }

    .cap-icon {
        margin: 0 auto;
        margin-bottom: 1.5rem;
    }

    .cap-footer {
        margin-top: 1rem;
    }

    .proof-container {
        gap: 1;
    }

    .value-grid {
        padding: 0;
        margin-top: 1rem;
    }

    .cta-content .section-heading {
        margin-bottom: 0 !important;
    }

    .comparison-grid {
        margin-top: 1rem;
    }
}

/* --- About Page Specifics --- */
.about-page .hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-page .hero-container {
    max-width: 1000px;
}

.centered-content {
    width: 100%;
    display: flex;
    justify-content: center;
}

.wide-glass {
    max-width: 850px !important;
    padding: 4rem !important;
}

.center-tag {
    margin: 0 auto 1.5rem !important;
}

.center-text {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.about-page .hero-content-glass h1 {
    font-size: 3.5rem;
    line-height: 1.2;
}


.about-page .solution-right .glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(11, 127, 140, 0.1);
}

.about-page .solution-right .glass-card .section-tag::before {
    display: none;
}

@media (max-width: 1024px) {
    .about-page .hero {
        min-height: 70vh;
    }

    .about-page .hero-container {
        padding-top: 70px;
    }
}

/* ==========================================================================
   About Us Unique UI Patterns
   ========================================================================== */

.about-page section {
    position: relative;
    overflow: hidden;
}

/* Who We Are - Collaboration Layout */
.about-collaboration {
    background: #fff;
}

.collab-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.collab-visual {
    position: relative;
    height: 400px;
}

.collab-box {
    position: absolute;
    width: 280px;
    padding: 2rem;
    background: #fff;
    border: 1px solid rgba(11, 127, 140, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    z-index: 2;
}

.box-jibe {
    top: 0;
    left: 0;
}

.box-mindrops {
    bottom: 0;
    right: 0;
}

.collab-line {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, #0b7f8c, #1b3668);
    transform: rotate(-30deg);
    z-index: 1;
}

/* Mission & Vision - Vertical Glass Panels */
.about-manifesto {
    background: #f8fafc;
}

.manifesto-grid {
    max-width: 1100px;
    margin: 4rem auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.manifesto-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(11, 127, 140, 0.1);
    padding: 4rem;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.manifesto-panel:hover {
    transform: translateY(-10px);
}

/* Technology Layered Stack - 4 Column Grid */
.about-tech-stack {
    background: #0b1c38;
    color: #fff;
    padding: 100px 0;
}

.tech-stack-container {
    max-width: 1400px;
    margin: 4rem auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 0 20px;
}

.tech-layer {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(11, 127, 140, 0.2);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.tech-layer:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-10px);
    border-color: #0b7f8c;
}

.layer-icon {
    width: 70px;
    height: 70px;
    background: rgba(11, 127, 140, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #0b7f8c;
    font-size: 1.5rem;
    border: 1px solid rgba(11, 127, 140, 0.3);
}

/* Validation Floating Cards */
.about-validation {
    /* background: #fff; */
    background: linear-gradient(135deg, #0b1c38 0%, #000 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

}

.validation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 4rem auto 0;
    padding: 0 20px;
}

.val-card {
    padding: 2.5rem;
    border-radius: 16px;
    background: #f1f5f9d1;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.val-card:hover {
    background: #fff;
    border-color: #0b7f8c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Responsive Overrides for About Page */
@media (max-width: 992px) {

    .collab-container,
    .manifesto-grid {
        grid-template-columns: 1fr;
    }

    .collab-visual {
        height: 300px;
        order: -1;
    }

    .box-jibe,
    .box-mindrops {
        position: relative;
        width: 100%;
        margin-bottom: 1rem;
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
    }

    .collab-line {
        display: none;
    }
}


/* --- Unique Glass Shard Hero --- */
.shard-hero {
    min-height: 35vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1c38;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
}

.shard-background {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(11, 127, 140, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 127, 140, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
}

.shard-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 1rem 2rem 1.8rem;

}

.shard-visual-stack {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.shard {
    position: absolute;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transform: rotate(-5deg);
}

.shard-1 {
    width: 600px;
    height: 400px;
    top: 10%;
    right: -100px;
    z-index: 1;
    backdrop-filter: blur(12px);
    transform: rotate(10deg);
}

.shard-2 {
    width: 400px;
    height: 300px;
    bottom: 5%;
    left: -50px;
    z-index: 1;
    background: rgba(11, 127, 140, 0.05);
    border-color: rgba(11, 127, 140, 0.2);
}

.shard-3 {
    width: 500px;
    height: 350px;
    top: 40%;
    left: 30%;
    z-index: 0;
    opacity: 0.5;
    transform: rotate(-15deg);
}

.shard-content-main {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1200px;
}

.shard-content-main h1 {
    font-size: 2.2rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1rem;
}

.shard-content-main .shard-description p {
    font-size: 1rem
}

.shard-content-main .section-tag {
    color: #0b7f8c;
    border-color: #0b7f8c;
    margin-bottom: 1rem;
    justify-content: center;
}

.shard-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    max-width: 1200px;
}

@media (max-width: 1024px) {
    /* .shard-content-main h1 {
        font-size: 3.5rem;
    } */

    .shard-1,
    .shard-2,
    .shard-3 {
        opacity: 0.3;
        width: 300px;
    }
}

@media (max-width: 768px) {
    .shard-content-main h1 {
        font-size: 2.2rem;
    }

    .shard-hero {
        min-height: 60vh;
    }

    .shard-visual-stack {
        display: none;
    }
}


/* --- Who We Are - Collaboration Split --- */
.who-we-are-split {
    background: #fff;
    padding: 70px 0;
}

.split-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 5rem;
    align-items: center;
}

.split-left {
    flex: 1.2;
}

.split-right {
    flex: 0.8;
}

.split-heading {
    font-size: 3rem;
    line-height: 1.2;
    color: #0b1c38;
    margin: 1.5rem 0;
}

.split-content {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.expertise-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.expertise-list .value-card {
    background: #f8fafc;
    border: 1px solid rgba(11, 127, 140, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.expertise-list .value-card:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: #0b7f8c;
    transform: translateX(10px);
}

.expertise-list .value-icon {
    width: 48px;
    height: 48px;
    background: rgba(11, 127, 140, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b7f8c;
    flex-shrink: 0;
}

.expertise-list .value-text {
    font-weight: 600;
    color: #1b3668;
    font-size: 1.05rem;
}

.split-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
    font-style: italic;
    color: #64748b;
}

@media (max-width: 1024px) {
    .split-container {
        flex-direction: column;
        gap: 3rem;
    }

    .split-heading {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .who-we-are-split {
        padding: 40px 0;
    }

    .split-heading {
        font-size: 2rem;
    }

    .value-card:hover {
        transform: none;
    }
}


/* --- Mission & Vision - Lens & Light --- */
.manifesto-overlap {
    background: #fdfdfd;
    padding: 70px 0;
    overflow: hidden;
}

.manifesto-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.manifesto-panels-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.manifesto-item {
    display: flex;
    gap: 4rem;
    align-items: start;
}

.manifesto-item.reverse {
    flex-direction: row-reverse;
}

.manifesto-panel-visual {
    flex: 1;
    position: relative;
    height: 190px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.panel-mission {
    background: linear-gradient(135deg, #fff, #f1f5f9);
    border: 1px solid rgba(11, 127, 140, 0.2);
}

.panel-vision {
    background: #0b1c38;
}

.lens-effect {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.1) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.light-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.15) 0%, transparent 70%);
    bottom: -100px;
    right: -100px;
}

.manifesto-panel-content {
    flex: 60%;
}

.manifesto-panel-content h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #0b1c38;
}



.manifesto-panel-content p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 2rem;
}



.manifesto-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.manifesto-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    color: #1b3668;
}



.manifesto-list li i {
    color: #0b7f8c;
    flex-shrink: 0;
}

section#mission-vision {
    background: #ebf7fa;
}

@media (max-width: 1024px) {

    .manifesto-item,
    .manifesto-item.reverse {
        flex-direction: column;
        gap: 3rem;
    }

    /* .manifesto-panel-visual {
        width: 100%;
        height: 150px;
    } */

    .manifesto-panel-content h2 {
        font-size: 2.2rem;
    }
}

/* --- Why We Exist - Root Solution --- */
.why-exist-root {
    background: #fff;
    padding: 70px 0;
}

.root-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.problem-header {
    text-align: center;
    margin-bottom: 4rem;
}

.problem-header h2 {
    font-size: 3rem;
    color: #0b1c38;
}

.problem-header p {
    font-size: 1.25rem;
    color: #475569;
    max-width: 1200px;
    margin: 1.5rem auto;
    line-height: 1.7;
}

.fracture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.fracture-card {
    background: #f8fafc;
    border: 1px solid rgba(225, 29, 72, 0.1);
    padding: 2.5rem;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.fracture-card:hover {
    background: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: var(--accent);
    transform: translateY(-5px);
}

.fracture-card i {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.fracture-card svg {
    width: 40px;
    height: 40px;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.fracture-card h4 {
    font-size: 1.2rem;
    color: #0b1c38;
    margin-bottom: 1rem;
}

.fracture-card p {
    font-size: 0.95rem;
    color: #64748b;
}

.solution-foundation-panel {
    background: #0b1c38;
    background-image: linear-gradient(135deg, #0b1c38 0%, #050b1a 100%);
    padding: 5rem;
    border-radius: 30px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2);
}

.foundation-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.2) 0%, transparent 70%);
    top: -150px;
    left: -150px;
}

.solution-foundation-panel h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.solution-foundation-panel p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.problem-header span.section-tag,
.about-page section span.section-tag {
    justify-content: center;
}

section#validation {
    padding: 40px 20px;
}

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

    .solution-foundation-panel {
        padding: 3rem 2rem;
    }
}

@media (max-width: 1024px) {
    .tech-stack-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tech-stack-container {
        grid-template-columns: 1fr;
    }
}



@media (max-width: 1024px) {
    .approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .approach-card {
        padding: 2rem;
    }

    .about-approach {
        padding: 40px 0;
    }
}


/* --- Proof & Validation - Image Match Box --- */
.validation-box-section {
    padding: 140px 0;
    background: linear-gradient(135deg, #0b1c38 0%, #0c3c4c 50%, #f1f5f9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.validation-card-main {
    max-width: 1100px;
    width: 90%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 60px;
    padding: 5rem;
    display: flex;
    gap: 5rem;
    align-items: center;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.15);
}

.badge-area {
    flex-shrink: 0;
    width: 250px;
    height: 250px;
    border: 2px solid #0b7f8c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.badge-area i {
    width: 80px;
    height: 80px;
    color: #0b7f8c;
}



.info-area {
    flex: 1;
}

.info-area h2 {
    font-size: 2.5rem;
    color: #0b1c38;
    margin-bottom: 1rem;
    font-weight: 800;
}

.info-area p.intro {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 3rem;
    max-width: 700px;
}

.features-grid-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 4rem;
    margin-bottom: 3rem;
}

.feature-item-box {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.feature-item-box i {
    color: #0b7f8c;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.feature-item-box span {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.info-area .divider {
    height: 1px;
    background: #e2e8f0;
    margin: 3rem 0;
}

.info-area .footer-note {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1c38;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .validation-card-main {
        flex-direction: column;
        padding: 4rem 2rem;
        gap: 3rem;
        text-align: center;
    }

    .features-grid-box {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-item-box {
        justify-content: center;
    }
}

/* --- Solutions Page - Pillars Grid --- */
.solutions-pillars {
    padding: 70px 0;
    background: #fff;
    color: #0b1c38;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.pillar-card {
    background: #f8fafc;
    padding: 2rem 2rem;
    border-radius: 30px;
    text-align: center;
    border: 1px solid rgba(11, 127, 140, 0.1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.pillar-card:hover {
    background: #fff;
    transform: translateY(-15px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
    border-color: #0b7f8c;
}

.pillar-icon {
    width: 70px;
    height: 70px;
    background: rgba(11, 127, 140, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b7f8c;
    margin: 0 auto 2.5rem;
    transition: all 0.3s ease;
}

.pillar-card:hover .pillar-icon {
    background: #0b7f8c;
    color: #fff;
    transform: scale(1.1) rotate(5deg);
}

.pillar-card h3 {
    font-size: 1.2rem;
    color: #0b1c38;
    margin-bottom: 1.2rem;
}

.pillar-card p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
}

.solutions-cta {
    padding: 100px 0;
    background: #f1f5f9;
}

@media (max-width: 1024px) {
    .pillar-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
    }

    .pillar-card {
        padding: 3rem 2rem;
    }
}

/* --- Cyber-Institutional Console (V2) --- */
.architectural-feature {
    padding: 70px 0;
    position: relative;
    overflow: hidden;
    background: #08152a;
}

.console-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

/* .architectural-feature:nth-child(even) .console-container {
    flex-direction: row-reverse;
} */

.architectural-feature .console-panel {
    padding: 3rem 3rem;
}

.console-panel {
    flex: 0 0 60%;
    max-width: 60%;
    background: rgba(11, 127, 140, 0.15);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 40px;
    padding: 5rem;
    border: 1px solid rgba(11, 127, 140, 0.2);
    border-top: 2px solid rgba(11, 127, 140, 0.5);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
}

.console-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #0b7f8c, transparent);
    box-shadow: 0 0 20px #0b7f8c;
}

.holo-visual-frame {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.holo-inner {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    /* Square ratio */
    border-radius: 20px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.2) 0%, transparent 70%);
}

.holo-inner img {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    object-fit: cover;
    /* border-radius: 50%; */
    mask-image: radial-gradient(circle, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 100%);
    box-shadow: 0 0 50px rgba(11, 127, 140, 0.4);
    animation: holoFloat 6s infinite ease-in-out;
}

@keyframes holoFloat {
    0% {
        transform: translateY(0) scale(1) rotate(0);
        filter: brightness(1) drop-shadow(0 0 20px rgba(11, 127, 140, 0.5));
    }

    50% {
        transform: translateY(-20px) scale(1.05) rotate(2deg);
        filter: brightness(1.2) drop-shadow(0 0 40px rgba(11, 127, 140, 0.8));
    }

    100% {
        transform: translateY(0) scale(1) rotate(0);
        filter: brightness(1) drop-shadow(0 0 20px rgba(11, 127, 140, 0.5));
    }
}

.console-panel span.section-tag {
    justify-content: start;
}

.console-panel h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.1;
    background: linear-gradient(135deg, #fff 0%, #0b7f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.console-panel p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.capability-item {
    display: flex;
    margin-bottom: 13px;
    gap: 12px;
}

.feature-number-v2 {
    font-size: 8rem;
    font-weight: 900;
    color: rgba(11, 127, 140, 0.05);
    position: absolute;
    bottom: -1rem;
    right: 2rem;
    line-height: 1;
    pointer-events: none;
}

.data-particle-v2 {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #0b7f8c;
    border-radius: 50%;
    box-shadow: 0 0 10px #0b7f8c;
    opacity: 0.6;
    animation: particleScan 10s infinite linear;
}

@keyframes particleScan {
    0% {
        transform: translate(-100vw, 50vh);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(100vw, -50vh);
        opacity: 0;
    }
}

@media (max-width: 1200px) {
    .console-panel {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 4rem 2rem;
    }

    .holo-visual-frame {
        display: none;
    }

    .console-container {
        padding: 0 20px;
    }

    .console-panel h2 {
        font-size: 2.5rem;
    }
}


/* --- Shared Layout & Background Globals --- */
.feature-split-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 6rem;
    position: relative;
    z-index: 1;
}

.solution-bg-anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.anim-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: blobFloat 25s infinite alternate ease-in-out;
}

.blob-1 {
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.blob-2 {
    bottom: -10%;
    right: -10%;
    animation-delay: -5s;
    background: radial-gradient(circle, rgba(225, 29, 72, 0.04) 0%, transparent 70%);
}

@keyframes blobFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(100px, 50px) scale(1.1);
    }

    100% {
        transform: translate(-50px, 100px) scale(0.95);
    }
}

/* --- Product Page Specific Styles --- */
.product-page {
    background: var(--bg-dark);
}

.product-overview {
    padding: 40px 5%;
    background: linear-gradient(180deg, #0b2e40 0%, #050b18 100%);
    text-align: center;
}

.overview-container {
    max-width: 1100px;
    margin: 0 auto;
}

.overview-heading {
    font-size: clamp(1.5rem, 5vw, 2rem);
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.overview-content {
    font-size: 1.20rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.overview-content p {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.core-components {
    padding: 40px 5%;
    background-color: #f4feff;
    position: relative;
}

.core-components .section-heading {
    color: #0b1c38 !important;
    font-weight: 800;
    margin-bottom: 2rem;
}

.components-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.component-card {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.1);
    padding: 1.5rem;
    border-radius: 32px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(11, 127, 140, 0.03);
}

.component-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 30px 60px rgba(11, 127, 140, 0.08);
    background: #ffffff;
}

.card-icon-box {
    width: 56px;
    height: 56px;
    background: rgba(11, 127, 140, 0.06);
    color: var(--accent);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.component-card:hover .card-icon-box {
    background: var(--accent);
    color: #ffffff;
}

.card-icon-box i {
    width: 28px;
    height: 28px;
}

.component-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

.component-card p {
    color: #475569;
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 0;
}

.benefit-full-width {
    grid-column: 1 / -1;
    text-align: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.key-benefits {
    padding: 40px 5% 23px;
    background: linear-gradient(0deg, #0b1c38 0%, #000000 100%);
}

.benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.benefits-grid .section-tag {
    justify-content: start;
}

.benefits-list {
    list-style: none;
    padding: 0;
}

.benefit-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}

.benefit-icon {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 5px;
}

.benefit-text h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.benefit-text p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}


/* --- Contact Page Styles (Immersive Console) --- */
.contact-page {
    background: #000;
    overflow-x: hidden;
}

.contact-hero {
    padding: 140px 5% 80px;
    background: radial-gradient(circle at top, #0b1c38 0%, #000 70%);
    text-align: center;
    position: relative;
}

.contact-hero .data-pulse-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(11, 127, 140, 0.05) 0%, transparent 100%);
    z-index: 1;
}

.contact-main {
    padding: 70px 5% 70px;
    background: linear-gradient(135deg, #ffffff 0%, rgb(11 127 140 / 51%) 100%);
    position: relative;
    z-index: 2;
}

.contact-console {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: stretch;
}

/* Terminal Frame for Contact Form */
.terminal-frame {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--accent);
    box-shadow: 0 0 30px rgba(11, 127, 140, 0.2), inset 0 0 20px rgba(11, 127, 140, 0.1);
    border-radius: 12px;
    padding: 70px 3rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    background: linear-gradient(135deg, #050b18 0%, #0b7f8c 100%);
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(11, 127, 140, 0.3);
    padding-bottom: 1rem;
}

.terminal-id {
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.terminal-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #00ffaa;
    text-transform: uppercase;
    font-weight: 600;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: #00ffaa;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ffaa;
    animation: pulse 2s infinite;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: #f1f5f9;
    ;
    border: 1px solid rgba(11, 127, 140, 0.5);
    border-radius: 4px;
    color: #050b18;
    padding: .7rem;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(11, 127, 140, 0.3);
}

/* Status Panel for Contact Details */
.status-panel {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.status-panel h2 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.status-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.status-item:hover {
    border-color: var(--accent);
    background: rgba(11, 127, 140, 0.05);
}

.status-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.status-value {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
}

.mini-map-visual {
    margin-top: 2rem;
    height: 200px;
    border: 1px solid rgba(11, 127, 140, 0.2);
    border-radius: 8px;
    background: repeating-linear-gradient(45deg, rgba(11, 127, 140, 0.05), rgba(11, 127, 140, 0.05) 1px, transparent 1px, transparent 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pulse-node {
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--accent);
    animation: ripple 4s infinite;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@media (max-width: 1100px) {
    .contact-console {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .terminal-frame,
    .status-panel {
        padding: 2rem;
    }

}

/* --- Operational Flow Roadmap --- */
.roadmap-page {
    background: #020617;
}

.roadmap-hero {
    padding: 140px 5% 80px;
    background: radial-gradient(circle at top, #0b1c38 0%, #020617 70%);
    text-align: center;
}

.operational-flow {
    padding: 30px 5% 40px;
    position: relative;
    overflow: hidden;
    background: #ebf7fa;
}

.operational-flow .section-heading {
    color: #020617;
}

.operational-flow .section-description {
    color: #020617;
}

.flow-container {
    max-width: 1400px;
    margin: 0 auto;
}


.flow-intro {
    text-align: center;
    margin-bottom: 40px;
}

.flow-intro p {
    color: var(--text-muted);
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}


.roadmap-items {
    position: relative;
    /* max-width: 1200px; */
    margin: 0rem auto 0;
    padding: 0rem 0;
}

.roadmap-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #0b7f8c;
    transform: translateX(-50%);
    z-index: 1;
}

.roadmap-item {
    display: flex;
    justify-content: flex-end;
    /* padding-right: 50%; */
    position: relative;
    margin-bottom: 1rem;
    width: 100%;
}

.roadmap-item.right {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 50%;
}

.roadmap-node {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 32px;
    height: 32px;
    background: #051a1e;
    border: 2px solid #0b7f8c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 15px rgba(11, 127, 140, 0.4);
}

.roadmap-content {
    width: 90%;
    background: linear-gradient(135deg, #050b18 0%, #0b7f8c 100%);
    padding: 1rem;
    border-radius: 30px;
    border: 1px solid #0b7f8c;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px #0b7f8c;
}

.roadmap-item.left .roadmap-content {
    margin-right: 25px;
    margin-left: 25px;

}

.roadmap-item.right .roadmap-content {
    margin-left: 40px;
}


.roadmap-content.lt-theme-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(11, 127, 140, 0.15);
    box-shadow: 0 15px 40px rgba(11, 127, 140, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roadmap-content.lt-theme-card .impact-box {
    background: rgba(11, 127, 140, 0.04);
    /* border-left: 4px solid #0b7f8c; */
    padding: .7rem .7rem;
    border-radius: 0 16px 16px 0;
    margin-bottom: .5rem;
}

.roadmap-content.lt-theme-card .impact-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    color: #0b7f8c;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
}

.roadmap-content.lt-theme-card .impact-box p {
    font-size: 0.85rem;
    color: #0b1c38;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.roadmap-content.lt-theme-card .benefit-tag-label {
    color: #0b7f8c;
}

.roadmap-content:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
    border-color: rgba(11, 127, 140, 0.2);
}

.step-label {
    display: inline-block;
    color: #00f2ff;
    background: rgb(20 169 186 / 34%);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
}

.roadmap-content h3 {
    color: #00f2ffb8;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.roadmap-intro {
    color: #fafafa;
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* --- Impact Box --- */
.impact-box {
    background: #00f2ff4d;
    /* Light yellowish-green accent */
    padding: .5rem;
    border-radius: 10px;
    margin-bottom: .5rem;
}

.impact-tag {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    /* Deep teal */
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

.impact-box p {
    font-size: 0.85rem;
    color: #00f2ffd4;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Benefit Section & Pills --- */
.benefit-section {
    padding-top: 0.5rem;
}

.benefit-tag-label {
    display: block;
    font-size: 0.80rem;
    font-weight: 800;
    color: #10b1c3;
    letter-spacing: 1px;
    margin-bottom: .5rem;
}

.benefit-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.benefit-pill {
    background: #ecfdf5;
    color: #065f46;
    padding: 3px 8px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Responsive Roadmap */
@media (max-width: 992px) {
    .roadmap-line {
        left: 20px;
        transform: none;
    }

    .roadmap-item,
    .roadmap-item.right {
        padding-right: 0;
        justify-content: flex-start;
    }

    .roadmap-node {
        left: 20px;
        transform: translateX(-50%);
    }

    .roadmap-content {
        width: 100%;
        margin: 0 !important;
    }

    .roadmap-dash {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .flow-card {
        grid-template-columns: 1fr;
    }

    .card-side {
        flex-direction: row;
        justify-content: space-between;
        padding: 2rem;
        border-right: none;
        border-bottom: 1px solid rgba(11, 127, 140, 0.1);
    }

    .step-badge {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {

    .flow-steps::before,
    .flow-card-wrapper::before {
        display: none;
    }

    .flow-card-wrapper {
        padding-left: 0;
    }

    .card-main {
        padding: 2rem;
    }

    .card-header h3 {
        font-size: 1.4rem;
    }
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .roadmap-container::before {
        left: 30px;
    }

    .roadmap-item,
    .roadmap-item:nth-child(even) {
        flex-direction: column;
        justify-content: flex-start;
        padding-left: 80px;
        gap: .5rem;
    }

    .roadmap-content {
        width: 100%;
    }

    .roadmap-node {
        left: 20px;
        top: 18px;
    }
}

@media (max-width: 768px) {
    .roadmap-content {
        padding: 1.5rem;
    }


}

/* --- Pricing Page --- */
.pricing-page {
    background: #000;
}

.pricing-hero {
    padding: 70px 5% 60px;
    background: radial-gradient(circle at top, #0b1c38 0%, #000 70%);
    text-align: center;
}

.pricing-overview {
    padding: 60px 5% 100px;
    background: #ebf7fa;
}

.pricing-overview .section-heading {
    color: #0b1c38 !important;
}

.pricing-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(1fr 1fr)); */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 4rem auto 0;
}

.pricing-card {
    background: #ffffffc9;
    border: 1px solid var(--glass-border);
    padding: 3rem;
    border-radius: 24px;
    backdrop-filter: blur(20px);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px rgba(11, 127, 140, 0.2);
}

.pricing-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(11, 127, 140, 0.2);
    transform: translateY(-5px);
}

.pricing-card h3 {
    color: #0b1c38;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}

.pricing-card p {
    color: #0b1c38;
    font-size: 1rem;
    line-height: 1.6;
    flex-grow: 1;
}

.factor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 3rem auto 0;
}

.factor-item {
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    background: rgba(11, 127, 140, 0.05);
    border: 1px solid rgba(11, 127, 140, 0.2);
}

.factor-item i {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.roi-section {
    padding: 100px 5%;
    background: linear-gradient(180deg, #000 0%, #0b1c38 100%);
}

.roi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 4rem auto 0;
}

.roi-item {
    text-align: center;
}

.roi-val {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.roi-label {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
}

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

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

/* --- Industries Page --- */
.industries-page {
    background: #08152a;
}

.industry-section {
    padding: 70px 5%;
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.industry-section:nth-child(even) {
    flex-direction: row-reverse;
}

.industry-content {
    flex: 1;
}

.industry-content .section-tag {
    justify-content: start;
}

.industry-visual {
    flex: 1;
    height: 400px;
    background: rgba(11, 127, 140, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.4) 0%, #ffffff 100%) !important;
}

.industry-visual::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.1) 0%, transparent 70%);
    animation: rotate-visual 20s linear infinite;
}

@keyframes rotate-visual {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.industry-content h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.industry-content p {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.capability-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

.capability-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 1rem;
}

.capability-item i {
    color: var(--accent);
    margin-top: 3px;
    flex-shrink: 0;
}

/* Color variations for visuals */
.bg-banking {
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.1), rgba(0, 0, 0, 0.5));
}

.bg-fintech {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(0, 0, 0, 0.5));
}

.bg-government {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(0, 0, 0, 0.5));
}

.bg-healthcare {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(0, 0, 0, 0.5));
}


.who-we-are-split span.section-tag {
    justify-content: start;
}

.manifesto-overlap span.section-tag {
    justify-content: start;
}

#footer .logo-container {
    margin-bottom: 1rem;
}

.terminal-status {
    display: none;
}

.hero-content-glass .section-tag {
    font-size: 1rem;
    justify-content: start;
    margin-bottom: 1rem;
}



@media (max-width: 1100px) {


    .solution-container span.section-tag {
        justify-content: center;
    }

    .capabilities-section,
    .value-section,
    .urgency-section {
        padding: 70px 20px;
    }

    .hero {
        min-height: 500px;
        align-items: start;
    }

    .hero-content-glass {
        margin-top: 8rem;
    }

    .hero-visual {
        display: none;
    }

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

    .core-components {
        padding: 40px 5%;
    }

    .hero-cta-group {
        display: none !important;
    }
}


@media (max-width: 1024px) {

    .lens-effect,
    .light-glow {
        position: relative;
        width: 80px;
        height: 80px;
    }

    .manifesto-container svg {
        width: 40px !important;
        height: 40px !important;
    }

    .manifesto-item,
    .manifesto-item.reverse {
        gap: 1rem;
    }

    .section-tag {
        margin-bottom: 1rem;
    }

    .manifesto-panel-content h2,
    .problem-header h2 {
        font-size: 1.8rem;
    }

}

@media (max-width: 992px) {

    .industry-section,
    .industry-section:nth-child(even) {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }

    .industry-visual {
        width: 100%;
        height: 300px;
    }

    .capability-item {
        justify-content: start;
        text-align: left;
    }

    .problem-section {
        padding: 29px 5%;
    }

    section.hero {
        padding-bottom: 20px;
    }

    section.hero .hero-container {
        padding-top: 10px;
    }

    .shard-hero {
        min-height: auto;
    }

    .industry-section,
    .industry-section:nth-child(even) {
        flex-direction: column-reverse;
        border-bottom: 1px #ffffff3b solid;
    }

    .capability-item {
        justify-content: start;
    }

    .section-tag::before {
        display: none !important;
    }

    .roadmap-hero {
        padding: 100px 5% 30px;
    }

    .roadmap-content h3 {
        font-size: 1.2rem;
    }

    .roadmap-content {
        padding: 1.2rem;
    }

    .roadmap-content p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .roadmap-item,
    .roadmap-item:nth-child(even) {
        padding-left: 40px;
        margin-bottom: 40px;
    }

}




@media (max-width: 768px) {
    .industry-content .section-tag {
        justify-content: center !important;
    }

    .industry-visual::before {
        background: #fff;
    }

    .hero-content-glass {
        margin-top: 3rem;
    }

    .logo-container {
        margin-bottom: 0;
    }

    nav ul li a {
        font-size: 1.1rem;
    }


    .btn-nav-contact {
        font-size: 1.1rem;
    }

    .hero-content h1 {
        font-size: 1.5rem !important;
    }

    .logo-text {
        font-size: 1.1rem;
    }

    header {
        top: 10px;
        width: 94%;
        left: 3%;
        right: 3%;
        padding: 0.6rem 1rem;
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .hero-content h1 {
        font-size: 1.5rem !important;
    }

    .zero-storage-circle {
        width: 304px;
        height: 304px;
        padding: 1.6rem;
    }

    .circle-content h3 {
        font-size: 1.2rem;
    }

    .proof-container {
        padding: 2.5rem 1rem;
    }

    .urgency-statement-card {
        padding: 1.5rem !important;
    }

    .problem-intro {
        font-size: 1.5rem;
    }

    .proof-container {
        gap: 0;
    }

    .footer-col h4::after {
        right: 0;
        margin: 0 auto;
    }

    .footer-col ul li {
        justify-content: center;
    }

    .who-we-are-split {
        padding: 40px 20px;
    }

    .split-container {
        padding: 0;
    }

    .about-tech-stack {
        padding: 40px 20px;
    }

    .val-card {
        text-align: center;
        padding: 1rem;
    }

    .val-card svg {
        margin-bottom: .5rem !important;
    }

    .proof-content h2.section-heading {
        font-size: 1.3rem;
    }

    .product-overview,
    .key-benefits,
    .industry-section {
        padding: 30px 5%;
    }



    .component-card {
        padding: 1rem;
    }

    .key-benefits span.section-tag {
        justify-content: center;
    }

    .shield-circle i,
    .shield-circle svg {
        width: 51px;
        height: 51px;
    }

    .shield-circle {
        width: 144px;
        height: 144px;
    }

    .pillar-card {
        padding: 1rem 1rem;
    }

    .console-panel h2 {
        font-size: 2rem;
    }

    .pillar-icon {
        margin-bottom: 1rem;
    }

    .architectural-feature .console-panel {
        padding: 1.5rem
    }

    .architectural-feature {
        padding: 40px 0;
    }

    .industry-content h2 {
        font-size: 1.8rem;
    }

    .industry-visual {
        width: 175px;
        border-radius: 10px;
        padding: 10px;
    }

    .pricing-hero {
        padding: 40px 5% 30px;
    }

    .pricing-overview,
    .roi-section {
        padding: 40px 5% 40px;
    }

    .pricing-card h3 {
        font-size: 1.3rem;
        margin-bottom: .5rem;
    }

    .pricing-card {
        padding: 1.5rem;
    }

    .roi-val {
        font-size: 1.5rem;
    }

    .contact-hero {
        padding: 100px 5% 30px;
    }

    .terminal-id {
        letter-spacing: 0;
    }

    /* Removed legacy solution styles */

}

/* ==========================================================
   CONFLICT SECTION — Modern Light Theme
   ========================================================== */

.conflict-section {
    padding: 40px 5%;
    background: linear-gradient(180deg, #f0f9fa 0%, #ffffff 40%, #f0f9fa 100%);
    position: relative;
    overflow: hidden;
}

.conflict-section::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.08) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.conflict-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Header --- */
.conflict-header {
    text-align: center;
    margin-bottom: 2rem;
}

.conflict-tag {
    justify-content: center;
    color: var(--accent);
}

.conflict-heading {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 800;
    color: #0b1c38;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.conflict-accent {
    color: var(--accent);
}

.conflict-intro {
    font-size: 1.1rem;
    color: #475569;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.7;
}

/* --- VS Panel --- */
.conflict-versus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .conflict-versus {
        grid-template-columns: 1fr;
    }
}

.conflict-col {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.1);
    border-radius: 32px;
    padding: 1.5rem;
    transition: var(--transition);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
    box-shadow: 0 10px 30px rgba(11, 127, 140, 0.05);
    position: relative;
    overflow: hidden;
}

.conflict-col:hover {
    transform: translateY(-8px);
    border-color: rgba(11, 127, 140, 0.3);
    box-shadow: 0 25px 50px rgba(11, 127, 140, 0.1);
}

.conflict-col--gdpr {
    border-top: 4px solid var(--accent);
}

.conflict-col--aml {
    border-top: 4px solid #3b82f6;
}

.conflict-col-badge {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.conflict-col:hover .conflict-col-badge {
    transform: scale(1.1) rotate(5deg);
}

.conflict-col-badge i {
    width: 30px;
    height: 30px;
}

.conflict-col--gdpr .conflict-col-badge {
    background: rgba(11, 127, 140, 0.1);
    color: var(--accent);
}

.conflict-col--aml .conflict-col-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.conflict-col h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0b1c38;
    line-height: 1.25;
    margin-bottom: 0.8rem;
    letter-spacing: -0.3px;
}

.conflict-card-text {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    font-weight: 400;
}

/* --- VS Divider --- */
.conflict-vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.conflict-vs-divider span {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1c38;
    border: 2px solid var(--accent);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: 1px;
    box-shadow: 0 0 25px rgba(11, 127, 140, 0.2), 0 0 0 6px rgba(11, 127, 140, 0.06);
}

/* --- Lists --- */
.conflict-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.conflict-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
}

.conflict-list li i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
}

.conflict-col--gdpr .conflict-list li i {
    color: var(--accent);
}

.conflict-col--aml .conflict-list li i {
    color: #3b82f6;
}

/* --- Structural Issue Card --- */
.conflict-issue-row {
    margin-bottom: 2.5rem;
}

.conflict-issue-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-left: 4px solid #ef4444;
    border-radius: 4px 20px 20px 4px;
}

.conflict-issue-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ef4444;
}

.conflict-issue-icon i {
    width: 22px;
    height: 22px;
}

.conflict-issue-text h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 0.8rem;
}

.conflict-issue-points {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.conflict-issue-points span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #64748b;
}

.conflict-issue-points span i {
    width: 15px;
    height: 15px;
    color: #ef4444;
    flex-shrink: 0;
}

/* --- Result Strip (Card Grid) --- */
.conflict-result-strip {
    background: #ffffff;
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(11, 127, 140, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.conflict-result-strip h4 {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    margin-bottom: 1.8rem;
    position: relative;
    padding-bottom: 1rem;
}

.conflict-result-strip h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.conflict-result-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.conflict-result-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.04), rgba(11, 28, 56, 0.03));
    border: 1px solid rgba(11, 127, 140, 0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.conflict-result-item:hover {
    border-color: rgba(11, 127, 140, 0.2);
    box-shadow: 0 8px 24px rgba(11, 127, 140, 0.08);
    transform: translateY(-3px);
}

.conflict-result-item i {
    width: 22px;
    height: 22px;
    color: var(--accent);
    flex-shrink: 0;
}

.conflict-result-item span {
    color: #334155;
    font-size: 0.92rem;
    font-weight: 600;
}

/* --- Key Line --- */
.conflict-keyline {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #0b1c38, #0b2e40);
    border: 1px solid rgba(11, 127, 140, 0.3);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.conflict-keyline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 15px rgba(11, 127, 140, 0.4);
}

.conflict-keyline p {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.6;
    margin: 0;
}

.conflict-keyline strong {
    color: var(--accent);
    font-weight: 800;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .conflict-versus {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .conflict-vs-divider {
        padding: 1.2rem 0;
    }

    .conflict-result-items {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .conflict-section {
        padding: 40px 5%;
    }
}

@media (max-width: 640px) {
    .conflict-heading {
        font-size: 1.5rem;
    }

    .conflict-versus {
        gap: 1rem;
    }

    .conflict-col {
        padding: 1.5rem;
        flex-direction: column;
    }

    .conflict-result-strip {
        padding: 1.5rem;
    }

    .conflict-issue-card {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .conflict-keyline p {
        font-size: 1rem;
    }

    .conflict-result-item {
        padding: 1rem;
    }
}

/* ==========================================================
   DATAU SOLUTION SECTION — Dark Theme
   ========================================================== */

.datau-section {
    padding: 40px 5%;
    background: linear-gradient(170deg, #050b18 0%, #0b1c38 50%, #050b18 100%);
    position: relative;
    overflow: hidden;
}

.datau-section::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.1) 0%, transparent 55%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.datau-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Header --- */
.datau-top {
    text-align: center;
    margin-bottom: 2rem;
}

.datau-tag {
    justify-content: center;
}

.datau-heading {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.2rem;
    letter-spacing: -0.5px;
}

.datau-accent {
    color: var(--accent);
}

.datau-intro {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.7;
}

/* --- 2-Column Layout --- */
.datau-layout {
    display: grid;
    grid-template-columns: 31% 1fr;
    gap: 2.5rem;
    align-items: center;
}

/* --- Left: Key Points --- */
.datau-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.datau-point {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.2rem 1.8rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.datau-point:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 127, 140, 0.3);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

.datau-point-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(11, 127, 140, 0.12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.datau-point-icon i {
    width: 22px;
    height: 22px;
}

.datau-point-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.4rem;
}

.datau-point-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- Right Column --- */
.datau-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Feature Card --- */
.datau-feature-card {
    padding: 1.5rem 2rem;
    background: linear-gradient(145deg, rgba(11, 127, 140, 0.08), rgba(11, 28, 56, 0.3));
    border: 1px solid rgba(11, 127, 140, 0.2);
    border-top: 3px solid var(--accent);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.datau-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 15px rgba(11, 127, 140, 0.4);
}

.datau-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(11, 127, 140, 0.15);
    border: 1px solid rgba(11, 127, 140, 0.25);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.datau-feature-icon i {
    width: 24px;
    height: 24px;
}

.datau-feature-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.7rem;
}

.datau-feature-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* --- Benefits Card --- */
.datau-benefits {
    padding: 2rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
}

.datau-benefits h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 1.3rem;
}

.datau-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.datau-benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.datau-benefits-list li i {
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .datau-layout {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    /* .datau-section {
        padding: 70px 5%;
    } */
}

@media (max-width: 640px) {
    .datau-heading {
        font-size: 1.5rem;
    }

    .datau-point {
        padding: 1.3rem;
        flex-direction: column;
    }

    .datau-feature-card {
        padding: 1.5rem;
    }

    .datau-benefits {
        padding: 1.5rem;
    }
}

/* ==========================================================
   OPPORTUNITY SECTION — Dark Theme
   ========================================================== */

.opportunity-section {
    padding: 40px 5%;
    /* background: linear-gradient(170deg, #050b18 0%, #0b1c38 50%, #050b18 100%); */
    background: linear-gradient(180deg, #f0f9fa 0%, #ffffff 40%, #f0f9fa 100%);
    position: relative;
    overflow: hidden;
    color: #0b1c38;
}

.opportunity-section::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.1) 0%, transparent 55%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.opportunity-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Header --- */
.opportunity-top {
    text-align: center;
    margin-bottom: 3.5rem;
}

.opportunity-tag {
    justify-content: center;
}

ul.opportunity-list {
    display: flex;
    flex-wrap: wrap;
    /* items next line me ja sake */
    gap: 9px;
    /* optional spacing */
    padding: 0;
    max-width: 1220px;
    margin: 0 auto;

}

.opportunity-benefit svg {
    width: 50px;
    height: 25px;
}

.opportunity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.opportunity-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 0rem;
    padding: 1.1rem;
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.12);
    border-radius: 15px;
    transition: all 0.4s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    width: 100%;
}

.opportunity-list li:hover {
    transform: translateX(10px);
    background: #ffffff;
    border-color: rgba(11, 127, 140, 0.35);
    box-shadow: 0 8px 30px rgba(11, 127, 140, 0.1);
}

.opp-icon {
    width: 40px;
    height: 40px;
    background: rgba(11, 127, 140, 0.15);
    color: var(--accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.opp-icon i {
    width: 20px;
    height: 20px;
}

.opp-text {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
}

.opp-text span {
    color: var(--accent);
    font-weight: 800;
}

.opportunity-section {
    /* padding: 100px 5%; */
    background: linear-gradient(180deg, #f0f9fa 0%, #ffffff 50%, #f0f9fa 100%);
    position: relative;
    overflow: hidden;
    color: #0b1c38;
}

.opportunity-section::before {
    content: '';
    position: absolute;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.06) 0%, transparent 70%);
    top: -20%;
    left: -15%;
    pointer-events: none;
    z-index: 1;
}

.opportunity-heading {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -1px;
    color: #0b1c38;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.opportunity-accent {
    color: var(--accent);
}

.opportunity-intro {
    font-size: 1.1rem;
    color: #0b1c38;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.7;
}


.opportunity-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
    align-items: stretch;
    position: relative;
    z-index: 2;
}




/* --- Transformation Cards --- */
.transform-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.transform-card {
    display: flex;
    align-items: start;
    gap: 1rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, #050b18 0%, #0b7f8c 100%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.transform-card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 127, 140, 0.3);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

.transform-from,
.transform-to {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
}

.transform-to {
    flex-direction: column;
}

.transform-to p {
    text-align: center;
}

.transform-from i {
    width: 20px;
    height: 20px;
    color: #ef4444;
    flex-shrink: 0;
}

.transform-from span {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.4);
}

.transform-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transform-arrow i {
    width: 20px;
    height: 20px;
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(11, 127, 140, 0.5));
}

.transform-to i {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.transform-to p {
    font-size: .95rem;
}

.transform-to span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

/* --- Benefits --- */
.opportunity-benefits {
    padding: 2rem;
    background: #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 30px rgba(11, 127, 140, 0.08);
}

.opportunity-benefits-label {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 2rem;
    letter-spacing: -0.5px;
}

.opportunity-benefits-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    flex: 1;
}

.opportunity-benefit {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem;
    background: #f8fbff;
    border: 1px solid rgba(11, 127, 140, 0.12);
    border-radius: 18px;
    transition: all 0.4s ease;
}

.opportunity-benefit:hover {
    background: rgba(11, 127, 140, 0.1);
    border-color: var(--accent);
    transform: translateY(-3px);
}

.opportunity-benefit i {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

.opportunity-benefit span {
    font-size: 1rem;
    font-weight: 600;
    color: #0b1c38;
    line-height: 1.5;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .opportunity-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .opportunity-section {
        padding: 60px 5%;
    }
}

@media (max-width: 640px) {
    .opportunity-heading {
        font-size: 1.5rem;
    }

    .opportunity-benefits {
        padding: 2rem 1.5rem;
    }

    .opportunity-list li {
        padding: 1.2rem;
    }
}

/* ==========================================================
   TEAM SECTION (team.php)
   ========================================================== */

.team-section {
    padding: 40px 5%;
    background: linear-gradient(180deg, #f0f9fa 0%, #ffffff 40%, #f0f9fa 100%);
    position: relative;
    overflow: hidden;
}

.team-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.team-header {
    text-align: center;
    margin-bottom: 1rem;
}

.team-header .section-heading {
    color: #0b1c38;
}

.team-header .section-intro {
    color: #0b1c38;
}

.team-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.team-card {
    flex: 1 1 calc(50% - 20px);
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.1);
    border-radius: 24px;
    padding: 1.5rem 1.5rem;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.team-card:hover {
    transform: translateY(-8px);
    border-color: rgba(11, 127, 140, 0.3);
    box-shadow: 0 20px 45px rgba(11, 127, 140, 0.1);
}

.team-avatar {
    width: 115px;
    height: 115px;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.1), rgba(11, 28, 56, 0.05));
    border: 2px solid rgba(11, 127, 140, 0.2);
    border-radius: 50%;
    margin: 0 auto .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: all 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card:hover .team-avatar {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.15), rgba(11, 28, 56, 0.08));
}


.team-card h3 span {
    display: block;
    margin-top: 9px;
}

.avtar-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}


.avtar-wrapper h3 {
    flex: 1;
}

.team-avatar i {
    width: 50px;
    height: 50px;
}

.team-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 0.4rem;
}

.team-role {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team-desc {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    text-align: left;
    /* Better for lists */
}

.team-desc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-desc li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
}

.team-desc li:last-child {
    margin-bottom: 0;
}

.team-desc li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
    top: -2px;
}

@media (max-width: 640px) {
    /* .team-section {
        padding: 70px 5%;
    } */

    .team-card {
        padding: 1.1rem 1.1rem;
    }

    .team-avatar {
        width: 100px;
        height: 100px;
    }

    .team-avatar i {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================
   ABOUT BANKING SECTION
   ========================================================== */

.ab-mission-section {
    padding: 40px 5%;
    background: #050b18;
    position: relative;
    overflow: hidden;
}

.ab-mission-section::before {
    content: '';
    position: absolute;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.08) 0%, transparent 70%);
    top: -20%;
    right: -15%;
    pointer-events: none;
    z-index: 1;
}

.ab-mission-section::after {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.05) 0%, transparent 70%);
    bottom: -10%;
    left: -10%;
    pointer-events: none;
    z-index: 1;
}

.ab-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.ab-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* .ab-header .section-heading {
    color: #0b1c38;
} */

.ab-track-section h2.section-heading {
    color: #000;
}

.ab-track-section .section-description {
    font-size: 1rem;
    color: #475569;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.7;
}

.ab-mission-split {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto;
}

.mission-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 1.5rem 1.5rem;
    position: relative;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 20px;
    align-items: center;
}

.mission-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.mission-conflict {
    border-left: 4px solid var(--accent);
    background: linear-gradient(165deg, rgba(0, 242, 255, 0.1) 0%, rgba(11, 127, 140, 0.03) 100%);
    border-color: rgba(0, 242, 255, 0.4);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);
}

.mission-resolution {
    border-left: 4px solid var(--accent);
    background: linear-gradient(165deg, rgba(0, 242, 255, 0.1) 0%, rgba(11, 127, 140, 0.03) 100%);
    border-color: rgba(0, 242, 255, 0.4);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);
}

.mission-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .7rem;
}

.mission-conflict .mission-icon {
    background: rgba(11, 127, 140, 0.15);
    color: var(--accent);
    box-shadow: 0 0 20px rgba(11, 127, 140, 0.1);
}

.mission-resolution .mission-icon {
    background: rgba(11, 127, 140, 0.15);
    color: var(--accent);
    box-shadow: 0 0 20px rgba(11, 127, 140, 0.1);
}

.mission-icon i {
    width: 30px;
    height: 30px;
}

.mission-card h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1.2rem;
    letter-spacing: -0.5px;
}

.mission-card p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin: 0;
    width: 100%;
}

.mission-connector {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
    box-shadow: 0 0 30px rgba(11, 127, 140, 0.2);
    z-index: 3;
    transition: all 0.4s ease;
}

.mission-connector i {
    width: 24px;
    height: 24px;
}

.mission-connector:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 40px rgba(11, 127, 140, 0.4);
    transform: scale(1.1);
}

@media (max-width: 850px) {
    .ab-mission-split {
        flex-direction: column;
    }

    .mission-connector {
        transform: rotate(90deg);
        margin: -1rem 0;
    }
}

.ab-diff-section {
    padding: 40px 5%;
    background: linear-gradient(170deg, #050b18 0%, #0b1c38 50%, #050b18 100%);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.ab-diff-section .section-heading {
    color: #ffffff;
}

.ab-grid-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.ab-diff-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 1rem;
    transition: all 0.4s ease;
    text-align: center;
}

.ab-diff-card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 127, 140, 0.3);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

.ab-diff-icon {
    width: 55px;
    height: 55px;
    background: rgba(11, 127, 140, 0.15);
    border: 1px solid rgba(11, 127, 140, 0.25);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin: 0 auto;
    margin-bottom: 1rem;
}

.ab-diff-icon i {
    width: 22px;
    height: 22px;
}

.ab-diff-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #ffffff;
}

.ab-diff-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.ab-track-section {
    padding: 40px 5%;
    background: linear-gradient(180deg, #f0f9fa 0%, #ffffff 40%, #f0f9fa 100%);
    position: relative;
    overflow: hidden;
}

.ab-track-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.track-bento-large {
    grid-column: span 3;
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-top: 3px solid var(--accent);
    border-radius: 20px;
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.track-bento-large:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(11, 127, 140, 0.1);
    border-color: rgba(11, 127, 140, 0.3);
}

.track-bento-small {
    grid-column: span 2;
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.1);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.track-bento-small:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(11, 127, 140, 0.08);
    border-color: rgba(11, 127, 140, 0.2);
}

.track-bento-icon {
    width: 50px;
    height: 50px;
    background: rgba(11, 127, 140, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.track-bento-large h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 0.8rem;
}

.track-bento-large p {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.track-bento-small h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 0.6rem;
}

.track-bento-small p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .track-bento-large {
        grid-column: span 6;
    }

    .track-bento-small {
        grid-column: span 3;
    }
}

@media (max-width: 640px) {
    .track-bento-small {
        grid-column: span 6;
    }
}

.ab-certs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.ab-cert-card {
    background: rgba(11, 127, 140, 0.05);
    border: 1px solid rgba(11, 127, 140, 0.2);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.ab-cert-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0b1c38, #0b2e40);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

.ab-cert-icon i {
    width: 28px;
    height: 28px;
}

.ab-cert-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 0.5rem;
}

.ab-cert-card p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

.ab-cta-section {
    padding: 40px 5%;
    background: #050b18;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ab-cta-box {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.1), rgba(11, 28, 56, 0.3));
    border: 1px solid rgba(11, 127, 140, 0.3);
    border-radius: 20px;
    padding: 3.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.ab-cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.ab-cta-box h2 {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
}

.ab-cta-box p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
}

@media (max-width: 1024px) {

    .ab-grid-2,
    .ab-certs-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .ab-mission-section,
    .ab-diff-section,
    .ab-track-section,
    .ab-cta-section {
        padding: 40px 5%;
    }

    .ab-diff-card {
        padding: 1.8rem;
    }

    .ab-cert-card {
        flex-direction: column;
        /* align-items: center; */
        /* text-align: center; */
    }
}

/* ==========================================================
   SERVICES & SOLUTIONS SECTION
   ========================================================== */

.serv-section-light {
    padding: 100px 5%;
    background: linear-gradient(180deg, #f8fbfb 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.serv-section-light::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.04) 0%, transparent 60%);
    top: -30%;
    left: -10%;
    pointer-events: none;
}

.serv-section-light::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(11, 28, 56, 0.03) 0%, transparent 60%);
    bottom: -20%;
    right: -10%;
    pointer-events: none;
}

.serv-section-dark {
    padding: 100px 5%;
    background: linear-gradient(170deg, #050b18 0%, #0b1c38 50%, #050b18 100%);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.serv-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.serv-header {
    text-align: center;
    margin-bottom: 4rem;
}

.serv-section-light .section-heading {
    color: #0b1c38;
}

.serv-section-dark .section-heading {
    color: #ffffff;
}

/* Feature Grid */
.serv-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.serv-card {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border-top: 3px solid var(--accent);
}

.serv-section-dark .serv-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border-color: rgba(11, 127, 140, 0.2);
    box-shadow: none;
}

.serv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(11, 127, 140, 0.1);
}

.serv-section-dark .serv-card:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(11, 127, 140, 0.4);
}

.serv-icon {
    width: 60px;
    height: 60px;
    background: rgba(11, 127, 140, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.serv-card:hover .serv-icon {
    transform: scale(1.15) rotate(5deg);
    background: rgba(11, 127, 140, 0.2);
}

.serv-icon i {
    width: 28px;
    height: 28px;
}

.serv-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #0b1c38;
}

.serv-section-dark .serv-card h3 {
    color: #ffffff;
}

.serv-card p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.serv-section-dark .serv-card p {
    color: rgba(255, 255, 255, 0.7);
}

/* Value Props / Split */
.serv-split {
    display: flex;
    align-items: center;
    gap: 5rem;
    margin-bottom: 4rem;
}

.serv-split-content {
    flex: 1;
}

.serv-split-content h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 1.5rem;
    line-height: 1.15;
}

.serv-section-dark .serv-split-content h2 {
    color: #ffffff;
}

.serv-split-content p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.serv-section-dark .serv-split-content p {
    color: rgba(255, 255, 255, 0.8);
}

.serv-split-visual {
    flex: 1;
    position: relative;
}

.serv-visual-box {
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.05), rgba(11, 28, 56, 0.02));
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-radius: 24px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.serv-section-dark .serv-visual-box {
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.15), rgba(11, 28, 56, 0.3));
    border-color: rgba(11, 127, 140, 0.3);
}

/* Float Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.anim-float {
    animation: float 6s ease-in-out infinite;
}

/* Components Table / Grid */
.serv-components {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.comp-card {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-radius: 16px;
    padding: 1.8rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.comp-card:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 25px rgba(11, 127, 140, 0.08);
    transform: translateX(5px);
}

.comp-badge {
    background: linear-gradient(135deg, #0b1c38, #0b2e40);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    min-width: 120px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(11, 28, 56, 0.2);
}

.comp-content p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* CTA */
.serv-cta-box {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.1), rgba(11, 28, 56, 0.3));
    border: 1px solid rgba(11, 127, 140, 0.3);
    border-radius: 24px;
    padding: 4rem 2rem;
    text-align: center;
}

@media (max-width: 1024px) {
    .serv-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .serv-split {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .serv-grid-3 {
        grid-template-columns: 1fr;
    }

    .comp-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .serv-section-light,
    .serv-section-dark {
        padding: 60px 5%;
    }
}

/* ==========================================================
   SERVICES FULL PAGE IMAGE-SPLIT LAYOUT
   ========================================================== */

.text-accent {
    color: var(--accent);
}

.service-split-section {
    padding: 100px 5%;
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.service-split-section.bg-light-grad {
    background: linear-gradient(180deg, #f8fbfb 0%, #ffffff 100%);
}

.service-split-section.dark {
    background: linear-gradient(170deg, #050b18 0%, #0b1c38 50%, #050b18 100%);
    color: #ffffff;
}

.service-split-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6rem;
}

.service-split-container.reverse {
    flex-direction: row-reverse;
}

.service-text-content {
    flex: 1;
}

.service-image-wrapper {
    flex: 1;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(11, 28, 56, 0.08);
}

.service-split-section.dark .service-image-wrapper {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(11, 127, 140, 0.2);
}

.service-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-image-wrapper:hover img {
    transform: scale(1.05);
}

.service-heading {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: #0b1c38;
}

.service-split-section.dark .service-heading {
    color: #ffffff;
}

.service-text-content p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.service-split-section.dark .service-text-content p {
    color: rgba(255, 255, 255, 0.8);
}

.service-feature-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.service-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    color: #0b1c38;
    font-weight: 600;
}

.service-split-section.dark .service-feature-list li {
    color: #ffffff;
}

.service-feature-list i {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

@media (max-width: 1024px) {

    .service-split-container,
    .service-split-container.reverse {
        flex-direction: column;
        gap: 3rem;
    }
}

@media (max-width: 640px) {
    .service-split-section {
        padding: 60px 5%;
    }
}

/* ==========================================================
   PLATFORM COMPONENTS GRID
   ========================================================== */
.platform-components-section {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 100px 5%;
    position: relative;
}

.platform-container {
    max-width: 1200px;
    margin: 0 auto;
}

.platform-header {
    text-align: center;
    margin-bottom: 4rem;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.platform-card {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(11, 28, 56, 0.03);
    position: relative;
    overflow: hidden;
}

.platform-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(11, 127, 140, 0.08);
    border-color: rgba(11, 127, 140, 0.25);
}

.platform-icon {
    display: inline-block;
    background: linear-gradient(135deg, #0b1c38, #0b2e40);
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(11, 28, 56, 0.2);
}

.platform-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #0b1c38);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.platform-card:hover::after {
    opacity: 1;
}

.platform-content p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================
   SERVICES PAGE FEATURE GRIDS (NEW)
   ========================================================== */
.svc-header-block {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

.svc-header-block h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.service-split-section.dark .svc-header-block h2 {
    color: #ffffff;
}

.svc-header-block p {
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.7;
}

.service-split-section.dark .svc-header-block p {
    color: rgba(255, 255, 255, 0.8);
}

.svc-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.svc-card {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 28, 56, 0.05);
}

.svc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 127, 140, 0.1);
    border-color: rgba(11, 127, 140, 0.3);
}

.svc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #0b1c38);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.svc-card:hover::before {
    opacity: 1;
}

.svc-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.1), rgba(11, 127, 140, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--accent);
}

.svc-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 1rem;
}

.svc-card p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

.svc-highlight-box {
    background: linear-gradient(135deg, #0b1c38, #0b2e40);
    border-radius: 24px;
    padding: 3rem;
    margin-top: 4rem;
    color: #ffffff;
    text-align: center;
    border: 1px solid rgba(11, 127, 140, 0.2);
}

.svc-highlight-box h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #ffffff;
}

.svc-highlight-box p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Dark Mode Card Overrides */
.svc-card.svc-card-dark {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.svc-card.svc-card-dark .svc-card-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.svc-card.svc-card-dark h3 {
    color: #ffffff;
}

.svc-card.svc-card-dark p {
    color: rgba(255, 255, 255, 0.7);
}

.svc-card.svc-card-dark::before {
    background: linear-gradient(90deg, var(--accent), #ffffff);
}

.svc-card.svc-card-dark:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

.svc-subheading {
    color: #0b1c38;
}


@media (min-width: 1024px) {
    .svc-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    .svc-grid {
        grid-template-columns: 1fr !important;
    }

    .svc-header-block h2 {
        font-size: 2rem;
    }
}

/* ==========================================================
   VALUE PROPOSITION PAGE: CORE FLOW STEPS
   ========================================================== */
.modern-step-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto 4rem auto;
}

.modern-step-card {
    display: flex;
    gap: 2rem;
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(11, 28, 56, 0.05);
    transition: all 0.4s ease;
    align-items: flex-start;
}

.modern-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(11, 127, 140, 0.1);
    border-color: rgba(11, 127, 140, 0.3);
}

.step-number-badge {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.1), rgba(11, 127, 140, 0.05));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    border: 1px solid rgba(11, 127, 140, 0.2);
}

.step-number-badge span:first-child {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.step-number-badge span:last-child {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.modern-step-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 1rem;
    margin-top: 5px;
}

.modern-step-content p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .modern-step-card {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
    }
}

.diagram-container {
    text-align: center;
    max-width: 1000px;
    margin: 6rem auto 2rem auto;
}

.diagram-container img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(11, 28, 56, 0.1);
}

.diagram-caption {
    margin-top: 1.5rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

.recommended-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-bottom-left-radius: 16px;
}

.svc-card.recommended-card {
    border-color: var(--accent);
}

/* ==========================================================
   VERTICAL TIMELINE (VALUE PROPOSITION UPGRADE)
   ========================================================== */
.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 4rem auto;
    padding: 2rem 0;
}

.timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--accent), rgba(11, 127, 140, 0.1));
    border-radius: 4px;
}

.timeline-step {
    position: relative;
    padding-left: 100px;
    margin-bottom: 3rem;
    transition: all 0.4s ease;
}

.timeline-step:hover {
    transform: translateX(10px);
}

.timeline-step:last-child {
    margin-bottom: 0;
}

.timeline-badge {
    position: absolute;
    left: 20px;
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid var(--accent);
    box-shadow: 0 0 0 5px rgba(11, 127, 140, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--accent);
    font-size: 1.1rem;
    z-index: 2;
}

.timeline-content {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(11, 28, 56, 0.05);
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 22px;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent rgba(11, 127, 140, 0.15) transparent transparent;
}

.timeline-content::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 22px;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
}

.timeline-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 0.5rem;
}

.timeline-content p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .timeline-wrapper::before {
        left: 20px;
    }

    .timeline-badge {
        left: -2px;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .timeline-step {
        padding-left: 50px;
    }

    .timeline-content {
        padding: 1.5rem;
    }

    .timeline-content::before {
        left: -8px;
        top: 8px;
        border-width: 8px 8px 8px 0;
    }

    .timeline-content::after {
        left: -6px;
        top: 8px;
        border-width: 8px 8px 8px 0;
    }

    .timeline-badge {
        top: -4px;
    }
}

/* ==========================================================
   THREE PLANES ARCHITECTURE (VALUE PROP)
   ========================================================== */
.architecture-planes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* max-width: 900px; */
    margin: 0 auto;
}

.plane-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.plane-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--accent);
    opacity: 0.5;
    transition: all 0.4s ease;
}

.plane-card:hover {
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.plane-card:hover::before {
    opacity: 1;
    box-shadow: 0 0 15px var(--accent);
}

.plane-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(11, 127, 140, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
    border: 1px solid rgba(11, 127, 140, 0.3);
}

.plane-content h3 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.plane-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .plane-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 2rem;
    }
}

/* ==========================================================
   INTEGRATION TIERS (VALUE PROP)
   ========================================================== */
.integration-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.tier-card {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(11, 28, 56, 0.05);
    position: relative;
    height: 100%;
}

.tier-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 127, 140, 0.1);
}

.tier-card.featured-tier {
    padding: 4rem 2.5rem;
    border-color: var(--accent);
    box-shadow: 0 20px 50px rgba(11, 127, 140, 0.15);
    z-index: 2;
    background: linear-gradient(to bottom, #ffffff, #f8fafc);
}

.tier-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.1), rgba(11, 127, 140, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin: 0 auto 1.5rem auto;
}

.tier-card.featured-tier .tier-icon {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(11, 127, 140, 0.3);
}

.tier-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 1rem;
}

.tier-card.featured-tier h3 {
    font-size: 1.6rem;
}

.tier-card p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

.tier-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(11, 127, 140, 0.3);
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .integration-tiers {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .tier-card.featured-tier {
        padding: 3rem 2rem;
        height: auto;
    }
}

/* ==========================================================
   PARTNERSHIP SECTION (ABOUT BANKING)
   ========================================================== */
.partnership-section {
    padding: 40px 5%;
    background: #f0f9fa;
    position: relative;
    overflow: hidden;
}

.partnership-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 40%;
    gap: 2rem;
    align-items: center;
}

.partnership-content {
    position: relative;
    z-index: 2;
}

.partnership-content .section-tag {
    color: var(--accent);
    border-color: rgba(11, 127, 140, 0.3);
    display: inline-flex;
}

.partnership-content h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0b1c38;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.partnership-content p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.partnership-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0rem;
}

.partnership-feature-box {
    background: #f8fafc;
    border: 1px solid rgba(11, 127, 140, 0.1);
    border-left: 4px solid var(--accent);
    padding: 1rem 1.5rem;
    border-radius: 0 16px 16px 0;
    transition: all 0.3s ease;
}

.partnership-feature-box:hover {
    transform: translateX(10px);
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(11, 28, 56, 0.05);
}

.partnership-feature-box strong {
    color: var(--accent);
    font-size: 1.1rem;
    /* display: block;
    margin-bottom: 0.3rem; */
}

.partnership-feature-box p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

.partnership-image-box {
    position: relative;
    border-radius: 24px;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.05), transparent);
}

.partnership-image-box img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(11, 28, 56, 0.1);
}

.partnership-decorator {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(11, 28, 56, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #0b1c38;
    z-index: 5;
    white-space: nowrap;
    display: none;
}

.partnership-decorator i {
    color: #10b981;
}

@media (max-width: 992px) {
    .partnership-container {
        grid-template-columns: 1fr;
    }


}

/* ==========================================================================
   CONTACT PAGE V2 - MODERN & PREMIUM
   ========================================================================== */

.contact-v2-hero {
    padding: 180px 5% 100px;
    background: radial-gradient(circle at 50% 0%, rgba(11, 127, 140, 0.15) 0%, transparent 70%),
        linear-gradient(180deg, #0b1c38 0%, #000000 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-v2-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 127, 140, 0.5), transparent);
}

.contact-v2-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(to bottom, #ffffff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

.contact-v2-hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.contact-v2-main {
    padding: 40px 5%;
    background: #ebf7fa;
    position: relative;
}

.contact-v2-container {
    max-width: 1300px;
    margin: 0 auto;
}

.contact-v2-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 4rem;
    align-items: start;
}

/* Direct Contact Card */
.contact-info-card {
    background: linear-gradient(135deg, #050b18 0%, #0b7f8c 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 3.5rem;
    position: sticky;
    top: 140px;
}

.contact-info-card h2 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.contact-info-card h3 {
    font-size: 2rem;
    margin-bottom: 2.5rem;
    color: #fff;
}

.contact-person-header {
    margin-bottom: 3rem;
}

.contact-person-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.contact-person-title {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
    display: block;
}

.contact-links-list {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.contact-link-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    text-decoration: none;
    color: #fff;
    transition: var(--transition);
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
}

.contact-link-item:hover {
    background: rgba(11, 127, 140, 0.1);
    border-color: rgba(11, 127, 140, 0.3);
    transform: translateX(10px);
}

.contact-link-item i {
    width: 44px;
    height: 44px;
    background: rgba(11, 127, 140, 0.1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
}

.contact-link-content .label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.2rem;
}

.contact-link-content .value {
    font-size: 1.03rem;
    font-weight: 600;
    word-break: break-all;
}

.cert-badge {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.cert-badge i {
    color: #10b981;
}

/* Enquiry Form Card */
.contact-form-card {
    background: linear-gradient(135deg, #050b18 0%, #0b7f8c 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 1.5rem;
}

.form-header-v2 {
    margin-bottom: 1.5rem;
}

.form-header-v2 h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
}

.form-header-v2 p {
    color: var(--text-muted);
    line-height: 1.6;
}

.premium-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.form-group-v2 {
    margin-bottom: .4rem;
}

.form-group-v2.full-width {
    grid-column: span 2;
}

.form-group-v2 label {
    display: block;
    font-size: 0.90rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 0.3rem;
    padding-left: 0.5rem;
}

.input-premium,
.select-premium,
.textarea-premium {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.1rem 1.4rem;
    color: #fff;
    font-size: 1rem;
    transition: var(--transition);
}

.input-premium:focus,
.select-premium:focus,
.textarea-premium:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(11, 127, 140, 0.05);
    box-shadow: 0 0 20px rgba(11, 127, 140, 0.2);
}

.select-premium option {
    background: #0b1c38;
    color: #fff;
}

.textarea-premium {
    min-height: 150px;
    resize: vertical;
}

.dev-note-box {
    background: rgba(11, 127, 140, 0.05);
    border: 1px dashed rgba(11, 127, 140, 0.3);
    padding: 1.2rem;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.dev-note-box i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 0.2rem;
}

.dev-note-box p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.btn-premium {
    width: 100%;
    padding: 1.2rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.btn-premium:hover {
    background: #0e96a6;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11, 127, 140, 0.4);
}

@media (max-width: 1100px) {
    .contact-v2-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        position: static;
        padding: 1.5rem;
    }

    .contact-form-card {
        padding: 1.5rem;
    }

    .contact-v2-main {
        padding: 40px 5%;
    }
}


/* --- Solution Section Redesign --- */
.tc-solution-section {
    padding: 40px 2%;
    background: linear-gradient(135deg, #0b1c38 0%, #000000 100%);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.tc-solution-section .glass-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.4;
    animation: tc-blob-float 10s infinite alternate ease-in-out;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: rgba(14, 124, 134, 0.2);
    bottom: -200px;
    left: -200px;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: rgba(11, 28, 56, 0.3);
    top: -100px;
    right: 10%;
    animation-delay: -5s !important;
}

@keyframes tc-blob-float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, 40px) scale(1.1);
    }
}

.tc-solution-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.tc-solution-grid {
    display: grid;
    grid-template-columns: 1.2fr auto;
    gap: 60px;
    align-items: center;
}

.tc-solution-tag {
    color: var(--accent);
    border-color: rgba(11, 127, 140, 0.3);
    margin-bottom: 1rem;

}

.tc-solution-heading {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: -1.5px;
    text-align: center;
}

.accent-text {
    color: var(--accent);
    background: linear-gradient(120deg, var(--accent), #00f2ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tc-solution-main-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.tc-solution-main-card p {
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: justify;
}

.tc-solution-cards-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 2.5rem;
}

.tc-solution-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    transition: var(--transition);
}

.tc-solution-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(11, 127, 140, 0.2);
    transform: translateY(-5px);
}

.card-icon {
    width: 50px;
    height: 50px;
    background: rgba(11, 127, 140, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.tc-solution-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.tc-solution-result {
    position: relative;
    background: linear-gradient(135deg, rgba(11, 127, 140, 0.2), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(11, 127, 140, 0.4);
    border-radius: 24px;
    padding: 1.3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    overflow: hidden;
}

.result-icon-glow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--accent);
    filter: blur(50px);
    opacity: 0.15;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.tc-solution-result i {
    width: 44px;
    height: 44px;
    color: var(--accent);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.tc-solution-result p {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.tc-solution-right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tc-solution-visual {
    position: relative;
    width: 100%;
    max-width: 550px;
    animation: tc-image-float 6s infinite ease-in-out;
}

@keyframes tc-image-float {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

.tc-solution-3d-image {
    width: 100%;
    height: auto;
    border-radius: 40px;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.visual-overlay {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.2) 0%, transparent 70%);
    z-index: 1;
}

@media (max-width: 1100px) {
    .tc-solution-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .tc-solution-right {
        order: -1;
    }

    .tc-solution-visual {
        max-width: 450px;
    }
}


@media (max-width: 768px) {
    .tc-solution-cards-wrapper {
        grid-template-columns: 1fr;
    }

    .tc-solution-result {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1rem;
    }
}

/* --- Why This Approach: Three Column Cards --- */
.tc-approach-section {
    padding: 40px 5%;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.tc-approach-section .card-head {
    align-items: start;
    text-align: left;
}

.tc-approach-section .section-heading {
    color: #000;
}

.tc-approach-section .ab-header {
    text-align: center;
    margin-bottom: 1.3rem;
}

.tc-approach-section .section-description {
    font-size: 1.15rem;
    color: #475569;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

.approach-three-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.approach-main-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 32px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.approach-main-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
}

.card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.icon-circle {
    width: 64px;
    height: 64px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.icon-circle i {
    width: 32px;
    height: 32px;
}

.card-head h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0b1c38;
    margin: 0;
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.comparison-list li {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.5;
    padding-left: 1.5rem;
    position: relative;
}

.comparison-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    background: #cbd5e1;
    border-radius: 50%;
}

/* Specific Card Themes */

/* Traditional */
.traditional-card .icon-circle {
    background: #fee2e2;
    color: #ef4444;
}

/* TrustCircles - Highlighted */
.trustcircles-card {
    background: linear-gradient(135deg, #0b1c38 0%, #0b7f8c 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 20px 50px rgba(11, 127, 140, 0.2);
}

.trustcircles-card .card-head h3 {
    color: #ffffff;
}

.trustcircles-card .icon-circle {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.trustcircles-card .comparison-list li {
    color: #e2e8f0;
    font-weight: 500;
}

.trustcircles-card .comparison-list li::before {
    background: #00f2ff;
    box-shadow: 0 0 10px #00f2ff;
}

.card-footer-tag {
    margin-top: auto;
    padding-top: 2.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00f2ff;
    opacity: 0.8;
}

/* Responsiveness */
@media (max-width: 1100px) {
    .approach-three-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trustcircles-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .tc-approach-section {
        padding: 40px 5%;
    }

    .approach-three-cards-grid {
        grid-template-columns: 1fr;
    }

    .trustcircles-card {
        grid-column: span 1;
    }

    .approach-main-card {
        padding: 2rem;
    }
}

/* --- Our Principles Section --- */
.tc-principles-section {
    padding: 40px 5%;
    background-color: #f8fafc;
    /* Subtle light background to distinguish from sections above */
}

.tc-principles-section .section-heading {
    color: #020617;
}

.tc-principles-section .section-description {
    color: #475569;
}

.tc-principles-section .ab-diff-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 1.3rem;
    border-radius: 24px;
    transition: all 0.3s ease;
}

.tc-principles-section .ab-diff-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: #0b7f8c50;
}

.tc-principles-section .ab-diff-icon {
    width: 54px;
    height: 54px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #64748b;
}

.tc-principles-section .ab-diff-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1c38;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.tc-principles-section .ab-diff-card p {
    color: #475569;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* --- Regulatory Context Section (Dark) --- */
.tc-regulatory-section {
    padding: 40px 5%;
    background-color: #040d1a;
    /* Deeper dark background */
    color: #ffffff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(0deg, #0e254a 0%, #000000 100%);
}

/* Background Gradients for Depth */
.tc-regulatory-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.05) 0%, transparent 70%);
    z-index: 0;
}

.tc-regulatory-section::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.03) 0%, transparent 70%);
    z-index: 0;
}

.tc-regulatory-section .ab-container {
    position: relative;
    z-index: 1;
}

.tc-regulatory-section .white-text {
    color: #ffffff;
}

.regulatory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 1240px;
    margin: 1rem auto;
}

.reg-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem;
    border-radius: 32px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.reg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.reg-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 242, 255, 0.3);
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}

.reg-card:hover::before {
    opacity: 1;
}

.reg-card.highlighted {
    background: linear-gradient(165deg, rgba(0, 242, 255, 0.1) 0%, rgba(11, 127, 140, 0.03) 100%);
    border-color: rgba(0, 242, 255, 0.4);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);
}

.reg-badge {
    display: inline-block;
    background: linear-gradient(90deg, #0b7f8c, #0b7f8c);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0, 242, 255, 0.3);
    align-self: flex-start;
}

.reg-icon {
    width: 48px;
    height: 48px;
    color: #00f2ff;
    margin-bottom: 2rem;
    background: rgba(0, 242, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.reg-card:hover .reg-icon {
    transform: rotateY(180deg);
}

.reg-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    line-height: 1.3;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.reg-card p {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.reg-warning {
    margin-top: auto;
    padding-top: 2rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: #00f2ff;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reg-warning::before {
    content: '';
    width: 20px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* Risk Callout - Tonoch Version */
.reg-risk-callout {
    max-width: 1240px;
    margin: 1rem auto 0;
    /* background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.05) 100%); */
    border: 1px solid rgba(0, 242, 255, 0.3);
    padding: 2rem;
    border-radius: 40px;
    display: flex;
    gap: 3rem;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 242, 255, 0.1);
}

.reg-risk-callout::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.risk-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: rgba(0, 242, 255, 0.1);
    color: #00f2ff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 242, 255, 0.1);
    transform: rotate(-10deg);
}

.risk-icon i {
    width: 40px;
    height: 40px;
}

.risk-content h3 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.risk-content p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.8;
    font-size: 1rem;
    font-weight: 400;
}

/* Regulatory Responsive */
@media (max-width: 1100px) {
    .regulatory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {

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

    .reg-card {
        padding: 1.5rem;
    }

    .reg-risk-callout {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem;
        gap: 2rem;
    }

    .risk-icon {
        margin: 0 auto;
        transform: rotate(0);
    }

    .risk-content h3 {
        font-size: 1.1rem;
    }

    .risk-content p {
        font-size: 1rem;
    }
}

/* --- OUR CREDENTIALS Section (Glassy Dark) --- */
.tc-credentials-section {
    padding: 40px 5%;
    background: radial-gradient(circle at top right, #0b1c38, #000000);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.tc-credentials-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.05) 0%, transparent 70%);
    z-index: 0;
}

.tc-credentials-section .white-text {
    color: #ffffff;
}

.glow-tag {
    color: #00f2ff !important;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

.credentials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 2rem auto 0;
    position: relative;
    z-index: 1;
}

.credential-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem;
    border-radius: 32px;
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
}

.credential-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 242, 255, 0.3);
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.cred-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 242, 255, 0.1);
    color: #00f2ff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    box-shadow: 0 8px 20px rgba(0, 242, 255, 0.1);
}

.cred-icon i {
    width: 30px;
    height: 30px;
}

.credential-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.credential-card p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* Responsive Credentials */
@media (max-width: 900px) {
    .credentials-grid {
        grid-template-columns: 1fr;
    }

    .tc-credentials-section {
        padding: 40px 5%;
    }
}

/* --- Product Platform Section (Light) --- */
.tc-product-platform {
    padding: 40px 5%;
    background-color: #f8fafc;
    color: #475569;
}

.tc-product-platform .section-heading {
    color: #0b1c38;
}

.platform-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    /* max-width: 1200px; */
    margin: 2rem auto 1rem;
}

.pillar-card {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.1);
    padding: 1.5rem;
    border-radius: 32px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.pillar-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 20px 50px rgba(11, 127, 140, 0.1);
}

.pillar-icon {
    width: 60px;
    height: 60px;
    background: rgba(11, 127, 140, 0.08);
    color: var(--accent);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.pillar-icon i {
    width: 30px;
    height: 30px;
}

.pillar-card h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.pillar-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

.platform-summary-box {
    /* max-width: 1200px; */
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.2);
    padding: 1.5rem 2rem;
    border-radius: 0 32px 32px 0;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.platform-summary-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--accent);
    border-radius: 32px 0 0 32px;
}

.summary-content p {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Platform Responsive */
@media (max-width: 900px) {
    .platform-pillars {
        grid-template-columns: 1fr;
    }
}

/* --- Capability Deep-Dive (Dark Accent) --- */
.tc-capability-deepdive {
    padding: 40px 5%;
    background: linear-gradient(135deg, #050b18 0%, #0b1c38 100%);
    position: relative;
    overflow: hidden;
}

.tc-capability-deepdive::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.08) 0%, transparent 70%);
    z-index: 0;
}

.white-text {
    color: #ffffff !important;
}

.opacity-80 {
    opacity: 0.8;
}

.capability-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

.glass-card-accent {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3.5rem;
    border-radius: 40px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-accent:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 242, 255, 0.3);
    transform: translateY(-12px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.cap-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.cap-icon-box {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(0, 242, 255, 0.2), rgba(11, 127, 140, 0.2));
    color: #00f2ff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 242, 255, 0.1);
}

.cap-icon-box i {
    width: 32px;
    height: 32px;
}

.glass-card-accent h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.5px;
}

.cap-content p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Responsive Deepdive */
@media (max-width: 1024px) {
    .capability-cards {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* --- Coming Soon Page --- */
.coming-soon-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: #ebf7fa;
}

.coming-soon-hero {
    padding: 100px 5% 60px;
    width: 100%;
}

.coming-soon-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(11, 127, 140, 0.1);
    color: var(--accent);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.coming-soon-content h1 {
    font-size: 2.5rem;
    color: #020617;
    margin-bottom: 1.5rem;
}

.coming-soon-content p {
    color: #475569;
    font-size: 1.2rem;
    line-height: 1.8;
}

.cs-visual {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}

.pulse-icon {
    width: 120px;
    height: 120px;
    background: #fff;
    border: 1px solid rgba(11, 127, 140, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    position: relative;
}

.pulse-icon i {
    width: 48px;
    height: 48px;
}

.pulse-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.2;
    animation: pulse-node 2s infinite;
}

.cs-footer {
    border-top: 1px solid rgba(11, 127, 140, 0.1);
    padding-top: 3rem;
    margin-top: 2rem;
}

.cs-footer p {
    margin-bottom: 1.5rem;
}

.cs-footer a.btn-modern.btn-demo {
    display: flex;
    max-width: 231px;
    justify-content: center;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .coming-soon-content h1 {
        font-size: 1.6rem;
    }

    .tc-solution-heading {
        font-size: 1.8rem;
    }

    .conflict-col h3 {
        font-size: 1.1rem;
    }

    .tc-solution-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .opportunity-top {
        margin-bottom: 1rem;
    }

    .opportunity-wrapper {
        grid-template-columns: 100%;
    }

    .contact-list {
        gap: 5px;
    }

    .footer-col ul li {
        margin-bottom: 10px;
    }
}

/* --- Standard Comparison Table --- */
.comparison-standard-wrapper {
    margin-top: 0;
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: #fff;
    border: 1px solid #e2e8f0;
}

.tc-comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 750px;
}

.tc-comparison-table th {
    background: #f8fafc;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0b1c38;
    border-bottom: 2px solid #e2e8f0;
}

.tc-comparison-table td {
    padding: 0.8rem 2rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.tc-comparison-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.tc-comparison-table tbody tr:hover {
    background: #f1f5f9;
}

.feature-label {
    font-weight: 700;
    color: #0b1c38 !important;
}

.col-capability {
    width: 30%;
}

.col-traditional {
    width: 35%;
}

.col-trustcircles {
    width: 35%;
}

.highlight-cell {
    color: #0d9488 !important;
    font-weight: 700;
    background: rgba(13, 148, 136, 0.02);
}

.table-mobile-hint {
    display: none;
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
    color: #94a3b8;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 992px) {
    .table-mobile-hint {
        display: flex;
    }
}

/* --- Why This Team (Premium Spotlight Iteration) --- */
.why-team-spotlight {
    padding: 30px 5%;
    background: linear-gradient(135deg, #ffffff 0%, rgb(11 127 140 / 51%) 100%);
    position: relative;
    overflow: hidden;
}

.spotlight-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(at 0% 0%, rgba(11, 127, 140, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(13, 148, 136, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(11, 127, 140, 0.05) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(13, 148, 136, 0.05) 0px, transparent 50%);
    filter: blur(40px);
    z-index: 1;
}

.spotlight-glass-card {
    max-width: 1150px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 48px;
    padding: 2rem;
    position: relative;
    z-index: 2;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    overflow: hidden;
}

.spotlight-watermark {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 300px;
    color: var(--accent);
    opacity: 0.03;
    pointer-events: none;
    z-index: -1;
    transform: rotate(15deg);
}

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

.spotlight-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(11, 127, 140, 0.08);
    color: var(--accent);
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.spotlight-heading {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 900;
    color: #0b1c38;
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -1.5px;
}

.spotlight-heading span {
    color: var(--accent);
    background: linear-gradient(135deg, var(--accent) 0%, #0d9488 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spotlight-body {
    /* max-width: 800px; */
    margin: 0 auto;
}

.spotlight-body .p-lead {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0b1c38;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.spotlight-body .p-secondary {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.spotlight-signature {
    padding-top: 1rem;
    border-top: 1px solid rgba(11, 127, 140, 0.1);
}

.spotlight-signature p {
    font-size: 1.1rem;
    font-weight: 900;
    color: #0b1c38;
    margin: 0;
    letter-spacing: -0.5px;
}

.spotlight-signature span {
    color: var(--accent);
    position: relative;
    display: inline-block;
}

.spotlight-signature span::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(11, 127, 140, 0.1);
    z-index: -1;
}

.midd-heading {
    width: 100%;
    color: #000;
    text-align: center;
    margin-top: 1rem;
}

.midd-heading h2 {
    font-size: 1.5rem;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .spotlight-glass-card {
        padding: 3.5rem 2.5rem;
    }

    .avtar-wrapper {
        gap: .5rem;
    }

    .team-card h3 {
        font-size: 1rem;

    }

    .team-card h3 span {
        font-size: .8rem;
    }

}

@media (max-width: 768px) {


    .spotlight-glass-card {
        padding: 2.5rem 1.5rem;
        border-radius: 32px;
    }

    .spotlight-heading {
        font-size: 1.5rem;
    }

    .spotlight-body .p-lead {
        font-size: 1rem;
    }

    .spotlight-signature p,
    .spotlight-body .p-secondary {
        font-size: 1rem;
    }
}

/* ==========================================================
   CONTACT PAGE — PREMIUM REDESIGN (contact.php)
   ========================================================== */

.cp-page {
    background: #f4f7f9;
}

/* ── Hero ─────────────────────────────────────────────── */
.cp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
    overflow: hidden;
    align-items: stretch;

}

/* Left panel */
.cp-hero-left {
    background: linear-gradient(150deg, #0b1c38 0%, #0b2e40 60%, #050b18 100%);
    padding: 30px 5% 30px 10%;
    display: flex;
    /* align-items: center; */
    position: relative;
    overflow: hidden;
}

.cp-hero-left::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.15) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    pointer-events: none;
}

.cp-hero-left::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.08) 0%, transparent 70%);
    bottom: -100px;
    left: -100px;
    pointer-events: none;
}

.cp-hero-left-inner {
    position: relative;
    z-index: 2;
    /* max-width: 520px; */
}

.cp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(11, 127, 140, 0.15);
    border: 1px solid rgba(11, 127, 140, 0.3);
    border-radius: 100px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #5eead4;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2rem;
}

.cp-eyebrow i {
    width: 14px;
    height: 14px;
}

.cp-hero-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -1.5px;
    margin-bottom: .5rem;
}

.cp-hero-accent {
    background: linear-gradient(90deg, #0b7f8c, #5eead4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cp-hero-sub {
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 2rem;
}


/* Quick contact pills */
.cp-contact-quick {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}

.cp-quick-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cp-quick-item:hover {
    background: rgba(11, 127, 140, 0.12);
    border-color: rgba(11, 127, 140, 0.35);
    transform: translateX(5px);
}

.cp-quick-icon {
    width: 40px;
    height: 40px;
    background: rgba(11, 127, 140, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5eead4;
    flex-shrink: 0;
}

.cp-quick-icon i {
    width: 18px;
    height: 18px;
}

.cp-quick-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cp-quick-val {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Person strip */
.cp-hero-person {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-avatar {
    width: 48px;
    height: 48px;
    background: rgba(11, 127, 140, 0.2);
    border: 1px solid rgba(11, 127, 140, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5eead4;
    flex-shrink: 0;
}

.cp-avatar i {
    width: 26px;
    height: 26px;
}

.cp-person-info {
    flex: 1;
}

.cp-person-info strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

.cp-person-info span {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.1rem;
}

.cp-person-links {
    display: flex;
    gap: 0.6rem;
}

.cp-person-links a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.25s ease;
}

.cp-person-links a:hover {
    background: rgba(11, 127, 140, 0.2);
    border-color: rgba(11, 127, 140, 0.4);
    color: #5eead4;
}

.cp-person-links a i {
    width: 16px;
    height: 16px;
}

/* Right panel */
.cp-hero-right {
    /* background: linear-gradient(150deg, #f0f9fa 0%, #e8f5f7 100%); */
    display: flex;
    /* align-items: center; */
    justify-content: center;
    padding: 30px 9% 30px 5%;
    ;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.cp-hero-decor-1 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.08) 0%, transparent 70%);
    top: -150px;
    right: -150px;
    pointer-events: none;
}

.cp-hero-decor-2 {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 127, 140, 0.06) 0%, transparent 70%);
    bottom: -80px;
    left: -80px;
    pointer-events: none;
}

/* Stat cards grid */
.cp-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 2;
}

.cp-stat-card {
    background: #ffffff;
    border: 1px solid rgba(11, 127, 140, 0.12);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    box-shadow: 0 6px 30px rgba(11, 127, 140, 0.07);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    transition: all 0.35s ease;
}

.cp-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 45px rgba(11, 127, 140, 0.12);
    border-color: rgba(11, 127, 140, 0.25);
}

.cp-stat-wide {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.cp-stat-wide i {
    width: 26px;
    height: 26px;
    color: var(--accent);
    flex-shrink: 0;
}

.cp-stat-wide span {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0b1c38;
    line-height: 1.4;
}

.cp-stat-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -1px;
    line-height: 1;
}

.cp-stat-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Form Section ─────────────────────────────────────── */
.cp-form-section {
    padding: 40px 5% 40px;
    background: #f4f7f9;
}

.cp-form-container {
    max-width: 900px;
    margin: 0 auto;
}

.cp-form-header {
    text-align: center;
    margin-bottom: 1rem;
    text-align: left;
}

.cp-form-tag {
    display: inline-block;
    background: rgba(11, 127, 140, 0.08);
    border: 1px solid rgba(11, 127, 140, 0.2);
    color: var(--accent);
    padding: 0.35rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1rem;
}

.cp-form-title {
    font-size: clamp(1.2rem, 4vw, 1.3rem);
    font-weight: 900;
    color: #0b1c38;
    letter-spacing: -0.8px;
    margin-bottom: 0.5rem;
}

.cp-form-sub {
    font-size: .8rem;
    color: #64748b;
    line-height: 1.6;
}

/* Form card */
.cp-form-card {
    background: #ffffff;
    /* border: 1px solid rgba(11, 127, 140, 0.12); */
    border-radius: 32px;
    padding: 0rem 0.5rem;
    /* box-shadow: 0 10px 50px rgba(11, 127, 140, 0.07); */
}

.cp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cp-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cp-field-full {
    grid-column: span 2;
}

.cp-field label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #374151;
}

.cp-field label span {
    color: red;
}

.cp-optional {
    font-weight: 400;
    color: #94a3b8;
    font-size: 0.8rem;
}

.cp-field input,
.cp-field select,
.cp-field textarea {
    width: 100%;
    padding: 0.4rem .5rem;
    background: #f8fafb;
    border: 1.5px solid #e2e8f0;
    border-radius: 3px;
    font-size: 0.85rem;
    color: #0b1c38;
    font-family: inherit;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.cp-field input::placeholder,
.cp-field textarea::placeholder {
    color: #c0cad5;
}

.cp-field input:focus,
.cp-field select:focus,
.cp-field textarea:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(11, 127, 140, 0.09);
}

.cp-field textarea {
    resize: vertical;
    min-height: 98px;
    line-height: 1.65;
}

.cp-field select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b7f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.cp-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f4f8;
    flex-wrap: wrap;
}

.cp-form-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.70rem;
    color: #94a3b8;
    font-weight: 500;
    width: 100%;
}

.cp-form-note i {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.cp-form-footer svg {
    width: 15px;
    height: 15px;
}

.cp-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.70rem 1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    height: 40px;
}

.cp-submit-btn:hover {
    background: #0a6e7a;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(11, 127, 140, 0.28);
}

.cp-submit-btn i {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.cp-submit-btn:hover i {
    transform: translateX(4px);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .cp-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .cp-hero-left {
        padding: 30px 5% 30px 5%;
    }

    .cp-hero-left-inner {
        max-width: 100%;
    }

    .cp-hero-right {
        padding: 30px 9% 30px 5%;
        ;
    }

    .cp-stats-grid {
        max-width: 100%;
    }

    .cp-form-card {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .cp-contact-quick {
        gap: 0.6rem;
    }

    .cp-form-section {
        padding: 60px 5% 70px;
    }

    .cp-form-card {
        padding: 2rem 1.5rem;
    }

    section.cp-hero {
        padding-top: 0;
    }

    .tc-solution-main-card {
        padding: 1rem;
    }

    .opportunity-benefit {
        padding: 1rem;
        gap: .6rem;
        align-items: start;
    }

    .opportunity-benefit svg {
        width: 87px;
        margin-top: 5px;
    }

    .opportunity-benefit span {
        font-size: .9rem;
    }

    .datau-layout {
        gap: 1rem;
    }

    .cta-content .section-intro {
        margin-bottom: 0 !important;
    }

    .cta-btns .btn-modern {
        padding: 1.2rem 1rem;
        font-size: 1.1rem;
    }

    .footer-description {
        margin-bottom: 0;
    }

    .pillar-icon {
        margin-bottom: .5rem;
    }

    .pillar-card h3 {
        font-size: 1.2rem;
        margin-bottom: .5rem;
    }

    .pillar-card {
        padding: 1rem;
    }

    .pillar-card p {
        font-size: 1rem;
        line-height: 1.5;
    }

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

    .benefit-full-width {
        text-align: left;
        align-items: start;
    }

    .overview-heading {
        text-align: center !important;
    }

    .benefits-content p {
        text-align: center !important;
    }

    .benefits-grid {
        gap: 1rem
    }

}

@media (max-width: 640px) {
    .cp-form-grid {
        grid-template-columns: 1fr;
    }

    .cp-field-full {
        grid-column: span 1;
    }

    .cp-form-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .cp-submit-btn {
        justify-content: center;
        width: 100%;
    }

    .cp-form-note {
        justify-content: center;
    }



    .cp-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   NEW WORK PAGE (new-work.php - Light Theme Flow)
   ========================================================== */

.nw-page {
    /* If full page needs a background, but generally keep it consistent */
}

.nw-flow-section {
    padding: 60px 5% 60px;
    background: linear-gradient(180deg, #f0f9fa 0%, #ffffff 40%, #e8f5f7 100%);
    position: relative;
}

.nw-flow-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.nw-flow-card {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards ease;
}

.nw-flow-card:last-child {
    margin-bottom: 0;
}

/* Base fade-in animation (for simple fallback if JS intersection observer not used) */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternating Layout */
.nw-left {
    flex-direction: row;
}

.nw-right {
    flex-direction: row-reverse;
}

/* Step Indicator */
.nw-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 55px;
}

.nw-step-num {
    width: 55px;
    height: 55px;
    background: #ffffff;
    border: 2px solid #0b7f8c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #0b7f8c;
    box-shadow: 0 10px 30px rgba(11, 127, 140, 0.15);
    position: relative;
    z-index: 2;
}

/* Connecting line */
.nw-step-line {
    width: 2px;
    background: linear-gradient(180deg, rgba(11, 127, 140, 0.4) 0%, rgba(11, 127, 140, 0) 100%);
    flex-grow: 1;
    margin-top: -10px;
    position: absolute;
    top: 55px;
    bottom: -1.5rem;
    /* extend to meet next step margin */
    z-index: 1;
}

.nw-last .nw-step-line {
    display: none;
}

/* Card Content Bubble */
.nw-card-content {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(11, 127, 140, 0.15);
    border-radius: 28px;
    padding: 1.5rem 2rem;
    box-shadow: 0 15px 40px rgba(11, 127, 140, 0.08);
    position: relative;
    flex: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nw-card-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(11, 127, 140, 0.12);
}

.nw-card-content h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0b1c38;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.nw-intro {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Inside Card: Impact Box */
.nw-impact-box {
    background: rgba(11, 127, 140, 0.04);
    border-left: 4px solid #0b7f8c;
    padding: 1rem 1.2rem;
    border-radius: 0 16px 16px 0;
    margin-bottom: 1.2rem;
}

.nw-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    color: #0b7f8c;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
}

.nw-impact-box p {
    font-size: 0.85rem;
    color: #0b1c38;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

/* Benefits Section */
.nw-benefits {
    border-top: 1px solid rgba(11, 127, 140, 0.1);
    padding-top: 1rem;
}

.nw-tag-green {
    color: #059669;
    /* distinct teal-green for benefits */
    margin-bottom: 0.5rem;
}

.nw-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nw-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid rgba(5, 150, 105, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #065f46;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.05);
}

.nw-pill i {
    width: 16px;
    height: 16px;
    color: #059669;
}

/* Flow Arrows / Connector Triangles */
.nw-left .nw-card-content::before {
    content: '';
    position: absolute;
    top: 17px;
    left: -14px;
    border-width: 14px 14px 14px 0;
    border-style: solid;
    border-color: transparent rgba(11, 127, 140, 0.15) transparent transparent;
}

.nw-left .nw-card-content::after {
    content: '';
    position: absolute;
    top: 18px;
    left: -12px;
    border-width: 13px 13px 13px 0;
    border-style: solid;
    border-color: transparent #ffffff transparent transparent;
}

.nw-right .nw-card-content::before {
    content: '';
    position: absolute;
    top: 17px;
    right: -14px;
    border-width: 14px 0 14px 14px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(11, 127, 140, 0.15);
}

.nw-right .nw-card-content::after {
    content: '';
    position: absolute;
    top: 18px;
    right: -12px;
    border-width: 13px 0 13px 13px;
    border-style: solid;
    border-color: transparent transparent transparent #ffffff;
}

/* --- Mobile Responsive Rules for new-work --- */
@media (max-width: 1024px) {
    .nw-flow-card {
        gap: 2rem;
    }

    .nw-card-content {
        padding: 2.5rem;
    }
}

@media (max-width: 768px) {
    .nw-flow-section {
        padding: 60px 5% 80px;
    }

    .nw-flow-card {
        flex-direction: column !important;
        /* Stack vertically */
        gap: .2rem;
        margin-bottom: 2rem;
    }

    .nw-step-indicator {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        width: 100%;
        min-width: auto;
    }

    .nw-step-num {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .nw-step-line {
        display: none;
        /* Hide standard line on mobile */
    }

    /* Draw connecting line down the side on mobile instead if desired, but hidden looks cleaner */

    .nw-left .nw-card-content::before,
    .nw-left .nw-card-content::after,
    .nw-right .nw-card-content::before,
    .nw-right .nw-card-content::after {
        display: none;
        /* remove pointer triangles on stacked mobile view */
    }

    .nw-card-content h3 {
        font-size: 1.1rem;
    }

    .nw-card-content {
        padding: 2rem;
        border-radius: 20px;
    }

    .nw-impact-box {
        padding: 1.25rem;
    }

    .nw-step-indicator {
        margin-bottom: -25px;
        justify-content: center;
    }

    .nw-card-content {
        padding: 2.5rem 1.5rem 1.5rem;
    }
}

@media (max-width: 640px) {
    /* .nw-card-content {
        padding: 1.5rem;
    } */

    .nw-pill-group {
        flex-direction: column;
        align-items: stretch;
    }

    .nw-pill {
        justify-content: left;
    }
}

/* Investment Terms Section */
.investment-terms-section {
    padding: 30px 5%;
    background-color: #ffffff;
    color: #1a2352;
    position: relative;
    z-index: 2;
}

.investment-terms-container {
    max-width: 1400px;
    margin: 0 auto;
}

.investment-terms-header {
    margin-bottom: 1rem;
}

.investment-terms-header .section-tag {
    justify-content: start;
}

.investment-terms-header .section-description {
    margin: 0;
}

.shard-cta-group {
    margin-top: 35px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-modern-outline {
    background: transparent;
    border: 2px solid #0b7f8c;
    color: #ffffff;
    padding: .9rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.btn-modern-outline:hover {
    background: #0b7f8c;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(11, 127, 140, 0.2);
}

.section-header-left .section-tag {
    justify-content: center;
}

/* .section-header-left h2,
.investment-terms-header h2 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: #1a2352;
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.ip-section .section-header-left h2 {
    color: #ffffff;
} */



.section-tag-small {
    color: #0b7f8c;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 15px;
}

.investment-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: #1a2352;
    margin-bottom: 15px;
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.investment-subtitle {
    font-size: 1.1rem;
    color: #666;
    font-weight: 500;
}

.investment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

@media (max-width: 1024px) {
    .investment-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.investment-left {
    height: 100%;
}

.investment-card-dark {
    background: linear-gradient(145deg, #1d2146 0%, #151836 100%);
    border-radius: 20px;
    padding: 1rem;
    color: #ffffff;
    height: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.investment-card-dark .investment-amount-logo {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.investment-card-dark .investment-amount {
    font-size: clamp(2rem, 6vw, 2.5rem);
    font-weight: 800;
    color: #0b7f8c;
    line-height: 1.1;
    margin-bottom: 10px;
    letter-spacing: -1.5px;
}

.investment-card-dark .investment-card-subtitle {
    color: #a0a5cc;
    font-size: 0.95rem;
}

.investment-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.investment-details-list li {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
}

.investment-details-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.investment-details-list li span {
    color: #949abf;
    flex: 1;
    font-weight: 500;
}

.investment-details-list li strong {
    color: #ffffff;
    font-weight: 700;
    text-align: right;
    flex: 1.2;
}

.investment-details-list li strong.text-teal {
    color: #0b7f8c;
}

.investment-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 10px;
}

.valuation-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a2352;
    margin-bottom: 15px;
    line-height: 1.2;
}

.valuation-header p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
}

.valuation-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.valuation-method-card {
    background-color: #ffffff;
    border-left: 5px solid #0b7f8c;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 0 12px 12px 0;
    border-top: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.valuation-method-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.valuation-method-header h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a2352;
    margin: 0;
}

.valuation-amount {
    font-weight: 900;
    font-size: 1.1rem;
}

.text-teal {
    color: #0b7f8c;
}

.valuation-method-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* The summary card */
.valuation-summary-card {
    background: linear-gradient(145deg, #1d2146 0%, #151836 100%);
    border-radius: 12px;
    padding: 25px 30px;
    color: #ffffff;
    margin-top: 10px;
}

.valuation-summary-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #c4c8e7;
    font-style: italic;
}

.valuation-summary-card strong {
    color: #0b7f8c;
    font-style: italic;
    font-weight: 700;
}

/* Use of Funds Section */
.use-of-funds-section {
    padding: 30px 5%;
    background-color: #f8f9fc;
    color: #1a2352;
}

.use-of-funds-container {
    max-width: 1400px;
    margin: 0 auto;
}

.max-w-800 {
    max-width: 800px;
}

.funds-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.fund-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 30px 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f0f0;
}

.fund-card.border-top-teal {
    border-top: 4px solid #0b7f8c;
}

.fund-card.border-top-light {
    border-top: 4px solid #e0e5f2;
}

.fund-card-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.fund-percentage {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a2352;
    line-height: 1.1;
    margin: 0 0 5px 0;
}

.fund-amount {
    font-weight: 800;
    font-size: 1rem;
}

.fund-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a2352;
    margin-bottom: 12px;
}

.fund-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Roadmap Section */
.roadmap-section {
    padding: 30px 5%;
    background-color: #fff;
    color: #1a2352;
}

.roadmap-container {
    max-width: 1400px;
    margin: 0 auto;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

.roadmap-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #f0f0f0;
}

.roadmap-col:last-child {
    border-right: none;
}

.roadmap-header {
    padding: 20px;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    text-align: left;
}

.bg-dark-blue {
    background-color: #1a2352;
}

.bg-lighter-blue {
    background-color: #27346a;
}

.bg-dark-teal {
    background-color: #0d5f66;
}

.bg-bright-teal {
    background-color: #0b7f8c;
}

.roadmap-body {
    padding: 30px 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.roadmap-icon {
    margin-bottom: 20px;
}

.gate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #0b7f8c;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.85rem;
}

.roadmap-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a2352;
    margin-bottom: 20px;
}

.roadmap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.roadmap-list li {
    display: flex;
    align-items: flex-start;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 12px;
    line-height: 1.5;
}

.roadmap-list li span {
    color: #0b7f8c;
    margin-right: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}

@media (max-width: 1024px) {

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

    .roadmap-col:nth-child(2) {
        border-right: none;
    }

    .valuation-header h3 {
        font-size: 1.1rem;
    }
}

@media (max-width: 600px) {

    .funds-grid,
    .roadmap-grid {
        grid-template-columns: 1fr;
    }

    .roadmap-col {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }
}

/* IP Section Classes */
.bg-deep-blue {
    background: linear-gradient(0deg, #0b1c38 0%, #000000 100%);
    color: #ffffff;
}

.text-white {
    color: #ffffff !important;
}

.text-muted {
    color: #a0a5cc !important;
}

.text-teal {
    color: #0b7f8c !important;
}

.font-bold {
    font-weight: 800;
}

/* Intellectual Property Section */
.ip-section {
    padding: 30px 5%;
}

.ip-container {
    max-width: 1400px;
    margin: 0 auto;
}

.ip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 50px 0 30px;
}

.ip-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 25px 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s ease;
}

.ip-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(11, 127, 140, 0.3);
}

.ip-badge {
    color: #0b7f8c;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.3;
    min-width: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ip-card-content {
    color: #ced2eb;
    font-size: 0.95rem;
    line-height: 1.6;
}

.ip-card-content strong {
    color: #ffffff;
    font-weight: 700;
}

.ip-moat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 4px solid #0b7f8c;
    border-radius: 6px;
    padding: 25px 30px;
}

.ip-moat-card p {
    color: #ced2eb;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

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