/* Shared subpage styles aligned with homepage design system */

.page-hero {
    padding: 132px 0 72px;
    background: var(--surface-muted);
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -80px;
    right: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 115, 232, 0.14) 0%, rgba(26, 115, 232, 0) 72%);
    animation: ambientFloat 11s ease-in-out infinite;
    pointer-events: none;
}

.page-hero-content {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.page-hero-text h1 {
    font-size: clamp(34px, 5.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.page-hero-text p {
    font-size: clamp(17px, 2.1vw, 22px);
    color: var(--text-medium);
    max-width: 620px;
}

.page-hero-phone {
    display: flex;
    justify-content: center;
}

.ai-hero,
.community-hero,
.diet-hero,
.privacy-hero,
.users-hero,
.team-hero {
    background: var(--surface-muted);
}

/* Shared section rhythm */
.ai-features,
.ai-planning,
.ai-chat-demo,
.community-features,
.community-showcase,
.competition-section,
.diet-features,
.diet-plan-showcase,
.food-detail-section,
.privacy-feature,
.data-transparency,
.privacy-features-list,
.users-showcase,
.team-members,
.team-values {
    padding: 84px 0;
}

.team-intro {
    padding: 64px 0;
}

.ai-features,
.ai-chat-demo,
.community-features,
.competition-section,
.diet-features,
.food-detail-section,
.privacy-feature,
.privacy-features-list,
.users-showcase,
.team-intro,
.team-values {
    background: var(--surface);
}

.ai-planning,
.community-showcase,
.diet-plan-showcase,
.data-transparency,
.team-members {
    background: var(--surface-muted);
}

/* AI page */
.features-list {
    max-width: 900px;
    margin: 0 auto;
}

.feature-item {
    display: flex;
    gap: 20px;
    padding: 24px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--border-color);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.feature-number {
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 700;
    min-width: 48px;
}

.feature-content h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.feature-content p {
    color: var(--text-medium);
}

.planning-showcase,
.chat-demo-container,
.showcase-layout,
.competition-content,
.plan-showcase-layout,
.food-detail-layout,
.privacy-feature-layout,
.transparency-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.planning-content h2,
.showcase-features h2,
.plan-content h2,
.privacy-content h2,
.intro-content h2 {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: 14px;
}

.planning-content p,
.competition-text p,
.plan-content p,
.food-detail-content p,
.privacy-content p,
.transparency-content p,
.intro-content p {
    color: var(--text-medium);
    margin-bottom: 22px;
}

.planning-steps,
.chat-features,
.feature-list,
.plan-features,
.privacy-points,
.data-usage-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.step,
.plan-feature,
.privacy-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.step-icon,
.plan-feature-icon,
.privacy-icon {
    font-size: 24px;
    min-width: 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eef4ff;
    display: grid;
    place-items: center;
}

.step-text h4,
.plan-feature h4,
.privacy-point h4 {
    margin-bottom: 4px;
    font-size: 17px;
}

.step-text p,
.plan-feature p,
.privacy-point p {
    margin: 0;
    color: var(--text-medium);
    font-size: 14px;
}

.chat-feature-item,
.feature-list-item,
.usage-card {
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.chat-feature-item:hover,
.feature-list-item:hover,
.usage-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.chat-feature-item h3,
.competition-text h3,
.food-detail-content h3,
.transparency-content h3 {
    font-size: clamp(24px, 3.4vw, 34px);
    margin-bottom: 8px;
}

.chat-feature-item p,
.feature-list-item p,
.usage-card p {
    color: var(--text-medium);
    margin: 0;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    background: #e8f0fe;
    color: var(--primary-strong);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
}

.competition-benefits {
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #fff;
    padding: 2px 16px;
}

.competition-benefits li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.competition-benefits li:last-child {
    border-bottom: none;
}

/* Community / Diet cards */
.community-grid,
.diet-grid,
.privacy-features-grid,
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.community-card,
.diet-card,
.privacy-feature-card,
.value-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: #fff;
    padding: 24px;
    text-align: center;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.community-card:hover,
.diet-card:hover,
.privacy-feature-card:hover,
.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.community-icon,
.diet-icon,
.feature-icon-large,
.value-icon {
    font-size: 34px;
    margin-bottom: 12px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #eef4ff;
    margin-left: auto;
    margin-right: auto;
}

.community-card h3,
.diet-card h3,
.privacy-feature-card h3,
.value-card h3 {
    margin-bottom: 8px;
}

.community-card p,
.diet-card p,
.privacy-feature-card p,
.value-card p {
    color: var(--text-medium);
    font-size: 15px;
}

/* Diet detail */
.nutrition-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.nutrition-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    background: #fff;
}

.nutrition-label {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 6px;
}

.nutrition-value {
    font-size: 16px;
    font-weight: 600;
}

/* Privacy page */
.privacy-content .lead {
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.usage-card h4 {
    font-size: 17px;
    margin-bottom: 6px;
}

/* Users page */
.users-grid,
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.user-card,
.team-member-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.user-card:hover,
.team-member-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.user-image,
.member-photo {
    width: 100%;
    height: 240px;
    background: var(--surface-muted);
}

.user-image img,
.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-photo-initials .team-img {
    object-fit: contain;
    padding: 16px;
}

.user-info,
.member-info {
    padding: 20px;
}

.user-title,
.member-role {
    color: var(--primary-color);
    font-weight: 600;
    margin: 6px 0 10px;
    font-size: 14px;
}

.user-story,
.member-bio {
    color: var(--text-medium);
    font-size: 14px;
}

.user-stats {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.user-stats span {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-muted);
    font-size: 12px;
}

.intro-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* Keep side-reveal selectors available for observer animation */
.fade-in-left,
.fade-in-right {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-in-left.in-view,
.fade-in-right.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 940px) {
    .page-hero-content,
    .planning-showcase,
    .chat-demo-container,
    .showcase-layout,
    .competition-content,
    .plan-showcase-layout,
    .food-detail-layout,
    .privacy-feature-layout,
    .transparency-showcase {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .page-hero-text,
    .planning-content,
    .competition-text,
    .plan-content,
    .food-detail-content,
    .privacy-content,
    .transparency-content {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .ai-features,
    .ai-planning,
    .ai-chat-demo,
    .community-features,
    .community-showcase,
    .competition-section,
    .diet-features,
    .diet-plan-showcase,
    .food-detail-section,
    .privacy-feature,
    .data-transparency,
    .privacy-features-list,
    .users-showcase,
    .team-members,
    .team-values {
        padding: 64px 0;
    }

    .feature-item {
        flex-direction: column;
        text-align: center;
    }
}