/* =========================================================
   CSAf Learn Hub — soft glass layer (matches csafri.com)
   Loads AFTER styles.css. Look only: content, fonts and
   behaviour are unchanged.
   ========================================================= */
:root{
  --ink:#1F2E2B; --ink-2:#3A4744; --muted:#66726E;
  --paper:#F6F7F5;
  --teal:#3F8C93; --teal-2:#4F9AA0; --teal-dark:#34413E; --teal-soft:#E4EFEE;
  --green:#5FA584; --leaf-soft:#E9F3EE;
  --gold:#B48E4E; --gold-soft:#F7F0E2;
  --blue:#5A7FAF; --blue-soft:#ECF1F8;
  --graphite:#34413E;
  --radius:24px;
  --glass:rgba(255,255,255,.62);
  --glass-line:rgba(255,255,255,.85);
  --blur:blur(24px) saturate(170%);
  --shadow-sm:0 1px 1px rgba(31,46,43,.03),0 10px 28px -12px rgba(31,46,43,.14);
  --shadow:0 18px 40px -18px rgba(31,46,43,.22);
  --ease-g:cubic-bezier(.32,.72,0,1);
}

/* Soft ambient wallpaper */
body{background:var(--paper)}
body:before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40vmax 40vmax at 10% 15%,rgba(63,140,147,.10),transparent 70%),
    radial-gradient(36vmax 36vmax at 90% 30%,rgba(90,130,180,.08),transparent 70%),
    radial-gradient(32vmax 32vmax at 70% 88%,rgba(110,180,140,.09),transparent 70%),
    radial-gradient(28vmax 28vmax at 18% 82%,rgba(201,168,110,.08),transparent 70%);
  animation:wallg 40s ease-in-out infinite alternate}
@keyframes wallg{to{transform:translate3d(-3vmax,2vmax,0) scale(1.06)}}
body.in-app{background:var(--paper)}

/* Eyebrows: a small dot instead of a line */
.eyebrow:before{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(63,140,147,.12)}
.eyebrow.light{color:#E3CFA3}
.eyebrow.light:before{background:currentColor;box-shadow:0 0 0 4px rgba(227,207,163,.18)}

/* Floating glass navigation */
.nav{top:12px;margin:12px auto 0;width:min(1240px,calc(100% - 24px));border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--glass-line);
  box-shadow:0 8px 30px -12px rgba(31,46,43,.25);padding:10px 12px 10px 22px}

/* Glass surfaces */
.hub-card,.how-step,.panel,.av-card,.cp-mod,.verify-box,.module-card,.resource-grid a{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--shadow-sm);border-radius:26px}
.how-step:hover{background:rgba(255,255,255,.8)}
.hub-card.soon{background:var(--glass)}
.verify-box{border-radius:32px}

/* No coloured stripes on cards */
.hub-card::before,.cp-hero:before,.cp-mod:before{display:none}
.cp-who li{border-left:0;padding-left:0}
.auto-item{border-left:0}
.feedback,.next-steps{border-left:0}

/* No giant faded numbers */
.how-num{display:none}

/* Icons: soft tinted tiles */
.how-icon,.how-icon.s1,.how-icon.s2,.how-icon.s3,.how-icon.s4{background:rgba(63,140,147,.11);color:var(--teal);
  box-shadow:inset 0 0 0 1px rgba(63,140,147,.12)}
.how-icon.s3{background:rgba(180,142,78,.13);color:var(--gold)}
.how-icon.s2{background:rgba(90,127,175,.12);color:var(--blue)}
.logo-s{background:var(--graphite)}

/* Hero: gentle */
.hero h1 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--teal)}
.halo{opacity:.6}
.globe{filter:saturate(.55) brightness(1.08)}
.shine{opacity:.7}

/* Course page header: light frosted panel */
.cp-hero{background:linear-gradient(145deg,#E6F1EE,#E8EEF5);border:1px solid var(--glass-line);border-radius:36px;
  box-shadow:0 30px 60px -40px rgba(31,46,43,.25)}

/* The calmer darker surfaces: one soft graphite, no glows */
.feature-box,.capstone-card,.case-box,.av-card.big,.g1,.g2{background:var(--graphite)!important;color:#fff}
.feature-box{border-radius:36px;box-shadow:0 30px 60px -40px rgba(31,46,43,.45)}
.feature-box:before,.feature-box:after{opacity:.25;filter:saturate(.4)}
.cert-mini{background:linear-gradient(135deg,#E3CFA3,#FBF6EA 50%,#E3CFA3);filter:saturate(.8)}

/* Stats band: light, inset */
.stats-band{background:rgba(255,255,255,.6)!important;background-image:none!important;color:var(--ink);
  margin:0 12px;border-radius:36px;border:1px solid var(--glass-line)}
.stats-band b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ink)}
.stats-band span{color:var(--muted)}

/* Call-to-action band: light */
.cta-band{background:linear-gradient(145deg,#E6F1EE,#E8EEF5)!important;color:var(--ink);border:1px solid var(--glass-line);border-radius:36px}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--muted)}
.cta-band .light-btn,.cta-band a{box-shadow:none}

/* Footer: soft graphite, rounded */
footer{background:var(--graphite);margin:0 12px 12px;border-radius:36px}

/* Buttons */
.dark-btn{background:var(--graphite);box-shadow:0 8px 20px -10px rgba(31,46,43,.5);transition:transform .45s var(--ease-g),box-shadow .45s var(--ease-g)}
.dark-btn:hover{transform:scale(1.03)}
.dark-btn:active,.outline-btn:active,.light-btn:active{transform:scale(.97)}

/* Progress, badges and small accents */
.bar>i{background:var(--teal-2)}
.stepper:after{background:var(--teal-2)}
.read-progress i{background:var(--teal);opacity:.7}
.big-icon.ok{background:var(--teal-2);box-shadow:0 14px 30px -14px rgba(63,140,147,.6)}
.term .tf{background:var(--graphite)}
.result,.result.retry,.spotlight{background:var(--glass);border-color:var(--glass-line)}

@media (max-width:760px){
  .nav{width:calc(100% - 16px);padding:8px 8px 8px 14px;top:8px;margin-top:8px}
  .stats-band,.cta-band{margin-left:8px;margin-right:8px;border-radius:28px}
  footer{margin:0 8px 8px;border-radius:28px}
}

/* Let the soft background show through */
.how,.curriculum{background:transparent}
.trust{background:rgba(255,255,255,.45);border-color:rgba(255,255,255,.8)}

/* Learn Hub pages without a course drawing get the main-site drawings */
body:not(.mbg-on)::after{content:"";position:fixed;inset:-8%;z-index:-1;pointer-events:none;background:url(/motif/csaf-far.svg) center/cover no-repeat;filter:blur(9px);opacity:.25;animation:wallg 90s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){body:not(.mbg-on)::after{animation:none}}