*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif; color: #1D1D1F; line-height: 1.6; background: #FFFFFF; }

/* Hero */
.hero { background: linear-gradient(135deg, #2D8CF0 0%, #1A6DC4 100%); color: #FFFFFF; padding: 80px 20px 60px; }
.hero-content { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.hero-text { flex: 1; }
.hero h1 { font-size: 52px; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.hero .highlight { color: #FFD60A; }
.hero-desc { font-size: 22px; font-weight: 500; margin-bottom: 8px; opacity: 0.95; }
.hero-sub { font-size: 16px; opacity: 0.75; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 16px; }
.btn { display: inline-block; padding: 14px 36px; border-radius: 28px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.btn-hero { background: #FFFFFF; color: #2D8CF0; }
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.btn-outline { border: 2px solid rgba(255,255,255,0.6); color: #FFFFFF; }
.btn-outline:hover { border-color: #FFFFFF; }
.hero-qr { flex-shrink: 0; }
.qr-box { width: 200px; height: 200px; background: rgba(255,255,255,0.15); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed rgba(255,255,255,0.3); }
.qr-box.large { width: 240px; height: 240px; background: rgba(255,255,255,0.1); border: 3px dashed rgba(255,255,255,0.4); }
.qr-real-img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  display: block;
}
.qr-box.large .qr-real-img {
  width: 200px;
  height: 200px;
}
.qr-label { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 8px; text-align: center; }
.cta-qr { display: flex; justify-content: center; }

/* Pain Points */
.pain-points { padding: 80px 20px; background: #FFF5F5; }
.pain-points h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 48px; color: #1D1D1F; }
.pain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }
.pain-card { background: #FFFFFF; border-radius: 20px; padding: 32px; text-align: center; border: 1px solid #FFE0E0; }
.pain-icon { font-size: 48px; margin-bottom: 16px; }
.pain-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #E03131; }
.pain-card p { font-size: 16px; color: #86868B; line-height: 1.7; }

/* Features */
.features { padding: 80px 20px; max-width: 1000px; margin: 0 auto; }
.features h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 48px; color: #1D1D1F; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.feature-card { background: #F5F7FA; border-radius: 20px; padding: 32px; transition: all 0.2s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.feature-icon { font-size: 48px; margin-bottom: 16px; }
.feature-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.feature-card p { font-size: 15px; color: #86868B; line-height: 1.7; }

/* How It Works */
.how-it-works { background: #F5F7FA; padding: 80px 20px; text-align: center; }
.how-it-works h2 { font-size: 32px; font-weight: 700; margin-bottom: 48px; }
.steps { display: flex; align-items: flex-start; justify-content: center; gap: 24px; max-width: 900px; margin: 0 auto; flex-wrap: wrap; }
.step { flex: 1; min-width: 180px; max-width: 200px; }
.step-num { width: 56px; height: 56px; border-radius: 50%; background: #2D8CF0; color: #FFFFFF; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.step h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.step p { font-size: 14px; color: #86868B; }
.step-arrow { font-size: 28px; color: #D1D1D6; align-self: center; margin-top: 8px; }

/* Roles */
.roles { padding: 80px 20px; max-width: 900px; margin: 0 auto; }
.roles h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.roles-sub { text-align: center; font-size: 16px; color: #86868B; margin-bottom: 48px; }
.role-cards { display: flex; gap: 24px; }
.role-card { flex: 1; border-radius: 20px; padding: 36px; background: #F5F7FA; }
.child-role { border-top: 4px solid #2D8CF0; }
.parent-role { border-top: 4px solid #FF9500; }
.role-header { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.child-role .role-header { color: #2D8CF0; }
.parent-role .role-header { color: #FF9500; }
.role-card ul { list-style: none; }
.role-card li { font-size: 15px; color: #1D1D1F; padding: 10px 0; border-bottom: 1px solid #F0F0F0; line-height: 1.6; }
.role-card li:last-child { border-bottom: none; }
.role-card li strong { color: #1D1D1F; }

/* Scenarios */
.scenarios { background: #F0F7FF; padding: 80px 20px; }
.scenarios h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 48px; }
.scenario-list { max-width: 800px; margin: 0 auto; }
.scenario-item { display: flex; gap: 24px; padding: 32px 0; border-bottom: 1px solid #D1E8FF; }
.scenario-num { font-size: 36px; font-weight: 800; color: #2D8CF0; flex-shrink: 0; }
.scenario-body h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.scenario-body p { font-size: 15px; color: #86868B; line-height: 1.8; }

/* Trust */
.trust { padding: 80px 20px; }
.trust h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 48px; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }
.trust-card { background: #F5F7FA; border-radius: 20px; padding: 32px; text-align: center; }
.trust-icon { font-size: 48px; margin-bottom: 16px; }
.trust-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.trust-card p { font-size: 14px; color: #86868B; line-height: 1.7; }

/* FAQ */
.faq { background: #F5F7FA; padding: 80px 20px; }
.faq h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 48px; }
.faq-list { max-width: 700px; margin: 0 auto; }
.faq-item { padding: 24px 0; border-bottom: 1px solid #E0E0E0; }
.faq-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #1D1D1F; }
.faq-item p { font-size: 15px; color: #86868B; line-height: 1.8; }

/* CTA */
.cta { background: linear-gradient(135deg, #2D8CF0 0%, #1A6DC4 100%); color: #FFFFFF; padding: 80px 20px; text-align: center; }
.cta h2 { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.cta > p { font-size: 18px; opacity: 0.9; margin-bottom: 40px; }
.cta-note { font-size: 14px; opacity: 0.7; margin-top: 16px; }

/* Privacy */
.privacy { background: #F5F7FA; padding: 80px 20px; }
.privacy h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 32px; }
.privacy-content { max-width: 600px; margin: 0 auto; text-align: center; }
.privacy-content p { font-size: 15px; color: #86868B; margin-bottom: 16px; line-height: 1.8; }
.privacy-link { color: #2D8CF0; text-decoration: none; font-weight: 500; }
.privacy-link:hover { text-decoration: underline; }

/* Screenshots / Mockups */
.screenshots { padding: 80px 20px; background: #FFFFFF; }
.screenshots h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.screenshots-sub { text-align: center; font-size: 16px; color: #86868B; margin-bottom: 48px; }
.mockup-row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.mockup.phone { width: 280px; border-radius: 36px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.12); border: 3px solid #E0E0E0; }
.child-phone { background: #FFFFFF; }
.parent-phone { background: #F0F7FF; border-color: #B8D4F0; }
.mockup-status-bar { display: flex; justify-content: space-between; padding: 12px 20px 8px; font-size: 12px; color: #86868B; background: #FFFFFF; }
.mockup-header { padding: 8px 20px 16px; background: #2D8CF0; color: #FFFFFF; }
.mockup-header.parent-header { background: #FF9500; }
.mockup-title { font-size: 18px; font-weight: 600; }
.mockup-body { padding: 16px; }
.mockup-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: #F5F7FA; border-radius: 12px; margin-bottom: 12px; }
.mockup-avatar { font-size: 28px; }
.mockup-info { font-size: 13px; }
.mockup-info strong { display: block; font-size: 15px; margin-bottom: 2px; }
.mockup-btn { text-align: center; padding: 14px; background: #2D8CF0; color: #FFFFFF; border-radius: 12px; font-size: 15px; font-weight: 600; margin-top: 8px; }
.mockup-nav { display: flex; justify-content: space-around; padding: 12px 0 16px; border-top: 1px solid #F0F0F0; font-size: 12px; color: #86868B; }
.mockup-nav .active { color: #2D8CF0; font-weight: 600; }
.parent-body { padding: 20px 16px; }
.mockup-big-date { text-align: center; font-size: 16px; font-weight: 600; color: #86868B; margin-bottom: 16px; }
.mockup-med-item { background: #FFFFFF; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.mockup-med-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.mockup-med-dose { font-size: 13px; color: #86868B; margin-bottom: 12px; }
.mockup-check-btn { text-align: center; padding: 10px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.mockup-check-btn.checked { background: #E8F5E9; color: #2E7D32; }
.sos-fab { position: relative; margin: 0 auto 12px; width: 56px; height: 56px; border-radius: 50%; background: #E03131; color: #FFFFFF; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(224,49,49,0.3); }

/* Testimonials */
.testimonials { background: #FFF8E6; padding: 80px 20px; }
.testimonials h2 { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 48px; }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }
.testimonial-card { background: #FFFFFF; border-radius: 20px; padding: 32px; border: 1px solid #FFE0A0; }
.testimonial-stars { font-size: 16px; margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-card p { font-size: 15px; color: #1D1D1F; line-height: 1.8; margin-bottom: 16px; font-style: italic; }
.testimonial-author { font-size: 13px; color: #86868B; }

/* Footer */
footer { background: #1D1D1F; color: #FFFFFF; padding: 40px 20px; text-align: center; }
footer a { color: #FFFFFF; }
footer a:hover { text-decoration: underline; }
.footer-content { max-width: 600px; margin: 0 auto; }
footer p { font-size: 14px; opacity: 0.8; }
.footer-disclaimer { font-size: 12px; margin-top: 12px; opacity: 0.5; }

/* Animation */
.fade-in { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 768px) {
  .hero { padding: 48px 16px 36px; }
  .hero-content { flex-direction: column-reverse; text-align: center; }
  .hero h1 { font-size: 28px; }
  .hero-desc { font-size: 18px; }
  .hero-actions { justify-content: center; }
  .hero-text > div > div > h1 { font-size: 28px !important; }
  .hero-text > div > div > p { font-size: 16px !important; }
  .pain-points, .features, .how-it-works, .roles, .scenarios, .trust, .faq, .cta, .testimonials, .screenshots { padding: 48px 16px; }
  .pain-points h2, .features h2, .how-it-works h2, .roles h2, .scenarios h2, .trust h2, .faq h2, .cta h2, .testimonials h2, .screenshots h2 { font-size: 24px; margin-bottom: 32px; }
  .steps { flex-direction: column; align-items: center; }
  .step-arrow { transform: rotate(90deg); }
  .role-cards { flex-direction: column; }
  .feature-grid { grid-template-columns: 1fr; }
  .pain-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .scenario-item { flex-direction: column; gap: 12px; }
  .mockup-row { gap: 24px; }
  .mockup.phone { width: 240px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .qr-box { width: 160px; height: 160px; }
  .qr-box.large { width: 180px; height: 180px; }
  .qr-real-img { width: 100px; height: 100px; }
  .qr-box.large .qr-real-img { width: 140px; height: 140px; }
}

@media (max-width: 480px) {
  .hero { padding: 36px 12px 28px; }
  .hero h1 { font-size: 24px; }
  .hero-desc { font-size: 16px; }
  .hero-actions { flex-direction: column; gap: 8px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .feature-card, .pain-card, .trust-card, .testimonial-card { padding: 20px; }
  .qr-box { width: 160px; height: 160px; }
  .qr-box.large { width: 180px; height: 180px; }
  .qr-real-img { width: 100px; height: 100px; }
  .qr-box.large .qr-real-img { width: 140px; height: 140px; }
}