/* Gymbilly site — same structure as the Pantrackr site, Gymbilly colours (lime on near-black). */
:root {
    --primary-color: #C5F82A;
    --primary-dark: #9ACB12;
    --background: #050506;
    --background-light: #111113;
    --text: #E5E7EB;
    --muted: #9CA3AF;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background-color: var(--background);
}

/* Hero */
.hero {
    background: linear-gradient(160deg, #1d2a06 0%, #0b0f02 45%, #050506 100%);
    position: relative;
    padding: 60px 20px;
    min-height: 60vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 30%, rgba(197, 248, 42, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 85% 70%, rgba(197, 248, 42, 0.08) 0%, transparent 45%);
    pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }
.hero-copy { text-align: left; }

.hero-logo {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: 1.75rem;
}

.hero-slogan {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 3.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 1.25rem;
    line-height: 1.02;
    letter-spacing: 0.005em;
}

.hero-description {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #D1D5DB;
    max-width: 34rem;
    margin-bottom: 2rem;
}

.hero-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.95rem; }

.app-store-button { display: inline-block; transition: transform 0.3s ease; }
.app-store-button:hover { transform: translateY(-2px); }
.app-store-button img { height: 48px; width: auto; }
.app-store-button.is-soon { opacity: 0.55; cursor: default; }
.app-store-button.is-soon:hover { transform: none; }

/* Device-framed screenshots */
.phone {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
    border: 7px solid #0B0B10;
    border-radius: 2.6rem;
    background: #0B0B10;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55);
}

.phone.watch {
    max-width: 200px;
    border-width: 10px;
    border-radius: 3rem;
    margin-top: 40px;
}

.phone-hero { max-width: 300px; transform: rotate(-3deg); }

/* Sections */
.section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    text-transform: uppercase;
    color: #F9FAFB;
    text-align: center;
    margin-bottom: 0.75rem;
}

.section-lead {
    text-align: center;
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 36rem;
    margin: 0 auto 3rem;
}

.features { background-color: var(--background-light); }
.feature { text-align: center; }

.feature h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: uppercase;
    color: var(--primary-color);
    margin: 1.75rem 0 0.5rem;
}

.feature p { color: var(--muted); line-height: 1.7; max-width: 22rem; margin: 0 auto; }

.privacy-strip {
    background: linear-gradient(160deg, rgba(197, 248, 42, 0.10), rgba(255, 255, 255, 0.02));
    border-top: 1px solid rgba(197, 248, 42, 0.18);
    border-bottom: 1px solid rgba(197, 248, 42, 0.18);
}

.faq .section-title { margin-bottom: 2rem; }
.faq-list { max-width: 46rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1.1rem 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; color: #F9FAFB; }
.faq details p { margin: 0.75rem 0 0; color: var(--muted); line-height: 1.7; }

.faq a, .cta a:not(.app-store-button) { color: var(--primary-color); }
.cta { background-color: var(--background-light); }
.cta .section-title { margin-bottom: 1.5rem; }

/* Footer */
footer { background-color: #000000; color: var(--muted); }
footer a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; }
footer a:hover { color: var(--primary-dark); }

/* Privacy policy / terms */
.privacy-page { background-color: var(--background); max-width: 900px; }
.page-logo { height: 44px; width: auto; margin-bottom: 2.5rem; }
.privacy-page h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 3rem;
    color: #F9FAFB;
}
.last-updated { color: var(--muted); font-style: italic; }
.policy-section h2 { color: #E5E7EB; font-weight: 700; font-size: 1.6rem; }
.policy-section h3 { color: #D1D5DB; font-size: 1.2rem; }
.policy-section p, .policy-section li { color: var(--muted); line-height: 1.8; }
.policy-section a { color: var(--primary-color); text-decoration: none; }
.policy-section a:hover { text-decoration: underline; }
.policy-section strong { color: #E5E7EB; }

/* Responsive */
@media (max-width: 991px) {
    .hero-copy { text-align: center; }
    .hero-description { margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
    .hero { padding: 40px 20px; min-height: auto; }
    .hero-slogan { font-size: 2.6rem; }
    .hero-description { font-size: 1.05rem; }
    .hero-logo { max-width: 260px; }
    .section-title { font-size: 2.1rem; }
}

@media (max-width: 480px) {
    .hero { padding: 30px 20px; }
    .hero-slogan { font-size: 2.2rem; }
    .hero-logo { max-width: 220px; }
    .phone-hero { max-width: 240px; }
    .app-store-button img { height: 45px; }
    .privacy-page { padding: 2rem 1rem; }
    .policy-section h2 { font-size: 1.4rem; }
    .policy-section h3 { font-size: 1.15rem; }
}