/* Ucitava se na prvu interakciju; dimenzije su u critical.css. */
@font-face {
  font-family: "Mrs Saint Delafield";
  src: url("../fonts/Mrs_Saint_Delafield/MrsSaintDelafield-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.goldbold {
  color: var(--gold);
  font-weight: bold;
}
.featured {
  background: #101214;
}

.featured-eyebrow {
  color: var(--gold);
}

.featured h2 span {
  color: var(--gold);
}

.featured-intro {
  color: #adb0b4;
}

.featured-filters button {
  border-color: currentcolor currentcolor transparent;
  border-image: none;
  color: #a9adb0;
  background: transparent;
  cursor: pointer;
  transition: color 180ms, border-color 180ms;
}

.featured-filters button[aria-pressed="true"] {
  border-bottom-color: var(--gold);
  color: #f5f4f0;
}

.site-card {
  border-radius: 12px;
  background: #17191b;
  transition: border-color 220ms, transform 220ms;
}

.site-card-preview {
  background: #15181a;
}

.site-card-monitor {
  border-radius: 12px;
  background: linear-gradient(135deg, #555c62, #24282c 22%, #171a1d 72%, #454c52);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 18px;
}

.site-card-monitor::before,
.site-card-monitor::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--button-angle),
    transparent 0deg 245deg,
    rgba(230, 193, 123, 0.5) 285deg,
    #fff4d6 315deg,
    #e6c17b 335deg,
    transparent 355deg 360deg
  );
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.site-card-monitor::after {
  inset: -3px;
  padding: 3px;
  opacity: 0.6;
  filter: blur(4px);
}
.site-card-meta .dot3 {
  width: 40px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.site-card-meta .dot {
  width: 8px;
  height: 8px;
  background-color: #e6c17b;
  border-radius: 50%;
  z-index: 4;
  border: solid 3px #e6c17b;
}
/* Screen corners follow the 12px bezel optically (a strict 12 − 6 − 1 looks almost square). */
.site-card-screen {
  border-radius: 8px;
  background: #0b0d0f;
}

.site-card-screen img {
  border-radius: 7px;
}

.site-card-chin::after {
  content: "";
  width: 16px;
  height: 2px;
  background: #737a80;
}

.site-card-stand::before,
.site-card-stand::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.site-card-stand::before {
  top: 0px;
  width: 20%;
  height: 22px;
  background: linear-gradient(90deg, #32383d, #646c73 48%, #33393e);
  clip-path: polygon(27% 0px, 73% 0px, 85% 100%, 15% 100%);
}

.site-card-stand::after {
  bottom: 0px;
  width: 36%;
  height: 5px;
  border: 1px solid #5d646a;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(#626a71, #30363b);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 7px;
}

.site-card-category {
  color: var(--gold);
}

.site-card-badge {
  border-radius: 4px;
  color: #e6c991;
  background: #27241e;
}

.site-card-description {
  color: #b0b3b7;
}

.site-card-specs dt {
  color: #91969b;
}

.site-card-specs dd {
  color: #e0e1e2;
}

.site-card-price > span {
  color: #91969b;
}

.site-card-price strong {
  color: var(--gold);
}

.site-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at 0% 100%, rgba(230, 193, 123, 0.22), transparent 70%);
  pointer-events: none;
}

/* Sjaj koji prati kursor po donjem delu karte, samo na hover (podaci stizu iz interactions.js). */
.site-card-body {
  position: relative;
  isolation: isolate;
  border-radius: 0 0 12px 12px;
}

.site-card-body::before,
.detail-summary > .detail-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(220px 170px at var(--card-x, 50%) var(--card-y, 0%), rgba(255, 224, 160, 0.14), transparent 72%);
  transition: opacity 300ms ease;
  pointer-events: none;
}

.site-card-body::after,
.detail-summary > .detail-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(200px 150px at var(--card-x, 50%) var(--card-y, 0%), rgba(255, 224, 160, 0.85), transparent 70%);
  opacity: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 300ms ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-card:hover .site-card-body::before,
  .site-card:hover .site-card-body::after,
  .detail-summary > .detail-panel:hover::before,
  .detail-summary > .detail-panel:hover::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-card-body::before,
  .site-card-body::after,
  .detail-summary > .detail-panel::before,
  .detail-summary > .detail-panel::after {
    transition: none;
  }
}

