/* ============================================================
   REHAN SHAHID v12 — Bug fixes + premium polish
   Keeps animations running while their section is visible.
   Colors now follow the live [data-theme] system (dark/white/gray)
   instead of a fixed dark palette, so every theme renders correctly.
   ============================================================ */

*{box-sizing:border-box}
html{background:var(--bg);overflow-x:hidden;scroll-behavior:smooth}
body{overflow-x:hidden;min-height:100vh;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
img,svg,video,canvas{max-width:100%;height:auto}
button,a,input,textarea,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* richer luxury background per theme */
body{
  background:
    radial-gradient(900px circle at 10% 0%,var(--cglow),transparent 42%),
    radial-gradient(760px circle at 95% 12%,var(--gold-dim),transparent 38%),
    radial-gradient(720px circle at 16% 88%,var(--gold-dim),transparent 44%),
    var(--bg)!important;
}
body::before{opacity:.62!important}
body::after{opacity:.28!important}

/* universal premium surface */
.glass,.card,.skill,.service,.demo-card,.cta-card,.network-card,.stat,.info,.pic,.footer-col,.social,.field input,.field textarea,.field select,
.cpo-card,.cpo-search,.cpo-count,.ilab-weather-card,.ilab-int-card,.ilab-hero-stat,.atl-card,.atl-chip,.login-card,.stat-card,.cms-card,.chatbot-form-card{
  border-color:var(--bdr)!important;
  box-shadow:0 24px 80px var(--shd), inset 0 1px 0 rgba(255,255,255,.065)!important;
}
.glass,.card,.skill,.service,.demo-card,.cta-card,.network-card,.stat,.info,.pic,.footer-col,.cpo-card,.ilab-weather-card,.ilab-int-card,.atl-card,.login-card,.stat-card,.cms-card,.chatbot-form-card{
  background:
    linear-gradient(145deg,var(--sur),var(--sur2)),
    radial-gradient(circle at 18% 0%,var(--gold-dim),transparent 38%)!important;
  backdrop-filter:blur(14px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08)!important;
}
.card:hover,.skill:hover,.service:hover,.demo-card:hover,.cta-card:hover,.network-card:hover,.social:hover,.cpo-card:hover,.ilab-int-card:hover,.atl-card:hover,.cms-card:hover{
  border-color:var(--gold-line)!important;
  transform:translateY(-3px);
  box-shadow:0 30px 100px var(--shd),0 0 0 1px var(--gold-dim) inset!important;
}
.demo-card,.service,.skill,.cta-card,.network-card,.cpo-card,.atl-card,.ilab-weather-card,.ilab-int-card,.cms-card{position:relative;overflow:hidden}
.demo-card::before,.service::before,.skill::before,.cta-card::before,.network-card::before,.cpo-card::before,.atl-card::before,.ilab-weather-card::before,.ilab-int-card::before,.cms-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 0 36%,rgba(255,255,255,.085) 48%,transparent 62%);
  transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.8,.2,1)
}
.demo-card:hover::before,.service:hover::before,.skill:hover::before,.cta-card:hover::before,.network-card:hover::before,.cpo-card:hover::before,.atl-card:hover::before,.ilab-weather-card:hover::before,.ilab-int-card:hover::before,.cms-card:hover::before{transform:translateX(130%)}

/* nav + topbars */
.navbar,.page-topbar,.cpo-nav,.atl-onav,.ilab-nav,.admin-topbar{
  background:var(--nav)!important;
  border-bottom:1px solid var(--bdr)!important;
  box-shadow:0 14px 40px var(--shd)!important;
  backdrop-filter:blur(18px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12)!important;
}
.btn,.atl-chip,.cpo-badge,.ilab-hero-label,.atl-badge,.cpo-count{
  border-radius:999px!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease!important;
}
.btn:hover,.atl-chip:hover{transform:translateY(-2px)}
.gold-btn,.btn.gold-btn,.primary-btn{
  background:linear-gradient(135deg,var(--gold4) 0%,var(--gold3) 42%,var(--gold) 100%)!important;
  color:var(--bg)!important;border-color:var(--gold-line)!important;
  box-shadow:0 18px 48px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.46)!important;
}

