/* =========================================================
   CLiKIN premium visual alignment
   Purpose:
   - keep each page's original layout and content
   - only align color, polish, cards, buttons, and surfaces
   - designed to work as an override layer on top of existing pages
   ========================================================= */

/* ---------- shared premium palette ---------- */
body.clikin-topnav .cl-site{
  --tint: rgba(10,132,255,.06) !important;
  --bg: #ffffff !important;
  --bg-alt: #f5f8ff !important;
  --surface: rgba(255,255,255,.9) !important;
  --surface2: #f4f8ff !important;
  --ink: #0f1728 !important;
  --muted: #5f6b7c !important;
  --line: rgba(10,132,255,.14) !important;

  --accent: #0A84FF !important;
  --accent-hover: #006ee6 !important;

  --blue: #0A84FF !important;
  --blue2: #005fcc !important;
  --green: #54c7ec !important;

  --shadow-sm: 0 10px 24px rgba(15,23,40,.05) !important;
  --shadow-md: 0 18px 48px rgba(15,23,40,.08) !important;
  --shadow: 0 16px 40px rgba(15,23,40,.07) !important;
  --shadow2: 0 24px 60px rgba(15,23,40,.10) !important;
}

/* ---------- page background ---------- */
body.clikin-topnav{
  background:
    radial-gradient(circle at top left, rgba(84,199,236,.16), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(124,108,255,.08), transparent 24%),
    linear-gradient(180deg,#fbfcff 0%,#f6f8fc 44%,#ffffff 100%) !important;
}

/* ---------- nav polish ---------- */
body.clikin-topnav .clNav{
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(10,132,255,.10) !important;
}

body.clikin-topnav .clNavLinks a,
body.clikin-topnav .clMPanel a{
  color: rgba(15,23,40,.72) !important;
}

body.clikin-topnav .clNavLinks a:hover,
body.clikin-topnav .clMPanel a:hover{
  color: #0A84FF !important;
}

body.clikin-topnav .clNavLinks .isActive,
body.clikin-topnav .clNavLinks a.isActive{
  color: #0f1728 !important;
}

/* ---------- hero alignment ---------- */
body.clikin-topnav .cl-site .hero{
  background:
    radial-gradient(900px 520px at 18% -140px, rgba(10,132,255,.12) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(760px 380px at 90% 40%, rgba(84,199,236,.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 58%, #f5f8ff 100%) !important;
  border-bottom: 1px solid rgba(15,23,40,.06) !important;
}

/* ---------- section separators ---------- */
body.clikin-topnav .cl-site .rule{
  background: linear-gradient(90deg, transparent, rgba(10,132,255,.14), transparent) !important;
}

/* ---------- kickers / pills / tags / chips ---------- */
body.clikin-topnav .cl-site .kicker,
body.clikin-topnav .cl-site .pill,
body.clikin-topnav .cl-site .tag,
body.clikin-topnav .cl-site .chip,
body.clikin-topnav .cl-site .badge{
  border-color: rgba(10,132,255,.14) !important;
  background: rgba(10,132,255,.07) !important;
  color: #005fcc !important;
  box-shadow: none !important;
}

body.clikin-topnav .cl-site .kdot,
body.clikin-topnav .cl-site .bdot.blue{
  background: linear-gradient(135deg, #0A84FF, #54c7ec) !important;
}

body.clikin-topnav .cl-site .bdot.green{
  background: linear-gradient(135deg, #54c7ec, #7c6cff) !important;
}

body.clikin-topnav .cl-site .bdot.amber{
  background: linear-gradient(135deg, #7c6cff, #0A84FF) !important;
}

/* ---------- cards ---------- */
body.clikin-topnav .cl-site .card,
body.clikin-topnav .cl-site .post,
body.clikin-topnav .cl-site .sideCard,
body.clikin-topnav .cl-site .featured,
body.clikin-topnav .cl-site .note,
body.clikin-topnav .cl-site .ctaBox{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,40,.07) !important;
  box-shadow: 0 16px 44px rgba(15,23,40,.07) !important;
  backdrop-filter: blur(14px) !important;
}

/* subtle premium glow */
body.clikin-topnav .cl-site .card,
body.clikin-topnav .cl-site .post,
body.clikin-topnav .cl-site .sideCard,
body.clikin-topnav .cl-site .featured{
  position: relative;
  overflow: hidden;
}

body.clikin-topnav .cl-site .card::after,
body.clikin-topnav .cl-site .post::after,
body.clikin-topnav .cl-site .sideCard::after,
body.clikin-topnav .cl-site .featured::after{
  content: "";
  position: absolute;
  inset: auto -30px -40px auto;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(10,132,255,.10), transparent 66%);
  pointer-events: none;
}

/* ---------- card headers ---------- */
body.clikin-topnav .cl-site .cardHd,
body.clikin-topnav .cl-site .postTop,
body.clikin-topnav .cl-site .featuredTop{
  border-color: rgba(15,23,40,.06) !important;
}

/* ---------- buttons ---------- */
body.clikin-topnav .cl-site .btn{
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,40,.09) !important;
  box-shadow: 0 10px 24px rgba(15,23,40,.05) !important;
}

body.clikin-topnav .cl-site .btnPrimary{
  background: linear-gradient(180deg, #0A84FF, #005fcc) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.clikin-topnav .cl-site .btnPrimary:hover{
  background: linear-gradient(180deg, #1590ff, #0067d8) !important;
}

body.clikin-topnav .cl-site .btnGhost,
body.clikin-topnav .cl-site .btn:not(.btnPrimary){
  background: rgba(255,255,255,.92) !important;
  color: #0f1728 !important;
}

body.clikin-topnav .cl-site .btnGhost:hover,
body.clikin-topnav .cl-site .btn:not(.btnPrimary):hover{
  border-color: rgba(10,132,255,.22) !important;
  color: #0A84FF !important;
  background: rgba(10,132,255,.05) !important;
}

/* ---------- pricing specific ---------- */
body.clikin-topnav .cl-site .tick{
  background: rgba(10,132,255,.10) !important;
  color: #005fcc !important;
}

body.clikin-topnav .cl-site .price{
  color: #0f1728 !important;
}

body.clikin-topnav .cl-site .note{
  background: linear-gradient(180deg,#ffffff,#f7fbff) !important;
}

/* ---------- blogs specific ---------- */
body.clikin-topnav .cl-site .search{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,40,.08) !important;
  box-shadow: 0 12px 30px rgba(15,23,40,.05) !important;
}

body.clikin-topnav .cl-site input,
body.clikin-topnav .cl-site select{
  border-color: rgba(15,23,40,.08) !important;
}

body.clikin-topnav .cl-site .featuredTitle,
body.clikin-topnav .cl-site .post h3{
  color: #0f1728 !important;
}

body.clikin-topnav .cl-site .postMeta,
body.clikin-topnav .cl-site .meta,
body.clikin-topnav .cl-site .small{
  color: rgba(15,23,40,.55) !important;
}

/* ---------- about specific ---------- */
body.clikin-topnav .cl-site .media,
body.clikin-topnav .cl-site .embed{
  background: linear-gradient(180deg,#0b1321,#10233d 56%,#12315a) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 60px rgba(15,23,40,.14) !important;
}

body.clikin-topnav .cl-site .playBtn{
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

body.clikin-topnav .cl-site .pillRow .pill{
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(10,132,255,.12) !important;
}

/* ---------- CTA bands ---------- */
body.clikin-topnav .cl-site .ctaBand{
  background: linear-gradient(135deg,#0b1321,#10233d 52%,#12315a) !important;
  color: #fff !important;
  box-shadow: 0 28px 70px rgba(15,23,40,.16) !important;
}

body.clikin-topnav .cl-site .ctaBand p,
body.clikin-topnav .cl-site .ctaIn p{
  color: rgba(255,255,255,.78) !important;
}

body.clikin-topnav .cl-site .ctaBand .btn:not(.btnPrimary){
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* ---------- typography polish ---------- */
body.clikin-topnav .cl-site h1,
body.clikin-topnav .cl-site h2,
body.clikin-topnav .cl-site h3{
  color: #0f1728 !important;
}

body.clikin-topnav .cl-site p,
body.clikin-topnav .cl-site .sub{
  color: #5f6b7c !important;
}

/* ---------- mobile menu panel ---------- */
body.clikin-topnav .clMPanel{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(10,132,255,.10) !important;
}