@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f8fb;color:#0b1220;font-family:"DM Sans",sans-serif}a{text-decoration:none;color:inherit}header{height:76px;display:flex;align-items:center;gap:28px;padding:0 6%;position:sticky;top:0;z-index:20;background:rgba(246,248,251,.9);backdrop-filter:blur(16px);border-bottom:1px solid #e5e9f0}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand b{display:block;font-family:"Space Grotesk";font-size:15px}.brand small{display:block;color:#6b7280;font-size:11px}.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#0b1220;color:white;font-weight:800}nav{display:flex;gap:25px;font-size:14px;color:#4b5563}nav a:hover{color:#2563eb}.navwa,.primary,.secondary{padding:12px 18px;border-radius:12px;font-weight:700;font-size:13px}.navwa,.primary{background:#2563eb;color:white}.secondary{background:white;border:1px solid #dbe1ea}.hero{min-height:650px;padding:75px 7%;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 85% 35%,#dbeafe 0,transparent 34%)}.hero-copy{max-width:650px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#2563eb}.hero h1{font:700 clamp(45px,6vw,76px)/.98 "Space Grotesk";letter-spacing:-4px;margin:18px 0}.hero h1 em{font-style:normal;color:#2563eb}.hero p{font-size:18px;color:#667085;line-height:1.7;max-width:560px}.hero-actions{display:flex;gap:12px;margin:30px 0}.stats{display:flex;gap:45px;margin-top:42px}.stats b{display:block;font:700 22px "Space Grotesk"}.stats span{color:#7a8494;font-size:12px}.hero-art{flex:1;min-width:390px;display:grid;place-items:center;position:relative}.glow{position:absolute;width:360px;height:360px;border-radius:50%;background:#bfdbfe;filter:blur(30px);opacity:.6}.laptop{width:390px;position:relative;z-index:1;transform:rotate(-4deg);filter:drop-shadow(0 30px 35px rgba(15,23,42,.2))}.screen{height:245px;border:14px solid #111827;border-bottom-width:18px;border-radius:18px 18px 5px 5px;background:linear-gradient(135deg,#172554,#2563eb);display:grid;place-content:center;text-align:center;color:white;font:700 27px "Space Grotesk";letter-spacing:4px}.screen small{font-size:11px;letter-spacing:3px;margin-top:8px}.base{height:25px;background:#9ca3af;border-radius:3px 3px 20px 20px;margin:0 -35px}.section{padding:85px 7%}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.section h2{font:700 40px "Space Grotesk";letter-spacing:-1.5px;margin:8px 0 0}.filters{display:flex;flex-wrap:wrap;gap:9px}.filter{border:1px solid #dfe4eb;background:white;padding:10px 15px;border-radius:30px;cursor:pointer;font-weight:600;color:#4b5563}.filter.active,.filter:hover{background:#0b1220;color:white;border-color:#0b1220}.products-section{padding-top:25px}.section-head input{width:280px;border:1px solid #dfe4eb;border-radius:12px;padding:13px 15px;background:white;outline:none}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:white;border:1px solid #e8ebf0;border-radius:18px;overflow:hidden;transition:.25s;box-shadow:0 5px 18px rgba(15,23,42,.04)}.card.clickable{cursor:pointer}.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,23,42,.1)}.card img{width:100%;height:190px;object-fit:cover;background:#e5e7eb}.card-body{padding:16px}.tag{font-size:10px;color:#2563eb;font-weight:800;text-transform:uppercase}.card h3{font:600 17px "Space Grotesk";margin:8px 0}.card p{font-size:12px;color:#8a94a3;margin:0 0 12px}.price{font:700 20px "Space Grotesk";margin-bottom:13px}.wa{width:100%;border:0;border-radius:10px;padding:11px;background:#0b1220;color:white;font-weight:700;cursor:pointer}.wa:hover{background:#2563eb}.about{display:grid;grid-template-columns:1.5fr .8fr;gap:60px;background:#0b1220;color:white}.about p{color:#aeb8c7;line-height:1.8;max-width:650px}.about-box,.contact-card{background:#151e2d;border:1px solid #263246;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px}.about-box span,.contact-card span{color:#94a3b8;font-size:13px}.about-box a{color:#60a5fa;font-weight:700}.contact{display:grid;grid-template-columns:1.4fr .7fr;gap:60px}.contact-card{background:white;border-color:#e6eaf0}.contact-card a:not(.primary){font:700 23px "Space Grotesk";color:#2563eb}.contact-card b{font-size:14px}.contact-card .primary{text-align:center;margin-top:8px}footer{padding:45px 7%;display:grid;grid-template-columns:2fr 1fr 1fr;gap:25px;background:#070d18;color:#d9e0ea}footer p,footer a,footer small{color:#8491a4;font-size:13px}footer div{display:flex;flex-direction:column;gap:10px}footer small{grid-column:1/-1;border-top:1px solid #1d2939;padding-top:20px}.floatwa{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#16a34a;color:white;font-size:27px;z-index:30;box-shadow:0 12px 30px rgba(22,163,74,.35)}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.hero-art{display:none}nav{display:none}.about,.contact{grid-template-columns:1fr}}
@media(max-width:700px){header{padding:0 4%;height:68px}.navwa{padding:10px}.hero{padding:60px 5%;min-height:560px}.hero h1{letter-spacing:-2px}.hero p{font-size:15px}.stats{gap:20px}.section{padding:60px 5%}.section h2{font-size:31px}.section-head{align-items:start;flex-direction:column}.section-head input{width:100%}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.card img{height:140px}.card-body{padding:12px}.card h3{font-size:14px}.price{font-size:17px}footer{grid-template-columns:1fr 1fr;padding:40px 5%}.brand b{font-size:13px}}
@media(max-width:450px){.grid{grid-template-columns:1fr 1fr}.hero-actions{flex-direction:column}.hero-actions a{text-align:center}.stats{gap:14px}.stats b{font-size:17px}.stats span{font-size:10px}}