/* ============================================================
   DRG0NF1Y — Signature Aesthetic Layer  (load LAST)
   Locks the site to the brand art: void-black canvas, electric
   violet neon, chrome/silver metal, hex honeycomb + circuit HUD.
   "Stay Fly. Strike First."
   ============================================================ */

:root{
  --df-black:#04030A;
  --df-black-2:#0A0714;
  --df-panel:#100A1E;
  --df-violet:#7C3AED;     /* signal */
  --df-neon:#A855F7;       /* neon violet */
  --df-lav:#C084FC;        /* electric lavender accent */
  --df-lav-soft:#D8B4FE;
  --df-silver-hi:#FBFCFE;  /* chrome highlight */
  --df-silver:#D4D7E0;
  --df-silver-lo:#8C8FA0;  /* chrome shadow */
  --df-text:#F4F2FB;
  --df-muted:#C0B3D6;
  --df-line:rgba(192,132,252,.26);
  --df-glow:0 0 28px rgba(168,85,247,.35);
  --df-r:18px;
  --df-cut:14px;           /* angular HUD bevel */
}

/* ---- Canvas: true black + faint hex honeycomb weave ---------- */
html,body{
  background-color:var(--df-black) !important;
  color:var(--df-text);
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at 12% -4%, rgba(124,58,237,.20), transparent 30rem),
    radial-gradient(circle at 88% 2%, rgba(168,85,247,.14), transparent 28rem),
    linear-gradient(180deg, var(--df-black), #07040F 46%, var(--df-black));
}
/* honeycomb texture — two layered conic/linear hex hints, very low opacity */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.06;
  background-image:
    repeating-linear-gradient(60deg,  rgba(192,132,252,.7) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-60deg, rgba(192,132,252,.7) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,   rgba(192,132,252,.7) 0 1px, transparent 1px 45px);
  background-size:52px 90px;
  mask-image:radial-gradient(circle at 50% 0%, #000 0, transparent 78%);
}
@media (prefers-reduced-motion: no-preference){
  body::before{ animation:dfDrift 26s ease-in-out infinite alternate; }
}
@keyframes dfDrift{ from{ background-position:0 0,0 0,0 0; } to{ background-position:0 -22px, 0 18px, 0 0; } }

/* ---- Skip link (a11y) ---------------------------------------- */
.df-skip{
  position:absolute; left:12px; top:-48px; z-index:200;
  background:linear-gradient(135deg,var(--df-violet),var(--df-neon));
  color:#fff; padding:10px 16px; border-radius:10px; font-weight:800;
  transition:top .2s ease;
}
.df-skip:focus{ top:12px; }

/* ---- Header: chrome edge + scrolled state -------------------- */
.site-header{
  background:rgba(4,3,10,.74) !important;
  border-bottom:1px solid var(--df-line) !important;
  backdrop-filter:blur(16px) saturate(120%);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.df-scrolled{
  background:rgba(4,3,10,.92) !important;
  box-shadow:0 14px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.10);
}
.site-header::after{   /* thin neon underline that fades from center */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent, rgba(168,85,247,.7), transparent);
  opacity:.7;
}
.site-nav a{ position:relative; }
.site-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--df-neon),var(--df-lav));
  transition:right .25s ease; border-radius:2px;
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a[aria-current="page"]::after{ right:0; }
.site-nav a[aria-current="page"]{ color:var(--df-silver-hi); }

