:root{
    --ink:#123524;
    --ink-soft:#1B4332;
    --charcoal:#15110d;
    --charcoal-2:#1d1712;
    --panel:#221b14;
    --panel-border:#3a2c1c;
    --smoke:#f3ede2;
    --smoke-dim:#c9c0af;
    --alarm:#D7263D;
    --alarm-dark:#A81D30;
    --amber:#F0C020;
    --ember:#ff6a2b;
    --ember-2:#ffb238;
    --green:#2E8B4F;
    --green-dark:#1F6B3D;
    --safe:#3f8f6a;
    --safe-dim:#2c6b4e;
    --steel:#4A6357;
    --paper:#FBF3D6;
    --paper-white:#FFFDF6;
    --off-white:#FFFDF6;
    --line: rgba(18,53,36,0.14);
    --font-bn:'Noto Sans Bengali', sans-serif;
    --font-display:'Teko', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; overflow-x:clip;}
  body{
    font-family:var(--font-bn);
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  body > footer{margin-top:auto;}   /* keep footer pinned to bottom on short pages */
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block;}
  :focus-visible{outline:3px solid var(--amber); outline-offset:3px;}

  .container{max-width:1180px; margin:0 auto; padding:0 24px;}

  /* ---------- HAZARD DIVIDER (signature structural device) ---------- */
  .hazard-divider{
    height:14px;
    background:repeating-linear-gradient(
      -45deg,
      var(--ink) 0 18px,
      var(--amber) 18px 36px
    );
  }
  .hazard-divider.thin{height:8px;}

  /* ---------- HAZARD BAR (animated crawl) ---------- */
  .hazard-bar{
    height:7px; width:100%;
    position:relative; overflow:hidden;
  }
  .hazard-bar::before{
    content:'';
    position:absolute; top:0; left:0;
    width:200%; height:100%;
    background:repeating-linear-gradient(135deg, var(--ember-2) 0 18px, var(--charcoal) 18px 36px);
    animation:crawl 60s linear infinite;
    will-change:transform;
  }
  .hazard-bar.bottom{position:relative;}
  @keyframes crawl{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  .tricolor-bar{
    height:7px;
    background:linear-gradient(to right,
      var(--alarm) 0% 33.33%,
      var(--amber) 33.33% 66.66%,
      var(--green) 66.66% 100%);
  }

  /* ---------- TOP BAR ---------- */
  .topbar{
    background:transparent;
    background:var(--ink);
    color:var(--off-white);
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.02em;
    /* border-bottom:1px solid rgba(255,255,255,.07); */
  }
  .topbar .container{
    display:flex !important; justify-content:space-between !important; align-items:center !important;
    padding-top:6px !important; padding-bottom:6px !important; gap:16px;
  }
  .topbar-right{display:flex; align-items:center; gap:14px; flex-shrink:0;}
  .topbar .pulse-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--alarm); margin-right:7px;
    box-shadow:0 0 0 0 rgba(215,38,61,.7);
    animation:pulse 1.6s infinite;
    position:relative; top:-1px;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(215,38,61,.55);}
    70%{box-shadow:0 0 0 7px rgba(215,38,61,0);}
    100%{box-shadow:0 0 0 0 rgba(215,38,61,0);}
  }
  .topbar .emergency{color:var(--off-white); opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .topbar .emergency b{color:var(--amber); font-weight:600;}
  .hotline-link{
    color:inherit; text-decoration:none; padding:3px 2px;
    transition:color .15s ease;
  }
  .hotline-link:hover{color:var(--amber);}
  .topbar-sep{opacity:.35; margin:0 10px;}

  /* ---------- NAV ---------- */
  header.nav{
    /* background:transparent; */
    background:var(--ink);
    /* border-bottom:1px solid rgba(255,255,255,.08); */
    position:sticky; top:0; z-index:50;
    /* box-shadow:0 4px 18px rgba(0,0,0,.22); */
  }
  header.nav .container{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; padding-top:11px; padding-bottom:11px;
    min-width:0;
  }
  header.nav .nav-shell{width:100%; flex-wrap:nowrap; min-width:0;}
  .brand{
    display:flex; align-items:center; gap:11px;
    flex:0 1 auto; min-width:0;
    text-decoration:none; color:inherit; outline-offset:3px;
  }
  .brand-text{display:flex; flex-direction:column; min-width:0; overflow:hidden;}
  .brand-mark{width:40px; height:40px; flex-shrink:0; object-fit:contain;}
  .brand-name{
    font-family:var(--font-display); color:var(--off-white);
    font-size:25px; font-weight:600; letter-spacing:.02em; line-height:1.5 !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .brand-name span{color:var(--alarm);}
  .brand-sub{
    font-family:var(--font-bn); color:rgba(247,247,244,.55);
    font-size:11px; margin-top:2px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }
  nav.links{display:flex; gap:22px; align-items:center; flex-wrap:nowrap; margin-left:auto; margin-right:14px; min-width:0;}
  nav.links a{
    color:rgba(247,247,244,.85); font-size:14.5px; font-weight:600;
    transition:color .15s ease; position:relative; white-space:nowrap;
    padding:4px 0;
  }
  nav.links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    background:var(--amber); transition:right .2s ease;
  }
  nav.links a:hover{color:var(--amber);}
  nav.links a:hover::after{right:0;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 22px; font-size:14.5px; font-weight:600;
    border-radius:2px; cursor:pointer; border:1.5px solid transparent;
    font-family:var(--font-bn); transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-alarm{background:var(--alarm); color:#fff;}
  .btn-alarm:hover{background:var(--alarm-dark);}
  .btn-outline-dark{border-color:rgba(247,247,244,.4); color:var(--off-white);}
  .btn-outline-dark:hover{border-color:var(--amber); color:var(--amber);}
  .btn-outline-ink{border-color:var(--ink); color:var(--ink);}
  .btn-outline-ink:hover{background:var(--ink); color:var(--off-white);}
  .nav-toggle{
    display:none; background:none; border:0; color:var(--off-white); font-size:26px;
    cursor:pointer; flex-shrink:0; padding:2px 4px;
    transition:color .15s ease, transform .2s ease;
  }
  .nav-toggle.open{color:var(--amber); transform:rotate(90deg);}
  .nav-actions{display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0;}

  /* auth links inside the mobile drawer (hidden on desktop) */
  .drawer-auth-group{display:none;}
  .lang-btn{
    font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.04em;
    color:var(--off-white); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
    padding:5px 9px; border-radius:2px; cursor:pointer; transition:all .15s ease;
  }
  .lang-btn:hover{border-color:var(--amber); color:var(--amber); background:rgba(255,255,255,.12);}

  /* ---------- HERO ---------- */
  .hero{
    color:var(--smoke);
    padding:0;
    position:relative;
    overflow:clip;
    background:
      radial-gradient(ellipse 900px 500px at 78% 15%, rgba(255,106,43,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 10% 90%, rgba(63,143,106,0.08), transparent 60%),
      linear-gradient(180deg, var(--ink) 0%, var(--charcoal-2) 40%, var(--charcoal) 100%);
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 85% 15%, rgba(215,38,61,.20), transparent 45%),
      radial-gradient(circle at 100% 90%, rgba(240,192,32,.12), transparent 40%);
    pointer-events:none;
  }
  .hero .container{
    display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;
    position:relative; z-index:1;
    padding:76px 24px 96px;
  }

  /* Ember particles */
  .embers{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
  .ember-particle{
    position:absolute; bottom:-20px;
    width:5px; height:5px; border-radius:50%;
    background:radial-gradient(circle, var(--ember-2), var(--ember) 60%, transparent 70%);
    opacity:0;
    animation:rise linear infinite;
  }
  @keyframes rise{
    0%{transform:translateY(0) translateX(0) scale(1); opacity:0;}
    8%{opacity:0.9;}
    90%{opacity:0.3;}
    100%{transform:translateY(-620px) translateX(var(--drift,20px)) scale(0.3); opacity:0;}
  }

  /* ---------- HERO LEFT COLUMN ---------- */
  .hero-badge{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--safe-dim);
    color:var(--safe);
    background:rgba(63,143,106,0.08);
    font-weight:600; font-size:13.5px;
    padding:8px 16px; border-radius:100px;
    margin-bottom:28px;
  }
  .hero-badge::before{
    content:"";
    width:7px; height:7px; border-radius:50%;
    background:var(--safe);
    box-shadow:0 0 0 3px rgba(63,143,106,0.25);
  }
  h1.hero-title{
    font-family:var(--font-bn); font-weight:900;
    font-size:clamp(34px, 4.6vw, 56px);
    line-height:1.18; letter-spacing:-.5px;
    color:var(--smoke);
    margin-top:28px;
    margin-bottom:22px;
  }
  h1.hero-title .flame{
    display:inline-block;
    background:linear-gradient(90deg, var(--ember-2), var(--ember) 55%, var(--alarm));
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    background-size:200% 100%;
    animation:flicker 3.2s ease-in-out infinite;
  }
  @keyframes flicker{
    0%,100%{background-position:0% 50%; filter:brightness(1);}
    45%{background-position:100% 50%; filter:brightness(1.12);}
    50%{filter:brightness(0.94);}
    55%{background-position:60% 50%; filter:brightness(1.08);}
  }
  .hero-desc{
    font-size:17px; line-height:1.75;
    color:var(--smoke-dim); max-width:520px; margin-bottom:34px;
  }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px;}
  .hero-ctas .btn{
    font-family:var(--font-bn); font-weight:600; font-size:15.5px;
    padding:15px 28px; border-radius:9px;
    cursor:pointer; border:none;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .hero-ctas .btn:hover{transform:translateY(-2px);}
  .btn-primary{
    background:linear-gradient(135deg, var(--ember), var(--alarm));
    color:#fff;
    box-shadow:0 8px 24px -8px rgba(215,38,61,0.55);
  }
  .btn-primary:hover{box-shadow:0 12px 28px -8px rgba(215,38,61,0.7);}
.btn.btn-ghost{
  position:relative;
  background:transparent;
  border:1.5px solid var(--ember);
  color:var(--smoke);
  overflow:hidden;
  transition:color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .25s ease;
  z-index:1;
}

.btn.btn-ghost::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--ember-2), var(--ember));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}

