:root{
  --bg:#100E09; --blue:#a9d8ec; --green:#dceca9; --text:#fff; --muted:#c9c9c9;
  --heading:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Open Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Base */
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.65;overflow-x:hidden;
  color: var(--text);
}
/* 1) Put the gradient on body (already done, keep this) */
body{
  background:
    radial-gradient(700px 420px at 12% 10%, rgba(169,216,236,.22), transparent 55%),
    radial-gradient(820px 480px at 88% 90%, rgba(220,236,169,.18), transparent 52%),
    linear-gradient(180deg, #1b1813 0%, #100E09 85%) !important;
  color: var(--text);
}

/* Subtle citrus glow only on the hero, top-right */
.cb-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1; /* below .cb-hero-inner (which is z-index:2) */
  background:
    radial-gradient(520px 320px at 80% 18%,
      rgba(220, 236, 169, 0.18), transparent 60%);
}

/* Keep the hero’s vignette/grain disabled so we don't double-darken */
.cb-hero .cb-vignette,
.cb-hero .cb-grain { display:none !important; }

/* 3) Move vignette & grain from hero → global so they apply everywhere */
body::before,
body::after{
  content:"";
  position: fixed; /* cover the whole viewport, all scroll */
  inset: 0;
  pointer-events: none;
  z-index: 0;      /* behind your content */
}
body::before{
  /* vignette */
  background: radial-gradient(1200px 600px at 50% 50%,
              transparent 0%,
              rgba(0,0,0,.35) 70%,
              rgba(0,0,0,.7) 100%);
}
body::after{
  /* grain */
  opacity: .06;
  background-image: repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.06) 0,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 2px
  );
}

/* 4) Hide the hero-specific overlays to avoid double-darkening at the fold */
.cb-hero .cb-vignette,
.cb-hero .cb-grain{ display: none !important; }

/* 5) Ensure sections between hero and LMS do not paint their own bg */
#pillars,
.cb-result,
#live-proof{
/*  background: transparent !important;*/
  box-shadow: none !important;
}

/* (Optional) remove any debug separators we previously added */
.cb-section::before,
.cb-section::after{ content:none !important; }

.cb-container{width:min(1200px,92vw);margin-inline:auto;text-align:center;
}

/* ===== HERO ===== */
.cb-hero{
  position:relative;
  width:100vw; height:100vh; min-height:620px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; transform-origin:center center;
  background: transparent !important;
  transition:transform .5s ease, opacity .5s ease;
}
.cb-hero.zoom-out{ transform:scale(1.06); opacity:.88 }

/* 3) Make sections between hero and LMS transparent (flow on same background) */
#pillars,
.cb-result,     /* “When software connects…” block */
#live-proof,
.cb-section,
.cb-section-alt {
/*  background: transparent !important;*/
  box-shadow: none !important;
}


.cb-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(1200px 600px at 50% 50%, transparent 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.7) 100%)}
.cb-grain{position:absolute;inset:0;opacity:.06;pointer-events:none;z-index:1;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 2px)}

.cb-hero-inner{position:relative;z-index:2;width:100%;}
.cb-eyebrow{color:rgba(255,255,255,.7);letter-spacing:.08em;text-transform:uppercase;font:600 12px var(--body);margin-bottom:12px}

