/* HackNovaSec — Logo Blue #006DB2 + Teal #00C9A7 contrast palette */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
--bg:#060a12;--bg2:#0a0f1c;--bg3:#0d1422;--card:#0c1220;
--blue:#006DB2;--blue-lt:#1a8fd1;--blue-ltr:#1c64e0;--blue-dk:#004f82;
--teal:#00C9A7;--teal-lt:#2066ce;--teal-dk:#009e84;
--ice:#388ef8;--ice-lt:#2470da;
--wa:#25D366;--wa-dk:#1aab52;
--text:#dce8f5;--muted:#6b82a0;--white:#fff;
--border:rgba(0,109,178,0.22);
--gb:0 0 28px rgba(0,109,178,0.55);
--gt:0 0 28px rgba(0,201,167,0.5);
--gi:0 0 24px rgba(56,189,248,0.4);
--gw:0 0 20px rgba(37,211,102,0.5);
--r:14px;--t:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
html{scroll-behavior:smooth;}
body{font-family:'Space Grotesk',sans-serif;background:#060a12;color:#dce8f5;overflow-x:hidden;line-height:1.65;}

/* ── GLOBAL ANIMATED BACKGROUND ── */
#particle-network{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
}

/* All sections sit above the background */
.navbar,.hero,.about,.courses,.services,.why,.contact,.footer,
.modal-ov,.btt{position:relative;z-index:1;}
.navbar{z-index:1000;}
.modal-ov{z-index:2000;}
.btt{z-index:999;}

