/* ===== ABOUT ===== */
.about-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.about-card{
    background:var(--navy-mid);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    padding:40px 32px;
    position:relative;overflow:hidden;
    transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;
}
.about-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,212,255,0.2);
    box-shadow:var(--shadow-glow);
}
.about-card .card-num{
    font-size:4rem;font-weight:900;
    background:linear-gradient(180deg,var(--cyan) 0%,transparent 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    opacity:0.15;position:absolute;top:8px;left:20px;line-height:1;
}
.about-card .card-icon{
    width:48px;height:48px;border-radius:12px;
    background:rgba(0,212,255,0.1);
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;margin-bottom:20px;position:relative;z-index:1;
}
.about-card h3{font-size:1.2rem;color:var(--text-primary);margin-bottom:12px;position:relative;z-index:1}
.about-card p{font-size:0.9rem;color:var(--text-secondary);line-height:1.7;position:relative;z-index:1}
.about-quote{
    margin-top:48px;padding:32px 40px;
    background:linear-gradient(135deg,rgba(0,212,255,0.06),rgba(201,168,76,0.04));
    border-left:3px solid var(--cyan);
    border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.about-quote p{font-size:1.15rem;color:var(--text-primary);font-style:italic}
.about-quote .author{font-size:0.85rem;color:var(--text-muted);margin-top:8px;font-style:normal}

/* ===== AGENTS ===== */
.agents-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;
}
.agent-card{
    background:var(--navy-mid);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    padding:36px 28px;
    transition:all 0.3s;
    position:relative;overflow:hidden;
}
.agent-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--cyan),var(--cyan-dark));
    transform:scaleX(0);transform-origin:left;
    transition:transform 0.3s;
}
.agent-card:hover::before{transform:scaleX(1)}
.agent-card:hover{
    border-color:rgba(0,212,255,0.2);
    transform:translateY(-4px);
    box-shadow:var(--shadow-glow);
}
.agent-card .agent-num{
    font-size:3.5rem;font-weight:900;
    background:linear-gradient(180deg,var(--cyan) 0%,transparent 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    opacity:0.12;position:absolute;top:0;right:20px;line-height:1;
}
.agent-card .agent-icon{
    width:44px;height:44px;border-radius:10px;
    background:rgba(0,212,255,0.08);
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;margin-bottom:16px;
}
.agent-card h3{font-size:1.1rem;color:var(--text-primary);margin-bottom:8px}
.agent-card .tagline{font-size:0.85rem;color:var(--cyan);margin-bottom:12px}
.agent-card .features{font-size:0.85rem;color:var(--text-secondary);line-height:1.8}
.agent-card .features li::before{content:'•';color:var(--gold);margin-right:8px}

/* ===== ARCHITECTURE ===== */
.arch-flow{
    display:flex;flex-direction:column;gap:20px;
    max-width:900px;margin:0 auto;position:relative;
}
.arch-row{
    display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
}
.arch-block{
    background:var(--navy-mid);
    border:1px solid var(--border-card);
    border-radius:var(--radius-sm);
    padding:24px 28px;text-align:center;
    min-width:180px;flex:1;max-width:220px;
    transition:all 0.3s;
}
.arch-block:hover{
    border-color:rgba(0,212,255,0.3);
    box-shadow:var(--shadow-glow);
    transform:translateY(-2px);
}
.arch-block .arch-icon{font-size:1.8rem;margin-bottom:8px}
.arch-block h4{font-size:0.95rem;color:var(--text-primary);margin-bottom:4px}
.arch-block .sub{font-size:0.8rem;color:var(--text-muted)}
.arch-row.center-row{gap:16px}
.arch-row.center-row .arch-block{max-width:280px}
.arch-arrow{
    text-align:center;color:var(--cyan);font-size:1.2rem;padding:4px 0;
}
.arch-base{
    text-align:center;padding:24px 48px;
    background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(0,180,220,0.04));
    border:1px solid rgba(0,212,255,0.15);
    border-radius:var(--radius-md);
    margin-top:12px;
}
.arch-base h4{color:var(--cyan);font-size:0.9rem;margin-bottom:6px;letter-spacing:1px}
.arch-base p{color:var(--text-secondary);font-size:0.85rem}

/* ===== TECH ===== */
.tech-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.tech-card{
    background:var(--navy-mid);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    padding:36px 28px;
    transition:all 0.3s;
}
.tech-card:hover{
    border-color:rgba(0,212,255,0.2);
    box-shadow:var(--shadow-glow);
}
.tech-card .tech-num{
    font-size:2.5rem;font-weight:900;color:var(--cyan);opacity:0.25;
    line-height:1;margin-bottom:12px;
}
.tech-card h3{font-size:1.15rem;color:var(--text-primary);margin-bottom:16px}
.tech-card .tech-tags{display:flex;flex-wrap:wrap;gap:8px}
.tech-card .tech-tags span{
    padding:5px 14px;font-size:0.78rem;
    background:rgba(0,212,255,0.06);
    border:1px solid rgba(0,212,255,0.12);
    border-radius:16px;color:var(--text-secondary);
}

