/* ===== Hero ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;z-index:1;padding:2rem;overflow:hidden}
#hero-particles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1.3rem;border:1px solid var(--border-hover);border-radius:50px;font-size:.78rem;color:var(--text-muted);margin-bottom:2.5rem;background:rgba(76,78,168,.04);letter-spacing:.3px;position:relative;z-index:1}
.hero-badge .dot{width:5px;height:5px;background:var(--primary);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.hero h1{font-size:clamp(3.5rem,9vw,8rem);font-weight:800;line-height:1.02;letter-spacing:-4px;margin-bottom:1.8rem;position:relative;z-index:1}
.hero h1 .gradient{background:linear-gradient(135deg,var(--primary),var(--accent),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:1.1rem;color:var(--text-muted);max-width:520px;line-height:1.75;margin-bottom:3.5rem;font-weight:300;letter-spacing:.2px;position:relative;z-index:1}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.scroll-indicator{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--primary);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;animation:scrollBounce 2s ease-in-out infinite;z-index:1}
.scroll-line{width:2px;height:50px;background:linear-gradient(180deg,var(--primary),rgba(122,124,255,.2));border-radius:2px;position:relative;overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:-20px;left:0;width:100%;height:20px;background:linear-gradient(180deg,transparent,var(--bg));animation:scrollDrop 2s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@keyframes scrollDrop{0%{top:-20px;opacity:0}50%{opacity:1}100%{top:50px;opacity:0}}

/* ===== About ===== */
.about-section{padding:6rem 5%;max-width:1300px;margin:0 auto;position:relative;z-index:1}
.about-label{font-size:.75rem;text-transform:uppercase;letter-spacing:4px;color:rgba(76,78,168,.7);margin-bottom:2.5rem}
.about-title{font-size:clamp(2.2rem,4.5vw,4rem);font-weight:700;line-height:1.18;letter-spacing:-1.5px;margin-bottom:3.5rem}
.about-title .gradient{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:5rem;margin-top:3rem;align-items:start}
.about-text{font-size:1.05rem;color:var(--text-body);line-height:2;font-weight:300}
.about-cards{display:flex;flex-direction:column;gap:1.5rem}
.about-card{padding:2.2rem;border:1px solid var(--border);border-radius:18px;background:var(--bg-card);transition:.4s}
.about-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 30px var(--shadow)}
.about-card h4{font-size:.75rem;text-transform:uppercase;letter-spacing:3px;color:var(--primary);margin-bottom:1rem;font-weight:600}
.about-card p{font-size:.95rem;color:var(--text-body);line-height:1.8;font-weight:300}

/* ===== Solutions ===== */
.solutions-section{padding:6rem 5%;max-width:1400px;margin:0 auto;position:relative;z-index:1}
.solutions-header{text-align:center;margin-bottom:4rem}
.solutions-header .label{font-size:.75rem;text-transform:uppercase;letter-spacing:4px;color:rgba(76,78,168,.7);margin-bottom:1.8rem}
.solutions-header h2{font-size:clamp(2.2rem,4.5vw,4rem);font-weight:700;letter-spacing:-1.5px}
.solutions-header h2 .gradient{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.solution-row{display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:center;margin-bottom:6rem}
.solution-row.reverse{direction:rtl}
.solution-row.reverse>*{direction:ltr}
.solution-content h3{font-size:2.2rem;font-weight:700;margin-bottom:1.2rem;letter-spacing:-1px}
.solution-content h3 .gradient{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.solution-content>p{color:var(--text-muted);line-height:1.9;margin-bottom:1.8rem;font-weight:300;font-size:1rem}
.feature-list{list-style:none}
.feature-list li{padding:.65rem 0;color:var(--text-body);display:flex;align-items:center;gap:.9rem;font-size:.92rem;font-weight:300}
.feature-list li::before{content:'';width:7px;height:7px;background:var(--gradient);border-radius:50%;flex-shrink:0}
.solution-visual{display:flex;align-items:center;justify-content:center;min-height:420px}

/* AI Orb Visual */
.visual-ai{position:relative;width:320px;height:320px}
.ai-orb{position:absolute;border-radius:50%;background:linear-gradient(135deg,rgba(76,78,168,.15),rgba(122,124,255,.08));border:1px solid rgba(76,78,168,.08);animation:aiFloat 6s ease-in-out infinite}
.ai-orb:nth-child(1){width:180px;height:180px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:0s}
.ai-orb:nth-child(2){width:120px;height:120px;top:15%;left:15%;animation-delay:-1.5s}
.ai-orb:nth-child(3){width:90px;height:90px;top:60%;right:10%;animation-delay:-3s}
.ai-orb:nth-child(4){width:60px;height:60px;top:10%;right:20%;animation-delay:-4.5s}
.ai-node{position:absolute;width:10px;height:10px;background:#4C4EA8;border-radius:50%;box-shadow:0 0 20px rgba(76,78,168,.4);animation:aiPulse 2.5s ease-in-out infinite}
.ai-node:nth-child(5){top:50%;left:50%;transform:translate(-50%,-50%);width:14px;height:14px;animation-delay:0s}
.ai-node:nth-child(6){top:20%;left:30%;animation-delay:-.8s}
.ai-node:nth-child(7){top:70%;left:65%;animation-delay:-1.6s}
.ai-node:nth-child(8){top:30%;right:15%;animation-delay:-2.4s}
.ai-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(76,78,168,.15),transparent);transform-origin:left center;animation:aiLinePulse 3s ease-in-out infinite}
.ai-line:nth-child(9){top:50%;left:50%;width:120px;transform:rotate(30deg);animation-delay:0s}
.ai-line:nth-child(10){top:50%;left:50%;width:100px;transform:rotate(-45deg);animation-delay:-1s}
.ai-line:nth-child(11){top:50%;left:50%;width:140px;transform:rotate(120deg);animation-delay:-2s}
@keyframes aiFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
.ai-orb:nth-child(2){animation-name:aiFloat2}
@keyframes aiFloat2{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ai-orb:nth-child(3){animation-name:aiFloat3}
@keyframes aiFloat3{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.ai-orb:nth-child(4){animation-name:aiFloat4}
@keyframes aiFloat4{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes aiPulse{0%,100%{box-shadow:0 0 20px rgba(76,78,168,.4)}50%{box-shadow:0 0 35px rgba(122,124,255,.5),0 0 60px rgba(76,78,168,.15)}}
@keyframes aiLinePulse{0%,100%{opacity:.3}50%{opacity:.8}}

/* IoT Grid Visual */
.visual-iot{position:relative;width:320px;height:320px}
.iot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:30px}
.iot-dot{width:12px;height:12px;background:rgba(76,78,168,.2);border-radius:50%;position:relative;animation:iotPulse 3s ease-in-out infinite}
.iot-dot::before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:rgba(76,78,168,.15);animation:iotRing 3s ease-in-out infinite}
.iot-dot.active{background:#4C4EA8;box-shadow:0 0 20px rgba(76,78,168,.4)}
.iot-dot.active::before{background:rgba(76,78,168,.3)}
@keyframes iotPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.3);opacity:1}}
@keyframes iotRing{0%,100%{transform:scale(1);opacity:0}50%{transform:scale(2);opacity:.3}}
.iot-connector{position:absolute;top:50%;left:50%;width:70%;height:1px;background:linear-gradient(90deg,transparent,rgba(76,78,168,.12),transparent);transform:translate(-50%,-50%)}
.iot-connector:nth-of-type(2){transform:translate(-50%,-50%) rotate(60deg)}
.iot-connector:nth-of-type(3){transform:translate(-50%,-50%) rotate(120deg)}

