:root {
    /*--bg-color: black;
    --text-color: #E0E0E0;
    --accent-color: #ff6600;
    --cta-hover: #cc5500;*/

    --bg-color: #ffffff; /* Light mode background */
    --text-color: #000000; /* Light mode text */
    --accordion-bg: #f1f1f1;

    /* For CTA's and in use in the typed JS element. May change this color code*/
    --accent-color: rgb(102, 8, 8) /*#ff6600*/;
    --cta-hover: rgb(200, 0, 0) /*#cc5500*/; 

  /* Dark Mode Variables */
    --dark-bg-color: #000700 /*#000000*/;
    --dark-text-color: #ffffff;
    --dark-accordion-bg: #222222;

    /*Navbar*/
    --navbar-bg-light: rgba(255, 255, 255, 0.6);
    --navbar-bg-dark: transparent /* rgba(30, 30, 30, 0.6)*/;
    --border-light: rgba(0, 0, 0, 0.2);
    --border-dark: rgba(255, 255, 255, 0.2);

    /* Horizontal scroll section */ 
    /* Update these values to be percentage-based instead of viewport-based. Undid once I added a container. It's better undone */
    --card-width: 1050px; /* Changed from 90vw to 28.5% to 28% (didn't 'recover' well on zoom and was not centered. Using a width relative to the viewport is more ideal so on zoom, the cards expand/shrink to fit their width) to 90vw (This works perfectly when the vieport is my reference, but the entire page is sized with the container as the reference. I have to have it fit within the container as the ref.) to 1000px */
    --card-gap: 2vw;    /* Changed from 2vw to 2% then back to 2vw*/
    --section-height: 100vh;
}

*, *::before, *::after{
    box-sizing: border-box;
    /*outline: 1px solid red; /*troubleshooting*/
}

html, body{
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%; /* Claude and GPT both co-sign on this */
    /* overflow-x: hidden; Prevents any accidental horizontal scroll. this affects horizontal scroll*/
}

/*body.light-mode {
    --bg-color: #F4F4F4;
    --text-color: #222222;
}*/

body.light-mode{ /* why does this exist when there's no overwriting root variables? */
    --bg-color: #ffffff;
    --text-color: #000000;
    --accordion-bg: #ffffff;
    --accordion-shadow: #f1f1f1;
}

/* Dark Mode Styles 
body.dark-mode {
    background-color: var(--dark-bg-color);
    color: var(--dark-text-color);
}  */

/* ___Dark Mode___ */
body.dark-mode{
    --bg-color: #000000;
    --text-color: #ffffff;
    --accordion-bg: #000000;
    --accordion-shadow: #121212;
}

.body-container{
    /* margin: 0 auto; */
    /* padding: 1%; */
    /* padding: 0% 3%; */
    max-width: 1280px; /*move to .body container*/
    transition: background 0.3s ease, color 0.3s ease;
    /* padding: 0 !important; */
    /*padding*/margin: /*90px*/ 0% 3%; /* Changed from 0% 20 px to 0% 3% */
    /*overflow-x: hidden; /* Prevents any accidental horizontal scroll. Still affects hosrizontal scroll */
    width: 100%; /* Got this from claude. let's test it out */
    padding: 0 20px;
}

.body-container.scroll-section{
    display: flex;
    align-items: center;
}

body > div{
    /* max-width: none; I may need to have a background on which the body sits that's without a max-width property. Like a frame of sorts*/
}

h1{
    font-family: 'Libre Baskerville', serif;
    font-size: 3em;
}

h2{
    font-family: 'Libre Bakersville', serif;
    font-weight: 500;
    /* font-size:larger; */
} 

h3{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size:larger;
}

a{
    color: inherit;      /* Makes the link use the same color as surrounding text */
    text-decoration: none; /* Removes the underline */
    font-weight: inherit; /* Ensures the weight is the same as regular text */
}

/* Optional: Add a hover effect to indicate interactivity */
a:hover{
    opacity: 0.8; /* Slight fade effect on hover */
    cursor: pointer;
}

body.dark-mode a{
    color: var(--dark-text-color);
}

