/* ============================================================
   Sharpa — Home Page Styles
   Used by: index.html
   ============================================================ */

/* ---------- HERO ---------- */
.hero { min-height: 85vh; display: flex; align-items: center; padding-top: 5rem; position: relative; overflow: hidden; background: var(--creme); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(250,249,246,.94) 0%, rgba(250,249,246,.82) 40%, rgba(240,235,225,.45) 70%, rgba(240,235,225,.15) 100%); }
@media (max-width: 768px) {
  .hero-bg::after { background: linear-gradient(180deg, rgba(250,249,246,.93) 0%, rgba(250,249,246,.8) 50%, rgba(240,235,225,.5) 100%); }
}
.hero .container { position: relative; z-index: 1; padding: 0 clamp(1.25rem,4vw,2rem); }
.hero-content { max-width: 680px; }
.hero h1 { margin-bottom: 1.25rem; color: var(--petrol); }
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.65; color: var(--text-dark); margin-bottom: 2.5rem; max-width: 580px; }

/* ---------- SECTION IMAGES ---------- */
.section-img { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 2.5rem; }
.section-img img { width: 100%; height: 280px; object-fit: cover; }
@media (min-width: 769px) {
  .section-img img { height: 340px; }
}

/* ---------- SPLIT LAYOUT ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split-img { border-radius: 12px; overflow: hidden; }
.split-img img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split-img { order: -1; }
  .split-img img { min-height: 200px; height: 220px; }
}

/* ---------- PROBLEM — 5 cards: 3 top, 2 bottom centered ---------- */
.problem { background: var(--bg-light); }
.problem-intro { max-width: 800px; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.5rem; }
.problem-grid-bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; max-width: 740px; margin-left: auto; margin-right: auto; }
.problem-card { background: var(--creme); border-radius: 12px; padding: 2rem 1.75rem; }
.problem-card h3 { color: var(--text-black); margin-bottom: .5rem; overflow-wrap: break-word; hyphens: auto; }
.problem-card p { font-size: .95rem; color: var(--text-dark); line-height: 1.6; }
@media (max-width: 768px) {
  .problem-grid, .problem-grid-bottom { grid-template-columns: 1fr; max-width: 100%; }
}

/* ---------- ROLE ---------- */
.role { background: var(--creme); }
.role-content { max-width: 720px; }

/* ---------- PROCESS — 3 cols × 2 rows ---------- */
.process { background: var(--bg-light); }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } }
.step { padding: 1.75rem 1.5rem; background: var(--bg-light); border: 1px solid var(--bg-medium); border-radius: 12px; transition: border-color .2s; display: flex; flex-direction: column; }
.step:hover { border-color: var(--petrol); }
.step-number { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; color: var(--amber); opacity: .6; line-height: 1; margin-bottom: .75rem; }
.step h3 { font-size: 1.05rem; }
.step p { font-size: .9rem; color: var(--text-dark); line-height: 1.6; margin-top: .5rem; flex-grow: 1; }
.step-tag { display: inline-block; margin-top: .75rem; font-size: .78rem; font-weight: 600; color: var(--petrol); background: rgba(45,106,106,.08); padding: .2rem .6rem; border-radius: 4px; align-self: flex-start; }

/* ---------- PRINCIPLES ---------- */
.principles { background: var(--petrol); color: var(--creme); }
.principles h2 { color: var(--creme); }
.principles .label { color: var(--amber); }
.principles-img { width: 100%; overflow: hidden; margin-bottom: 2.5rem; border-radius: 10px; opacity: .7; }
.principles-img img { width: 100%; height: 220px; object-fit: cover; }
.principles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.principle { padding: 1.75rem; background: rgba(255,255,255,.06); border-radius: 10px; border: 1px solid rgba(255,255,255,.08); }
.principle-icon { width: 36px; height: 36px; margin-bottom: .75rem; color: var(--amber); }
.principle h3 { color: var(--creme); font-size: 1.15rem; margin-bottom: .5rem; }
.principle p { font-size: .92rem; color: rgba(240,235,225,.82); line-height: 1.65; }

/* ---------- CAREGIVERS ---------- */
.caregivers { background: var(--creme); }
.caregivers-inner { max-width: 680px; }
.caregivers blockquote { font-family: var(--font-heading); font-style: italic; font-size: clamp(1.15rem,2.5vw,1.4rem); color: var(--petrol); line-height: 1.55; margin: 2rem 0; padding-left: 1.25rem; border-left: 3px solid var(--amber); }

