/* Original, lightweight vector scenes. Their text alternatives live beside them. */
.marketing-page { --art-purple: #7650db; --art-peach: #fff0df; --art-mint: #e1f4eb; --art-lilac: #ede5ff; --art-blue: #e3edff; }
html[data-theme=dark] .marketing-page { --art-peach: #2c2017; --art-mint: #152b25; --art-lilac: #251a3d; --art-blue: #172237; }
.motion-art { --art-color: #7650db; --art-wash: #e5dafa; flex-shrink: 0; inline-size: 220px; max-inline-size: 100%; pointer-events: none; }
.motion-art svg { display: block; inline-size: 100%; block-size: auto; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.art-paper { fill: #fffdfb; stroke: #b6a6d2; }
.art-ink { fill: none; stroke: #847395; }
.art-solid { fill: var(--art-color); stroke: var(--art-color); }
.art-soft { fill: var(--art-wash); stroke: none; }
.art-accent { fill: var(--art-color); stroke: var(--art-color); }
path.art-accent { fill: none; }
.art-white { fill: none; stroke: #fff; }
.art-float, .art-pencil, .art-cursor, .art-pulse, .art-spark, .art-bars { transform-box: fill-box; transform-origin: center; }
.art-bars { transform-origin: center bottom; }
.art-stock, .art-launch { --art-color: #23846c; --art-wash: #c4eadb; }
.art-plan, .art-transfer { --art-color: #bc6736; --art-wash: #f8d9b3; }
.art-cloud, .art-growth { --art-color: #426bcb; --art-wash: #d5e2ff; }

/* Illustrations give the offers and process a visual language of their own. */
.plan-art { inline-size: 88px; margin: -10px 0 6px -8px; }
.pricing-grid .price-card:first-child:not(.featured) .plan-header { background: var(--art-mint); }
.pricing-grid .price-card:nth-child(3):not(.featured) .plan-header { background: var(--art-peach); }
.pricing-grid .featured .plan-art { --art-color: #f6c97e; --art-wash: #f8e5c5; }
.process-art { inline-size: 200px; margin-block: 1rem -.5rem; }
.marketing-page .process-grid > li:nth-child(2) .process-art { background: var(--art-peach); border-radius: 60% 40% 50% 35%; }
.marketing-page .process-grid > li:nth-child(3) .process-art { background: var(--art-lilac); border-radius: 42% 58% 35% 55%; }
.marketing-page .process-grid > li:nth-child(4) .process-art { background: var(--art-mint); border-radius: 58% 42% 50% 40%; }
.service-art { display: grid; place-items: center; inline-size: 100%; block-size: 180px; margin-block: 0 1.75rem; border-radius: 20px; background: var(--art-lilac); }
.service-art > svg { inline-size: 260px; max-inline-size: 90%; }
.service-art.art-stock { background: var(--art-mint); }
.service-art.art-cloud { background: var(--art-blue); }
.service-art.art-transfer { background: var(--art-peach); }
.professional-page .pro-service { border-block-start: 0; padding-block-start: 0; }
.agile-art { inline-size: 165px; margin: -.75rem 0 .75rem; }
.faq-art { inline-size: 185px; margin: -.5rem 0 1rem -10px; }
.appointment-art { inline-size: 170px; margin: -1.5rem 0 .75rem -18px; }
.contact-art { inline-size: 170px; margin: -1.5rem 0 .75rem -18px; }
.marketing-page .accessibility-section { background: var(--art-mint); }
.marketing-page .accessibility-symbol { color: #22775e; }
html[data-theme=dark] .marketing-page .accessibility-symbol { color: #8de0c3; }

/* External inspiration is separate from Popoto's real client work. */
.inspiration-section { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--art-peach); }
.inspiration-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-block-end: 2.5rem; }
.inspiration-heading h2 { font-size: clamp(2.25rem, 4.2vw, 4rem); letter-spacing: -.04em; line-height: 1.12; margin-block: 0 1.25rem; }
.inspiration-heading p { max-inline-size: 49ch; font-size: 1rem; line-height: 1.75; color: var(--muted); margin: 0; }
.inspiration-heading > a { flex-shrink: 0; min-block-size: 48px; color: var(--violet-text); }
.inspiration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.inspiration-card { display: block; min-inline-size: 0; color: var(--ink); text-decoration: none; }
.inspiration-picture { position: relative; isolation: isolate; aspect-ratio: 1.3; overflow: hidden; border: 1px solid var(--line-accent); border-radius: 18px; background: #e9e3f0; }
.inspiration-picture > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.inspiration-architecture > img { object-position: top; }
.inspiration-picture > span { position: absolute; inset: auto 12px 12px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: 8px; background: #251b37; color: #fff; padding: .625rem .875rem; font-size: .75rem; line-height: 1.5; }
.inspiration-picture svg, .inspiration-caption > svg { inline-size: 20px; block-size: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; }
.inspiration-caption { display: flex; align-items: start; justify-content: space-between; gap: .75rem; padding-block-start: 1.125rem; }
.inspiration-caption h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; margin: 0 0 .375rem; }
.inspiration-caption p { font-size: .8125rem; line-height: 1.6; color: var(--muted); margin: 0; }
.inspiration-credit { max-inline-size: 88ch; margin: 2rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.75; }
.inspiration-credit a { text-decoration: underline; text-underline-offset: .2em; }
.inspiration-card:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 6px; border-radius: 18px; }

/* This control appears only while an animated illustration is on screen. */
.illustration-toggle { position: fixed; z-index: 25; inset: auto auto 20px 20px; display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; padding: .5rem .875rem; border: 1px solid var(--line-strong); border-radius: 24px; background: var(--paper); color: var(--ink); font: inherit; font-size: .75rem; cursor: pointer; }
.illustration-toggle[hidden] { display: none; }
.illustration-toggle svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.illustration-toggle:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 4px; }
.art-play-icon, .illustration-toggle[aria-pressed=true] .art-pause-icon { display: none; }
.illustration-toggle[aria-pressed=true] .art-play-icon { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* No JS frame loop: the browser animates small SVG groups, only while visible. */
  html:not(.reduce-motion) .art-ready .art-float { animation: art-float 4.6s ease-in-out infinite; }
  html:not(.reduce-motion) .art-ready .art-pencil { animation: art-pencil 4.6s ease-in-out infinite; }
  html:not(.reduce-motion) .art-ready .art-cursor { animation: art-cursor 4.6s ease-in-out infinite; }
  html:not(.reduce-motion) .art-ready .art-dots circle { animation: art-dot 2.2s ease-in-out infinite; }
  html:not(.reduce-motion) .art-ready .art-dots circle:nth-child(2) { animation-delay: .18s; }
  html:not(.reduce-motion) .art-ready .art-dots circle:nth-child(3) { animation-delay: .36s; }
  html:not(.reduce-motion) .art-ready :is(.art-pulse, .art-spark) { animation: art-pulse 3.6s ease-in-out infinite; }
  html:not(.reduce-motion) .art-ready .art-travel { animation: art-travel 3.2s ease-in-out infinite; }
  html:not(.reduce-motion) .art-ready .art-bars { animation: art-bars 4.6s ease-in-out infinite; }
  html:not(.reduce-motion) .art-ready :is(.art-check, .art-type) { stroke-dasharray: 1; animation: art-draw 4.6s ease-in-out infinite; }
  html:not(.reduce-motion) .art-ready .art-delay { animation-delay: -.8s; }
  html:not(.reduce-motion) .art-ready:not(.art-running) * { animation-play-state: paused; }
  .inspiration-picture img { transition: transform 650ms cubic-bezier(.16,1,.3,1); }
  .inspiration-caption > svg { transition: transform 300ms ease; }
  @media (hover:hover) {
    html:not(.reduce-motion) .inspiration-card:hover img { transform: scale(1.045); }
    html:not(.reduce-motion) .inspiration-card:hover .inspiration-caption > svg { transform: translate(3px,-3px); }
  }
}
@keyframes art-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes art-pencil { 0%,55%,100% { transform: translate(0,0) rotate(0); } 20%,35% { transform: translate(-6px,5px) rotate(-7deg); } }
@keyframes art-cursor { 0%,100% { transform: translate(0,0); } 40%,65% { transform: translate(-16px,-12px); } 52% { transform: translate(-16px,-12px) scale(.88); } }
@keyframes art-dot { 0%,65%,100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes art-pulse { 0%,100% { transform: scale(.88) rotate(-8deg); opacity: .65; } 50% { transform: scale(1.12) rotate(8deg); opacity: 1; } }
@keyframes art-travel { 0%,15% { transform: translateX(0); opacity: .3; } 65%,85% { transform: translateX(28px); opacity: 1; } 100% { transform: translateX(28px); opacity: .3; } }
@keyframes art-bars { 0%,100% { transform: scaleY(.65); } 50%,80% { transform: scaleY(1); } }
@keyframes art-draw { 0%,12% { stroke-dashoffset: 1; opacity: .25; } 45%,90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .25; } }
@media (min-width:601px) and (max-width:920px) {
  .pricing-grid .price-card:first-child .plan-header, .pricing-grid .price-card:nth-child(3) .plan-header { background: none; }
  .pricing-grid .featured .plan-art { --art-color: #bc6736; --art-wash: #f8d9b3; }
}
@media (max-width:800px) {
  .inspiration-heading { align-items: start; flex-direction: column; gap: 1rem; }
  .inspiration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 1rem; }
  .inspiration-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: center; }
  .inspiration-card:last-child .inspiration-picture { aspect-ratio: 1.5; }
}
@media (max-width:600px) {
  .process-art { inline-size: 165px; margin-block: -.5rem .25rem; }
  .marketing-page .process-grid h3 { margin-block-start: .5rem; }
  .service-art { block-size: 155px; margin-block-end: 1.25rem; }
  .service-art > svg { inline-size: 220px; }
  .agile-art { inline-size: 145px; }
  .appointment-art, .contact-art { inline-size: 135px; margin-block: -.75rem .5rem; }
  .faq-art { inline-size: 145px; }
  .inspiration-grid { grid-template-columns: 1fr; gap: 2rem; }
  .inspiration-picture { aspect-ratio: 1.35; }
  .inspiration-card:last-child { display: block; }
  .inspiration-card:last-child .inspiration-picture { aspect-ratio: 1.35; }
  .illustration-toggle { inset-inline-start: 12px; inset-block-end: 18px; inline-size: 44px; padding: 10px; }
  .illustration-toggle > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (forced-colors: active) {
  .motion-art svg { forced-color-adjust: none; }
  .inspiration-picture > span { border: 1px solid CanvasText; }
}