:root {
    --bg-color: #030305;
    --text-primary: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --accent-blue: #0055FF;
    /* New Friendly Blue */
    --accent-teal: #0055FF;
    /* Replaced Teal with Blue for consistency, or use a complimentary color if needed */
    --device-frame: #1a1a1a;
    --device-bezel: #000000;
    --font-display: 'Outfit', sans-serif;
    --font-mono: 'Space Grotesk', monospace;
    --font-digital: 'Digital-7 Mono', monospace;
    --easing: cubic-bezier(0.23, 1, 0.32, 1);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-display);
    overflow-x: hidden;
}

/* Atmospheric Effects */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
    pointer-events: none;
    z-index: 100;
}

.ambient-glow {
    position: fixed;
    top: -50%;
    right: -20%;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 60%);
    filter: blur(100px);
    z-index: -1;
    animation: pulse 10s infinite alternate;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Navigation */
/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.splash-logo {
    width: 25%;
    height: auto;
    animation: simplePulse 2s infinite alternate;
}

@keyframes simplePulse {
    from {
        opacity: 0.6;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Navigation */
/* Navigation */
.glass-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    max-width: 1440px;
    margin: 0 auto;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(3, 3, 5, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 4px;
    /* Slight spacing between Package and Buddy */
}

.brand-dark {
    color: #123571;
    font-weight: 700;
    /* Bold for 'Package' */
}

.brand-light {
    color: #339ebf;
    font-weight: 400;
    /* Regular/Light for 'Buddy' */
}

.trademark-symbol {
    font-size: 0.6em;
    vertical-align: super;
    font-weight: 400;
    color: #123571;
    /* Match dark brand color */
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.3s var(--easing);
    font-size: 0.9rem;
}

.nav-links a:not(.nav-cta):hover {
    color: var(--text-primary);
}

.nav-cta {
    padding: 0.8rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary) !important;
    transition: all 0.3s var(--easing);
}

.nav-cta:hover {
    background: white;
    color: black !important;
}

/* Hero Section - Grid Layout */
.hero-section {
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "title image"
        "sub   image"
        "ctas  image";
    align-items: center;
    padding: 0 5%;
    max-width: 1440px;
    margin: 0 auto;
    gap: 1rem 4rem;
    position: relative;
    align-content: center;
}

.hero-section>h1 {
    grid-area: title;
    margin-bottom: 0;
    align-self: end;
}

.hero-section>.hero-sub {
    grid-area: sub;
    margin-bottom: 0;
    align-self: start;
    padding-top: 1rem;
}

.hero-section>.hero-ctas {
    grid-area: ctas;
    align-self: start;
    padding-top: 1rem;
}

.hero-section>.hero-visual {
    grid-area: image;
    justify-self: end;
}


h1 {
    font-size: 5rem;
    line-height: 0.95;
    letter-spacing: -0.04em;
    background: linear-gradient(to right, #fff, #aaa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 450px;
    line-height: 1.5;
}

.hero-ctas {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Updated Button Styles to handle <a> tags correctly */
.btn-primary {
    background: white;
    color: black;
    padding: 1rem 2rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-display);
    transition: all 0.3s var(--easing);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    /* Fixed height for consistency */
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

.btn-ghost {
    background: transparent;
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-display);
    transition: all 0.3s var(--easing);
    height: 50px;
    /* Fixed height for consistency */
}

.btn-ghost:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.05);
}

/* Hero Image */
.hero-image {
    width: 100%;
    max-width: 800px;
    /* Increased max-width for new extended image */
    height: auto;
    filter: drop-shadow(0 50px 100px rgba(0, 0, 0, 0.5));
    /* Removed 3D transform for the photorealistic extended background image as requested, 
       or we can keep it subtle. The user said "extended the sides... for desktop and mobile",
       usually such hero backgrounds are flatter. I will make it flat to fit the "background" feel better,
       or very subtle. Let's reset transform to ensure it looks like a proper wide shot. */
    transform: none;
    border-radius: 20px;
}

.hero-image:hover {
    transform: scale(1.01);
}

/* Demo Container */
.demo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.coming-soon {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Features Section with New 70/30 Layout */
.grid-section {
    padding: 5rem 5%;
    max-width: 1440px;
    margin: 0 auto;
}

.section-title h2 {
    font-size: 3rem;
    margin-bottom: 3rem;
    opacity: 0.2;
}

.capabilities-container {
    display: flex;
    gap: 3rem;
    align-items: stretch;
    min-height: 600px;
}

/* Left Side - 70% */
.capabilities-list {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Specific Feature Blocks */
.feature-block {
    position: relative;
    padding: 2.5rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    overflow: hidden;
    transition: all 0.4s var(--easing);
    flex: 1;
    /* Distribute height evenly */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Video Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: all 0.4s var(--easing);
}

.modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal-content {
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    position: relative;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(0, 85, 255, 0.3);
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.4s var(--easing);
}

.modal-overlay.hidden .modal-content {
    transform: scale(0.95);
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.modal-close:hover {
    opacity: 1;
}

#demo-player {
    width: 100%;
    height: 100%;
    display: block;
}

/* Liquid/Glass Aesthetic Enhancements */
.feature-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right,
            rgba(255, 255, 255, 0.05),
            transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.feature-block:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.feature-block:hover::before {
    opacity: 1;
}

.feature-block h3 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    position: relative;
    z-index: 1;
}

.feature-block h3 span {
    color: var(--accent-teal);
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.feature-block p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 80%;
    position: relative;
    z-index: 1;
}

/* Right Side - 30% - Image */
.capabilities-visual {
    flex: 0 0 30%;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}


.capabilities-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.6s var(--easing);
}

