dmf/tracks.html at main · parthmenon12/dmf · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tracks — Dubai Meridian Forum</title>
  <meta property="og:type" content="website">
  <meta property="og:title" content="Tracks — Dubai Meridian Forum">
  <meta property="og:description" content="A four-day professional forum in Dubai built around Law, Finance, Engineering, and Management.">
  <meta property="og:image" content="https://www.dubaimeridian.com/og-thumbnail.png">
  <meta property="og:url" content="https://www.dubaimeridian.com/tracks.html">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://www.dubaimeridian.com/og-thumbnail.png">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Raleway:wght@300;400;500;600;700&family=Amiri:wght@400;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            navy: { 50: '#e8e8f0', 100: '#c5c5d9', 200: '#9494b5', 300: '#5e5e88', 400: '#2d2d5e', 500: '#14143a', 600: '#0d0d2b', 700: '#09091f', 800: '#060616', 900: '#03030b' },
            gold: { 50: '#fdf8ef', 100: '#f9ecd3', 200: '#f0d5a0', 300: '#e5bc6d', 400: '#d4a44e', 500: '#c9a96e', 600: '#a8863a', 700: '#836629', 800: '#5e491d', 900: '#3a2d12' },
          },
          fontFamily: {
            display: ['"Cormorant Garamond"', 'serif'],
            body: ['"Raleway"', 'sans-serif'],
            arabic: ['"Amiri"', 'serif'],
          }
        }
      }
    }
  </script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { background: #060616; color: #e8e8f0; font-family: 'Raleway', sans-serif; }
    .grain::after {
      content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 9999; opacity: 0.5;
    }
    .nav-link { position: relative; letter-spacing: 0.15em; }
    .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: #c9a96e; transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .nav-link:hover::after { width: 100%; }
    .gold-line { width: 60px; height: 1px; background: linear-gradient(90deg, #c9a96e, transparent); }
    .fade-section { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
    .fade-section.visible { opacity: 1; transform: translateY(0); }
    .feature-card {
      background: linear-gradient(145deg, rgba(20, 20, 58, 0.6), rgba(9, 9, 31, 0.8));
      border: 1px solid rgba(201, 169, 110, 0.08);
      transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
    }
    .feature-card:hover {
      border-color: rgba(201, 169, 110, 0.25); transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(201, 169, 110, 0.06), 0 8px 24px rgba(0,0,0,0.3);
    }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #060616; }
    ::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.3); border-radius: 3px; }
    .mobile-menu { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .mobile-menu.open { transform: translateX(0); }

    /* Track tabs */
    .track-tab {
      position: relative;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    .track-tab::after {
      content: '';
      position: absolute;
      bottom: -8px; left: 0;
      width: 100%; height: 2px;
      background: #c9a96e;
      transform: scaleX(0);
      transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .track-tab.active::after { transform: scaleX(1); }
    .track-tab.active { color: #c9a96e; }

    .track-content { display: none; }
    .track-content.active { display: block; }

    .topic-tag {
      background: rgba(201, 169, 110, 0.06);
      border: 1px solid rgba(201, 169, 110, 0.12);
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .topic-tag:hover {
      border-color: rgba(201, 169, 110, 0.3);
      background: rgba(201, 169, 110, 0.1);
    }
  </style>
</head>
<body class="grain">

  <!-- Navigation -->
  <nav class="fixed top-0 w-full z-50 transition-all duration-500" id="mainNav">
    <div class="max-w-7xl mx-auto px-6 lg:px-12">
      <div class="flex items-center justify-between h-20">
        <a href="index.html" class="flex items-center gap-3 group">
          <img src="5.png" alt="DMF Logo" class="h-14 opacity-90 group-hover:opacity-100 transition-opacity duration-300" style="mix-blend-mode:screen;filter:brightness(1.6) saturate(0.8)">
        </a>
        <div class="hidden lg:flex items-center gap-10">
          <a href="index.html" class="nav-link text-navy-100 text-xs font-body uppercase tracking-widest hover:text-gold-400 transition-colors duration-300">Home</a>
          <a href="about.html" class="nav-link text-navy-100 text-xs font-body uppercase tracking-widest hover:text-gold-400 transition-colors duration-300">About</a>
          <a href="team.html" class="nav-link text-navy-100 text-xs font-body uppercase tracking-widest hover:text-gold-400 transition-colors duration-300">Team</a>
          <a href="tracks.html" class="nav-link text-gold-400 text-xs font-body uppercase tracking-widest">Tracks</a>
          <a href="partners.html" class="nav-link text-white/60 text-xs font-body uppercase tracking-widest hover:text-gold-400 transition-colors duration-300">Partners</a>
          <a href="contact.html" class="nav-link text-navy-100 text-xs font-body uppercase tracking-widest hover:text-gold-400 transition-colors duration-300">Contact</a>
        </div>
        <a href="register.html" class="hidden lg:block px-6 py-2.5 border border-gold-500/40 text-gold-400 text-xs uppercase tracking-[0.2em] font-body hover:bg-gold-500/10 hover:border-gold-400 transition-all duration-400 focus-visible:outline-2 focus-visible:outline-gold-400 focus-visible:outline-offset-2">Register</a>
        <button id="mobileToggle" class="lg:hidden text-navy-100 hover:text-gold-400 transition-colors" aria-label="Menu">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
      </div>
    </div>
  </nav>

  <!-- Mobile Menu -->
  <div id="mobileMenu" class="mobile-menu fixed inset-0 z-[60] bg-navy-800/98 backdrop-blur-xl flex flex-col items-center justify-center gap-8">
    <button id="mobileClose" class="absolute top-6 right-6 text-navy-100 hover:text-gold-400 transition-colors" aria-label="Close">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>
    <a href="index.html" class="text-navy-100 text-sm font-body uppercase tracking-[0.3em] hover:text-gold-400 transition-colors">Home</a>
    <a href="about.html" class="text-navy-100 text-sm font-body uppercase tracking-[0.3em] hover:text-gold-400 transition-colors">About</a>
    <a href="team.html" class="text-navy-100 text-sm font-body uppercase tracking-[0.3em] hover:text-gold-400 transition-colors">Team</a>
    <a href="tracks.html" class="text-gold-400 text-sm font-body uppercase tracking-[0.3em]">Tracks</a>
    <a href="partners.html" class="text-white/60 text-sm font-body uppercase tracking-[0.3em] hover:text-gold-400 transition-colors">Partners</a>
    <a href="contact.html" class="text-navy-100 text-sm font-body uppercase tracking-[0.3em] hover:text-gold-400 transition-colors">Contact</a>
  </div>

  <!-- Page Header -->
  <section class="relative pt-32 pb-20 md:pt-40 md:pb-28">
    <div class="relative z-10 max-w-6xl mx-auto px-6 lg:px-12">
      <p class="font-arabic text-gold-500/50 text-base mb-3" dir="rtl">المسارات</p>
      <p class="text-gold-500/60 text-xs uppercase tracking-[0.3em] font-body mb-4" id="scramble-tracks">Competition Tracks</p>
      <h1 class="font-display text-5xl md:text-6xl lg:text-7xl text-white font-light" style="letter-spacing: -0.03em; line-height: 1.1;">
        Four <span class="text-gold-400 italic">Disciplines</span>
      </h1>
      <p class="font-body text-navy-200/60 text-sm mt-6 max-w-xl">Each track represents a pillar of the Meridian Challenge. Participants are grouped across all four to form balanced, interdisciplinary teams.</p>
    </div>
  </section>

  <!-- Track Navigation Tabs -->
  <section class="relative py-6 border-b border-gold-500/10">
    <div class="max-w-6xl mx-auto px-6 lg:px-12">
      <div class="flex gap-10 md:gap-16">
        <button class="track-tab text-navy-200/60 text-xs uppercase tracking-[0.25em] font-body py-3 whitespace-nowrap" data-track="finance">Finance</button>
        <button class="track-tab text-navy-200/60 text-xs uppercase tracking-[0.25em] font-body py-3 whitespace-nowrap" data-track="law">Law</button>
        <button class="track-tab text-navy-200/60 text-xs uppercase tracking-[0.25em] font-body py-3 whitespace-nowrap" data-track="engineering">Engineering</button>
        <button class="track-tab text-navy-200/60 text-xs uppercase tracking-[0.25em] font-body py-3 whitespace-nowrap" data-track="management">Management</button>
      </div>
    </div>
  </section>

  <!-- Track Content -->
  <section class="relative py-20 md:py-32">
    <div class="max-w-6xl mx-auto px-6 lg:px-12">

      <!-- FINANCE -->
      <div id="finance" class="track-content active">
        <div class="fade-section visible grid lg:grid-cols-5 gap-12 lg:gap-16">
          <!-- Left: Overview -->
          <div class="lg:col-span-3">
            <div class="flex items-center gap-4 mb-8">
              <span class="font-display text-6xl text-gold-500/15">I</span>
              <div>
                <h2 class="font-display text-4xl md:text-5xl text-white font-light">Finance</h2>
                <p class="font-arabic text-gold-500/40 text-sm mt-1" dir="rtl">المالية</p>
              </div>
            </div>
            <div class="gold-line mb-8"></div>

            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-5">
              Get ready to experience the future of global finance through an innovative combination of finance and strategy. Network with leading financial professionals in areas such as capital markets, fintech, risk management, and the global banking system.
            </p>
            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-5">
              This track will challenge you to explore new ways of viewing financial systems and developing resilient, interconnected economies by applying a variety of approaches to various components of the global economy. Learn directly from senior industry leaders, top investment banks, and the world's best finance professors.
            </p>
            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-8">
              Through competition, you will develop and demonstrate your ability to construct bold business models; create and execute complex capital structures; analyse real-life risks; and develop and present business cases that will withstand scrutiny at the international level. This is a unique opportunity for you to demonstrate your skills, be a leader, and help shape the future of the global economy.
            </p>

            <!-- Key Topics -->
            <p class="text-gold-500/60 text-xs uppercase tracking-[0.25em] font-body mb-4">Key Topics</p>
            <div class="flex flex-wrap gap-2">
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Capital Markets</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Fintech &amp; DeFi</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Risk Modelling</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">ESG &amp; Impact Investing</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Sovereign Wealth</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Islamic Finance</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Venture Capital</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Quantitative Analysis</span>
            </div>
          </div>

          <!-- Right: Stats/Highlights -->
          <div class="lg:col-span-2 space-y-5">
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Expert-Led Workshops</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Panel Discussions</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Competition Rounds</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-gold-500/60 text-xs uppercase tracking-[0.2em] font-body mb-3">Track Lead</p>
              <p class="font-display text-lg text-white">To Be Announced</p>
              <p class="text-navy-200/40 text-xs font-body mt-1">Finance Track</p>
            </div>
          </div>
        </div>
      </div>

      <!-- LAW -->
      <div id="law" class="track-content">
        <div class="fade-section visible grid lg:grid-cols-5 gap-12 lg:gap-16">
          <div class="lg:col-span-3">
            <div class="flex items-center gap-4 mb-8">
              <span class="font-display text-6xl text-gold-500/15">II</span>
              <div>
                <h2 class="font-display text-4xl md:text-5xl text-white font-light">Law</h2>
                <p class="font-arabic text-gold-500/40 text-sm mt-1" dir="rtl">القانون</p>
              </div>
            </div>
            <div class="gold-line mb-8"></div>

            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-5">
              Step into the fast-paced world where law is the engine of global commerce, cutting-edge technology and critical infrastructure. Participants will gain a background in corporate law, arbitration, intellectual property and regulatory affairs — becoming the architects of legally sound, game-changing business solutions that will bring fresh perspectives to the next generation of this industry.
            </p>
            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-5">
              From the lens of the Meridian Challenge, we pose high-stakes scenarios to legal enthusiasts, including navigating complex regulations across borders, ensuring airtight compliance and developing unshakeable governance frameworks. In addition, they must also defend their proposals to an elite panel of judges under intense scrutiny.
            </p>
            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-8">
              Workshops led by top-tier practitioners from premier international law firms and leading legal academics provide participants with rare access to the strategies used to shape global business law.
            </p>

            <p class="text-gold-500/60 text-xs uppercase tracking-[0.25em] font-body mb-4">Key Topics</p>
            <div class="flex flex-wrap gap-2">
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">International Arbitration</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Regulatory Compliance</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Intellectual Property</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Corporate Governance</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Commercial Law</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Data Privacy &amp; AI Ethics</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Cross-Border Litigation</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Emerging Market Regulation</span>
            </div>
          </div>

          <div class="lg:col-span-2 space-y-5">
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Expert-Led Workshops</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Moot Court Sessions</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Competition Rounds</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-gold-500/60 text-xs uppercase tracking-[0.2em] font-body mb-3">Track Lead</p>
              <p class="font-display text-lg text-white">To Be Announced</p>
              <p class="text-navy-200/40 text-xs font-body mt-1">Law Track</p>
            </div>
          </div>
        </div>
      </div>

      <!-- ENGINEERING -->
      <div id="engineering" class="track-content">
        <div class="fade-section visible grid lg:grid-cols-5 gap-12 lg:gap-16">
          <div class="lg:col-span-3">
            <div class="flex items-center gap-4 mb-8">
              <span class="font-display text-6xl text-gold-500/15">III</span>
              <div>
                <h2 class="font-display text-4xl md:text-5xl text-white font-light">Engineering</h2>
                <p class="font-arabic text-gold-500/40 text-sm mt-1" dir="rtl">الهندسة</p>
              </div>
            </div>
            <div class="gold-line mb-8"></div>

            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-5">
              The Engineering Track challenges participants to create, test, and bring to market new and innovative solutions for some of the biggest systemic problems of the current time. From sustainable urban development and intelligent infrastructure to AI, advanced manufacturing and many others, engineers are turning bold concepts into tangible results.
            </p>
            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-5">
              You and your team are creating a centre for technology-driven innovation within the Meridian Challenge, creating viable, scalable solutions and clearly and confidently communicating complex ideas to a panel of leading experts in their fields.
            </p>
            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-8">
              Workshops feature leaders from world-class engineering firms, smart city development authorities, and university research labs at the cutting edge of sustainable technology and systems design.
            </p>

            <p class="text-gold-500/60 text-xs uppercase tracking-[0.25em] font-body mb-4">Key Topics</p>
            <div class="flex flex-wrap gap-2">
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Sustainable Infrastructure</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">AI &amp; Machine Learning</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Smart City Design</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Systems Engineering</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Renewable Energy</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Robotics &amp; Automation</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Advanced Manufacturing</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Water &amp; Resource Management</span>
            </div>
          </div>

          <div class="lg:col-span-2 space-y-5">
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Technical Workshops</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Design Sprints</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Competition Rounds</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-gold-500/60 text-xs uppercase tracking-[0.2em] font-body mb-3">Track Lead</p>
              <p class="font-display text-lg text-white">To Be Announced</p>
              <p class="text-navy-200/40 text-xs font-body mt-1">Engineering Track</p>
            </div>
          </div>
        </div>
      </div>

      <!-- MANAGEMENT -->
      <div id="management" class="track-content">
        <div class="fade-section visible grid lg:grid-cols-5 gap-12 lg:gap-16">
          <div class="lg:col-span-3">
            <div class="flex items-center gap-4 mb-8">
              <span class="font-display text-6xl text-gold-500/15">IV</span>
              <div>
                <h2 class="font-display text-4xl md:text-5xl text-white font-light">Management</h2>
                <p class="font-arabic text-gold-500/40 text-sm mt-1" dir="rtl">الإدارة</p>
              </div>
            </div>
            <div class="gold-line mb-8"></div>

            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-5">
              The Management track challenges participants to translate ambition into execution. Drawing on disciplines from organisational behaviour and strategic leadership to operations management and entrepreneurship, management specialists bring the operational and strategic scaffolding that determines whether ideas succeed or collapse at a real scale.
            </p>
            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-5">
              In the Meridian Challenge, management participants lead team coordination, define organisational structures, manage resource allocation, and present cohesive business strategies to a judging panel of senior executives. They are responsible for ensuring that the financial model, legal framework, and engineering solution form a unified, deliverable proposal.
            </p>
            <p class="font-body text-navy-200/80 leading-[1.8] text-sm mb-8">
              Workshops are led by C-suite executives, MBA faculty from leading business schools, and entrepreneurs who have scaled ventures across the Gulf and beyond. Sessions cover strategic decision-making under uncertainty, stakeholder management, and building organisations that endure.
            </p>

            <p class="text-gold-500/60 text-xs uppercase tracking-[0.25em] font-body mb-4">Key Topics</p>
            <div class="flex flex-wrap gap-2">
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Strategic Leadership</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Operations &amp; Execution</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Organisational Design</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Entrepreneurship &amp; Growth</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Corporate Strategy</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Stakeholder Management</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Change Management</span>
              <span class="topic-tag px-3 py-1.5 rounded-sm text-xs font-body text-navy-100/70">Business Model Innovation</span>
            </div>
          </div>

          <div class="lg:col-span-2 space-y-5">
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Executive-Led Workshops</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Business Case Rounds</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-navy-200/50 text-xs font-body uppercase tracking-wider mb-1">Competition Rounds</p>
              <p class="font-display text-base text-gold-400/70">Details to be announced</p>
            </div>
            <div class="feature-card p-6 rounded-sm">
              <p class="text-gold-500/60 text-xs uppercase tracking-[0.2em] font-body mb-3">Track Lead</p>
              <p class="font-display text-lg text-white">To Be Announced</p>
              <p class="text-navy-200/40 text-xs font-body mt-1">Management Track</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- How Teams Work -->
  <section class="relative py-20 md:py-28">
    <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-gold-500/20 to-transparent"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-navy-900 via-navy-800/20 to-navy-900"></div>

    <div class="relative max-w-4xl mx-auto px-6 lg:px-12">
      <div class="fade-section text-center">
        <p class="text-gold-500/60 text-xs uppercase tracking-[0.3em] font-body mb-4">The Meridian Challenge</p>
        <h2 class="font-display text-3xl md:text-4xl text-white font-light mb-6" style="letter-spacing: -0.02em;">
          How <span class="text-gold-400 italic">Teams</span> Are Formed
        </h2>
        <div class="gold-line mx-auto mb-8"></div>
        <p class="font-body text-navy-200/70 text-sm leading-[1.8] mb-6">
          Each team in the Meridian Challenge is composed of participants from all four tracks — finance, law, engineering, and management. Teams are strategically assembled to ensure a balance of expertise, creating a microcosm of the real-world collaboration needed to solve complex, multi-dimensional problems.
        </p>
        <p class="font-body text-navy-200/70 text-sm leading-[1.8] mb-6">
          Teams will face a series of escalating challenges: initial problem analysis, solution design, crisis pivots, and final presentations. Judges evaluate not only the quality of the solution but the team's ability to integrate perspectives, communicate across disciplines, and perform under pressure.
        </p>
        <p class="font-body text-navy-200/50 text-sm leading-[1.8] italic">
          "The Meridian is not where one discipline ends — it is where they all converge."
        </p>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="relative py-16 border-t border-gold-500/10">
    <div class="max-w-6xl mx-auto px-6 lg:px-12">
      <div class="grid md:grid-cols-3 gap-12">
        <div>
          <img src="5.png" alt="DMF" class="h-8 opacity-70 mb-4" style="mix-blend-mode:screen;filter:brightness(1.6) saturate(0.8)">
          <p class="font-body text-navy-200/40 text-xs leading-relaxed">Dubai Meridian Forum &copy; 2026.<br>All rights reserved.</p>
          <p class="font-arabic text-gold-500/30 text-sm mt-3" dir="rtl">منتدى دبي ميريديان</p>
        </div>
        <div>
          <p class="text-gold-500/60 text-xs uppercase tracking-[0.2em] font-body mb-4">Navigate</p>
          <div class="flex flex-col gap-2">
            <a href="index.html" class="text-navy-200/50 text-sm font-body hover:text-gold-400 transition-colors duration-300">Home</a>
            <a href="about.html" class="text-navy-200/50 text-sm font-body hover:text-gold-400 transition-colors duration-300">About</a>
            <a href="team.html" class="text-navy-200/50 text-sm font-body hover:text-gold-400 transition-colors duration-300">Team</a>
            <a href="partners.html" class="text-navy-200/50 text-sm font-body hover:text-gold-400 transition-colors duration-300">Partners</a>
            <a href="register.html" class="text-navy-200/50 text-sm font-body hover:text-gold-400 transition-colors duration-300">Register</a>
            <a href="contact.html" class="text-navy-200/50 text-sm font-body hover:text-gold-400 transition-colors duration-300">Contact</a>
          </div>
        </div>
        <div>
          <p class="text-gold-500/60 text-xs uppercase tracking-[0.2em] font-body mb-4">Contact</p>
          <p class="text-navy-200/50 text-sm font-body leading-relaxed">Aspect Tower, Office No. 2206<br>Zone B, Bay Avenue<br>Business Bay, Dubai</p>
          <a href="mailto:info@dubaimeridianforum.com" class="text-gold-500/50 text-sm font-body mt-3 inline-block hover:text-gold-400 transition-colors duration-300">info@dubaimeridianforum.com</a>
        </div>
      </div>
      <div class="mt-12 pt-8 border-t border-gold-500/5 text-center">
        <p class="text-navy-200/30 text-xs font-body tracking-wide">Dubai Meridian Forum &middot; Business Bay, Dubai, UAE</p>
      </div>
    </div>
  </footer>

  <script>
    // Nav scroll
    const nav = document.getElementById('mainNav');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 60) { nav.style.background = 'rgba(6,6,22,0.95)'; nav.style.backdropFilter = 'blur(20px)'; nav.style.borderBottom = '1px solid rgba(201,169,110,0.08)'; }
      else { nav.style.background = 'transparent'; nav.style.backdropFilter = 'none'; nav.style.borderBottom = 'none'; }
    });

    // Mobile menu
    document.getElementById('mobileToggle').addEventListener('click', () => document.getElementById('mobileMenu').classList.add('open'));
    document.getElementById('mobileClose').addEventListener('click', () => document.getElementById('mobileMenu').classList.remove('open'));

    // Track tabs
    const tabs = document.querySelectorAll('.track-tab');
    const contents = document.querySelectorAll('.track-content');

    // Handle hash navigation
    function activateTrack(trackId) {
      tabs.forEach(t => t.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));
      const targetTab = document.querySelector(`[data-track="${trackId}"]`);
      const targetContent = document.getElementById(trackId);
      if (targetTab && targetContent) {
        targetTab.classList.add('active');
        targetContent.classList.add('active');
      }
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const track = tab.dataset.track;
        activateTrack(track);
        history.replaceState(null, '', `#${track}`);
      });
    });

    // Check hash on load
    if (window.location.hash) {
      const hash = window.location.hash.substring(1);
      if (['finance', 'law', 'engineering', 'management'].includes(hash)) {
        activateTrack(hash);
      }
    }

    // Scroll reveal
    const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); }, { threshold: 0.15 });
    document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));

    // ── SpecialText scramble ──────────────────────────────────────────────────────
    (function(){
      const CHARS='_!X$0-+*#';
      function rndChar(prev){let c;do{c=CHARS[Math.floor(Math.random()*CHARS.length)];}while(c===prev);return c;}
      class SpecialText{
        constructor(el,{speed=20,once=true}={}){
          this.el=el;this.text=el.textContent;this.speed=speed;
          this.iv=null;this.phase='p1';this.step=0;this.done=false;
          const io=new IntersectionObserver(entries=>{
            entries.forEach(e=>{if(e.isIntersecting&&!this.done){this._start();if(once)io.unobserve(el);}});
          },{rootMargin:'-80px'});
          io.observe(el);
        }
        _start(){
          this.el.textContent='\u00A0'.repeat(this.text.length);
          this.phase='p1';this.step=0;
          if(this.iv)clearInterval(this.iv);
          this.iv=setInterval(()=>this.phase==='p1'?this._p1():this._p2(),this.speed);
        }
        _p1(){
          const max=this.text.length*2,len=Math.min(this.step+1,this.text.length);
          const c=[];for(let i=0;i<len;i++)c.push(rndChar(c[i-1]));
          for(let i=len;i<this.text.length;i++)c.push('\u00A0');
          this.el.textContent=c.join('');
          if(this.step<max-1){this.step++;}else{this.phase='p2';this.step=0;}
        }
        _p2(){
          const rev=Math.floor(this.step/2),c=[];
          for(let i=0;i<rev&&i<this.text.length;i++)c.push(this.text[i]);
          if(rev<this.text.length)c.push(this.step%2===0?'_':rndChar());
          while(c.length<this.text.length)c.push(rndChar());
          this.el.textContent=c.join('');
          if(this.step<this.text.length*2-1){this.step++;}
          else{this.el.textContent=this.text;clearInterval(this.iv);this.done=true;}
        }
      }
      const el=document.getElementById('scramble-tracks');
      if(el)new SpecialText(el,{speed:18});
    })();
  </script>
</body>
</html>