/*
 * site.css — shared stylesheet for the standalone service pages and the
 * services hub. Uses the same design tokens as the homepage so the pages
 * feel native, without touching index.html's inline CSS.
 */
:root {
  --c-void:#05060d; --c-midnight:#0a0d1f; --c-deep:#11142b; --c-indigo:#1a1d4a;
  --c-violet:#6b46c1; --c-violet-glow:rgba(139,92,246,.35);
  --c-gold:#d4af37; --c-gold-bright:#f4d47c; --c-gold-deep:#8a6d1c;
  --c-pearl:#f5e9c8; --c-mist:rgba(245,233,200,.65);
  --c-line:rgba(212,175,55,.18); --c-line-soft:rgba(212,175,55,.08);
  --f-display:'Cinzel',serif; --f-serif:'Cormorant Garamond','Times New Roman',serif;
  --f-sans:'Inter Tight',-apple-system,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--f-serif); color:var(--c-pearl); line-height:1.7; min-height:100vh;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(107,70,193,.18), transparent 55%),
    radial-gradient(ellipse at 82% 100%, rgba(212,175,55,.07), transparent 55%),
    linear-gradient(180deg,var(--c-void),var(--c-midnight));
  background-attachment:fixed;
}
a { color:inherit; }
img { max-width:100%; display:block; }
em { color:var(--c-gold-bright); font-style:italic; }
.wrap { max-width:1080px; margin:0 auto; padding:0 1.6rem; }
.eyebrow { font-family:var(--f-sans); text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; color:var(--c-gold); }

