/* intro v26 — Dieter Rams node: hex grid, bottom band, blurred ghost image, serif, typewriter */

/* Hexagon-ish grid (minimal, colour from Tailwind text-*, lines via currentColor) */
.intro-node__hex {
    background-image:
        repeating-linear-gradient(60deg, currentColor 0 1px, transparent 1px 26px),
        repeating-linear-gradient(-60deg, currentColor 0 1px, transparent 1px 26px);
    opacity: 0.1;
}

.intro-node__band { height: 10rem; opacity: 0.7; }

/* Blurred background photo behind the spotlight node */
.intro-node__ghost { height: 14rem; }
.intro-node__img {
    object-fit: cover;
    filter: blur(10px);
    opacity: 0.35;
    transform: scale(1.08);
}

/* Serif heading */
.intro-node__serif {
    font-family: ui-serif, Georgia, "Times New Roman", serif;
}

/* Org-chart stem connector */
.intro-node__stem {
    width: 1px;
    height: 2rem;
}

/* Typewriter caret */
.intro-node__type .is-typing {
    border-right: 2px solid currentColor;
    animation: intro-node-caret 800ms step-end infinite;
}
@keyframes intro-node-caret {
    50% { border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .intro-node__type .is-typing { animation: none; }
}

/* process journal — layout, image crop, hover motion (no colors) */
.process-journal__photo {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.process-journal__marker {
    width: 0.75rem;
    height: 0.75rem;
}
.process-journal__arrow {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 200ms ease;
}
.process-journal__pill {
    text-decoration: none;
    transition: transform 200ms ease;
}
.process-journal__arrow:hover,
.process-journal__pill:hover {
    transform: translateY(-1px);
}

/* wizard progress segment - framework-agnostic sizing + UA button reset */
.steps-wizard__segment {
    height: 0.375rem;
    padding: 0;
    border: 0;
    transition: transform 200ms ease, background-color 200ms ease;
    cursor: pointer;
    background-color: var(--bs-tertiary-bg, rgb(100 116 139 / 0.3));
}

.steps-wizard__segment.is-active {
    transform: scaleY(1.6);
    background-color: var(--bs-primary, rgb(37 99 235 / 1)) !important;
}

.steps-wizard__panel {
    animation: steps-wizard-fade-in 250ms ease;
}

/* wizard stage panel - fixed min-height across both frameworks */
.guide-flow__stage {
    min-height: 16rem;
}

/* wizard step icon badge - fixed circular size across both frameworks */
.guide-flow__badge {
    width: 4rem;
    height: 4rem;
}

@keyframes steps-wizard-fade-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Декор картки + великі лапки — позиціонування; розміри медіа в @sem */
.quote-decor-a {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  transform: translate(4rem, -4rem);
  opacity: 0.3;
}

.quote-decor-b {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 6rem;
  height: 6rem;
  transform: translate(-3rem, 3rem);
  opacity: 0.3;
}

.quote-mark {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 6rem;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  opacity: 0.2;
}

.cta-hub__stage { min-height: 24rem; }
.cta-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-hub__lines path { stroke-dasharray: 6 8; opacity: 0; }
[data-hub].is-visible .cta-hub__lines path { opacity: .5; animation: cta-hub-flow 1.2s linear infinite; transition: opacity 600ms ease 400ms; }

.cta-hub__node { opacity: 0; transition: opacity 500ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1); }
.cta-hub__node--0 { top: 12% !important; left: 4% !important; transform: translate(-1.5rem, -1.5rem); }
.cta-hub__node--1 { top: 12% !important; left: auto !important; right: 4%; transform: translate(1.5rem, -1.5rem); }
.cta-hub__node--2 { top: auto !important; bottom: 12%; left: 4% !important; transform: translate(-1.5rem, 1.5rem); }
.cta-hub__node--3 { top: auto !important; bottom: 12%; left: auto !important; right: 4%; transform: translate(1.5rem, 1.5rem); }
[data-hub].is-visible .cta-hub__node { opacity: 1; transform: none; animation: cta-hub-bob 5s ease-in-out 1s infinite; }
[data-hub].is-visible .cta-hub__node--1 { transition-delay: 120ms; animation-delay: 1.6s; }
[data-hub].is-visible .cta-hub__node--2 { transition-delay: 240ms; animation-delay: 2.2s; }
[data-hub].is-visible .cta-hub__node--3 { transition-delay: 360ms; animation-delay: 2.8s; }

.cta-hub__core { transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: transform 700ms cubic-bezier(.2, .8, .2, 1) 500ms, opacity 500ms ease 500ms; }
[data-hub].is-visible .cta-hub__core { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cta-hub__micro { font-size: .75rem; }

@keyframes cta-hub-flow { to { stroke-dashoffset: -28; } }
@keyframes cta-hub-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (prefers-reduced-motion: reduce) {
    .cta-hub__node, .cta-hub__core { transition: none; animation: none; opacity: 1; }
    [data-hub].is-visible .cta-hub__lines path { animation: none; }
}
/* phones: keep the four orbit nodes from colliding */
@media (max-width: 575px) {
    .cta-hub__node { max-width: 44%; padding: .5rem .75rem !important; font-size: .8125rem; line-height: 1.15rem; }
}

/* wpg-hidden: utility classes are renamed in production builds, so hidden states must not rely on .hidden / .d-none alone */
.cta-hub[hidden], .cta-hub [hidden], .cta-hub .hidden.d-none { display: none !important; }