@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
    --primary: #0bb5ac;
    --primary-600: #0aa298;
    --secondary: #4e504f;
    --ink: #1b1d1d;
    --text: #4e504f;
    --muted: #6b7270;
    --bg: #ffffff;
    --bg-soft: #F7FAFA;
    --border: #E5E7EB;
    --text-light: #cfd3d3; 
    --text-odoo: #714b67;
    --neural-violet: #7C3AED;
    --data-purple: #4F46E5;
    --muted-light: #94A3B8;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 23, .04), 0 1px 1px rgba(15, 23, 23, .03);
    --shadow: 0 10px 30px -12px rgba(15, 23, 23, .12), 0 2px 6px rgba(15, 23, 23, .04);
    --shadow-lg: 0 30px 60px -20px rgba(15, 23, 23, .18), 0 8px 16px rgba(15, 23, 23, .06);
    --container: 1200px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}

.container {
    max-width: var(--container)
}

/* Blog detail specific tweaks (kept minimal and using design tokens) */
.blog-detail-article .blog-hero-img {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    margin-bottom: 18px;
}
.blog-detail-article .blog-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}
.blog-detail-article .body {
    padding: 24px;
}
.blog-row-meta {
    color: var(--muted);
    font-size: 0.95rem;
}
.blog-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.75rem 0;
}
.blog-desc {
    color: var(--secondary);
}
.blog-desc h3,.blog-desc h2{
    font-size: 22px;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
}
.blog-desc h3 strong,.blog-desc h2 strong {
    font-weight: 600;
}
.blog-tags { color: var(--muted); }
.blog-tags .tag-list { color: var(--primary); }
.share-btn {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .blog-title { font-size: 22px; }
    .blog-detail-article .body { padding: 18px; }
}

/* Location highlights cards */
.loaction-highlights.cs-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    height: 100%;
}
.loaction-highlights .lh-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
    margin-bottom: 10px;
}
.loaction-highlights .lh-header span{
    font-size: 14px;
}
.lh-body{
    font-size: 0.95rem;
    text-align: left;
}
.loaction-highlights .ic-flag {
    width: 28px;
    height: auto;
    display: inline-block;
}
.loaction-highlights .lh-body p {
    margin: 0 0 10px 0;
    color: var(--muted);
}
.loaction-highlights .contact_info_item h6 { margin: 8px 0 6px; }

@media (max-width: 767px) {
    .loaction-highlights.cs-card { padding: 14px; }
    .loaction-highlights .lh-header { font-size: 0.95rem; }
}

img {
    max-width: 100%;
    height: auto
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s var(--ease)
}

a:hover {
    color: var(--primary)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 .5em
}

h1 {
    font-size: 56px;
    font-weight: 800
}

h2 {
    font-size: 42px
}

h3 {
    font-size: 28px
}

h4 {
    font-size: 22px
}

h5 {
    font-size: 18px
}

p {
    margin: 0 0 1em
}

@media (max-width:767px) {
    body {
        font-size: 16px
    }

    h1 {
        font-size: 36px
    }

    h2 {
        font-size: 32px
    }

    h3 {
        font-size: 24px
    }
}



/* Section system */
.section {
    padding: 100px 0
}

.section-light {
    background: var(--bg-soft)
}

.section-dark {
    background: var(--ink);
    color: var(--text-light);
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: #fff
}


@media(max-width:575px) {
    .section {
        padding: 50px 0
    }
}

/* Buttons */

.btn-grad {
    border: none;
    background-image: linear-gradient(to right, #16a3fe 0, #23c99d 100%);
    -webkit-box-shadow: 0 13px 27px 0 rgba(198, 121, 227, .25);
    box-shadow: 0 13px 27px 0 rgba(198, 121, 227, .25);
    color: var(--bg);
    overflow: hidden;
}

.btn-grad:before{
    position: absolute;
    left: 0;
    transition: .5s;
    border-radius: 5px;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0;
    background-image: linear-gradient(to right, #23c99d 0, #16a3fe 100%)
}

.btn-grad:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 13px 27px 0 rgba(198, 121, 227, .25);
    box-shadow: 0 13px 27px 0 rgba(198, 121, 227, .25);
    text-decoration: none
}
.btn-grad:hover:before {
    opacity: 1
}

.btn {
    font-weight: 600;
    border-radius: 8px;
    padding: 0 24px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all .25s var(--ease);
    border: 1px solid transparent
}

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

.btn-primary-axat:hover {
    background: var(--primary-600);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(11, 181, 172, .55)
}

.btn-outline-axat {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary)
}

.btn-outline-axat:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px)
}

.btn-border-bottom {
    background: var(--bg);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-bottom: 3px solid var(--primary);
    box-shadow: none
}

.btn-border-bottom:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(11, 181, 172, .55)
}

.stat-num {
    font-size: 54px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1
}

/* TRUST */
.trust, .stats {
    margin-bottom: 60px
}

.stat-num span {
    color: var(--primary)
}

.stat-label {
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500
}

.logo-strip-title {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 24px
}

.logo-carousel {
    display: flex;
    gap: 64px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    align-items: center
}

.logo-carousel-inner {
    display: flex;
    gap: 64px;
    animation: scroll-logos 30s linear infinite
}

.logo-item {
    flex: none;
    font-weight: 700;
    letter-spacing: .16em;
    color: #9aa3a1;
    font-size: 18px;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .2s, color .2s
}

.logo-item:hover {
    opacity: 1;
    color: var(--secondary)
}

@keyframes scroll-logos {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* Manufacturing landing page */
.manufacturing-page {
    overflow: hidden;
}

.manufacturing-hero {
    padding-top: 160px;
    padding-bottom: 80px;
    background: radial-gradient(circle at top left, rgba(11, 181, 172, 0.12), transparent 30%), linear-gradient(135deg, #f8fcfc 0%, #f2f8f8 45%, #fefefe 100%);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(11, 181, 172, 0.1);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.hero-title {
    font-size: clamp(2.2rem, 4.4vw, 4.2rem);
    margin-bottom: 18px;
}

.hero-copy {
    font-size: 1.05rem;
    max-width: 720px;
    color: var(--secondary);
}

.hero-copy.muted {
    color: var(--muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 20px;
}

.hero-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 14px;
}

.hero-proof-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border);
}

.hero-visual-card {
    position: relative;
    min-height: 480px;
    border-radius: 30px;
    background: linear-gradient(145deg, #0f172a 0%, #15253a 60%, #0b5f69 100%);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
}

.hero-sphere {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(11, 181, 172, 0.35), transparent 30%), radial-gradient(circle at 70% 20%, rgba(79, 70, 229, 0.35), transparent 22%), radial-gradient(circle at 60% 80%, rgba(6, 182, 212, 0.25), transparent 25%);
    animation: pulse-hero 8s ease-in-out infinite;
}

.hero-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    animation: float-node 4s ease-in-out infinite;
    font-size: 0.9rem;
}

.hero-node i {
    color: #5eead4;
}

.hero-node { position: absolute; transform: translate(-50%, -50%); }

.hero-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    place-items: center;
    text-align: center;
    color: #fff;
    background: radial-gradient(circle, rgba(11,181,172,0.95), rgba(11,127,140,0.9));
    box-shadow: 0 0 0 18px rgba(255,255,255,0.08);
}

.hero-center span {
    font-size: 1.7rem;
    font-weight: 800;
    display: block;
}

.hero-center small {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 4px;
}

.section-heading {
    max-width: 780px;
    margin: 0 auto 40px;
}

.section-heading h2 {
    margin-bottom: 10px;
}

.section-heading p {
    color: var(--muted);
}

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.challenge-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    padding: 20px 16px;
    text-align: left;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.challenge-card i {
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.challenge-card h4 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.challenge-card span {
    color: var(--muted);
    font-size: 0.9rem;
    display: block;
}

.challenge-card:hover,
.challenge-card.active {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: rgba(11,181,172,0.28);
}

.challenge-detail {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: linear-gradient(135deg, #fff, #f3f8f8);
    border: 1px solid rgba(11,181,172,0.16);
    border-radius: 24px;
    padding: 24px 28px;
}

.challenge-detail-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(11,181,172,0.12);
    color: var(--primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.transformation-panel {
    background: linear-gradient(135deg, #0f172a, #18303f);
    color: #fff;
    border-radius: 32px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.transformation-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 22px;
    align-items: center;
}

.transformation-column {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 24px 28px;
}

.transformation-column.after {
    background: rgba(11,181,172,0.14);
}

.transformation-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.transformation-column li {
    padding-left: 18px;
    position: relative;
    color: rgba(255,255,255,0.9);
}

.transformation-column li::before {
    content: "•";
    color: var(--primary);
    position: absolute;
    left: 0;
}

.transformation-arrow {
    font-size: 1.4rem;
    color: #5eead4;
}

.ecosystem-diagram {
    position: relative;
    min-height: 610px;
    border-radius: 32px;
    background: linear-gradient(135deg, #f9fcfc 0%, #eef7f7 100%);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Center core for ecosystem */
.ecosystem-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    color: #0b3940;
    background: radial-gradient(circle at 30% 30%, #dffaf8, #eaf9f9 60%);
    box-shadow: 0 8px 30px rgba(15,23,23,0.06);
    border: 1px solid rgba(11,181,172,0.12);
    z-index: 3;
}

/* svg overlay that draws connecting lines */
.ecosystem-lines {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.ecosystem-diagram::before {
    content: "";
    position: absolute;
    inset: 20px;
    border-radius: 28px;
    border: 1px dashed rgba(11,181,172,0.24);
}

.ecosystem-node {
    position: absolute;
    padding: 10px 16px;
    min-width: 96px;
    text-align: center;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(11,181,172,0.16);
    box-shadow: var(--shadow-sm);
    font-weight: 700;
    color: var(--ink);
    z-index: 4;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.ecosystem-node:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(11,181,172,0.08);
}

.ecosystem-diagram { position: relative; }
.ecosystem-node { position: absolute; transform: translate(-50%, -50%); }

.process-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.process-step {
    padding: 16px 22px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(11,181,172,0.16);
    box-shadow: var(--shadow-sm);
    min-width: 260px;
    text-align: center;
    font-weight: 600;
}

.process-arrow {
    color: var(--primary);
}

.process-integration {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
    color: var(--muted);
}

.process-integration span {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.capability-card {
    background: linear-gradient(135deg, #fff, #f6fbfb);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 24px 18px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.comparison-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    height: 100%;
}

.comparison-card-axat {
    background: linear-gradient(135deg, #e7faf8, #f7fffe);
    border-color: rgba(11,181,172,0.2);
}

.comparison-arrow {
    font-size: 1.4rem;
    color: var(--primary);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.kpi-card {
    background: linear-gradient(135deg, #fff, #f4fbfb);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.tech-pill {
    padding: 12px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(11,181,172,0.16);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    color: var(--ink);
    font-size: 0.95rem;
}

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

.case-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: transparent;
    border: 0;
    font-weight: 600;
    text-align: left;
    color: var(--ink);
}

.faq-answer {
    display: none;
    padding: 0 20px 18px;
    color: var(--muted);
}

.faq-item.active .faq-answer {
    display: block;
}

.future-panel {
    background: linear-gradient(135deg, #0f172a, #18303f);
    color: #fff;
    border-radius: 30px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: var(--shadow-lg);
}

.future-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.future-list span {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
}

@keyframes pulse-hero {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes float-node {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-8px); }
}

@media (max-width: 1199px) {
    .challenge-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .solution-grid,
    .case-grid,
    .capability-grid,
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparison-grid,
    .transformation-grid {
        grid-template-columns: 1fr;
    }

    .comparison-arrow,
    .transformation-arrow {
        display: none;
    }
}

@media (max-width: 767px) {
    .manufacturing-hero {
        padding-top: 140px;
        padding-bottom: 64px;
    }

    .hero-visual-card {
        min-height: 420px;
    }

    .hero-node {
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .hero-node-1 { top: 48px; left: 16px; }
    .hero-node-2 { top: 120px; right: 16px; }
    .hero-node-3 { bottom: 112px; left: 16px; }
    .hero-node-4 { bottom: 42px; right: 16px; }
    .hero-node-5 { top: 200px; left: 50%; }
    .hero-node-6 { bottom: 8px; left: 50%; }

    .challenge-grid,
    .solution-grid,
    .case-grid,
    .capability-grid,
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .transformation-panel,
    .future-panel {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .future-list {
        justify-content: flex-start;
    }

    .ecosystem-diagram {
        min-height: 760px;
    }

    .ecosystem-node {
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .node-erp { top: 90px; left: 24%; }
    .node-crm { top: 90px; right: 24%; }
    .node-production { top: 180px; left: 8%; }
    .node-quality { top: 180px; right: 8%; }
    .node-warehouse { top: 280px; left: 12%; }
    .node-procurement { top: 280px; right: 12%; }
    .node-suppliers { bottom: 130px; left: 20%; }
    .node-customers { bottom: 130px; right: 20%; }
    .node-cloud { top: 38%; left: 2%; }
    .node-iot { top: 38%; right: 2%; }
    .node-ai { top: 52%; left: 2%; }
    .node-analytics { top: 52%; right: 2%; }
    .node-maintenance { bottom: 42px; left: 36%; }
    .node-hr { bottom: 42px; left: 8%; }
    .node-finance { bottom: 42px; right: 8%; }
}

/* HEADER */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 14px 0;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid transparent;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
}

.site-header.scrolled {
    background: #fff;
    border-bottom-color: var(--border);
    box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .18);
    padding: 10px 0
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0
}

.brand-mark {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 22px;
    color: var(--ink)
}

.brand-sub {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500
}

/* Desktop nav */
.main-nav {
    display: none;
    margin-left: auto
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px
}

.nav-item.has-mega {
    position: static
}

.nav-item {
    position: relative
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    padding: 10px 14px;
    border-radius: 8px;
    transition: color .2s var(--ease), background .2s var(--ease);
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
    background: rgba(11, 181, 172, .07)
}

.nav-caret {
    font-size: 10px;
    transition: transform .25s var(--ease);
    opacity: .7
}

.nav-item.is-open>.nav-trigger .nav-caret {
    transform: rotate(180deg);
    opacity: 1
}

.nav-item.is-open>.nav-trigger {
    color: var(--primary);
    background: rgba(11, 181, 172, .08)
}

/* Mega panel */
.mega-panel,
.drop-panel {
    position: absolute;
    top: calc(100% + 14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 23, .22), 0 6px 14px rgba(15, 23, 23, .06);
    z-index: 70;
}

.nav-item.is-open>.mega-panel,
.nav-item.is-open>.drop-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.mega-panel {
    right: 0;
    width: min(1080px, calc(100vw - 40px));
    padding: 24px
}

.mega-panel.mega-wide {
    width: min(1240px, calc(100vw - 40px));
    padding: 26px 28px 0;
    overflow: hidden
}

.nav-item.is-open>.mega-panel {
    transform: translateY(0)
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.mega-grid-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 28px
}

.mega-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border)
}

.mh-ico {
    color: var(--primary);
    font-size: 14px
}

.mh-ico.ms {
    color: #0078d4
}

.mega-col {
    padding: 14px 0 18px
}

.mega-item-lite {
    display: block;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.35;
    transition: background .15s var(--ease), color .15s var(--ease), padding-left .2s var(--ease)
}

.mega-item-lite:hover,
.mega-item-lite.active {
    background: rgba(11, 181, 172, .07);
    color: var(--primary);
    padding-left: 14px
}

.mega-heading a.active {
    /* background: rgba(11, 181, 172, .08); */
    color: var(--primary);
    /* border-radius: 7px;
    padding: 6px 8px */
}

.mega-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 10px;
    transition: background .2s var(--ease)
}

.mega-item:hover {
    background: var(--bg-soft);
    color: var(--ink)
}

.mi-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(11, 181, 172, .10);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 15px
}

.mi-icon.ms {
    background: rgba(0, 120, 212, .10);
    color: #0078d4
}

.mega-item strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 2px
}

.mega-item em {
    font-style: normal;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35
}

.mega-feature-card {
    background: linear-gradient(160deg, #0bb5ac 0%, #0aa298 100%);
    color: #fff;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column
}

.mega-feature-card .eyebrow {
    color: #fff;
    opacity: .95
}

.mega-feature-card .eyebrow .dot {
    background: #fff
}

.mega-feature-card h5 {
    color: #fff;
    font-size: 17px;
    margin: 0 0 8px
}

.mega-feature-card p {
    color: rgba(255, 255, 255, .88);
    font-size: 13.5px;
    margin: 0 0 14px;
    flex: 1
}

.mega-cta {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 2px;
    align-self: flex-start
}

.mega-cta:hover {
    color: #fff;
    border-color: #fff
}

/* Mega footer CTA bar */
.mega-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 6px -28px 0;
    padding: 18px 28px;
    background: linear-gradient(135deg, #F7FAFA 0%, #EEF6F5 100%);
    border-top: 1px solid var(--border);
    flex-wrap: wrap
}

.mega-footer h5 {
    font-size: 16px;
    margin: 4px 0 4px;
    color: var(--ink)
}

.mega-footer p {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0
}

.mf-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.mf-actions .btn {
    height: 42px;
    padding: 0 18px;
    font-size: 13.5px
}

/* Simple dropdown */
.drop-panel {
    left: 0;
    min-width: 260px;
    padding: 10px;
    list-style: none;
    margin: 0
}

.drop-panel.drop-wide {
    min-width: 300px
}

.drop-panel li {
    margin: 0
}

.drop-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink);
    transition: background .15s var(--ease), padding-left .2s var(--ease)
}

.drop-panel a i {
    width: 18px;
    color: var(--primary);
    font-size: 13px
}

.drop-panel a:hover,
.drop-panel a.active {
    background: rgba(11, 181, 172, .07);
    color: var(--primary);
    padding-left: 16px
}

.drop-section {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 12px 4px
}

.drop-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 8px
}

.drop-cta-link {
    color: var(--primary) !important;
    font-weight: 600
}

.drop-cta-link i {
    color: var(--primary)
}

.is-soon {
    opacity: .75
}

.is-soon.is-disabled {
    opacity: .6;
    pointer-events: none;
    cursor: default
}

.drop-panel a.is-disabled,
.drop-panel a.is-disabled:hover,
.drop-panel a.is-disabled.active {
    background: transparent !important;
    color: var(--muted) !important;
    padding-left: 12px;
    pointer-events: none;
    cursor: default
}

.is-soon::after {
    content: "Soon";
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(11, 181, 172, .12);
    padding: 2px 7px;
    border-radius: 99px
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto
}

.btn-header {
    height: 42px;
    padding: 0 16px;
    font-size: 13.5px;
    border-radius: 8px
}

.btn-header-secondary {
    background: transparent
}

.m-cta {
    padding: 18px 4px 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px
}

/* Hamburger */
.nav-toggle {
    background: none;
    border: 1px solid var(--border);
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: var(--ink);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0
}

.nav-toggle .bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s var(--ease), opacity .2s var(--ease)
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg)
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
    opacity: 0
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg)
}

/* Mobile nav */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 92vw);
    background: #fff;
    box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .25);
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    z-index: 55;
    padding-top: 74px;
    overflow-y: auto;
}