/* ===== CLIENTS ===== */
.clients-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
    margin-bottom:60px;
}
.client-category{
    background:var(--navy-mid);
    border:1px solid var(--border-card);
    border-radius:var(--radius-md);
    padding:32px 24px;text-align:center;
    transition:all 0.3s;
}
.client-category:hover{
    border-color:rgba(201,168,76,0.25);
    transform:translateY(-4px);
}
.client-category .cat-icon{font-size:2rem;margin-bottom:12px}
.client-category h4{font-size:1rem;color:var(--text-primary)}
.service-values{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    margin-top:48px;
}
.value-item{
    display:flex;gap:16px;align-items:flex-start;
    padding:24px;
    background:rgba(0,212,255,0.03);
    border-radius:var(--radius-sm);
    border:1px solid var(--border-subtle);
}
.value-item .v-num{
    width:36px;height:36px;border-radius:50%;
    background:rgba(0,212,255,0.1);
    display:flex;align-items:center;justify-content:center;
    color:var(--cyan);font-weight:700;font-size:0.9rem;
    flex-shrink:0;
}
.value-item h5{font-size:0.95rem;color:var(--text-primary);margin-bottom:4px}
.value-item p{font-size:0.82rem;color:var(--text-muted)}

/* ===== CTA BANNER ===== */
.cta-banner{
    position:relative;overflow:hidden;
    padding:80px 40px;text-align:center;
    background:linear-gradient(135deg,var(--navy-light),var(--navy-deep));
    border-top:1px solid var(--border-subtle);
    border-bottom:1px solid var(--border-subtle);
}
.cta-banner::before{
    content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:radial-gradient(circle at 50% 50%,rgba(0,212,255,0.06) 0%,transparent 50%);
    animation:ctaPulse 8s ease-in-out infinite;
}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.cta-banner .container{position:relative;z-index:1}
.cta-banner h2{font-size:2rem;color:var(--text-primary);margin-bottom:12px;font-weight:800}
.cta-banner p{color:var(--text-secondary);font-size:1.05rem;margin-bottom:32px}
.cta-banner .btn{
    display:inline-block;padding:14px 48px;
    background:linear-gradient(135deg,var(--cyan),var(--cyan-dark));
    border-radius:32px;font-size:1rem;font-weight:700;
    color:#0a1628;letter-spacing:1px;
    transition:transform 0.3s,box-shadow 0.3s;
}
.cta-banner .btn:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 32px rgba(0,212,255,0.35);
}

/* ===== FOOTER ===== */
.footer{
    background:var(--navy-deep);padding:64px 40px 32px;
    border-top:1px solid var(--border-subtle);
}
.footer-grid{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
    max-width:1200px;margin:0 auto 48px;
}
.footer-brand .logo{font-size:1.3rem;font-weight:800;color:var(--text-primary);margin-bottom:12px}
.footer-brand .logo span{color:var(--cyan)}
.footer-brand p{font-size:0.85rem;color:var(--text-muted);line-height:1.7}
.footer-col h4{font-size:0.85rem;color:var(--text-primary);margin-bottom:16px;letter-spacing:1px}
.footer-col a{display:block;font-size:0.82rem;color:var(--text-muted);margin-bottom:8px;transition:color 0.2s}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{
    text-align:center;padding-top:32px;
    border-top:1px solid var(--border-subtle);
    font-size:0.8rem;color:var(--text-muted);
    max-width:1200px;margin:0 auto;
}
.footer-bottom .icp-wrap{margin-top:14px}
.footer-bottom .icp-link{
    color:var(--cyan);text-decoration:none;transition:all 0.3s ease;
    background:rgba(22,45,74,0.6);padding:8px 20px;border-radius:30px;
    display:inline-block;backdrop-filter:blur(10px);
    border:1px solid rgba(0,212,255,0.15);font-size:0.85rem;
}
.footer-bottom .icp-link:hover{
    background:rgba(0,212,255,0.1);color:#fff;transform:translateY(-3px);
    box-shadow:0 5px 15px rgba(0,212,255,0.2);
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .about-grid{grid-template-columns:1fr}
    .tech-grid{grid-template-columns:repeat(2,1fr)}
    .clients-grid{grid-template-columns:repeat(2,1fr)}
    .service-values{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:768px){
    .navbar{padding:0 20px}
    .nav-links{display:none}
    .nav-links.open{
        display:flex;flex-direction:column;position:fixed;
        top:72px;left:0;right:0;bottom:0;
        background:rgba(10,22,40,0.98);padding:40px 20px;
        gap:20px;align-items:center;justify-content:center;
    }
    .menu-toggle{display:flex}
    .hero{padding:100px 20px 60px}
    .hero-stats{gap:28px}
    .hero-stat .num{font-size:2rem}
    .section{padding:60px 20px}
    .agents-grid{grid-template-columns:1fr}
    .tech-grid{grid-template-columns:1fr}
    .clients-grid{grid-template-columns:1fr}
    .service-values{grid-template-columns:1fr}
    .arch-row{flex-direction:column;align-items:center}
    .arch-block{max-width:100% !important;width:100%}
}

/* ===== ANIMATIONS ===== */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity 0.6s,transform 0.6s}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-in{opacity:0;transition:opacity 0.6s}
.fade-in.visible{opacity:1}