/* ---- Chrome / metallic display type -------------------------- */
/* Visible silver fallback so headings can never render blank. */
.polish-title,
.clean-hero h1,
.page-hero h1,
.hero h1{
  color:#F1EFF9;
  -webkit-text-fill-color:#F1EFF9;
  filter:drop-shadow(0 2px 10px rgba(168,85,247,.22));
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .polish-title,
  .clean-hero h1,
  .page-hero h1,
  .hero h1{
    background:linear-gradient(180deg,var(--df-silver-hi) 0%,#E2E4EC 38%,var(--df-silver-lo) 62%,#E8EAF1 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
/* keep the highlighted span in the hero violet, not chrome */
.polish-title span{
  -webkit-text-fill-color:initial; color:var(--df-lav) !important;
  background:none; filter:none;
  text-shadow:0 0 26px rgba(192,132,252,.45);
}

/* ---- Buttons: angular HUD shape + chrome/neon ---------------- */
.btn{
  border-radius:0 !important;
  clip-path:polygon(var(--df-cut) 0,100% 0,100% calc(100% - var(--df-cut)),calc(100% - var(--df-cut)) 100%,0 100%,0 var(--df-cut));
  text-transform:uppercase; letter-spacing:.06em; font-size:.86rem;
}
.btn.primary,.nav-cta{
  background:linear-gradient(135deg,var(--df-violet),var(--df-neon)) !important;
  color:#fff !important;
  border:1px solid rgba(216,180,254,.6) !important;
  box-shadow:0 0 0 1px rgba(168,85,247,.25), var(--df-glow);
}
.btn.primary:hover,.nav-cta:hover{
  box-shadow:0 0 0 1px rgba(216,180,254,.6), 0 0 34px rgba(168,85,247,.55);
  transform:translateY(-2px);
}
.btn.ghost{
  background:rgba(192,132,252,.06) !important;
  border:1px solid var(--df-line) !important;
  color:var(--df-silver) !important;
}
.btn.ghost:hover{ border-color:rgba(192,132,252,.6) !important; color:#fff !important; }

/* ---- Hero emblem: concentric neon rings (echoes the art) ----- */
.polish-hero-art{ position:relative; }
.polish-hero-art::before{
  content:""; position:absolute; inset:6% 8%; z-index:0; border-radius:50%;
  background:
    radial-gradient(circle, transparent 56%, rgba(168,85,247,.16) 57%, transparent 60%),
    radial-gradient(circle, transparent 70%, rgba(192,132,252,.12) 71%, transparent 74%);
}
.polish-hero-art img{ position:relative; z-index:1; }
@media (prefers-reduced-motion: no-preference){
  .polish-hero-art::after{
    content:""; position:absolute; inset:10% 12%; z-index:0; border-radius:50%;
    border:1px dashed rgba(192,132,252,.25);
    animation:dfSpin 40s linear infinite;
  }
}
@keyframes dfSpin{ to{ transform:rotate(360deg); } }

/* ---- Circuit / HUD bracket frame on signature panels --------- */
.polish-cta,.clean-cta,.threat-map-panel,.sample-report-score-card,
.dashboard-status-card,.faq-side-panel{
  position:relative;
}
.polish-cta::before,.clean-cta::before,.threat-map-panel::before,
.sample-report-score-card::before,.dashboard-status-card::before,
.faq-side-panel::before{
  content:""; position:absolute; inset:10px; pointer-events:none; z-index:1;
  border:1px solid rgba(192,132,252,.22);
  -webkit-mask:
    linear-gradient(#000 0 0) top left/22px 1px no-repeat,
    linear-gradient(#000 0 0) top left/1px 22px no-repeat,
    linear-gradient(#000 0 0) top right/22px 1px no-repeat,
    linear-gradient(#000 0 0) top right/1px 22px no-repeat,
    linear-gradient(#000 0 0) bottom left/22px 1px no-repeat,
    linear-gradient(#000 0 0) bottom left/1px 22px no-repeat,
    linear-gradient(#000 0 0) bottom right/22px 1px no-repeat,
    linear-gradient(#000 0 0) bottom right/1px 22px no-repeat;
}

/* ---- Card hover lift + neon edge ----------------------------- */
.polish-card,.clean-card,.marketing-card,.service-card,.price-card,
.gear-card,.news-card,.case-study-card{
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.polish-card:hover,.clean-card:hover,.marketing-card:hover,.service-card:hover,
.price-card:hover,.gear-card:hover,.news-card:hover,.case-study-card:hover{
  transform:translateY(-4px);
  border-color:rgba(192,132,252,.5);
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(168,85,247,.18);
}

/* ---- Prices / numbers --------------------------------------- */
/* Plain, always-visible prices. No background-clip text tricks here —
   they leave transparent text on grid items in some browsers. */
.price,.price-tag,.tier-price,.price-big,.price-line,
.market-price strong,.sample-report-score-card strong,
.dashboard-status-card strong{
  color:#EBD9FF;
  -webkit-text-fill-color:#EBD9FF;
  font-weight:900;
}

/* ---- Footer brand line --------------------------------------- */
.site-footer{ border-top:1px solid var(--df-line); }
.df-tagline{
  letter-spacing:.34em; text-transform:uppercase; font-weight:900;
  font-size:.72rem; color:var(--df-lav);
}

/* ---- Focus visibility (a11y, quality floor) ------------------ */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--df-lav);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- Honor reduced motion globally --------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---- Selection ----------------------------------------------- */
::selection{ background:rgba(168,85,247,.4); color:#fff; }

/* ============================================================
   PRICE VISIBILITY GUARANTEE  (last-wins, overrides any layer)
   Forces every price element to render as plain visible text and
   removes any pill/capsule background or clipped-text effect that
   could blank it out.
   ============================================================ */
.price,
.price-line,
.price-tag,
.tier-price,
.price-big,
.affiliate-card .price,
.merch-product .price,
.gear-card .price,
.market-price strong{
  -webkit-text-fill-color:#EBD9FF !important;
  color:#EBD9FF !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  min-height:0 !important;
  box-shadow:none !important;
  text-shadow:0 0 18px rgba(192,132,252,.35);
}
/* gear/affiliate prices read better at a contained size than 3rem */
.affiliate-card .price,
.gear-card .price{
  font-size:1.5rem !important;
  line-height:1.2 !important;
  display:block;
  margin:2px 0 4px !important;
}