:root{
      --accent:#ff5722;
      --accent-2:#ffab91;
      --accent-dark:#e64a19;
      --muted:#6b7280;
      --bg:#f4f6f9;
      --card-bg:#ffffff;
      --card:#ffffff;
      --glass: rgba(255,255,255,0.6);
    }
    body{
      font-family: 'Segoe UI', Roboto, Arial, sans-serif;
      line-height:1.6;
      margin:0;
      background:var(--bg);
      color:#222;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    *{box-sizing:border-box}

    /* Header layout */
    .site-header{
      background: linear-gradient(90deg,#2E3192,#1BFFFF);
      border-bottom:1px solid rgba(15,23,36,0.06);
      padding:10px 5px;
      position:sticky;
      top:0;
      z-index:100;
      backdrop-filter: blur(6px);
      display: flex;
      justify-content: center;
      user-select:none;
    }
    .site-header .nav-container{
      width: 100%;
      max-width: 1185px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .site-header .brand{
      display: flex;
      text-decoration:none;
      color:inherit;
    }
    .site-header .brand .logo{
      width:56px;
      height:56px;
      color:white;
      font-weight:700;
      align-content: center;
    }
    .site-header .brand .logo img{
      width: 100%;
      height: 100%;
      border-radius:10px;
    }
    .site-header .site-name{
      align-content: center;
      margin: 0 10px;
    }
    .site-header .brand h1{
      font-size:18px;
      margin:0;
      color:#fff;
      font-weight: 900;
    }
    .site-header .brand p{
      margin:0;
      font-size: 13px;
      color:#fff;
    }

    /* Search */
    .site-header .search{
      padding:3px 10px;
      background: linear-gradient(90deg,#fff,#ffffff00);
      border-radius:999px;
      border:1px solid #fff;
      align-content: center;
      width: 40%;
    }
    .site-header .search input{
      border:0;
      background:transparent;
      outline:none;
      padding:6px 8px;
      font-size:14px;
      width: calc(100% - 60px);
    }
    .site-header .search button{
      background:var(--accent);
      border:0;
      color:white;
      padding:8px 12px;
      border-radius:8px;
      cursor:pointer
    }

    /* Nav */
    .site-header nav{
      align-content: center;
    }
    .site-header nav ul{
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: row;
    }
    .site-header nav ul li{
      margin: 0 5px;
    }
    .site-header nav a{
      color:#0f1724;
      text-decoration:none;
      padding:8px 10px;
      border-radius:8px;
      font-size:14px
    }
    .site-header nav a:hover{
      background:var(--accent);
      color: #fff;
    }
    .site-header #main-nevigation{
      display: none;
    }
    .site-header .main-nevigation{
      align-content: center;
      display: none;
    }
    .site-header .main-nevigation .hamburger{
      display: flex;
      flex-direction: column;
    }
    .site-header .main-nevigation .hamburger span{
      border: 2px solid #000;
      margin: 2px;
      width: 30px;
    }
    .active-news .ticker{
      overflow:hidden;
      white-space:nowrap;
      background:var(--accent);
      color:#fff;
      padding:6px;
    }
    .active-news .ticker span{
      display:inline-block;
      padding-right:20px;
      animation:tick 18s linear infinite;
    }
    @keyframes tick{
      0%{transform:translateX(50%)}
      100%{transform:translateX(-80%)}
    }
    
    /* responsive */
    @media (max-width:980px){
      .site-header .brand h1{font-size:16px}
      .site-header .brand p{font-size:12px}
      .site-header nav{
        order: 1;
        width: 100%;
        display: none;
        margin: 5px;
      }
      .site-header #main-nevigation:checked + nav{
        display: inline;
      }
      .site-header nav ul{
        flex-direction: column;
      }
      .site-header nav ul li{
        padding: 5px;
      }
      .site-header nav a{
        color:#ffffff;
        padding: 8px 20px;
      }
      .site-header .search{
        order:2;
        width: 100%;
        margin: 5px 0;
      }
      .site-header .search input{
        width: calc(100% - 55px);
      }
      .site-header .search button{
        padding:5px 12px;
      }
      .site-header .main-nevigation{
        display: inline;
      }
    }

    @media (max-width:560px){
      .site-header .logo{width:44px;height:44px;}
    }
    
    
    /* Footer */
    footer{
      background:#1e293b;
      color:white;
      padding:10px;
      user-select:none;
    }
    .footer-container{
      max-width:1200px;
      margin:auto;
      display:flex;
      gap:10px;
      justify-content:space-between
    }
    .footer-section{
      flex:1;
      min-width:200px
    }
    .footer-section h4{
      font-size:1.1rem;
      margin:10px;
      color:var(--accent)}
    .footer-section ul{
      list-style:none
    }
    .footer-section ul li{
      margin-bottom:0.5rem;
    }
    .footer-section ul li a{
      color:var(--muted);text-decoration:none;transition:0.2s
    }
    .footer-section ul li a:hover{
      color:white
    }
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,0.1);
      margin-top:1.5rem;
      padding-top:1rem;
      text-align:center;
      color:var(--muted);
      font-size:0.9rem
    }
    @media (max-width:700px){
      .footer-container{
        flex-direction: column;
      }
      .footer-section h4{
        font-size: 22px;
      }
    }