/* ============================================================
   THE ACADEMIC NEEDS — stylesheet.css
   Fully Responsive · Mobile-First · Production Grade
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,600;0,700;1,500&display=swap');

:root {
  --primary:   #005f73;
  --pri-dark:  #003d4a;
  --pri-light: #d4eef2;
  --accent:    #ee6c4d;
  --acc-dark:  #c8441e;
  --gold:      #e0a800;
  --green:     #2a9d4e;
  --ink:       #111827;
  --ink2:      #374151;
  --muted:     #6b7280;
  --border:    #e5e7eb;
  --bg:        #f9fafb;
  --white:     #ffffff;
  --sh-sm:     0 2px 10px rgba(0,0,0,.08);
  --sh-md:     0 6px 24px rgba(0,0,0,.11);
  --sh-lg:     0 16px 48px rgba(0,0,0,.14);
  --r:         12px;
  --r-lg:      18px;
  --ease:      cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Sora',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.6}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul{list-style:none}

/* ── TOP BAR ── */
.topbar{background:var(--pri-dark);color:rgba(255,255,255,.7);font-size:12px;padding:7px 40px;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%}
.topbar-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.topbar-right{display:flex;align-items:center;gap:14px}
.topbar a{color:rgba(255,255,255,.7);transition:color .2s}.topbar a:hover{color:#fff}
.tb-div{width:1px;height:12px;background:rgba(255,255,255,.2)}

/* ── HEADER ── */
.header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:300;width:100%}
.header-main{padding:0 40px;height:72px;width:100%;display:flex;align-items:center;gap:16px;}

.logo-wrap{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:44px;height:44px;flex-shrink:0;background:linear-gradient(135deg,var(--primary),var(--pri-dark));border-radius:10px 3px 3px 10px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:2px 3px 10px rgba(0,95,115,.3);position:relative}
.logo-icon::after{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.3);border-radius:2px}
.logo-text{line-height:1.1}
.logo-text .l1{font-size:11px;font-weight:300;color:var(--muted)}
.logo-text .l2{font-family:'Lora',serif;font-size:19px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:baseline}
.logo-text .l2 .a1{color:var(--primary)}.logo-text .l2 .a2{color:var(--accent)}
.logo-text .l2 .a3{font-family:'Sora',sans-serif;font-size:11.5px;color:var(--muted);margin-left:1px;font-weight:500}
.logo-text .l3{font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}