.cb-type{
  font-family:var(--heading); font-weight:800; letter-spacing:-.01em;
  line-height:1.1; font-size:clamp(34px,6vw,84px); margin:.3em 0;
  white-space:normal; display:inline-block;
}
#typeLine span{display:inline}
.cb-cursor{display:inline-block;width:1ch;border-right:3px solid #fff;animation:blink .9s steps(1) infinite;transform:translateY(2px)}
@keyframes blink{50%{border-right-color:transparent}}

.cb-hero-cta{margin-top:24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.cb-btn-solid {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 14px;
  color: #100E09;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;

  /* Cinematic gradient background */
  background: linear-gradient(135deg, #a9d8ec 0%, #dceca9 100%);
  box-shadow: 0 0 18px rgba(169,216,236,0.4), 0 4px 20px rgba(0,0,0,0.25);

  /* Smooth transitions */
  transition: all 0.4s cubic-bezier(.2, .7, .2, 1);
}

.cb-btn-solid:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 28px rgba(220,236,169,0.6), 0 6px 25px rgba(0,0,0,0.35);
  background: linear-gradient(135deg, #dceca9 0%, #a9d8ec 100%);
}

.cb-btn-solid {
  animation: pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(169,216,236,0.4), 0 4px 20px rgba(0,0,0,0.25); }
  50% { box-shadow: 0 0 28px rgba(220,236,169,0.6), 0 4px 30px rgba(0,0,0,0.45); }
}


/* ===== Section below (reveal) ===== */
.cb-section{padding:100px 0;text-align:center}
.cb-title{font-family:var(--heading);font-weight:800;font-size:clamp(30px,4vw,56px);margin-bottom:.4em}
.cb-body{max-width:800px;margin:0 auto;color:rgba(255,255,255,.88)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}
.hidden-until-view{opacity:0;transform:translateY(24px)}
.hidden-until-view.show{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

  .cap-actions .peek:hover{ box-shadow:0 0 16px rgba(169,216,236,.35); transform:translateY(-1px) }
  .cap-actions .next:hover{ box-shadow:0 0 18px rgba(169,216,236,.45); transform:translateY(-1px) }

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}

/* (Optional) subtle top/bottom separators so content reads well on the continuous bg */
.cb-section { position: relative; }
.cb-section::before,
.cb-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 42px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), transparent);
  opacity: .35;
}
.cb-section::before { top: -42px; }
.cb-section::after  { bottom: -42px; transform: scaleY(-1); }

/* 4) Keep the LMS section as the first place with a distinct background */
#lms-build {
  position: relative;
  background-color: #0b0a07;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
}

/* Optional: a soft divider just before LMS so the change isn’t abrupt */
#lms-build::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -60px; height: 60px;
  pointer-events: none;
  background-position: center top;
}
.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}


  /* Fullscreen + perfect centering (kept) */
  .cb-hero{
    position:relative; width:100vw; height:100vh; min-height:620px; overflow:hidden;
    background:
      radial-gradient(700px 420px at 12% 10%, rgba(169,216,236,.22), transparent 55%),
      radial-gradient(820px 480px at 88% 90%, rgba(220,236,169,.18), transparent 52%),
      linear-gradient(180deg, #1b1813 0%, #100E09 85%);
  }
  .cb-hero-inner{
    position:relative; z-index:2; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
  }
  .cb-hero-block{ text-align:center; margin:0 auto; max-width:1100px; padding:0 2vw; }

  /* CTA styles (kept) */
  .cb-btn-solid,.cb-btn-outline{
    display:inline-block;padding:14px 22px;border-radius:14px;
    font-weight:700;font-family:"Montserrat",sans-serif;text-decoration:none;
    transition:transform .18s ease, background .2s ease,color .2s ease,border .2s ease;
  }
  .cb-btn-outline{ color:#fff;border:2px solid rgba(255,255,255,.5);background:transparent; }
  .cb-btn-outline:hover{ color:#100E09;background:#dceca9;border-color:#dceca9;transform:translateY(-1px); }
  
  .cap-actions .peek:hover{ box-shadow:0 0 16px rgba(169,216,236,.35); transform:translateY(-1px) }
  .cap-actions .next:hover{ box-shadow:0 0 18px rgba(169,216,236,.45); transform:translateY(-1px) }

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}


<!-- ===== STYLES for remaining sections ===== -->
  
  .cb-section-alt{padding:100px 0;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
  .cb-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media (max-width:900px){.cb-grid-3{grid-template-columns:1fr}}
  .cb-card{padding:22px;border-radius:18px;border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .cb-card:hover{transform:translateY(-4px);box-shadow:0 18px 48px rgba(0,0,0,.35)}
  .cb-card h3{font-family:var(--heading);font-size:20px;margin:0 0 6px}
  .cb-card p{color:#d7e0e6}
  .glass{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04))}
  
  .cap-actions .peek:hover{ box-shadow:0 0 16px rgba(169,216,236,.35); transform:translateY(-1px) }
  .cap-actions .next:hover{ box-shadow:0 0 18px rgba(169,216,236,.45); transform:translateY(-1px) }

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}



/* --- Subtext --- */
#pillars .pillars-subtext {
  color: rgba(255,255,255,.75);
  font-size: clamp(16px,1.5vw,18px);
  margin-bottom: 36px;
  max-width: 720px;
  margin-inline: auto;
}

/* --- Orbit --- */
#pillars .pillars-orbit {
  position: relative;
  width: min(780px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
#pillars .orbit-ring {
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.2);
  animation: spin 40s linear infinite;
}
#pillars .orbit-track {
  position: absolute; inset: 0;
  animation: spin 55s linear infinite reverse;
  transform-origin: 50% 50%;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Core --- */
