/* =============================================
   QUANTARA '26 — Style Sheet (Polished v2)
   Mobile-first, fully responsive
   ============================================= */

/* ---- Custom Properties ---- */
:root {
  --bg-deep:        #060b1f;
  --bg-base:        #0a0f2e;
  --bg-surface:     #0f1640;

  --cyan:           #00d4ff;
  --cyan-dim:       #00a8cc;
  --purple:         #7c3aed;
  --violet:         #a855f7;

  --text-primary:   #f0f4ff;
  --text-secondary: #a8b4d0;
  --text-muted:     #6272a4;

  --glass-bg:       rgba(255,255,255,0.04);
  --glass-border:   rgba(255,255,255,0.09);
  --glass-hover:    rgba(255,255,255,0.08);

  --gradient-brand: linear-gradient(135deg,#00d4ff 0%,#7c3aed 50%,#a855f7 100%);

  --shadow-cyan:    0 0 40px rgba(0,212,255,0.15);
  --shadow-purple:  0 0 40px rgba(124,58,237,0.2);
  --shadow-card:    0 8px 32px rgba(0,0,0,0.45);

  --font-heading: 'Orbitron', monospace;
  --font-sub:     'Rajdhani', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --ease:       cubic-bezier(0.4,0,0.2,1);
  --t-fast:     0.2s;
  --t-base:     0.3s;
  --t-slow:     0.45s;

  --nav-h: 64px;
  --side-pad: 1.1rem;
}

/* ============================================
   RESET & BASE
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text-primary);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-base)}
::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px}

/* Particle Canvas */
#particleCanvas{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;opacity:0.45;
}

/* ============================================
   UTILITIES
   ============================================ */
.container{
  width:100%;max-width:1160px;
  margin:0 auto;
  padding:0 var(--side-pad);
}

.section{
  position:relative;z-index:1;
  padding:4.5rem 0;
}

.gradient-text{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:var(--radius-lg);
  transition:transform var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             background var(--t-base) var(--ease);
  /* Fallback for browsers without backdrop-filter */
  background:rgba(15,22,64,0.65);
}

@supports(backdrop-filter:blur(1px)){
  .glass-card{background:var(--glass-bg)}
}

.glass-card:hover{
  background:var(--glass-hover);
  border-color:rgba(0,212,255,0.22);
  transform:translateY(-4px);
  box-shadow:var(--shadow-cyan),var(--shadow-card);
}

/* Section header */
.section-header{text-align:center;margin-bottom:3rem}

.section-tag{
  display:inline-flex;align-items:center;
  font-family:var(--font-sub);
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--cyan);
  border:1px solid rgba(0,212,255,0.3);
  padding:0.3rem 1rem;border-radius:100px;
  margin-bottom:0.85rem;
  background:rgba(0,212,255,0.06);
}

.section-title{
  font-family:var(--font-heading);
  font-size:clamp(1.6rem,5vw,2.6rem);
  font-weight:700;line-height:1.2;
  margin-bottom:0.65rem;
}

.section-desc{
  font-size:clamp(0.9rem,2.5vw,1.05rem);
  color:var(--text-secondary);
  max-width:580px;margin:0 auto;
}

.sub-section-title{
  font-family:var(--font-sub);
  font-size:1.1rem;font-weight:700;
  letter-spacing:0.06em;color:var(--cyan);
  margin-bottom:0.6rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--font-sub);font-size:0.95rem;
  font-weight:700;letter-spacing:0.07em;
  padding:0.8rem 1.8rem;
  border-radius:var(--radius-md);
  border:none;cursor:pointer;
  text-transform:uppercase;
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t-base) var(--ease);
  /* Ensure min tap target */
  min-height:48px;
  white-space:nowrap;
}
.btn svg{flex-shrink:0}

.btn-primary{
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 0 20px rgba(0,212,255,0.2),0 4px 15px rgba(0,0,0,0.3);
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 35px rgba(0,212,255,0.4),0 6px 20px rgba(0,0,0,0.4);
}
.btn-primary:active{transform:scale(0.98)}

