/* ============================================================
   GALAXY THEME  —  "Deep space + brand glow", mixed textures
   ------------------------------------------------------------
   Loaded LAST (after main2.css) so it overrides cleanly.

   Readability rules (important — we keep every text visible):
   • Dark sections become transparent over a fixed cosmos and keep
     their existing LIGHT text.
   • Each consecutive section gets one of 4 textures (starfield,
     nebula glow, constellation grid, constellation lines) so no
     two neighbours look the same.
   • The few LIGHT sections (blog + social analytics) are excluded
     from the dark veil and given a soft "light cosmic" tint so
     their DARK text stays readable.
   • White cards (.vm-card / .step-card etc.) are kept — they read
     as bright cards floating in space.
   ============================================================ */

:root{
  --gx-base:    #050711;             /* deep blue-black */
  --gx-veilA:   rgba(8,12,34,.44);   /* blue-purple veils (lighter → more cosmos) */
  --gx-veilB:   rgba(8,12,34,.20);
}

/* ---------- Fixed deep-space cosmos behind everything ---------- */
html{ background:var(--gx-base); }
body{ background:transparent !important; position:relative; }

/* Purple nebula + base gradient — slowly drifts/breathes (galaxy animation) */
/* Fixed full-page galaxy IMAGE — sections scroll over it. Slow Ken-Burns drift. */
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:#050711 url('/images/galaxy-bg.jpg') center center / cover no-repeat;
  transform-origin:center;
  animation: gxNebula 70s ease-in-out infinite alternate;
}
@keyframes gxNebula{
  0%   { transform: scale(1.05) translate(0,0); }
  100% { transform: scale(1.13) translate(-1.6%,-1.1%); }
}
/* Twinkling starfield */
body::after{
  content:""; position:fixed; inset:-10%; z-index:-2; pointer-events:none;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><g fill='white'><circle cx='18' cy='24' r='1.2' opacity='.85'/><circle cx='60' cy='10' r='.7' opacity='.5'/><circle cx='110' cy='40' r='1' opacity='.7'/><circle cx='160' cy='16' r='1.4' opacity='.9'/><circle cx='210' cy='34' r='.7' opacity='.5'/><circle cx='260' cy='20' r='1.1' opacity='.75'/><circle cx='300' cy='52' r='.8' opacity='.6'/><circle cx='30' cy='90' r='.9' opacity='.65'/><circle cx='86' cy='104' r='1.3' opacity='.9'/><circle cx='140' cy='86' r='.7' opacity='.5'/><circle cx='196' cy='110' r='1' opacity='.7'/><circle cx='250' cy='92' r='1.4' opacity='.85'/><circle cx='298' cy='120' r='.7' opacity='.5'/><circle cx='14' cy='150' r='1.1' opacity='.8'/><circle cx='70' cy='168' r='.8' opacity='.6'/><circle cx='124' cy='150' r='1' opacity='.7'/><circle cx='180' cy='176' r='.7' opacity='.5'/><circle cx='236' cy='156' r='1.3' opacity='.9'/><circle cx='290' cy='184' r='.9' opacity='.65'/><circle cx='40' cy='214' r='1' opacity='.75'/><circle cx='100' cy='230' r='.7' opacity='.5'/><circle cx='158' cy='210' r='1.2' opacity='.85'/><circle cx='214' cy='236' r='.8' opacity='.6'/><circle cx='270' cy='216' r='1' opacity='.7'/><circle cx='24' cy='280' r='.8' opacity='.6'/><circle cx='92' cy='296' r='1.2' opacity='.85'/><circle cx='150' cy='276' r='.7' opacity='.5'/><circle cx='206' cy='300' r='1' opacity='.7'/><circle cx='280' cy='284' r='1.3' opacity='.9'/></g><g><circle cx='160' cy='16' r='1.7' fill='%23bfe8ff' opacity='.98'/><circle cx='250' cy='92' r='1.6' fill='%23a9d4ff' opacity='.92'/><circle cx='236' cy='156' r='1.6' fill='%23d9c4ff' opacity='.9'/><circle cx='86' cy='104' r='1.6' fill='%23ffffff' opacity='.95'/></g></svg>");
  background-repeat:repeat;
  animation: gxDrift 200s linear infinite, gxTwinkle 7s ease-in-out infinite alternate;
}
@keyframes gxTwinkle{0%{opacity:.5}100%{opacity:1}}
@keyframes gxDrift{ from{ background-position:0 0; } to{ background-position:-640px -960px; } }

@media (prefers-reduced-motion: reduce){
  body::before, body::after { animation:none !important; }
  body::after{ opacity:.85; }
}

