* { margin: 0; padding: 0; box-sizing: border-box; } 
html { font-size: 100%; scroll-behavior: smooth; } 
body { font-family: system-ui, sans-serif; font-size: 1.125rem; line-height: 1.6; color: #212529; background-color: #fff; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; color: #212529; line-height: 1.2; } 
h1 { font-size: 3rem; font-weight: bold; } 
h2 { font-size: 2rem; font-weight: normal; } 
h3 { font-size: 1.6rem; font-weight: normal; } 
.pro { color: #D32F2F; }
.lific, .web { color: white; }
.design { color: #D32F2F; }
ul { padding-left: 32px; list-style-position: inside; margin-bottom: 16px; } 
ul li { margin-left: 0; } 
p { font-size: 1.125rem; line-height: 1.6; color: #333; margin-bottom: 1.5rem; } 
.spacer-64px { height: 64px; width: 100%; display: block; clear: both; }
.spacer-32px { height: 32px; width: 100%; display: block; clear: both; }
.button-container { display: flex; justify-content: center; align-items: center; width: 100%; } 
.button { background-color: #FFD700; color: black; font-size: 1.7rem; padding: 16px 64px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; margin-bottom: 32px; } .button:hover { transform: scale(1.2); } 
.button:active { transform: scale(0.98); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.large-text { font-size: 1.375rem; } 
.small-text { font-size: 0.9375rem; }

.container { width: 980px; max-width: 100%; margin: 0 auto; padding: 0 32px; }

.main-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background-color: transparent; padding: 1rem 0; } 
.main-nav ul { list-style-type: none; display: flex; justify-content: flex-start; gap: 50px; } 
.main-nav a { color: #fff; font-weight: 600; text-decoration: none; transition: color 0.3s ease; font-size: 1rem; } 
.main-nav a:hover, .main-nav a:active { color: #FFC000; text-decoration: none; } 
.hamburger { display: none; cursor: pointer; padding: 10px; position: fixed; top: 20px; right: 20px; z-index: 1001; } 
.hamburger span { display: block; width: 25px; height: 3px; background-color: #fff; margin: 5px 0; }

.banner { position: relative; width: 100%; height: 600px; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; } 
.banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 10, 0.5); } 
.banner-text { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 980px; width: 100%; text-align: center; padding: 0; } 
.banner-text h1 { font-size: 5rem; margin-bottom: 0px; color: #fff; text-shadow: 0 0 12px rgba(0, 0, 0, 0.9); opacity: 0; animation: fadeIn 2s ease forwards; } 
@keyframes fadeIn {
  to { opacity: 1; }
}
.banner-text p { font-size: 1.8rem; color: #fff; }

section { padding: 0; } 
.section-split { display: flex; justify-content: space-between; margin-bottom: 64px; } 
.section-split > div { width: 48%; }

.features-list, .plan-list { list-style-type: none; padding-left: 0; } 
.features-list li, .plan-list li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; } 
.features-list li::before, .plan-list li::before { content: '✓'; color: royalblue; position: absolute; left: 0; }

.img-responsive { max-width: 100%; height: auto; display: block; margin: 1rem 0; }
img.left, img.right { max-width: 50%; margin: 0 20px 20px 0; }
img.left { float: left; }
img.right { float: right; }
.full-width-image { width: 100%; height: auto; display: block; margin: 0; }
figcaption { font-size: 1rem; text-align: center; color: #333; margin: 0; padding: 0 0 10px; }
figure { position: relative; }

a { color: #3344DD; text-decoration: underline; transition: color 0.3s ease; } 
a:hover { color: rgba(45, 149, 236, 0.5); }
 
footer { background-color: #25282d; padding: 24px 0; margin-top: 64px; } 
footer p, footer .copyright { color: #abb2ba; margin: 0; text-align: center; } 
.footer-content { display: flex; justify-content: center; align-items: center; flex-direction: column; } 
.copyright { font-size: 1rem; margin: 0; text-align: center; } 
footer .copyright a { color: #abb2ba; margin-left: 1rem; text-decoration: underline; } 
footer .copyright a:hover { color: #FFC000; } 
.cta-footer { padding: 32px 20px 0px 20px; text-align: center; margin-bottom: 16px; } 
.cta-footer h3 { font-size: 3rem; color: #abb2ba; font-weight: normal; text-align: center; margin-bottom: 10px; } 
.cta-footer p { margin-bottom: 0px; }
hr { border: 0; height: 1px; background-color: #444; margin-bottom: 20px; } 
::selection { background-color: #ffe500; color: black; }
pre { white-space: pre-wrap; word-wrap: break-word; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 1rem; overflow-x: auto; } 
code { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 0.9em; background-color: #f8f9fa; padding: 0.2em 0.4em; border-radius: 3px; }

@media (max-width: 768px) { 
    .container { padding: 0 16px; } 
    .hamburger { display: block; position: fixed; top: 20px; right: 20px; z-index: 1001; padding: 15px; } 
    .main-nav ul { display: none; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; 
        background-color: rgba(0, 0, 0, 0.9); padding: 120px 64px 64px 0; align-items: flex-start; 
        z-index: 1000; height: auto; max-height: 100vh; overflow-y: auto; } 
    .main-nav ul.show { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } 
    .main-nav li { margin: 10px 0; width: auto; text-align: left; } 
    .main-nav a { display: block; padding: 10px 0; white-space: nowrap; font-size: 1.5rem; }
    .section-split { flex-direction: column; } 
    .section-split > div { width: 100%; margin-bottom: 32px; } 
    .banner { height: 500px; } 
    .banner-text h1 { font-size: 4rem; } 
    .banner-text p { font-size: 1.3rem; } 
    .footer-content { flex-direction: column; text-align: center; } 
    .footer-links { margin-top: 1rem; } 
    .footer-links a { margin: 0 0.5rem; }
    
    pre, code { font-size: 0.8em; } 
} 

@media (max-width: 480px) { 
    .banner-text h1 { font-size: 4rem; } 
    .banner-text p { font-size: 1.1rem; } 
}