/* =====================================================
   NEXBRIDGE TECHNOLOGY
   Enterprise Design System v1.0
===================================================== */

/* ===== GOOGLE FONT ===== */

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

/* ===== RESET ===== */

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

/* ===== ROOT ===== */

:root{

    /* Colors */

    --primary:#0A2342;
    --secondary:#174EA6;
    --accent:#00AEEF;

    --primary-deep:#061529;
    --accent-soft:rgba(0,174,239,.16);

    --font-mono:'JetBrains Mono',ui-monospace,monospace;

    --dark:#111827;

    --gray:#6B7280;

    --light:#F8FAFC;

    --white:#FFFFFF;

    --border:#E5E7EB;

    --success:#16A34A;

    /* Radius */

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:20px;
    --radius-xl:30px;

    /* Shadow */

    --shadow-sm:0 4px 10px rgba(0,0,0,.05);

    --shadow-md:0 10px 25px rgba(0,0,0,.08);

    --shadow-lg:0 20px 50px rgba(0,0,0,.12);

    /* Transition */

    --transition:.35s ease;

    /* Width */

    --container:1280px;

}
/* =====================================================
   SPACING SYSTEM
===================================================== */

:root{

--space-1:.25rem;
--space-2:.5rem;
--space-3:.75rem;
--space-4:1rem;
--space-5:1.5rem;
--space-6:2rem;
--space-7:3rem;
--space-8:4rem;
--space-9:6rem;
--space-10:8rem;

}
:root{

--radius-xs:6px;
--radius-sm:10px;
--radius-md:16px;
--radius-lg:24px;
--radius-xl:36px;
--radius-pill:999px;

}
:root{

--z-dropdown:100;

--z-sticky:500;

--z-fixed:800;

--z-modal:900;

--z-loader:9999;

}
:root{

--content-xs:720px;

--content-sm:960px;

--content-md:1200px;

--content-lg:1440px;

}
:root{

--shadow-xs:
0 2px 6px rgba(0,0,0,.04);

--shadow-sm:
0 6px 18px rgba(0,0,0,.06);

--shadow-md:
0 12px 28px rgba(0,0,0,.08);

--shadow-lg:
0 24px 60px rgba(0,0,0,.12);

}
.panel{

background:white;

border-radius:24px;

padding:40px;

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

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

}
.table{

width:100%;

border-collapse:collapse;

}

.table th{

background:#F4F7FA;

padding:18px;

text-align:left;

}

.table td{

padding:18px;

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

}
.alert{

padding:20px;

border-radius:16px;

}

.alert-info{

background:#EDF7FF;

color:var(--secondary);

}

.alert-success{

background:#EDFCEF;

color:var(--success);

}
.tag{

display:inline-flex;

padding:8px 14px;

border-radius:999px;

background:#EDF7FF;

font-size:13px;

font-weight:600;

}

/* ===== HTML ===== */

html{

    scroll-behavior:smooth;

}

/* ===== BODY ===== */

body{

    font-family:'Inter',sans-serif;

    color:var(--dark);

    background:var(--white);

    line-height:1.7;

    font-size:16px;

    overflow-x:hidden;

}

/* ===== IMAGE ===== */

img{

    max-width:100%;

    display:block;

}

/* ===== LINK ===== */

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

/* ===== LIST ===== */

ul{

    list-style:none;

}

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

button{

    cursor:pointer;

    border:none;

    background:none;

    font:inherit;

}

/* ===== CONTAINER ===== */

.container{

    width:min(92%,var(--container));

    margin:auto;

}

/* ===== SECTION ===== */

.section{

    padding:80px 0;

}

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

.section-title{

    margin-bottom:60px;

}

.section-title.center{

    text-align:center;

}

.section-title.center p{

    margin-left:auto;

    margin-right:auto;

}

.section-title span{

    color:var(--accent);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:14px;

}

.section-title h2{

    margin-top:14px;

    font-size:44px;

    color:var(--primary);

    line-height:1.2;

}

.section-title p{

    margin-top:20px;

    color:var(--gray);

    max-width:720px;

}

/* ===== TEXT ===== */

h1,h2,h3,h4{

    line-height:1.2;

    font-weight:700;

}

p{

    color:var(--gray);

}

/* ===== SPACING ===== */

.mt-1{

margin-top:10px;

}

.mt-2{

margin-top:20px;

}

.mt-3{

margin-top:40px;

}
/* =====================================================
   HEADER
===================================================== */

.header{

    position:sticky;

    top:0;

    z-index:999;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:var(--transition);

}

.header.scrolled{

height:68px;

background:rgba(255,255,255,.96);

backdrop-filter:blur(16px);

box-shadow:0 8px 30px rgba(0,0,0,.08);

}

/* ================= NAVBAR ================= */

.navbar{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}

.navbar .btn-primary{

    white-space:nowrap;

    flex-shrink:0;

}

/* ================= LOGO ================= */

.brand{

    font-size:28px;

    font-weight:800;

    color:var(--primary);

    letter-spacing:.5px;

    flex-shrink:0;

}

.brand span{

    color:var(--accent);

}

.brand-logo{

    height:56px;

    display:block;

}

.footer-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:16px;

    padding-bottom:30px;

}

.footer-logo{

    height:40px;

    display:block;

}

/* =====================================================
   PHOTO PLACEHOLDER
===================================================== */

.photo-placeholder{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    aspect-ratio:4/3;

    background:repeating-linear-gradient(45deg,#F1F3F6,#F1F3F6 10px,#E7EAEE 10px,#E7EAEE 20px);

    border:1.5px dashed #C6CCD4;

    border-radius:12px;

    color:#8C97A3;

    margin-bottom:20px;

}

.photo-placeholder svg{

    width:28px;

    height:28px;

    stroke:#8C97A3;

}

.photo-placeholder span{

    font-size:11.5px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.card-photo{

    display:block;

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:20px;

}

.avatar-placeholder{

    width:48px;

    height:48px;

    border-radius:50%;

    background:repeating-linear-gradient(45deg,#F1F3F6,#F1F3F6 6px,#E7EAEE 6px,#E7EAEE 12px);

    border:1.5px dashed #C6CCD4;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.avatar-placeholder svg{

    width:18px;

    height:18px;

    stroke:#8C97A3;

}

/* ================= MENU ================= */

.nav-menu{

    display:flex;

    align-items:center;

    gap:36px;

}

.nav-menu a{

    font-weight:600;

    color:var(--dark);

    position:relative;

}

/* Hover Line */

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--primary);

}

.nav-menu a:hover::after{

    width:100%;

}

.nav-menu a.active{

    color:var(--primary);

}

.nav-menu a.active::after{

    width:100%;

}

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

.contact-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.form-row{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

    font-size:14px;

    font-weight:600;

    color:var(--primary);

}

.form-row label{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    white-space:nowrap;

}

.form-row label input[type="radio"]{

    width:18px;

    height:18px;

    flex-shrink:0;

    margin:0;

    accent-color:var(--accent);

}

@media (max-width:600px){

    .form-row{
        flex-direction:column;
        gap:16px;
    }

}

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:14px 16px;

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

    border-radius:10px;

    font-family:inherit;

    font-size:15px;

    color:var(--dark);

    background:var(--white);

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--accent);

}

.contact-form textarea{

    resize:vertical;

}

.contact-form button{

    align-self:flex-start;

    border:none;

    cursor:pointer;

}

@media (max-width:600px){

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

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

/* Primary */

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    transform:translateY(-3px);

    background:var(--secondary);

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

}

/* Outline */

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:white;

}

/* Light */

.btn-light{

    background:white;

    color:var(--primary);

}

.btn-light:hover{

    transform:translateY(-3px);

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

}

/* Outline Light (for dark backgrounds) */

.btn-outline-light{

    border:2px solid rgba(255,255,255,.35);

    color:white;

}

.btn-outline-light:hover{

    transform:translateY(-3px);

    border-color:white;

    background:rgba(255,255,255,.08);

}
/* =====================================================
   HERO BANNER
===================================================== */

.hero-banner{

    position:relative;

    background:linear-gradient(160deg,#0A2342 0%,#0D2C52 45%,var(--primary-deep) 100%);

    color:white;

    overflow:hidden;

    padding:clamp(64px,10vw,110px) 0 0;

}

.hero-network{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    opacity:.55;

}

.hero-network svg{

    width:100%;

    height:100%;

}

.hero-node{

    animation:nodePulse 3.6s ease-in-out infinite;

    transform-origin:center;

}

.reduce-motion .hero-node{

    animation:none;

}

@keyframes nodePulse{

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

    50%{ opacity:1; }

}

.hero-glow{

    position:absolute;

    width:640px;

    height:640px;

    border-radius:50%;

    background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);

    top:-180px;

    right:-160px;

    z-index:0;

}

.hero-banner .container{

    position:relative;

    z-index:2;

}

.hero-banner-inner{

    max-width:700px;

    padding-bottom:56px;

}

.hero-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-family:var(--font-mono);

    font-size:14.5px;

    letter-spacing:.1em;

    text-transform:uppercase;

    color:var(--accent);

    margin-bottom:24px;

}

.hero-eyebrow::before{

    content:"";

    width:26px;

    height:1px;

    background:var(--accent);

}

.hero-banner h1{

    font-size:clamp(40px,6.2vw,68px);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-.01em;

    margin-bottom:22px;

}

.hero-banner h1 .accent-line{

    display:block;

    background:linear-gradient(90deg,#6FD3FF,var(--accent));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.hero-banner .lead{

    font-size:clamp(17px,1.8vw,21px);

    line-height:1.75;

    color:rgba(255,255,255,.78);

    max-width:600px;

    margin-bottom:36px;

}

.hero-cta{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

/* ================= HERO FEATURE STRIP ================= */

.hero-strip{

    position:relative;

    z-index:2;

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

    background:rgba(255,255,255,.03);

}

.hero-strip-grid{

    display:grid;

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

}

.hero-strip-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:12px;

    padding:26px 12px;

    border-left:1px solid rgba(255,255,255,.08);

    text-decoration:none;

    transition:var(--transition);

}

.hero-strip-item:hover{

    background:rgba(255,255,255,.05);

}

.hero-strip-item:first-child{

    border-left:none;

}

.hero-strip-item svg{

    width:26px;

    height:26px;

    stroke:var(--accent);

}

.hero-strip-item span{

    font-size:12.5px;

    font-weight:600;

    line-height:1.4;

    color:rgba(255,255,255,.85);

}

/* =====================================================
   OVERVIEW (Description + Mission/Vision/Approach/Commitment)
===================================================== */

.overview{

    background:var(--light);

}

.overview-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:64px;

    align-items:start;

}

.overview-desc .small-title{

    display:block;

    margin-bottom:14px;

}

.overview-desc h2{

    font-size:clamp(24px,3vw,32px);

    color:var(--primary);

    margin-bottom:8px;

}

.overview-rule{

    width:56px;

    height:3px;

    background:var(--accent);

    border-radius:2px;

    margin-bottom:22px;

}

.overview-desc p{

    margin-bottom:16px;

    line-height:1.8;

}

.overview-desc p:last-child{

    margin-bottom:0;

}

.mission-cards{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:26px 22px;

}

.contact-grid{

    align-items:center;

}

.contact-info-panel{

    background:var(--light);

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

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

    padding:40px;

}

