/* === Veckoappen — Inspired by landing page template === */
:root {
    --color-primary: #ed4731;
    --color-secondary: #f05a46;
    --color-accent: #ed4731;
    --color-dark: #131313;
    --color-gray: #626262;
    --color-light-gray: #c3c3c3;
    --color-bg: #ffffff;
    --color-bg-alt: #fafafa;
    --gradient-hero: linear-gradient(to bottom, rgba(237,71,49,0.85), rgba(210,58,40,0.85));
    --font-main: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --container: 960px;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-size: 16px; height: 100%; }
body {
    font-family: var(--font-main); line-height: 1.6; color: var(--color-dark); background: var(--color-bg);
    display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 700; }

/* === Header === */
.site-header {
    background: var(--color-primary);
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.header-inner {
    max-width: var(--container); margin: 0 auto;
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem; height: 56px;
}
.site-logo { font-size: 1.4rem; font-weight: 300; color: #fff; letter-spacing: -0.01em; }
.site-logo:hover { text-decoration: none; opacity: 0.9; }
.week-badge {
    background: rgba(255,255,255,0.2); color: #fff;
    font-size: 0.8rem; font-weight: 600;
    padding: 0.2rem 0.7rem; border-radius: 999px;
}
.site-nav { margin-left: auto; display: flex; gap: 1.5rem; }
.site-nav a { color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 400; }
.site-nav a:hover { color: #fff; text-decoration: none; }

/* === Footer === */
.site-footer {
    background: var(--color-dark); color: rgba(255,255,255,0.5);
    text-align: center; padding: 2.5rem 1.5rem; font-size: 0.85rem;
}
.footer-inner { max-width: var(--container); margin: 0 auto; }
.footer-nav { margin-top: 0.75rem; display: flex; justify-content: center; gap: 1.5rem; }
.footer-nav a { color: rgba(255,255,255,0.65); }
.footer-nav a:hover { color: #fff; }

/* === Optional Intro Section === */
.section-intro:empty { display: none; }
.section-intro {
    max-width: var(--container); margin: 0 auto;
    padding: 3rem 1.5rem 0;
    font-size: 1.05rem; color: var(--color-gray); line-height: 1.8;
    text-align: center;
}
.section-intro p { margin-bottom: 1rem; }

/* === Hero Section === */
.section-hero {
    background: var(--gradient-hero);
    background-image: url('hero-bg.jpg');
    background-size: cover; background-position: center;
    position: relative; overflow: hidden;
    padding: 5rem 1.5rem 4rem;
}
.section-hero::before {
    content: ''; position: absolute; inset: 0;
    background: var(--gradient-hero); z-index: 1;
}
.hero-container {
    max-width: var(--container); margin: 0 auto;
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 3rem;
    min-height: 420px;
}
.hero-content { flex: 1; color: #fff; }
.hero-label { font-size: 1.4rem; font-weight: 300; margin-bottom: 1rem; }
.hero-label b { font-weight: 700; }
.hero-title { font-size: 3rem; font-weight: 300; line-height: 1.3; margin-bottom: 0.5rem; }
.hero-title b { font-weight: 700; }
.hero-subtitle { font-size: 3.8rem; font-weight: 300; line-height: 1.3; margin-bottom: 2rem; }
.hero-subtitle b { font-weight: 700; }
.app-store-link { display: inline-block; transition: opacity 0.2s; }
.app-store-link:hover { opacity: 0.85; text-decoration: none; }
.app-store-link img { height: 54px; }
.hero-phones {
    flex: 0 0 320px; position: relative; height: 440px;
}
.hero-phone-back {
    position: absolute; width: 260px; top: 0; left: 0;
    border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.hero-phone-front {
    position: absolute; width: 220px; top: 80px; left: 80px;
    border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    z-index: 1;
}

/* === Section Titles === */
.section-title {
    font-family: var(--font-main); font-size: 2.1rem;
    font-weight: 300; text-align: center; line-height: 1.3;
    margin-bottom: 0.5rem;
}
.section-divider {
    width: 5.5rem; height: 2px;
    background: var(--color-primary);
    margin: 0 auto 2.5rem;
}

/* === Features Section (Awesome Features) === */
.section-features {
    background: var(--color-bg); padding: 4rem 1.5rem;
}
.features-container {
    max-width: var(--container); margin: 0 auto;
}
.features-layout {
    display: flex; align-items: flex-start; gap: 2rem;
    margin-top: 2rem;
}
.features-col { flex: 1; display: flex; flex-direction: column; gap: 2rem; }
.features-phone {
    flex: 0 0 250px; display: flex; justify-content: center; align-items: center;
}
.features-phone img {
    width: 220px; border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.12);
}
.feature-item { display: flex; gap: 0.75rem; }
.feature-item--right { text-align: right; flex-direction: row-reverse; }
.feature-icon {
    flex: 0 0 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
}
.feature-icon img { width: 32px; height: 32px; }
.feature-icon svg { width: 32px; height: 32px; color: var(--color-accent); }
.feature-name { font-size: 1.15rem; font-weight: 400; color: var(--color-dark); margin-bottom: 0.25rem; }
.feature-desc { font-size: 0.875rem; color: var(--color-gray); line-height: 1.7; }

/* === About Section === */
.section-about {
    background: var(--color-bg-alt); padding: 4rem 1.5rem;
}
.about-container {
    max-width: var(--container); margin: 0 auto;
    display: flex; align-items: center; gap: 3rem;
}
.about-image { flex: 1; }
.about-image img { width: 100%; border-radius: 8px; }
.about-content { flex: 1; }
.about-content .section-title { text-align: left; }
.about-content .section-divider { margin-left: 0; }
.about-text { font-size: 0.875rem; color: var(--color-gray); line-height: 1.8; margin-bottom: 2rem; }
.btn-primary {
    display: inline-block;
    background: var(--color-primary); color: #fff;
    font-size: 1.1rem; font-weight: 400;
    padding: 0.8rem 2rem; border-radius: 999px;
    transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; text-decoration: none; }

/* === Stats Section === */
.section-stats {
    background: var(--color-bg); padding: 4rem 1.5rem;
}
.stats-container {
    max-width: var(--container); margin: 0 auto;
    display: flex; justify-content: space-around; text-align: center;
}
.stat-item { flex: 1; }
.stat-icon { margin: 0 auto 0.75rem; }
.stat-icon img, .stat-icon svg { width: 48px; height: 48px; margin: 0 auto; color: var(--color-accent); }
.stat-number { font-size: 3rem; font-weight: 400; color: var(--color-primary); line-height: 1.3; }
.stat-label { font-size: 1.15rem; color: var(--color-dark); margin-top: 0.25rem; }

/* === Testimonials / Reviews === */
.section-reviews {
    background: var(--gradient-hero); padding: 4rem 1.5rem;
    position: relative;
}
.reviews-container {
    max-width: var(--container); margin: 0 auto; position: relative; z-index: 2;
}
.reviews-container .section-title { color: #fff; }
.reviews-container .section-divider { background: #fff; }
.reviews-grid { display: flex; gap: 3rem; justify-content: center; }
.review-card { flex: 1; max-width: 400px; }
.review-text { font-size: 0.875rem; color: #fff; font-style: italic; line-height: 1.7; text-align: justify; }
.review-author { font-size: 1rem; color: #fff; font-style: italic; margin-top: 0.75rem; }

/* === Screenshots Section === */
.section-screenshots {
    background: var(--color-bg); padding: 4rem 1.5rem;
}
.screenshots-container {
    max-width: var(--container); margin: 0 auto;
}
.screenshot-grid {
    display: flex; gap: 1.25rem; justify-content: center;
    flex-wrap: nowrap;
}
.screenshot-grid img {
    flex: 0 1 220px; min-width: 0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
}

/* Wrap to 2x2 when 4 side-by-side no longer fits */
@media (max-width: 960px) {
    .screenshot-grid {
        flex-wrap: wrap;
    }
    .screenshot-grid img {
        flex: 0 1 calc(50% - 0.625rem);
        max-width: calc(50% - 0.625rem);
    }
}

/* Single column on narrow screens */
@media (max-width: 480px) {
    .screenshot-grid img {
        flex: 0 1 100%;
        max-width: 280px;
    }
}

/* === CTA Section === */
.section-cta {
    background: var(--color-bg-alt); padding: 3.5rem 1.5rem;
    text-align: center;
}
.cta-container { max-width: var(--container); margin: 0 auto; }
.cta-text { font-size: 1.5rem; font-weight: 300; margin-bottom: 1.5rem; }
.cta-text b { font-weight: 700; }

/* === Subpage Content === */
.subpage {
    max-width: 720px; margin: 0 auto;
    padding: 3rem 1.5rem;
}
.subpage h1 {
    font-size: 2.2rem; font-weight: 300;
    margin-bottom: 0.5rem; color: var(--color-dark);
}
.subpage .section-divider { margin-left: 0; margin-bottom: 2rem; }
.subpage h2 { font-size: 1.3rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--color-dark); }
.subpage p { font-size: 0.95rem; color: #444; line-height: 1.8; margin-bottom: 1rem; }
.subpage a { color: var(--color-primary); }
.subpage a:hover { text-decoration: underline; }
.subpage ul, .subpage ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.subpage li { font-size: 0.95rem; color: #444; line-height: 1.8; margin-bottom: 0.3rem; }

/* === Responsive === */
@media (max-width: 768px) {
    .hero-container { flex-direction: column; text-align: center; }
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 2.5rem; }
    .hero-phones { flex: none; height: 300px; width: 240px; margin: 0 auto; }
    .hero-phone-back { width: 200px; }
    .hero-phone-front { width: 170px; top: 50px; left: 50px; }
    .features-layout { flex-direction: column; }
    .feature-item--right { text-align: left; flex-direction: row; }
    .about-container { flex-direction: column; }
    .stats-container { flex-wrap: wrap; gap: 2rem; }
    .stat-item { flex: 0 0 45%; }
    .reviews-grid { flex-direction: column; align-items: center; }
    .header-inner { gap: 0.5rem; }
    .site-nav { gap: 0.75rem; }
    .site-nav a { font-size: 0.8rem; }
}