/* Define font sizes and colors for the website */


:root {

    /* Key Dimensions*/
    --page-width: 640px;

    /* Font sizes */
    --font-title: 2.2rem;
    --font-header: 1.1rem;
    --font-body: 0.8rem;
    --font-caption: 0.6rem;

    /* Colors */
    --color-inc: rgba(50, 175, 75, 1);
    --color-inc2: rgba(25, 100, 50, 1);
    --color-exp: rgba(225, 0, 125, 1);
    --color-exp2: rgba(125, 0, 75, 1);
    --color-ass: rgba(50, 175, 175, 1);
    --color-ass2: rgba(25, 100, 100, 1);
    --color-white: rgba(255, 255, 255, 1);
    --color-bgrey: rgb(20, 20, 30);
    --color-bblack: rgb(0, 0, 0);
    --color-dgrey: rgb(60, 60, 60);
    --color-grey: rgb(140, 140, 160);
}

.gradient-overlay {
    position: fixed; /* Sticks to the top of the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh; /* Covers 20% of the viewport height */
    background: linear-gradient(to bottom, black, transparent); /* Black to transparent */
    z-index: 10; /* Ensure it's on top of the content */
    pointer-events: none; /* Allows interactions with elements below */
}
.gradient-grey {
    width: 100%;

    background: linear-gradient(to bottom, transparent, var(--color-bgrey)); /* Black to transparent */
    z-index: 10; /* Ensure it's on top of the content */
    pointer-events: none; /* Allows interactions with elements below */
}
.gradient-grey2 {
    width: 100%;

    background: linear-gradient(to bottom, var(--color-bgrey), transparent); /* Black to transparent */
    z-index: 10; /* Ensure it's on top of the content */
    pointer-events: none; /* Allows interactions with elements below */
}

.grid-center {
    display: grid;              /* Set the container to use CSS Grid */
    place-items: center;        /* Center items horizontally and vertically */
    height: calc(100vh - 175px); /* Make the container take up the full height of the viewport */
}
.grid-bottom {
    display: grid;              
    place-items: end center;     
    height: calc(100vh - 175px);              
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--font-title);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.5;
    margin: 0;
}
h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--font-header);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.5;
    margin: 0;
}
p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--font-body);
    font-weight: 200;
    color: var(--color-white);
    line-height: 1.5;
    margin: 0;
}
p1 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--font-caption);
    font-weight: 200;
    color: var(--color-white);
    line-height: 1.5;
    margin: 0;
}
.caption {
    font-size: var(--font-caption);
}
.halfbr {
    display: block;
    height: 5px;
}

html {
    -webkit-text-size-adjust: 100%; /* Prevents Safari from resizing text */
}

/* Reset margin and padding for the entire page */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* prevent horizontal page scroll on iPhone */
}

/* Default page background */
body { background-color: black; }
/* Ensure padding/border don't cause overflow beyond width */
*, *::before, *::after { box-sizing: border-box; }




/* Styling Colors */
.inc { color: var(--color-inc); }
.inc2 { color: var(--color-inc2); }
.exp { color: var(--color-exp); }
.exp2 { color: var(--color-exp2); }
.ass { color: var(--color-ass); }
.ass2 { color: var(--color-ass2); }
.white { color: var(--color-white); }
.black { color: var(--color-bblack);}
.white-regular { color: var(--color-white); font-weight: 200;}
.white-bold { color: var(--color-white); font-weight: 600;}
.grey { color: var(--color-grey); }


.b-white { background-color: var(--color-white);}
.b-grey { background-color: var(--color-bgrey);}
.b-black { background-color: var(--color-bblack);}
.b-lgrey { background-color: var(--color-grey);}
.b-inc { background-color: var(--color-inc); }
.b-exp { background-color: var(--color-exp); }
.b-ass { background-color: var(--color-ass); }

.highlight { text-shadow: 0 0 20px rgba(255, 255, 255, 1); }
.shadow { text-shadow: 0 0 20px rgba(0, 0, 0, 1); }
.boxshadow { box-shadow: 0 20px 20px rgba(0, 0, 0, 0.8); }




.link.active {
    text-shadow: 0 0 20px rgb(220, 220, 255);
    scale: 1.1;
}



/* Text Align*/
.t-left { text-align: left;}
.t-right { text-align: right;}
.t-center { text-align: center;}

.center-v { justify-content: center;}
.center-h { align-items: center;}