#pillars .orbit-core {
  position: absolute; inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,216,236,.18), rgba(220,236,169,.12) 60%, transparent 70%);
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
}
#pillars .core-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle, rgba(220,236,169,.25), transparent 70%);
  filter: blur(24px);
}
#pillars .core-label {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  background: linear-gradient(90deg, #a9d8ec, #dceca9);
  -webkit-background-clip: text; color: transparent;
  font-size: clamp(16px, 2vw, 22px);
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}

/* --- Orbiting items (curved labels) --- */
#pillars .orbit-item {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center center;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
}
#pillars .orbit-item span {
  display: inline-block;
  transform: rotate(var(--angle, 0deg));
  white-space: nowrap;
}
#pillars .i1 { top: 4%; left: 50%; transform: translate(-50%, 0) rotate(0deg); --angle: 0deg; }
#pillars .i2 { top: 50%; right: 4%; transform: translate(0, -50%) rotate(90deg); --angle: -90deg; }
#pillars .i3 { bottom: 4%; left: 50%; transform: translate(-50%, 0) rotate(180deg); --angle: -180deg; }
#pillars .i4 { top: 50%; left: 4%; transform: translate(0, -50%) rotate(-90deg); --angle: 90deg; }

#pillars .orbit-item:hover {
  background: linear-gradient(90deg, #a9d8ec, #dceca9);
  color: #100E09;
  transform: scale(1.1) rotate(0deg);
}

/* --- Hint --- */
#pillars .pillars-hint {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

/* --- Modal --- */
.pillar-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  justify-content: center; align-items: center;
  z-index: 999;
}
.pillar-modal.show { display: flex; animation: fadeIn .3s ease forwards; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal-content {
  background: rgba(16,14,9,.9);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  max-width: 340px;
  padding: 26px 24px;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 40px rgba(0,0,0,.4);
}
.modal-content h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #a9d8ec, #dceca9);
  -webkit-background-clip: text; color: transparent;
}
.modal-content p {
  font-family: "Open Sans", sans-serif;
  font-size: 14px; color: rgba(255,255,255,.8);
  margin-bottom: 18px;
}
#modalClose {
  background: linear-gradient(90deg, #a9d8ec, #dceca9);
  color: #100E09;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
}
#modalClose:hover { filter: brightness(1.1); }

/* --- Mobile tweaks --- */
@media (max-width: 600px) {
  #pillars .pillars-orbit { max-width: 360px; }
  #pillars .orbit-item {
    width: 80px; height: 80px; font-size: 11px;
  }
  #pillars .core-label {
    font-size: 14px; line-height: 1.1;
  }
}

  .cap-actions .peek:hover{ box-shadow:0 0 16px rgba(169,216,236,.35); transform:translateY(-1px) }
  .cap-actions .next:hover{ box-shadow:0 0 18px rgba(169,216,236,.45); transform:translateY(-1px) }

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}



/* ===== RESULT SECTION ===== */
.cb-result {
  position: relative;
  background: linear-gradient(180deg, #100E09 0%, #0c0b08 100%);
  padding: 120px 20px;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.result-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #a9d8ec, #dceca9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.result-sub {
  font-family: "Open Sans", sans-serif;
  color: rgba(255,255,255,.75);
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto 60px;
}

/* Floating glass cards */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  justify-items: center;
  margin-bottom: 80px;
}
.result-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 32px 22px;
  transition: transform .4s ease, box-shadow .4s ease;
  max-width: 340px;
}
.result-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 28px rgba(220,236,169,0.25);
}
.result-card .icon {
  font-size: 36px;
  margin-bottom: 12px;
}
.result-card h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  margin-bottom: 10px;
  color: #dceca9;
}
.result-card p {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}

