/*
Theme Name: SmartGenLabs
Theme URI: https://smartgenlabs.com
Author: Smart GenAI Lab
Author URI: https://smartgenlabs.com
Description: A clean, responsive WordPress 6.8 theme promoting Smart GenAI Labs with a dynamic homepage slider and admin-driven menus.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: smartgenlabs
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Basic resets */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  color:#111827;
  background:
    radial-gradient(1200px 60% at 20% -10%, rgba(59,130,246,0.15), transparent 60%),
    radial-gradient(800px 50% at 90% 10%, rgba(16,185,129,0.18), transparent 60%),
    radial-gradient(1000px 60% at 40% 100%, rgba(236,72,153,0.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  min-height:100dvh;
}

.container{width:min(1200px, 92vw); margin:0 auto;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.85); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(15,23,42,0.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.85rem 0;}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:#111827}
.brand .logo{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,#3b82f6, #a855f7 60%, #06b6d4);
  box-shadow: 0 6px 20px rgba(59,130,246,.25);
}
.brand .title{font-weight:700; letter-spacing:.2px; font-size:1.05rem;}
.nav-toggle{display:none; background:none; border:none; font-size:1.6rem;}

.primary-nav ul{list-style:none; padding:0; margin:0; display:flex; gap:1rem; align-items:center;}
.primary-nav a{
  text-decoration:none; color:#111827; font-weight:600; padding:.5rem .75rem; border-radius:10px;
}
.primary-nav a:hover{background:#eef2ff;}

/* Mobile nav */
@media (max-width: 900px){
  .nav-toggle{display:block}
  .primary-nav{display:none; position:absolute; top:100%; right:0; left:0; background:#fff; border-bottom:1px solid #e5e7eb;}
  .primary-nav.open{display:block;}
  .primary-nav ul{flex-direction:column; padding: .5rem .75rem;}
}

/* Hero Slider */
.sgl-slider{position:relative; overflow:hidden; border-radius:20px; background:#0b1220; color:#fff;}
.sgl-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center;
  padding: clamp(1rem, 2vw + 1rem, 3rem);
}
.sgl-slide.active{opacity:1; position:relative;}
.sgl-slide .visual{
  width:100%; height:100%; min-height:260px;
  background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(168,85,247,.25));
  border-radius:16px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.sgl-slide .visual img{max-width:100%; height:auto; display:block;}
.sgl-slide .copy h1,.sgl-slide .copy h2{margin:.25rem 0 0; line-height:1.1}
.sgl-slide .copy h1{font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem);}
.sgl-slide .copy p{opacity:.9}
.sgl-cta{display:inline-flex; gap:.5rem; align-items:center; padding:.7rem 1rem; font-weight:700; border-radius:12px; background:#3b82f6; color:#fff; text-decoration:none; box-shadow:0 10px 24px rgba(59,130,246,.35)}
.sgl-cta:hover{transform: translateY(-1px);}

/* Slider controls */
.sgl-controls{
  position:absolute; inset-inline:0; bottom:10px; display:flex; align-items:center; justify-content:center; gap:.4rem; z-index:5;
}
.sgl-dot{
  width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.5); border:none;
}
.sgl-dot.active{background:#fff}
.sgl-prev,.sgl-next{
  position:absolute; top:50%; transform:translateY(-50%); border:none; background:rgba(255,255,255,.15); color:#fff;
  width:40px; height:40px; border-radius:999px; cursor:pointer;
}
.sgl-prev{left:10px} .sgl-next{right:10px}

/* Sections */
.section{padding: clamp(2rem, 3vw + 1rem, 4rem) 0;}
.section h2{font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); margin:0 0 1rem;}
.grid{display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr);}
.card{background:#fff; border:1px solid #eef2f7; border-radius:16px; padding:1rem; box-shadow:0 10px 20px rgba(2,6,23,.04)}
.card h3{margin:.2rem 0 .4rem}
.card p{margin:0}
@media (max-width: 900px){ .sgl-slide{grid-template-columns:1fr;} .grid{grid-template-columns:1fr;} }
@media (min-width: 901px) and (max-width: 1200px){ .grid{grid-template-columns: repeat(2, 1fr);} }

/* Footer */
.site-footer{padding:2rem 0; color:#6b7280; border-top:1px solid #e5e7eb}
.site-footer a{color:#6b7280; text-decoration:none;}