/* =================== Professional navigation =================== */

/* ---- top bar ---- */
.topbar{background:linear-gradient(90deg,#12142b,#1b1f3b 60%,#2a1d4d);font-size:.8rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar a{color:#d7d9ee;transition:color .25s}
.topbar a:hover{color:#ffb27d}
.tb-soc{display:inline-flex;gap:.2rem;margin-left:1rem;padding-left:1rem;border-left:1px solid rgba(255,255,255,.18)}
.tb-soc a{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:.8rem;transition:.3s var(--ease,ease)}
.tb-soc a:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}

/* ---- main bar ---- */
.main-nav{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  padding:.55rem 0;border-bottom:1px solid rgba(27,31,59,.06);transition:padding .35s var(--ease,ease),box-shadow .35s,background .35s}
.main-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--primary),#7b5cff,transparent);opacity:0;transition:opacity .4s}
.main-nav.scrolled{padding:.3rem 0;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(27,31,59,.1)}
.main-nav.scrolled::after{opacity:.9}
.main-nav .container{gap:1rem}

/* brand */
.navbar-brand{gap:.1rem;margin-right:.5rem}
.brand-mark{width:42px;height:42px;border-radius:13px;font-size:1.3rem;box-shadow:0 8px 18px rgba(194,65,12,.35);transition:transform .45s var(--ease,ease),width .3s,height .3s}
.navbar-brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.main-nav.scrolled .brand-mark{width:36px;height:36px;font-size:1.1rem;border-radius:11px}
.brand-wrap{display:flex;flex-direction:column;line-height:1.1}
.brand-text{font-size:1.3rem;letter-spacing:-.01em}
.brand-sub{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5f6278;margin-top:2px}
.main-nav.scrolled .brand-sub{display:none}

/* links: pill style */
.main-nav .navbar-nav{gap:.15rem}
.main-nav .nav-link{display:inline-flex;align-items:center;gap:.4rem;border-radius:50px;font-weight:500;font-size:.92rem;color:var(--dark);
  padding:.5rem .85rem!important;transition:background .3s var(--ease,ease),color .3s,transform .3s var(--ease,ease)}
.main-nav .nav-link::after{display:none}
.main-nav .nav-link:hover{background:rgba(194,65,12,.08);color:var(--primary);transform:translateY(-1px)}
.main-nav .nav-link.active{background:linear-gradient(135deg,rgba(194,65,12,.14),rgba(123,92,255,.1));color:var(--primary);font-weight:600;box-shadow:inset 0 0 0 1px rgba(194,65,12,.18)}
.nav-ic{display:none;font-size:1.05rem}
.main-nav .dropdown-toggle::after{display:inline-block!important;position:static;margin-left:.15rem;border-width:.28em .28em 0;transition:transform .3s;background:none;height:0;opacity:.7}
.main-nav .dropdown.show .dropdown-toggle::after{transform:rotate(180deg)}

/* dropdown panel */
.main-nav .dropdown-menu{margin-top:.7rem;padding:.5rem;min-width:240px;border:1px solid rgba(27,31,59,.07);border-radius:16px;box-shadow:0 24px 50px rgba(27,31,59,.18);
  background:rgba(255,255,255,.98);animation:ddIn .3s var(--ease,ease)}
.main-nav .dropdown-menu::before{content:"";position:absolute;top:-6px;left:28px;width:12px;height:12px;background:#fff;border-left:1px solid rgba(27,31,59,.07);border-top:1px solid rgba(27,31,59,.07);transform:rotate(45deg)}
@keyframes ddIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.main-nav .dropdown-item{display:flex;align-items:center;gap:.7rem;border-radius:11px;padding:.6rem .8rem;font-size:.9rem;font-weight:500;color:var(--dark);transition:background .25s,transform .25s var(--ease,ease),color .25s}
.main-nav .dropdown-item i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.95rem;color:var(--primary);background:rgba(194,65,12,.1);flex:none;transition:.3s}
.main-nav .dropdown-item:hover,.main-nav .dropdown-item:focus{background:rgba(194,65,12,.07);color:var(--primary);transform:translateX(4px)}
.main-nav .dropdown-item:hover i{background:var(--primary);color:#fff}

/* CTA */
.main-nav .btn-brand{padding:.55rem 1.25rem;font-size:.9rem;white-space:nowrap}

/* hamburger */
.navbar-toggler{width:44px;height:44px;border-radius:12px!important;background:rgba(194,65,12,.08);display:grid;place-items:center;padding:0;transition:background .3s}
.navbar-toggler:hover{background:rgba(194,65,12,.16)}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(194,65,12,.25)}
.navbar-toggler i{font-size:1.7rem!important;color:var(--primary);transition:transform .35s var(--ease,ease)}
.navbar-toggler[aria-expanded="true"] i{transform:rotate(90deg)}
.navbar-toggler[aria-expanded="true"] i::before{content:"\f62a"}

/* ---- desktop sizing ---- */
@media(min-width:992px) and (max-width:1199px){
  .main-nav .nav-link{padding:.45rem .6rem!important;font-size:.85rem}
  .brand-sub{display:none}
  .brand-text{font-size:1.15rem}
  .main-nav .btn-brand{padding:.5rem .95rem;font-size:.85rem}
  .main-nav .btn-brand i{display:none}
}

/* ---- mobile / tablet menu panel ---- */
@media(max-width:991px){
  .main-nav{padding:.45rem 0}
  .main-nav .navbar-collapse{margin:.6rem 0 .3rem;padding:.6rem;background:#fff;border-radius:18px;border:1px solid rgba(27,31,59,.07);box-shadow:0 22px 44px rgba(27,31,59,.16);max-height:calc(100dvh - 130px);overflow-y:auto}
  .main-nav .navbar-nav{gap:.1rem;align-items:stretch!important}
  .main-nav .nav-link{padding:.8rem .9rem!important;font-size:1rem;border-radius:12px;width:100%}
  .nav-ic{display:inline-block;width:32px;height:32px;border-radius:10px;place-items:center;text-align:center;line-height:32px;background:rgba(194,65,12,.1);color:var(--primary);font-size:1rem;flex:none}
  .main-nav .nav-link.active .nav-ic{background:var(--primary);color:#fff}
  .main-nav .dropdown-toggle::after{margin-left:auto}
  .main-nav .dropdown-menu{position:static;box-shadow:none;border:0;border-left:2px solid rgba(194,65,12,.25);border-radius:0;margin:.1rem 0 .4rem 1.4rem;padding:.2rem 0 .2rem .4rem;min-width:0;background:transparent;animation:none}
  .main-nav .dropdown-menu::before{display:none}
  .main-nav .btn-brand{width:100%;justify-content:center;padding:.8rem;margin-top:.4rem}
  .brand-sub{display:none}
}
@media(max-width:991px){.main-nav .navbar-nav .nav-item.ms-lg-3{margin-left:0!important}}

/* ---- fit: wider bar on desktop, caret fix ---- */
.main-nav .dropdown-toggle::after,.main-nav .nav-link.dropdown-toggle:hover::after{transform:none;content:"";width:0;height:0;border-style:solid;border-color:currentColor transparent transparent;border-width:.32em .3em 0;background:none;left:auto;right:auto;bottom:auto}
.main-nav .dropdown.show .dropdown-toggle::after{transform:rotate(180deg)}
@media(min-width:1200px){
  .main-nav>.container{max-width:min(1300px,96vw)}
  .main-nav .nav-link{padding:.5rem .72rem!important;font-size:.9rem}
}
@media(min-width:992px) and (max-width:1399px){.brand-sub{display:none}}

/* =================== Attractive menubar polish =================== */
.main-nav{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));border-bottom:0;box-shadow:0 4px 24px rgba(27,31,59,.07)}
.main-nav::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--primary),#ffb347,#7b5cff,var(--primary));background-size:200% 100%;animation:navFlow 8s linear infinite}
@keyframes navFlow{to{background-position:200% 0}}