.mission-card{

    display:flex;

    gap:16px;

}

.mission-icon{

    flex-shrink:0;

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

}

.mission-icon svg{

    width:20px;

    height:20px;

    stroke:white;

}

.mission-card h3{

    font-size:15px;

    color:var(--primary);

    margin-bottom:6px;

    letter-spacing:.02em;

}

.mission-card p{

    font-size:14.5px;

    line-height:1.7;

    color:var(--gray);

}

/* =====================================================
   BOTTOM FEATURE BAR
===================================================== */

.feature-bar{

    background:var(--primary-deep);

}

.feature-bar-grid{

    display:grid;

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

}

.feature-bar-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:26px 16px;

    border-left:1px solid rgba(255,255,255,.08);

}

.feature-bar-item:first-child{

    border-left:none;

}

.feature-bar-item svg{

    width:24px;

    height:24px;

    stroke:var(--accent);

    flex-shrink:0;

}

.feature-bar-item span{

    font-weight:600;

    font-size:14.5px;

    color:white;

}

/* =====================================================
   PAGE HEADER (mini hero for sub-pages)
===================================================== */

.page-header{

    position:relative;

    background:linear-gradient(160deg,#0A2342 0%,#0D2C52 45%,var(--primary-deep) 100%);

    color:white;

    overflow:hidden;

    padding:56px 0;

    text-align:center;

}

.page-header .hero-glow{

    width:420px;

    height:420px;

    top:-160px;

    right:-140px;

}

.page-header .container{

    position:relative;

    z-index:2;

}

.page-header span.hero-eyebrow{

    justify-content:center;

}

.page-header h1{

    font-size:clamp(30px,4.4vw,46px);

    font-weight:800;

    margin-bottom:12px;

}

.page-header p{

    font-size:16px;

    color:rgba(255,255,255,.75);

    max-width:600px;

    margin:0 auto;
}

/* =====================================================
   EXPLORE GRID (click-through cards, used on Home)
===================================================== */

.explore-grid{

    display:grid;

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

    gap:24px;

}

.explore-card{

    display:flex;

    flex-direction:column;

    gap:14px;

    background:var(--white);

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

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

    padding:32px;

    transition:var(--transition);

    text-decoration:none;

    color:inherit;
}

.explore-card:hover{

    transform:translateY(-8px);

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

    border-color:rgba(0,174,239,.25);
}

.explore-card .explore-icon{

    width:52px;

    height:52px;

    border-radius:14px;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

}

.explore-card .explore-icon svg{

    width:24px;

    height:24px;

    stroke:white;

}

.explore-card h3{

    color:var(--primary);

    font-size:20px;

}

.explore-card p{

    font-size:14.5px;

    color:var(--gray);

    flex-grow:1;
}

.explore-card .explore-link{

    font-family:var(--font-mono);

    font-size:12.5px;

    text-transform:uppercase;

    letter-spacing:.05em;

    color:var(--accent);

    font-weight:700;

}

@media (max-width:900px){

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

}

@media (max-width:600px){

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

}

/* =====================================================
   BLOG TEASER
===================================================== */

.blog-grid{

    display:grid;

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

    gap:26px;

}

/* =====================================================
   KNOWLEDGE TOOLBAR (search + topic filter chips)
===================================================== */

.knowledge-toolbar{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:22px;

    margin:8px 0 40px;

}

.knowledge-search{

    position:relative;

    width:100%;

    max-width:480px;

}

.knowledge-search svg{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    color:var(--gray);

    pointer-events:none;

}

.knowledge-search input{

    width:100%;

    padding:13px 18px 13px 48px;

    border-radius:999px;

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

    font-size:15px;

    font-family:inherit;

    color:var(--dark);

    background:var(--white);

}

.knowledge-search input:focus{

    outline:none;

    border-color:var(--accent);

    box-shadow:0 0 0 3px var(--accent-soft);

}

.topic-chips{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

}

.topic-chip{

    padding:8px 16px;

    border-radius:999px;

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

    background:var(--white);

    color:var(--gray);

    font-size:13.5px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    white-space:nowrap;

}

.topic-chip:hover{

    border-color:var(--accent);

    color:var(--accent);

}

.topic-chip.active{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

}

.knowledge-groups{

    display:flex;

    flex-direction:column;

    gap:56px;

}

.topic-group-header{

    display:flex;

    align-items:baseline;

    justify-content:space-between;

    gap:16px;

    margin-bottom:24px;

    padding-bottom:14px;

    border-bottom:2px solid var(--border);

}

.topic-group-header h3{

    font-size:22px;

    color:var(--primary);

}

.topic-group-count{

    font-family:var(--font-mono);

    font-size:13px;

    color:var(--gray);

    white-space:nowrap;

}

.knowledge-empty{

    text-align:center;

    color:var(--gray);

    padding:50px 0;

    font-size:15px;

}

.blog-tag{

    display:inline-block;

    font-family:var(--font-mono);

    font-size:11.5px;

    letter-spacing:.06em;

    text-transform:uppercase;

    color:var(--secondary);

    background:var(--accent-soft);

    padding:5px 12px;

    border-radius:999px;

    margin-bottom:16px;

}

.blog-meta{

    font-family:var(--font-mono);

    font-size:12.5px;

    color:var(--gray);

    margin-top:16px;

}

@media (max-width:768px){

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

}

@media (max-width:992px){

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

    .hero-strip-item:nth-child(3n+1){
        border-left:none;
    }

    .hero-strip-item{
        border-top:1px solid rgba(255,255,255,.08);
    }

    .hero-strip-item:nth-child(-n+3){
        border-top:none;
    }

    .overview-grid{
        grid-template-columns:1fr;
        gap:44px;
    }

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

    .feature-bar-item:nth-child(2n+1){
        border-left:none;
    }

    .feature-bar-item{
        border-top:1px solid rgba(255,255,255,.08);
    }

    .feature-bar-item:nth-child(-n+2){
        border-top:none;
    }

}

@media (max-width:600px){

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

    .hero-strip-item:nth-child(3n+1){
        border-left:1px solid rgba(255,255,255,.08);
    }

    .hero-strip-item:nth-child(2n+1){
        border-left:none;
    }

    .mission-cards{
        grid-template-columns:1fr;
    }

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

    .feature-bar-item{
        border-left:none !important;
        border-top:1px solid rgba(255,255,255,.08);
    }

    .feature-bar-item:first-child{
        border-top:none;
    }

}

/* =====================================================
   GRID SYSTEM
===================================================== */

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.grid-auto{

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

}

/* =====================================================
   CARD SYSTEM
===================================================== */

.card{

    background:var(--white);

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

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

    padding:35px;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

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

    border-color:rgba(0,174,239,.25);

}

.card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:24px;

}

.card p{

    color:var(--gray);

}

.card-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#EDF7FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:22px;

}
/* =====================================================
FEATURE CARD
===================================================== */

.feature-card{

    text-align:center;

}

.feature-card .card-icon{

    margin:0 auto 25px;

}
/* =====================================================
STATISTICS
===================================================== */

.stats{

    background:var(--primary);

    color:white;

    padding:80px 0;

}

.stats .grid{

    align-items:center;

}

.stat{

    text-align:center;

}

.stat h2{

    font-size:54px;

    margin-bottom:12px;

}

.stat p{

    color:rgba(255,255,255,.8);

}
/* =====================================================
SOLUTION CARD
===================================================== */

.solution-card{

    position:relative;

    overflow:hidden;

}

.solution-card::before{

    content:"";

    position:absolute;

    width:5px;

    left:0;

    top:0;

    bottom:0;

    background:var(--accent);

    transform:scaleY(0);

    transition:var(--transition);

}

.solution-card:hover::before{

    transform:scaleY(1);

}
/* =====================================================
INDUSTRY CARD
===================================================== */

.industry-card{

    text-align:left;

}

.industry-card h3{

    margin-bottom:15px;

}

.industry-grid{

    display:grid;

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

    gap:30px;

}

.case-grid{

    display:grid;

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

    gap:30px;

}

.industry-list{

    display:grid;

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

    gap:36px 30px;

    margin-top:20px;

}

.industry-list h3{

    color:var(--primary);

    margin-bottom:8px;

}

.industry-list p{

    color:var(--gray);

}

/* =====================================================
   SITE-WIDE: undefined grid/card classes fix
   (HTML referenced these everywhere; CSS never defined them)
===================================================== */

.why-card,
.capability,
.challenge-card,
.engineer-card,
.philosophy-card,
.value-box,
.flow-item,
.knowledge-card{

    background:var(--white);

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

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

    padding:30px;

    transition:var(--transition);

}

.why-card:hover,
.capability:hover,
.challenge-card:hover,
.engineer-card:hover,
.philosophy-card:hover,
.value-box:hover,
.flow-item:hover,
.knowledge-card:hover{

    transform:translateY(-6px);

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

    border-color:rgba(0,174,239,.25);

}

.why-card h3,
.capability h3,
.challenge-card h3,
.engineer-card h3,
.philosophy-card h3,
.value-box h3,
.flow-item h3,
.knowledge-card h3{

    color:var(--primary);

    margin-bottom:12px;

    font-size:19px;

}

.why-card p,
.capability p,
.challenge-card p,
.engineer-card p,
.philosophy-card p,
.value-box p,
.flow-item p,
.knowledge-card p{

    color:var(--gray);

    font-size:14.5px;

    line-height:1.7;

}

.why-number{

    font-family:var(--font-mono);

    font-size:26px;

    font-weight:800;

    color:var(--accent);

    margin-bottom:14px;

}

.tech-card{

    background:var(--white);

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

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

    padding:30px;

    text-align:center;

    transition:var(--transition);

}

.tech-card:hover{

    transform:translateY(-6px);

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

}

.tech-icon{

    font-size:34px;

    margin-bottom:16px;

}

.tech-card h3{

    color:var(--primary);

    margin-bottom:10px;

    font-size:18px;

}

.tech-card p{

    color:var(--gray);

    font-size:14px;

    line-height:1.7;

}

.stat-card{

    text-align:center;

}

.stat-number{

    font-family:var(--font-mono);

    font-size:42px;

    font-weight:800;

    color:var(--primary);

}

.stat-label{

    color:var(--gray);

    font-size:14px;

    margin-top:8px;

}

.insight-card{

    background:var(--white);

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

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

    padding:28px;

    transition:var(--transition);

}

.insight-card:hover{

    transform:translateY(-6px);

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

}

.insight-card .date{

    font-family:var(--font-mono);

    font-size:12px;

    color:var(--accent);

    font-weight:700;

    letter-spacing:.05em;

    margin-bottom:10px;

}

.insight-card h3{

    color:var(--primary);

    font-size:17px;

    margin-bottom:8px;

}

.insight-card p{

    color:var(--gray);

    font-size:14px;

}

.resource-card,

.partner-logo,

.brand-box{

    background:var(--white);

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

    border-radius:12px;

    padding:22px;

    text-align:center;

    font-weight:600;

    color:var(--primary);

    transition:var(--transition);

}

.resource-card:hover,

.partner-logo:hover,

.brand-box:hover{

    border-color:rgba(0,174,239,.35);

    color:var(--accent);

}

.finder-grid{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.finder-grid a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 20px;

    border-radius:999px;

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

    font-weight:600;

    font-size:14.5px;

    color:var(--primary);

    transition:var(--transition);

}