/* ---------- Top nav ---------- */
.nav {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.1rem 1.6rem; border-bottom:1px solid var(--c-line);
  background:rgba(5,6,13,.72); backdrop-filter:blur(10px);
}
.nav-logo { font-family:var(--f-display); color:var(--c-gold); text-decoration:none; letter-spacing:.16em; font-size:1.15rem; text-transform:uppercase; white-space:nowrap; }
.nav-logo span { opacity:.95; }
.nav-links { list-style:none; display:flex; gap:1.25rem; align-items:center; }
.nav-links a { font-family:var(--f-sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--c-mist); transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--c-gold-bright); }
.nav-cta {
  font-family:var(--f-sans); font-size:.8rem; letter-spacing:.06em; text-decoration:none;
  padding:.6rem 1.2rem; border-radius:40px; border:1px solid var(--c-gold);
  color:var(--c-gold-bright); white-space:nowrap; transition:background .2s,color .2s;
}
.nav-cta:hover { background:var(--c-gold); color:#1a1500; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:.3rem; }
.nav-toggle span { width:24px; height:2px; background:var(--c-gold-bright); display:block; }

/* ---------- Breadcrumb ---------- */
.crumb { font-family:var(--f-sans); font-size:.78rem; letter-spacing:.05em; color:var(--c-mist); padding:1.4rem 0 0; }
.crumb a { color:var(--c-mist); text-decoration:none; }
.crumb a:hover { color:var(--c-gold-bright); }
.crumb span { color:var(--c-gold); margin:0 .5rem; }

/* ---------- Hero ---------- */
.hero { padding:1.5rem 0 1.75rem; border-bottom:1px solid var(--c-line-soft); }
.hero h1 { font-family:var(--f-display); font-weight:600; font-size:clamp(2.1rem,5.2vw,3.4rem); line-height:1.12; margin:1rem 0 1.1rem; }
.hero .lede { font-size:clamp(1.15rem,2.4vw,1.4rem); font-weight:300; color:rgba(245,233,200,.9); max-width:720px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.pill {
  font-family:var(--f-sans); font-size:.8rem; letter-spacing:.04em; color:var(--c-pearl);
  border:1px solid var(--c-line); border-radius:40px; padding:.5rem 1rem; background:rgba(212,175,55,.05);
}
.pill strong { color:var(--c-gold-bright); font-weight:600; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.8rem; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-sans); font-size:.85rem;
  letter-spacing:.07em; text-decoration:none; padding:.95rem 1.9rem; border-radius:40px; cursor:pointer; border:1px solid transparent;
}
.btn-primary { background:linear-gradient(120deg,var(--c-gold),var(--c-gold-bright)); color:#1a1500; font-weight:600; }
.btn-primary:hover { filter:brightness(1.06); }
.btn-ghost { border-color:var(--c-gold); color:var(--c-gold-bright); }
.btn-ghost:hover { background:rgba(212,175,55,.1); }

/* ---------- Sections ---------- */
section.block { padding:1.75rem 0; border-bottom:1px solid var(--c-line-soft); }
.block h2 { font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.2; margin:.6rem 0 1.3rem; }
.block h3 { font-family:var(--f-display); font-weight:500; font-size:1.15rem; margin:1.4rem 0 .5rem; color:var(--c-pearl); }
.block p { font-size:1.14rem; font-weight:300; color:rgba(245,233,200,.9); margin-bottom:1.1rem; }
.prose p { max-width:760px; }

/* Feature / bullet lists */
.ticks { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.6rem; margin:.4rem 0 .6rem; }
.ticks li { position:relative; padding-left:1.7rem; font-size:1.06rem; font-weight:300; color:rgba(245,233,200,.9); }
.ticks li::before {
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; transform:rotate(45deg);
  background:linear-gradient(120deg,var(--c-gold),var(--c-gold-bright));
}

/* Process steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1rem; }
.step { border:1px solid var(--c-line); border-radius:14px; padding:1.4rem; background:rgba(212,175,55,.04); }
.step-num { font-family:var(--f-display); color:var(--c-gold-bright); font-size:1.4rem; }
.step h4 { font-family:var(--f-sans); font-size:.95rem; letter-spacing:.02em; margin:.5rem 0 .4rem; color:var(--c-pearl); }
.step p { font-size:1rem; margin:0; }

/* Callout */
.callout { border-left:2px solid var(--c-gold); background:rgba(212,175,55,.05); padding:1.4rem 1.6rem; border-radius:0 14px 14px 0; margin:1rem 0; }
.callout p { margin:0; font-style:italic; }

/* Price card */
.pricecard {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
  border:1px solid var(--c-line); border-radius:16px; padding:1.6rem 1.8rem; background:rgba(212,175,55,.05); margin-top:.6rem;
}
.pricecard .amt { font-family:var(--f-display); font-size:2rem; color:var(--c-gold-bright); }
.pricecard .amt span { font-family:var(--f-sans); font-size:.9rem; color:var(--c-mist); letter-spacing:.04em; }
.pricecard .note { font-size:1.02rem; color:var(--c-mist); max-width:420px; }

/* Testimonial */
.quote-card { border:1px solid var(--c-line); border-radius:16px; padding:2rem; background:rgba(107,70,193,.08); }
.quote-card blockquote { font-family:var(--f-serif); font-size:1.3rem; font-weight:300; font-style:italic; color:var(--c-pearl); }
.quote-card .who { font-family:var(--f-sans); font-size:.82rem; letter-spacing:.05em; color:var(--c-gold); margin-top:1rem; }

/* FAQ */
.faq-item { border-bottom:1px solid var(--c-line-soft); }
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--c-pearl);
  font-family:var(--f-serif); font-size:1.2rem; padding:1.2rem 2rem 1.2rem 0; position:relative; }