.mobile-nav.open {
    transform: translateX(0)
}

.mobile-nav-inner {
    padding: 14px 18px 28px
}

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

.m-list>li {
    border-bottom: 1px solid var(--border)
}

.m-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    padding: 16px 4px;
    cursor: pointer;
}

.m-link.active,
.m-group.active > .m-link {
    color: var(--primary);
    background: rgba(11, 181, 172, .07);
}

.m-toggle i {
    transition: transform .25s var(--ease);
    color: var(--muted);
    font-size: 12px
}

.m-toggle[aria-expanded="true"] {
    color: var(--primary)
}

.m-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
    color: var(--primary)
}

.m-sub {
    display: none;
    padding: 2px 4px 16px;
    flex-direction: column;
    gap: 2px
}

.m-group.is-open .m-sub {
    display: flex
}

.m-sub-h {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 12px 0 4px
}

.m-sub a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--text)
}

.m-sub a:hover,
.m-sub a.active {
    background: rgba(11, 181, 172, .07);
    color: var(--primary)
}

/* Backdrop */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 23, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
    z-index: 54
}

.nav-backdrop.show {
    opacity: 1;
    visibility: visible
}

body.nav-locked {
    overflow: hidden
}

/* Responsive — desktop nav appears at lg */
@media(min-width:992px) {
    .main-nav {
        display: block
    }

    .nav-toggle {
        display: none
    }
}

@media(max-width:991px) {
    .header-actions .btn-header {
        display: none !important
    }
}

.section-head {
    max-width: 760px;
    margin: 0 0 56px
}

.section-head.light {
    color: var(--text-light)
}

.section-head h2 {
    margin-bottom: 14px
}

.section-sub {
    color: var(--muted);
    font-size: 18px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--primary);
    margin-bottom: 18px
}

.eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    display: inline-block
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #0bb5ac;
    margin-bottom: 18px;
}
.eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    display: inline-block;
}

.section-head h2 {
    margin-bottom: 14px;
}

.section-sub {
    color: #6b7270;
    font-size: 18px;
}


.bg-grad-new{
    background: linear-gradient(135deg, #060f1a 0%, #0D1B2A 45%, #0a2540 75%, #0E7490 100%);
        position: relative;
        /* display: flex;
        align-items: center; */
        padding: 160px 0 110px !important;
        overflow: hidden;
}
.hero-bg-mesh {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 18% 78%, rgba(6, 182, 212, .13) 0%, transparent 52%), radial-gradient(circle at 82% 22%, rgba(14, 116, 144, .22) 0%, transparent 50%), radial-gradient(circle at 55% 55%, rgba(6, 182, 212, .05) 0%, transparent 38%);
    pointer-events: none;
}

.hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(6, 182, 212, .040) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, .040) 1px, transparent 1px);
    background-size: 55px 55px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(6, 182, 212, .1);
    border: 1px solid rgba(6, 182, 212, .3);
    color: #06b6d4;
    font-size: .8rem;
    font-weight: 700;
    padding: .38rem .95rem; 
    border-radius: 50px;
    margin-bottom: 1.25rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero-tag::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #06b6d4;
    border-radius: 50%;
    animation: pulse-dot 2s infinite; 
}


/* Why Card */
.why-card{
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border: 1px solid #e5e7eb;
    height: 100%;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s cubic-bezier(.22, .61, .36, 1), border-color .25s cubic-bezier(.22, .61, .36, 1);
}

.why-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: #d6dad9;
}

.why-card-img {
    height: 150px;
    object-fit: cover;
    width: 100%;
    display: block;
}
.why-card-body {
    padding: 1.5rem;
}

.why-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--cyan), var(--teal));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: .85rem;
}



/* SPOTLIGHT */
.spotlight h2 {
    margin-bottom: 14px
}

.spotlight-visual {
    /* background: #fff;
    border: 1px solid var(--border); */
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow)
}

.spotlight-visual img {
    display: block;
    border-radius: 10px;
    width: 100%
}

.micro {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 10px
}

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

.tick li {
    position: relative;
    padding: 6px 0 6px 26px;
    color: var(--secondary);
    font-size: 15.5px
}

.tick li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(11, 181, 172, .15)
}

.tick li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 17px;
    width: 6px;
    height: 3px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg)
}

.module-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
    margin: 2rem 0;
}

.module-item {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(6, 182, 212, .12);
    border-radius: 11px;
    padding: 1.1rem .85rem;
    text-align: center;
    transition: all .28s;
    position: relative;
    cursor: default;
}
.module-item:hover {
    background: rgba(6, 182, 212, .09);
    border-color: var(--cyan);
    transform: translateY(-3px);
}

.module-item:hover .module-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.module-icon {
    font-size: 1.4rem;
    color: var(--cyan);
    margin-bottom: .45rem;
}
.module-name {
    font-size: 1rem;
    font-weight: 700;
}
.module-tooltip {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(13, 27, 42, .97);
    border: 1px solid rgba(6, 182, 212, .3);
    color: rgba(255, 255, 255, .9);
    font-size: .76rem;
    padding: .45rem .7rem;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all .22s;
    z-index: 10;
    backdrop-filter: blur(8px);
}
.module-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(6, 182, 212, .3);
}



@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: .5;
    }
    
}

.hero-headline {
    color: #fff;
    margin-bottom: .9rem;
}

/* .hero-headline {
    font-size: 3.3rem;
    font-weight: 800;
    line-height: 1.1;
} */

.hero-sub {
    color: rgba(255, 255, 255, .72);
    font-size: 1.1rem;
    max-width: 520px;
    margin-bottom: 2rem;
    line-height: 1.65;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 2.25rem;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.hero-proof-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: rgba(255, 255, 255, .7);
    font-size: .88rem;
    font-weight: 500;
}

.hero-proof-item a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    display: flex;
        align-items: center;
        gap: 5px;
}

.hero-proof-item a:hover {
    color: #06b6d4;
}

.stars-yellow {
    color: #FBBF24;
}


.gradient-text {
    background: linear-gradient(120deg, #06b6d4, #22d3ee, #a5f3fc);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mesh-container {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    position: relative;
    margin: 0 auto;
}

.fp1 {
    top: 10%;
    left: -6%;
    animation-delay: 0s;
}

.fp2 {
    top: 16%;
    right: -6%;
    animation-delay: 1.2s;
}

.fp3 {
    bottom: 22%;
    left: -9%;
    animation-delay: .6s;
}

.fp4 {
    bottom: 8%;
    right: -6%;
    animation-delay: 1.8s;
}

.mesh-svg {
    width: 100%;
    height: 100%;
    overflow: hidden;
        vertical-align: middle;
}

.mesh-line:nth-child(even) {
    animation-delay: .6s;
    animation-duration: 5s;
}



.mesh-line {
    stroke: rgba(6, 182, 212, .22);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: draw-line 4s ease forwards;
}


.node {
    fill: rgba(6, 182, 212, 0.12);
    stroke: #06B6D4;
    stroke-width: 1.5;
    animation: node-pulse 3s ease-in-out infinite;
}

.node:nth-child(2n) {
    animation-delay: 0.8s;
}

.node:nth-child(3n) {
    animation-delay: 1.6s;
}

@keyframes draw-line {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes node-pulse {

    0%,
    100% {
        fill: rgba(6, 182, 212, 0.1);
    }

    50% {
        fill: rgba(6, 182, 212, 0.38);
    }
}

.video-container {
    width: 100%;
    height: 400px;
    /* or 100vh */
    overflow: hidden;
}

.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}


.center-logo-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: rgba(13, 27, 42, .85);
    border: 2px solid var(--cyan);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 48px rgba(6, 182, 212, .32);
}

.center-logo-badge .badge-icon {
    font-size: 1.7rem;
    color: var(--cyan);
}
.center-logo-badge .badge-text {
    font-size: .6rem;
    color: var(--cyan);
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
}

@keyframes float-bob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}

.floating-pill {
    position: absolute;
    background: rgba(13, 27, 42, .88);
    border: 1px solid rgba(6, 182, 212, .3);
    border-radius: 11px;
    padding: .55rem .9rem;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    animation: float-bob 4s ease-in-out infinite;
    white-space: nowrap;
}

.floating-pill div{
    display: flex;
    flex-direction: column;
}

.floating-pill .sub {
    font-size: .62rem;
    color: rgba(255, 255, 255, .9);
    display: block;
    line-height: 1;
}

.counter-sec .counter{
    color: #0a263f;
}


/* .partner-badge {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 11px;
    padding: .7rem 1.1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    font-weight: 600;
    font-size: .86rem;
    color: #0d1b2a;
    transition: all .28s;
    white-space: nowrap;
} */

.partner-grid {
    row-gap: 24px;
}

.partner-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 25px;
    height: 100%;
    text-align: left;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s cubic-bezier(.22, .61, .36, 1), border-color .25s cubic-bezier(.22, .61, .36, 1);
}

.partner-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: #d6dad9;
}

.section-light {
    background: #f7fafa;
}

.partner-badge {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 38px;
}

.partner-badge.odoo {
    color: #714B67;
}
.partner-badge.ms {
    color: #0078D4;
}

.partner-card h5 {
    font-size: 17px;
    color: #1b1d1d;
    margin-bottom: 8px;
        font-weight: 700;
            letter-spacing: -.02em;
            line-height: 1.15;
            margin: 0 0 .5em;
}

.partner-badge.clutch {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.clutch-mark {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 22px;
    color: #17313B;
    background: linear-gradient(180deg, #fff, #fff);
    padding: 0;
}
.partner-badge .stars {
    color: #FF3D2E;
    font-size: 13px;
    display: flex;
    gap: 2px;
}

.partner-card p {
    color: #6b7270;
    font-size: 14.5px;
    margin: 0 0 14px;
}
.partner-meta {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #4e504f;
    background: #f7fafa;
    padding: 6px 10px;
    border-radius: 6px;
}

.clutch-summary {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius:16px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 23, .04),
        0 1px 1px rgba(15, 23, 23, .03);
}

.clutch-score {
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 18px;
    margin-bottom: 18px;
}
.clutch-score .score {
    font-size: 36px;
    font-weight: 800;
    color: #1b1d1d;
    line-height: 1;
    letter-spacing: -.03em;
}

.clutch-score .stars {
    color: #FF3D2E;
    font-size: 16px;
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}
.clutch-score .score-meta {
    font-size: 13px;
    color: #6b7270;
}

.clutch-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.clutch-badges span {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    /* letter-spacing: .1em; */
    color: #17313B;
    background: #FFF0EE;
    border: 1px solid #FFD9D4;
    padding: 6px 10px;
    border-radius: 6px;
}

.review-grid {
    row-gap: 24px;
}

.review-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 26px;
    height: 100%;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s cubic-bezier(.22, .61, .36, 1);
}

.review-card .stars {
    color: #FF3D2E;
    font-size: 14px;
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
}
.review-card h5 {
    font-size: 17px;
    color: #1b1d1d;
    line-height: 1.35;
    margin-bottom: 10px;
}

.review-card p {
    color: #6b7270;
    font-size: 14.5px;
    margin: 0 0 16px;
}

.r-meta {
    display: flex;
    flex-direction: column;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.r-meta strong {
    color: #1b1d1d;
    font-size: 14px;
    font-weight: 600;
}

.r-meta span {
    color: #6b7270;
    font-size: 12.5px;
}

/* SOLUTIONS */


.solutions-grid>[class*="col-"] {
    padding-top: 12px;
    padding-bottom: 12px
}

.solution-card, .blog-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    height: 100%;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    color: inherit
}

.solution-card.featured:hover,
.solution-card.featured.alt:hover {
    text-decoration: underline;
}

.solution-card:hover, .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: #d6dad9;
    color: inherit
}

.solution-card h4, .blog-card h4 {
    margin: 18px 0 8px
}