.btn-secondary{
  background:transparent;
  color:var(--text-primary);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(8px);
}
.btn-secondary:hover{
  border-color:rgba(0,212,255,0.5);
  background:rgba(0,212,255,0.08);
  transform:translateY(-2px);
}
.btn-secondary:active{transform:scale(0.98)}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  height:var(--nav-h);
  transition:background var(--t-slow) var(--ease),
             border-color var(--t-slow) var(--ease),
             box-shadow var(--t-slow) var(--ease);
}
.navbar.scrolled{
  background:rgba(6,11,31,0.94);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 4px 30px rgba(0,0,0,0.4);
}

.nav-container{
  max-width:1160px;margin:0 auto;
  padding:0 var(--side-pad);
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
}

.nav-brand{display:flex;align-items:center;gap:0.55rem;flex-shrink:0}
.nav-logo{width:34px;height:34px;object-fit:contain;mix-blend-mode:screen}
.nav-title{
  font-family:var(--font-heading);
  font-size:0.95rem;font-weight:700;
  letter-spacing:0.04em;
  white-space:nowrap;
}
.nav-title .accent{color:var(--cyan)}

/* Desktop nav links */
.nav-links{
  display:flex;align-items:center;gap:0.15rem;
}

.nav-link{
  font-family:var(--font-sub);
  font-size:0.85rem;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:0.45rem 0.85rem;border-radius:var(--radius-sm);
  color:var(--text-secondary);
  transition:color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
  min-height:44px;display:flex;align-items:center;
}
.nav-link:hover,.nav-link.active{
  color:var(--text-primary);
  background:rgba(255,255,255,0.07);
}

.nav-link.register-btn{
  background:var(--gradient-brand);
  color:#fff;
  padding:0.45rem 1rem;
  border-radius:var(--radius-sm);
  box-shadow:0 0 16px rgba(0,212,255,0.2);
  margin-left:0.3rem;
}
.nav-link.register-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 24px rgba(0,212,255,0.35);
  background:var(--gradient-brand);
  color:#fff;
}

/* Hamburger */
.hamburger{
  display:none;
  flex-direction:column;gap:5px;
  background:none;border:none;padding:8px;
  border-radius:var(--radius-sm);
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.hamburger span{
  display:block;width:22px;height:2px;
  background:var(--text-primary);
  border-radius:2px;
  transition:transform var(--t-base) var(--ease),opacity var(--t-fast) var(--ease);
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 2rem) var(--side-pad) 4rem;
  overflow:hidden;
}

/* Ambient glow blobs */
.hero-glow{
  position:absolute;border-radius:50%;
  filter:blur(90px);pointer-events:none;
  animation:glowPulse 8s ease-in-out infinite alternate;
}
.hero-glow.g1{width:clamp(280px,50vw,500px);height:clamp(280px,50vw,500px);background:rgba(0,212,255,0.11);top:-80px;left:-60px;animation-delay:0s}
.hero-glow.g2{width:clamp(300px,55vw,600px);height:clamp(300px,55vw,600px);background:rgba(124,58,237,0.13);bottom:-120px;right:-60px;animation-delay:2.5s}
.hero-glow.g3{width:clamp(200px,35vw,380px);height:clamp(200px,35vw,380px);background:rgba(168,85,247,0.08);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:5s}

@keyframes glowPulse{
  0%{opacity:0.5;transform:scale(1)}
  100%{opacity:1;transform:scale(1.18)}
}
/* Override translate for g3 */
.hero-glow.g3{animation:glowPulse3 8s ease-in-out infinite alternate}
@keyframes glowPulse3{
  0%{opacity:0.5;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
}

.hero-content{
  position:relative;z-index:2;
  max-width:800px;
  animation:heroFadeIn 0.9s ease-out both;
}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* College logos row */
.hero-logos{
  display:flex;align-items:center;justify-content:center;
  gap:1.25rem;margin-bottom:1.4rem;
}
.hero-college-logo{
  width:clamp(52px,8vw,72px);height:clamp(52px,8vw,72px);
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.12));
}
.hero-anni-logo{
  width:clamp(52px,8vw,72px);height:clamp(52px,8vw,72px);
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.12));
}
.hero-divider-v{
  width:1px;height:42px;
  background:linear-gradient(to bottom,transparent,var(--glass-border),transparent);
  flex-shrink:0;
}

