
  
      /* ═══════════════════════════════════════════════════
         BASE
      ═══════════════════════════════════════════════════ */
  
      html { scroll-behavior: smooth; }
    
  
      /* ═══════════════════════════════════════════════════
         PROGRAMME SECTION — light gradient background
      ═══════════════════════════════════════════════════ */
      .programme-section {
        padding: 100px 0 120px;
        background:
          radial-gradient(ellipse 70% 50% at 0% 0%,     rgba(219,234,254,.9)  0%, transparent 55%),
          radial-gradient(ellipse 60% 45% at 100% 100%,  rgba(224,231,255,.8)  0%, transparent 55%),
          radial-gradient(ellipse 50% 40% at 55% 50%,    rgba(255,255,255,.95) 0%, transparent 70%),
          linear-gradient(165deg, #f0f7ff 0%, #fafcff 35%, #f5f3ff 70%, #eff6ff 100%);
        position: relative;
        overflow: hidden;
      }
  
      /* Dot pattern */
      .programme-section .bg-dots {
        position: absolute; inset: 0;
        background-image: radial-gradient(circle, rgba(99,102,241,.12) 1.2px, transparent 1.2px);
        background-size: 28px 28px;
        pointer-events: none; z-index: 0;
      }
  
      /* Decorative orbs */
      .programme-section::before {
        content: ''; position: absolute;
        width: 560px; height: 560px; border-radius: 50%;
        background: radial-gradient(circle, rgba(99,102,241,.09) 0%, transparent 68%);
        top: -180px; right: -180px; pointer-events: none; z-index: 0;
      }
      .programme-section::after {
        content: ''; position: absolute;
        width: 420px; height: 420px; border-radius: 50%;
        background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 68%);
        bottom: -120px; left: -120px; pointer-events: none; z-index: 0;
      }
  
      /* ── Section Header ─────────────────────────────── */
      .section-header {
        position: relative; z-index: 1;
        text-align: center; margin-bottom: 60px;
      }
  
      .section-eyebrow {
        display: inline-flex; align-items: center; gap: 8px;
        background: linear-gradient(135deg, rgba(29,78,216,.1) 0%, rgba(59,130,246,.1) 100%);
        border: 1px solid rgba(59,130,246,.25);
        border-radius: 999px; padding: 6px 18px;
        font-size: .75rem; font-weight: 600; color: #21409a;
        letter-spacing: .07em; text-transform: uppercase; margin-bottom: 20px;
      }
  
      .section-title span.big-title {
    
        font-size: clamp(2rem, 4.5vw, 3.2rem);
        font-weight: 800; color: #0f172a;
        line-height: 1.15; letter-spacing: -.5px; margin-bottom: 16px;
      }
  
      .section-title .sub-title {
        background: linear-gradient(135deg, #21409a 0%, #3b82f6 100%);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        background-clip: text;
      }
  
      .section-subtitle {
        font-size: 1.05rem; font-weight: 400; color: #64748b;
        max-width: 520px; margin: 0 auto; line-height: 1.7;
      }
  
      .title-underline {
        width: 60px; height: 4px;
        background: linear-gradient(90deg, #21409a 0%, #3b82f6 100%);
        border-radius: 2px; margin: 20px auto 0;
      }
  
      /* ── Legend ─────────────────────────────────────── */
      .legend-wrap {
        position: relative; z-index: 1;
        display: flex; justify-content: center;
        flex-wrap: wrap; gap: 16px; margin-bottom: 36px;
      }
      .legend-item {
        display: flex; align-items: center; gap: 7px;
        font-size: .78rem; font-weight: 500; color: #64748b;
      }
      .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  
      /* ── Day Tabs ───────────────────────────────────── */
      .day-tabs-wrapper {
        position: relative; z-index: 1;
        display: flex; justify-content: center; margin-bottom: 56px;
      }
  
      #scheduleTab {
        display: flex; flex-wrap: wrap; justify-content: center;
        background: rgba(255,255,255,.75);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(59,130,246,.18);
        border-radius: 999px;
        padding: 6px; gap: 4px;
        box-shadow: 0 4px 20px rgba(29,78,216,.08);
        list-style: none; margin: 0;
      }
  
      #scheduleTab .nav-item { list-style: none; }
  
      #scheduleTab .nav-link {
        display: flex; flex-direction: column; align-items: center;
        padding: 10px 28px; border: none; background: transparent;
        border-radius: 999px;
        font-size: .85rem; font-weight: 600;
        color: #64748b; cursor: pointer; transition: all .25s cubic-bezier(.4,0,.2,1);
        white-space: nowrap; text-decoration: none; line-height: 1.3;
      }
  
      #scheduleTab .nav-link:hover:not(.active) {
        color: #21409a; background: rgba(59,130,246,.07);
      }
  
      #scheduleTab .nav-link.active {
        background: linear-gradient(135deg, #21409a 0%, #3b82f6 100%);
        color: #fff !important; box-shadow: 0 8px 24px rgba(29,78,216,.18);
      }
  
      .tab-day  { font-weight: 600; font-size: .85rem; }
      .tab-date { font-size: .7rem; font-weight: 400; opacity: .75; margin-top: 2px; }
  
      /* ── Tab Content ────────────────────────────────── */
      #scheduleTabContent { position: relative; z-index: 1; }
      .tab-pane { min-height: 200px; }
  
      /* ── Timeline Wrapper ───────────────────────────── */
      .timeline-wrap {
        position: relative; z-index: 1;
        max-width: 860px; margin: 0 auto;
      }
  
      /* Vertical gradient line */
      .timeline-wrap::before {
        content: ''; position: absolute;
        left: 88px; top: 10px; bottom: 10px; width: 2px;
        background: linear-gradient(
          to bottom,
          transparent 0%, #3b82f6 8%, #1d4ed8 30%,
          #7c3aed 60%, #3b82f6 90%, transparent 100%
        );
        border-radius: 2px;
      }
  
      /* ── Timeline Row ───────────────────────────────── */
      .tl-row {
        display: flex; align-items: flex-start; gap: 0;
        margin-bottom: 32px; position: relative;
        opacity: 0; transform: translateY(24px);
        transition: opacity .5s ease, transform .5s ease;
        will-change: opacity, transform;
      }
      .tl-row.revealed { opacity: 1; transform: translateY(0); }
  
      .tl-row:nth-child(1)  { transition-delay: .05s; }
      .tl-row:nth-child(2)  { transition-delay: .12s; }
      .tl-row:nth-child(3)  { transition-delay: .19s; }
      .tl-row:nth-child(4)  { transition-delay: .26s; }
      .tl-row:nth-child(5)  { transition-delay: .33s; }
      .tl-row:nth-child(6)  { transition-delay: .40s; }
      .tl-row:nth-child(7)  { transition-delay: .47s; }
      .tl-row:nth-child(8)  { transition-delay: .54s; }
      .tl-row:nth-child(n+9){ transition-delay: .60s; }
  
      /* Time label */
      .tl-time {
        width: 72px; flex-shrink: 0; padding-top: 18px;
        text-align: right; font-size: .82rem; font-weight: 700;
        color: #21409a; letter-spacing: .02em; line-height: 1;
      }
  
      /* Dot column */
      .tl-marker-col {
        width: 36px; flex-shrink: 0;
        display: flex; flex-direction: column; align-items: center;
        padding-top: 16px; position: relative;
      }
  
      .tl-dot {
        width: 14px; height: 14px; border-radius: 50%;
        background: #21409a; border: 3px solid #fff;
        box-shadow: 0 0 0 2px #21409a, 0 2px 8px rgba(29,78,216,.35);
        flex-shrink: 0; position: relative; z-index: 2;
        transition: transform .25s ease, box-shadow .25s ease;
      }
      .tl-row:hover .tl-dot { transform: scale(1.35); }
  
      /* Dot colors per type */
      .tl-row[data-type="conference"] .tl-dot { background: #21409a;   box-shadow: 0 0 0 2px #21409a,   0 2px 8px rgba(29,78,216,.35); }
      .tl-row[data-type="panel"]      .tl-dot { background: #7c3aed; box-shadow: 0 0 0 2px #7c3aed, 0 2px 8px rgba(124,58,237,.35); }
      .tl-row[data-type="workshop"]   .tl-dot { background: #ea580c; box-shadow: 0 0 0 2px #ea580c, 0 2px 8px rgba(234,88,12,.35);  }
      .tl-row[data-type="break"]      .tl-dot { background: #64748b;   box-shadow: 0 0 0 2px #64748b,   0 2px 8px rgba(100,116,139,.25); }
      .tl-row[data-type="networking"] .tl-dot { background: #059669;  box-shadow: 0 0 0 2px #059669,  0 2px 8px rgba(5,150,105,.35);   }
      .tl-row[data-type="social"]     .tl-dot { background: #db2777;   box-shadow: 0 0 0 2px #db2777,   0 2px 8px rgba(219,39,119,.35);  }
  
      .tl-row[data-type="conference"]:hover .tl-dot { box-shadow: 0 0 0 3px #21409a,   0 4px 16px rgba(29,78,216,.5);   }
      .tl-row[data-type="panel"]:hover      .tl-dot { box-shadow: 0 0 0 3px #7c3aed, 0 4px 16px rgba(124,58,237,.5);  }
      .tl-row[data-type="workshop"]:hover   .tl-dot { box-shadow: 0 0 0 3px #ea580c, 0 4px 16px rgba(234,88,12,.5);   }
      .tl-row[data-type="break"]:hover      .tl-dot { box-shadow: 0 0 0 3px #64748b   0 4px 16px rgba(100,116,139,.4); }
      .tl-row[data-type="networking"]:hover .tl-dot { box-shadow: 0 0 0 3px #059669,  0 4px 16px rgba(5,150,105,.5);   }
      .tl-row[data-type="social"]:hover     .tl-dot { box-shadow: 0 0 0 3px #db2777,   0 4px 16px rgba(219,39,119,.5);  }
  
      /* ── Session Card ───────────────────────────────── */
      .tl-card {
        flex: 1; min-width: 0; margin-left: 20px;
        background: #ffffff; border-radius: 16px;
        padding: 22px 26px;
        box-shadow: 0 2px 8px rgba(15,23,42,.06); border: 1px solid #e2e8f0;
        transition: all .25s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden;
      }
  
      /* Left accent bar */
      .tl-card::before {
        content: ''; position: absolute;
        left: 0; top: 0; bottom: 0; width: 4px;
        border-radius: 4px 0 0 4px; background: #1d4ed8;
        transition: width .25s ease;
      }
  
      .tl-row[data-type="conference"] .tl-card::before { background: #1d4ed8;   }
      .tl-row[data-type="panel"]      .tl-card::before { background: #7c3aed; }
      .tl-row[data-type="workshop"]   .tl-card::before { background: #ea580c; }
      .tl-row[data-type="break"]      .tl-card::before { background: #64748b;   }
      .tl-row[data-type="networking"] .tl-card::before { background: #059669;  }
      .tl-row[data-type="social"]     .tl-card::before { background: #db2777;   }
  
      .tl-card:hover {
        transform: translateY(-4px) translateX(2px);
        box-shadow: 0 16px 48px rgba(15,23,42,.12); border-color: transparent;
      }
      .tl-card:hover::before { width: 6px; }
  
      /* Break card */
      .tl-row[data-type="break"] .tl-card {
        background: #f1f5f9; border-style: dashed;
      }
      .tl-row[data-type="break"] .tl-card:hover { background: #fff; }
  
      /* Card top row */
      .card-top {
        display: flex; align-items: center;
        justify-content: flex-start; gap: 10px; margin-bottom: 10px;
      }
  
      /* ── Badges ─────────────────────────────────────── */
      .badge-type {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 4px 12px; border-radius: 999px;
        font-size: .7rem; font-weight: 700;
        letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0;
      }
  
      .badge-conference { background: #dbeafe;    color: #21409a;   }
      .badge-panel      { background: #f5f3ff; color: #7c3aed; }
      .badge-atelier    { background: #fff7ed; color: #ea580c; }
      .badge-pause      { background: #f1f5f9;   color: #64748b;   }
      .badge-networking { background: #ecfdf5;  color: #059669;  }
      .badge-social     { background: #fdf2f8;   color: #db2777;   }
      .badge-default    { background: #dbeafe;    color: #21409a;   }
  
      /* Card title */
      .card-title {
        font-size: 1rem; font-weight: 700; color: #0f172a;
        line-height: 1.35; margin-bottom: 7px;
      }
      .tl-row[data-type="break"] .card-title { font-weight: 500; color: #64748b; }
  
      /* Card description */
      .card-desc {
        font-size: .82rem; color: #64748b;
        line-height: 1.6; margin-bottom: 14px;
      }
  
      /* Speaker / location row */
      .card-speaker {
        display: flex; align-items: center; gap: 10px;
        padding-top: 12px; border-top: 1px solid #e2e8f0;
        font-size: .82rem; color: #64748b;
      }
      .card-speaker:empty { display: none; }
  
      .speaker-avatar {
        width: 34px; height: 34px; border-radius: 50%;
        border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06);
        background: #dbeafe; color: #21409a;
        display: flex; align-items: center; justify-content: center;
        font-size: .95rem; flex-shrink: 0; overflow: hidden;
      }
      .speaker-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .speaker-name-text  { font-weight: 600; color: #1e293b; font-size: .82rem; }
  
      /* ── Skeleton Loading ───────────────────────────── */
      @keyframes shimmer {
        0%   { background-position: -600px 0; }
        100% { background-position:  600px 0; }
      }
  
      .skel-card {
        height: 120px; border-radius: 16px;
        background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
        background-size: 600px 100%;
        animation: shimmer 1.4s infinite linear;
        margin-bottom: 28px; border: 1px solid #e2e8f0;
      }
      .skel-card:nth-child(2) { opacity: .75; animation-delay: .12s; }
      .skel-card:nth-child(3) { opacity: .5;  animation-delay: .24s; }
  
      /* ── Empty / Error State ────────────────────────── */
      .schedule-empty {
        text-align: center; padding: 64px 24px;
        color: #64748b; font-size: .95rem; font-weight: 500;
      }
      .schedule-empty i {
        display: block; font-size: 2.5rem;
        margin-bottom: 16px; opacity: .4;
      }
  
      /* ── Stats Bar ──────────────────────────────────── */
      .stats-bar {
        position: relative; z-index: 1;
        display: flex; justify-content: center; gap: 40px;
        flex-wrap: wrap; margin-top: 64px; padding-top: 48px;
        border-top: 1px solid rgba(59,130,246,.15);
      }
      .stat-item { text-align: center; }
      .stat-number {
     
        font-size: 2.4rem; font-weight: 800;
        color: #0f172a; line-height: 1; margin-bottom: 4px;
      }
      .stat-number span { color: #21409a; }
      .stat-label {
        font-size: .78rem; font-weight: 500; color: #64748b;
        text-transform: uppercase; letter-spacing: .06em;
      }
      .stat-divider { width: 1px; height: 50px; background: #e2e8f0; align-self: center; }
  
      /* ═══════════════════════════════════════════════════
         RESPONSIVE
      ═══════════════════════════════════════════════════ */
      @media (max-width: 767.98px) {
        .programme-section { padding: 64px 0 80px; }
        .timeline-wrap::before { left: 16px; }
        .tl-time { display: none; }
        .tl-marker-col { width: 20px; padding-left: 10px; }
        .tl-card { margin-left: 14px; padding: 16px 18px; }
        .card-top { flex-wrap: wrap; }
        .stats-bar { gap: 24px; }
        .stat-divider { display: none; }
        #scheduleTab .nav-link { padding: 8px 16px; }
        #scheduleTab .tab-date { display: none; }
      }
  
      @media (max-width: 479.98px) {
        #scheduleTab { border-radius: 16px; }
        #scheduleTab .nav-link { border-radius: 12px; text-align: center; }
      }