.container{max-width:1200px;margin:0 auto;padding:0 24px;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:#060a12;}
::-webkit-scrollbar-thumb{background:linear-gradient(#006DB2,#00C9A7);border-radius:4px;}
::selection{background:#006DB2;color:#fff;}

/* ── LOGO: PNG with transparency — display cleanly ── */
.logo-wrap{
  width:100px;height:100px;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  image-rendering:auto;
}

/* ── NAVBAR ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:8px 0;background:rgba(6,10,18,0.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,109,178,0.2);transition:var(--t);}
.navbar.scrolled{padding:6px 0;background:rgba(6,10,18,0.98);box-shadow:0 4px 40px rgba(0,0,0,0.7);}
.nav-container{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo-text{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:0.5px;}
.logo-text .accent{color:#2954d3;}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;}
.nav-links a{font-family:'Space Grotesk',sans-serif;color:#6b82a0;text-decoration:none;font-size:0.92rem;font-weight:500;padding:8px 14px;border-radius:8px;transition:var(--t);}
.nav-links a:hover{color:#1d53b8;background:rgba(0,109,178,0.1);}
.nav-btn{background:linear-gradient(135deg,#004f82,#006DB2) !important;color:#fff !important;font-weight:700 !important;border-radius:10px !important;padding:9px 20px !important;box-shadow:0 0 20px rgba(0,109,178,0.4);border:1px solid rgba(77,179,232,0.3) !important;}
.nav-btn:hover{background:linear-gradient(135deg,#006DB2,#009e84) !important;transform:translateY(-2px) scale(1.04) !important;box-shadow:0 0 28px rgba(54, 50, 186, 0.5) !important;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.hamburger span{width:26px;height:2px;background:linear-gradient(90deg,#1a8fd1,#00C9A7);border-radius:2px;transition:var(--t);}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:110px 24px 70px;background:radial-gradient(ellipse 65% 65% at 10% 50%,rgba(0,109,178,0.08) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 90% 20%,rgba(0,201,167,0.06) 0%,transparent 70%),transparent;}
.hero-inner{max-width:1200px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:2;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,109,178,0.12);border:1px solid rgba(0,109,178,0.4);color:#4db3e8;padding:7px 18px;border-radius:50px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:22px;animation:fadeUp 0.7s ease both;}
.hero-badge i{color:#13579c;}
.hero-title{font-family:'Syne',sans-serif;font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:800;line-height:1.05;margin-bottom:18px;animation:fadeUp 0.7s ease 0.15s both;}
.grad-text{background:linear-gradient(135deg,#4db3e8 0%,#38bdf8 40%,#00C9A7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;}
.grad-text::after{content:attr(data-text);position:absolute;top:0;left:0;background:linear-gradient(135deg,#4db3e8,#00C9A7,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:glitch 4s infinite;clip-path:polygon(0 30%,100% 30%,100% 60%,0 60%);}
@keyframes glitch{0%,85%,100%{transform:translate(0);opacity:0;}87%{transform:translate(-4px,2px);opacity:0.8;}89%{transform:translate(4px,-2px);opacity:0.6;}91%{transform:translate(0);opacity:0;}}
.hero-sub{font-family:'JetBrains Mono',monospace;font-size:1rem;color:#2de8c8;margin-bottom:18px;animation:fadeUp 0.7s ease 0.25s both;}
.prompt{color:#4db3e8;}
.hero-desc{color:#6b82a0;font-size:1.05rem;line-height:1.85;margin-bottom:36px;max-width:520px;animation:fadeUp 0.7s ease 0.35s both;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px;animation:fadeUp 0.7s ease 0.45s both;}
.hero-stats{display:flex;gap:36px;animation:fadeUp 0.7s ease 0.55s both;}
.stat{text-align:center;}
.stat-n{font-family:'Syne',sans-serif;font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#4db3e8,#00C9A7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-sym{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,#4db3e8,#00C9A7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat p{color:#6b82a0;font-size:0.75rem;letter-spacing:1.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:10px;font-family:'Space Grotesk',sans-serif;font-size:0.97rem;font-weight:700;cursor:pointer;text-decoration:none;border:none;transition:var(--t);letter-spacing:0.4px;position:relative;overflow:hidden;}
.ripple::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,0.18);transform:scale(0);opacity:0;transition:transform 0.5s,opacity 0.5s;}
.ripple:active::after{transform:scale(2.5);opacity:0;transition:0s;}
.btn-blue{background:linear-gradient(135deg,#004f82,#1a8fd1);color:#fff;box-shadow:0 4px 20px rgba(0,109,178,0.4);}
.btn-blue:hover{background:linear-gradient(135deg,#1a8fd1,#0657d9);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 30px rgba(0,109,178,0.55);}
.btn-amber{background:linear-gradient(135deg,#009e84,#00C9A7);color:#fff;box-shadow:0 4px 20px rgba(0,201,167,0.4);}
.btn-amber:hover{background:linear-gradient(135deg,#00C9A7,#1a8fd1);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 30px rgba(0,201,167,0.55);}
.btn-outline{background:transparent;color:#38bdf8;border:1px solid rgba(56,189,248,0.4);padding:9px 18px;font-size:0.88rem;width:100%;justify-content:center;margin-bottom:10px;border-radius:8px;}
.btn-outline:hover{background:rgba(56,189,248,0.08);border-color:#38bdf8;box-shadow:0 0 20px rgba(56,189,248,0.3);}
.btn-enroll{background:linear-gradient(135deg,#1aab52,#25D366);color:#fff;border:none;padding:11px 18px;font-size:0.92rem;width:100%;justify-content:center;border-radius:8px;box-shadow:0 4px 16px rgba(37,211,102,0.3);animation:enrollPulse 2.5s ease-in-out infinite;}
.btn-enroll:hover{background:linear-gradient(135deg,#25D366,#1a8fd1);transform:translateY(-3px) scale(1.02);box-shadow:0 0 24px rgba(37,211,102,0.6);animation:none;}
@keyframes enrollPulse{0%,100%{box-shadow:0 4px 16px rgba(37,211,102,0.3);}50%{box-shadow:0 4px 28px rgba(37,211,102,0.65);}}

/* ── SECTION HEADER ── */
.sec-head{text-align:center;margin-bottom:64px;}
.sec-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(0,109,178,0.1);border:1px solid rgba(0,109,178,0.35);color:#4db3e8;padding:6px 18px;border-radius:50px;font-family:'JetBrains Mono',monospace;font-size:0.75rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;}
.sec-tag i{color:#2042ba;}
.sec-head h2{font-family:'Syne',sans-serif;font-size:clamp(1.9rem,4vw,3rem);font-weight:800;color:#fff;margin-bottom:14px;line-height:1.15;}
.sec-head h2 span{background:linear-gradient(135deg,#4db3e8,#00C9A7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.sec-head p{color:#6b82a0;font-size:1.05rem;max-width:580px;margin:0 auto;}

/* ── ABOUT ── */
.about{padding:110px 0;background:rgba(10,15,28,0.88);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}

/* About stats column replacing image */
.about-stats-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.about-stat-card{
  background:linear-gradient(135deg,rgba(0,109,178,0.12),rgba(0,201,167,0.08));
  border:1px solid rgba(0,109,178,0.25);
  border-radius:16px;padding:28px 20px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:var(--t);position:relative;overflow:hidden;
}
.about-stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#006DB2,#00C9A7);
  transform:scaleX(0);transition:var(--t);transform-origin:left;
}
.about-stat-card:hover{transform:translateY(-6px);border-color:rgba(0,201,167,0.4);box-shadow:0 16px 40px rgba(0,0,0,0.4),0 0 20px rgba(0,201,167,0.2);}
.about-stat-card:hover::before{transform:scaleX(1);}
.asc-icon{
  width:52px;height:52px;border-radius:12px;
  background:linear-gradient(135deg,rgba(0,109,178,0.2),rgba(0,201,167,0.15));
  border:1px solid rgba(0,201,167,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#00C9A7;margin-bottom:14px;
}
.asc-num{
  font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;
  background:linear-gradient(135deg,#4db3e8,#00C9A7);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;display:block;margin-bottom:4px;
}
.asc-body p{color:#6b82a0;font-size:0.82rem;letter-spacing:0.5px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;}

.about-img-wrap{position:relative;}
.about-img-box{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(0,109,178,0.22);}
.about-img{width:100%;height:420px;object-fit:cover;display:block;}
.about-img-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,109,178,0.35),rgba(0,201,167,0.2));display:flex;align-items:center;justify-content:center;font-size:4.5rem;color:#fff;opacity:0;transition:var(--t);}
.about-img-box:hover .about-img-ov{opacity:1;}
.about-float{position:absolute;bottom:-18px;right:-18px;background:linear-gradient(135deg,#004f82,#009e84);color:#fff;padding:16px 22px;border-radius:14px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:0.9rem;box-shadow:0 0 28px rgba(0,201,167,0.4);}
.about-body h3{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;color:#fff;margin-bottom:18px;line-height:1.2;}
.about-body h3 span{background:linear-gradient(135deg,#4db3e8,#00C9A7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.about-body p{color:#6b82a0;margin-bottom:18px;line-height:1.85;}
.feat-list{margin:28px 0;display:flex;flex-direction:column;gap:12px;}
.feat-item{display:flex;align-items:center;gap:14px;color:#dce8f5;padding:10px 14px;border-radius:10px;background:rgba(0,109,178,0.06);border:1px solid rgba(0,109,178,0.12);transition:var(--t);}
.feat-item:hover{background:rgba(0,109,178,0.12);border-color:rgba(0,109,178,0.3);}
.feat-item i{color:#00C9A7;font-size:1rem;flex-shrink:0;}

/* ── COURSES ── */
.courses{padding:110px 0;background:rgba(6,10,18,0.85);}
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;}
.course-card{background:#0c1220;border:1px solid rgba(0,109,178,0.18);border-radius:14px;padding:30px;position:relative;transition:var(--t);overflow:hidden;}
.course-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#006DB2,#00C9A7,#38bdf8);transform:scaleX(0);transition:var(--t);transform-origin:left;}
.course-card:hover{transform:translateY(-10px);border-color:rgba(0,109,178,0.5);box-shadow:0 24px 48px rgba(0,0,0,0.5),0 0 28px rgba(0,109,178,0.4);}
.course-card:hover::before{transform:scaleX(1);}
.c-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,rgba(0,109,178,0.2),rgba(11, 159, 245, 0.12));border:1px solid rgba(0,109,178,0.3);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#4db3e8;margin-bottom:18px;transition:var(--t);}
.course-card:hover .c-icon{background:linear-gradient(135deg,#004f82,#009e84);color:#fff;box-shadow:0 0 20px rgba(0,201,167,0.4);}
.c-badge{position:absolute;top:18px;right:18px;background:linear-gradient(135deg,#004f82,#006DB2);color:#fff;padding:4px 12px;border-radius:50px;font-size:0.72rem;font-weight:700;font-family:'JetBrains Mono',monospace;}
.c-badge.amber{background:linear-gradient(135deg,#009e84,#00C9A7);}
.course-card h3{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.3;}
.course-card p{color:#6b82a0;font-size:0.9rem;margin-bottom:18px;line-height:1.65;}
.c-meta{display:flex;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
.c-meta span{color:#6b82a0;font-size:0.8rem;display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;}
.c-meta i{color:#4db3e8;}

/* ── SERVICES ── */
.services{padding:110px 0;background:rgba(10,15,28,0.88);}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px;}
.svc-card{background:#0c1220;border:1px solid rgba(56,189,248,0.12);border-radius:14px;padding:34px;transition:var(--t);position:relative;overflow:hidden;}
.svc-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#38bdf8,#006DB2);transform:scaleX(0);transition:var(--t);transform-origin:right;}
.svc-card:hover{transform:translateY(-8px);border-color:rgba(56,189,248,0.4);box-shadow:0 24px 48px rgba(0,0,0,0.5),0 0 24px rgba(56,189,248,0.35);}
.svc-card:hover::before{transform:scaleX(1);}
.svc-icon{width:58px;height:58px;border-radius:14px;background:linear-gradient(135deg,rgba(56,189,248,0.15),rgba(0,109,178,0.1));border:1px solid rgba(56,189,248,0.25);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#38bdf8;margin-bottom:18px;transition:var(--t);}
.svc-card:hover .svc-icon{background:linear-gradient(135deg,rgba(56,189,248,0.3),rgba(0,109,178,0.2));box-shadow:0 0 20px rgba(56,189,248,0.4);}
.svc-card h3{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:12px;}
.svc-card p{color:#6b82a0;font-size:0.9rem;line-height:1.75;margin-bottom:22px;}
.svc-link{color:#38bdf8;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:7px;font-size:0.9rem;transition:var(--t);}
.svc-link:hover{gap:12px;color:#00C9A7;}

/* ── WHY US ── */
.why{padding:90px 0;background:rgba(13,20,34,0.88);}
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px;}
.why-card{background:#0c1220;border:1px solid rgba(0,109,178,0.22);border-radius:14px;padding:34px;text-align:center;transition:var(--t);position:relative;overflow:hidden;}
.why-card:hover{transform:translateY(-8px);border-color:#006DB2;box-shadow:0 0 28px rgba(0,109,178,0.45);}
.why-card i{font-size:2.4rem;margin-bottom:18px;display:block;background:linear-gradient(135deg,#4db3e8,#00C9A7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.why-card h4{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:#fff;margin-bottom:10px;}
.why-card p{color:#6b82a0;font-size:0.88rem;line-height:1.65;}

/* ── CONTACT ── */
.contact{padding:110px 0;background:rgba(6,10,18,0.85);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.c-item{display:flex;gap:20px;margin-bottom:34px;align-items:flex-start;}
.c-ico{width:54px;height:54px;flex-shrink:0;background:linear-gradient(135deg,rgba(0,109,178,0.15),rgba(0,201,167,0.1));border:1px solid rgba(0,109,178,0.3);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#4db3e8;}
.c-item h4{font-family:'Syne',sans-serif;color:#fff;font-size:1rem;font-weight:700;margin-bottom:6px;}
.c-item p{color:#6b82a0;font-size:0.88rem;margin-bottom:8px;line-height:1.6;}
.c-link{color:#00C9A7;text-decoration:none;font-weight:600;font-size:0.9rem;display:inline-flex;align-items:center;gap:6px;transition:var(--t);}
.c-link:hover{color:#4db3e8;gap:10px;}
.contact-form-box{background:#0c1220;border:1px solid rgba(0,109,178,0.22);border-radius:20px;padding:38px;}
.contact-form-box h3{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;color:#fff;margin-bottom:26px;}
.fg{margin-bottom:16px;}
.fg input,.fg select,.fg textarea{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(0,109,178,0.22);border-radius:10px;padding:13px 16px;color:#dce8f5;font-family:'Space Grotesk',sans-serif;font-size:0.95rem;transition:var(--t);outline:none;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:#1a8fd1;background:rgba(0,109,178,0.07);box-shadow:0 0 0 3px rgba(0,109,178,0.18);}
.fg input::placeholder,.fg textarea::placeholder{color:#6b82a0;}
.fg select option{background:#0a0f1c;color:#dce8f5;}
.fg textarea{resize:vertical;}

/* ── FOOTER ── */
.footer{background:rgba(10,15,28,0.95);border-top:1px solid rgba(0,109,178,0.22);padding:70px 0 0;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.footer-brand p{color:#6b82a0;font-size:0.9rem;margin:16px 0 26px;line-height:1.75;}
.socials{display:flex;gap:12px;}
.socials a{width:42px;height:42px;background:rgba(0,109,178,0.1);border:1px solid rgba(0,109,178,0.25);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#4db3e8;text-decoration:none;font-size:1rem;transition:var(--t);}
.socials a:hover{background:linear-gradient(135deg,#004f82,#009e84);color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:0 0 20px rgba(0,201,167,0.4);}
.footer-col h4{font-family:'Syne',sans-serif;font-size:0.88rem;font-weight:700;color:#fff;margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:11px;}
.footer-col a{color:#6b82a0;text-decoration:none;font-size:0.9rem;transition:var(--t);}
.footer-col a:hover{color:#4db3e8;padding-left:5px;}
.footer-bottom{border-top:1px solid rgba(0,109,178,0.22);padding:22px 0;text-align:center;color:#6b82a0;font-size:0.85rem;font-family:'JetBrains Mono',monospace;}
.footer-bottom span{color:#00C9A7;}

/* ── MODAL ── */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.3s;backdrop-filter:blur(14px);}
.modal-ov.active{opacity:1;pointer-events:all;}
.modal-box{background:#0a0f1c;border:1px solid rgba(0,109,178,0.35);border-radius:20px;max-width:720px;width:100%;max-height:88vh;overflow-y:auto;position:relative;transform:scale(0.88) translateY(20px);transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 40px 80px rgba(0,0,0,0.7),0 0 28px rgba(0,109,178,0.4);}
.modal-ov.active .modal-box{transform:scale(1) translateY(0);}
.modal-box::before{content:'';display:block;height:3px;background:linear-gradient(90deg,#006DB2,#00C9A7,#38bdf8);border-radius:20px 20px 0 0;}
.modal-close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);color:#6b82a0;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:0.95rem;transition:var(--t);z-index:1;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{background:#ef4444;color:#fff;border-color:#ef4444;}
.modal-body{padding:36px 36px 20px;}
.m-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,rgba(0,109,178,0.2),rgba(0,201,167,0.15));border:1px solid rgba(0,109,178,0.3);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#4db3e8;margin-bottom:18px;}
.modal-body h2{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:10px;}
.m-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(0,201,167,0.1);color:#2de8c8;border:1px solid rgba(0,201,167,0.25);padding:5px 14px;border-radius:50px;font-family:'JetBrains Mono',monospace;font-size:0.75rem;margin-bottom:22px;}
.m-meta{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 22px;padding:16px;background:rgba(0,109,178,0.07);border:1px solid rgba(0,109,178,0.15);border-radius:12px;}
.m-meta-i{display:flex;align-items:center;gap:8px;color:#6b82a0;font-size:0.85rem;font-family:'JetBrains Mono',monospace;}
.m-meta-i i{color:#4db3e8;}
.modal-body p{color:#6b82a0;line-height:1.85;margin-bottom:18px;}
.modal-body h4{font-family:'Syne',sans-serif;color:#2de8c8;font-size:1rem;font-weight:700;margin:22px 0 12px;display:flex;align-items:center;gap:8px;}
.modal-body ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.modal-body ul li{display:flex;align-items:flex-start;gap:10px;color:#6b82a0;font-size:0.92rem;line-height:1.6;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);transition:var(--t);}
.modal-body ul li:hover{background:rgba(0,109,178,0.07);border-color:rgba(0,109,178,0.18);}
.modal-body ul li::before{content:'▸';color:#4db3e8;flex-shrink:0;margin-top:2px;font-size:0.8rem;}
.modal-foot{padding:20px 36px 28px;border-top:1px solid rgba(0,109,178,0.22);display:flex;gap:12px;}

/* ── BACK TO TOP ── */
.btt{position:fixed;bottom:28px;right:28px;z-index:999;width:48px;height:48px;background:linear-gradient(135deg,#004f82,#009e84);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:1rem;box-shadow:0 0 20px rgba(0,109,178,0.5);transition:var(--t);opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.btt.show{opacity:1;pointer-events:all;}
.btt:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 0 28px rgba(0,201,167,0.5);}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.reveal{opacity:0;transform:translateY(36px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── RESPONSIVE ── */
@media(max-width:992px){
  .hero-inner{text-align:center;}
  .hero-btns{justify-content:center;}
  .hero-stats{justify-content:center;}
  .hero-desc{margin:0 auto 36px;}
  .about-grid{grid-template-columns:1fr;}
  .about-float{display:none;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(6,10,18,0.98);padding:20px 24px;border-bottom:1px solid rgba(0,109,178,0.2);gap:4px;}
  .nav-links.open{display:flex;}
  .hamburger{display:flex;}
  .footer-grid{grid-template-columns:1fr;}
  .modal-foot{flex-direction:column;}
  .modal-body{padding:24px 24px 16px;}
  .modal-foot{padding:16px 24px 24px;}
}
@media(max-width:480px){
  .hero-stats{gap:20px;}
  .stat-n{font-size:1.8rem;}
  .courses-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
}

/* ── NAV ACTIVE STATE ── */
.nav-links a.nav-active{color:#4db3e8 !important;background:rgba(0,109,178,0.1);}

/* ── VIEW COUNTER ── */
.view-counter{
  position:fixed;bottom:88px;right:28px;z-index:998;
  display:flex;align-items:center;gap:8px;
  background:rgba(6,10,18,0.92);
  border:1px solid rgba(0,109,178,0.4);
  border-radius:50px;
  padding:8px 16px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:#4db3e8;
  backdrop-filter:blur(12px);
  box-shadow:0 0 20px rgba(0,109,178,0.25);
  transition:all 0.3s ease;
  cursor:default;
  user-select:none;
}
.view-counter:hover{
  border-color:rgba(0,201,167,0.5);
  box-shadow:0 0 24px rgba(0,201,167,0.3);
  color:#00C9A7;
}
.view-counter i{font-size:0.85rem;color:#00C9A7;}
#viewCount{
  font-weight:700;
  font-size:0.85rem;
  color:#fff;
  min-width:28px;
  text-align:center;
}

/* ── PAGE HERO (for inner pages) ── */
.page-hero{
  min-height:38vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:140px 24px 70px;
  position:relative;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(0,109,178,0.1) 0%,transparent 70%);
}
.page-hero-inner{max-width:700px;margin:0 auto;}
.page-hero-inner .sec-tag{margin-bottom:20px;}
.page-hero-inner h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:800;color:#fff;
  line-height:1.1;margin-bottom:16px;
  animation:fadeUp 0.7s ease both;
}
.page-hero-inner h1 span{
  background:linear-gradient(135deg,#4db3e8,#00C9A7);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.page-hero-inner p{
  color:#6b82a0;font-size:1.05rem;
  animation:fadeUp 0.7s ease 0.2s both;
}

/* Inner page sections don't need top padding since page-hero handles spacing */
.page-section{padding-top:60px;}

/* ==========================
   MOBILE RESPONSIVE DESIGN
   ========================== */

@media (max-width: 768px) {

    /* Navbar */
    .nav-container {
        padding: 10px 15px;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    /* Hero Section */
    .hero {
        padding: 120px 20px 60px;
        text-align: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-sub,
    .hero-desc {
        font-size: 1rem;
    }

    .hero-btns {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 30px;
    }

    /* About Section */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-body {
        text-align: center;
    }

    /* Courses */
    .courses-grid {
        grid-template-columns: 1fr;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Why Us */
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Buttons */
    .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Small Phones */
@media (max-width: 480px) {

    .hero-title {
        font-size: 2rem;
    }

    .sec-head h2 {
        font-size: 1.8rem;
    }

    .course-card,
    .svc-card,
    .why-card {
        padding: 20px;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   MOBILE FIXES FOR HACKNOVASEC
   =================================== */

@media screen and (max-width: 768px) {

    /* Navbar */
    .navbar{
        padding: 10px 0;
        height: auto;
    }

    .nav-container{
        padding: 0 15px;
        min-height: 70px;
    }

    .logo-wrap{
        width: 50px;
        height: 50px;
    }

    .logo-img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .logo-text{
        font-size: 1.3rem;
        white-space: nowrap;
    }

    /* Hero Section */
    .hero{
        padding-top: 110px;
        min-height: auto;
    }

    .hero-inner{
        width: 100%;
        padding: 0 20px;
    }

    .hero-left{
        width: 100%;
        text-align: center;
    }

    .hero-title{
        font-size: 3rem;
        line-height: 1.1;
        word-break: break-word;
    }

    .hero-sub{
        font-size: 1.2rem;
    }

    .hero-desc{
        font-size: 1rem;
        line-height: 1.8;
        max-width: 100%;
    }

    /* Buttons */
    .hero-btns{
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .hero-btns .btn{
        width: 100%;
    }

    /* Stats */
    .hero-stats{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 25px;
        margin-top: 40px;
    }

    .stat{
        text-align: center;
    }

    .stat-n{
        font-size: 2.5rem;
    }

    /* About */
    .about-grid{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* Courses */
    .courses-grid{
        grid-template-columns: 1fr;
    }

    /* Services */
    .services-grid{
        grid-template-columns: 1fr;
    }

    /* Why Us */
    .why-grid{
        grid-template-columns: 1fr;
    }

    /* Contact */
    .contact-grid{
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid{
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ===================================
   EXTRA SMALL DEVICES
   =================================== */

@media screen and (max-width: 480px){

    .logo-wrap{
        width: 42px;
        height: 42px;
    }

    .logo-text{
        font-size: 1.1rem;
    }

    .hero-title{
        font-size: 2.3rem;
    }

    .hero-sub{
        font-size: 1rem;
    }

    .hero-desc{
        font-size: 0.95rem;
    }

    .hero-stats{
        grid-template-columns: 1fr;
    }

    .sec-head h2{
        font-size: 2rem;
    }
}