/* ---------- Remove the OLD background animations/decorations ---------- */
/* (orange floating dots, circuit overlays, morphing blobs, pattern drift) */
.hero-network, .h-node, .circuit-bg, .sec-blobs,
.faq-bg-grad, .form-particles{ display:none !important; }
main > section{ animation:none !important; }
/* Blank the old decorative section glows (warm orange/gold radial gradients,
   blobs) so only the cosmos shows behind sections — they clashed with the theme. */
main > section::before, main > section::after,
.ppc-hero::before, .ppc-hero::after,
.testimonial-3::before, .testimonial-3::after,
.testimonial-section::before, .testimonial-section::after,
.quote-form-one::before, .quote-form-one::after,
.service-1::before, .service-1::after,
.wddev-features::before, .wddev-features::after,
.wddev-section::before, .wddev-section::after,
.wddev-steps::before, .wddev-steps::after,
.faq-section::before, .faq-section::after,
.brand-one::before, .brand-one::after,
.industries-served::before, .industries-served::after{
  background:none !important;
  animation:none !important;
}
/* Hard-remove the decorative orange/blue orbs entirely (belt-and-suspenders) */
.testimonial-section::before, .testimonial-section::after,
.industries-served::before, .industries-served::after,
.ppc-hero::before, .ppc-hero::after,
.quote-form-one::before, .quote-form-one::after,
.service-1::before, .service-1::after,
.testimonial-3::before, .testimonial-3::after{
  display:none !important;
}

/* ---------- Full-width bands & wrappers NOT reached by `main > section` ---------- */
/* All are dark with light text, so transparent purple veils let the cosmos
   (drifting stars + nebula) show through while text stays readable. */
.stats-bar,
.brand-one,
.faq-filter-bar,
.pkg-custom,
.legal-body,
.blog-cat-bar{
  background:
    radial-gradient(820px 460px at 16% 22%, rgba(149,76,255,.17), transparent 62%),
    radial-gradient(720px 420px at 86% 80%, rgba(196,84,255,.12), transparent 62%),
    linear-gradient(180deg, var(--gx-veilB), var(--gx-veilA)) !important;
  background-size:auto !important;
  background-repeat:no-repeat !important;
}
/* These sections are wrapped in a <div> (not direct children of <main>), so the
   `main > section` veil can't reach them — veil them by class so the cosmos shows. */
.quote-form-one, .testimonial-section{
  background: linear-gradient(180deg, var(--gx-veilB), var(--gx-veilA)) !important;
}
/* The FAQ panel (home, service pages, FAQ page) is a solid dark box that
   hides the cosmos. Make it transparent so the galaxy/veil behind shows.
   Its items keep their own dark-glass background, so text stays readable.
   (Blog-post FAQ is already transparent over its light page — unaffected.) */
.faq-accordion-custom{ background:transparent !important; }
/* FAQ page: clear the wrapper, then alternate the category bands */
#faq-body{ background:transparent !important; }
.faq-cat-section{
  background:
    radial-gradient(780px 440px at 18% 26%, rgba(149,76,255,.16), transparent 62%),
    linear-gradient(180deg, var(--gx-veilB), var(--gx-veilA)) !important;
  background-repeat:no-repeat !important;
}
.faq-cat-section.faq-cat-section--alt{
  background:
    radial-gradient(720px 420px at 82% 24%, rgba(196,84,255,.15), transparent 62%),
    linear-gradient(180deg, var(--gx-veilA), var(--gx-veilB)) !important;
  background-repeat:no-repeat !important;
}

/* ---------- Sections float transparently over the cosmos ---------- */
main > section{ position:relative; background-color:transparent !important; }

/* Texture 1 — STARFIELD (extra stars + dark veil) */
main > section:not(.blog-body):not(.blog-related):not(.blog-post-faq):nth-of-type(4n+1){
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g fill='white'><circle cx='16' cy='22' r='1' opacity='.7'/><circle cx='58' cy='12' r='.7' opacity='.5'/><circle cx='96' cy='34' r='1.2' opacity='.85'/><circle cx='140' cy='18' r='.8' opacity='.6'/><circle cx='178' cy='30' r='1' opacity='.7'/><circle cx='28' cy='70' r='.8' opacity='.6'/><circle cx='74' cy='84' r='1.1' opacity='.8'/><circle cx='118' cy='66' r='.7' opacity='.5'/><circle cx='162' cy='82' r='1.3' opacity='.9'/><circle cx='40' cy='128' r='1' opacity='.7'/><circle cx='90' cy='112' r='.8' opacity='.6'/><circle cx='132' cy='130' r='1.1' opacity='.8'/><circle cx='176' cy='118' r='.7' opacity='.5'/><circle cx='20' cy='170' r='1.2' opacity='.85'/><circle cx='66' cy='160' r='.8' opacity='.6'/><circle cx='112' cy='178' r='1' opacity='.7'/><circle cx='156' cy='166' r='.7' opacity='.5'/><circle cx='188' cy='182' r='1.1' opacity='.8'/></g></svg>") repeat,
    linear-gradient(180deg,var(--gx-veilA),var(--gx-veilB)) !important;
}

