/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 24px 60px;overflow:hidden;background:var(--gradient-hero)}
.hero-bg-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4}
.shape-1{width:500px;height:500px;background:radial-gradient(circle,rgba(0,168,204,.2),transparent 70%);top:-100px;right:-100px;animation:sf1 12s ease-in-out infinite}
.shape-2{width:400px;height:400px;background:radial-gradient(circle,rgba(21,101,170,.25),transparent 70%);bottom:-50px;left:-50px;animation:sf2 15s ease-in-out infinite}
.shape-3{width:300px;height:300px;background:radial-gradient(circle,rgba(0,188,212,.15),transparent 70%);top:40%;left:50%;animation:sf3 10s ease-in-out infinite}
@keyframes sf1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.1)}}
@keyframes sf2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.05)}}
@keyframes sf3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,-20px) scale(1.15)}}
.hero-container{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-content{max-width:600px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:8px 20px;border-radius:var(--radius-full);font-size:.82rem;font-weight:500;color:rgba(255,255,255,.9);margin-bottom:28px;animation:fadeInUp .8s ease-out}
.badge-dot{width:8px;height:8px;background:var(--accent-300);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,188,212,.4)}50%{opacity:.8;box-shadow:0 0 0 8px rgba(0,188,212,0)}}
.hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:900;color:var(--white);line-height:1.15;margin-bottom:24px;animation:fadeInUp .8s ease-out .1s both}
.hero-description{font-size:1.1rem;color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:36px;animation:fadeInUp .8s ease-out .2s both}
.hero-actions{display:flex;gap:16px;margin-bottom:52px;animation:fadeInUp .8s ease-out .3s both;flex-wrap:wrap}
.hero .btn-primary{background:linear-gradient(135deg,var(--white),#e8f4f8);color:var(--primary-800);box-shadow:0 4px 20px rgba(255,255,255,.2)}
.hero .btn-primary:hover{box-shadow:0 8px 30px rgba(255,255,255,.35)}
.hero .btn-secondary{color:var(--white);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25)}
.hero .btn-secondary:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
.hero-stats{display:flex;align-items:center;gap:32px;animation:fadeInUp .8s ease-out .4s both}
.stat-item{text-align:center}
.stat-number{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--white)}
.stat-suffix{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--accent-200)}
.stat-label{display:block;font-size:.82rem;color:rgba(255,255,255,.55);margin-top:4px;font-weight:500}
.stat-divider{width:1px;height:48px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.2),transparent)}

/* Hero Visual */
.hero-visual{display:flex;justify-content:center;align-items:center;position:relative;animation:fadeInUp 1s ease-out .3s both}
.hero-card-stack{position:relative;width:380px;height:420px}
.shield-graphic{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:260px;animation:shieldPulse 4s ease-in-out infinite}
@keyframes shieldPulse{0%,100%{filter:drop-shadow(0 0 20px rgba(0,188,212,.2))}50%{filter:drop-shadow(0 0 40px rgba(0,188,212,.4))}}
.floating-card{position:absolute;display:flex;align-items:center;gap:12px;padding:16px 22px;background:rgba(255,255,255,.15);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-lg);box-shadow:0 4px 20px rgba(0,0,0,.1);z-index:2;animation:cardFloat 6s ease-in-out infinite}
.floating-card .card-icon{font-size:1.6rem}
.floating-card .card-title{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--white);display:block}
.floating-card .card-desc{font-size:.78rem;color:rgba(255,255,255,.6);display:block}
.card-1{top:20px;left:-20px}
.card-2{top:50%;right:-30px;transform:translateY(-50%);animation-delay:2s;animation-name:cardFloat2}
.card-3{bottom:20px;left:10px;animation-delay:4s}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes cardFloat2{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(calc(-50% - 12px)) translateX(5px)}}

.hero-scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1;animation:fadeInUp 1s ease-out .6s both}
.hero-scroll-indicator span{font-size:.75rem;color:rgba(255,255,255,.5);letter-spacing:2px;text-transform:uppercase}
.scroll-arrow{width:20px;height:20px;color:var(--accent-200);animation:bounce 2s ease-in-out infinite}
.scroll-arrow svg{width:100%;height:100%}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* SERVICES */
.services{padding:120px 0;position:relative;background:var(--bg-section)}
.services::before{content:'';position:absolute;top:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.service-card{position:relative;padding:36px 30px;background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);transition:all var(--transition-slow);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-soft)}
.service-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(21,101,170,.03),rgba(0,168,204,.03));opacity:0;transition:opacity var(--transition-slow)}
.service-card:hover{transform:translateY(-8px);border-color:rgba(0,168,204,.2);box-shadow:var(--shadow-card)}
.service-card:hover::before{opacity:1}
.service-card.featured{border-color:rgba(0,168,204,.2);background:linear-gradient(135deg,rgba(0,168,204,.03),rgba(21,101,170,.03))}
.featured-badge{position:absolute;top:16px;right:16px;background:var(--gradient-primary);color:var(--white);font-size:.72rem;font-weight:700;padding:4px 14px;border-radius:var(--radius-full);letter-spacing:1px;text-transform:uppercase;z-index:1}
.service-icon-wrapper{position:relative;margin-bottom:24px;z-index:1}
.service-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(21,101,170,.08),rgba(0,168,204,.08));border:1px solid rgba(21,101,170,.1);border-radius:var(--radius-md);color:var(--primary-500);transition:all var(--transition-base)}
.service-icon svg{width:30px;height:30px}
.service-card:hover .service-icon{background:var(--gradient-primary);border-color:transparent;color:var(--white);box-shadow:0 4px 20px rgba(0,168,204,.25);transform:scale(1.05)}
.service-title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--text-dark);margin-bottom:12px;position:relative;z-index:1}
.service-desc{font-size:.9rem;color:var(--text-muted);line-height:1.7;margin-bottom:20px;position:relative;z-index:1}
.service-link{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--primary-500);position:relative;z-index:1;transition:all var(--transition-base)}
.service-link svg{width:16px;height:16px;transition:transform var(--transition-base)}
.service-link:hover{color:var(--accent-400)}
.service-link:hover svg{transform:translateX(4px)}