.solution-card p, .blog-card p {
    color: var(--muted);
    font-size: 15.5px;
    margin: 0
}
.blog-card .px-1 h3:nth-child(1) strong,.blog-card .px-1 h3:nth-child(1),
.blog-card .px-1 h3:nth-child(3) strong,.blog-card .px-1 h3:nth-child(3),
.blog-card .px-1 h3:nth-child(4) strong,.blog-card .px-1 h3:nth-child(4),
.blog-card .px-1 h3:nth-child(5) strong,.blog-card .px-1 h3:nth-child(5),
.blog-card .px-1 h3:nth-child(6) strong,.blog-card .px-1 h3:nth-child(6),
.blog-card .px-1 h3:nth-child(7) strong,.blog-card .px-1 h3:nth-child(7),
.blog-card .px-1 h3:nth-child(8) strong,.blog-card .px-1 h3:nth-child(8)
 {
    font-size: 18px; 
    margin-bottom: 8px;
    font-weight: 600;
}
.blog-card .px-1 h3:nth-child(5) strong,
.blog-card .px-1 h3:nth-child(5){
    margin-top: 20px;
}
.blog-card .px-1 ul li {
    font-size: 15px;
    margin-bottom: 6px;
}

.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(11, 181, 172, .10);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 20px
}

.solution-card.featured {
    padding: 36px;
    background: linear-gradient(180deg, #fff, #F7FAFA);
    border-color: #e2e7e6;
    position: relative;
    overflow: hidden
}

.solution-card.featured::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 181, 172, .14), transparent 70%)
}

.solution-card.featured.alt::before {
    background: radial-gradient(circle, rgba(78, 80, 79, .10), transparent 70%)
}

.solution-card.featured h3 {
    margin: 14px 0 10px;
    font-size: 28px
}

.solution-card.featured p {
    font-size: 16.5px;
    color: var(--text)
}

.card-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--primary);
    background: rgba(11, 181, 172, .10);
    padding: 6px 10px;
    border-radius: 6px
}

.solution-card.featured.alt .card-tag {
    color: var(--secondary);
    background: rgba(78, 80, 79, .08)
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 22px
}

.chip-row span {
    font-size: 13px;
    font-weight: 500;
    color: var(--secondary);
    background: #fff;
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 999px
}

.card-link {
    font-weight: 600;
    color: var(--primary);
    font-size: 14.5px
}

.card-link i {
    transition: transform .2s var(--ease);
    margin-left: 6px
}

.solution-card:hover .card-link i {
    transform: translateX(4px)
}

.odoo-services {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.5rem 0 2rem;
}
.service-chip {
    background: rgba(6, 182, 212, .1);
    border: 1px solid rgba(6, 182, 212, .24);
    color: var(--cyan);
    font-size: .82rem;
    font-weight: 600;
    padding: .38rem .9rem;
    border-radius: 50px;
    transition: all .22s;
    cursor: pointer;
}
.service-chip:hover {
    background: var(--cyan);
    color: var(--bg);
    transform: scale(1.04);
    cursor: inherit
}

.partner-logo{
    position: absolute;
    right: 30px;
    height: 23px;
    width: auto;
}

.section-divider {
    width: 56px;
    height: 4px;
    background: linear-gradient(90deg, var(--cyan), var(--teal));
    border-radius: 2px;
    margin: 1rem 0 1.5rem;
}

/* WHY AXAT features */
.feature-grid {
    row-gap: 8px
}

.feature {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    height: 100%
}

.feature i {
    font-size: 22px;
    color: var(--primary);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(11, 181, 172, .10);
    display: grid;
    place-items: center;
    margin-bottom: 18px
}

.feature h4 {
    font-size: 19px;
    margin-bottom: 8px
}

.feature p {
    color: var(--muted);
    font-size: 15px;
    margin: 0
}


/* INDUSTRIES */
.industries {
    row-gap: 24px
}

.industry {
    display: block;
    height: 200px;
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    color: #fff
}

.industry::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 23, .05) 30%, rgba(15, 23, 23, .78) 100%);
    transition: opacity .3s var(--ease)
}

.industry::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transition: transform .6s var(--ease);
    z-index: -1
}

.industry {
    transition: transform .4s var(--ease)
}

.industry:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.02)
}

.industry span {
    position: absolute;
    left: 0;
    bottom: 0;
    letter-spacing: -.01em;
    z-index: 1;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, rgba(13, 27, 42, .92) 60%, transparent);
    width: 100%;
    padding: 20px;
    bottom: 0;
}

.industry {
    background-color: #222;
    background-blend-mode: normal
}

.industry>* {
    position: relative;
    z-index: 1
}

.industry {
    will-change: transform
}

.industry-icon-c{
    font-size: 1.5rem;
        color: var(--cyan);
        margin-bottom: .4rem;
        display: block;
}


/* CASE STUDIES */
.case-grid {
    row-gap: 24px
}

.case {
    background: #1f2222;
    border: 1px solid #2c2f2f;
    border-radius: var(--radius-lg);
    padding: 28px;
    height: 100%;
    color: var(--text-light)
}

.case h4 {
    color: #fff;
    margin-bottom: 16px
}

.case-row {
    margin-top: 14px
}

.case-row strong {
    display: block;
    color: var(--primary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 4px
}

.case-row p {
    margin: 0;
    font-size: 15px;
    color: var(--text-light)
}

/* TESTIMONIALS */
.testimonials .section-head {
    margin-bottom: 42px
}

.testimonials .slick-dots{
    bottom: -40px
}

.testimonials .slick-dots li button:before{
    color: var(--primary);
}

.testimonials .slick-dots li.slick-active button:before {
    color: var(--primary);
    opacity: 1;
    border: 1px solid var(--primary-600);
    border-radius: 100px;
}
.testimonials .slick-dots li button:before{
    font-size: 10px
}

.tt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px
}

.tt-tab {
    background: #fff;
    border: 1px solid var(--border);
    padding: 12px 22px;
    font-weight: 600;
    color: var(--muted);
    font-size: 14.5px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s var(--ease)
}

.tt-tab:hover {
    color: var(--ink);
    border-color: #d6dad9
}

.tt-tab.active {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: 0 4px 12px -4px rgba(27, 29, 29, .25)
}

.tt-panels {
    position: relative
}

.tt-panel {
    display: none;
    animation: fadeIn .35s var(--ease)
}

.tt-panel.active {
    display: block
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.testimonial-carousel .t-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin: 0 12px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.t-quote {
    font-size: 18px;
    color: var(--ink);
    line-height: 1.55;
    letter-spacing: -.01em;
    margin-bottom: 20px
}

.t-quote::before {
    content: "\201C";
    color: var(--primary);
    font-size: 28px;
    line-height: 1;
    margin-right: 4px;
    font-weight: 700
}

.t-meta {
    display: flex;
    flex-direction: column;
    padding-top: 18px;
    border-top: 1px solid var(--border)
}

.t-meta strong {
    color: var(--ink);
    font-size: 15px
}

.t-meta span {
    color: var(--muted);
    font-size: 13px
}

.slick-dots {
    bottom: -36px
}

.slick-dots li button:before {
    font-size: 9px;
    color: var(--secondary);
    opacity: .4
}

.slick-dots li.slick-active button:before {
    color: var(--primary);
    opacity: 1
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.video-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease)
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.video-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1b1d1d, #2c2f2f);
    display: grid;
    place-items: center;
    position: relative
}

.video-thumb i {
    color: #fff;
    font-size: 28px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(11, 181, 172, .9);
    display: grid;
    place-items: center;
    transition: transform .2s var(--ease), background .2s
}

.video-card:hover .video-thumb i {
    transform: scale(1.08);
    background: var(--primary)
}

.video-length {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px
}

.video-info {
    padding: 20px
}

.video-info strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    margin-bottom: 6px
}

.video-info span {
    color: var(--muted);
    font-size: 13.5px
}

.review-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #FF3D2E;
    background: #FFF0EE;
    border: 1px solid #FFD9D4;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 14px
}

.review-source i {
    font-size: 12px
}

.review-source.google {
    color: #EA4335;
    background: #fce8e7;
    border-color: #f4c1bd
}

.review-source.google i {
    font-size: 14px
}

.review-grid-tab {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.review-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px;
    height: 100%;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease)
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.review-card .stars {
    color: #FF3D2E;
    font-size: 14px;
    display: flex;
    gap: 3px;
    margin-bottom: 14px
}

.review-card h5 {
    font-size: 17px;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 10px
}

.review-card p {
    color: var(--muted);
    font-size: 14.5px;
    margin: 0 0 16px
}

.r-meta {
    display: flex;
    flex-direction: column;
    padding-top: 14px;
    border-top: 1px solid var(--border)
}

.r-meta strong {
    color: var(--ink);
    font-size: 14px
}

.r-meta span {
    color: var(--muted);
    font-size: 12.5px
}



@media(min-width:768px) and (max-width:991px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr)
    }

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

/* Global PRESENCE  */
.presence {
    background: var(--bg-soft)
}

.map-wrap {
    position: relative
}

.world-map-viz {
    position: relative;
    width: 100%;
    aspect-ratio: 2/1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #eef3f3;
    box-shadow: var(--shadow-sm)
}

.world-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .92
}

.map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2
}

.pin-dot {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(11, 181, 172, .18), 0 2px 6px rgba(0, 0, 0, .18)
}

.pin-dot::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: .6;
    animation: pin-pulse 2.4s var(--ease) infinite
}

.pin-dot::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: .3;
    animation: pin-pulse 2.4s var(--ease) infinite;
    animation-delay: .8s
}

.map-pin--hq .pin-dot {
    width: 16px;
    height: 16px;
    background: var(--ink);
    box-shadow: 0 0 0 5px rgba(11, 181, 172, .28), 0 2px 8px rgba(0, 0, 0, .25)
}

.map-pin--hq .pin-dot::before,
.map-pin--hq .pin-dot::after {
    border-color: var(--ink)
}

.pin-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease)
}

.map-pin:hover .pin-label,
.map-pin:focus-within .pin-label {
    opacity: 1
}

@keyframes pin-pulse {
    0% {
        transform: scale(.6);
        opacity: .7
    }

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

.presence-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0 0
}

.presence-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    min-width: 0
}

.presence-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: #d6dad9
}

.presence-card i {
    color: var(--primary);
    font-size: 16px;
    flex: none
}

.presence-card>div {
    min-width: 0
}

.presence-card strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.2
}

.presence-card span {
    color: var(--muted);
    font-size: 12px
}


/* LEAD */
.lead-cards {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.lead-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border)
}

.lead-card i {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(11, 181, 172, .10);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 18px
}

.lead-card strong {
    display: block;
    color: var(--ink);
        font-weight: 600;
}

.lead-card span {
    color: var(--muted);
    font-size: 13.5px
}

.lead-form {
    background: #fff;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow)
}

.lead-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 6px;
    display: block
}

.lead-form input,
.lead-form textarea,
.lead-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s
}

.lead-form input:focus,
.lead-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(11, 181, 172, .12)
}

.lead-form .form-group {
    margin-bottom: 16px
}

.form-success {
    display: none;
    margin-top: 14px;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px
}

/* Footer */

/* FOOTER */
.site-footer {
    background: #0f1414;
    color: #9ca3a1;
    padding: 80px 0 30px;
    font-size: 14.5px
}

.site-footer h6 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 18px
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.site-footer ul li {
    margin-bottom: 10px
}

.site-footer a {
    color: #9ca3a1
}

.site-footer a:hover {
    color: #fff
}

.certs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px
}

.certs span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text-light);
    border: 1px solid #2a3030;
    padding: 6px 10px;
    border-radius: 6px
}

.socials {
    display: flex;
    gap: 10px;
    margin-top: 14px
}

.socials a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #2a3030;
    display: grid;
    place-items: center;
    color: var(--text-light)
}

.socials a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff
}

/* Footer partner strip */
.partner-strip {
    margin: 40px 0;
    padding: 24px 0;
    border-top: 1px solid #1d2323;
    border-bottom: 1px solid #1d2323
}

.partner-strip-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #7f8786;
    font-weight: 600
}

.partner-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center
}

.partner-logo-footer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--text-light);
    border: 1px solid #2a3030;
    padding: 8px 12px;
    border-radius: 8px
}

.partner-logo i {
    font-size: 15px
}

.partner-logo-footer.odoo {
    color: #e0c8d8;
    border-color: #4a3b45
}

.partner-logo-footer.ms {
    color: #a7d4f7;
    border-color: #1a3d5a
}

.partner-logo-footer.clutch {
    color: #ff7a6c;
    border-color: #4d3a38
}

.partner-logo-footer.aws {
    color: #ff9900;
    border-color: #4a3b28
}

.partner-logo-footer.gcp {
    color: #aecbfa;
    border-color: #2a3b55
}

.footer-bottom {
    margin-top: 50px;
    padding-top: 24px;
    border-top: 1px solid #1d2323;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: #7f8786;
    font-size: 13px
}

@media(max-width:575px) {
    .pin-label {
        display: none
    }

    .pin-dot {
        width: 10px;
        height: 10px
    }
}

@media(min-width:576px) {
    .presence-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px
    }

    .presence-card {
        padding: 14px
    }

    .presence-card strong {
        font-size: 15px
    }
}

@media(min-width:992px) {
    .presence-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
        margin-top: 32px
    }

    .presence-card i {
        font-size: 18px
    }
}

@media(max-width:991px) {

        .eco-node {
        width: 90px;
        height: 90px;
        }
        .eco-node i {
        font-size: 1rem;
        }
        .eco-node span {
        font-size: .62rem;
        }



    .hud-panel {
        width: 160px !important;
    }

    .hud-panel:nth-child(5),
    .hud-panel:nth-child(2),
    .hud-panel:nth-child(3),
    .hud-panel:nth-child(1) {
        display: none;
    }

    .video-grid,
    .review-grid,
    .review-grid-tab {
        grid-template-columns: 1fr
    }

    .tt-tabs {
        gap: 6px
    }

    .tt-tab {
        padding: 10px 16px;
        font-size: 13px
    }
         .hero-headline {
             font-size: 2.6rem;
         }
                 .section {
                     padding: 70px 0
                 }
}


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

@media (max-width: 575px) {
    .eco-node {
    width: 70px !important;
    height: 70px !important;
    }
    .eco-node i {
    font-size: .85rem !important;
    }
    .eco-node span {
    font-size: .55rem !important;
    }

    .hero-headline {
        font-size: 2rem;
    }
    .fp1, .fp3 {
        left: 0;
    }
    .fp2, .fp4{
        right: 0;
    }
        .partner-logo {
            position: relative;
            right: auto;
            height: 32px;
            width: auto;
        }
}

/* =========================================================
   ODOO ERP SERVICES PAGE — scoped additions
   ========================================================= */

.dm-hero {
    padding-top: 150px;
    padding-bottom: 90px
}

.dm-hero-visual {
    position: relative;
    min-height: 470px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 24px;
    overflow: hidden;
    box-shadow: 0 20px 70px -30px rgba(0,0,0,.45)
}

.dm-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(11,181,172,.22), transparent 35%), radial-gradient(circle at bottom right, rgba(124,58,237,.20), transparent 40%);
    pointer-events: none
}

.dm-hero-card {
    position: relative;
    z-index: 2;
    background: rgba(8,12,12,.68);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06)
}

.dm-hero-card-main {
    animation: dm-float 5s ease-in-out infinite
}

.dm-hero-card-side {
    margin-left: 28px
}

.dm-hero-card-small {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 12px 14px
}

.dm-hero-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px
}

.dm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #d8fffa;
    background: rgba(11,181,172,.16);
    border: 1px solid rgba(11,181,172,.28)
}

.dm-pill-soft {
    background: rgba(124,58,237,.16);
    border-color: rgba(124,58,237,.28);
    color: #e7ddff
}

