* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; background: #0b0d12; color: #ffffff; line-height: 1.6; } header { height: 72px; padding: 0 8%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #20242d; } .logo { font-size: 22px; font-weight: 700; } .logo span { color: #f6821f; } nav { display: flex; gap: 30px; } nav a { color: #aeb4c0; text-decoration: none; font-size: 14px; } nav a:hover { color: #ffffff; } .hero { min-height: 550px; display: flex; align-items: center; padding: 80px 8%; background: radial-gradient(circle at 70% 40%, #202b3d 0, #0b0d12 45%); } .hero-content { max-width: 700px; } .eyebrow { color: #f6821f; font-size: 13px; font-weight: bold; letter-spacing: 2px; margin-bottom: 20px; } h1 { font-size: clamp(50px, 7vw, 90px); line-height: 0.98; letter-spacing: -4px; margin-bottom: 28px; } .subtitle { max-width: 560px; color: #aeb4c0; font-size: 19px; margin-bottom: 35px; } .buttons { display: flex; gap: 15px; } .button { padding: 13px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 14px; } .primary { background: #f6821f; color: #ffffff; } .primary:hover { background: #ff8f32; } .secondary { border: 1px solid #414754; color: #ffffff; } .secondary:hover { background: #191d25; } .services { padding: 70px 8%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: #10131a; } .card { padding: 35px; border: 1px solid #252a34; border-radius: 10px; background: #141820; } .icon { font-size: 30px; margin-bottom: 20px; } .card h2 { margin-bottom: 10px; } .card p { color: #9299a6; font-size: 15px; } footer { padding: 30px 8%; text-align: center; color: #666d79; font-size: 13px; background: #0b0d12; } @media (max-width: 700px) { header { padding: 0 5%; } nav { display: none; } .hero { padding: 70px 5%; } h1 { letter-spacing: -2px; } .services { grid-template-columns: 1fr; padding: 50px 5%; } .buttons { flex-direction: column; } .button { text-align: center; } }