/* SAJIDMK | 13 Nov 2026 | precise transparency and single-surface refinement.
   This stylesheet MUST load last. It is separate so changes are reversible.
   CSS custom props controlled by existing 0–100 sliders:
   --site-glass-blur 0–100px, --sg-glass-alpha 0–1, --sg-motion-amplitude 0–1.
*/
:root{
  --sg-glass-alpha:0;
  --site-glass-blur:0px;
  --sg-motion-amplitude:1;
  --refine-clear:rgba(var(--sg-surface-rgb,10,12,16),var(--sg-glass-alpha,0));
  --refine-frost:blur(var(--site-glass-blur,0px)) saturate(142%);
  --refine-edge:rgba(241,249,255,.51);
  --refine-shadow:0 15px 42px -30px rgba(0,0,0,.69),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(6,9,16,.14);
  --refine-gap:clamp(22px,2.6vw,36px);
}
/* The arc was removed from the HTML, but hide any cached legacy markup. */
html body .vision-orbit{display:none!important}
/* Real visibility: 0% opacity means zero paint, not a 10%-opaque gradient. */
html body main > section.optical-liquid-glass.optical-liquid-glass,
html body main > .recruiter-bar.optical-liquid-glass,
html body main > .vision-featured.optical-liquid-glass{
  background:var(--refine-clear)!important;
  -webkit-backdrop-filter:var(--refine-frost)!important;
  backdrop-filter:var(--refine-frost)!important;
  border:1px solid var(--refine-edge)!important;
  border-top:1.5px solid rgba(255,255,255,.79)!important;
  border-bottom-color:rgba(196,215,227,.30)!important;
  border-radius:clamp(22px,3vw,36px)!important;
  box-shadow:var(--refine-shadow)!important;
  outline:0;
}
/* No extra full-page layer on the home hero — the two primary panes provide the glass. */
html body main > .hero.vision-landing.optical-liquid-glass{
  width:min(1596px,calc(100% - 28px));max-width:100%;
  padding:0 0 12px!important;
  margin-inline:auto!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  overflow:visible!important;
}
/* The fake second pane/rim is what made sections look double layered. */
html body main > .section.optical-liquid-glass::after,
html body .vision-main-pane::before,
html body #client-projects::before{content:none!important;display:none!important}
html body main > .section.optical-liquid-glass{
  position:relative;
  margin-top:var(--refine-gap)!important;
  margin-bottom:var(--refine-gap)!important;
  overflow:clip;
  scroll-margin-top:clamp(85px,9vw,135px);
}
html body main > .vision-featured.optical-liquid-glass,
html body main > .recruiter-bar.optical-liquid-glass{
  margin-top:var(--refine-gap)!important;
  margin-bottom:var(--refine-gap)!important;
}
html body main > .section.optical-liquid-glass > *{position:relative;z-index:1}
html body main > section[hidden]{display:none!important}
/* One actual optical surface per visible panel; remove cumulative blur/tint. */
html body .optical-glass-item.optical-glass-item,
html body #topNav.optical-glass-item,
html body .mob-drawer.optical-glass-item,
html body .vision-main-pane.optical-glass-item,
html body .vision-console-frame .term-window.optical-glass-item,
html body .vision-identity.optical-glass-item{
  background:var(--refine-clear)!important;
  background-image:none!important;
  background-color:var(--refine-clear)!important;
  -webkit-backdrop-filter:var(--refine-frost)!important;
  backdrop-filter:var(--refine-frost)!important;
  border:1px solid rgba(228,241,250,.37)!important;
  border-top-color:rgba(254,254,255,.69)!important;
  border-bottom-color:rgba(189,210,221,.22)!important;
  box-shadow:var(--refine-shadow)!important;
}
/* Inside an already blurred container, the inner outline is not another pane. */
html body :is(main > section.optical-liquid-glass,.vision-main-pane,.vision-identity,.term-window,.vision-featured) .optical-glass-item.optical-glass-item{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-color:rgba(230,239,247,.16)!important;
  border-top-color:rgba(255,255,255,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 25px -25px rgba(0,0,0,.48)!important;
}
/* Hero has no outer pane: retain optical glass on just the 3 principal panes. */
html body .vision-stage{min-width:0;max-width:100%;gap:clamp(16px,2.4vw,28px)!important}
html body .vision-stage > *{min-width:0;max-width:100%}
html body .vision-main-pane.optical-glass-item,
html body .vision-stage-aside .vision-identity.optical-glass-item,
html body .vision-console-frame .term-window.optical-glass-item{
  border-radius:clamp(22px,2.5vw,30px)!important;
  border:1px solid rgba(238,249,255,.50)!important;
  border-top:2px solid rgba(255,255,255,.76)!important;
  box-shadow:0 20px 58px -39px rgba(0,0,0,.72),inset 0 2px 0 rgba(255,255,255,.31)!important;
  -webkit-backdrop-filter:var(--refine-frost)!important;
  backdrop-filter:var(--refine-frost)!important;
}
/* A portrait does not need a second glass plate around the photograph. */
html body .vision-identity .hero-photo.optical-glass-item,
html body .vision-identity .hero-photo{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:1px solid rgba(234,246,255,.36)!important;
  border-radius:clamp(15px,1.5vw,22px)!important;
  box-shadow:0 10px 28px -20px rgba(0,0,0,.68)!important;
}
/* Keep headings and all controls inside the viewport, even with accessibility zoom. */
html body .vision-name{
  max-width:100%;min-width:0;
  font-size:clamp(calc(27px * var(--site-font-scale, 1)),calc(3.3vw * var(--site-font-scale, 1)),calc(52px * var(--site-font-scale, 1)))!important;
  white-space:normal!important;
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.08;
  text-wrap:balance;
}
html body .vision-main-pane{min-width:0;padding-inline:clamp(19px,2.5vw,38px)!important}
html body .vision-main-pane .hero-sub{max-width:100%;overflow-wrap:break-word}
html body .vision-role-line{gap:clamp(6px,.8vw,10px)}
/* All section and card corners are rounded; retain pill-shaped control geometry. */
html body :is(.optical-glass-item,.case-card,.contact-panel,.real-world-feature,.edu-card,.cert-card,.tk-card,.sajid-offer-card,.sajid-subscribe-card,.bd-card,.vision-project-card){
  border-radius:clamp(17px,2vw,26px)!important;
}
html body :is(.status-chip,.vision-skills>span,.sg-reset,.optic-nav-label){border-radius:999px}
/* The third CV action was a plain underlined link. Same button sizing and material. */
html body .vision-actions .optical-cv-pill,
html body .vision-view-cv.optical-cv-pill{
  display:inline-flex!important;align-items:center;justify-content:center;gap:9px;
  min-height:44px!important;
  padding:10px 17px!important;
  font-size:calc(13px * var(--site-font-scale, 1))!important;font-weight:650!important;line-height:1.2!important;
  color:#f9fcff!important;text-decoration:none!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.62)!important;
  background:var(--refine-clear)!important;
  box-shadow:0 10px 25px -20px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.34)!important;
  -webkit-backdrop-filter:var(--refine-frost)!important;backdrop-filter:var(--refine-frost)!important;
}
html body .vision-view-cv.optical-cv-pill:is(:hover,:focus-visible){
  border-color:#fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 18px rgba(221,239,255,.24)!important;
}
/* A 0% opacity button still keeps its outlined, accessible hit target. */
html body :is(.btn,.nav-cta,.cert-btn,.sajid-offer-cta,.sajid-subscribe-cta,.cf-submit,.tk-primary,.recruiter-link,.optical-cv-pill).optical-glass-item{
  border-radius:999px!important;
  background:var(--refine-clear)!important;
  text-shadow:0 1px 4px rgba(0,0,0,.88);
}
html body .optical-glass-item:is(:hover,:focus-visible){
  border-top-color:rgba(255,255,255,.92)!important;
  box-shadow:0 0 0 1px rgba(244,251,255,.18),0 0 21px rgba(226,240,255,.19),inset 0 1px rgba(255,255,255,.48)!important;
}
/* Strong text contrast without tinting the glass or reducing child opacity. */
html body .optical-liquid-glass :is(h1,h2,h3,h4,p,li),
html body .vision-stage :is(h1,h2,h3,p){text-shadow:0 1px 4px rgba(0,0,0,.56)}
/* Mobile: no edge clipping, reasonable spacing, readable compact actions. */
@media(max-width:980px){
  html body .vision-stage{grid-template-columns:minmax(0,1fr)!important}
  html body main > .section.optical-liquid-glass{margin-block:22px!important}
  html body .vision-name{font-size:clamp(calc(26px * var(--site-font-scale, 1)),calc(5.5vw * var(--site-font-scale, 1)),calc(45px * var(--site-font-scale, 1)))!important}
}
@media(max-width:650px){
  html body .hero.vision-landing.optical-liquid-glass{width:100%!important}
  html body .vision-main-pane{padding-inline:clamp(16px,4vw,24px)!important}
  html body .vision-name{font-size:clamp(calc(24px * var(--site-font-scale, 1)),calc(7.3vw * var(--site-font-scale, 1)),calc(38px * var(--site-font-scale, 1)))!important}
  html body .vision-actions{gap:8px}
  html body .vision-actions .btn,html body .vision-actions .optical-cv-pill{font-size:calc(12px * var(--site-font-scale, 1))!important;padding:9px 12px!important;min-height:43px!important}
  html body main > section.optical-liquid-glass{border-radius:21px!important}
}
/* The dock was too visually large. Scale the entire original design together. */
html body .sg-dock{transform:translateY(-50%) scale(.79)!important;transform-origin:right center!important}
html body .sg-dock[data-collapsed="true"]{width:38px!important;height:60px!important}
html body .sg-reopen{
  display:none;
  width:38px!important;height:55px!important;right:0!important;
  border:1.5px solid rgba(255,255,255,.88)!important;
  border-right:0!important;
  background:rgba(8,12,18,.80)!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(217,236,249,.28),-4px 0 19px rgba(228,240,255,.55),inset 1px 0 12px rgba(255,255,255,.20)!important;
  animation:sg-reopen-breathe 2.6s ease-in-out infinite;
}
html body .sg-dock[data-collapsed="true"] .sg-reopen{display:grid!important}
html body .sg-reopen .sg-icon{color:#fff!important;width:22px!important;height:22px!important}
@keyframes sg-reopen-breathe{
  0%,100%{box-shadow:0 0 0 1px rgba(217,236,249,.32),-4px 0 13px rgba(228,240,255,.37),inset 1px 0 10px rgba(255,255,255,.13)}
  50%{box-shadow:0 0 0 1.4px rgba(255,255,255,.92),-5px 0 24px rgba(228,240,255,.78),inset 1px 0 12px rgba(255,255,255,.30)}
}
html[data-sg-motion="off"] body .sg-reopen{animation:none!important}
@media(prefers-reduced-motion:reduce){html body .sg-reopen{animation:none!important}}
@media(max-width:700px){html body .sg-dock{transform:translateY(-50%) scale(.87)!important}}
@media(max-height:570px){html body .sg-dock{transform:translateY(-50%) scale(.72)!important}}
/* Keep the display settings legible: this editor overlay is NOT a site glass card. */
html body .sg-panel{background:rgba(13,17,23,.94)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important}
@media print{
 html body main > section.optical-liquid-glass,html body .optical-glass-item{box-shadow:none!important}
 html body .optical-glass-item{background:transparent!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
html.optical-motion-off body :is(.optical-liquid-glass,.optical-glass-item)::before,
html.optical-motion-off body :is(.optical-liquid-glass,.optical-glass-item)::after{animation:none!important}

/* 0% motion also disables inherited old-button decorative drift, without
   interfering with scroll triggers, focus, or interactive navigation. */
html[data-sg-motion="off"] body :is(.btn,.nav-cta,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab)::before,
html[data-sg-motion="off"] body :is(.btn,.nav-cta,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab)::after,
html.optical-motion-off body #topNav::before{
  animation:none!important;
  transition:none!important;
}
html.optical-motion-off body #topNav::before{opacity:.14!important}