.site-card-details,
.featured-text-button {
  color: var(--gold);
  background: transparent;
  cursor: pointer;
}

.site-card-details .icon {
  transition: transform 220ms;
}

.featured-query p {
  color: #b0b3b7;
}

.featured-query strong {
  color: #f5f4f0;
}

.featured button:focus-visible,
.featured a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.site-card-preview:focus-visible {
  outline-offset: -4px;
}

@media (hover: hover) and (pointer: fine) {
  .site-card:hover {
    transform: translateY(-4px);
    border-color: #70705f;
  }

  .site-card-details:hover .icon {
    transform: translate(2px, -2px);
  }

  .featured-filters button:hover,
  .featured-text-button:hover,
  .site-card h3 a:hover,
  .site-card-details:hover {
    color: #fff2d5;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Cards and boxes rise a little as they scroll in (interactions.js sets the 45ms steps). */
  .reveal-pending,
  .section-pending {
    opacity: 0;
  }

  .reveal-in {
    animation: reveal-rise 400ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) backwards;
  }

  /* Ivica kartice svetli samo dok je kartica na ekranu (interactions.js dodaje .edge-live). */
  .featured.is-revealed .site-card-monitor::before,
  .featured.is-revealed .site-card-monitor::after {
    animation: 8s linear 0s infinite normal none paused button-edge-orbit;
  }

  .featured.is-revealed .site-card.edge-live .site-card-monitor::before,
  .featured.is-revealed .site-card.edge-live .site-card-monitor::after {
    animation-play-state: running;
  }

  .site-card:nth-child(2) .site-card-monitor::before,
  .site-card:nth-child(2) .site-card-monitor::after {
    animation-delay: -2.6s;
  }

  .site-card:nth-child(3) .site-card-monitor::before,
  .site-card:nth-child(3) .site-card-monitor::after {
    animation-delay: -5.2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-card,
  .site-card-details .icon,
  .featured-filters button {
    transition: none;
  }

  .site-card:hover,
  .site-card-details:hover .icon {
    transform: none;
  }
}

.buying,
.included {
  position: relative;
  isolation: isolate;
}

.buying {
  background: linear-gradient(180deg, #0c0f11, #111213);
}

.buying::before,
.included::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8b7957 35%, #e6c17b 50%, #8b7957 65%, transparent);
  opacity: 0.45;
  pointer-events: none;
}

.buying::after,
.included::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.buying::after {
  background: radial-gradient(ellipse at 88% 92%, #c0924216, transparent 48%);
}

.included::after {
  background: radial-gradient(ellipse at 8% 88%, #ad7c3516, transparent 46%);
}

.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 12% 6%, #c0924218, transparent 46%);
  pointer-events: none;
}

.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 90% 12%, #c0924214, transparent 44%);
  pointer-events: none;
}

.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 120%, #c0924214, transparent 60%);
  pointer-events: none;
}

.buying-eyebrow,
.included-eyebrow,
.buying h2 span,
.included h2 span {
  color: var(--gold);
}

.buying-intro,
.included-intro {
  color: #adb3b7;
}

.buying-journey {
  position: relative;
  isolation: isolate;
  --flow-duration: 8s;
}

.buying-steps {
  position: relative;
}

.buying-flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.buying-flow[hidden] {
  display: none;
}

.buying-flow svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.buying-flow path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.buying-flow-track {
  stroke: #554b39;
  stroke-width: 1;
}

