.landing .ritual-flow { margin-top: var(--home-section-gap); }
.ritual-flow { position: relative; isolation: isolate; padding: 0; overflow: clip; border: 1px solid var(--glass-line); border-radius: var(--radius-md); background: radial-gradient(circle at 12% 12%, rgba(104,169,206,.1), transparent 32%), radial-gradient(circle at 88% 86%, rgba(214,168,95,.08), transparent 34%), linear-gradient(120deg, rgba(14,34,44,.82), rgba(8,18,25,.92) 58%, rgba(24,22,20,.8)); box-shadow: inset 0 1px rgba(226,243,249,.04), 0 20px 52px rgba(0,0,0,.16); }
.ritual-flow > :not(.ambient-sparks) { position: relative; z-index: 2; }
.ritual-flow > .ambient-sparks { z-index: 1; opacity: .42; }
.ritual-flow__header { display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: center; gap: 24px; padding: 14px 28px; border-bottom: 1px solid var(--glass-line); }
.ritual-flow__header h2 { margin: 4px 0 5px; font-size: clamp(1.35rem,2.1vw,1.65rem); }
.ritual-flow__header p { max-width: 68ch; margin: 0; color: var(--text-soft); font-size: .875rem; }
.ritual-flow__cards { --arcana-radius: 5% / 3.4%; position: relative; width: 150px; height: 78px; justify-self: end; }
.ritual-flow__cards::before { content: ""; position: absolute; inset: 14px -12px -8px; background: radial-gradient(ellipse, rgba(214,168,95,.14), rgba(104,169,206,.05) 48%, transparent 74%); filter: blur(9px); }
.ritual-flow__cards span { position: absolute; top: 7px; left: 54px; display: grid; width: 44px; aspect-ratio: 2 / 3; place-items: center; overflow: hidden; border: 1px solid rgba(222,180,96,.46); border-radius: var(--arcana-radius); background: linear-gradient(145deg,#173242,#091821 72%); box-shadow: inset 0 0 0 3px rgba(214,168,95,.06),0 10px 22px rgba(0,0,0,.28); transform: rotate(-2deg); }
.ritual-flow__cards span:first-child { left: 24px; top: 12px; border-color: rgba(133,202,225,.42); transform: rotate(-13deg); }
.ritual-flow__cards span:last-child { left: 84px; top: 12px; transform: rotate(12deg); }
.ritual-flow__cards img { width: 20px; height: 20px; opacity: .72; filter: drop-shadow(0 0 7px rgba(214,168,95,.28)); }
.ritual-flow__list { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.ritual-flow__list li { position: relative; z-index: 1; min-width: 0; padding: 26px 22px 18px; }
.ritual-flow__list li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 42px; left: 54px; right: -22px; height: 1px; background: linear-gradient(90deg,rgba(126,196,220,.48),rgba(206,211,186,.35)); }
.ritual-flow__list li:nth-child(n+3):not(:last-child)::after { background: linear-gradient(90deg,rgba(206,211,186,.36),rgba(222,175,91,.48)); }
.ritual-flow__list li + li { border-left: 1px solid rgba(166,205,220,.1); }
.ritual-flow__number { display: grid; width: 32px; height: 32px; margin-bottom: 16px; place-items: center; border: 1px solid rgba(163,213,230,.38); border-radius: 50%; color: #d9edf3; background: #102632; box-shadow: 0 0 0 7px rgba(8,20,28,.88),0 0 18px rgba(104,169,206,.13); font: 600 .6875rem/1 var(--font-mono); letter-spacing: .04em; }
.ritual-flow__list li:nth-child(3) .ritual-flow__number { border-color: rgba(215,201,157,.42); color: #eee1bd; background: #202529; }
.ritual-flow__list li:nth-child(n+4) .ritual-flow__number { border-color: rgba(222,180,96,.45); color: var(--accent-amber-light); background: #29251e; box-shadow: 0 0 0 7px rgba(15,20,23,.9),0 0 18px rgba(214,168,95,.12); }
.ritual-flow__list h3 { margin: 0 0 7px; color: var(--text-main); font: 600 1rem/1.35 var(--font-display); }
.ritual-flow__list p { margin: 0; color: var(--text-soft); font-size: .8375rem; line-height: 1.55; }
@media (max-width:1020px) { .ritual-flow__list { grid-template-columns: repeat(2,minmax(0,1fr)); } .ritual-flow__list li::after { display:none; } .ritual-flow__list li { border-top:1px solid rgba(166,205,220,.1); } .ritual-flow__list li:nth-child(odd) { border-left:0; } .ritual-flow__list li:last-child { grid-column:1/-1; } }
@media (max-width:560px) { .landing .ritual-flow { margin-top:36px; } .ritual-flow__header { grid-template-columns:minmax(0,1fr) 88px; gap:10px; padding:18px 20px; } .ritual-flow__cards { width:82px; height:62px; transform:scale(.76); transform-origin:right center; } .ritual-flow__list { grid-template-columns:1fr; } .ritual-flow__list li,.ritual-flow__list li:last-child { grid-column:auto; padding:20px; } .ritual-flow__list li + li { border-left:0; } .ritual-flow__number { float:left; margin:0 13px 0 0; } .ritual-flow__list h3 { min-height:32px; margin-bottom:7px; padding-top:5px; } .ritual-flow__list p { clear:both; padding-top:10px; } }
