/* ===========================================================================
   TechFides CPO Engine — "Sovereign Luxe" design layer
   Shared override stylesheet linked AFTER each page's inline <style>.
   Navy/electric base + platinum hairline detailing, refined serif display
   (Fraunces) paired with a clean grotesque (Hanken Grotesk), grain texture,
   and more breathing room. Single source of truth for the elevated look.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Fraunces','Hoefler Text',Georgia,'Times New Roman',serif;
  --platinum:#C9D4EA;
  --platinum-2:#8FA0C2;
  --line:rgba(176,198,235,.15);
  --shadow:0 22px 70px rgba(2,6,16,.55);
}

/* Body type + atmosphere ---------------------------------------------------- */
body{ font-family:var(--sans); letter-spacing:.1px; }

/* fine film grain over the whole surface for depth (clicks pass through) */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* Display typography — serif on hero + brand/product names only ------------- */
h1, .hero h1, .product, .pn, .pname, .brand .product{
  font-family:var(--serif); font-weight:600; letter-spacing:-.015em;
}
h1, .hero h1{ font-weight:600; line-height:1.05; }

/* keep micro / uppercase labels in the refined grotesque, just airier */
.card h2, .sec, .sec-title, .sec-h, .vertical-tab, .sub, .k, th{
  font-family:var(--sans); letter-spacing:1.4px;
}

/* Platinum hairline detailing ---------------------------------------------- */
.divider{ background:linear-gradient(180deg,transparent,var(--platinum-2),transparent) !important; opacity:.6; }
.card, .app, .stat, .kpi, .alert, .recovery, .own, .trust, .problem, .pill, .month .bar, .meter{
  border-color:var(--line) !important;
}
/* refine the card top-accent: electric core with platinum fade */
.card::before{
  background:linear-gradient(90deg,transparent, var(--platinum-2) 18%, var(--electric) 50%, var(--platinum-2) 82%, transparent) !important;
  opacity:.55 !important;
}

/* Logo as an active link to techfides.com ---------------------------------- */
a.logo-link{ display:inline-flex; align-items:center; text-decoration:none; transition:opacity .18s ease, filter .18s ease; }
a.logo-link:hover{ opacity:.88; filter:drop-shadow(0 0 10px rgba(0,153,255,.35)); }
a.logo-link::after{
  content:"↗"; font-family:var(--sans); font-size:9px; color:var(--platinum-2);
  margin-left:7px; transform:translateY(-6px); opacity:.6; transition:opacity .18s;
}
a.logo-link:hover::after{ opacity:1; color:var(--electric); }

/* Survey link affordance (dashboard / engine) ------------------------------ */
.surveylink{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; cursor:pointer;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.3px;
  color:var(--platinum); background:rgba(176,198,235,.06);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; transition:.16s;
}
.surveylink:hover{ border-color:var(--electric); color:var(--electric); background:rgba(0,153,255,.08); }
.surveylink::after{ content:"↗"; font-size:10px; opacity:.7; }

/* A touch more air on the primary cards */
.card{ padding:24px; }

/* Generative Studio (engine Phase-3 view) */
#view-generate select{ background:var(--navy); border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:9px 12px; font-size:13px; font-family:var(--sans); min-width:230px; }
#view-generate .genlbl{ display:block; font-size:11px; color:var(--platinum-2); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:6px; font-weight:600; }
.gen-badge{ display:inline-block; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:1px;
  color:var(--warn); background:rgba(245,165,36,.12); border:1px solid rgba(245,165,36,.4);
  padding:5px 11px; border-radius:6px; margin-bottom:12px; }
.gen-doc{ background:var(--navy); border:1px solid var(--line); border-radius:12px; padding:24px 26px; line-height:1.6; }
.gen-doc h3{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--txt); margin-bottom:6px; }
.gen-sec{ margin-top:16px; }
.gen-sec .gen-h{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--electric); font-weight:700; margin-bottom:8px; }
.gen-sec p{ font-size:13.5px; color:var(--txt); }
.gen-sec ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:7px; }
.gen-sec li{ font-size:13px; color:var(--txt); padding-left:16px; position:relative; }
.gen-sec li::before{ content:"—"; position:absolute; left:0; color:var(--platinum-2); }

/* Hub signature line — the brand's core conviction, set in serif italic */
.sig{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(16px,2.4vw,20px); line-height:1.4; color:var(--platinum);
  max-width:60ch; margin-top:18px; padding-left:18px;
  border-left:2px solid var(--platinum-2);
}