/* Samarth Studio – the lively layer: colour accents, scroll reveals and small loops.
   Light on purpose: CSS transforms and opacity only, no library. Everything stops under reduced motion,
   and nothing is hidden unless fx.js is running (html.fx-on). */
:root {
  --fx-a: #e8642c; --fx-b: #d63f7c; --fx-c: #7b3fa0; --fx-gold: #f2a23a; --fx-green: #1fa855;
  --fx-grad: linear-gradient(100deg, var(--fx-a), var(--fx-b) 55%, var(--fx-c));
  --fx-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------ scroll progress line */
.fx-progress { position: fixed; left: 0; top: 0; z-index: 200; width: 100%; height: 3px; background: var(--fx-grad); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ------------------------------------------------ hero: drifting colour and a living phone */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hero::before { width: 520px; height: 520px; left: -220px; top: -180px; background: radial-gradient(closest-side, rgba(242, 162, 58, .55), rgba(242, 162, 58, 0)); animation: fx-drift-a 14s ease-in-out infinite alternate; }
.hero::after { width: 560px; height: 560px; right: -260px; top: 22%; background: radial-gradient(closest-side, rgba(214, 63, 124, .34), rgba(214, 63, 124, 0)); animation: fx-drift-b 17s ease-in-out infinite alternate; }
@keyframes fx-drift-a { to { transform: translate3d(90px, 70px, 0) scale(1.15); } }
@keyframes fx-drift-b { to { transform: translate3d(-80px, -60px, 0) scale(.9); } }
.hero__kicker .dot { background: var(--fx-green); box-shadow: 0 0 0 0 rgba(31, 168, 85, .5); animation: fx-ping 2.2s ease-out infinite; }
@keyframes fx-ping { 70%, 100% { box-shadow: 0 0 0 9px rgba(31, 168, 85, 0); } }

.hero__media.stage-device { background: linear-gradient(150deg, #f6d9b8, #eab3b0 55%, #cfa3c9); overflow: hidden; }
.hero__media.stage-device::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 70%, rgba(255, 255, 255, .35) 80%, rgba(255, 255, 255, 0) 90%); animation: fx-spin 16s linear infinite; }
@keyframes fx-spin { to { transform: rotate(1turn); } }
.hero__media .device { animation: fx-float 6s ease-in-out infinite; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 50px -22px rgba(53, 26, 43, .55); }
@keyframes fx-float { 50% { transform: translateY(-10px) rotate(-1.2deg); } }

/* three sites take turns on the hero phone */
.fx-cycle { position: relative; flex: 1; min-height: 0; }
.fx-cycle > .site { position: absolute; inset: 0; background: #fff; opacity: 0; animation: fx-cycle 10.5s infinite; }
.fx-cycle > .site:nth-child(1) { opacity: 1; }
.fx-cycle > .site:nth-child(2) { animation-delay: 3.5s; }
.fx-cycle > .site:nth-child(3) { animation-delay: 7s; }
@keyframes fx-cycle { 0% { opacity: 0; transform: translateY(14px); } 5%, 33% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-10px); } }

/* little notices that pop beside the phone */
.fx-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; background: #fff; color: #1d2330; font: 600 12px/1 var(--font-text); box-shadow: 0 10px 24px -10px rgba(53, 26, 43, .5); white-space: nowrap; animation: fx-chip 7s var(--fx-ease) infinite both; }
.fx-chip i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-green); flex: none; }
.fx-chip i svg { width: 12px; height: 12px; }
.fx-chip--a { left: 6%; top: 16%; }
.fx-chip--b { right: 5%; bottom: 14%; animation-delay: 3.5s; }
.fx-chip--b i { background: #1a73e8; }
@keyframes fx-chip { 0%, 6% { opacity: 0; transform: translateY(12px) scale(.9); } 12%, 48% { opacity: 1; transform: none; } 56%, 100% { opacity: 0; transform: translateY(-8px) scale(.96); } }

/* ------------------------------------------------ the running strip of trades */
.fx-strip { background: #351a2b; color: #edccbe; overflow: hidden; padding: 14px 0; }
.fx-strip__track { display: flex; width: max-content; animation: fx-marquee 32s linear infinite; }
.fx-strip ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.fx-strip li { display: flex; align-items: center; gap: 18px; padding-right: 18px; font: 400 20px/1.2 var(--font-display); white-space: nowrap; }
.fx-strip li::after { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--fx-gold); }
.fx-strip li:nth-child(3n+2)::after { background: var(--fx-b); }
.fx-strip li:nth-child(3n)::after { background: var(--fx-green); }
@keyframes fx-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------ colour accents through the page */
.rows__value { font-weight: 600; }
#included .rows__value::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; border-radius: 50%; background: var(--fx-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
#addons .rows__value { color: #a8351f; }
.step-num { background: var(--fx-grad); color: #fff; border-color: transparent; font-weight: 600; }
#work .panel { background: linear-gradient(160deg, #f3d6bd, #e7b9b2); }
#work .card:nth-child(2) .panel { background: linear-gradient(160deg, #f6ddb0, #eeb89a); }
#work .card:nth-child(3) .panel { background: linear-gradient(160deg, #e3c6d8, #c9b3dc); }
#work .device, .steps-panel .device, .addons-stage .device { box-shadow: 0 24px 40px -22px rgba(53, 26, 43, .6); }
#included .stage-device { background: linear-gradient(150deg, #f6d9b8, #eab3b0); }
.addons-stage { background: linear-gradient(160deg, #cfe0ee, #d9c8e6); }
.browser { box-shadow: 0 26px 44px -24px rgba(53, 26, 43, .55); }
.site__wa { position: relative; overflow: hidden; }

/* "why" on a dark ground with a slow glow */
.fx-why { position: relative; isolation: isolate; overflow: hidden; }
.fx-why::before { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; right: -240px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 63, 124, .5), rgba(214, 63, 124, 0)); animation: fx-drift-b 15s ease-in-out infinite alternate; }
.fx-why::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; left: -220px; bottom: -240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 100, 44, .42), rgba(232, 100, 44, 0)); animation: fx-drift-a 18s ease-in-out infinite alternate; }
.fx-why.mo-wh strong .mo-w.is-on, .fx-why strong { color: var(--fx-gold); }