/* Contrast block (fear element) */
.result-contrast {
  margin-top: 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 20px;
  display: inline-block;
  max-width: 560px;
  animation: fadeIn 1.4s ease forwards;
}
.result-contrast h4 {
  font-family: "Montserrat", sans-serif;
  color: #a9d8ec;
  font-size: 18px;
  margin-bottom: 6px;
}
.result-contrast p {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,.75);
  margin: 0;
}

#runScan {
  display: inline-block;
  padding: 14px 26px; /* same as Start your project */
  border-radius: 12px;
  border: 1px solid rgba(169, 216, 236, .35);
  background: rgba(12, 22, 28, .7);
  color: #a9d8ec;
  font: 800 14px "Montserrat", sans-serif;
  letter-spacing: .05em;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  box-shadow: none; /* removes any existing shadow */
}

#runScan:hover {
  background: rgba(12, 22, 28, .85);
  color: #fff;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

  .cap-actions .peek:hover{ box-shadow:0 0 16px rgba(169,216,236,.35); transform:translateY(-1px) }
  .cap-actions .next:hover{ box-shadow:0 0 18px rgba(169,216,236,.45); transform:translateY(-1px) }

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}



/* ===== SECTION WRAPPER ===== */
.lms-build .cb-container{ width:min(1100px,92vw); margin:0 auto }

