/*
 * services-pricing.css – Claymatics.net
 * Services & Pricing page styles
 * Brand: Deep Navy #0B1F3B · Electric Blue #1E6BFF · Teal #18C29C
 */

/* ── Variables ── */
:root {
    --sp-blue:   #1E6BFF;
    --sp-teal:   #18C29C;
    --sp-navy:   #0B1F3B;
    --sp-glass:  rgba(255,255,255,.05);
    --sp-border: rgba(255,255,255,.09);
    --sp-radius: 20px;
}

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.sp-hero-section {
    background: linear-gradient(135deg,#0B1F3B 0%,#0d2347 55%,#071428 100%);
    padding: clamp(100px,14vw,160px) 0 clamp(60px,8vw,96px);
    position: relative; overflow: hidden;
}
.sp-hero-section::before {
    content:''; position:absolute; inset:0;
    background-image: radial-gradient(circle,rgba(30,107,255,.04) 1px,transparent 1px);
    background-size: 28px 28px; pointer-events:none;
}
.sp-hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(60px); }
.sp-hero-orb--1 { width:500px;height:500px;background:radial-gradient(circle,rgba(30,107,255,.18),transparent 70%);top:-150px;right:-100px; }
.sp-hero-orb--2 { width:300px;height:300px;background:radial-gradient(circle,rgba(24,194,156,.14),transparent 70%);bottom:-60px;left:-60px; }
.sp-hero-inner { max-width: 680px; margin: 0 auto; }
.sp-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(30,107,255,.12); border:1px solid rgba(30,107,255,.28);
    padding:5px 16px; border-radius:999px; font-size:.7rem; font-weight:700;
    color:#7eb3ff; letter-spacing:.18em; text-transform:uppercase;
    font-family:'JetBrains Mono',monospace; margin-bottom:20px;
}
.sp-eyebrow__dot {
    width:7px;height:7px;border-radius:50%;background:#1E6BFF;
    box-shadow:0 0 8px #1E6BFF; animation:spDotPulse 2s ease-in-out infinite;
}
@keyframes spDotPulse{0%,100%{opacity:1}50%{opacity:.4}}
.sp-hero-title {
    font-family:'Syne',sans-serif; font-size:clamp(2.2rem,5vw,3.8rem);
    font-weight:800; line-height:1.1; letter-spacing:-.03em; color:#fff; margin-bottom:16px;
}
.sp-hero-grad {
    background:linear-gradient(90deg,#1E6BFF,#18C29C);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sp-hero-sub { color:rgba(255,255,255,.6); font-size:1.05rem; line-height:1.75; margin-bottom:10px; }
.sp-hero-note {
    display:inline-block; background:rgba(24,194,156,.1); border:1px solid rgba(24,194,156,.25);
    border-radius:999px; padding:6px 16px; font-size:.8rem; color:#34d399;
    margin-bottom:32px; font-family:'DM Sans',sans-serif;
}
.sp-hero-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ════════════════════════════════
   SECTION SHARED
════════════════════════════════ */
.sp-section { padding: clamp(60px,8vw,96px) 0; background: var(--sp-navy); }
.sp-hosting-section,.sp-hourly-section,.sp-faq-section { background: #0d1829; }
.sp-section-head { margin-bottom: 52px; }
.sp-label {
    font-family:'JetBrains Mono',monospace; font-size:.68rem; font-weight:700;
    letter-spacing:.22em; text-transform:uppercase; color:#1E6BFF; display:block; margin-bottom:10px;
}
.sp-h2 {
    font-family:'Syne',sans-serif; font-size:clamp(1.7rem,3vw,2.6rem);
    font-weight:800; line-height:1.15; letter-spacing:-.02em; color:#fff; margin-bottom:12px;
}
.sp-sub { color:rgba(255,255,255,.5); font-size:.97rem; line-height:1.72; max-width:580px; margin:0 auto; }

/* ════════════════════════════════
   PACKAGES
════════════════════════════════ */
.sp-pkg-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
    align-items: start;
}
.sp-pkg-card {
    background: var(--sp-glass); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius); padding: 32px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    position: relative; overflow: hidden;
    transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease, border-color .32s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.sp-pkg-card::before {
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(30,107,255,.4),transparent);
    opacity:0; transition:opacity .32s;
}
.sp-pkg-card:hover {
    transform: translateY(-7px);
    border-color: rgba(30,107,255,.4);
    box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(30,107,255,.18), 0 0 28px rgba(30,107,255,.1);
}
.sp-pkg-card:hover::before { opacity:1; }
/* Pro card */
.sp-pkg-card--pro {
    background: linear-gradient(135deg,rgba(30,107,255,.12),rgba(24,194,156,.08));
    border-color: rgba(30,107,255,.35);
    box-shadow: 0 0 0 1px rgba(30,107,255,.25), 0 8px 32px rgba(30,107,255,.12);
}
.sp-pkg-card--pro:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 2px rgba(30,107,255,.45), 0 0 40px rgba(30,107,255,.18);
}
.sp-pkg-badge {
    position:absolute; top:-1px; right:24px;
    background:linear-gradient(135deg,#1E6BFF,#18C29C); color:#fff;
    padding:4px 16px; border-radius:0 0 14px 14px;
    font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.sp-pkg-icon { font-size:1.8rem; margin-bottom:12px; }
.sp-pkg-name { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:800; color:#fff; margin-bottom:6px; }
.sp-pkg-best { font-size:.78rem; color:#18C29C; margin-bottom:0; }
.sp-pkg-price { margin: 20px 0; }
.sp-price-num {
    font-family:'Syne',sans-serif; font-size:2.4rem; font-weight:900;
    color:#1E6BFF; line-height:1; display:block;
}
.sp-price-type { font-size:.75rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.08em; }
.sp-feat-list {
    list-style:none; padding:0; margin:0 0 24px;
    display:flex; flex-direction:column; gap:9px;
    border-top:1px solid rgba(255,255,255,.06); padding-top:20px;
}
.sp-feat-list li { font-size:.84rem; color:rgba(255,255,255,.65); display:flex; align-items:flex-start; gap:9px; }
.sp-feat-check {
    width:18px; height:18px; border-radius:50%;
    background:rgba(30,107,255,.15); color:#1E6BFF;
    font-size:.62rem; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}

/* ════════════════════════════════
   HOSTING TABLE
════════════════════════════════ */
.sp-table-wrap {
    background: var(--sp-glass); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius); overflow: hidden;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sp-table { width:100%; border-collapse:collapse; }
.sp-table thead tr {
    background: rgba(30,107,255,.12);
    border-bottom: 1px solid rgba(30,107,255,.2);
}
.sp-table th {
    padding: 14px 20px; text-align:left;
    font-family:'JetBrains Mono',monospace; font-size:.7rem;
    font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#7eb3ff;
}
.sp-table td {
    padding: 14px 20px; font-size:.88rem; color:rgba(255,255,255,.65);
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .22s;
}
.sp-table tbody tr:last-child td { border-bottom:none; }
.sp-table tbody tr:hover td {
    background: rgba(30,107,255,.06);
    color: #fff;
}
.sp-table-name { font-weight:600; color:#fff !important; }
.sp-table-usd { font-weight:700; color:#1E6BFF !important; }
.sp-table-badge {
    display:inline-block; background:rgba(24,194,156,.1); border:1px solid rgba(24,194,156,.2);
    color:#34d399; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700;
    white-space:nowrap;
}
.sp-table-note { font-size:.78rem; color:rgba(255,255,255,.3); }

/* ════════════════════════════════
   MAINTENANCE
════════════════════════════════ */
.sp-maint-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.sp-maint-card {
    background: var(--sp-glass); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius); padding: 28px;
    backdrop-filter: blur(10px); position:relative; overflow:hidden;
    transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.sp-maint-card:hover { transform:translateY(-6px); box-shadow:0 18px 48px rgba(0,0,0,.3); }
.sp-maint-badge {
    position:absolute; top:16px; right:16px;
    background:rgba(24,194,156,.15); border:1px solid rgba(24,194,156,.3);
    color:#34d399; padding:3px 10px; border-radius:999px;
    font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.sp-maint-icon {
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px;
}
.sp-maint-name { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:14px; }
.sp-maint-prices { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.sp-maint-price { font-size:.83rem; display:flex; align-items:center; gap:7px; }
.sp-maint-market { font-size:.75rem; color:rgba(255,255,255,.35); flex-shrink:0; }
.sp-maint-feats { list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:8px; }
.sp-maint-feats li { font-size:.82rem; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:9px; }
.sp-maint-check {
    width:18px; height:18px; border-radius:50%;
    font-size:.62rem; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ════════════════════════════════
   HOURLY RATES
════════════════════════════════ */
.sp-hourly-card {
    background: var(--sp-glass); border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius); padding: 28px;
    backdrop-filter: blur(10px); height:100%;
}
.sp-hourly-header {
    display:flex; align-items:center; gap:12px; margin-bottom:20px;
    padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.07);
}
.sp-hourly-flag { font-size:1.5rem; }
.sp-hourly-header h3 { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:#fff; margin:0; }
.sp-hourly-table { width:100%; border-collapse:collapse; }
.sp-hourly-table tr { border-bottom:1px solid rgba(255,255,255,.05); }
.sp-hourly-table tr:last-child { border-bottom:none; }
.sp-hourly-table td { padding:12px 0; font-size:.85rem; color:rgba(255,255,255,.6); }
.sp-hourly-price { text-align:right; font-weight:700; color:#1E6BFF !important; white-space:nowrap; }
.sp-hourly-unit { font-size:.7rem; color:rgba(255,255,255,.3); font-weight:400; }

/* ════════════════════════════════
   FAQ ACCORDION
════════════════════════════════ */
.sp-faq-wrap { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.sp-faq-item {
    background: var(--sp-glass); border: 1px solid var(--sp-border);
    border-radius: 14px; overflow:hidden;
    backdrop-filter: blur(10px);
    transition: border-color .25s;
}
.sp-faq-item.is-open { border-color: rgba(30,107,255,.35); }
.sp-faq-q {
    width:100%; background:none; border:none; cursor:pointer;
    padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
    color:#fff; font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:600;
    text-align:left; transition:background .22s;
}
.sp-faq-q:hover { background:rgba(255,255,255,.04); }
.sp-faq-icon {
    font-size:1.3rem; font-weight:300; color:#1E6BFF; flex-shrink:0;
    transition:transform .3s ease; line-height:1;
}
.sp-faq-item.is-open .sp-faq-icon { transform:rotate(45deg); }
.sp-faq-a {
    max-height:0; overflow:hidden;
    transition:max-height .38s cubic-bezier(.4,0,.2,1), padding .38s ease;
}
.sp-faq-item.is-open .sp-faq-a { max-height:400px; }
.sp-faq-a p {
    padding:0 22px 18px; margin:0;
    color:rgba(255,255,255,.55); font-size:.88rem; line-height:1.75;
}

/* ════════════════════════════════
   CTA BANNER
════════════════════════════════ */
.sp-cta-section {
    background: linear-gradient(135deg,#0B1F3B 0%,rgba(30,107,255,.15) 50%,#0B1F3B 100%);
    padding: clamp(60px,8vw,96px) 0;
    position:relative; overflow:hidden; text-align:center;
}
.sp-cta-orb { position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
.sp-cta-orb--1 { width:500px;height:500px;background:radial-gradient(circle,rgba(30,107,255,.2),transparent 70%);top:-200px;right:-100px; }
.sp-cta-orb--2 { width:300px;height:300px;background:radial-gradient(circle,rgba(24,194,156,.15),transparent 70%);bottom:-100px;left:-60px; }
.sp-cta-inner { max-width:560px; margin:0 auto; position:relative; z-index:2; }
.sp-cta-title { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; color:#fff; margin-bottom:14px; }
.sp-cta-sub { color:rgba(255,255,255,.55); font-size:.97rem; line-height:1.75; margin-bottom:32px; }
.sp-cta-btn { padding:14px 40px; font-size:1rem; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width:991px) {
    .sp-pkg-grid { grid-template-columns:1fr 1fr; }
    .sp-maint-grid { grid-template-columns:1fr; max-width:520px; margin:0 auto; }
}
@media (max-width:767px) {
    .sp-pkg-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
    .sp-hero-actions { flex-direction:column; align-items:center; }
    .sp-hero-actions a { width:100%; max-width:320px; justify-content:center; }
    .sp-table th,.sp-table td { padding:10px 12px; font-size:.8rem; }
    .sp-hourly-table td { font-size:.8rem; }
}
@media (max-width:575px) {
    .sp-pkg-card,.sp-maint-card,.sp-hourly-card { padding:22px 18px; }
    .sp-table-wrap { border-radius:14px; }
    /* Horizontal scroll on tiny screens */
    .sp-table-wrap { overflow-x:auto; }
    .sp-table { min-width:580px; }
}