/* =================================================================
   Echoe — Enterprise service page styles (v3)
   Loaded by service.php and services.php
   ================================================================= */

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar {
    background: var(--c-soft);
    border-bottom: 1px solid var(--c-line);
    padding: .75rem 0;
}
.breadcrumb {
    display: flex; flex-wrap: wrap;
    list-style: none; padding: 0; margin: 0;
    gap: .35rem; font-size: .88rem; color: var(--c-muted);
}
.breadcrumb li + li::before {
    content: "›"; padding: 0 .35rem; color: var(--c-line);
}
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb li[aria-current] { color: var(--c-primary); font-weight: 600; }

/* ---------- Service hero ---------- */
.service-hero {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: linear-gradient(180deg, var(--c-soft), #fff);
    position: relative; overflow: hidden;
}
.service-hero-grid {
    display: grid; gap: 2.5rem;
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 880px) { .service-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.service-hero-copy .page-title {
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.service-hero-copy .page-lead { font-size: 1.05rem; max-width: 580px; }
.service-kpis {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    padding: 1rem 0; margin: 1rem 0;
    border-block: 1px solid var(--c-line);
}
.service-kpis > div { display: flex; flex-direction: column; }
.service-kpis strong {
    font-family: var(--font-display); font-size: 1.4rem;
    font-weight: 800; color: var(--c-primary); line-height: 1;
}
.service-kpis span { color: var(--c-muted); font-size: .85rem; margin-top: .15rem; }
.service-hero-visual {
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 16/10; background: var(--c-soft);
}
.service-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.service-hero-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: var(--c-accent);
    background: linear-gradient(135deg, rgba(30,99,216,.10), rgba(30,99,216,.02));
}

/* ---------- About prose section ---------- */
.service-about .prose h2 { margin-top: 0; }

/* ---------- 3-col card grid ---------- */
.card-grid-3 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .card-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Feature cards ---------- */
.feature-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: transparent;
}
.feature-card h3 { margin: .25rem 0 .5rem; font-size: 1.05rem; }
.feature-card p  { color: var(--c-muted); margin: 0; font-size: .92rem; }
.feature-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, rgba(30,99,216,.12), rgba(30,99,216,.04));
    color: var(--c-accent);
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .5rem;
}

/* ---------- Benefits rows ---------- */
.benefit-grid {
    display: grid; gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) { .benefit-grid { grid-template-columns: 1fr 1fr; } }
.benefit-row {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; padding: 1.25rem;
    border: 1px solid var(--c-line); border-radius: var(--radius);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.benefit-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.benefit-num {
    flex-shrink: 0;
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 800;
    background: linear-gradient(135deg, var(--c-accent), #5ea0ff);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    line-height: 1;
}
.benefit-row h3 { font-size: 1rem; margin: 0 0 .35rem; }
.benefit-row p  { color: var(--c-muted); margin: 0; font-size: .92rem; }

/* ---------- Process timeline ---------- */
.process-timeline {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 1.25rem;
}
.process-step {
    background: #fff;
    border: 1px solid var(--c-line); border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    display: flex; gap: 1.25rem; align-items: flex-start;
    position: relative;
}
.process-num {
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 6px 18px -6px rgba(10,37,64,.4);
}
.process-step h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.process-step p  { color: var(--c-muted); margin: 0; font-size: .92rem; }
@media (min-width: 720px) { .process-timeline { grid-template-columns: 1fr 1fr; } }

/* ---------- Tech + Industries ---------- */
.tech-ind-grid {
    display: grid; gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 760px) { .tech-ind-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.tech-badges {
    list-style: none; padding: 0; margin: 1rem 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.tech-badges li {
    background: #fff;
    border: 1px solid var(--c-line);
    color: var(--c-primary); font-weight: 600;
    padding: .45rem .9rem; border-radius: 99px;
    font-size: .9rem;
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.tech-badges li:hover { transform: translateY(-2px); border-color: var(--c-accent); }
.industry-list {
    list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem;
}
.industry-list li {
    display: flex; align-items: center; gap: .5rem;
    color: var(--c-text); font-weight: 500;
}
.industry-list svg { color: var(--c-success); flex-shrink: 0; }

/* ---------- Testimonial big quote ---------- */
.service-testimonial { background: linear-gradient(180deg, var(--c-soft), #fff); }
.big-quote {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: var(--c-primary); line-height: 1.5;
    margin: 1rem auto; max-width: 720px;
    border-left: 0;
    padding: 0;
}
.testimonial-meta strong { color: var(--c-primary); display: block; }
.testimonial-meta span   { color: var(--c-muted); font-size: .9rem; }

/* ---------- Inquiry form ---------- */
.service-inquiry { background: var(--c-soft); }
.inquiry-grid {
    display: grid; gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 880px) { .inquiry-grid { grid-template-columns: 1fr 1.1fr; } }
.inquiry-bullets {
    list-style: none; padding: 0; margin: 1.5rem 0;
    display: grid; gap: .6rem;
}
.inquiry-bullets li {
    display: flex; align-items: center; gap: .5rem;
    color: var(--c-text); font-weight: 500;
}
.inquiry-bullets svg { color: var(--c-success); }
.inquiry-form {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.75rem;
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow);
    position: relative;
}
.inquiry-form label {
    display: block;
    font-weight: 600; color: var(--c-primary);
    font-size: .9rem; margin-bottom: .85rem;
}
.inquiry-form input,
.inquiry-form textarea {
    width: 100%; padding: .7rem .9rem;
    border: 1.5px solid var(--c-line); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 1rem; background: #fff; color: var(--c-text);
    margin-top: .3rem;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.inquiry-form input:focus, .inquiry-form textarea:focus {
    outline: none; border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(30,99,216,.15);
}
.inquiry-form textarea { resize: vertical; min-height: 110px; }
.inquiry-form .form-foot { margin-top: .8rem; font-size: .82rem; }

/* ---------- Sticky inquiry CTA ---------- */
.sticky-inquiry-btn {
    position: fixed; bottom: 20px; left: 20px; z-index: 55;
    background: var(--c-accent); color: #fff;
    padding: .65rem 1rem;
    border-radius: 99px;
    box-shadow: 0 12px 30px -8px rgba(30,99,216,.5);
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; font-size: .92rem;
    transition: transform .25s var(--ease), background .2s var(--ease);
}
.sticky-inquiry-btn:hover { background: var(--c-primary); color: #fff; transform: scale(1.05); }
@media (max-width: 600px) {
    .sticky-inquiry-btn { padding: .55rem .8rem; left: 12px; bottom: 76px; font-size: .85rem; }
    .sticky-inquiry-btn span { display: none; }
}

/* ---------- Services index — category groups ---------- */
.services-hero .page-title span { color: var(--c-accent); }
.services-category { margin-bottom: 3.5rem; }
.services-category-head {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-line);
}
.services-category-head .category-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: #fff;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.services-category-head h2 { margin: 0; font-size: 1.4rem; }
.services-category-head p  { margin: .2rem 0 0; font-size: .92rem; }

/* ---------- Rich service cards (with image) ---------- */
.service-card-rich {
    padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.service-card-img {
    aspect-ratio: 16/10;
    overflow: hidden; background: var(--c-soft);
}
.service-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease);
}
.service-card-rich:hover .service-card-img img { transform: scale(1.04); }
.service-card-body { padding: 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.service-card-body .service-icon { width: 38px; height: 38px; margin-bottom: .5rem; }
.service-card-body h3 { font-size: 1.05rem; }
.service-card-body p  { font-size: .92rem; }