.hero-badge{
  font-family:var(--font-sub);
  font-size:0.78rem;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--violet);margin-bottom:0.9rem;
  display:block;
}

/* Main logo — remove the box by using object-fit contain on a transparent bg */
.hero-main-logo{
  margin:0 auto 1.4rem;
  width:clamp(200px,48vw,380px);
}
.hero-quantara-logo{
  width:100%;height:auto;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 28px rgba(0,212,255,0.45)) drop-shadow(0 0 60px rgba(124,58,237,0.3));
  animation:logoFloat 5.5s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero-tagline{
  font-family:var(--font-sub);
  font-size:clamp(0.85rem,2.5vw,1.3rem);
  font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  background:var(--gradient-brand);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:0.7rem;
}
.hero-subtitle{
  font-size:clamp(0.82rem,2vw,0.95rem);
  color:var(--text-secondary);
  margin-bottom:1.5rem;line-height:1.7;
}

.hero-countdown{
  display:flex;gap:1rem;
  justify-content:center;
  margin-bottom:2.5rem;
}
.cd-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.3rem;
  width:clamp(75px, 18vw, 95px);
  height:clamp(75px, 18vw, 95px);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.2), 0 4px 15px rgba(0,0,0,0.3);
  position:relative;
  overflow:hidden;
}
.cd-box::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:40%;
  background:linear-gradient(to bottom, rgba(255,255,255,0.06), transparent);
  pointer-events:none;
}
.cd-val{
  font-family:var(--font-heading);
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  font-weight:900;
  color:#ffffff;
  line-height:1;
  text-shadow:0 0 10px rgba(255,255,255,0.3);
}
.cd-label{
  font-family:var(--font-sub);
  font-size:clamp(0.55rem, 1.2vw, 0.65rem);
  font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-muted);
}

.hero-actions{
  display:flex;gap:0.85rem;
  justify-content:center;flex-wrap:wrap;
}

/* Scroll indicator */
.scroll-indicator{
  position:absolute;bottom:1.75rem;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.scroll-line{width:1px;height:28px;background:linear-gradient(to bottom,transparent,var(--cyan));animation:scrollLine 2s ease-in-out infinite}
.scroll-dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:scrollBounce 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{opacity:0.3}50%{opacity:0.8}}
@keyframes scrollBounce{0%,100%{transform:translateY(-4px);opacity:0.5}50%{transform:translateY(4px);opacity:1}}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-section{background:linear-gradient(180deg,transparent,rgba(15,22,64,0.45),transparent)}

.about-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.5rem;
  margin-bottom:3.5rem;
}
.about-text {
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}
.about-para{
  font-size:clamp(0.88rem,2vw,1rem);
  color:var(--text-secondary);
  margin-bottom:1.1rem;line-height:1.78;
}
.about-para strong{color:var(--cyan)}
.about-para em{color:var(--violet);font-style:normal}
.about-highlights{
  display:flex;gap:1.2rem;
  flex-wrap:wrap;justify-content:center;
}
.highlight-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.3rem;
  width:clamp(85px, 20vw, 105px);
  height:clamp(85px, 20vw, 105px);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.2), 0 4px 15px rgba(0,0,0,0.3);
  position:relative;
  overflow:hidden;
}
.highlight-item::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:40%;
  background:linear-gradient(to bottom, rgba(255,255,255,0.06), transparent);
  pointer-events:none;
}
.highlight-number{
  font-family:var(--font-heading);font-size:clamp(1.8rem, 5vw, 2.6rem);font-weight:900;
  background:var(--gradient-brand);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;
}
.highlight-label{
  font-family:var(--font-sub);font-size:clamp(0.55rem, 1.2vw, 0.65rem);
  font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-muted);
}