/* prices: the pick glows, every card answers a tap */
#prices .plan.is-featured { border: 2px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(120deg, var(--fx-a), var(--fx-b), var(--fx-c), var(--fx-gold), var(--fx-a)) border-box; background-size: auto, 300% 100%; animation: fx-border 6s linear infinite; box-shadow: 0 22px 44px -26px rgba(214, 63, 124, .7); }
@keyframes fx-border { to { background-position: 0 0, 300% 0; } }
#prices .plan__badge { background: var(--fx-grad); color: #fff; border-color: transparent; }
#prices .card--plan:active { transform: scale(.985); }
#prices .plan__price { background: var(--fx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; width: fit-content; }
#prices .plan__price small { -webkit-text-fill-color: var(--muted); }

/* the closing call: a dark card with a glow */
.fx-close { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 6vw, 64px) clamp(20px, 5vw, 56px); border-radius: var(--r-lg, 20px); background: #351a2b; }
.fx-close::before { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; right: -220px; bottom: -300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 162, 58, .5), rgba(242, 162, 58, 0)); animation: fx-drift-b 13s ease-in-out infinite alternate; }
.fx-close::after { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; left: -200px; top: -240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 63, 124, .45), rgba(214, 63, 124, 0)); animation: fx-drift-a 16s ease-in-out infinite alternate; }

