/* Crank Digital Landing Page - b3992f33 */
.crank-lp-b3992f33 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}
.crank-lp-b3992f33 *,
.crank-lp-b3992f33 *::before,
.crank-lp-b3992f33 *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ---- BUTTONS ---- */
.crank-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}
.crank-btn--primary {
    background: #FF6B35;
    color: #ffffff;
}
.crank-btn--primary:hover {
    background: #e55a28;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255,107,53,0.35);
}
.crank-btn--outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.3);
    font-weight: 600;
}
.crank-btn--outline:hover {
    border-color: #ffffff;
    background: rgba(255,255,255,0.08);
}
.crank-btn--submit {
    width: 100%;
    padding: 1.1rem;
    font-size: 1.05rem;
}

/* ---- LABELS ---- */
.crank-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #FF6B35;
}
.crank-label--light {
    color: #FF6B35;
}
.crank-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(255,107,53,0.1);
    border: 1px solid rgba(255,107,53,0.25);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #FF6B35;
}

/* ---- SECTION TITLES ---- */
.crank-section-title {
    font-size: 2.75rem;
    font-weight: 800;
    color: #0a1628;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
}
.crank-section-title--light {
    color: #ffffff;
}
.crank-section-title--left {
    text-align: left;
}
.crank-section-title--large {
    font-size: 3rem;
}
.crank-section-sub {
    font-size: 1.15rem;
    color: #4a5568;
    line-height: 1.7;
}
.crank-section-sub--light {
    color: #c8d6e5;
    text-align: center;
}

/* ======== HERO ======== */
.crank-hero {
    padding: 7rem 2rem 5rem;
    background: linear-gradient(145deg, #0a1628 0%, #0f2847 50%, #0a1628 100%);
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crank-hero__inner {
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}
.crank-hero__title {
    font-size: 3.75rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.crank-hero__sub {
    font-size: 1.2rem;
    color: #c8d6e5;
    max-width: 44rem;
    line-height: 1.7;
}
.crank-hero__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0.5rem;
}
.crank-trust {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 1.5rem;
}
.crank-trust__item {
    font-size: 0.85rem;
    color: #a0b4c8;
}

/* ======== PROBLEM ======== */
.crank-problem {
    padding: 7rem 2rem;
    background: #f8f9fc;
}
.crank-problem__inner {
    max-width: 68rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.crank-pain-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
}
.crank-pain-card {
    padding: 1.75rem;
    background: #ffffff;
    border-radius: 12px;
    border-left: 4px solid #FF6B35;
    box-shadow: 0 4px 20px rgba(10,22,40,0.06);
    flex: 1 1 14rem;
    max-width: 22rem;
}
.crank-pain-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 0.5rem;
}
.crank-pain-card__desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
}
.crank-solution-box {
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, rgba(255,107,53,0.08) 0%, rgba(15,40,71,0.06) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,107,53,0.15);
    text-align: center;
}
.crank-solution-box p {
    font-size: 1.15rem;
    color: #0f2847;
    font-weight: 500;
    line-height: 1.7;
}

/* ======== SERVICES ======== */
.crank-services {
    padding: 7rem 2rem;
    background: linear-gradient(145deg, #0a1628 0%, #0f2847 100%);
}
.crank-services__inner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}
.crank-services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
}
.crank-service-card {
    padding: 2rem;
    background: #ffffff;
    border-radius: 16px;
    flex: 1 1 18rem;
    max-width: 22rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.crank-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.crank-service-card__icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
}
.crank-service-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 0.75rem;
}
.crank-service-card__desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
}

