/* ═══════════════════════════════════════
     RESET & DESIGN TOKENS
  ═══════════════════════════════════════ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --navy:        #070B1F;
    --navy2:       #0D1433;
    --navy3:       #111a3e;
    --cyan:        #00D4FF;
    --cyan-deep:   #0099B8;
    --gold:        #F5A623;
    --gold-deep:   #D4860A;
    --white:       #FFFFFF;
    --muted:       rgba(255,255,255,0.58);
    --card:        rgba(255,255,255,0.04);
    --border:      rgba(0,212,255,0.18);
    --lt-bg:       #F0F4FF;
    --lt-bg2:      #E8EEF8;
    --lt-card:     #FFFFFF;
    --ink:         #0D1433;
    --ink2:        #374269;
    --ink3:        #5C6B99;
    --lt-border:   rgba(0,153,184,0.15);
  }
  html  { scroll-behavior: smooth; }
  body  { font-family: 'Inter', sans-serif; background: var(--navy); color: var(--white); overflow-x: hidden; }
 
  #bgCanvas { position: fixed; inset: 0; z-index: 0; opacity: 0.35; pointer-events: none; }
 
  /* ── SCROLL REVEAL ── */
  .reveal        { opacity:0; transform:translateY(28px);  transition:opacity .7s ease,transform .7s ease; }
  .reveal-left   { opacity:0; transform:translateX(-28px); transition:opacity .7s ease,transform .7s ease; }
  .reveal-right  { opacity:0; transform:translateX(28px);  transition:opacity .7s ease,transform .7s ease; }
  .reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; }
 
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy:   #070B1F;
    --navy2:  #0D1433;
    --cyan:   #00D4FF;
    --cyan2:  #0099CC;
    --gold:   #F5A623;
    --white:  #FFFFFF;
    --muted:  rgba(255,255,255,0.6);
    --card:   rgba(255,255,255,0.04);
    --border: rgba(0,212,255,0.18);
    --light-bg:    #F0F4FF;
    --light-bg2:   #E6EDF8;
    --light-card:  #FFFFFF;
    --ink:         #0D1433;
    --ink2:        #374269;
    --ink3:        #5C6B99;
    --accent-cyan: #0099B8;   /* slightly deeper cyan — legible on light */
    --accent-gold: #D4860A;   /* deeper gold — legible on light */
    --section-border: rgba(0,153,184,0.15);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--navy);
    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── CANVAS BACKGROUND ── */
#bgCanvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.55;
}

/* ── NAVBAR WRAPPER ── */
.navbar-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
}

