.service-page { padding-top: 74px; background: #0c0d11; }
.service-page-hero { position: relative; min-height: 305px; padding: 78px 24px 60px; background: #11131a url("assets/reference/feature-3.png") center / cover no-repeat; overflow: hidden; }
.service-page-hero::before { position: absolute; content: ""; inset: 0; background: linear-gradient(90deg, rgba(8,9,12,.94), rgba(8,9,12,.33) 76%), linear-gradient(0deg, rgba(8,9,12,.82), transparent); pointer-events: none; }
.service-page-hero .section-wrap { position: relative; z-index: 1; }
.service-page-kicker, .service-section-kicker { margin: 0 0 12px; color: var(--orange); font-size: 11px; letter-spacing: .24em; }
.service-page-hero h1 { margin: 0; font-size: clamp(42px, 6vw, 72px); font-weight: 500; letter-spacing: .08em; }
.service-page-hero > .section-wrap > p:nth-of-type(2) { margin: 15px 0 0; color: #a5a6ad; font-size: 14px; }
.service-breadcrumb { display: flex; align-items: center; gap: 12px; margin-top: 32px; color: #85868d; font-size: 12px; }
.service-breadcrumb a:hover { color: #fff; }
.service-breadcrumb span { color: var(--red); font-size: 18px; }
.service-breadcrumb strong { color: #e4e1da; font-weight: 400; }
.service-page-main { padding: 58px 24px 110px; background: #101116 url("assets/reference/feature-2.png") center / cover fixed; }
.service-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.service-overview-card { position: relative; min-height: 260px; padding: 28px 28px 24px; overflow: hidden; background: rgba(18,20,27,.9); border: 1px solid rgba(255,255,255,.11); }
.service-overview-card::after { position: absolute; content: ""; width: 200px; height: 200px; right: -100px; bottom: -115px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.service-overview-account { background: linear-gradient(135deg, rgba(119,20,24,.8), rgba(19,20,27,.95) 72%); }
.service-overview-gift { background: linear-gradient(135deg, rgba(91,52,18,.7), rgba(19,20,27,.95) 72%); }
.service-overview-number { display: block; color: rgba(255,255,255,.3); font-family: Georgia, serif; font-size: 20px; }
.service-overview-card small { display: block; margin-top: 17px; color: var(--orange); font-size: 10px; letter-spacing: .2em; }
.service-overview-card h2 { margin: 9px 0 10px; font-size: 26px; font-weight: 500; }
.service-overview-card p { max-width: 280px; margin: 0; color: #999aa1; font-size: 12px; line-height: 1.8; }
.service-overview-card a { position: absolute; z-index: 1; left: 28px; bottom: 23px; color: #ddd; font-size: 12px; }
.service-overview-card a b { margin-left: 12px; color: var(--red); font-size: 17px; font-weight: 400; }
.service-overview-card a:hover { color: #fff; }
.service-status-banner { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 16px 20px; background: rgba(9,10,14,.74); border: 1px solid rgba(255,255,255,.11); }
.service-status-banner .status-dot { flex: 0 0 auto; }
.service-status-banner strong { color: #eeeae2; font-size: 13px; font-weight: 500; }
.service-status-banner p { margin: 4px 0 0; color: #94959d; font-size: 12px; line-height: 1.6; }
.service-status-banner em { margin-left: auto; color: #7f8189; font-size: 10px; font-style: normal; letter-spacing: .16em; }
.service-guide-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 15px; margin-top: 48px; }
.service-guide-card, .service-faq-card { padding: 32px 35px; background: rgba(14,15,21,.86); border: 1px solid rgba(255,255,255,.1); }
.service-guide-card h2, .service-faq-card h2 { margin: 0 0 24px; font-size: 28px; font-weight: 500; }
.service-steps { display: grid; gap: 0; }
.service-steps > div { display: grid; grid-template-columns: 48px 1fr; gap: 15px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.1); }
.service-steps > div:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.service-steps > div > span { color: var(--orange); font-family: Georgia, serif; font-size: 17px; }
.service-steps h3 { margin: 0 0 6px; color: #e3e0d9; font-size: 15px; font-weight: 500; }
.service-steps p { margin: 0; color: #92939b; font-size: 12px; line-height: 1.7; }
.service-faq-list { border-top: 1px solid rgba(255,255,255,.11); }
.service-faq-list details { border-bottom: 1px solid rgba(255,255,255,.11); }
.service-faq-list summary { position: relative; padding: 16px 28px 16px 0; color: #e3e0d9; cursor: pointer; font-size: 13px; list-style: none; }
.service-faq-list summary::-webkit-details-marker { display: none; }
.service-faq-list summary::after { position: absolute; content: "+"; top: 13px; right: 3px; color: var(--red); font-size: 20px; font-weight: 300; }
.service-faq-list details[open] summary::after { content: "−"; }
.service-faq-list details p { margin: -3px 28px 16px 0; color: #96979f; font-size: 12px; line-height: 1.8; }
.service-contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 15px; padding: 31px 35px; background: linear-gradient(110deg, rgba(119,20,24,.7), rgba(19,20,27,.94) 62%); border: 1px solid rgba(255,255,255,.12); }
.service-contact-panel h2 { margin: 0 0 10px; font-size: 28px; font-weight: 500; }
.service-contact-panel > div:first-child > p:last-child { max-width: 620px; margin: 0; color: #b2b2b8; font-size: 12px; line-height: 1.8; }
.service-contact-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: 0 0 auto; }
.service-contact-actions a { color: #eeeae2; font-size: 12px; }
.service-contact-actions a b { margin-left: 12px; color: var(--red); font-size: 17px; font-weight: 400; }
.service-contact-actions a:hover { color: #fff; }

@media (max-width: 1000px) {
  .service-overview { grid-template-columns: 1fr; }
  .service-overview-card { min-height: 220px; }
  .service-guide-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .service-page { padding-top: 64px; }
  .service-page-hero { min-height: 270px; padding: 60px 15px 45px; }
  .service-page-main { padding: 45px 15px 75px; }
  .service-overview-card { min-height: 225px; padding: 23px; }
  .service-overview-card a { left: 23px; bottom: 20px; }
  .service-status-banner { align-items: flex-start; flex-wrap: wrap; padding: 14px 15px; }
  .service-status-banner em { width: 100%; margin-left: 22px; }
  .service-guide-layout { margin-top: 35px; }
  .service-guide-card, .service-faq-card { padding: 25px 21px; }
  .service-guide-card h2, .service-faq-card h2 { font-size: 25px; }
  .service-contact-panel { align-items: flex-start; flex-direction: column; padding: 25px 21px; }
  .service-contact-actions { align-items: flex-start; }
}