.capabilities-visual:hover img {
    transform: scale(1.05);
}

/* Removed .nameplate-preview styles */

/* App Section */
.app-section {
    padding: 10rem 5%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 5rem;
}

.app-text {
    flex: 1;
}

.app-text h2 {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 2rem;
}

.step {
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
}

.step .num {
    color: var(--accent-teal);
    font-family: var(--font-mono);
    font-weight: 700;
}

/* CSS Phone Mockup */
.phone-frame {
    width: 320px;
    height: 640px;
    background: #000;
    border-radius: 40px;
    border: 8px solid #222;
    position: relative;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 30px;
    background: #000;
    border-radius: 0 0 15px 15px;
    transform: translateX(-50%);
    z-index: 10;
}

.phone-screen {
    background: #0f0f13;
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
}

/* App Interface Mockup */
.app-interface {
    background: #ffffff;
    /* White bg for app */
    color: #111;
    font-family: var(--font-display);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.app-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
    margin-top: 15px;
    /* Added spacing from notch */
    color: #0055FF;
}

.app-title-small {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.app-welcome {
    margin-bottom: 20px;
}

.welcome-text {
    font-size: 1rem;
    color: #666;
}

.house-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
}

.btn-add-delivery {
    background: #0055FF;
    color: white;
    border: none;
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 85, 255, 0.3);
    cursor: pointer;
}

.btn-add-delivery:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 85, 255, 0.4);
}

.icon-plus {
    background: rgba(255, 255, 255, 0.2);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
}

.list-header {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #444;
}

.delivery-item {
    background: #f0f4ff;
    border: 1px solid #e0e8ff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.delivery-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #28a745;
    /* Green active status line */
    border-radius: 4px 0 0 4px;
}

.item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.green {
    background: #28a745;
}

.provider-name {
    font-weight: 700;
    font-size: 1rem;
    color: #000;
}

.badge-priority {
    background: #ffecb3;
    color: #8a6d3b;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.item-details {
    padding-left: 16px;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

.otp-highlight {
    color: #0055FF;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 2px;
}

/* Footer Updates */
.footer-cta {
    text-align: center;
    margin-bottom: 4rem;
}

.footer-cta h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.contact-icon-link {
    text-decoration: none;
    display: inline-block;
}

.mail-icon {
    font-size: 4rem;
    transition: transform 0.3s var(--easing);
    display: inline-block;
}

.contact-icon-link:hover .mail-icon {
    transform: scale(1.2) rotate(10deg);
}

/* Footer Bottom Redesign */
.footer-bottom {
    background-color: #ffffff;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 3rem 0;
    text-align: center;
    color: #444;
    /* Darker text for white bg */
    border-top: none;
    margin-top: 4rem;
    /* Spacing from CTA */
}

.footer-logo {
    width: 300px !important;
    max-width: 90%;
    height: auto;
    margin-bottom: 2rem;
    display: inline-block;
    /* Ensure it respects centering */
}

.copyright p {
    margin-bottom: 0.5rem;
}

.trademark-notice {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Animations */
.stagger-text {
    opacity: 0;
    animation: fadeUp 0.8s var(--easing) forwards;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Media Query Updates */
@media (max-width: 768px) {
    .glass-nav {
        padding: 1rem 5%;
    }

    .nav-links {
        display: none;
    }

    .hero-section {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "title"
            "sub"
            "image"
            "ctas";
        text-align: center;
        padding-top: 2rem;
        gap: 1.5rem;
    }

    .hero-section>h1 {
        justify-self: center;
        align-self: center;
    }

    .hero-section>.hero-sub {
        justify-self: center;
        align-self: center;
        margin-bottom: 0;
    }

    .hero-section>.hero-ctas {
        justify-self: center;
        align-self: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-section>.hero-visual {
        justify-self: center;
        align-self: center;
        width: 100%;
        margin: 1rem 0;
    }

    h1 {
        font-size: 3rem;
    }

    /* ... Existing mobile styles ... */
    .capabilities-container {
        flex-direction: column;
    }

    .capabilities-list,
    .capabilities-visual {
        flex: 1 1 auto;
        width: 100%;
    }

    .capabilities-visual {
        height: 450px;
    }

    .app-section {
        flex-direction: column-reverse;
        padding: 5rem 5%;
        gap: 3rem;
    }

    .app-text h2 {
        font-size: 2.5rem;
    }

    .app-text {
        text-align: center;
    }

    .step {
        justify-content: start;
        text-align: left;
    }

    .hero-image {
        width: 100%;
        max-width: 400px;
        transform: none;
    }
}

.footer-logo {
    width: 60px;
    height: auto;
    margin-bottom: 1rem;
    opacity: 0.8;
}