.finder-grid a:hover{

    border-color:var(--accent);

    background:var(--accent-soft);

}

.industry-icon{

    font-size:36px;

    margin-bottom:16px;

}

.case-tag{

    display:inline-block;

    font-family:var(--font-mono);

    font-size:11.5px;

    text-transform:uppercase;

    letter-spacing:.06em;

    color:var(--secondary);

    background:var(--accent-soft);

    padding:5px 12px;

    border-radius:999px;

    margin-bottom:14px;

}

.case-card h3{

    color:var(--primary);

    margin-bottom:10px;

    font-size:19px;

}

.case-card p{

    color:var(--gray);

    font-size:14.5px;

    line-height:1.7;

    margin-bottom:16px;

}

.case-card a{

    font-weight:700;

    font-size:14px;

    color:var(--accent);

}

.journey-line{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:26px;

    position:relative;

}

.journey-step{

    text-align:center;

    padding:24px 16px;

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

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

}

.journey-step h3{

    font-family:var(--font-mono);

    color:var(--accent);

    font-size:22px;

    margin-bottom:10px;

}

.journey-step h4{

    color:var(--primary);

    font-size:15px;

}

.solution-grid{

    display:grid;

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

    gap:26px;

}

.solution-item{

    background:var(--white);

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

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

    padding:30px;

    transition:var(--transition);

}

.solution-item:hover{

    transform:translateY(-6px);

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

    border-color:rgba(0,174,239,.25);

}

.solution-item h3{

    color:var(--primary);

    margin-bottom:12px;

    font-size:19px;

}

.solution-item p{

    color:var(--gray);

    font-size:14.5px;

    line-height:1.8;

}

.solution-item{

    display:flex;

    flex-direction:column;

}

.solution-icon{

    width:52px;

    height:52px;

    border-radius:14px;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

}

.solution-icon svg{

    width:24px;

    height:24px;

    stroke:white;

}

.global-grid,
.program-grid{

    display:grid;

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

    gap:40px;

}

.global-grid h3,
.program-grid h3{

    color:var(--primary);

    margin-bottom:16px;

}

.global-grid ul,
.program-grid ul{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.global-grid li,
.program-grid li{

    color:var(--gray);

    padding-left:18px;

    position:relative;

}

.global-grid li::before,
.program-grid li::before{

    content:"";

    position:absolute;

    left:0;

    top:9px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--accent);

}

@media (max-width:768px){

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

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

    .global-grid,
    .program-grid{
        grid-template-columns:1fr;
        gap:26px;
    }

}

@media (max-width:480px){

    .journey-line,
    .solution-grid{
        grid-template-columns:1fr;
    }

}

/* ---- Grid layouts ---- */

.why-grid,
.capability-grid,
.challenge-grid,
.engineer-grid,
.values-grid,
.stats-grid,
.bridge-flow,
.knowledge-grid,
.partner-grid,
.resource-grid{

    display:grid;

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

    gap:26px;

}

.tech-grid,
.philosophy-grid,
.insight-grid,
.brand-wall{

    display:grid;

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

    gap:26px;

}

@media (max-width:992px){

    .why-grid, .capability-grid, .challenge-grid, .engineer-grid,
    .values-grid, .stats-grid, .bridge-flow, .knowledge-grid,
    .partner-grid, .resource-grid,
    .tech-grid, .philosophy-grid, .insight-grid, .brand-wall{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:600px){

    .why-grid, .capability-grid, .challenge-grid, .engineer-grid,
    .values-grid, .stats-grid, .bridge-flow, .knowledge-grid,
    .partner-grid, .resource-grid,
    .tech-grid, .philosophy-grid, .insight-grid, .brand-wall{
        grid-template-columns:1fr;
    }

}

@media (max-width:992px){

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

}

@media (max-width:600px){

    .industry-grid,
    .case-grid,
    .industry-list{
        grid-template-columns:1fr;
    }

}
/* =====================================================
BACKGROUND
===================================================== */

.bg-light{

    background:#F8FAFC;

}

.bg-dark{

    background:var(--primary);

    color:white;

}

.bg-dark p{

    color:rgba(255,255,255,.85);

}
.mini-title{

    display:inline-block;

    color:var(--accent);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}
/* =====================================================
   ABOUT SECTION
===================================================== */

.about{

    position:relative;

}

.about .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:24px;

    box-shadow:var(--shadow-lg);

}

.about-content h2{

    font-size:44px;

    color:var(--primary);

    margin-bottom:25px;

}

.about-content p{

    margin-bottom:22px;

}

/* =====================================================
VALUE GRID
===================================================== */

.value-grid{

    display:grid;

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

    gap:24px;

    margin-top:40px;

}

.value-item{

    padding:24px;

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

    border-radius:18px;

    transition:var(--transition);

}

.value-item:hover{

    border-color:var(--accent);

    transform:translateY(-6px);

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

}

.value-item h3{

    color:var(--primary);

    margin-bottom:12px;

}

/* =====================================================
   NUMBERED STEP LIST (Solutions > workflow)
===================================================== */

.process .timeline{

    position:relative;

}

.process .timeline::after{

    content:"";

    position:absolute;

    left:27px;

    top:6px;

    bottom:6px;

    width:2px;

    background:var(--border);

}

.step{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:24px;

    margin-bottom:36px;

}

.step:last-child{

    margin-bottom:0;

}

.circle{

    position:relative;

    z-index:1;

    flex-shrink:0;

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    font-size:19px;

}

.step h3{

    color:var(--primary);

    margin-bottom:6px;

}

.step p{

    color:var(--gray);

}

/* =====================================================
   COMPANY JOURNEY (About page)
===================================================== */

.journey{

    position:relative;

    margin-top:60px;

}

.journey::before{

    content:"";

    position:absolute;

    left:156px;

    top:6px;

    bottom:6px;

    width:2px;

    background:var(--border);

}

.journey-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:32px;

    margin-bottom:40px;

}

.journey-item:last-child{

    margin-bottom:0;

}

.journey-item .year{

    position:relative;

    z-index:1;

    flex-shrink:0;

    width:140px;

    text-align:right;

    font-family:var(--font-mono);

    font-weight:700;

    color:var(--accent);

    font-size:15px;

    padding-top:2px;
}

.journey-item .year::after{

    content:"";

    position:absolute;

    right:-22px;

    top:4px;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--accent);

    border:3px solid white;

    box-shadow:0 0 0 2px var(--accent);

}

.journey-item .content h3{

    color:var(--primary);

    margin-bottom:6px;

}

.journey-item .content p{

    color:var(--gray);

}

@media (max-width:600px){

    .journey::before{
        left:8px;
    }

    .journey-item{
        gap:24px;
    }

    .journey-item .year{
        width:auto;
        text-align:left;
        padding-left:24px;
    }

    .journey-item .year::after{
        right:auto;
        left:-2px;
    }

}
/* =====================================================
FEATURE LIST
===================================================== */

.feature-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:30px;

}

.feature-list li{

    display:flex;

    align-items:center;

    gap:15px;

}

.feature-list i{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EAF8FE;

    color:var(--secondary);

    font-style:normal;

    font-weight:bold;

}
/* =====================================================
BADGE
===================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:999px;

    background:#EDF7FF;

    color:var(--secondary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

}

.badge.success{

    background:#EAF9EF;

    color:var(--success);

}

.badge.dark{

    background:var(--primary);

    color:white;

}
/* =====================================================
DIVIDER
===================================================== */

.divider{

    width:80px;

    height:4px;

    background:var(--accent);

    border-radius:999px;

    margin:25px 0;

}
/* =====================================================
CALL TO ACTION
===================================================== */

.cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    border-radius:30px;

    padding:70px;

    text-align:center;

}

.cta h2{

    color:white;

    font-size:42px;

    margin-bottom:20px;

}

.cta p{

    color:rgba(255,255,255,.85);

    max-width:720px;

    margin:0 auto 35px;

}
/* =====================================================
   CONTACT
===================================================== */

.contact{

    background:#F8FAFC;

}

.contact .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}

.contact-info h2{

    color:var(--primary);

    font-size:42px;

    margin-bottom:25px;

}

.contact-list{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.contact-icon{

    width:54px;

    height:54px;

    border-radius:16px;

    background:#EAF8FE;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    color:var(--secondary);

}

.contact-item h4{

    color:var(--primary);

    margin-bottom:6px;

}

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

.contact-form{

    background:white;

    padding:40px;

    border-radius:24px;

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

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--primary);

}

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    padding:16px 18px;

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

    border-radius:14px;

    font-size:15px;

    font-family:inherit;

    transition:var(--transition);

}

.form-group textarea{

    resize:vertical;

    min-height:170px;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:var(--accent);

    outline:none;

    box-shadow:0 0 0 4px rgba(0,174,239,.12);

}
/* =====================================================
FOOTER
===================================================== */

.footer{

    background:var(--primary);

    color:white;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

}

.footer h3{

    color:white;

    margin-bottom:20px;

}

.footer p,

.footer a{

    color:rgba(255,255,255,.78);

}

.footer ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer a:hover{

    color:white;

}

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}
/* =====================================================
SOCIAL
===================================================== */

.social{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    transition:var(--transition);

}

.social a:hover{

    background:var(--accent);

    transform:translateY(-4px);

}
/* =====================================================
PARTNER LOGOS
===================================================== */

.logo-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:28px;

}

.logo-box{

    height:120px;

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

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    transition:var(--transition);

}

.logo-box:hover{

    transform:translateY(-6px);

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

}
.author{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:20px;

}

/* =====================================================
   TESTIMONIAL CARDS
===================================================== */

.testimonial-slider{

    display:grid;

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

    gap:26px;

    margin-top:20px;

}

.testimonial-card{

    background:var(--white);

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

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

    padding:32px;

    text-align:left;

}

.testimonial-quote{

    font-size:16px;

    line-height:1.7;

    color:var(--dark);

    margin-bottom:20px;

}

.testimonial-footer{

    display:flex;

    align-items:center;

    gap:12px;

}

@media (max-width:900px){

    .testimonial-slider{
        grid-template-columns:1fr;
    }

}

/* =====================================================
QUOTE
===================================================== */

.quote{

    text-align:center;

    padding:20px 0;

}

.quote blockquote{

    max-width:900px;

    margin:auto;

    font-size:34px;

    color:var(--primary);

    font-weight:600;

    line-height:1.5;

}
/* =====================================================
FADE
===================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.fade-up.show{

    opacity:1;

    transform:none;

}
/* =====================================================
   ANIMATION SYSTEM
===================================================== */

:root{

    --ease:cubic-bezier(.22,.61,.36,1);

}

/* Fade */

.fade{

    opacity:0;

    transition:all .8s var(--ease);

}

.fade.show{

    opacity:1;

}

/* Slide Up */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s var(--ease);

}

.fade-up.show{

    opacity:1;

    transform:none;

}

/* Slide Left */

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:all .8s var(--ease);

}

.fade-left.show{

    opacity:1;

    transform:none;

}

/* Slide Right */

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:all .8s var(--ease);

}

.fade-right.show{

    opacity:1;

    transform:none;

}

/* Zoom */

.zoom{

    opacity:0;

    transform:scale(.9);

    transition:all .8s var(--ease);

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}
/* =====================================================
HOVER EFFECTS
===================================================== */

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:var(--transition);

}

