/* Recikeep - AirPods Edition Styles */

:root {
    --color-bg: #FFFFFF;
    --color-text: #1d1d1f;
    --color-text-gray: #86868b;
    --color-bg-alt: #F5F5F7;
    --color-accent: #000000;
    /* Stark black for primary actions */

    --font-stack: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --container-width: 980px;
    --header-height: 60px;
}

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

img {
    height: auto;
    max-width: 100%;
}


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

/* Typography - Massive Scale */
h1 {
    font-size: 96px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 24px;
}

h2 {
    font-size: 64px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

h3 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

p {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-text-gray);
    max-width: 700px;
    margin: 0 auto 40px;
}

p.lead {
    font-size: 32px;
    font-weight: 500;
    color: #1d1d1f;
}

/* Utils */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

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

.text-left {
    text-align: left;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 18px 36px;
    background-color: #0071e3;
    /* Classic Apple Blue Link Color or Black */
    background-color: #000;
    color: #fff;
    border-radius: 980px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn:hover {
    transform: scale(1.05);
    /* Gentle subtle grow */
}

/* Header - Apple Product Nav (Local Nav) */
header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 52px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    z-index: 9999;
    display: flex;
    justify-content: center;
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0;
    /* Container handles width */
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 21px;
    /* Slightly larger brand name */
    color: #1d1d1f;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.nav-brand img {
    height: 28px;
    /* Slightly smaller icon for balance */
    width: 28px;
    border-radius: 6px;
}

.nav-cta {
    background: #0071e3;
    /* Apple Blue for small action */
    color: #fff;
    padding: 4px 12px;
    border-radius: 98px;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    min-width: 24px;
}

/* Sections */
section {
    padding: 120px 0;
}

/* Hero */
/* Hero */
.hero {
    padding-top: 200px;
    padding-bottom: 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f7;
}

/* Background Layer */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: hero-zoom 30s infinite alternate ease-in-out;
    transform-origin: center center;
}

/* Gradient overlay for readability */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.95) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero h1 {
    /* Dark text on light BG */
    background: linear-gradient(135deg, #1d1d1f 0%, #434344 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Add subtle shadow for pop if bg is busy */
    filter: drop-shadow(0 20px 40px rgba(255, 255, 255, 0.8));
    /* Fix for descenders being cut off with background-clip */
    padding-bottom: 0.1em;
    margin-bottom: 0.2em;
}

.hero-image {
    margin-top: 80px;
}

.hero-image img {
    max-width: 380px;
    width: 100%;
    border-radius: 54px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.25);
    transform: rotate(-3deg);
    animation: float 6s ease-in-out infinite;
}

/* Keyframes */
@keyframes hero-zoom {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.15);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-15px) rotate(-3deg);
    }
}

/* Dark Mode Section (Stark Contrast) */
.section-dark {
    background-color: #000;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 160px 0;
    position: relative;
}

.section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Darken bg image */
    pointer-events: none;
}

.section-dark .container {
    position: relative;
    z-index: 2;
}

