/* Flame Game Development - red & black theme */
:root{
    --bg-1: #0a0a0a;
    --bg-2: #120000;
    --accent: #ff1f1f;
    --accent-2: #ff8b6b;
    --muted: #bfbfbf;
}
body{
    font-family: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
    background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
    color: #f4f4f4;
    margin:0;
}
header nav{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:transparent}
header .logo{color:var(--accent);font-weight:800;text-decoration:none;font-size:1.1rem}
header nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
header nav a{color:var(--muted);text-decoration:none}
header nav a.active, header nav a:hover{color:var(--accent-2)}

.gd-hero{display:grid;grid-template-columns:1fr 380px;gap:40px;padding:64px 6%;align-items:center}
.gd-hero-content .eyebrow{color:var(--accent-2);font-size:.9rem;margin-bottom:12px}
.gd-hero-content h1{font-size:2.6rem;margin:0 0 18px;color:var(--accent)}
.gd-hero-content .lead{max-width:60ch;color:var(--muted);line-height:1.6}
.cta-row{margin-top:22px;display:flex;gap:12px}
.btn{padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--accent),#ff4b4b);color:#140000}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent-2)}

.gd-hero-visual{height:300px;border-radius:14px;background-image: url('../assets/flame2.png'), radial-gradient(circle at 20% 20%, rgba(255,31,31,0.18), transparent 10%), linear-gradient(180deg, rgba(255,31,31,0.06), rgba(255,139,107,0.02));background-size:cover, auto, auto;background-position:center, left top, left top;box-shadow:0 8px 30px rgba(255, 255, 255, 0.8);} 

.gd-services{padding:48px 6%;}
.gd-services h2{text-align:center;color:var(--muted);margin-bottom:18px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.service-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;box-shadow:0 2px 2px 2px rgba(255, 255, 255, 0.7)}
.service-card h3{color:var(--accent);margin-top:0}
.service-card p{color:var(--muted);margin-bottom:0}

/* Our Work / Game Cards */
.our-work{padding:40px 6%;}
.our-work h2{color:var(--accent-2);text-align:left;margin:0 0 18px;font-size:1.6rem}
.game-grid{display:flex;gap:18px;align-items:flex-start}
.game-card{width:380px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;box-shadow:0 2px 2px 2px rgba(255, 255, 255, 0.959);position:relative}
.card-splash-wrap{width:100%;height:160px;overflow:hidden;background:#070707}
.card-splash{width:100%;height:100%;object-fit:cover;display:block}
.card-footer{display:flex;align-items:center;gap:12px;padding:12px}
.card-logo{width:48px;height:48px;object-fit:contain;border-radius:8px;background:rgba(0,0,0,0.2);padding:6px}
.card-title{font-weight:700;color:#fff}

.card-actions{margin-top:8px}
.playstore-btn{display:inline-flex;align-items:center;gap:8px;background:#ffffff;color:#070707;padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:700;font-size:0.95rem}
.playstore-btn svg{display:block}
.playstore-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.4)}


footer{padding:28px 6%;color:var(--muted);text-align:center}

@media (max-width:900px){
    .gd-hero{grid-template-columns:1fr;gap:22px;padding:36px 5%}
    .gd-hero-visual{height:220px}
}