/* ===== Transition Bridge ===== */
.bridge-section{position:relative;height:100px;overflow:hidden;z-index:1}
.bridge-gradient{position:absolute;width:100%;height:100%;background:linear-gradient(180deg,transparent 0%,rgba(76,78,168,.02) 30%,rgba(76,78,168,.04) 50%,rgba(76,78,168,.02) 70%,transparent 100%)}
.bridge-line{position:absolute;top:50%;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(76,78,168,.15),transparent);transform:translateY(-50%)}
.bridge-shape{position:absolute;top:50%;transform:translateY(-50%);opacity:.12}
.bridge-diamond{width:16px;height:16px;border:1.5px solid #4C4EA8;transform:translateY(-50%) rotate(45deg);animation:diamondPulse 3s ease-in-out infinite}
.bridge-diamond:nth-child(3){left:20%;animation-delay:0s}
.bridge-diamond:nth-child(4){left:40%;animation-delay:-1s;width:12px;height:12px;border-color:#7a7cff}
.bridge-diamond:nth-child(5){left:60%;animation-delay:-2s}
.bridge-diamond:nth-child(6){left:80%;animation-delay:-.5s;width:12px;height:12px;border-color:#7a7cff}
@keyframes diamondPulse{0%,100%{opacity:.1;transform:translateY(-50%) rotate(45deg) scale(1)}50%{opacity:.25;transform:translateY(-50%) rotate(45deg) scale(1.2)}}
.bridge-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#4C4EA8;top:50%;transform:translateY(-50%);animation:dotGlow 2.5s ease-in-out infinite}
.bridge-dot:nth-child(7){left:10%;animation-delay:0s}
.bridge-dot:nth-child(8){left:30%;animation-delay:-.6s;background:#7a7cff}
.bridge-dot:nth-child(9){left:50%;animation-delay:-1.2s}
.bridge-dot:nth-child(10){left:70%;animation-delay:-1.8s;background:#7a7cff}
.bridge-dot:nth-child(11){left:90%;animation-delay:-.3s}
@keyframes dotGlow{0%,100%{box-shadow:0 0 8px rgba(76,78,168,.2);opacity:.3}50%{box-shadow:0 0 15px rgba(122,124,255,.4);opacity:.7}}

/* ===== Robotics Kits (home layout) ===== */
.kits-section{padding:6rem 5%;max-width:1400px;margin:0 auto;position:relative;z-index:1}
.kits-header{text-align:center;margin-bottom:6rem}
.kits-header .label{font-size:.75rem;text-transform:uppercase;letter-spacing:4px;color:rgba(76,78,168,.7);margin-bottom:1.8rem}
.kits-header h2{font-size:clamp(2.2rem,4.5vw,4rem);font-weight:700;letter-spacing:-1.5px}
.kits-header h2 .gradient{background:linear-gradient(135deg,#4C4EA8,#7a7cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.kits-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}

/* ===== Home Responsive ===== */
@media(max-width:900px){
    .about-grid,.solution-row,.kits-grid{grid-template-columns:1fr}
    .solution-row.reverse{direction:ltr}
    .hero h1{letter-spacing:-2px}
    .about-section{padding:4rem 5%}
    .solutions-section{padding:4rem 5%}
    .solution-row{margin-bottom:4rem}
    .kits-section{padding:4rem 5%}
    .bridge-section{height:60px}
}
@media(max-width:600px){
    .hero h1{letter-spacing:-1px}
    .bridge-section{height:40px}
    .about-section{padding:3rem 5%}
    .solutions-section{padding:3rem 5%}
    .kits-section{padding:3rem 5%}
}