/* WhatsApp buttons: an icon and a passing shine */
.fx-wa { position: relative; overflow: hidden; }
.fx-wa > .fx-wa__ico { width: 18px; height: 18px; margin-right: 8px; flex: none; color: #4be08a; }
.fx-wa::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: fx-shine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes fx-shine { 0%, 55% { left: -40%; } 85%, 100% { left: 130%; } }
.ground-inverse .fx-wa > .fx-wa__ico { color: #128c4a; }

/* ------------------------------------------------ scroll reveals (only when fx.js is running) */
.fx-on .fx-r:not(.fx-in) { opacity: 0; }
.fx-on .fx-r.fx-in { animation: fx-up .8s var(--fx-ease) backwards; animation-delay: var(--fx-d, 0s); }
@keyframes fx-up { from { opacity: 0; transform: translateY(28px); } }
.fx-on .fx-r.fx-pop.fx-in { animation-name: fx-pop; }
@keyframes fx-pop { from { opacity: 0; transform: translateY(36px) scale(.94); } }
.fx-on .rows > li.fx-r.fx-in { animation-name: fx-side; animation-duration: .6s; }
@keyframes fx-side { from { opacity: 0; transform: translateX(-18px); } }

/* things that play once when seen */
.fx-on .chat:not(.fx-see) > span, .fx-on .review-marks:not(.fx-see) > span, .fx-on .live-pill:not(.fx-see) { opacity: 0; }
.fx-on .chat.fx-see > span { animation: fx-bubble .5s var(--fx-ease) backwards; transform-origin: 100% 100%; }
.fx-on .chat.fx-see > .me { animation-delay: .35s; }
.fx-on .chat.fx-see > .us { animation-delay: 1.5s; transform-origin: 0 100%; }
@keyframes fx-bubble { from { opacity: 0; transform: translateY(10px) scale(.7); } }
.fx-on .review-marks.fx-see > span { animation: fx-bubble .5s var(--fx-ease) backwards .5s; transform-origin: 0 50%; }
.fx-on .review-marks.fx-see > span + span { animation-delay: 1.1s; }
.fx-on .live-pill.fx-see { animation: fx-bubble .5s var(--fx-ease) backwards .5s; }
.live-pill::before { animation: fx-ping 2s ease-out infinite; }
.fx-on .t-maps.fx-see .maps__map::after { animation: fx-pin .7s cubic-bezier(.3, 1.6, .5, 1) backwards .4s; }
@keyframes fx-pin { from { opacity: 0; transform: translateY(-60px) rotate(-45deg); } }
.fx-on .t-maps .maps__card { transition: transform .7s var(--fx-ease) .2s; }
.fx-on .t-maps:not(.fx-see) .maps__card { transform: translateY(100%); }
.fx-on .fx-r.fx-in .device { animation: fx-rise .9s var(--fx-ease) backwards; animation-delay: calc(var(--fx-d, 0s) + .15s); }
@keyframes fx-rise { from { transform: translateY(50px) rotate(4deg); } }

/* ------------------------------------------------ phones */
@media (max-width: 639px) {
  .hero__media .device { --w: 178px; border-radius: 30px; }
  .hero__media .device__screen { border-radius: 24px; }
  .hero__media .site__list { display: grid; margin: 8px 8px 0; }
  .hero__media .site__list span { font-size: 9px; padding: 5px 2px; }
  .fx-chip { height: 30px; font-size: 11px; }
  .fx-chip--a { left: 3%; top: 4%; }
  .fx-chip--b { right: 3%; bottom: 6%; }
  /* on a phone a section is as tall as what it holds: no empty screens between sections */
  main > .section:not(.statement), footer.closing { min-height: 0 !important; }
  main > .section.statement { min-height: 78vh !important; }
  .fx-strip li { font-size: 17px; }
  .addons-stage { min-height: 520px !important; }
  .faq-chat { height: 260px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .hero__media.stage-device::before, .hero__media .device, .fx-chip, .fx-strip__track, .fx-why::before, .fx-why::after,
  .fx-close::before, .fx-close::after, .fx-wa::after, #prices .plan.is-featured, .hero__kicker .dot, .live-pill::before { animation: none; }
  .fx-cycle > .site { animation: none; }
  .fx-chip { opacity: 1; }
  .fx-strip { overflow-x: auto; }
  .fx-progress { display: none; }
}

/* loops rest while off screen (fx.js) */
.fx-rest, .fx-rest *, .fx-rest::before, .fx-rest::after, .fx-rest *::before, .fx-rest *::after { animation-play-state: paused !important; }