/* ---------- TRUST ---------- */
.trust { background: var(--bg-light); }
.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.founder-card { padding: 2rem; background: var(--creme); border-radius: 12px; }
.founder-avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--petrol); color: var(--creme); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; margin-bottom: 1rem; overflow: hidden; }
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; }
.founder-card h3 { margin-bottom: .75rem; }
.founder-card p { font-size: .92rem; line-height: 1.6; }
.trust-signals { margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.trust-signal { display: flex; align-items: flex-start; gap: .75rem; font-size: .92rem; line-height: 1.55; }
.trust-check { flex-shrink: 0; width: 20px; height: 20px; color: var(--success); margin-top: 2px; }

/* ---------- SIGNUP ---------- */
.signup { background: var(--creme); position: relative; overflow: hidden; scroll-margin-top: 80px; }
.signup-bg { position: absolute; inset: 0; }
.signup-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .12; }
.signup .container { position: relative; z-index: 1; }
.signup-header { margin-bottom: 2.5rem; }
.signup h2 { margin-bottom: .75rem; }
.signup-sub { color: var(--text-dark); font-size: 1.05rem; max-width: 720px; }
.signup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .signup-actions { grid-template-columns: 1fr; gap: 2rem; } }
.signup-cta-col { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.75rem; background: rgba(250,249,246,.55); border-radius: 12px; border: 1px solid var(--bg-medium); }
.signup-cta-col h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.signup-cta-col p { font-size: .95rem; color: var(--text-dark); margin-bottom: 1.75rem; max-width: 320px; }
.signup-cta-col { transition: background 0.3s ease, border-color 0.3s ease; }
.signup-cta-col .btn-primary { width: 100%; max-width: 280px; }
.signup-cta-col.is-notice { background: rgba(45, 106, 106, 0.04); border-color: rgba(45, 106, 106, 0.18); }
.signup-cta-col.is-notice h3 { color: var(--petrol); }
.signup-cta-notice:not([hidden]) { display: flex; flex-direction: column; align-items: center; }
.signup-cta-notice p { margin-bottom: 0; }
.signup-notice-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(45, 106, 106, 0.1); color: var(--petrol); margin-bottom: 1rem; }
.signup-notice-icon svg { width: 28px; height: 28px; }
.signup-form-col { padding: 2rem 1.75rem; background: rgba(250,249,246,.55); border-radius: 12px; border: 1px solid var(--bg-medium); }
.signup-form-col h3 { font-size: 1.15rem; margin-bottom: .6rem; text-align: center; }
.signup-form-col > p { font-size: .95rem; color: var(--text-dark); margin-bottom: 1.5rem; text-align: center; }
.signup-form { display: flex; flex-direction: column; gap: .85rem; width: 100%; text-align: left; }
.signup-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end; }
@media (max-width: 500px) { .signup-form-row { grid-template-columns: 1fr; } }
.signup-form label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-black); margin: 0 0 .3rem; padding-left: calc(.9rem + 1.5px); }
.signup-form input, .signup-form select { width: 100%; padding: .7rem .9rem; font-family: var(--font-body); font-size: .95rem; line-height: 1.5; color: var(--text-dark); background: var(--bg-light); border: 1.5px solid var(--bg-medium); border-radius: 8px; transition: border-color .2s; appearance: none; }
.signup-form input:focus, .signup-form select:focus { outline: none; border-color: var(--petrol); }
.signup-form input:disabled { background: var(--bg-medium); color: var(--text-muted); cursor: not-allowed; }
.signup-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ADA9A1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.5rem; }
.signup-form label.signup-form-checkbox { display: flex; align-items: center; gap: .8rem; font-size: .88rem; font-weight: 400; color: var(--text-dark); cursor: pointer; user-select: none; min-height: calc(.95rem * 1.5 + 1.4rem + 3px); padding: 0 .15rem; margin: 0; }
.signup-form label.signup-form-checkbox input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--petrol); cursor: pointer; flex-shrink: 0; background: var(--bg-light); border: 1.5px solid var(--text-muted); border-radius: 3px; }
.signup-form label.signup-form-checkbox > span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.signup-form .btn-primary { width: 100%; margin-top: .35rem; }
.signup-form .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-form input[aria-invalid="true"], .signup-form select[aria-invalid="true"] { border-color: var(--error); }
.signup-form-error { font-size: .8rem; color: var(--error); margin: .3rem 0 0; padding-left: calc(.9rem + 1.5px); }
.signup-form-error-global { padding-left: 0; text-align: center; margin-top: .25rem; }
.signup-success { padding: 1.5rem 1.25rem; background: rgba(107,143,113,.08); border: 1px solid var(--success); border-radius: 10px; text-align: center; }
.signup-success p { margin: 0; color: var(--text-dark); font-size: .98rem; line-height: 1.6; }
.signup-note { font-size: .82rem; color: var(--text-muted); margin-top: .5rem; text-align: center; }

/* ---------- FAQ ---------- */
.faq { background: var(--bg-light); }
.faq-list { max-width: 720px; margin: 2.5rem auto 0; }
.faq-item { border-bottom: 1px solid var(--bg-medium); }
.faq-question { width: 100%; padding: 1.25rem 0; background: none; border: none; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--text-black); text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; line-height: 1.4; }
.faq-question:hover { color: var(--petrol); }
.faq-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-muted); transition: transform .25s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.faq-item.open .faq-answer { max-height: 400px; padding-bottom: 1.25rem; }
.faq-item.tall.open .faq-answer { max-height: 1000px; }
.faq-answer p { font-size: .95rem; line-height: 1.65; color: var(--text-dark); }
.faq-answer p + p { margin-top: .75rem; }
.faq-answer ul { margin: .5rem 0 0; padding-left: 1.15rem; }
.faq-answer li { font-size: .95rem; line-height: 1.65; color: var(--text-dark); margin-bottom: .4rem; }
.faq-answer a { color: var(--text-dark); text-decoration: underline; }
.faq-answer a:hover { color: var(--petrol); }

/* ---------- CONTACT ---------- */
.contact { background: var(--creme); padding: 3rem clamp(1.25rem,4vw,2rem); }