/* Guardian One Hero CSS */
/* Paste with the ecosystem hero HTML */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Arial,sans-serif;background:#fff;color:#222}
.container{width:min(1320px,92%);margin:0 auto}

.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#071B3A,#0D2F5D);padding:110px 0}
.hero:before{content:'';position:absolute;width:700px;height:700px;right:-250px;top:-250px;border-radius:50%;background:rgba(104,189,70,.08);filter:blur(70px)}
.hero:after{content:'';position:absolute;width:600px;height:600px;left:-250px;bottom:-250px;border-radius:50%;background:rgba(255,255,255,.03);filter:blur(80px)}

.hero-container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}

.hero-left h1{color:#fff;font-size:62px;line-height:1.08;font-weight:700;margin:25px 0}
.hero-left h1 span{display:block;color:#68BD46}

.hero-badge{display:inline-block;padding:10px 22px;border-radius:40px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#68BD46;font-size:13px;font-weight:600;letter-spacing:1px}

.hero-left p{color:#d7dce6;font-size:18px;line-height:1.8;max-width:620px;margin-bottom:35px}

.hero-buttons{display:flex;gap:18px;margin-bottom:35px}

.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:16px 32px;border-radius:10px;text-decoration:none;font-weight:600;transition:.3s}
.btn-primary{background:#68BD46;color:#fff}
.btn-primary:hover{background:#5ba53d;transform:translateY(-2px)}
.btn-secondary{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:#fff}
.btn-secondary:hover{background:rgba(255,255,255,.1)}

.hero-services{display:flex;flex-wrap:wrap;gap:10px}
.hero-services span{padding:10px 16px;border-radius:30px;background:rgba(255,255,255,.08);color:#fff;font-size:14px}

.hero-right{display:flex;justify-content:center}
.ecosystem{position:relative;width:520px;height:520px}

.center-node{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.logo-circle{width:120px;height:120px;border-radius:50%;background:#68BD46;color:#fff;font-size:42px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 50px rgba(104,189,70,.35)}
.center-node h3{margin-top:15px;color:#fff}

.node{position:absolute;width:120px;height:120px;border-radius:18px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 20px 50px rgba(0,0,0,.15)}
.node span{margin-top:8px;font-weight:600;color:#12396f}

.cloud{top:0;left:50%;transform:translateX(-50%)}
.security{top:50%;right:0;transform:translateY(-50%)}
.ai{bottom:0;left:50%;transform:translateX(-50%)}
.network{top:50%;left:0;transform:translateY(-50%)}
.datacenter{top:60px;left:60px}
.apps{bottom:60px;right:60px}

@media(max-width:991px){
.hero-container{grid-template-columns:1fr;text-align:center}
.hero-left h1{font-size:46px}
.hero-left p{margin:0 auto 35px}
.hero-buttons,.hero-services{justify-content:center}
.ecosystem{width:420px;height:420px;margin-top:40px}
.node{width:90px;height:90px}
.logo-circle{width:90px;height:90px;font-size:30px}
}

@media(max-width:600px){
.hero{padding:80px 0}
.hero-left h1{font-size:34px}
.hero-buttons{flex-direction:column}
.btn-primary,.btn-secondary{width:100%}
.ecosystem{display:none}
}