.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:0.85rem}
.info-card{
  display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1.25rem;height:100%;
  transition: border-color 0.3s ease;
}
.info-card:hover{border-color:rgba(0,212,255,0.2)}
.info-icon{
  font-size:1.4rem;flex-shrink:0;
}
.info-content{display:flex;flex-direction:column;gap:0.1rem;justify-content:center}
.info-label{
  font-family:var(--font-sub);font-size:0.6rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);
  opacity:0.9; margin-bottom: 0.15rem;
}
.info-value{font-size:0.9rem;font-weight:600;color:var(--text-primary)}

/* Why participate */
.why-participate{margin-top:0.5rem}
.why-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.75rem;
  margin-top:1.1rem;
}
.why-item{
  flex:0 0 calc((100% - 4 * 0.75rem) / 5);
  padding:0.8rem 1rem;
  font-size:0.875rem;font-weight:500;
  color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;
  gap:0.5rem;text-align:center;
}
@media (min-width: 641px) and (max-width: 1024px) {
  .why-grid {
    flex-direction: column;
    align-items: center;
  }
  .why-item {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
  }
}

/* ============================================
   EVENTS SECTION
   ============================================ */
.events-section{background:linear-gradient(180deg,transparent,rgba(10,15,46,0.7),transparent)}

.events-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.25rem;
}

.event-card{
  padding:1.6rem;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:0.7rem;
  background:linear-gradient(135deg,rgba(0,212,255,0.04),rgba(124,58,237,0.04));
  align-items: center;
  text-align: center;
}
.event-card::after{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:var(--gradient-brand);
  opacity:0;transition:opacity var(--t-base) var(--ease);
  z-index:0;pointer-events:none;
}
.event-card:hover::after{opacity:0.05}
.event-card>*{position:relative;z-index:1}

.event-card--featured{
  border-color:rgba(168,85,247,0.3);
  background:linear-gradient(135deg,rgba(168,85,247,0.07),rgba(0,212,255,0.04));
}

.event-card-top{display:flex;justify-content:center;align-items:center;width:100%}

.event-icon-wrap{
  width:50px;height:50px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
/* Individual icon bg/border via inline custom props — fallback */
.event-icon-wrap[style*="--event-color"]{
  background:rgba(0,212,255,0.13);
  border:1px solid rgba(0,212,255,0.28);
  box-shadow:0 0 16px rgba(0,212,255,0.12);
}
/* We'll use data attributes instead of color-mix for better compat */
.event-icon{font-size:1.4rem}

.event-number{
  font-family:var(--font-heading);
  font-size:0.65rem;font-weight:700;
  letter-spacing:0.1em;color:var(--text-muted);opacity:0.4;
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
}
.event-title{
  font-family:var(--font-heading);
  font-size:clamp(1rem,2.5vw,1.1rem);
  font-weight:700;color:var(--text-primary);
  margin-top:0.2rem;
}
.event-subtitle{
  font-family:var(--font-sub);font-size:0.72rem;
  font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);margin-top:-0.35rem;
}
.event-desc{
  font-size:clamp(0.85rem,2vw,0.9rem);
  color:var(--text-secondary);line-height:1.65;flex:1;
}
.event-meta{display:flex;justify-content:center;gap:0.75rem}
.event-team{display:flex;align-items:center;justify-content:center;gap:0.35rem;font-size:0.82rem;font-weight:600;color:var(--text-secondary)}
.meta-icon{font-size:0.85rem}

