*{ margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif; } html{ scroll-behavior:smooth; } body{ background:#000; color:white; } /* NAVBAR */ .navbar{ width:100%; padding:25px 8%; display:flex; justify-content:space-between; align-items:center; position:fixed; top:0; left:0; z-index:999; background:rgba(0,0,0,0.7); backdrop-filter:blur(12px); } .logo{ font-size:30px; font-weight:bold; letter-spacing:4px; } .white{ color:white; } .gray{ color:#777; } nav{ display:flex; gap:30px; } nav a{ color:white; text-decoration:none; font-size:14px; transition:0.3s; } nav a:hover{ color:#999; } .contact-btn{ padding:12px 24px; border-radius:50px; background:white; color:black; text-decoration:none; font-weight:bold; } /* HERO */ .hero{ min-height:100vh; display:flex; align-items:center; justify-content:space-between; gap:60px; padding:140px 8% 80px; } .hero-left{ width:50%; } .subtitle{ color:#777; letter-spacing:4px; margin-bottom:20px; } .hero-left h1{ font-size:90px; line-height:1; margin-bottom:30px; } .description{ color:#aaa; line-height:1.8; max-width:550px; } .hero-buttons{ margin-top:40px; display:flex; gap:20px; } .primary-btn{ background:white; color:black; padding:14px 28px; border-radius:50px; text-decoration:none; font-weight:bold; } .secondary-btn{ border:1px solid rgba(255,255,255,0.2); color:white; padding:14px 28px; border-radius:50px; text-decoration:none; } .hero-right{ width:50%; } .mockup{ width:100%; height:600px; overflow:hidden; border-radius:30px; } .mockup img{ width:100%; height:100%; object-fit:cover; } /* SECTION */ .section{ padding:120px 8%; } .section h1{ font-size:60px; margin-bottom:50px; } /* FEATURES */ .features{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding:0 8% 120px; } .card{ background:#111; padding:40px; border-radius:25px; } .card h2{ margin-bottom:20px; } .card p{ color:#999; line-height:1.7; } /* TEMPLATE */ .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .template-box{ height:400px; overflow:hidden; border-radius:25px; } .template-box img{ width:100%; height:100%; object-fit:cover; transition:0.5s; } .template-box:hover img{ transform:scale(1.05); } /* ABOUT */ .dark-section{ background:#050505; } .about-text{ color:#aaa; line-height:1.8; max-width:700px; } /* PRICE */ .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .price-card{ background:#111; padding:50px; border-radius:25px; text-align:center; } .price-card h2{ margin-bottom:20px; } .price-card h3{ font-size:40px; } .featured{ background:white; color:black; } /* REVIEW */ .review-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } .review-card{ background:#111; padding:40px; border-radius:25px; } .review-card p{ color:#aaa; line-height:1.8; margin-bottom:20px; } /* MOBILE */ @media(max-width:900px){ nav{ display:none; } .hero{ flex-direction:column; } .hero-left, .hero-right{ width:100%; } .hero-left h1{ font-size:60px; } .features, .grid, .pricing-grid, .review-grid{ grid-template-columns:1fr; } }