/* ___Navbar Styling___ */
.navbar{
    position: fixed;
    display: flex;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* max-width: 100vw; */
    padding: 7px 7px 7px 10px;
    background: var(--navbar-bg-light);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, padding 0.3s ease-in-out, width 0.3s ease-in-out;

  
    justify-content: space-between; /* Space out elements */
    align-items: center;
    z-index: 1000;
}

/* Ensure navbar elements transition smoothly when shrinking */
.navbar *{
    transition: color 0s, background-color 0s, padding 0.3s ease-in-out, width 0.3s ease-in-out;
}

.nav-items{
    display: grid;
    justify-content: center; /* Ensures items stay centered */
    flex-grow: 1; /* Pushes items to the center */
    grid-auto-flow: column;
    grid-column-gap: 50px;
    margin: auto;
    align-items: center;
    font-weight: 400; /* 500 -> 400 */
}

.nav-items > *{
    display: flex;
    align-items: center;
}

.nav-items a,
.nav-items button{
    line-height: 1;
    padding: 0.5em 1em;
}

.navbar.scrolled{
    max-width: 90vw;
    margin-top: 0.5%;
    padding: 7px 7px 7px 10px ;
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

body.dark-mode .navbar{
    background: var(--navbar-bg-dark);
}

body.dark-mode .navbar.scrolled{
    border: 1px solid var(--border-dark);
}

.nav-cta{
    /* display: inline-block; */
    padding: 15px 30px; /* 10px 20px -> 15px 30px */
    /* background: var(--accent-color); */
    border: solid 1.3px;
    border-color: var(--accent-color);
    color: var(--accent-color)/* white*/;
    text-decoration: none;
    border-radius: 5px; /* 5px -> 8px -> 5px */
    transition: all 0.3s ease; /* background 0.3s ease -> all 0.3s ease */
    /* Claude's suggestions */
    font-weight: 500; 
    /* margin-top: 1rem; this affects  centering*/
    align-items: center;
    justify-content: center;
    align-self: center;
}

.nav-cta:hover{
    opacity: 0.8;
    cursor: pointer;
    border-color: var(--cta-hover);
    /* color: var(--cta-hover); */
    transform: translateY(-2px);
}

/*Contact button in the navbar*/
.contact-dropdown{
    position: relative;
    display: inline-block;
}

.contact-btn{
    position:relative;
    display: flex;
    align-self: center;
    background: transparent;
    color: var(--text-color);
    /*font-size: 16px;*/
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    font-weight: 500;
}

.dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background: black; /* Translucent */
    border-radius: 8px;
    min-width: 150px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.dropdown-content a{
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px;
    font-size: 14px;
}

.dropdown-content a:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Show dropdown when hovering */
.contact-dropdown:hover .dropdown-content {
    display: block;
}

/* Menu toggle. Hidden on desktop */
.fries-menu-btn{
    background: none;
    display: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 44px;
    min-height: 44px;
}

.fries-icon{
    width: 24px;
    height: 18px;
    display: none;
}

/*Toggle switch (changed from button)*/
.theme-switch{
    position: relative;
    width: 50px;
    height: 24px;
    display: flex;
    margin-left: auto;
}

.theme-switch input{
    display: none;
}

.slider{
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    border-radius: 34px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    
    /* Inset Neumorphic Effect (Recessed Look) */
    box-shadow: inset 0.7px 1.5px 3.5px rgba(0, 0, 0, 0.2), 
                inset -1px -1px 3.5px rgba(255, 255, 255, 0.5);
}

.slider::before{
    content: "☀️"; /* Sun emoji */
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    background: var(--bg-color);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, left 0.3s ease;
}

/* When dark mode is enabled */
input:checked + .slider{
    background-color: var(--dark-bg-color);
    
    /* Adjusted Neumorphic Effect for Dark Mode */
    box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.6), 
                inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}

input:checked + .slider::before{
    content: "🌙"; /* Moon emoji */
    left: 26px;
}
/* ___End of navbar styling___ */

/* ___Hero Section___ */
.content-container{
    padding: 0; /* 0 20px -> 0 because padding has been moved to .body-container{} */
}

.hero{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 90px 0; /* 90px 20px -> 90px 0*/
    min-height: 80vh; /* Claude's suggestion */
    /* max-width: 1280px; */
    /* margin: 0 auto; */
}

.hero-text{
    flex: 1;
    text-align: left;
    /*padding-right: 2rem; /* Claude's suggestion. Gives less space to work with*/
}

