:root {
--primary: #2f80ff;
--bg: #050b18;
--card: #0d1528;
--border: rgba(255,255,255,.08);
--text: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
  }

html {
scroll-behavior: smooth;
}

body {
background: var(--bg);
color: var(--text);
overflow-x: hidden;
position: relative;
}

/* Background Glow */

body::before {
content: "";
position: fixed;
top: -200px;
right: -200px;
width: 500px;
height: 500px;
border-radius: 50%;
background: #2f80ff;
filter: blur(180px);
opacity: 0.08;
pointer-events: none;
z-index: -2;
}

body::after {
content: "";
position: fixed;
bottom: -250px;
left: -250px;
width: 500px;
height: 500px;
border-radius: 50%;
background: #2f80ff;
filter: blur(220px);
opacity: 0.05;
pointer-events: none;
z-index: -2;
}

/* Grid Overlay */

.hero,
.projects,
.featured-case,
.stats,
.cta {
position: relative;
}

.hero::before,
.projects::before,
.featured-case::before,
.stats::before,
.cta::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: -1;
}

/* Hero */

.hero {
min-height: 90vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px;
}

.hero-content {
max-width: 900px;
}

.badge {
display: inline-block;
padding: 10px 20px;
border-radius: 30px;
background: rgba(47,128,255,.15);
color: var(--primary);
margin-bottom: 25px;
border: 1px solid rgba(47,128,255,.25);
}

.hero h1 {
font-size: 4rem;
line-height: 1.1;
margin-bottom: 20px;
text-shadow:
0 0 20px rgba(47,128,255,.15),
0 0 40px rgba(47,128,255,.08);
}

.hero p {
max-width: 750px;
margin: auto;
opacity: .8;
font-size: 1.1rem;
line-height: 1.8;
}

.hero-buttons {
margin-top: 35px;
}

/* Buttons */

.primary-btn,
.secondary-btn {
display: inline-block;
padding: 14px 30px;
border-radius: 50px;
text-decoration: none;
margin: 10px;
transition: .3s ease;
}

.primary-btn {
background: var(--primary);
color: #fff;
}

.primary-btn:hover {
transform: translateY(-2px);
}

.secondary-btn {
border: 1px solid var(--primary);
color: #fff;
}

.secondary-btn:hover {
background: rgba(47,128,255,.1);
}

/* Shared Section Spacing */

.projects,
.featured-case,
.stats,
.cta {
padding: 120px 8%;
}

/* Projects */

.projects h2 {
text-align: center;
margin-bottom: 60px;
font-size: 2.5rem;
}

.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
gap: 25px;
}

.project-card {
background: rgba(13,21,40,.85);
backdrop-filter: blur(12px);
padding: 30px;
border-radius: 20px;
border: 1px solid var(--border);
transition: .3s ease;
}

.project-card:hover {
transform: translateY(-10px);
border-color: rgba(47,128,255,.35);
box-shadow: 0 20px 40px rgba(47,128,255,.15);
}

.project-card span {
color: var(--primary);
font-size: .9rem;
}

.project-card h3 {
margin: 15px 0;
font-size: 1.5rem;
}

.project-card p {
opacity: .75;
line-height: 1.7;
}

.project-card a {
display: inline-block;
margin-top: 20px;
color: var(--primary);
text-decoration: none;
font-weight: 600;
}

/* Featured Section */

.featured-case {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.featured-left{
    max-width:550px;
}

.featured-left span {
color: var(--primary);
display: block;
margin-bottom: 15px;
}

.featured-left h2 {
font-size: 3rem;
margin-bottom: 20px;
}

.featured-left p {
opacity: .8;
line-height: 1.8;
margin-bottom: 25px;
}

.featured-left ul {
list-style: none;
}

.featured-left li {
margin-bottom: 12px;
opacity: .9;
}
.feature-list{
    list-style:none;
    margin-top:25px;
}

.feature-list li{
    margin-bottom:14px;
    padding-left:28px;
    position:relative;
    color:rgba(255,255,255,.85);
}

.feature-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--primary);
    font-weight:bold;
}

.mock-card{
    height:auto;
    width:100%;
    margin:0;
    padding:0;
    overflow: hidden;
    background:none;
    border:none;
    box-shadow:none;
}

.preview-image{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
}
.screenshots{
    padding:120px 8%;
    text-align:center;
}

.screenshots h2{
    font-size:2.5rem;
    margin-bottom:15px;
}
.screenshots p{
    font-size:1.25rem;
    margin-bottom:15px;
}

.screenshots-subtitle{
    opacity:.7;
    margin-bottom:50px;
}

.screenshots-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.gallery-image{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:15px;
    cursor:pointer;
    transition:.3s;
}

.gallery-image:hover{
    transform:scale(1.03);
     will-change:transform;
}

.lightbox{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:9999;
}

.lightbox.active{
    display:flex;
}

#lightboxImg{
    max-width:90%;
    max-height:90vh;
    border-radius:15px;
}

#prevBtn,
#nextBtn{
    position:absolute;

    background:rgba(255,255,255,.12);

    border:none;

    color:#fff;

    font-size:40px;

    cursor:pointer;

    padding:12px 18px;

    border-radius:12px;
}

#prevBtn{
    left:30px;
}

#nextBtn{
    right:30px;
}

#closeBtn{
    position:absolute;
    top:20px;
    right:30px;

    color:#fff;

    font-size:40px;

    cursor:pointer;
}

.screenshots-grid img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    transition:.3s;
}

.screenshots-grid img:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(47,128,255,.15);
}
/* Stats */

.stats {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap: 20px;
}

.stat {
background: var(--card);
padding: 30px;
text-align: center;
border-radius: 20px;
border: 1px solid var(--border);
}

.stat h3 {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 10px;
}

/* CTA */

.cta {
text-align: center;
}

.cta h2 {
font-size: 3rem;
margin-bottom: 20px;
}

.cta p {
opacity: .8;
margin-bottom: 25px;
}

.cta a {
display: inline-block;
padding: 14px 30px;
border-radius: 50px;
background: var(--primary);
color: #fff;
text-decoration: none;
}

/* Mobile */

@media (max-width: 900px) {

.hero h1 {
    font-size: 2.7rem;
}

.featured-case {
    grid-template-columns: 1fr;
    align-items:center;
}

.projects,
.featured-case,
.stats,
.cta {
    padding: 80px 5%;
}

.cta h2 {
    font-size: 2rem;
}
}
.back-btn{
    position:fixed;
    top:20px;
    left:20px;
    z-index:999;
    justify-content:center;
    display:flex;
    align-items:center;
    gap:8px;

    padding:12px 18px;

    text-decoration:none;
    color:#fff;

    background:rgba(13,21,40,.85);
    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;

    transition:.3s ease;
}
.back-icon{
    font-size:18px;
}
.back-text{
    font-size:14px;
    font-weight:600;
}
@media (max-width:768px){

    .back-btn{
        width:42px;
        height:42px;
        padding:0;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .back-text{
        display:none;
    }
}
.back-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(47,128,255,.35);
    box-shadow:0 10px 25px rgba(47,128,255,.15);
}