.dm-hero-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 140px;
    margin-bottom: 14px
}

.dm-hero-chart span {
    flex: 1;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #5ee4dc, #0bb5ac);
    opacity: .9;
    animation: dm-chart 2.2s ease-in-out infinite
}

.dm-hero-chart span:nth-child(2) { animation-delay: .15s }
.dm-hero-chart span:nth-child(3) { animation-delay: .3s }
.dm-hero-chart span:nth-child(4) { animation-delay: .45s }
.dm-hero-chart span:nth-child(5) { animation-delay: .6s }
.dm-hero-chart span:nth-child(6) { animation-delay: .75s }

.dm-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.dm-hero-metrics div {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.05)
}

.dm-hero-metrics strong {
    display: block;
    color: #fff;
    font-size: 20px;
    line-height: 1
}

.dm-hero-metrics span {
    color: #8ea4a0;
    font-size: 12px
}

.dm-funnel {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.dm-funnel div {
    border-radius: 999px;
    border: 1px solid rgba(11,181,172,.22);
    background: rgba(255,255,255,.04);
    padding: 8px 12px
}

.dm-funnel span {
    color: #e4f7f4;
    font-size: 13px;
    font-weight: 600
}

.dm-mini-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0bb5ac, #7c3aed);
    box-shadow: 0 0 14px rgba(11,181,172,.45)
}

.dm-journey {
    position: relative;
    min-height: 360px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #fff, #f7fafa);
    padding: 32px 24px;
    overflow: hidden
}

.dm-journey-line {
    position: absolute;
    left: 50%;
    top: 70px;
    bottom: 70px;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(11,181,172,.2), rgba(11,181,172,.6));
}

.dm-journey-node {
    position: relative;
    z-index: 2;
    width: min(240px, 80%);
    margin: 0 auto 20px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(11,181,172,.2);
    box-shadow: var(--shadow-sm)
}

.dm-journey-node-top {
    margin-top: 16px
}

.dm-journey-node-bottom {
    margin-bottom: 0
}

.dm-journey-node span {
    display: block;
    color: var(--ink);
    font-weight: 700;
    margin-bottom: 4px
}

.dm-journey-node small {
    color: var(--muted)
}

.dm-service-card .chip-row { margin-top: 18px }

.dm-ecosystem {
    position: relative;
    min-height: 400px;
    border-radius: 24px;
    border: 1px solid rgba(11,181,172,.16);
    background:
        radial-gradient(circle at 50% 50%, rgba(11,181,172,.08), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(247,250,250,.95));
    overflow: hidden;
    box-shadow: var(--shadow)
}

.dm-ecosystem::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(11,181,172,.14), transparent 42%);
    pointer-events: none
}

.dm-ecosystem::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(11,181,172,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11,181,172,.04) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .5;
    pointer-events: none
}

.dm-ecosystem-center {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(11,181,172,.18), rgba(124,58,237,.16));
    border: 1px solid rgba(11,181,172,.24);
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 700;
    color: var(--ink);
    z-index: 3;
    box-shadow: 0 15px 35px -20px rgba(11,181,172,.40)
}

.dm-ecosystem-center::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(11,181,172,.22);
    animation: ring-expand 3s ease infinite
}

.dm-ecosystem-node {
    position: absolute;
    z-index: 2;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(11,181,172,.18);
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    animation: dm-float 5s ease-in-out infinite;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)
}

.dm-ecosystem-node:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 12px 28px -16px rgba(11,181,172,.32)
}

.node-seo { top: 14%; left: 24% }
.node-ppc { top: 8%; right: 50% }
.node-social { top: 15%; right: 20% }
.node-content { top: 35%; right: 14% }
.node-pages { bottom: 31%; right: 8% }
.node-email { bottom: 14%; right: 14% }
.node-crm { bottom: 32%; left: 7% }
.node-analytics { top: 35%; left: 8% }
.node-auto { top: 70%; left: 16% }
.node-nurture { bottom: 8%; left: 38% }

@media (max-width: 767px) {
    .dm-ecosystem {
        min-height: 560px
    }

    .dm-ecosystem-center {
        width: 132px;
        height: 132px;
        font-size: 14px
    }

    .dm-ecosystem-node {
        padding: 8px 12px;
        font-size: 12px
    }
}

.dm-process-card {
    height: 100%;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    padding: 22px;
    box-shadow: var(--shadow-sm)
}

.dm-step {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px
}

.dm-process-card h5 {
    margin-bottom: 8px
}

.dm-process-card p {
    color: var(--muted);
    margin: 0;
    font-size: 15px
}

.dm-tech-card h4 { margin: 16px 0 8px }

.dm-report-card {
    position: relative;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(160deg, #fff, #f7fafa);
    padding: 24px;
    box-shadow: var(--shadow)
}

.dm-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.dm-report-head strong { color: var(--ink) }
.dm-report-head span { color: var(--muted); font-size: 13px }

.dm-report-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.dm-report-block {
    min-height: 92px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(11,181,172,.12), rgba(124,58,237,.09));
    border: 1px solid rgba(11,181,172,.14)
}

.dm-report-block-lg {
    grid-column: span 2;
    min-height: 140px
}

@keyframes dm-float {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-6px) }
}

@keyframes dm-chart {
    0%, 100% { transform: scaleY(.86); transform-origin: bottom }
    50% { transform: scaleY(1); transform-origin: bottom }
}

/* Dark hero + final CTA shared */
.hero-dark,
.final-cta {
    position: relative;
    background: #0d1211;
    color: var(--text-light);
    overflow: hidden;
    padding: 150px 0 90px;
}

.final-cta {
    padding: 100px 0
}

.hero-dark::after,
.final-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 181, 172, .04), transparent 40%);
    pointer-events: none;
}

.hero-dark .container,
.final-cta .container {
    position: relative;
    z-index: 2
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    background: radial-gradient(circle, rgba(11, 181, 172, .55), rgba(11, 181, 172, 0) 65%);
    pointer-events: none;
    z-index: 1;
}

.orb-1 {
    width: 520px;
    height: 520px;
    top: -140px;
    left: -120px
}

.orb-2 {
    width: 460px;
    height: 460px;
    bottom: -180px;
    right: -120px;
    opacity: .4
}

.grid-texture {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    z-index: 1;
    pointer-events: none;
}

.eyebrow-dark {
    color: #5ee4dc
}

.eyebrow-dark .dot {
    background: #5ee4dc
}

.h-dark {
    color: #fff
}

.h-dark,
.final-cta h2 {
    font-size: 60px;
    line-height: 1.05;
    letter-spacing: -.025em
}

@media(max-width:767px) {

    .h-dark,
    .final-cta h2 {
        font-size: 38px
    }

    .hero-dark {
        padding: 120px 0 60px
    }
}

.h-accent {
    font-style: italic;
    font-weight: 500;
    color: var(--primary);
    font-family: 'Fraunces', 'Inter', serif;
}

.lead-dark {
    color: #a7b0af;
    font-size: 19px;
    line-height: 1.6;
    margin: 18px 0 28px;
    max-width: 560px
}

.final-cta .lead-dark {
    margin: 18px auto 28px
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px
}

.hero-cta.justify-center {
    justify-content: center
}

.btn-ghost-dark {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
}

.btn-ghost-dark:hover {
    background: rgba(11, 181, 172, .12);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-1px)
}

.hero-points-dark {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px
}

.hero-points-dark li {
    font-size: 14px;
    color: #a7b0af;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.hero-points-dark i {
    color: var(--primary)
}

/* Trust strip */
.trust-strip {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 36px;
}

@media(min-width:768px) {
    .trust-strip {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px
    }
}

.ts-item {
    display: flex;
    align-items: center;
    gap: 14px
}

.ts-num {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1;
    min-width: 64px;
}

.ts-num i {
    color: var(--primary);
    font-size: 28px
}

.ts-num span {
    color: var(--primary);
    font-size: 22px;
    margin-left: 2px
}

.ts-label strong {
    display: block;
    color: #fff;
    font-size: 14.5px
}

.ts-label span {
    color: #7f8786;
    font-size: 12.5px
}

/* Odoo dashboard mockup */
.odoo-mock {
    position: relative;
    margin-top: 32px
}

@media(min-width:992px) {
    .odoo-mock {
        margin-top: 0
    }
}

.om-frame {
    background: linear-gradient(180deg, #12181a, #0d1211);
    border: 1px solid rgba(11, 181, 172, .18);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(11, 181, 172, .35), 0 8px 24px rgba(0, 0, 0, .4);
}

.om-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #0a0f10;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.om-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2a3535
}

.om-chrome em {
    margin-left: 12px;
    font-style: normal;
    color: #5c6867;
    font-size: 12px
}

.om-body {
    padding: 20px
}

.om-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px
}

.om-kpi {
    background: #0a0f10;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 12px
}

.om-kpi span {
    display: block;
    color: #7f8786;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 6px
}

.om-kpi strong {
    display: block;
    color: #fff;
    font-size: 18px;
    letter-spacing: -.02em
}

.om-kpi .up {
    font-style: normal;
    color: var(--primary);
    font-size: 11px;
    font-weight: 600
}

.om-chart {
    background: #0a0f10;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 16px
}

.om-chart svg {
    width: 100%;
    height: 110px;
    display: block
}

.om-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.om-mod {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #a7b0af;
    font-size: 12px;
    font-weight: 500;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.om-mod:hover {
    border-color: rgba(11, 181, 172, .5);
    transform: translateY(-2px)
}

.om-mod i {
    color: var(--primary);
    font-size: 18px
}

/* Section 2 positioning */
.pos-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

@media(min-width:768px) {
    .pos-strip {
        grid-template-columns: 1fr 1.4fr;
        gap: 32px;
        padding: 44px 48px
    }
}

.pos-left h2 {
    margin: 0;
    font-size: 30px
}

.pos-right p {
    margin: 0;
    font-size: 17px;
    color: var(--secondary)
}

/* Service cards */


.svc-card {
    display: flex;
    flex-direction: column;
    height: 100%
}

.svc-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px;
    flex: 1
}

.svc-list li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: var(--secondary);
    margin-bottom: 6px;
    line-height: 1.45
}

.svc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--primary);
    opacity: .65
}

/* Why Odoo list */
.why-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0
}

.why-list li {
    display: flex;
    gap: 14px;
    margin-bottom: 18px
}

.why-list li i {
    color: var(--primary);
    background: rgba(11, 181, 172, .10);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
    margin-top: 2px
}

.why-list li strong {
    color: var(--ink);
    display: block;
    margin-bottom: 2px
}

.why-list li div {
    color: var(--secondary);
    font-size: 15.5px;
    line-height: 1.55
}

/* Module diagram */
.mod-diagram {
    max-width: 480px;
    margin: 32px auto 0
}

@media(min-width:992px) {
    .mod-diagram {
        margin-top: 0
    }
}

.mod-diagram svg {
    width: 100%;
    height: auto;
    display: block
}

/* Steps / methodology */
.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    position: relative;
}

@media(min-width:768px) {
    .steps {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        position: relative
    }

    .steps-se{
        grid-template-columns: repeat(6, 1fr);
    }

    .steps::before {
        content: "";
        position: absolute;
        top: 44px;
        left: 8%;
        right: 8%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--primary) 15%, var(--primary) 85%, transparent);
        opacity: .35;
        z-index: 0;
    }
}

.step {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    position: relative;
    z-index: 1;
    text-align: left;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: #d6dad9
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--primary);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 16px;
    margin-bottom: 14px;
}

.step h5 {
    color: var(--ink);
    margin: 0 0 8px;
    font-size: 16px
}

.step p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5
}

.ind-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 32px
}

.ind-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--border);
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    transition: all .2s var(--ease);
}

.ind-chip i {
    color: var(--primary);
    font-size: 14px
}

.ind-chip:hover {
    border-color: var(--primary);
    background: rgba(11, 181, 172, .06);
    transform: translateY(-2px)
}

.ind-callout {
    margin-top: 36px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.service-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-cap {
    font-size: .75rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 50px;
    background: rgba(11, 181, 172, .08);
    border: 1px solid rgba(11, 181, 172, .15);
    color: var(--pulse-cyan);
    transition: all .3s var(--ease);
}
.service-cap:hover {
    background: rgba(11, 181, 172, .15);
    transform: translateY(-2px);
}

.solution-number {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-odoo);
    letter-spacing: .15em;
    margin-bottom: 10px;
}


.ind-callout i {
    color: var(--primary);
    font-size: 22px;
    background: #fff;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--border)
}

.ind-callout strong {
    display: block;
    color: var(--ink);
    margin-bottom: 4px;
    font-size: 15px
}

.ind-callout span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5
}

/* Integration marquee (reuses logo-carousel) */
.int-carousel .logo-item {
    color: var(--secondary);
    filter: grayscale(1);
    opacity: .7;
    transition: all .25s var(--ease)
}

.int-carousel .logo-item:hover {
    color: var(--primary);
    opacity: 1;
    filter: none
}

.int-carousel .logo-item i {
    color: inherit;
    margin-right: 4px
}

/* Result cards */
.result-grid {
    row-gap: 20px
}

.result-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    height: 100%;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.result-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.rc-num {
    font-size: 56px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 10px;
}

.rc-num span {
    color: var(--primary);
    font-size: 36px;
    margin-left: 2px
}

.result-card p {
    color: var(--secondary);
    margin: 0 0 12px;
    font-size: 15px
}

.rc-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(11, 181, 172, .1);
    padding: 5px 10px;
    border-radius: 6px
}

.t-card-lite {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    height: 100%;
}

