:root {
    --color-bg: #FFFFFF;
    --color-surface: #F9F9F9;
    --color-surface-glass: rgba(255, 255, 255, 0.8);
    --color-text: #1a1a1a;
    --color-text-muted: #555555;
    --color-primary: #d08b0a;
    /* Gold */
    --color-primary-glow: rgba(208, 139, 10, 0.2);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Outfit', sans-serif;
    --spacing-container: 2rem;
    --border-radius: 16px;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-container);
}

.section-padding {
    padding: 100px 0;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-weight: 600;
}

.gold-text {
    color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary) 0%, #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
    /* Use inline to avoid block wrapping issues */
    font-weight: 700;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    z-index: 100;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 50px;
    /* Revised height for better proportion */
}

.nav-menu ul {
    display: flex;
    gap: 30px;
}

.nav-menu a {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    color: var(--color-text-muted);
    position: relative;
    padding: 5px 0;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-primary);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}


/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 80px;
    text-align: center;
}

.hero-logo {
    width: 120px;
    margin: 0 auto 30px;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(208, 139, 10, 0.05), transparent 40%),
        radial-gradient(circle at bottom left, rgba(208, 139, 10, 0.03), transparent 40%);
    z-index: -1;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    display: block;
    font-weight: 700;
}

.hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1.1;
    margin-bottom: 30px;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto 50px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--color-primary);
    color: #000;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--color-primary-glow);
    background: #e5c14d;
}

/* Cards */
.card {
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 40px;
    height: 100%;
}

.analysis-card {
    border-left: 4px solid #ff4444;
    /* Error red for current issues */
    position: relative;
    overflow: hidden;
}

.vision-card {
    position: relative;
    background: var(--color-surface-glass);
    overflow: hidden;
    /* For border beam */
}

.pain-points li,
.vision-points li {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
    align-items: flex-start;
}

.pain-points li:last-child,
.vision-points li:last-child {
    margin-bottom: 0;
}

.icon {
    font-size: 2rem;
}

/* Border Beam Animation */
.border-beam::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    background: linear-gradient(90deg, var(--color-primary), transparent 50%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;

    pointer-events: none;
    animation: borderBeam 4s linear infinite;
}

@keyframes borderBeam {
    0% {
        clip-path: inset(0 0 98% 0);
    }

    25% {
        clip-path: inset(0 98% 0 0);
    }

    50% {
        clip-path: inset(98% 0 0 0);
    }

    75% {
        clip-path: inset(0 0 0 98%);
    }

    100% {
        clip-path: inset(0 0 98% 0);
    }
}

/* Simplify border beam for web: Moving gradient border */
/* Actually, a better performant border beam is a moving pseudo element */
.vision-card {
    box-shadow: 0 0 30px rgba(208, 139, 10, 0.05);
}

/* Feature Cards */
.feature-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: var(--border-radius);
    transition: transform 0.3s ease, background 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(208, 139, 10, 0.3);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--color-primary);
}

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

.feature-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.stat-badge {
    display: inline-flex;
    flex-direction: column;
    background: rgba(208, 139, 10, 0.1);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(208, 139, 10, 0.2);
}

.stat-number {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.2rem;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Bonus Card specific */
.bonus-card {
    border: 1px solid var(--color-primary);
    background: linear-gradient(45deg, rgba(208, 139, 10, 0.05), transparent);
}

.bonus-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #000;
    background: var(--color-primary);
    padding: 4px 10px;
    border-radius: 4px;
}

/* Investment Section */
.pricing-wrapper {
    display: flex;
    flex-direction: column;
    /* Mobile first */
    gap: 30px;
    margin-top: 50px;
}

@media (min-width: 768px) {
    .pricing-wrapper {
        flex-direction: row;
        align-items: stretch;
    }
}

