/* Sunset Solutions: shared section scenery (homepage and services page).
   Dark "night" sections, vibrant "daylight" sections, the giant scrolling words,
   the sunset horizon between them and the process timeline.
   Transform and opacity are the only things that animate. */
:root { --night: #17121C; --ivory: #FBF7F2; --sun: #FF9A5C; }

/* =====================================================================
   Night sections
   ===================================================================== */
.section.dark { background: var(--night); color: var(--ivory); overflow: clip; isolation: isolate; }
.section.dark .eyebrow { color: rgba(251, 247, 242, .6); }
.section.dark h2, .section.dark h3 { color: var(--ivory); }
.section.dark .section-head h2 em { color: var(--sun); }
.section.dark .lead { color: rgba(251, 247, 242, .74); }
.section.dark .link, .section.dark .text-btn { color: var(--ivory); }
.section.dark .link span, .section.dark .text-btn span { background-image: linear-gradient(rgba(251, 247, 242, .3), rgba(251, 247, 242, .3)); }
/* A low sunset glow along the bottom edge, so night hands over to daylight instead of cutting to it */
.section.dark::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(1400px, 180vw); height: 340px; translate: -50% 50%; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 24, .30), rgba(233, 30, 99, .16) 55%, rgba(233, 30, 99, 0));
}

/* =====================================================================
   Daylight sections: saturated sunrise colour, drifting warm light,
   a giant outlined word that slides as you scroll.
   ===================================================================== */
.glow {
  overflow: clip; isolation: isolate; background: var(--sec-bg, var(--bg));
  --muted: #574B5C;                       /* a touch darker so body text stays readable on the colour */
  --line: rgba(176, 23, 79, .14);
  --line-strong: rgba(176, 23, 79, .26);
}
.glow::after {
  content: ""; position: absolute; inset: -12%; z-index: -2; pointer-events: none;
  background: var(--sec-light);
  animation: day-drift 24s ease-in-out infinite alternate;
}
/* Each section has its own sunrise: base wash + two light pools */
.glow-websites, .glow-create {
  --sec-bg: linear-gradient(160deg, #FFE2D2 0%, #FFD9E2 100%);
  --sec-light: radial-gradient(38% 46% at 88% 12%, rgba(255, 138, 60, .50), transparent 70%), radial-gradient(36% 42% at 6% 88%, rgba(233, 30, 99, .28), transparent 70%);
}
.glow-tools {
  --sec-bg: linear-gradient(160deg, #FFEBCF 0%, #FFE0D6 100%);
  --sec-light: radial-gradient(36% 42% at 12% 14%, rgba(255, 186, 50, .45), transparent 70%), radial-gradient(40% 46% at 92% 82%, rgba(233, 30, 99, .24), transparent 70%);
}
.glow-addons, .glow-about {
  --sec-bg: linear-gradient(160deg, #FFDCE5 0%, #FFE3D3 100%);
  --sec-light: radial-gradient(40% 50% at 84% 26%, rgba(233, 30, 99, .30), transparent 70%), radial-gradient(36% 44% at 14% 92%, rgba(255, 122, 24, .34), transparent 70%);
}
.glow-support {
  --sec-bg: linear-gradient(160deg, #FFE6CC 0%, #FFDDE3 100%);
  --sec-light: radial-gradient(36% 44% at 8% 10%, rgba(255, 138, 60, .45), transparent 70%), radial-gradient(38% 46% at 94% 70%, rgba(194, 24, 91, .24), transparent 70%);
}
.glow-process {
  --sec-bg: linear-gradient(180deg, #FFE4D8 0%, #FFD6CF 100%);
  --sec-light: radial-gradient(60% 60% at 50% 110%, rgba(255, 122, 24, .50), rgba(233, 30, 99, .2) 50%, transparent 75%);
}

/* Giant outlined word behind each daylight section */
.bg-word {
  position: absolute; z-index: -1; left: 0; top: clamp(16px, 3vw, 40px); pointer-events: none; user-select: none; white-space: nowrap;
  font: 500 clamp(6.5rem, 17vw, 15rem)/1 var(--head); letter-spacing: -.02em; text-transform: uppercase;
  color: rgba(255, 255, 255, .22); -webkit-text-stroke: 1.5px rgba(214, 25, 92, .24);
  transform: translateX(4%);
}
@supports (animation-timeline: view()) {
  .bg-word { animation: word-slide linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}

/* Sunset accents instead of grey */
.glow .eyebrow { color: #A3124A; }
.glow .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; border-radius: 2px; background: linear-gradient(90deg, #E91E63, #FF7A18); }
.glow .section-head h2 em {
  font-style: normal; background: linear-gradient(90deg, #D81B60, #F4511E); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@keyframes day-drift { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.06); } }
@keyframes word-slide { from { transform: translateX(10%); } to { transform: translateX(-30%); } }
@media (max-width: 780px) { .bg-word { -webkit-text-stroke-width: 1px; top: 12px; } }
@media (prefers-reduced-motion: reduce) { .bg-word { transform: none; } }

/* =====================================================================
   Process timeline: steps light up and the line fills as you reach them
   ===================================================================== */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: step; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: var(--line-strong); }
.timeline::after {
  content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: linear-gradient(90deg, #E91E63, #FF7A18);
  transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}
html:not(.js) .timeline::after { transform: scaleX(1); }
.timeline li { position: relative; z-index: 1; counter-increment: step; }
.timeline li::before {
  content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line-strong); font: 500 .8125rem var(--head); color: var(--text);
}
.timeline li.lit::before, html:not(.js) .timeline li::before { border-color: transparent; background: linear-gradient(135deg, #E91E63, #FF7A18); color: var(--night); }
.timeline h3 { margin-top: 18px; font-size: 1.125rem; }
.timeline p { margin-top: 8px; color: var(--muted); font-size: .9375rem; }
@media (max-width: 960px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before, .timeline::after { left: 19px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .timeline::after { transform: scaleY(var(--progress, 0)); transform-origin: top; }
  html:not(.js) .timeline::after { transform: scaleY(1); }
  .timeline li { display: grid; grid-template-columns: 40px 1fr; gap: 0 18px; padding-bottom: 28px; }
  .timeline li::before { grid-row: 1 / 3; }
  .timeline h3 { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline::after { transform: scaleX(1); }
  .timeline li::before { border-color: transparent; background: linear-gradient(135deg, #E91E63, #FF7A18); color: var(--night); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 960px) { .timeline::after { transform: scaleY(1); } }

/* Footer: a warm sunrise wash after the night finale, instead of plain cream */
.footer { --bg: #FFE8DC; --line: rgba(176, 23, 79, .14); --muted: #574B5C; background: linear-gradient(180deg, #FFDCD0 0%, var(--bg) 40%); }
.footer .wordmark, .wm-veil { background: var(--bg); }