body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: #f9f9f9;

    color: #222;

}

header {

    text-align: center;

    padding: 60px 20px;

    background: #111;

    color: white;

}

section.section {

    padding: 50px 20px;

    text-align: center;

}

.grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 20px;

    margin-top: 30px;

}

.card {

    background: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}

footer {

    padding: 20px;

    text-align: center;

    background: #111;

    color: white;

    margin-top: 40px;

}
/* NAVBAR */

.navbar {

    background: #111;

    padding: 12px 0;

    width: 100%;

    box-shadow: 0 2px 6px rgba(0,0,0,0.3);

}

.nav-container {

    width: 90%;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    color: gold;

    font-size: 1.4rem;

    font-weight: bold;

}

.nav-links {

    list-style: none;

    display: flex;

    gap: 20px;

}

.nav-links li a {

    color: #eee;

    text-decoration: none;

    font-size: 1.1rem;

    transition: 0.2s;

}

.nav-links li a:hover {

    color: gold;

}

/* UNDER DEVELOPMENT RIBBON */

.ribbon {

    background: #ffd700;

    color: #111;

    padding: 10px;

    text-align: center;

    font-weight: bold;

    margin-bottom: 20px;

    font-size: 0.95rem;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}
/* Import a professional and readable font */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {

    margin: 0;

    font-family: 'Inter', sans-serif;

    background-color: #f8f9fa; /* A very light, clean grey */

    color: #212529; /* Dark charcoal for text, easier to read than pure black */

    line-height: 1.6;

}

/* --- NAVBAR --- */

.navbar {

    background: #ffffff;

    border-bottom: 1px solid #dee2e6;

    padding: 15px 0;

    width: 100%;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}

.nav-container {

    width: 90%;

    max-width: 1200px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    font-size: 1.6rem;

    font-weight: 700;

    color: #212529;

    margin: 0;

}

.logo-gold {

    color: #D4AF37; /* A professional, muted gold */

}

.nav-links {

    list-style: none;

    display: flex;

    gap: 30px;

    margin: 0;

}

.nav-links li a {

    color: #495057;

    text-decoration: none;

    font-size: 1rem;

    font-weight: 500;

    transition: color 0.3s ease;

}

.nav-links li a:hover {

    color: #007bff; /* Trustworthy primary blue */

}

/* --- HEADER --- */

header {

    text-align: center;

    padding: 80px 20px;

    background-color: #343a40; /* Professional dark slate */

    color: white;

}

header h1 {

    margin: 0;

    font-size: 3rem;

    font-weight: 700;

}

header p {

    font-size: 1.1rem;

    color: #e9ecef;

}

/* --- SECTIONS --- */

section.section {

    padding: 80px 20px;

    max-width: 1200px;

    margin: auto;

    text-align: center;

}

section.section h2 {

    font-size: 2.5rem;

    margin-bottom: 50px;

    font-weight: 600;

    color: #212529;

}

/* --- CARDS (SOLID & PROFESSIONAL) --- */

.grid, .pricing-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

    margin-top: 30px;

}

.card, .pricing-card {

    background: #ffffff;

    padding: 30px;

    border-radius: 8px;

    border: 1px solid #dee2e6;

    box-shadow: 0 4px 6px rgba(0,0,0,0.05);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card:hover, .pricing-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 15px rgba(0,0,0,0.1);

}

.card h3, .plan-title {

    margin-top: 0;

    color: #212529;

    font-size: 1.5rem;

    font-weight: 600;

}

/* --- PRICING SECTION --- */

.plan-category {

    font-size: 1.8rem;

    margin-top: 60px;

    margin-bottom: 20px;

    color: #343a40;

}

.plan-price {

    font-size: 3rem;

    font-weight: 700;

    margin: 10px 0;

    color: #212529;

}

.price-period {

    font-size: 1rem;

    color: #6c757d;

    font-weight: 400;

}

.plan-features {

    list-style: none;

    padding: 0;

    margin: 25px 0;

    color: #495057;

    text-align: left;

}

.plan-features li {

    padding: 10px 0;

    border-bottom: 1px solid #e9ecef;

}

.plan-features li:last-child {

    border-bottom: none;

}

/* --- BUTTONS (CLEAN & SOLID) --- */

.cta-button {

    display: inline-block;

    padding: 12px 30px;

    background-color: #007bff; /* Primary blue CTA */

    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-weight: 500;

    transition: background-color 0.3s ease;

    margin-top: 15px;

    border: none;

}

.cta-button:hover {

    background-color: #0056b3; /* Darker blue on hover */

}

/* --- RIBBON & FOOTER --- */

.ribbon {

    background: #ffc107; /* A standard, noticeable yellow */

    color: #212529;

    padding: 12px;

    text-align: center;

    font-weight: 500;

}

footer {

    padding: 40px 20px;

    background-color: #343a40;

    color: #adb5bd;

}

.footer-container {

    max-width: 1200px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.footer-links {

    list-style: none;

    display: flex;

    gap: 20px;

}

.footer-links a {

    color: #adb5bd;

    text-decoration: none;

    transition: color 0.2s;

}

.footer-links a:hover {

    color: white;

}