/* Texture 2 — NEBULA GLOW (coloured cosmic clouds) */
main > section:not(.blog-body):not(.blog-related):not(.blog-post-faq):nth-of-type(4n+2){
  background:
    radial-gradient(760px 420px at 16% 28%, rgba(149,76,255,.20), transparent 62%),
    radial-gradient(680px 400px at 84% 72%, rgba(196,84,255,.16), transparent 62%),
    radial-gradient(520px 360px at 60% 12%, rgba(108,52,220,.14), transparent 60%),
    linear-gradient(180deg,var(--gx-veilB),var(--gx-veilA)) !important;
}

/* Texture 3 — CONSTELLATION GRID (faint square grid + glow) */
main > section:not(.blog-body):not(.blog-related):not(.blog-post-faq):nth-of-type(4n+3){
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(700px 420px at 80% 20%, rgba(170,90,255,.14), transparent 60%),
    linear-gradient(180deg,var(--gx-veilA),var(--gx-veilB)) !important;
}

/* Texture 4 — CONSTELLATION LINES (connected stars) */
main > section:not(.blog-body):not(.blog-related):not(.blog-post-faq):nth-of-type(4n+4){
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><g stroke='white' stroke-width='1' opacity='.16'><line x1='30' y1='44' x2='96' y2='80'/><line x1='96' y1='80' x2='150' y2='54'/><line x1='150' y1='54' x2='214' y2='96'/><line x1='58' y1='160' x2='124' y2='186'/><line x1='124' y1='186' x2='196' y2='150'/><line x1='30' y1='44' x2='58' y2='160'/></g><g fill='white'><circle cx='30' cy='44' r='1.6' opacity='.8'/><circle cx='96' cy='80' r='1.3' opacity='.7'/><circle cx='150' cy='54' r='1.6' opacity='.85'/><circle cx='214' cy='96' r='1.3' opacity='.7'/><circle cx='58' cy='160' r='1.6' opacity='.8'/><circle cx='124' cy='186' r='1.3' opacity='.7'/><circle cx='196' cy='150' r='1.6' opacity='.85'/><circle cx='90' cy='30' r='.7' opacity='.5'/><circle cx='230' cy='40' r='.7' opacity='.5'/><circle cx='40' cy='230' r='.7' opacity='.5'/><circle cx='240' cy='220' r='.7' opacity='.5'/></g></svg>") repeat,
    linear-gradient(180deg,var(--gx-veilB),var(--gx-veilA)) !important;
}

/* ---------- Convert the old LIGHT "steps" sections to deep space ---------- */
/* (background handled by the veil rules above; here we flip the few
    section-level texts from dark to light so they read on the cosmos) */
.wddev-steps .wddev-head h2,
.wddev-steps .title{ color:#f4f7ff !important; }
.wddev-steps .wddev-head .wddev-sub,
.wddev-steps .lead{ color:rgba(228,234,255,.74) !important; }

/* White cards float as bright panels in space */
.vm-card, .step-card{ box-shadow:0 14px 50px rgba(0,0,0,.45); }

/* ---------- LIGHT pages (blog reading views) — soft "light cosmic" ---------- */
/* Kept light on purpose so their long-form dark body text stays readable. */
.blog-post-main,
.blog-body,
.blog-related,
.blog-post-faq{
  background: linear-gradient(180deg, var(--gx-veilB), var(--gx-veilA)) !important;
}

/* ---------- Header: translucent space glass ---------- */
#header-sticky.header-6{
  background:rgba(6,9,24,.72) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.09) !important;
}