.self-start { align-self: flex-start;}
.self-center { align-self: center;}



.gap5 { gap: 5px; }
.gap10 { gap: 10px; }
.gap20 { gap: 20px; }
.gap30 { gap: 30px; }


.margins30 { margin: 30px;}
.margin-top30 { margin-top: 30px;}
.margin-top15 { margin-top: 15px;}
.margin-top10 { margin-top: 10px;}

.margin-bottom30 { margin-bottom: 30px;}




.row { display: flex; align-items:center; justify-content: center; }
.col { display: flex; flex-direction: column; justify-content: center; }


.h25 { height: 25px; }
.h50 { height: 50px; }
.h60 { height: 60px; }
.h75 { height: 75px; }
.h100 { height: 100px; }
.h150 { height: 150px; }
.h200 { height: 200px; }
.h250 { height: 250px; }
.h300 { height: 300px; }
.h350 { height: 350px; }
.h400 { height: 400px; }
.h450 { height: 450px; }
.h500 { height: 500px; }
.h600 { height: 600px; }
.h700 { height: 700px; }
.h725 { height: 725px; }
.h750 { height: 750px; }
.h800 { height: 800px; }
.h850 { height: 850px; }
.h900 { height: 900px; }
.h-auto { height: auto; }

.w25 { width: 25px; }
.w50 { width: 50px; }
.w55 { width: 55px; }
.w75 { width: 75px; }
.w85 { width: 85px; }
.w100 { width: 100px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.w350 { width: 350px; }
.w370 { width: 370px; }
.w400 { width: 400px; }
.w500 { width: 500px; }
.w600 { width: 600px; }




.link { cursor: pointer; }
.sticky { position: sticky; top: 0; z-index: 1000; }



.link-button {
    text-decoration: none;  /* Remove underline from link */
    display: inline-block;  /* Make the entire div clickable */
    pointer-events: auto;
}

/* Utility to force underline for legal footer links */
.u-underline { text-decoration: underline; }

.tra {
    height: 50px;
    border-radius: 15px;
    box-sizing: border-box;
    transition: transform 0.3s ease; /* Smooth transition on transform property */
}

.tra2 {
    box-sizing: border-box;
    transition: transform 0.3s ease; /* Smooth transition on transform property */
}

/* Grow the button slightly on hover */
.tra:hover {
    transform: scale(1.05); /* Slightly grow the element by 5% */
}

.tra2:hover {
    transform: scale(1.05); /* Slightly grow the element by 5% */
}

.square {
    height: 24px;
    width: 24px;
    font-size: 1.25rem;
    line-height: 1.10;
    text-align: center;       
    align-items: center;    
    justify-content: center;
    border-radius: 8.4px;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevents shrinking in Flexbox layouts */
    flex-grow: 0; /* Prevents expanding in Flexbox layouts */
}





.horizontal-line {
    height: 1px;                                /* Height of the line */
    background-color: var(--color-dgrey);       /* Color of the line */
    width: 100%;                                /* Line width (you can adjust it) */
    margin: 5px 0;                              /* Optional: Adds space above and below the line */
}






.w-page {
    max-width: 1200px; /* Maximum width for larger screens */
    width: 92%; /* Reduce side gutters */
    margin: 0 auto; /* Center the container */
}

.w-auto { width: auto; }

.row-stretch { display: flex; align-items:stretch; justify-content: space-around; gap:30px; width: 100%; }

.box {
    flex: 1;
    height: auto;
    position: relative;
    background-color: var(--color-bgrey);
    border-radius: 30px;
    margin-bottom: 0; /* remove gap between boxes */
    gap: 20px;
    padding: 20px ;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

/* Media query for small screens */
@media (max-width: 640px) {
    .row-stretch {
        flex-direction: column; /* Stack items vertically */
        gap: 20px; /* Adjust gap for vertical layout */
    }
    .box {
        width: 85%; /* Keep desired width */
        flex-grow: 0; /* Prevent boxes from stretching vertically */
        margin-left: auto; /* Center horizontally */
        margin-right: auto; /* Center horizontally */
    }
}

























.styled-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.styled-form .form-group {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Ensure even spacing */
}

.styled-form label {
    width: 80px;
    margin-right: 10px;
    font-size: var(--font-body);
    font-family: Helvetica, sans-serif;
    color: white;
    text-align: right;
}

.styled-form input, .styled-form textarea {
    caret-color: var(--color-exp);
    flex: 1;
    padding: 6px;
    border: 1px solid var(--color-grey);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: var(--font-body);
    font-family: Helvetica, sans-serif;
    width: 300px;
    box-sizing: border-box; /* Ensure padding is included in width */
    max-width: calc(100%); /* Adjust width to account for label width and margin */
}

.styled-form textarea {
    min-height: 200px;
    caret-color: var(--color-exp);
    resize: vertical; /* Allow vertical resizing */
}

.styled-form input:focus, 
.styled-form textarea:focus {
    outline: none; /* Remove default blue outline */
    box-shadow: 0 0 5px var(--color-white); /* Highlight with custom color (e.g., --color-exp) */
    border-color: var(--color-white); /* Change border color to match the highlight */
}

.styled-form button.submit-button {
    width: 120px;
    height: 30px;
    /*padding: 8px 20px;*/
    background: var(--color-white);
    color: black;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-body);
    font-family: Helvetica, sans-serif;
    transition: background 0.3s;
    align-self: center;
}

.styled-form button.submit-button:hover {
    background: var(--color-grey);
}







.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.hidden {
    display: none;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    width: 80%;
    max-width: 240px;
}

#modal-message {
    margin-bottom: 20px;
    font-size: var(--font-body);
    font-family: Helvetica, sans-serif;
    color: black;
}

