/* =====================================================================
   SAJID MK — Platinum / Titanium / Copper | Crystal Clear 2026-11-12
   A final external theme layer, loaded AFTER the original CSS files.
   Layout, images, interactions and content are deliberately untouched.
   No frosted-glass backdrop blur on first load; keep real background visible.
   ===================================================================== */
:root {
  --platinum: #C9CED3;
  --pearl: #F5F3ED;
  --titanium: #A6B1BD;
  --copper: #B78E83;
  --accent: var(--titanium);
  --accent-rgb: 166,177,189;
  --accent-deep: #778390;
  --accent-deep-rgb: 119,131,144;
  --accent-light: var(--platinum);
  --accent-light-rgb: 201,206,211;
  --on-accent: #15171B;
  --text: var(--pearl);
  --text-dim: rgba(245,243,237,.89);
  --text-faint: rgba(201,206,211,.83);
  --glass-border: rgba(201,206,211,.34);
  --glass-border-bright: rgba(245,243,237,.58);
  --vision-border: rgba(201,206,211,.34);
  --crystal-gold: var(--platinum);
  --crystal-light: var(--pearl);
  --crystal-line: rgba(201,206,211,.48);
  --glass-floor: .07;
  --glass-ceil: .15;
  --blur-glass: none;
  --blur-section: none;
  --blur-nav: none;
}

/* Blur is controlled globally by the external script, NOT disabled per element.
   The CSS variable starts as none, preserving sharp zero-blur glass for new users.
   Keep the dock crisp so it remains usable at 100px. */
:root {
  --site-glass-blur: 0px;
  --site-glass-filter: none;
  --secondary-accent: var(--copper);
}

/* Original landscape photo stays in place, with neutral dark contrast wash. */
html body .bg-field::after {
  background: linear-gradient(180deg,rgba(7,8,11,.25),rgba(8,10,13,.35) 53%,rgba(7,8,11,.46)) !important;
}

/* Large glass panels — 100% sharp photo through translucent surfaces. */
html body :is(.section,.recruiter-bar,.footer-panel) {
  background: rgba(11,13,17,.11) !important;
  background-color: transparent !important;
  border-color: rgba(201,206,211,.32) !important;
  border-top-color: rgba(245,243,237,.55) !important;
  box-shadow: 0 24px 65px -40px rgba(0,0,0,.65),inset 0 1px 0 rgba(245,243,237,.11) !important;
}
html body :is(.glass,.glass-clear,.glass-tight),
html body :is(.vision-main-pane,.vision-console-frame .term-window,.vision-identity,.vision-project-card),
html body #client-projects :is(.real-world-feature,.client-case,.concept-card),
html body #contact :is(.sajid-offer-card,.sajid-subscribe-card) {
  background: rgba(10,12,16,.12) !important;
  background-color: transparent !important;
  border-color: rgba(201,206,211,.32) !important;
  border-top-color: rgba(245,243,237,.56) !important;
  box-shadow: 0 24px 55px -38px rgba(0,0,0,.64),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
html body :is(.glass,.glass-clear,.glass-tight)::before,
html body :is(.glass,.glass-clear,.glass-tight)::after {
  background: transparent !important;
}
/* Small interactive glass objects don't need solid gray backings. */
html body :is(.tk-card,.tl-item,.bd-card,.cs-item,.cert-card,.case-card,.hero-photo-tag,.status-strip,.diag-console,.geo-vault,.tk-note) {
  background:rgba(12,14,18,.09) !important;
  background-color:transparent !important;
  border-color:rgba(201,206,211,.27) !important;
}

/* Type hierarchy — pearl headings, platinum metadata and thoughtful contrast. */
html body { color:var(--pearl); }
html body :is(h1,h2,h3,h4),
html body :is(.vision-name,.vision-featured h2,.vision-project-card h3,.concept-card h4) {
  color:var(--pearl) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.60);
}
html body :is(p,li,small) { text-shadow:0 1px 7px rgba(0,0,0,.48); }
html body :is(.section-label,.eyebrow,.recruiter-label,.vision-pane-eyebrow,.vision-kicker,.status-item .lbl,.concept-project-count,.degree-proof-overline),
html body #contact .sajid-card-eyebrow {
  color:var(--platinum) !important;
}
html body :is(.section-intro,.hero-sub,.vision-role-line,.concept-disclaimer,.case-col p) {
  color:var(--pearl) !important;
}
html body :is(a,button,summary):focus-visible,
html body #client-projects :is(.concept-image-link,.concept-demo-cta):focus-visible {
  outline-color:var(--platinum) !important;
}

