/* =========================================================================
   MOLISHA — FULL LOGO-COLOUR SYSTEM (loaded last)
   Logo colours: navy wordmark · orange arrow · coral · magenta-pink swoosh
   · violet · electric blue. Every accent uses this spectrum.
   ========================================================================= */
:root{
  --logo-navy:   #0C1B5C;
  --logo-blue:   #1F5BFF;
  --logo-violet: #7B2FF2;
  --logo-pink:   #E8337A;
  --logo-coral:  #FF6B4A;
  --logo-orange: #FC9C0C;
  --grad-logo: linear-gradient(115deg, #FC9C0C 0%, #FF6B4A 22%, #E8337A 45%, #7B2FF2 72%, #1F5BFF 100%);
  --grad-logo-soft: linear-gradient(115deg, rgba(252,156,12,.14), rgba(232,51,122,.12) 45%, rgba(31,91,255,.12));
  --shadow-glow: 0 18px 44px -14px rgba(232,51,122,.45), 0 8px 24px -10px rgba(31,91,255,.35);
}

/* ---------- Scroll progress bar in logo gradient ---------- */
.brand-progress{
  position:fixed; top:0; left:0; height:4px; width:0; z-index:9999;
  background: var(--grad-logo); box-shadow: 0 0 12px rgba(232,51,122,.6);
  transition: width .12s linear;
}

/* ---------- Sticky header: frosted glass + logo-colour underline ---------- */
.site-header{
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  background-image: linear-gradient(#fff,#fff), var(--grad-logo);
  background-origin: border-box; background-clip: padding-box, border-box;
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow: 0 14px 34px -18px rgba(12,27,92,.35); }
.site-header .nav-cta, .btn-primary{
  background: var(--grad-logo) !important;
  background-size: 200% 200% !important;
  color:#fff !important; border:0 !important;
  box-shadow: var(--shadow-glow) !important;
  transition: background-position .6s ease, transform .25s ease, box-shadow .3s ease;
}
.site-header .nav-cta:hover, .btn-primary:hover{
  background-position: 100% 50% !important; transform: translateY(-2px);
  box-shadow: 0 22px 50px -14px rgba(232,51,122,.55), 0 10px 28px -10px rgba(31,91,255,.45) !important;
}
.btn-outline{ border-color: var(--logo-violet) !important; color: var(--logo-violet) !important; }
.btn-outline:hover{ background: var(--grad-logo-soft) !important; }
.btn-outline.on-light{ color: var(--logo-navy) !important; border-color: var(--logo-navy) !important; }

/* ---------- Topbar: logo gradient edge ---------- */
.topbar{ position:relative; }
.topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--grad-logo);
}

/* ---------- Hero: animated logo-colour aurora ---------- */
.hero{ position:relative; overflow:hidden; isolation:isolate; }
.hero::before{
  background:
    radial-gradient(600px 380px at 15% 20%, rgba(252,156,12,.30), transparent 60%),
    radial-gradient(640px 420px at 85% 15%, rgba(232,51,122,.32), transparent 60%),
    radial-gradient(700px 460px at 60% 95%, rgba(123,47,242,.34), transparent 62%),
    radial-gradient(520px 340px at 20% 90%, rgba(31,91,255,.26), transparent 60%) !important;
  animation: auroraShift 14s ease-in-out infinite alternate !important;
  filter: saturate(130%);
}
@keyframes auroraShift{
  0%   { transform: translate3d(-2%,0,0) scale(1); }
  100% { transform: translate3d(2%,-2%,0) scale(1.06); }
}
.hero h1 em{
  background: var(--grad-logo); background-size: 200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradientSlide 6s linear infinite;
}
@keyframes gradientSlide{ to{ background-position: 200% center; } }
.hero-stats div strong{
  background: var(--grad-logo); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Section headings: logo-colour accent rule ---------- */
.section-head h2{ position:relative; padding-bottom:18px; }
.section-head h2::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:84px; height:4px; border-radius:4px; background: var(--grad-logo);
}
.section--dark .section-head h2::after{ box-shadow: 0 0 14px rgba(232,51,122,.5); }

