/* ================================================================
   services.css — Shared Service Page Styles
   Dashmier Technologies
================================================================ */

/* ── Missing global animations ──────────────────────────────────── */
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse-dot  { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.4);opacity:1} }
@keyframes stkFloat   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── Hero ────────────────────────────────────────────────────────── */
.svc-hero {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: var(--nav-h);
}
.svc-hero__bg      { position:absolute; inset:0; z-index:0; }
.svc-hero__content { position:relative; z-index:2; width:100%; }

.svc-hero__inner {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 48px;
    align-items: center;
    padding: 72px 0;
}

/* ── Hero breadcrumb ─────────────────────────────────────────────── */
.svc-bc { display:flex; align-items:center; gap:7px; font-size:.8rem; margin-bottom:18px; color:rgba(255,255,255,.5); }
.svc-bc a { color:rgba(255,255,255,.5); transition:color var(--t-fast); }
.svc-bc a:hover { color:#fff; }
.svc-bc i { font-size:.6rem; color:rgba(255,255,255,.25); }

/* ── Hero tag ────────────────────────────────────────────────────── */
.hero-tag {
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--font-mono); font-size:.65rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    padding:5px 13px; border-radius:var(--r-full); margin-bottom:20px;
}

/* ── Hero h1 ─────────────────────────────────────────────────────── */
.svc-h1 {
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.035em;
    margin-bottom: 18px;
}
.svc-h1 em { font-style:normal; }

.svc-sub {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 32px;
    font-weight: 400;
    max-width: 460px;
}

.svc-actions {
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap; margin-bottom:36px;
}

.svc-proof { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.svc-proof-item { display:flex; align-items:center; gap:6px; font-size:.82rem; font-weight:500; }
.svc-proof-item i { font-size:.75rem; }

/* ── Sticker badges ──────────────────────────────────────────────── */
.sticker {
    position:absolute; display:flex; align-items:center; gap:7px;
    padding:7px 13px; background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18); border-radius:var(--r-full);
    font-size:.75rem; font-weight:600; color:rgba(255,255,255,.9);
    backdrop-filter:blur(8px); white-space:nowrap; pointer-events:none;
}
.sticker i { font-size:.8rem; }
.sticker--a { animation:stkFloat 5s ease-in-out infinite; }
.sticker--b { animation:stkFloat 5s ease-in-out infinite 1.6s; }
.sticker--c { animation:stkFloat 5s ease-in-out infinite 3.2s; }

/* ── Results strip — dark abstract (was bright blue, changed) ──── */
.results-strip {
    background: var(--text-head);
    padding: 48px 0;
    position: relative;
    overflow: hidden;
}
.results-strip::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.18) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 50%, rgba(124,58,237,.12) 0%, transparent 55%);
    pointer-events:none;
}
.results-strip::after {
    content:''; position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events:none;
}
.res-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    position:relative; z-index:1;
}
.res-item {
    text-align:center; padding:0 24px;
    border-right:1px solid rgba(255,255,255,.1);
}
.res-item:last-child { border-right:none; }
.res-num {
    font-family:var(--font-head); font-size:2.4rem; font-weight:800;
    color:#fff; letter-spacing:-.05em; line-height:1; margin-bottom:6px;
}
.res-lbl { font-size:.84rem; color:rgba(255,255,255,.55); font-weight:500; line-height:1.4; }

