.hero{
    padding: 0 0 110px;  
    position:relative; overflow:hidden;
  }
.hero h1{font-size:50px; margin-bottom:22px;}
.hero p.lead{font-size:18px; color:var(--grey); max-width:520px; margin-bottom:36px;}
.hero-actions{display:flex; gap:14px; margin-bottom:44px; flex-wrap:wrap;}

.general-grid{display:grid; gap:24px;}


/*card1*/
.card1{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:32px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.card1:hover{transform:translateY(-6px); box-shadow:0 22px 38px -24px rgba(0,0,0,0.35); border-color:transparent;}
.card1-icon{width:44px; height:44px; border-radius:10px; margin-bottom:20px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px;}
.card1 h3{font-size:19px; margin-bottom:10px;}
.card1 p{color:var(--grey); font-size:14.5px;}


/*card2*/
.card2{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius); padding:28px; transition:background .2s ease, border-color .2s ease, transform .2s ease; border-top:3px solid transparent;}
.card2:hover{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.28); transform:translateY(-4px);}
.card2 h3{color:#fff; font-size:19px; margin-bottom:10px;}
.card2 .tag{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px; display:block;}
.card2 p{color:#C7CCE8; font-size:14px;}
.card2.wide{grid-column:span 2;}

/*card3*/
.card3{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-bottom:16px; border-left:4px solid var(--blue-light);}
.card3 h4{font-size:16px; margin-bottom:6px;}
.card3 p{font-size:14px; color:var(--grey);}