:root {
    --gf-font-body: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;
    --gf-font-display: "Plus Jakarta Sans", "Sora", "Cairo", "Segoe UI", sans-serif;
    --gf-bg: #f4f8ff;
    --gf-bg-2: #eef7ff;
    --gf-panel: #ffffff;
    --gf-text: #10223e;
    --gf-text-soft: #55667f;
    --gf-border: #d6e4f8;
    --gf-accent: #0b75ff;
    --gf-accent-2: #14c3bc;
    --gf-accent-3: #ff7d4d;
    --gf-shadow-lg: 0 22px 54px rgba(13, 42, 88, 0.16);
    --gf-shadow-md: 0 12px 28px rgba(11, 36, 76, 0.11);
}

body.gamefyre-sync-template {
    margin: 0;
}

.gamefyre-sync-template-shell {
    min-height: 100vh;
}

.gf-shell {
    position: relative;
    background:
        linear-gradient(152deg, #f6faff 0%, var(--gf-bg) 40%, var(--gf-bg-2) 100%);
    color: var(--gf-text);
    font-family: var(--gf-font-body);
    padding: 26px 0 54px;
    overflow: hidden;
}

.gf-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 8%, rgba(11, 117, 255, 0.18) 0, rgba(11, 117, 255, 0) 32%),
        radial-gradient(circle at 89% 18%, rgba(20, 195, 188, 0.16) 0, rgba(20, 195, 188, 0) 34%),
        radial-gradient(circle at 50% 98%, rgba(255, 125, 77, 0.1) 0, rgba(255, 125, 77, 0) 37%);
}

.gf-backdrop::before,
.gf-backdrop::after {
    content: "";
    position: absolute;
    width: 44vw;
    max-width: 520px;
    height: 44vw;
    max-height: 520px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.3;
}

.gf-backdrop::before {
    top: -18vw;
    right: -12vw;
    background: radial-gradient(circle, rgba(11, 117, 255, 0.45) 0, rgba(11, 117, 255, 0) 70%);
}

.gf-backdrop::after {
    bottom: -22vw;
    left: -14vw;
    background: radial-gradient(circle, rgba(255, 125, 77, 0.38) 0, rgba(255, 125, 77, 0) 72%);
}

.gf-wrap {
    position: relative;
    z-index: 1;
    width: min(1160px, 92%);
    margin: 0 auto;
}

body.gamefyre-front #masthead,
body.gamefyre-front #colophon,
body.gamefyre-front .site-header,
body.gamefyre-front .site-footer,
body.gamefyre-front .wp-site-blocks > header,
body.gamefyre-front .wp-site-blocks > footer {
    display: none !important;
}

body.gamefyre-front .wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.gf-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #cfdef6;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(12, 44, 89, 0.14);
    padding: 10px 12px;
    margin-bottom: 16px;
    position: sticky;
    top: 10px;
    z-index: 20;
}

.gf-site-header.is-compact {
    box-shadow: 0 18px 38px rgba(12, 44, 89, 0.2);
}

.gf-site-brand {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gf-site-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    border: 1px solid #cfe1fa;
    background: linear-gradient(145deg, #fff 0%, #eef6ff 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(10, 44, 94, 0.12);
}

.gf-site-brand-mark img {
    width: 31px;
    height: 31px;
    display: block;
}

.gf-site-brand-copy {
    display: grid;
    line-height: 1.03;
}

.gf-site-brand-copy strong {
    font-family: var(--gf-font-display);
    font-size: 1.03rem;
    color: #102949;
    letter-spacing: 0.01em;
}

.gf-site-brand-copy em {
    margin-top: 4px;
    font-style: normal;
    font-size: 0.75rem;
    color: #5e7593;
}

.gf-site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.gf-site-nav a {
    text-decoration: none;
    color: #1e4063;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 11px;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
    white-space: nowrap;
}

.gf-site-nav a:hover {
    color: #0c5bbf;
    border-color: #c7dcfa;
    background: #f1f8ff;
}

.gf-site-nav a.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(98deg, var(--gf-accent), var(--gf-accent-2));
}

.gf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(197, 214, 238, 0.85);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    box-shadow: var(--gf-shadow-md);
    padding: 10px 14px;
    margin-bottom: 16px;
    position: sticky;
    top: 12px;
    z-index: 20;
}

.gf-topbar.is-compact {
    box-shadow: 0 14px 36px rgba(11, 36, 76, 0.16);
}

