.button { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; border-radius: var(--radius-pill); font-weight: var(--font-weight-black); transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; gap: var(--space-sm);}.button:hover { transform: translateY(-2px);}.button:active { transform: translateY(0);}.button--primary { background-color: var(--color-primary); color: var(--color-white);}.button--primary:hover { background-color: var(--color-primary-dark);}.button--secondary { border: 2px solid var(--color-primary); color: var(--color-primary);}.button--secondary:hover { background-color: var(--color-primary-light);}.service-card { background-color: var(--color-white); border: var(--border-default); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm);}.service-card__icon { width: 72px; height: 72px; border-radius: var(--radius-md); background-color: var(--color-primary-light); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); color: var(--color-primary); font-weight: var(--font-weight-bold); font-size: var(--text-sm); overflow: hidden;}.service-card__title { font-family: var(--font-heading); font-size: var(--heading-md); font-weight: var(--font-weight-bold); margin-bottom: var(--space-xs); color: var(--color-text);}.service-card__desc { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7;}.sprint-card { background-color: var(--color-white); border: var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; overflow: hidden;}.sprint-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;}.sprint-card--active::before { background-color: var(--color-success, #166534);}.sprint-card--closed::before { background-color: var(--color-danger, #b91c1c);}.sprint-card__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding-top: 8px;}.chip { padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--font-weight-black); letter-spacing: 0.02em; line-height: 1;}.chip--active { background-color: var(--color-success-light); color: var(--color-success);}.chip--open { background-color: var(--color-info-light); color: var(--color-info);}.chip--closed { background-color: var(--color-danger-light); color: var(--color-danger);}.chip--closed-order { background-color: var(--color-neutral-light); color: var(--color-neutral);}.sprint-card__title { font-family: var(--font-heading); font-size: var(--heading-md); font-weight: var(--font-weight-bold); margin-bottom: 8px; color: var(--color-text); overflow-wrap: break-word;}.sprint-card__desc { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; margin-bottom: 20px; overflow-wrap: break-word;}.sprint-card__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 16px; background-color: var(--color-off-white, #f8faf8); border-radius: var(--radius-md, 16px);}.sprint-card__stat { display: flex; align-items: center; gap: 6px;}.sprint-card__stat-value { display: block; font-family: var(--font-heading); font-size: var(--heading-sm); font-weight: var(--font-weight-black); color: var(--color-text);}.sprint-card__stat-label { font-size: var(--text-xs); color: var(--color-text-muted);}.sprint-card__action { margin-top: auto; width: 100%; text-align: center;}.sprint-card__action--disabled { display: block; width: 100%; padding: 14px 24px; border-radius: 999px; background-color: var(--color-neutral-light, #f3f4f6); color: var(--color-neutral, #4b5563); font-weight: 800; font-size: var(--text-base); text-align: center; cursor: not-allowed; opacity: 0.7;}.empty-state { background-color: var(--color-white); border: var(--border-default); border-radius: var(--radius-xl); padding: var(--space-3xl); text-align: center; max-width: 600px; margin-inline: auto;}.empty-state__image { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); height: 220px; display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: var(--space-xl); color: var(--color-text-light); font-weight: var(--font-weight-bold); overflow: hidden;}.empty-state__title { font-family: var(--font-heading); font-size: var(--heading-md); font-weight: var(--font-weight-bold); margin-bottom: var(--space-sm); color: var(--color-text);}.empty-state__desc { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7;}.cta-banner { background: var(--gradient-cta); padding: var(--space-3xl); border-radius: var(--radius-xl); text-align: center;}.cta-banner__title { font-family: var(--font-heading); font-size: var(--heading-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-md); color: var(--color-text);}.cta-banner__desc { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-xl); max-width: 560px; margin-inline: auto;}.page-header { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-bottom: var(--border-default); position: sticky; top: 0; z-index: 100;}.page-header__inner { height: 78px; display: flex; justify-content: space-between; align-items: center;}.page-header__logo { font-family: var(--font-heading); font-size: var(--heading-md); color: var(--color-primary); font-weight: var(--font-weight-bold);}.page-header__nav { display: flex; gap: var(--space-xl);}.page-header__link { font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--text-base); transition: color 0.2s ease;}.page-header__link:hover { color: var(--color-primary);}.page-header__link--active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 2px;}.section-header { text-align: center; margin-bottom: var(--space-3xl);}.section-header__title { font-family: var(--font-heading); font-size: var(--heading-lg); color: var(--color-text); margin-bottom: var(--space-xs);}.section-header__desc { font-size: var(--text-lg); color: var(--color-text-muted);}.hero { padding-block: var(--space-4xl);}.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); align-items: center;}.hero__badge { display: inline-block; padding: 10px 18px; border-radius: var(--radius-pill); background-color: var(--color-primary-light); color: var(--color-primary); font-weight: var(--font-weight-black); font-size: var(--text-sm);}.hero__title { font-family: var(--font-heading); font-size: var(--heading-xl); line-height: 1.05; margin-block: var(--space-md) var(--space-sm); color: var(--color-text);}.hero__desc { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.7; max-width: 520px;}.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl);}.hero__art { background-color: var(--color-white); border: var(--border-default); border-radius: var(--radius-xl); padding: var(--space-xl); min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden;}.hero__illustration { width: 100%; max-width: 100%; height: 280px; border: 2px dashed var(--color-border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-text-light); font-weight: var(--font-weight-bold); font-size: var(--text-base);}.section__title { font-family: "Baloo 2", var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; margin-bottom: 1rem; color: var(--color-text, #1f2937); overflow-wrap: break-word;}.section__desc { color: var(--color-text-muted, #6b7280); font-size: var(--text-lg); margin-bottom: 2rem; overflow-wrap: break-word;}.section__header { text-align: center; margin-bottom: var(--space-3xl);}.footer { padding-block: 32px; text-align: center;}.footer__copy { font-family: var(--font-primary); font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.6; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;}.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; height: 64px; padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); background-color: rgba(255, 255, 255, 0.95); border-top: var(--border-default, 1px solid var(--color-border, #e5e7eb)); box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);}.mobile-nav__list { display: flex; justify-content: space-around; align-items: center; width: 100%; max-width: 100%; height: 100%; gap: 0; list-style: none; margin: 0; padding: 0;}.mobile-nav__item { flex: 1 1 0; min-width: 0; text-align: center; display: flex; align-items: center; justify-content: center;}.mobile-nav__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--font-primary); font-size: 10px; font-weight: var(--font-weight-bold, 700); color: var(--color-text-muted, #6b7280); padding: 4px 2px; border-radius: var(--radius-sm, 12px); transition: color 0.2s ease, background-color 0.2s ease; text-decoration: none; overflow-wrap: break-word; text-align: center; width: 100%; max-width: 100%; min-width: 0; line-height: 1.3;}.mobile-nav__link:hover,.mobile-nav__link:active { color: var(--color-primary, #2d6a4f); background-color: var(--color-primary-light, #e8f5ee);}.mobile-nav__link--active { color: var(--color-primary, #2d6a4f); background-color: var(--color-primary-light, #e8f5ee);}.mobile-nav__item--active .mobile-nav__link { color: var(--color-primary, #2d6a4f); background-color: var(--color-primary-light, #e8f5ee);}.mobile-nav__icon { width: 22px; height: 22px; min-width: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.mobile-nav__icon svg { width: 22px; height: 22px; min-width: 22px;}@media (max-width: 380px) { .mobile-nav { height: 58px; padding: 4px 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); } .mobile-nav__link { font-size: 9px; padding: 2px 1px; gap: 2px; } .mobile-nav__icon { width: 20px; height: 20px; min-width: 20px; } .mobile-nav__icon svg { width: 20px; height: 20px; min-width: 20px; }}@media (max-width: 340px) { .mobile-nav { height: 54px; padding: 3px 2px; } .mobile-nav__link { font-size: 8px; padding: 2px 1px; gap: 1px; }}@media (max-width: 900px) { .hero__grid, .services { grid-template-columns: minmax(0, 1fr); } .page-header__inner { height: auto; padding-block: var(--space-md); } .page-header__nav { display: none; } .hero { padding-block: var(--space-2xl); } .hero__title { font-size: 3.8rem; } body { font-size: 19px; }}