.hdr-search{flex:1 1 0;min-width:0;display:flex;align-items:center;background:var(--bg);border:1.5px solid var(--border);border-radius:100px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.hdr-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,95,115,.1)}
.hdr-search select{border:none;background:transparent;height:44px;outline:none;font-family:'Sora',sans-serif;font-size:12.5px;color:var(--ink2);padding:0 10px 0 14px;border-right:1px solid var(--border);min-width:95px;cursor:pointer}
.hdr-search input{flex:1 1 0;min-width:0;border:none;background:transparent;height:44px;outline:none;font-family:'Sora',sans-serif;font-size:13.5px;color:var(--ink);padding:0 14px}
.hdr-search-btn{width:46px;height:44px;background:var(--primary);color:#fff;flex-shrink:0;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.hdr-search-btn:hover{background:var(--pri-dark)}

.hdr-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.hdr-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 11px;border-radius:8px;color:var(--ink2);font-size:11px;font-weight:500;position:relative;transition:background .2s,color .2s}
.hdr-btn .icon{font-size:19px;line-height:1}
.hdr-btn:hover{background:var(--pri-light);color:var(--primary)}
.hdr-btn .badge{position:absolute;top:4px;right:6px;background:var(--accent);color:#fff;font-size:9px;font-weight:700;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hdr-enroll{background:var(--accent);color:#fff;padding:9px 18px;border-radius:100px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;transition:background .2s,transform .2s,box-shadow .2s;margin-left:6px;flex-shrink:0;white-space:nowrap}
.hdr-enroll:hover{background:var(--acc-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(238,108,77,.3)}

/* ── MEGA NAV ── */
.mega-nav{background:var(--white);border-top:1px solid var(--border);width:100%;position:relative;z-index:250;}
.mega-nav-inner{padding:0 40px;width:100%;display:flex;align-items:center;gap:0;overflow-x:visible;}
.mega-nav::-webkit-scrollbar{display:none}
.nav-all{background:var(--primary);color:#fff;padding:11px 16px;white-space:nowrap;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;transition:background .2s;flex-shrink:0}
.nav-all:hover{background:var(--pri-dark)}
.mni{position:relative;flex-shrink:0;}
.mni-link{display:flex;align-items:center;gap:5px;padding:13px;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;cursor:pointer}
.mni-link .arr{font-size:10px;color:var(--muted);transition:transform .2s}
.mni:hover .mni-link{color:var(--primary);border-bottom-color:var(--primary)}
.mni:hover .arr{transform:rotate(180deg)}
.mni-link.active{color:var(--primary);border-bottom-color:var(--primary)}

.dd{display:none;position:absolute;top:100%;left:0;background:var(--white);border:1px solid var(--border);border-top:3px solid var(--primary);border-radius:0 0 14px 14px;box-shadow:0 20px 60px rgba(0,0,0,.15);min-width:230px;z-index:9999;padding:8px 0;animation:ddIn .18s var(--ease) both}
.dd.wide{min-width:480px;display:none;padding:24px;gap:16px;z-index:9999}
.dd.wide .dd-col{flex:1}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.mni:hover .dd{display:block;}
.mni:hover .dd.wide{display:flex;}
.dd-col-hd{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--primary);padding:4px 12px 10px;border-bottom:1px solid var(--border);margin-bottom:8px}
.ddi{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13.5px;color:var(--ink);font-weight:400;transition:background .15s,color .15s;cursor:pointer;white-space:nowrap;}
.ddi:hover{background:var(--pri-light);color:var(--primary);font-weight:500}
.ddi-ico{font-size:17px;flex-shrink:0}
/* Mega nav inner — no overflow clip so dropdowns show */
.mega-nav-inner{
  display:flex;align-items:center;gap:0;
  padding:0 40px;width:100%;
  overflow:visible;
  position:relative;
}

/* ── MOBILE HAMBURGER ── */
.mob-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:6px;flex-shrink:0}
.mob-btn span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .3s,width .3s}
.mob-btn span:nth-child(2){width:70%}
.mob-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-btn.open span:nth-child(2){opacity:0;width:0}
.mob-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mob-search-row{display:none;padding:10px 14px;background:var(--white);border-bottom:1px solid var(--border)}
.mob-search-row .inner{display:flex;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .2s}
.mob-search-row .inner:focus-within{border-color:var(--primary)}
.mob-search-row input{flex:1;padding:10px 14px;border:none;background:transparent;font-family:'Sora',sans-serif;font-size:14px;color:var(--ink);outline:none}
.mob-search-row button{padding:0 14px;background:var(--primary);color:#fff;font-size:16px}

/* ── MOBILE DRAWER ── */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:499;opacity:0;transition:opacity .3s}
.mob-overlay.open{opacity:1}
.mob-drawer{display:none;flex-direction:column;position:fixed;top:0;left:0;width:88%;max-width:320px;height:100%;background:var(--white);z-index:500;box-shadow:4px 0 32px rgba(0,0,0,.18);overflow-y:auto;transform:translateX(-100%);transition:transform .32s var(--ease)}
.mob-drawer.open{transform:translateX(0)}
.mob-dr-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--pri-dark);flex-shrink:0}
.mob-dr-head .logo-icon{width:34px;height:34px;font-size:15px}
.mob-dr-head .logo-text .l2{font-size:16px;color:#fff}
.mob-dr-head .logo-text .l2 .a1{color:#7be0f0}
.mob-dr-head .logo-text .l2 .a2{color:#f4a080}
.mob-dr-head .logo-text .l1{color:rgba(255,255,255,.45)}
.mob-dr-head .logo-text .l3{color:var(--gold)}
.mob-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}
.mob-dr-search{padding:12px 14px;border-bottom:1px solid var(--border);display:flex}
.mob-dr-search input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-right:none;border-radius:8px 0 0 8px;font-family:'Sora',sans-serif;font-size:13px;outline:none;color:var(--ink)}
.mob-dr-search input:focus{border-color:var(--primary)}
.mob-dr-search button{padding:0 14px;background:var(--primary);color:#fff;border-radius:0 8px 8px 0;font-size:16px}
.mob-sec-lbl{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:14px 16px 6px}
.mob-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;border-bottom:1px solid rgba(229,231,235,.5);transition:background .15s,color .15s}
.mob-row:hover{background:var(--pri-light);color:var(--primary)}
.mob-row-l{display:flex;align-items:center;gap:10px}
.mob-row-ico{font-size:18px;width:24px;text-align:center}
.mob-row-arr{font-size:11px;color:var(--muted);transition:transform .22s}
.mob-row.expanded .mob-row-arr{transform:rotate(90deg)}
.mob-sub{display:none;background:#f4f9fb;border-bottom:1px solid var(--border)}
.mob-sub.open{display:block}
.mob-sub-lnk{display:block;padding:10px 16px 10px 50px;font-size:13px;color:var(--ink2);border-bottom:1px solid rgba(229,231,235,.4);transition:background .15s,color .15s;cursor:pointer}
.mob-sub-lnk:hover{background:var(--pri-light);color:var(--primary)}
.mob-divider{height:1px;background:var(--border);margin:4px 0}
.mob-dr-btns{padding:16px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border);flex-shrink:0;margin-top:auto}
.mob-dr-btn{display:block;width:100%;padding:13px;border-radius:8px;font-size:14px;font-weight:600;text-align:center}
.mob-dr-btn.primary{background:var(--primary);color:#fff}
.mob-dr-btn.accent{background:var(--accent);color:#fff}
.mob-dr-btn.outline{border:1.5px solid var(--border);color:var(--ink2)}

/* ── HERO SLIDER ── */
.slider-wrap{position:relative;overflow:hidden;background:var(--ink)}
.slides{display:flex;transition:transform .7s cubic-bezier(.77,0,.18,1);will-change:transform}
.slide{min-width:100%;height:420px;display:flex;align-items:center;position:relative;overflow:hidden}
.slide-1{background:linear-gradient(125deg,#002d36 0%,#005060 45%,#007a8a 100%)}
.slide-2{background:linear-gradient(125deg,#2a0a00 0%,#6b2010 45%,#c04428 100%)}
.slide-3{background:linear-gradient(125deg,#001428 0%,#0a3060 45%,#1a5aaa 100%)}
.slide-4{background:linear-gradient(125deg,#0d1a00 0%,#1a4010 45%,#2e7a28 100%)}
.slide-5{background:linear-gradient(125deg,#28200a 0%,#5a4010 45%,#a07020 100%)}
.slide::before{content:'';position:absolute;right:-100px;top:-100px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.slide-in{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 64px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px}
.slide-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:5px 13px;border-radius:100px;margin-bottom:14px}
.slide-tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.slide-h{font-family:'Lora',serif;font-size:clamp(26px,3.5vw,48px);font-weight:700;color:#fff;line-height:1.1;letter-spacing:-1px;margin-bottom:12px}
.slide-h em{font-style:italic;opacity:.6}
.slide-1 .slide-h em{color:#7be0f0}.slide-2 .slide-h em{color:#f4a080}
.slide-3 .slide-h em{color:#80b8f8}.slide-4 .slide-h em{color:#80e890}.slide-5 .slide-h em{color:#f4d070}
.slide-p{font-size:13.5px;color:rgba(255,255,255,.6);font-weight:300;line-height:1.75;margin-bottom:24px;max-width:400px}
.slide-btns{display:flex;gap:12px;flex-wrap:wrap}
.sl-btn-p{background:#fff;padding:11px 24px;border-radius:100px;font-size:13.5px;font-weight:600;transition:transform .2s,box-shadow .2s}
.slide-1 .sl-btn-p{color:var(--pri-dark)}.slide-2 .sl-btn-p{color:#7a2010}.slide-3 .sl-btn-p{color:#1a3d7a}.slide-4 .sl-btn-p{color:#1a5a1a}.slide-5 .sl-btn-p{color:#6a4a00}
.sl-btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.sl-btn-s{background:transparent;border:1.5px solid rgba(255,255,255,.3);padding:11px 20px;border-radius:100px;color:rgba(255,255,255,.8);font-size:13.5px;font-weight:500;transition:border-color .2s,color .2s}
.sl-btn-s:hover{border-color:rgba(255,255,255,.7);color:#fff}
.slide-vis{display:flex;justify-content:center;align-items:center;position:relative}
.s-ring{width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;animation:spinRing 22s linear infinite;position:relative}
.s-ring::before{content:'';position:absolute;inset:22px;border-radius:50%;border:1px dashed rgba(255,255,255,.07)}
@keyframes spinRing{to{transform:rotate(360deg)}}
.s-emoji{font-size:80px;animation:spinRing 22s linear infinite reverse;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
.s-pill{position:absolute;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 14px;color:#fff;font-size:12px;white-space:nowrap}
.s-pill strong{display:block;font-size:17px;font-family:'Lora',serif;font-weight:700}
.sl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.sl-arrow:hover{background:rgba(255,255,255,.25);transform:translateY(-50%) scale(1.08)}
.sl-arrow.prev{left:20px}.sl-arrow.next{right:20px}
.sl-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:10}
.sl-dot{width:7px;height:7px;border-radius:100px;background:rgba(255,255,255,.3);transition:width .3s,background .3s}
.sl-dot.active{width:24px;background:#fff}
.sl-prog{position:absolute;bottom:0;left:0;width:100%;height:3px;background:rgba(255,255,255,.1)}
.sl-bar{height:100%;background:var(--accent);width:0%;transition:width .1s linear}

/* ── TRUST BAR ── */
.trust-bar{background:var(--white);border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;align-items:center;gap:12px;padding:16px 20px;border-right:1px solid var(--border)}
.trust-item:last-child{border-right:none}
.trust-ico{font-size:26px;flex-shrink:0}
.trust-item strong{display:block;font-size:13px;font-weight:600}
.trust-item span{font-size:11.5px;color:var(--muted)}

/* ── MARQUEE ── */
.marquee-bar{background:var(--pri-dark);padding:12px 0;overflow:hidden}
.marquee-track{display:flex;animation:marquee 30s linear infinite;width:max-content}
@keyframes marquee{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:8px;padding:0 24px;color:rgba(255,255,255,.75);font-size:13px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
.mq-item strong{color:#fff}.mq-dot{color:var(--gold);font-size:14px}

/* ── SECTION ── */
.section{padding:52px 40px}.section-sm{padding:36px 40px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.sec-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--primary);margin-bottom:5px}
.sec-ttl{font-family:'Lora',serif;font-size:clamp(22px,2.5vw,32px);font-weight:700;letter-spacing:-.5px;line-height:1.15}
.view-all{font-size:13px;font-weight:600;color:var(--primary);border-bottom:1.5px solid var(--primary);padding-bottom:1px;transition:opacity .2s;white-space:nowrap}
.view-all:hover{opacity:.7}

/* ── BOARD TABS ── */
.board-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.board-tab{padding:7px 16px;border-radius:100px;font-size:12.5px;font-weight:500;border:1.5px solid var(--border);background:var(--white);color:var(--muted);transition:background .2s,border-color .2s,color .2s}
.board-tab.active,.board-tab:hover{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── CATEGORY GRID ── */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat-card{border-radius:var(--r);overflow:hidden;cursor:pointer;display:block;transition:transform .28s var(--ease),box-shadow .28s var(--ease);text-decoration:none}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.cat-inner{padding:20px 14px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-height:136px;justify-content:center}
.cat-card:nth-child(1) .cat-inner{background:linear-gradient(145deg,#e8f4ff,#c6e0f8)}
.cat-card:nth-child(2) .cat-inner{background:linear-gradient(145deg,#fff3e8,#ffd8b0)}
.cat-card:nth-child(3) .cat-inner{background:linear-gradient(145deg,#edfff2,#b8f0cb)}
.cat-card:nth-child(4) .cat-inner{background:linear-gradient(145deg,#fff8e0,#ffe28a)}
.cat-card:nth-child(5) .cat-inner{background:linear-gradient(145deg,#fce8ff,#f0b8f8)}
.cat-card:nth-child(6) .cat-inner{background:linear-gradient(145deg,#e8f8f8,#a8e4e8)}
.cat-card:nth-child(7) .cat-inner{background:linear-gradient(145deg,#fff0f0,#ffc0c0)}
.cat-card:nth-child(8) .cat-inner{background:linear-gradient(145deg,#f0f0ff,#c8c8f8)}
.cat-card:nth-child(9) .cat-inner{background:linear-gradient(145deg,#f8fff0,#d0f0b0)}
.cat-card:nth-child(10) .cat-inner{background:linear-gradient(145deg,#fff8f0,#ffd8a8)}
.cat-card:nth-child(11) .cat-inner{background:linear-gradient(145deg,#f0faff,#b0dff8)}
.cat-card:nth-child(12) .cat-inner{background:linear-gradient(145deg,#fff0f8,#ffc0e0)}
.cat-img-wrap{position:relative;width:100%;display:flex;justify-content:center;align-items:flex-end;height:58px;margin-bottom:6px}
.cat-img-wrap .cat-ico{position:relative;z-index:2;font-size:28px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}
.cat-mini{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:3px;align-items:flex-end;z-index:1}
.cmb{border-radius:2px 4px 4px 2px;box-shadow:1px 1px 4px rgba(0,0,0,.2)}
.cmb:nth-child(1){width:13px;height:42px}
.cmb:nth-child(2){width:13px;height:34px}
.cmb:nth-child(3){width:13px;height:38px}
.cmb-1{background:linear-gradient(160deg,#1a6040,#0d3d28)}.cmb-2{background:linear-gradient(160deg,#4a2090,#28106a)}
.cmb-3{background:linear-gradient(160deg,#c05020,#7a2a00)}.cmb-4{background:linear-gradient(160deg,#1a6090,#0a3060)}
.cmb-5{background:linear-gradient(160deg,#a07020,#6a4a00)}.cmb-6{background:linear-gradient(160deg,#007a8a,#004a58)}
.cmb-7{background:linear-gradient(160deg,#5a7820,#344800)}.cmb-8{background:linear-gradient(160deg,#9a2060,#5a0a38)}
.cmb-9{background:linear-gradient(160deg,#c07820,#7a4a00)}.cmb-10{background:linear-gradient(160deg,#007878,#004848)}
.cat-name{font-size:12px;font-weight:600;color:var(--ink);line-height:1.3}
.cat-count{font-size:10.5px;color:var(--muted)}
.cat-arrow-link{font-size:11px;font-weight:600;color:var(--primary);margin-top:4px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.cat-card:hover .cat-arrow-link{opacity:1;transform:translateY(0)}

/* ── CLASS SELECTOR ── */
.class-section{background:var(--white);padding:44px 40px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.class-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin-top:20px}
.class-btn{border:1.5px solid var(--border);background:var(--bg);border-radius:var(--r);padding:12px 6px;text-align:center;font-size:13px;font-weight:600;color:var(--ink2);transition:background .2s,border-color .2s,color .2s,transform .2s}
.class-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-2px)}
.class-btn span{display:block;font-size:9.5px;font-weight:400;opacity:.7;margin-top:2px}

/* ── PRODUCT TABS & GRID ── */
.prod-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--border);overflow-x:auto}
.prod-tabs::-webkit-scrollbar{display:none}
.prod-tab{padding:10px 18px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;flex-shrink:0;transition:color .2s,border-color .2s}
.prod-tab.active,.prod-tab:hover{color:var(--primary);border-bottom-color:var(--primary)}

.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.prod-card{background:var(--white);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease);position:relative}
.prod-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent}
.prod-img{height:168px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.prod-card:nth-child(1) .prod-img{background:linear-gradient(135deg,#0a3d2e,#1a7a54)}
.prod-card:nth-child(2) .prod-img{background:linear-gradient(135deg,#1a0a3d,#4a2090)}
.prod-card:nth-child(3) .prod-img{background:linear-gradient(135deg,#2a1000,#8a3000)}
.prod-card:nth-child(4) .prod-img{background:linear-gradient(135deg,#0a2840,#1a6090)}
.prod-card:nth-child(5) .prod-img{background:linear-gradient(135deg,#2a1a00,#7a5000)}
.prod-card:nth-child(6) .prod-img{background:linear-gradient(135deg,#001a2a,#004a7a)}
.prod-card:nth-child(7) .prod-img{background:linear-gradient(135deg,#1a2a00,#4a7000)}
.prod-card:nth-child(8) .prod-img{background:linear-gradient(135deg,#3a0a20,#9a2060)}
.prod-card:nth-child(9) .prod-img{background:linear-gradient(135deg,#2a2000,#7a6000)}
.prod-card:nth-child(10) .prod-img{background:linear-gradient(135deg,#001a1a,#005050)}
.prod-img-lnk{display:block}
.prod-badges{position:absolute;top:9px;left:9px;display:flex;flex-direction:column;gap:3px}
.pbadge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;display:inline-block}
.pbadge.sale{background:var(--accent);color:#fff}.pbadge.hot{background:var(--gold);color:#fff}.pbadge.new{background:var(--green);color:#fff}
.prod-wish{position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:12px;transition:background .2s,transform .2s}
.prod-wish:hover{background:#fff;transform:scale(1.12)}

/* Book cover visual */
.bk-cover{width:84px;height:118px;border-radius:3px 7px 7px 3px;box-shadow:4px 4px 16px rgba(0,0,0,.35),inset -3px 0 6px rgba(0,0,0,.2);display:flex;align-items:stretch;overflow:hidden;flex-shrink:0}
.bk-spine{width:9px;background:rgba(0,0,0,.22);flex-shrink:0;border-right:1px solid rgba(255,255,255,.08)}
.bk-body{flex:1;padding:8px 7px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.07)}
.bk-title{font-family:'Lora',serif;font-size:8.5px;font-weight:700;color:#fff;line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bk-author{font-size:7.5px;color:rgba(255,255,255,.6);margin-top:4px}
.bk-deco{font-size:8.5px;color:rgba(255,255,255,.3);letter-spacing:2px;margin-top:auto;padding-top:4px}
.bc-green{background:linear-gradient(160deg,#1a6040,#0d3d28)}.bc-purple{background:linear-gradient(160deg,#4a2090,#28106a)}
.bc-orange{background:linear-gradient(160deg,#c05020,#7a2a00)}.bc-blue{background:linear-gradient(160deg,#1a6090,#0a3060)}
.bc-gold{background:linear-gradient(160deg,#a07020,#6a4a00)}.bc-teal{background:linear-gradient(160deg,#007a8a,#004a58)}
.bc-olive{background:linear-gradient(160deg,#5a7820,#344800)}.bc-pink{background:linear-gradient(160deg,#9a2060,#5a0a38)}
.bc-amber{background:linear-gradient(160deg,#c07820,#7a4a00)}.bc-cyan{background:linear-gradient(160deg,#007878,#004848)}

.prod-body{padding:12px 13px 13px}
.prod-cat{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:2px}
.prod-stars{font-size:11px;color:var(--gold);margin-bottom:5px}
.prod-rc{font-size:10.5px;color:var(--muted);font-weight:400}
.prod-name{font-family:'Lora',serif;font-size:14px;font-weight:600;line-height:1.3;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-author{font-size:11.5px;color:var(--muted);margin-bottom:7px}
.prod-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.prod-tag{font-size:10px;padding:2px 7px;border-radius:100px;background:var(--bg);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.prod-foot{display:flex;align-items:center;justify-content:space-between}
.prod-price{font-size:15px;font-weight:700}
.prod-price s{font-size:11px;color:var(--muted);font-weight:400;margin-left:3px}
.prod-price .pct{font-size:10.5px;color:var(--green);font-weight:600;margin-left:3px}
.prod-cart-btn{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .2s,transform .2s,box-shadow .2s}
.prod-cart-btn:hover{background:var(--accent);transform:scale(1.1);box-shadow:0 4px 12px rgba(238,108,77,.35)}

/* ── OFFER BANNERS ── */
.offer-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 40px 52px}
.offer-card{border-radius:var(--r-lg);padding:36px 40px;position:relative;overflow:hidden;min-height:185px;display:flex;flex-direction:column;justify-content:space-between}
.offer-card-1{background:linear-gradient(125deg,#002d36,#007a8a)}
.offer-card-2{background:linear-gradient(125deg,#3a0a00,#c04428)}
.offer-card::before{content:'';position:absolute;right:-50px;top:-50px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.offer-eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;opacity:.65;color:#fff}
.offer-ttl{font-family:'Lora',serif;font-size:clamp(20px,2.2vw,30px);font-weight:700;color:#fff;line-height:1.15;margin-bottom:7px}
.offer-ttl em{font-style:italic;opacity:.7}
.offer-card-1 .offer-ttl em{color:#8ae8f0}.offer-card-2 .offer-ttl em{color:#f8b090}
.offer-sub{font-size:12.5px;color:rgba(255,255,255,.5);margin-bottom:16px;font-weight:300}
.offer-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.offer-btn{background:#fff;padding:9px 20px;border-radius:100px;font-size:13px;font-weight:600;transition:transform .2s,box-shadow .2s}
.offer-card-1 .offer-btn{color:var(--pri-dark)}.offer-card-2 .offer-btn{color:#7a1a00}
.offer-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.offer-code{background:rgba(255,255,255,.1);border:1.5px dashed rgba(255,255,255,.3);border-radius:7px;padding:5px 14px;font-size:14px;font-weight:700;color:#fff;letter-spacing:2px;cursor:pointer;transition:background .2s}
.offer-code:hover{background:rgba(255,255,255,.18)}

/* ── RECOMMENDED ── */
.hscroll{overflow-x:auto;padding-bottom:6px}
.hscroll::-webkit-scrollbar{height:4px}
.hscroll::-webkit-scrollbar-track{background:var(--border)}
.hscroll::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}
.hscroll-row{display:flex;gap:14px;width:max-content;padding:4px 2px}
.hscroll-card{width:150px;flex-shrink:0;background:var(--white);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer}
.hscroll-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.hscroll-img{height:108px;display:flex;align-items:center;justify-content:center;font-size:40px}
.hscroll-card:nth-child(odd) .hscroll-img{background:var(--pri-light)}
.hscroll-card:nth-child(even) .hscroll-img{background:#fde8e0}
.hscroll-body{padding:9px 11px}
.hscroll-name{font-size:12px;font-weight:600;line-height:1.3;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hscroll-price{font-size:13px;font-weight:700;color:var(--primary)}

/* ── TESTIMONIALS ── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi-card{background:var(--white);border-radius:var(--r);padding:24px;border:1px solid var(--border);transition:transform .2s,box-shadow .2s}
.testi-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.testi-stars{font-size:13px;color:var(--gold);margin-bottom:8px}
.testi-q{font-family:'Lora',serif;font-size:40px;color:var(--pri-light);line-height:1;margin-bottom:5px}
.testi-txt{font-size:13px;line-height:1.75;color:#555;font-weight:300;margin-bottom:16px}
.testi-auth{display:flex;align-items:center;gap:10px}
.tav{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Lora',serif;font-size:15px;font-weight:700;color:#fff}
.tav1{background:linear-gradient(135deg,#002d36,#007a8a)}.tav2{background:linear-gradient(135deg,#6b2010,#c04428)}.tav3{background:linear-gradient(135deg,#1a3a20,#2a9d4e)}
.tav-name{font-size:13px;font-weight:600}.tav-role{font-size:11.5px;color:var(--muted)}

/* ── NEWSLETTER ── */
.newsletter{background:linear-gradient(135deg,var(--pri-dark),var(--primary));padding:52px 40px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px}
.nl-ttl{font-family:'Lora',serif;font-size:clamp(22px,2.6vw,36px);font-weight:700;color:#fff;line-height:1.15;margin-bottom:10px}
.nl-ttl em{font-style:italic;color:rgba(255,255,255,.5)}
.nl-sub{font-size:13.5px;color:rgba(255,255,255,.6);font-weight:300;max-width:360px}
.nl-form{display:flex;max-width:460px}
.nl-input{flex:1;padding:13px 18px;border:none;border-radius:100px 0 0 100px;font-family:'Sora',sans-serif;font-size:13.5px;color:var(--ink);outline:none}
.nl-submit{background:var(--accent);color:#fff;padding:13px 22px;border-radius:0 100px 100px 0;font-size:13.5px;font-weight:600;transition:background .2s}
.nl-submit:hover{background:var(--acc-dark)}
.nl-note{font-size:11px;color:rgba(255,255,255,.38);margin-top:9px}

/* ── FOOTER ── */
footer{background:#0d1117;color:rgba(255,255,255,.6)}
.ft-top{padding:50px 40px 36px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;border-bottom:1px solid rgba(255,255,255,.07)}
.ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ft-logo-ico{width:36px;height:36px;background:var(--primary);border-radius:7px 3px 3px 7px;display:flex;align-items:center;justify-content:center;font-size:17px}
.ft-logo-txt .l1{font-size:10px;font-weight:300;color:rgba(255,255,255,.38)}
.ft-logo-txt .l2{font-family:'Lora',serif;font-size:16px;font-weight:700;color:#fff}
.ft-logo-txt .l2 .a1{color:#5fd8e8}.ft-logo-txt .l2 .a2{color:#f4a080}
.ft-desc{font-size:12.5px;line-height:1.75;max-width:240px;font-weight:300;margin-bottom:16px}
.ft-social{display:flex;gap:7px}
.ft-social a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.5);transition:background .2s,color .2s,border-color .2s}
.ft-social a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.ft-col h4{font-family:'Lora',serif;font-size:14.5px;font-weight:700;color:#fff;margin-bottom:12px}
.ft-col a{display:flex;align-items:center;gap:5px;font-size:12.5px;color:rgba(255,255,255,.5);margin-bottom:8px;transition:color .2s;font-weight:300}
.ft-col a:hover{color:var(--primary)}
.ft-col a::before{content:'›';color:var(--primary);font-size:15px}
.ft-mid{padding:16px 40px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ft-pay{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ft-pay span{font-size:11.5px;color:rgba(255,255,255,.38)}
.pay-bdg{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:3px 9px;font-size:11.5px;color:rgba(255,255,255,.55)}
.ft-bot{padding:16px 40px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.28);flex-wrap:wrap;gap:10px}
.ft-bot-links{display:flex;gap:18px}
.ft-bot-links a{color:rgba(255,255,255,.28);transition:color .2s}.ft-bot-links a:hover{color:var(--primary)}

/* Scroll to top */
.scroll-top{position:fixed;bottom:24px;right:24px;z-index:400;width:40px;height:40px;background:var(--primary);color:#fff;border-radius:50%;font-size:18px;box-shadow:var(--sh-md);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.scroll-top.visible{opacity:1;pointer-events:all}.scroll-top:hover{transform:scale(1.1)}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.anim{opacity:0}.anim.in{animation:fadeUp .5s var(--ease) both}

/* ============================================================
   RESPONSIVE 1200px
   ============================================================ */
@media(max-width:1200px){
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .prod-grid{grid-template-columns:repeat(4,1fr)}
  .class-grid{grid-template-columns:repeat(6,1fr)}
  .ft-top{grid-template-columns:1fr 1fr;gap:28px}
}

/* ============================================================
   RESPONSIVE 1024px
   ============================================================ */
@media(max-width:1024px){
  .header-main,.mega-nav,.section,.section-sm,.class-section,
  .newsletter,.offer-row,.ft-top,.ft-mid,.ft-bot{padding-left:32px;padding-right:32px}
  .slide-in{padding:0 40px}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .testi-grid{grid-template-columns:1fr 1fr}
  .newsletter{grid-template-columns:1fr;padding:40px 32px}
}

/* ============================================================
   RESPONSIVE 768px — MOBILE
   ============================================================ */
@media(max-width:768px){
  /* hide desktop */
  .topbar,.mega-nav,.hdr-search,.hdr-enroll{display:none}
  .hdr-btn:first-of-type{display:none}

  /* show mobile */
  .mob-btn{display:flex}
  .mob-drawer{display:flex}
  .mob-search-row{display:block}

  /* header */
  .header-main{padding:0 12px;height:58px;gap:8px}
  .logo-icon{width:36px;height:36px;font-size:16px}
  .logo-text .l1{font-size:10px}.logo-text .l2{font-size:16px}.logo-text .l3{font-size:8px;letter-spacing:1.5px}
  .hdr-actions{gap:2px}
  .hdr-btn{padding:6px 8px;font-size:10px}.hdr-btn .icon{font-size:18px}
  .hdr-btn .badge{width:14px;height:14px;font-size:8px;top:3px;right:4px}

  /* slider */
  .slide{height:auto;padding:32px 0 44px}
  .slide-in{grid-template-columns:1fr;padding:0 18px;gap:0}
  .slide-vis{display:none}
  .slide-tag{font-size:10px;padding:4px 11px;margin-bottom:10px}
  .slide-h{font-size:26px;letter-spacing:-.5px;margin-bottom:10px}
  .slide-p{font-size:13px;margin-bottom:18px;max-width:100%}
  .slide-btns{flex-direction:column;gap:10px;align-items:stretch}
  .sl-btn-p,.sl-btn-s{padding:12px 20px;font-size:14px;width:100%;text-align:center}
  .sl-arrow{width:34px;height:34px;font-size:13px}
  .sl-arrow.prev{left:8px}.sl-arrow.next{right:8px}

  /* trust bar */
  .trust-bar{grid-template-columns:1fr 1fr}
  .trust-item{padding:12px 10px;border-right:none;border-bottom:1px solid var(--border)}
  .trust-item:nth-child(odd){border-right:1px solid var(--border)}
  .trust-item:nth-child(3),.trust-item:nth-child(4){border-bottom:none}
  .trust-ico{font-size:22px}.trust-item strong{font-size:12.5px}.trust-item span{font-size:11px}

  /* marquee */
  .mq-item{padding:0 16px;font-size:12px}

  /* sections */
  .section,.section-sm{padding:26px 14px}
  .class-section{padding:26px 14px}
  .sec-ttl{font-size:18px}.sec-head{margin-bottom:14px}.view-all{font-size:12px}

  /* board tabs — horizontal scroll */
  .board-tabs{overflow-x:auto;flex-wrap:nowrap;gap:7px;margin-bottom:14px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .board-tabs::-webkit-scrollbar{display:none}
  .board-tab{white-space:nowrap;flex-shrink:0;padding:6px 13px;font-size:12px}

  /* category */
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:9px}
  .cat-inner{min-height:102px;padding:14px 8px 10px;gap:5px}
  .cat-img-wrap{height:52px}
  .cat-img-wrap .cat-ico{font-size:24px}
  .cat-name{font-size:10.5px}.cat-count{display:none}
  .cmb:nth-child(1){width:11px;height:36px}
  .cmb:nth-child(2){width:11px;height:28px}
  .cmb:nth-child(3){width:11px;height:32px}

  /* class grid */
  .class-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
  .class-btn{padding:10px 4px;font-size:12px}.class-btn span{font-size:9px}

  /* products */
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .prod-img{height:138px}
  .bk-cover{width:72px;height:102px}
  .bk-title{font-size:7.5px}
  .prod-body{padding:10px 10px 11px}
  .prod-name{font-size:13px}.prod-author{font-size:11px;margin-bottom:5px}
  .prod-price{font-size:14px}.prod-price s{font-size:10.5px}
  .prod-cart-btn{width:28px;height:28px;font-size:14px}
  .prod-stars{font-size:10.5px}

  /* offers */
  .offer-row{grid-template-columns:1fr;padding:0 14px 36px;gap:14px}
  .offer-card{padding:24px 20px;min-height:auto}.offer-ttl{font-size:20px}

  /* hscroll */
  .hscroll-card{width:126px}.hscroll-img{height:88px;font-size:32px}.hscroll-name{font-size:11px}

  /* testimonials */
  .testi-grid{grid-template-columns:1fr;gap:12px}.testi-card{padding:20px}

  /* newsletter */
  .newsletter{grid-template-columns:1fr;padding:32px 14px;gap:22px}
  .nl-ttl{font-size:20px}.nl-sub{font-size:13px;max-width:100%}
  .nl-form{flex-direction:column;gap:10px;max-width:100%}
  .nl-input{border-radius:8px;padding:12px 16px}
  .nl-submit{border-radius:8px;padding:12px;text-align:center}

  /* footer */
  .ft-top{grid-template-columns:1fr;padding:28px 14px 16px;gap:20px}
  .ft-mid{padding:14px;flex-direction:column;align-items:flex-start;gap:10px}
  .ft-bot{padding:14px;flex-direction:column;text-align:center;gap:8px}
  .ft-bot-links{flex-wrap:wrap;justify-content:center;gap:10px}
}

/* ============================================================
   RESPONSIVE 400px — very small phones
   ============================================================ */
@media(max-width:400px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .class-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:1fr}
  .logo-text .l2{font-size:14px}.logo-text .l3{display:none}
}