.timeline{position:relative;margin-top:40px}.timeline::before{content:"";position:absolute;left:34px;top:20px;bottom:20px;width:1px;background:linear-gradient(180deg,rgba(56,217,255,.45),rgba(118,87,255,.55),rgba(255,88,197,.24))}.timeline-item{display:grid;grid-template-columns:70px 1fr;gap:26px;padding:0 0 52px}.timeline-num{width:70px;height:70px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,248,255,.94));border:1px solid rgba(79,124,255,.12);display:grid;place-items:center;font-size:13px;position:relative;z-index:1;box-shadow:var(--shadow-card);color:#5061b3}.timeline-copy{padding-top:9px;max-width:780px}.timeline-copy h2{font-size:clamp(28px,4vw,48px);letter-spacing:-.045em}.timeline-copy p{font-size:17px;color:var(--muted);margin-top:12px;line-height:1.55}.timeline-copy ul{margin:18px 0 0;padding-left:18px;color:#505d7d}.timeline-copy li{margin:6px 0}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.principle{min-height:260px;border-radius:28px;padding:30px;background:linear-gradient(180deg,#12182d 0%,#0d1324 100%);color:#f5f7ff;border:1px solid rgba(130,151,255,.10);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 24px 70px rgba(0,0,0,.18);position:relative;overflow:hidden}.principle::after{content:"";position:absolute;right:-40px;top:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(56,217,255,.18),transparent 68%)}.principle:nth-child(2)::after{background:radial-gradient(circle,rgba(118,87,255,.24),transparent 68%)}.principle:nth-child(3)::after{background:radial-gradient(circle,rgba(255,88,197,.18),transparent 68%)}.principle span{font-size:12px;color:#7d8cb1}.principle h3{font-size:30px;line-height:1.05;letter-spacing:-.045em}.principle p{font-size:14px;color:#a1accb;margin-top:15px}
@media(max-width:800px){.principles{grid-template-columns:1fr}.timeline-item{grid-template-columns:56px 1fr}.timeline::before{left:27px}.timeline-num{width:56px;height:56px}}

/* v0.2.3 — richer timeline interaction */
.timeline-item{position:relative}
.timeline-num{transition:transform .34s var(--ease),box-shadow .34s ease,border-color .34s ease,background .34s ease}
.timeline-item:hover .timeline-num{transform:scale(1.06);border-color:rgba(66,150,255,.24);background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(231,242,255,.96));box-shadow:0 16px 38px rgba(65,91,180,.14),0 0 0 6px rgba(56,217,255,.035)}
.timeline-copy{position:relative;border-radius:24px;padding:18px 22px 22px 0;transition:padding .34s var(--ease),background .34s ease,box-shadow .34s ease}
.timeline-copy::before{content:"";position:absolute;inset:0;border-radius:24px;background:linear-gradient(110deg,rgba(56,217,255,.06),rgba(79,124,255,.055) 45%,rgba(118,87,255,.035) 72%,transparent);opacity:0;transition:opacity .34s ease;z-index:-1}
.timeline-item:hover .timeline-copy{padding-left:22px;box-shadow:0 18px 46px rgba(58,76,145,.07)}.timeline-item:hover .timeline-copy::before{opacity:1}
.principle{transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s ease}
.principle:hover{transform:translateY(-7px);border-color:rgba(79,151,255,.22);box-shadow:0 34px 84px rgba(5,10,28,.28),0 0 48px rgba(69,104,255,.07)}
.principle::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(56,217,255,.00),rgba(56,217,255,.065) 38%,rgba(118,87,255,.075) 72%,transparent);opacity:0;transition:opacity .36s ease;pointer-events:none}.principle:hover::before{opacity:1}.principle>*{position:relative;z-index:1}
@media(max-width:800px){.timeline-item:hover .timeline-copy{padding-left:12px}.principle:hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.timeline-item:hover .timeline-num,.principle:hover{transform:none}}