/* ── Pain section ────────────────────────────────────────────────── */
.pain-sec { padding:84px 0; background:var(--off-white); }
.pain-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.pain-cards { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.pain-card {
    display:flex; gap:14px; align-items:flex-start;
    background:var(--white); border:1px solid var(--border);
    border-left:3px solid var(--red); border-radius:var(--r-lg);
    padding:16px 18px; transition:box-shadow var(--t-base), transform var(--t-base);
}
.pain-card:hover { box-shadow:var(--shadow-card); transform:translateX(3px); }
.pain-icon {
    width:34px; height:34px; flex-shrink:0; border-radius:var(--r-md);
    background:var(--red-light); color:var(--red);
    display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.pain-card h4 { font-size:.9rem; font-weight:700; color:var(--text-head); margin-bottom:4px; }
.pain-card p  { font-size:.82rem; color:var(--text-muted); line-height:1.65; margin:0; }

/* ── Solution grid ───────────────────────────────────────────────── */
.sol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.sol-card {
    background:var(--white); border:1px solid var(--border);
    border-radius:var(--r-xl); padding:28px 22px; text-align:center;
    position:relative; overflow:hidden;
    transition:box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.sol-card::before {
    content:''; position:absolute; top:0;left:0;right:0; height:3px;
    background:var(--blue); transform:scaleX(0); transition:transform var(--t-base); transform-origin:left;
}
.sol-card:hover::before { transform:scaleX(1); }
.sol-card:hover { box-shadow:var(--shadow-card-h); border-color:var(--blue-mid); transform:translateY(-4px); }
.sol-icon {
    width:52px; height:52px; border-radius:var(--r-xl);
    background:var(--blue-light); color:var(--blue);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; margin:0 auto 16px;
    transition:background var(--t-fast), color var(--t-fast), transform var(--t-base);
}
.sol-card:hover .sol-icon { background:var(--blue); color:#fff; transform:scale(1.1) rotate(-5deg); }
.sol-card h3 { font-family:var(--font-head); font-size:1rem; font-weight:700; color:var(--text-head); margin-bottom:8px; letter-spacing:-.02em; }
.sol-card p  { font-size:.84rem; color:var(--text-muted); line-height:1.7; margin:0; }

/* ── Process — clean numbered vertical list, full width cards ─────── */
.proc-sec {
    padding: 96px 0;
    background: var(--text-head);
    position: relative;
    overflow: hidden;
}
.proc-sec::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.08) 0%, transparent 60%);
    pointer-events: none;
}
.proc-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* Unified proc-row — full-width card with number badge */
.proc-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-xl);
    padding: 28px 28px;
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
    position: relative;
}
.proc-row:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(37,99,235,.35);
    transform: translateY(-3px);
}

/* Number circle sits on the left */
.proc-mid {
    flex-shrink: 0;
}
.proc-mid-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 0 0 5px rgba(37,99,235,.18);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.proc-row:hover .proc-mid-circle {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(37,99,235,.12), 0 0 20px rgba(37,99,235,.3);
}
.proc-mid-line { display: none; } /* not used in new layout */