/* Titanium + platinum buttons and glass navigation pills. */
html body #topNav {
  background: rgba(11,13,18,.17) !important;
  border:1px solid rgba(201,206,211,.42) !important;
  border-top-color:rgba(245,243,237,.54) !important;
  box-shadow:0 10px 32px -24px #000,inset 0 1px rgba(245,243,237,.13) !important;
}
html body #topNav :is(.nav-link,.nav-more>summary.nav-link),
html body .mob-drawer .nav-link {
  --lg-bc:rgba(201,206,211,.50) rgba(201,206,211,.28) rgba(201,206,211,.20) rgba(201,206,211,.36);
  --lg-fg:var(--pearl);
  color:var(--pearl) !important;
  border-color:rgba(201,206,211,.39) !important;
  background:rgba(255,255,255,.035) !important;
}
html body #topNav :is(.nav-link.active,.nav-more[open]>summary.nav-link),
html body #topNav :is(.nav-link,.nav-more>summary.nav-link):hover,
html body #topNav :is(.nav-link,.nav-more>summary.nav-link):focus-visible {
  --lg-bc:rgba(201,206,211,.78) rgba(166,177,189,.40) rgba(166,177,189,.25) rgba(201,206,211,.61);
  color:var(--pearl) !important;
  background:rgba(166,177,189,.16) !important;
  border-color:rgba(201,206,211,.62) !important;
}
html body #topNav .nav-more summary span { color:var(--titanium) !important; }
html body #topNav .nav-more-menu {
  background:rgba(13,15,20,.28) !important;
  border-color:rgba(201,206,211,.54) !important;
  border-top-color:rgba(245,243,237,.61) !important;
}
html body #topNav .nav-more-menu .nav-link:hover {
  background:rgba(166,177,189,.17) !important;
}
html body :is(.btn-primary,.btn.primary,.btn-primary.btn,.nav-cta,.cert-btn.primary,.cf-submit,.tk-primary),
html body #contact .sajid-primary-action {
  background:linear-gradient(120deg,var(--platinum),var(--titanium)) !important;
  background-color:var(--titanium) !important;
  color:#16181D !important;
  border:1px solid rgba(245,243,237,.64) !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px rgba(255,255,255,.53),0 10px 28px -16px rgba(0,0,0,.67) !important;
}
html body :is(.btn-primary,.btn.primary,.btn-primary.btn,.nav-cta,.cert-btn.primary,.cf-submit,.tk-primary):hover,
html body #contact .sajid-primary-action:hover {
  background:linear-gradient(120deg,var(--pearl),var(--platinum)) !important;
  border-color:var(--pearl) !important;
}
html body :is(.btn-secondary,.btn.ghost,.cert-btn,.recruiter-link,.contact-pill,.sajid-secondary-action),
html body #client-projects .concept-demo-cta {
  color:var(--pearl) !important;
  border-color:rgba(201,206,211,.50) !important;
}

/* New Bismillah pill: perfectly centered, silver edge, no blur. */
html body .vision-landing .hero-bismillah-wrap {
  display:flex;
  justify-content:center;
  width:100%;
}
html body .vision-landing .hero-bismillah {
  color:var(--pearl) !important;
  background:rgba(12,13,18,.10) !important;
  border:1px solid rgba(201,206,211,.55) !important;
  border-top-color:rgba(245,243,237,.69) !important;
  text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.59);
}

/* Copper is intentionally confined to editorial project details and
   numbered labels, not general body copy. */
html body #client-projects :is(.concept-kicker,.concept-type,.concept-title-period,.real-world-live,.concept-card .concept-label),
html body #client-projects .concept-demo-cta span,
html body #client-projects .client-showcase-content h3 span,
html body #contact .sajid-discount-note strong {
  color:var(--copper) !important;
}
html body #client-projects :is(.concept-kicker-dot,.hero-client-teaser-dot) {
  background:var(--copper) !important;
  box-shadow:0 0 10px rgba(183,142,131,.30) !important;
}
html body #client-projects :is(.concept-card,.client-case,.real-world-feature) {
  border-color:rgba(183,142,131,.33) !important;
  border-top-color:rgba(201,206,211,.60) !important;
}
html body #client-projects :is(.concept-card:hover,.client-case:hover,.real-world-feature:hover) {
  border-color:rgba(183,142,131,.70) !important;
  box-shadow:0 25px 56px -31px rgba(0,0,0,.74),inset 0 1px rgba(245,243,237,.12) !important;
}
html body #client-projects .concept-demo-cta,
html body #client-projects .motora-actions .motora-buy {
  background:rgba(183,142,131,.095) !important;
  border-color:rgba(183,142,131,.48) !important;
  color:var(--pearl) !important;
}
html body #client-projects .concept-demo-cta:hover {
  background:rgba(183,142,131,.19) !important;
  border-color:var(--copper) !important;
}
html body #client-projects .client-showcase-cta {
  background:linear-gradient(110deg,var(--platinum),var(--titanium)) !important;
  color:#16181D !important;
  box-shadow:0 12px 26px -16px #000 !important;
}
html body #client-projects .client-showcase-cta:hover {
  background:linear-gradient(110deg,var(--pearl),var(--platinum)) !important;
}
/* Retain the distinct-number system and the existing animation/spacing. */
html body .section .section-ordinal .ordinal-glyph {
  filter:drop-shadow(1px 3px 0 rgba(0,0,0,.42))
         drop-shadow(0 0 12px color-mix(in srgb,var(--ordinal-color) 30%,transparent));
}
html body .section .section-label .dot {
  background:var(--ordinal-color,var(--copper)) !important;
  box-shadow:0 0 12px color-mix(in srgb,var(--ordinal-color) 40%,transparent) !important;
}