.hover-scale:hover{

    transform:scale(1.03);

}

.hover-shadow:hover{

    box-shadow:var(--shadow-lg);

}
/* =====================================================
IMAGE
===================================================== */

.image-frame{

    overflow:hidden;

    border-radius:24px;

}

.image-frame img{

    transition:1s;

}

.image-frame:hover img{

    transform:scale(1.08);

}
/* =====================================================
GLASS
===================================================== */

.glass{

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.4);

}
/* =====================================================
ICON
===================================================== */

.icon-circle{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EDF7FF;

    color:var(--secondary);

    font-size:30px;

}
/* =====================================================
NUMBER
===================================================== */

.number{

    font-size:56px;

    font-weight:800;

    color:var(--primary);

}

.number.small{

    font-size:36px;

}
/* =====================================================
DIVIDER
===================================================== */

.wave{

    width:100%;

    overflow:hidden;

    line-height:0;

}

.wave svg{

    display:block;

    width:100%;

    height:80px;

}
/* =====================================================
SCROLLBAR
===================================================== */

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:999px;

}

::-webkit-scrollbar-track{

    background:#EDF2F7;

}
/* =====================================================
TEXT SELECTION
===================================================== */

::selection{

    background:var(--accent);

    color:white;

}
/* =====================================================
SKELETON
===================================================== */

.skeleton{

    background:linear-gradient(
        90deg,
        #eee 25%,
        #f8f8f8 50%,
        #eee 75%
    );

    background-size:400%;

    animation:loading 1.5s infinite;

}

@keyframes loading{

0%{

background-position:100%;

}

100%{

background-position:-100%;

}

}
/* =====================================================
   RESPONSIVE SYSTEM
===================================================== */

/* ============= Laptop ============= */

@media (max-width:1200px){

.hero .container{

grid-template-columns:1fr;

text-align:center;

}

.hero-content{

max-width:900px;

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.about .container{

grid-template-columns:1fr;

}

.contact .container{

grid-template-columns:1fr;

}

.footer-grid{

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

}

.grid-4{

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

}

}

/* ============= Tablet ============= */

@media (max-width:992px){

.section{

padding:80px 0;

}

.hero h1{

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

}

.section-title h2{

font-size:38px;

}

.grid-3,

.grid-4{

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

}

.value-grid{

grid-template-columns:1fr;

}

.nav-menu{

gap:22px;

}

}

/* ============= Mobile ============= */

@media (max-width:768px){

.section{

padding:70px 0;

}

.navbar{

height:72px;

}

.brand-logo{

height:38px;

}

.header .btn-primary{

padding:10px 18px;

font-size:13px;

}

.nav-menu{

display:none;

}

.hero{

min-height:auto;

padding:100px 0;

}

.hero .container{

gap:40px;

}

.hero h1{

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

}

.hero-buttons{

flex-direction:column;

}

.hero-cta .btn{

width:100%;

}

.grid-2,

.grid-3,

.grid-4{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

gap:20px;

text-align:center;

}

.contact-form{

padding:28px;

}

}

/* ============= Small Mobile ============= */

@media (max-width:480px){

.container{

width:94%;

}

.section-title h2{

font-size:32px;

}

.brand-logo{

height:32px;

}

.header .btn-primary{

padding:9px 14px;

font-size:12.5px;

}

.menu-toggle{

width:40px;

height:40px;

}

.hero h1{

font-size:34px;

}

.card{

padding:26px;

}

.contact-info h2{

font-size:32px;

}

.cta{

padding:40px 24px;

}

}
h1{

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

}

h2{

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

}

h3{

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

}

p{

font-size:clamp(.95rem,1vw,1.08rem);

}
.card{

border-radius:

clamp(18px,2vw,26px);

}
.container{

width:min(92%,1320px);

}

.container-sm{

width:min(92%,980px);

}

.container-lg{

width:min(95%,1500px);

}
/* ==========================================
MOBILE MENU
========================================== */

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    flex-shrink:0;

    border-radius:12px;

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

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:var(--transition);

}

.menu-toggle:hover{

    background:var(--primary);

    color:white;

}

@media(max-width:768px){

.menu-toggle{

display:flex;

}

.nav-menu{

position:fixed;

display:flex;

top:72px;

left:-100%;

width:100%;

background:white;

padding:40px;

flex-direction:column;

gap:28px;

transition:.4s;

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

}

.nav-menu.active{

left:0;

}

}
.header.scrolled{

height:68px;

}

.header.scrolled .navbar{

height:68px;

}

.header.scrolled .brand{

font-size:24px;

}
.btn{

position:relative;

overflow:hidden;

}
.ripple{

position:absolute;

border-radius:50%;

background:rgba(255,255,255,.5);

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}
.preloader{

position:fixed;

inset:0;

background:white;

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

transition:.5s;

}

.preloader.hide{

opacity:0;

visibility:hidden;

}
.loader{

width:60px;

height:60px;

border:5px solid #eee;

border-top:5px solid var(--accent);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}
.solution-finder{

display:flex;

flex-wrap:wrap;

gap:14px;

margin-top:40px;

}

.solution-chip{

padding:14px 22px;

border-radius:999px;

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

background:white;

cursor:pointer;

font-weight:600;

transition:var(--transition);

}

.solution-chip:hover{

background:var(--secondary);

color:white;

}

.solution-chip.active{

background:var(--primary);

color:white;

border-color:var(--primary);

}
/* =====================================================
   SCROLL PROGRESS
===================================================== */

.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(90deg,var(--secondary),var(--accent));

z-index:9999;

transition:width .1s linear;

}
.focus{

animation:focusSection 1.2s;

}

@keyframes focusSection{

0%{

background:#EDF7FF;

}

100%{

background:transparent;

}

}
.hero-image{

transition:transform .15s linear;

will-change:transform;

}
.card{

transition:
transform .35s,
box-shadow .35s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}
/* =====================================================
   ARTICLE BODY (Knowledge articles, markdown-rendered)
===================================================== */

.article-body{

    font-size:17px;

    line-height:1.85;

    color:var(--dark);

}

.article-body p{

    margin-bottom:22px;

}

.article-body h2{

    color:var(--primary);

    font-size:26px;

    margin:44px 0 18px;

}

.article-body h3{

    color:var(--primary);

    font-size:21px;

    margin:34px 0 14px;

}

.article-body ul,
.article-body ol{

    margin:0 0 22px 22px;

    color:var(--dark);

}

.article-body li{

    margin-bottom:10px;

    line-height:1.8;
}

.article-body a{

    color:var(--accent);

    text-decoration:underline;

}

.article-body blockquote{

    border-left:3px solid var(--accent);

    padding-left:20px;

    color:var(--gray);

    font-style:italic;

    margin:28px 0;

}

.article-body img{

    max-width:100%;

    height:auto;

    display:block;

    margin:34px 0;

    border-radius:12px;

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

}

.article-body code{

    background:#F1F3F6;

    padding:2px 6px;

    border-radius:6px;

    font-family:var(--font-mono);

    font-size:14px;

}

/* =====================================================
   EXPANDABLE TECHNICAL DETAIL LAYER
   (why-card, journey-step, solution-item as <details>)
===================================================== */
.why-card summary,
.journey-step summary,
.solution-item summary{

    list-style:none;

    cursor:pointer;

}

.why-card summary::-webkit-details-marker,
.journey-step summary::-webkit-details-marker,
.solution-item summary::-webkit-details-marker{

    display:none;

}

.why-card summary::marker,
.journey-step summary::marker,
.solution-item summary::marker{

    display:none;

    content:"";

}

.why-card summary::after,
.journey-step summary::after,
.solution-item summary::after{

    content:"+ More detail";

    display:inline-block;

    margin-top:14px;

    color:var(--accent);

    font-size:13px;

    font-weight:600;

    letter-spacing:.02em;

}

.why-card[open] summary::after,
.journey-step[open] summary::after,
.solution-item[open] summary::after{

    content:"\2013 Less detail";

}

.card-detail{

    margin-top:14px;

    padding-top:14px;

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

}

.card-detail p{

    color:var(--gray);

    font-size:14px;

    line-height:1.75;

}

.card-detail-link{

    display:inline-block;

    margin-top:12px;

    color:var(--accent);

    font-size:14px;

    font-weight:600;

    text-decoration:none;

}

.card-detail-link:hover{

    text-decoration:underline;

}

.journey-step[open],
.why-card[open],
.solution-item[open]{

    border-color:rgba(0,174,239,.35);

}

/* =====================================================
   SITE SEARCH (header trigger + overlay panel)
===================================================== */

.search-trigger{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

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

    background:none;

    color:var(--dark);

    cursor:pointer;

    margin-left:8px;

    transition:.2s;

}

.search-trigger:hover{

    border-color:var(--accent);

    color:var(--accent);

}

.search-trigger svg{

    width:18px;

    height:18px;

}

.search-overlay{

    position:fixed;

    inset:0;

    background:rgba(10,35,66,.6);

    backdrop-filter:blur(2px);

    z-index:999;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding:10vh 20px;

    opacity:0;

    visibility:hidden;

    transition:.25s;

}

.search-overlay.active{

    opacity:1;

    visibility:visible;

}

.search-panel{

    background:var(--white);

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

    width:100%;

    max-width:640px;

    max-height:70vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    box-shadow:var(--shadow-lg);

    transform:translateY(-16px);

    transition:.25s;

}

.search-overlay.active .search-panel{

    transform:translateY(0);

}

.search-panel-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

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

    flex-shrink:0;

}

.search-panel-header svg{

    width:20px;

    height:20px;

    color:var(--gray);

    flex-shrink:0;

}

.search-panel-header input{

    flex:1;

    border:none;

    outline:none;

    font-size:17px;

    font-family:inherit;

    color:var(--dark);

}

.search-close{

    border:none;

    background:none;

    font-size:24px;

    line-height:1;

    color:var(--gray);

    cursor:pointer;

    padding:4px;

}

.search-close:hover{

    color:var(--dark);

}

.search-results{

    overflow-y:auto;

    padding:8px;

}

.search-result{

    display:block;

    padding:14px 16px;

    border-radius:12px;

    text-decoration:none;

    color:inherit;

    transition:.15s;

}

.search-result:hover{

    background:var(--light);

}

.search-result-type{

    display:inline-block;

    font-family:var(--font-mono);

    font-size:11px;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:var(--accent);

    margin-bottom:6px;

}

.search-result h4{

    font-size:15.5px;

    color:var(--primary);

    margin-bottom:4px;

}

.search-result p{

    font-size:13.5px;

    color:var(--gray);

    line-height:1.5;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.search-empty{

    text-align:center;

    color:var(--gray);

    padding:30px 16px;

    font-size:14.5px;

}

@media (max-width:600px){

    .search-overlay{

        padding:0;

    }

    .search-panel{

        max-width:none;

        width:100%;

        height:100%;

        max-height:none;

        border-radius:0;

    }

}

.why-nexbridge-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:26px;

}

.solution-card-media{
    height:190px;
    margin:-30px -30px 24px;
    overflow:hidden;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:#e8eef5;
}

.solution-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.solution-item:hover .solution-card-media img{
    transform:scale(1.04);
}

