:root {
      --blue:#1e3a5f;
      --accent:#1e3a5f;
      --bg:#f5f9ff;
      --white:#ffffff;
      --shadow:0 8px 25px rgba(0,0,0,0.08);
    }
    *{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
    body{background:linear-gradient(135deg,var(--bg),#ffffff);color:#1e293b;overflow-x:hidden}

    main{max-width:1200px;margin:auto;padding:40px 20px;}
    .section-title{text-align:center;margin-bottom:25px}
    .section-title h2{color:var(--blue);font-size:24px}
    .section-title p{color:#64748b;font-size:14px}

    .notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}

    .note-card{
      background:rgba(255,255,255,0.9);
      border: 2px solid #00AEff;
      border-radius:18px;padding:20px;text-align:center;
      box-shadow:var(--shadow);backdrop-filter:blur(10px);
      transition:all .3s ease;position:relative;
      animation:fadeUp .7s forwards;opacity:0;transform:translateY(20px);
    }
    @keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
    .note-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.15);}
    .note-card h3{font-size:17px;color:var(--blue);margin-bottom:8px;}
    .note-card p{font-size:13px;color:#64748b;margin-bottom:18px;}

    .btn{display:inline-block; margin-right: 7px; padding:10px 16px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600;transition:.3s}
    .btn.view{background:var(--accent);color:white}
    .btn.download{background:#00b894;color:white}
    .btn:hover{transform:scale(1.08)}

    .lock{font-size:38px;color:#ff4d4d;margin-bottom:10px;animation:pulse 1.5s infinite}
    @keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

    .whatsapp{
      background:#25d366;color:white;padding:10px 16px;border-radius:25px;
      text-decoration:none;font-weight:600;display:inline-block;margin-top:10px;
      transition:0.3s;
    }
    .whatsapp:hover{background:#20b85b;}