:root{

  --ggr-bg: #ffffff;

  --ggr-text: #0f172a;

  --ggr-muted: #475569;

  --ggr-card: #ffffff;

  --ggr-border: #e5e7eb;

  --ggr-accent: #0ea5e9; /* cyan -> premium */

  --ggr-accent-2: #7c3aed; /* purple */

  --ggr-chip: #eef2ff;

  --ggr-shadow: 0 10px 30px rgba(2,6,23,.08);

}



[data-theme="dark"]{

  --ggr-bg: #0b1220;

  --ggr-text: #e5e7eb;

  --ggr-muted: #94a3b8;

  --ggr-card: #0f172a;

  --ggr-border: #1f2937;

  --ggr-chip: #1e293b;

  --ggr-shadow: 0 16px 40px rgba(0,0,0,.35);

}



body { background: var(--ggr-bg); color: var(--ggr-text); }



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



/* HERO */

.ggr-hero{

  position: relative; isolation: isolate;

  padding: 72px 0 48px;

  background: linear-gradient(135deg, #15333a, #334146, #47606a);

  color: #5ee7df;
  margin-top : 100px;

}

.ggr-hero__overlay{

  position:absolute; inset:0;

  background: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="rgba(255,255,255,0.06)"/><stop offset="100%" stop-color="rgba(255,255,255,0.0)"/></linearGradient></defs><rect width="100%" height="100%" fill="url(%23g)"/></svg>') center/cover no-repeat;

  opacity:.5; pointer-events:none;

}

.ggr-hero__inner{ display:flex; flex-direction:column; gap:22px; }

.ggr-hero__title{ font-size:44px; font-weight:800; letter-spacing:-.02em; }

.ggr-hero__subtitle{ font-size:18px; opacity:.95; }



.ggr-hero__tools{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.ggr-search{ display:flex; gap:10px; background: rgba(255,255,255,.12); padding:8px; border-radius:999px; backdrop-filter: blur(4px); }

.ggr-search input{

  border:none; outline:none; background:transparent; color:#fff; width:260px;

}

.ggr-search input::placeholder{ color:#e2e8f0; }

.ggr-btn{

  border:0; padding:10px 16px; border-radius:999px; cursor:pointer;

  background:#fff; color:#0f172a; font-weight:600;

}

#ggr-dark-toggle{

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

  color:#fff; border:1px solid rgba(255,255,255,.25);

  width:44px; height:44px; border-radius:50%; cursor:pointer;

}



/* FEATURED */

.ggr-section-head h2{ font-weight:700; font-size:26px; margin:28px 0 14px; }

.ggr-featured-card{

  display:block; border-radius:16px; overflow:hidden; background: var(--ggr-card);

  box-shadow: var(--ggr-shadow); transition: transform .25s ease, box-shadow .25s ease;

}

.ggr-featured-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 50px rgba(2,6,23,.16); }

.ggr-featured-thumb img{ width:100%; height:240px; object-fit:cover; display:block; }

.ggr-featured-info{ padding:14px 16px 18px; }

.ggr-featured-title{ font-size:18px; margin:8px 0 10px; line-height:1.35; }

.ggr-chip{

  display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px;

  background: var(--ggr-chip); color: var(--ggr-accent-2); font-weight:600;

}



/* TABS */

.ggr-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }

.ggr-tab{

  border:1px solid var(--ggr-border); background: var(--ggr-card); color: var(--ggr-text);

  padding:8px 14px; border-radius:999px; cursor:pointer; transition: .2s;

}

.ggr-tab.is-active, .ggr-tab:hover{

  border-color: transparent; color:#fff; background: linear-gradient(120deg, var(--ggr-accent), var(--ggr-accent-2));

  box-shadow: var(--ggr-shadow);

}



/* GRID */

.ggr-grid{

  display:grid; gap:26px;

  grid-template-columns: repeat(auto-fill, minmax(320px,1fr));

  margin: 10px 0 24px;

}



.ggr-card{

  background: var(--ggr-card); border:1px solid var(--ggr-border);

  border-radius:14px; overflow:hidden; box-shadow: var(--ggr-shadow);

  transition: transform .25s ease, box-shadow .25s ease;

}

.ggr-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 48px rgba(2,6,23,.18); }

.ggr-card__thumb img{ width:100%; height:200px; object-fit:cover; display:block; }

.ggr-card__info{ padding:14px 16px 18px; }

.ggr-card__title{ font-size:19px; margin:8px 0; line-height:1.35; }

.ggr-card__excerpt{ color: var(--ggr-muted); font-size:15px; }



/* META */

.ggr-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; color: var(--ggr-muted); font-size:13.5px; }



/* SKELETON */

.ggr-skeleton .ggr-card__thumb{ background: linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb); height:200px; animation: sk 1.1s infinite linear; }

.ggr-skeleton .sk-line{ height:12px; background: linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb); border-radius:6px; margin:10px 0; animation: sk 1.1s infinite linear; }

.ggr-skeleton .w-30{ width:30%; } .ggr-skeleton .w-80{ width:80%; } .ggr-skeleton .w-60{ width:60%; }

@keyframes sk { 0%{background-position:-200px 0;}100%{background-position:200px 0;} }



/* PAGINATION */

.ggr-pagination__inner{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:8px 0 36px; }

.ggr-pagination__inner a, .ggr-pagination__inner span{

  display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid var(--ggr-border); background: var(--ggr-card);

}

.ggr-pagination__inner .current{

  background: linear-gradient(120deg, var(--ggr-accent), var(--ggr-accent-2));

  color:#fff; border-color:transparent;

}



/* Responsive */

@media (max-width:768px){

  .ggr-hero__title{ font-size:34px; }

  .ggr-featured-thumb img{ height:200px; }

}