.page-da-ga { color: #333333; } .page-da-ga__hero-section { display: flex; flex-direction: column; background: linear-gradient(135deg, #ffffff 0%, #e6f7ff 100%); width: 100%; } .page-da-ga__hero-image { width: 100%; max-width: 1200px; margin: 0 auto; } .page-da-ga__hero-image img { width: 100%; height: auto; max-height: 350px; object-fit: cover; display: block; border-radius: 8px; } .page-da-ga__hero-content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px 24px; text-align: center; } .page-da-ga__hero-title { font-weight: 700; color: #333333; letter-spacing: 0.3px; line-height: 1.3; max-width: 800px; margin: 0 auto 8px; } .page-da-ga__hero-subtitle { font-size: 1rem; color: #444444; margin: 0 auto 24px; max-width: 900px; } .page-da-ga__cta-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .page-da-ga__btn { display: inline-block; padding: 12px 28px; border-radius: 50px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: all 0.3s ease; max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; } .page-da-ga__btn--primary { background: #26A9E0; color: #ffffff; border-color: #26A9E0; } .page-da-ga__btn--primary:hover { background: #1b8fbf; } .page-da-ga__btn--login { background: #EA7C07; color: #ffffff; border-color: #EA7C07; } .page-da-ga__btn--login:hover { background: #c06506; } .page-da-ga__btn--secondary { background: #ffffff; color: #26A9E0; border-color: #26A9E0; } .page-da-ga__btn--secondary:hover { background: #f0f9ff; } .page-da-ga__intro { padding: 16px 24px; } .page-da-ga__intro-inner, .page-da-ga__features-grid, .page-da-ga__guide-inner, .page-da-ga__faq-inner { max-width: 1200px; margin: 0 auto; } .page-da-ga__section-title, .page-da-ga__guide-title { font-size: 2rem; color: #26A9E0; text-align: center; margin-bottom: 24px; } .page-da-ga__features { padding: 32px 16px; background: white; } .page-da-ga__features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .page-da-ga__feature-card { background: #ffffff; border: 1px solid #e0f0f7; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 16px; } .page-da-ga__feature-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px 12px 0 0; } .page-da-ga__feature-card h3 { color: #26A9E0; } .page-da-ga__feature-card p { padding: 0 16px; font-size: 0.9rem; color: #555; } .page-da-ga__guide { padding: 32px 16px; } .page-da-ga__guide-step { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 16px; border: 1px solid #e0f0f7; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .page-da-ga__guide-step h3 { color: #26A9E0; } .page-da-ga__faq { padding: 32px 16px; background: #f9fbfc; } .page-da-ga__faq-item { background: #fff; border: 1px solid #e0f0f7; margin-bottom: 12px; border-radius: 8px; } .page-da-ga__faq-question { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; font-weight: 700; color: #26A9E0; } .page-da-ga__faq-icon { font-size: 24px; line-height: 1; } .page-da-ga__faq-item p { padding: 0 16px 16px; color: #555; } .page-da-ga__cta-bottom { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 16px; max-width: 1200px; margin: 0 auto; gap: 20px; } .page-da-ga__cta-bottom-content { text-align: left; max-width: 600px; } .page-da-ga__cta-bottom-content .page-da-ga__btn--primary { background: #EA7C07; border-color: #EA7C07; } .page-da-ga__cta-bottom img { width: 100%; max-width: 600px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; } @media (max-width: 768px) { .page-da-ga__hero-image img { max-height: 200px; } .page-da-ga__features-grid { grid-template-columns: 1fr; } .page-da-ga__hero-image, .page-da-ga__hero-content, .page-da-ga__cta-bottom { padding: 10px; } .page-da-ga__cta-bottom { flex-direction: column; } .page-da-ga__cta-bottom-content { text-align: center; } .page-da-ga img { max-width: 100% !important; height: auto !important; } .page-da-ga { max-width: 100%; overflow-x: hidden; } }