/* Custom Properties for a "Very Colorful" Palette */
:root {
    --bg-color: #fdf0d5;
    --primary: #ff5400;
    --secondary: #ff0054;
    --accent: #3e1f47;
    --teal: #00b4d8;
    --yellow: #ffbd00;
    --text-dark: #222;
    --text-light: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
}

/* Header & Navigation - REMOVED */

/* Hero Section */
.hero {
    min-height: 70vh; /* Increased slightly for logo */
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    padding: 80px 20px; /* Adjust padding for logo space */
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    border-top: 10px solid var(--accent); /* Added a top anchor border since header is gone */
}

/* Logo Integration Styling */
.site-logo {
    max-width: 100%;
    height: auto;
    width: 600px; /* Preferred max width for the detailed logo */
    margin-bottom: 2rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(4px 4px 0px var(--accent)); /* Match the Neo-Brutalist shadow style */
}

/* Updated hero text style to complement the logo */
.hero p {
    font-size: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 2px 2px 0px var(--accent);
}

.btn-primary {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 30px;
    background-color: var(--yellow);
    color: var(--accent);
    text-decoration: none;
    font-weight: 900;
    border-radius: 50px;
    box-shadow: 5px 5px 0px var(--accent);
    transition: transform 0.2s ease;
}

.btn-primary:hover {
    transform: scale(1.05);
}

/* Content Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 100px 5% 80px 5%; /* Adjusted top padding */
}

.card {
    padding: 40px;
    border-radius: 20px;
    color: white;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);
}

.color-1 { background-color: var(--teal); }
.color-2 { background-color: var(--primary); }
.color-3 { background-color: var(--secondary); }

.card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

/* Footer */
footer {
    text-align: center;
    padding: 40px;
    background: var(--accent);
    color: var(--text-light);
}

/* Responsive Tweak */
@media (max-width: 768px) {
    .site-logo { width: 80%; } /* Scale logo on mobile */
    .hero p { font-size: 1.2rem; }
}