/* REALISATIONS 3 - DARK SHOWCASE */
.real-3 { padding: 100px 5%; background: var(--primary); }
.real-3 .header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.real-3 .eyebrow { font-size: 0.85rem; font-weight: 600; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 16px; }
.real-3 h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--white); margin-bottom: 16px; }
.real-3 .subtitle { font-size: 1.1rem; color: var(--gray-light); }
.real-3 .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto 50px; }
.real-3 .item { position: relative; height: 350px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; }
.real-3 .item:hover { border-color: var(--accent); }
.real-3 .item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.real-3 .item:hover img { transform: scale(1.1); }
.real-3 .item-content { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent 70%); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; }
.real-3 .item-tag { display: inline-block; background: var(--accent); color: var(--black); padding: 6px 14px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; align-self: flex-start; }
.real-3 .item h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); margin-bottom: 8px; }
.real-3 .item p { font-size: 0.85rem; color: var(--white); }
.real-3 .cta { text-align: center; }
.real-3 .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: transparent; border: 2px solid rgba(255,255,255,0.2); color: var(--white); font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: all 0.3s; }
.real-3 .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--black); }
@media (max-width: 1024px) { .real-3 .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .real-3 .grid { grid-template-columns: 1fr; } .real-3 .item { height: 280px; } }