/* SupplementyAI — o-nas/index.html page-specific styles */

main { max-width: 860px; margin: 0 auto; padding: 52px 24px 100px; display: flex; flex-direction: column; gap: 32px; }
.page-hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 64px 24px 56px; text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% -20%, rgba(26,82,53,.07) 0%, transparent 70%); pointer-events: none; }
.page-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; color: var(--text); line-height: 1.18; margin-bottom: 16px; }
.page-hero h1 em { font-style: italic; color: var(--green); }
.page-hero p { color: var(--text-2); font-size: .97rem; max-width: 520px; margin: 0 auto; line-height: 1.75; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.value-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 28px 24px; }
.value-icon { color: var(--green); margin-bottom: 14px; display: flex; align-items: center; }
.value-icon svg { width: 28px; height: 28px; }
.value-card h3 { font-size: 1.02rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.value-card p { font-size: .87rem; color: var(--text-2); line-height: 1.75; }
.methodology { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 36px; }
.methodology h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 20px; }
.step-list { display: flex; flex-direction: column; gap: 16px; }
.step-item { display: flex; gap: 16px; align-items: flex-start; }
.step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: .82rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.step-content h4 { font-size: .93rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.step-content p { font-size: .86rem; color: var(--text-2); line-height: 1.7; }
.disclaimer-box { background: var(--amber-light); border: 1.5px solid var(--amber-border); border-radius: 16px; padding: 24px 28px; }
.disclaimer-box h3 { font-size: 1rem; font-weight: 700; color: var(--amber); margin-bottom: 8px; }
.disclaimer-box p { font-size: .88rem; color: var(--amber); line-height: 1.75; }
.cta-section { background: var(--green); border-radius: 20px; padding: 40px 36px; text-align: center; color: #fff; }
.cta-section h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; font-weight: 700; margin-bottom: 12px; }
.cta-section p { font-size: .92rem; opacity: .85; margin-bottom: 24px; }
.cta-section a { display: inline-block; padding: 14px 32px; background: #fff; color: var(--green); border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .15s; }
.cta-section a:hover { background: var(--green-light); }
@media (max-width: 640px) { main { padding: 32px 16px 72px; } .methodology { padding: 24px 20px; } .cta-section { padding: 32px 24px; } }