/* ── HEADER STRIP ── */
.header-strip {
    background: rgba(4, 7, 20, 0.97);
    border-bottom: 1px solid var(--border);
    padding: 10px 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-logos {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-shrink: 0;
}

.header-logo-img {
    height: 52px;
    width: 52px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    padding: 3px;
    border: 1px solid var(--border);
}

.header-college-info {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.header-sanstha {
    font-size: 0.68rem;
    color: var(--muted);
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.header-college-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 1.8vw, 6.15rem);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.header-college-sub {
    font-size: 1rem;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.4;
}

.header-accreditation {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.1em;
    margin-top: 3px;
}

.header-right-logos {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
}

.header-right-logo {
    height: 48px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    padding: 4px 6px;
    border: 1px solid var(--border);
}

/* Placeholder boxes for logos (replace with real <img> tags) */
.logo-placeholder {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.logo-placeholder img{
    height: 80px;
}

.logo-placeholder-rect {
    height: 52px;
    width: 52px;
    border-radius: 50px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 10px;
}
.logo-placeholder-rect img{
    height: 80px;
}

/* ── MAIN NAV BAR ── */
.main-nav {
    background: rgba(7, 11, 31, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0 4vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-menu {
    display: flex;
    align-items: stretch;
    list-style: none;
    gap: 0;
    flex: 1;
}

.nav-item {
    position: relative;
}
    
.nav-item > a,
.nav-item > .nav-btn{
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 16px 14px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    transition: color 0.2s, background 0.2s;
    border-bottom: 2px solid transparent;
}

.nav-item > a:hover,
.nav-item > .nav-btn:hover,
.nav-item.open > .nav-btn {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}

.nav-item > a.active { color: var(--cyan); border-bottom-color: var(--cyan); }

/* chevron icon */
.chevron {
    display: inline-block;
    width: 10px; height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s;
    flex-shrink: 0;
    margin-top: 1px;
}

.nav-item.open .chevron { transform: rotate(-135deg) translateY(-2px); }

/* ── DROPDOWN ── */
.dropdown {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    min-width: 220px;
    background: rgba(10, 14, 42, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 200;
}

.nav-item.open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    display: block;
    padding: 10px 20px;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    transition: color 0.18s, background 0.18s, padding-left 0.18s;
    border-left: 2px solid transparent;
}

.dropdown a:hover {
    color: var(--cyan);
    background: rgba(0,212,255,0.06);
    padding-left: 26px;
    border-left-color: var(--cyan);
}

/* ── REGISTER CTA ── */
.nav-register {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 9px 20px;
    background: var(--cyan);
    color: var(--navy);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 12px;
}

.nav-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,212,255,0.35);
}

/* ── HAMBURGER ── */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
}

.hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── MOBILE DRAWER ── */
.mobile-drawer {
    display: none;
    flex-direction: column;
    background: rgba(7, 11, 31, 0.98);
    border-top: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.mobile-drawer.open { max-height: 80vh; overflow-y: auto; }

.mobile-nav-item { border-bottom: 1px solid rgba(0,212,255,0.08); }

.mobile-nav-link,
.mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 6vw;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.mobile-nav-link:hover,
.mobile-nav-toggle:hover { color: var(--cyan); }

.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0,212,255,0.03);
}

.mobile-submenu.open { max-height: 400px; }

.mobile-submenu a {
    display: block;
    padding: 11px 8vw;
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.mobile-submenu a:hover { color: var(--cyan); border-left-color: var(--cyan); }

.mobile-register {
    margin: 14px 6vw 20px;
    display: block;
    text-align: center;
    padding: 13px;
    background: var(--cyan);
    color: var(--navy);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 1100px) {
    .nav-item > a, .nav-item > .nav-btn { padding: 16px 10px; font-size: 0.7rem; }
}

@media (max-width: 900px) {
    .nav-menu, .nav-register { display: none !important; }
    .hamburger { display: flex; }
    .mobile-drawer { display: flex; }
    .header-college-name { font-size: 0.82rem; }
    .header-college-sub, .header-accreditation { display: none; }
}

@media (max-width: 600px) {
    .header-strip { padding: 8px 4vw; gap: 10px; }
    .header-sanstha { display: none; }
    .header-right-logos { display: none; }
    .logo-placeholder { height: 40px; width: 40px; font-size: 1.1rem; }
}


  /* ═══════════════════════════════════════
     PAGE HERO
  ═══════════════════════════════════════ */
  .page-hero {
    position:relative; z-index:1; padding:180px 6vw 70px;
    min-height:300px; display:flex; flex-direction:column;
    align-items:center; justify-content:flex-end; text-align:center; overflow:hidden;
  }
  .page-hero::before {
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(to bottom, rgba(7,11,31,0.6) 0%, rgba(7,11,31,0.88) 100%);
        z-index:-1;
  }
  .page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); }
  .page-hero-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--cyan); margin-bottom:14px;
  }
  .page-hero-eyebrow::before, .page-hero-eyebrow::after { content:''; display:inline-block; width:36px; height:1.5px; background:var(--cyan); opacity:0.6; }
  .page-hero-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700; color:var(--white); letter-spacing:-0.02em; line-height:1.1; }
  .breadcrumb { display:flex; align-items:center; gap:8px; font-size:0.72rem; color:var(--muted); margin-top:18px; }
  .breadcrumb a { color:var(--cyan); text-decoration:none; }
  .breadcrumb span { opacity:0.4; }

  
  /* ═══════════════════════════════════════
     SHARED HELPERS
  ═══════════════════════════════════════ */
  .section-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  }
  .section-eyebrow::before { content:''; display:inline-block; width:26px; height:2px; background:currentColor; }
  .eyebrow-cyan  { color:var(--cyan-deep); }
  .eyebrow-white { color:var(--cyan); }
 
  .sh-dark  { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; color:var(--ink); line-height:1.18; }
  .sh-light { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; color:var(--white); line-height:1.18; }
  .hl-c { color:var(--cyan-deep); }
  .hl-cl{ color:var(--cyan); }
  .hl-g { color:var(--gold); }
 
  /* ═══════════════════════════════════════
     GUIDELINES OVERVIEW — dark cards
  ═══════════════════════════════════════ */
  .guidelines-overview {
    position:relative; z-index:1;
    background:var(--navy2); padding:80px 6vw 72px;
  }
  .guidelines-overview::before {
    content:''; position:absolute; top:-80px; right:-80px;
    width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,212,255,0.07) 0%,transparent 70%);
    pointer-events:none;
  }
 
  /* CMT notice */
  .cmt-notice {
    background:rgba(0,212,255,0.06); border:1px solid var(--border);
    border-left:3px solid var(--cyan); border-radius:6px;
    padding:18px 22px; margin-top:44px;
    display:flex; align-items:flex-start; gap:14px;
  }
  .cmt-notice-icon { font-size:1.5rem; flex-shrink:0; }
  .cmt-notice p { font-size:0.98rem; line-height:1.7; color:var(--muted); }
  .cmt-notice p strong { color:var(--white); }
 
  /* Download buttons */
  .download-strip {
    display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;
  }
  .dl-btn {
    display:inline-flex; align-items:center; gap:9px;
    font-family:'Space Grotesk',sans-serif; font-size:0.8rem; font-weight:700;
    letter-spacing:0.07em; text-transform:uppercase;
    padding:12px 22px; border-radius:4px; text-decoration:none;
    transition:transform .15s,box-shadow .15s;
  }
  .dl-btn.primary { background:var(--cyan); color:var(--navy); }
  .dl-btn.primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,212,255,.35); }
  .dl-btn.gold { background:transparent; border:1px solid var(--gold); color:var(--gold); }
  .dl-btn.gold:hover { background:rgba(245,166,35,0.1); transform:translateY(-2px); }
  .dl-btn.outline { background:transparent; border:1px solid var(--border); color:var(--muted); }
  .dl-btn.outline:hover { border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
 
  /* 4-card grid */
  .guideline-cards {
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;
  }
  .gc {
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:28px 22px; display:flex; flex-direction:column; gap:14px;
    cursor:pointer; transition:border-color .25s,background .25s,transform .2s;
    position:relative; overflow:hidden;
  }
  .gc::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; transition:opacity .25s; opacity:0; }
  .gc.cyan-top::before { background:linear-gradient(90deg,var(--cyan),transparent); }
  .gc.gold-top::before { background:linear-gradient(90deg,var(--gold),transparent); }
  .gc:hover { border-color:rgba(0,212,255,0.4); background:rgba(0,212,255,0.05); transform:translateY(-4px); }
  .gc:hover::before { opacity:1; }
  .gc-icon { font-size:2rem; }
  .gc-title { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; color:var(--white); }
  .gc-desc  { font-size:0.88rem; line-height:1.6; color:var(--muted); flex:1; }
  .gc-link  {
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--cyan); text-decoration:none;
  }
  .gc-link:hover { gap:10px; }
 
  @media (max-width:960px) { .guideline-cards { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px) { .guideline-cards { grid-template-columns:1fr; } }
 
  /* ═══════════════════════════════════════
     MODAL SYSTEM
  ═══════════════════════════════════════ */
  .modal-backdrop {
    position:fixed; inset:0; background:rgba(4,7,20,0.88);
    backdrop-filter:blur(8px); z-index:1000;
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
  }
  .modal-backdrop.open { opacity:1; visibility:visible; }
  .modal {
    background:var(--navy2); border:1px solid var(--border); border-radius:12px;
    width:100%; max-width:860px; max-height:88vh; overflow-y:auto;
    padding:40px 44px; position:relative;
    transform:translateY(20px); transition:transform .3s;
  }
  .modal-backdrop.open .modal { transform:translateY(0); }
  .modal::-webkit-scrollbar { width:5px; }
  .modal::-webkit-scrollbar-track { background:transparent; }
  .modal::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
 
  .modal-close {
    position:absolute; top:18px; right:20px;
    background:rgba(255,255,255,0.06); border:1px solid var(--border);
    border-radius:4px; width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:var(--muted); cursor:pointer;
    transition:background .2s,color .2s;
  }
  .modal-close:hover { background:rgba(0,212,255,0.12); color:var(--white); }
  .modal-title { font-family:'Space Grotesk',sans-serif; font-size:1.4rem; font-weight:700; color:var(--white); margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border); }
  .modal-title .hl { color:var(--cyan); }
 
  /* Modal body typography */
  .modal-body h3 { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; color:var(--cyan); letter-spacing:0.06em; text-transform:uppercase; margin:28px 0 12px; }
  .modal-body h3:first-child { margin-top:0; }
  .modal-body p  { font-size: 0.90rem; line-height:1.78; color:var(--muted); margin-bottom:14px; }
  .modal-body strong { color:var(--white); }
  .modal-body ol{padding-left:0; list-style:none; display:flex; flex-direction: column; gap:10px; margin-bottom:18px; }
  .modal-body ul{padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
  .modal-body ol li, .modal-body ul li {
    gap:10px;
    font-size:0.88rem; line-height:1.7; color:var(--muted);
  }
  /* .modal-body ol { counter-reset:mlist; }
  .modal-body ol li::before {
    counter-increment:mlist;
    content:counter(mlist);
    font-family:'Space Grotesk',sans-serif; font-size:0.7rem; font-weight:700;
    color:var(--cyan); background:rgba(0,212,255,0.12);
    border:1px solid rgba(0,212,255,0.25); border-radius:50%;
    width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-top:2px;
  } */
  .modal-body ul li::before { content:'▸'; color:var(--cyan); font-size:0.75rem; margin-top:3px; }
  .modal-body a { color:var(--cyan); text-decoration:none; }
  .modal-body a:hover { text-decoration:underline; }
  .modal-info-box {
    background:rgba(0,212,255,0.06); border:1px solid var(--border);
    border-left:3px solid var(--cyan); border-radius:6px; padding:14px 18px;
    font-size:0.82rem; line-height:1.7; color:var(--muted); margin:14px 0;
  }
  .modal-info-box strong { color:var(--white); }
  .modal-gold-box {
    background:rgba(245,166,35,0.07); border:1px solid rgba(245,166,35,0.25);
    border-left:3px solid var(--gold); border-radius:6px; padding:14px 18px;
    font-size:0.82rem; line-height:1.7; color:var(--muted); margin:14px 0;
  }
  .modal-gold-box strong { color:var(--gold); }
 
  @media (max-width:600px) { .modal { padding:28px 22px; } .modal-title { font-size:1.15rem; } }
 .vm-list {
list-style: none;
display: flex; flex-direction: column; gap: 12px;
margin-top: 8px;
}
.vm-list li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 0.98rem; line-height: 1.6;
color: rgba(255,255,255,0.78);
}
.vm-bullet {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(0,212,255,0.12);
border: 1px solid rgba(0,212,255,0.3);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 0.6rem; font-weight: 700; color: var(--cyan);
margin-top: 2px;
}