.event-focus{display:flex;flex-wrap:wrap;justify-content:center;gap:0.35rem}
.focus-tag{
  font-family:var(--font-sub);font-size:0.68rem;font-weight:700;
  letter-spacing:0.05em;
  padding:0.2rem 0.55rem;border-radius:100px;
  background:rgba(0,212,255,0.09);
  border:1px solid rgba(0,212,255,0.18);
  color:var(--cyan-dim);
  --cyan-dim:#00a8cc;
}
.event-register-btn{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-family:var(--font-sub);font-size:0.82rem;
  font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--cyan);
  padding:0.6rem 1.1rem;border-radius:var(--radius-sm);
  border:1px solid rgba(0,212,255,0.3);
  background:rgba(0,212,255,0.05);
  transition:all var(--t-fast) var(--ease);
  margin-top:0.2rem;width:fit-content;
  min-height:44px;
}
.event-register-btn:hover{
  background:rgba(0,212,255,0.14);
  border-color:var(--cyan);
  transform:translateX(4px);
  box-shadow:0 0 16px rgba(0,212,255,0.2);
}

/* Center GenMind (7th/last event card) on desktop when alone on last row */
@media(min-width:641px){
  #event-genmind{
    grid-column:1/-1;
    max-width:380px;
    margin:0 auto;
    width:100%;
  }
}
/* ============================================
   REGISTER SECTION
   ============================================ */
.register-section{padding:3rem 0}

.register-cta{
  position:relative;overflow:hidden;
  padding:clamp(2rem,5vw,3.5rem);
  text-align:center;
  border-color:rgba(0,212,255,0.15);
}
.register-glow{
  position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,0.08),transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.register-title{
  font-family:var(--font-heading);
  font-size:clamp(1.6rem,4.5vw,2.6rem);
  font-weight:700;margin-bottom:0.65rem;margin-top:0.4rem;
}
.register-desc{
  font-size:clamp(0.88rem,2vw,1rem);
  color:var(--text-secondary);
  max-width:520px;margin:0 auto 2rem;
}

.register-links{
  display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center;
}
.reg-link{
  display:flex;align-items:center;gap:0.55rem;
  padding:0.7rem 1.1rem;border-radius:var(--radius-md);
  font-size:0.88rem;font-weight:600;
  color:var(--text-secondary);
  transition:all var(--t-base) var(--ease);
  border-color:var(--glass-border);
  min-height:48px;
  width:calc((100% - 3 * 0.75rem) / 4);
  justify-content:center;
}
.reg-link:hover{
  color:var(--text-primary);
  border-color:rgba(0,212,255,0.3);
  background:rgba(0,212,255,0.08);
  transform:translateY(-3px);
  box-shadow:var(--shadow-cyan);
}
.reg-link:active{transform:translateY(-1px)}
.reg-emoji{font-size:1.1rem;flex-shrink:0}
.reg-name{font-family:var(--font-sub);font-weight:700;letter-spacing:0.04em}
.reg-arrow{font-size:0.85rem;color:var(--cyan);margin-left:2px}

/* ============================================
   COORDINATORS SECTION
   ============================================ */
.coordinators-section{background:linear-gradient(180deg,transparent,rgba(15,22,64,0.35),transparent)}

.coord-strip {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.coord-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease;
}
.coord-chip:hover {
  border-color: rgba(0,212,255,0.2);
}
.cc-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.cc-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cc-role {
  font-family: var(--font-sub);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.9;
  margin-bottom: 0.15rem;
}
.cc-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.cc-phone {
  font-size: 0.78rem;
  color: var(--cyan);
  opacity: 0.8;
}
.cc-phone:hover {
  opacity: 1;
}