.hero-banner{position:relative!important;display:block!important;width:100%!important;height:250px!important;min-height:250px!important;max-height:250px!important;padding:0!important;margin:0!important;overflow:hidden!important;background-image:linear-gradient(90deg,rgba(6,18,36,.98) 0%,rgba(6,18,36,.9) 38%,rgba(6,18,36,.38) 67%,rgba(6,18,36,.12) 100%),url('/assets/images/home-connected-robotics-hero.png')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}.hero-banner:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,16,32,.04),rgba(5,16,32,.18));z-index:0}.hero-banner>.container{position:absolute!important;inset:0!important;height:250px!important;min-height:0!important;max-height:250px!important;display:flex!important;align-items:center!important;z-index:2}.hero-banner-inner{max-width:610px;padding:10px 0!important;margin:0!important;transform:none!important}.hero-banner h1{max-width:630px;text-wrap:balance;font-size:clamp(28px,3vw,40px);line-height:1.02;margin-bottom:8px}.hero-banner .lead{max-width:590px;font-size:clamp(12.5px,1vw,14px);line-height:1.38;margin-bottom:12px}.hero-banner .hero-eyebrow{margin-bottom:7px;font-size:10px}.hero-banner .btn{padding:9px 18px;font-size:12px}.hero-banner .hero-cta{gap:10px}

