/* ============ MODULES (APPLE DARK MINIMALIST) ============ */
  .modules-grid{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(150px,auto); gap:18px; background:transparent; border:none; border-radius:0; overflow:visible;}
  .module-card.feat-lg{grid-column:span 2; grid-row:span 2;}
  .module-card.feat-wide{grid-column:span 2;}
  .module-card.feat-lg .module-icon{width:56px; height:56px; border-radius:16px;}
  .module-card.feat-lg .module-icon svg{width:26px; height:26px;}
  .module-card.feat-lg h3{font-size:21px;}
  .module-card.feat-lg{display:flex; flex-direction:column; justify-content:flex-end;}
  .module-card.feat-lg p{max-width:320px;}

  .module-card{
    --accent:var(--green); --accent-soft:var(--green-soft); --accent-bg:rgba(16,185,129,0.12);
    background:var(--surface);
    padding:30px 26px; border:1px solid var(--border); border-radius:20px;
    transition:all .35s cubic-bezier(0.16,1,0.3,1);
    position:relative; overflow:hidden; box-shadow:0 2px 10px -2px rgba(0,0,0,0.04);
  }
  html.dark-mode .module-card{
    background:rgba(21, 28, 38, 0.75); border-color:rgba(255, 255, 255, 0.08);
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.08), 0 16px 36px -16px rgba(0,0,0,0.45);
  }
  .module-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--grad); transform:scaleX(0); transform-origin:left; opacity:.9;
    transition:transform .45s cubic-bezier(0.16,1,0.3,1); pointer-events:none;
  }
  .module-card:hover{
    transform:translateY(-6px); box-shadow:0 26px 50px -20px rgba(0,0,0,0.5); border-color:var(--accent-soft);
  }
  .module-card:hover::before{transform:scaleX(1);}
  .module-card.spotlight-active::before{transform:scaleX(1);}
  .module-card.spotlight-active{box-shadow:0 26px 50px -20px rgba(0,0,0,0.5); border-color:var(--accent-soft);}
  .module-card.spotlight-active .module-icon{transform:scale(1.1) rotate(-4deg);}
  .module-card .m-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; position:relative; z-index:1;}
  
  .module-icon{
    width:48px; height:48px; border-radius:14px;
    background:linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.05));
    border:1px solid rgba(16,185,129,0.3); color:var(--green-soft);
    display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 1px 1.5px rgba(255,255,255,0.2), 0 10px 22px -6px rgba(16,185,129,0.35);
    transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .35s ease;
  }
  .module-icon svg{width:22px; height:22px; stroke-width:1.9; transition:transform .35s ease;}
  .module-card:hover .module-icon{transform:scale(1.12) rotate(-5deg); box-shadow:0 14px 28px -4px rgba(16,185,129,0.5);}
  .module-card:hover .module-icon svg{transform:scale(1.06);}
  .module-code{
    font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.04em; color:var(--green-soft);
    background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); padding:4px 10px; border-radius:20px;
    position:relative; z-index:1;
  }
  .module-card h3{font-size:16.5px; font-weight:600; margin-bottom:8px; position:relative; z-index:1; display:flex; align-items:center; gap:8px;}
  .module-card h3::after{
    content:'→'; opacity:0; transform:translateX(-6px); color:var(--green-soft);
    transition:opacity .3s ease, transform .3s ease; font-family:var(--font-mono); font-size:15px;
  }
  .module-card:hover h3::after, .module-card.spotlight-active h3::after{opacity:1; transform:translateX(0);}
  .module-card p{font-size:14px; color:var(--text-muted); line-height:1.6; position:relative; z-index:1;}