.event-coordinators-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:0.85rem;
}
.event-coord-card{
  flex:0 0 calc((100% - 3 * 0.85rem) / 4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0.75rem;
  padding:1.5rem 1.1rem;
  height:auto;
}
.ec-icon{font-size:1.4rem;flex-shrink:0}
.ec-info{display:flex;flex-direction:column;align-items:center;gap:0.1rem;min-width:0}
.ec-event{font-family:var(--font-sub);font-size:0.62rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted)}
.ec-name{font-size:0.9rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-phone{font-size:0.78rem;color:var(--cyan);opacity:0.8;transition:opacity var(--t-fast) var(--ease);display:flex;align-items:center;justify-content:center}
.ec-phone:hover{color:var(--cyan)}

/* ============================================
   DEDOMENA SECTION
   ============================================ */
.dedomena-section{padding:4rem 0}

.dedomena-wrap{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2.5rem;padding:clamp(1.5rem,4vw,2.8rem);
  border-color:rgba(124,58,237,0.15);
}
.dedomena-right{
  display:flex;
  flex-direction:column;
  gap: 1.25rem;
  padding-top: 3.8rem;
}
.dedomena-block > *:last-child{margin-bottom:0}
.dedomena-list{display:flex;flex-direction:column;gap:0.55rem;margin-top:0.4rem}
.dedomena-list li{font-size:0.88rem;color:var(--text-secondary);display:flex;align-items:center;gap:0.5rem}

.dept-established{padding:1.25rem;border-color:rgba(0,212,255,0.15)}
.dept-year{display:block;font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--cyan);margin-top:0.2rem}

/* ============================================
   GENERAL INSTRUCTIONS
   ============================================ */
.general-rules-section{padding-bottom:4rem}

.rules-wrapper{
  padding:2.5rem;
  border-radius:var(--radius-lg);
  border:1px solid rgba(0,212,255,0.12);
  background:rgba(10,15,46,0.6);
  backdrop-filter:blur(14px);
}

.rules-banner{
  display:flex;
  align-items:flex-start;
  gap:1.25rem;
  padding:1.5rem;
  margin-bottom:2rem;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(0,212,255,0.08) 0%,rgba(124,58,237,0.08) 100%);
  border:1px solid rgba(0,212,255,0.15);
}
.rules-banner-icon{
  font-size:2.2rem;
  flex-shrink:0;
  margin-top:0.15rem;
}
.rules-banner h3{
  font-family:var(--font-heading);
  font-size:1rem;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:0.04em;
  margin-bottom:0.4rem;
}
.rules-banner p{
  font-size:0.9rem;
  color:var(--text-secondary);
  line-height:1.6;
}

.general-rules-section .rules-list{
  list-style:none;
  counter-reset:rule-counter;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.general-rules-section .rules-list li{
  counter-increment:rule-counter;
  padding:1rem 1rem 1rem 3.5rem;
  position:relative;
  font-size:0.92rem;
  color:var(--text-secondary);
  line-height:1.65;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.general-rules-section .rules-list li:last-child{border-bottom:none}
.general-rules-section .rules-list li::before{
  content:counter(rule-counter,decimal-leading-zero);
  position:absolute;
  left:0.75rem;
  top:1rem;
  font-family:var(--font-heading);
  font-size:0.8rem;
  font-weight:700;
  color:var(--cyan);
  opacity:0.7;
}
.general-rules-section .rules-list li:hover{
  background:rgba(0,212,255,0.04);
  color:var(--text-primary);
}
.general-rules-section .rules-list li:hover::before{opacity:1}
.general-rules-section .rules-list li strong{color:var(--text-primary)}

.rules-footer-note{
  margin-top:2rem;
  padding:1.5rem;
  text-align:center;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(0,212,255,0.06) 0%,rgba(168,85,247,0.06) 100%);
  border:1px solid rgba(255,255,255,0.06);
}
.rules-wish{
  font-family:var(--font-heading);
  font-size:1.1rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:0.5rem;
}
.rules-footer-note>p{
  font-size:0.9rem;
  color:var(--text-secondary);
  line-height:1.6;
}
.rules-motto{
  margin-top:0.75rem;
  font-size:1rem;
  font-weight:600;
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  position:relative;z-index:1;
  background:rgba(6,11,31,0.97);
  border-top:1px solid var(--glass-border);
  padding:3rem 0 1.5rem;
}
.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--glass-border);
  margin-bottom:2rem;
}
.footer-brand{display:inline-flex;flex-direction:column;align-items:center;text-align:center}
.footer-logo{width:80px;margin-bottom:0.8rem;mix-blend-mode:screen}
.footer-tagline{font-family:var(--font-sub);font-size:0.85rem;letter-spacing:0.14em;color:var(--text-muted)}

