/* ============================================================
   THEME.CSS v3.0 - 主题主样式
   ============================================================
   匹配 Section 模板的 class 名称
   - CSS Variables 设计令牌
   - 所有 Section 主样式 (布局/背景/排版)
   ============================================================ */

/* ============================================
   1. CSS Variables
   ============================================ */
:root {
    /* 品牌色 */
    --color-primary: #3b82f6;
    --color-primary-dark: #1e3a8a;
    --color-primary-darker: #1e293b;
    --color-accent: #fbbf24;
    --color-accent-dark: #f59e0b;
    --color-success: #16a34a;
    --color-danger: #dc2626;

    /* 中性色 */
    --color-text: #334155;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-bg: #ffffff;
    --color-bg-soft: #f8fafc;
    --color-bg-muted: #f1f5f9;
    --color-border: #e5e7eb;
    --color-border-soft: #f1f5f9;

    /* 渐变 (Section 背景) */
    --gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    --gradient-deep: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    --gradient-dept: linear-gradient(135deg, #312e81 0%, #4f46e5 100%);
    --gradient-security: linear-gradient(135deg, #1e293b, #0f172a);
    --gradient-mission: linear-gradient(135deg, #1e3a8a, #312e81);
    --gradient-trust: linear-gradient(135deg, #0f172a, #1e3a8a);
    --gradient-cta: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    --gradient-accent: linear-gradient(135deg, #fbbf24, #f59e0b);
    --gradient-icon: linear-gradient(135deg, #3b82f6, #1e3a8a);

    /* 玻璃效果 */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-blur: blur(10px);

    /* 阴影 */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 12px 30px rgba(59, 130, 246, 0.15);
    --shadow-accent: 0 10px 25px rgba(251, 191, 36, 0.15);

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 30px;

    /* 间距 */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   2. Base
   ============================================ */
:where(body) {
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

:where(img) {
    max-width: 100%;
    height: auto;
}

/* ============================================
   3. 通用工具
   ============================================ */
.bg-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: var(--gradient-icon);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ============================================
   4. Header (HeaderSection)
   ============================================ */
.header {
    background: #fff;
    z-index: 1030;
}

.header .navbar-brand img {
    transition: transform var(--transition-fast);
}

.header .navbar-brand:hover img {
    transform: scale(1.05);
}

.header .nav-link {
    font-weight: 500;
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.header .nav-link:hover {
    color: var(--color-primary);
}

/* ============================================
   5. Hero (HeroSection)
   ============================================ */
.hero-section {
    min-height: 480px;
    background: var(--gradient-hero);
    color: #fff;
    padding-block: var(--space-2xl);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 0;
    pointer-events: none;
}

.hero-section > .container {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.hero-section h2 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    opacity: 0.9;
    margin-bottom: var(--space-md);

    font-weight: 500;
}

.hero-section .lead {
    font-size: 1.1rem;
    max-width: 700px;
    margin-inline: auto;
    opacity: 0.95;
}

.hero-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-block-start: var(--space-md);
}

/* ============================================
   6. Notice Bar (NoticeBarSection)
   ============================================ */
.notice-bar {
    animation: noticeSlideIn 0.5s ease-out;
}

.notice-bar a {
    transition: opacity var(--transition-fast);
}

.notice-bar a:hover {
    opacity: 0.85;
}

@keyframes noticeSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ============================================
   7. Breadcrumb (BreadcrumbSection)
   ============================================ */
.breadcrumb-nav {
    background: var(--color-bg-muted);
}

.breadcrumb-nav .breadcrumb-item a {
    transition: color var(--transition-fast);
}

.breadcrumb-nav .breadcrumb-item a:hover {
    color: var(--color-primary-dark) !important;
}

/* ============================================
   8. Why Us (WhyUsSection)
   ============================================ */
.why-us-section {
    background: var(--color-bg-soft);
}

.whyus-card {
    background: #fff;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    transition: all var(--transition-base);
    height: 100%;
}

.whyus-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   9. About (AboutSection)
   ============================================ */
.about-section {
    background: var(--gradient-deep);
    color: #fff;
}

.about-img-wrap {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.about-img-wrap img {
    transition: transform var(--transition-slow);
}

.about-img-wrap:hover img {
    transform: scale(1.05);
}

.about-card {
    transition: all var(--transition-base);
}

.about-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================
   10. Departments (DepartmentsSection)
   ============================================ */
.departments-section {
    background: var(--gradient-dept);
    color: #fff;
}

.departments-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.departments-subtitle {
    font-size: 1.05rem;
    max-width: 800px;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.85);
}

.departments-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
}

@media (min-width: 768px) {
    .departments-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.d-item {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.d-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.d-num span {
    color: #fff;
    font-size: 1.1rem;
    margin-inline-start: var(--space-xs);
}

.d-image {
    margin-bottom: var(--space-sm);
}

.d-image img {
    width: 100%;
    border-radius: var(--radius-md);
}

/* ============================================
   11. Security Network (SecuritySection)
   ============================================ */
.security-section {
    background: var(--gradient-security);
    color: #fff;
}

.security-network {
    position: relative;
    max-width: 800px;
    margin: var(--space-xl) auto;
    min-height: 400px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .security-network {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
    }

    .core-node        { grid-column: 2; grid-row: 2; }
    .node-top-left    { grid-column: 1; grid-row: 1; }
    .node-top-right   { grid-column: 3; grid-row: 1; }
    .node-bottom-left { grid-column: 1; grid-row: 3; }
    .node-bottom-right{ grid-column: 3; grid-row: 3; }
}

.core-node {
    background: var(--gradient-accent);
    border-radius: 50%;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    color: var(--color-primary-darker);
    font-weight: 700;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}

.node {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    text-align: center;
    color: #fff;
    transition: all var(--transition-base);
}

.node:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.12);
}

.node-title {
    font-weight: 600;
    color: var(--color-accent);
    margin-block: var(--space-xs);
}

@media (max-width: 767.98px) {
    .core-node { width: 120px; height: 120px; }
}

/* ============================================
   12. Honor (HonorSection)
   ============================================ */
.honor-section {
    background: var(--color-bg-soft);
}

.honor-row {
    padding-block: var(--space-sm);
}

.honor-text-card {
    padding: var(--space-md);
    background: #fff;
    border-radius: var(--radius-md);
    border-inline-start: 4px solid var(--color-primary);
    transition: all var(--transition-base);
}

.honor-text-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   13. Mission (MissionSection)
   ============================================ */
.mission-section {
    background: var(--gradient-mission);
    padding-block: var(--space-2xl);
    color: #fff;
}

.mission-list li {
    margin-bottom: var(--space-sm);
    color: #e2e8f0;
}

/* ============================================
   14. Stats (StatsSection)
   ============================================ */
.stats-section {
    background: #fff;
}

.stats-card {
    transition: all var(--transition-base);
    background: var(--color-bg-soft);
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
}

.stats-card h3 {
    font-variant-numeric: tabular-nums;
    color: var(--color-primary-darker);
}

/* ============================================
   15. News (NewsSection)
   ============================================ */
.news-section {
    background: var(--color-bg-soft);
}

.news-card {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.news-img-wrap {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.news-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.news-card:hover .news-img-wrap img {
    transform: scale(1.08);
}

/* ============================================
   16. Matches (MatchesSection)
   ============================================ */
.matches-section {
    background: var(--color-bg-soft);
}

.match-card {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.match-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.match-card .team {
    min-width: 0;
}

.match-card .team .small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-card .score {
    font-variant-numeric: tabular-nums;
    color: var(--color-primary-darker);
}

/* ============================================
   17. Trust (TrustSection)
   ============================================ */
.trust-section {
    background: var(--gradient-trust);
    color: #fff;
}

.trust-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-sm);
    height: 100%;
    transition: all var(--transition-base);
}

.trust-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
}

/* ============================================
   18. Partners (PartnersSection)
   ============================================ */
.partners-section {
    background: var(--color-bg-soft);
}

.partner-card {
    transition: all var(--transition-base);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   19. Testimonials (TestimonialsSection)
   ============================================ */
.testimonials-section {
    background: #fff;
}

.testimonial-card {
    transition: all var(--transition-base);
    border-block-start: 4px solid transparent;
}

.testimonial-card:hover {
    border-block-start-color: var(--color-accent);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   20. C
TA Banner (CtaBannerSection)
   ============================================ */
.cta-banner-section {
    background: var(--gradient-cta);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cta-banner-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.cta-banner-section > .container {
    position: relative;
    z-index: 1;
}

.cta-banner-section .btn-warning {
    box-shadow: var(--shadow-accent);
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   21. Footer (FooterSection)
   ============================================ */
.footer {
    font-size: 0.9rem;
    color: #cbd5e1;
}

.footer a {
    transition: color var(--transition-fast);
}

.footer a:hover {
    color: var(--color-accent) !important;
}

.footer-copyright {
    font-size: 0.85rem;
}

/* Beian */
.footer-beian {
    font-size: 0.8rem;
    line-height: 1.8;
    opacity: 0.85;
}

.footer-beian a:hover {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
}

.footer-beian img {
    margin-inline-end: 4px;
    transition: transform var(--transition-fast);
}

.footer-beian a:hover img {
    transform: scale(1.2);
}

.footer-beian li {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .footer-beian ul {
        flex-direction: column;
        gap: var(--space-xs) !important;
    }

    .footer-beian li {
        white-space: normal;
        text-align: center;
    }
}

/* ============================================
   22. Form (Login/Signup/Contact)
   ============================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}

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

.btn-primary:hover,
.btn-primary:focus {
    background-color: #2563eb;
    border-color: #2563eb;
}

.input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
}

/* ============================================
   23. Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Grid Layout Defaults (CSS-Variant-Ready)
   CSSVariantEngine sẽ override các rules này
   ============================================================ */

/* 新闻网格 (默认 3 列) */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* 功能特性列表 (默认 3 列) */
.feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* 用户评价 (默认 3 列) */
.testimonial-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* 合作伙伴 (默认 4 列) */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: center;
}

/* 数据统计 (默认 4 列) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}

/* FAQ 列表 (默认单列居中) */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

/* Hero 内容 (默认居中) */
.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero 分割布局 (左文右图) */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.hero-split-text { }
.hero-split-img { text-align: center; }

/* CTA 内容 (默认居中) */
.cta-inner {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* 作者团队 (默认 4 列) */
.authors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* 联系渠道 (默认 3 列) */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* 文章列表 (默认 2 列) */
.post-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* 相关文章 (默认 3 列) */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* 赛事列表 (默认 3 列) */
.matches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* 步 骤网格 (默认 4 列) */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* 二维码网格 (默认 3 列) */
.qr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    justify-items: center;
}

/* 荣誉列表 (默认 2 列交替) */
.honor-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.honor-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.honor-row-reverse {
    direction: rtl;
}
.honor-row-reverse > * {
    direction: ltr;
}

/* ============================================================
   Responsive Defaults
   ============================================================ */
@media (max-width: 1024px) {
    .news-grid,
    .feature-list,
    .channels-grid,
    .testimonial-list { grid-template-columns: repeat(2, 1fr); }

    .partner-grid,
    .stats-grid,
    .authors-grid { grid-template-columns: repeat(2, 1fr); }

    .matches-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }

    .hero-split { grid-template-columns: 1fr; }
    .honor-row { grid-template-columns: 1fr; }
    .honor-row-reverse { direction: ltr; }
}

@media (max-width: 640px) {
    .news-grid,
    .feature-list,
    .testimonial-list,
    .channels-grid,
    .post-list-grid,
    .related-grid,
    .authors-grid,
    .matches-grid { grid-template-columns: 1fr; }

    .partner-grid,
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .steps-grid { grid-template-columns: 1fr; }
    .qr-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }

    .faq-list { max-width: 100%; }
}
/* ================================================================
   KAIYUN V4 — dark real-time sports hub presentation layer
   ================================================================ */
:root {
  --ky-bg: #061117;
  --ky-surface: #0b1d25;
  --ky-surface-2: #102a34;
  --ky-line: rgba(98,255,218,.22);
  --ky-accent: #57f5c5;
  --ky-accent-2: #26bfe8;
  --ky-text: #f4fbfa;
  --ky-muted: #9bb2b7;
  --ky-danger: #ff6176;
  --ky-radius: 18px;
  --ky-shadow: 0 24px 70px rgba(0,0,0,.34);
  --color-primary: #57f5c5;
  --color-secondary: #26bfe8;
  --color-text: #f4fbfa;
  --color-text-muted: #9bb2b7;
  --color-bg: #061117;
  --color-bg-alt: #0b1d25;
  --color-border: rgba(98,255,218,.22);
}

html { scroll-behavior: smooth; background: var(--ky-bg); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ky-text) !important;
  background:
    radial-gradient(circle at 80% 8%, rgba(38,191,232,.14), transparent 30rem),
    radial-gradient(circle at 10% 24%, rgba(87,245,197,.09), transparent 28rem),
    var(--ky-bg) !important;
  font-family: Inter, "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
}

a { color: inherit; }
p, .text-muted { color: var(--ky-muted) !important; }
img { max-width: 100%; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.header, .navbar, header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--ky-line) !important;
  background: #061117 !important;
  backdrop-filter: blur(18px);
}
.navbar-brand {
  color: var(--ky-text) !important;
  font-weight: 900;
  letter-spacing: -.04em;
}
.navbar-brand::before {
  content: "K";
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  border: 1px solid rgba(87,245,197,.55);
  border-radius: 12px;
  color: #04100d;
  background: linear-gradient(135deg,var(--ky-accent),var(--ky-accent-2));
  box-shadow: 0 0 30px rgba(87,245,197,.25);
}
.nav-link {
  color: #c8d8da !important;
  font-weight: 650;
  transition: color .2s ease, background .2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--ky-accent) !important; }

.notice-bar, .alert-info {
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--ky-line) !important;
  color: #b7fff0 !important;
  background: linear-gradient(90deg,rgba(87,245,197,.1),rgba(38,191,232,.08)) !important;
}

section { position: relative; padding-block: clamp(64px,8vw,112px); }
.hero-section {
  min-height: 720px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg,rgba(6,17,23,.98) 0%,rgba(6,17,23,.84) 46%,rgba(6,17,23,.35) 100%),
    radial-gradient(circle at 78% 35%,rgba(38,191,232,.24),transparent 34rem) !important;
}
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(87,245,197,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(87,245,197,.035) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom,black,transparent 88%);
}
.hero-content, .hero-split-text { position: relative; z-index: 2; max-width: 680px; }
.hero-content::before, .hero-split-text::before {
  content: "AI REAL-TIME SPORTS HUB";
  display: block;
  margin-bottom: 18px;
  color: var(--ky-accent);
  font: 800 .78rem/1.2 system-ui;
  letter-spacing: .24em;
}
.hero-title {
  max-width: 12ch;
  margin-bottom: 22px;
  color: var(--ky-text) !important;
  font-size: clamp(2.7rem,6vw,5.8rem) !important;
  font-weight: 950 !important;
  line-height: .98 !important;
  letter-spacing: -.065em;
}
.hero-subtitle { max-width: 60ch; font-size: clamp(1rem,1.6vw,1.18rem); line-height: 1.8; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn, .btn-primary, .cta-inner a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  padding-inline: 24px !important;
  font-weight: 800 !important;
}
.btn-primary {
  border-color: transparent !important;
  color: #03100d !important;
  background: linear-gradient(135deg,var(--ky-accent),#2ce2a8) !important;
  box-shadow: 0 12px 34px rgba(87,245,197,.18);
}
.btn-outline-primary {
  border-color: rgba(87,245,197,.5) !important;
  color: var(--ky-accent) !important;
  background: rgba(7,28,32,.56) !important;
}
.hero-split-image img, .hero-section img {
  border: 1px solid var(--ky-line);
  border-radius: 28px;
  box-shadow: var(--ky-shadow);
  object-fit: cover;
}

.stats-section, .honor-section { padding-block: 26px; border-block: 1px solid var(--ky-line); background: rgba(8,28,35,.78) !important; }
.stats-grid, .honor-list, .honor-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; }
.stat-card, .honor-text-card {
  border: 0 !important;
  border-right: 1px solid var(--ky-line) !important;
  border-radius: 0 !important;
  color: var(--ky-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.stat-card:last-child, .honor-text-card:last-child { border-right: 0 !important; }
.stat-number, .honor-row strong { color: var(--ky-accent) !important; font-size: clamp(1.7rem,4vw,3rem); font-weight: 900; }

.section-title, .departments-title, .matches-section h2, .news-section h2, .mission-section h2 {
  color: var(--ky-text) !important;
  font-size: clamp(2rem,4vw,3.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.045em;
}
.section-subtitle { color: var(--ky-muted) !important; }
.departments-grid, .feature-list, .posts-grid, .news-grid, .partners-grid, .authors-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.card, .about-card, .author-card, .partner-card, .match-card, .news-card, .node,
.departments-grid > *, .feature-list > *, .posts-grid > *, .news-grid > * {
  overflow: hidden;
  border: 1px solid var(--ky-line) !important;
  border-radius: var(--ky-radius) !important;
  color: var(--ky-text) !important;
  background: linear-gradient(145deg,rgba(16,42,52,.92),rgba(8,25,32,.92)) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.18);
  transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover, .about-card:hover, .match-card:hover, .news-card:hover,
.departments-grid > *:hover, .posts-grid > *:hover {
  transform: translateY(-6px);
  border-color: rgba(87,245,197,.55) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}
.card img, .news-card img, .posts-grid img, .departments-grid img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.badge, .faq-num, .icon-circle { color: #04100d !important; background: var(--ky-accent) !important; }

.matches-section { background: linear-gradient(180deg,rgba(11,29,37,.68),rgba(6,17,23,.2)); }
.matches-grid { display: grid; gap: 12px; }
.match-card {
  display: grid !important;
  grid-template-columns: .8fr 1.3fr .8fr 1.3fr 1fr;
  align-items: center;
  min-height: 82px;
  padding: 18px 22px;
}
.match-card strong { color: var(--ky-accent); font-size: 1.25rem; }

.about-section, .mission-section, .cta-banner-section { overflow: hidden; }
.about-card, .mission-list, .cta-inner {
  border: 1px solid var(--ky-line) !important;
  border-radius: 26px !important;
  padding: clamp(28px,5vw,64px) !important;
  background:
    radial-gradient(circle at 90% 10%,rgba(38,191,232,.18),transparent 20rem),
    linear-gradient(135deg,rgba(16,42,52,.96),rgba(7,23,29,.96)) !important;
}
.cta-inner { text-align: left !important; box-shadow: var(--ky-shadow); }

.footer, footer {
  padding-block: 64px 24px;
  border-top: 1px solid var(--ky-line) !important;
  color: var(--ky-muted) !important;
  background: #040d11 !important;
}
.footer h3, .footer h4, footer h3, footer h4 { color: var(--ky-text) !important; }
.footer a:hover, footer a:hover { color: var(--ky-accent) !important; }
.footer-copy-light { border-top: 1px solid var(--ky-line); }

@media (max-width:1024px) {
  .departments-grid, .feature-list, .posts-grid, .news-grid, .partners-grid, .authors-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-section { min-height: 640px; }
}

@media (max-width:720px) {
  .container { width: min(100% - 28px,1180px); }
  section { padding-block: 58px; }
  .hero-section { min-height: auto; padding-block: 76px 64px; }
  .hero-title { font-size: clamp(2.55rem,14vw,4rem) !important; }
  .hero-buttons, .hero-buttons .btn { width: 100%; }
  .btn { min-height: 48px; }
  .departments-grid, .feature-list, .posts-grid, .news-grid, .partners-grid, .authors-grid,
  .stats-grid, .honor-list, .honor-row { grid-template-columns: 1fr; }
  .stat-card, .honor-text-card { border-right: 0 !important; border-bottom: 1px solid var(--ky-line) !important; }
  .matches-grid { overflow-x: auto; padding-bottom: 8px; }
  .match-card { min-width: 680px; }
  .navbar-collapse { padding: 18px; border: 1px solid var(--ky-line); border-radius: 16px; background: var(--ky-surface); }
}

/* --ky-final-lock: loaded before generated variant.css, so critical tokens use !important */
:root {
  --color-primary: #57f5c5 !important;
  --color-primary-dark: #20bd93 !important;
  --color-accent: #26bfe8 !important;
  --color-surface: #0b1d25 !important;
  --color-text: #f4fbfa !important;
  --color-border: rgba(98,255,218,.22) !important;
  --space-section: 5rem !important;
  --radius-lg: 18px !important;
  --radius-xl: 26px !important;
}

body, body > main { color:#f4fbfa !important; background:#061117 !important; }
body section { color:#f4fbfa; background-color:#061117 !important; }
body section:nth-of-type(even):not(.hero-section) { background-color:#091a21 !important; }
body .text-dark, body .text-body { color:#f4fbfa !important; }
body .bg-white, body .bg-light { background-color:#091a21 !important; }

#header-main {
  min-height:86px;
  border-bottom:1px solid rgba(98,255,218,.22) !important;
  background:rgba(5,16,22,.94) !important;
  box-shadow:none !important;
  backdrop-filter:blur(18px);
}
#header-main > .container {
  min-height:86px;
  display:grid !important;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:28px;
}
#header-main .d-none.d-lg-block {
  display:block !important;
  padding:0 !important;
  border:0 !important;
  text-align:left !important;
}
#header-main .d-none.d-lg-block img { max-width:170px; max-height:50px !important; object-fit:contain; }
#header-main nav.d-none.d-lg-flex { display:flex !important; justify-content:flex-end !important; gap:8px !important; }
#header-main nav .btn {
  min-height:42px;
  border:1px solid transparent !important;
  color:#cfe0e2 !important;
  background:transparent !important;
}
#header-main nav .btn:hover { border-color:rgba(87,245,197,.3) !important; color:#57f5c5 !important; background:rgba(87,245,197,.08) !important; }
#header-main nav .btn-primary { color:#03110d !important; background:linear-gradient(135deg,#57f5c5,#26bfe8) !important; }

.hero-section {
  min-height:680px !important;
  display:flex !important;
  align-items:center;
  isolation:isolate;
  border-bottom:1px solid rgba(98,255,218,.22) !important;
  background-position:center !important;
  background-size:cover !important;
}
.hero-section::before {
  content:"AI REAL-TIME SPORTS HUB";
  position:absolute;
  z-index:3;
  left:max(24px,calc((100vw - 1180px)/2));
  top:118px;
  color:#57f5c5;
  font:800 12px/1.2 system-ui;
  letter-spacing:.24em;
}
.hero-section > .position-absolute {
  background:linear-gradient(90deg,rgba(3,12,17,.98) 0%,rgba(3,12,17,.88) 45%,rgba(3,12,17,.28) 100%) !important;
}
.hero-section .container { width:min(1180px,calc(100% - 40px)); }
.hero-section .container > div:not(.ky-score-board) {
  max-width:56% !important;
  padding-block:100px 70px !important;
  text-align:left !important;
}
.hero-section h1 {
  max-width:12ch;
  margin-bottom:22px !important;
  color:#f4fbfa !important;
  font-size:clamp(3rem,5.5vw,5.7rem) !important;
  font-weight:950 !important;
  line-height:.98 !important;
  letter-spacing:-.065em;
}
.hero-section p { max-width:58ch; color:#a9bdc1 !important; font-size:1.05rem; line-height:1.8; }
.hero-section .btn-warning { border:0 !important; color:#03110d !important; background:linear-gradient(135deg,#57f5c5,#26bfe8) !important; }

.ky-score-board {
  position:absolute;
  z-index:4;
  right:0;
  bottom:62px;
  width:min(420px,40vw);
  overflow:hidden;
  border:1px solid rgba(87,245,197,.28);
  border-radius:22px;
  background:rgba(7,25,32,.92);
  box-shadow:0 28px 80px rgba(0,0,0,.48);
  backdrop-filter:blur(18px);
}
.ky-score-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(87,245,197,.17); }
.ky-score-head strong { font-size:.78rem; letter-spacing:.18em; }
.ky-live { color:#57f5c5; font-size:.75rem; font-weight:800; }
.ky-game { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid rgba(87,245,197,.11); }
.ky-game:last-child { border-bottom:0; }
.ky-team { color:#dbe8e8; font-size:.88rem; }
.ky-team:last-child { text-align:right; }
.ky-score { min-width:64px; color:#57f5c5; font-size:1.15rem; font-weight:900; text-align:center; }
.ky-game small { grid-column:1/-1; margin-top:-7px; color:#789297; font-size:.7rem; text-align:center; }

.stats-section { padding-block:28px !important; border-color:rgba(98,255,218,.22) !important; background:#0a1d24 !important; }
.stats-section .container > div { display:grid !important; grid-template-columns:repeat(4,1fr); gap:0 !important; }
.stats-section .container > div > div { padding:8px 28px; border-right:1px solid rgba(98,255,218,.18); }
.stats-section .container > div > div:last-child { border-right:0; }
.stats-section .text-primary { color:#57f5c5 !important; font-size:clamp(1.8rem,3vw,2.8rem) !important; }

body section h2 { color:#f4fbfa !important; font-size:clamp(2.1rem,4vw,3.6rem) !important; font-weight:900 !important; letter-spacing:-.045em; }
body section h3, body section h4, body section h5, body section h6 { color:#edf9f7 !important; }
body section p, body section .text-muted { color:#99afb4 !important; }
body .card, body [class*="card"], body .accordion-item {
  border-color:rgba(98,255,218,.2) !important;
  color:#f4fbfa !important;
  background:linear-gradient(145deg,rgba(16,42,52,.96),rgba(7,23,29,.96)) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.22) !important;
}
body footer { border-top:1px solid rgba(98,255,218,.22) !important; background:#030c10 !important; }

@media (max-width:991px) {
  #header-main > .container { display:block !important; min-height:auto; }
  #header-main .d-none.d-lg-block, #header-main nav.d-none.d-lg-flex { display:none !important; }
  .hero-section { min-height:auto !important; padding-block:100px 48px !important; }
  .hero-section::before { top:76px; }
  .hero-section .container > div:not(.ky-score-board) { max-width:100% !important; padding-block:40px 28px !important; }
  .ky-score-board { position:relative; right:auto; bottom:auto; width:100%; margin-top:12px; }
}
@media (max-width:640px) {
  .hero-section h1 { font-size:clamp(2.7rem,14vw,4rem) !important; }
  .stats-section .container > div { grid-template-columns:repeat(2,1fr); }
  .stats-section .container > div > div:nth-child(2) { border-right:0; }
  .stats-section .container > div > div { border-bottom:1px solid rgba(98,255,218,.16); }
}

/* ky-match-card-fix: restore the nested Bootstrap card layout for schedule cards */
.matches-section .row { align-items:stretch; }
.matches-section .row > [class*="col-"] { min-width:0; }
body .matches-section .match-card {
  display:block !important;
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
  padding:20px !important;
  overflow:hidden !important;
}
.matches-section .match-card > .d-flex:first-child {
  min-width:0;
  gap:8px;
}
.matches-section .match-card .badge {
  max-width:72%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.matches-section .match-card .team {
  min-width:0;
  overflow:hidden;
}
.matches-section .match-card .team .small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.matches-section .match-card .score {
  flex:0 0 auto;
  min-width:86px;
  padding-inline:10px !important;
}
.matches-section .match-card .score small {
  display:block;
  white-space:nowrap;
}

@media (max-width:640px) {
  body .matches-section .match-card { padding:16px !important; }
  .matches-section .match-card .score { min-width:74px; padding-inline:6px !important; }
}

/* kaiyun_v4 isolated component system */
:root{--ky4-bg:#06161d;--ky4-panel:#0a242c;--ky4-line:#17655f;--ky4-cyan:#40e0c1;--ky4-blue:#34bee6;--ky4-text:#eefcfb;--ky4-muted:#9cb8bc}.ky4-shell{width:min(1180px,calc(100% - 40px));margin:auto}.ky4-header{position:relative;z-index:20;background:rgba(3,16,22,.96);border-bottom:1px solid rgba(64,224,193,.32)}.ky4-header__inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}.ky4-brand{display:flex;align-items:center;gap:10px;color:var(--ky4-text);text-decoration:none}.ky4-brand img{width:36px;height:36px;object-fit:contain}.ky4-brand__mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--ky4-cyan),var(--ky4-blue));color:#032027;font-weight:900}.ky4-nav{display:flex;align-items:center;gap:30px}.ky4-nav a{color:#d8e9eb;text-decoration:none;font-size:15px}.ky4-nav a:hover{color:var(--ky4-cyan)}.ky4-account{padding:12px 22px;border-radius:99px;background:linear-gradient(90deg,var(--ky4-cyan),var(--ky4-blue));color:#032027!important;font-weight:800}.ky4-menu-toggle{display:none;background:none;border:0;color:white;font-size:24px}.ky4-hero{overflow:hidden;background:radial-gradient(circle at 70% 36%,rgba(38,197,188,.2),transparent 28%),linear-gradient(135deg,#06161d,#082730);color:var(--ky4-text)}.ky4-hero__grid{min-height:610px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px}.ky4-kicker{color:var(--ky4-cyan);font-size:13px;font-weight:800;letter-spacing:.18em}.ky4-hero h1{max-width:700px;margin:18px 0;font-size:clamp(42px,5vw,72px);line-height:1.08}.ky4-hero p{max-width:620px;color:var(--ky4-muted);font-size:18px;line-height:1.8}.ky4-hero__actions{display:flex;gap:14px;margin:30px 0}.ky4-btn{display:inline-flex;padding:14px 24px;border:1px solid rgba(64,224,193,.45);border-radius:7px;color:white;text-decoration:none}.ky4-btn--primary{background:var(--ky4-cyan);color:#032027;font-weight:800}.ky4-trust{display:flex;gap:24px;color:#80aaa9;font-size:13px}.ky4-hero__visual{position:relative;min-height:450px;border:1px solid rgba(64,224,193,.2);border-radius:50%;background:radial-gradient(circle,rgba(55,222,197,.18),rgba(4,22,29,.2) 60%,transparent 61%)}.ky4-orbit{position:absolute;inset:12%;border:1px dashed rgba(64,224,193,.42);border-radius:50%}.ky4-ball{position:absolute;inset:0;display:grid;place-items:center;font-size:150px;filter:drop-shadow(0 18px 30px #000)}.ky4-live-chip{position:absolute;right:0;bottom:18%;display:flex;gap:12px;align-items:center;padding:14px 18px;background:#0a242c;border:1px solid var(--ky4-line);border-radius:8px}.ky4-live-chip b{color:var(--ky4-cyan)}.ky4-stats{background:#081d25;color:white;border-block:1px solid rgba(64,224,193,.18)}.ky4-stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}.ky4-stats article{padding:30px;text-align:center;border-right:1px solid rgba(64,224,193,.14)}.ky4-stats strong{display:block;color:var(--ky4-cyan);font-size:30px}.ky4-stats span{color:var(--ky4-muted)}.ky4-match-center{padding:90px 0;background:var(--ky4-bg);color:var(--ky4-text)}.ky4-section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.ky4-section-head h2{margin:10px 0 0;font-size:38px}.ky4-section-head p{color:var(--ky4-muted)}.ky4-scoreboard{border:1px solid var(--ky4-line);background:#071f28;margin-bottom:28px}.ky4-scoreboard__title,.ky4-score-row{display:grid;align-items:center}.ky4-scoreboard__title{grid-template-columns:1fr auto;padding:17px 22px;border-bottom:1px solid rgba(64,224,193,.18)}.ky4-scoreboard__title span{color:var(--ky4-cyan)}.ky4-score-row{grid-template-columns:1.1fr 1fr auto 1fr .7fr;gap:16px;padding:17px 22px;border-bottom:1px solid rgba(64,224,193,.12)}.ky4-score-row>b{font-size:24px;color:var(--ky4-cyan)}.ky4-score-row em,.ky4-score-row>span{color:var(--ky4-muted);font-style:normal;font-size:13px}.ky4-match-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.ky4-match-card{min-width:0;padding:22px;background:var(--ky4-panel);border:1px solid rgba(64,224,193,.25);border-radius:12px;overflow:hidden}.ky4-match-card>div{display:flex;justify-content:space-between;gap:10px;color:var(--ky4-muted);font-size:12px}.ky4-match-card h3{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin:28px 0 18px;font-size:16px}.ky4-match-card h3 i{color:var(--ky4-cyan);font-style:normal}.ky4-match-card p{margin:0;color:var(--ky4-muted);font-size:13px}.ky4-footer{padding:60px 0 24px;background:#031117;color:var(--ky4-muted);border-top:1px solid rgba(64,224,193,.2)}.ky4-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px}.ky4-footer__grid>div{display:flex;flex-direction:column;gap:10px}.ky4-footer a{color:var(--ky4-muted);text-decoration:none}.ky4-footer b,.ky4-footer__brand{color:white}.ky4-footer__bottom{display:flex;justify-content:space-between;margin-top:45px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}
@media(max-width:800px){.ky4-shell{width:min(100% - 24px,1180px)}.ky4-header__inner{min-height:64px}.ky4-menu-toggle{display:block}.ky4-nav{display:none}.ky4-hero__grid{min-height:auto;grid-template-columns:1fr;padding:70px 0}.ky4-hero__visual{display:none}.ky4-hero h1{font-size:42px}.ky4-trust{flex-wrap:wrap}.ky4-stats__grid{grid-template-columns:repeat(2,1fr)}.ky4-stats article:nth-child(2){border-right:0}.ky4-section-head{align-items:start;flex-direction:column}.ky4-score-row{grid-template-columns:1fr auto 1fr}.ky4-score-row>span,.ky4-score-row>em{grid-column:1/-1}.ky4-match-grid{grid-template-columns:1fr}.ky4-footer__grid{grid-template-columns:1fr;gap:30px}.ky4-footer__bottom{flex-direction:column;gap:8px}}
/* kaiyun_v4 reference layout */
body{background:#eef5ff;color:#111a34}.notice-bar,.why-us-section,.about-section,.honor-section,.departments-section,.trust-section,.faq-section,.mission-section,.testimonials-section,.cta-banner-section{display:none!important}.ky4-shell{width:min(1180px,calc(100% - 40px))}.ky4-header{background:#0b1433;border:0}.ky4-header__inner{min-height:74px}.ky4-brand__mark{background:#3866f5;color:#fff}.ky4-nav a{color:#dce4ff}.ky4-account{background:#ffd23f;color:#18224a!important}.ky4-hero{background:radial-gradient(circle at 80% 30%,#254fbd 0,transparent 34%),linear-gradient(125deg,#0b1433 0,#101f55 52%,#163381 100%);padding-bottom:78px}.ky4-hero__grid{min-height:610px;grid-template-columns:.9fr 1.1fr;gap:54px}.ky4-hero h1{font-size:clamp(48px,5.2vw,78px);margin:16px 0}.ky4-hero p{color:#c9d6ff}.ky4-kicker{color:#8ba8ff}.ky4-btn{border-color:#667ac3}.ky4-btn--primary{background:#ffd23f;color:#17214a}.ky4-trust{color:#bdc9ef}.ky4-hero__visual{min-height:430px;border:0;border-radius:28px;overflow:hidden;background:#132452;box-shadow:0 30px 70px rgba(0,0,0,.35)}.ky4-hero__visual>img{width:100%;height:430px;display:block;object-fit:cover}.ky4-live-chip{right:20px;bottom:20px;background:rgba(12,24,57,.9);border-color:#6276b2}.ky4-live-chip b{color:#ffd23f}.ky4-stats{padding-bottom:92px;background:#eef5ff;color:#111a34;border:0}.ky4-stats__grid{position:relative;z-index:3;transform:translateY(-56px);grid-template-columns:repeat(3,1fr);gap:20px}.ky4-stats article{position:relative;padding:32px;text-align:left;border:0;border-radius:16px;background:#fff;box-shadow:0 20px 50px rgba(50,74,130,.13)}.ky4-stat-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:12px;background:#4c72ff;color:#fff;font-size:22px}.ky4-stats article strong{display:inline-block;margin:22px 8px 0 0;color:#2349df;font-size:30px}.ky4-content-block{padding:50px 0}.ky4-block-head{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;margin-bottom:30px}.ky4-block-head small,.ky4-feature-panels small{color:#345bdc;font-weight:800;letter-spacing:.08em}.ky4-block-head h2,.ky4-section-head h2{margin:8px 0 0;color:#141946;font-size:38px}.ky4-block-head p,.ky4-section-head p{color:#66718d;line-height:1.8}.ky4-gallery{display:grid;grid-template-columns:1.65fr 1fr;gap:18px}.ky4-gallery>div{display:grid;gap:18px}.ky4-gallery figure{position:relative;margin:0;overflow:hidden;border-radius:18px;border:1px solid #253354;background:#17223f}.ky4-gallery img{width:100%;height:100%;min-height:245px;display:block;object-fit:cover}.ky4-gallery__large img{min-height:510px}.ky4-gallery figcaption{position:absolute;left:18px;right:18px;bottom:18px;padding:16px;border-radius:12px;background:rgba(12,25,52,.82);color:white}.ky4-gallery figcaption b,.ky4-gallery figcaption span{display:block}.ky4-gallery figcaption span{margin-top:6px;color:#cbd6ef}.ky4-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.ky4-stats .ky4-metric-grid article{padding:18px;border:1px solid #dce4f2;box-shadow:0 16px 35px rgba(50,74,130,.08)}.ky4-metric-grid img{width:100%;height:190px;object-fit:cover;border-radius:12px}.ky4-metric-grid i{display:grid;width:48px;height:48px;margin:18px 0;place-items:center;border-radius:12px;background:#4c72ff;color:#fff;font-style:normal;font-size:22px}.ky4-metric-grid h3{font-size:21px}.ky4-metric-grid p{color:#68738d;line-height:1.7}.ky4-match-center{padding:90px 0;background:#f7faff;color:#111a34}.ky4-section-head{align-items:end}.ky4-scoreboard{border:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 18px 45px rgba(40,63,120,.1)}.ky4-scoreboard__title,.ky4-score-row{grid-template-columns:1fr 2fr .9fr 2fr 1fr}.ky4-scoreboard__title{padding:20px 24px;background:linear-gradient(90deg,#294ee6,#4670ff);color:white}.ky4-score-row{padding:22px 24px;border-bottom:1px solid #e7ebf3}.ky4-score-row>span{display:inline-flex;width:max-content;padding:7px 18px;border-radius:99px;background:#e8fff1;color:#238150}.ky4-score-row>b{color:#192344}.ky4-score-row em{color:#63708c}.ky4-match-grid{display:none}.ky4-feature-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:70px}.ky4-feature-panels>article{padding:28px;border-radius:18px;background:#fff;border:1px solid #dce4f2}.ky4-feature-panels>article>img{width:100%;height:270px;object-fit:cover;border-radius:14px}.ky4-feature-panels h3{font-size:28px;margin:14px 0}.ky4-feature-panels p{color:#69748d;line-height:1.8}.ky4-radar{background:#3e55a8!important;color:white}.ky4-radar small,.ky4-radar p{color:#f1dd6e}.ky4-radar dl div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}.ky4-radar dd{color:#ffd23f;font-size:22px}.ky4-btn--yellow{background:#ffd23f;border:0;color:#17214a}.ky4-footer{background:#0b1433;color:#aab7dd;border:0}.ky4-footer a{color:#aab7dd}.ky4-footer__grid{grid-template-columns:2fr 1fr 1fr}.ky4-footer__bottom{border-color:#2a365e}
@media(max-width:800px){.ky4-shell{width:min(100% - 24px,1180px)}.ky4-hero{padding-bottom:55px}.ky4-hero__grid{grid-template-columns:1fr;min-height:auto;padding:70px 0}.ky4-hero__visual{display:block;min-height:auto}.ky4-hero__visual>img{height:260px}.ky4-hero h1{font-size:45px}.ky4-stats__grid{grid-template-columns:1fr;transform:translateY(-35px)}.ky4-block-head,.ky4-gallery,.ky4-metric-grid,.ky4-feature-panels{grid-template-columns:1fr}.ky4-gallery__large img{min-height:300px}.ky4-block-head{gap:10px}.ky4-scoreboard{overflow-x:auto}.ky4-scoreboard__title,.ky4-score-row{min-width:720px}.ky4-footer__grid{grid-template-columns:1fr}}
/* hero score board + article navigation */
.ky4-hero__grid{min-height:720px!important;grid-template-columns:1.35fr .85fr!important;gap:70px!important}.ky4-hero__main{display:flex;flex-direction:column}.ky4-hero__main .ky4-hero__visual{position:relative;min-height:300px;margin-top:26px}.ky4-hero__main .ky4-hero__visual>img{height:300px}.ky4-hero__main .ky4-hero__actions{margin:22px 0 0}.ky4-hero__copy .ky4-kicker{display:inline-flex;width:max-content;padding:9px 14px;border:1px solid #6d80b4;border-radius:99px;background:rgba(255,255,255,.1);color:#e6edff}.ky4-hero-board{align-self:center;width:100%;padding:20px;border:1px solid #7180a8;border-radius:18px;background:rgba(186,199,229,.22);box-shadow:0 24px 60px rgba(0,0,0,.28);color:white}.ky4-hero-board__head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px;font-size:18px}.ky4-hero-board__head span{padding:7px 14px;border-radius:99px;background:#42736c;color:#8ff0c7;font-size:12px}.ky4-hero-board__rows{display:grid;gap:12px}.ky4-board-game{padding:17px 18px;border:1px solid #687490;border-radius:16px;background:rgba(12,24,57,.72)}.ky4-board-game>div,.ky4-board-game p{display:flex;justify-content:space-between;align-items:center}.ky4-board-game>div{color:#adb8d2;font-size:12px}.ky4-board-game em{font-style:normal}.ky4-board-game p{margin:13px 0 0}.ky4-board-game p b{font-size:15px}.ky4-board-game p strong{color:#ffd23f;font-size:23px}.ky4-board-loading{padding:50px 10px;text-align:center;color:#c1cae2}
@media(max-width:800px){.ky4-hero__grid{grid-template-columns:1fr!important;gap:25px!important}.ky4-hero-board{margin-top:0}.ky4-hero__main .ky4-hero__visual>img{height:250px}}
/* CMS cross-site backlinks */
.ky4-crosslinks{margin-top:38px;padding:22px;border:1px solid #2b385d;border-radius:14px;background:#111b3a}.ky4-crosslinks>b{display:block;margin-bottom:14px;color:#fff}.ky4-crosslinks>div{display:flex;flex-wrap:wrap;gap:10px}.ky4-crosslinks a{padding:7px 13px;border:1px solid #3b486c;border-radius:99px;background:#1c2748;color:#c7d2ef;text-decoration:none;font-size:13px}.ky4-crosslinks a:hover{border-color:#ffd23f;color:#ffd23f}