.gf-brand {
    min-width: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gf-brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cde0fb;
    background: linear-gradient(150deg, #ffffff 0%, #eff6ff 100%);
    box-shadow: 0 8px 16px rgba(12, 52, 108, 0.1);
}

.gf-brand-mark img {
    width: 34px;
    height: 34px;
    display: block;
}

.gf-brand-copy {
    display: grid;
    line-height: 1.05;
}

.gf-brand-copy strong {
    font-size: 1rem;
    font-family: var(--gf-font-display);
    color: #112949;
    letter-spacing: 0.01em;
}

.gf-brand-copy em {
    margin-top: 3px;
    font-style: normal;
    font-size: 0.76rem;
    color: #587091;
}

.gf-topnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.gf-topnav a {
    text-decoration: none;
    color: #214164;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.gf-topnav a:hover {
    color: #0b4fad;
    border-color: #c7dcfa;
    background: #f4f9ff;
}

.gf-topnav a.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(98deg, var(--gf-accent), var(--gf-accent-2));
}

.gf-kicker {
    margin: 0 0 10px;
    color: #0d5fcc;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
}

.gf-breadcrumbs {
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: var(--gf-text-soft);
    font-size: 13px;
}

.gf-breadcrumbs a {
    color: #1c5ead;
    text-decoration: none;
}

.gf-breadcrumbs a:hover {
    text-decoration: underline;
}

.gf-hero,
.gf-list-hero {
    position: relative;
    border: 1px solid var(--gf-border);
    border-radius: 28px;
    background:
        linear-gradient(142deg, #ffffff 0%, #f4f9ff 52%, #f5fffc 100%);
    box-shadow: var(--gf-shadow-lg);
    padding: 24px;
}

.gf-hero::after,
.gf-list-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0) 38%);
    mix-blend-mode: screen;
}

.gf-hero {
    display: grid;
    grid-template-columns: 1.68fr 1fr;
    gap: 18px;
}

.gf-list-hero {
    display: grid;
    grid-template-columns: 1.65fr 0.75fr;
    gap: 14px;
}

.gf-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gf-hero h1,
.gf-list-hero h1 {
    margin: 0 0 8px;
    font-family: var(--gf-font-display);
    font-size: clamp(1.6rem, 2.7vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #102645;
}

.gf-hero p,
.gf-list-hero p {
    margin: 0;
    color: var(--gf-text-soft);
}

.gf-hero-icon {
    width: 78px;
    height: 78px;
    border-radius: 20px;
    border: 1px solid #cfe1f8;
    background: #fff;
    box-shadow: 0 12px 26px rgba(13, 52, 109, 0.14);
}

.gf-chip-row,
.gf-chip-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gf-chip-filter {
    margin-top: 14px;
}

.gf-filter-panel {
    margin-top: 14px;
    border: 1px solid #d7e7fa;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 12px 25px rgba(12, 42, 86, 0.09);
    padding: 14px;
}

.gf-filter-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.gf-filter-field {
    display: grid;
    gap: 6px;
}

.gf-filter-field label {
    color: #3f5e80;
    font-size: 12px;
    font-weight: 700;
}

.gf-filter-field input,
.gf-filter-field select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #cfe1f8;
    border-radius: 12px;
    background: #fff;
    color: #1f3553;
    font-size: 13px;
    padding: 8px 11px;
}

.gf-filter-field input:focus,
.gf-filter-field select:focus {
    outline: none;
    border-color: #7eb4f2;
    box-shadow: 0 0 0 3px rgba(24, 90, 186, 0.12);
}