.faq-q::after { content:"+"; position:absolute; right:.2rem; top:1.1rem; color:var(--c-gold); font-family:var(--f-sans); font-size:1.3rem; }
.faq-item.open .faq-q::after { content:"–"; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a { max-height:600px; }
.faq-a-inner { padding:0 0 1.3rem; font-size:1.08rem; font-weight:300; color:rgba(245,233,200,.85); max-width:800px; }

/* Related services */
.related { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.related a { text-decoration:none; border:1px solid var(--c-line); border-radius:14px; padding:1.2rem 1.3rem; background:rgba(212,175,55,.03); transition:border-color .2s,transform .2s; }
.related a:hover { border-color:var(--c-gold); transform:translateY(-3px); }
.related .r-for { font-family:var(--f-sans); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold); }
.related .r-title { font-family:var(--f-display); font-size:1.05rem; color:var(--c-pearl); margin-top:.35rem; }
.related .r-price { font-family:var(--f-sans); font-size:.82rem; color:var(--c-gold-bright); margin-top:.4rem; }

/* CTA band */
.cta-band { text-align:center; padding:2rem 0; }
.cta-band h2 { font-family:var(--f-display); font-weight:600; font-size:clamp(1.6rem,3.6vw,2.3rem); margin-bottom:1rem; }
.cta-band p { max-width:640px; margin:0 auto 1.8rem; font-weight:300; color:rgba(245,233,200,.9); }

/* Hub grid */
.hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.4rem; }
.hub-card { text-decoration:none; border:1px solid var(--c-line); border-radius:16px; padding:1.4rem; background:rgba(212,175,55,.03); transition:border-color .2s,transform .2s; display:flex; flex-direction:column; }
.hub-card:hover { border-color:var(--c-gold); transform:translateY(-4px); }
.hub-icon { color:var(--c-gold); width:44px; height:44px; margin-bottom:1rem; }
.hub-card .r-for { font-family:var(--f-sans); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold); }
.hub-card h3 { font-family:var(--f-display); font-size:1.2rem; color:var(--c-pearl); margin:.4rem 0 .5rem; }
.hub-card p { font-size:1rem; font-weight:300; color:var(--c-mist); margin-bottom:1rem; flex:1; }
.hub-card .r-price { font-family:var(--f-sans); font-size:.85rem; color:var(--c-gold-bright); }

/* ---------- Footer ---------- */
.foot { border-top:1px solid var(--c-line); padding:1.9rem 1.6rem 2.1rem; text-align:center; }
.foot-mark { font-family:var(--f-display); color:var(--c-gold-bright); font-size:1.2rem; letter-spacing:.05em; }
.foot-tag { font-family:var(--f-serif); font-style:italic; color:var(--c-mist); max-width:560px; margin:.8rem auto 1.4rem; }
.foot-links { display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:center; font-family:var(--f-sans); font-size:.8rem; }
.foot-links a { color:var(--c-mist); text-decoration:none; }
.foot-links a:hover { color:var(--c-gold-bright); }
.foot-bottom { font-family:var(--f-sans); font-size:.75rem; color:rgba(245,233,200,.4); margin-top:1.4rem; letter-spacing:.04em; }

/* Floating WhatsApp */
.floating-wa { position:fixed; right:1.2rem; bottom:1.2rem; width:52px; height:52px; border-radius:50%;
  background:linear-gradient(120deg,var(--c-gold),var(--c-gold-bright)); color:#0a2a12; display:flex;
  align-items:center; justify-content:center; z-index:30; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.floating-wa svg { width:26px; height:26px; }

/* ---------- Reveal ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- Dropdown subtabs ---------- */
.nav-links { position:relative; }
.nav-item { position:relative; }
.nav-item > a { display:inline-flex; align-items:center; gap:.35rem; }
.caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.7; }
.nav-item .sub {
  list-style:none; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:230px; background:rgba(8,10,22,.98); border:1px solid var(--c-line); border-radius:12px; padding:.5rem;
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s; z-index:40; box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.nav-item .sub::before { content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav-item .sub li { display:block; }
.nav-item .sub a { display:block; padding:.5rem .8rem; border-radius:8px; font-size:.66rem; color:var(--c-mist); white-space:nowrap; letter-spacing:.12em; }
.nav-item .sub a:hover { background:rgba(212,175,55,.1); color:var(--c-gold-bright); }
.nav-item .sub .sub-all a { color:var(--c-gold); border-top:1px solid var(--c-line-soft); margin-top:.3rem; }
.nav-item.has-sub:hover .sub { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ---------- Footer columns ---------- */
.foot-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; max-width:900px; margin:2.2rem auto 2.4rem; text-align:left; }
.foot-cols h4 { font-family:var(--f-sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold); margin-bottom:.8rem; }
.foot-cols a { display:block; font-family:var(--f-sans); font-size:.85rem; color:var(--c-mist); text-decoration:none; padding:.22rem 0; }
.foot-cols a:hover { color:var(--c-gold-bright); }

/* ---------- Long-form prose ---------- */
.prose h2 { margin-top:2rem; }
.prose ul, .prose ol { margin:0 0 1.2rem 1.2rem; }
.prose li { font-size:1.1rem; font-weight:300; color:rgba(245,233,200,.9); margin-bottom:.5rem; padding-left:.3rem; }
.prose strong { color:var(--c-pearl); font-weight:500; }
.toc { border:1px solid var(--c-line); border-radius:14px; padding:1.2rem 1.5rem; background:rgba(212,175,55,.04); margin:1rem 0 .5rem; }
.toc h4 { font-family:var(--f-sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold); margin-bottom:.6rem; }
.toc a { display:block; color:var(--c-mist); text-decoration:none; font-size:1rem; padding:.2rem 0; }
.toc a:hover { color:var(--c-gold-bright); }

/* Data tables */
.tbl { width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-family:var(--f-sans); }
.tbl th, .tbl td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--c-line-soft); font-size:.92rem; font-weight:300; color:rgba(245,233,200,.9); }
.tbl th { color:var(--c-gold); font-weight:500; letter-spacing:.04em; border-bottom:1px solid var(--c-line); }
.tbl tr:hover td { background:rgba(212,175,55,.03); }

