/* ═══════════════════════════════════════════════
   sss-cards.css — shared 3D ring service cards
   Used by: SEO page, SEM page (and any future service page)
   ═══════════════════════════════════════════════ */

.sss-section {
    width: 100%; padding: 60px 6vw 72px;
    background:
        radial-gradient(ellipse 60% 70% at 100% 0%, rgba(59,130,246,0.2), transparent 55%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(248,95,39,0.12), transparent 55%),
        #080837;
    position: relative; overflow: hidden;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.sss-section::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* ── heading ── */
.sss-head { text-align: center; padding: 0 0 24px; position: relative; z-index: 1; }
.sss-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff;
    letter-spacing: -0.02em; line-height: 1.12; margin: 0;
}
.sss-title span {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── grid ── */
.sss-grid {
    --sss-grad:  linear-gradient(150deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
    --sss-glass: rgba(255,255,255,0.85);
    --sss-orbit: rgba(191,219,254,0.68);
    --sss-title: #0b1f4d;
    --sss-body:  rgba(11,31,77,0.76);
    --sss-cta-c: #1d4ed8;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 360px));
    justify-content: center;
    gap: 22px;
    position: relative; z-index: 1;
}

/* ── 3D parent ── */
.sss-parent {
    perspective: 900px; perspective-origin: 50% 50%;
    filter: drop-shadow(0 18px 32px rgba(2,10,30,0.45));
    height: 210px;
}

/* ── card ── */
.sss-card {
    position: relative; height: 100%; border-radius: 32px;
    background: var(--sss-grad);
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease;
    box-shadow: rgba(8,20,60,0.3) 0 20px 20px -5px;
    overflow: hidden;
}
.sss-parent:hover .sss-card {
    transform: rotate3d(1,1,0,22deg);
    box-shadow: rgba(8,20,60,0.45) 24px 40px 24px -32px, rgba(59,130,246,0.18) 0 0 48px -8px;
}

/* ── glass shine ── */
.sss-glass {
    transform-style: preserve-3d; position: absolute; inset: 6px;
    border-radius: 36px; border-top-right-radius: 100%;
    background: linear-gradient(0deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.82) 100%);
    transform: translate3d(0,0,20px);
    border-inline-start: 1px solid var(--sss-glass);
    border-bottom: 1px solid rgba(255,255,255,0.68);
    transition: all 0.5s ease; pointer-events: none;
}

/* ── orbit rings ── */
.sss-rings {
    position: absolute; inset-inline-end: 0; top: 0;
    transform-style: preserve-3d; pointer-events: none; z-index: 2;
}
.sss-ring {
    display: block; position: absolute; aspect-ratio: 1; border-radius: 50%;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: all 0.5s ease;
}
.sss-ring.r-halo {
    width: 100px; top: 6px; inset-inline-end: 6px;
    background: var(--sss-orbit);
    box-shadow: rgba(30,40,80,0.22) -8px 8px 18px 0;
    transform: translate3d(0,0,16px);
}
.sss-ring.r-icon {
    width: 52px; top: 30px; inset-inline-end: 30px;
    background: rgba(29,78,216,0.85);
    display: grid; place-content: center;
    transform: translate3d(0,0,40px);
    box-shadow: rgba(8,20,60,0.35) -5px 8px 16px 0;
    transition-delay: 0.08s;
}
.sss-ring.r-icon i { font-size: 18px; color: #fff; }
.sss-parent:hover .sss-ring.r-halo { transform: translate3d(0,0,30px); }
.sss-parent:hover .sss-ring.r-icon  { transform: translate3d(0,0,60px); }

/* ── content ── */
.sss-content {
    padding: 60px 1.8rem 0 1.4rem;
    transform: translate3d(0,0,20px); position: relative; z-index: 3;
}
.sss-card h3 { color: var(--sss-title); font-weight: 900; font-size: 1rem; letter-spacing: -0.02em; margin: 0; }
.sss-card p  { margin-top: 0.5rem; color: var(--sss-body); font-size: 0.82rem; line-height: 1.5; font-weight: 600; }

.sss-bottom {
    position: absolute; bottom: 12px; left: 14px; right: 14px;
    display: flex; justify-content: flex-end;
    transform: translate3d(0,0,20px); z-index: 4;
}
.sss-link {
    color: var(--sss-cta-c); font-weight: 800; font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
    display: flex; align-items: center; gap: 4px; transition: gap .2s ease;
}
.sss-link:hover { gap: 8px; }
.sss-link i { font-size: 9px; }

/* ── CTA row ── */
.sss-cta-row { text-align: center; margin-top: 36px; position: relative; z-index: 1; }
.sss-cta { font-size: 0.95rem; padding: 13px 28px; }

/* ── responsive ── */
@media (max-width: 860px) { .sss-grid { grid-template-columns: repeat(2, minmax(0, 340px)); } }
@media (max-width: 540px)  { .sss-grid { grid-template-columns: minmax(0, 340px); } .sss-parent { height: 200px; } }