/* =========================================================
      9jaTips Enhanced — Premium Green/White/Black Design
      Improvements: Better typography, refined cards, enhanced spacing,
      professional layouts, improved mobile UX, better visual hierarchy,
      Enhanced readability with optimized font sizes and line heights
      UPDATED: Improved upcoming cards carousel - prevents breaking
    ========================================================= */

    :root{
      --radius: 20px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --ease: cubic-bezier(.2,.8,.2,1);
      --ease-spring: cubic-bezier(.34,1.56,.64,1);

      --accent: #16a34a;
      --accent-hover: #15803d;
      --accent-light: rgba(22,163,74,.12);

      /* Light theme */
      --bg: #fafafa;
      --surface: #ffffff;
      --surface-2: #f8f9fa;
      --surface-3: #f1f3f5;
      --text: #0a0a0a;
      --text-secondary: #404040;
      --muted: #737373;
      --border: #e4e4e7;
      --border-light: #f0f0f0;
      --chip: #f4f4f5;

      --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
      --shadow: 0 4px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02);
      --shadow-lg: 0 20px 40px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03);
      --shadow-float: 0 8px 24px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.04);
    }

    [data-theme="dark"]{
      --bg: #0a0a0a;
      --surface: #121212;
      --surface-2: #1a1a1a;
      --surface-3: #222222;
      --text: #fafafa;
      --text-secondary: #d4d4d4;
      --muted: #a1a1aa;
      --border: #2a2a2a;
      --border-light: #1f1f1f;
      --chip: #1f1f1f;
      --accent-light: rgba(22,163,74,.18);

      --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
      --shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
      --shadow-lg: 0 24px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
      --shadow-float: 0 12px 32px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
    }

    @media (prefers-color-scheme: dark){
      html[data-theme="auto"]{
        --bg: #0a0a0a;
        --surface: #121212;
        --surface-2: #1a1a1a;
        --surface-3: #222222;
        --text: #fafafa;
        --text-secondary: #d4d4d4;
        --muted: #a1a1aa;
        --border: #2a2a2a;
        --border-light: #1f1f1f;
        --chip: #1f1f1f;
        --accent-light: rgba(22,163,74,.18);

        --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
        --shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
        --shadow-lg: 0 24px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
        --shadow-float: 0 12px 32px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
      }
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior: smooth; }
    html, body{ height:100%; }
    
    body{
      margin:0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 16px;
    }
    
    a{ color:inherit; text-decoration:none; }
    button, input, select, textarea{ font:inherit; }
    
    ::selection{
      background: var(--accent-light);
      color: var(--accent);
    }

    .container{
      width: min(1200px, calc(100% - 40px));
      margin: 0 auto;
    }

    /* ================= Typography Enhancements ================= */
    h1, h2, h3, h4, h5, h6 {
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: -0.025em;
    }

    p {
      line-height: 1.75;
      margin: 0 0 1em;
    }

    /* ================= Article Content Styling ================= */
    .article-content {
      max-width: 900px;
      margin: 0 auto;
    }

    .article-content p {
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 20px;
      color: var(--text-secondary);
    }

    .article-content h3 {
      font-size: 28px;
      font-weight: 800;
      line-height: 1.3;
      margin: 0 0 18px;
      color: var(--text);
    }

    .article-content h4 {
      font-size: 21px;
      font-weight: 700;
      line-height: 1.4;
      margin: 28px 0 14px;
      color: var(--text);
    }

    .article-content ul {
      margin: 0 0 20px;
      padding-left: 28px;
    }

    .article-content li {
      font-size: 15px;
      line-height: 1.8;
      margin-bottom: 10px;
      color: var(--text-secondary);
    }

    .article-content strong {
      font-weight: 700;
      color: var(--text);
    }

    /* ================= Top Header Bar - Beautiful & Elegant ================= */
    .top-header{
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
      padding: 10px 0;
    }

    .top-header__container{
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .top-header__left{
      display: flex;
      align-items: center;
    }

    .top-header__right{
      display: flex;
      align-items: center;
    }

    /* Beautiful Date/Time Display */
    .datetime-display{
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
    }

    .datetime-icon{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: var(--accent-light);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .datetime-icon svg{
      stroke: var(--accent);
    }

    .datetime-content{
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .datetime-date{
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      line-height: 1;
      letter-spacing: -0.2px;
    }

    .datetime-time{
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      line-height: 1;
    }

    .live-badge{
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background: var(--accent-light);
      border: 1px solid var(--accent);
      border-radius: 999px;
      margin-left: 4px;
    }

    .live-dot{
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }

    .live-text{
      font-size: 10px;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Elegant 3-Option Theme Toggle */
    .theme-toggle{
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
    }

    .theme-btn{
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: transparent;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      transition: all .25s var(--ease);
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      position: relative;
      z-index: 1;
    }

    .theme-btn svg{
      stroke: var(--muted);
      transition: all .25s var(--ease);
      flex-shrink: 0;
    }

    .theme-btn:hover{
      color: var(--text);
    }

    .theme-btn:hover svg{
      stroke: var(--text);
    }

    .theme-btn.active{
      background: var(--accent);
      color: white;
      box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
    }

    .theme-btn.active svg{
      stroke: white;
    }

    .theme-label{
      white-space: nowrap;
    }

    /* ================= Header - Main Navigation ================= */
    .header{
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .header__container{
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      min-height: 72px;
    }

    /* Brand Section */
    .header__brand{
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      transition: opacity .2s var(--ease);
    }
    .header__brand:hover{
      opacity: 0.85;
    }

    .header__logo{
      width: 48px;
      height: 48px;
      background: var(--accent);
      border-radius: 12px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
    }

    .logo-svg{
      width: 28px;
      height: 28px;
    }

    .header__brand-text{
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .header__title{
      margin: 0;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1;
      color: var(--text);
    }

    .title-accent{
      color: var(--accent);
    }

    .header__tagline{
      margin: 0;
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Desktop Navigation */
    .header__nav{
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
      justify-content: center;
    }

    .nav-link{
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      border-radius: 10px;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all .2s var(--ease);
      white-space: nowrap;
    }

    .nav-link:hover{
      color: var(--text);
      background: var(--surface-2);
    }

    .nav-link--dropdown{
      background: transparent;
    }

    .dropdown-icon{
      transition: transform .2s var(--ease);
    }

    .nav-dropdown[aria-expanded="true"] .dropdown-icon{
      transform: rotate(180deg);
    }

    /* Dropdown Menu */
    .nav-dropdown{
      position: relative;
    }

    .dropdown-menu{
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%);
      width: 640px;
      max-width: 90vw;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      padding: 20px;
      display: none;
      animation: dropdownSlide .2s var(--ease);
    }

    @keyframes dropdownSlide{
      from{ opacity: 0; transform: translateX(-50%) translateY(-8px); }
      to{ opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    .nav-dropdown[aria-expanded="true"] .dropdown-menu{
      display: block;
    }

    .dropdown-header{
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 16px;
    }

    .dropdown-header h3{
      margin: 0 0 4px;
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    .dropdown-header p{
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }

    .dropdown-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .dropdown-item{
      display: flex;
      align-items: center;
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--surface-2);
      border: 1px solid var(--border-light);
      transition: all .2s var(--ease);
    }

    .dropdown-item:hover{
      background: var(--accent-light);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .dropdown-item-content{
      flex: 1;
      min-width: 0;
    }

    .dropdown-item-title{
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }

    .dropdown-item-desc{
      font-size: 12px;
      color: var(--muted);
    }

    .dropdown-footer{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      padding: 12px;
      background: var(--accent);
      color: white;
      font-size: 14px;
      font-weight: 700;
      border-radius: 12px;
      transition: all .2s var(--ease);
    }

    .dropdown-footer:hover{
      background: var(--accent-hover);
      transform: translateY(-2px);
    }

    /* Header Actions */
    .header__actions{
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .header__status{
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
    }

    .status-dot{
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    .status-info{
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1;
    }

    .status-date{
      white-space: nowrap;
    }

    .status-separator{
      color: var(--muted);
    }

    .status-time{
      white-space: nowrap;
    }

    .header__theme-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 16px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
      cursor: pointer;
      transition: all .2s var(--ease);
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }

    .header__theme-btn::before{
      content: '☀️';
      font-size: 16px;
    }

    [data-theme="dark"] .header__theme-btn::before{
      content: '🌙';
    }

    .header__theme-btn:hover{
      background: var(--accent-light);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .header__cta-btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px 20px;
      background: var(--accent);
      color: white;
      font-size: 14px;
      font-weight: 700;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition: all .2s var(--ease);
      white-space: nowrap;
    }

    .header__cta-btn:hover{
      background: var(--accent-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(22, 163, 74, 0.3);
    }

    .header__menu-btn{
      display: none;
      width: 42px;
      height: 42px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      transition: all .2s var(--ease);
    }

    .header__menu-btn:hover{
      background: var(--accent-light);
      border-color: var(--accent);
    }

    .menu-icon{
      width: 18px;
      height: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .menu-icon span{
      display: block;
      width: 100%;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: all .2s var(--ease);
    }

    /* Mobile Menu */
    .mobile-menu{
      display: none;
      background: var(--surface);
      border-top: 1px solid var(--border);
      animation: slideDown .2s var(--ease);
    }

    .mobile-menu.open{
      display: block;
    }

    .mobile-menu__inner{
      max-width: 1400px;
      margin: 0 auto;
      padding: 16px 24px 24px;
    }

    .mobile-nav{
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .mobile-nav-link{
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 12px;
      transition: all .2s var(--ease);
      cursor: pointer;
      text-align: left;
      width: 100%;
    }

    .mobile-nav-link:hover{
      background: var(--accent-light);
      border-color: var(--accent);
      transform: translateX(4px);
    }

    .mobile-nav-content{
      flex: 1;
      min-width: 0;
    }

    .mobile-nav-title{
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px;
    }

    .mobile-nav-desc{
      font-size: 12px;
      color: var(--muted);
    }

    .mobile-nav-toggle{
      border: none;
      justify-content: space-between;
    }

    .mobile-nav-arrow{
      flex-shrink: 0;
      stroke: var(--muted);
      transition: transform .2s var(--ease);
    }

    .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-arrow{
      transform: rotate(180deg);
    }

    .mobile-nav-panel{
      display: none;
      padding: 8px 0 0;
    }

    .mobile-nav-panel.open{
      display: flex;
      flex-direction: column;
      gap: 6px;
      animation: slideDown .2s var(--ease);
    }

    .mobile-nav-sublink{
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: 10px;
      transition: all .2s var(--ease);
    }

    .mobile-nav-sublink:hover{
      background: var(--accent-light);
      border-color: var(--accent);
      transform: translateX(4px);
    }

    .sublink-content{
      flex: 1;
      min-width: 0;
    }

    .sublink-title{
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px;
    }

    .sublink-desc{
      font-size: 11px;
      color: var(--muted);
    }

    .mobile-nav-sublink--more{
      background: var(--accent);
      border-color: var(--accent);
      color: white;
      font-weight: 700;
      justify-content: space-between;
    }

    .mobile-nav-sublink--more span{
      color: white;
    }

    .mobile-nav-sublink--more:hover{
      background: var(--accent-hover);
      border-color: var(--accent-hover);
    }

    .mobile-nav-sublink--more svg{
      stroke: white;
      flex-shrink: 0;
    }

    /* ================= Button Component ================= */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      cursor:pointer;
      font-weight: 500;
      font-size: 14px;
      transition: all .2s var(--ease);
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{ 
      transform: translateY(-2px); 
      box-shadow: var(--shadow-float); 
      border-color: var(--accent);
    }
    .btn:active{ transform: translateY(0); }
    
    .btn--primary{
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
      font-weight: 600;
    }
    .btn--primary:hover{
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      box-shadow: 0 8px 24px rgba(22,163,74,.25);
    }
    .btn--ghost{ 
      background: var(--surface-2);
      border-color: var(--border-light);
    }

    .btn--large{
      padding: 14px 28px;
      font-size: 16px;
      font-weight: 600;
    }

    .btn--outline{
      background: transparent;
      border: 2px solid var(--border);
      color: var(--text);
    }
    .btn--outline:hover{
      background: var(--surface-2);
      border-color: var(--accent);
    }

    .btn svg{
      flex-shrink: 0;
    }

    /* ================= Hero Section - Left-Aligned with Stats Banner ================= */
    .hero{ 
      padding: 60px 0 40px;
      position: relative;
      overflow: hidden;
    }
    
    .hero::before{
      content: '';
      position: absolute;
      top: -300px;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
      opacity: 0.25;
      pointer-events: none;
    }

    .hero__content{
      max-width: 900px;
      margin: 0 auto;
      text-align: left;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 28px;
      position: relative;
      z-index: 1;
    }

    .hero__eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 18px;
      background: var(--accent-light);
      border: 1px solid var(--accent);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
    }

    .live-indicator{
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse-live 2s ease-in-out infinite;
    }

    @keyframes pulse-live{
      0%, 100%{ opacity: 1; transform: scale(1); }
      50%{ opacity: 0.6; transform: scale(0.9); }
    }

    .hero__title{
      font-size: clamp(40px, 6vw, 72px);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -2px;
      margin: 0;
      color: var(--text);
    }

    .hero__gradient{
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
    }

    .hero__description{
      font-size: 19px;
      line-height: 1.7;
      color: var(--text-secondary);
      margin: 0;
      max-width: 650px;
    }

    .hero__cta{
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    /* Trust Signals */
    .hero__trust{
      display: flex;
      gap: 40px;
      padding: 28px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      width: 100%;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .trust-item{
      display: flex;
      gap: 14px;
      align-items: center;
    }

    .trust-icon{
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: var(--accent-light);
      border: 1px solid var(--accent);
      display: grid;
      place-items: center;
      font-size: 22px;
      flex-shrink: 0;
    }

    .trust-text{
      display: flex;
      flex-direction: column;
      gap: 3px;
      text-align: left;
    }

    .trust-number{
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.5px;
      color: var(--text);
      line-height: 1;
    }

    .trust-label{
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    /* Stats Banner */
    .hero__stats-banner{
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      width: 100%;
      max-width: 850px;
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      transition: all .3s var(--ease);
    }

    .hero__stats-banner:hover{
      box-shadow: 0 20px 48px rgba(0,0,0,.12);
      transform: translateY(-2px);
    }

    .stats-banner__item{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 28px 24px;
      text-align: center;
      transition: all .3s var(--ease);
    }

    .stats-banner__item:hover{
      background: var(--accent-light);
    }

    .stats-banner__divider{
      width: 1px;
      background: var(--border);
    }

    .stats-banner__label{
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .stats-banner__value{
      font-size: 36px;
      font-weight: 900;
      letter-spacing: -1.5px;
      line-height: 1;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stats-banner__trend{
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      color: var(--accent);
      font-weight: 600;
    }

    .stats-banner__trend svg{
      flex-shrink: 0;
      stroke: var(--accent);
    }

    /* Card component for other sections */
    .card{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      transition: all .3s var(--ease);
    }
    .card:hover{
      box-shadow: var(--shadow-lg);
    }
    .card__inner{ padding: 24px; }

    /* ================= Sections ================= */
    .section{ padding: 20px 0; }
    
    .section__head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom: 16px;
    }
    .section__head h2{ 
      margin:0; 
      font-size: 26px; 
      font-weight: 800;
      letter-spacing: -0.5px;
      line-height: 1.3;
    }
    .section__head p{ 
      margin:0; 
      color: var(--muted); 
      font-size: 15px;
      font-weight: 500;
      line-height: 1.5;
    }

    .grid{ 
      display:grid; 
      grid-template-columns: repeat(12, 1fr); 
      gap: 18px; 
    }
    .col-8{ grid-column: span 8; }
    .col-4{ grid-column: span 4; }

    .pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      transition: all .2s var(--ease);
    }

    .pill:hover{
      background: var(--accent-light);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .pill .dot{
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse{
      0%, 100%{ opacity: 1; }
      50%{ opacity: 0.5; }
    }

    /* ================= Match Cards - Compact Horizontal Layout ================= */
    .matchlist{ display:grid; gap: 14px; }
    
    .match {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      padding: 24px; 
      gap: 16px;
      border: 1px solid var(--border); 
      border-radius: 16px;
      background: var(--surface);
      transition: all .2s ease-in-out;
      position: relative;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }
    .match:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(22, 163, 74, 0.12);
      border-color: var(--accent);
    }

    .match__title {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      width: 100%;
    }
    .team-name {
      font-size: 22px; 
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      letter-spacing: -0.5px;
    }
    .match__vs {
      font-size: 14px;
      font-weight: 500;
      color: var(--muted);
      font-style: normal;
      opacity: 0.6;
    }

    .match__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin-bottom: 4px;
    }
    .meta-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 11px; 
      font-weight: 700;
      text-transform: uppercase;
      color: var(--text-secondary);
      letter-spacing: 0.5px;
    }
    .meta-time {
      font-size: 13px;
      color: var(--muted);
      font-weight: 500;
    }

    .match__predictions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding-top: 16px;
      border-top: 1px dashed var(--border); 
    }

    .prediction-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px; 
      border-radius: 8px;
      border: 1px solid var(--accent);
      background: var(--surface);
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      transition: all .2s;
      cursor: pointer;
    }
    .prediction-tag:hover {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }
    .prediction-tag:hover .prediction-tag__odds {
      color: white;
    }
    .prediction-tag__odds {
      margin-left: 4px;
      color: var(--accent);
      font-weight: 800;
      font-size: 15px;
    }
    .prediction-tag__market{
      font-weight: 600;
    }
    .prediction-tag__icon {
      display: none; 
    }
    .confidence-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--muted);
      letter-spacing: 0.5px;
      padding: 4px 0;
    }

    .match__insight {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      padding: 12px 16px;
      background: var(--surface-2);
      border-radius: 8px;
      border-left: 3px solid var(--accent);
      width: 100%;
      box-sizing: border-box;
    }

    /* ================= Tiles & Articles ================= */
    .tiles{ 
      display:grid; 
      grid-template-columns: 1fr 1fr; 
      gap: 12px; 
    }
    .tile{
      padding: 16px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      transition: all .2s var(--ease);
    }
    .tile:hover{ 
      transform: translateY(-3px); 
      box-shadow: var(--shadow-float); 
      border-color: var(--accent);
    }
    .tile b{ 
      display:block; 
      margin-bottom: 7px;
      font-size: 15px;
      font-weight: 700;
    }
    .tile span{ 
      color: var(--muted); 
      font-size: 13px;
      font-weight: 500;
    }

    .articles{ display:grid; gap: 14px; }
    .article{
      padding: 16px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      transition: all .2s var(--ease);
    }
    .article:hover{ 
      transform: translateY(-3px); 
      box-shadow: var(--shadow-float);
      border-color: var(--accent);
    }
    .article .top{
      display:flex;
      justify-content:space-between;
      gap:12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .article h3{ 
      margin: 0 0 9px; 
      font-size: 16px; 
      font-weight: 700;
      line-height: 1.3;
    }
    .article p{ 
      margin:0; 
      color: var(--text-secondary); 
      font-size: 14px;
      line-height: 1.5;
    }

    /* ================= Carousel Container - IMPROVED ================= */
    .carousel-container{
      position: relative;
      width: 100%;
      overflow: hidden;
      padding: 0 60px;
    }

    .carousel-wrapper{
      overflow: hidden;
      width: 100%;
    }

    .carousel-track{
      display: flex;
      gap: 16px;
      transition: transform 0.4s var(--ease);
      scroll-behavior: smooth;
    }

    .upcoming-grid.carousel-track{
      display: flex;
      grid-template-columns: none;
    }

    /* IMPROVED UPCOMING CARD - Prevents Breaking */
    .upcoming-card{
      flex: 0 0 calc(33.333% - 11px);
      min-width: 300px;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      transition: all .3s var(--ease);
      box-shadow: var(--shadow-sm);
    }

    .upcoming-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--accent);
    }

    .upcoming-card__header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    .upcoming-card__league{
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 60%;
    }

    .upcoming-card__time{
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .upcoming-card__match{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 0;
    }

    .upcoming-card__team{
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      flex: 1;
      text-align: center;
      line-height: 1.3;
      min-width: 0;
    }

    .upcoming-card__team:first-child{
      text-align: left;
    }

    .upcoming-card__team:last-child{
      text-align: right;
    }

    .upcoming-card__vs{
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      opacity: 0.6;
      flex-shrink: 0;
    }

    .upcoming-card__prediction{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px;
      background: var(--surface-2);
      border-radius: 8px;
    }

    .upcoming-pred-tag{
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: var(--surface);
      border: 1px solid var(--accent);
      border-radius: 999px;
      transition: all .2s var(--ease);
      flex: 1;
      min-width: 0;
    }

    .upcoming-card:hover .upcoming-pred-tag{
      background: var(--accent);
    }

    .upcoming-pred-market{
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .upcoming-card:hover .upcoming-pred-market{
      color: white;
    }

    .upcoming-pred-odds{
      font-size: 14px;
      font-weight: 900;
      color: var(--accent);
      letter-spacing: -0.3px;
      flex-shrink: 0;
    }

    .upcoming-card:hover .upcoming-pred-odds{
      color: white;
    }

    .upcoming-confidence{
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--muted);
      letter-spacing: 0.4px;
      padding: 4px 8px;
      background: var(--surface);
      border-radius: 4px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .upcoming-card__footer{
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .upcoming-prob{
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .upcoming-prob-label{
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--muted);
      letter-spacing: 0.4px;
    }

    .upcoming-prob-bar{
      height: 6px;
      background: var(--surface-2);
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .upcoming-prob-fill{
      height: 100%;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
      border-radius: 999px;
      transition: width .3s var(--ease);
    }

    .upcoming-prob-value{
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
    }

    /* Carousel Navigation Buttons */
    .carousel-btn{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: 50%;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: all .3s var(--ease);
      z-index: 10;
      box-shadow: var(--shadow);
    }

    .carousel-btn:hover{
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: var(--shadow-lg);
    }

    .carousel-btn:hover svg{
      stroke: white;
    }

    .carousel-btn svg{
      stroke: var(--text);
      transition: all .3s var(--ease);
    }

    .carousel-btn--prev{
      left: 0;
    }

    .carousel-btn--next{
      right: 0;
    }

    .carousel-btn:disabled{
      opacity: 0.3;
      cursor: not-allowed;
    }

    .carousel-btn:disabled:hover{
      background: var(--surface);
      border-color: var(--border);
      box-shadow: var(--shadow);
    }

    .carousel-btn:disabled:hover svg{
      stroke: var(--text);
    }

    /* Carousel Indicators */
    .carousel-indicators{
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 24px;
    }

    .carousel-indicator{
      width: 10px;
      height: 10px;
      background: var(--border);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: all .3s var(--ease);
      padding: 0;
    }

    .carousel-indicator:hover{
      background: var(--accent);
      opacity: 0.6;
    }

    .carousel-indicator.active{
      background: var(--accent);
      width: 32px;
      border-radius: 999px;
    }

    /* ================= Winning Tips ================= */
    .winning-tip{
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 20px;
      border-radius: var(--radius-sm);
      background: var(--surface);
      border: 1px solid var(--border);
      transition: all .2s var(--ease);
    }

    .winning-tip:not(:last-child){
      margin-bottom: 12px;
    }

    .winning-tip:hover{
      border-color: var(--accent);
      background: var(--accent-light);
      transform: translateX(4px);
    }

    .winning-tip__badge{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 12px;
      background: var(--accent);
      border-radius: var(--radius-sm);
      color: white;
    }

    .winning-tip__badge svg{
      stroke: white;
    }

    .winning-tip__badge span{
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
    }

    .winning-tip__match{
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .winning-tip__teams{
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.4;
    }

    .winning-tip__league{
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
    }

    .winning-tip__prediction{
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .winning-tip__market{
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 6px 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
    }

    .winning-tip__odds{
      font-size: 15px;
      font-weight: 700;
      color: var(--accent);
    }

    .winning-tip__stats{
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
    }

    .stat-badge{
      padding: 6px 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .stat-badge--profit{
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }

    /* ================= Performance Metrics ================= */
    .metric{
      padding: 20px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      text-align: center;
      transition: all .2s var(--ease);
    }

    .metric:hover{
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

    .kpi{
      font-size: 36px;
      font-weight: 900;
      letter-spacing: -1.5px;
      color: var(--accent);
      margin-bottom: 8px;
    }

    .label{
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    /* ================= Footer - Modern Design ================= */
    .footer{
      background: var(--surface-2);
      border-top: 1px solid var(--border);
      padding: 48px 0 32px;
      margin-top: 64px;
    }

    .footer__container{
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footer__top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--border);
    }

    .footer__brand{
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .footer__logo{
      width: 48px;
      height: 48px;
      background: var(--accent);
      border-radius: 12px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .footer__logo .logo-svg{
      width: 28px;
      height: 28px;
    }

    .footer__brand-text{
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .footer__title{
      margin: 0;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -0.8px;
      line-height: 1;
      color: var(--text);
    }

    .footer__tagline{
      margin: 0;
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      line-height: 1;
    }

    .footer__updated{
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .footer__updated svg{
      stroke: var(--accent);
      flex-shrink: 0;
    }

    .footer__description{
      padding: 24px 0;
      border-bottom: 1px solid var(--border);
    }

    .footer__description p{
      margin: 0;
      font-size: 15px;
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 900px;
    }

    .footer__links{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      padding: 32px 0;
      border-bottom: 1px solid var(--border);
    }

    .footer__column-title{
      margin: 0 0 16px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.2px;
    }

    .footer__list{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .footer__list a{
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      transition: all .2s var(--ease);
      display: inline-block;
    }

    .footer__list a:hover{
      color: var(--accent);
      transform: translateX(4px);
    }

    .footer__bottom{
      padding-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .footer__copyright{
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .footer__disclaimer{
      font-size: 13px;
      line-height: 1.7;
      color: var(--muted);
    }

    .footer__disclaimer strong{
      color: var(--text-secondary);
      font-weight: 700;
    }

    /* ================= Responsive ================= */
    @media (max-width: 1200px){
      .header__nav a:not(.nav-link--dropdown){
        padding: 10px 12px;
      }

      .carousel-container{
        padding: 0 50px;
      }

      .upcoming-card{
        flex: 0 0 calc(50% - 8px);
        min-width: 280px;
      }
    }

    @media (max-width: 1024px){
      .top-header__container{
        padding: 0 20px;
      }

      .datetime-display{
        padding: 6px 12px;
        gap: 10px;
      }

      .datetime-icon{
        width: 28px;
        height: 28px;
      }

      .datetime-icon svg{
        width: 14px;
        height: 14px;
      }

      .datetime-date{
        font-size: 12px;
      }

      .datetime-time{
        font-size: 10px;
      }

      .live-badge{
        padding: 3px 8px;
        margin-left: 2px;
      }

      .live-text{
        font-size: 9px;
      }

      .theme-btn{
        padding: 5px 10px;
        font-size: 11px;
      }

      .theme-btn svg{
        width: 14px;
        height: 14px;
      }

      .header__container{
        padding: 0 20px;
        min-height: 64px;
      }

      .header__nav{
        display: none;
      }

      .header__menu-btn{
        display: flex;
      }

      .dropdown-grid{
        grid-template-columns: 1fr;
      }

      .hero{
        padding: 48px 0 32px;
      }

      .hero__title{
        font-size: clamp(36px, 7vw, 60px);
        letter-spacing: -1.5px;
      }

      .hero__description{
        font-size: 17px;
      }

      .hero__trust{
        gap: 32px;
      }

      body{
        font-size: 15px;
      }

      .section__head h2{
        font-size: 24px;
      }

      .upcoming-card{
        flex: 0 0 calc(50% - 8px);
        min-width: 270px;
      }
    }

    @media (max-width: 768px){
      .container{ width: calc(100% - 24px); }
      
      .top-header__container{
        padding: 0 16px;
        gap: 12px;
      }

      .datetime-icon{
        width: 26px;
        height: 26px;
      }

      .datetime-icon svg{
        width: 13px;
        height: 13px;
      }

      .datetime-date{
        font-size: 11px;
      }

      .datetime-time{
        font-size: 9px;
      }

      .theme-btn .theme-label{
        display: none;
      }

      .theme-btn{
        padding: 6px;
      }
      
      .header__container{
        padding: 0 16px;
        gap: 16px;
      }

      .header__tagline{
        display: none;
      }

      .header__logo{
        width: 42px;
        height: 42px;
      }

      .logo-svg{
        width: 24px;
        height: 24px;
      }

      .header__title{
        font-size: 24px;
      }
      
      .hero{
        padding: 40px 0 28px;
      }
      
      .hero::before{
        width: 500px;
        height: 500px;
        top: -150px;
      }
      
      .hero__content{
        gap: 24px;
      }
      
      .hero__title{
        font-size: clamp(32px, 9vw, 48px);
        letter-spacing: -1.2px;
      }
      
      .hero__description{
        font-size: 16px;
      }
      
      .hero__cta{
        flex-direction: column;
        width: 100%;
      }
      
      .btn--large{
        width: 100%;
        justify-content: center;
      }
      
      .hero__trust{
        flex-direction: column;
        gap: 20px;
        padding: 24px 0;
      }
      
      .trust-item{
        width: 100%;
        justify-content: flex-start;
      }
      
      .stats-banner__item{
        padding: 20px 16px;
      }

      .stats-banner__value{
        font-size: 28px;
      }
      
      .grid{ grid-template-columns: 1fr; }
      .col-8, .col-4{ grid-column: auto; }
      
      .tiles{ grid-template-columns: 1fr; }

      .carousel-container{
        padding: 0 40px;
      }

      .upcoming-card{
        flex: 0 0 100%;
        min-width: 260px;
        max-width: 100%;
      }

      .carousel-btn{
        width: 40px;
        height: 40px;
      }

      .carousel-btn svg{
        width: 20px;
        height: 20px;
      }

      .upcoming-card__match{
        flex-direction: row;
        justify-content: space-between;
      }

      .upcoming-card__team{
        text-align: center !important;
        font-size: 14px;
      }

      .footer__container{
        padding: 0 16px;
      }

      .footer__top{
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .footer__updated{
        width: 100%;
        justify-content: center;
      }

      .footer__links{
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }

      .footer__description p{
        font-size: 14px;
      }

      .winning-tip{
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .winning-tip__teams{
        font-size: 15px;
      }

      .winning-tip__stats{
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      
      .section__head h2{ font-size: 22px; }
      
      .card__inner{ padding: 18px; }
      .match{ padding: 16px; }

      .article-content h3{
        font-size: 24px;
      }

      .article-content h4{
        font-size: 19px;
      }

      .article-content p{
        font-size: 15px;
      }
    }

    @media (max-width: 480px){
      .container{ width: calc(100% - 20px); }
      
      .top-header__container{
        padding: 0 12px;
        gap: 10px;
        flex-direction: column;
        align-items: stretch;
      }

      .top-header__left,
      .top-header__right{
        width: 100%;
        justify-content: center;
      }

      .datetime-display{
        width: 100%;
        justify-content: center;
      }

      .datetime-icon{
        width: 24px;
        height: 24px;
      }

      .live-dot{
        width: 5px;
        height: 5px;
      }

      .theme-toggle{
        width: 100%;
        justify-content: center;
      }

      .theme-btn{
        flex: 1;
        justify-content: center;
      }
      
      .header__container{
        padding: 0 12px;
        gap: 12px;
      }

      .header__brand{
        gap: 10px;
      }

      .header__logo{
        width: 38px;
        height: 38px;
      }

      .logo-svg{
        width: 22px;
        height: 22px;
      }

      .header__title{
        font-size: 22px;
      }
      
      .hero{
        padding: 32px 0 24px;
      }
      
      .hero__eyebrow{
        font-size: 12px;
        padding: 7px 14px;
      }
      
      .hero__title{
        font-size: clamp(28px, 10vw, 40px);
        letter-spacing: -1px;
      }
      
      .hero__description{
        font-size: 15px;
      }
      
      .btn--large{
        padding: 12px 24px;
        font-size: 15px;
      }
      
      .trust-icon{
        width: 42px;
        height: 42px;
        font-size: 20px;
      }
      
      .trust-number{
        font-size: 20px;
      }
      
      .trust-label{
        font-size: 11px;
      }

      .hero__stats-banner{
        flex-direction: column;
      }

      .stats-banner__divider{
        width: 100%;
        height: 1px;
      }

      .stats-banner__item{
        padding: 18px 16px;
      }

      .stats-banner__value{
        font-size: 32px;
      }

      .stats-banner__label{
        font-size: 11px;
      }

      .stats-banner__trend{
        font-size: 12px;
      }

      .carousel-container{
        padding: 0 36px;
      }

      .carousel-btn{
        width: 36px;
        height: 36px;
      }

      .carousel-btn svg{
        width: 18px;
        height: 18px;
      }

      .carousel-indicators{
        margin-top: 20px;
        gap: 8px;
      }

      .carousel-indicator{
        width: 8px;
        height: 8px;
      }

      .carousel-indicator.active{
        width: 24px;
      }

      .footer__container{
        padding: 0 12px;
      }

      .footer__brand{
        gap: 10px;
      }

      .footer__logo{
        width: 42px;
        height: 42px;
      }

      .footer__logo .logo-svg{
        width: 24px;
        height: 24px;
      }

      .footer__title{
        font-size: 20px;
      }

      .footer__tagline{
        font-size: 11px;
      }

      .footer__links{
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .footer__description p{
        font-size: 14px;
      }

      .footer__copyright{
        font-size: 13px;
      }

      .footer__disclaimer{
        font-size: 12px;
      }

      .team-name { 
        font-size: 19px; 
      }
      
      .match__predictions { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 8px; 
      }
      
      .prediction-tag { 
        width: 100%; 
        justify-content: space-between; 
      }

      .match__insight{
        font-size: 13px;
      }

      .upcoming-card{
        padding: 16px;
        gap: 14px;
        flex: 0 0 100%;
        min-width: 240px;
      }

      .upcoming-card__team{
        font-size: 13px;
      }

      .upcoming-card__prediction{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .upcoming-pred-tag{
        flex: 1;
      }

      .section__head h2{
        font-size: 20px;
      }

      .section__head p{
        font-size: 14px;
      }

      body{
        font-size: 14px;
      }

      .article-content h3{
        font-size: 22px;
        margin-bottom: 14px;
      }

      .article-content h4{
        font-size: 18px;
        margin: 24px 0 12px;
      }

      .article-content p{
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 16px;
      }

      .article-content li{
        font-size: 14px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      *{ 
        animation: none !important; 
        transition: none !important; 
      }
    }

/* Mobile category submenu - distinct colors for both themes */
@media (max-width: 1024px) {
  
  /* Category submenu panel */
  .mobile-nav-panel {
    padding: 8px 0 0;
  }

  /* Individual category items - DISTINCT COLORS */
  .mobile-nav-sublink {
    background: #e8e8e8; /* Darker gray for light mode */
    border: 1px solid #d4d4d4;
  }

  /* Dark mode - lighter than main menu but still readable */
  [data-theme="dark"] .mobile-nav-sublink {
    background: #2a2a2a; /* Lighter gray for dark mode */
    border: 1px solid #353535;
  }

  /* Auto theme dark mode */
  @media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .mobile-nav-sublink {
      background: #2a2a2a;
      border: 1px solid #353535;
    }
  }

  .mobile-nav-sublink:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    transform: translateX(4px);
  }

  /* Text styling - ensure readability */
  .sublink-title {
    color: var(--text);
    font-weight: 700;
  }

  .sublink-desc {
    color: var(--text-secondary);
  }

  /* "View All Markets" button - keep green */
  .mobile-nav-sublink--more {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
  }

  .mobile-nav-sublink--more span {
    color: white !important;
  }

  .mobile-nav-sublink--more .sublink-title,
  .mobile-nav-sublink--more .sublink-desc {
    color: white !important;
  }

  .mobile-nav-sublink--more:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
  }

  .mobile-nav-sublink--more svg {
    stroke: white !important;
  }
}