/* ===========================
   Home.html style NAV (scoped)
============================ */
.clikin-topnav{
  --ink:#1d1d1f;
  --padX:60px;
  --padXsm:25px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
}
.clikin-topnav *{ box-sizing:border-box; }
.clikin-topnav a{ text-decoration:none; color:inherit; transition:color .2s; }
.clikin-topnav a, .clikin-topnav button{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.clikin-topnav button{ font-family:inherit; }
.clikin-topnav .clWrap{ max-width:1180px; margin:0 auto; padding-left:var(--padX); padding-right:var(--padX); }
.clikin-topnav .clNav{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.clikin-topnav .clNavIn{ height:64px; display:flex; align-items:center; justify-content:center; position:relative; }
.clikin-topnav .clNavLinks{ display:flex; gap:28px; align-items:center; justify-content:center; flex-wrap:wrap; }
.clikin-topnav .clNavLinks a{ font-size:13px; letter-spacing:.20em; text-transform:uppercase; color:rgba(29,29,31,.78); font-weight:650; padding:10px 2px; border-bottom:2px solid transparent; white-space:nowrap; }
.clikin-topnav .clNavLinks a:hover{ color:var(--blue2); border-bottom-color:rgba(0,113,227,.25); }
.clikin-topnav .clHamb{ display:none; position:absolute; left:var(--padX); top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.88); box-shadow:0 10px 24px rgba(0,113,227,.10); cursor:pointer; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.clikin-topnav .clHamb:active{ transform:translateY(-50%) scale(.98); }
.clikin-topnav .clHambLines{ width:18px; height:12px; display:flex; flex-direction:column; justify-content:space-between; }
.clikin-topnav .clHambLines span{ display:block; height:2px; border-radius:2px; background:rgba(29,29,31,.80); }
.clikin-topnav .clMPanel{ display:none; border-top:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter:blur(14px);  position:absolute; top:64px; left:0; right:0; z-index:250; }
.clikin-topnav .clMPanelIn{ padding:10px 24px 14px; display:grid; gap:6px; }
.clikin-topnav .clMPanel a{ padding:12px 0; font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:rgba(29,29,31,.82); border-bottom:1px solid var(--line); }
.clikin-topnav .clMPanel a:last-child{ border-bottom:none; }
@media (max-width:1024px){
  .clikin-topnav .clHamb{ display:flex; }
  .clikin-topnav .clNavLinks{ display:none; }
  .clikin-topnav .clMPanel.open{ display:block; }
}
@media (max-width:560px){
  .clikin-topnav{ --padX:var(--padXsm); }
  .clikin-topnav .clNavIn{ height:60px; }
  .clikin-topnav .clMPanel{ top:60px; }
  .clikin-topnav .clHamb{ left:var(--padX); width:42px; height:42px; border-radius:12px; }
}
.clikin-topnav a:focus-visible, .clikin-topnav button:focus-visible{
  outline:3px solid rgba(0,113,227,.28);
  outline-offset:2px;
  border-radius:14px;
}


/* ===========================
   Theme alignment + vibrancy
=========================== */
.clikin-topnav{
  --ink:var(--ink);
  --accent:var(--blue2);
}

.clNav{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}

.clNavLinks a:hover{
  color:var(--blue2);
}

.clNavLinks a.isActive{
  border-bottom-color:rgba(0,113,227,.55);
}

@media (prefers-reduced-transparency: reduce){
  .clNav{ backdrop-filter:none; background:#fff; }
}