:root {
  --b1: #F0F5FC;
  --b2: #E0ECF8;
  --ac: #4167B1;
  --a2: #1B1F23;
  --tx: #1B1F23;
  --mt: #6B7A8A;
  --navbg: #1B1F23;
  --cardbg: #ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--b1);color:var(--tx);line-height:1.6}
.demo-wrap{max-width:1000px;margin:0 auto;padding:0 24px}
a{color:var(--ac);text-decoration:none}

/* Nav */
.nav{position:sticky;top:0;z-index:999;background:var(--navbg);padding:14px 0}
.nav .demo-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{font-size:1.25rem;font-weight:800;color:#F0F5FC;letter-spacing:.5px}
.nav-logo span{color:#7BA3E0}
.nav-links{display:flex;gap:18px;align-items:center;list-style:none}
.nav-links a{color:rgba(240,245,252,0.85);font-size:.82rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--ac);color:#fff!important;padding:7px 18px;border-radius:50px;font-size:.78rem;font-weight:600;transition:background .2s}
.nav-cta:hover{background:#5280D0!important}

/* Hero */
.z-hero{background:linear-gradient(160deg,#1B1F23 0%,#1B1F23 45%,#4167B1 100%);padding:80px 0 70px;color:#fff}
.z-hero .demo-wrap{display:flex;align-items:center;gap:50px}
.z-hero-text{flex:1.1}
.z-hero-text .badge{display:inline-block;background:rgba(255,255,255,0.15);padding:5px 14px;border-radius:50px;font-size:.7rem;font-weight:600;letter-spacing:.3px;margin-bottom:16px;backdrop-filter:blur(4px)}
.z-hero-text h1{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;line-height:1.25;margin-bottom:14px}
.z-hero-text h1 span{color:#7BA3E0}
.z-hero-text p{font-size:.88rem;line-height:1.7;color:rgba(255,255,255,0.8);margin-bottom:24px}
.z-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.z-hero-btns .btn-solid{background:var(--ac);color:#fff;padding:11px 28px;border-radius:50px;font-size:.82rem;font-weight:600;transition:background .2s;display:inline-block}
.z-hero-btns .btn-solid:hover{background:#5280D0}
.z-hero-btns .btn-outline{border:2px solid rgba(255,255,255,0.3);color:#fff;padding:9px 26px;border-radius:50px;font-size:.82rem;font-weight:600;transition:all .2s;display:inline-block}
.z-hero-btns .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.08)}
.z-hero-visual{flex:0.9;text-align:center}
.z-hero-visual .icon-box{background:rgba(255,255,255,0.08);border-radius:24px;padding:35px 30px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.12)}
.z-hero-visual .big-icon{font-size:56px;margin-bottom:14px}
.z-hero-visual h3{font-size:1.1rem;font-weight:700;margin-bottom:6px;color:#fff}
.z-hero-visual p{font-size:.75rem;color:rgba(255,255,255,0.65)}
.z-hero-visual .tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px}
.z-hero-visual .tags span{background:rgba(255,255,255,0.12);padding:4px 12px;border-radius:50px;font-size:.65rem;color:rgba(255,255,255,0.85)}

/* Z-alt sections */
.z-alt{padding:60px 0}
.z-alt:nth-child(even){background:var(--b2)}
.z-alt .demo-wrap{display:flex;align-items:center;gap:50px}
.z-alt-img{flex:1;border-radius:20px;padding:50px 30px;text-align:center;min-height:200px}
.z-alt-text{flex:1}
.z-alt-text h2{font-size:1.35rem;font-weight:800;margin-bottom:12px;line-height:1.3}
.z-alt-text h2 span{color:var(--ac)}
.z-alt-text p{font-size:.86rem;line-height:1.8;color:var(--mt);margin-bottom:12px}
.z-alt-text .tag-group{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.z-alt-text .tag-group span{background:var(--b2);color:var(--ac);padding:4px 12px;border-radius:50px;font-size:.7rem;font-weight:500}
.z-alt:nth-child(even) .demo-wrap{flex-direction:row-reverse}

/* Z-alt 1 - market */
.z-alt-1 .z-alt-img{background:linear-gradient(145deg,#E8F0FE,#D0E0F8)}
.z-alt-1 .z-alt-img .icon{font-size:48px;margin-bottom:10px}
.z-alt-1 .z-alt-img h4{font-size:1rem;color:var(--a2);font-weight:700}

/* Z-alt 2 - knowledge */
.z-alt-2 .z-alt-img{background:linear-gradient(145deg,#E6F0F0,#D0E8E8)}
.z-alt-2 .z-alt-img .icon{font-size:48px;margin-bottom:10px}
.z-alt-2 .z-alt-img h4{font-size:1rem;color:var(--a2);font-weight:700}

/* Z-alt 3 - security */
.z-alt-3 .z-alt-img{background:linear-gradient(145deg,#F0E8F0,#E0D6E8)}
.z-alt-3 .z-alt-img .icon{font-size:48px;margin-bottom:10px}
.z-alt-3 .z-alt-img h4{font-size:1rem;color:var(--a2);font-weight:700}

/* Article Grid */
.art-grid-sec{padding:60px 0}
.art-grid-sec .sec-title{text-align:center;margin-bottom:36px}
.art-grid-sec .sec-title h2{font-size:1.5rem;font-weight:800}
.art-grid-sec .sec-title h2 span{color:var(--ac)}
.art-grid-sec .sec-title p{font-size:.82rem;color:var(--mt);margin-top:6px}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.art-card{background:var(--cardbg);border-radius:14px;padding:22px;box-shadow:0 2px 12px rgba(0,0,0,0.04);border:1px solid rgba(65,103,177,0.08);transition:transform .2s,box-shadow .2s}
.art-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.08)}
.art-card .cat{display:inline-block;background:var(--b2);color:var(--ac);padding:3px 10px;border-radius:50px;font-size:.62rem;font-weight:600;margin-bottom:10px}
.art-card h3{font-size:.88rem;font-weight:700;line-height:1.4;margin-bottom:8px}
.art-card h3 a{color:var(--tx);transition:color .2s}
.art-card h3 a:hover{color:var(--ac)}
.art-card p{font-size:.74rem;color:var(--mt);line-height:1.6;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-card .meta{font-size:.62rem;color:var(--mt);display:flex;justify-content:space-between}
.view-all{text-align:center;margin-top:28px}
.view-all a{display:inline-block;padding:10px 28px;border-radius:50px;border:2px solid var(--ac);color:var(--ac);font-size:.8rem;font-weight:600;transition:all .2s}
.view-all a:hover{background:var(--ac);color:#fff}

/* CTA */
.cta-sec{background:var(--ac);padding:60px 0;text-align:center;color:#fff}
.cta-sec h2{font-size:1.5rem;font-weight:800;margin-bottom:10px}
.cta-sec p{font-size:.85rem;color:rgba(255,255,255,0.8);margin-bottom:24px}
.cta-sec .cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-sec .cta-btn-solid{background:#fff;color:var(--ac);padding:12px 32px;border-radius:50px;font-size:.85rem;font-weight:700;transition:all .2s;display:inline-block}
.cta-sec .cta-btn-solid:hover{background:rgba(255,255,255,0.9);transform:translateY(-2px)}
.cta-sec .cta-btn-outline{border:2px solid rgba(255,255,255,0.4);color:#fff;padding:10px 30px;border-radius:50px;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-block}
.cta-sec .cta-btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.08)}

/* Footer */
.footer{background:var(--a2);color:rgba(240,245,252,0.6);padding:40px 0 30px;font-size:.78rem}
.footer .demo-wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.footer h4{color:#fff;font-size:.85rem;font-weight:700;margin-bottom:12px}
.footer p{line-height:1.7}
.footer ul{list-style:none}
.footer ul li{margin-bottom:6px}
.footer ul li a{color:rgba(240,245,252,0.5);transition:color .2s}
.footer ul li a:hover{color:#fff}
.footer .copy{grid-column:1/-1;text-align:center;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08);margin-top:24px;font-size:.7rem;color:rgba(240,245,252,0.4)}

/* Responsive */
@media(max-width:768px){
  .z-hero .demo-wrap,.z-alt .demo-wrap{flex-direction:column!important}
  .z-alt:nth-child(even) .demo-wrap{flex-direction:column!important}
  .z-hero-text,.z-hero-visual{flex:1;width:100%}
  .z-hero-text{text-align:center}
  .z-hero-btns{justify-content:center}
  .art-grid{grid-template-columns:1fr}
  .footer .demo-wrap{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav .demo-wrap{justify-content:center}
}
@media(max-width:480px){
  .z-hero{padding:50px 0 40px}
  .z-alt{padding:40px 0}
  .art-card{padding:16px}
}