:root {
   --bg-1: #0b0d1a;
   --bg-2: #121729;
   --card-grad-start: rgba(17, 20, 38, 0.9);
   --card-grad-end: rgba(20, 26, 46, 0.95);
   --accent: #eac28a;
   --muted: #bfc7d6;
   --gap: clamp(20px, 3vw, 60px);
 }

 h2.section-title {
   text-align: center;
   font-weight: 700;
   margin: 6px 0 80px 0;
   font-size: clamp(22px, 3.4vw, 36px);
   color: #f8f6f2;
 }

 .timeline-vertical {
   position: relative;
   padding: 40px 0 120px;
 }

 .timeline-axis {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
   height: 100%;
   background: rgba(255, 255, 255, 0.08);
   overflow: hidden;
   border-radius: 2px;
 }

 .timeline-progress {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transform-origin: top center;
   transform: scaleY(0);
   background: linear-gradient(180deg, var(--accent), rgba(234, 194, 138, 0.7));
   border-radius: 2px;
   opacity: 0.95;
 }

 .timeline-item {
   position: relative;
   width: 45%;
   /* background: linear-gradient(180deg, var(--card-grad-start), var(--card-grad-end)); */
   background: #13244D;
   box-shadow: 0 10px 30px rgb(234 194 138 / 3%), inset 0 1px 0 rgba(255, 255, 255, 0.03);
   border-radius: 14px;
   padding: 20px;
   margin: 80px 0;
   opacity: 0;
   transform: translateY(60px);
 }

 .timeline-item.left {
   left: 0;
   margin-right: auto;
 }

 .timeline-item.right {
   margin-left: auto;
 }

 .timeline-item .date {
   font-size: 24px;
   color: var(--accent);
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-weight: 700;
 }

 .timeline-item h4 {
   margin: 4px 0;
   font-size: 18px;
   color: #fff;
 }

 .timeline-item p {
   margin: 0;
   font-size: 16px;
   color: var(--muted);
   line-height: 1.45;
 }

 .timeline-marker {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: radial-gradient(circle at 35% 30%, #fff6dd 6%, var(--accent) 40%, rgba(234, 194, 138, 0.15) 70%);
   box-shadow: 0 0 12px rgba(234, 194, 138, 0.4);
   margin-top: 50px;
 }

 .timeline-item:not(:last-child)::after {
   content: "";
   display: block;
   height: 120px;
 }

 @media(max-width:850px) {

   .timeline-item,
   .timeline-item.left,
   .timeline-item.right {
     width: 90%;
     left: 5%;
     margin: 60px auto;
   }

   .timeline-axis {
     left: 8px;
   }

   .timeline-item {
     padding-left: 40px;
   }
 }