.footer-links-col{display:flex;flex-direction:column;gap:0.55rem}
.footer-links-col h4{font-family:var(--font-sub);font-size:0.7rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:0.2rem}
.footer-links-col a{font-size:0.82rem;color:var(--text-muted);transition:color var(--t-fast) var(--ease);min-height:32px;display:flex;align-items:center}
.footer-links-col a:hover{color:var(--text-primary)}

.footer-bottom{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
.footer-college{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;justify-content:center}
.footer-college-logo{width:44px;height:44px;object-fit:contain}
.footer-anni-logo{width:52px;height:52px;object-fit:contain}
.footer-college p{font-size:0.82rem;color:var(--text-secondary)}
.footer-copy{font-size:0.75rem;color:var(--text-muted)}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity 0.55s var(--ease),transform 0.55s var(--ease);
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ============================================
   RESPONSIVE — Tablet (≤960px)
   ============================================ */
@media(max-width:960px){
  :root{--nav-h:64px}
  .section{padding:4rem 0}
  .about-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:2rem;
  }
  .about-text   { grid-column:auto; grid-row:auto; }
  .about-highlights{ grid-column:auto; grid-row:auto; }
  .about-cards  { grid-column:auto; grid-row:auto; grid-template-columns:1fr 1fr; }
  .footer-top{grid-template-columns:1fr;gap:2.5rem}
  .footer-links-col{align-items:center;text-align:center}
  .footer-links-col a{justify-content:center}
  .dedomena-wrap{grid-template-columns:1fr;gap:1.75rem;padding:2rem;text-align:center}
  .dedomena-right{padding-top:0}
  .dedomena-list{align-items:center}
  .dedomena-list li{justify-content:center}
  .dept-established{text-align:center}
}

/* ============================================
   RESPONSIVE — Mobile (≤640px)
   ============================================ */
