/* ============================================================
   CX DEFENSE — "Graphite" theme overlay
   Shifts the base from pure abyss to a premium graphite surface
   that descends SMOOTHLY into deep-ocean blue only toward the base.
   Blue becomes depth, not flood. More brass lamp. Balanced contrast.
   Layer this AFTER styles.css + site.css.
   ============================================================ */

:root{
  /* graphite neutrals — warm-charcoal, not blue */
  --ink-950:#0d0e10;
  --ink-900:#111214;
  --ink-850:#16171b;   /* surface */
  --ink-800:#1b1d22;   /* raised */
  --ink-750:#202229;
  --ink-700:#24262d;   /* hairline */
  --ink-600:#2e313a;   /* border */
  --ink-500:#3b3f49;   /* strong border */
  --ink-400:#484d58;

  /* more lamp — warmer, brighter brass glow */
  --glow-brass:rgba(205,164,52,0.22);
  --glow-brass-soft:rgba(205,164,52,0.07);
  --lamp-cta:0 0 60px -4px rgba(205,164,52,0.38);
  --lamp-edge:0 0 0 1px rgba(205,164,52,0.22), 0 0 46px -8px rgba(205,164,52,0.30);
}

/* the descent: graphite at the top, deep ocean at the base */
.site{
  background:linear-gradient(180deg,
    #0d0e10 0%,
    #111319 36%,
    #0d1622 70%,
    #0a1a2d 88%,
    #081d33 100%);
}

/* premium paper grain — barely-there tooth */
.site::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* let an ocean glow gather at the very base, behind the footer */
.footer{
  position:relative;
  background:linear-gradient(180deg, rgba(8,29,51,0) 0%, rgba(10,32,56,0.55) 100%);
}

/* surfaces lift a touch so graphite reads as paper, not void */
.cap, .why-fact, .cred, .contact-channel, .form-card, .product, .post, .post-featured{
  box-shadow:0 1px 0 rgba(255,255,255,0.015) inset, 0 24px 60px -34px rgba(0,0,0,0.7);
}

/* a hair more warmth on the hero wash */
.hero::before{opacity:1.0}