.pricing-card {
    background: var(--color-surface);
    border-radius: var(--border-radius);
    padding: 40px;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pricing-card.major {
    background: linear-gradient(180deg, var(--color-surface) 0%, rgba(208, 139, 10, 0.05) 100%);
    border: 1px solid rgba(208, 139, 10, 0.3);
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 2;
    transform: scale(1.02);
    /* Pop out */
}

.pricing-card.minor {
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
}

.pricing-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.pricing-header h4 {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.price {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-primary);
}

.per-month {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-family: var(--font-body);
}

.terms {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    opacity: 0.7;
}

.pricing-features li {
    padding: 12px 0;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-features li::before {
    content: '\2713';
    color: var(--color-primary);
    font-weight: bold;
    font-family: sans-serif;
    /* Setup safe font for unicode */
}

/* Footer Updates */
.footer {
    padding: 70px 0 30px;
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
}

.footer-brand p {
    color: var(--color-text-muted);
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.agency-logo {
    /* Logo styling update */
    height: auto;
    width: 200px;
    /* Increased width for visibility */
    max-width: 100%;
    margin: 0 auto;
    transition: 0.3s;
    opacity: 1;
    filter: none;
}

.agency-logo:hover {
    filter: none;
    opacity: 1;
}

.footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 0.95rem;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.contact-link:hover {
    background: var(--color-primary);
    color: #000;
    transform: translateY(-3px);
}

.icon-sm {
    font-size: 1.1rem;
}

.footer-copyright {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.footer-copyright p {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
}

/* ANIMATIONS */
/* Fade In Up / Scroll Reveal */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Bidirectional: If scrolling UP, we might want a different feel?
   Commonly bidirectional just means elements animate in from bottom when going down,
   and maybe stay there or re-animate. The user request "Bidirectional animations (scrolling down and scrolling up)"
   usually implies that if you scroll UP past them and come back, they trigger again, OR they hide when you scroll past.
   Or it implies parallax. I will implement a re-triggerable observer or just standard nice entry.
   Let's make them stick once visible for better UX, but if the user wants "action", I'll make them 
   fade out when scrolling up to "reset" them? That can be annoying. 
   I will interpret "Bidirectional" as: Elements slide UP when you scroll DOWN to them. 
   And maybe headers slide DOWN when you scroll UP?
   Actually, I'll stick to a robust IntersectionObserver that adds 'is-visible' when entering viewport.
*/

/* Glow Cursor Effect */
.cursor-glow {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(208, 139, 10, 0.08) 0%, transparent 70%);
    position: fixed;
    top: -200px;
    left: -200px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(0, 0);
    transition: transform 0.1s linear;
}

/* Section Title decoration */
.section-title {
    font-size: 3rem;
    margin-bottom: 60px;
    text-align: center;
}

/* Mobile Optimizations */
@media (max-width: 768px) {

    /* Hide custom cursor on touch devices */
    .cursor-glow {
        display: none;
    }

    /* Adjust Layout */
    .section-padding {
        padding: 60px 0;
    }

    .container {
        padding: 0 1.5rem;
    }

    /* Typography */
    .hero-title {
        font-size: 2.5rem;
        /* Smaller on mobile */
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    /* Navigation */
    .header-content {
        flex-direction: column;
        gap: 15px;
    }

    .header .logo {
        display: none;
    }

    .nav-menu ul {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-menu a {
        font-size: 0.8rem;
    }

    /* Footer */
    .footer {
        padding: 50px 0 20px;
    }

    .footer-contact {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .contact-link {
        width: 100%;
        justify-content: center;
    }

    /* Footer Spacing Fixes */
    .footer-content {
        gap: 20px;
        /* Reduce generic gap */
    }

    .footer-brand p {
        margin-bottom: 5px;
        /* Reduce space under 'Prepared by' */
    }

    .agency-logo {
        margin-bottom: 5px;
        /* Reduce space around logo */
    }

    /* Cards */
    .card,
    .feature-card,
    .pricing-card {
        padding: 25px;
    }
}

/* Light Theme Adjustments */
.header {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card,
.pricing-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-card);
}

.feature-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-card);
}

.feature-card:hover {
    background: #fff;
    border-color: var(--color-primary);
}

.pricing-card.minor {
    background: #f5f5f5;
}

.pricing-header,
.footer-copyright {
    border-color: rgba(0, 0, 0, 0.1);
}

.footer {
    background: #111;
    /* Keep footer dark for contrast */
    color: #fff;
}

.footer p {
    color: #888;
}

.footer-brand p {
    color: #aaa;
}

/* Adjust gradients for light bg */
.hero-bg {
    background: radial-gradient(circle at top right, rgba(208, 139, 10, 0.15), transparent 40%),
        radial-gradient(circle at bottom left, rgba(208, 139, 10, 0.1), transparent 40%);
}

.cursor-glow {
    background: radial-gradient(circle, rgba(208, 139, 10, 0.15) 0%, transparent 70%);
}