/* ======== WHY CHOOSE US ======== */
.crank-why {
    padding: 7rem 2rem;
    background: #ffffff;
}
.crank-why__inner {
    max-width: 68rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.crank-why-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.crank-why-card {
    padding: 2.25rem;
    background: linear-gradient(145deg, #0a1628 0%, #0f2847 100%);
    border-radius: 16px;
    flex: 1 1 18rem;
    max-width: 24rem;
}
.crank-why-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}
.crank-why-card__desc {
    font-size: 0.95rem;
    color: #c8d6e5;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.crank-why-card__list {
    font-size: 0.9rem;
    color: #FF6B35;
    font-weight: 600;
    line-height: 2;
}

/* ======== INDUSTRIES ======== */
.crank-industries {
    padding: 7rem 2rem;
    background: #f8f9fc;
}
.crank-industries__inner {
    max-width: 68rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.crank-industries-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.crank-industry-tag {
    padding: 1.25rem 1.75rem;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e8ecf1;
    font-size: 1rem;
    font-weight: 600;
    color: #0a1628;
    transition: border-color 0.3s ease;
}
.crank-industry-tag:hover {
    border-color: #FF6B35;
}

/* ======== RESULTS ======== */
.crank-results {
    padding: 7rem 2rem;
    background: linear-gradient(145deg, #0a1628 0%, #0f2847 100%);
}
.crank-results__inner {
    max-width: 68rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.crank-metrics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.crank-metric-card {
    padding: 1.75rem;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    flex: 1 1 13rem;
    max-width: 18rem;
    text-align: center;
    transition: background 0.3s ease;
}
.crank-metric-card:hover {
    background: rgba(255,255,255,0.1);
}
.crank-metric-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #FF6B35;
    margin-bottom: 0.75rem;
}
.crank-metric-card__desc {
    font-size: 0.9rem;
    color: #c8d6e5;
    line-height: 1.6;
}

/* ======== FREE AUDIT ======== */
.crank-audit {
    padding: 7rem 2rem;
    background: #ffffff;
}
.crank-audit__inner {
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    align-items: center;
}
.crank-audit__left {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.crank-audit__right {
    flex: 1 1 16rem;
    padding: 2rem;
    background: #f8f9fc;
    border-radius: 16px;
    border: 1px solid #e8ecf1;
}
.crank-audit__includes-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 0.75rem;
}
.crank-audit__item {
    font-size: 0.95rem;
    color: #4a5568;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e8ecf1;
}
.crank-audit__item--last {
    border-bottom: none;
}

/* ======== CONTACT FORM ======== */
.crank-contact {
    padding: 7rem 2rem;
    background: linear-gradient(145deg, #0a1628 0%, #0f2847 100%);
}
.crank-contact__inner {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.crank-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.crank-form__row {
    display: flex;
    gap: 1.25rem;
}
.crank-form__field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.crank-form__field--full {
    width: 100%;
}
.crank-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #c8d6e5;
}
.crank-form input,
.crank-form select,
.crank-form textarea {
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}
.crank-form input::placeholder,
.crank-form textarea::placeholder {
    color: rgba(255,255,255,0.35);
}
.crank-form input:focus,
.crank-form select:focus,
.crank-form textarea:focus {
    outline: none;
    border-color: #FF6B35;
}
.crank-form select option {
    background: #0a1628;
    color: #ffffff;
}
.crank-form__status {
    text-align: center;
    font-size: 0.9rem;
    min-height: 1.4rem;
}
.crank-form__status--success {
    color: #4ade80;
}
.crank-form__status--error {
    color: #f87171;
}

/* ======== FINAL CTA ======== */
.crank-final-cta {
    padding: 7rem 2rem;
    background: linear-gradient(145deg, #0a1628 0%, #142d54 50%, #0a1628 100%);
}
.crank-final-cta__inner {
    max-width: 44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

/* ======== FOOTER ======== */
.crank-footer {
    padding: 4rem 2rem;
    background: #060e1a;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.crank-footer__inner {
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}
.crank-footer__brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}
.crank-footer__desc {
    font-size: 0.9rem;
    color: #8899aa;
    line-height: 1.7;
}
.crank-footer__copy {
    font-size: 0.8rem;
    color: #5a6a7a;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    width: 100%;
    text-align: center;
}

/* ======== ANIMATIONS ======== */
.crank-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.crank-fade-in.crank-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
    .crank-hero__title {
        font-size: 2.25rem;
    }
    .crank-section-title {
        font-size: 2rem;
    }
    .crank-section-title--large {
        font-size: 2.25rem;
    }
    .crank-hero {
        padding: 5rem 1.25rem 4rem;
        min-height: auto;
    }
    .crank-problem,
    .crank-services,
    .crank-why,
    .crank-industries,
    .crank-results,
    .crank-audit,
    .crank-contact,
    .crank-final-cta {
        padding: 4rem 1.25rem;
    }
    .crank-form__row {
        flex-direction: column;
    }
    .crank-hero__ctas {
        flex-direction: column;
        align-items: center;
    }
    .crank-btn {
        width: 100%;
        text-align: center;
    }
    .crank-trust {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .crank-audit__inner {
        flex-direction: column;
    }
    .crank-section-title--left {
        text-align: center;
    }
}