/* Zodiac facts + tags */
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin:1.4rem 0; }
.fact { border:1px solid var(--c-line); border-radius:12px; padding:1rem; background:rgba(212,175,55,.04); }
.fact .k { font-family:var(--f-sans); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold); }
.fact .val { font-family:var(--f-display); font-size:1.05rem; color:var(--c-pearl); margin-top:.3rem; }
.tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 1rem; }
.tag { font-family:var(--f-sans); font-size:.78rem; letter-spacing:.03em; border:1px solid var(--c-line); border-radius:40px; padding:.35rem .9rem; color:var(--c-pearl); background:rgba(212,175,55,.05); }
.zodiac-ring { display:flex; align-items:center; justify-content:center; width:96px; height:96px; border:1px solid var(--c-line); border-radius:50%; margin-bottom:1rem; color:var(--c-gold-bright); background:rgba(212,175,55,.05); font-family:var(--f-display); font-size:2rem; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .nav-cta.desk { display:none; }
  .nav-links { display:none; }
  .nav.open .nav-links { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    gap:.4rem; padding:1rem 1.4rem 1.6rem; background:rgba(5,6,13,.98); border-bottom:1px solid var(--c-line);
    max-height:78vh; overflow-y:auto; }
  .nav-item .sub { position:static; opacity:1; visibility:visible; transform:none; min-width:0; background:none;
    border:0; box-shadow:none; padding:.1rem 0 .4rem .8rem; }
  .nav-item .sub a { padding:.4rem 0; }
  .caret { display:none; }
  .steps, .related, .hub-grid { grid-template-columns:1fr; }
  .ticks, .facts, .foot-cols { grid-template-columns:1fr 1fr; }
  .foot-cols { gap:1.2rem; text-align:left; }
}
@media (max-width:560px) { .facts { grid-template-columns:1fr 1fr; } .foot-cols { grid-template-columns:1fr 1fr; } }

