.brinda-legacy { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden; padding-block: clamp(5rem, 10vw, 10rem); background: radial-gradient(circle at 15% 18%, color-mix(in srgb, var(--color-secondary) 12%, transparent), transparent 28rem), linear-gradient(145deg, var(--color-primary-strong), #0d211b 72%); color: var(--color-surface); isolation: isolate; }
.brinda-legacy__atmosphere { position: absolute; inset: 0; z-index: -1; opacity: .28; background-image: linear-gradient(color-mix(in srgb, var(--color-surface) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 4%, transparent) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.brinda-legacy__header { max-width: 53rem; margin: 0 auto clamp(4rem, 8vw, 7rem); text-align: center; }
.brinda-legacy__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); color: var(--color-secondary); font-family: var(--font-accent); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.brinda-legacy__eyebrow::before, .brinda-legacy__eyebrow::after { width: 2.5rem; height: 1px; background: currentColor; content: ""; }
.brinda-legacy__title { margin: 0; font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 6rem); font-weight: 600; line-height: .94; letter-spacing: -.035em; }
.brinda-legacy__title em { color: var(--color-secondary); font-weight: 500; }
.brinda-legacy__intro { max-width: 43rem; margin: var(--space-6) auto 0; color: color-mix(in srgb, var(--color-surface) 72%, transparent); font-size: clamp(var(--font-size-base), 1.35vw, var(--font-size-lg)); line-height: var(--line-height-relaxed); }
.brinda-legacy__timeline { position: relative; max-width: 67rem; margin-inline: auto; perspective: 1100px; }
.brinda-legacy__rail { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: color-mix(in srgb, var(--color-surface) 18%, transparent); transform: translateX(-50%); }
.brinda-legacy__rail-progress { position: absolute; inset: 0 0 auto; height: 100%; background: linear-gradient(to bottom, var(--color-secondary), #f0d89e); box-shadow: 0 0 1.25rem color-mix(in srgb, var(--color-secondary) 65%, transparent); transform: scaleY(0); transform-origin: top; }
.brinda-legacy__milestones { display: grid; gap: clamp(3.5rem, 8vw, 7rem); margin: 0; padding: 0; list-style: none; }
.brinda-legacy__milestone { position: relative; display: grid; width: 50%; padding-right: clamp(2.5rem, 6vw, 5rem); transform-style: preserve-3d; }
.brinda-legacy__milestone:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: clamp(2.5rem, 6vw, 5rem); }
.brinda-legacy__card { position: relative; padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid color-mix(in srgb, var(--color-secondary) 30%, transparent); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .025)); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .18); backdrop-filter: blur(10px); transform: rotateY(4deg) translateZ(0); transition: border-color var(--transition-default), box-shadow var(--transition-default), transform var(--transition-slow); will-change: transform; }
.brinda-legacy__milestone:nth-child(even) .brinda-legacy__card { transform: rotateY(-4deg) translateZ(0); }
.brinda-legacy__card:hover { border-color: color-mix(in srgb, var(--color-secondary) 70%, transparent); box-shadow: 0 2rem 5rem rgba(0, 0, 0, .3); }
.brinda-legacy__card h3 { margin: 0 0 var(--space-3); color: var(--color-surface); font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.55rem); font-weight: 600; }
.brinda-legacy__card > p:last-child { margin: 0; color: color-mix(in srgb, var(--color-surface) 68%, transparent); line-height: var(--line-height-relaxed); }
.brinda-legacy__index { display: block; margin-bottom: var(--space-5); color: var(--color-secondary); font-family: var(--font-accent); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .18em; }
.brinda-legacy__number { margin: 0 0 var(--space-3); color: var(--color-secondary); font-family: var(--font-heading); font-size: clamp(4.75rem, 9vw, 7.5rem); font-weight: 600; line-height: .7; letter-spacing: -.06em; }
.brinda-legacy__number span { font-size: .48em; vertical-align: top; }
.brinda-legacy__node { position: absolute; top: 50%; right: -.6rem; width: 1.2rem; height: 1.2rem; padding: .25rem; border: 1px solid var(--color-secondary); border-radius: 50%; background: var(--color-primary-strong); box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--color-secondary) 10%, transparent); transform: translateY(-50%); }
.brinda-legacy__milestone:nth-child(even) .brinda-legacy__node { right: auto; left: -.6rem; }
.brinda-legacy__node i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--color-secondary); }
@media (max-width: 767.98px) { .brinda-legacy__header { text-align: left; } .brinda-legacy__eyebrow::after { display: none; } .brinda-legacy__rail { left: .6rem; } .brinda-legacy__milestones { gap: var(--space-7); } .brinda-legacy__milestone, .brinda-legacy__milestone:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 0 3rem; } .brinda-legacy__milestone .brinda-legacy__card, .brinda-legacy__milestone:nth-child(even) .brinda-legacy__card { transform: none; } .brinda-legacy__node, .brinda-legacy__milestone:nth-child(even) .brinda-legacy__node { right: auto; left: 0; } }
@media (prefers-reduced-motion: reduce) { .brinda-legacy__rail-progress { transform: scaleY(1); } .brinda-legacy__card { transition: none; will-change: auto; } }