/* ---------- Footer floats on the cosmos ---------- */
.site-footer, .mya-footer{
  background:linear-gradient(180deg, rgba(4,6,17,.28), rgba(4,6,17,.66)) !important;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ========================================================================
   GALAXY UI THEME  —  light text + frosted-glass cards over the cosmos
   ======================================================================== */

/* Re-theme the design tokens: text → light, light surfaces → dark glass,
   borders → soft light. (These vars are only used as text/bg/border,
   verified safe to flip — so most components re-theme automatically.) */
:root{
  --text-dark:  #eef3ff;
  --text-mid:   rgba(223,231,255,.84);
  --text-muted: rgba(201,213,250,.72);
  --light-50:   rgba(22,28,58,.55);
  --light-100:  rgba(28,34,66,.50);
  --light-200:  rgba(150,175,255,.18);
  --border:     rgba(150,175,255,.20);
}

body{ color: var(--text-dark); }

/* ---- Frosted-glass cards (every panel / tile) ---- */
.service-1__item, .about-stat, .about-stat-lg, .industry-card,
.testimonial-card, .testimonial-nav, .step, .step-card, .wddev-card,
.vm-card, .feat-card, .pkg-card, .brand-one__single,
.blog-card, .blog-featured, .blog-empty-state, .blog-toc, .faq-question,
.legal-nav, .blog-post-faq .faq-accordion-custom .faq-item,
.blog-post-body .tldr-box, .blog-post-body .insight-box,
.blog-post-body .red-flag-box, .blog-post-body .cta-box,
.blog-post-body .author-box, .blog-post-body .checkpoint,
.blog-post-body .related{
  background: linear-gradient(155deg, rgba(40,48,94,.46) 0%, rgba(13,18,42,.56) 100%) !important;
  border: 1px solid rgba(165,195,255,.32) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(0,0,10,.50), inset 0 1px 0 rgba(255,255,255,.13) !important;
  color: var(--text-mid) !important;
}
/* hover glow on interactive cards */
.service-1__item:hover, .about-stat:hover, .industry-card:hover,
.testimonial-card:hover, .step-card:hover, .wddev-card:hover,
.vm-card:hover, .feat-card:hover, .pkg-card:hover,
.blog-card:hover, .blog-featured:hover{
  border-color: rgba(125,200,255,.42) !important;
  box-shadow: 0 22px 62px rgba(0,0,8,.55), 0 0 34px rgba(90,160,255,.20) !important;
  transform: translateY(-4px);
}
/* semantic accent borders for the blog content boxes */
.blog-post-body .red-flag-box{ border-color: rgba(255,95,95,.42) !important; }
.blog-post-body .cta-box{ border-color: rgba(255,150,40,.46) !important; }
.blog-post-body .insight-box{ border-color: rgba(90,185,255,.42) !important; }

/* ---- Glass buttons / pills ---- */
.btn-ghost, .blog-cat-btn, .blog-page-btn, .blog-post-share a{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(150,178,255,.24) !important;
  color: #e9f0ff !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost:hover, .blog-cat-btn:hover, .blog-page-btn:hover, .blog-post-share a:hover{
  background: rgba(120,170,255,.16) !important;
  border-color: rgba(140,200,255,.55) !important;
  color: #ffffff !important;
}
.blog-cat-btn.active{ background: var(--brand-grad) !important; border-color: transparent !important; color: #fff !important; }

/* (Desktop nav menu reverted to its original styling — no tab/pill override.) */

/* ========================================================================
   HEADER BUTTONS — Call + Get Free Quote match the site's buttons
   ======================================================================== */
/* "Get Free Quote" → compact sliding-circle pill like .ppc-btn */
.hdr-cta{
  position: relative !important; overflow: hidden !important; gap: 0 !important;
  padding: 11px 22px 11px 50px !important; border-radius: 50px !important;
  transition: padding .42s cubic-bezier(.4,0,.2,1), box-shadow .25s, transform .2s !important;
}
.hdr-cta svg{ display: none !important; }          /* drop trailing arrow; badge carries it */
.hdr-cta::before{
  content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ff6b00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>") center / 13px no-repeat;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: left .42s cubic-bezier(.4,0,.2,1); z-index: 1;
}
.hdr-cta:hover{
  padding-left: 22px !important; padding-right: 50px !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(255,107,0,.45) !important;
}
.hdr-cta:hover::before{ left: calc(100% - 37px) !important; }

/* "Call" pill → matching hover (lift + glow + icon nudge) */
.hdr-phone{ transition: transform .2s, box-shadow .25s, border-color .2s, background .2s !important; }
.hdr-phone:hover{
  transform: translateY(-2px);
  border-color: rgba(255,107,0,.4) !important;
  background: rgba(255,107,0,.10) !important;
  box-shadow: 0 8px 22px rgba(255,107,0,.25);
}
.hdr-phone__icon{ transition: transform .3s ease; }
.hdr-phone:hover .hdr-phone__icon{ transform: translateX(3px); }

/* ---- Dropdown submenu → dark glass ---- */
.main-menu nav ul li .sub-menu{
  background: rgba(10,14,32,.94) !important;
  border: 1px solid rgba(150,178,255,.16) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 22px 54px rgba(0,0,8,.6) !important;
}
.main-menu nav ul li .sub-menu li a{ color: rgba(228,234,255,.86) !important; }
.main-menu nav ul li .sub-menu li a:hover{ background: rgba(120,170,255,.14) !important; color:#fff !important; }

/* "Why Choose Us" section has pb-0 + overflow:hidden, which clips the bottom
   row cards' glass border at the section edge. Restore bottom padding. */
.service-1.service-1__space{ padding-bottom: 80px !important; }

/* ---- FAQ accordion items → frosted glass (match the other cards) ---- */
.site-faq .faq-item, .faq-accordion-custom .faq-item, .faq-cat-section .faq-item{
  background: linear-gradient(155deg, rgba(40,48,94,.46) 0%, rgba(13,18,42,.56) 100%) !important;
  border: 1px solid rgba(165,195,255,.30) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 14px 40px rgba(0,0,8,.45), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.site-faq .faq-item:hover, .faq-accordion-custom .faq-item:hover, .faq-cat-section .faq-item:hover{
  border-color: rgba(125,200,255,.42) !important;
}
/* inner question/answer rows are transparent so the item's glass shows through */
.site-faq .faq-question, .faq-accordion-custom .faq-question, .faq-cat-section .faq-question,
.site-faq .faq-answer, .faq-accordion-custom .faq-answer, .faq-cat-section .faq-answer{
  background: transparent !important;
}

/* ---- Inline code chip ---- */
.blog-post-body code{ background: rgba(140,170,255,.13) !important; color:#cfe0ff !important; }

/* ---- Blog article text (literal dark colour → light) ---- */
.blog-post-body{ color: var(--text-mid) !important; }
.blog-post-body h2, .blog-post-body h3, .blog-post-body h4{ color:#f3f7ff !important; }
.blog-post-title{ color:#ffffff !important; }
.industries-served .brand-one__title{ color:#fff !important; }

/* ========================================================================
   BUTTONS — pill with a white circular icon badge that slides across on hover
   (brand orange/gold to match the site & pop on the cosmos)
   ======================================================================== */
.ppc-btn, .pkg-cta, .contact-btn, .hero-cta, .mya-cta, .ty-btn-primary,
.ppc-btn-ghost, .ppc-btn--ghost, .ty-btn-ghost{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 14px 30px 14px 60px !important;     /* room for the left badge */
  border-radius: 50px !important;
  overflow: hidden !important;
  font: 700 14.5px/1 'Sora', serif !important;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: padding .42s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s, background .25s, transform .2s !important;
}
/* the white icon badge (brand-coloured arrow) */
.ppc-btn::before, .pkg-cta::before, .contact-btn::before, .hero-cta::before,
.mya-cta::before, .ty-btn-primary::before,
.ppc-btn-ghost::before, .ppc-btn--ghost::before, .ty-btn-ghost::before{
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff6b00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>") center / 15px no-repeat;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  transition: left .42s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}
/* on hover: badge slides to the right, text shifts left (padding swaps) */
.ppc-btn:hover, .pkg-cta:hover, .contact-btn:hover, .hero-cta:hover,
.mya-cta:hover, .ty-btn-primary:hover,
.ppc-btn-ghost:hover, .ppc-btn--ghost:hover, .ty-btn-ghost:hover{
  padding-left: 30px !important;
  padding-right: 60px !important;
  transform: translateY(-2px) !important;
}
.ppc-btn:hover::before, .pkg-cta:hover::before, .contact-btn:hover::before,
.hero-cta:hover::before, .mya-cta:hover::before, .ty-btn-primary:hover::before,
.ppc-btn-ghost:hover::before, .ppc-btn--ghost:hover::before, .ty-btn-ghost:hover::before{
  left: calc(100% - 44px) !important;
}
/* PRIMARY — brand gradient */
.ppc-btn, .pkg-cta, .contact-btn, .hero-cta, .mya-cta, .ty-btn-primary{
  background: var(--brand-grad) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(255,107,0,.32) !important;
}
.ppc-btn:hover, .pkg-cta:hover, .contact-btn:hover, .hero-cta:hover,
.mya-cta:hover, .ty-btn-primary:hover{
  box-shadow: 0 16px 40px rgba(255,107,0,.45) !important;
}
/* GHOST — glass */
.ppc-btn-ghost, .ppc-btn--ghost, .ty-btn-ghost{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(165,195,255,.30) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ppc-btn-ghost:hover, .ppc-btn--ghost:hover, .ty-btn-ghost:hover{
  border-color: rgba(140,200,255,.55) !important;
  background: rgba(120,170,255,.12) !important;
}

/* ---- Heading legibility over the busy cosmos (kept off gradient text) ---- */
h1, h2, .ppc-hero-title, .wddev-head h2, .section-title__four-title{
  text-shadow: 0 2px 16px rgba(0,0,8,.45);
}
.accent-orange, .accent-blue{ text-shadow:none; }

/* ========================================================================
   GALAXY TEXT COLORS — cosmic-tinted typography matching the background
   ======================================================================== */
/* slightly cooler "starlight" body tones */
:root{
  --text-dark:  #eef2ff;
  --text-mid:   rgba(216,226,255,.86);
  --text-muted: rgba(192,206,250,.74);
}
body{ color: var(--text-mid); }

/* big headings → soft white→blue→lavender cosmic gradient (only where
   background-clip:text is supported, so unsupported browsers stay solid/light) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1, h2,
  .ppc-hero-title, .section-title__one-title, .section-title__four-title,
  .wddev-head h2, .wddev-features .title, .wddev-steps .title,
  .testimonial-title, .quote-form-one__title, .faq-title, .brand-one__title,
  .contact-title, .blog-post-title, .blog-card-title{
    background: linear-gradient(100deg, #ffffff 0%, #cfe6ff 44%, #e2ccff 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 3px 14px rgba(0,0,12,.4));
  }
  /* keep brand accent words on their own gradient inside those headings */
  .accent-orange{ background: var(--brand-grad) !important; -webkit-text-fill-color: transparent !important; }
  .accent-blue{ background: linear-gradient(135deg,#6ec3ff,#b69bff) !important; -webkit-text-fill-color: transparent !important; }
}

/* sub-headings stay crisp light */
h3, h4, h5, h6{ color: #eef3ff !important; }

/* content links → cosmic cyan */
.blog-post-body a, .legal-content a, .legal-section a, .footer a:hover{ color:#8fd2ff !important; }

/* ---- Partner / Global Brands logo tiles → match the glass cards ----
   (uses 3-class specificity to beat the existing .brand-one .brand-logo-gallery
   .brand-one__single rule; lighter shadow since these are logo tiles, and
   clean monochrome logos that colour on hover) */
.brand-one .brand-logo-gallery .brand-one__single{
  background: linear-gradient(155deg, rgba(40,48,94,.42) 0%, rgba(13,18,42,.52) 100%) !important;
  border: 1px solid rgba(165,195,255,.30) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 32px rgba(0,0,8,.38), inset 0 1px 0 rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.15);
  backdrop-filter: blur(13px) saturate(1.15);
}
.brand-one .brand-logo-gallery .brand-one__single img{
  filter: grayscale(100%) brightness(1.9) contrast(1.05) !important;
  opacity: .88 !important;
}
.brand-one .brand-logo-gallery .brand-one__single:hover{
  border-color: rgba(140,200,255,.50) !important;
  box-shadow: 0 14px 38px rgba(0,0,8,.46), 0 0 24px rgba(90,160,255,.18) !important;
  transform: translateY(-3px);
}
.brand-one .brand-logo-gallery .brand-one__single:hover img{
  filter: none !important; opacity: 1 !important;
}

/* ---- "Certified Partner With" logos → glass tiles with a glass border ---- */
.partner-logo{
  background: linear-gradient(155deg, rgba(40,48,94,.44) 0%, rgba(13,18,42,.54) 100%) !important;
  border: 1px solid rgba(165,195,255,.30) !important;
  border-radius: 14px !important;
  padding: 16px 22px !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.15);
  backdrop-filter: blur(13px) saturate(1.15);
  box-shadow: 0 10px 28px rgba(0,0,8,.34), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.partner-logo:hover{
  border-color: rgba(140,200,255,.50) !important;
  box-shadow: 0 14px 34px rgba(0,0,8,.42), 0 0 22px rgba(90,160,255,.18) !important;
}
.partner-logo img{ filter: grayscale(15%) !important; opacity: .95 !important; }

/* ---- Dark-styled cards that pre-dated the glass theme → unify them ----
   (testimonial slider items + the contact form/info panels were already dark
   but used an older flat style; bring them onto the same frosted glass) */
.testimonial-3__item,
.contact-form-card,
.contact-main .info-card,
.contact-main .contact-form-card{
  background: linear-gradient(155deg, rgba(40,48,94,.46) 0%, rgba(13,18,42,.56) 100%) !important;
  border: 1px solid rgba(165,195,255,.32) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(0,0,10,.50), inset 0 1px 0 rgba(255,255,255,.13) !important;
}
.testimonial-3__item:hover{
  border-color: rgba(125,200,255,.42) !important;
  box-shadow: 0 22px 62px rgba(0,0,8,.55), 0 0 34px rgba(90,160,255,.20) !important;
}
/* contact form fields → glassy to match */
.contact-quote-form input, .contact-quote-form textarea, .contact-quote-form select,
.contact-form-card input, .contact-form-card textarea, .contact-form-card select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(150,178,255,.20) !important;
  color: #fff !important;
}
.contact-quote-form input:focus, .contact-quote-form textarea:focus, .contact-quote-form select:focus,
.contact-form-card input:focus, .contact-form-card textarea:focus, .contact-form-card select:focus{
  border-color: rgba(140,200,255,.6) !important;
  background: rgba(120,170,255,.10) !important;
}

/* ========================================================================
   MODERN MOBILE DRAWER — glassy cosmic panel
   ======================================================================== */
.mya-drawer{
  width: min(360px, 88vw) !important;
  background: linear-gradient(165deg, rgba(20,15,50,.97) 0%, rgba(8,10,26,.98) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-right: 1px solid rgba(150,175,255,.16) !important;
  box-shadow: 12px 0 60px rgba(0,0,0,.6) !important;
}
.mya-drawer::before{   /* nebula glow at the top */
  content:""; position:absolute; left:0; right:0; top:0; height:260px; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(149,76,255,.24), transparent 62%),
    radial-gradient(120% 80% at 95% 6%, rgba(46,150,225,.18), transparent 60%);
}
.mya-drawer__panel{ position:relative; z-index:1; padding: 0 0 8px !important; }

/* glass close button, top-right */
.mya-drawer__close, .mya-drawer-close{
  position:absolute !important; top:16px; right:16px; z-index:10 !important;
  width:44px !important; height:44px !important; border-radius:50% !important;
  background: rgba(255,255,255,.07) !important;
  border:1px solid rgba(165,195,255,.24) !important;
  color:#fff !important; font-size:18px !important;
  cursor:pointer !important;
  transition: background .2s, border-color .2s, transform .25s !important;
}
/* keep the close icon click reaching the button, not the glyph */
.mya-drawer__close > *{ pointer-events:none; }
/* the animated top bar must not eat clicks */
.mya-drawer__panel::before{ pointer-events:none; }
.mya-drawer__close:hover, .mya-drawer-close:hover{
  background: rgba(255,107,0,.20) !important; border-color: rgba(255,107,0,.45) !important;
  transform: rotate(90deg);
}

/* nav area + "MENU" label */
.mya-mobile-nav{ position:relative; padding: 70px 16px 16px !important; }
.mya-mobile-nav::before{
  content:"Menu"; position:absolute; top:24px; left:22px;
  font: 800 12px/1 'Sora', serif; letter-spacing:2.5px; text-transform:uppercase;
  color: rgba(175,195,255,.6);
}
/* nav links */
.mya-mobile-nav ul{ list-style:none; margin:0; padding:0; }
.mya-mobile-nav ul li a, .mya-mobile-nav a{
  position:relative; display:flex !important; align-items:center;
  padding: 14px 16px !important; margin-bottom: 4px !important;
  border-radius: 12px !important;
  font: 600 16px/1.2 'Sora', serif !important;
  color: rgba(234,240,255,.86) !important;
  border:1px solid transparent !important;
  transition: background .2s, color .2s, border-color .2s, padding-left .22s !important;
}
.mya-mobile-nav ul li a:hover, .mya-mobile-nav a:hover{
  background: rgba(120,160,255,.13) !important;
  border-color: rgba(150,175,255,.22) !important;
  color:#fff !important; padding-left: 22px !important;
}
.mya-mobile-nav .menu-item-has-children > a{ font-weight:700 !important; color:#fff !important; }
/* nested sub-menus (Services / Packages) → indented & subtle */
.mya-mobile-nav .sub-menu{
  margin: 2px 0 10px 12px !important; padding-left: 12px !important;
  border-left: 1px solid rgba(150,175,255,.20) !important;
}
.mya-mobile-nav .sub-menu li a{
  font: 500 14.5px/1.2 'Inter', serif !important;
  color: rgba(208,218,255,.74) !important; padding: 10px 14px !important;
}

/* --- Accordion submenu (built by JS: .mya-has-sub / .mya-sub-toggle / .mya-submenu) --- */
.mya-mobile-nav .mya-has-sub{ position:relative !important; }
.mya-mobile-nav .mya-has-sub > a{ padding-right: 56px !important; }
.mya-sub-toggle{
  position:absolute !important; top:7px; right:8px; padding:0 !important;
  width:38px; height:38px; border-radius:11px;
  background: rgba(255,255,255,.06); border:1px solid rgba(165,195,255,.20);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .2s, border-color .2s;
}
.mya-sub-toggle:hover{ background: rgba(120,160,255,.18); border-color: rgba(150,175,255,.32); }
.mya-caret{ display:block; font-size:12px; line-height:1; transition: transform .28s ease; }
.mya-sub-toggle[aria-expanded="true"]{ background: rgba(255,107,0,.20); border-color: rgba(255,107,0,.45); }
.mya-sub-toggle[aria-expanded="true"] .mya-caret{ transform: rotate(180deg); }
.mya-submenu[hidden]{ display:none !important; }
.mya-submenu{
  margin: 2px 0 10px 10px !important; padding-left: 12px !important;
  border-left: 1px solid rgba(150,175,255,.20) !important;
  animation: drawerSub .28s ease both;
}
@keyframes drawerSub{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }

/* creative: animated rainbow-cosmos accent bar across the top of the drawer */
.mya-drawer__panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background: linear-gradient(90deg, #ff6b00, #ffb800, #7c4dff, #2e96e1, #ff6b00);
  background-size: 300% 100%;
  animation: drawerBar 6s linear infinite;
}
@keyframes drawerBar{ to{ background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce){ .mya-drawer__panel::before{ animation:none; } }

/* bottom CTA buttons → pills */
.mya-mobile-cta, .mya-drawer-cta{
  padding: 16px !important; gap: 12px !important; margin-top:auto;
  border-top: 1px solid rgba(150,175,255,.14) !important;
}
.mya-cta{
  border-radius: 50px !important; background: var(--brand-grad) !important;
  padding: 14px 18px !important; box-shadow: 0 8px 24px rgba(255,107,0,.32) !important;
}
.mya-call{
  border-radius: 50px !important; padding: 14px 18px !important;
  border: 1px solid rgba(165,195,255,.28) !important;
  background: rgba(255,255,255,.05) !important; color:#fff !important;
}
.mya-call:hover{ background: rgba(120,160,255,.12) !important; border-color: rgba(140,200,255,.5) !important; }

/* dim + blur the page behind the drawer */
body.drawer-open::after{
  background: rgba(4,6,16,.5) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* staggered slide-in for the links when the drawer opens */
@keyframes drawerIn{ from{opacity:0; transform:translateX(-16px)} to{opacity:1; transform:translateX(0)} }
.mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li{ animation: drawerIn .45s cubic-bezier(.4,0,.2,1) both; }
.mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li:nth-child(1){ animation-delay:.04s }
.mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li:nth-child(2){ animation-delay:.09s }
.mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li:nth-child(3){ animation-delay:.14s }
.mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li:nth-child(4){ animation-delay:.19s }
.mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li:nth-child(5){ animation-delay:.24s }
.mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li:nth-child(6){ animation-delay:.29s }
.mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li:nth-child(n+7){ animation-delay:.33s }
@media (prefers-reduced-motion: reduce){
  .mya-drawer[aria-hidden="false"] .mya-mobile-nav > ul > li{ animation:none; }
  .mya-drawer__close:hover{ transform:none; }
}

/* ========================================================================
   CARD BACKGROUND IMAGE — nebula photo inside every card. A dark overlay sits
   on top so text stays readable. Save the uploaded image as /images/card-bg.jpg
   (until then, cards just show the dark overlay — nothing breaks).
   ======================================================================== */
.service-1__item, .about-stat, .about-stat-lg, .industry-card,
.testimonial-card, .step, .step-card, .wddev-card,
.vm-card, .feat-card, .pkg-card, .brand-one__single,
.blog-card, .blog-featured, .blog-empty-state, .blog-toc, .faq-question,
.legal-nav,
.blog-post-body .tldr-box, .blog-post-body .insight-box,
.blog-post-body .red-flag-box, .blog-post-body .cta-box,
.blog-post-body .author-box, .blog-post-body .checkpoint, .blog-post-body .related,
.testimonial-3__item, .contact-form-card, .contact-main .info-card,
.contact-quote-form,
.partner-logo,
.site-faq .faq-item, .faq-accordion-custom .faq-item, .faq-cat-section .faq-item,
.brand-one .brand-logo-gallery .brand-one__single{
  background:
    linear-gradient(155deg, rgba(10,13,32,.68) 0%, rgba(17,10,34,.64) 100%),
    url('/images/card-bg.jpg') center / cover no-repeat !important;
}