.gf-filter-actions {
    grid-column: span 6;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.gf-chip {
    border: 1px solid #c7dbf9;
    border-radius: 999px;
    background: #edf5ff;
    color: #1853a2;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    transition: transform .16s ease, background-color .16s ease;
}

.gf-chip:hover {
    transform: translateY(-1px);
    background: #e4f0ff;
}

.gf-chip-soft {
    border-color: #d9e7fa;
    color: #4f6682;
    background: #f5f9ff;
}

.gf-chip-score {
    font-weight: 800;
}

.gf-score-elite {
    color: #0f6e43 !important;
    background: #e8fbf1 !important;
    border-color: #bcecd2 !important;
}

.gf-score-strong {
    color: #1e5ca7 !important;
    background: #ebf4ff !important;
    border-color: #c8defd !important;
}

.gf-score-fair {
    color: #8b5600 !important;
    background: #fff5e7 !important;
    border-color: #f3d7a8 !important;
}

.gf-score-low {
    color: #7a3749 !important;
    background: #ffeef3 !important;
    border-color: #f8c6d5 !important;
}

.gf-lead {
    margin: 14px 0 0;
    max-width: 66ch;
    font-size: 15px;
    color: #274466;
}

.gf-stat-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gf-stat-card {
    border: 1px solid #d8e6f8;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 12px;
}

.gf-stat-card span {
    font-size: 12px;
    color: var(--gf-text-soft);
    display: block;
}

.gf-stat-card strong {
    margin-top: 4px;
    display: block;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.gf-quality-label {
    margin-top: 5px;
    display: inline-block;
    font-style: normal;
    font-size: 11px;
    line-height: 1;
    border: 1px solid #d6e6fa;
    border-radius: 999px;
    padding: 3px 7px;
}

.gf-hero-side {
    border: 1px solid #d3e5f8;
    border-radius: 18px;
    background:
        linear-gradient(145deg, #f8fcff 0%, #edf8ff 55%, #f5fffb 100%);
    padding: 16px;
}

.gf-hero-side h2 {
    margin: 0;
    font-family: var(--gf-font-display);
    font-size: 1.26rem;
}

.gf-hero-side p {
    margin: 10px 0 14px;
    font-size: 14px;
}

.gf-mini-list {
    margin: 13px 0 0;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 8px;
}

.gf-mini-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #dce9f8;
    border-radius: 12px;
    background: #fff;
    padding: 8px 10px;
    font-size: 13px;
}

.gf-mini-list span {
    color: var(--gf-text-soft);
}

.gf-mini-list strong {
    overflow-wrap: anywhere;
}

.gf-trust-card {
    margin-top: 12px;
    border: 1px solid #d7e7fa;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}

.gf-trust-card h3 {
    margin: 0 0 10px;
    font-family: var(--gf-font-display);
    font-size: 0.96rem;
    color: #17375d;
}

.gf-trust-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.gf-trust-list li {
    border: 1px solid #e2ecfa;
    border-radius: 11px;
    background: #f9fcff;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.gf-trust-list span {
    color: var(--gf-text-soft);
}

.gf-trust-list strong {
    color: #17375d;
    overflow-wrap: anywhere;
}

.gf-trust-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d5e5fa;
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.2;
}

.gf-trust-healthy {
    color: #0f6e43 !important;
    border-color: #bcecd2 !important;
    background: #e8fbf1 !important;
}

.gf-trust-unhealthy {
    color: #8a3f1f !important;
    border-color: #f2c39f !important;
    background: #fff1e7 !important;
}

.gf-trust-neutral {
    color: #225aa8 !important;
    border-color: #c9dcf9 !important;
    background: #edf5ff !important;
}

.gf-trust-note {
    margin: 9px 0 0;
    color: #4a6485;
    font-size: 12px;
    line-height: 1.55;
}

.gf-content-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 16px;
}

.gf-panel {
    border: 1px solid var(--gf-border);
    border-radius: 20px;
    background: var(--gf-panel);
    box-shadow: var(--gf-shadow-md);
    padding: 20px;
}

.gf-panel h2 {
    margin: 0 0 12px;
    font-family: var(--gf-font-display);
    font-size: 1.24rem;
}

.gf-panel-head {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gf-copy {
    color: #223e61;
    line-height: 1.8;
}

.gf-copy p {
    margin: 0 0 10px;
}

.gf-copy h3 {
    margin: 18px 0 8px;
    font-family: var(--gf-font-display);
    font-size: 1rem;
    color: #123152;
}

.gf-copy h3:first-child {
    margin-top: 0;
}

.gf-compare-panel {
    margin-top: 16px;
}

.gf-compare-builder {
    margin-top: 16px;
}

.gf-compare-builder-form {
    display: grid;
    gap: 10px;
}

.gf-compare-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gf-select-field {
    display: grid;
    gap: 6px;
}

.gf-select-field label {
    color: #3f5e80;
    font-size: 12px;
    font-weight: 700;
}

.gf-select-field select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #cfe1f8;
    border-radius: 12px;
    background: #fff;
    color: #1f3553;
    font-size: 13px;
    padding: 8px 11px;
}

.gf-select-field select:focus {
    outline: none;
    border-color: #7eb4f2;
    box-shadow: 0 0 0 3px rgba(24, 90, 186, 0.12);
}

.gf-compare-builder-actions {
    display: flex;
    gap: 8px;
}

.gf-compare-builder-note {
    margin-top: 10px;
    color: #436282;
    font-size: 13px;
}

.gf-compare-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gf-compare-app {
    border: 1px solid #d7e7fa;
    border-radius: 14px;
    background: linear-gradient(150deg, #ffffff 0%, #f4f9ff 100%);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.gf-compare-app-head {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--gf-text);
}

.gf-compare-app-head h3 {
    margin: 0;
    font-family: var(--gf-font-display);
    font-size: 1rem;
    line-height: 1.24;
}

.gf-compare-app-head p {
    margin: 4px 0 0;
    color: var(--gf-text-soft);
    font-size: 13px;
}

.gf-compare-table-wrap {
    margin-top: 14px;
    overflow-x: auto;
}

.gf-compare-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    border: 1px solid #d9e8fa;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.gf-compare-table tr + tr {
    border-top: 1px solid #e3effd;
}

.gf-compare-table th,
.gf-compare-table td {
    padding: 11px 12px;
    text-align: left;
    vertical-align: middle;
}

.gf-compare-table th {
    width: 30%;
    color: #204f90;
    font-size: 13px;
    font-weight: 800;
    background: #f2f8ff;
}

.gf-compare-table td {
    width: 35%;
    color: #223e61;
    font-size: 14px;
}

.gf-steps {
    margin: 0;
    padding-left: 20px;
    color: #223e61;
    display: grid;
    gap: 10px;
}

.gf-gallery-panel {
    margin-top: 16px;
}

.gf-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.gf-shot {
    display: block;
    border: 1px solid #d5e6f9;
    border-radius: 14px;
    overflow: hidden;
    background: #eef6ff;
    box-shadow: 0 8px 18px rgba(12, 41, 83, 0.1);
    aspect-ratio: 9 / 16;
}

.gf-shot img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

.gf-list-grid,
.gf-grid,
.gf-grid-compact {
    display: grid;
    gap: 14px;
}

.gf-list-grid {
    margin-top: 16px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.gf-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.gf-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gf-app-card,
.gf-card {
    border: 1px solid #d4e4f7;
    border-radius: 16px;
    background: linear-gradient(150deg, #ffffff 0%, #f5faff 100%);
    padding: 14px;
    box-shadow: 0 10px 24px rgba(11, 39, 80, 0.1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gf-app-card:hover,
.gf-card:hover {
    transform: translateY(-3px);
    border-color: #b7d3f7;
    box-shadow: 0 16px 28px rgba(11, 39, 80, 0.14);
}

.gf-card-head,
.gf-card-title {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: var(--gf-text);
    font-weight: 700;
}

.gf-card-head h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-family: var(--gf-font-display);
}

.gf-card-head p {
    margin: 5px 0 0;
    color: var(--gf-text-soft);
    font-size: 13px;
}

.gf-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid #cfe1f8;
    background: #fff;
}

.gf-meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gf-badge {
    border: 1px solid #c9dcf9;
    background: #edf5ff;
    color: #225aa8;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 700;
}

.gf-badge-score {
    font-family: var(--gf-font-display);
    letter-spacing: .01em;
}

.gf-badge-warn {
    color: #8a3f1f;
    background: #fff1e7;
    border-color: #f2c39f;
}

.gf-version {
    color: var(--gf-text-soft);
    font-size: 13px;
}

.gf-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gf-link-health-warning {
    margin: 0 0 10px;
    border: 1px solid #f4c9aa;
    border-radius: 12px;
    background: #fff6ef;
    color: #8a3f1f;
    font-size: 13px;
    line-height: 1.6;
    padding: 8px 10px;
}

.gf-hero-metric {
    border: 1px solid #d2e4f9;
    border-radius: 18px;
    background:
        linear-gradient(114deg, var(--gf-accent) 0%, var(--gf-accent-2) 72%, #4fe0a8 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gf-hero-metric span {
    font-size: 12px;
    opacity: 0.92;
}

.gf-hero-metric strong {
    margin-top: 8px;
    font-family: var(--gf-font-display);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1;
}

.gf-pagination {
    margin-top: 20px;
}

.gf-pagination ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gf-pagination a,
.gf-pagination span {
    text-decoration: none;
    min-width: 38px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #d3e2f8;
    background: #fff;
    color: #1f4f9c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.gf-pagination .current {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(96deg, var(--gf-accent), var(--gf-accent-2));
}

.gf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 14px;
    border: 1px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.gf-btn:hover {
    transform: translateY(-1px);
    opacity: 0.97;
}

.gf-btn-solid {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(98deg, var(--gf-accent), var(--gf-accent-2));
    box-shadow: 0 10px 22px rgba(14, 78, 171, 0.24);
}

.gf-btn-outline {
    color: #1d4f9d;
    background: #fff;
    border-color: #c4d9f7;
}

.gf-btn-lg {
    width: 100%;
    padding: 13px 18px;
    border-radius: 16px;
    font-size: 14px;
}

.gf-btn-sm {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.gf-btn-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    font-size: 14px;
    font-weight: 900;
}

[data-gf-reveal] {
    opacity: 1;
    transform: none;
}

[data-gf-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.gamefyre-cta {
    margin-top: 22px;
    border: 1px solid var(--gf-border);
    border-radius: 16px;
    background: linear-gradient(140deg, #f7fbff 0%, #edf8ff 100%);
    padding: 16px;
}

.gamefyre-cta h2 {
    margin: 0 0 10px;
    font-size: 1.15rem;
}

.gamefyre-cta ul {
    margin: 0 0 12px 18px;
    padding: 0;
}

.gf-site-footer {
    margin-top: 18px;
    border: 1px solid #cddff8;
    border-radius: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f3f9ff 52%, #effbff 100%);
    box-shadow: 0 16px 34px rgba(12, 44, 89, 0.14);
    padding: 22px;
}

.gf-site-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 14px;
}

.gf-site-footer-grid section h3 {
    margin: 0 0 10px;
    font-family: var(--gf-font-display);
    font-size: 1rem;
    color: #122f51;
}

.gf-site-footer-grid section p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.75;
    color: #395779;
}

.gf-site-footer-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.gf-site-footer-grid li a {
    text-decoration: none;
    color: #315476;
    font-size: 14px;
}

.gf-site-footer-grid li a:hover {
    color: #0d61c4;
}

.gf-site-brand-footer {
    margin-bottom: 8px;
}

.gf-site-footer-meta {
    margin-top: 14px;
    border-top: 1px solid #d7e6fa;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.gf-site-footer-meta p {
    margin: 0;
    color: #4f6785;
    font-size: 13px;
}

.gf-home-hero {
    position: relative;
    border: 1px solid var(--gf-border);
    border-radius: 30px;
    background:
        linear-gradient(132deg, #ffffff 0%, #f1f8ff 48%, #f4fffb 100%);
    box-shadow: var(--gf-shadow-lg);
    padding: 26px;
    display: grid;
    grid-template-columns: 1.58fr 1fr;
    gap: 16px;
}

.gf-home-copy h1 {
    margin: 0 0 12px;
    font-family: var(--gf-font-display);
    font-size: clamp(1.8rem, 3.1vw, 2.9rem);
    line-height: 1.03;
    letter-spacing: -0.025em;
    color: #0f2848;
}

.gf-home-copy p {
    margin: 0;
    color: #355373;
    line-height: 1.8;
}

.gf-home-copy .gf-actions {
    margin-top: 16px;
}

.gf-home-bullets {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.gf-home-bullets li {
    position: relative;
    border: 1px solid #d8e7f9;
    border-radius: 12px;
    background: #ffffff;
    color: #2c4869;
    font-size: 14px;
    padding: 9px 12px 9px 34px;
}

.gf-home-bullets li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--gf-accent), var(--gf-accent-2));
    box-shadow: 0 0 0 4px rgba(11, 117, 255, 0.12);
}

.gf-home-hero-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gf-home-metric-card {
    border: 1px solid #d5e6fa;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}

.gf-home-metric-card span {
    display: block;
    color: #59708b;
    font-size: 12px;
}

.gf-home-metric-card strong {
    margin-top: 4px;
    display: block;
    font-family: var(--gf-font-display);
    font-size: clamp(1.15rem, 2.1vw, 1.55rem);
    color: #102949;
}

.gf-home-metric-card em {
    margin-top: 4px;
    display: inline-block;
    font-style: normal;
    font-size: 11px;
    color: #1d5aa9;
    border: 1px solid #cce0fb;
    border-radius: 999px;
    padding: 2px 7px;
    background: #eef6ff;
}

.gf-home-features {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.gf-home-feature {
    border: 1px solid #d6e6f8;
    border-radius: 16px;
    background: linear-gradient(152deg, #ffffff 0%, #f6fbff 100%);
    box-shadow: 0 10px 24px rgba(12, 42, 86, 0.09);
    padding: 16px;
}

.gf-home-feature h2 {
    margin: 0 0 8px;
    font-family: var(--gf-font-display);
    font-size: 1.08rem;
    color: #112d4f;
}

.gf-home-feature p {
    margin: 0;
    font-size: 14px;
    color: #3d5b7c;
    line-height: 1.72;
}

.gf-home-process {
    margin-top: 16px;
}

.gf-home-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.gf-home-steps-grid article {
    border: 1px solid #d8e7f8;
    border-radius: 14px;
    background: #fff;
    padding: 13px;
}

.gf-home-steps-grid span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gf-font-display);
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(110deg, var(--gf-accent), var(--gf-accent-2));
}

.gf-home-steps-grid h3 {
    margin: 10px 0 6px;
    font-family: var(--gf-font-display);
    font-size: 1.03rem;
    color: #133052;
}

.gf-home-steps-grid p {
    margin: 0;
    font-size: 14px;
    color: #3e5d7f;
    line-height: 1.7;
}

.gf-home-cta-band {
    margin-top: 16px;
    border: 1px solid #cce2fb;
    border-radius: 24px;
    background:
        linear-gradient(114deg, rgba(11, 117, 255, 0.96) 0%, rgba(20, 195, 188, 0.93) 74%, rgba(79, 224, 168, 0.9) 100%);
    box-shadow: 0 18px 34px rgba(11, 58, 133, 0.24);
    color: #fff;
    padding: 24px;
}

.gf-home-cta-band h2 {
    margin: 0;
    color: #fff;
    font-family: var(--gf-font-display);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.gf-home-cta-band p {
    margin: 10px 0 0;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
}

.gf-home-cta-band .gf-actions {
    margin-top: 16px;
}

.gf-home-cta-band .gf-btn-outline {
    border-color: rgba(255, 255, 255, 0.52);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 1080px) {
    .gf-site-header {
        flex-wrap: wrap;
        position: relative;
        top: 0;
    }

    .gf-site-nav {
        justify-content: flex-start;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 3px;
    }

    .gf-site-nav::-webkit-scrollbar {
        height: 6px;
    }

    .gf-site-nav::-webkit-scrollbar-thumb {
        background: #d2e4fb;
        border-radius: 999px;
    }

    .gf-site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gf-home-hero {
        grid-template-columns: 1fr;
    }

    .gf-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gf-filter-actions {
        grid-column: span 3;
    }
}

@media (max-width: 1080px) {
    .gf-topbar {
        flex-wrap: wrap;
        position: relative;
        top: 0;
    }

    .gf-topnav {
        justify-content: flex-start;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 2px;
    }

    .gf-topnav::-webkit-scrollbar {
        height: 6px;
    }

    .gf-topnav::-webkit-scrollbar-thumb {
        background: #d0e2fa;
        border-radius: 999px;
    }
}

@media (max-width: 980px) {
    .gf-hero,
    .gf-content-grid,
    .gf-list-hero,
    .gf-home-features,
    .gf-home-steps-grid {
        grid-template-columns: 1fr;
    }

    .gf-hero-metric {
        align-items: flex-start;
    }

    .gf-compare-head {
        grid-template-columns: 1fr;
    }

    .gf-compare-builder-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .gf-shell {
        padding: 18px 0 44px;
    }

    .gf-wrap {
        width: min(1160px, 94%);
    }

    .gf-hero,
    .gf-list-hero,
    .gf-panel {
        border-radius: 18px;
        padding: 16px;
    }

    .gf-topbar {
        border-radius: 16px;
        padding: 10px;
    }

    .gf-site-header {
        border-radius: 16px;
        padding: 10px;
    }

    .gf-site-footer {
        border-radius: 18px;
        padding: 16px;
    }

    .gf-site-footer-grid {
        grid-template-columns: 1fr;
    }

    .gf-home-hero {
        border-radius: 18px;
        padding: 16px;
    }

    .gf-home-hero-cards {
        grid-template-columns: 1fr;
    }

    .gf-home-bullets li {
        padding-right: 11px;
    }

    .gf-home-cta-band {
        border-radius: 18px;
        padding: 18px;
    }

    .gf-brand-copy strong {
        font-size: 0.94rem;
    }

    .gf-brand-copy em {
        font-size: 0.72rem;
    }

    .gf-stat-grid {
        grid-template-columns: 1fr;
    }

    .gf-compare-table {
        min-width: 520px;
    }

    .gf-filter-form {
        grid-template-columns: 1fr;
    }

    .gf-filter-actions {
        grid-column: auto;
    }
}