@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');
body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;background:#F8FAFC;color:#0F172A}
.container{max-width:1200px;margin:auto;padding:0 24px}
.header{position:sticky;top:0;background:rgba(255,255,255,.7);backdrop-filter:blur(12px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.btn{background:#10B981;color:#fff;padding:12px 22px;border-radius:999px;text-decoration:none}
.btn.large{padding:16px 36px}
.hero{position:relative;height:90vh;display:flex;align-items:center;color:#fff}
.hero-bg span{position:absolute;inset:0;background-size:cover;opacity:0;animation:fade 18s infinite}
.hero-bg span:nth-child(1){animation-delay:0s}
.hero-bg span:nth-child(2){animation-delay:6s}
.hero-bg span:nth-child(3){animation-delay:12s}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.4))}
.hero-content{position:relative;z-index:2;max-width:640px}
@keyframes fade{0%,33%{opacity:1}44%,100%{opacity:0}}
.showcase{text-align:center;padding:120px 0}
.laptop{background:#000;padding:16px;border-radius:24px;box-shadow:0 40px 80px rgba(0,0,0,.3)}
.laptop img{width:100%;border-radius:12px}
.cam{width:10px;height:10px;background:#333;border-radius:50%;margin:0 auto 8px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:120px 0}
.feature img{width:100%;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.1)}
.reverse{direction:rtl}.reverse *{direction:ltr}
.cta{background:#ECFDF5;padding:120px 24px;text-align:center}
.fade{opacity:0;transform:translateY(40px);transition:.6s}
.fade.visible{opacity:1;transform:none}