@media (max-width: 768px) {
.vm-grid { grid-template-columns: 1fr; }
.vision-mission { padding: 60px 5vw 50px; }
.vm-card { padding: 28px 22px; }
}
  /* ═══════════════════════════════════════
     TRACKS & THEMES — light section
  ═══════════════════════════════════════ */
  .tracks-section {
    background:var(--lt-bg); padding:88px 6vw 80px; position:relative; overflow:hidden;
  }
  .tracks-section::after {
    content:''; position:absolute; bottom:-80px; right:-80px;
    width:440px; height:440px; border-radius:50%;
    background:radial-gradient(circle,rgba(245,166,35,0.08) 0%,transparent 70%);
    pointer-events:none;
  }
 
  .tracks-note {
    background:var(--lt-card); border:1px solid var(--lt-border);
    border-left:3px solid var(--cyan-deep); border-radius:6px;
    padding:14px 20px; margin-top:28px;
    font-size:0.98rem; color:var(--ink2); line-height:1.6;
  }
  .tracks-note strong { color:var(--ink); }
 
  .tracks-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px;
  }
  .track-card {
    background:var(--lt-card); border:1px solid var(--lt-border);
    border-radius:10px; padding:26px 22px;
    display:flex; flex-direction:column; gap:16px;
    transition:box-shadow .25s,border-color .25s,transform .2s;
    position:relative; overflow:hidden;
  }
  .track-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
  .track-card:nth-child(odd)::before  { background:linear-gradient(90deg,var(--cyan-deep),transparent); }
  .track-card:nth-child(even)::before { background:linear-gradient(90deg,var(--gold-deep),transparent); }
  .track-card:hover { box-shadow:0 10px 40px rgba(0,153,184,0.14); border-color:rgba(0,153,184,0.35); transform:translateY(-4px); }
 
  .track-num {
    font-family:'Space Grotesk',sans-serif; font-size:0.70rem; font-weight:700;
    letter-spacing:0.15em; text-transform:uppercase;
    color:var(--cyan-deep); display:inline-flex; align-items:center; gap:6px;
  }
  .track-num::before { content:''; display:inline-block; width:18px; height:1.5px; background:var(--cyan-deep); }
 
  .track-title { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; color:var(--ink); line-height:1.35; }
  .track-list  { list-style:none; display:flex; flex-direction:column; gap:6px; flex:1; }
  .track-list li {
    display:flex; align-items:flex-start; gap:8px;
    font-size:0.88rem; line-height:1.5; color:var(--ink2);
  }
  .tl-dot { width:5px; height:5px; border-radius:50%; background:var(--cyan-deep); flex-shrink:0; margin-top:5px; }
 
  @media (max-width:960px) { .tracks-grid { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px) { .tracks-grid { grid-template-columns:1fr; } .tracks-section { padding:60px 5vw 50px; } }
 
  /* ═══════════════════════════════════════
     IMPORTANT DATES STRIP — dark
  ═══════════════════════════════════════ */
  .dates-strip {
    background:var(--navy2); padding:72px 6vw; position:relative; overflow:hidden;
  }
  .dates-strip::before {
    content:''; position:absolute; top:-60px; left:-60px;
    width:380px; height:380px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,212,255,0.07) 0%,transparent 70%);
    pointer-events:none;
  }
  .dates-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; }
  .date-card {
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:24px 20px; text-align:center;
    transition:border-color .25s,background .25s,transform .2s;
  }
  .date-card:hover { border-color:rgba(0,212,255,.4); background:rgba(0,212,255,.05); transform:translateY(-4px); }
  .date-card.deadline { border-color:rgba(245,166,35,.3); background:rgba(245,166,35,.04); }
  .date-card.deadline:hover { border-color:rgba(245,166,35,.6); background:rgba(245,166,35,.08); }
  .date-icon { font-size:1.6rem; margin-bottom:10px; }
  .date-label { font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
  .date-value { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; color:var(--white); line-height:1.3; }
  .date-card.deadline .date-value { color:var(--gold); }
 
  @media (max-width:768px) { .dates-grid { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:440px) { .dates-grid { grid-template-columns:1fr; } }
 
  /* ═══════════════════════════════════════
     FOOTER
  ═══════════════════════════════════════ */
  .site-footer { background:#080C1E; color:rgba(255,255,255,0.72); border-top:1px solid rgba(0,212,255,0.15); }
  .footer-main { display:grid; grid-template-columns:200px 1fr 1fr 200px; gap:50px; padding:60px 6vw 48px; border-bottom:1px solid rgba(255,255,255,0.07); }
  .footer-logo-wrap { width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(0,212,255,0.2); display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:16px; }
  .footer-conf-name { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:700; color:var(--cyan); line-height:1.2; margin-bottom:6px; }
  .footer-conf-sub  { font-size:0.72rem; line-height:1.6; color:rgba(255,255,255,0.45); }
  .footer-col-title { font-family:'Space Grotesk',sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid rgba(0,212,255,0.2); }
  .footer-contact-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
  .footer-contact-list li { display:flex; align-items:flex-start; gap:10px; font-size:0.8rem; line-height:1.55; }
  .fc-icon { font-size:.95rem; flex-shrink:0; margin-top:1px; }
  .fc-label{ font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); margin-bottom:1px; }
  .fc-val  { color:rgba(255,255,255,.75); }
  .footer-links-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
  .footer-links-list a { font-size:.8rem; color:rgba(255,255,255,.6); text-decoration:none; display:flex; align-items:center; gap:7px; transition:color .2s,gap .2s; }
  .footer-links-list a::before { content:''; display:inline-block; width:14px; height:1.5px; background:rgba(0,212,255,.4); flex-shrink:0; transition:width .2s,background .2s; }
  .footer-links-list a:hover { color:var(--cyan); gap:10px; }
  .footer-links-list a:hover::before { width:20px; background:var(--cyan); }
  .footer-social-icons { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
  .soc-btn { width:40px; height:40px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid rgba(0,212,255,.18); display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.1rem; color:rgba(255,255,255,.7); transition:background .2s,border-color .2s,transform .2s,color .2s; }
  .soc-btn:hover { background:rgba(0,212,255,.12); border-color:rgba(0,212,255,.5); transform:translateY(-2px); color:var(--cyan); }
  .footer-bottom { padding:18px 6vw; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; position: relative;}
  .footer-copyright,.footer-credit { font-size: .78rem; color:rgba(255,255,255,.35); }
  .footer-credit a { color:rgba(0,212,255,.6); text-decoration:none; cursor: pointer; }
  .footer-credit a:hover { color: #00D4FF; transition: 0.2s ease;}
  @media (max-width:960px) { .footer-main { grid-template-columns:1fr 1fr; gap:36px; } }
  @media (max-width:600px) { .footer-main { grid-template-columns:1fr; gap:28px; padding:40px 5vw 32px; } .footer-bottom { flex-direction:column; text-align:center; } }

 /* ── COUNTDOWN ── */
.countdown-bar {
    position: relative;
    z-index: 1;
    background: var(--navy2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 40px 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.countdown-label {
    font-size: 0.90rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
}

.countdown-units {
    display: flex;
    gap: 24px;
}

.cd-unit {
    text-align: center;
}

.cd-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    display: block;
}

.cd-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-top: 4px;
}

.cd-sep {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.8rem;
    color: var(--ink3);
    align-self: flex-start;
    padding-top: 2px;
}

.deadline-note {
    font-size: 0.95rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.deadline-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

/* ── SCROLL INDICATOR ── */
.scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    z-index: 10;
    animation: fadeInUp 1.5s ease 1.5s both;
}

.scroll-mouse {
    width: 22px; height: 34px;
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 11px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-wheel {
    width: 3px; height: 6px;
    background: var(--cyan);
    border-radius: 2px;
    animation: scrollWheel 1.8s ease infinite;
}

@keyframes scrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(8px); opacity: 0; }
}