/* ============================================================
   ELEPHANT - Deep Service Page shared styles
   Used by all /services/*.html landing pages
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(ellipse at top right, rgba(255, 188, 31, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at bottom left, rgba(100, 112, 241, 0.05) 0%, transparent 45%),
        #f0f4ff;
}

/* Reading width for article content */
.article-body {
    line-height: 1.85;
    font-size: 1.075rem;
    color: #2d2a5e;
}
.article-body h2 {
    font-size: 1.85rem;
    font-weight: 900;
    color: #1e1b4b;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    scroll-margin-top: 90px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.article-body h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #3735a3;
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
}
.article-body p { margin-bottom: 1.15rem; }
.article-body ul, .article-body ol {
    margin: 0 0 1.4rem 0;
    padding-right: 1.5rem;
}
.article-body li { margin-bottom: 0.6rem; }
.article-body strong { color: #1e1b4b; font-weight: 800; }
.article-body a { color: #4f4ee5; font-weight: 700; text-decoration: underline; }
.article-body a:hover { color: #3735a3; }

/* Highlight / callout boxes */
.callout {
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    border: 2px solid;
}
.callout-gold { background: linear-gradient(135deg,#fff8e6,#fff); border-color: #ffd24c; }
.callout-blue { background: linear-gradient(135deg,#f0f4ff,#fff); border-color: #c7d6fe; }
.callout-green { background: linear-gradient(135deg,#ecfdf5,#fff); border-color: #6ee7b7; }
.callout-red { background: linear-gradient(135deg,#fef2f2,#fff); border-color: #fca5a5; }
.callout-title { font-weight: 900; color: #1e1b4b; margin-bottom: .5rem; display:flex; align-items:center; gap:.5rem; font-size:1.1rem; }

/* Example / case-study card */
.case-card {
    background: #fff;
    border: 2px solid #e0eaff;
    border-radius: 1.25rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all .2s;
}
.case-card:hover { border-color: #a4b8fc; box-shadow: 0 10px 30px -12px rgba(100,112,241,.3); }
.case-saving { font-size: 1.6rem; font-weight: 900; color: #059669; }

/* Comparison table */
.cmp-table { width:100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 1rem; }
.cmp-table th { background:#1e1b4b; color:#fff; padding:.85rem 1rem; font-weight:800; text-align:right; }
.cmp-table th:first-child { border-top-right-radius:.75rem; }
.cmp-table th:last-child { border-top-left-radius:.75rem; }
.cmp-table td { padding:.85rem 1rem; border-bottom:1px solid #e0eaff; }
.cmp-table tr:nth-child(even) td { background:#f8faff; }
.cmp-table tr:last-child td:first-child { border-bottom-right-radius:.75rem; }
.cmp-table tr:last-child td:last-child { border-bottom-left-radius:.75rem; }

/* FAQ accordion */
.faq-q {
    width:100%; text-align:right; padding:1.1rem 1.25rem;
    font-weight:800; color:#1e1b4b; font-size:1.05rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    cursor:pointer; transition:background .15s;
}
.faq-q:hover { background:#f0f4ff; }
.faq-a { padding:0 1.25rem 1.1rem; color:#423fcb; line-height:1.7; display:none; }
.faq-item.open .faq-a { display:block; }
.faq-item.open .faq-plus { transform:rotate(45deg); }
.faq-plus { transition:transform .2s; flex-shrink:0; width:28px; height:28px; border-radius:50%; background:#e0eaff; color:#4f4ee5; display:flex; align-items:center; justify-content:center; font-weight:900; }

/* Sticky table of contents (desktop) */
.toc-sticky { position: sticky; top: 90px; }
.toc-link { display:block; padding:.45rem .75rem; border-radius:.5rem; color:#6470f1; font-weight:600; font-size:.95rem; transition:all .15s; border-right:3px solid transparent; }
.toc-link:hover, .toc-link.active { background:#f0f4ff; color:#1e1b4b; border-right-color:#ffbc1f; }

/* Inline CTA banner */
.cta-banner {
    background: linear-gradient(135deg,#1e1b4b,#3735a3);
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
    color: #fff;
    margin: 2.5rem 0;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content:''; position:absolute; top:-40px; left:-40px;
    width:180px; height:180px; background:rgba(255,188,31,.2); border-radius:50%; filter:blur(40px);
}

/* Number input - no spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }

.calc-input {
    width:100%; padding:.85rem 1rem; font-size:1.1rem; font-weight:700;
    border:2px solid #c7d6fe; border-radius:.75rem; background:#fff; color:#1e1b4b;
    direction:rtl; text-align:right; transition:all .2s;
}
.calc-input:focus { outline:none; border-color:#ffbc1f; box-shadow:0 0 0 4px rgba(255,188,31,.15); }

@media (max-width:768px){
    .article-body { font-size:1.02rem; }
    .article-body h2 { font-size:1.5rem; }
    .cmp-table { font-size:.9rem; }
    .cmp-table th, .cmp-table td { padding:.6rem .5rem; }
}