#modal-ok-button {
    width: 80px;
    height: 30px;
    /*padding: 8px 20px;*/
    background: black;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-body);
    font-family: Helvetica, sans-serif;
    transition: background 0.3s;
    align-self: center;
}

#modal-ok-button:hover {
    background-color: var(--color-grey);
}








.language-dropdown {
    position: relative;
    display: inline-block;
}

#language-button {
    border: none;
    background: transparent;
    cursor: pointer;
    margin-right: 0px;
    color: var(--color-white); /* Make ▼ white */
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-content {
    position: absolute;
    margin-right: 0px;
    background-color: var(--color-bgrey);
    min-width: 100px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1000;
    right: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-content a {
    color: var(--color-white);
    padding: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 4px;
}

.dropdown-content a img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.dropdown-content a:hover {
    background-color: var(--color-dgrey);
}

/* Hidden state (scoped to dropdown) */
.dropdown-content.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Visible state */
.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* ===== Carousel ===== */
/* ===== Hero Intro ===== */
#hero-title .hero-logo,
#hero-title .hero-left,
#hero-title .hero-right {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.94) translateZ(0);
    transition: opacity .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}

#hero-title .hero-left { transform: translateX(-12px) scale(0.94); }
#hero-title .hero-right { transform: translateX(12px) scale(0.94); }

/* Show logo first */
#hero-title.hero-show-logo .hero-logo {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
    transition-duration: 1.2s; /* slower logo so others catch up */
    transition-delay: .2s; /* ensure logo doesn't finish before titles start */
}

/* Then titles with slight stagger inheriting the same class */
#hero-title.hero-show-titles .hero-left {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0) scale(1);
    transition-duration: 1.1s;
    transition-delay: 0s;
}
#hero-title.hero-show-titles .hero-right {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0) scale(1);
    transition-duration: 1.1s;
    transition-delay: .12s; /* slight stagger so 'TheApp' trails 'Plans' */
}

/* ===== Section 1 container intro from below ===== */
#plans-section-container.intro-pre {
    opacity: 0;
    transform: translateY(40px) translateZ(0);
    filter: blur(8px);
}
#plans-section-container.intro-show {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    filter: blur(0px);
    transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1), filter .6s cubic-bezier(.2,.8,.2,1);
}
.reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.in-view { opacity: 1; transform: translateY(0); }

/* Smooth transitions for entrance effect on Section 2 container */
#premium-section-container .box {
    transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1), filter .45s cubic-bezier(.2,.8,.2,1);
    background-color: transparent; /* remove container color */
    padding: 0; /* remove inset padding */
}

/* Section 1: smooth transitions */
#plans-section-container .box {
    position: relative; /* establish containing block for overlay */
    transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1), filter .45s cubic-bezier(.2,.8,.2,1);
    background-color: transparent; /* remove text container color */
    padding: 12px 0; /* tighter vertical spacing, no horizontal padding */
}

