/* services/service-pro-v3.css — Meta Verification / YouTube Premium / ChatGPT / Premium VPN pages.
   Premium 3D look made only from gradient faces, 1px rings and top highlights.
   No shadows, no glows, no underside layers. Loaded after service-pages.css. */

body { --ac: #3b82f6; --ac2: #8ec1ff; --ac-ink: #fff; }
body.svc-meta { --ac: #1877f2; --ac2: #7db4ff; }
body.svc-youtube { --ac: #ff3d3d; --ac2: #ff9a9a; }
body.svc-chatgpt { --ac: #10a37f; --ac2: #62e3c1; }
body.svc-vpn { --ac: #8b5cf6; --ac2: #c7b0ff; }

:root {
  --sp-bg: #070b17;
  --sp-panel: #101729;
  --sp-card-a: #1c2542;
  --sp-card-b: #141b32;
  --sp-ring: rgba(255, 255, 255, .08);
  --sp-gold-a: #ffe58f; --sp-gold-b: #f7bd16; --sp-gold-c: #dd9a08;
  --sp-green-a: #46e39a; --sp-green-b: #1ec77d; --sp-green-c: #12a063;
  --sp-display: "Sora", "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}

html, body { background: var(--sp-bg) !important; }
body { background-image: none !important; font-family: Inter, system-ui, sans-serif; }

/* splash loader without glow */
#bootShell { background: var(--sp-bg) !important; }
.ls-orb::after { display: none !important; }

/* ── navbar ── */
.sp-navbar {
  background: var(--sp-panel) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: inset 0 0 0 1px var(--sp-ring) !important;
}
.sp-back-btn {
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #2f3a5e 0%, #222b49 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  font-family: var(--sp-display) !important;
}
.sp-back-btn:hover { background: linear-gradient(180deg, #3a4672 0%, #2a3558 100%) !important; transform: translateX(-2px); }
.sp-brand-text { font-family: var(--sp-display) !important; color: #3ee59b !important; }
.sp-nav-cta, .sp-wa-btn {
  border: 0 !important;
  background: linear-gradient(180deg, var(--sp-green-a) 0%, var(--sp-green-b) 52%, var(--sp-green-c) 100%) !important;
  color: #04301d !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6) !important;
  font-family: var(--sp-display) !important;
}
.sp-nav-cta:hover, .sp-wa-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6) !important; }

/* ── hero ── */
.sp-hero {
  border: 0 !important;
  border-radius: 28px !important;
  background: linear-gradient(160deg, var(--sp-card-a) 0%, var(--sp-panel) 100%) !important;
  box-shadow: inset 0 0 0 1px var(--sp-ring), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
.sp-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  pointer-events: none;
}
.sp-logo-3d {
  border: 0 !important;
  border-radius: 32px !important;
  background: linear-gradient(180deg, #ffffff 0%, #e9eef8 100%) !important;
  box-shadow: 0 0 0 4px var(--ac), inset 0 1px 0 #fff !important;
}
.sp-logo-3d::before { display: none !important; }
.sp-eyebrow {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sp-bg);
  color: var(--ac2) !important;
  font-family: var(--sp-display) !important;
  box-shadow: inset 0 0 0 1px var(--sp-ring);
}
.sp-hero h1 {
  font-family: var(--sp-display) !important;
  background: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  letter-spacing: -.5px !important;
}
.sp-hero p { color: #a9b5d0 !important; }
.sp-badge {
  border: 0 !important;
  border-radius: 999px !important;
  background: #1c2542 !important;
  color: #d4dcf0 !important;
  box-shadow: inset 0 0 0 1px var(--sp-ring), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  font-family: var(--sp-display) !important;
  font-size: 11.5px !important;
}
.sp-badge.gold { background: linear-gradient(180deg, var(--sp-gold-a), var(--sp-gold-b) 55%, var(--sp-gold-c)) !important; color: #2a1a00 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important; font-size: 12px !important; }
.sp-badge.green { background: #12392d !important; color: #5eeaa8 !important; box-shadow: inset 0 0 0 1px rgba(94, 234, 168, .3) !important; }
.sp-badge.red { background: #3a1820 !important; color: #ff8c9a !important; box-shadow: inset 0 0 0 1px rgba(255, 140, 154, .3) !important; }

/* ── buttons ── */
.sp-btn-primary {
  border: 0 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, var(--sp-gold-a) 0%, var(--sp-gold-b) 55%, var(--sp-gold-c) 100%) !important;
  color: #2a1a00 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
  font-family: var(--sp-display) !important;
}
.sp-btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important; }
.sp-btn-secondary {
  border: 0 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #2f3a5e 0%, #222b49 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  font-family: var(--sp-display) !important;
}
.sp-btn-secondary:hover { background: linear-gradient(180deg, #3a4672 0%, #2a3558 100%) !important; }

/* ── sections ── */
.sp-section {
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--sp-panel) !important;
  box-shadow: inset 0 0 0 1px var(--sp-ring) !important;
}
.sp-section-head { border-bottom: 0 !important; padding-bottom: 4px !important; align-items: center !important; }
.sp-section-head h2 {
  position: relative;
  padding-left: 16px;
  font-family: var(--sp-display) !important;
  letter-spacing: -.2px !important;
}
.sp-section-head h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 1.05em;
  transform: translateY(-50%);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--ac2), var(--ac));
}
.sp-section-head span {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--sp-bg);
  color: var(--ac2) !important;
  font-family: var(--sp-display) !important;
  box-shadow: inset 0 0 0 1px var(--sp-ring);
  white-space: nowrap;
}

/* ── cards ── */
.sp-benefit-card, .sp-price-card, .sp-step-card {
  border: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(170deg, var(--sp-card-a) 0%, var(--sp-card-b) 100%) !important;
  box-shadow: inset 0 0 0 1px var(--sp-ring), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}
.sp-benefit-card:hover, .sp-price-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--ac), inset 0 1px 0 rgba(255, 255, 255, .12) !important; }
.sp-price-card.featured { box-shadow: inset 0 0 0 2px var(--sp-gold-b), inset 0 1px 0 rgba(255, 255, 255, .12) !important; }
.sp-benefit-icon {
  width: 54px !important; height: 54px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(180deg, var(--ac2) 0%, var(--ac) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 2px rgba(255, 255, 255, .12) !important;
  font-size: 25px !important;
}
.sp-benefit-card h3, .sp-step-card h3, .sp-price-plan-name { font-family: var(--sp-display) !important; letter-spacing: -.1px; }
.sp-benefit-card p, .sp-step-card p { color: #a9b5d0 !important; }
.sp-step-num {
  width: 42px !important; height: 42px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, var(--sp-gold-a), var(--sp-gold-b) 55%, var(--sp-gold-c)) !important;
  color: #2a1a00 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
  font-family: var(--sp-display) !important;
}
.sp-price-card-ribbon { background: linear-gradient(180deg, var(--sp-gold-a), var(--sp-gold-b) 55%, var(--sp-gold-c)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75); border-radius: 999px !important; }
.sp-price-amount { font-family: var(--sp-display) !important; color: #ffd466 !important; }

/* ── FAQ ── */
.sp-faq-grid details {
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(170deg, var(--sp-card-a) 0%, var(--sp-card-b) 100%) !important;
  box-shadow: inset 0 0 0 1px var(--sp-ring), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
.sp-faq-grid details[open] { box-shadow: inset 0 0 0 2px var(--ac), inset 0 1px 0 rgba(255, 255, 255, .1) !important; background: linear-gradient(170deg, var(--sp-card-a) 0%, var(--sp-card-b) 100%) !important; }
.sp-faq-grid summary { font-family: var(--sp-display) !important; font-size: 14.5px !important; }
.sp-faq-grid summary::after {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ac2), var(--ac));
  color: #fff !important;
  font-size: 18px !important; font-weight: 700 !important;
  line-height: 1;
}

/* ── bottom CTA ── */
.sp-cta-card {
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(160deg, #173a33 0%, #101e2a 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(94, 234, 168, .3), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
.sp-cta-copy h3 { font-family: var(--sp-display) !important; }