:root {
    --bg-color: #022c22;
    /* Deep Emerald/Black */
    --text-color: #ffffff;
    /* Pure White for max contrast */
    --accent-color: #34d399;
    /* Emerald 400 - Brighter Green */
    --btn-dark-bg: #10b981;
    /* Emerald 500 */
    --btn-dark-text: #ffffff;
    --btn-light-bg: #065f46;
    /* Emerald 800 */
    --btn-light-text: #f9fafb;
    --card-bg: rgba(6, 78, 59, 0.7);
    /* Dark Green Glass */
    --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.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background-image: radial-gradient(circle at 50% 0%, #065f46 0%, #022c22 60%);
}

/* Header */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: sticky;
    top: 0;
    background: rgba(2, 44, 34, 0.85);
    /* Dark Glass */
    backdrop-filter: blur(12px);
    z-index: 100;
    border-bottom: 1px solid rgba(16, 185, 129, 0.1);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-color);
}

.logo-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #34d399, #10b981, #059669, #047857);
    box-shadow:
        0 4px 12px rgba(16, 185, 129, 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(16, 185, 129, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Removed CSS shape logo */

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

.mobile-menu-toggle {
    display: none;
    /* Hidden on desktop */
}

.nav-item {
    text-decoration: none;
    color: #a7f3d0;
    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;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.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 rgba(16, 185, 129, 0.2);
}

.btn-light:hover {
    background-color: rgba(16, 185, 129, 0.2);
}

/* 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: 20px;
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 0 40px rgba(16, 185, 129, 0.5);
    transition: transform 0.3s ease;
}

.hero-branding:hover {
    transform: scale(1.05);
}

/* 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, #34d399, #10b981, #059669, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    }

    50% {
        box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45), 0 0 30px rgba(52, 211, 153, 0.2);
    }
}

/* Pricing Page Styles */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.pricing-card {
    background: rgba(2, 44, 34, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 24px;
    padding: 30px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-color);
}

.pricing-card.owner-tier {
    background: linear-gradient(145deg, rgba(6, 95, 70, 0.7), rgba(2, 44, 34, 0.8));
    border: 1px solid rgba(52, 211, 153, 0.5);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
}

.tier-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-color);
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 24px;
    align-self: flex-start;
}

.tier-badge.owner {
    background: var(--accent-color);
    color: #022c22;
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.4);
}

.pricing-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.price-row:last-child {
    border-bottom: none;
}

.price-row .duration {
    font-size: 1.1rem;
    color: #cbd5e1;
}

.price-row .price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.price-row.highlight {
    background: rgba(52, 211, 153, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 -16px;
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.price-row.highlight .price {
    color: var(--accent-color);
}

.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(6, 78, 59, 0.4);
    backdrop-filter: blur(12px);
    padding: 14px 28px;
    border-radius: 100px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.2);
    width: 100%;
    max-width: 520px;
    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.2),
        0 4px 12px rgba(16, 185, 129, 0.1);
    border-color: var(--accent-color);
    animation-play-state: paused;
}

.video-highlight-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 12px 24px;
    border-radius: 50px;
    color: #ecfdf5;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.video-highlight-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent-color);
    border-radius: 50%;
    color: white;
    font-size: 12px;
    padding-left: 2px;
    /* Center the triangle visually */
}

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

#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: #6ee7b7;
}

@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: #a7f3d0;
    line-height: 1.6;
}

/* Footer */
.site-footer {
    border-top: 1px solid rgba(16, 185, 129, 0.1);
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    color: #6ee7b7;
    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;
    }

    /* Mobile Menu Toggle Button (Floating) */
    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 90px;
        right: 20px;
        background: rgba(2, 44, 34, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(16, 185, 129, 0.4);
        border-radius: 12px;
        cursor: pointer;
        padding: 12px;
        z-index: 1000;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }

    .mobile-menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-color);
        margin: 5px 0;
        transition: 0.3s;
        border-radius: 2px;
    }

    /* Hamburger Animation */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Mobile Nav Drawer */
    .main-nav {
        display: flex;
        position: fixed;
        top: 70px;
        /* Adjust based on header height */
        left: 0;
        width: 100%;
        background: rgba(2, 44, 34, 0.95);
        backdrop-filter: blur(15px);
        flex-direction: column;
        align-items: center;
        padding: 40px 0;
        gap: 30px;
        transform: translateY(-150%);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 99;
        border-bottom: 1px solid rgba(16, 185, 129, 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .main-nav.active {
        transform: translateY(0);
    }

    .main-nav a {
        font-size: 1.2rem;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

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

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

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

.blog-card {
    text-align: left;
    background: var(--card-bg);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-color);
}

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

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

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    /* Important for the sales screenshot to show the relevant part */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
}

.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: #6ee7b7;
    margin-bottom: 8px;
    font-weight: 500;
}

.blog-card h3 {
    color: #e5e7eb;
    margin-bottom: 32px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ecfdf5;
}

.blog-card p {
    color: #d1fae5;
    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;
}

/* Contact Section */
.contact-section {
    padding: 80px 24px;
    background: linear-gradient(180deg, rgba(6, 78, 59, 0.4) 0%, rgba(6, 78, 59, 0) 100%);
}

.contact-container {
    max-width: 900px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    justify-content: center;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    padding: 32px;
    text-decoration: none;
    transition: transform 0.3s, background 0.3s;
}

.contact-card:hover {
    transform: translateY(-5px);
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
}

.line-card:hover {
    background: rgba(6, 199, 85, 0.15);
    border-color: #06c755;
}

.contact-icon {
    width: 64px;
    height: 64px;
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.contact-card h3 {
    color: #ecfdf5;
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.contact-card p {
    color: #a7f3d0;
    margin-bottom: 20px;
}

.contact-cta {
    display: inline-block;
    padding: 8px 24px;
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.contact-card:hover .contact-cta {
    background: var(--accent-color);
    color: white;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }

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