/* Community call-to-action — remove champagne fills; more refined copper. */
html body #contact .sajid-discount-note {
  background:rgba(183,142,131,.08) !important;
  border-color:rgba(183,142,131,.40) !important;
}
html body #contact .sajid-discount-note>span:first-child,
html body #contact .sajid-service-features li::before {
  color:var(--copper) !important;
}
html body #contact .sajid-services-title,
html body #contact .sajid-benefits-title {
  color:var(--pearl) !important;
}
html body #contact .sajid-community .sajid-signoff {color:var(--platinum) !important;}

/* Dock's second text-colour dot: Platinum, not gold. */
html body .text-colour-dot[data-text-colour="silver"] {--dot-colour:var(--platinum);}

@media print {
  /* The readable monochrome CV print view retains its existing white background. */
  html body :is(.section,.recruiter-bar,.footer-panel,.glass,.glass-clear,.glass-tight) {
    background:#fff !important;
    border-color:#ddd !important;
    box-shadow:none !important;
  }
  html body :is(h1,h2,h3,h4,p,li,small) {color:#111 !important;text-shadow:none !important;}
}

/* =====================================================================
   SITE-WIDE GLASS BLUR (0–100px)
   One real background/backdrop blur for every glass surface, without ever
   filtering the panel text, certificate photos, or the landscape itself.
   The display dock is deliberately exempt so its controls remain readable.
   Loaded last to override older hard-coded 14/18/28px material filters.
   ===================================================================== */
html body :is(
  .section, .recruiter-bar, .footer-panel,
  #topNav, .mob-drawer, .nav-more-menu,
  .glass, .glass-clear, .glass-tight,
  .vision-main-pane, .vision-console-frame .term-window,
  .vision-identity, .vision-project-card,
  .vision-landing .hero-bismillah,
  .vision-online-row .status-chip, .status-strip, .hero-client-teaser,
  .vision-skills > span, .vision-card-icon, .vision-project-tags span,
  .hero-photo-tag, .vision-view-all,
  .real-world-feature, .client-case, .concept-card,
  .sajid-offer-card, .sajid-subscribe-card, .sajid-discount-note,
  .tk-card, .tl-item, .bd-card, .cs-item, .cert-card, .case-card,
  .diag-console, .geo-vault, .tk-note, .tk-panel,
  .edu-card, .degree-proof, .degree-proof-card,
  .sp-summary, .sp-incident, .status-chip,
  .qr-card, .contact-panel, .ref-cta,
  .nav-link, .nav-cta, .nav-more > summary.nav-link,
  .btn-primary, .btn-secondary, .btn.ghost,
  .recruiter-link, .contact-pill,
  .vview-panel, .vgate-panel, .cmdk-panel,
  .fx-preview-chip,
  .vision-landing .hero-bismillah
) {
  -webkit-backdrop-filter: var(--site-glass-filter, none) !important;
  backdrop-filter: var(--site-glass-filter, none) !important;
}

/* The outer hero is a layout/animation stage, not a material surface.
   Its actual hero cards and Bismillah pill are listed above. */
html body .hero.vision-landing {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Footer and big sections remain transparent even when frosted.
   This is a blur-only setting, not an opacity/darkness slider. */
html body :is(.section, .recruiter-bar, .footer-panel) {
  background-color: transparent !important;
}

@media print {
  html body :is(.section,.recruiter-bar,.footer-panel,.glass,.glass-clear,.glass-tight) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* The existing Smoked Copper is the restrained SECONDARY accent;
   Titanium stays primary. Only secondary-action outlines warm on hover. */
html body :is(.btn-secondary, .btn.ghost, .recruiter-link, .contact-pill, .sajid-secondary-action):hover {
  border-color: rgba(183,142,131,.72) !important;
  box-shadow: inset 0 1px rgba(245,243,237,.14),
              0 0 0 1px rgba(183,142,131,.14) !important;
}