/* FAQ accordion */
.faq {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.faq-item[open] {
    border-color: var(--primary);
    box-shadow: 0 6px 20px -12px rgba(11, 181, 172, .35)
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 22px;
    font-weight: 600;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary i {
    color: var(--primary);
    font-size: 14px;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(11, 181, 172, .1);
    display: grid;
    place-items: center;
    transition: transform .3s var(--ease);
}

.faq-item[open] summary i {
    transform: rotate(45deg)
}

.faq-body {
    padding: 0 22px 20px
}

.faq-body p {
    margin: 0;
    color: var(--secondary);
    font-size: 15px;
    line-height: 1.6
}

/* Quick contact row */
.quick-contact {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px
}

.quick-contact a {
    color: #a7b0af;
    font-size: 14.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.quick-contact a i {
    color: var(--primary)
}

.quick-contact a:hover {
    color: #fff
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.reveal.is-in {
    opacity: 1;
    transform: none
}

/* justify-content helper */
.justify-center {
    justify-content: center
}

/* =========================================================
   ODOO ERP SERVICES PAGE END
   ========================================================= */


   /* Scoped extensions — reuse existing tokens */
   .oi-problems .result-card {
       padding: 22px
   }

   .oi-problems .rc-ico {
       width: 40px;
       height: 40px;
       border-radius: 10px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: rgba(11, 181, 172, .10);
       color: var(--primary);
       margin-bottom: 14px
   }

   .oi-problems .rc-ico i {
       font-size: 16px
   }

   .oi-two {
       align-items: center
   }

   .oi-two .oi-illus {
       background: linear-gradient(135deg, var(--text-odoo), var(--text-odoo));
       border-radius: 20px;
       padding: 28px;
       box-shadow: var(--shadow);
       color: #e6fbf8
   }

   .oi-two .oi-illus .om-chrome em {
       color: #7fead9
   }

   .why-grid .feature {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 14px;
       padding: 22px;
       height: 100%;
       transition: .25s
   }

   .why-grid .feature:hover {
       border-color: var(--primary);
       transform: translateY(-4px);
       box-shadow: var(--shadow)
   }

   .why-grid .feature .icon-box {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       background: linear-gradient(135deg, rgba(11, 181, 172, .15), rgba(11, 181, 172, .05));
       color: var(--primary);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 14px
   }

   .why-grid .feature h5 {
       margin: 0 0 6px;
       font-size: 16px;
       color: var(--ink)
   }

   .why-grid .feature p {
       margin: 0;
       font-size: 14px;
       color: var(--muted)
   }

   .inc-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 12px
   }

   @media(min-width:576px) {
       .inc-grid {
           grid-template-columns: repeat(2, 1fr)
       }
   }

   @media(min-width:992px) {
       .inc-grid {
           grid-template-columns: repeat(4, 1fr)
       }
   }

   .inc-item {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 12px;
       padding: 14px 16px;
       display: flex;
       gap: 10px;
       align-items: flex-start;
       font-size: 14px;
       color: var(--ink);
       transition: .2s
   }

   .inc-item i {
       color: var(--primary);
       margin-top: 3px
   }

   .inc-item:hover {
       border-color: var(--primary);
       background: rgba(11, 181, 172, .04)
   }

   /* Vertical phased timeline */
   .vt {
       position: relative;
       margin-top: 40px
   }

   .vt::before {
       content: "";
       position: absolute;
       left: 22px;
       top: 0;
       bottom: 0;
       width: 2px;
       background: linear-gradient(to bottom, transparent, rgba(11, 181, 172, .35), transparent)
   }

   @media(min-width:768px) {
       .vt::before {
           left: 50%;
           transform: translateX(-1px)
       }
   }

   .vt-item {
       position: relative;
       padding-left: 60px;
       margin-bottom: 28px
   }

   @media(min-width:768px) {
       .vt-item {
           width: 50%;
           padding-left: 0;
           padding-right: 40px
       }

       .vt-item:nth-child(even) {
           margin-left: 50%;
           padding-left: 40px;
           padding-right: 0
       }
   }

   .vt-dot {
       position: absolute;
       left: 6px;
       top: 4px;
       width: 34px;
       height: 34px;
       border-radius: 50%;
       background: linear-gradient(135deg, #0bb5ac, #0e8f88);
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       box-shadow: 0 6px 18px -6px rgba(11, 181, 172, .7);
       font-size: 13px
   }

   @media(min-width:768px) {
       .vt-item .vt-dot {
           left: auto;
           right: -17px
       }

       .vt-item:nth-child(even) .vt-dot {
           left: -17px;
           right: auto
       }
   }

   .vt-card {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 14px;
       padding: 20px 22px;
       box-shadow: var(--shadow-sm);
       transition: .25s
   }

   .vt-card:hover {
       transform: translateY(-3px);
       border-color: var(--primary);
       box-shadow: var(--shadow)
   }

   .vt-phase {
       font-size: 12px;
       letter-spacing: .12em;
       text-transform: uppercase;
       color: var(--primary);
       font-weight: 700
   }

   .vt-card h5 {
       margin: 6px 0 8px;
       color: var(--ink);
       font-size: 18px
   }

   .vt-card ul {
       padding-left: 18px;
       margin: 8px 0 10px;
       color: var(--muted);
       font-size: 14px
   }

   .vt-card ul li {
       margin-bottom: 2px
   }

   .vt-deliv {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       background: rgba(11, 181, 172, .08);
       color: var(--primary);
       border-radius: 999px;
       padding: 4px 10px;
       font-weight: 600;
       margin-top: 6px
   }

   /* Module chips */
   .mod-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 12px
   }

   @media(min-width:576px) {
       .mod-grid {
           grid-template-columns: repeat(3, 1fr)
       }
   }

   @media(min-width:768px) {
       .mod-grid {
           grid-template-columns: repeat(4, 1fr)
       }
   }

   @media(min-width:1200px) {
       .mod-grid {
           grid-template-columns: repeat(6, 1fr)
       }
   }

   .mod-tile {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 14px;
       padding: 18px 14px;
       text-align: center;
       transition: .25s;
       position: relative;
       overflow: hidden
   }

   .mod-tile::before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(11, 181, 172, .08), transparent);
       opacity: 0;
       transition: .3s
   }

   .mod-tile:hover {
       transform: translateY(-4px);
       border-color: var(--primary);
       box-shadow: var(--shadow)
   }

   .mod-tile:hover::before {
       opacity: 1
   }

   .mod-tile .mi {
       width: 40px;
       height: 40px;
       border-radius: 10px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       margin-bottom: 10px;
       position: relative;
       z-index: 1
   }

   .mod-tile span {
       position: relative;
       z-index: 1;
       font-weight: 600;
       color: var(--ink);
       font-size: 14px;
       display: block
   }

   /* Industry cards */
   .ind-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 14px
   }

   @media(min-width:768px) {
       .ind-grid {
           grid-template-columns: repeat(3, 1fr)
       }
   }

   @media(min-width:1200px) {
       .ind-grid {
           grid-template-columns: repeat(4, 1fr)
       }
   }

   .ind-card {
       background: #fff;
       border: 1px solid var(--line);
       border-radius: 14px;
       padding: 22px;
       text-align: center;
       transition: .25s
   }

   .ind-card:hover {
       border-color: var(--primary);
       transform: translateY(-4px);
       box-shadow: var(--shadow)
   }

   .ind-card .ii {
       width: 56px;
       height: 56px;
       border-radius: 14px;
       background: linear-gradient(135deg, rgba(11, 181, 172, .18), rgba(11, 181, 172, .05));
       color: var(--primary);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       margin-bottom: 12px
   }

   .ind-card h6 {
       margin: 0;
       color: var(--ink);
       font-size: 15px;
       font-weight: 600
   }

   /* Comparison */
   .cmp-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 18px
   }

   @media(min-width:768px) {
       .cmp-grid {
           grid-template-columns: 1fr auto 1fr;
           align-items: stretch
       }
   }

   .cmp-card {
       border-radius: 18px;
       padding: 26px;
       height: 100%
   }

   .cmp-bad {
       background: #fff7f6;
       border: 1px solid #f5d6d1
   }

   .cmp-good {
       background: linear-gradient(160deg, #0d1211, #0b2b29);
       color: #e9fdf9;
       border: 1px solid rgba(11, 181, 172, .35);
       box-shadow: 0 20px 60px -20px rgba(11, 181, 172, .35)
   }

   .cmp-card h4 {
       font-family: 'Fraunces', serif;
       font-style: italic;
       margin: 0 0 4px;
       font-size: 22px
   }

   .cmp-bad h4 {
       color: #8f2f22
   }

   .cmp-good h4 em {
       color: #5eead4
   }

   .cmp-card ul {
       list-style: none;
       padding: 0;
       margin: 16px 0 0
   }

   .cmp-card li {
       display: flex;
       gap: 10px;
       padding: 8px 0;
       font-size: 14.5px;
       border-top: 1px dashed rgba(0, 0, 0, .08)
   }

   .cmp-good li {
       border-top-color: rgba(255, 255, 255, .08);
       color: #dff9f4
   }

   .cmp-bad li i {
       color: #c94b3a;
       margin-top: 3px
   }

   .cmp-good li i {
       color: #5eead4;
       margin-top: 3px
   }

   .cmp-vs {
       align-self: center;
       justify-self: center;
       font-family: 'Fraunces', serif;
       font-style: italic;
       font-size: 28px;
       color: var(--muted);
       padding: 0 6px
   }

   /* KPI outcomes */
   .kpi-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 14px
   }

   @media(min-width:768px) {
       .kpi-grid {
           grid-template-columns: repeat(3, 1fr)
       }
   }

   @media(min-width:1200px) {
       .kpi-grid {
           grid-template-columns: repeat(4, 1fr)
       }
   }

   .kpi {
       /* background: #fff; */
       border: 1px solid var(--line);
       border-radius: 14px;
       padding: 20px;
       transition: .25s
   }

   .kpi:hover {
       transform: translateY(-3px);
       border-color: var(--primary);
       box-shadow: var(--shadow)
   }

   .kpi i {
       color: var(--primary);
       font-size: 18px;
       margin-bottom: 10px
   }

   .kpi h6 {
       margin: 0;
       font-size: 14px;
       font-weight: 600;
       color: var(--ink)
   }

   /* Final CTA */
   .fcta {
       position: relative;
       overflow: hidden;
       background: linear-gradient(160deg, #0a1414 0%, #0d2d2b 60%, #0a1414 100%);
       color: #e9fdf9;
       border-radius: 24px;
       padding: 60px 28px;
       text-align: center;
       margin-top: 20px
   }

   .fcta::before,
   .fcta::after {
       content: "";
       position: absolute;
       width: 420px;
       height: 420px;
       border-radius: 50%;
       filter: blur(90px);
       opacity: .55
   }

   .fcta::before {
       background: radial-gradient(circle, rgba(11, 181, 172, .7), transparent 65%);
       top: -140px;
       left: -120px
   }

   .fcta::after {
       background: radial-gradient(circle, rgba(94, 234, 212, .5), transparent 65%);
       bottom: -160px;
       right: -120px
   }

   .fcta h2 {
       font-family: 'Fraunces', serif;
       font-style: italic;
       font-weight: 500;
       font-size: clamp(28px, 4vw, 44px);
       margin: 0 0 12px;
       position: relative
   }

   .fcta p {
       position: relative;
       max-width: 640px;
       margin: 0 auto 24px;
       color: #c9ece5;
       font-size: 16px
   }

   .fcta .btns {
       position: relative;
       display: flex;
       gap: 12px;
       justify-content: center;
       flex-wrap: wrap
   }

   /* Odoo-inspired module gradients */
   .g-crm {
       background: linear-gradient(135deg, #a855f7, #7c3aed)
   }

   .g-sales {
       background: linear-gradient(135deg, #f43f5e, #e11d48)
   }

   .g-inv {
       background: linear-gradient(135deg, #f59e0b, #d97706)
   }

   .g-pur {
       background: linear-gradient(135deg, #0ea5e9, #0369a1)
   }

   .g-acc {
       background: linear-gradient(135deg, #10b981, #047857)
   }

   .g-mfg {
       background: linear-gradient(135deg, #6366f1, #4338ca)
   }

   .g-hr {
       background: linear-gradient(135deg, #ec4899, #be185d)
   }

   .g-pay {
       background: linear-gradient(135deg, #14b8a6, #0f766e)
   }

   .g-prj {
       background: linear-gradient(135deg, #8b5cf6, #6d28d9)
   }

   .g-hd {
       background: linear-gradient(135deg, #3b82f6, #1d4ed8)
   }

   .g-web {
       background: linear-gradient(135deg, #06b6d4, #0e7490)
   }

   .g-ec {
       background: linear-gradient(135deg, #f97316, #c2410c)
   }

   .g-pos {
       background: linear-gradient(135deg, #ef4444, #b91c1c)
   }

   .g-mnt {
       background: linear-gradient(135deg, #64748b, #334155)
   }

   .g-fs {
       background: linear-gradient(135deg, #22c55e, #15803d)
   }

   .g-pln {
       background: linear-gradient(135deg, #a3e635, #4d7c0f)
   }

   .g-doc {
       background: linear-gradient(135deg, #0284c7, #0c4a6e)
   }

   .g-kn {
       background: linear-gradient(135deg, #facc15, #a16207)
   }

   .g-mkt {
       background: linear-gradient(135deg, #e879f9, #a21caf)
   }

   .g-sub {
       background: linear-gradient(135deg, #2dd4bf, #0d9488)
   }

   .g-rnt {
       background: linear-gradient(135deg, #fb7185, #9f1239)
   }

   .g-qty {
       background: linear-gradient(135deg, #fde047, #ca8a04)
   }

   .g-plm {
       background: linear-gradient(135deg, #818cf8, #3730a3)
   }

   .g-std {
       background: linear-gradient(135deg, #1f2937, #111827)
   }


/*  */

.grid_mode{
        --grid-item-padding-y: 10px;
        --grid-item-padding-x: 10px;
}

.grid_mode .img-thumbnail {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
        background-color:#fff;
        border: 0 solid var(--border-color);
        border-radius: 0.625rem;
        max-width: 100%;
        height: auto;
}




@media (min-width: 992px) {
    .grid_mode {
        display: grid !important;
        grid-auto-rows: 50px;
        grid-template-columns: repeat(12, 1fr);
        row-gap: 0px;
        column-gap: 0px;
        --gutter-x: 0px;
    }
}


/* ============ MICROSOFT PAGE — SCOPED ADDITIONS ============ */
/* Centered immersive hero */
.ms-hero {
    position: relative;
    overflow: hidden;
    background: #0d1211;
    padding: 110px 0 90px;
    text-align: center
}

.ms-hero .orb {
    position: absolute;
    filter: blur(90px);
    border-radius: 50%;
    opacity: .55;
    pointer-events: none
}

.ms-hero .orb-a {
    width: 520px;
    height: 520px;
    left: -140px;
    top: -120px;
    background: radial-gradient(circle, rgba(11, 181, 172, .55), transparent 65%)
}

.ms-hero .orb-b {
    width: 560px;
    height: 560px;
    right: -180px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(56, 127, 255, .45), transparent 65%)
}

.ms-hero .orb-c {
    width: 380px;
    height: 380px;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 180, 80, .18), transparent 70%)
}

.ms-hero .grid-texture {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    opacity: .5
}

.ms-hero .container {
    position: relative;
    z-index: 2
}

.ms-hero .eyebrow-dark {
    justify-content: center;
    color: #000;
}

.ms-hero h1 {
    font-weight: 800;
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 14px auto 18px;
    max-width: 900px
}

.ms-hero h1 em {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    color: #0bb5ac;
    background: linear-gradient(90deg, #0bb5ac, #3fbaff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.ms-hero .lead-dark {
    color: #000;
    font-size: 1.06rem;
    max-width: 760px;
    margin: 0 auto 28px
}

.ms-hero .hero-cta {
    justify-content: center;
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.ms-hero .hero-points {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    justify-content: center;
        background: #fff;
            border-radius: 100px;
            padding: 30px;
}

.ms-hero .hero-points li {
    color: #000;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.ms-hero .hero-points i {
    color: #0bb5ac
}

/* Ecosystem constellation (SVG) */
.ms-ecosystem {
    position: relative;
    margin: 56px auto 0;
    max-width: 960px
}

.ms-ecosystem svg {
    width: 100%;
    height: auto;
    display: block
}

@keyframes floaty {

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

    50% {
        transform: translateY(-6px)
    }
}

.ms-ecosystem .node {
    animation: floaty 6s ease-in-out infinite
}

.ms-ecosystem .n2 {
    animation-delay: -1.5s
}

.ms-ecosystem .n3 {
    animation-delay: -3s
}

.ms-ecosystem .n4 {
    animation-delay: -4.5s
}

@keyframes dashmove {
    to {
        stroke-dashoffset: -40
    }
}

.ms-ecosystem .link {
    stroke: #0bb5ac;
    stroke-opacity: .45;
    stroke-width: 1.2;
    fill: none;
    stroke-dasharray: 4 6;
    animation: dashmove 5s linear infinite
}

.ms-ecosystem .pulse {
    transform-origin: center;
    transform-box: fill-box
}

@keyframes pulse {

    0%,
    100% {
        opacity: .35;
        r: 70
    }

    50% {
        opacity: .55;
        r: 80
    }
}

.ms-ecosystem .pulseC {
    animation: pulse 3.5s ease-in-out infinite
}

/* Trust technology platform */
.ms-trust {
    padding: 60px 0;
    background: #f7f9fa;
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05)
}

.ms-trust .ico-row {
    display: flex;
    justify-content: center;
    gap: 20px 40px;
    flex-wrap: wrap;
    margin-top: 24px
}

.ms-trust .ico-row .ic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #4e504f;
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    min-width: 82px
}

.ms-trust .ico-row .ic i {
    font-size: 1.6rem;
    color: #0bb5ac;
    background: #fff;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px -12px rgba(11, 181, 172, .5);
    border: 1px solid rgba(11, 181, 172, .15)
}

/* Why Microsoft cards */
.why-grid .why-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    padding: 26px;
    height: 100%;
    transition: .28s;
    box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .25)
}

.why-grid .why-card:hover {
    transform: translateY(-4px);
    border-color: #0bb5ac;
    box-shadow: 0 20px 40px -24px rgba(11, 181, 172, .35)
}

.why-grid .why-card i {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0bb5ac, #3fbaff);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 14px
}

.why-grid .why-card h5 {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: #0f1414
}

.why-grid .why-card p {
    color: #5a5f5e;
    font-size: .92rem;
    margin: 0
}

/* Cloud illustration (Why) */
.cloud-illust {
    position: relative;
    background: linear-gradient(135deg, #0f1414 0%, #132427 100%);
    border-radius: 24px;
    padding: 32px;
    overflow: hidden;
    min-height: 400px;
    color: #fff
}

.cloud-illust::before {
    content: "";
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle at 30% 20%, rgba(11, 181, 172, .35), transparent 55%), radial-gradient(circle at 80% 80%, rgba(63, 186, 255, .28), transparent 55%);
    opacity: .9
}

.cloud-illust .ci-inner {
    position: relative;
    z-index: 2
}

.cloud-illust .ci-hex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px
}

.cloud-illust .ci-tile {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: .25s
}

.cloud-illust .ci-tile:hover {
    border-color: #0bb5ac;
    transform: translateY(-3px)
}

.cloud-illust .ci-tile i {
    color: #0bb5ac;
    font-size: 1.4rem
}

.cloud-illust .ci-tile strong {
    font-size: .85rem;
    color: #fff
}

.cloud-illust .ci-tile span {
    font-size: .72rem;
    color: rgba(255, 255, 255, .6)
}

.cloud-illust .ci-h {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    color: #0bb5ac;
    font-size: 1.1rem;
    margin-bottom: 4px
}

.cloud-illust .ci-t {
    color: #fff;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.25
}

/* Ecosystem stack diagram */
.stack-diagram {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .2)
}

.stack-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 18px
}

.stack-tile {
    background: linear-gradient(135deg, rgba(11, 181, 172, .08), rgba(63, 186, 255, .06));
    border: 1px solid rgba(11, 181, 172, .2);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    font-weight: 600;
    color: #0f1414;
    font-size: .9rem;
    transition: .25s;
    position: relative
}

.stack-tile i {
    display: block;
    font-size: 1.3rem;
    color: #0bb5ac;
    margin-bottom: 6px
}

.stack-tile:hover {
    transform: translateY(-3px);
    border-color: #0bb5ac;
    box-shadow: 0 12px 28px -18px rgba(11, 181, 172, .5)
}

.stack-arrow {
    text-align: center;
    color: #0bb5ac;
    font-size: 1.2rem;
    margin: 2px 0 6px
}

/* Industry cards */
.ind-cards .ind-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    height: 100%;
    transition: .25s;
    box-shadow: 0 4px 18px -14px rgba(0, 0, 0, .2)
}

.ind-cards .ind-card:hover {
    transform: translateY(-4px);
    border-color: #0bb5ac;
    box-shadow: 0 14px 30px -20px rgba(11, 181, 172, .4)
}

.ind-cards .ind-card i {
    font-size: 1.7rem;
    color: #0bb5ac;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(11, 181, 172, .12), rgba(63, 186, 255, .08));
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px
}

.ind-cards .ind-card h6 {
    font-weight: 700;
    color: #0f1414;
    margin: 0;
    font-size: .95rem
}

/* Vertical process timeline (8 steps) */
.ms-timeline {
    position: relative;
    padding: 20px 0;
    max-width: 920px;
    margin: 0 auto
}

.ms-timeline::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(11, 181, 172, .4), rgba(63, 186, 255, .4), transparent)
}

@media (min-width:768px) {
    .ms-timeline::before {
        left: 50%
    }
}

.ms-tl-item {
    position: relative;
    padding-left: 64px;
    margin-bottom: 26px
}

@media (min-width:768px) {
    .ms-tl-item {
        width: 50%;
        padding-left: 0;
        padding-right: 44px;
        text-align: right
    }

    .ms-tl-item:nth-child(even) {
        margin-left: 50%;
        padding-left: 44px;
        padding-right: 0;
        text-align: left
    }
}

.ms-tl-dot {
    position: absolute;
    left: 16px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0bb5ac, #3fbaff);
    box-shadow: 0 0 0 4px rgba(11, 181, 172, .15)
}

@media (min-width:768px) {
    .ms-tl-item .ms-tl-dot {
        left: auto;
        right: -9px
    }

    .ms-tl-item:nth-child(even) .ms-tl-dot {
        left: -9px;
        right: auto
    }
}

.ms-tl-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 6px 22px -18px rgba(0, 0, 0, .25);
    transition: .25s;
    display: inline-block
}

.ms-tl-card:hover {
    border-color: #0bb5ac;
    transform: translateY(-2px)
}

.ms-tl-card .num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: #0bb5ac;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .05em
}

.ms-tl-card h5 {
    margin: 2px 0 6px;
    color: #0f1414;
    font-weight: 700;
    font-size: 1.05rem
}

.ms-tl-card p {
    color: #5a5f5e;
    font-size: .9rem;
    margin: 0
}

/* Benefits mini-grid */
.bnf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px
}

.bnf-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: .2s
}

.bnf-item:hover {
    border-color: #0bb5ac;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -18px rgba(11, 181, 172, .4)
}

.bnf-item i {
    color: #0bb5ac;
    font-size: 1.05rem;
    margin-top: 2px
}

.bnf-item span {
    font-weight: 600;
    color: #0f1414;
    font-size: .88rem;
    line-height: 1.3
}

/* Technology icon grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px
}

.tech-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    padding: 20px 12px;
    text-align: center;
    transition: .25s;
    box-shadow: 0 4px 16px -14px rgba(0, 0, 0, .2)
}

.tech-card:hover {
    transform: translateY(-3px);
    border-color: #0bb5ac;
    box-shadow: 0 12px 26px -18px rgba(11, 181, 172, .4)
}

.tech-card i {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #0bb5ac, #3fbaff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0bb5ac;
    margin-bottom: 8px
}

.tech-card span {
    display: block;
    font-weight: 600;
    color: #0f1414;
    font-size: .85rem
}

/* Reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease
}

.reveal.is-in {
    opacity: 1;
    transform: none
}

/* AI Automation */
.hero canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.hud-panels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.hud-panel {
    position: absolute;
    pointer-events: auto;
    animation: float-hud 6s ease infinite;
}
.hud-panel:nth-child(1) {
    top: 20%;
    left: 0;
    animation-delay: 0s;
    width: 200px;
}
.hud-panel:nth-child(2) {
    top: 24%;
    right: 0;
    animation-delay: 1s;
    width: 220px;
}
.hud-panel:nth-child(3) {
    bottom: 18%;
    left: 6%;
    animation-delay: 2s;
    width: 210px;
}
.hud-panel:nth-child(4) {
    bottom: 12%;
    right: 4%;
    animation-delay: .5s;
    width: 190px;
}
.hud-panel:nth-child(5) {
    top: 45%;
    left: 2%;
    animation-delay: 1.5s;
    width: 180px;
}
.glass {
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hud-panel-inner {
    padding: 16px;
}
.hud-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.hud-panel-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}
.hud-panel-icon.violet {
    background: rgba(124, 58, 237, .15);
    color: var(--neural-violet);
}
.hud-panel-icon.cyan {
    background: rgba(11, 181, 172, .15);
    color: var(--primary);
}
.hud-panel-icon.purple {
    background: rgba(79, 70, 229, .15);
    color: var(--data-purple);
}
.hud-panel-title {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-white);
}
.hud-panel-sub {
    font-size: .65rem;
    color: var(--muted-light);
}
.hud-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    margin: 8px 0;
}
.hud-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--data-purple));
    animation: bar-grow 3s ease infinite;
}
.hud-metric {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--muted-light);
    margin: 4px 0;
}
.hud-metric span:last-child {
    color: var(--primary);
    font-weight: 600;
}
.hud-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 32px;
    margin-top: 8px;
}
.hud-chart .bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: rgba(11, 181, 172, .3);
    animation: chart-bounce 2s ease infinite;
}

/* Ecosystem */

.ecosystem-wrap {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.ecosystem-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.ecosystem-center {
    position: relative;
    z-index: 3;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: radial-gradient(circle, rgba(124, 58, 237, .3) 0%, rgba(79, 70, 229, .15) 60%, transparent 100%);
    border: 1px solid rgba(124, 58, 237, .4);
    box-shadow: 0 0 60px rgba(124, 58, 237, .3), inset 0 0 30px rgba(124, 58, 237, .15);
    text-align: center;
}
.ecosystem-center::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, .2);
    animation: ring-expand 3s ease infinite;
}

@keyframes ring-expand {
    50% {
        transform: scale(1.15);
        opacity: .3;
    }
}
.ecosystem-center i {
    font-size: 2rem;
    color: var(--neural-violet);
    margin-bottom: 8px;
}

.ecosystem-center span {
    font-family: var(--display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink-white);
}

.ecosystem-nodes {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.eco-node {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(17, 24, 39, .7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: all .4s var(--ease);
    text-align: center;
}
.eco-node:hover {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(11, 181, 172, .3);
    transform: scale(1.08);
}
.eco-node[data-pos="1"] {
    top: 14%;
    left: 45%;
}
.eco-node[data-pos="2"] {
        top: 19%;
            right: 16%;
}
.eco-node[data-pos="3"] {

    top: 42%;
        right: 6%;
}
.eco-node[data-pos="4"] {
    bottom: 19%;
        right: 16%;
}
.eco-node[data-pos="5"] {
    bottom: 14%;
    left: 45%; 
}
.eco-node[data-pos="6"] {
    bottom: 18%;
        left: 16%;
}
.eco-node[data-pos="7"] {
    top: 42%;
    left: 6%;
}
.eco-node[data-pos="8"] {
        top: 19%;
            left: 17%;
}
.eco-node i {
    font-size: 1.3rem;
    color: var(--pulse-cyan);
    margin-bottom: 6px;
}
.eco-node span {
    font-size: .72rem;
    font-weight: 500;
    color: var(--ink-white);
}
.eco-tooltip {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5, 7, 10, .95);
    border: 1px solid rgba(11, 181, 172, .3);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .72rem;
    color: var(--ink-white);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    z-index: 10;
}

.eco-node:hover .eco-tooltip {
    opacity: 1;
}

@keyframes float-hud {
    /* 0%, 100% { transform: translateY(0); } */
    50% { transform: translateY(-18px); }
}

@keyframes bar-grow {
    0% { width: 20%; }
    50% { width: 85%; }
    100% { width: 20%; }
}

@keyframes chart-bounce {
    50% { transform: scaleY(1.3); transform-origin: bottom; }
}
/* Ai Automation End */



/* ===== Page-scoped styles: Software Engineering ===== */
.se-eyebrow-row {
    display: flex;
    justify-content: center;
    margin-bottom: 12px
}

.se-cycle-wrap {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .35em
}

.se-cycle {
    display: inline-block;
    min-width: 11ch;
    color: #0bb5ac;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    position: relative
}

.se-cycle::after {
    content: "|";
    margin-left: 2px;
    color: #0bb5ac;
    animation: se-caret 1s steps(1) infinite;
    font-style: normal;
    font-weight: 400
}

@keyframes se-caret {
    50% {
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .se-cycle::after {
        animation: none
    }
}

.se-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem
}

.se-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(11, 181, 172, .35);
    background: rgba(11, 181, 172, .06);
    color: #e6f6f4;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease
}

.se-chip:hover,
.se-chip:focus {
    background: rgba(11, 181, 172, .16);
    border-color: #0bb5ac;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px)
}

.se-chip i {
    color: #0bb5ac;
    font-size: .75rem
}

/* Code editor mockup */
.code-mock {
    border-radius: 14px;
    overflow: hidden;
    background: #0b1013;
    border: 1px solid rgba(11, 181, 172, .22);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .02) inset
}

