:root{
    --accent-blue:#4FD7FF;
    --navy-deep:#060B18;
    --navy-mid:#0E1830;
    --white:#ffffff;
    --white-soft:rgba(255,255,255,.9);
    --white-dim:rgba(255,255,255,.6);
    --overlay:rgba(4, 10, 26, 0.199);
    --line:rgba(255,255,255,.12);
    --font-display:'Space Grotesk', 'Poppins', sans-serif;
    --font-mono:'Space Mono', monospace;
  }

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

  html{ font-size:clamp(14px, 0.85vw + 10px, 18px); scroll-behavior:smooth;
    scrollbar-width:thin;
  scrollbar-color:#060B18 #162752; }

  body{
    font-family:'Poppins', sans-serif;
    background:var(--navy-deep);
    overflow-x:hidden;
  }
::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:#1f4957;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(#1f4957, #1f4957);
  border-radius:8px;
  border:2px solid var(--navy-deep);
}

::-webkit-scrollbar-thumb:hover{
  background:var(#1f4957);
}
  section{ position:relative; }

  /* ---------- PAGE LOADER ---------- */
  body:not(.is-loaded){
    overflow:hidden;
    height:100vh;
  }

  #page-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    background:var(--navy-deep);
    transition:opacity .6s ease, visibility .6s ease;
  }

  #page-loader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  #page-loader__logo{
    width:clamp(48px, 8vw, 72px);
    height:clamp(48px, 8vw, 72px);
    object-fit:contain;
    animation:loaderPulse 1.4s ease-in-out infinite;
  }

  #page-loader__spinner{
    width:32px;
    height:32px;
    border-radius:50%;
    border:3px solid var(--line);
    border-top-color:var(--accent-blue);
    animation:loaderSpin .8s linear infinite;
  }

  #page-loader__text{
    color:var(--white-dim);
    font-family:var(--font-mono);
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  @keyframes loaderSpin{ to{ transform:rotate(360deg); } }
  @keyframes loaderPulse{
    0%,100%{ opacity:.6; transform:scale(.94); }
    50%{ opacity:1; transform:scale(1.02); }
  }

  /* Keep the hero's entrance animations frozen until the loader clears,
     so they play in full once the page is actually revealed. */
  body:not(.is-loaded) .hero__bg,
  body:not(.is-loaded) .hero__logos img,
  body:not(.is-loaded) .hero__title span,
  body:not(.is-loaded) .hero__subtitle,
  body:not(.is-loaded) .hero__meta li,
  body:not(.is-loaded) .hero__scroll{
    animation-play-state:paused !important;
  }
  /* ---------- END PAGE LOADER ---------- */


  .hero{
    --logo-top:clamp(20px, 4vw, 40px);
    --logo-h:clamp(40px, 6vw, 80px);
    --bg-zoom:1.06;
    --bg-pos:75% center;
    --bg-size:cover, min(58%, 720px) auto;
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(20px, 5vw, 64px);
    overflow:hidden;
  }

  .hero__bg{
    position:absolute;
    inset:0;
    background-image:linear-gradient(var(--overlay), var(--overlay)), url('/basic-ai-literacy/images/ai-icon.png');
    background-size:var(--bg-size);
    background-position:var(--bg-pos);
    background-repeat:no-repeat;
    transform:scale(1);
    opacity:0;
    animation:heroFadeIn 3s ease-out forwards, kenBurns 26s ease-in-out infinite alternate 3s;
    z-index:0;
  }

  .hero__particles{
    position:absolute;
    inset:0;
    z-index:1;
  }

  .hero__particles canvas{
    display:block;
    width:100% !important;
    height:100% !important;
  }

  .hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:clamp(120px, 22vh, 240px);
    background:linear-gradient(to bottom, transparent, var(--navy-deep));
    pointer-events:none;
    z-index:2;
  }

  .hero__logos{
    position:absolute;
    top:var(--logo-top);
    left:clamp(20px, 5vw, 64px);
    display:flex;
    gap:clamp(10px, 1.6vw, 16px);
    align-items:center;
    z-index:3;
  }

  .hero__logos img{
    height:var(--logo-h);
    width:var(--logo-h);
    object-fit:contain;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
    opacity:0;
    transform:translateY(-14px) scale(.85);
    animation:dropIn .7s cubic-bezier(.2,.8,.2,1.2) forwards;
  }

  .hero__logos img:nth-child(1){ animation-delay:.15s; }
  .hero__logos img:nth-child(2){ animation-delay:.32s; }
  .hero__logos img:nth-child(3){ animation-delay:.49s; }

  .hero__content{
    position:relative;
    z-index:3;
    max-width:min(900px, 90vw);
    margin-top:calc(var(--logo-top) + var(--logo-h) + clamp(16px, 4vw, 34px));
  }

  .hero__title{
    font-family:var(--font-display);
    font-weight:700;
    text-transform:uppercase;
    color:var(--white);
    font-size:clamp(2.6rem, 8vw + 0.3rem, 5.2rem);
    line-height:1;
    letter-spacing:-0.01em;
    text-shadow:0 4px 24px rgba(0,0,0,.35);
    overflow:hidden;
  }

  .hero__title span{
    display:inline-block;
    clip-path:inset(0 100% 0 0);
    animation:revealText 2s ease forwards;
  }

  @keyframes revealText{
    to{ clip-path:inset(0 0 0 0); }
  }

  .hero__title .accent{ color:var(--accent-blue); font-weight:inherit; }

  .hero__subtitle{
    font-family:var(--font-mono);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--accent-blue);
    font-size:clamp(1rem, 1.2vw + 0.55rem, 1.2rem);
    margin-top:clamp(14px, 2.5vw, 24px);
    opacity:0;
    transform:translateX(-16px);
    animation:slideRight .7s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:.85s;
  }

  .hero__meta{
    list-style:none;
    margin-top:clamp(24px, 4vw, 44px);
    display:flex;
    flex-direction:column;
    gap:clamp(10px, 2vw, 18px);
  }

  .hero__meta li{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--white-soft);
    font-family:var(--font-mono);
    font-weight:400;
    font-size:clamp(0.95rem, 0.9vw + 0.55rem, 1.05rem);
    line-height:1.4;
    opacity:0;
    transform:translateX(-16px);
    animation:slideRight .6s cubic-bezier(.16,1,.3,1) forwards;
  }

  .hero__meta li:nth-child(1){ animation-delay:1.05s; }
  .hero__meta li:nth-child(2){ animation-delay:1.2s; }
  .hero__meta li:nth-child(3){ animation-delay:1.35s; }

  .hero__meta svg{
    flex-shrink:0;
    width:clamp(18px, 1.4vw + 0.8rem, 26px);
    height:clamp(18px, 1.4vw + 0.8rem, 26px);
    color:var(--accent-blue);
  }

  .hero__scroll{
    position:absolute;
    bottom:clamp(18px, 3vw, 32px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    opacity:0;
    animation:fadeInOnly .8s ease forwards;
    animation-delay:1.6s;
    z-index:3;
  }

  .hero__scroll-arrow{
    width:20px;
    height:20px;
    color:var(--accent-blue);
    animation:arrowBounce 1.6s ease-in-out infinite;
  }

  .hero__scroll span{
    color:var(--white-dim);
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:.16em;
    text-transform:uppercase;
  }


  .about{
    position:relative;
    background:var(--navy-deep);
    padding:clamp(80px, 13vw, 150px) clamp(20px, 6vw, 64px);
    overflow:hidden;
  }

  .about__inner{
    max-width:1180px;
    margin:0 auto;
  }

  .about__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--accent-blue);
    font-family:var(--font-mono);
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    font-size:clamp(.72rem, .4vw + .62rem, .82rem);
  }

  .about__eyebrow::before,
  .about__eyebrow::after{ content:"["; }
  .about__eyebrow::after{ content:"]"; }

  .about__title{
    margin-top:18px;
    color:var(--white);
    font-family:var(--font-display);
    font-weight:700;
    text-transform:uppercase;
    font-size:clamp(3rem, 8vw + .4rem, 8rem);
    line-height:.92;
    letter-spacing:-.01em;
    overflow:hidden;
  }

  .about__title .line{
    display:block;
    overflow:hidden;
  }

  .about__title .line span{
    display:inline-block;
    transform:translateY(110%);
    transition:transform .8s cubic-bezier(.16,1,.3,1);
  }

  .about__title .accent{ color:var(--accent-blue); }

  .about.is-visible .about__title .line:nth-child(1) span{ transition-delay:.05s; }
  .about.is-visible .about__title .line:nth-child(2) span{ transition-delay:.15s; }
  .about.is-visible .about__title .line span{ transform:translateY(0); }

  .about__split{
    margin-top:clamp(32px, 5vw, 52px);
    padding-top:clamp(24px, 3.5vw, 36px);
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(28px, 5vw, 64px);
  }

  .about__lead{
    color:var(--white-soft);
    font-family:var(--font-mono);
    font-weight:700;
    text-transform:uppercase;
    font-size:clamp(.85rem, .4vw + .74rem, 1.05rem);
    line-height:1.6;
    letter-spacing:.01em;
  }

  .about__text{
    color:var(--white-dim);
    font-weight:400;
    font-size:clamp(.92rem, .3vw + .8rem, 1.02rem);
    line-height:1.75;
  }

  .about__infobar{
    margin-top:clamp(36px, 5vw, 54px);
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }

  .about__infobox{
    background:var(--navy-deep);
    padding:clamp(18px, 2.4vw, 26px);
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  }

  .about.is-visible .about__infobox{ opacity:1; transform:translateY(0); }
  .about.is-visible .about__infobox:nth-child(1){ transition-delay:.2s; }
  .about.is-visible .about__infobox:nth-child(2){ transition-delay:.32s; }
  .about.is-visible .about__infobox:nth-child(3){ transition-delay:.44s; }

  .about__infobox-label{
    display:block;
    color:var(--accent-blue);
    font-family:var(--font-mono);
    font-weight:700;
    text-transform:uppercase;
    font-size:.68rem;
    letter-spacing:.06em;
  }

  .about__infobox p{
    margin-top:10px;
    color:var(--white-soft);
    font-size:.86rem;
    line-height:1.55;
  }
 
  .schedule{
    background:var(--navy-mid);
    padding:clamp(70px, 12vw, 120px) clamp(16px, 6vw, 64px);
  }

  .schedule__head{
    text-align:center;
    max-width:640px;
    margin:0 auto clamp(50px, 8vw, 84px);
  }

  .schedule__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--accent-blue);
    font-family:var(--font-mono);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-size:clamp(.72rem, .5vw + .6rem, .85rem);
  }

  .schedule__eyebrow::before,
  .schedule__eyebrow::after{
    content:"";
    width:28px;
    height:1px;
    background:var(--accent-blue);
  }

  .schedule__title{
    margin-top:18px;
    color:var(--white);
    font-family:var(--font-display);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:-.01em;
    font-size:clamp(1.9rem, 3.4vw + .8rem, 3.2rem);
  }

  .schedule__sub{
    margin-top:12px;
    color:var(--white-dim);
    font-size:clamp(.9rem, .5vw + .7rem, 1.05rem);
    line-height:1.6;
  }

  .timeline{
    --tl-x:20px;
    --tl-gap:32px;
    position:relative;
    max-width:760px;
    margin:0 auto;
  }

  .timeline__track{
    position:absolute;
    left:var(--tl-x);
    top:2px;
    bottom:0;
    width:2px;
    background:var(--line);
  }

  .timeline__fill{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(var(--accent-blue), #7fd0ff);
    transform:scaleY(0);
    transform-origin:top;
    will-change:transform;
  }

  .day-node{
    position:relative;
    padding:0 0 clamp(40px, 6vw, 60px) calc(var(--tl-x) + var(--tl-gap));
    opacity:0;
    transform:translateX(-14px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }

  .day-node.is-visible{ opacity:1; transform:translateX(0); }

  .day-node:last-child{ padding-bottom:0; }

  .day-node__dot{
    position:absolute;
    left:calc(var(--tl-x) - 7px);
    top:2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--navy-mid);
    border:2px solid var(--line);
    transition:border-color .4s ease, background .4s ease, box-shadow .4s ease;
  }

  .day-node.is-visible .day-node__dot{
    border-color:var(--accent-blue);
    background:var(--accent-blue);
    box-shadow:0 0 0 5px rgba(79,215,255,.15);
  }

  .day-node__num{
    color:var(--accent-blue);
    font-family:var(--font-mono);
    font-weight:700;
    font-size:1.5rem;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .day-node__head{
    /* display:flex; */
    /* align-items:baseline; */
    gap:10px;
    /* flex-wrap:wrap; */
    margin-top:6px;
  }

  .day-node__title{
    color:var(--white);
    font-family:var(--font-display);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:-.005em;
    font-size:clamp(1.3rem, 1.4vw + .9rem, 1.8rem);
  }

  .day-node__date{
    color:rgba(255, 255, 255, 0.952);
    font-family:var(--font-mono);
    font-size:.78rem;
  }


  .agenda{
    margin-top:22px;
    border-top:1px solid var(--line);
  }

  .agenda-row{
    display:grid;
    grid-template-columns:minmax(0, 160px) 1fr;
    gap:4px 16px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }

  .agenda-row time{
    color:var(--accent-blue);
    font-family:var(--font-mono);
    font-size:.74rem;
    font-weight:700;
    line-height:1.4;
    padding-top:1px;
  }

  .agenda-row__title{
    color:var(--white-soft);
    font-size:.9rem;
    font-weight:600;
    line-height:1.4;
  }

  .agenda-row__by{
    margin-top:2px;
    color:var(--white-dim);
    font-size:.78rem;
    line-height:1.4;
  }

  .agenda-row--break{
    opacity:.55;
  }

  .agenda-row--break .agenda-row__title{
    font-weight:400;
    font-style:italic;
  }

  .agenda-row--break .agenda-row__by{ display:none; }


  .footer{
    background:var(--navy-deep);
    border-top:1px solid var(--line);
    padding:clamp(48px, 8vw, 72px) clamp(20px, 6vw, 64px) clamp(28px, 4vw, 40px);
  }

  .footer__inner{
    max-width:1180px;
    margin:0 auto;
  }

  .footer__eyebrow{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--white-dim);
    font-family:var(--font-mono);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-size:clamp(.68rem, .4vw + .55rem, .78rem);
  }

  .footer__eyebrow::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }

  .footer__partners{
    margin-top:clamp(28px, 4vw, 40px);
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(28px, 5vw, 56px);
  }

  .partner{
    position:relative;
    padding-left:clamp(18px, 2vw, 24px);
    border-left:2px solid var(--accent-blue);
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }

  .footer.is-visible .partner:nth-child(1){ transition-delay:.05s; }
  .footer.is-visible .partner:nth-child(2){ transition-delay:.18s; }
  .footer.is-visible .partner{ opacity:1; transform:translateY(0); }

  .partner__name{
    color:var(--white);
    font-weight:700;
    font-size:clamp(.95rem, .5vw + .8rem, 1.1rem);
    line-height:1.35;
  }

  .partner__sub{
    margin-top:4px;
    color:var(--white-dim);
    font-size:clamp(.78rem, .3vw + .68rem, .86rem);
    line-height:1.45;
  }

  .footer__base{
    margin-top:clamp(36px, 6vw, 56px);
    padding-top:clamp(20px, 3vw, 28px);
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    color:var(--white-dim);
    font-family:var(--font-mono);
    font-size:.74rem;
  }


  @keyframes dropIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
  @keyframes heroContentIn{ to{ transform:translateX(0); } }
  @keyframes slideRight{ to{ opacity:1; transform:translateX(0); } }
  @keyframes fadeInOnly{ to{ opacity:1; } }
  @keyframes heroFadeIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes kenBurns{
    from{ transform:scale(1); }
    to{ transform:scale(var(--bg-zoom)); }
  }
  @keyframes arrowBounce{
    0%, 100%{ transform:translateY(0); opacity:.55; }
    50%{ transform:translateY(7px); opacity:1; }
  }

  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }


  @media (max-width: 900px){
    .about__split{ grid-template-columns:1fr; gap:20px; }
    .about__infobar{ grid-template-columns:1fr; }
  }

  @media (max-width: 768px){
    .hero{ justify-content:flex-start; padding:20px; padding-top:clamp(24px, 6vw, 48px); --bg-pos:68% center; --bg-zoom:1.05; --bg-size:cover, 66% auto; }
  }

  @media (max-width: 560px){
    .agenda-row{ grid-template-columns:1fr; gap:2px; }
    .agenda-row time{ font-size:.72rem; }
     .hero__content{
      margin-top: 185px;
    }
  }

  @media (max-width: 480px){
    .hero{ --logo-top:40px; --logo-h:72px; --bg-pos:62% 32%; --bg-zoom:1.03; --bg-size:cover, 82% auto; }
    .day-node__head{ flex-direction:column; gap:2px; }
    .timeline{ --tl-x:12px; --tl-gap:24px; }
    .day-node__dot{ width:14px; height:14px; }
    .schedule{ padding-left:16px; padding-right:16px; }
    .footer__partners{ grid-template-columns:1fr; }
    .footer__base{ flex-direction:column; }
    .hero__content{
      margin-top: 185px;
    }
  }

  @media (max-width: 380px){
    .hero{ --logo-h:64px; --bg-size:cover, 92% auto; }
    .hero__meta{ gap:12px; }
    .day-node__title{ font-size:1.02rem; }
  }

  @media (prefers-reduced-motion: reduce){
    #page-loader__logo,
    #page-loader__spinner{
      animation:none !important;
    }
    .hero__bg,
    .hero__logos img,
    .hero__content,
    .hero__title span,
    .hero__subtitle,
    .hero__meta li,
    .hero__scroll,
    .hero__scroll-arrow,
    .reveal,
    .about__title .line span,
    .about__infobox,
    .day-node{
      animation:none !important;
      transition:none !important;
      opacity:1 !important;
      filter:none !important;
      transform:none !important;
      clip-path:none !important;
    }
    .timeline__fill{ transform:scaleY(1) !important; }
  }