/* Depth and motion layer; the palette and layout remain independent. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-card: 0 2px 5px rgba(33, 20, 73, .035), 0 14px 34px rgba(33, 20, 73, .085);
  --shadow-card-hover: 0 8px 18px rgba(33, 20, 73, .075), 0 25px 52px rgba(33, 20, 73, .14);
  --shadow-panel: 0 5px 12px rgba(33, 20, 73, .045), 0 28px 70px rgba(33, 20, 73, .13);
  --surface-sheen: linear-gradient(155deg, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .08) 58%, rgba(96, 111, 201, .045) 100%);
}

.site-header {
  box-shadow: 0 6px 22px rgba(33, 20, 73, .045);
  transition: box-shadow .25s var(--ease-out);
}

.hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(218, 232, 253, .28), transparent 38%),
    radial-gradient(circle at 4% 95%, rgba(33, 20, 73, .19), transparent 48%),
    linear-gradient(135deg, var(--purple) 0%, #5263bb 42%, var(--purple-deep) 100%);
  box-shadow: 0 9px 22px rgba(33, 20, 73, .12), 0 38px 76px rgba(60, 77, 159, .20), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.step-card,
.method-tab,
.step-rail,
.instruction-card,
.address-card,
.troubles-grid details {
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .78);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .22s ease, background-color .22s ease;
}

.step-card,
.method-tab,
.method-tab[aria-selected="true"],
.instruction-help,
.guide-bottom-note {
  background-image: var(--surface-sheen);
}

.step-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

.instruction-help,
.guide-bottom-note {
  box-shadow: 0 7px 22px rgba(33, 20, 73, .055), inset 0 1px 0 rgba(255, 255, 255, .68);
}

.button,
.address-card button {
  position: relative;
  box-shadow: 0 5px 11px rgba(33, 20, 73, .10), 0 12px 25px rgba(33, 20, 73, .10), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), background-color .2s ease, border-color .2s ease;
}

.button-dark,
.button-dark:hover,
.address-card button,
.address-card button:hover {
  background-image: linear-gradient(165deg, rgba(255, 255, 255, .18), transparent 58%, rgba(33, 20, 73, .14));
}

.button-orange,
.button-orange:hover {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .32), transparent 54%, rgba(172, 72, 0, .13));
  box-shadow: 0 5px 11px rgba(143, 67, 0, .13), 0 13px 25px rgba(255, 144, 0, .21), inset 0 1px 0 rgba(255, 255, 255, .46);
}

.button-outline {
  box-shadow: 0 5px 16px rgba(33, 20, 73, .065), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.method-tab[aria-selected="true"] {
  box-shadow: 0 5px 12px rgba(60, 77, 159, .09), 0 22px 40px rgba(96, 111, 201, .17), inset 0 1px 0 #fff;
}

.closing-band,
.install-finish {
  background:
    radial-gradient(circle at 80% 5%, rgba(218, 232, 253, .24), transparent 36%),
    radial-gradient(circle at 12% 100%, rgba(33, 20, 73, .14), transparent 44%),
    linear-gradient(115deg, var(--purple), var(--purple-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.faq summary span,
.troubles-grid summary span {
  transition: transform .25s var(--ease-out);
}

.faq details[open] > p,
.troubles-grid details[open] > p {
  animation: content-reveal .3s var(--ease-out) both;
}

.instruction-card > .scene,
.instruction-card > .instruction-copy {
  animation: content-reveal .36s var(--ease-out) both;
}

.instruction-card > .instruction-copy { animation-delay: .05s; }

@keyframes content-reveal {
  from { opacity: .55; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) {
  .method-tab:hover,
  .troubles-grid details:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover), inset 0 1px 0 rgba(255, 255, 255, .9);
  }

  .step-card:hover,
  .address-card:hover {
    box-shadow: 0 4px 9px rgba(33, 20, 73, .05), 0 18px 40px rgba(33, 20, 73, .105), inset 0 1px 0 rgba(255, 255, 255, .85);
  }

  .button:not(:disabled):hover,
  .address-card button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(33, 20, 73, .13), 0 18px 30px rgba(33, 20, 73, .15), inset 0 1px 0 rgba(255, 255, 255, .35);
  }

  .button-orange:not(:disabled):hover {
    box-shadow: 0 8px 18px rgba(143, 67, 0, .17), 0 19px 33px rgba(255, 144, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .5);
  }
}

.button:not(:disabled):active,
.address-card button:not(:disabled):active,
.method-tab:active {
  transform: translateY(1px);
  box-shadow: 0 2px 7px rgba(33, 20, 73, .12), inset 0 2px 4px rgba(33, 20, 73, .08);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .instruction-card > .scene,
  .instruction-card > .instruction-copy,
  .faq details[open] > p,
  .troubles-grid details[open] > p { animation: none; }
  .step-card,
  .method-tab,
  .address-card,
  .troubles-grid details,
  .button,
  .address-card button { transform: none !important; }
}