.cm-chrome {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    background: #0f1618;
    border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.cm-chrome .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2a3438
}

.cm-chrome .dot.r {
    background: #ff5f57
}

.cm-chrome .dot.y {
    background: #febc2e
}

.cm-chrome .dot.g {
    background: #28c840
}

.cm-chrome em {
    margin-left: auto;
    font-style: normal;
    color: #7c9a97;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem
}

.cm-tabs {
    display: flex;
    background: #0d1416;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    padding: 0 .35rem;
    overflow-x: auto
}

.cm-tab {
    padding: .55rem .85rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    color: #6d8582;
    border-right: 1px solid rgba(255, 255, 255, .04);
    cursor: default;
    white-space: nowrap;
    border-bottom: 2px solid transparent
}

.cm-tab.active {
    color: #e8f7f5;
    background: #0b1013;
    border-bottom-color: #0bb5ac
}

.cm-body {
    padding: 1rem 1.1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem;
    line-height: 1.65;
    color: #c7d6d3;
    min-height: 220px;
    background: #0b1013;
    position: relative;
    overflow: hidden
}

.cm-line {
    display: block;
    white-space: pre;
    color: #8fa5a2
}

.cm-ln {
    display: inline-block;
    width: 2ch;
    color: #3d5654;
    user-select: none;
    margin-right: 1rem;
    text-align: right
}

.tk-kw {
    color: #0bb5ac;
    font-weight: 600
}

.tk-fn {
    color: #7dd3fc
}

.tk-str {
    color: #f6a96b
}

.tk-com {
    color: #4a6764;
    font-style: italic
}

.tk-num {
    color: #e879f9
}

.tk-var {
    color: #e2ecea
}

.cm-terminal {
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding: .75rem 1rem;
    background: #080c0d;
    font-family: 'JetBrains Mono', monospace;
    font-size: .74rem;
    color: #9fb8b5;
    min-height: 120px
}

.cm-terminal .prompt {
    color: #0bb5ac
}

.cm-terminal .ok {
    color: #28c840
}

.cm-terminal .log-line {
    opacity: 0;
    transform: translateY(4px);
    transition: all .35s ease
}

.cm-terminal .log-line.in {
    opacity: 1;
    transform: translateY(0)
}

.cm-git {
    position: absolute;
    right: .9rem;
    top: .75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .66rem;
    color: #5f7c79;
    background: rgba(11, 181, 172, .05);
    border: 1px solid rgba(11, 181, 172, .15);
    padding: .25rem .5rem;
    border-radius: 6px
}

/* Partner strip (slim) */
.se-partner-strip {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: rgba(11, 181, 172, .04);
    border: 1px solid rgba(11, 181, 172, .18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: space-between
}

.se-partner-strip .pl {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center
}

.se-partner-strip .pb {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #d7ecea;
    font-weight: 600;
    font-size: .85rem
}

.se-partner-strip .pb i {
    color: #0bb5ac
}

.se-partner-strip p {
    margin: 0;
    color: #93a9a6;
    font-size: .85rem
}

/* Capability cards */
.cap-card {
    position: relative;
    padding: 1.75rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(15, 20, 20, .08);
    height: 100%;
    transition: all .25s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

/* .section:not(.section-light) .cap-card,
.hero-dark .cap-card,
.final-cta .cap-card {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
    color: #dbe9e7
} */

.cap-card:hover {
    transform: translateY(-4px);
    border-color: #0bb5ac;
    box-shadow: 0 20px 40px -20px rgba(11, 181, 172, .35)
}

.cap-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0bb5ac, #0a7e7a);
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 1rem
}

.cap-card h4 {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    margin-bottom: .6rem
}

.cap-card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1rem;
    font-size: .9rem
}

