/* Architecture diagram */
.arch-diagram{background:var(--dark);border-radius:20px;padding:48px 36px;color:#fff;position:relative;overflow:hidden;}
.arch-diagram::before{content:"";position:absolute;top:0;right:0;width:300px;height:300px;background:radial-gradient(circle,rgba(0,102,179,.15) 0%,transparent 70%);pointer-events:none;}
.arch-layer{display:flex;align-items:center;gap:20px;padding:20px 28px;border-radius:12px;margin-bottom:14px;transition:all .3s;cursor:default;}
.arch-layer:hover{transform:translateX(8px);}
.arch-layer:last-child{margin-bottom:0;}
.arch-layer-num{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex-shrink:0;}
.arch-layer-content h4{font-size:16px;margin-bottom:4px;font-weight:600;}
.arch-layer-content p{font-size:13px;opacity:.75;line-height:1.5;}
.arch-l1{background:rgba(0,102,179,.15);}.arch-l1 .arch-layer-num{background:var(--primary);color:#fff;}
.arch-l2{background:rgba(16,185,129,.12);}.arch-l2 .arch-layer-num{background:#10b981;color:#fff;}
.arch-l3{background:rgba(239,68,68,.12);}.arch-l3 .arch-layer-num{background:#ef4444;color:#fff;}
.arch-l4{background:rgba(245,158,11,.12);}.arch-l4 .arch-layer-num{background:#f59e0b;color:#fff;}
.arch-l5{background:rgba(139,92,246,.12);}.arch-l5 .arch-layer-num{background:#8b5cf6;color:#fff;}
.arch-label{text-align:center;font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:2px;margin-bottom:24px;font-weight:600;}
.arch-arrow{text-align:center;color:rgba(255,255,255,.2);padding:4px 0;font-size:20px;}

/* Principle cards */
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.principle-card{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:32px 24px;transition:all .3s;}
.principle-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.07);}
.principle-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.principle-icon svg{width:28px;height:28px;}
.principle-card h4{font-size:16px;color:var(--dark);margin-bottom:8px;}
.principle-card p{font-size:13px;color:var(--gray-600);line-height:1.7;}
.pi-blue{background:rgba(0,102,179,.08);color:var(--primary);}
.pi-green{background:rgba(16,185,129,.08);color:#10b981;}
.pi-purple{background:rgba(139,92,246,.08);color:#8b5cf6;}

/* Ecosystem cards with images */
.eco-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px;}
.eco-card{position:relative;border-radius:14px;overflow:hidden;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .4s;}
.eco-card:hover{transform:translateY(-3px);}
.eco-card-bg{position:absolute;inset:0;z-index:0;}
.eco-card-bg img{width:100%;height:100%;object-fit:cover;}
.eco-card-bg::after{content:"";position:absolute;inset:0;background:var(--eco-color,rgba(0,0,0,.7));}
.eco-card-body{position:relative;z-index:1;padding:20px 16px;text-align:center;}
.eco-num{width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:16px;font-weight:700;color:#fff;}
.eco-card h5{font-size:14px;color:#fff;margin-bottom:4px;font-weight:600;}
.eco-card p{font-size:11px;color:rgba(255,255,255,.7);line-height:1.5;margin:0;}

/* Layer detail cards with images */
.layer-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ld-card{position:relative;border-radius:16px;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .4s,box-shadow .4s;}
.ld-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.1);}
.ld-bg{position:absolute;inset:0;z-index:0;}
.ld-bg img{width:100%;height:100%;object-fit:cover;}
.ld-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.15) 100%);}
.ld-body{position:relative;z-index:1;padding:28px 24px;}
.ld-num{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;margin-bottom:14px;}
.ld-body h3{font-size:18px;color:#fff;margin-bottom:10px;font-weight:700;}
.ld-body p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.65;margin:0;}

@media(max-width:1024px){.principle-grid{grid-template-columns:1fr;}.eco-grid{grid-template-columns:repeat(3,1fr);}.layer-detail-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.arch-layer{flex-direction:column;text-align:center;gap:10px;}.eco-grid{grid-template-columns:repeat(2,1fr);}.layer-detail-grid{grid-template-columns:1fr;}}