.hero-text h1{
    font-size: 2.9em;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-text p{
    font-size: 1.2em;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-image{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img{
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px;
}

/* .hero img {
    width: 400px;
    max-width: 100%;
    border-radius: 10px;
} */

/* Image visibility controls */
.hero-image-mobile{
    display: none;
}

.hero-image-desktop{
    display: block;
}

#typed-output{
    color: var(--accent-color);
    /* font-weight: 600; */
}

body.dark-mode #typed-output{
    /* color: var(--dark-text-color); */
    /* color: #106da2; */
    color: #00b3b3;
}

.banner{
    /*display: flex;
    position: fixed;*/
    background: rgba(255, 102, 0, 0.1); /* rgba(255, 255, 255, 0.2) -> rgba(255, 102, 0, 0.1) */
    padding: 10px 15px; /* 10px -> 10px 15px */
    border-radius: 8px; /* 5px -> 8px */
    font-weight: bold;
    /* Claude's suggestions */
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--accent-color);
    display: none;
}

.banner a{
    color: var(--accent-color);
    text-decoration: underline;
}

/* ___Call to Action___ */
.cta{
    display: inline-block;
    padding: 15px 20px; /* 10px 20px -> 15px 30px */
    background: var(--accent-color);
    color: white;
    text-decoration: none;
    border-radius: 8px; /* 5px -> 8px */
    transition: all 0.3s ease; /* background 0.3s ease -> all 0.3s ease */
    /* Claude's suggestions */
    font-weight: 500; /* 600 -> 500 */
    margin-top: 1rem;
}

.cta:hover {
    background: var(--cta-hover);
    /* Claude's suggestion */
    transform: translateY(-2px);
}

/* ___Pain points___ */

/* .pain-grid{
    display: flex;
    flex-direction: column;
} */

.pain-card{
    /* outline: 1px solid red; */
    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;        /* Vertically centers children */
    justify-content: space-between;
    /*padding: 4rem 2rem;         /* Adds breathing room */
    gap: 2rem;                  /* Space between image and text */
}

.pain-image{
    flex: 1;
    display: flex;
    justify-content: center;
}