/* ---------- Service cards: gradient frame + glow on hover ---------- */
.service-window{
  position:relative; border:1px solid transparent !important;
  background-image: linear-gradient(#fff,#fff), var(--grad-logo) !important;
  background-origin: border-box !important; background-clip: padding-box, border-box !important;
  transition: transform .35s ease, box-shadow .35s ease;
}
.service-window:hover{ transform: translateY(-6px); box-shadow: var(--shadow-glow); }
.service-window .icon{
  background: var(--grad-logo) !important; color:#fff !important;
  box-shadow: 0 10px 22px -8px rgba(232,51,122,.55);
}
.service-window h3{ transition: color .3s ease; }
.service-window:hover h3{
  background: var(--grad-logo); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.service-window--featured{ box-shadow: var(--shadow-glow) !important; }

/* ---------- Plain cards & feature cards ---------- */
.plain-card, .work-card{
  position:relative; border-radius: 22px; overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.plain-card::before, .work-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:4px; background: var(--grad-logo);
}
.plain-card:hover, .work-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-glow); }

/* ---------- Dark section: colour orbs ---------- */
.section--dark{ position:relative; overflow:hidden; isolation:isolate; }
.section--dark::before{
  content:''; position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(420px 260px at 10% 10%, rgba(252,156,12,.22), transparent 70%),
    radial-gradient(460px 300px at 90% 80%, rgba(31,91,255,.28), transparent 70%),
    radial-gradient(380px 240px at 80% 15%, rgba(232,51,122,.2), transparent 70%);
  animation: auroraShift 18s ease-in-out infinite alternate;
}

/* ---------- Logo-colour footer rule ---------- */
.site-footer{ position:relative; }
.site-footer::before{
  content:''; position:absolute; left:0; right:0; top:0; height:4px; background: var(--grad-logo);
}

/* ---------- Offer card: stronger logo frame ---------- */
.offer-card{ box-shadow: var(--shadow-glow) !important; }
.offer-card__list li{
  border-image: var(--grad-logo) 1;
  background: linear-gradient(#fffdf7,#fffdf7) padding-box, var(--grad-logo) border-box;
  border: 1px solid transparent;
}

/* ---------- Reveal: smoother entrance ---------- */
.reveal{ transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hero::before, .section--dark::before, .hero h1 em{ animation:none !important; }
  .service-window, .plain-card, .work-card, .btn-primary{ transition:none !important; }
}


/* ===== Google Testimonials: auto-scrolling screenshot strip ===== */
.gtesti__viewport{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scrollbar-width:none; padding:8px 0 20px; outline:none;
}
.gtesti__viewport::-webkit-scrollbar{ display:none; }
.gtesti__viewport:focus-visible{ box-shadow:0 0 0 3px rgba(31,91,255,.35); border-radius:18px; }
.gtesti__track{ display:flex; gap:18px; width:max-content; padding:6px 16px; }
.gtesti__item{
  margin:0; flex:0 0 auto; width:300px; background:#fff; border-radius:18px; padding:10px;
  border:1px solid rgba(12,27,92,.08); box-shadow:0 14px 30px rgba(12,27,92,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.gtesti__item:hover{ transform:translateY(-4px); box-shadow:0 22px 40px rgba(12,27,92,.16); }
.gtesti__item a{ display:block; border-radius:12px; overflow:hidden; }
.gtesti__item img{ display:block; width:100%; height:auto; border-radius:12px; background:#F3F4F6; }
.gtesti__item figcaption{ font-size:.85rem; color:#4B5563; padding:8px 4px 2px; line-height:1.4; }
.gtesti__hint{ text-align:center; font-size:.82rem; color:#6B7280; margin:4px 16px 0; }
@media (max-width: 640px){
  .gtesti__item{ width:248px; }
  .gtesti__track{ gap:14px; }
}
@media (prefers-reduced-motion: reduce){
  .gtesti__item:hover{ transform:none; }
}


/* ===== Home: scrolling launch-offer ticker (under the header) ===== */
.offer-ticker{
  overflow:hidden; background:linear-gradient(90deg,#F97316 0%,#DC2626 50%,#F97316 100%);
  color:#fff; font-weight:600; font-size:.9rem; white-space:nowrap; position:relative; z-index:2;
  box-shadow:0 6px 18px rgba(220,38,38,.25);
}
.offer-ticker__track{ display:flex; width:max-content; animation:offerTicker var(--ticker-speed, 42s) linear infinite; }
.offer-ticker__group{ display:flex; align-items:center; gap:14px; padding:10px 14px; flex:0 0 auto; }
.offer-ticker__dot{ color:#FDE68A; font-size:.8rem; }
.offer-ticker:hover .offer-ticker__track{ animation-play-state:paused; }
@keyframes offerTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width: 640px){
  .offer-ticker{ font-size:.82rem; }
  .offer-ticker__group{ gap:10px; padding:9px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .offer-ticker__track{ animation:none; }
  .offer-ticker{ overflow-x:auto; }
}