/* Grande - home page "Moderation, made simple": three picture cards (index.html) */
.hmod{position:relative;padding:20px 28px 110px;overflow-x:clip}
.hm-in{max-width:1360px;margin:0 auto}
.hm-head{text-align:center;margin:0 auto 48px;max-width:860px}
.hm-head h2{margin:0 0 12px;font-size:clamp(32px,4.2vw,54px);line-height:1.05;letter-spacing:-1.8px;font-weight:800}
.hm-head .script{line-height:1}
.hm-head p{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,20px);line-height:1.5}
.hm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-card{position:relative;display:flex;flex-direction:column;min-height:408px;border:1px solid #232323;border-radius:22px;background:#0a0a0a;overflow:hidden;isolation:isolate;transition:border-color .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.hm-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 0%,rgba(0,126,254,.2),rgba(0,126,254,.05) 45%,transparent 70%);transition:opacity .5s ease}
.hm-card:hover{border-color:#2f2f2f}
.hm-pic{position:relative;flex:1;display:grid;place-items:center;padding:30px 28px 0;perspective:1100px;overflow:hidden}
.hm-pic img{display:block;width:100%;height:auto;max-height:250px;object-fit:contain;border-radius:16px;box-shadow:0 26px 60px rgba(0,0,0,.6);transform-origin:50% 55%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hm-c1 .hm-pic img{width:auto;max-width:92%;transform:rotateX(18deg) rotateY(-14deg) rotateZ(6deg)}
.hm-c2 .hm-pic img{width:auto;max-height:270px;transform:rotateX(16deg) rotateY(12deg) rotateZ(-6deg) translateY(10px)}
.hm-c3 .hm-pic img{width:auto;max-height:270px;transform:rotateX(16deg) rotateY(-12deg) rotateZ(7deg) translateY(10px)}
.hm-c1:hover .hm-pic img,.hm-c3:hover .hm-pic img{transform:rotateX(8deg) rotateY(-5deg) rotateZ(3deg) scale(1.03)}
.hm-c2:hover .hm-pic img{transform:rotateX(8deg) rotateY(5deg) rotateZ(-3deg) scale(1.03)}
.hm-pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;background:linear-gradient(to bottom,transparent,#0a0a0a)}
.hm-cap{display:flex;align-items:center;gap:12px;padding:20px 26px 24px;color:#e6e6e6;font-size:17px;font-weight:600;letter-spacing:-.1px}
.hm-cap svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:#9aa0a6}
@media(max-width:1000px){.hm-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}.hm-card{min-height:360px}}
@media(prefers-reduced-motion:reduce){.hm-card,.hm-pic img{transition:none}.hm-card:hover{transform:none}}