.cap-card ul li {
    position: relative;
    padding: .3rem 0 .3rem 1.5rem;
    color: inherit;
    opacity: .9
}

.cap-card ul li::before {
    content: "›";
    position: absolute;
    left: .35rem;
    top: .3rem;
    color: #0bb5ac;
    font-weight: 800
}

.cap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(11, 181, 172, .25)
}

.cap-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: rgba(11, 181, 172, .09);
    color: #0a7e7a;
    border: 1px solid rgba(11, 181, 172, .2)
}



@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tech-grid-Technology {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(157px, 1fr));
    gap: .75rem
}

.tech-badge {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid rgba(15, 20, 20, .08);
    border-radius: 12px;
    font-weight: 600;
    font-size: .88rem;
    transition: all .2s ease
}

.tech-badge:hover {
    transform: translateY(-2px);
    border-color: #0bb5ac;
    box-shadow: 0 10px 20px -12px rgba(11, 181, 172, .35)
}

.tech-badge i {
    color: #0bb5ac;
    font-size: 1.05rem;
    width: 20px;
    text-align: center
}

/* Process timeline (terminal-style) */
.se-process {
    margin-top: 2rem;
    border-radius: 16px;
    background: #0b1013;
    border: 1px solid rgba(11, 181, 172, .2);
    padding: 1.5rem;
    font-family: 'JetBrains Mono', monospace
}

.se-proc-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px dashed rgba(11, 181, 172, .12);
    transition: background .2s ease
}

.se-proc-item:last-child {
    border-bottom: 0
}

.se-proc-item:hover {
    background: rgba(11, 181, 172, .03)
}

.se-proc-num {
    color: #0bb5ac;
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap
}

.se-proc-body h5 {
    font-family: 'Fraunces', serif;
    font-style: normal;
    color: #e8f7f5;
    font-size: 1.15rem;
    margin: 0 0 .3rem
}

.se-proc-body p {
    margin: 0;
    color: #93a9a6;
    font-family: 'Inter', sans-serif;
    font-size: .9rem
}

/* Engagement models */
.eng-card {
    padding: 1.5rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 20, 20, .08);
    height: 100%;
    transition: all .2s ease
}

.eng-card:hover {
    transform: translateY(-3px);
    border-color: #0bb5ac;
    box-shadow: 0 15px 30px -15px rgba(11, 181, 172, .3)
}

.eng-card h5 {
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    color: #0f1414;
    margin-bottom: .35rem
}

.eng-card .best-for {
    display: inline-block;
    font-size: .75rem;
    color: #0a7e7a;
    background: rgba(11, 181, 172, .1);
    padding: .2rem .55rem;
    border-radius: 6px;
    font-weight: 700;
    margin-bottom: .85rem;
    letter-spacing: .02em;
    text-transform: uppercase
}

.eng-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .88rem;
    color: #4a5654
}

.eng-card ul li {
    padding: .25rem 0 .25rem 1.2rem;
    position: relative
}

.eng-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0bb5ac;
    font-weight: 700
}

/* Why AXAT (icon row) */
.se-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem
}

.se-why-item {
    display: flex;
    gap: .9rem;
    padding: 1.1rem;
    background: rgba(11, 181, 172, .04);
    border-left: 3px solid #0bb5ac;
    border-radius: 10px
}

.se-why-item i {
    color: #0bb5ac;
    font-size: 1.25rem;
    margin-top: .2rem;
    flex-shrink: 0
}

.se-why-item strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    color: #0f1414;
    margin-bottom: .2rem
}

.se-why-item span {
    color: #4a5654;
    font-size: .88rem;
    line-height: 1.5
}

/* Case study cards */
.case-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 20, 20, .08);
    height: 100%;
    transition: all .25s ease;
    display: flex;
    flex-direction: column
}

.case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .15)
}

.case-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #0f1414, #153230);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(11, 181, 172, .5);
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem;
    position: relative;
    overflow: hidden
}

.case-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(11, 181, 172, .35), transparent 55%)
}

.case-thumb span {
    position: relative;
    z-index: 1;
    padding: .35rem .7rem;
    border: 1px dashed rgba(11, 181, 172, .4);
    border-radius: 6px;
    background: rgba(0, 0, 0, .3)
}

.case-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column
}

.case-body .tag {
    font-size: .72rem;
    color: #0a7e7a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .35rem
}

.case-body h5 {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    margin-bottom: .5rem;
    color: #0f1414
}

.case-body p {
    color: #4a5654;
    font-size: .9rem;
    flex: 1
}

.case-body a {
    margin-top: .75rem;
    color: #0a7e7a;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none
}

.case-body a:hover {
    color: #0bb5ac
}

/* Responsive */
@media (max-width: 767px) {
    .cm-body {
        font-size: .7rem;
        padding: .75rem
    }

    .cm-terminal {
        font-size: .68rem
    }

    .se-cycle {
        min-width: auto;
        display: block
    }

    .se-cycle-wrap {
        flex-direction: column;
        gap: 0;
        align-items: flex-start
    }

        .se-cycle {
            display: inline-block;
            min-width: 11ch;
            color: #0bb5ac;
            font-family: 'Fraunces', serif;
            font-style: italic;
            font-weight: 500;
            position: relative;
        }

    .se-partner-strip {
        flex-direction: column;
        align-items: flex-start
    }
}

@media (prefers-reduced-motion: reduce) {
    .cm-terminal .log-line {
        opacity: 1;
        transform: none;
        transition: none
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}


/* ===== Page-scoped: Cloud Solutions ===== */
.cl-hero {
    position: relative;
    overflow: hidden
}

.cl-hero .hero-inner {
    position: relative;
    z-index: 3;
    text-align: center;
    padding-top: 20px
}

.cl-hero h1 {
    max-width: 960px;
    margin: 0 auto
}

.cl-hero .lead-dark {
    margin: 20px auto 30px
}

.cl-italic {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    color: #0bb5ac
}

/* Cinematic cloud ecosystem SVG */
.cl-eco {
    position: relative;
    max-width: 1080px;
    margin: 36px auto 0;
    aspect-ratio: 16/8;
    border-radius: 22px;
    background: radial-gradient(1000px 500px at 50% 40%, rgba(11, 181, 172, .18), rgba(11, 181, 172, 0) 60%);
}

.cl-eco svg {
    width: 100%;
    height: 100%;
    display: block
}

.cl-path {
    stroke: rgba(11, 181, 172, .55);
    stroke-width: 1.2;
    fill: none;
    stroke-dasharray: 4 6;
    animation: cl-dash 6s linear infinite
}

@keyframes cl-dash {
    to {
        stroke-dashoffset: -120
    }
}

.cl-node {
    fill: #0b1013;
    stroke: rgba(11, 181, 172, .5);
    stroke-width: 1.2
}

.cl-node-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    fill: #c7dedb
}

.cl-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: cl-pulse 3s ease-in-out infinite
}

@keyframes cl-pulse {

    0%,
    100% {
        opacity: .35;
        r: 6
    }

    50% {
        opacity: .9;
        r: 9
    }
}

@media (prefers-reduced-motion: reduce) {

    .cl-path,
    .cl-pulse {
        animation: none
    }
}

.cl-trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 960px;
    margin: 32px auto 0
}

@media(min-width:768px) {
    .cl-trust {
        grid-template-columns: repeat(5, 1fr)
    }
}

.cl-trust .item {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(11, 181, 172, .18);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    color: #dbe9e7;
    font-weight: 600;
    font-size: .88rem
}

.cl-trust .item i {
    color: #0bb5ac;
    display: block;
    font-size: 1.2rem;
    margin-bottom: 6px
}

/* Transformation comparison */
.cl-transform {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 36px
}

@media(min-width:900px) {
    .cl-transform {
        grid-template-columns: 1fr 60px 1fr;
        align-items: stretch
    }
}

.cl-tcard {
    background: #fff;
    border: 1px solid rgba(15, 20, 20, .08);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 20px 40px -30px rgba(15, 20, 20, .15)
}

.cl-tcard.legacy {
    border-top: 4px solid #b8c2c2
}

.cl-tcard.modern {
    border-top: 4px solid #0bb5ac;
    background: linear-gradient(180deg, #f4fbfa, #fff)
}

.cl-tcard h4 {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    margin-bottom: 14px
}

.cl-tcard ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.cl-tcard li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: .95rem;
    color: #3d4747;
    border-bottom: 1px dashed rgba(15, 20, 20, .06)
}

.cl-tcard li:last-child {
    border-bottom: 0
}

.cl-tcard.legacy li::before {
    content: "\f057";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 8px;
    color: #b8c2c2
}

.cl-tcard.modern li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 8px;
    color: #0bb5ac
}

.cl-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0bb5ac;
    font-size: 1.6rem
}

@media(max-width:899px) {
    .cl-arrow {
        transform: rotate(90deg);
        padding: 6px 0
    }
}

/* Multi-cloud ecosystem diagram */
.cl-ecoring {
    position: relative;
    max-width: 820px;
    margin: 32px auto;
    aspect-ratio: 1/1
}

.cl-ecoring svg {
    width: 100%;
    height: 100%
}

.cl-ring-center {
    fill: url(#clG1);
    stroke: #0bb5ac;
    stroke-width: 1.5
}

.cl-ring-node {
    fill: #fff;
    stroke: rgba(11, 181, 172, .4);
    stroke-width: 1.2
}

.cl-ring-node-lbl {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    fill: #0f1414;
    text-anchor: middle
}

.cl-ring-center-lbl {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 16px;
    fill: #0f1414;
    text-anchor: middle
}

.cl-ring-line {
    stroke: rgba(11, 181, 172, .35);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    animation: cl-dash 8s linear infinite
}

/* Roadmap: vertical alternating */
.cl-road {
    position: relative;
    margin: 32px auto 0;
    max-width: 960px
}

.cl-road::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(11, 181, 172, .05), #0bb5ac 20%, #0bb5ac 80%, rgba(11, 181, 172, .05))
}

@media(min-width:900px) {
    .cl-road::before {
        left: 50%;
        transform: translateX(-1px)
    }
}

.cl-step {
    position: relative;
    padding: 0 0 32px 68px
}

@media(min-width:900px) {
    .cl-step {
        width: 50%;
        padding: 0 40px 40px 0
    }

    .cl-step:nth-child(even) {
        margin-left: 50%;
        padding: 0 0 40px 40px;
        text-align: left
    }

    .cl-step:nth-child(odd) {
        text-align: right
    }
}

.cl-step .cl-dot {
    position: absolute;
    left: 12px;
    top: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0bb5ac;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 800;
    box-shadow: 0 0 0 6px rgba(11, 181, 172, .15)
}

@media(min-width:900px) {
    .cl-step .cl-dot {
        left: auto;
        right: -13px
    }

    .cl-step:nth-child(even) .cl-dot {
        left: -13px;
        right: auto
    }
}

.cl-step h5 {
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    margin: 0 0 6px
}

.cl-step p {
    color: #546260;
    font-size: .93rem;
    margin: 0
}

/* Capability grid (small tiles) */
.cl-cap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px
}