/* Content sits on the right of the circle */
.proc-left, .proc-right { display: none; } /* not used — content in .proc-card */
.proc-card {
    flex: 1;
}
.proc-card__num  { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.proc-card h3    { font-family:var(--font-head); font-size:1.0625rem; font-weight:700; color:#fff; margin-bottom:8px; letter-spacing:-.02em; }
.proc-card p     { font-size:.875rem; color:#94A3B8; line-height:1.72; margin:0; }

/* ── Tech badges ─────────────────────────────────────────────────── */
.stack-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.stack-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; background:var(--off-white); border:1px solid var(--border);
    border-radius:var(--r-full); font-size:.78rem; font-weight:600; color:var(--text-body);
    transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
    cursor:default;
}
.stack-badge:hover { background:var(--blue-light); border-color:var(--blue-mid); color:var(--blue); transform:translateY(-2px); }
.stack-badge i { font-size:.8rem; color:var(--blue); }

/* ── Testimonial quote ───────────────────────────────────────────── */
.quote-sec { padding:72px 0; background:var(--off-white); }
.quote-inner { max-width:720px; margin:0 auto; text-align:center; }
.quote-mark { font-family:var(--font-head); font-size:4rem; line-height:.5; color:var(--blue); opacity:.22; display:block; margin-bottom:20px; }
.quote-text { font-family:var(--font-head); font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:600; color:var(--text-head); line-height:1.45; letter-spacing:-.025em; margin-bottom:24px; }
.quote-author { display:flex; align-items:center; justify-content:center; gap:12px; }
.quote-av { width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.9rem; font-weight:700; flex-shrink:0; }
.quote-name { font-size:.9rem; font-weight:700; color:var(--text-head); letter-spacing:-.01em; }
.quote-role { font-size:.78rem; color:var(--text-muted); margin-top:2px; }

/* ── FAQ — FIXED: now uses .open not .is-open ────────────────────── */
.faq-sec { padding:92px 0; background:var(--white); }
.faq-layout { display:grid; grid-template-columns:300px 1fr; gap:64px; align-items:start; }
.faq-sticky { position:sticky; top:calc(var(--nav-h) + 24px); }
.faq-list { display:flex; flex-direction:column; gap:7px; }

.faq-item {
    background:var(--off-white); border:1px solid var(--border);
    border-radius:var(--r-lg); overflow:hidden; transition:border-color var(--t-fast);
}
.faq-item.open { border-color:var(--blue-mid); background:var(--white); }

.faq-btn {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:16px 20px; background:none; border:none; text-align:left;
    font-family:var(--font-body); font-size:.9rem; font-weight:600; color:var(--text-head);
    cursor:pointer; transition:color var(--t-fast);
}
.faq-btn:hover { color:var(--blue); }

.faq-chevron {
    width:24px; height:24px; border-radius:50%;
    background:var(--white); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:.65rem; color:var(--text-muted); flex-shrink:0;
    transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.faq-item.open .faq-chevron {
    background:var(--blue); color:#fff; transform:rotate(180deg); border-color:var(--blue);
}

/* FIXED: was not showing when open — max-height transition driven by JS */
.faq-body {
    /* initial state set by JS; CSS only provides the animation */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
/* when JS adds .open, JS also sets maxHeight = scrollHeight px */
.faq-item.open .faq-body {
    /* intentionally empty — max-height is set inline by JS */
    overflow: visible; /* allow content to be fully readable */
}
.faq-body-inner {
    padding: 14px 20px 18px;
    font-size: .875rem;
    color: var(--text-muted);
    line-height: 1.78;
    border-top: 1px solid var(--border);
}

/* ── Related services ────────────────────────────────────────────── */
.related-sec { padding:72px 0; background:var(--off-white); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; }

/* ── CTA section ─────────────────────────────────────────────────── */
.svc-cta-sec { padding:92px 0; text-align:center; position:relative; overflow:hidden; }
.svc-cta-inner { max-width:580px; margin:0 auto; position:relative; z-index:2; }
.svc-cta-sec h2 { font-size:clamp(1.75rem,3vw,2.625rem); font-weight:800; letter-spacing:-.04em; margin-bottom:12px; }
.svc-cta-sub { font-size:1rem; line-height:1.76; margin-bottom:28px; }
.svc-cta-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.svc-cta-trust { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; font-size:.8rem; }
.svc-cta-trust span { display:flex; align-items:center; gap:5px; }

.svc-cta-dark { background:var(--text-head); }
.svc-cta-dark h2 { color:#fff; }
.svc-cta-dark .svc-cta-sub { color:#94A3B8; }
.svc-cta-dark .svc-cta-trust { color:rgba(255,255,255,.55); }

/* ── Site-type cards (web dev) ───────────────────────────────────── */
.site-types { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.site-card {
    background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl);
    padding:28px 22px; text-align:center;
    transition:box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.site-card:hover { box-shadow:var(--shadow-card-h); transform:translateY(-4px); border-color:var(--blue-mid); }
.site-card__icon {
    width:56px; height:56px; border-radius:var(--r-xl);
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; margin:0 auto 16px;
}
.site-card h3 { font-family:var(--font-head); font-size:1rem; font-weight:700; margin-bottom:10px; letter-spacing:-.02em; color:var(--text-head); }
.site-card p  { font-size:.84rem; color:var(--text-muted); line-height:1.68; margin-bottom:18px; }
.site-card__list { list-style:none; padding:0; margin:0; text-align:left; }
.site-card__list li { display:flex; align-items:flex-start; gap:7px; font-size:.82rem; color:var(--text-body); margin-bottom:7px; }
.site-card__list li i { color:var(--blue); font-size:.75rem; margin-top:3px; flex-shrink:0; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width:1024px) {
    .svc-hero__inner { grid-template-columns:1fr; gap:40px; }
    .svc-hero__inner > div:last-child { max-width:520px; margin:0 auto; width:100%; }
    .pain-grid { grid-template-columns:1fr; gap:32px; }
    .sol-grid  { grid-template-columns:repeat(2,1fr); }
    .site-types { grid-template-columns:repeat(2,1fr); }
    .res-grid  { grid-template-columns:repeat(2,1fr); }
    .res-item  { padding:20px; border-right:none; border-bottom:1px solid rgba(255,255,255,.1); }
    .res-item:last-child,.res-item:nth-last-child(2) { border-bottom:none; }
    .faq-layout { grid-template-columns:1fr; gap:40px; }
    .faq-sticky { position:static; }
    .related-grid { grid-template-columns:repeat(2,1fr); }
    /* Process: single column, no zigzag on tablet */
    .proc-row { grid-template-columns:44px 1fr; }
    .proc-mid { padding-top:18px; }
    .proc-row:nth-child(odd)  .proc-left,
    .proc-row:nth-child(even) .proc-left  { display:none; }
    .proc-row:nth-child(even) .proc-left  { order:unset; }
    .proc-row:nth-child(even) .proc-mid   { order:unset; }
    .proc-row:nth-child(even) .proc-right { order:unset; padding:18px 0 18px 18px; }
    .proc-left,.proc-right { padding:12px 0 12px 18px; }
}

@media (max-width:768px) {
    .svc-hero { min-height:auto; }
    .svc-hero__inner { padding:48px 0; }
    .svc-h1 { font-size:clamp(1.75rem,6vw,2.5rem); }
    .sol-grid { grid-template-columns:1fr; }
    .site-types { grid-template-columns:1fr; }
    .related-grid { grid-template-columns:1fr; }
    .res-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:480px) {
    .svc-actions { flex-direction:column; align-items:stretch; }
    .svc-actions .btn { justify-content:center; }
    .svc-proof { flex-direction:column; gap:8px; }
    .res-grid { grid-template-columns:1fr; }
    .res-item { border-bottom:1px solid rgba(255,255,255,.1); }
    .res-item:last-child { border-bottom:none; }
}

/* ══════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE — Service pages all breakpoints
   ══════════════════════════════════════════════════════════════════ */

/* ── General section spacing ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .pain-sec { padding: 64px 0; }
    .faq-sec  { padding: 72px 0; }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .svc-hero__inner { grid-template-columns: 52% 48%; gap: 36px; }
}
@media (max-width: 1024px) {
    .svc-hero { min-height: auto; }
    .svc-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 48px; }
    .svc-hero__inner > div:last-child { max-width: 540px; margin: 0 auto; width: 100%; }
}
@media (max-width: 768px) {
    .svc-hero__inner { padding: 44px 0 40px; }
    .svc-h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .svc-sub { font-size: 0.9375rem; }
    .svc-actions { flex-wrap: wrap; gap: 10px; }
    .svc-proof { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
    .svc-h1 { font-size: clamp(1.625rem, 7vw, 2.125rem); letter-spacing: -0.025em; }
    .svc-actions { flex-direction: column; align-items: stretch; }
    .svc-actions .btn { justify-content: center; }
}

/* ── Pain section ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pain-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Solutions grid ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sol-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .sol-grid { grid-template-columns: 1fr; }
}

/* ── Site types (web dev) ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .site-types { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .site-types { grid-template-columns: 1fr; }
}

/* ── Results strip ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .res-grid { grid-template-columns: repeat(2, 1fr); }
    .res-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 20px; }
    .res-item:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.1); }
    .res-item:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 480px) {
    .res-grid { grid-template-columns: 1fr 1fr; }
    .res-num { font-size: 1.875rem; }
}

/* ── Process zigzag ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .proc-steps { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 540px) {
    .proc-sec { padding: 64px 0; }
    .proc-row { padding: 20px 18px; gap: 14px; }
    .proc-card { padding: 0; }
    .proc-card h3 { font-size: .9375rem; }
    .proc-mid-circle { width: 40px; height: 40px; font-size: .875rem; }
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .faq-layout { grid-template-columns: 1fr; gap: 36px; }
    .faq-sticky { position: static; }
}
@media (max-width: 540px) {
    .faq-btn { font-size: .875rem; padding: 14px 16px; }
    .faq-body-inner { font-size: .84rem; }
}

/* ── Related grid ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .related-grid { grid-template-columns: 1fr; }
}

/* ── CTA section ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .svc-cta-sec { padding: 64px 0; }
    .svc-cta-actions { flex-direction: column; align-items: stretch; }
    .svc-cta-actions .btn { justify-content: center; }
    .svc-cta-trust { flex-direction: column; align-items: center; gap: 8px; }
}

/* ── Stack/tech badges ────────────────────────────────────────────── */
@media (max-width: 540px) {
    .stack-wrap { gap: 6px; }
    .stack-badge { font-size: .72rem; padding: 5px 10px; }
}

/* ── Quote section ────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .quote-sec { padding: 56px 0; }
    .quote-text { font-size: 1.125rem; }
}

/* ── Phone frame (mobile apps) ────────────────────────────────────── */
@media (max-width: 480px) {
    .phone-frame { width: 175px; height: 360px; }
}