.buying-flow-beam,
.buying-flow-glow {
  --beam-inset: 0px;
  display: none;
  stroke: url(#buying-gold);
  stroke-dasharray: 14 100;
  stroke-dashoffset: calc(14px - var(--beam-inset));
}

.buying-flow-beam {
  stroke-width: 0.25;
  stroke-opacity: 0.45;
}

.buying-flow .buying-flow-beam {
  stroke-linecap: butt;
}

/* Kraci, deblji slojevi dele isti centar: tanak vrh na oba kraja. */
.buying-flow-beam-mid {
  --beam-inset: 2.5px;
  stroke-dasharray: 9 105;
  stroke-width: 0.65;
  stroke: #e6c17b;
  stroke-opacity: 0.7;
}

.buying-flow-beam-body {
  --beam-inset: 4.5px;
  stroke-dasharray: 5 109;
  stroke-width: 1.2;
  stroke: #f4d99a;
  stroke-opacity: 0.9;
}

.buying-flow-beam-core {
  --beam-inset: 6px;
  stroke-dasharray: 2 112;
  stroke-width: 1.8;
  stroke: #fff0c4;
  stroke-opacity: 1;
}

.buying-flow-beam-hot {
  --beam-inset: 6.75px;
  stroke-dasharray: 0.5 113.5;
  stroke-width: 2.5;
  stroke: #fffdf3;
  stroke-opacity: 1;
}

.buying-flow-glow {
  --beam-inset: 5.75px;
  stroke-dasharray: 2.5 111.5;
  stroke-width: 6;
  opacity: 0.65;
  filter: blur(6px);
}

/* Jednostavne linije ostaju i bez JavaScripta. */
.buying-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 62px;
  right: -16px;
  height: 1px;
  background: #554b39;
}

.buying-journey.is-flow-ready .buying-step::after {
  display: none;
}

.buying-number {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  border-color: #8b7957;
  color: #f2d69f;
  background: linear-gradient(145deg, #373127, #141618 64%);
  box-shadow: 0 0 0 6px #101113, inset 0 1px 0 rgba(255, 244, 214, 0.12);
}

.buying-number::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid #ffedc2;
  border-radius: inherit;
  box-shadow: 0 0 15px rgba(230, 193, 123, 0.35), inset 0 0 10px rgba(230, 193, 123, 0.15);
  opacity: 0;
  pointer-events: none;
}

.buying-step h3 {
  color: #f5f4f0;
}

.buying-step p {
  color: #aeb3b7;
}

.buying-bottom {
  justify-content: flex-start;
  border-top-color: #38342b;
}

.buying .button,
.included .button {
  max-width: 100%;
}

.buying .button::before,
.buying .button::after,
.included .button::before,
.included .button::after {
  animation-play-state: paused;
}

.buying.is-in-view .button::before,
.buying.is-in-view .button::after,
.included.is-in-view .button::before,
.included.is-in-view .button::after {
  animation-play-state: running;
}

.included {
  background: #141414;
}

/* Zlatna linija ispod h2 naslova svakog sektora, na svim stranama sajta. */
.featured-heading h2,
.buying-heading h2,
.included-heading h2,
.purchase-chapter h2,
.purchase-closing h2,
h2.section-title {
  position: relative;
}

.featured-heading h2::after,
.buying-heading h2::after,
.included-heading h2::after,
.purchase-chapter h2::after,
.purchase-closing h2::after,
h2.section-title::after {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 84px;
  height: 2px;
  background: linear-gradient(90deg, #fff0ce, var(--gold), transparent);
  pointer-events: none;
}

.included-note {
  color: #adb0b4;
}

.included-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #17191a;
  --item-title: #f5f4f0;
  --item-copy: #b0b3b7;
  --item-icon: var(--gold);
}

.included-item:last-child {
  margin-bottom: 0;
}

