:root {
    --bg-opacity: 0.69;
    --bg-offset: 0px;
    --parallax-scale: 1.69;
    --text-color: #ffffff;
    --muted-color: rgba(255,255,255,0.72);
    --bg-tint: 24,69,59;
    --bg-tint-opacity: 0.314;
}

html {
    height: 100%;
    background-color: #000; /* pure black under the background image layer */
}

body {
    color: var(--text-color);
    background-color: transparent;
    -webkit-font-smoothing: antialiased;
    padding-top: 96px;
}

/* hero / app-icon styles */
.hero {
    padding: 2rem;
    z-index: 1; /* above body::before background */
}

.screenshots-section,
.features-section {
    padding: 1rem 2rem;
}

.app-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 420px;
}

/* App icon: rounded, shadow, and a "chip" thickness illusion */
.app-icon {
    width: 168px;
    height: 168px;
    object-fit: cover;
    border-radius: 28px;
    display: block;
    /* layered shadows: a thin offset to suggest thickness, plus soft ambient shadow */
    box-shadow:
        0 6px 0 rgba(0,0,0,0.12),   /* subtle hard offset to read as thickness */
        0 12px 24px rgba(0,0,0,0.36); /* soft drop shadow for depth */
    border: 1px solid rgba(255,255,255,0.06);
}

/* Metallic armor title with green-tinted gradient */
.app-title {
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    margin: 0 0 -1rem;
    background-image: linear-gradient(
        135deg,
        #ddeee8 0%,    /* pale silver-green */
        #ffffff 35%,   /* white specular */
        #c5dfd5 65%,   /* soft mint-silver */
        #e8f4f0 100%   /* pale silver-green end */
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.app-subtitle {
    margin: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    top: calc(-env(safe-area-inset-top, 0px));
    right: calc(-env(safe-area-inset-right, 0px));
    bottom: calc(-env(safe-area-inset-bottom, 0px));
    left: calc(-env(safe-area-inset-left, 0px));
    background-image:
        linear-gradient(rgba(var(--bg-tint), var(--bg-tint-opacity)), rgba(var(--bg-tint), var(--bg-tint-opacity))),
        url("images/backgroundMaman.jpeg");
    background-size: cover;
    background-position: center center, center calc(50% + var(--bg-offset, 0px));
    background-repeat: no-repeat;
    opacity: var(--bg-opacity);
    z-index: -1;
    pointer-events: none;
    will-change: transform, background-position;
    transform: scale(var(--parallax-scale));
}

h1 {
    font-weight: bold
}

/* links inherit white */
a {
    color: var(--text-color);
}
a:hover {
    color: #ffffff;
    opacity: 0.9;
}

/* lighter muted text */
.text-muted {
    color: var(--muted-color) !important;
}

/* Nav capsule centered at top */
.navbar {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(var(--bg-tint), 0.5) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-color);
    padding: 0.25rem 1.25rem;
    border-radius: 999px;     /* pill/capsule shape */
    z-index: 9999;
    width: auto;
}

.nav-capsule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Stacked nav link: icon on top, label below */
.nav-link-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--muted-color);
    transition: background-color 0.2s, color 0.2s;
}

.nav-link-stack i {
    font-size: 1.25rem;
}

.nav-link-stack span {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-link-stack:hover {
    color: var(--text-color);
}

/* Active state for current page */
.nav-link-stack.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #4ade80;
}

.nav-link-stack.active span {
    font-weight: bold;
}

/* Home icon: no capsule background when active */
.nav-link-stack.nav-home.active {
    background-color: transparent;
}

.emphasis {
    color: darkred;
    font-weight: bold;
}

.img-thumbnail {
    height: 196px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Screenshot slide carousel */
.screenshot-pages-wrapper {
    overflow: hidden;
    cursor: grab;
}

.screenshot-pages-wrapper:active {
    cursor: grabbing;
}

.screenshot-pages {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.screenshot-page {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.video-pages {
    width: 100%;
}

/* Video pages: show one at a time via JS (display: none/flex) */
.video-page {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.video-page iframe {
    width: 100%;
    height: 560px;
}

/* Video section: wider container so iframe can grow on desktop */
#videos .app-stack {
    width: min(90vw, 645px);
    max-width: min(90vw, 645px);
}

/* Desktop: ~2x image size, wider gap between images */
@media (min-width: 768px) {
    .screenshot-item .img-thumbnail {
        height: 392px;
    }
    .screenshot-page {
        gap: 2rem; /* ~24px more than mobile 0.5rem */
    }
}

/* Pagination dark theme (screenshots) */
.screenshot-pagination .page-link {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

.screenshot-pagination .page-item.active .page-link {
    background-color: rgba(var(--bg-tint), 0.8);
    border-color: rgba(255, 255, 255, 0.314);
    color: var(--text-color);
}

.screenshot-pagination .page-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-color);
}

.screenshot-pagination .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}

/* Make carousel prev/next buttons only clickable at the icon */
.carousel-control-prev,
.carousel-control-next {
    /* center the control vertically instead of spanning full height */
    top: 50% !important;
    bottom: auto !important;
    height: auto !important;
    width: 3.5rem;              /* narrow hit-box region around icon */
    transform: translateY(-50%) !important;
    pointer-events: none;       /* container ignores pointer events */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Make only the icon element accept pointer events */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    pointer-events: auto;       /* icon itself is clickable/tappable */
    width: 3.0rem;
    height: 3.0rem;
    border-radius: 0.5rem;
    background-color: rgba(0,0,0,0.32); /* optional visible background for touch target */
    background-position: center;
    background-size: 1.25rem;
    display: inline-block;
    z-index: 10;
}

/* Increase touch target on small devices while keeping visual icon size */
@media (hover: none) and (pointer: coarse) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 4.25rem;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 3.75rem;
        height: 3.75rem;
    }
}

/* Plain page styling (no background image) */
.page-plain {
    background-color: #ffffff;
    color: #333333;
}

.page-plain::before {
    display: none;
}

.privacy-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 2rem;
    line-height: 1.6;
}

.privacy-content h1 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

.privacy-content h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.privacy-content h3 {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.privacy-content p,
.privacy-content ul {
    margin-bottom: 1rem;
}

.privacy-content a {
    color: #2563eb;
}

.privacy-content a:hover {
    color: #1d4ed8;
}

/* Mobile Optimization */
@media (max-width: 576px) {
    .app-title {
        font-weight: 900;
        font-size: 5rem; /* Shrinks title on small screens */
    }

    .screenshot-item {
        flex: 0 0 calc(33.33% - 0.75rem); /* Strict width constraint */
        max-width: calc(33.33% - 0.75rem); /* Prevents expansion from text */
        margin: 0 !important;
        overflow: hidden; /* Prevents text from bleeding out */
    }

    .screenshot-item img {
        width: 100%;
        height: auto;
    }

    .screenshot-item figcaption {
        font-size: 0.65rem;
        line-height: 1.1;
        word-wrap: break-word;
        display: block;
        margin-top: 4px;
    }

    .screenshot-item-wide {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .screenshot-item-wide img {
        width: auto;
        height: 196px; /* restore fixed height; don't stretch to full viewport width */
    }
}

/* Ensure figures don't have extra browser padding */
figure {
    margin: 0;
    padding: 0;
}

/* SPA section visibility with fade transition */
.page-section {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.page-section.active {
    opacity: 1;
}

/* Site footer */
.footer {
    background-color: rgba(var(--bg-tint), 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}