/* Editorial knowledge system */
.home-pathways{background:#f5f8fc}.home-path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.home-path-card{display:flex;flex-direction:column;padding:30px;border:1px solid #dce5ef;border-radius:18px;background:#fff;transition:.25s ease}.home-path-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(27,42,74,.09);border-color:#75aeda}.home-path-card>span,.home-featured-card span{color:#3979b4;font-size:.72rem;font-weight:800;letter-spacing:.12em}.home-path-card h3{margin:11px 0;color:#1b2a4a;font-size:1.2rem;line-height:1.42}.home-path-card p{color:#687589;line-height:1.64;flex:1}.home-path-card>div{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid #e5eaf0}.home-path-card a{color:#3979b4;font-size:.82rem;font-weight:750;text-decoration:none}.home-path-card a:last-child{color:#58677a}.home-knowledge{background:#fff}.home-featured-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px}.home-featured-card{position:relative;display:flex;min-height:410px;overflow:hidden;border-radius:20px;color:#fff;text-decoration:none;background:#172742}.home-featured-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.home-featured-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(8,21,40,.94) 100%)}.home-featured-card>div{position:relative;z-index:1;align-self:flex-end;padding:28px}.home-featured-card span{color:#8ac5f5}.home-featured-card h3{margin:9px 0 0;color:#fff;line-height:1.35}.home-featured-card p{color:rgba(255,255,255,.72);line-height:1.55}.home-featured-card:hover img{transform:scale(1.04)}.home-library-link{text-align:center;margin-top:30px}.finder-grid a{display:flex;justify-content:space-between;align-items:center}.finder-grid a span{color:#5b9bd5}
.diagnostic-grid,.deliverable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.diagnostic-card{display:block;padding:30px;border:1px solid #dce5ef;border-radius:18px;background:#fff;text-decoration:none;color:inherit;transition:.25s ease}.diagnostic-card:hover{transform:translateY(-5px);border-color:#6aa5d7;box-shadow:0 18px 46px rgba(27,42,74,.1)}.diagnostic-card span,.solution-brief-label{display:block;color:#3979b4;font-size:.72rem;font-weight:800;letter-spacing:.13em}.diagnostic-card h3{margin:10px 0;color:#1b2a4a;font-size:1.18rem;line-height:1.4}.diagnostic-card p{color:#69768a;line-height:1.62}.diagnostic-card b{color:#3979b4;font-size:.84rem}.solution-area{background:#f5f8fc}.deliverable-card{padding:28px;border-top:3px solid #5b9bd5;background:#fff;box-shadow:0 12px 34px rgba(27,42,74,.07)}.deliverable-card b{color:#5b9bd5;font-size:.75rem}.deliverable-card h3{margin:10px 0;color:#1b2a4a}.deliverable-card p{color:#667386;line-height:1.62}.deliverable-card span{display:block;margin-top:18px;padding-top:14px;border-top:1px solid #e3e8ef;color:#33455f;font-size:.82rem;font-weight:700}.engagement-path{background:#172742;color:#fff}.engagement-path .section-title h2{color:#fff}.engagement-path .section-title p{color:rgba(255,255,255,.68)}.engagement-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.14)}.engagement-steps>div{padding:30px;background:#172742}.engagement-steps strong{color:#75b6ed;font-size:.78rem}.engagement-steps h3{margin:10px 0;color:#fff}.engagement-steps p{color:rgba(255,255,255,.68);line-height:1.6}
.solution-brief-block{margin:52px 0;padding:36px;border:1px solid #dfe6ef;border-radius:18px;background:#f8fafc}.solution-brief-block>h2{margin:8px 0 24px;color:#1b2a4a}.signal-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.signal-list>div{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px;background:#fff;border-radius:12px}.signal-list b{color:#5b9bd5;font-size:.72rem}.signal-list p{margin:0;color:#4d5c70;line-height:1.55}.solution-brief-dark{background:#172742;border-color:#172742;color:#fff}.solution-brief-dark>h2{color:#fff}.intervention-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.intervention-grid>div{padding:20px;border:1px solid rgba(255,255,255,.14);border-radius:12px}.intervention-grid h3{margin:0 0 8px;color:#fff;font-size:1rem}.intervention-grid p{margin:0;color:rgba(255,255,255,.7);line-height:1.58}.deliverable-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none!important;margin:0!important;padding:0!important}.deliverable-list li{position:relative;margin:0!important;padding:15px 16px 15px 42px;background:#fff;border-radius:10px}.deliverable-list li:before{content:"✓";position:absolute;left:16px;color:#3979b4;font-weight:900}
.knowledge-pillars{margin-bottom:72px}.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pillar-card{display:block;padding:28px;border:1px solid #dfe6ef;border-radius:18px;background:linear-gradient(145deg,#fff,#f7f9fc);text-decoration:none;color:inherit;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.pillar-card:hover{transform:translateY(-4px);border-color:rgba(91,155,213,.55);box-shadow:0 18px 42px rgba(27,42,74,.09)}.pillar-card b{color:#5b9bd5;font-size:.76rem;letter-spacing:.14em}.pillar-card h3{margin:10px 0 8px;color:#1b2a4a;font-size:1.15rem}.pillar-card p{margin:0 0 18px;color:#667386;line-height:1.62}.pillar-card span{color:#3979b4;font-size:.86rem;font-weight:750}
.article-deck{max-width:780px;margin:22px auto 0;color:rgba(255,255,255,.76);font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.65}
.article-meta-row{display:flex;gap:12px;align-items:center;margin:20px 0 30px;color:#687386;font-size:.86rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.article-meta-row span+span:before{content:"";display:inline-block;width:4px;height:4px;margin:0 12px 2px 0;border-radius:50%;background:#5b9bd5}
.article-body>p:first-child{font-size:1.12rem;line-height:1.78;color:#26364f}.article-body h2{margin-top:2.4em}
.article-body img{display:block;width:100%;margin:36px 0;border-radius:16px;border:1px solid rgba(27,42,74,.1);background:#f4f7fb}
.engineering-lens{margin:52px 0 0;padding:34px 36px;border:1px solid rgba(91,155,213,.28);border-radius:18px;background:linear-gradient(145deg,#f4f8fd,#fff);box-shadow:0 16px 44px rgba(27,42,74,.07)}
.engineering-lens__eyebrow,.article-cta span{display:block;color:#3979b4;font-size:.74rem;font-weight:800;letter-spacing:.14em;margin-bottom:8px}.engineering-lens h2{margin:0 0 18px;color:#1b2a4a;font-size:1.45rem}.engineering-lens ul{margin:0;padding-left:20px}.engineering-lens li{margin:11px 0;line-height:1.62;color:#34435b}
.validation-path{margin:34px 0;padding:8px 0}.validation-path__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:16px;overflow:hidden;border:1px solid #dfe6ef;border-radius:16px;background:#dfe6ef}.validation-path__grid>div{padding:26px 24px;background:#fff}.validation-path b{color:#5b9bd5;font-size:.75rem;letter-spacing:.12em}.validation-path h3{margin:8px 0;font-size:1.05rem;color:#1b2a4a}.validation-path p{margin:0;color:#5f6c7e;font-size:.92rem;line-height:1.58}
.article-cta{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin:32px 0 0;padding:32px 36px;border-radius:18px;background:#172742;color:#fff}.article-cta h2{margin:0 0 8px;font-size:1.45rem;color:#fff}.article-cta p{margin:0;color:rgba(255,255,255,.72);line-height:1.6}.article-cta .btn{white-space:nowrap}
.card-photo-wrap{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;margin-bottom:18px;background:#eef3f8;aspect-ratio:16/10}.card-photo-wrap .card-photo{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;margin:0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.card-photo-wrap img[src$=".svg"]{object-fit:contain;padding:0}.card:hover .card-photo-wrap .card-photo{transform:scale(1.035)}
.card-taxonomy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.card-taxonomy .blog-tag{margin:0}.card-series{color:#718096;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-align:right}
@media(max-width:900px){.pillar-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.diagnostic-grid,.deliverable-grid{grid-template-columns:repeat(2,1fr)}.engagement-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.home-path-grid{grid-template-columns:repeat(2,1fr)}.home-featured-grid{grid-template-columns:1fr 1fr}.home-featured-card--wide{grid-column:1/-1}}
@media(max-width:992px){.hero-banner{height:260px!important;min-height:260px!important;max-height:260px!important;background-position:64% center!important}.hero-banner>.container{height:260px!important;max-height:260px!important}}
@media(max-width:700px){.article-cta,.validation-path__grid,.pillar-grid,.diagnostic-grid,.deliverable-grid,.engagement-steps,.signal-list,.intervention-grid,.deliverable-list,.home-path-grid,.home-featured-grid{grid-template-columns:1fr}.home-featured-card--wide{grid-column:auto}.home-featured-card{min-height:340px}.hero-banner{height:280px!important;min-height:280px!important;max-height:280px!important;background-position:68% center!important}.hero-banner:before{content:"";position:absolute;inset:0;background:rgba(6,18,36,.48)}.hero-banner>.container{height:280px!important;max-height:280px!important;padding-top:10px;padding-bottom:10px}.hero-banner h1{font-size:clamp(25px,7.6vw,32px);line-height:1.02}.hero-banner .lead{font-size:12.5px;line-height:1.35;margin-bottom:11px;max-width:92%}.hero-banner .hero-eyebrow{font-size:9px;margin-bottom:6px}.hero-banner .btn{padding:8px 14px;font-size:11px}.engineering-lens,.article-cta,.solution-brief-block{padding:26px 22px}.article-meta-row{align-items:flex-start;flex-direction:column;gap:5px}.article-meta-row span+span:before{display:none}}

/* Simple Knowledge library */
.knowledge-library{background:#f7f9fc}
.knowledge-simple-intro{display:grid;grid-template-columns:1fr minmax(280px,520px);gap:48px;align-items:end;margin-bottom:34px;padding-bottom:28px;border-bottom:1px solid #dce4ed}
.knowledge-simple-intro>div>span,.knowledge-list-header>div>span,.knowledge-list-main>span{color:#3979b4;font-size:.72rem;font-weight:800;letter-spacing:.12em}
.knowledge-simple-intro h2{margin:8px 0 0;color:#1b2a4a;font-size:clamp(1.8rem,3vw,2.5rem)}
.knowledge-simple-intro>p{margin:0;color:#667386;line-height:1.65}
.knowledge-toolbar--simple{margin-bottom:52px}
.knowledge-list-groups{gap:64px}
.knowledge-list-header{align-items:flex-start;margin-bottom:0;padding-bottom:22px}
.knowledge-list-header h2{margin:7px 0 8px;color:#1b2a4a;font-size:1.55rem}
.knowledge-list-header p{max-width:780px;margin:0;color:#667386;line-height:1.6}
.knowledge-article-list{border-top:1px solid #dce4ed}
.knowledge-list-item{display:grid!important;grid-template-columns:minmax(0,1fr) 170px;gap:28px;align-items:center;padding:24px 4px!important;border:0!important;border-bottom:1px solid #dce4ed!important;border-radius:0!important;background:transparent!important;color:inherit;text-decoration:none;box-shadow:none!important;transition:padding .2s ease,background .2s ease}
.knowledge-list-item:hover{transform:none!important;padding-left:14px!important;padding-right:14px!important;background:#fff!important}
.knowledge-list-main h3{margin:7px 0 8px;color:#1b2a4a;font-size:1.08rem;line-height:1.4}
.knowledge-list-main p{display:-webkit-box;overflow:hidden;margin:0;color:#687589;font-size:.92rem;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.knowledge-list-meta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.knowledge-list-meta time{color:#7a8798;font-size:.78rem}
.knowledge-list-meta b{color:#3979b4;font-size:.82rem}
@media(max-width:700px){.knowledge-simple-intro{grid-template-columns:1fr;gap:14px}.knowledge-list-header{display:block}.knowledge-list-header>.topic-group-count{display:block;margin-top:12px}.knowledge-list-item{grid-template-columns:1fr;gap:14px;padding:20px 0!important}.knowledge-list-meta{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}.knowledge-list-main p{-webkit-line-clamp:3}}

/* Future paid technical-document library */
.technical-library{background:#f7f9fc}
.technical-library-intro{display:grid;grid-template-columns:1fr minmax(300px,540px);gap:54px;align-items:end;margin-bottom:44px;padding-bottom:32px;border-bottom:1px solid #dce4ed}
.technical-library-intro span{color:#3979b4;font-size:.72rem;font-weight:800;letter-spacing:.14em}
.technical-library-intro h2{max-width:650px;margin:9px 0 0;color:#1b2a4a;font-size:clamp(1.8rem,3vw,2.55rem);line-height:1.18}
.technical-library-intro p{margin:0;color:#667386;line-height:1.7}
.technical-document-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.technical-document-category{display:flex;flex-direction:column;min-height:360px;padding:30px;border:1px solid #dce4ed;border-radius:16px;background:#fff}
.technical-document-category>b{color:#b8c3d0;font-size:2.2rem;line-height:1}
.technical-document-category>span{margin-top:28px;color:#3979b4;font-size:.7rem;font-weight:800;letter-spacing:.13em}
.technical-document-category h3{margin:9px 0 12px;color:#1b2a4a;font-size:1.25rem;line-height:1.35}
.technical-document-category p{flex:1;margin:0;color:#667386;line-height:1.65}
.technical-document-category>div{margin-top:24px;padding-top:16px;border-top:1px solid #e3e8ef;color:#43546b;font-size:.8rem;font-weight:700}
.technical-library-note{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-top:32px;padding:22px 26px;border-radius:12px;background:#172742;color:#fff}
.technical-library-note strong{color:#75b6ed;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.technical-library-note p{margin:0;color:rgba(255,255,255,.72);line-height:1.55}
.technical-library-note a{color:#fff;font-size:.84rem;font-weight:750;white-space:nowrap}
.technical-library-note>div{display:flex;flex-wrap:wrap;gap:18px}
@media(max-width:900px){.technical-document-grid{grid-template-columns:1fr}.technical-document-category{min-height:0}.technical-library-note{grid-template-columns:1fr}.technical-library-note a{white-space:normal}}
@media(max-width:700px){.technical-library-intro{grid-template-columns:1fr;gap:16px}}

/* Homepage: solution-led journey */
.home-solutions{background:#f5f8fc}
.home-solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.home-solution-card{display:flex;min-width:0;overflow:hidden;flex-direction:column;border:1px solid #dce5ef;border-radius:18px;background:#fff;color:inherit;text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.home-solution-card:hover{transform:translateY(-5px);border-color:#75aeda;box-shadow:0 18px 44px rgba(27,42,74,.1)}
.home-solution-image{height:210px;overflow:hidden;background:#e8eef5}
.home-solution-image img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.home-solution-card:hover img{transform:scale(1.04)}
.home-solution-body{display:flex;flex:1;flex-direction:column;padding:27px}
.home-solution-body b,.home-split-heading span,.home-delivery-copy>span,.home-partner-copy>span{color:#3979b4;font-size:.71rem;font-weight:800;letter-spacing:.13em}
.home-solution-body h3{margin:10px 0;color:#1b2a4a;font-size:1.18rem;line-height:1.38}
.home-solution-body p{flex:1;margin:0;color:#667386;line-height:1.63}
.home-solution-body>span{margin-top:22px;padding-top:16px;border-top:1px solid #e4e9ef;color:#3979b4;font-size:.84rem;font-weight:750}

.home-challenges{background:#fff}
.home-split-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,520px);gap:50px;align-items:end;margin-bottom:36px}
.home-split-heading h2{margin:8px 0 0;color:#1b2a4a;font-size:clamp(1.8rem,3vw,2.5rem)}
.home-split-heading>p{margin:0;color:#667386;line-height:1.65}
.home-problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.home-problem-grid>a{display:flex;min-height:210px;flex-direction:column;padding:24px;border:1px solid #dce5ef;border-radius:14px;background:#f8fafc;color:inherit;text-decoration:none;transition:.22s ease}
.home-problem-grid>a:hover{transform:translateY(-3px);border-color:#75aeda;background:#fff;box-shadow:0 12px 32px rgba(27,42,74,.08)}
.home-problem-grid b{color:#9aa8b8;font-size:.76rem}
.home-problem-grid h3{margin:14px 0 8px;color:#1b2a4a;font-size:1.03rem;line-height:1.4}
.home-problem-grid p{flex:1;margin:0;color:#6a7687;font-size:.9rem;line-height:1.55}
.home-problem-grid a>span{margin-top:18px;color:#3979b4;font-size:.76rem;font-weight:750;text-transform:uppercase;letter-spacing:.04em}
.home-problem-grid .home-problem-card--wide{grid-column:1/-1;display:grid;grid-template-columns:42px minmax(220px,.8fr) 1.2fr auto;gap:20px;align-items:center;min-height:0}
.home-problem-card--wide h3,.home-problem-card--wide p,.home-problem-card--wide>span{margin:0}

.home-delivery{background:#172742;color:#fff}
.home-delivery-layout{display:grid;grid-template-columns:minmax(300px,.85fr) 1.4fr;gap:64px;align-items:center}
.home-delivery-copy>span{color:#75b6ed}
.home-delivery-copy h2{margin:10px 0 16px;color:#fff;font-size:clamp(1.9rem,3vw,2.6rem)}
.home-delivery-copy p{margin:0 0 26px;color:rgba(255,255,255,.7);line-height:1.7}
.home-delivery-steps{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.14);gap:1px}
.home-delivery-steps>div{padding:25px;background:#172742}
.home-delivery-steps b{color:#75b6ed;font-size:.75rem}
.home-delivery-steps h3{margin:8px 0;color:#fff;font-size:1rem}
.home-delivery-steps p{margin:0;color:rgba(255,255,255,.65);font-size:.88rem;line-height:1.55}

.home-partners{background:#fff}
.home-partner-layout{display:grid;grid-template-columns:minmax(300px,.85fr) 1.35fr;gap:64px;align-items:center}
.home-partner-copy h2{margin:9px 0 14px;color:#1b2a4a;font-size:clamp(1.8rem,3vw,2.45rem)}
.home-partner-copy p{color:#667386;line-height:1.7}
.home-partner-copy a{display:inline-block;margin-top:12px;color:#3979b4;font-weight:750;text-decoration:none}
.home-partner-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.home-partner-wall a{display:flex;min-height:150px;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:22px;border:1px solid #dce5ef;border-radius:14px;background:#f8fafc;color:#47576b;text-align:center;text-decoration:none;transition:.2s ease}
.home-partner-wall a:hover{border-color:#75aeda;background:#fff;box-shadow:0 10px 28px rgba(27,42,74,.08)}
.home-partner-wall img{width:auto;max-width:145px;height:42px;object-fit:contain}
.home-partner-wall span{font-size:.78rem;font-weight:700}

.home-knowledge{background:#f5f8fc}
.home-knowledge-list{border-top:1px solid #dce5ef}
.home-knowledge-list>a{display:grid;grid-template-columns:190px minmax(260px,.9fr) 1.2fr auto;gap:24px;align-items:center;padding:24px 4px;border-bottom:1px solid #dce5ef;color:inherit;text-decoration:none;transition:padding .2s ease,background .2s ease}
.home-knowledge-list>a:hover{padding-right:14px;padding-left:14px;background:#fff}
.home-knowledge-list span{color:#3979b4;font-size:.7rem;font-weight:800;letter-spacing:.1em}
.home-knowledge-list h3{margin:0;color:#1b2a4a;font-size:1.02rem;line-height:1.4}
.home-knowledge-list p{margin:0;color:#687589;font-size:.9rem;line-height:1.55}
.home-knowledge-list b{color:#3979b4;font-size:.82rem;white-space:nowrap}
.home-library-link{text-align:center;margin-top:28px}
.home-library-link a{color:#3979b4;font-weight:750;text-decoration:none}

@media(max-width:1000px){.home-solution-grid,.home-problem-grid{grid-template-columns:repeat(2,1fr)}.home-problem-grid .home-problem-card--wide{grid-column:1/-1}.home-delivery-layout,.home-partner-layout{grid-template-columns:1fr;gap:40px}.home-knowledge-list>a{grid-template-columns:150px 1fr}.home-knowledge-list p{display:none}.home-knowledge-list b{text-align:right}}
@media(max-width:700px){.home-solution-grid,.home-problem-grid,.home-split-heading{grid-template-columns:1fr}.home-split-heading{gap:14px}.home-solution-image{height:190px}.home-problem-grid .home-problem-card--wide{display:flex;grid-column:auto;align-items:stretch}.home-delivery-steps,.home-partner-wall{grid-template-columns:1fr}.home-partner-wall a{min-height:120px}.home-knowledge-list>a{grid-template-columns:1fr;gap:8px;padding:20px 0}.home-knowledge-list b{text-align:left}.home-knowledge-list p{display:block}.home-library-link{text-align:left}}

/* Homepage positioning: distinct from the Solutions catalog */
.home-positioning{padding-top:72px;padding-bottom:72px;background:#f5f8fc}
.home-positioning-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:72px;align-items:center}
.home-positioning-visual{position:relative;min-height:420px;overflow:hidden;border-radius:20px;background:#172742;box-shadow:0 16px 40px rgba(27,42,74,.1);transition:transform .4s ease,box-shadow .4s ease}
.home-positioning-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(8,21,40,.88) 100%)}
.home-positioning-visual:before{content:"";position:absolute;z-index:1;top:-40%;left:-70%;width:42%;height:180%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transform:rotate(12deg);transition:left .8s cubic-bezier(.2,.7,.2,1)}
.home-positioning-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.home-positioning-visual:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(27,42,74,.16)}
.home-positioning-visual:hover:before{left:130%}
.home-positioning-visual:hover>img{transform:scale(1.045);filter:saturate(1.04) contrast(1.02)}
.home-positioning-visual>div{position:absolute;z-index:1;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:7px;padding:30px;color:#fff}
.home-positioning-visual strong{color:#8ac5f5;font-size:.7rem;letter-spacing:.14em}
.home-positioning-visual span{font-size:1.08rem;font-weight:700}
.home-positioning-copy>span{color:#3979b4;font-size:.71rem;font-weight:800;letter-spacing:.14em}
.home-positioning-copy>h2{margin:10px 0 18px;color:#1b2a4a;font-size:clamp(2rem,3.4vw,3rem);line-height:1.12}
.home-positioning-copy>p{margin:0;color:#637185;font-size:1.02rem;line-height:1.72}
.home-positioning-points{margin:30px 0 26px;border-top:1px solid #d9e2eb}
.home-positioning-points>div{display:grid;grid-template-columns:36px 1fr;column-gap:14px;padding:17px 0;border-bottom:1px solid #d9e2eb}
.home-positioning-points b{grid-row:1/3;color:#8b9bad;font-size:.72rem;line-height:1.8}
.home-positioning-points h3{margin:0 0 3px;color:#1b2a4a;font-size:1rem}
.home-positioning-points p{margin:0;color:#6a7789;font-size:.88rem;line-height:1.5}
.home-positioning-copy>a{color:#3979b4;font-size:.88rem;font-weight:750;text-decoration:none}
@media(max-width:950px){.home-positioning-layout{grid-template-columns:1fr;gap:34px}.home-positioning-visual{min-height:360px}.home-positioning-copy{max-width:720px}}
@media(max-width:600px){.home-positioning{padding-top:52px;padding-bottom:52px}.home-positioning-visual{min-height:270px;border-radius:14px}.home-positioning-visual>div{padding:20px}.home-positioning-copy>h2{font-size:1.85rem}.home-positioning-copy>p{font-size:.96rem}}
@media(hover:none){.home-positioning-visual:hover{transform:none;box-shadow:0 16px 40px rgba(27,42,74,.1)}.home-positioning-visual:hover:before{left:-70%}.home-positioning-visual:hover>img{transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.home-positioning-visual,.home-positioning-visual:before,.home-positioning-visual>img{transition:none!important}}

/* Engineering application domains */
.home-domains{padding-top:72px;padding-bottom:72px;background:#fff}
.home-domain-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.home-domain-card{position:relative;display:flex;min-height:360px;overflow:hidden;align-items:flex-end;border-radius:18px;background:#172742;color:#fff}
.home-domain-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
.home-domain-card:hover>img{transform:scale(1.035)}
.home-domain-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,19,36,.02) 24%,rgba(7,19,36,.93) 100%)}
.home-domain-content{position:relative;z-index:1;width:100%;padding:32px}
.home-domain-content>span{color:#8ac5f5;font-size:.7rem;font-weight:800;letter-spacing:.14em}
.home-domain-content h3{max-width:570px;margin:9px 0 10px;color:#fff;font-size:1.35rem;line-height:1.35}
.home-domain-content p{max-width:620px;margin:0;color:rgba(255,255,255,.72);line-height:1.62}
.home-domain-content>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.home-domain-content b{padding:7px 10px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(8,21,40,.25);color:#fff;font-size:.68rem;letter-spacing:.04em}
@media(max-width:800px){.home-domain-grid{grid-template-columns:1fr}.home-domain-card{min-height:330px}}
@media(max-width:500px){.home-domains{padding-top:52px;padding-bottom:52px}.home-domain-card{min-height:300px;border-radius:14px}.home-domain-content{padding:22px}.home-domain-content h3{font-size:1.1rem}.home-domain-content p{font-size:.88rem}.home-domain-content b{font-size:.62rem}}

@media(max-width:700px){
    .hero-banner{height:330px!important;min-height:330px!important;max-height:330px!important}
    .hero-banner>.container{height:330px!important;max-height:330px!important}
    .hero-banner-inner{max-width:100%!important}
    .hero-banner h1{font-size:clamp(24px,7vw,30px)!important;line-height:1.06!important}
    .hero-banner .lead{max-width:100%;font-size:12px;line-height:1.42}
    .hero-banner .hero-cta{flex-wrap:wrap}
    .home-challenges,.home-delivery,.home-partners,.home-knowledge{padding-top:54px;padding-bottom:54px}
    .home-problem-grid>a{min-height:0;padding:21px}
    .home-problem-grid h3{margin-top:10px}
    .home-problem-grid a>span{margin-top:14px}
    .home-delivery-copy h2,.home-partner-copy h2{font-size:1.8rem}
    .home-delivery-steps>div{padding:21px}
}

/* Detailed solution capability sections */
.solution-depth{background:#fff}
.solution-depth-title{max-width:850px;margin-right:auto;margin-bottom:54px;margin-left:auto}
.solution-depth-block{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);gap:54px;align-items:start;padding:56px 0;border-top:1px solid #dce4ed;scroll-margin-top:90px}
.solution-depth-block--reverse .solution-depth-image{order:2}
.solution-depth-image{position:sticky;top:100px;height:430px;overflow:hidden;border-radius:18px;background:#e8eef5}
.solution-depth-image img{width:100%;height:100%;object-fit:cover}
.solution-depth-content>span{color:#3979b4;font-size:.71rem;font-weight:800;letter-spacing:.13em}
.solution-depth-content>h2{margin:9px 0 14px;color:#1b2a4a;font-size:clamp(1.65rem,2.7vw,2.35rem);line-height:1.2}
.solution-depth-lead{margin:0 0 26px;color:#5f6d80;font-size:1rem;line-height:1.7}
.solution-capability-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.solution-capability-grid>div{padding:19px;border:1px solid #dfe6ee;border-radius:12px;background:#f8fafc}
.solution-capability-grid h3{margin:0 0 7px;color:#1b2a4a;font-size:.98rem}
.solution-capability-grid p{margin:0;color:#687589;font-size:.87rem;line-height:1.56}
.solution-output{margin-top:18px;padding:18px 20px;border-left:3px solid #5b9bd5;background:#eef4fa}
.solution-output b{color:#3979b4;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.solution-output p{margin:6px 0 0;color:#43536a;font-size:.88rem;line-height:1.58}
@media(max-width:950px){.solution-depth-block{grid-template-columns:1fr;gap:30px}.solution-depth-block--reverse .solution-depth-image{order:0}.solution-depth-image{position:relative;top:auto;height:360px}}
@media(max-width:650px){.solution-depth-title{margin-bottom:30px}.solution-depth-block{gap:24px;padding:38px 0}.solution-depth-image{height:240px;border-radius:14px}.solution-capability-grid{grid-template-columns:1fr}.solution-depth-content>h2{font-size:1.55rem}.solution-depth-lead{font-size:.94rem}.solution-capability-grid>div{padding:17px}.solution-output{padding:16px}}

/* ERP / MES scaling decision framework */
.solution-stage-map{display:grid;gap:10px;margin:28px 0}
.solution-stage-map>div{display:grid;grid-template-columns:92px 1fr;column-gap:16px;padding:19px;border:1px solid #dfe6ee;border-radius:12px;background:#f8fafc}
.solution-stage-map b{grid-row:1/5;color:#3979b4;font-size:.68rem;letter-spacing:.08em}
.solution-stage-map h3{margin:0 0 5px;color:#1b2a4a;font-size:1rem}
.solution-stage-map p{margin:0 0 9px;color:#687589;font-size:.87rem;line-height:1.52}
.solution-stage-map strong{color:#34455d;font-size:.77rem}
.solution-stage-map span{margin-top:3px;color:#687589;font-size:.84rem;line-height:1.5}

.solution-decision-signals{margin:30px 0}
.solution-decision-signals>h3,.erp-mes-comparison>h3{margin:0 0 7px;color:#1b2a4a;font-size:1.18rem}
.solution-note{margin:0 0 15px;color:#7b8796;font-size:.78rem;line-height:1.5}
.solution-decision-signals ul{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;padding:1px;list-style:none;background:#dfe6ee}
.solution-decision-signals li{display:flex;min-width:0;flex-direction:column;gap:5px;padding:16px;background:#fff}
.solution-decision-signals li b{color:#3979b4;font-size:.8rem}
.solution-decision-signals li span{color:#687589;font-size:.83rem;line-height:1.48}

.erp-mes-comparison{margin:30px 0}
.erp-mes-table{overflow:hidden;margin-top:14px;border:1px solid #dce4ed;border-radius:12px}
.erp-mes-row{display:grid;grid-template-columns:145px 1fr 1fr;border-top:1px solid #dce4ed}
.erp-mes-row:first-child{border-top:0}
.erp-mes-row>*{margin:0;padding:14px;border-left:1px solid #dce4ed;font-size:.82rem;line-height:1.5}
.erp-mes-row>*:first-child{border-left:0;background:#f5f8fc;color:#34455d;font-weight:700}
.erp-mes-row p{color:#687589}
.erp-mes-row--head{background:#172742;color:#fff}
.erp-mes-row--head>*{border-color:rgba(255,255,255,.14);background:transparent!important;color:#fff!important}

.solution-tradeoffs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 18px}
.solution-tradeoff{padding:19px;border-radius:12px}
.solution-tradeoff>span{font-size:.68rem;font-weight:800;letter-spacing:.1em}
.solution-tradeoff ul{margin:13px 0 0;padding-left:18px}
.solution-tradeoff li{margin:7px 0;font-size:.83rem;line-height:1.45}
.solution-tradeoff--good{border:1px solid #bfdacb;background:#f3faf6;color:#315c43}
.solution-tradeoff--bad{border:1px solid #e5c7c3;background:#fff7f5;color:#73453f}

@media(max-width:650px){
    .solution-stage-map>div{grid-template-columns:1fr;padding:17px}
    .solution-stage-map b{grid-row:auto;margin-bottom:7px}
    .solution-decision-signals ul,.solution-tradeoffs{grid-template-columns:1fr}
    .erp-mes-row{grid-template-columns:1fr 1fr}
    .erp-mes-row>*:first-child{grid-column:1/-1;border-bottom:1px solid #dce4ed}
    .erp-mes-row>*:nth-child(2){border-left:0}
    .erp-mes-row--head>span{display:none}
    .erp-mes-row--head>b{grid-column:auto;border-bottom:0}
    .erp-mes-row--head>b:nth-child(2){border-left:0}
}

/* Member library MVP */
.member-nav-link{padding:8px 13px;border:1px solid #d9e2eb;border-radius:999px;color:#33455f;font-size:.78rem;font-weight:750;text-decoration:none}
.member-nav-link:hover{border-color:#5b9bd5;color:#3979b4}
.member-shell{min-height:calc(100vh - 160px);background:#f5f8fc}
.member-shell-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,480px);gap:80px;align-items:center}
.member-intro>span,.member-dashboard-header span{color:#3979b4;font-size:.72rem;font-weight:800;letter-spacing:.14em}
.member-intro h1,.member-dashboard-header h1{margin:10px 0 15px;color:#1b2a4a;font-size:clamp(2rem,4vw,3.4rem);line-height:1.1}
.member-intro>p{max-width:650px;color:#637185;font-size:1.03rem;line-height:1.7}
.member-intro>a{display:inline-block;margin-top:12px;color:#3979b4;font-weight:750;text-decoration:none}
.member-intro ul{margin:24px 0 0;padding-left:20px;color:#526176}
.member-intro li{margin:10px 0}
.member-card{padding:34px;border:1px solid #dce4ed;border-radius:18px;background:#fff;box-shadow:0 18px 44px rgba(27,42,74,.08)}
.member-card h2{margin:0 0 8px;color:#1b2a4a}
.member-card>p{margin:0 0 24px;color:#687589;line-height:1.55}
.member-form{display:flex;flex-direction:column;gap:17px}
.member-form label{display:flex;flex-direction:column;gap:7px;color:#34455d;font-size:.82rem;font-weight:700}
.member-form input{width:100%;padding:12px 13px;border:1px solid #cfd9e4;border-radius:9px;background:#fff;color:#1b2a4a;font:inherit}
.member-form input:focus{outline:0;border-color:#5b9bd5;box-shadow:0 0 0 3px rgba(91,155,213,.13)}
.member-form small{color:#7b8796;font-weight:400}
.member-form button:disabled{cursor:wait;opacity:.65}
.member-form-status{min-height:20px;margin:0;color:#3979b4;font-size:.82rem;line-height:1.5}
.member-form-status.is-error{color:#a44338}
.member-form-footer{display:flex;justify-content:space-between;gap:15px;margin-top:20px;padding-top:18px;border-top:1px solid #e4e9ef}
.member-form-footer a,.member-form-footer button{border:0;background:none;color:#3979b4;font:inherit;font-size:.8rem;font-weight:700;text-decoration:none;cursor:pointer}
.member-config-warning{margin-bottom:18px;padding:13px 15px;border:1px solid #e8d49f;border-radius:9px;background:#fff9e8;color:#755d21;font-size:.8rem;line-height:1.5}
.member-dashboard{min-height:calc(100vh - 160px);background:#f5f8fc}
.member-dashboard-header{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:36px;padding-bottom:25px;border-bottom:1px solid #dce4ed}
.member-dashboard-header h1{font-size:clamp(2rem,4vw,3rem)}
.member-dashboard-header p{margin:0;color:#687589}
.member-empty{padding:50px;border:1px dashed #bdcad8;border-radius:16px;background:#fff;text-align:center}
.member-empty h2{margin:0 0 8px;color:#1b2a4a}
.member-empty p{margin:0 0 22px;color:#687589}
.member-document-grid{display:grid;gap:14px}
.member-document-card{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:26px;border:1px solid #dce4ed;border-radius:14px;background:#fff}
.member-document-card span{color:#3979b4;font-size:.69rem;font-weight:800;letter-spacing:.1em}
.member-document-card h2{margin:8px 0;color:#1b2a4a;font-size:1.15rem}
.member-document-card p{margin:0;color:#687589;line-height:1.55}
.member-document-meta{display:flex;flex-direction:column;align-items:flex-end;gap:13px}
@media(max-width:900px){.member-nav-link{display:none}.member-shell-grid{grid-template-columns:1fr;gap:36px}.member-intro{max-width:700px}}
@media(max-width:650px){.member-shell,.member-dashboard{padding-top:52px;padding-bottom:52px}.member-card{padding:24px}.member-dashboard-header,.member-document-card{display:flex;flex-direction:column;align-items:stretch}.member-dashboard-header .btn{align-self:flex-start}.member-document-meta{align-items:stretch}.member-empty{padding:34px 22px}.member-form-footer{flex-direction:column}}

/* Homepage hero: Vietnam technology time-lapse */
.hero-banner{background-image:none!important;background-color:#071426!important}
.hero-timelapse{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.hero-era{position:absolute;inset:-1%;opacity:0;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:opacity,transform;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}
.hero-era--reconstruction{opacity:1;background-image:url('/assets/images/hero-timelapse/01-reconstruction.webp');animation-name:hero-era-one}
.hero-era--industrialization{background-image:url('/assets/images/hero-timelapse/02-industrialization.webp');animation-name:hero-era-two}
.hero-era--high-tech{background-image:url('/assets/images/hero-timelapse/03-high-tech-manufacturing.webp');animation-name:hero-era-three}
.hero-era--future{background-image:url('/assets/images/hero-timelapse/04-ai-robotics-aerospace.webp');animation-name:hero-era-four}
.hero-era--technology-panorama{background-image:url('/assets/images/hero-timelapse/05-technology-panorama.webp');animation-name:hero-era-five}
.hero-banner:after{z-index:1!important;background:linear-gradient(90deg,rgba(5,16,32,.42) 0%,rgba(5,16,32,.12) 48%,rgba(5,16,32,.05) 100%),linear-gradient(180deg,rgba(5,16,32,.02),rgba(5,16,32,.18))!important}
.hero-banner>.container{z-index:2!important}
@keyframes hero-era-one{0%,13%{opacity:1;transform:scale(1.01)}20%,94%{opacity:0;transform:scale(1.05)}100%{opacity:1;transform:scale(1.06)}}
@keyframes hero-era-two{0%,13%{opacity:0;transform:scale(1.01)}20%,33%{opacity:1;transform:scale(1.025)}40%,100%{opacity:0;transform:scale(1.055)}}
@keyframes hero-era-three{0%,33%{opacity:0;transform:scale(1.01)}40%,53%{opacity:1;transform:scale(1.025)}60%,100%{opacity:0;transform:scale(1.055)}}
@keyframes hero-era-four{0%,53%{opacity:0;transform:scale(1.01)}60%,73%{opacity:1;transform:scale(1.025)}80%,100%{opacity:0;transform:scale(1.055)}}
@keyframes hero-era-five{0%,73%{opacity:0;transform:scale(1.01)}80%,94%{opacity:1;transform:scale(1.025)}100%{opacity:0;transform:scale(1.055)}}
@media(max-width:700px){.hero-era{background-position:62% center}.hero-banner:after{background:linear-gradient(90deg,rgba(5,16,32,.72),rgba(5,16,32,.24))!important}}
@media(prefers-reduced-motion:reduce){.hero-era{display:none;animation:none}.hero-era--technology-panorama{display:block;opacity:1;transform:none}}

/* Compact hero content: keep every element inside the fixed banner */
.hero-banner-inner{max-width:570px!important;padding:8px 0!important}
.hero-banner h1{max-width:590px!important;font-size:clamp(25px,2.45vw,34px)!important;line-height:1!important;margin-bottom:7px!important}
.hero-banner h1 .accent-line{display:inline!important}
.hero-banner .lead{max-width:555px!important;font-size:12.5px!important;line-height:1.32!important;margin-bottom:10px!important}
.hero-banner .hero-eyebrow{margin-bottom:6px!important;font-size:9px!important}
.hero-banner .hero-cta{gap:8px!important}
.hero-banner .btn{padding:8px 16px!important;font-size:11px!important}
@media(max-width:700px){.hero-banner-inner{max-width:92%!important}.hero-banner h1{font-size:clamp(23px,7vw,29px)!important}.hero-banner h1 .accent-line{display:block!important}.hero-banner .lead{font-size:11.5px!important;line-height:1.3!important}.hero-banner .btn{padding:7px 12px!important;font-size:10px!important}}

/* Give the time-lapse enough vertical canvas for the satellite and AI-chip foreground. */
.hero-banner{height:520px!important;min-height:520px!important;max-height:520px!important}
.hero-banner>.container{height:520px!important;max-height:520px!important}
.hero-era--technology-panorama{background-position:center center}
@media(max-width:992px){
    .hero-banner{height:480px!important;min-height:480px!important;max-height:480px!important}
    .hero-banner>.container{height:480px!important;max-height:480px!important}
}
@media(max-width:700px){
    .hero-banner{height:440px!important;min-height:440px!important;max-height:440px!important}
    .hero-banner>.container{height:440px!important;max-height:440px!important}
    .hero-era--technology-panorama{background-position:72% center}
}

/* Mobile layout guardrails */
@media (max-width:700px){
    html,
    body{
        max-width:100%;
        overflow-x:clip;
    }

    main,
    section,
    article,
    .container,
    .container-sm,
    .container-lg,
    .section-title,
    .article-body,
    .hero-banner-inner,
    .page-header .container{
        min-width:0;
        max-width:100%;
    }

    h1,
    h2,
    h3,
    p,
    li,
    a,
    span{
        overflow-wrap:anywhere;
    }

    .section{
        padding:54px 0;
    }

    .section-title{
        margin-bottom:38px;
    }

    .section-title h2{
        font-size:clamp(28px,8vw,34px);
        line-height:1.12;
        text-wrap:balance;
    }

    .section-title p{
        margin-top:14px;
        line-height:1.6;
    }

    .page-header{
        padding:46px 0;
    }

    .page-header h1{
        font-size:clamp(26px,7.2vw,32px);
        line-height:1.12;
        text-wrap:balance;
    }

    .page-header p,
    .article-deck{
        font-size:15px;
        line-height:1.55;
    }

    .page-header .hero-eyebrow{
        max-width:100%;
        font-size:11px;
        line-height:1.45;
        letter-spacing:.09em;
    }

    .hero-banner-inner{
        width:100%;
        max-width:100%!important;
    }

    .hero-banner h1{
        max-width:100%!important;
        font-size:clamp(21px,5.9vw,25px)!important;
        letter-spacing:-.025em;
    }

    .hero-banner .lead{
        max-width:100%!important;
    }

    .hero-banner .hero-cta{
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:7px!important;
    }

    .hero-banner .hero-cta .btn{
        width:100%;
        min-width:0;
        margin:0;
    }

    .home-path-card,
    .diagnostic-card,
    .pillar-card,
    .deliverable-card,
    .engagement-steps > div,
    .signal-list > div,
    .intervention-grid > div,
    .validation-path__grid > div{
        min-width:0;
    }

    .article-body{
        font-size:16px;
        line-height:1.75;
    }

    .article-body > p:first-child{
        font-size:1.04rem;
        line-height:1.7;
    }

    .article-body img,
    .card-photo{
        width:100%;
        height:auto;
    }

    .article-cta .btn{
        width:100%;
        white-space:normal;
    }
}

@media (max-width:480px){
    .container,
    .container-sm{
        width:calc(100% - 32px);
    }

    .header .btn-primary{
        display:none;
    }

    .navbar{
        gap:10px;
    }

    .brand{
        min-width:0;
        margin-right:auto;
    }

    .brand-logo{
        width:142px;
        max-width:100%;
    }

    .search-trigger,
    .menu-toggle{
        width:44px;
        height:44px;
    }

    .section-title span{
        font-size:12px;
        letter-spacing:.13em;
    }

    .home-path-card,
    .diagnostic-card,
    .pillar-card,
    .deliverable-card{
        padding:24px;
    }
}