/* Pozadina se siri iz donje ivice, bez promene dimenzija stavke. */
.included-item::before {
  content: "";
  position: absolute;
  inset: -1px -18px;
  z-index: -1;
  background: linear-gradient(115deg, #f6e4bd, #e6c17b);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.included-item summary {
  color: var(--item-title);
  cursor: pointer;
  transition: color 220ms ease;
}

.included-item-icon,
.included-toggle {
  color: var(--item-icon);
  stroke-width: 1.5;
  transition: color 220ms ease;
}

.included-toggle {
  border-radius: 50%;
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

.included-toggle-line {
  transform-origin: 12px 12px;
  transition: transform 220ms ease;
}

.included-item[open] .included-toggle-line {
  transform: scaleY(0);
}

.included-content p {
  color: var(--item-copy);
  transition: color 220ms ease;
}

.included-item[open],
.included-item:focus-within {
  --item-title: #111213;
  --item-copy: #302b22;
  --item-icon: #111213;
}

.included-item[open]::before,
.included-item:focus-within::before {
  transform: scaleY(1);
}

.included summary:focus-visible {
  outline: 2px solid #111213;
  outline-offset: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .included-item:hover {
    --item-title: #111213;
    --item-copy: #302b22;
    --item-icon: #111213;
  }

  .included-item:hover::before {
    transform: scaleY(1);
  }
}

@media (max-width: 1100px) {
  .buying-step:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .buying-step:not(:last-child)::after {
    display: block;
    inset: 58px auto -16px 22px;
    width: 1px;
    height: auto;
  }

  .included-item::before {
    inset-inline: -12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .buying-flow-beam,
  .buying-flow-glow {
    display: block;
    animation: buying-flow var(--flow-duration) linear infinite paused;
  }

  .buying-number::after {
    animation: buying-node var(--flow-duration) ease-out infinite paused;
    animation-delay: var(--step-delay, 0s);
  }

  .buying.is-in-view .buying-flow-beam,
  .buying.is-in-view .buying-flow-glow,
  .buying.is-in-view .buying-number::after {
    animation-play-state: running;
  }

  .included-item[open] .included-content {
    animation: hero-detail-enter 280ms ease-out;
  }
}

@keyframes buying-flow {
  from { stroke-dashoffset: calc(14px - var(--beam-inset)); }
  to { stroke-dashoffset: calc(-100px - var(--beam-inset)); }
}

@keyframes buying-node {
  0%, 24%, 100% { opacity: 0; }
  4%, 10% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .included-item::before,
  .included-item summary,
  .included-item-icon,
  .included-toggle,
  .included-toggle-line,
  .included-content p {
    transition: none;
  }
}

.footer {
  background: #090b0d;
}

.footer a {
  transition: color 180ms ease, transform 220ms ease, border-color 180ms ease;
}

.footer-brand {
  color: #f5f4f0;
}

.footer-brand span {
  color: var(--gold);
}

.footer-description,
.footer-nav a,
.footer-contact a,
.footer-location {
  color: #9fa5aa;
}

.footer-nav h2,
.footer-contact h2 {
  color: #ecebea;
}

.footer-contact .icon,
.footer-location strong {
  color: var(--gold);
}

.footer-socials a {
  border-radius: 50%;
  color: #c5c9cc;
  background: #111416;
}

.footer-bottom p,
.footer-legal a {
  color: #8d949a;
}

.footer-bottom .footer-signature {
  color: #40e0d0;
  letter-spacing: 1px;
}

.footer-signature-by {
  color: #f09c00;
  letter-spacing: 0px;
  font-family: "Mrs Saint Delafield", cursive;
}

.footer a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
  color: var(--gold);
}

@media (hover: hover) and (pointer: fine) {
  .footer a:hover {
    color: var(--gold);
    transform: translateX(4px);
  }

  .footer-socials a:hover {
    border-color: var(--gold);
  }

  /* The signature keeps its colours and only shrinks a little. */
  .footer .footer-signature:hover {
    color: #40e0d0;
    transform: scale(0.95);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .footer a:focus-visible {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer a {
    transition: none;
  }

  .footer a:hover {
    transform: none;
  }
}

.button-surface::before,
.button-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.button-surface::before {
  background: radial-gradient(ellipse 100px 65px at var(--pointer-x) var(--pointer-y), rgba(255, 226, 164, 0.035), transparent 75%);
  transition: opacity 300ms ease;
}

.button-surface::after {
  background: linear-gradient(110deg, transparent 25%, rgba(255, 244, 219, 0.02) 40%, rgba(255, 244, 219, 0.06) 50%, rgba(255, 244, 219, 0.02) 60%, transparent 75%);
  transform: translateX(-130%);
}

.button-ripple {
  position: absolute;
  width: var(--ripple-size);
  height: var(--ripple-size);
  border: 1px solid rgba(255, 231, 182, 0.48);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 45%, rgba(255, 219, 152, 0.14) 65%, rgba(255, 240, 207, 0.28) 85%, transparent 100%);
  pointer-events: none;
}


.button:focus-visible .button-surface {
  background-color: var(--hover-tint);
}

.button:focus-visible .button-surface::before {
  opacity: 1;
}

.button:focus-visible .button-surface::after {
  animation: button-sheen 850ms cubic-bezier(0.2, 0.65, 0.3, 1) both;
}


@keyframes button-sheen {
  0% {
    opacity: 0;
    transform: translateX(-130%);
  }
  25%, 65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(130%);
  }
}


@media (hover: hover) and (pointer: fine) {
  .button:hover .button-surface {
    background-color: var(--hover-tint);
  }

  .button:hover::after {
    opacity: 0.85;
  }

  .button-secondary:hover::after {
    opacity: 0.6;
  }

  .button:hover .button-surface::before {
    opacity: 1;
  }

  .button:hover .button-surface::after {
    animation: button-sheen 850ms cubic-bezier(0.2, 0.65, 0.3, 1) both;
  }

  .button-primary:hover {
    border-color: rgba(255, 219, 156, 0.5);
    box-shadow:
      inset 1px 0 0 rgba(255, 238, 201, 0.8),
      inset 0 1px 0 rgba(255, 224, 173, 0.24),
      inset -12px -2px 20px rgba(0, 0, 0, 0.2),
      -7px 0 28px rgba(219, 161, 64, 0.22),
      0 0 24px rgba(230, 193, 123, 0.12),
      9px 8px 24px rgba(0, 0, 0, 0.4);
  }

  .button-primary:hover svg {
    transform: translateX(5px);
  }

  .button-secondary:hover {
    border-color: rgba(233, 217, 183, 0.35);
    box-shadow:
      inset 1px 0 0 rgba(255, 242, 211, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset -10px -3px 18px rgba(0, 0, 0, 0.3),
      -6px 0 24px rgba(219, 190, 141, 0.14),
      0 0 22px rgba(224, 202, 160, 0.08),
      9px 8px 24px rgba(0, 0, 0, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-surface::before {
    transition: none;
  }

  .button .button-surface::after,
  .button:hover .button-surface::after,
  .button:focus-visible .button-surface::after {
    animation: none;
  }

  .button-primary:hover svg {
    transform: none;
  }
}

/* Svetlo i pokret novih odeljaka; ucitavaju se sa ostalim efektima. */
.selling::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 79% 38%, #c0924221, transparent 44%), linear-gradient(120deg, #151615, #0e1012 60%);
  pointer-events: none;
}
.selling::after {
  content: "";
  position: absolute;
  inset: 0 0 22% 48%;
  z-index: -1;
  background-image: linear-gradient(#e6c17b07 1px, transparent 1px), linear-gradient(90deg, #e6c17b07 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse, #000 10%, transparent 68%);
  pointer-events: none;
}
.selling-art::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle, #e6c17b13, transparent 68%);
  pointer-events: none;
}
.selling-browser-page::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  top: 34px;
  right: -86px;
  border: 1px solid #e6c17b22;
  border-radius: 50%;
  box-shadow: 0 0 0 24px #e6c17b05, 0 0 0 48px #e6c17b03;
  pointer-events: none;
}
.selling-browser-shine {
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg, transparent 40%, #fff3d90a 48%, #fff3d918 50%, transparent 58%);
  transform: translateX(-80%);
  pointer-events: none;
}
.selling-steps li::before {
  content: "";
  position: absolute;
  top: -35px;
  left: 0;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, #ffe6b1, #e6c17b22);
  transform-origin: left;
}
.section-text-link .icon,
.contact-method-arrow { transition: transform 250ms ease; }
.section-text-link { transition: color 200ms ease; }
.faq-toggle { transition: transform 300ms ease, background-color 250ms ease, color 250ms ease, border-color 250ms ease; }
.faq-item h3,
.faq-number { transition: color 200ms ease; }
.faq-item::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: -14px;
  width: 2px;
  background: linear-gradient(#f6dcaa, #e6c17b44);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item[open]::before { transform: scaleY(1); }
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 95% 4%, #ad7c3514, transparent 52%);
  pointer-events: none;
}
.contact-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 9%;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffe4af, transparent);
  box-shadow: 0 0 16px #e6c17b55;
  pointer-events: none;
}
.contact-topic-surface { transition: border-color 200ms ease, background-color 200ms ease, transform 250ms ease; }
.contact-topic-check { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; }
.contact-method-icon { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; }
.contact-method strong { transition: color 200ms ease; }

@media (hover: hover) and (pointer: fine) {
  .section-text-link:hover { color: #ffedc7; }
  .section-text-link:hover .icon { transform: translate(3px, -3px); }
  .selling-actions .section-text-link:hover .icon { transform: translateY(4px); }
  .faq-item summary:hover h3,
  .faq-item summary:hover .faq-number { color: var(--gold); }
  .faq-item summary:hover .faq-toggle { border-color: var(--gold); }
  .faq-answer a:hover { text-decoration-color: currentColor; }
  .contact-topic:hover .contact-topic-surface { border-color: #bda16e; transform: translateY(-3px); }
  .contact-method:hover strong { color: #efcd8d; }
  .contact-method:hover .contact-method-icon { color: #171715; background: var(--gold); border-color: var(--gold); }
  .contact-method:hover .contact-method-arrow { transform: translate(3px, -3px); }
}

.selling .button::before,
.selling .button::after,
.contact .button::before,
.contact .button::after { animation-play-state: paused; }

@media (prefers-reduced-motion: no-preference) {
  .selling-orbit-outer { animation: selling-orbit 34s linear infinite paused; }
  .selling-orbit-inner { animation: selling-orbit 26s linear reverse infinite paused; }
  .selling-browser { animation: selling-browser-float 7s ease-in-out infinite paused; }
  .selling-float-link { animation: selling-tag-float 6s ease-in-out infinite paused; }
  .selling-float-owner { animation: selling-tag-float 6s ease-in-out -3s infinite paused; }
  .selling-browser-shine { animation: selling-shine 9s ease-in-out infinite paused; }
  .selling.is-in-view .selling-orbit,
  .selling.is-in-view .selling-browser,
  .selling.is-in-view .selling-float,
  .selling.is-in-view .selling-browser-shine,
  .selling.is-in-view .button::before,
  .selling.is-in-view .button::after,
  .contact.is-in-view .button::before,
  .contact.is-in-view .button::after { animation-play-state: running; }
  [data-section-reveal].section-revealed { animation: section-rise 750ms cubic-bezier(0.22, 1, 0.36, 1) var(--section-delay, 0ms) backwards; }
  .selling-art[data-section-reveal],
  .faq-list[data-section-reveal],
  .contact-panel[data-section-reveal] { --section-delay: 120ms; }
  .selling-steps li:nth-child(2) { --section-delay: 100ms; }
  .selling-steps li:nth-child(3) { --section-delay: 200ms; }
}

@keyframes reveal-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes section-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes selling-orbit {
  from { transform: translate(-50%, -50%) rotate(-28deg); }
  to { transform: translate(-50%, -50%) rotate(332deg); }
}
@keyframes selling-browser-float {
  0%, 100% { transform: perspective(1000px) translateY(0) rotateY(-9deg) rotateX(5deg) rotateZ(-4deg); }
  50% { transform: perspective(1000px) translateY(-9px) rotateY(-5deg) rotateX(3deg) rotateZ(-2deg); }
}
@keyframes selling-tag-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes selling-shine {
  0%, 60% { transform: translateX(-80%); }
  90%, 100% { transform: translateX(80%); }
}

@media (max-width: 900px) {
  .selling::after { inset: 30% 0 20%; }
}
@media (max-width: 560px) {
  .selling-steps li::before { display: none; }
  .faq-item::before { left: -9px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-text-link,
  .section-text-link .icon,
  .contact-method-arrow,
  .faq-toggle,
  .faq-item h3,
  .faq-number,
  .faq-item::before,
  .contact-topic-surface,
  .contact-topic-check,
  .contact-method-icon,
  .contact-method strong { transition: none; }
  .contact-topic:hover .contact-topic-surface,
  .section-text-link:hover .icon,
  .contact-method:hover .contact-method-arrow { transform: none; }
  .selling-browser-shine { display: none; }
}