.section-dark h2 {
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.section-dark p {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.section-dark .highlight-text {
    color: #fff;
}

/* Share Extension Section */
.section-share {
    background-color: #f5f5f7;
    padding: 160px 0;
}

.section-share h2 {
    color: #1d1d1f;
}

.section-share p.lead {
    color: #1d1d1f;
}

/* Bento Highlight Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 80px;
}

.card {
    background-color: var(--color-bg-alt);
    border-radius: 30px;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 600px;
    /* Fixed high height for premium feel */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card:hover {
    transform: scale(1.02);
}

.card-content {
    margin-bottom: 40px;
}

.card-icon {
    font-size: 64px;
    margin-bottom: 24px;
    display: block;
}

.card.full-width {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    height: auto;
    min-height: 400px;
}

.card.full-width .card-content {
    flex: 1;
    margin-bottom: 0;
}

.card.full-width .card-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Tech Specs Section */
.specs-section {
    padding: 120px 0;
    background-color: #fff;
    border-top: 1px solid #d2d2d7;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 60px 40px;
    margin-top: 60px;
    text-align: left;
}

.spec-category h4 {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #1d1d1f;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 12px;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f7;
    font-size: 14px;
}

.spec-label {
    color: #86868b;
    font-weight: 500;
}

.spec-value {
    color: #1d1d1f;
    font-weight: 600;
    text-align: right;
}

/* Nav Link */
.nav-menu {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-link {
    font-size: 12px;
    color: #1d1d1f;
    text-decoration: none;
    margin: 0 20px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Dark Carousel Section */
.carousel-section {
    background-color: #000;
    /* Deep dark background */
    padding: 120px 0;
    overflow: hidden;
    color: #fff;
}

.carousel-section h2 {
    color: #fff;
    margin-bottom: 60px;
}

/* Carousel Wrapper for Arrows */
.carousel-wrapper {
    position: relative;
    width: 100%;
}

/* Scroll Container */
.carousel-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 40px;
    padding: 0 40px 40px 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar for cleaner look */
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

/* Nav Buttons */
.carousel-nav-btn {
    position: absolute;
    top: calc(50% - 20px);
    /* Adjust based on card height center roughly */
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.carousel-nav-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav-btn.prev {
    left: 20px;
}

.carousel-nav-btn.next {
    right: 20px;
}

/* Hide arrows on touch devices where specific hover/click precision is lower and natural swipe is preferred, 
   BUT user asked for hints. So we keep them but maybe style them less intrusively or keep as is.
   We will keep them as requested. */
@media (hover: none) and (pointer: coarse) {
    /* Optional: could make them bigger or hide if swipe is enough, but user asked for hints */
}

/* Card Item */
.carousel-card {
    flex: 0 0 400px;
    /* Fixed width */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.carousel-visual {
    width: 100%;
    height: 500px;
    background-color: #1d1d1f;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.carousel-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.carousel-card:hover .carousel-visual {
    transform: scale(1.02);
}

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

.carousel-text h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.carousel-text p {
    font-size: 17px;
    line-height: 1.4;
    color: #86868b;
    font-weight: 400;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 800px) {
    .carousel-card {
        flex: 0 0 85vw;
        /* Nearly full width on mobile */
    }

    .carousel-visual {
        height: 60vh;
    }
}

@media (max-width: 800px) {
    header {
        min-width: 90%;
    }

    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 40px;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

    .card.full-width {
        flex-direction: column;
        grid-column: span 1;
    }

    .card {
        height: auto;
        padding: 40px 30px;
        min-height: 400px;
    }
}

/* Legal Pages */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 40px;
}

.legal-content h1 {
    font-size: 56px;
    margin-bottom: 40px;
}

.legal-content h2 {
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.legal-content p,
.legal-content li {
    font-size: 19px;
    line-height: 1.6;
    color: #1d1d1f;
    margin-bottom: 24px;
    max-width: 100%;
}

.legal-content ul {
    list-style-position: inside;
    margin-bottom: 24px;
}

/* Footer */
footer {
    background-color: #f5f5f7;
    padding: 40px 0;
    border-top: 1px solid #d2d2d7;
    font-size: 12px;
    color: #86868b;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.footer-legal p {
    font-size: 12px;
    margin: 0;
    max-width: none;
    color: #515154;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links a,
.footer-credit a {
    color: #515154;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-credit a:hover {
    color: #1d1d1f;
    text-decoration: underline;
}

.separator {
    color: #d2d2d7;
}

@media (max-width: 800px) {
    .container {
        padding: 0 20px;
    }

    .hero {
        padding-top: 120px;
    }

    h1 {
        font-size: 48px;
        /* Smaller for mobile */
    }

    h2 {
        font-size: 36px;
    }

    p.lead {
        font-size: 20px;
        /* Readable comfortable size */
    }

    p {
        font-size: 18px;
        /* Standard readable body text */
    }

    /* Carousel Adjustment */
    .carousel-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
        background: rgba(0, 0, 0, 0.5);
        /* darker bg for visibility on light/mixed images if needed, but carousel is dark bg */
        background: rgba(255, 255, 255, 0.15);
    }

    .carousel-nav-btn.prev {
        left: 10px;
    }

    .carousel-nav-btn.next {
        right: 10px;
    }

    /* Share Sheet scaling */
    .share-demo-container {
        perspective: none;
        /* Flatten for simplicity on small screens or reduce scale */
        transform: scale(0.9);
    }
}

@media (max-width: 800px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        /* Center align for mobile footer */
        text-align: center;
        gap: 30px;
    }

    .footer-legal {
        align-items: center;
        /* Center children */
        text-align: center;
    }
}

/* Share Demo Visual */
.share-demo-container {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.share-sheet {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    width: 320px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    text-align: left;
    transform: rotateX(10deg) translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: default;
}

.share-sheet:hover {
    transform: rotateX(0deg) translateY(-10px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

.share-header {
    border-bottom: 1px solid #f5f5f7;
    padding-bottom: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.share-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.share-row {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    /* Align specifically to show ReciKeep first */
    overflow: hidden;
}

.share-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.share-app.active {
    opacity: 1;
}

.app-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.app-name {
    font-size: 11px;
    font-weight: 500;
    color: #1d1d1f;
}

/* Placeholder mimics generic apps */
.share-app.placeholder .app-icon {
    background: #f5f5f7;
    box-shadow: none;
    /* Creating a fake icon look */
}

/* Make the placeholders look like skeleton loaders or generic icons */
.share-app.placeholder::before {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    background: #e5e5e7;
    border-radius: 14px;
}

.share-app.placeholder::after {
    content: '';
    display: block;
    width: 40px;
    height: 8px;
    background: #e5e5e7;
    border-radius: 4px;
    margin-top: 4px;
}