/* ================================================================
   CRIS LANDING PAGE — Pixel-Perfect Match final-a.png
   All 9 sections | Bootstrap 5 grid | plx- prefix
   Zero inline styles | Pure CSS state management
   ================================================================ */

/* ── 1. DESIGN TOKENS ── */
:root {
  --bg:          #070707;
  --bg-alt:      #0a0a0a;
  --bg-card:     rgba(255,255,255,0.030);
  --bg-hover:    rgba(255,255,255,0.056);
  --bg-glass:    rgba(7,7,7,0.88);

  --border:      rgba(255,255,255,0.072);
  --border-md:   rgba(255,255,255,0.13);
  --border-lime: rgba(183,255,42,0.28);

  --lime-grad:        linear-gradient(90deg,#B7FF2A 0%,#70E000 60%,#00CCA0 100%);
  --lime:        #B7FF2A;
  --lime-bg:     rgba(183,255,42,0.09);
  --lime-bd:     rgba(183,255,42,0.22);
  --lime-dim:    rgba(183,255,42,0.70);
  --lime-glow:   rgba(183,255,42,0.14);

  --cyan:        #00E5FF;
  --cyan-bg:     rgba(0,229,255,0.09);
  --cyan-bd:     rgba(0,229,255,0.22);

  --purple:      #8B5CFF;
  --purple-bg:   rgba(139,92,255,0.09);
  --purple-bd:   rgba(139,92,255,0.22);

  --amber:       #FFB547;
  --amber-bg:    rgba(255,181,71,0.09);
  --amber-bd:    rgba(255,181,71,0.22);

  --orange:      #F97316;
  --orange-bg:   rgba(249,115,22,0.09);

  --green:       #22C55E;
  --green-bg:    rgba(34,197,94,0.09);

  --red:         #EF4444;
  --red-bg:      rgba(239,68,68,0.09);

  --t1: #ffffff;
  --t2: rgba(255,255,255,0.84);
  --t3: rgba(255,255,255,0.64);
  --t4: rgba(255,255,255,0.42);
  --t5: rgba(255,255,255,0.26);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-full:9999px;

  --ease: cubic-bezier(0.4,0,0.2,1);

  --grad-lime: linear-gradient(135deg, #B7FF2A 0%, #80e000 100%);
}

/* ── 2. RESET & BASE ── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.plx-body {
  background-color:var(--bg);
  color:var(--t1);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
a { text-decoration:none; }
ul { list-style:none; margin:0; padding:0; }
button { cursor:pointer; font-family:inherit; }
img { display:block; max-width:100%; }
:focus-visible { outline:2px solid var(--lime); outline-offset:3px; border-radius:var(--r-sm); }

.plx-skip { background:var(--lime); color:#070707; font-size:13px; font-weight:700; left:16px; padding:8px 16px; position:absolute; top:12px; transform:translateY(-200%); transition:transform .15s; z-index:9999; border-radius:var(--r-sm); }
.plx-skip:focus { transform:translateY(0); }

/* ── 3. SCROLL REVEAL ── */
[data-reveal] { opacity:0; transition:opacity .65s var(--ease), transform .65s var(--ease); }
[data-reveal="up"]    { transform:translateY(28px); }
[data-reveal="left"]  { transform:translateX(-28px); }
[data-reveal="right"] { transform:translateX(28px); }
[data-reveal="fade"]  { transform:scale(0.97); }
[data-reveal].visible { opacity:1; transform:none; }

/* ── 4. SHARED UTILITIES ── */
.plx-section-eyebrow {
  align-items:center; color:var(--t4); display:flex; font-size:11.5px;
  font-weight:600; gap:14px; justify-content:center; letter-spacing:2px;
  margin-bottom:18px; text-transform:uppercase;
}
.plx-section-eyebrow::before,
.plx-section-eyebrow::after { background:var(--border-md); content:''; flex:0 0 36px; height:1px; }
.plx-section-eyebrow-left {
  justify-content:flex-start;
}
.plx-section-eyebrow-left::before { display:none; }

.plx-h2 {
  color:var(--t1); font-size:clamp(28px,3vw,44px); font-weight:900;
  letter-spacing:-.8px; line-height:1.13; margin:0 0 16px;
}
.plx-h2-center { text-align:center; }
.plx-lime-text { background:var(--lime-grad);    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block; }
    .plx-grad-txt {
background:var(--lime-grad);    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    }
.plx-grad-text {
  background:var(--grad-lime); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.plx-section-lead { color:var(--t4); font-size:15px; line-height:1.72; margin-bottom:0; }
.plx-section-lead-center { text-align:center; max-width:600px; margin:0 auto; }

/* Buttons */
.plx-btn-primary {
  align-items:center;
  background:linear-gradient(90deg,#C8FF00 0%,#22CC44 55%,#00A838 100%);
  border:none; border-radius:var(--r-md);
  color:#050A05; display:inline-flex; font-size:14px; font-weight:800; gap:7px;
  padding:11px 24px; text-decoration:none;
  transition:filter .2s, transform .2s, box-shadow .2s;
  white-space:nowrap;
}
.plx-btn-primary:hover {
  box-shadow:0 0 32px rgba(183,255,42,.45);
  color:#050A05; filter:brightness(1.08); transform:translateY(-1px);
}
.plx-btn-primary-lg { font-size:15px; gap:8px; padding:13px 28px; }

.plx-btn-ghost {
  align-items:center; background:transparent; border:1px solid var(--border-md);
  border-radius:var(--r-md); color:var(--t2); display:inline-flex;
  font-size:14px; font-weight:600; gap:7px; padding:10px 22px; text-decoration:none;
  transition:border-color .15s, color .15s, background .15s;
}
.plx-btn-ghost:hover { background:var(--bg-hover); border-color:var(--border-lime); color:var(--t1); }
.plx-btn-ghost-lg { font-size:15px; padding:12px 26px; }

/* ── 5. HEADER ── */
.plx-header {
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  background:rgba(7,7,7,0.82); border-bottom:1px solid var(--border);
  left:0; position:fixed; right:0; top:0; transition:background .3s, box-shadow .3s; z-index:1000;
}
.plx-header.scrolled { background:rgba(7,7,7,0.98); box-shadow:0 2px 36px rgba(0,0,0,.65); }
.plx-nav-inner { align-items:center; display:flex; gap:0; 
  /* min-height:68px;  */
      padding-top: 1rem;
    padding-bottom: 1rem;
}

.plx-brand { align-items:center; display:flex; flex-shrink:0; gap:10px; text-decoration:none; }
.plx-brand-icon {
  align-items:center; background:var(--lime); border-radius:8px; display:flex;
  height:36px; justify-content:center; width:36px;
}
.plx-brand-icon svg { display:block; }
.plx-brand-name { color:var(--t1); display:block; font-size:18px; font-weight:900; letter-spacing:-.3px; line-height:1.2; }
.plx-brand-sub  { color:var(--t5); display:block; font-size:10px; font-weight:500; }

.plx-nav-links { align-items:center; display:flex; gap:2px; list-style:none; margin:0 auto; padding:0; }
.plx-nav-link { border-radius:var(--r-sm); color:var(--t3); display:block; font-size:14px; font-weight:500; padding:7px 14px; text-decoration:none; transition:.15s; }
.plx-nav-link:hover { background:rgba(255,255,255,.05); color:var(--t1); }

.plx-nav-actions { align-items:center; display:flex; flex-shrink:0; gap:10px; }
.plx-nav-login { border:1px solid var(--border-md); border-radius:var(--r-md); color:var(--t3); font-size:14px; font-weight:500; padding:8px 18px; text-decoration:none; transition:.15s; }
.plx-nav-login:hover { border-color:var(--border-lime); color:var(--t1); }

.plx-toggler { background:transparent; border:1px solid var(--border-md); border-radius:var(--r-sm); display:none; flex-direction:column; gap:5px; height:40px; justify-content:center; margin-left:auto; padding:8px 10px; width:40px; }
.plx-toggler span { background:var(--t2); border-radius:2px; display:block; height:2px; transition:.3s; width:100%; }
.plx-toggler[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.plx-toggler[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.plx-toggler[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── 6. HERO ── */
.plx-hero {
  min-height:90vh; overflow:hidden; padding-bottom:80px; padding-top:140px; position:relative;
}
.plx-hero::before {
  background:
    radial-gradient(ellipse 60% 55% at 70% 45%, rgba(183,255,42,.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(0,229,255,.04) 0%, transparent 60%);
  content:''; inset:0; pointer-events:none; position:absolute; z-index:0;
}
.plx-hero::after {
  background-image: linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:54px 54px;
  content:''; inset:0; pointer-events:none; position:absolute; z-index:0;
  mask-image:radial-gradient(ellipse 85% 80% at 60% 40%, black 20%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 60% 40%, black 20%, transparent 100%);
}

.plx-hero-badge {
  background:var(--lime-bg); border:1px solid var(--lime-bd); border-radius:var(--r-full);
  color:var(--lime-dim); display:inline-block; font-size:10.5px; font-weight:700;
  letter-spacing:1.8px; margin-bottom:22px; padding:5px 15px; position:relative;
  text-transform:uppercase; z-index:1;
}
.plx-hero-h1 {
  font-size:clamp(46px,3.5vw,82px); font-weight:900; letter-spacing:-2.5px;
  line-height:.98; margin-bottom:22px; position:relative; z-index:1;
}
.plx-hero-h1-w { color:var(--t1); display:block; }
.plx-hero-h1-g { background:var(--lime-grad); display:block;     -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;}

.plx-hero-sub { color:var(--t3); font-size:16px; line-height:1.75; margin-bottom:34px; max-width:500px; position:relative; z-index:1; }
.plx-hero-btns { align-items:center; display:flex; flex-wrap:wrap; gap:12px; position:relative; z-index:1; }

/* ════════════════════════════════════════════════════════════════
   HERO VISUAL — premium dashboard mockup (hero-ref.png style)
   ════════════════════════════════════════════════════════════════ */

/* ── Feature badges row (left col, bottom) ── */
.plx-hero-feats { display:flex; flex-wrap:wrap; gap:22px; margin-top:40px; position:relative; z-index:1; }
.plx-hero-feat  { align-items:center; display:flex; flex-direction:column; gap:8px; text-align:center; }
.plx-hero-feat-ic {
  align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; color:var(--lime); display:flex; font-size:20px;
  height:44px; justify-content:center; transition:.2s; width:44px;
}
.plx-hero-feat:hover .plx-hero-feat-ic { background:rgba(183,255,42,.1); border-color:rgba(183,255,42,.28); }
.plx-hero-feat-txt { color:rgba(255,255,255,.5); font-size:10.5px; font-weight:500; line-height:1.35; max-width:74px; }

/* ── Hero visual right column ── */
.plx-hero-visual { padding-left:14px; position:relative; z-index:2; }

/* ── Animated background ── */
.plx-hv-bg {
  bottom:-80px; left:-50px; overflow:hidden; pointer-events:none;
  position:absolute; right:-30px; top:-60px; z-index:0;
}
.plx-hv-glow  { background:radial-gradient(ellipse 65% 55% at 62% 42%, rgba(183,255,42,.09), transparent 70%); inset:0; pointer-events:none; position:absolute; }
.plx-hv-glow2 { background:radial-gradient(ellipse 45% 45% at 92% 70%, rgba(0,229,255,.07), transparent 70%); inset:0; pointer-events:none; position:absolute; }

/* ── Full-section neon beam art (position:absolute on the <section>) ── */
/* Covers the entire hero from edge to edge — beams flow right → left.
   z-index:0 keeps it behind the Bootstrap columns (normal-flow) and
   behind the dashboard (z-5) + floating cards (z-20). */
.plx-hero-art {
  inset:0; overflow:hidden; pointer-events:none;
  position:absolute; z-index:0;
  right: -70%;
}
.plx-hero-art-svg { display:block; height:100%; width:100%; }

/* Animated wave SVG */
.plx-hv-waves { bottom:0; left:0; position:absolute; width:100%; z-index:2; }
.plx-hv-wave-svg { animation:hWave 12s linear infinite; display:block; width:200%; }
@keyframes hWave { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.plx-hv-wave1 { fill:none; stroke:rgba(183,255,42,.16); stroke-width:1.5; }
.plx-hv-wave2 { fill:none; stroke:rgba(0,229,255,.08); stroke-width:1; }
.plx-hv-wave3 { fill:none; stroke:rgba(183,255,42,.06); stroke-width:.8; }

/* Floating particle dots */
.plx-hv-dot { animation:hParticle 3s ease-in-out infinite; background:var(--lime); border-radius:50%; opacity:0; position:absolute; }
@keyframes hParticle { 0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:.65;transform:scale(1)} }
.plx-hvp1{height:3px;left:64%;top:10%;width:3px;animation-delay:.0s}
.plx-hvp2{height:2px;left:84%;top:24%;width:2px;animation-delay:1.3s}
.plx-hvp3{height:3px;left:78%;top:54%;width:3px;animation-delay:.7s}
.plx-hvp4{height:2px;left:68%;top:74%;width:2px;animation-delay:2.1s}
.plx-hvp5{height:2px;left:56%;top:17%;width:2px;animation-delay:1.7s}
.plx-hvp6{height:3px;left:93%;top:38%;width:3px;animation-delay:.4s}

/* ── Main dashboard wrap ── */
.plx-hdash-wrap { position:relative; z-index:5; }

/* Dashboard with perspective tilt */
.plx-hdash {
  background:rgba(5,8,5,.97);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  box-shadow:
    0 40px 100px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 80px rgba(183,255,42,.055);
  overflow:hidden;
  transform:perspective(1300px) rotateY(-5deg) rotateX(2deg);
  transition:transform .4s ease;
}
.plx-hdash:hover { transform:perspective(1300px) rotateY(-3deg) rotateX(1deg); }

/* Title bar */
.plx-hdash-bar {
  align-items:center;
  background:linear-gradient(90deg,rgba(183,255,42,.04),rgba(0,229,255,.025),rgba(139,92,255,.03));
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; padding:9px 14px;
}
.plx-hdash-brand { align-items:center; color:rgba(255,255,255,.5); display:flex; font-size:11px; font-weight:700; gap:6px; }
.plx-hdash-dots  { align-items:center; display:flex; gap:5px; }
.plx-hdash-dot   { border-radius:50%; height:9px; width:9px; }
.plx-hdash-dot-r { background:#EF4444; } .plx-hdash-dot-y { background:#FFB547; } .plx-hdash-dot-g { background:#22C55E; }
.plx-hdash-ctrls { color:rgba(255,255,255,.2); display:flex; font-size:13px; gap:12px; }

/* Dashboard body */
.plx-hdash-body { display:flex; height:310px; }

/* Sidebar */
.plx-hdash-sidebar {
  border-right:1px solid rgba(255,255,255,.05);
  flex-shrink:0; overflow:hidden; padding:10px 0; width:112px;
}
.plx-hdash-nav {
  align-items:center; border-left:2px solid transparent; border-radius:6px;
  color:rgba(255,255,255,.3); display:flex; font-size:9px; font-weight:500;
  gap:6px; margin:1px 5px; padding:6px 7px;
}
.plx-hdash-nav i { flex-shrink:0; font-size:11px; }
.plx-hdash-nav.on { background:rgba(183,255,42,.09); border-left-color:var(--lime); color:var(--lime); }

/* Main panel */
.plx-hdash-main    { display:flex; flex:1; flex-direction:column; overflow:hidden; padding:10px 11px; }
.plx-hdash-heading { color:rgba(255,255,255,.6); font-size:11px; font-weight:700; letter-spacing:.2px; margin-bottom:8px; }

/* Widget grid */
.plx-hdash-widgets { display:grid; gap:7px; grid-template-columns:1fr 1fr; margin-bottom:7px; }
.plx-hdash-widget  { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); border-radius:9px; overflow:hidden; padding:8px 10px; }
.plx-hdash-w-lbl   { color:rgba(255,255,255,.28); font-size:7.5px; font-weight:700; letter-spacing:.7px; margin-bottom:5px; text-transform:uppercase; }

/* Gauge widget */
.plx-hdash-g-center { align-items:center; display:flex; flex-direction:column; text-align:center; }
.plx-hdash-g-svg    { display:block; margin:0 auto; width:100px; }
.plx-hdash-g-track  { fill:none; stroke:rgba(255,255,255,.07); stroke-dasharray:207 69; stroke-linecap:round; stroke-width:7; }
.plx-hdash-g-fill   { fill:none; stroke:url(#hgGrad); stroke-dasharray:170 106; stroke-linecap:round; stroke-width:7; }
.plx-hdash-g-num    { fill:var(--t1); font-family:var(--font); font-size:19px; font-weight:900; text-anchor:middle; }
.plx-hdash-g-sub    { fill:rgba(255,255,255,.3); font-family:var(--font); font-size:7.5px; text-anchor:middle; }
.plx-hdash-g-badge  {
  background:rgba(183,255,42,.1); border:1px solid rgba(183,255,42,.22); border-radius:99px;
  color:var(--lime); display:inline-block; font-size:8px; font-weight:700; margin-top:4px; padding:2px 8px;
}
.plx-hdash-g-delta  { color:rgba(255,255,255,.28); display:block; font-size:7px; margin-top:2px; }

/* Radar widget */
.plx-hdash-r-svg    { display:block; margin:0 auto; width:84px; }
.plx-hdash-r-grid   { fill:none; stroke:rgba(255,255,255,.06); stroke-width:1; }
.plx-hdash-r-data   { fill:rgba(0,229,255,.11); stroke:var(--cyan); stroke-width:1.5; }
.plx-hdash-r-lbl    { fill:rgba(255,255,255,.28); font-family:var(--font); font-size:6px; }
.plx-hdash-r-legend { align-items:center; display:flex; gap:8px; justify-content:center; margin-top:4px; }
.plx-hdash-r-dot    { border-radius:50%; flex-shrink:0; height:5px; width:5px; }
.plx-rdot-cyan  { background:var(--cyan); }
.plx-rdot-muted { background:rgba(255,255,255,.25); }
.plx-hdash-r-txt    { color:rgba(255,255,255,.28); font-size:7px; }

/* Trend chart (full-width widget) */
.plx-hdash-c-full   { grid-column:1/-1; }
.plx-hdash-c-svg    { display:block; height:50px; width:100%; }
.plx-hdash-c-line   { fill:none; stroke:var(--lime); stroke-linecap:round; stroke-width:1.5; }
.plx-hdash-c-area   { opacity:.18; }
.plx-hdash-c-lbl    { fill:rgba(255,255,255,.22); font-family:var(--font); font-size:6.5px; }

/* Risk count row */
.plx-hdash-risk-row  { display:flex; gap:6px; margin-top:5px; }
.plx-hdash-risk-item {
  align-items:center; background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05); border-radius:7px;
  display:flex; flex:1; flex-direction:column; gap:1px;
  padding:5px 4px; text-align:center;
}
.plx-hdash-risk-val { font-size:15px; font-weight:900; line-height:1; }
.plx-hdash-risk-lbl { color:rgba(255,255,255,.28); font-size:7px; font-weight:600; text-transform:uppercase; }
.plx-hdash-risk-hi  { color:#EF4444; }
.plx-hdash-risk-med { color:#FFB547; }
.plx-hdash-risk-lo  { color:#22C55E; }

/* ── Floating cards ── */
.plx-hfc {
  animation:hfcFloat 5.5s ease-in-out infinite;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  background:rgba(6,9,6,.92);
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  position:absolute; z-index:20;
}
@keyframes hfcFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.plx-hfc-cyber { animation-delay:.0s;  left:-22px; padding:10px 14px; top:26px; }
.plx-hfc-bench { animation-delay:1.3s; padding:10px 14px; right:-14px; top:12px; }
.plx-hfc-ai    { animation-delay:.7s;  bottom:55px; left:-16px; padding:11px 14px; }
.plx-hfc-comp  { animation-delay:2.0s; bottom:16px; padding:11px 14px; right:-16px; }

.plx-hfc-row { align-items:center; display:flex; gap:10px; }
.plx-hfc-col { display:flex; flex-direction:column; gap:1px; }
.plx-hfc-ico {
  align-items:center; border-radius:8px; display:flex;
  flex-shrink:0; font-size:16px; height:32px; justify-content:center; width:32px;
}
.plx-hfc-ico-lime   { background:rgba(183,255,42,.14); color:var(--lime); }
.plx-hfc-ico-cyan   { background:rgba(0,229,255,.12);  color:var(--cyan); }
.plx-hfc-ico-purple { background:rgba(139,92,255,.12); color:var(--purple); }
.plx-hfc-ico-green  { background:rgba(34,197,94,.12);  color:#22C55E; }
.plx-hfc-head { color:rgba(255,255,255,.38); font-size:8.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.plx-hfc-val  { color:var(--lime); font-size:15px; font-weight:800; line-height:1.2; }
.plx-hfc-sub  { color:rgba(255,255,255,.32); font-size:9.5px; line-height:1.3; }
.plx-hfc-bold { color:var(--t1); font-size:11px; font-weight:700; line-height:1.35; }
.plx-hfc-comp-val { color:#22C55E; font-size:18px; font-weight:900; line-height:1; }

/* ── Responsive ── */
@media (max-width:1199.98px) {
  .plx-hdash-sidebar { width:90px; }
  .plx-hdash-nav span { display:none; }
}
@media (max-width:991.98px) {
  .plx-hero-visual { padding-left:0; }
  .plx-hdash { transform:none; }
  .plx-hfc-cyber,.plx-hfc-bench { display:none; }
}
@media (max-width:767.98px) {
  .plx-hfc-ai,.plx-hfc-comp { display:none; }
}

/* ── Keep legacy domain-tile colours (used only in hero mock now) ── */
.plx-mock-dot-r{background:#EF4444}.plx-mock-dot-y{background:#FFB547}.plx-mock-dot-g{background:#22C55E}

/* ── 7. ABOUT ── */
.plx-about { padding:100px 0; }
.plx-about-eyebrow {
  align-items:center; color:var(--lime); display:flex; font-size:12px;
  font-weight:700; gap:10px; letter-spacing:2px; margin-bottom:16px; text-transform:uppercase;
}
.plx-about-eyebrow::before { background:var(--lime); border-radius:50%; content:''; flex-shrink:0; height:8px; width:8px; }

.plx-about-desc { color:var(--t3); font-size:15px; line-height:1.78; margin-bottom:14px; }

/* Feature timeline (right side) */
.plx-feature-timeline { position:relative; }
.plx-feature-timeline::before {
  background:linear-gradient(180deg, transparent, var(--border-md) 10%, var(--border-md) 90%, transparent);
  content:''; left:22px; position:absolute; top:0; bottom:0; width:1px; z-index:0;
}
.plx-feature-item {
  align-items:flex-start; display:flex; gap:16px; padding:0 0 28px; position:relative; z-index:1;
}
.plx-feature-item:last-child { padding-bottom:0; }
.plx-feature-icon {
  align-items:center; border-radius:10px; display:flex; flex-shrink:0;
  font-size:18px; height:44px; justify-content:center; width:44px;
}
.plx-feature-icon.ic-lime   { background:var(--lime-bg);   color:var(--lime); }
.plx-feature-icon.ic-cyan   { background:var(--cyan-bg);   color:var(--cyan); }
.plx-feature-icon.ic-purple { background:var(--purple-bg); color:var(--purple); }
.plx-feature-icon.ic-amber  { background:var(--amber-bg);  color:var(--amber); }
.plx-feature-title { color:var(--t1); font-size:14px; font-weight:700; margin-bottom:5px; }
.plx-feature-desc  { color:var(--t4); font-size:13px; line-height:1.62; margin:0; }

/* ════════════════════════════════════════════════════════
   8. 10-DOMAIN FRAMEWORK — redesigned with custom SVG icons
   ════════════════════════════════════════════════════════ */

.plx-domains { overflow:hidden; padding:110px 0; position:relative; }
.plx-domains::before {
  background:radial-gradient(ellipse 70% 45% at 50% 0%, rgba(183,255,42,.04), transparent 68%);
  content:''; inset:0; pointer-events:none; position:absolute;
}

/* ── Section header ── */
.plx-doms-hd { margin-bottom:60px; position:relative; text-align:center; z-index:1; }
/* Large decorative "10" behind the heading */
.plx-doms-deco {
  color:rgba(183,255,42,.04); font-size:clamp(120px,18vw,240px); font-weight:900;
  left:50%; letter-spacing:-8px; line-height:1; pointer-events:none;
  position:absolute; top:50%; transform:translate(-50%,-50%);
  user-select:none; z-index:0;
}
.plx-doms-h2 {
  color:var(--t1); font-size:clamp(28px,3vw,46px); font-weight:900;
  letter-spacing:-.8px; line-height:1.12; margin-bottom:14px; position:relative; z-index:1;
}
.plx-doms-lead {
  color:rgba(255,255,255,.48); font-size:15px; line-height:1.72;
  margin:0 auto; max-width:540px; position:relative; z-index:1;
}

/* ── Per-card colour tokens (set via class, used by all states) ── */
/* cyan */  .plx-dc-cyan   { --dc:#00E5FF; --dcr:0,229,255; }
/* blue */  .plx-dc-blue   { --dc:#4A9EFF; --dcr:74,158,255; }
/* lime */  .plx-dc-lime   { --dc:#B7FF2A; --dcr:183,255,42; }
/* orange */.plx-dc-orange { --dc:#F97316; --dcr:249,115,22; }
/* amber */ .plx-dc-amber  { --dc:#FFB547; --dcr:255,181,71; }
/* purple */.plx-dc-purple { --dc:#8B5CFF; --dcr:139,92,255; }
/* green */ .plx-dc-green  { --dc:#22C55E; --dcr:34,197,94; }
/* teal */  .plx-dc-teal   { --dc:#00D4AA; --dcr:0,212,170; }
/* emerald*/.plx-dc-emerald{ --dc:#10B981; --dcr:16,185,129; }
/* red */   .plx-dc-red    { --dc:#EF4444; --dcr:239,68,68; }

/* ── Domain card ── */
.plx-dc {
  background:rgba(8,12,8,.94);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  display:flex; flex-direction:column;
  height:100%; overflow:hidden;
  padding:28px 22px 22px;
  position:relative;
  transition:border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease), background .3s;
}
/* Coloured top strip revealed on hover */
.plx-dc::before {
  background:linear-gradient(180deg, rgba(var(--dcr),.08) 0%, transparent 55%);
  content:''; inset:0; opacity:0; pointer-events:none; position:absolute;
  transition:opacity .3s;
}
.plx-dc:hover::before { opacity:1; }
.plx-dc:hover {
  border-color:rgba(var(--dcr),.42);
  box-shadow:0 16px 56px rgba(0,0,0,.5), 0 0 36px rgba(var(--dcr),.07);
  transform:translateY(-5px);
}

/* Domain number (decorative, top-right) */
.plx-dc-num {
  color:rgba(255,255,255,.1); font-size:11px; font-weight:800;
  letter-spacing:.5px; position:absolute; right:16px; top:14px;
}

/* ── Icon area ── */
.plx-dc-icon-area {
  align-items:center; display:flex; height:68px;
  justify-content:center; margin-bottom:18px;
  position:relative; width:68px;
}
/* Bloom glow behind icon */
.plx-dc-icon-area::before {
  background:radial-gradient(circle, rgba(var(--dcr),.14), transparent 65%);
  border-radius:50%; content:'';
  height:90px; left:50%; position:absolute; top:50%;
  transform:translate(-50%,-50%); transition:opacity .3s; width:90px;
}
.plx-dc:hover .plx-dc-icon-area::before { background:radial-gradient(circle, rgba(var(--dcr),.22), transparent 65%); }

/* SVG icon itself */
.plx-dc-svg {
  color:var(--dc); display:block; height:52px; width:52px;
  transition:filter .3s, transform .3s;
}
.plx-dc:hover .plx-dc-svg {
  filter:drop-shadow(0 0 12px rgba(var(--dcr),.75));
  transform:scale(1.06);
}

/* Text */
.plx-dc-name {
  color:var(--t1); font-size:14px; font-weight:700;
  letter-spacing:-.2px; margin-bottom:8px; position:relative; z-index:1;
}
.plx-dc-desc {
  color:rgba(255,255,255,.44); flex:1; font-size:12px;
  line-height:1.65; margin-bottom:18px; position:relative; z-index:1;
}

/* Accent bar at the bottom */
.plx-dc-bar {
  background:rgba(var(--dcr),.3); border-radius:99px; height:3px;
  transition:background .3s, width .3s var(--ease); width:36px;
}
.plx-dc:hover .plx-dc-bar { background:var(--dc); width:56px; }

/* Responsive */
@media (max-width:1199.98px) {
  .plx-dc-svg { height:44px; width:44px; }
  .plx-dc-icon-area { height:58px; width:58px; }
}
@media (max-width:575.98px) {
  .plx-doms-deco { display:none; }
}

/* ════════════════════════════════════════════════════════
   9. HOW CRIS WORKS — hex-journey style (how-c-work.png)
   Left: heading + badges | Right: 4 hexagonal stages + gradient arrows
   ════════════════════════════════════════════════════════ */

.plx-how-works { overflow:hidden; padding:100px 0; position:relative; }
.plx-how-works::before {
  background:radial-gradient(ellipse 80% 50% at 60% 50%, rgba(183,255,42,.03), transparent 65%);
  content:''; inset:0; pointer-events:none; position:absolute;
}

/* ── 2-column master layout ── */
.plx-hw-layout {
  align-items:center; display:flex; gap:52px; position:relative; z-index:1;
}

/* ── Left column ── */
.plx-hw-left { flex:0 0 280px; max-width:280px; }

.plx-hw-eyebrow {
  color:var(--lime); font-size:11px; font-weight:700;
  letter-spacing:2.5px; margin-bottom:14px; text-transform:uppercase;
}
.plx-hw-h2 {
  color:var(--t1); font-size:clamp(26px,2.6vw,38px); font-weight:900;
  letter-spacing:-.8px; line-height:1.18; margin-bottom:14px;
}
.plx-hw-sub {
  color:rgba(255,255,255,.5); font-size:14px; line-height:1.72; margin-bottom:28px;
}

/* Compliance badges — inside left column */
.plx-hw-badges {
  display:flex; flex-wrap:wrap; gap:8px;
}
.plx-hw-badge {
  align-items:center; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-full); display:inline-flex; font-size:11.5px; font-weight:600;
  gap:6px; padding:6px 14px; transition:border-color .2s;
}
.plx-hw-badge:hover { border-color:var(--border-lime); }
.plx-hw-badge i { font-size:13px; }

/* ── Right column — hex stages ── */
.plx-hw-right { flex:1; min-width:0; }
.plx-hw-stages {
  align-items:flex-start; display:flex; gap:0; width:100%;
}

/* Individual stage */
.plx-hw-stage {
  flex:0 0 auto; position:relative; text-align:center; width:108px;
}

/* Connector arrow between stages */
.plx-hw-arr {
  align-self:flex-start; flex:1; margin-top:40px; min-width:32px;
}
.plx-hw-arr-svg { display:block; height:22px; width:100%; }

/* ── Hexagon wrapper ── */
.plx-hw-hex-wrap {
  height:104px; margin:0 auto 14px; position:relative; width:100px;
}
.plx-hw-hex-svg {
  display:block; height:100%; transition:filter .3s; width:100%;
}

/* Icon overlaid on hex center */
.plx-hw-hex-ico {
  align-items:center; display:flex; font-size:26px; inset:0;
  justify-content:center; position:absolute;
}

/* ── Stage colour themes (cyan → teal → lime → bright lime) ── */
/* Stage 1 — Cyan */
.plx-hws-c1 { color:#00E5FF; }
.plx-hws-c1 .plx-hw-hex-svg { filter:drop-shadow(0 0 8px rgba(0,229,255,.6)); }
.plx-hws-c1:hover .plx-hw-hex-svg { filter:drop-shadow(0 0 16px rgba(0,229,255,.85)); }
.plx-hws-c1 .plx-hw-sname { color:#00E5FF; }

/* Stage 2 — Teal-green */
.plx-hws-c2 { color:#00CCA0; }
.plx-hws-c2 .plx-hw-hex-svg { filter:drop-shadow(0 0 8px rgba(0,204,160,.6)); }
.plx-hws-c2:hover .plx-hw-hex-svg { filter:drop-shadow(0 0 16px rgba(0,204,160,.85)); }
.plx-hws-c2 .plx-hw-sname { color:#00CCA0; }

/* Stage 3 — Lime-green */
.plx-hws-c3 { color:#7DE000; }
.plx-hws-c3 .plx-hw-hex-svg { filter:drop-shadow(0 0 9px rgba(125,224,0,.62)); }
.plx-hws-c3:hover .plx-hw-hex-svg { filter:drop-shadow(0 0 18px rgba(125,224,0,.88)); }
.plx-hws-c3 .plx-hw-sname { color:#7DE000; }

/* Stage 4 — Bright lime (most prominent — "Intelligent" equivalent) */
.plx-hws-c4 { color:#B7FF2A; }
.plx-hws-c4 .plx-hw-hex-svg { filter:drop-shadow(0 0 12px rgba(183,255,42,.72)); }
.plx-hws-c4:hover .plx-hw-hex-svg { filter:drop-shadow(0 0 22px rgba(183,255,42,.95)); }
.plx-hws-c4 .plx-hw-sname { color:#B7FF2A; }

/* Hover micro-lift on whole stage */
.plx-hw-stage { transition:transform .28s var(--ease); }
.plx-hw-stage:hover { transform:translateY(-4px); }

/* ── Stage labels ── */
.plx-hw-sname {
  font-size:13.5px; font-weight:800; letter-spacing:-.25px; margin-bottom:5px;
}
.plx-hw-sdesc {
  color:rgba(255,255,255,.46); font-size:11.5px; line-height:1.56; margin:0;
}

/* ── Responsive ── */
@media (max-width:1199.98px) {
  .plx-hw-left { flex:0 0 240px; max-width:240px; }
  .plx-hw-stage { width:96px; }
  .plx-hw-hex-wrap { height:90px; width:88px; }
  .plx-hw-hex-ico { font-size:22px; }
}
@media (max-width:991.98px) {
  .plx-hw-layout { flex-direction:column; gap:36px; }
  .plx-hw-left { flex:none; max-width:100%; width:100%; }
  .plx-hw-right { width:100%; }
  .plx-hw-stages { justify-content:center; }
  .plx-hw-stage { width:88px; }
  .plx-hw-hex-wrap { height:82px; width:80px; }
  .plx-hw-hex-ico { font-size:20px; }
  .plx-hw-sname { font-size:12px; }
  .plx-hw-sdesc { display:none; }
  .plx-hw-arr { margin-top:34px; min-width:24px; }
}
@media (max-width:575.98px) {
  .plx-hw-stages { flex-wrap:wrap; gap:16px; justify-content:center; }
  .plx-hw-arr { display:none; }
  .plx-hw-stage { width:120px; }
  .plx-hw-sdesc { display:block; }
}

/* Compliance badge colours (kept for left column badges) */
.plx-compliance-row {
  align-items:center; display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-top:40px;
}
.plx-compliance-badge {
  align-items:center; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-full); display:flex; gap:7px; font-size:12px;
  font-weight:600; padding:7px 16px; transition:border-color .2s;
}
.plx-compliance-badge:hover { border-color:var(--border-lime); }
.plx-compliance-badge i { font-size:14px; }

/* ── 10. MATURITY SCALE — domain-card style (sec-uda.png) ── */
.plx-scale { overflow:hidden; padding:100px 0; }

/* ── Domain-card: base ── */
.plx-udc {
  background:rgba(6,10,7,.96);
  border-radius:18px;
  display:flex; flex-direction:column; height:100%;
  overflow:hidden; padding:28px 20px 22px; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.plx-udc:hover { transform:translateY(-5px); }

/* Gradient bloom (top, matches border colour) */
.plx-udc::before {
  content:''; inset:0; pointer-events:none; position:absolute; z-index:0;
}

/* ── Colour themes ── */
/* Red — Foundation */
.plx-udc-red  { border:1.5px solid rgba(239,68,68,.48); }
.plx-udc-red::before  { background:linear-gradient(155deg,rgba(239,68,68,.09) 0%,transparent 46%); }
.plx-udc-red:hover    { box-shadow:0 14px 52px rgba(0,0,0,.55),0 0 36px rgba(239,68,68,.16); }
.plx-udc-red  .plx-udc-icon svg { filter:drop-shadow(0 0 14px rgba(239,68,68,.75)); }
.plx-udc-red  .plx-udc-sval, .plx-udc-red  .plx-udc-arr { color:#EF4444; }

/* Orange — Evolving */
.plx-udc-orange  { border:1.5px solid rgba(249,115,22,.48); }
.plx-udc-orange::before  { background:linear-gradient(155deg,rgba(249,115,22,.09) 0%,transparent 46%); }
.plx-udc-orange:hover    { box-shadow:0 14px 52px rgba(0,0,0,.55),0 0 36px rgba(249,115,22,.16); }
.plx-udc-orange .plx-udc-icon svg { filter:drop-shadow(0 0 14px rgba(249,115,22,.75)); }
.plx-udc-orange .plx-udc-sval, .plx-udc-orange .plx-udc-arr { color:#F97316; }

/* Lime — Managed */
.plx-udc-lime  { border:1.5px solid rgba(183,255,42,.48); }
.plx-udc-lime::before  { background:linear-gradient(155deg,rgba(183,255,42,.07) 0%,transparent 46%); }
.plx-udc-lime:hover    { box-shadow:0 14px 52px rgba(0,0,0,.55),0 0 36px rgba(183,255,42,.14); }
.plx-udc-lime .plx-udc-icon svg  { filter:drop-shadow(0 0 14px rgba(183,255,42,.75)); }
.plx-udc-lime .plx-udc-sval, .plx-udc-lime .plx-udc-arr { color:#B7FF2A; }

/* Cyan — Established */
.plx-udc-cyan  { border:1.5px solid rgba(0,229,255,.48); }
.plx-udc-cyan::before  { background:linear-gradient(155deg,rgba(0,229,255,.07) 0%,transparent 46%); }
.plx-udc-cyan:hover    { box-shadow:0 14px 52px rgba(0,0,0,.55),0 0 36px rgba(0,229,255,.16); }
.plx-udc-cyan .plx-udc-icon svg  { filter:drop-shadow(0 0 14px rgba(0,229,255,.75)); }
.plx-udc-cyan .plx-udc-sval, .plx-udc-cyan .plx-udc-arr { color:#00E5FF; }

/* Purple — Optimised */
.plx-udc-purple  { border:1.5px solid rgba(139,92,255,.48); }
.plx-udc-purple::before  { background:linear-gradient(155deg,rgba(139,92,255,.10) 0%,transparent 46%); }
.plx-udc-purple:hover    { box-shadow:0 14px 52px rgba(0,0,0,.55),0 0 36px rgba(139,92,255,.18); }
.plx-udc-purple .plx-udc-icon svg { filter:drop-shadow(0 0 14px rgba(139,92,255,.75)); }
.plx-udc-purple .plx-udc-sval, .plx-udc-purple .plx-udc-arr { color:#8B5CFF; }

/* Sky-blue — Foundation (replaces red) */
.plx-udc-blue  { border:1.5px solid rgba(59,130,246,.48); }
.plx-udc-blue::before  { background:linear-gradient(155deg,rgba(59,130,246,.09) 0%,transparent 46%); }
.plx-udc-blue:hover    { box-shadow:0 14px 52px rgba(0,0,0,.55),0 0 36px rgba(59,130,246,.18); }
.plx-udc-blue .plx-udc-icon svg { filter:drop-shadow(0 0 14px rgba(59,130,246,.75)); }
.plx-udc-blue .plx-udc-sval, .plx-udc-blue .plx-udc-arr { color:#3B82F6; }

/* ── Gradient text helpers for this section ── */
/* "Our Process" eyebrow — cyan → purple accent */
.plx-eyebrow-scale {
  background:var(--lime-grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent; /* fallback reset */
  display:inline-block;
}
/* "Risk Maturity Scale" heading — spans the full 5-stage palette */
.plx-scale-title-grad {
  background:var(--lime-grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  display:inline-block;
}

/* ── Icon container ── */
.plx-udc-icon {
  align-items:center; display:flex; height:76px;
  justify-content:center; margin-bottom:20px; position:relative; z-index:1;
}
.plx-udc-icon svg { display:block; height:68px; width:68px; }

/* ── Card text ── */
.plx-udc-name {
  color:var(--t1); font-size:17px; font-weight:700;
  letter-spacing:-.3px; margin-bottom:9px; position:relative; z-index:1;
}
.plx-udc-desc {
  color:rgba(255,255,255,.5); flex:1; font-size:13px;
  line-height:1.62; margin-bottom:18px; position:relative; z-index:1;
}

/* ── Score footer ── */
.plx-udc-footer {
  align-items:center; border-top:1px solid rgba(255,255,255,.07);
  display:flex; justify-content:space-between;
  padding-top:14px; position:relative; z-index:1;
}
.plx-udc-score  { align-items:center; display:flex; gap:7px; }
.plx-udc-slbl   {
  color:var(--lime); font-size:10.5px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase;
}
.plx-udc-sval   { font-size:15px; font-weight:800; letter-spacing:-.3px; }
.plx-udc-arr    { font-size:13px; font-weight:700; }

/* Responsive: 5 equal cols on LG+, 2 cols on MD, full on mobile */
@media (max-width:991.98px) {
  .plx-udc-icon { height:62px; }
  .plx-udc-icon svg { height:56px; width:56px; }
}

/* Keep legacy classes non-breaking (they no longer match elements) */
.plx-scale-name,.plx-scale-range,.plx-scale-desc,.plx-name-foundation { color:transparent; }
.plx-name-established { color:#22C55E; }
.plx-name-optimised   { color:#8B5CFF; }

/* ════════════════════════════════════════════════════
   11. WHO BENEFITS — Hub layout (ebnf-sec.png style)
   Left 3 cards | Central SVG hub | Right 3 cards
   ════════════════════════════════════════════════════ */

.plx-benefits {
  overflow: hidden;
  padding: 100px 0;
  position: relative;
}
.plx-benefits::before {
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(183,255,42,.035), transparent 68%);
  content: ''; inset: 0; pointer-events: none; position: absolute;
}

/* ── 3-column grid ── */
.plx-ben-grid {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr 248px 1fr;
  position: relative;
  z-index: 1;
}

/* ── Card columns ── */
.plx-ben-col { display: flex; flex-direction: column; gap: 12px; }

/* Left col: icon on RIGHT, text on LEFT (mirrors toward center) */
.plx-ben-col-l .plx-ben-card { flex-direction: row-reverse; }
.plx-ben-col-l .plx-ben-card-body { 
  /* text-align: right;  */
}

/* ── Base card ── */
.plx-ben-card {
  align-items: center;
  background: rgba(9,13,10,.94);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  position: relative;
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}

.plx-ben-col-l .plx-ben-card:hover { transform: translateX(-4px); }
.plx-ben-col-r .plx-ben-card:hover { transform: translateX(4px);  }

/* Inner border facing center (right for left col, left for right col) */
.plx-ben-col-l .plx-ben-card { border-right-width: 2px; }
.plx-ben-col-r .plx-ben-card { border-left-width:  2px; }

/* ── Per-colour card variants ── */
/* lime — Companies */
.plx-bcc-lime { border-color: rgba(183,255,42,.22); }
.plx-bcc-lime:hover { border-color: rgba(183,255,42,.55); box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 20px rgba(183,255,42,.07); }
.plx-bcc-lime .plx-bci { background: rgba(183,255,42,.09); border: 1px solid rgba(183,255,42,.22); color: #B7FF2A; }

/* cyan — Investors & VCs */
.plx-bcc-cyan { border-color: rgba(0,229,255,.22); }
.plx-bcc-cyan:hover { border-color: rgba(0,229,255,.55); box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 20px rgba(0,229,255,.07); }
.plx-bcc-cyan .plx-bci { background: rgba(0,229,255,.09); border: 1px solid rgba(0,229,255,.22); color: #00E5FF; }

/* blue — Banks & Lenders */
.plx-bcc-blue { border-color: rgba(59,130,246,.22); }
.plx-bcc-blue:hover { border-color: rgba(59,130,246,.55); box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 20px rgba(59,130,246,.07); }
.plx-bcc-blue .plx-bci { background: rgba(59,130,246,.09); border: 1px solid rgba(59,130,246,.22); color: #3B82F6; }

/* purple — M&A Teams */
.plx-bcc-purple { border-color: rgba(139,92,255,.22); }
.plx-bcc-purple:hover { border-color: rgba(139,92,255,.55); box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 20px rgba(139,92,255,.07); }
.plx-bcc-purple .plx-bci { background: rgba(139,92,255,.09); border: 1px solid rgba(139,92,255,.22); color: #8B5CFF; }

/* amber — Vendors & Buyers */
.plx-bcc-amber { border-color: rgba(255,181,71,.22); }
.plx-bcc-amber:hover { border-color: rgba(255,181,71,.55); box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 20px rgba(255,181,71,.07); }
.plx-bcc-amber .plx-bci { background: rgba(255,181,71,.09); border: 1px solid rgba(255,181,71,.22); color: #FFB547; }

/* teal — Regulators */
.plx-bcc-teal { border-color: rgba(0,212,170,.22); }
.plx-bcc-teal:hover { border-color: rgba(0,212,170,.55); box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 20px rgba(0,212,170,.07); }
.plx-bcc-teal .plx-bci { background: rgba(0,212,170,.09); border: 1px solid rgba(0,212,170,.22); color: #00D4AA; }

/* ── Card icon ── */
.plx-bci {
  align-items: center; border-radius: 10px; display: flex; flex-shrink: 0;
  font-size: 18px; height: 42px; justify-content: center; width: 42px;
}

/* ── Card text ── */
.plx-ben-card-body  { flex: 1; min-width: 0; }
.plx-ben-card-name  { color: var(--t1); font-size: 14px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 4px; }
.plx-ben-card-txt   { color: rgba(255,255,255,.46); font-size: 12.5px; line-height: 1.56; margin: 0; }

/* ── Center hub ── */
.plx-ben-hub {
  align-items: center; display: flex; flex-direction: column; text-align: center;
  position: relative;
}

/* Glowing hub background blob */
.plx-ben-hub::before {
  background: radial-gradient(circle 80px at 50% 45%, rgba(183,255,42,.08), transparent);
  content: ''; inset: 0; pointer-events: none; position: absolute;
}

.plx-ben-hub-svg  { display: block; margin: 0 auto 14px; width: 200px; }

/* Animated pulse ring on hub SVG */
.plx-ben-pulse { animation: benPulse 3.5s ease-in-out infinite; transform-origin: 100px 100px; }
@keyframes benPulse {
  0%,100% { opacity:.1;  transform:scale(1);    }
  50%      { opacity:.38; transform:scale(1.12); }
}

.plx-ben-hub-ey {
  color: var(--lime); font-size: 10.5px; font-weight: 700;
  letter-spacing: 2.5px; margin-bottom: 10px; position: relative;
  text-transform: uppercase; z-index: 1;
}
.plx-ben-hub-h2 {
  color: var(--t1); font-size: clamp(20px,2vw,27px); font-weight: 900;
  letter-spacing: -.5px; line-height: 1.2; margin-bottom: 12px;
  position: relative; z-index: 1;
}
.plx-ben-hub-sub {
  color: rgba(255,255,255,.46); font-size: 13px; line-height: 1.68;
  margin: 0; position: relative; z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .plx-ben-grid {
    gap: 24px; grid-template-columns: 1fr;
  }
  .plx-ben-hub { order: -1; margin-bottom: 8px; }
  .plx-ben-hub-svg { max-width: 150px; }
  /* Restore normal left-to-right layout on mobile */
  .plx-ben-col-l .plx-ben-card { flex-direction: row; }
  .plx-ben-col-l .plx-ben-card-body { text-align: left; }
  .plx-ben-col-l .plx-ben-card,
  .plx-ben-col-r .plx-ben-card { border-width: 1px; }
}

/* ════════════════════════════════════════
   12. PRICING PLANS — pixel-perfect
   ════════════════════════════════════════ */

.plx-plans { overflow:hidden; padding:100px 0; position:relative; }
.plx-plans::before {
  background:radial-gradient(ellipse 80% 45% at 50% 0%, rgba(183,255,42,.04), transparent 65%);
  content:''; inset:0; pointer-events:none; position:absolute; z-index:0;
}

/* ── Section header ── */
.plx-ph { margin-bottom:48px; position:relative; text-align:center; z-index:1; }

.plx-ph-ey {
  align-items:center; display:inline-flex; gap:14px;
  justify-content:center; margin-bottom:14px;
}
.plx-ph-ey-txt { color:var(--t4); font-size:13px; font-weight:500; letter-spacing:.4px; }
.plx-ph-ey-line {
  background:var(--lime-grad); border-radius:2px;
  flex-shrink:0; height:2px; width:72px;
}

.plx-ph-h2 {
  color:var(--t1); font-size:clamp(30px,4vw,52px); font-weight:900;
  letter-spacing:-1.5px; line-height:1.1; margin-bottom:12px;
}
.plx-ph-accent {   background:var(--lime-grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent; /* fallback reset */
  display:inline-block; }

.plx-ph-sub {
  color:var(--t4); font-size:14px; line-height:1.65;
  margin:0 auto 28px; max-width:540px;
}

/* ── Billing toggle ── */
.plx-ptw { display:flex; justify-content:center; }
.plx-pt {
  align-items:center; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:99px;
  display:inline-flex; padding:4px;
}
.plx-pt-btn {
  background:transparent; border:none; border-radius:99px; color:var(--t3);
  cursor:pointer; font-family:var(--font); font-size:14px; font-weight:600;
  padding:9px 28px; transition:background .2s, color .2s;
}
.plx-pt-btn.active { background:var(--lime-grad); color:#060A06; }

/* ── Card base ── */
.plx-pc {
  /* background:rgba(20,24,20,.88); */
      background: linear-gradient(155deg, rgba(183, 255, 42, 0.14) 0%, rgba(6, 14, 5, 1) 70%);
    border-color: rgba(183, 255, 42, 0.38);
    box-shadow: 0 4px 28px rgba(183, 255, 42, 0.1);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  display:flex; flex-direction:column; height:100%;
  overflow:hidden; padding:30px 26px; position:relative;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.plx-pc:not(.plx-pc-featured):hover {
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  transform:translateY(-5px);
}

/* ── Featured card (Enhanced — bright lime border) ── */
.plx-pc-featured {
  border:2px solid var(--lime) !important;
  box-shadow:0 0 0 1px rgba(183,255,42,.08), inset 0 0 60px rgba(183,255,42,.022);
}
.plx-pc-featured:hover {
  box-shadow:0 18px 64px rgba(0,0,0,.55), 0 0 64px rgba(183,255,42,.12);
  transform:translateY(-5px);
}

/* ── Diagonal corner ribbon ── */
/*
  Geometry proof (CW 45° rotation around ribbon centre):
    top-right corner y′ = 0.7071 × (dy − dx) + cy
  For the band to stay fully inside (y′ ≥ 0) we need:
    cy ≥ 0.7071 × (half_width + half_height)
  With width=110 (half=55) and height≈22px (half=11):
    cy ≥ 0.7071 × 66 ≈ 46.7  →  top = cy − half_height ≥ 35.7
  We use top:38px so the full band — including the "Most Popular" text —
  clears the container's top edge with ~2px to spare.
*/
.plx-rc {
  height:120px; overflow:hidden;
  pointer-events:none; position:absolute; right:0; top:0; width:120px; z-index:20;
}
.plx-rt {
    background: linear-gradient(135deg, #F47B1C 0%, #FFB84C 100%);
    box-shadow: 0 3px 14px rgba(244,123,28,.55);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 7px 0;
    position: absolute;
    right: -42px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    text-transform: uppercase;
    top: 28px;
    transform: rotate(45deg);
    transform-origin: center;
    width: 180px;
}

/* ── Plan icon container ── */
.plx-pc-icon {
  align-items:center; background:rgba(183,255,42,.14); border-radius:12px;
  display:flex; flex-shrink:0; height:52px; justify-content:center;
  margin-bottom:18px; width:52px;
}
.plx-pc-icon i, .plx-pc-icon svg { color:var(--lime); font-size:22px; }

/* ── Card content ── */
.plx-pc-name { color:var(--t1); font-size:20px; font-weight:800; letter-spacing:-.4px; margin-bottom:8px; }
.plx-pc-desc { color:var(--t4); font-size:13px; line-height:1.6; margin-bottom:20px; }

/* ── Price row ── */
.plx-pc-price {
  align-items:flex-end; display:flex; gap:3px; margin-bottom:20px;
}
.plx-pc-sym {
  color:var(--t1); font-size:22px; font-weight:700;
  line-height:1; margin-bottom:7px;
}
.plx-pc-amt {
  color:var(--t1); font-size:50px; font-weight:900;
  letter-spacing:-2.5px; line-height:1;
}
.plx-pc-per {
  color:var(--t4); font-size:12.5px; font-weight:400;
  line-height:1.3; margin-bottom:5px; padding-left:2px;
}

/* ── Feature list wrapper — identical on all 4 cards ── */
/* Same dashed-cyan box treatment on every plan. */
.plx-pc-feat-wrap {
  background:rgba(0,229,255,.042);
  border:1px dashed rgba(0,229,255,.28);
  border-radius:10px;
  display:flex;
  flex:1;
  flex-direction:column;
  margin-bottom:22px;
  padding:14px 13px 10px;
}

.plx-pc-feats {
  display:flex; flex-direction:column;
  gap:0; list-style:none; margin:0; padding:0;
}
.plx-pc-feats li {
  align-items:flex-start; color:var(--t2); display:flex; font-size:13px;
  gap:10px; line-height:1.52; padding:4px 0;
}
.plx-pc-feats li i { color:var(--lime); flex-shrink:0; font-size:14px; margin-top:2px; }

/* ── CTA button ── */
.plx-pc-btn {
  align-items:center; border-radius:12px; display:flex; font-size:14px;
  font-weight:700; gap:8px; justify-content:center; padding:13px;
  text-decoration:none; transition:all .22s var(--ease); width:100%;
}
.plx-pc-btn-outline {
  background:transparent; border:1px solid rgba(255,255,255,.16); color:var(--t2);
}
.plx-pc-btn-outline:hover {
  background:rgba(255,255,255,.05); border-color:rgba(183,255,42,.55); color:var(--t1);
}
.plx-pc-btn-lime {
  background:linear-gradient(90deg,#C8FF00 0%,#22CC44 55%,#00A838 100%);
  border:none; color:#050A05; font-weight:800;
}
.plx-pc-btn-lime:hover {
  box-shadow:0 0 28px rgba(183,255,42,.45);
  color:#050A05; filter:brightness(1.08); transform:translateY(-1px);
}

/* ── Trust row ── */
.plx-trust-row {
  align-items:center; display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; margin-top:44px; position:relative; z-index:1;
}
.plx-trust-item {
  align-items:center; background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:var(--r-full); color:var(--t3); display:inline-flex;
  font-size:13px; font-weight:500; gap:8px; padding:9px 20px;
  transition:border-color .2s, color .2s;
}
.plx-trust-item:hover { border-color:var(--border-lime); color:var(--t1); }
.plx-trust-item i { color:var(--lime); font-size:15px; }

/* ════════════════════════════════════════════════════════════
   13. WHY CHOOSE — redesigned with score overlay + premium frame
   ════════════════════════════════════════════════════════════ */

.plx-why-choose {
  overflow:hidden; padding:120px 0; position:relative;
}
.plx-why-choose::before {
  background:radial-gradient(ellipse 55% 65% at 72% 50%, rgba(183,255,42,.04), transparent 65%);
  content:''; inset:0; pointer-events:none; position:absolute;
}

/* ── Left column text ── */
.plx-why-desc {
  color:var(--t3); font-size:15.5px; line-height:1.78; margin-bottom:20px;
}
.plx-why-list {
  border-top:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column;
  gap:0; list-style:none; margin:0; padding:12px 0 0;
}
.plx-why-item {
  align-items:center; border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--t2); display:flex; font-size:14px; font-weight:500;
  gap:12px; padding:11px 0;
}
.plx-why-item:last-child { border-bottom:none; }
.plx-why-item i { color:var(--lime); flex-shrink:0; font-size:17px; }

/* Mini-stats row below bullet list */
.plx-why-stats {
  border-top:1px solid rgba(255,255,255,.06); display:flex;
  gap:0; margin-top:4px; padding-top:22px;
}
.plx-why-stat {
  align-items:center; border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex:1; flex-direction:column; gap:3px; padding:0 16px;
}
.plx-why-stat:first-child { padding-left:0; }
.plx-why-stat:last-child  { border-right:none; }
.plx-why-stat-val {
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; font-size:24px; font-weight:900; letter-spacing:-.5px;
}
.plx-why-stat-lbl { color:var(--t5); font-size:11px; font-weight:500; text-align:center; }

/* ── Right column device wrap ── */
.plx-device-wrap { align-items:center; display:flex; justify-content:center; position:relative; }

/* ── Score overlay card (moved from left, floats on top-right of frame) ── */
.plx-score-overlay {
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  background:rgba(6,10,6,.92);
  border:1px solid rgba(183,255,42,.32);
  border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.6), 0 0 28px rgba(183,255,42,.12);
  padding:16px 20px 14px;
  position:absolute;
  right:-18px;
  text-align:center;
  top:-30px;
  width:168px;
  z-index:20;
}
/* Subtle lime glow behind the overlay card */
.plx-score-overlay::before {
  background:radial-gradient(circle 60px at 50% 55%, rgba(183,255,42,.10), transparent);
  border-radius:inherit; content:''; inset:0; pointer-events:none; position:absolute;
}
.plx-score-gauge-svg   { display:block; margin:0 auto 4px; width:148px; position:relative; z-index:1; }
.plx-score-track       { fill:none; stroke:rgba(255,255,255,.07); stroke-linecap:round; stroke-width:10; }
.plx-score-arc {
  fill:none; stroke:url(#scoreGrad); stroke-dasharray:251; stroke-dashoffset:60;
  stroke-linecap:round; stroke-width:10;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.plx-score-num  { fill:var(--t1); font-family:var(--font); font-size:28px; font-weight:900; text-anchor:middle; }
.plx-score-max  { fill:var(--t5); font-family:var(--font); font-size:11px; text-anchor:middle; }
.plx-score-badge {
  background:var(--lime-bg); border:1px solid var(--lime-bd); border-radius:var(--r-full);
  color:var(--lime); display:inline-block; font-size:11px; font-weight:700;
  margin-top:6px; padding:3px 12px; position:relative; z-index:1;
}

/* ── Laptop shell: gradient-border wrapper ── */
.plx-laptop-shell {
  /* Gradient "border" via 2px padding with gradient background */
  background:linear-gradient(135deg,
    rgba(183,255,42,.7)  0%,
    rgba(0,229,255,.55) 40%,
    rgba(139,92,255,.6) 75%,
    rgba(183,255,42,.4) 100%
  );
  border-radius:20px;
  padding:2px;
  position:relative;
  width:100%;
}
/* Outer glow that bleeds from the gradient border */
.plx-laptop-shell::before {
  background:inherit;
  border-radius:24px;
  content:''; filter:blur(20px);
  inset:-4px; opacity:.45; position:absolute; z-index:-1;
}
/* Second, deeper glow layer */
.plx-laptop-shell::after {
  background:radial-gradient(ellipse 80% 60% at 50% 100%,
    rgba(183,255,42,.08), transparent 70%);
  border-radius:24px;
  content:''; inset:-20px; pointer-events:none; position:absolute; z-index:-2;
}

/* ── Laptop frame (inner dark surface) ── */
.plx-laptop-frame {
  background:rgba(6,9,6,.98); border-radius:18px; overflow:hidden; width:100%;
}

/* ── Title bar ── */
.plx-laptop-screen-bar {
  align-items:center;
  background:linear-gradient(90deg, rgba(183,255,42,.06), rgba(0,229,255,.04), rgba(139,92,255,.05));
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;
  gap:7px;
  justify-content:space-between;
  padding:9px 14px;
}
.plx-laptop-bar-left  { align-items:center; display:flex; gap:7px; }
.plx-laptop-bar-title { color:rgba(255,255,255,.35); font-size:10px; font-weight:600; letter-spacing:.4px; }
.plx-screen-dot       { border-radius:50%; height:9px; width:9px; }

/* ── Screen content ── */
.plx-laptop-screen { background:#060906; }
.plx-screen-content { padding:14px 16px 16px; }

/* Dashboard header: overall score + meta */
.plx-dash-header {
  align-items:center; border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; gap:12px; justify-content:space-between; margin-bottom:12px; padding-bottom:10px;
}
.plx-dash-heading {
  color:rgba(255,255,255,.3); font-size:9px; font-weight:700;
  letter-spacing:1px; margin:0; text-transform:uppercase;
}
.plx-dash-overall { align-items:center; display:flex; gap:8px; }
.plx-dash-overall-val {
  background:linear-gradient(90deg,#B7FF2A,#00E5FF);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; font-size:18px; font-weight:900; letter-spacing:-.5px;
}
.plx-dash-overall-lbl { color:rgba(255,255,255,.3); font-size:9px; }
.plx-dash-badge-sm {
  background:rgba(183,255,42,.12); border:1px solid rgba(183,255,42,.25);
  border-radius:99px; color:var(--lime); font-size:9px; font-weight:700; padding:2px 9px;
}

/* ── Domain rows ── */
.plx-screen-domain-row {
  align-items:center; border-bottom:1px solid rgba(255,255,255,.04);
  display:flex; gap:8px; padding:6px 0;
}
.plx-screen-domain-row:last-child { border-bottom:none; }
.plx-screen-domain-name { color:rgba(255,255,255,.42); flex:1; font-size:10px; font-weight:500; }
.plx-screen-bar-track { background:rgba(255,255,255,.06); border-radius:99px; flex:0 0 100px; height:6px; overflow:hidden; }
.plx-screen-bar-fill  { border-radius:99px; height:100%; transition:width .8s var(--ease); }
.plx-screen-score { color:var(--t2); flex-shrink:0; font-size:10px; font-weight:700; min-width:26px; text-align:right; }

/* ── Dashboard footer strip ── */
.plx-dash-footer {
  border-top:1px solid rgba(255,255,255,.06); display:flex;
  gap:10px; margin-top:12px; padding-top:10px;
}
.plx-dash-footer-chip {
  align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:99px; color:rgba(255,255,255,.38); display:flex;
  font-size:9px; font-weight:600; gap:5px; padding:4px 10px;
}
.plx-dash-footer-chip i { font-size:10px; }
.plx-dash-chip-lime   { color:var(--lime); }
.plx-dash-chip-cyan   { color:var(--cyan); }
.plx-dash-chip-purple { color:var(--purple); }

/* ── Floating accent badges around the shell ── */
.plx-lf-badge {
  align-items:center; backdrop-filter:blur(16px);
  background:rgba(6,10,6,.88); border:1px solid rgba(255,255,255,.1);
  border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.5);
  display:flex; font-size:11px; font-weight:600; gap:7px;
  padding:8px 13px; position:absolute; z-index:10;
}
.plx-lf-badge-1 { bottom:-16px; left:-16px; }
.plx-lf-badge-2 { left:-16px; top:50%; transform:translateY(-50%); }
.plx-lf-badge-1 i { color:var(--lime);   font-size:14px; }
.plx-lf-badge-2 i { color:var(--purple); font-size:14px; }
.plx-lf-badge span { color:rgba(255,255,255,.7); }

/* ── Responsive ── */
@media (max-width:991.98px) {
  .plx-score-overlay { position:static; margin:0 auto 20px; width:auto; }
  .plx-lf-badge { display:none; }
  .plx-laptop-shell { padding:1.5px; }
  .plx-why-stats { gap:0; }
}
@media (max-width:767.98px) {
  .plx-score-overlay {
    max-width: 220px;
    margin-right: -140px;
}
}

/* ════════════════════════════════════════════════════
   14. CTA — horizontal card (vcta-act.png style)
   Left: text  |  Right: buttons  |  BG: neon SVG art
   ════════════════════════════════════════════════════ */

.plx-cta { overflow:hidden; padding:100px 0; position:relative; }

/* ── The card ── */
.plx-cta-card {
  align-items:center;
  background:rgba(5,10,5,.95);
  border:1.5px solid rgba(183,255,42,.24);
  border-radius:20px;
  display:flex;
  gap:32px;
  justify-content:space-between;
  overflow:hidden;
  padding:52px 56px;
  position:relative;
}

/* Subtle dark gradient inside the card */
.plx-cta-card::before {
  background:radial-gradient(ellipse 55% 75% at 20% 50%, rgba(183,255,42,.06), transparent 65%);
  content:''; inset:0; pointer-events:none; position:absolute; z-index:0;
}

/* ── Decorative SVG art (right side) ── */
.plx-cta-art {
  inset:0; pointer-events:none; position:absolute; z-index:0;
}
.plx-cta-art-svg { display:block; height:100%; width:100%; }

/* ── Left: text ── */
.plx-cta-text {
  flex:1; max-width:560px; position:relative; z-index:1;
}
.plx-cta-h2 {
  color:var(--t1);
  font-size:clamp(28px,3vw,44px);
  font-weight:900;
  letter-spacing:-.8px;
  line-height:1.16;
  margin-bottom:14px;
}
.plx-cta-h2 .plx-cta-grad {
  background:linear-gradient(90deg,#B7FF2A 0%,#70E000 60%,#00CCA0 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; display:block;
}
.plx-cta-sub {
  color:rgba(255,255,255,.55);
  font-size:15px;
  line-height:1.72;
  margin:0;
  max-width:420px;
}

/* ── Right: buttons ── */
.plx-cta-actions {
  display:flex; flex-direction:column; flex-shrink:0;
  gap:12px; position:relative; width:288px; z-index:1;
}

/* Primary: lime→green gradient (matching vcta-act.png) */
.plx-cta-btn-primary {
  align-items:center;
  background:linear-gradient(90deg,#C8FF00 0%,#22CC44 55%,#00A838 100%);
  border:none;
  border-radius:10px;
  color:#050A05;
  display:flex;
  font-size:15px;
  font-weight:800;
  gap:8px;
  justify-content:space-between;
  letter-spacing:-.2px;
  padding:16px 22px;
  text-decoration:none;
  transition:filter .2s, transform .2s, box-shadow .2s;
}
.plx-cta-btn-primary:hover {
  box-shadow:0 0 32px rgba(183,255,42,.45);
  color:#050A05;
  filter:brightness(1.08);
  transform:translateY(-2px);
}
.plx-cta-btn-primary .plx-cta-btn-arr {
  align-items:center; background:rgba(0,0,0,.18); border-radius:6px;
  display:flex; font-size:16px; height:28px; justify-content:center; width:28px;
}

/* Secondary: dark with subtle border (matching vcta-act.png) */
.plx-cta-btn-secondary {
  align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  color:var(--t1);
  display:flex;
  font-size:15px;
  font-weight:700;
  justify-content:center;
  letter-spacing:-.1px;
  padding:15px 22px;
  text-decoration:none;
  transition:border-color .2s, background .2s, transform .2s;
}
.plx-cta-btn-secondary:hover {
  background:rgba(255,255,255,.07);
  border-color:rgba(183,255,42,.45);
  color:var(--t1);
  transform:translateY(-2px);
}

/* ── Responsive ── */
@media (max-width:991.98px) {
  .plx-cta-card { flex-direction:column; gap:32px; padding:44px 36px; text-align:center; }
  .plx-cta-text { max-width:100%; }
  .plx-cta-sub  { max-width:100%; }
  .plx-cta-actions { width:100%; }
  .plx-cta-btn-primary, .plx-cta-btn-secondary { justify-content:center; width:100%; }
}
@media (max-width:575.98px) {
  .plx-cta-card { padding:36px 24px; }
}

/* ── 15. FOOTER (minimal horizontal) ── */
.plx-footer { border-top:1px solid var(--border); padding:0; }

/* Top row: brand left, nav center-right */
.plx-footer-top {
  align-items:center; display:flex; flex-wrap:wrap;
  gap:24px; justify-content:space-between; padding:28px 0;
}

/* Brand */
.plx-footer-brand-wrap {
  align-items:center; display:flex; flex-shrink:0; gap:10px; text-decoration:none;
}
.plx-footer-brand-name { color:var(--t1); display:block; font-size:17px; font-weight:900; letter-spacing:-.3px; line-height:1.2; }
.plx-footer-brand-sub  { color:var(--t5); display:block; font-size:10px; font-weight:500; }
.plx-brand-icon-sm { height:34px !important; width:34px !important; }

/* Nav links row */
.plx-footer-nav {
  align-items:center; display:flex; flex-wrap:wrap; gap:2px;
}
.plx-footer-nav-link {
  border-radius:var(--r-sm); color:var(--t4); font-size:14px; font-weight:500;
  padding:6px 13px; text-decoration:none; transition:color .15s, background .15s;
}
.plx-footer-nav-link:hover { background:rgba(255,255,255,.05); color:var(--t1); }

/* Bottom bar: copyright + legal */
.plx-footer-bar {
  align-items:center; border-top:1px solid var(--border); display:flex;
  flex-wrap:wrap; gap:12px; justify-content:space-between; padding:16px 0;
}
.plx-footer-copy { color:var(--t5); font-size:12.5px; margin:0; }
.plx-footer-legal { align-items:center; display:flex; flex-wrap:wrap; gap:20px; }
.plx-footer-legal a { color:var(--t5); font-size:12.5px; text-decoration:none; transition:color .15s; }
.plx-footer-legal a:hover { color:var(--t2); }

/* ── 16. EXTRA UTILITIES ── */

/* Section lead spacing variants */
.plx-lead-mb52  { margin-bottom:52px; }
.plx-lead-mb0   { margin-bottom:0; }
.plx-about-last { margin-bottom:0; }

/* Section eyebrow bottom spacing */
.plx-eyebrow-mb16 { margin-bottom:16px; }

/* Compliance badge color variants */
.plx-badge-blue   { color:#4A9EFF; }
.plx-badge-cyan   { color:#00E5FF; }
.plx-badge-purple { color:#8B5CFF; }
.plx-badge-amber  { color:#FFB547; }
.plx-badge-green  { color:#22C55E; }
.plx-badge-orange { color:#F97316; }

/* Screen progress bar fill colors */
.plx-fill-green  { background:var(--green); }
.plx-fill-amber  { background:var(--amber); }
.plx-fill-orange { background:var(--orange); }
.plx-fill-red    { background:var(--red); }

/* Screen score text colors */
.plx-scr-green  { color:var(--green); }
.plx-scr-amber  { color:var(--amber); }
.plx-scr-orange { color:var(--orange); }
.plx-scr-red    { color:var(--red); }

/* Footer brand icon (smaller variant) */
.plx-brand-icon-sm { height:34px; width:34px; }

/* ── 17. RESPONSIVE ── */
@media (max-width:1199.98px) {
  .plx-scale-row { gap:10px; }
}
@media (max-width:991.98px) {
  .plx-hero        { padding-top:116px; padding-bottom:60px; }
  .plx-hero-mock-wrap { margin-top:48px; }
  .plx-steps-grid  { grid-template-columns:1fr 1fr; }
  .plx-scale-row   { flex-wrap:wrap; justify-content:center; }
  .plx-scale-item  { flex:0 0 calc(33% - 12px); }
  .plx-toggler     { display:flex; }
  .plx-nav-links   { display:none; }
  .plx-nav-links.show { display:flex; flex-direction:column; gap:0; padding:8px 0 12px; width:100%; }
  .plx-nav-actions.show { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 16px; width:100%; justify-content: center;}
  .plx-nav-actions { display:none; }
  .plx-nav-inner   { flex-wrap:wrap; }
  .plx-cta-inner   { padding:60px 28px; }
  .plx-about, .plx-domains, .plx-how-works, .plx-scale, .plx-benefits, .plx-plans, .plx-why-choose, .plx-cta { padding:76px 0; }
}
@media (max-width:767.98px) {
  .plx-hero-h1   { letter-spacing:-1.5px; }
  .plx-steps-grid { grid-template-columns:1fr; }
  .plx-scale-item { flex:0 0 calc(50% - 10px); }
  .plx-trust-row  { gap:8px; }
  .plx-footer-top { flex-direction:column; align-items:flex-start; gap:16px; }
  .plx-footer-bar { flex-direction:column; text-align:center; gap:8px; }
  .plx-footer-legal { justify-content:center; }
}
@media (max-width:575.98px) {
  .plx-hero-btns .plx-btn-primary,
  .plx-hero-btns .plx-btn-ghost,
  .plx-cta-btns  .plx-btn-primary,
  .plx-cta-btns  .plx-btn-ghost { justify-content:center; width:100%; }
  .plx-scale-item { flex:0 0 calc(50% - 8px); }
}
/* ════════════════════════════════════════════════════
   BACK TO TOP  — scroll-progress ring + gradient core
   ════════════════════════════════════════════════════ */

/* Wrapper — fixed, hidden by default */
.plx-back-top {
  align-items:center; bottom:28px; cursor:pointer; display:flex;
  justify-content:center; opacity:0; pointer-events:none;
  position:fixed; right:28px;
  transform:translateY(14px) scale(.88);
  transition:opacity .35s var(--ease), transform .38s var(--ease);
  z-index:9500;
}
.plx-back-top.visible {
  opacity:1; pointer-events:auto;
  transform:translateY(0) scale(1);
}

/* Scroll-progress SVG ring (rotated so arc starts at top) */
.plx-btt-ring {
  height:56px; position:absolute;
  transform:rotate(-90deg); width:56px;
}
/* Track (background circle) */
.plx-btt-track {
  fill:none; stroke:rgba(255,255,255,.12); stroke-width:2.5;
}
/* Progress arc (animated via JS stroke-dashoffset) */
.plx-btt-fill {
  fill:none;
  stroke:var(--lime);
  stroke-dasharray:157.08;    /* 2π × r25 */
  stroke-dashoffset:157.08;   /* starts empty */
  stroke-linecap:round;
  stroke-width:2.5;
  transition:stroke-dashoffset .08s linear;
}

/* Gradient centre button */
.plx-btt-inner {
  align-items:center;
  background:linear-gradient(135deg,#C8FF00 0%,#22CC44 55%,#00A838 100%);
  border-radius:50%;
  box-shadow:0 4px 20px rgba(0,0,0,.55);
  color:#050A05;
  display:flex;
  height:42px;
  justify-content:center;
  position:relative; /* above the SVG ring */
  transition:transform .22s var(--ease), filter .22s, box-shadow .22s;
  width:42px;
  z-index:1;
}
.plx-back-top:hover .plx-btt-inner {
  box-shadow:0 0 30px rgba(34,204,68,.55), 0 4px 20px rgba(0,0,0,.5);
  filter:brightness(1.1);
  /* transform:scale(1.12) translateY(-2px);
  -webkit-transform:scale(1.12) translateY(-2px);
  -moz-transform:scale(1.12) translateY(-2px);
  -ms-transform:scale(1.12) translateY(-2px);
  -o-transform:scale(1.12) translateY(-2px); */
}
.plx-back-top:active .plx-btt-inner { transform:scale(.94); }

/* Up-arrow SVG icon */
.plx-btt-arrow { display:block; height:18px; width:18px; }

/* Keyboard focus ring */
.plx-back-top:focus-visible .plx-btt-inner {
  outline:2px solid var(--lime); outline-offset:4px;
}

@media print {
  .plx-back-top { display:none; }
}

@media print {
  .plx-header, .plx-hero-mock-wrap, .plx-cta, .plx-footer { display:none; }
}

.plx-body section {
  overflow-x: hidden;
}