/* strong official social colors while keeping luxury card look */
.social{position:relative;isolation:isolate;overflow:hidden;border-radius:26px!important;background:linear-gradient(145deg,var(--sur),var(--sur2))!important;color:var(--txt)!important}
.social::before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:linear-gradient(var(--gold3),var(--gold));opacity:.95;z-index:-1}
.social::after{content:"";position:absolute;inset:0;opacity:.09;z-index:-2;background:linear-gradient(135deg,#f6d783,transparent 56%)}
.social[href*="wa.me"]::before{background:linear-gradient(#25D366,#128C7E)}
.social[href*="wa.me"]::after{background:linear-gradient(135deg,#25D366,transparent 58%)}
.social[href*="instagram.com"]::before{background:linear-gradient(#FEDA75,#FA7E1E,#D62976,#4F5BD5)}
.social[href*="instagram.com"]::after{background:linear-gradient(135deg,#FEDA75,#D62976,#4F5BD5)}
.social[href*="telegram"]::before{background:linear-gradient(#2AABEE,#229ED9)}
.social[href*="telegram"]::after{background:linear-gradient(135deg,#2AABEE,transparent 58%)}
.social[href*="threads"]::before{background:linear-gradient(#fff,#111)}
.social[href*="threads"]::after{background:linear-gradient(135deg,#fff,transparent 58%)}
.social[href*="tiktok"]::before{background:linear-gradient(#00F2EA,#FF0050)}
.social[href*="tiktok"]::after{background:linear-gradient(135deg,#00F2EA,#FF0050)}
.social[href*="facebook.com"]::before{background:linear-gradient(#1877F2,#0f5bc9)}
.social[href*="facebook.com"]::after{background:linear-gradient(135deg,#1877F2,transparent 58%)}
.social[href^="mailto:"]::before{background:linear-gradient(#EA4335,#FBBC05,#34A853)}
.social[href^="mailto:"]::after{background:linear-gradient(135deg,#EA4335,#FBBC05,#34A853)}
.social[href*="reddit.com"]::before{background:linear-gradient(#FF4500,#FF7A45)}
.social[href*="reddit.com"]::after{background:linear-gradient(135deg,#FF4500,transparent 58%)}
.social[href*="x.com"]::before,.social[href*="twitter.com"]::before{background:linear-gradient(#fff,#111)}
.social[href*="youtube.com"]::before{background:linear-gradient(#FF0000,#CC0000)}
.social[href*="spotify.com"]::before{background:linear-gradient(#1DB954,#1ED760)}
.social[href*="spotify.com"]::after{background:linear-gradient(135deg,#1DB954,transparent 58%)}
.social[href*="linkedin.com"]::before{background:linear-gradient(#0A66C2,#0077B5)}
.social[href*="linkedin.com"]::after{background:linear-gradient(135deg,#0A66C2,transparent 58%)}
.social-icon{box-shadow:0 14px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22)!important;color:#fff!important}
.social-icon.w,.social[href*="wa.me"] .social-icon{background:linear-gradient(135deg,#35ef7b,#128C7E)!important;color:#03140a!important}
.social-icon.i,.social[href*="instagram.com"] .social-icon{background:linear-gradient(135deg,#FEDA75,#FA7E1E,#D62976,#4F5BD5)!important;color:#fff!important}
.social[href*="telegram"] .social-icon{background:linear-gradient(135deg,#2AABEE,#229ED9)!important}
.social[href*="threads"] .social-icon{background:linear-gradient(135deg,#fff,#111)!important;color:#111!important}
.social[href*="tiktok"] .social-icon{background:linear-gradient(135deg,#00F2EA,#111 45%,#FF0050)!important;color:#fff!important}
.social-icon.f,.social[href*="facebook.com"] .social-icon{background:linear-gradient(135deg,#1877F2,#0f5bc9)!important}
.social-icon.e,.social[href^="mailto:"] .social-icon{background:linear-gradient(135deg,#EA4335,#FBBC05,#34A853)!important;color:#fff!important}
.social[href*="youtube.com"] .social-icon{background:linear-gradient(135deg,#FF0000,#CC0000)!important}
.social-icon.spotify,.social[href*="spotify.com"] .social-icon{background:linear-gradient(135deg,#1DB954,#1ED760)!important;color:#031407!important}
.social-icon.linkedin,.social[href*="linkedin.com"] .social-icon{background:linear-gradient(135deg,#0A66C2,#0077B5)!important;color:#fff!important}
.social strong,.social small,.social b{color:var(--txt)!important}.social small{opacity:.78!important}

/* menu and live drawer reliability/visibility */
#hamburger,#theme-btn,#rs-drawer-toggle,#rsAIFab{pointer-events:auto!important;touch-action:manipulation!important;position:relative;z-index:2147482000!important}
#mobileMenu.mobile-menu{display:block!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;z-index:2147482500!important;transform:translate3d(0,-14px,0) scale(.985)!important;filter:none!important}
#mobileMenu.mobile-menu.open{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:translate3d(0,0,0) scale(1)!important}
body.menu-open{overflow:hidden!important}
#rs-drawer-backdrop{z-index:2147483000!important;pointer-events:none!important}#rs-drawer-backdrop.open{pointer-events:auto!important}
#rs-live-panel{z-index:2147483100!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(-106%,0,0)!important;will-change:transform!important}
#rs-live-panel.drawer-open{visibility:visible!important;pointer-events:auto!important;transform:translate3d(0,0,0)!important}
body.rs-live-drawer-open{overflow:hidden!important}

/* AI assistant typing and panel layering */
#rsAIFab{position:fixed!important;right:max(18px,env(safe-area-inset-right))!important;bottom:calc(18px + env(safe-area-inset-bottom))!important;z-index:2147483200!important}
#rsAIPanel.rs-ai-panel{z-index:2147483300!important;pointer-events:none!important}
#rsAIPanel.rs-ai-panel.rs-open{pointer-events:auto!important}
.rs-type-cursor{display:inline-block;width:.52em;height:1em;margin-left:2px;border-radius:3px;background:currentColor;vertical-align:-.14em;animation:v12Blink .78s steps(2,end) infinite}@keyframes v12Blink{50%{opacity:.12}}
.rs-ai-typing-wrap span,.typing-dots span{animation-play-state:running!important}

/* headings: premium, readable, never clipped */
.lux-title,.section-head h2,.cta-card h2,.school-text h2,.contact-card h2,.cpo-title,.ilab-hero h1,.atl-ohero h1,.login-title{
  text-wrap:balance;max-width:100%;overflow:visible!important;word-break:normal;overflow-wrap:normal;text-shadow:0 1px 0 rgba(255,255,255,.08),0 18px 55px rgba(215,168,77,.18)!important
}
.cpo-title,.ilab-hero h1,.atl-ohero h1{margin-left:auto!important;margin-right:auto!important;white-space:normal!important}
.cpo-title{font-size:clamp(2.35rem,8.2vw,5.1rem)!important;line-height:.98!important;letter-spacing:-.035em!important}
.ilab-hero h1{font-size:clamp(2.35rem,8vw,5rem)!important;line-height:1!important;letter-spacing:-.04em!important}
.atl-ohero h1{font-size:clamp(2.28rem,7.6vw,4.8rem)!important;line-height:1.02!important;letter-spacing:-.035em!important}

/* sub pages balanced */
.cpo-body,.ilab-body,#atlPageOverlay{overflow-x:hidden!important;background:
  radial-gradient(760px circle at 14% 6%,var(--cglow),transparent 38%),
  radial-gradient(640px circle at 92% 18%,var(--gold-dim),transparent 36%),
  var(--bg)!important}
.cpo-header,.ilab-hero,.atl-ohero{text-align:center!important;max-width:1180px;margin-left:auto!important;margin-right:auto!important}
.cpo-subtitle,.ilab-hero-sub,.atl-ohero p{max-width:48rem!important;margin-left:auto!important;margin-right:auto!important;line-height:1.72!important;text-wrap:pretty}
.cpo-toolbar,.ilab-hero-stats,.atl-filter-row{max-width:920px;margin-left:auto!important;margin-right:auto!important}
.cpo-grid,.atl-grid,.ilab-grid{max-width:1180px;margin-left:auto!important;margin-right:auto!important}

/* mobile polish + bug fixes from screenshots */
@media (max-width:768px){
  body{background-attachment:scroll!important}
  body::before{opacity:.42!important}body::after{opacity:.18!important;background-size:78px 78px!important}
  .container{width:min(100% - 28px,var(--max,1180px))!important;margin-inline:auto!important}
  .navbar{border-radius:0 0 26px 26px!important}.nav{padding:12px 14px!important;gap:10px!important}
  .brand span{display:none!important}.brand strong{font-size:clamp(.96rem,4vw,1.12rem)!important;letter-spacing:.05em!important}
  .nav-avatar{width:52px!important;height:52px!important}.nav-actions{gap:8px!important}
  #mobileMenu.mobile-menu{top:76px!important;left:12px!important;right:12px!important;width:auto!important;max-height:calc(100dvh - 94px)!important;overflow:auto!important;border-radius:26px!important;padding:12px!important;background:var(--nav)!important;box-shadow:0 30px 90px var(--shd)!important}
  #mobileMenu.mobile-menu a{min-height:48px!important;display:flex!important;align-items:center!important;border-radius:18px!important;padding:13px 15px!important}

  .hero{padding-top:30px!important}.hero-grid{gap:26px!important}.lux-title{font-size:clamp(2.08rem,10.3vw,3.15rem)!important;line-height:1!important;letter-spacing:-.045em!important}
  .section{padding-top:58px!important;padding-bottom:58px!important}.section-head h2,.cta-card h2,.school-text h2,.contact-card h2{font-size:clamp(1.95rem,8.7vw,2.82rem)!important;line-height:1.02!important;letter-spacing:-.035em!important}
  .hero-copy p,.intro-line,.cta-card p,.school-text p,.contact-card p{font-size:clamp(.98rem,4vw,1.12rem)!important;line-height:1.68!important;overflow-wrap:break-word!important}
  .hero-actions,.social-cta-row{width:100%!important;gap:10px!important}.social-cta-row{display:grid!important;grid-template-columns:1fr 1fr!important}.social-cta-row .btn,.hero-actions .btn{min-width:0!important;min-height:54px!important;padding-inline:12px!important;font-size:clamp(.72rem,3.2vw,.9rem)!important;letter-spacing:.02em!important}
  .socials{gap:12px!important}.social{min-height:76px!important;padding:14px 14px 14px 18px!important;border-radius:24px!important}.social small{max-width:170px!important}.social b{font-size:.76rem!important;opacity:.86!important}
  .cta-card{padding:28px 20px!important;border-radius:30px!important;overflow:hidden!important}.cta-card .btn{width:100%!important}

  /* drawer: small bottom-left button so it never covers text */
  #rs-drawer-toggle{position:fixed!important;left:14px!important;right:auto!important;top:auto!important;bottom:calc(108px + env(safe-area-inset-bottom))!important;width:48px!important;height:48px!important;border-radius:18px!important;border:1px solid rgba(246,215,131,.42)!important;background:linear-gradient(145deg,rgba(246,215,131,.30),rgba(8,7,5,.88))!important;box-shadow:0 14px 38px rgba(0,0,0,.42),0 0 0 1px rgba(255,228,163,.08) inset!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;opacity:.96!important}
  #rs-drawer-toggle:hover,#rs-drawer-toggle.open{width:48px!important}.dt-line,#rs-drawer-toggle .dt-line{background:#ffd580!important;width:16px!important;height:2px!important}
  #rs-live-panel{width:min(348px,88vw)!important;max-width:88vw!important}

  /* AI panel: above browser bars and not full-screen ugly */
  #rsAIPanel.rs-ai-panel{left:12px!important;right:12px!important;bottom:calc(82px + env(safe-area-inset-bottom))!important;top:auto!important;width:auto!important;max-width:none!important;max-height:min(76dvh,620px)!important;height:min(76dvh,620px)!important;border-radius:28px!important;transform:scale(.96) translateY(18px)!important;opacity:0!important}
  #rsAIPanel.rs-ai-panel.rs-open{transform:scale(1) translateY(0)!important;opacity:1!important}.rs-ai-messages{min-height:0!important;flex:1!important}

  /* Subpage title and hero fixes */
  .page-topbar,.atl-onav,.ilab-nav,.cpo-nav{min-height:58px!important;padding:13px 15px!important;gap:10px!important;overflow:hidden!important;border-radius:0 0 22px 22px!important}
  .page-topbar a,.page-topbar small,.atl-onav-title,.ilab-nav-brand strong{min-width:0!important;white-space:normal!important;line-height:1.24!important;font-size:clamp(.88rem,3.7vw,1.05rem)!important;letter-spacing:.05em!important}
  .atl-onav-brand,.ilab-nav-brand{min-width:0!important;flex:1 1 auto!important}.atl-onav-back,.ilab-back-btn{max-width:48%!important;min-width:0!important;white-space:normal!important;line-height:1.22!important;padding:11px 12px!important;font-size:clamp(.75rem,3.2vw,.92rem)!important;border-radius:22px!important}
  .cpo-body,.ilab-body,#atlPageOverlay{padding-left:14px!important;padding-right:14px!important}
  .cpo-header,.ilab-hero,.atl-ohero{padding:34px 0!important;overflow:visible!important}
  .cpo-title{font-size:clamp(2.08rem,9.2vw,3.05rem)!important;line-height:1.04!important;letter-spacing:-.03em!important}
  .ilab-hero h1{font-size:clamp(2.02rem,8.9vw,2.95rem)!important;line-height:1.05!important;letter-spacing:-.032em!important}
  .atl-ohero h1{font-size:clamp(2.02rem,8.9vw,2.95rem)!important;line-height:1.05!important;letter-spacing:-.032em!important}
  .cpo-subtitle,.ilab-hero-sub,.atl-ohero p{font-size:clamp(.98rem,4.1vw,1.12rem)!important;line-height:1.68!important;text-align:center!important;max-width:100%!important}
  .cpo-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}.cpo-count{width:100%!important;justify-content:center!important}.cpo-search{width:100%!important;min-width:0!important}
  .cpo-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}.cpo-card{padding:18px 10px!important;border-radius:26px!important;min-width:0!important}.cpo-avatar,.friend-avatar{width:82px!important;height:82px!important}.cpo-card h3{font-size:clamp(.82rem,3.3vw,1rem)!important;line-height:1.18!important;word-break:break-word!important}.cpo-card p{font-size:.72rem!important;line-height:1.4!important}
  .ilab-hero-stats{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important}.ilab-hero-stat{width:100%!important;max-width:100%!important;justify-content:center!important;text-align:center!important;white-space:normal!important;padding:14px 16px!important}
  .atl-filter-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;padding-inline:0!important}.atl-chip{width:100%!important;max-width:none!important;padding:13px 8px!important;font-size:clamp(.76rem,3.1vw,.9rem)!important}.atl-grid{padding-left:0!important;padding-right:0!important}.atl-card{border-radius:28px!important;padding:22px!important}.atl-card-title{font-size:clamp(1.2rem,5vw,1.58rem)!important;line-height:1.18!important}
}

@media (max-width:390px){
  .lux-title{font-size:clamp(1.96rem,9.6vw,2.72rem)!important}.section-head h2,.cta-card h2,.school-text h2,.contact-card h2{font-size:clamp(1.78rem,8.2vw,2.38rem)!important}
  .cpo-title,.ilab-hero h1,.atl-ohero h1{font-size:clamp(1.9rem,8.45vw,2.62rem)!important;line-height:1.07!important}.social-cta-row .btn{font-size:.72rem!important}.cpo-grid{gap:12px!important}.cpo-avatar,.friend-avatar{width:76px!important;height:76px!important}
}