/* Smooth transitions for parallax children in Section 1 */
#plans-section-container .box h1,
#plans-section-container .box h2,
#plans-section-container .box h3,
#plans-section-container .box p {
    transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1), filter .45s cubic-bezier(.2,.8,.2,1);
}
/* Per-line animation wrappers inside paragraphs */
#plans-section-container .box .line {
    display: block;
    white-space: normal; /* ensure no preserved newlines create blank lines */
    margin: 0; padding: 0; line-height: inherit;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1), filter .45s cubic-bezier(.2,.8,.2,1);
}

/* Prevent breaking at hyphens for Section 1 paragraphs */
#plans-section-container .box p,
#plans-section-container .box .line {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* default for non-deck */
    border-radius: 20px;
    perspective: 1000px;
    touch-action: pan-y; /* allow vertical scroll while enabling horizontal hover/touch tracking */
}

.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content; /* size columns to content width */
    align-items: center; /* prevent item stretch; center slides vertically */
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    scroll-behavior: smooth;
}

@media (min-width: 900px) {
    .carousel-track { grid-auto-columns: max-content; }
}
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
 

.carousel-slide {
    position: relative;
    width: auto; /* let slide fit content width */
    max-width: 180px; /* cap slide width */
    scroll-snap-align: center;
    border-radius: 16px;
    overflow: hidden;
    transform: translateZ(0);
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition: transform .45s ease, box-shadow .45s ease, opacity .45s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img {
    max-height: 300px;
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    margin: 0 auto; /* center within slide */
    transform: translateZ(0);
    transition: transform .18s ease;
}

/* Center emphasis effect */
.carousel-slide.is-center { transform: scale(1.05); box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
.carousel-slide.not-center { opacity: 0.85; }

/* Nav arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
    backdrop-filter: blur(6px);
}
.carousel-nav { display: none !important; }
.carousel-nav:hover { background: rgba(0,0,0,0.6); transform: translateY(-50%) scale(1.05); }
.carousel-nav.prev { left: 12px; }
.carousel-nav.next { right: 12px; }

/* Gradient edge fades disabled */
.carousel-fade-left, .carousel-fade-right { display: none !important; }

/* Dots */
.carousel-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 0; }
.carousel-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.4);
    opacity: 0.7;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease, border-color .2s ease, width .2s ease, height .2s ease;
    display: inline-flex;            /* avoid default button box model issues */
    align-items: center;
    justify-content: center;
    padding: 0;                     /* reset default button padding */
    box-sizing: border-box;         /* include border in box size */
    aspect-ratio: 1 / 1;            /* enforce perfect circle */
    flex: 0 0 auto;                 /* prevent flex stretching */
    appearance: none;               /* remove native button styling */
    -webkit-appearance: none;
    position: relative; z-index: 1;
}
.carousel-dot:hover { opacity: 0.9; }
.carousel-dot.active {
    width: 8px; height: 8px;
    background: #ffffff;
    border-color: rgba(255,255,255,0.9);
    opacity: 1;
}

/* App Store CTA below carousel */
.cta-appstore {
    margin-top: 14px;
    opacity: 0;
    transform: translateY(16px) translateZ(0);
    filter: blur(6px);
    transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1), filter .6s cubic-bezier(.2,.8,.2,1);
}
.cta-appstore img { height: 44px; width: auto; display: block; }
.cta-appstore a { display: inline-block; }

/* Container positioning – CTA animation is JS-driven now */
#premium-section-container .box { position: relative; }

/* ===== Deck mode (overlapping cards) ===== */
.carousel.deck .carousel-track {
    position: relative;
    display: block;
    overflow: visible;
    padding: 20px 0; /* 20px top + bottom around image */
    height: 340px; /* fits max 300px image + padding */
}
.carousel.deck { overflow: visible; } /* allow slides to extend, we’ll fade with side gradients */
.carousel.deck .carousel-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    max-width: 200px;
    transform-origin: center 80%;
    transition: transform .45s ease, box-shadow .45s ease, opacity .45s ease, left .45s ease;
}
.carousel.deck .carousel-slide img {
    border-radius: 16px;
}
.carousel.deck .carousel-fade-left,
.carousel.deck .carousel-fade-right { display: none !important; width: 0; }

/* During autoplay, use slower, smoother 2s transitions for deck */
.carousel.autoplay-anim.deck .carousel-slide {
    transition: transform 2s cubic-bezier(.2,.8,.2,1), box-shadow 2s cubic-bezier(.2,.8,.2,1), opacity 2s cubic-bezier(.2,.8,.2,1), left 2s cubic-bezier(.2,.8,.2,1);
}