:root {
    --bg-color: #ffffff;
    --text-color: #202124;
    --accent-color: #1a73e8;
    /* Google Blue-ish */
    --btn-dark-bg: #202124;
    --btn-dark-text: #ffffff;
    --btn-light-bg: #f8f9fa;
    --btn-light-text: #202124;
    --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-stack);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Header */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-color);
    /* Ensure text color is inherited/set */
}

.logo-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
    box-shadow:
        0 4px 12px rgba(66, 133, 244, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-image:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow:
        0 8px 20px rgba(66, 133, 244, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Removed CSS shape logo */

.main-nav {
    display: flex;
    gap: 32px;
}

.nav-item {
    text-decoration: none;
    color: #5f6368;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-item:hover {
    color: var(--text-color);
}

.chevron {
    font-size: 0.8em;
}

.btn {
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: transform 0.1s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--btn-dark-bg);
    color: var(--btn-dark-text);
}

.btn-dark {
    background-color: var(--btn-dark-bg);
    color: var(--btn-dark-text);
}

.btn-light {
    background-color: var(--btn-light-bg);
    color: var(--btn-light-text);
    border: 1px solid #dadce0;
}

.btn-light:hover {
    background-color: #f1f3f4;
}

/* Hero */
.hero-section {
    text-align: center;
    padding: 120px 20px;
    position: relative;
    z-index: 10;
}

.hero-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    font-weight: 500;
    color: #5f6368;
}

/* Removed CSS shape for hero branding to be consistent or keep it? 
   The user asked to update "me logo", likely the main one. 
   The hero branding has a similar shape. I should probably update it too or remove the shape.
   I'll remove the shape and use the image if appropriate, or just leave it as text with image.
   For now, I'll assume they want the image in the header principally. 
   Replacing the hero-branding shape with the image too.
*/
.hero-branding img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25);
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25);
    }

    50% {
        box-shadow: 0 4px 20px rgba(66, 133, 244, 0.45), 0 0 30px rgba(52, 168, 83, 0.2);
    }
}

.hero-title {
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
    color: var(--text-color);
    animation: text-reveal 1s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes text-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation 2: Button Shine Effect */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: btn-shine 3s ease-in-out infinite;
}

@keyframes btn-shine {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

/* Animation 3: Hero branding bounce-in */
.hero-branding {
    animation: bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    opacity: 0;
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Antigravity Search */
.antigravity-search-container {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.antigravity-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    padding: 12px 24px;
    border-radius: 100px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.6);
    width: 100%;
    max-width: 480px;
    transform-style: preserve-3d;
    animation: antigravity 4s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.antigravity-search-wrapper:hover,
.antigravity-search-wrapper:focus-within {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(32, 33, 36, 0.1);
    border-color: var(--accent-color);
    animation-play-state: paused;
}

.search-icon {
    font-size: 1.2rem;
    margin-right: 12px;
    opacity: 0.6;
}

#search-input {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--text-color);
    width: 100%;
    outline: none;
    font-family: var(--font-stack);
}

#search-input::placeholder {
    color: #9aa0a6;
}

@keyframes antigravity {

    0%,
    100% {
        transform: translateY(0px) rotateX(0deg);
    }

    50% {
        transform: translateY(-12px) rotateX(2deg);
    }
}

/* Features */
.features-section {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 80px 20px;
    text-align: center;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.feature-card p {
    color: #5f6368;
    line-height: 1.6;
}

/* Footer */
.site-footer {
    border-top: 1px solid #dadce0;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    color: #5f6368;
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    color: inherit;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .site-header {
        padding: 16px 20px;
    }

    .main-nav {
        display: none;
        /* Simple mobile hide for MVP */
    }

    .hero-title {
        font-size: 3rem;
    }
}

/* Blog Grid Styles */
.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 40px;
    width: 100%;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    width: 100%;
}

.blog-card {
    text-align: left;
    background: #fff;
    border: 1px solid #f1f3f4;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.blog-card:focus-within {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

.card-image {
    width: 100%;
    height: 200px;
    background: #f8f9fa;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.blog-card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-date {
    font-size: 0.8rem;
    color: #9aa0a6;
    margin-bottom: 8px;
    font-weight: 500;
}

.blog-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.blog-card p {
    color: #5f6368;
    margin-bottom: 20px;
    flex-grow: 1;
}

.read-more {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 500;
    font-size: 0.9rem;
    margin-top: auto;
}

.read-more:hover {
    text-decoration: underline;
}

.loading-spinner {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #5f6368;
}

/* Post Page Styles */
.post-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
}

.post-header {
    text-align: center;
    margin-bottom: 40px;
}

.post-meta {
    color: #5f6368;
    font-size: 0.9rem;
    margin-bottom: 16px;
    font-weight: 500;
}

.tag {
    color: var(--accent-color);
    margin-left: 4px;
}

.post-header h1 {
    font-size: 3rem;
    line-height: 1.2;
    color: var(--text-color);
}

.post-hero-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 60px;
}

.post-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #3c4043;
}

/* Typography for Article Content */
.post-content h2 {
    font-size: 1.8rem;
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--text-color);
}

.post-content p {
    margin-bottom: 24px;
}

.post-content ul,
.post-content ol {
    margin-bottom: 24px;
    padding-left: 20px;
}

.post-content li {
    margin-bottom: 8px;
}

.post-content code {
    background: #f1f3f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.post-content blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 20px;
    color: #5f6368;
    font-style: italic;
    margin: 24px 0;
}