/* SoftChris Concept - style.css */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  background:#f4f6f8;
  color:#333;
}
header{
 background:#162230;
 color:white;
 text-align:center;
 padding:3px 3px;
 }
nav{
  background:#1d2b3a;
  display:flex;
  justify-content:center;
}
nav a{
  color:#fff;
  text-decoration:none;
  padding:18px 24px;
  font-weight:600;
}
nav a:hover,.active{
  background:#f47c20;
}
.container{
  max-width:1200px;
  margin:auto;
  padding:40px 20px;
}
.hero{
  text-align:center;
  padding:30px 0 50px;
}
.hero h1{
  color:#162230;
  font-size:2.5rem;
}
.screenshot{
    display:flex;
    align-items:center;
    gap:40px;
    margin:60px 0;
}

.screenshot img{
    width:50%;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.screenshot div{
    flex:1;
}
.cards{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
 gap:30px;
}
.card{
 background:#fff;
 border-radius:12px;
 box-shadow:0 4px 12px rgba(0,0,0,.08);
 padding:20px;
 text-align:center;
}
.card img{max-width:300px;height:auto}
.btn{
 display:inline-block;
 margin-top:20px;
 background:#1f4e79;
 color:#fff;
 text-decoration:none;
 padding:12px 24px;
 border-radius:8px;
}
.features{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:20px;
 margin-top:40px;
}
.feature{
 background:#fff;
 padding:20px;
 border-radius:10px;
}
footer{
 margin-top:60px;
 background:#162230;
 color:#fff;
 text-align:center;
 padding:25px;
}

/* ===========================
   SoftChris Lightbox
=========================== */

.capture {
    cursor: pointer;
    transition: transform .2s;
}

.capture:hover {
    transform: scale(1.03);
}

#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.90);
    justify-content: center;
    align-items: center;
}

#lightbox img {
    max-width: 92%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(255,255,255,.25);
}

#lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 42px;
    cursor: pointer;
    user-select: none;
}

#lightbox-close:hover {
    color: #f47c20;
}