.btn.btn-ghost:hover{
  color:#1a0f06;
  border-color:var(--ember);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(255,106,43,0.5);
}

.btn.btn-ghost:hover::before{
  transform:scaleX(1);
}
  .hero-foot-notes{
    display:flex; gap:26px; flex-wrap:wrap;
  }
  .hero-foot-notes span{
    font-size:13.5px; color:var(--smoke-dim);
    display:flex; align-items:center; gap:7px;
  }
  .dot-ic{color:var(--ember-2); font-size:15px;}

  /* Panel — right column card */
  .panel{
    background:linear-gradient(180deg, var(--panel), #1a140e);
    border:1px solid var(--panel-border);
    border-radius:16px;
    padding:30px 30px 26px;
    position:relative;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .panel::before{
    content:"";
    position:absolute;
    top:0; left:24px; right:24px; height:3px;
    background:linear-gradient(90deg, var(--alarm), var(--ember-2), var(--safe));
    border-radius:0 0 4px 4px;
  }
  .panel-head{
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom:18px;
    border-bottom:1px dashed var(--panel-border);
  }
  .panel-head h3{
    font-size:15px; font-weight:600; color:var(--smoke-dim);
  }
  .panel-head .live{
    display:flex; align-items:center; gap:7px;
    font-size:12.5px; color:var(--safe); font-weight:600;
  }
  .panel-head .live-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--safe);
    animation:pulse-live 1.6s ease-in-out infinite;
  }
  @keyframes pulse-live{
    0%,100%{box-shadow:0 0 0 0 rgba(63,143,106,0.5);}
    50%{box-shadow:0 0 0 6px rgba(63,143,106,0);}
  }

  /* Gauge row */
  .gauge-row{
    display:flex; align-items:center; gap:24px;
    padding:24px 0 20px;
  }
  .gauge-wrap{position:relative; width:128px; height:128px; flex-shrink:0;}
  .gauge-wrap svg{transform:rotate(-90deg);}
  .gauge-bg{fill:none; stroke:#332822; stroke-width:10;}
  .gauge-fg{
    fill:none; stroke:url(#gaugeGrad); stroke-width:10; stroke-linecap:round;
    stroke-dasharray:326.7; stroke-dashoffset:326.7;
    animation:fillGauge 1.8s cubic-bezier(.2,.8,.2,1) 0.3s forwards;
  }
  @keyframes fillGauge{to{stroke-dashoffset:6.5;}}
  .gauge-label{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .gauge-label b{font-family:var(--font-bn); font-size:26px; color:var(--smoke);}
  .gauge-label small{font-size:11px; color:var(--smoke-dim); margin-top:2px;}
  .gauge-copy{flex:1;}
  .gauge-copy .big{
    font-family:var(--font-bn); font-size:38px;
    color:var(--smoke); line-height:1;
  }
  .gauge-copy .cap{
    font-size:13.5px; color:var(--smoke-dim);
    margin-top:8px; line-height:1.5;
  }

  /* Method row */
  .method-row{
    padding:18px 0;
    border-top:1px dashed var(--panel-border);
  }
  .method-row .cap{font-size:13px; color:var(--smoke-dim); margin-bottom:9px;}
  .method-chips{display:flex; gap:10px; flex-wrap:wrap;}
  .chip{
    font-size:13.5px; font-weight:600;
    padding:7px 14px; border-radius:8px;
    background:rgba(255,106,43,0.09);
    border:1px solid rgba(255,106,43,0.25);
    color:var(--ember-2);
  }

  /* Stat strip */
  .panel-stat-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    border-top:1px dashed var(--panel-border);
    padding-top:20px; margin-top:4px;
  }
  .panel-stat-strip .panel-stat{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    border-radius:8px;
    padding:14px 16px;
    text-align:center;
    transition:background .2s, border-color .2s, transform .2s;
  }
  .panel-stat-strip .panel-stat:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(240,192,32,.2);
    transform:translateY(-2px);
  }
  .panel-stat-strip b{
    font-family:var(--font-bn); font-size:26px;
    color:var(--amber); display:block;
    line-height:1.1;
  }
  .panel-stat-strip span{
    font-size:11.5px; color:var(--smoke-dim);
    display:block; margin-top:4px;
    letter-spacing:.02em;
  }

  /* ---------- STATS ---------- */
  .stats{
    background:var(--paper-white);
    padding:0;
    position:relative;
    overflow:clip;
    border-bottom:1px solid var(--line);
  }
  .stats::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 50%, rgba(255,106,43,.04), transparent 50%),
      radial-gradient(circle at 80% 50%, rgba(63,143,106,.03), transparent 50%);
    pointer-events:none;
  }
  .stats .container{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    position:relative; z-index:1;
  }
  .stat{
    padding:40px 24px; text-align:center;
    border-left:1px solid var(--line);
    transition:background .3s ease;
  }
  .stat:first-child{border-left:none;}
  .stat:hover{background:rgba(18,53,36,.03);}
  .stat-icon{
    width:44px; height:44px;
    border-radius:10px;
    background:rgba(18,53,36,.06);
    border:1px solid rgba(18,53,36,.1);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px;
    transition:transform .3s ease, background .3s ease;
  }
  .stat:hover .stat-icon{
    transform:translateY(-3px);
    background:rgba(18,53,36,.1);
  }
  .stat-icon svg{color:var(--ink);}
  .stat-num{
    font-family:var(--font-bn); font-weight:900; font-size:36px;
    color:var(--ink); line-height:1;
  }
  html[lang="en"] .stat-num{
    font-family:'Teko', 'IBM Plex Mono', sans-serif;
    font-feature-settings: "lnum";
  }
  html[lang="en"] .panel-stat-strip b{
    font-family:'Teko', 'IBM Plex Mono', sans-serif;
    font-feature-settings: "lnum";
  }
  html[lang="en"] .gauge-label b{
    font-family:'IBM Plex Mono', monospace;
    font-feature-settings: "lnum";
  }
  html[lang="en"] .gauge-copy .big{
    font-family:'IBM Plex Mono', monospace;
    font-feature-settings: "lnum";
  }
  .stat-label{
    font-size:13px; color:var(--steel); margin-top:8px;
    letter-spacing:.02em;
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:88px 0;}
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-kicker{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
    color:var(--alarm); text-transform:uppercase; margin-bottom:12px;
    display:flex; align-items:center; gap:8px;
  }
  .section-kicker::before{content:""; width:22px; height:2px; background:var(--alarm); display:inline-block;}
  .section-kicker.kicker-green{color:var(--green);}
  .section-kicker.kicker-green::before{background:var(--green);}
  .section-title{
    font-weight:900; font-size:clamp(26px,3vw,36px); letter-spacing:-.01em; color:var(--ink);
    margin-bottom:14px;
  }
  .section-desc{color:var(--steel); font-size:15.5px; max-width:560px;}

  /* ---------- COURSES ---------- */
  .courses-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  .course-card{
    background:var(--paper-white); border:1px solid var(--line); border-top:4px solid var(--steel);
    padding:26px 24px 24px; border-radius:12px;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
    display:flex; flex-direction:column;
    cursor:pointer;
  }
  .course-card.basic{border-top-color:var(--green);}
  .course-card.mid{border-top-color:var(--amber);}
  .course-card.adv{border-top-color:var(--alarm);}
  .course-card:hover{
    transform:scale(1.05);
    box-shadow:0 24px 40px -16px rgba(28,20,10,0.28);
    border-color:var(--ember);
  }
  .course-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;}
  .course-code{
    font-family:var(--font-mono); font-size:12.5px; color:var(--steel);
    background:var(--paper); padding:4px 8px; border-radius:2px; letter-spacing:.03em;
  }
  .level-badge{
    font-size:11px; font-family:var(--font-mono); padding:4px 12px; border-radius:100px;
    letter-spacing:.03em; text-transform:uppercase;
    transition:background .28s ease, color .28s ease;
  }
  .level-basic{background:#e7f3ec; color:#2c6b4e;}
  .level-mid{background:rgba(240,192,32,.20); color:#8A6A00;}
  .level-adv{background:rgba(215,38,61,.12); color:var(--alarm-dark);}
  .course-card:hover .level-basic{background:var(--green); color:#fff;}
  .course-card:hover .level-mid{background:var(--amber); color:var(--ink);}
  .course-card:hover .level-adv{background:var(--alarm); color:#fff;}
  .course-title{font-weight:700; font-size:19px; margin-bottom:10px; color:var(--ink);transition:color .22s ease;}
  .course-card:hover .course-title{color:var(--alarm);}
  .course-desc{font-size:14px; color:var(--steel); margin-bottom:18px; flex-grow:1;}
  .course-image{
    margin:-26px -24px 16px; border-radius:12px 12px 0 0; overflow:hidden;
    background:var(--ink-soft); aspect-ratio:16/9;
    position:relative;
  }
  .course-image::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35));
    opacity:0;
    transition:opacity .28s ease;
  }
  .course-card:hover .course-image::after{opacity:1;}
  .course-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
  .course-card:hover .course-image img{transform:scale(1.08);}
  .course-foot{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding-top:14px; border-top:1px dashed var(--line);
    font-size:13px; color:var(--steel);
  }
  .course-foot a{color:var(--alarm); font-weight:600; margin-left:auto;display:inline-flex;align-items:center;gap:5px;}
  .course-foot a .arrow{transition:transform .22s ease;display:inline-block;}
  .course-card:hover .course-foot a .arrow{transform:translateX(5px);}
  .course-fee-row{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:12px; padding-top:10px; border-top:1px dashed var(--line);
    font-size:13px; color:var(--steel);
  }
  .course-fee{font-weight:700; color:var(--alarm); font-family:var(--font-bn); font-size:14px; background:#fdeaea; padding:6px 14px; border-radius:7px;transition:background .28s ease, color .28s ease, transform .28s ease;}
  .course-card:hover .course-fee{background:var(--alarm); color:#fff; transform:scale(1.05);}

  /* ---------- PATHWAY ---------- */
  .pathway{background:var(--ink); color:var(--off-white); position:relative; overflow:clip;}
  .pathway::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--amber), var(--alarm), var(--safe), var(--amber));
    background-size:200% 100%;
    animation:pathGradient 4s ease infinite;
  }
  @keyframes pathGradient{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
  }
  .pathway .section-desc{color:rgba(247,247,244,.65);}
  .pathway .section-kicker{color:var(--amber);}
  .pathway .section-kicker::before{background:var(--amber);}
  .pathway .section-title{color:var(--off-white);}

  .path-list{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
    position:relative;
  }
  .path-list::before{
    content:"";
    position:absolute;
    top:44px; left:40px; right:60px;
    height:2px;
    background:linear-gradient(90deg, var(--amber), rgba(255,255,255,.1));
    z-index:0;
  }
  .path-step{
    padding:28px 22px; border-radius:10px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    position:relative;
    z-index:1;
    transition:transform .35s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .path-step:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.07);
    border-color:rgba(240,192,32,.25);
    box-shadow:0 16px 40px -12px rgba(240,192,32,.12);
  }
  .path-num{
    font-family:var(--font-mono); font-size:13px; font-weight:700;
    color:var(--ink); letter-spacing:.06em;
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:var(--amber);
    margin-bottom:18px;
    box-shadow:0 4px 12px rgba(240,192,32,.3);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .path-step:hover .path-num{
    transform:scale(1.1);
    box-shadow:0 6px 20px rgba(240,192,32,.4);
  }
  .path-icon{
    width:40px; height:40px;
    border-radius:10px;
    background:rgba(240,192,32,.08);
    border:1px solid rgba(240,192,32,.15);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    color:var(--amber);
  }
  .path-title{
    font-weight:700; font-size:16px; margin-bottom:10px;
    color:var(--smoke); line-height:1.4;
  }
  .path-desc{
    font-size:13px; color:rgba(247,247,244,.5);
    line-height:1.65;
  }

  /* ---------- INSTRUCTORS ---------- */
  .instructors-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .instructor-card{
    background:var(--paper-white); border:1px solid var(--line); border-radius:2px;
    padding:28px 24px; text-align:left;
  }
  .instructor-avatar{
    width:52px; height:52px; border-radius:50%; background:var(--ink);
    color:var(--amber); display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:600; font-size:17px; margin-bottom:16px;
  }
  .instructor-quote{font-size:14.5px; color:var(--steel); margin-bottom:18px; font-style:normal;}
  .instructor-name{font-weight:700; font-size:15px; color:var(--ink);}
  .instructor-role{font-size:12.5px; color:var(--steel); font-family:var(--font-mono); margin-top:2px;}

  /* ---------- CTA ---------- */
  .cta{
    background:linear-gradient(135deg, var(--alarm) 0%, var(--alarm-dark) 100%);
    color:#fff; text-align:center; padding:88px 0 76px;
    position:relative; overflow:hidden;
  }
  .cta::before{
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.05) 0 26px,
      transparent 26px 52px
    );
    pointer-events:none;
  }
  .cta::after{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,.16), transparent 42%),
      radial-gradient(circle at 88% 85%, rgba(240,192,32,.18), transparent 40%);
  }
  .cta .container{position:relative; z-index:1;}
  .cta .eyebrow{
    border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.08);
  }
  .cta h2{font-size:clamp(26px,3.4vw,38px); font-weight:900; margin-bottom:16px;}
  .cta p{font-size:16px; opacity:.92; max-width:520px; margin:0 auto 32px;}
  .cta .btn-outline-dark{
    border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.06);
    font-family:var(--font-mono); font-size:16px; letter-spacing:.02em; padding:14px 28px;
  }
  .cta .btn-outline-dark:hover{background:#fff; color:var(--alarm-dark); border-color:#fff;}
  .cta-trust{
    display:flex; justify-content:center; gap:34px; flex-wrap:wrap;
    margin-top:36px; padding-top:26px; border-top:1px solid rgba(255,255,255,.22);
    font-family:var(--font-mono); font-size:13px; color:rgba(255,255,255,.85); letter-spacing:.02em;
  }
  .cta-trust li{display:flex; align-items:center; gap:8px;}
  .cta-trust svg{width:15px; height:15px; stroke:var(--amber); flex-shrink:0;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink);
    color:rgba(255,253,246,.62); padding:0 0 20px; font-size:13px;
    position:relative;
  }
  .footer-top{padding:48px 0 0;}
  .footer-grid{
    display:grid; grid-template-columns:1.4fr .85fr .85fr 1.3fr; gap:32px;
    margin-bottom:32px; overflow:visible;
  }
  .footer-col h4{
    color:var(--off-white); font-size:13px; margin-bottom:16px; font-weight:700;
    font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
    display:flex; align-items:center; gap:8px; justify-content:flex-start;
  }
  .footer-col h4::before{
    content:""; width:18px; height:2px; background:var(--amber); display:inline-block;
  }
  .footer-col p{color:rgba(255,253,246,.55); line-height:1.7; max-width:340px;}
  .footer-address li{
    font-size:12.5px; line-height:1.7;
  }
  .footer-col ul li{margin-bottom:8px;}
  .footer-col a{
    color:rgba(255,253,246,.62);
    transition:color .2s ease, padding-left .2s ease;
    display:inline-block;
    position:relative;
  }
  .footer-col a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
    background:var(--amber); transition:width .25s ease;
  }
  .footer-col a:hover{color:var(--amber);}
  .footer-col a:hover::after{width:100%;}
  .footer-brand-name{
    font-family:var(--font-display); font-size:28px; font-weight:600;
    letter-spacing:.02em; line-height:1.4; color:var(--off-white);
    margin-bottom:12px;
  }
  .footer-brand-name span{color:var(--alarm);}
  .footer-brand-name span.amber{color:var(--amber);}
  .footer-brand-desc{
    font-size:14px; line-height:1.7; color:rgba(255,253,246,.5);
    max-width:320px;
  }
  .footer-auth-btns{display:flex; gap:10px; margin-top:18px;}
  .footer-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:9px 22px; font-size:13.5px; font-weight:600;
    border-radius:2px; cursor:pointer; text-decoration:none;
    font-family:var(--font-bn); transition:all .15s ease;
  }
  .footer-btn-login{
    color:var(--off-white); border:1.5px solid rgba(255,253,246,.3);
    background:transparent;
  }
  .footer-btn-login:hover{border-color:var(--amber); color:var(--amber);}
  .footer-btn-register{
    background:var(--amber); color:var(--ink) !important; border:1.5px solid var(--amber);
  }
  .footer-btn-register:hover{background:#e0b01a; border-color:#e0b01a;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.1); padding-top:20px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-size:12px; color:rgba(255,253,246,.4);
  }
  .footer-bottom a{color:rgba(255,253,246,.5); transition:color .2s ease;}
  .footer-bottom a:hover{color:var(--amber);}
  
  /* ---------- NOTICE BOARD ---------- */
  .notice-board-list{
    display:flex; flex-direction:column;
  }
  .notice-list-item{
    display:flex; align-items:flex-start; gap:18px;
    padding:18px 16px; margin:0 -16px; border-bottom:1px solid var(--line);
    border-left:3px solid transparent; border-radius:2px;
    text-decoration:none; color:inherit;
    transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .notice-list-item:last-child{border-bottom:none;}
  .notice-list-item:hover{
    background:var(--paper-white); border-left-color:var(--green);
    box-shadow:0 10px 26px -14px rgba(18,53,36,.28);
  }
  .notice-list-badge{
    width:42px; height:42px; flex-shrink:0; border-radius:50%;
    background:rgba(46,139,79,.12); color:var(--green);
    display:flex; align-items:center; justify-content:center;
    transition:transform .18s ease, background .18s ease;
  }
  .notice-list-item:hover .notice-list-badge{transform:scale(1.12); background:rgba(46,139,79,.2);}
  .notice-list-item:nth-child(2) .notice-list-badge{background:rgba(240,192,32,.16); color:#8A6A00;}
  .notice-list-item:nth-child(3) .notice-list-badge{background:rgba(215,38,61,.1); color:var(--alarm-dark);}
  .notice-list-badge svg{width:20px; height:20px;}
  .notice-list-body{flex:1; min-width:0;}
  .notice-list-meta{
    display:flex; align-items:center; gap:10px; margin-bottom:6px;
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--steel);
  }
  .notice-list-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--amber);}
  .notice-list-title{
    font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.45;
    transition:color .15s ease;
  }
  .notice-list-item:hover .notice-list-title{color:var(--green);}
  .notice-list-arrow{
    flex-shrink:0; margin-top:6px; color:var(--steel);
    transition:transform .15s ease, color .15s ease;
  }
  .notice-list-arrow svg{width:18px; height:18px;}
  .notice-list-item:hover .notice-list-arrow{transform:translateX(3px); color:var(--green);}
  .notice-card-empty{
    text-align:center; padding:50px 20px; color:var(--steel);
    border:1px dashed var(--line); border-radius:2px;
  }
  .notice-card-empty svg{margin:0 auto 12px; display:block; color:var(--steel);}
  .notice-card-empty p{margin:0; font-size:14.5px;}
  .notice-board-more{text-align:center; margin-top:36px;}
  .btn-notice-green{
    background:var(--green); color:#fff; border:none;
    font-family:var(--font-mono); font-size:14px; font-weight:600; letter-spacing:.02em;
    padding:13px 30px; border-radius:2px;
    transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .btn-notice-green:hover{background:var(--green-dark); color:#fff; box-shadow:0 10px 22px -12px rgba(46,139,79,.5);}

  /* ---------- reveal animation ---------- */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    .reveal{transition:none; opacity:1; transform:none;}
    .pulse-dot, .live .dot, .panel-head .live-dot{animation:none;}
    .hazard-bar::before, .ember-particle, h1.hero-title .flame, .gauge-fg{animation:none !important;}
  }
  /* ---------- scroll-motion (additive — never touches .reveal) ---------- */
  .slide-left,
  .slide-right,
  .scale-in,
  .fade-up {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .slide-left  { transform: translateX(-60px); }
  .slide-right { transform: translateX(60px); }
  .scale-in    { transform: scale(.88); }
  .fade-up     { transform: translateY(40px); }

  .slide-left.in,
  .slide-right.in,
  .scale-in.in,
  .fade-up.in {
    opacity: 1;
    transform: translate(0) scale(1);
  }

  /* stagger delays for children — use with .stagger on parent */
  .stagger > *:nth-child(1) { transition-delay: 0s; }
  .stagger > *:nth-child(2) { transition-delay: .08s; }
  .stagger > *:nth-child(3) { transition-delay: .16s; }
  .stagger > *:nth-child(4) { transition-delay: .24s; }
  .stagger > *:nth-child(5) { transition-delay: .32s; }
  .stagger > *:nth-child(6) { transition-delay: .4s; }
  .stagger > *:nth-child(7) { transition-delay: .48s; }
  .stagger > *:nth-child(8) { transition-delay: .56s; }

  /* parallax shift — JS sets --shift via inline style */
  .parallax {
    will-change: transform;
    transition: transform .1s linear;
  }

  /* blur-in: frosted glass reveal */
  .blur-in {
    opacity: 0;
    filter: blur(12px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), filter .7s cubic-bezier(.22,1,.36,1);
  }
  .blur-in.in { opacity: 1; filter: blur(0); }

  /* skew-in: diagonal slide */
  .skew-in {
    opacity: 0;
    transform: skewY(4deg) translateY(30px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .skew-in.in { opacity: 1; transform: skewY(0) translateY(0); }

  /* rotate-in: spin entrance */
  .rotate-in {
    opacity: 0;
    transform: rotate(-6deg) scale(.92);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .rotate-in.in { opacity: 1; transform: rotate(0) scale(1); }

  /* clip-up: text clip reveal from bottom */
  .clip-up {
    clip-path: inset(100% 0 0 0);
    transition: clip-path .7s cubic-bezier(.22,1,.36,1), opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .clip-up.in { clip-path: inset(0 0 0 0); }

  /* line-grow: horizontal line expands from center */
  .line-grow {
    transform: scaleX(0);
    transition: transform .6s cubic-bezier(.22,1,.36,1);
    transform-origin: center;
  }
  .line-grow.in { transform: scaleX(1); }

  @media (prefers-reduced-motion: reduce) {
    .slide-left, .slide-right, .scale-in, .fade-up, .parallax,
    .blur-in, .skew-in, .rotate-in, .clip-up, .line-grow {
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      clip-path: none !important;
    }
  }

  /* ---------- AUTH BUTTONS ---------- */
  .auth-btn{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-bn); font-size:13.5px; font-weight:600;
    padding:9px 16px; border-radius:2px; cursor:pointer; white-space:nowrap;
    text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .auth-btn.login{
    background:transparent; color:var(--off-white); border:1.5px solid rgba(247,247,244,.4);
  }
  .auth-btn.login:hover{border-color:var(--amber); color:var(--amber);}
  .auth-btn.register{
    background:var(--amber); color:var(--ink); border:1.5px solid var(--amber);
  }
  .auth-btn.register:hover{background:#d8a800; border-color:#d8a800;}

  /* ---------- AUTH MODAL ---------- */
  .auth-overlay{
    position:fixed; inset:0; background:rgba(18,53,36,.72);
    display:none; align-items:center; justify-content:center;
    padding:20px; z-index:200;
  }
  .auth-overlay.open{display:flex;}
  .auth-modal{
    background:var(--paper-white); width:100%; max-width:420px;
    border-radius:4px; position:relative; overflow:hidden;
    box-shadow:0 30px 60px rgba(18,53,36,.35);
    animation:modalIn .22s ease;
  }
  @keyframes modalIn{
    from{opacity:0; transform:translateY(12px) scale(.98);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }
  .auth-modal .tricolor-bar{height:5px;}
  .auth-close{
    position:absolute; top:14px; right:14px; background:none; border:0;
    font-size:22px; line-height:1; color:var(--steel); cursor:pointer; z-index:2;
  }
  .auth-close:hover{color:var(--alarm);}
  .auth-tabs{display:flex; border-bottom:1px solid var(--line);}
  .auth-tab{
    flex:1; text-align:center; padding:18px 10px 14px; font-family:var(--font-bn);
    font-size:15px; font-weight:600; color:var(--steel); cursor:pointer;
    background:none; border:0; border-bottom:2.5px solid transparent;
  }
  .auth-tab.active{color:var(--ink); border-bottom-color:var(--alarm);}
  .auth-body{padding:28px 28px 30px;}
  .auth-form{display:none; flex-direction:column; gap:14px;}
  .auth-form.active{display:flex;}
  .auth-field label{
    display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    margin-bottom:6px; font-family:var(--font-bn);
  }
  .auth-field input, .auth-field select{
    width:100%; padding:11px 13px; font-family:var(--font-bn); font-size:14.5px;
    border:1.5px solid var(--line); border-radius:2px; background:#fff; color:var(--ink);
    transition:border-color .15s ease;
  }
  .auth-field input:focus, .auth-field select:focus{border-color:var(--green); outline:none;}
  .auth-row{display:flex; justify-content:space-between; align-items:center; font-size:12.5px;}
  .auth-row a{color:var(--green-dark); font-weight:600;}
  .auth-row a:hover{text-decoration:underline;}
  .auth-check{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--steel);}
  .auth-check input{width:auto;}
  .auth-submit{
    width:100%; justify-content:center; margin-top:4px; border:none;
  }
  .auth-switch{
    text-align:center; font-size:13px; color:var(--steel); margin-top:16px;
  }
  .auth-switch button{
    background:none; border:0; color:var(--alarm); font-weight:700; cursor:pointer;
    font-family:var(--font-bn); font-size:13px;
  }
  .auth-switch button:hover{text-decoration:underline;}
  .auth-note{
    font-size:11.5px; color:var(--steel); text-align:center; margin-top:14px;
    opacity:.75;
  }

  /* ---------- DASHBOARD ---------- */
  .dashboard{
    background:var(--paper); padding:56px 0 80px; min-height:100vh;
  }
  .dash-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:20px; flex-wrap:wrap; margin-bottom:32px;
  }
  .dash-kicker{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
    color:var(--alarm-dark); text-transform:uppercase; margin-bottom:8px; font-weight:600;
  }
  .dash-welcome{
    font-family:var(--font-bn); font-weight:800; font-size:clamp(24px,3vw,34px);
    color:var(--ink); margin-bottom:8px;
  }
  .dash-sub{color:var(--steel); font-size:14.5px; max-width:480px;}
  .dash-stats{display:flex; gap:16px; margin-bottom:40px; flex-wrap:wrap;}
  .dash-stat{
    background:var(--paper-white); border:1.5px solid var(--line); border-radius:4px;
    padding:16px 26px; min-width:150px;
  }
  .dash-stat-num{
    font-family:var(--font-display); font-size:36px; font-weight:700; color:var(--alarm);
    line-height:1;
  }
  .dash-stat-label{font-size:12.5px; color:var(--steel); margin-top:6px;}
  .dash-section-title{
    font-family:var(--font-bn); font-weight:700; font-size:19px; color:var(--ink);
    margin-bottom:18px;
  }
  .dash-courses-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  .dash-course-card{
    background:var(--paper-white); border:1.5px solid var(--line); border-top:4px solid var(--green);
    border-radius:4px; padding:22px; display:flex; flex-direction:column; gap:10px;
  }
  .dash-course-card.enrolled{border-top-color:var(--alarm);}
  .dash-course-code{
    font-family:var(--font-mono); font-size:11.5px; color:var(--steel); letter-spacing:.04em;
  }
  .dash-course-title{font-family:var(--font-bn); font-weight:700; font-size:16.5px; color:var(--ink);}
  .dash-course-duration{font-size:12.5px; color:var(--steel);}
  .dash-enroll-btn{
    margin-top:8px; justify-content:center; font-size:13.5px; padding:10px 16px;
  }
  .dash-enroll-btn.enrolled{
    background:transparent; border:1.5px solid var(--green); color:var(--green-dark); cursor:default;
  }
  .dash-enroll-btn.enrolled:hover{transform:none;}
  @media (max-width: 900px){
    .dash-courses-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 600px){
    .dash-courses-grid{grid-template-columns:1fr;}
    .dash-head{align-items:flex-start;}
  }

  /* ---------- TICKER BAR (Notice Scroller) ---------- */
  .ticker-bar{
    display:flex;
    align-items:center;
    background:#0f1f19;
    border-bottom:1px solid rgba(255,255,255,.06);
    height:44px;
    position:relative;
    z-index:20;
  }
  .ticker-label{
    display:flex;
    align-items:center;
    gap:7px;
    background:var(--alarm);
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:0 18px;
    height:100%;
    flex-shrink:0;
    position:relative;
    z-index:2;
  }
  .ticker-label::after{
    content:'';
    position:absolute;
    right:-10px;
    top:0;
    border-style:solid;
    border-width:22px 0 22px 10px;
    border-color:transparent transparent transparent var(--alarm);
  }
  .ticker-label svg{flex-shrink:0;}
  .ticker-track{
    flex:1;
    overflow:hidden;
    padding-left:22px;
    mask-image:linear-gradient(to right,#000 96%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 96%,transparent 100%);
  }
  .ticker-inner{
    display:flex;
    width:max-content;
    animation:tickerScroll 40s linear infinite;
  }
  .ticker-inner:hover{animation-play-state:paused;}
  @keyframes tickerScroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }
  .ticker-item{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
    padding-right:48px;
    position:relative;
    text-decoration:none;
    transition:opacity .15s;
  }

  .ticker-item:last-child::after{display:none;}
  .ticker-dot{
    width:7px;height:7px;
    border-radius:50%;
    flex-shrink:0;
    /* box-shadow:0 0 6px rgba(255,255,255,.15); */
  }
  .ticker-text{
    font-size:16px;
    color:rgba(255,253,246,.85);
    font-weight:400;
    line-height:1.3;
  }

  /* ---------- SLIDER ---------- */
  .slider-frame{
    background:var(--paper-white);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(18,53,36,.08);
  }
  .slider-scroll{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .slider-scroll::-webkit-scrollbar{display:none;}
  .slider-cell{
    flex:0 0 100%;
    scroll-snap-align:start;
    position:relative;
    aspect-ratio:16/8;
    background:var(--ink-soft);
    overflow:hidden;
  }
  .slider-cell img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .6s ease;
  }
  .slider-caption{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:16px 22px;
    background:linear-gradient(to top, rgba(18,53,36,.78), transparent);
    color:#FFFDF6;
    font-size:15px;
    font-weight:600;
  }
  .slider-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:14px 20px;
    border-top:1px solid var(--line);
    background:rgba(18,53,36,.03);
  }
  .slider-arrow{
    background:var(--ink);
    color:#FFFDF6;
    border:none;
    width:38px;height:38px;
    border-radius:50%;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    transition:background .2s, transform .2s;
  }
  .slider-arrow:hover{background:var(--alarm); transform:scale(1.08);}
  .slider-dots{display:flex;gap:8px;}
  .s-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--line);
    cursor:pointer;
    transition:background .2s, width .2s;
  }
  .s-dot.active{background:var(--ink);width:22px;border-radius:4px;}

  /* ---------- GALLERY ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:300px;
    grid-auto-flow:dense;
    gap:14px;
  }
  .gallery-more{
    display:flex; justify-content:center; margin-top:32px;
  }
  .gallery-frame{
    border-radius:16px;
    overflow:hidden;
    background:var(--ink-soft);
    position:relative;
    cursor:pointer;
    border:none;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  }
  .gallery-frame:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 24px 48px -12px rgba(18,53,36,.35);
  }
  .gallery-frame img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease;
    display:block;
  }
  .gallery-frame:hover img{
    transform:scale(1.08);
  }

  /* alternating big/small */
  .gallery-frame:nth-child(4n+1){
    grid-column:span 2;
  }
  .gallery-frame:nth-child(4n){
    grid-column:span 2;
  }

  /* glass overlay */
  .gallery-frame::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(18,53,36,0) 40%, rgba(18,53,36,.7));
    opacity:0;
    transition:opacity .4s ease;
    z-index:1;
  }
  .gallery-frame:hover::before{opacity:1;}

  /* amber accent line at bottom */
  .gallery-frame::after{
    content:"";
    position:absolute;
    bottom:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--amber), var(--ember));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
    z-index:3;
  }
  .gallery-frame:hover::after{transform:scaleX(1);}

  /* label */
  .gallery-label{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:16px 18px;
    color:#FFFDF6;
    font-size:13.5px;
    font-weight:600;
    z-index:2;
    transform:translateY(12px);
    opacity:0;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  }
  .gallery-frame:hover .gallery-label{
    transform:translateY(0);
    opacity:1;
  }

  /* ---------- DIRECTORS ---------- */
  .dir-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  .dir-card{
    display:flex;
    gap:20px;
    background:var(--paper-white);
    border:1px solid var(--line);
    border-radius:2px;
    padding:28px 24px;
    box-shadow:0 18px 40px rgba(18,53,36,.06);
    align-items:flex-start;
  }
  .dir-avatar{
    width:70px;height:70px;
    border-radius:50%;
    background:var(--ink);
    color:var(--amber);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:20px;
    flex-shrink:0;
  }
  .dir-body{flex:1;min-width:0;}
  .dir-avatar-photo-lg,
  .dir-avatar-photo-sm{
    background:transparent;
    overflow:hidden;
    border-radius:12px;
    width:160px; height:180px;
    flex-shrink:0;
  }
  .dir-avatar-photo-lg img,
  .dir-avatar-photo-sm img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .dir-name{
    font-weight:700;
    font-size:16.5px;
    color:var(--ink);
    line-height:1.2;
  }
  .dir-role{
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--steel);
    margin-top:4px;
  }
  .dir-note{
    font-size:14px;
    color:var(--ink);
    margin-top:12px;
    line-height:1.7;
    font-style:italic;
  }
  .dir-note::before{
    content:"\201C";
    color:var(--green);
    font-size:22px;
    font-weight:700;
    line-height:0;
    vertical-align:middle;
    margin-right:3px;
  }
  .dir-link{
    display:inline-block;
    margin-top:12px;
    font-size:13px;
    font-weight:600;
    color:var(--alarm);
    text-decoration:none;
    transition:color .15s;
  }
  .dir-link:hover{color:var(--alarm-dark);}
  @media (max-width:719px){
  .dir-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:46px;
    margin-top:16px;
    padding:0 16px;
    font-size:14.5px;
    font-weight:600;
    color:var(--alarm);
    background:transparent;
    border:1.5px solid var(--alarm);
    border-radius:2px;
    text-align:center;
  }
  .dir-link:active{
    background:var(--alarm);
    color:#fff;
  }
}

  /* ---------- FAQ ---------- */
  .faq-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:760px;
    margin:0 auto;
  }
  .faq-cell{
    border:1px solid var(--line);
    border-radius:2px;
    overflow:hidden;
    background:var(--paper-white);
  }
  .faq-q{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:16px 22px;
    cursor:pointer;
    font-weight:600;
    font-size:15px;
    user-select:none;
    transition:background .15s;
  }
  .faq-q:hover{background:rgba(18,53,36,.03);}
  .faq-icon{
    font-family:var(--font-mono);
    font-size:20px;
    color:var(--green);
    flex-shrink:0;
    transition:transform .2s;
    font-weight:700;
  }
  .faq-cell.open .faq-q .faq-icon{transform:rotate(45deg);}
  .faq-a{
    padding:0 22px 16px;
    font-size:14px;
    color:var(--steel);
    line-height:1.7;
    display:none;
  }
  .faq-cell.open .faq-a{display:block;}

  /* ---------- RESULT PAGE ---------- */
  .result-section{
    padding-top:40px; padding-bottom:60px;
    background:linear-gradient(180deg, #f7f0d1 0%, #fffdf6 48%, #edf5ec 100%);
  }
  .result-back{margin-bottom:24px;}
  .back-link{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--steel); font-size:14px; text-decoration:none; transition:color .15s ease;
  }
  .back-link:hover{color:var(--alarm);}
  .result-card{
    background:var(--paper-white); border:1px solid var(--line); border-radius:2px;
    padding:32px 36px; box-shadow:0 18px 40px rgba(18,53,36,.06);
  }
  .result-title{
    font-size:26px; font-weight:700; color:var(--ink); line-height:1.3;
    margin:0 0 20px; padding-bottom:12px; border-bottom:2px solid var(--alarm);
  }
  .result-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .result-field{
    width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:4px;
    font-size:14px; font-family:inherit; background:#fff; color:var(--ink);
  }
  .result-field:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,139,79,.12);}
  .result-submit{
    padding:10px; background:var(--alarm); color:#fff; border:none; border-radius:4px;
    font-size:15px; font-weight:600; cursor:pointer; transition:background .15s ease;
    font-family:var(--font-bn);
  }
  .result-submit:hover{background:var(--alarm-dark);}
  .result-alert{
    padding:12px 16px; background:#f8d7da; color:#721c24;
    border-radius:4px; margin-bottom:12px; font-size:14px;
  }
  .result-alert ul{margin:0; padding-left:18px;}

  /* result results table */
  .result-table-wrap{margin-top:24px; overflow-x:auto; border:1px solid var(--line); border-radius:4px; background:#fff;}
  .result-count{font-size:18px; font-weight:700; color:var(--ink); margin:16px 14px 14px;}
  .result-table{width:100%; border-collapse:collapse; font-size:14px;}
  .result-table thead th{
    padding:12px 14px; text-align:left; background:var(--ink); color:#fff;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
    text-transform:uppercase; white-space:nowrap;
  }
  .result-table tbody td{padding:10px 14px; border-bottom:1px solid var(--line); color:var(--steel);}
  .result-table tbody tr:last-child td{border-bottom:none;}
  .result-table tbody tr:nth-child(even){background:#f8f9fa;}
  .result-photo{width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--line); display:block;}
  .result-avatar{
    width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--amber);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:700; font-size:14px;
  }
  .result-idx,.result-roll{font-family:var(--font-mono); font-size:13px; color:var(--steel); font-weight:600;}
  .result-name{font-weight:600; color:var(--ink);}
  .result-badge{
    display:inline-block; padding:3px 8px; border-radius:999px; font-size:11px;
    font-family:var(--font-mono); font-weight:600;
    background:rgba(46,139,79,.12); color:var(--green-dark);
  }
  .result-empty{text-align:center; padding:40px; color:var(--steel); font-size:14px; margin-top:20px;}

  /* ---------- DIRECTOR GENERAL MESSAGE ---------- */
  .dg-section{padding-top:40px; padding-bottom:60px;}
  .dg-container{max-width:860px;}
  .dg-card{padding:36px 40px;}
  .dg-head{
    display:flex; gap:24px; align-items:flex-start;
    margin-bottom:28px; padding-bottom:24px;
    border-bottom:2px solid var(--alarm);
  }
  .dg-photo{
    width:180px; height:210px; flex-shrink:0;
    border-radius:4px; object-fit:cover;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
  }
  .dg-id{flex:1; min-width:0;}
  .dg-name{font-size:24px; font-weight:700; color:var(--ink); line-height:1.3; margin:0 0 6px;}
  .dg-degree{font-size:15px; color:var(--steel); margin-bottom:4px; font-weight:600;}
  .dg-rank{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:2px;}
  .dg-org{font-size:13px; color:var(--steel);}
  .dg-message{font-size:15px; line-height:1.8; color:var(--ink); overflow-wrap:break-word;}
  .dg-message img{max-width:100%; height:auto;}

  /* footer auth actions (guests) */
  .footer-auth{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

  /* ---------- RESPONSIVE ---------- */

  /* ===== Tablet & below (≤1140px) — collapse nav into drawer ===== */
  @media (max-width: 1140px){
    header.nav .container{padding-top:12px; padding-bottom:12px; gap:12px;}
    /* full title wraps to two lines instead of truncating */
    .brand-name{
      font-size:17px; line-height:1.3; white-space:normal;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    }
    .brand-sub{font-size:10.5px;}

    nav.links{
      position:absolute; top:100%; left:0; right:0;
      background:var(--ink);
      flex-direction:column; align-items:stretch;
      padding:8px 0 14px; margin:0;
      gap:2px; border-top:1px solid rgba(255,255,255,.08);
      box-shadow:0 18px 30px rgba(0,0,0,.35);
      transform:translateY(-8px); opacity:0; visibility:hidden;
      transition:transform .22s ease, opacity .22s ease, visibility .22s;
      z-index:60;
    }
    nav.links.open{transform:translateY(0); opacity:1; visibility:visible;}
    nav.links a{
      padding:12px 24px; font-size:15.5px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    nav.links a:last-child{border-bottom:none;}
    .nav-toggle{display:flex; align-items:center; justify-content:center;}

    /* auth moves into the drawer on tablet/mobile */
    .nav-actions .auth-btn{display:none;}
    .drawer-auth-group{
      display:flex; gap:10px;
      margin:12px 20px 4px; padding-top:14px;
      border-top:1px solid rgba(255,255,255,.1);
    }
    .drawer-auth{
      flex:1; display:inline-flex; align-items:center; justify-content:center;
      padding:11px 14px; border-radius:2px;
      font-family:var(--font-bn); font-size:15px; font-weight:600; text-decoration:none;
    }
    .drawer-auth.login{color:var(--off-white); border:1.5px solid rgba(255,253,246,.35);}
    .drawer-auth.register{background:var(--amber); color:var(--ink); border:1.5px solid var(--amber);}

    .hero .container{gap:36px; padding:56px 24px 64px;}
  }

  @media (max-width: 980px){
    .hero .container{grid-template-columns:1fr; padding:56px 24px 72px; gap:40px;}
    h1.hero-title{font-size:38px;}
    .stats .container{grid-template-columns:repeat(2,1fr);}
    .stat:nth-child(2){border-left:none;}
    .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line);}
    .courses-grid{grid-template-columns:repeat(2,1fr);}
    .path-list{grid-template-columns:repeat(2,1fr); gap:14px;}
    .path-step{border-right:none !important;}
    .instructors-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .section{padding:64px 0;}
    .section-head{margin-bottom:38px;}
    .gallery-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
    .dir-grid{grid-template-columns:1fr;}
  }

  /* ===== Mobile (≤680px) ===== */
  @media (max-width: 680px){
    /* topbar */
    .topbar .container{
      position:relative;
      flex-direction:column; justify-content:center; align-items:center;
      gap:4px; padding-top:6px; padding-bottom:6px; text-align:center;
    }
    .topbar-right{flex-direction:column; gap:4px; align-items:center;}
    .topbar-hotlines{display:flex; align-items:center; flex-wrap:wrap; justify-content:center; row-gap:2px;}
    .topbar-hotlines .hotline-link{font-size:11px; padding:3px 6px;}
    .topbar-sep{margin:0 4px;}
    .hotline-label{display:none;}   /* number alone on phones */
    .topbar-batch{font-size:11px;}
    .lang-btn{position:absolute; right:10px; top:50%; transform:translateY(-50%); padding:4px 8px;}

    /* hero */
    .hero .container{padding:44px 18px 52px;}
    .hero-desc{font-size:15px; margin-bottom:26px;}
    .hero-ctas{gap:10px; margin-bottom:28px;}
    .hero-foot-notes{gap:14px;}
    .panel{padding:22px 18px 20px; border-radius:12px;}
    .mini-card{display:none}
    /* .gauge-row{flex-direction:column; align-items:flex-start; gap:18px;} */
    /* .gauge-wrap{width:110px; height:110px;} */
    .gauge-copy .big{font-size:32px;}
    .panel-stat-strip b{font-size:22px;}

    /* stats */
    .stat{border-left:none !important; border-bottom:1px solid var(--line); padding:22px 14px;}
    .stat:nth-last-child(-n+2){border-bottom:none;}
    .stat-num{font-size:29px;}
    .stat-label{font-size:12px;}

    /* sections */
    .section{padding:48px 0;}
    .section-head{margin-bottom:28px;}
    .container{padding:0 18px;}

    /* courses */
    .courses-grid{grid-template-columns:1fr; gap:16px;}
    .course-card{padding:22px 18px 20px;}
    .course-image{margin:-22px -18px 14px;}
    .course-title{font-size:17.5px;}
    .course-foot a{margin-left:0;}

    /* pathway */
    .path-list{grid-template-columns:1fr; gap:12px;}
    .path-step{padding:22px 18px;}
    .path-title{font-size:16px;}

    /* ticker */
    .ticker-bar{height:auto; min-height:40px;}
    .ticker-label{padding:0 12px; font-size:11px;}
    .ticker-label::after{display:none;}
    .ticker-text{font-size:13px;}
    .ticker-item{padding-right:30px;}

    /* notice board */
    .notice-board-container{padding:20px 16px !important;}
    .notice-list-item{margin:0 -8px; padding:14px 8px; gap:12px;}
    .notice-list-badge{width:36px;height:36px;}
    .notice-list-badge svg{width:17px;height:17px;}
    .notice-list-title{font-size:15px;}
    .notice-list-arrow svg{width:15px;height:15px;}

    /* faq */
    .faq-q{padding:14px 14px; font-size:14px;}
    .faq-a{padding:0 14px 14px; font-size:13.5px;}

    /* footer */
    .footer-grid{grid-template-columns:1fr 1fr; gap:24px;}
    .footer-col:first-child{grid-column:1 / -1;}
    .footer-col:nth-child(2),.footer-col:nth-child(3){grid-column:span 1;}
    .footer-col:last-child{grid-column:1 / -1;}
    .footer-brand-name{font-size:22px; white-space:normal; justify-content:center;}
    .footer-brand-name::before{display:none;}
    .footer-col h4{justify-content:flex-start;}
    .footer-col h4::before{display:none;}
    .footer-col p{max-width:100%;}
    .footer-top{padding-top:26px;}
    .footer-bottom{flex-direction:column; align-items:center; gap:4px;}

    /* result page */
    .result-section{padding-top:28px; padding-bottom:44px;}
    .result-card{padding:22px 16px;}
    .result-title{font-size:21px;}
    .result-grid{grid-template-columns:1fr;}
    .result-submit{padding:12px;}

    /* director general message */
    .dg-section{padding-top:28px; padding-bottom:44px;}
    .dg-card{padding:22px 16px;}
    .dg-head{
      flex-direction:column; align-items:center; text-align:center;
      gap:18px; margin-bottom:22px; padding-bottom:20px;
    }
    .dg-photo{width:150px; height:175px;}
    .dg-name{font-size:21px;}

    /* results table -> stacked cards */
    .result-count{margin:14px 12px 10px; font-size:16px;}
    .result-table thead{display:none;}
    .result-table, .result-table tbody,
    .result-table tr, .result-table td{display:block; width:100%;}
    .result-table tr{border-bottom:1px solid var(--line); padding:8px 12px;}
    .result-table tr:last-child{border-bottom:none;}
    .result-table tbody td{
      display:flex; justify-content:space-between; align-items:center; gap:12px;
      padding:7px 0; border:none; text-align:right;
    }
    .result-table tbody td::before{
      content:attr(data-label);
      font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
      text-transform:uppercase; color:var(--steel); text-align:left; flex-shrink:0;
    }

    /* gallery / directors / slider */
    .gallery-grid{grid-template-columns:1fr;}
    .slider-cell{aspect-ratio:16/9;}
    .dir-card{
      flex-direction:column;
      align-items:center;
      gap:16px;
      padding:22px 18px;
      text-align:center;
    }
    .dir-avatar-photo-lg,
    .dir-avatar-photo-sm{width:160px;height:180px;}
    .dir-note{font-size:13.5px;}

    /* auth buttons */
    .auth-btn{padding:8px 12px; font-size:12.5px;}
  }

  /* ===== Small mobile (≤480px) ===== */
  @media (max-width: 480px){
    .stats .container{grid-template-columns:1fr 1fr;}
    .hero-ctas .btn{flex:1 1 100%; justify-content:center;}
    .slider-cell{aspect-ratio:4/3;}
    .gallery-grid{grid-template-columns:1fr;}
    .dir-card{padding:20px 16px;}
    .dir-avatar-photo-lg,
    .dir-avatar-photo-sm{width:140px;height:160px;}
  }

  /* ===== Tiny phones (≤380px) ===== */
  @media (max-width: 380px){
    .brand-sub{display:none;}
    .brand-name{font-size:15.5px;}
    .auth-btn{padding:6px 9px; font-size:11.5px;}   /* keep both buttons visible */
    .nav-actions{gap:7px;}
    .stat-num{font-size:25px;}
    .notice-list-meta{flex-wrap:wrap; row-gap:2px;}

    /* result page */
    .result-card{padding:18px 12px;}
    .result-title{font-size:19px; margin-bottom:16px;}
    .result-table tr{padding:6px 10px;}
    .result-email{word-break:break-all;}

    /* director general message */
    .dg-card{padding:18px 12px;}
    .dg-photo{width:120px; height:140px;}
    .dg-name{font-size:19px;}
    .dg-message{font-size:14.5px;}
  }