*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

    :root {
      --gold:       #c9a84c;
      --gold-light: #f0d878;
      --gold-dark:  #8a6d2b;
      --fire:       #ff6a00;
      --fire2:      #ff3300;
      --ice:        #00cfff;
      --ice2:       #0077b6;
      --bg:         #060609;
      --text:       #f5ead8;
      --text2:      #c8b896;
      --text3:      #8a7a60;
    }

    html { scroll-behavior:smooth; }

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

    /* ── FIRE/ICE CANVAS ── */
    #bg-canvas {
      position:fixed; top:0; left:0; width:100%; height:100%;
      z-index:0; pointer-events:none;
    }

    /* ── DEEP OVERLAY (less darkening vs original) ── */
    .bg-overlay {
      position:fixed; top:0; left:0; width:100%; height:100%;
      z-index:1; pointer-events:none;
      background:
        radial-gradient(ellipse at 15% 50%, rgba(255,80,0,0.18) 0%, transparent 42%),
        radial-gradient(ellipse at 85% 50%, rgba(0,180,255,0.18) 0%, transparent 42%),
        radial-gradient(ellipse at 50% 5%,  rgba(201,168,76,0.08) 0%, transparent 35%),
        linear-gradient(180deg, rgba(6,6,9,0.25) 0%, rgba(6,6,9,0.05) 50%, rgba(6,6,9,0.55) 100%);
    }

    /* ── MELT COLLISION GLOW ── */
        .melt-glow {
      position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden;
    }
    .melt-glow::before {
      content:''; position:absolute;
      left:50%; top:0; bottom:0;
      transform:translateX(-50%);
      width:min(140px, 9vw);
      background:linear-gradient(180deg,
        transparent 0%,
        rgba(255,150,0,0.16) 18%,
        rgba(255,210,80,0.26) 44%,
        rgba(255,250,180,0.20) 50%,
        rgba(100,215,255,0.26) 56%,
        rgba(0,175,255,0.16) 82%,
        transparent 100%
      );
      filter:blur(22px);
      animation:meltPulse 3s ease-in-out infinite;
    }
    @keyframes meltPulse {
      0%,100%{opacity:.5; width:min(100px,7vw)}
      50%{opacity:1; width:min(180px,11vw)}
    }
      50%      { opacity:1;   width:4px; box-shadow:0 0 60px rgba(255,200,80,0.7), 0 0 100px rgba(0,200,255,0.4); }
    }

    /* ── NAV ── */
    nav {
      position:fixed; top:0; left:0; width:100%; z-index:100;
      padding:22px 48px;
      display:flex; justify-content:space-between; align-items:center;
      backdrop-filter:blur(24px);
      background:rgba(6,6,9,0.35);
      border-bottom:1px solid rgba(201,168,76,0.12);
      transition:all 0.4s ease;
    }
    nav.scrolled {
      padding:13px 48px;
      background:rgba(6,6,9,0.88);
      border-bottom-color:rgba(201,168,76,0.22);
    }

    /* ── LOGO ── */
    .nav-logo { display:flex; align-items:center; gap:16px; text-decoration:none; }

    .logo-mark {
      width:48px; height:48px; position:relative;
      flex-shrink:0;
    }

    /* Logo SVG animations */
    .logo-mark svg { overflow:visible; }
      to   { transform:rotate(360deg); }
    }
      50%      { opacity:1; }
    }
      50%      { opacity:0.6; transform:scale(1.4); }
    }
    @keyframes logoHexPulse {
      0%,100% { opacity:0.25; }
      50%      { opacity:0.55; }
    }

    .logo-text-wrap { display:flex; flex-direction:column; gap:2px; }
    .logo-name {
      font-weight:900; font-size:1.25rem;
      letter-spacing:4px; text-transform:uppercase;
      background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .logo-tag {
      font-weight:500; font-size:0.6rem;
      letter-spacing:5px; text-transform:uppercase;
      color:var(--text3);
    }

    /* ── NAV LINKS ── */
    .nav-links { display:flex; align-items:center; gap:6px; }
    .nav-link {
      font-weight:500; font-size:0.68rem; letter-spacing:2px;
      text-transform:uppercase; color:var(--text2);
      text-decoration:none; padding:10px 18px; border-radius:4px;
      transition:all 0.3s;
    }
    .nav-link:hover { color:var(--gold-light); background:rgba(201,168,76,0.06); }
    .nav-div { width:1px; height:22px; background:rgba(201,168,76,0.18); margin:0 4px; }
    .btn-login {
      font-family:'Orbitron',sans-serif; font-weight:600; font-size:0.65rem;
      letter-spacing:2px; text-transform:uppercase;
      color:var(--gold); background:transparent;
      padding:10px 22px; border:1px solid rgba(201,168,76,0.32); border-radius:4px;
      cursor:pointer; transition:all 0.3s;
    }
    .btn-login:hover { border-color:var(--gold); background:rgba(201,168,76,0.08); }
    .btn-register {
      font-family:'Orbitron',sans-serif; font-weight:700; font-size:0.65rem;
      letter-spacing:2px; text-transform:uppercase;
      color:var(--bg); background:linear-gradient(135deg,var(--gold-light),var(--gold));
      padding:10px 24px; border:none; border-radius:4px;
      cursor:pointer; overflow:hidden; position:relative; transition:all 0.3s;
    }
    .btn-register::before {
      content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
      transition:left 0.5s;
    }
    .btn-register:hover::before { left:100%; }
    .btn-register:hover { transform:translateY(-1px); box-shadow:0 0 28px rgba(201,168,76,0.35); }

    /* ── HAMBURGER ── */
    .hamburger {
      display:none; flex-direction:column; gap:5px;
      cursor:pointer; padding:8px; z-index:200;
    }
    .hamburger span { width:28px; height:2px; background:var(--gold); border-radius:2px; transition:all 0.3s; }
    .hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
    .hamburger.active span:nth-child(2) { opacity:0; }
    .hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

    /* ── MOBILE MENU ── */
    .mobile-menu {
      display:none; position:fixed; top:0; left:0; width:100%; height:100%;
      background:rgba(6,6,9,0.97); backdrop-filter:blur(30px);
      z-index:150; flex-direction:column; justify-content:center; align-items:center;
      gap:24px; opacity:0; transition:opacity 0.4s;
    }
    .mobile-menu.active { display:flex; opacity:1; }
    .mobile-menu a {
      font-weight:600; font-size:1rem; letter-spacing:4px; text-transform:uppercase;
      color:var(--text); text-decoration:none; padding:12px 24px; transition:color 0.3s;
    }
    .mobile-menu a:hover { color:var(--gold); }

    /* ── HERO ── */
    .hero {
      position:relative; z-index:10;
      min-height:100vh;
      display:flex; flex-direction:column; justify-content:center; align-items:center;
      text-align:center; padding:130px 28px 90px;
    }

    /* Geometric bg decoration */
    .hero-geo {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:min(680px,85vw); height:min(680px,85vw);
      pointer-events:none;
      animation:geoRotate 60s linear infinite;
      opacity:0.14;
    }
    @keyframes geoRotate { from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }

    /* Badge */
    .hero-badge {
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 22px; border:1px solid rgba(201,168,76,0.22); border-radius:50px;
      margin-bottom:36px;
      font-weight:500; font-size:0.62rem; letter-spacing:3px; text-transform:uppercase;
      color:var(--gold); backdrop-filter:blur(10px); background:rgba(201,168,76,0.04);
      animation:fadeInDown 1s ease 0.2s both;
    }
    .badge-dot {
      width:6px; height:6px; border-radius:50%; background:var(--gold);
      animation:pulseDot 2s ease infinite;
    }
    @keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.6);} }

    /* Title */
    .hero-title {
      font-weight:900; font-size:clamp(2.8rem,6.5vw,5.5rem);
      letter-spacing:8px; text-transform:uppercase; line-height:1.08;
      margin-bottom:24px; animation:fadeInUp 1s ease 0.4s both;
    }
    .hero-title .line1 {
      display:block;
      background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .hero-title .line2 {
      display:block; font-size:0.45em; letter-spacing:14px;
      color:var(--text2); -webkit-text-fill-color:var(--text2); margin-top:10px;
    }

    .hero-divider {
      width:100px; height:1px;
      background:linear-gradient(90deg,transparent,var(--gold),transparent);
      margin:30px auto; animation:fadeIn 1s ease 0.6s both;
    }

    /* Subtitle */
    .hero-sub {
      font-weight:400; font-size:clamp(0.72rem,1.5vw,0.88rem);
      letter-spacing:4px; text-transform:uppercase; color:var(--text2);
      max-width:580px; line-height:1.9; margin-bottom:52px;
      animation:fadeInUp 1s ease 0.8s both;
    }

    /* CTA buttons */
    .hero-ctas {
      display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
      animation:fadeInUp 1s ease 1s both;
    }
    .cta-primary {
      font-family:'Orbitron',sans-serif; font-weight:700; font-size:0.72rem;
      letter-spacing:3px; text-transform:uppercase; text-decoration:none;
      color:var(--bg); padding:18px 44px; border-radius:4px;
      background:linear-gradient(135deg,var(--gold-light),var(--gold));
      transition:all 0.4s; position:relative; overflow:hidden;
    }
    .cta-primary::before {
      content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
      transition:left 0.5s;
    }
    .cta-primary:hover::before { left:100%; }
    .cta-primary:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(201,168,76,0.4); }
    .cta-secondary {
      font-family:'Orbitron',sans-serif; font-weight:600; font-size:0.72rem;
      letter-spacing:3px; text-transform:uppercase; text-decoration:none;
      color:var(--gold); padding:18px 44px; border-radius:4px;
      border:1px solid rgba(201,168,76,0.3); background:transparent;
      transition:all 0.3s;
    }
    .cta-secondary:hover { border-color:var(--gold); background:rgba(201,168,76,0.06); }

    /* Stats bar */
    .stats-bar {
      position:absolute; bottom:0; left:0; right:0;
      display:flex; justify-content:center; gap:0;
      border-top:1px solid rgba(201,168,76,0.1);
      backdrop-filter:blur(16px); background:rgba(6,6,9,0.45);
      animation:fadeIn 1s ease 1.4s both;
    }
    .stat-item {
      flex:1; max-width:220px; padding:26px 20px; text-align:center;
      border-right:1px solid rgba(201,168,76,0.08);
    }
    .stat-item:last-child { border-right:none; }
    .stat-value {
      font-weight:800; font-size:1.8rem; letter-spacing:2px;
      background:linear-gradient(135deg,var(--gold-light),var(--gold));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      line-height:1.1; margin-bottom:6px;
    }
    .stat-label {
      font-weight:600; font-size:0.6rem; letter-spacing:3px; text-transform:uppercase;
      color:var(--text3);
    }

    /* Scroll indicator */
    .scroll-ind {
      position:absolute; bottom:110px; left:50%; transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:8px;
      animation:fadeIn 1s ease 1.6s both; opacity:0.5;
    }
    .scroll-txt { font-size:0.6rem; letter-spacing:4px; color:var(--text3); }
    .scroll-line {
      width:1px; height:40px;
      background:linear-gradient(180deg,var(--gold),transparent);
      animation:scrollLine 2s ease-in-out infinite;
    }
    @keyframes scrollLine { 0%,100%{transform:scaleY(1);opacity:1;} 50%{transform:scaleY(0.5);opacity:0.4;} }

    /* Animations */
    @keyframes fadeInDown { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }
    @keyframes fadeInUp   { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
    @keyframes fadeIn     { from{opacity:0;} to{opacity:1;} }

    /* ── RESPONSIVE ── */
    @media(max-width:768px) {
      nav { padding:16px 20px; }
      nav.scrolled { padding:12px 20px; }
      .nav-links { display:none; }
      .hamburger { display:flex; }
      .stats-bar { position:static; margin-top:48px; flex-wrap:wrap; }
      .stat-item { max-width:50%; }
      .logo-name { font-size:1rem; }
      .logo-tag { font-size:0.52rem; }
    }
  
/* ══ FIRE-ICE PAGE TRANSITION OVERLAY ══ */
#tc-transition {
  position:fixed; inset:0; z-index:99999; pointer-events:none;
  opacity:0;
}
#tc-transition canvas {
  position:absolute; inset:0; width:100%; height:100%;
}
@keyframes tcFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes tcFadeOut { from{opacity:1} to{opacity:0} }


    /* ══ ABOUT SECTION ══ */
    #about-section {
      position:relative; z-index:10;
      padding: 100px 40px 80px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .section-label {
      font-size:.58rem; font-weight:700; letter-spacing:4px; text-transform:uppercase;
      color:var(--gold); margin-bottom:12px;
      display:flex; align-items:center; gap:12px;
    }
    .section-label::before {
      content:''; width:32px; height:1px;
      background:linear-gradient(90deg,var(--gold),transparent);
    }
    .section-title {
      font-size:clamp(1.4rem,3vw,2.1rem); font-weight:800; letter-spacing:4px;
      text-transform:uppercase;
      background:linear-gradient(135deg,var(--gold-light),var(--gold));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      margin-bottom:24px; line-height:1.15;
    }
    .about-divider {
      width:80px; height:1.5px;
      background:linear-gradient(90deg,var(--gold),rgba(0,200,255,.6),transparent);
      margin-bottom:32px;
    }
    .about-body {
      font-family:'Orbitron',sans-serif; font-weight:400;
      font-size:.68rem; line-height:2.1; letter-spacing:.8px;
      color:rgba(240,230,211,.75); max-width:800px;
    }
    .about-body p { margin-bottom:18px; }
    .about-tagline {
      margin-top:36px; padding:22px 28px;
      border:1px solid rgba(201,168,76,.2);
      border-radius:8px;
      background:rgba(201,168,76,.04);
      font-size:.7rem; font-weight:700; letter-spacing:3px;
      text-transform:uppercase;
      color:var(--gold-light);
      backdrop-filter:blur(10px);
      position:relative; overflow:hidden;
    }
    .about-tagline::before {
      content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
      background:linear-gradient(180deg,var(--fire),var(--gold),rgba(0,180,255,.8));
    }
    .about-grid {
      display:grid; grid-template-columns:1fr 1fr;
      gap:20px; margin-top:48px;
    }
    .about-pillar {
      padding:24px 26px;
      background:rgba(5,5,8,.6); border:1px solid rgba(201,168,76,.14);
      border-radius:8px; backdrop-filter:blur(12px);
      transition:border-color .3s, box-shadow .3s;
      position:relative; overflow:hidden;
    }
    .about-pillar:hover {
      border-color:rgba(201,168,76,.35);
      box-shadow:0 0 24px rgba(201,168,76,.07);
    }
    .about-pillar::after {
      content:''; position:absolute; top:0; left:0; right:0; height:1px;
      background:linear-gradient(90deg,transparent,rgba(201,168,76,.4),transparent);
    }
    .pillar-icon {
      width:36px; height:36px; margin-bottom:14px;
      color:rgba(201,168,76,.8);
    }
    .pillar-icon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
    .pillar-title {
      font-size:.65rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
      color:var(--gold); margin-bottom:8px;
    }
    .pillar-text {
      font-size:.6rem; letter-spacing:.8px; line-height:1.9;
      color:rgba(240,230,211,.6);
    }

    /* ══ TIMELINE SECTION ══ */
    #timeline-section {
      position:relative; z-index:10;
      padding:80px 40px 100px;
      max-width:1100px; margin:0 auto;
    }
    .timeline-wrap { position:relative; margin-top:52px; padding-left:32px; }
    .timeline-wrap::before {
      content:''; position:absolute; left:0; top:0; bottom:0; width:1.5px;
      background:linear-gradient(180deg,var(--fire) 0%,var(--gold) 35%,rgba(0,180,255,.7) 70%,transparent 100%);
    }
    .tl-item {
      position:relative; padding:0 0 52px 44px;
    }
    .tl-item::before {
      content:''; position:absolute; left:-7px; top:4px;
      width:16px; height:16px; border-radius:50%;
      background:var(--bg);
      border:2px solid var(--gold);
      box-shadow:0 0 12px rgba(201,168,76,.5);
    }
    .tl-item:nth-child(2)::before { border-color:rgba(255,120,0,.8); box-shadow:0 0 12px rgba(255,100,0,.4); }
    .tl-item:nth-child(3)::before { border-color:rgba(0,180,255,.8); box-shadow:0 0 12px rgba(0,160,255,.4); }
    .tl-item:nth-child(4)::before {
      border-color:var(--gold);
      background:var(--gold);
      box-shadow:0 0 18px rgba(201,168,76,.7);
      animation:tlPulse 2s ease-in-out infinite;
    }
    @keyframes tlPulse {
      0%,100%{box-shadow:0 0 10px rgba(201,168,76,.5)}
      50%{box-shadow:0 0 22px rgba(201,168,76,.9),0 0 36px rgba(201,168,76,.3)}
    }
    .tl-year {
      font-size:.62rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
      color:var(--gold); margin-bottom:6px;
      display:flex; align-items:center; gap:10px;
    }
    .tl-year-badge {
      padding:3px 10px; border-radius:3px;
      background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.25);
      font-size:.55rem;
    }
    .tl-head {
      font-size:.82rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
      color:var(--text-primary); margin-bottom:12px; line-height:1.3;
    }
    .tl-body {
      font-size:.62rem; font-weight:400; letter-spacing:.7px; line-height:2;
      color:rgba(240,230,211,.6); max-width:700px;
    }
    .tl-tagline {
      margin-top:44px; text-align:center;
      font-size:.68rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
      color:rgba(201,168,76,.5);
      padding:20px;
      border-top:1px solid rgba(201,168,76,.12);
    }
    .tl-tagline span { color:var(--gold-light); }

    /* ══ SECTION SEPARATOR ══ */
    .section-sep {
      position:relative; z-index:10;
      height:1px; margin:0 40px;
      background:linear-gradient(90deg,transparent,rgba(201,168,76,.2),rgba(0,180,255,.15),transparent);
    }

    @media(max-width:768px){
      #about-section,#timeline-section{ padding:60px 20px; }
      .about-grid{ grid-template-columns:1fr; }
      #timeline-section{ padding-left:20px; }
    }