/* Header */
.lms-head{ text-align:center; margin-bottom:36px }
.lms-head .eyebrow{ text-transform:uppercase; letter-spacing:.12em; font:700 12px "Open Sans",sans-serif; color:rgba(255,255,255,.6) }
.lms-head .title{
  font:800 clamp(28px,4.6vw,52px) "Montserrat",sans-serif; letter-spacing:-.01em; margin:8px 0 6px;
  background:linear-gradient(90deg,#a9d8ec,#dceca9); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.lms-head .lede{ font:400 17px/1.7 "Open Sans",sans-serif; color:rgba(255,255,255,.78); max-width:760px; margin:0 auto }

/* Feature rows */
.feat.row{ display:grid; grid-template-columns: 1.1fr .9fr; gap:34px; align-items:center; margin:40px 0 28px }
.feat.row.reverse{ grid-template-columns: .9fr 1.1fr }
.feat.row.reverse .shot{ order:2 } .feat.row.reverse .copy{ order:1 }

.shot{ position:relative }
.shot .zoom{ padding:0; border:0; background:none; cursor:zoom-in; border-radius:18px; overflow:hidden; display:block }
.shot img{ width:100%; height:auto; display:block; background:#0f0f0f; border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:0 28px 80px rgba(0,0,0,.45); transform:translateZ(0); transition:transform .5s ease }
.shot .zoom:hover img{ transform:scale(1.03) }

.copy h3{ font:800 22px "Montserrat",sans-serif; margin:0 0 8px; color:#dceca9; letter-spacing:.01em }
.copy p{ font:400 16px/1.7 "Open Sans",sans-serif; color:rgba(255,255,255,.86); margin:0 0 10px }
.outcomes{ list-style:none; padding:0; margin:0 }
.outcomes li{ font:400 14px/1.6 "Open Sans",sans-serif; color:rgba(255,255,255,.75) }
.outcomes .tags{ margin-top:8px }
.outcomes .tags span{
  display:inline-block; margin:6px 6px 0 0; padding:6px 10px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); font:700 11px "Montserrat",sans-serif;
  letter-spacing:.04em; text-transform:uppercase; color:#a9d8ec;
}

/* CTA buttons (reuse your brand styles) */
.case-cta{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap }
.cb-btn-solid,.cb-btn-outline{
  display:inline-block; padding:12px 18px; border-radius:14px; font:700 14px "Montserrat",sans-serif; text-decoration:none; transition:.2s
}
.cb-btn-solid{ color:#100E09; background:#fff; border:4px solid #dceca9 }
.cb-btn-solid:hover{ background:#dceca9; transform:translateY(-2px) }
.cb-btn-outline{ color:#fff; border:2px solid rgba(255,255,255,.5); background:transparent }
.cb-btn-outline:hover{ color:#100E09; background:#dceca9; border-color:#dceca9; transform:translateY(-2px) }

/* Lightbox */
.shot-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; place-items:center; z-index:9999; padding:4vw }
.shot-lightbox.show{ display:grid; animation:fadeIn .2s ease }
.shot-lightbox img{ width:min(1200px,92vw); height:auto; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.6) }
.shot-lightbox .close{
  position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; font-size:26px; line-height:42px; text-align:center; cursor:pointer
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* Reveal on scroll */
.feat{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
.feat.show{ opacity:1; transform:none }

/* Responsive */
@media (max-width: 980px){
  .feat.row, .feat.row.reverse{ grid-template-columns: 1fr; }
  .feat.row.reverse .shot{ order:1 } .feat.row.reverse .copy{ order:2 }
}
@media (max-width: 600px){
  .copy p{ font-size:15px }
}

  .cap-actions .peek:hover{ box-shadow:0 0 16px rgba(169,216,236,.35); transform:translateY(-1px) }
  .cap-actions .next:hover{ box-shadow:0 0 18px rgba(169,216,236,.45); transform:translateY(-1px) }

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}



/* section shell */
.live-proof{
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(169,216,236,.22), transparent 60%),
    radial-gradient(900px 600px at 82% 78%, rgba(220,236,169,.18), transparent 60%),
    linear-gradient(180deg,#0f0e0b 0%, #100E09 100%);
  color:#fff;
}
.proof-title{background:linear-gradient(90deg, var(--green), var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.2em}
.proof-sub{font:400 17px/1.8 var(--body);color:rgba(255,255,255,.8);max-width:760px;margin:0 auto 18px}
.proof-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* overlay base */
#scanOverlay.scanfx{position:fixed;inset:0;display:none;z-index:9999;pointer-events:none}
#scanOverlay.scanfx.show{display:block}
#scanOverlay #scanMatrix{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.22; filter:blur(.35px);
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:10002;
}
#scanOverlay .hud.topbar{
  position:absolute; top:12px; left:12px; right:12px; height:38px;
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(127,212,255,.35); border-radius:10px;
  background:rgba(12,22,28,.70); backdrop-filter: blur(6px);
  padding:0 12px; color:#a9d8ec;
  font:700 12px var(--heading); letter-spacing:.08em; text-transform:uppercase;
  pointer-events:auto; z-index:10004;
}
#scanOverlay .hud .dot{width:8px;height:8px;border-radius:50%;background:#a9d8ec;opacity:.7}
#scanOverlay .hud .hud-close{margin-left:auto;background:transparent;border:1px solid rgba(169,216,236,.45);color:#e6f8ff;border-radius:8px;width:30px;height:26px;cursor:pointer}

/* terminal (2s) */
#scanOverlay .terminal{
  position:absolute; left:50%; top:18vh; transform:translateX(-50%);
  width:min(920px,92vw); max-height:40vh; overflow:auto;
  border:1px solid rgba(169,216,236,.35); border-radius:16px;
  background:linear-gradient(180deg, rgba(12,22,28,.96), rgba(12,22,28,.92));
  box-shadow:0 30px 90px rgba(0,0,0,.6); pointer-events:auto; z-index:10003;
}
#scanOverlay .term-header{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(169,216,236,.25)}
#scanOverlay .term-header h3{margin:0;font:800 16px var(--heading);background:linear-gradient(90deg,#bfe7f7,#a9d8ec);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#scanOverlay .pulse{width:10px;height:10px;border-radius:50%;background:#a9d8ec;box-shadow:0 0 12px #a9d8ec;animation:pulse 1.6s infinite ease-in-out}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.9;transform:scale(1.2)}}
#scanOverlay .term-body{padding:14px 16px 16px;font:500 14px/1.6 ui-monospace,Consolas,Menlo,monospace;color:#cdeefe}
#scanOverlay .lines{margin:0;white-space:pre-wrap}
#scanOverlay .cursor{width:10px;height:18px;background:#a9d8ec;display:inline-block;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:.1}}
#scanOverlay .terminal.hide{animation:termOut .35s ease forwards}
@keyframes termOut{to{opacity:0;transform:translateX(-50%) translateY(-10px);visibility:hidden}}

/* scroll nudge */
#scanOverlay .scan-next{
  position:absolute; left:50%; transform:translateX(-50%); bottom:4vh; display:flex; gap:8px; align-items:center;
  background:rgba(12,22,28,.6); backdrop-filter: blur(6px);
  border:1px solid rgba(169,216,236,.45); border-radius:14px; padding:8px 12px; color:#a9d8ec;
  font:700 12px var(--heading); text-transform:uppercase; letter-spacing:.08em;
  pointer-events:auto; cursor:pointer; animation:hintFloat 1.8s ease-in-out infinite; z-index:10003;
}
@keyframes hintFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* FULLSCREEN caption */
#scanOverlay .scan-caption{
  position:absolute; inset:0;
  display:flex; align-items:stretch; justify-content:stretch;
  padding:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(10,14,18,.46), rgba(10,14,18,.46)),
    repeating-linear-gradient(to bottom, rgba(169,216,236,.06) 0, rgba(169,216,236,.06) 2px, transparent 2px, transparent 6px);
  animation: scanlines 6s linear infinite;
  z-index:10001;
}
@keyframes scanlines{from{background-position:0 0,0 0}to{background-position:0 0,0 120px}}
#scanOverlay .caption-inner{
  width:100vw; height:100vh;
  padding:clamp(18px,3vw,32px);
  pointer-events:auto;
  background:linear-gradient(180deg, rgba(8,14,18,0.96), rgba(4,6,8,0.94));
  border:1px solid rgba(169,216,236,.14);
  border-radius:0;
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 90px rgba(0,0,0,.7) inset;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  color: #cfeffb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
}
#scanOverlay .scan-caption h4{margin:0 0 10px;font:800 22px var(--heading);background:linear-gradient(90deg,#bfe7f7,#a9d8ec);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#scanOverlay .scan-caption ul{margin:0;padding-left:18px;color:rgba(224,242,255,.92);font:400 16px/1.8 var(--body)}
#scanOverlay .cap-actions{display:flex;gap:12px;justify-content:center;margin-top:22px}
#scanOverlay .cap-actions .next{
  padding:12px 18px;border-radius:8px;border:1px solid rgba(127,212,255,.22);
  background:linear-gradient(180deg,#bfe7f7,#7fd4ff);color:#062225;font:800 14px/1 var(--heading);cursor:pointer;
  box-shadow:0 10px 30px rgba(127,212,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease, box-shadow .12s ease}
#scanOverlay .cap-actions .next:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(127,212,255,.16)}

@media (prefers-reduced-motion: reduce){
  #scanOverlay #scanMatrix{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.22; filter:blur(.35px);
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:10002;
}
  #scanOverlay .pulse,#scanOverlay .scan-next{
  position:absolute; left:50%; transform:translateX(-50%); bottom:4vh; display:flex; gap:8px; align-items:center;
  background:rgba(12,22,28,.6); backdrop-filter: blur(6px);
  border:1px solid rgba(169,216,236,.45); border-radius:14px; padding:8px 12px; color:#a9d8ec;
  font:700 12px var(--heading); text-transform:uppercase; letter-spacing:.08em;
  pointer-events:auto; cursor:pointer; animation:hintFloat 1.8s ease-in-out infinite; z-index:10003;
}
}

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}


  .live-proof{
    background:
      radial-gradient(900px 600px at 18% 22%, rgba(169,216,236,.22), transparent 60%),
      radial-gradient(900px 600px at 82% 78%, rgba(220,236,169,.18), transparent 60%),
      linear-gradient(180deg,#0f0e0b 0%, #100E09 100%);
    color:#fff;
  }
  .proof-title{ background:linear-gradient(90deg, var(--green), var(--blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:.2em }
  .proof-sub{ font:400 17px/1.8 var(--body); color:rgba(255,255,255,.8); max-width:760px; margin:0 auto 18px }
  .proof-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px }

  /* Overlay that follows page scroll (pointer-events off by default so page remains scrollable) */
  .scanfx{ position:fixed; inset:0; display:none; z-index:9999; pointer-events:none }
  .scanfx.show{ display:block }
  #scanMatrix{ position:absolute; inset:0; width:100%; height:100%; opacity:.16; filter:blur(.4px) }
  .hud.topbar{
    position:absolute; top:12px; left:12px; right:12px; height:38px; display:flex; align-items:center; gap:10px;
    border:1px solid rgba(255,255,255,.15); border-radius:10px; background:rgba(16,14,9,.55); backdrop-filter: blur(6px);
    padding:0 12px; color:#dceca9; font:700 12px var(--heading); letter-spacing:.08em; text-transform:uppercase;
    pointer-events:auto; /* allow close */
  }
  .hud .dot{ width:8px; height:8px; border-radius:50%; background:#dceca9; opacity:.6 }
  .hud .hud-close{ margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:8px; width:30px; height:26px; cursor:pointer }

  /* Tiny terminal used only for the first ~2s */
  .terminal{
    position:absolute; left:50%; top:18vh; transform:translateX(-50%);
    width:min(920px,92vw); max-height:40vh; overflow:auto;
    border:1px solid rgba(255,255,255,.18); border-radius:16px;
    background:linear-gradient(180deg, rgba(16,14,9,.92), rgba(16,14,9,.88));
    box-shadow:0 30px 90px rgba(0,0,0,.6);
    pointer-events:auto;
  }
  .term-header{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.12) }
  .term-header h3{ margin:0; font:800 16px var(--heading); background:linear-gradient(90deg,var(--blue),var(--green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
  .pulse{ width:10px; height:10px; border-radius:50%; background:#dceca9; box-shadow:0 0 12px #dceca9; animation:pulse 1.6s infinite ease-in-out }
  @keyframes pulse{ 0%,100%{opacity:.25;transform:scale(1)} 50%{opacity:.8;transform:scale(1.2)} }
  .term-body{ padding:14px 16px 16px; font:500 14px/1.6 ui-monospace, Consolas, Menlo, monospace; color:#a9d8ec }
  .lines{ margin:0; white-space:pre-wrap }
  .cursor{ width:10px; height:18px; background:#a9d8ec; display:inline-block; animation:blink .9s steps(1) infinite }
  @keyframes blink{ 50%{ opacity:.1 } }
  .terminal.hide{ animation: termOut .35s ease forwards }
  @keyframes termOut{ to{ opacity:0; transform:translateX(-50%) translateY(-10px); visibility:hidden } }

  /* Caption that changes per section */
  .scan-caption{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:6vh 2vw;
    pointer-events:none;
    /* blue hacker glass */
    background-image:
      linear-gradient(rgba(10,14,18,.46), rgba(10,14,18,.46)),
      repeating-linear-gradient(to bottom, rgba(169,216,236,.06) 0, rgba(169,216,236,.06) 2px, transparent 2px, transparent 6px);
    animation: scanlines 6s linear infinite;
  }
  @keyframes scanlines{ from{ background-position:0 0, 0 0 } to{ background-position:0 0, 0 120px } }
  .scan-caption .caption-inner{
    width:min(1000px,92vw); pointer-events:auto;
    background:rgba(12,22,28,.78);
    border:1px solid rgba(169,216,236,.38);
    border-radius:18px; padding:24px 22px;
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 40px rgba(169,216,236,.25) inset;
  }
  .scan-caption h4{
    margin:0 0 10px; font:800 22px var(--heading);
    background:linear-gradient(90deg,#bfe7f7,#a9d8ec); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .scan-caption ul{ margin:0; padding-left:18px; color:rgba(224,242,255,.92); font:400 16px/1.8 var(--body) }
  .scan-caption[hidden]{ display:none }
  .scroll-hint{ position:absolute; left:50%; transform:translateX(-50%); bottom:-34px; display:flex; gap:8px; align-items:center; font:700 12px var(--heading); color:#dceca9; text-transform:uppercase; letter-spacing:.08em; opacity:.88; animation:hintFloat 1.8s ease-in-out infinite }
  @keyframes hintFloat{ 0%,100%{ transform:translate(-50%, 0) } 50%{ transform:translate(-50%, 6px) } }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    #scanMatrix{ display:none }
    .pulse, .scroll-hint{ animation:none }
  }
  
  .cap-actions .peek:hover{ box-shadow:0 0 16px rgba(169,216,236,.35); transform:translateY(-1px) }
  .cap-actions .next:hover{ box-shadow:0 0 18px rgba(169,216,236,.45); transform:translateY(-1px) }

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}



.scroll-nudge {
  position: fixed;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(12,22,28,.75);
  border: 1px solid rgba(127,212,255,.45);
  border-radius: 20px;
  padding: 8px 14px;
  color: #a9d8ec;
  font: 700 13px "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  z-index: 99999;
  animation: hintFloat 2s ease-in-out infinite;
  backdrop-filter: blur(6px);
}
.scroll-nudge:hover {
  background: rgba(12,22,28,.9);
  border-color: #a9d8ec;
  color: #fff;
}
@keyframes hintFloat {
  0%,100% { transform: translate(-50%,0); }
  50% { transform: translate(-50%,-4px); }
}


/* force fullscreen blue overlay if any stylesheet overrides it */
#scanOverlay.scanfx .scan-caption{position:fixed!important;inset:0!important;display:flex!important}
#scanOverlay.scanfx .caption-inner{background:rgba(12,22,28,.78)!important;border-color:rgba(169,216,236,.38)!important}

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}




/* Force fullscreen blue overlay, even if other styles override */
#scanOverlay.scanfx .scan-caption{ position:fixed !important; inset:0 !important; display:flex !important; padding:0 !important; }
#scanOverlay.scanfx .caption-inner{ width:100vw !important; height:100vh !important; border-radius:0 !important; }

#scanOverlay .caption-inner h4,
#scanOverlay .caption-inner ul li{
  text-shadow: 0 0 6px rgba(127,212,255,.65), 0 0 16px rgba(127,212,255,.35);
}


.scan-nudge{
  position:fixed; bottom:3vh; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(12,22,28,.75);
  border:1px solid rgba(127,212,255,.45);
  border-radius:20px; padding:8px 14px; color:#a9d8ec;
  font:700 13px var(--heading); text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; z-index:99999; animation:hintFloat 2s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
.scan-nudge:hover{background:rgba(12,22,28,.9);border-color:#a9d8ec;color:#fff;}
@keyframes hintFloat{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-4px)}
}

/* Full-width immersive app-style footer */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  /*background: radial-gradient(1000px 600px at 10% 50%, rgba(169,216,236,.08), transparent 60%),
              radial-gradient(1000px 600px at 90% 50%, rgba(220,236,169,.08), transparent 60%),
              rgba(12,22,28,.85);*/
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(169,216,236,.25);
/*  box-shadow: 0 -10px 40px rgba(0,0,0,.5);*/
}

/* Container (full-width layout) */
.footer-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  width: 100%;
}

/* Each item */
.footer-nav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  font: 600 13px "Montserrat", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .25s ease, transform .15s ease;
}

.footer-nav a i {
  font-size: 20px;
  opacity: 0.9;
}

/* Active & hover */
.footer-nav a.active,
.footer-nav a:hover {
  color: #dceca9;
  transform: translateY(-2px);
}

.footer-nav a.active i {
  filter: drop-shadow(0 0 6px rgba(220,236,169,.35));
}

/* Pocket LMS icon refinement */
.footer-nav a img {
  opacity: 0.9;
  transition: opacity .2s ease;
}
.footer-nav a:hover img { opacity: 1; }

/* Disabled link */
.footer-nav a[data-disabled="true"] {
  pointer-events: none;
  opacity: 0.4;
}