/* animated underline instead of flat hover fill */
.main-nav .nav-link{position:relative;overflow:hidden}
.main-nav .nav-link:not(.dropdown-toggle)::before,.main-nav .nav-link.dropdown-toggle::before{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2.5px;border-radius:3px;background:linear-gradient(90deg,var(--primary),#7b5cff);transform:translateX(-50%);transition:width .35s var(--ease,ease)}
.main-nav .nav-link:hover::before,.main-nav .nav-link.active::before{width:calc(100% - 1.6rem)}
.main-nav .nav-link:hover{background:transparent;transform:none}
.main-nav .nav-link.active{background:rgba(194,65,12,.08);box-shadow:none}

/* brand mark gradient glow */
.brand-mark{background:linear-gradient(135deg,var(--primary),#ffb347 120%);color:#fff;display:grid;place-items:center;font-weight:800}
.brand-text{background:linear-gradient(90deg,var(--dark),var(--primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}

/* glowing CTA */
.main-nav .btn-brand{background:linear-gradient(135deg,var(--primary),#ff9a3c);border:0;color:#fff;border-radius:50px;font-weight:600;
  box-shadow:0 8px 22px rgba(232,89,12,.38);transition:transform .3s var(--ease,ease),box-shadow .3s}
.main-nav .btn-brand:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 30px rgba(232,89,12,.5);color:#fff}

/* open dropdowns on hover (desktop) */
@media(min-width:992px){
  .main-nav .dropdown:hover>.dropdown-menu{display:block}
  .main-nav .dropdown>.dropdown-menu{margin-top:0}
  .main-nav .dropdown>.dropdown-menu::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .main-nav .dropdown:hover>.dropdown-toggle::after{transform:rotate(180deg)}
}

/* mobile panel */
@media(max-width:991px){
  .main-nav .navbar-collapse{background:linear-gradient(180deg,#fff,#fff7f1);border-top:3px solid var(--primary)}
  .main-nav .nav-link:hover::before,.main-nav .nav-link.active::before{display:none}
  .main-nav .nav-link.active{background:linear-gradient(135deg,rgba(194,65,12,.14),rgba(123,92,255,.1))}
}
@media(prefers-reduced-motion:reduce){.main-nav::before{animation:none}}

/* ---- mobile: smaller, auto-scaling menu text ---- */
@media(max-width:991px){
  .main-nav .nav-link{font-size:clamp(.82rem,3.4vw,.95rem);padding:.6rem .8rem!important}
  .main-nav .dropdown-item{font-size:clamp(.78rem,3.2vw,.9rem);padding:.45rem .6rem}
  .main-nav .dropdown-item i{width:26px;height:26px;font-size:.85rem}
  .nav-ic{width:28px;height:28px;line-height:28px;font-size:.9rem}
  .brand-text{font-size:clamp(1rem,4.6vw,1.2rem)}
  .main-nav .btn-brand{font-size:clamp(.82rem,3.4vw,.92rem);padding:.65rem}
}

/* ---- mobile: smaller fonts site-wide (rem-based sizes scale together) ---- */
@media(max-width:767px){
  html{font-size:clamp(13px,3.7vw,15px)}
}
@media(max-width:991px){
  .main-nav .nav-link{font-size:clamp(.78rem,3.2vw,.88rem);padding:.5rem .7rem!important}
  .main-nav .dropdown-item{font-size:clamp(.74rem,3vw,.84rem)}
  .brand-text{font-size:clamp(.95rem,4.2vw,1.1rem)}
  .brand-mark{width:34px;height:34px;font-size:1rem}
}

/* tighter bottom space under portal grids (disclaimer removed) */
.portals-sec{padding-bottom:1.5rem!important}

/* animated stat cards: gentle float + staggered pop-in + icon pulse */
.hero-stats .stat-glass{animation:statPop .7s var(--ease,ease) both,statFloat 5s ease-in-out infinite;animation-delay:var(--d,0ms),calc(var(--d,0ms) + .7s)}
.hero-stats .stat-glass i{animation:statPulse 2.6s ease-in-out infinite}
.hero-stats .stat-glass:hover{transform:translateY(-6px) scale(1.04)}
@keyframes statPop{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
@keyframes statFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes statPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.hero-stats .stat-glass,.hero-stats .stat-glass i{animation:none}}

/* =================== Attractive animated stat cards =================== */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.hero-stats .stat-glass{position:relative;overflow:hidden;isolation:isolate;border:0;
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.06));
  box-shadow:0 16px 36px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35)}
/* rotating gradient border */
.hero-stats .stat-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--ang),transparent 0 55%,#ffb347,#ff5e62,#7b5cff,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:statSpin 4s linear infinite}
/* shine sweep */
.hero-stats .stat-glass::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:statShine 5s ease-in-out infinite;animation-delay:calc(var(--d,0ms) + 1s)}
@keyframes statSpin{to{--ang:360deg}}
@keyframes statShine{0%,60%{left:-60%}100%{left:130%}}
/* icon badge + gradient numbers */
.hero-stats .stat-glass i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;font-size:1.3rem;color:#fff;
  background:linear-gradient(135deg,var(--primary),#ffb347);box-shadow:0 8px 18px rgba(232,89,12,.45)}
.hero-stats .stat-glass b{background:linear-gradient(90deg,#fff,#ffd9b0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.hero-stats .stat-glass:hover{box-shadow:0 22px 44px rgba(232,89,12,.4),inset 0 1px 0 rgba(255,255,255,.45)}
@media(max-width:991px){.hero-stats .stat-glass i{width:30px;height:30px;font-size:1rem;border-radius:9px}}
@media(prefers-reduced-motion:reduce){.hero-stats .stat-glass::before,.hero-stats .stat-glass::after{animation:none}}