@media(min-width:600px) {
    .cl-cap-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(min-width:900px) {
    .cl-cap-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.cl-cap-tile {
    background: #fff;
    border: 1px solid rgba(15, 20, 20, .08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all .2s ease
}

.cl-cap-tile:hover {
    border-color: #0bb5ac;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -18px rgba(11, 181, 172, .35)
}

.cl-cap-tile i {
    color: #0bb5ac;
    font-size: 1.1rem;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(11, 181, 172, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.cl-cap-tile span {
    font-size: .86rem;
    font-weight: 600;
    color: #0f1414;
    line-height: 1.3
}

/* Industry cards */
.cl-ind-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 24px
}

@media(min-width:768px) {
    .cl-ind-grid {
        grid-template-columns: repeat(5, 1fr)
    }
}

.cl-ind {
    background: #fff;
    border: 1px solid rgba(15, 20, 20, .08);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    transition: all .2s ease
}

.cl-ind i {
    color: #0bb5ac;
    font-size: 1.4rem;
    margin-bottom: 10px
}

.cl-ind h6 {
    font-size: .95rem;
    margin: 0 0 4px;
    font-weight: 700
}

.cl-ind p {
    font-size: .78rem;
    color: #68746f;
    margin: 0
}

.cl-ind:hover {
    border-color: #0bb5ac;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -20px rgba(11, 181, 172, .35)
}

/* Tech ecosystem badges */
.cl-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 24px
}

.cl-tech .b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(15, 20, 20, .08);
    font-weight: 600;
    font-size: .85rem;
    color: #0f1414;
    transition: all .2s ease
}

.cl-tech .b i {
    color: #0bb5ac
}

.cl-tech .b:hover {
    border-color: #0bb5ac;
    background: rgba(11, 181, 172, .04)
}

/* Outcomes */
.cl-out-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px
}

@media(min-width:768px) {
    .cl-out-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(min-width:1000px) {
    .cl-out-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.cl-out {
    background: linear-gradient(180deg, #fff, #f8fbfb);
    border: 1px solid rgba(11, 181, 172, .15);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.cl-out i {
    color: #0bb5ac;
    font-size: 1rem;
    margin-top: 2px
}

.cl-out span {
    font-size: .86rem;
    font-weight: 600;
    color: #0f1414
}

/* Security block */
.cl-sec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px
}

@media(min-width:900px) {
    .cl-sec-grid {
        grid-template-columns: repeat(5, 1fr)
    }
}

.cl-sec {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(11, 181, 172, .2);
    border-radius: 12px;
    padding: 16px;
    color: #dbe9e7
}

.cl-sec i {
    color: #0bb5ac;
    font-size: 1.1rem;
    margin-bottom: 8px;
    display: block
}

.cl-sec h6 {
    color: #fff;
    font-size: .9rem;
    margin: 0 0 4px
}

.cl-sec p {
    font-size: .78rem;
    color: #93a9a6;
    margin: 0
}

/* Service cards use existing .cap-card pattern */
.cl-svc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.cl-svc-brand {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em
}

.cl-svc-brand.azure {
    background: rgba(0, 120, 212, .1);
    color: #0078d4;
    border: 1px solid rgba(0, 120, 212, .3)
}

.cl-svc-brand.aws {
    background: rgba(255, 153, 0, .1);
    color: #c47500;
    border: 1px solid rgba(255, 153, 0, .3)
}

.cl-svc-brand.teal {
    background: rgba(11, 181, 172, .1);
    color: #0a7e7a;
    border: 1px solid rgba(11, 181, 172, .3)
}


/* ============ CASE STUDIES – scoped ============ */
.cs-hero{position:relative;overflow:hidden;background:#0b1220;color:#e5edf7;padding:120px 0 90px}
.cs-hero .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.cs-hero .orb.o1{width:520px;height:520px;background:radial-gradient(circle,#0bb5ac 0%,transparent 70%);top:-160px;left:-120px}
.cs-hero .orb.o2{width:460px;height:460px;background:radial-gradient(circle,#1f6feb 0%,transparent 70%);bottom:-180px;right:-140px;opacity:.4}
.cs-hero .grid-tex{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,black 40%,transparent 80%)}
.cs-hero .container{position:relative;z-index:2}
.cs-hero .eyebrow{color:#7ff0e8}
.cs-hero h1{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:14px 0 18px;color:#fff}
.cs-hero h1 em{font-family:'Fraunces',serif;font-style:italic;color:#0bb5ac;font-weight:600}
.cs-hero .lead-text{color:#b5c2d3;max-width:720px;font-size:1.08rem}
.cs-hero p.small-note{color:#8a9ab1;max-width:720px;margin-top:14px;font-size:.95rem}
.cs-hero .hero-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.cs-hero .btn-outline-axat{border-color:rgba(255,255,255,.25);color:#fff}
.cs-hero .btn-outline-axat:hover{background:rgba(255,255,255,.08);color:#fff}

/* floating dashboard collage */
.cs-collage{position:relative;height:440px;margin-top:20px}
.cs-collage .tile{position:absolute;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);backdrop-filter:blur(6px);padding:14px;color:#e5edf7;font-size:.78rem}
.cs-collage .tile .h{display:flex;align-items:center;gap:8px;font-weight:600;color:#fff;margin-bottom:10px}
.cs-collage .tile .h i{color:#0bb5ac}
.cs-collage .tile .kpi{font-family:'Fraunces',serif;font-style:italic;font-size:1.5rem;color:#7ff0e8;line-height:1}
.cs-collage .tile .bar{height:6px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin:6px 0}
.cs-collage .tile .bar > i{display:block;height:100%;background:linear-gradient(90deg,#0bb5ac,#7ff0e8);border-radius:4px}
.cs-collage .tile.t1{top:0;left:4%;width:44%;animation:float1 8s ease-in-out infinite}
.cs-collage .tile.t2{top:16%;right:2%;width:42%;animation:float1 9s ease-in-out infinite reverse}
.cs-collage .tile.t3{bottom:0;left:16%;width:52%;animation:float1 10s ease-in-out infinite}
.cs-collage .connect{position:absolute;inset:0;pointer-events:none}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Filter chips */
.cs-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cs-chip{border:1px solid var(--border,#e6ebf2);background:#fff;color:#333;padding:8px 14px;border-radius:999px;font-size:.86rem;font-weight:500;cursor:pointer;transition:all .2s}
.cs-chip:hover{border-color:#0bb5ac;color:#0bb5ac}
.cs-chip.is-active{background:#0bb5ac;color:#fff;border-color:#0bb5ac;box-shadow:0 6px 16px -8px rgba(11,181,172,.6)}
.cs-filter-block{background:#f7fafc;border:1px solid #eef2f6;border-radius:16px;padding:20px 22px}
.cs-filter-block h6{font-weight:700;font-size:.95rem;margin:0}

/* Featured cards */
.cs-featured{display:grid;gap:24px}
.cs-feat-card{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid #eef2f6;border-radius:20px;overflow:hidden;box-shadow:0 20px 40px -30px rgba(20,30,60,.25);transition:transform .3s,box-shadow .3s}
.cs-feat-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(20,30,60,.35)}
.cs-feat-card .img{position:relative;min-height:280px;background:linear-gradient(135deg,#0f172a,#0bb5ac)}
.cs-feat-card .img .mock{position:absolute;inset:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px;color:#eaf6f5;backdrop-filter:blur(6px)}
.cs-feat-card .img .mock .row1{display:flex;justify-content:space-between;font-size:.72rem;opacity:.8}
.cs-feat-card .img .mock .big{font-family:'Fraunces',serif;font-style:italic;font-size:2.4rem;color:#7ff0e8;line-height:1;margin-top:16px}
.cs-feat-card .img .mock .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px}
.cs-feat-card .img .mock .grid > div{background:rgba(255,255,255,.06);border-radius:8px;padding:8px;font-size:.68rem}
.cs-feat-card .body{padding:28px 30px;display:flex;flex-direction:column}
.cs-feat-card .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cs-feat-card .tag{background:#eefbfa;color:#0a8f88;border-radius:6px;padding:4px 10px;font-size:.72rem;font-weight:600}
.cs-feat-card .tag.ind{background:#f2f5fb;color:#3f5988}
.cs-feat-card .featured-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#0bb5ac,#0a8f88);color:#fff;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:600;margin-bottom:12px;width:fit-content}
.cs-feat-card h3{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.cs-feat-card .challenge{color:#5a6b81;font-size:.9rem;margin:0 0 14px}
.cs-feat-card .outcome{background:#f8fbfd;border-left:3px solid #0bb5ac;padding:12px 14px;border-radius:8px;margin-bottom:16px}
.cs-feat-card .outcome strong{color:#0a8f88;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;display:block;margin-bottom:4px}
.cs-feat-card .stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.cs-feat-card .stack span{background:#fff;border:1px solid #e6ebf2;color:#4a5c78;padding:3px 9px;border-radius:6px;font-size:.72rem;font-weight:500}
.cs-feat-card .cta-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.cs-feat-card .read{color:#0a8f88;font-weight:600;font-size:.9rem;text-decoration:none}
.cs-feat-card .read i{transition:transform .2s}
.cs-feat-card:hover .read i{transform:translateX(4px)}
.cs-feat-card div.img img{
        height: 100%;
            object-fit: cover;
            object-position: right;
            width: 100%;
}
@media (max-width:768px){.cs-feat-card{grid-template-columns:1fr}.cs-feat-card .img{min-height:200px}}

/* Case study grid */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cs-card{background:#fff;border:1px solid #eef2f6;border-radius:18px;overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.cs-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -25px rgba(20,30,60,.3);border-color:#c9efec}
.cs-card .thumb{height:170px;background:linear-gradient(135deg,var(--tc1,#0f172a),var(--tc2,#0bb5ac));position:relative;overflow:hidden}
.cs-card .thumb i{position:absolute;bottom:14px;right:16px;font-size:2.6rem;color:rgba(255,255,255,.35)}
.cs-card .thumb .thumb-title{position:absolute;top:14px;left:16px;color:#fff;font-weight:700;font-size:.9rem;opacity:.92}
.cs-card .body{padding:18px 20px;display:flex;flex-direction:column;flex:1}
.cs-card .row-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cs-card .row-meta span{font-size:.68rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#758ba8}
.cs-card h4{font-size:1.05rem;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
.cs-card .desc{color:#5a6b81;font-size:.86rem;margin:0 0 12px;flex:1}
.cs-card .kpi-row{display:flex;justify-content:space-between;border-top:1px solid #eef2f6;padding-top:12px;margin-top:8px;font-size:.75rem;color:#4a5c78}
.cs-card .kpi-row strong{color:#0a8f88;display:block;font-family:'Fraunces',serif;font-style:italic;font-size:1.05rem}
.cs-card .stack-mini{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px}
.cs-card .stack-mini span{background:#f6f9fb;color:#4a5c78;padding:2px 8px;border-radius:5px;font-size:.68rem}
.cs-card .read{color:#0a8f88;font-weight:600;font-size:.85rem;text-decoration:none;margin-top:30px}
@media (max-width:992px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cs-grid{grid-template-columns:1fr}}


/* Delivery framework roadmap */
.cs-roadmap{position:relative;display:grid;grid-template-columns:repeat(9,1fr);gap:12px;margin-top:32px}
.cs-roadmap::before{content:"";position:absolute;top:34px;left:5%;right:5%;height:2px;background:linear-gradient(90deg,transparent,#0bb5ac 15%,#0bb5ac 85%,transparent);z-index:0}
.rm-step{position:relative;z-index:1;text-align:center}
.rm-step .num{width:70px;height:70px;border-radius:50%;background:#fff;border:2px solid #0bb5ac;color:#0a8f88;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-family:'Fraunces',serif;font-style:italic;font-size:1.4rem;box-shadow:0 10px 24px -12px rgba(11,181,172,.5)}
.rm-step h6{font-size:.85rem;font-weight:700;margin:0 0 4px}
.rm-step p{font-size:.72rem;color:#758ba8;margin:0}
@media (max-width:992px){.cs-roadmap{grid-template-columns:repeat(3,1fr);gap:22px}.cs-roadmap::before{display:none}}
@media (max-width:520px){.cs-roadmap{grid-template-columns:repeat(2,1fr)}}

/* Technology ecosystem */
.tech-ring{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.tech-node{background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:20px 14px;text-align:center;transition:all .25s}
.tech-node:hover{border-color:#0bb5ac;transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(11,181,172,.4)}
.tech-node i{font-size:1.6rem;color:#0bb5ac;margin-bottom:8px}
.tech-node span{display:block;font-weight:600;font-size:.85rem;color:#1a2130}
.tech-node small{color:#758ba8;font-size:.7rem}

/* Industry cards */
.ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ind-card{background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:22px 18px;text-align:left;transition:all .25s;cursor:default}
.ind-card:hover{border-color:#0bb5ac;transform:translateY(-3px)}
.ind-card i{color:#0bb5ac;font-size:1.4rem;margin-bottom:10px}
.ind-card h6{font-size:.95rem;font-weight:700;margin:0 0 4px}
.ind-card p{font-size:.78rem;color:#758ba8;margin:0}
@media (max-width:992px){.ind-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.ind-grid{grid-template-columns:repeat(2,1fr)}}

/* Comparison */
.cs-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp{border-radius:20px;padding:30px 28px;border:1px solid #eef2f6}
.cmp.left{background:#fff;color:#5a6b81}
.cmp.right{background:linear-gradient(160deg,#0f172a,#0a3a3a);color:#e5edf7;border-color:transparent;position:relative;overflow:hidden}
.cmp.right::before{content:"";position:absolute;top:-100px;right:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(11,181,172,.35),transparent 70%);border-radius:50%}
.cmp h4{font-weight:700;margin:0 0 16px;position:relative}
.cmp.right h4{color:#fff}
.cmp ul{list-style:none;padding:0;margin:0;position:relative}
.cmp ul li{padding:10px 0;border-top:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:10px;font-size:.92rem}
.cmp.right ul li{border-color:rgba(255,255,255,.1)}
.cmp ul li i{font-size:.9rem}
.cmp.left ul li i{color:#c53939}
.cmp.right ul li i{color:#0bb5ac}
@media (max-width:768px){.cs-compare{grid-template-columns:1fr}}

/* Testimonial with case link */
.cs-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cs-testi{background:#fff;border:1px solid #eef2f6;border-radius:16px;padding:24px}
.cs-testi .p{color:#3d4c66;font-size:.95rem;font-style:italic;margin-bottom:14px}
.cs-testi .p::before{content:"“";font-family:'Fraunces',serif;font-size:2.4rem;color:#0bb5ac;line-height:0;vertical-align:-.4em;margin-right:4px}
.cs-testi .who{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eef2f6;padding-top:12px}
.cs-testi .who strong{display:block;font-size:.88rem}
.cs-testi .who span{color:#758ba8;font-size:.78rem}
.cs-testi .who a{color:#0a8f88;font-size:.78rem;font-weight:600;text-decoration:none}
@media (max-width:992px){.cs-testi-grid{grid-template-columns:1fr}}

/* FAQ */
.cs-faq details{background:#fff;border:1px solid #eef2f6;border-radius:12px;padding:16px 20px;margin-bottom:10px;transition:all .2s}
.cs-faq details[open]{border-color:#0bb5ac;box-shadow:0 12px 24px -18px rgba(11,181,172,.4)}
.cs-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:.98rem}
.cs-faq summary::-webkit-details-marker{display:none}
.cs-faq summary::after{content:"+";font-family:'Fraunces',serif;font-size:1.6rem;color:#0bb5ac;transition:transform .2s}
.cs-faq details[open] summary::after{content:"−"}
.cs-faq details p{margin:12px 0 0;color:#5a6b81;font-size:.92rem;line-height:1.65}

/* Final CTA */
.cs-final{position:relative;overflow:hidden;background:#0b1220;color:#e5edf7;padding:100px 0;text-align:center}
.cs-final .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}
.cs-final .orb.a{width:520px;height:520px;background:radial-gradient(circle,#0bb5ac,transparent 70%);top:-160px;left:-140px}
.cs-final .orb.b{width:460px;height:460px;background:radial-gradient(circle,#1f6feb,transparent 70%);bottom:-160px;right:-120px;opacity:.35}
.cs-final .container{position:relative;z-index:2}
.cs-final h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.cs-final h2 em{font-family:'Fraunces',serif;font-style:italic;color:#0bb5ac;font-weight:600}
.cs-final p{color:#b5c2d3;max-width:640px;margin:0 auto 26px;font-size:1.05rem}
.cs-final .btn-outline-axat{border-color:rgba(255,255,255,.28);color:#fff}
.cs-final .btn-outline-axat:hover{background:rgba(255,255,255,.08);color:#fff}
 
/* Sticky category nav for filters */
.cs-sticky{position:sticky;top:70px;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid #eef2f6;padding:14px 0}

/* Hidden state for filtering */
.cs-card.is-hidden,.cs-feat-card.is-hidden{display:none}



  .detail-shell {
      display: grid;
      grid-template-columns: 1.45fr .55fr;
      gap: 32px;
      align-items: start
  }

  .detail-panel {
      background: #fff;
      border: 1px solid #eef2f6;
      border-radius: 22px;
      padding: 28px 30px;
      box-shadow: 0 18px 40px -30px rgba(20, 30, 60, .25);
      margin-bottom: 24px
  }

  .detail-panel h3 {
      margin-bottom: 12px
  }

  .detail-panel p {
      color: #5a6b81
  }

  .detail-panel .meta-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 16px
  }

  .detail-panel .meta-list .item {
      background: #f8fbfc;
      border: 1px solid #eef3f6;
      border-radius: 12px;
      padding: 12px 14px
  }

  .detail-panel .meta-list .item span {
      display: block;
      color: #758ba8;
      font-size: .74rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 700
  }

  .detail-panel .meta-list .item strong {
      color: #1b2330;
      font-size: .96rem
  }

  .detail-highlight {
      background: linear-gradient(135deg, #f6fffe 0%, #f4fbff 100%);
      border: 1px solid #dff6f3
  }

  .detail-sidebar {
      position: sticky;
      top: 84px
  }

  .sidebar-card {
      background: #fff;
      border: 1px solid #eef2f6;
      border-radius: 22px;
      padding: 22px;
      box-shadow: 0 20px 50px -30px rgba(20, 30, 60, .2)
  }

  .sidebar-card .title {
      font-size: 1rem;
      font-weight: 700;
      color: #17212b;
      margin-bottom: 12px
  }

  .sidebar-card .list {
      display: grid;
      gap: 10px;
      margin: 14px 0 18px
  }

  .sidebar-card .list .row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: .9rem;
      border-bottom: 1px solid #f0f3f7;
      padding-bottom: 8px
  }

  .sidebar-card strong {
      color: #17212b
  }

  .sidebar-card .muted {
      color: #758ba8
  }
        .pill-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px
        }
    
        .pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #f5faf9;
            border: 1px solid #e3f3f0;
            color: #0a8f88;
            border-radius: 999px;
            padding: 7px 10px;
            font-size: .76rem;
            font-weight: 700
        }

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

      .detail-sidebar {
          position: relative;
          top: auto
      }

      .gallery-grid {
          grid-template-columns: 1fr 1fr
      }

      .arch-wrap {
          grid-template-columns: 1fr
      }
  }


  .inner-small-hero{
    margin-top: 78px;
  }

  .platform-sec h2 {

      font-weight: 700;

      text-align: center;

      font-size: 22px
  }

  .rating-platform img {
      max-width: 80%;
  }
  .rating-platform p {
      font-size: 36px;
      color: #fff;
      font-weight: 600;
  }