:root{
      --p:#233A99;
      --p2:#3F57D6;
      --a:#ffb703;
      --ink:#0b1638;
      --mut:#63708a;
      --bg:#f6f8ff;
      --b:#e7ebff;
      --glass: rgba(255,255,255,.72);
      --shadow: 0 18px 60px rgba(16,24,40,.12);
      --ease: cubic-bezier(.2,.9,.2,1);
      --r: 22px;
    }

    *{ font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial; }
    html,body{ height:100%; }
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(900px 520px at 10% 12%, rgba(63,87,214,.18), transparent 60%),
        radial-gradient(900px 520px at 90% 16%, rgba(255,183,3,.14), transparent 60%),
        linear-gradient(180deg, #fff, var(--bg));
      overflow-x:hidden;
    }

    /* ===== Dark mode (applies when html[data-bs-theme="dark"]) ===== */
    html[data-bs-theme="dark"] body{
      color: rgba(255,255,255,.92);
      background:
        radial-gradient(900px 520px at 10% 12%, rgba(63,87,214,.22), transparent 60%),
        radial-gradient(900px 520px at 90% 16%, rgba(255,183,3,.16), transparent 60%),
        linear-gradient(180deg, #0b1020, #070a14);
    }
    html[data-bs-theme="dark"] .top-strip{ border-bottom-color: rgba(255,255,255,.10); }
    html[data-bs-theme="dark"] .glass-nav{ border-bottom-color: rgba(255,255,255,.10); background: rgba(10,14,26,.62) !important; }
    html[data-bs-theme="dark"] .card-x,
    html[data-bs-theme="dark"] .kpi-pill,
    html[data-bs-theme="dark"] .event-tools,
    html[data-bs-theme="dark"] .quick-drawer,
    html[data-bs-theme="dark"] .qbtn,
    html[data-bs-theme="dark"] #backTop{
      background: rgba(12,16,30,.70);
      border-color: rgba(255,255,255,.10);
    }
    html[data-bs-theme="dark"] .sec-badge,
    html[data-bs-theme="dark"] .badge.text-bg-light{
      background: rgba(12,16,30,.60) !important;
      color: rgba(255,255,255,.90) !important;
      border-color: rgba(255,255,255,.12) !important;
    }
    html[data-bs-theme="dark"] .muted{ color: rgba(255,255,255,.68) !important; }
    html[data-bs-theme="dark"] .navbar .nav-link{ color: rgba(255,255,255,.75) !important; }
    html[data-bs-theme="dark"] .navbar .nav-link:hover{ color:#fff !important; }
    html[data-bs-theme="dark"] footer{ background: #05070f; }

    /* ===== Premium Footer ===== */
    .footer-wrap{
      position: relative;
      overflow: hidden;
      padding: 64px 0 26px;
      background:
        radial-gradient(900px 420px at 10% 15%, rgba(63,87,214,.18), transparent 60%),
        radial-gradient(900px 420px at 90% 20%, rgba(255,183,3,.14), transparent 60%),
        linear-gradient(180deg, #0b1320, #070a14);
      color: rgba(255,255,255,.88);
    }
    .footer-wrap::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(420px 240px at 20% 30%, rgba(255,183,3,.12), transparent 55%),
        radial-gradient(520px 260px at 80% 25%, rgba(63,87,214,.14), transparent 55%);
      pointer-events:none;
      opacity:.9;
    }
    .footer-card{
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(14px);
      box-shadow: 0 26px 90px rgba(0,0,0,.25);
      position:relative;
      overflow:hidden;
    }
    .footer-card::after{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(700px 240px at var(--mx,50%) var(--my,20%), rgba(63,87,214,.18), transparent 55%),
        radial-gradient(700px 260px at calc(var(--mx,50%) + 10%) calc(var(--my,20%) + 20%), rgba(255,183,3,.14), transparent 60%);
      opacity:0;
      transition: opacity .22s var(--ease);
      pointer-events:none;
    }
    .footer-card:hover::after{ opacity:1; }

    .footer-title{
      font-weight: 950;
      letter-spacing: -.3px;
    }
    .footer-muted{ color: rgba(255,255,255,.70); }

    .footer-link{
      color: rgba(255,255,255,.78);
      text-decoration:none;
      font-weight: 700;
      display:flex;
      gap:10px;
      align-items:center;
      padding: 8px 0;
      transition: transform .18s var(--ease), color .18s var(--ease);
    }
    .footer-link i{ opacity:.9; }
    .footer-link:hover{
      color:#fff;
      transform: translateX(3px);
    }

    .footer-pill{
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      padding: 10px 12px;
    }

    .footer-social a{
      width: 46px; height: 46px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      display:grid; place-items:center;
      color:#fff;
      text-decoration:none;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
    }
    .footer-social a:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.10);
      box-shadow: 0 18px 55px rgba(0,0,0,.28);
    }

    .footer-newsletter .form-control{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color:#fff;
    }
    .footer-newsletter .form-control::placeholder{ color: rgba(255,255,255,.62); }
    .footer-newsletter .btn{
      border-radius: 16px;
    }

    .footer-divider{
      height:1px;
      background: rgba(255,255,255,.12);
      margin: 22px 0 14px;
    }

    .footer-bottom{
      color: rgba(255,255,255,.66);
      font-weight: 700;
      font-size: .9rem;
    }

    .footer-mini-stat{
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      padding: 14px;
      transition: transform .18s var(--ease);
    }
    .footer-mini-stat:hover{ transform: translateY(-2px); }
    .footer-mini-stat .n{
      font-weight: 950;
      font-size: 1.35rem;
      color: #fff;
    }
    .footer-mini-stat .t{
      font-weight: 800;
      color: rgba(255,255,255,.70);
      font-size: .85rem;
    }

    /* Footer back-to-top button */
    .footer-top-btn{
      width: 52px; height: 52px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color:#fff;
      display:grid; place-items:center;
      transition: transform .18s var(--ease), background .18s var(--ease);
    }
    .footer-top-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.10); }

    /* ===== Premium animated blobs ===== */
    .blob{
      position:fixed;
      width:520px;height:520px;
      filter: blur(34px);
      opacity:.35;
      z-index:-3;
      pointer-events:none;
      mix-blend-mode:multiply;
      animation: blobMove 12s var(--ease) infinite alternate;
    }
    .blob.b1{ left:-180px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(63,87,214,.9), transparent 55%); }
    .blob.b2{ right:-200px; top:40px; background: radial-gradient(circle at 60% 40%, rgba(255,183,3,.85), transparent 55%); animation-duration: 14s;}
    .blob.b3{ left:20%; bottom:-240px; background: radial-gradient(circle at 50% 50%, rgba(35,58,153,.8), transparent 55%); animation-duration: 16s;}
    @keyframes blobMove{
      from{ transform: translate(0,0) scale(1); }
      to{ transform: translate(60px, 40px) scale(1.06); }
    }

    /* ===== 3D Canvas ===== */
    #bg3d{ position:fixed; inset:0; z-index:-2; opacity:.18; pointer-events:none; }

    .container{ max-width:1200px; }

    /* ===== Scroll progress ===== */
    .scroll-progress{
      position: fixed; top:0; left:0; height:4px; width:0%;
      background: linear-gradient(90deg, var(--a), var(--p2), var(--p));
      z-index: 9999;
      box-shadow: 0 10px 25px rgba(35,58,153,.25);
    }

    /* ===== Top strip ===== */
    .top-strip{
      background: linear-gradient(90deg, rgba(35,58,153,.10), rgba(255,183,3,.12));
      border-bottom:1px solid var(--b);
    }
    .pulse-dot{
      width:10px;height:10px;border-radius:50%;
      background:var(--a);
      box-shadow: 0 0 0 7px rgba(255,183,3,.18);
      animation: pulse 1.7s ease-in-out infinite;
    }
    @keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

    /* ===== Glass navbar ===== */
    .glass-nav{
      background: rgba(255,255,255,.75) !important;
      backdrop-filter: blur(12px);
      border-bottom:1px solid var(--b);
    }
    .brand-logo{
      width:52px;height:52px;border-radius:16px;
      background:var(--glass);
      border:1px solid var(--b);
      box-shadow: 0 16px 30px rgba(35,58,153,.14);
      display:grid;place-items:center;
      overflow:hidden;
    }
    .brand-logo img{ width:100%; height:100%; object-fit:contain; padding:6px; }

    /* ===== Premium buttons ===== */
    .btn-x{
      border-radius: 14px;
      font-weight: 900;
      letter-spacing:.2px;
      border: 1px solid var(--b);
      background: rgba(255,255,255,.7);
      box-shadow: 0 12px 24px rgba(16,24,40,.06);
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
    }
    .btn-x:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(16,24,40,.12); filter: saturate(1.1); }
    .btn-p{
      border:0;
      color:#fff;
      background: linear-gradient(135deg, var(--p), var(--p2));
      box-shadow: 0 18px 44px rgba(35,58,153,.24);
    }
    .btn-a{
      border:0;
      color:#1a1a1a;
      background: linear-gradient(135deg, var(--a), #ffd166);
      box-shadow: 0 18px 44px rgba(255,183,3,.22);
    }

    /* ===== Premium cards ===== */
    .card-x{
      border-radius: var(--r);
      border:1px solid var(--b);
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
      overflow:hidden;
      transition: transform .22s var(--ease), box-shadow .22s var(--ease);
      position:relative;
    }
    .card-x:hover{
      transform: translateY(-4px);
      box-shadow: 0 22px 70px rgba(16,24,40,.16);
    }
    .glow::before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(600px 200px at var(--mx,50%) var(--my,30%), rgba(63,87,214,.20), transparent 55%),
                  radial-gradient(600px 240px at calc(var(--mx,50%) + 10%) calc(var(--my,30%) + 20%), rgba(255,183,3,.18), transparent 55%);
      opacity:0;
      transition: opacity .22s var(--ease);
      pointer-events:none;
    }
    .glow:hover::before{ opacity:1; }

    /* ===== Hero premium ===== */
    .hero{ 
      padding: 50px 0 50px;
      position:relative; 
      background: linear-gradient(0deg, rgb(0 0 0 / 30%), rgb(0 0 0 / 54%)), url(https://www.jksinter.in/images/hero-bg.jpg);
      background-size: cover;
    }

    .hero-chip{
      display:inline-flex; gap:10px; align-items:center;
      padding:8px 14px;
      border-radius:999px;
      background: rgba(35,58,153,.10);
      border:1px solid rgba(35,58,153,.14);
      color:var(--p);
      font-weight:900;
      font-size:12px;
    }
    .hero-title{
      font-weight: 950;
      letter-spacing:-.9px;
      line-height:1.03;
      font-size: clamp(36px, 4vw, 54px);
      margin: 12px 0 10px;
    }
    .hero-sub{ color:var(--mut); line-height:1.8; }

    .hero-photo{
      border-radius: 26px;
      border:1px solid var(--b);
      overflow:hidden;
      background:
        radial-gradient(260px 200px at 20% 20%, rgba(63,87,214,.18), transparent 60%),
        radial-gradient(260px 200px at 80% 30%, rgba(255,183,3,.14), transparent 60%),
        rgba(255,255,255,.8);
      box-shadow: 0 22px 70px rgba(35,58,153,.18);
      transform: translateZ(0);
    }
    .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
    .floaty{ animation: floaty 3.2s ease-in-out infinite; }
    @keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{transform: translateY(-8px);} }

    /* Floating KPI pills */
    .kpi-pill{
      border-radius: 18px;
      border: 1px solid var(--b);
      background: rgba(255,255,255,.78);
      box-shadow: 0 18px 44px rgba(16,24,40,.10);
      padding: 12px 14px;
      transition: transform .18s var(--ease);
    }
    .kpi-pill:hover{ transform: translateY(-3px); }

    /* ===== Section heading ===== */
    .sec-badge{
      display:inline-flex; gap:10px; align-items:center;
      padding:8px 14px;
      border-radius:999px;
      background: rgba(255,255,255,.82);
      border:1px solid var(--b);
      color:var(--p);
      font-weight:900;
      font-size:12px;
    }
    .sec-title{ font-weight: 950; letter-spacing:-.5px; }
    .sec-sub{ color:var(--mut); }

    /* ===== Reveal + stagger ===== */
    .reveal{ opacity:0; transform: translateY(18px) scale(.99); transition: opacity .8s var(--ease), transform .8s var(--ease); }
    .reveal.show{ opacity:1; transform: translateY(0) scale(1); }
    .stagger > *{ opacity:0; transform: translateY(14px); }
    .stagger.show > *{
      opacity:1; transform: translateY(0);
      transition: opacity .75s var(--ease), transform .75s var(--ease);
    }
    .stagger.show > *:nth-child(1){ transition-delay:.05s; }
    .stagger.show > *:nth-child(2){ transition-delay:.12s; }
    .stagger.show > *:nth-child(3){ transition-delay:.18s; }
    .stagger.show > *:nth-child(4){ transition-delay:.24s; }

    /* ===== Events slider ===== */
    .snap-row{
      display:flex;
      gap:14px;
      overflow:auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 6px;
    }
    .snap-row::-webkit-scrollbar{ height:10px; }
    .snap-row::-webkit-scrollbar-thumb{ background: rgba(35,58,153,.16); border-radius:999px; }
    .snap{
      min-width: 520px;
      scroll-snap-align: start;
    }
    @media (max-width: 992px){
      .snap{ min-width: 86vw; }
    }
    .event-img{ height:240px; object-fit:cover; }
    .date-chip{
      position:absolute; top:14px; left:14px;
      background: linear-gradient(135deg, var(--p), var(--p2));
      color:#fff;
      padding:10px 12px;
      border-radius: 16px;
      font-weight: 950;
      box-shadow: 0 18px 40px rgba(35,58,153,.26);
      line-height:1.1;
      text-align:center;
      z-index:2;
    }
    .date-chip span{ display:block; font-size:18px; }
    .read-more{ color:var(--p); text-decoration:none; font-weight:950; }
    .read-more:hover{ text-decoration:underline; }

    /* ===== Testimonials ===== */
    .tcard{
      border-radius: 22px;
      border: 1px solid var(--b);
      background: rgba(255,255,255,.8);
      box-shadow: 0 20px 60px rgba(16,24,40,.12);
      padding: 18px;
    }
    .avatar{
      width:52px;height:52px;border-radius:18px;
      background: linear-gradient(135deg, var(--p), var(--p2));
      display:grid;place-items:center;
      color:#fff;
      font-weight:950;
      flex:0 0 auto;
    }
    .stars{ color: var(--a); letter-spacing:1px; font-weight: 950; }

    /* ===== Map card ===== */
    .map-wrap{
      height: 380px;
      border-radius: 18px;
      border: 1px solid var(--b);
      overflow:hidden;
    }
    .map-wrap iframe{ width:100%; height:100%; border:0; }

    /* ===== Floating action ===== */
    .fab{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index: 60;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .fab a{
      width:52px; height:52px;
      border-radius: 18px;
      display:grid; place-items:center;
      text-decoration:none;
      color:#fff;
      box-shadow: 0 22px 60px rgba(16,24,40,.18);
      transform: translateZ(0);
    }
    .fab .apply{ background: linear-gradient(135deg, var(--p), var(--p2)); }
    .fab .wa{ background: linear-gradient(135deg, #25D366, #128C7E); }

    footer{ background:#0b1320; color: rgba(255,255,255,.85); }

    /* small helper */
    .muted{ color: var(--mut); }

    /* cursor tilt hint */
    .tilt-hint{ position:absolute; right:14px; bottom:14px; opacity:.55; font-size:12px; font-weight:800; color:var(--mut); }

    /* ===== NEW: Quick actions panel + drawer ===== */
    .quick-panel{
      position: fixed;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 70;
      display:flex; flex-direction:column; gap:10px;
    }
    .quick-panel .qbtn{
      width:52px;height:52px;border-radius:18px;
      border:1px solid var(--b);
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(12px);
      display:grid; place-items:center;
      box-shadow: 0 18px 55px rgba(16,24,40,.14);
      transition: transform .18s var(--ease), box-shadow .18s var(--ease);
    }
    .quick-panel .qbtn:hover{ transform: translateY(-2px); box-shadow: 0 24px 70px rgba(16,24,40,.18); }
    .quick-drawer{
      position:fixed; right:80px; top:50%;
      transform: translateY(-50%);
      width:320px; max-width: calc(100vw - 120px);
      z-index: 71;
      border-radius: 22px;
      border:1px solid var(--b);
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(14px);
      box-shadow: 0 26px 90px rgba(16,24,40,.18);
      opacity:0; pointer-events:none;
      transform-origin: right center;
      transition: opacity .2s var(--ease), transform .2s var(--ease);
    }
    .quick-drawer.show{
      opacity:1; pointer-events:auto;
      transform: translateY(-50%) scale(1);
    }
    .quick-drawer:not(.show){
      transform: translateY(-50%) scale(.98);
    }

    /* ===== NEW: Marquee ===== */
    .marquee{
      overflow:hidden;
      border-top:1px solid var(--b);
      border-bottom:1px solid var(--b);
      background: rgba(255,255,255,.72);
    }
    .marquee-track{
      display:flex; gap:18px;
      width:max-content;
      padding: 12px 0;
      animation: marquee 22s linear infinite;
    }
    .marquee:hover .marquee-track{ animation-play-state: paused; }
    @keyframes marquee{
      from{ transform: translateX(0); }
      to{ transform: translateX(-50%); }
    }
    .m-item{
      border:1px solid var(--b);
      background: rgba(255,255,255,.78);
      border-radius: 999px;
      padding: 10px 14px;
      display:flex; gap:10px; align-items:center;
      font-weight:900;
      color:var(--ink);
    }

    /* ===== NEW: Events filter/search ===== */
    .event-tools{
      border:1px solid var(--b);
      border-radius: 18px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 18px 60px rgba(16,24,40,.10);
      padding: 10px;
    }
    .chip{
      border:1px solid var(--b);
      background: rgba(255,255,255,.7);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight:900;
      cursor:pointer;
      transition: transform .15s var(--ease), background .15s var(--ease);
      user-select:none;
    }
    .chip:hover{ transform: translateY(-1px); }
    .chip.active{
      background: linear-gradient(135deg, rgba(35,58,153,.14), rgba(63,87,214,.12));
      border-color: rgba(35,58,153,.22);
      color: var(--p);
    }

    /* ===== NEW: Gallery ===== */
    .gallery-grid img{
      width:100%; height:180px; object-fit:cover;
      border-radius: 18px;
      border:1px solid var(--b);
      box-shadow: 0 18px 55px rgba(16,24,40,.10);
      cursor:pointer;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease);
    }
    .gallery-grid img:hover{
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 26px 85px rgba(16,24,40,.16);
    }

    /* ===== NEW: Back to top ===== */
    #backTop{
      position:fixed; left:18px; bottom:18px;
      width:52px;height:52px;border-radius:18px;
      border:1px solid var(--b);
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 60px rgba(16,24,40,.14);
      display:grid; place-items:center;
      opacity:0; pointer-events:none;
      transition: opacity .2s var(--ease), transform .2s var(--ease);
      z-index: 75;
    }
    #backTop.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
    #backTop:not(.show){ transform: translateY(6px); }

    /* ===== NEW: Sticky bottom mobile CTA ===== */
    .mobile-cta{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 80;
      padding: 10px 12px;
      background: rgba(255,255,255,.78);
      border-top: 1px solid var(--b);
      backdrop-filter: blur(14px);
      box-shadow: 0 -22px 60px rgba(16,24,40,.14);
      display:none;
    }
    @media (max-width: 991.98px){
      .mobile-cta{ display:block; }
      body{ padding-bottom: 86px; } /* space for CTA */
    }

    /* ===== NEW: Theme toggle button ===== */
    .theme-toggle{
      border-radius: 14px;
      border: 1px solid var(--b);
      background: rgba(255,255,255,.72);
      box-shadow: 0 12px 24px rgba(16,24,40,.08);
      padding: 2px 12px;
      display:inline-flex; align-items:center; gap:10px;
      font-weight: 950;
      cursor:pointer;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease);
    }
    .theme-toggle:hover{ transform: translateY(-1px); box-shadow: 0 18px 46px rgba(16,24,40,.14); }