.pain-text{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pain-text h3{
    margin: 0;
    /* font-size: 1.8rem; */
}

.pain-text p{
    margin: 0;
    /* font-size: 1.1rem; */
}

.pain-text hr{
    margin: 1rem 0;
    width: auto;
    border: 1px solid #ccc;
}

/*.pain-points{
    border-radius: 30px;
}

.pain-container{
    margin: 50px;
} */

/* ___Horizontal scroll section___ */
.scroll-section {
    height: 400vh; /* 4 cards * 100vh for scroll distance. Change the height and modify the .card{height} to match this change. */
    position: relative;
    /* margin-top: 60px; replace 80px with your actual navbar height */
    /* Claude's suggestion */
    width: 100%; /* 100vw (centering issues) to 100% */
    /* margin-left: calc(-50vw + 50%); /* Taking these margin properties out seems to allow the cards to fit inside the body container but only on the left side. The right side still appears to spill out */
    /* margin-right: calc(-50vw + 50%); */
    align-items: center;
    justify-content: center;
    /* max-width: 1150px; */
    margin: 0 auto; /* Seems to fix the centering issue */
    /* overflow-x: hidden; gotta deal with the overflow situation in desktop */
}

.card-track {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden; /* Changed from overflow: hidden; Just to be verbose and granular */
    overflow-y: hidden;
    display: flex;
    align-items: center;
    /* justify-content: center; /* This setting somehow shifts all the cards to the right by 2 card slots. Weird. But without it, the cards are 'left-aligned'and out of the container's bounds */
    width: 100%; /* Changed from 100vw to 100% */
    max-width: 1280px;
    padding-top: 50px;
}

.cards-wrapper {
    display: flex;
    gap: var(--card-gap);
    /* width: fit-content; */
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 5%; /* Changed from 5vw to 5% (to be relative to container) to 70px (px seems to be better for zoom/resolution changes) */
    scroll-behavior: smooth;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.card {
    flex: 0 0 var(--card-width);
    max-width: 1280px; /* Since my card width is relative to the vw for zoom fitting, this constraint is necessary to match the body container's width on wider screens. But i must center it. */
    height: calc(100vh - 4rem - 60px);
    box-sizing: border-box;
    padding: 3rem;/* may need to modify this when I start adding copy */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    /* background: #f5f5f5; */
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    border: 1.2px solid #ccc;
    scroll-behavior: smooth;
    flex-direction: row; /* or column on mobile */
    gap: 2rem;
}

.card.active {
    box-shadow: 0 10px 30px rgba(255,0,0,.25); /* red glow */
    /* background: rgba(255,0,0,.05);             light tint */
    /* transform: scale(1.03); */
    transition: all .3s ease;
}

    /* .card:nth-child(1) { background: #ffe0e0; }
    .card:nth-child(2) { background: #e0ffe0; }
    .card:nth-child(3) { background: #e0e0ff; }
    .card:nth-child(4) { background: #fff0b3; } */

.card-buttons {
    position: fixed;
    top: 70px; /*top: calc(60px + 20px); /* navbar height + original 20px offset */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: grid;
    justify-content: stretch;
    grid-template-columns: repeat(4, 250px); /* 5 buttons, each 200px wide. Removed auto-fit and minmax() which were causing wrapping behavior */
    grid-auto-flow: column;
    gap: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    max-width: 1240px; /* Add max-width to match your body container minus padding */
    /*width: calc(100% - 40px); /* Account for body padding */

    /* background: #ffffff; */
    /* border: dashed 0.001px; these work but are a little too much. I need to figure out a direction first*/ 
    /* border-radius: 4px; */
}

.card-buttons.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.card-buttons button {
    padding: 0.6rem 1.2rem;
    font-size: 0.7rem;
    background: var(--navbar-bg-light) /*transparent*/;
    backdrop-filter: blur(10px);
    color: var(--text-color);
    border: solid 0.001px;
    border-radius: 4px;
    border-color: var(--border-light); /* When this gets moved to the main styles.css sheet, make a .body.dark-mode .element config to allow for dark mode colouring */
    cursor: pointer;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.card-buttons button.active {
    background: darkred;
    color: var(--dark-text-color);
}

.card-buttons button:hover {
    background: lightgrey;
}

.card-buttons button.active:hover {
    background: #8b0000;
}

.right{
    /* width: 50%; */
    /* width: auto; */

    flex: 1;
    min-width: 0;

    /* text-align: center; */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
}

.right img {
    /* width: 100%; */
    width: auto;
    height: 60vh;
    max-width: 350px; /*Control the maximum size*/
    max-height: 80vh;
    object-fit: contain; /*Maintains aspect ratio*/
    display: block;
    margin: 0 auto; /*Additional centering for block elements*/
}

.left{
    /* width: 50%; */
    /* width: auto; */

    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
    /* font: ;  I'll mess with this once I change the copy and add more text*/
}

/* ___Demo Phone styling___ */
.phone-demo{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 90px 0; 
    min-height: 80vh;
}

.phone-wrap {
    position: relative;
    width: 300px;
    aspect-ratio: 1117.68 / 2238.04;
}

.phone-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none; /* just the frame image */
}

.phone-screen {
    position: absolute;
    top: 2.2%;  /* adjust to match your phone frame's visible screen area */
    left: 5.2%;
    width: 89.6%;
    height: 95.5%; /* match visible area */
    overflow: hidden;
    /*border-radius: 20px;*/
    background: white;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.chat-header,
.chat-footer {
    flex-shrink: 0;
    height: 60px; /* adjust to match SVGs */
    z-index: 20;
    background-color: #f2f2f2;
    position: relative;
}

.chat-footer{
    bottom: 2.2%;
}

.chat-content {
    flex: 1;
    overflow-y: auto;
    z-index: 10;
    background: #fff;
    overflow-y: auto;
    scrollbar-width: none; /* Hides scrollbar in Firefox */
    padding-top:14%;
}

.chat-content::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
}

.chat-content img {
    width: 100%;
    height: auto;
    display: block;
}

svg.header,
svg.footer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 21;
}

/* ___Services Page___ */
/* .sercices{
    padding: 90px 0;
} */

.service-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.service-card *{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}

.service-card img{
    max-width: 500px;
    height: auto;
    width: 500px;
}

.service-card hr{
    margin: 1rem 0;
    width: auto;
    border: 1px solid #ccc;
}

.service-card:nth-child(even) {
    flex-direction: row-reverse;
}
/* .service-text{

}

.service-image{

} */


/* ___Privacy Policy and ToS accordion___ */
.accordion {
    display: flex;
    background-color: /*transparent*/ var(--accordion-bg);
    color: /*#E0E0E0*/ var(--text-color);
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: 0.4s, ease-in-out;
    justify-content: space-between;
    align-items: center;
    /*shadow: var(--accordion-shadow);*/
}

.accordion .icon {
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    right: 15px; /* Adjust spacing */
    transition: 0.4s, ease-in-out;
}
  
/*.active, .accordion:hover {
    background-color: #ddd8d8;
}*/
  
.panel {
    padding: 0 18px;
    display: none;
    background-color: /*#121212*/ transparent;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;

    /*padding: 10px;*/
}

.active + .panel {
    display: block;
}
/* ___End of accordion styling___ */

/* ___Footer___ */
.main-footer {
    text-align: center;
    padding: 20px;
    background: #222;
    color: white;
    /* display: flex; */
    justify-content: space-between;
}

.footer-links a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

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



/* ___Mobile Styles___ */
@media (max-width: 768px) {
    :root{
        --card-width: 100vw; /* The cards act flexible, fit-content type of flexible, in this state. Might review */
    }

    .navbar{
        flex-wrap: wrap;
        display: flex;
        justify-content: space-between;
        /* position: relative; */
    }

    .fries-menu-btn{
        display: block;
        align-items: center;
        justify-content: center;
        /* order: 1; */
    }

    .fries-icon{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .fry{
        height: 2px;
        background: var(--text-color);
        border-radius: 1px;
        transition: all 0.3s ease;
        transform-origin: center;
    }

    .fry:nth-child(1) {
        width: 100%;
    }

    .fry:nth-child(2) {
        width: 85%;
    }

    .fry:nth-child(3){
        opacity: 0;
        width: 100%;
    }

    .fries-menu-btn.active .fry:nth-child(1) {
        transform: rotate(45deg) translate(5.5px, 5.5px);
    }

    .fries-menu-btn.active .fry:nth-child(2) {
        opacity: 0;
    }

    .fries-menu-btn.active .fry:nth-child(3) {
        opacity: 1;
        transform: rotate(-45deg) translate(5.5px, -5.5px);
    }

    .logo{
        order: 2;
        position: absolute;
        left: 50%;
        transform: translateX(-50%); /* Might need to mess with scale() values here to make it a little larger on mobile */
        z-index: 1;
    }

    .nav-items{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        display: none;
    }

    .nav-items.active{
        display: flex;
    }

    .nav-items a,
    .contact-dropdown{
        width: 100%;
        padding: 10px 0;
    }

    .theme-switch{
        order: 3;
        margin-left: auto;
    }

    .hide-on-menu {
        display: none !important;
    }

    .content-container {
        padding: 0 15px;
    }
    
    body {
        overflow-x: hidden;
        width: 100%; /* 100vw -> 100% */
        max-width: 100%; /* 100vw -> 100% */
        margin: auto;
        /* margin-right: 15%; */
        /* padding: 0 3%; */
    }

    body.dark-mode{
        background: #0A0A0A;
    }

    /* ___Mobile Hero___ */
    .hero {
        flex-direction: column;
        padding: 60px 0 40px;
        min-height: 90vh;
        text-align: center;
        justify-content: center;
    }

    .banner{
        display: none;
    }

    .hero-text {
        padding-right: 0;
        margin-bottom: 3rem;
        order: 1;
    }

    .hero-text h1 {
        /* font-size: 2.2em;*/
        margin-bottom: 1.5rem;
        line-height: 1.3;
        text-align: center;
        size: clamp(2.5rem, 5vw, 3.5rem); 
        letter-spacing: slight (0.02em);
        font-weight: 700;
    }

    .hero-text-mobile h3{
        size: clamp(1.125rem, 2vw, 1.5rem);
        font-weight: 500;
        line-height: 1.6;
    }

    .hero-text-mobile h3 .light-mode{
        color: #121212;
    }

    .hero-text p {
        font-size: 1.1em;
        margin-bottom: 2rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Mobile-specific hero text - no dynamic typing */
    .hero-text-mobile {
        display: block;
        max-width: 900px; 
        margin: auto; 
        text-align: center;
    }

    .hero-text-desktop {
        display: none;
    }

    .hero-image {
        order: 2;
        margin-bottom: 2rem;
    }

    .hero-image img {
        max-width: 4800px; /* 280px -> 300px */
        width: 100%; /* 90% -> 100% */ 
    }

    /* Switch image visibility on mobile */
    .hero-image-desktop {
        display: none;
    }

    .hero-image-mobile {
        display: block;
    }

    /* Prevent horizontal overflow */
    #typed-output {
        white-space: nowrap;
        overflow: hidden;
        max-width: 100%;
    }

    .cta{
        /* background: linear-gradient(to bottom, var(--accent-color) 0 80%, #fff); */
        background: linear-gradient(90deg, var(--accent-color), #ea3c33);
        border-radius: 9999px;
        Padding: 0.875rem 1.75rem;
        font-weight: 600;
    }

    /* ___Pain points section___ */
    .icon img{
        width: 200px;
        height: auto;
    }
    .pain-card{
        flex-direction: column;
        text-align: center;
    }

    .pain-image, .pain-text{
        flex: unset;
        width: 100%;
    }

    /* .pain-text hr{
        margin: 1rem auto;
    } */

    /* ___How it works section___ */
    .scroll-section {
        height: auto;
        /* min-height: 200vh; */
        /* padding: 80px -3% 40px; */
        width: 100%; /* Changed from 100vw */
        overflow-x: hidden;
        /*margin-top: 60px; /* replace 80px with your actual navbar height */
        /* Claude's suggestions */
        margin-left: 0;
        margin-right: 0;
    }

    .card-buttons {
        position: fixed;
        /* top: 20px; */ top: calc(60px + 20px); /* navbar height + original 20px offset */
        left: 0;
        right: 0;
        transform: none;
        padding: 0 20px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        width: 100%; /* Changed from 100vw */
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .card-buttons::-webkit-scrollbar {
        display: none;
    }

    .card-buttons.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .card-buttons button {
        white-space: nowrap;
        min-width: fit-content;
        flex-shrink: 0;
    }

    .card-track {
        position: static;
        height: auto;
        overflow: visible;
        width: 100%; /* Changed from 100vw */
    }

    .cards-wrapper {
        flex-direction: column;
        padding: 10% 10%; /* Changed from 10vw to 0 10% to 10% 10% (bottom and top cards needed a buffer) */
        gap: 2rem;
        transition: none;
        transform: none !important;
        width: 100%; /* Changed from 100vw */
        box-sizing: border-box;
    }

    .card {
        /* flex: none; */
        width: 100%; /* Changed from 80vw */
        height: 80vh; /*  */
        max-width: 100%; /* Changed from calc(100vw - 20vw) */
        padding: 2rem;
        font-size: 0.9rem /*1.5rem*/;
        opacity: 0.2;
        transition: opacity 0.3s ease;
        box-sizing: border-box;
        margin: 0 auto;

        flex-direction: column; /* To stack content vertically on mobile */
        /* text-align: center; I'll mess with  this later */
        /* with the following, I am trying to make the empty space between text and image more balanced */
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* padding: 90px 0;  */
        /* min-height: 80vh; */
    }

    .card.active {
        opacity: 1;
    }

    .card .right img {
        width: 100%; /* From 70vw (On different phone screens the image takes a different size and even spills out of card border) to 70% to 100% (it fills the space alotted it and can't spill over)*/
        max-width: 300px;
        height: auto; /* maintains aspect ratio*/
    }

    .card .left {
        margin-bottom: 1rem;
    }

    .spacer {
        height: 50vh;
        width: 100vw;
    }

    .phone-demo{
        flex-direction: column;
    }

    /* ___Service Page___ */
    .service-card,
    .service-card:nth-child(even) {
        flex-direction: column-reverse;
        text-align: center;
    }
}

/* ___Desktop-only styles___ */
@media (min-width: 769px) {
    .hero-text-mobile {
        display: none;
    }

    .hero-text-desktop {
        display: block;
    }
}

/* ___Additional mobile-specific text sizing___ */
@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 1.8em;
    }

    .hero-text p {
        font-size: 1em;
    }

    .content-container {
        padding: 0 10px;
    }
}