@import url('crm-page.css');

.mobile-page { --erp-ink: #152b38; --erp-ink-soft: #405b62; --erp-paper: #f5f1ea; --erp-sage: #dce8e5; --erp-copper: #d46d49; --erp-copper-dark: #a84932; }
.mobile-hero { padding: 84px 0 76px; background: var(--erp-ink); color: #fffaf0; }
.mobile-hero-grid { display: grid; grid-template-columns: 1fr .78fr; align-items: center; gap: 76px; }
.mobile-hero h1 { max-width: 760px; margin: 0; font-size: clamp(3.1rem, 6.7vw, 6.2rem); font-weight: 400; letter-spacing: -.06em; line-height: .94; }
.mobile-hero h1 em { color: #f4b28e; font-style: normal; }
.mobile-hero-copy { max-width: 580px; margin: 27px 0 0; color: #d5e0d7; font-size: 1.12rem; }
.mobile-device-wrap { display: flex; justify-content: center; }
.mobile-device { width: min(280px, 100%); padding: 11px; border: 1px solid rgba(255,255,255,.34); border-radius: 30px; background: #0d1f2a; box-shadow: 0 25px 60px rgba(0,0,0,.25); transform: rotate(4deg); }
.mobile-device-screen { min-height: 470px; overflow: hidden; border-radius: 21px; background: #e3eeea; color: var(--erp-ink); }
.mobile-device-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 12px; font: 700 .68rem/1 'Trebuchet MS', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.mobile-device-greeting { padding: 14px 16px 18px; font: 1.5rem/1.05 Georgia, 'Times New Roman', serif; }
.mobile-device-greeting em { color: var(--erp-copper-dark); font-style: normal; }
.mobile-device-card { margin: 0 12px 12px; padding: 15px; background: #fffdf8; box-shadow: 0 5px 16px rgba(20,43,61,.08); }
.mobile-device-card small { display: block; color: var(--erp-copper-dark); font: 700 .62rem/1 'Trebuchet MS', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mobile-device-card strong { display: block; margin-top: 9px; font: 1.45rem/1 Georgia, 'Times New Roman', serif; }
.mobile-device-bars { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 7px; height: 75px; margin-top: 14px; }
.mobile-device-bars span { background: var(--erp-copper); }
.mobile-device-bars span:nth-child(1) { height: 40%; opacity: .55; }.mobile-device-bars span:nth-child(2) { height: 68%; opacity: .7; }.mobile-device-bars span:nth-child(3) { height: 51%; opacity: .8; }.mobile-device-bars span:nth-child(4) { height: 90%; }
.mobile-intro { padding: 78px 0 38px; }
.mobile-intro-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.mobile-intro h2, .mobile-section-title { margin: 0; font-size: clamp(2.1rem,4vw,3.7rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.mobile-intro-copy { margin: 0; color: var(--erp-ink-soft); font-size: 1.12rem; }.mobile-intro-copy + p { margin-top: 18px; }
.mobile-services { padding: 42px 0 90px; }
.mobile-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.mobile-service { min-height: 220px; padding: 23px 20px; border-top: 3px solid var(--erp-copper); background: var(--erp-card); box-shadow: 0 8px 25px rgba(20,43,61,.06); }
.mobile-service:nth-child(2n) { border-top-color: var(--erp-ink); background: var(--erp-sage); }.mobile-service:nth-child(3n) { border-top-color: #7f9ca5; }
.mobile-service-number { color: var(--erp-copper-dark); font: 700 .75rem/1 'Trebuchet MS', sans-serif; }.mobile-service h3 { margin: 28px 0 8px; font-size: 1.28rem; font-weight: 400; line-height: 1.1; }.mobile-service p { margin: 0; color: var(--erp-ink-soft); font-size: .93rem; }
.mobile-process { padding: 77px 0; background: #e2ebea; }.mobile-process-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 75px; }.mobile-process-copy { margin: 0; color: var(--erp-ink-soft); font-size: 1.08rem; }.mobile-process-list { margin: 24px 0 0; padding: 0; list-style: none; }.mobile-process-list li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--erp-line); }.mobile-process-list strong { color: var(--erp-copper-dark); font: 700 .78rem/1 'Trebuchet MS', sans-serif; }.mobile-process-list span { color: var(--erp-ink); }
.mobile-tech { padding: 76px 0 84px; }.mobile-tech-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 75px; }.mobile-tech-copy { margin: 0; color: var(--erp-ink-soft); font-size: 1.08rem; }.mobile-tech-tags { display: flex; flex-wrap: wrap; align-content: start; gap: 9px; }.mobile-tech-tags span { padding: 11px 13px; border: 1px solid var(--erp-line); color: var(--erp-ink-soft); font: 700 .73rem/1 'Trebuchet MS', sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.mobile-faq { padding: 78px 0 100px; background: var(--erp-paper); }.mobile-faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; }.mobile-faq h2 { margin: 0; font-size: clamp(2.1rem,4vw,3.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }.mobile-faq-item { padding: 21px 0; border-top: 1px solid var(--erp-line); }.mobile-faq-item h3 { margin: 0 0 7px; font-size: 1.2rem; font-weight: 400; }.mobile-faq-item p { margin: 0; color: var(--erp-ink-soft); font-size: .97rem; }.mobile-cta { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 56px; padding: 28px 30px; background: var(--erp-ink); color: #fffaf0; }.mobile-cta p { margin: 0; font-size: 1.14rem; }.mobile-cta .erp-button { flex: 0 0 auto; }
@media (max-width: 850px) { .mobile-hero-grid, .mobile-intro-grid, .mobile-process-grid, .mobile-tech-grid, .mobile-faq-grid { grid-template-columns: 1fr; gap: 38px; }.mobile-service-grid { grid-template-columns: repeat(2, 1fr); }.mobile-device { transform: none; } }
@media (max-width: 560px) { .mobile-hero { padding: 62px 0 56px; }.mobile-service-grid { grid-template-columns: 1fr; }.mobile-intro, .mobile-process { padding-top: 58px; }.mobile-services { padding-bottom: 58px; }.mobile-cta { align-items: stretch; flex-direction: column; }.mobile-cta .erp-button { width: 100%; } }