@media(max-width:640px){
  :root{
    --nav-h:60px;
    --side-pad:1rem;
  }

  .section{padding:3.5rem 0}
  .section-header{margin-bottom:2.25rem}

  /* Nav — mobile drawer */
  .hamburger{display:flex}

  .nav-links{
    position:fixed;
    top:var(--nav-h);left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(6,11,31,0.98);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--glass-border);
    padding:0.5rem 0 1rem;
    transform:translateY(-105%);
    opacity:0;pointer-events:none;
    transition:transform var(--t-slow) var(--ease),opacity var(--t-base) var(--ease);
    z-index:999;
    box-shadow:0 16px 40px rgba(0,0,0,0.6);
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}

  .nav-link{
    padding:0.9rem var(--side-pad);
    border-radius:0;width:100%;
    border-bottom:1px solid rgba(255,255,255,0.04);
    min-height:52px;
  }
  .nav-link.register-btn{
    border-radius:0;
    margin:0.5rem 1rem 0;
    width:calc(100% - 2rem);
    border-radius:var(--radius-md);
    justify-content:center;
  }

  /* Hero */
  .hero{padding:calc(var(--nav-h) + 1.5rem) var(--side-pad) 3.5rem}
  .hero-logos{gap:1rem;margin-bottom:1.2rem}
  .hero-college-logo,.hero-anni-logo{width:52px;height:52px}
  .hero-divider-v{height:36px}
  .hero-badge{font-size:0.72rem;margin-bottom:0.75rem}
  .hero-main-logo{width:clamp(180px,70vw,280px);margin-bottom:1.2rem}
  .hero-date-badge{font-size:0.8rem;padding:0.5rem 1rem}
  .hero-actions{flex-direction:column;align-items:stretch;gap:0.7rem;max-width:300px;margin:0 auto}
  .btn{justify-content:center;padding:0.85rem 1.5rem}
  .scroll-indicator{display:none}

  /* About */
  .about-grid{gap:1.75rem}
  .about-cards{grid-template-columns:1fr}
  .info-card{flex-direction:column;text-align:center;gap:0.5rem;padding:1.5rem 1rem;}
  .info-content{align-items:center;}
  .about-highlights{gap:1.25rem}
  .highlight-number{font-size:2rem}
  .why-grid{gap:0.6rem}
  .why-item{flex:0 0 100%}

  /* Events */
  .events-grid{grid-template-columns:1fr;gap:1rem}
  .event-card{padding:1.35rem;align-items:center;text-align:center}
  .event-card-top{justify-content:center;width:100%;position:relative}
  .event-number{position:absolute;right:0;top:0}
  .event-focus{justify-content:center}
  .event-register-btn{margin:0.2rem auto 0}

  /* Register */
  .register-cta{padding:1.75rem 1rem}
  .register-links{flex-direction:column;gap:0.6rem}
  .reg-link{justify-content:center;padding:0.85rem 1rem;width:100%}

  /* Coordinators */
  .coordinators-grid{flex-direction:column;gap:0.85rem}
  .coordinator-card{max-width:none;min-width:0;flex-direction:column;text-align:center;gap:0.75rem;padding:1.5rem}
  .coord-info{align-items:center}
  .coord-phone{justify-content:center}
  .event-coordinators-grid{flex-direction:column;gap:0.85rem}
  .event-coord-card{flex:0 0 100%;max-width:none;flex-direction:column;text-align:center;gap:0.75rem;padding:1.5rem}
  .ec-info{align-items:center}
  .ec-phone{justify-content:center}

  /* Dedomena */
  .dedomena-wrap{padding:1.5rem;text-align:center}
  .dedomena-section{padding:3rem 0}
  .dedomena-list{align-items:center}
  .dedomena-list li{justify-content:center}
  .dept-established{text-align:center}

  /* General Instructions */
  .rules-wrapper{padding:1.25rem}
  .rules-banner{flex-direction:column;gap:0.75rem;padding:1rem;align-items:center;text-align:center}
  .rules-banner-icon{font-size:1.6rem}
  .general-rules-section .rules-list li{padding:0.85rem 0.75rem 0.85rem 2.8rem;font-size:0.85rem}
  .general-rules-section .rules-list li::before{left:0.5rem;font-size:0.7rem}
  .rules-footer-note{padding:1rem}
  .rules-wish{font-size:0.95rem}

  /* Footer */
  .footer-top{grid-template-columns:1fr;gap:1.5rem}
  .footer-links-col{align-items:center;text-align:center}
  .footer-links-col a{justify-content:center}
  .footer-college{flex-direction:row;flex-wrap:nowrap;gap:0.6rem}
  .footer-college p{font-size:0.65rem;line-height:1.4}
  .footer-college-logo, .footer-anni-logo{width:36px;height:36px}
  .footer{padding:2.5rem 0 1.25rem}
}

/* ============================================
   EVENT TIMELINE COMPONENT
   ============================================ */
.timeline-wrap {
  position: relative;
  padding-left: 2rem;
  max-width: 760px;
  margin: 0 auto;
}
.timeline-wrap::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(0,212,255,0.4), rgba(168,85,247,0.4));
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color 0.3s ease, background 0.3s ease;
  text-align: left;
}
.timeline-item:hover {
  border-color: rgba(0,212,255,0.15);
  background: rgba(0,212,255,0.03);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 1.6rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid var(--bg-primary);
  box-shadow: 0 0 12px rgba(0,212,255,0.4);
  z-index: 1;
}
.timeline-item:last-child::after {
  display: none;
}
.tl-time {
  font-family: var(--font-sub);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.3rem;
  display: block;
}
.tl-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.tl-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ============================================
   RESPONSIVE — Small Mobile (≤380px)
   ============================================ */
@media(max-width:380px){
  .event-coord-card{flex:0 0 100%}
  .hero-logos{flex-direction:column;gap:0.75rem}
  .hero-divider-v{width:50px;height:1px;background:linear-gradient(to right,transparent,var(--glass-border),transparent)}
  .about-highlights{justify-content:center}
  .register-cta{padding:1.5rem 0.85rem}
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  .reveal{opacity:1;transform:none}
}