/* ---- Accessibility: skip link, focus ring, reduced motion (added) ---- */
.lod-skip { position:absolute; left:-9999px; top:0; z-index:9999; background:var(--c-gold,#d4af37); color:#0a0d1f; padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-family:var(--f-sans,system-ui,sans-serif); font-weight:600; font-size:.9rem; text-decoration:none; }
.lod-skip:focus { left:0; }
:focus-visible { outline:2px solid var(--c-gold,#d4af37); outline-offset:2px; border-radius:2px; }
main#main-content:focus { outline:none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Brand wordmark — cursive "Lady of Destiny" + optional uploaded emblem */
.nav-logo { font-family: 'Great Vibes', cursive !important; text-transform: none !important; letter-spacing: 0.02em !important; font-size: 2.5rem; font-weight: 400; line-height: 1; display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; padding: 0.1em 0; }
.nav-logo-mark { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.nav-logo-div { width: 1px; height: 34px; background: rgba(212, 175, 55, 0.45); flex: 0 0 auto; }
.foot-mark { font-family: 'Great Vibes', cursive !important; text-transform: none !important; letter-spacing: 0.02em !important; font-size: 2.7rem; font-weight: 400; }
.lod-script { font-family: 'Great Vibes', cursive; font-style: normal; font-weight: 400; font-size: 1.4em; letter-spacing: 0.02em; }
::selection { background: rgba(212, 175, 55, 0.30); color: #fff9ec; }

/* ===== Free interactive tools (/tools) ===== */
.tools-live { margin: 1.6rem 0 0.5rem; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; }
.tool-card { background: linear-gradient(180deg, rgba(26,29,74,0.35), rgba(17,20,43,0.5)); border: 1px solid var(--c-line); border-radius: 18px; padding: 1.6rem 1.5rem; display: flex; flex-direction: column; }
.tool-card:hover { border-color: rgba(212,175,55,0.4); }
.tool-ico { font-size: 1.7rem; color: var(--c-gold); line-height: 1; margin-bottom: 0.7rem; }
.tool-card h3 { font-family: var(--f-display); color: var(--c-gold-bright); font-size: 1.4rem; margin: 0 0 0.4rem; letter-spacing: 0.01em; }
.tool-sub { font-family: var(--f-serif); color: var(--c-mist); font-size: 1.02rem; line-height: 1.5; margin: 0 0 1.1rem; }
.tool-lab { font-family: var(--f-sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem; color: var(--c-gold); display: block; margin: 0.6rem 0 0.35rem; }
.tool-in { width: 100%; background: var(--c-void); border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-pearl); padding: 0.7rem 0.8rem; font-family: var(--f-sans); font-size: 0.95rem; color-scheme: dark; }
.tool-in:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.tool-btn { margin-top: 1.1rem; width: 100%; cursor: pointer; font-family: var(--f-sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600; color: #1a1500; background: linear-gradient(120deg, var(--c-gold), var(--c-gold-bright)); border: none; border-radius: 40px; padding: 0.85rem 1rem; transition: filter 0.2s, transform 0.1s; }
.tool-btn:hover { filter: brightness(1.06); }
.tool-btn:active { transform: translateY(1px); }
.tool-result { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--c-line); }
.tool-head { font-family: var(--f-sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.64rem; color: var(--c-gold); margin-bottom: 0.4rem; }
.tool-big { font-family: var(--f-display); color: var(--c-gold-bright); font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.3rem; }
.tool-meta { font-family: var(--f-sans); font-size: 0.82rem; color: var(--c-mist); margin-bottom: 0.7rem; }
.tool-result p { font-family: var(--f-serif); font-size: 1.05rem; line-height: 1.55; color: var(--c-pearl); margin: 0.4rem 0; }
.tool-bar { height: 8px; border-radius: 6px; background: rgba(212,175,55,0.14); overflow: hidden; margin: 0.5rem 0 0.8rem; }
.tool-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-gold), var(--c-gold-bright)); }
.tool-facts { display: grid; gap: 0.5rem; margin: 0.6rem 0 0.4rem; }
.tool-facts > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--c-line-soft); padding-bottom: 0.4rem; }
.tool-facts span { font-family: var(--f-sans); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.64rem; color: var(--c-gold); }
.tool-facts b { font-family: var(--f-serif); font-size: 1rem; color: var(--c-pearl); font-weight: 400; text-align: right; }
.tool-link { display: inline-block; margin-top: 0.7rem; font-family: var(--f-sans); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--c-gold-bright); text-decoration: none; border-bottom: 1px solid var(--c-line); }
.tool-link:hover { border-color: var(--c-gold-bright); }
.tool-note { font-size: 0.9rem !important; color: var(--c-mist) !important; }
.tool-note a { color: var(--c-gold-bright); }
.tool-err { font-family: var(--f-sans); font-size: 0.85rem; color: #e8917f; }

/* Tool group headings + tidy card heights */
.tools-grid { align-items: start; margin-bottom: 1.8rem; }
.tools-group { font-family: var(--f-sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; color: var(--c-gold); margin: 1.8rem 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-line-soft); }

/* ============ Services coverflow carousel (JS-enhanced) ============ */
.svc-viewport { position: relative; max-width: 1120px; margin: 2.6rem auto 0; }
.services-grid.svc-cf { display: block; position: relative; height: 540px; margin: 0; perspective: 1700px; overflow: hidden; }
.services-grid.svc-cf .service-card {
  position: absolute; top: 0; left: 50%; width: 306px; height: 470px; margin: 0;
  padding: 2.4rem 1.7rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--c-line); border-radius: 20px;
  background: linear-gradient(180deg, rgba(26,29,74,0.55), rgba(10,13,31,0.85));
  transform-style: preserve-3d; backface-visibility: hidden; cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.2,0.75,0.2,1), opacity 0.55s ease, box-shadow 0.55s ease, border-color 0.55s ease;
  will-change: transform, opacity;
}
.services-grid.svc-cf .service-card::before { display: none; }
.services-grid.svc-cf .service-card.is-active {
  border-color: var(--c-gold);
  box-shadow: 0 44px 100px rgba(0,0,0,0.6), 0 0 0 1px var(--c-gold) inset, 0 0 60px var(--c-violet-glow);
  cursor: default;
}
.services-grid.svc-cf .service-icon { width: 88px; height: 88px; margin: 0 auto 1.3rem; }
.services-grid.svc-cf .service-for { display: none; }
.services-grid.svc-cf .service-card h3 { font-size: 1.55rem; margin: 0; }
.services-grid.svc-cf .service-card h3::after {
  content: ""; display: block; width: 122px; height: 12px; margin: 0.75rem auto 0.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='122' height='12'%3E%3Cline x1='6' y1='6' x2='47' y2='6' stroke='%23d4af37' stroke-width='1'/%3E%3Cline x1='75' y1='6' x2='116' y2='6' stroke='%23d4af37' stroke-width='1'/%3E%3Cpath d='M61 2 L65 6 L61 10 L57 6 Z' fill='%23d4af37'/%3E%3C/svg%3E") center/contain no-repeat;
}
.services-grid.svc-cf .service-price { margin: 0.2rem 0 0.5rem; }
.services-grid.svc-cf .service-card p { margin: 0.8rem 0 0; flex-grow: 0; font-size: 0.98rem; }
.services-grid.svc-cf .service-link {
  margin-top: 1.4rem; align-self: center; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease 0.15s, gap 0.4s ease;
}
.services-grid.svc-cf .service-card.is-active .service-link { opacity: 1; pointer-events: auto; }

.svc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-gold); background: rgba(17,20,43,0.85);
  border: 1px solid var(--c-line); backdrop-filter: blur(6px);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}
.svc-arrow svg { width: 22px; height: 22px; }
.svc-arrow:hover { background: linear-gradient(120deg, var(--c-gold), var(--c-gold-bright)); color: #1a1500; border-color: var(--c-gold); }
.svc-arrow:active { transform: translateY(-50%) scale(0.93); }
.svc-arrow.svc-prev { left: 4px; }
.svc-arrow.svc-next { right: 4px; }

.svc-dots { display: flex; gap: 0.5rem; justify-content: center; align-items: center; margin-top: 1.9rem; }
.svc-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--c-line); cursor: pointer; transition: all 0.35s ease; }
.svc-dot:hover { background: var(--c-gold-deep); }
.svc-dot.is-active { width: 24px; border-radius: 5px; background: linear-gradient(90deg, var(--c-gold), var(--c-gold-bright)); }

@media (max-width: 760px) {
  .services-grid.svc-cf { height: 500px; }
  .services-grid.svc-cf .service-card { width: 80vw; max-width: 320px; height: 440px; }
  .svc-arrow { width: 46px; height: 46px; }
  .svc-arrow.svc-prev { left: -2px; }
  .svc-arrow.svc-next { right: -2px; }
}