:root {   --primary: #0d47a1;   --secondary: #42a5f5;   --accent: #ff9800;   --light: #f5f7fa;   --dark: #263238;   --text: #37474f;   --white: #ffffff;   --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);   --shadow-md: 0 4px 8px rgba(0,0,0,0.15);   --shadow-lg: 0 8px 16px rgba(0,0,0,0.2);   --radius-sm: 4px;   --radius-md: 8px;   --radius-lg: 12px;   --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }  * {   margin: 0;   padding: 0;   box-sizing: border-box; }  html {   scroll-behavior: smooth; }  body {   font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;   line-height: 1.6;   color: var(--text);   background: linear-gradient(135deg, var(--light) 0%, #e0e0e0 100%);   background-attachment: fixed;   min-height: 100%;   overflow-x: hidden; }  .container {   max-width: 1200px;   margin: 0 auto;   padding: 0 20px; }  /* Header Styles */ .header {   position: fixed;   top: 0;   left: 0;   width: 100%;   z-index: 1000;   background: rgba(255, 255, 255, 0.95);   backdrop-filter: blur(10px);   box-shadow: var(--shadow-sm);   transition: var(--transition); }  .navbar {   display: flex;   justify-content: space-between;   align-items: center;   padding: 15px 0; }  .logo {   font-size: 1.5rem;   font-weight: 700;   color: var(--primary);   text-decoration: none;   display: flex;   align-items: center; }  .logo img {   height: 40px;   margin-right: 10px; }  .nav-links {   display: flex;   list-style: none; }  .nav-links li {   margin-left: 30px;   position: relative; }  .nav-links a {   color: var(--dark);   text-decoration: none;   font-weight: 500;   transition: var(--transition);   padding: 5px 0;   position: relative; }  .nav-links a:after {   content: '';   position: absolute;   width: 0;   height: 2px;   bottom: 0;   left: 0;   background-color: var(--accent);   transition: var(--transition); }  .nav-links a:hover:after {   width: 100%; }  /* Hero Section */ .hero {   padding: 180px 0 100px;   text-align: center;   position: relative;   overflow: hidden; }  .hero::before {   content: '';   position: absolute;   top: -50%;   left: -50%;   width: 200%;   height: 200%;   background: radial-gradient(circle, rgba(66,165,245,0.1) 0%, rgba(255,255,255,0) 70%);   z-index: -1;   animation: pulse 15s infinite alternate; }  @keyframes pulse {   0% { transform: translate(0, 0); }   50% { transform: translate(25%, 25%); }   100% { transform: translate(-25%, -25%); } }  .hero h1 {   font-size: 3rem;   margin-bottom: 20px;   color: var(--primary);   text-shadow: 0 2px 4px rgba(13,71,161,0.1); }  .hero p {   font-size: 1.2rem;   max-width: 700px;   margin: 0 auto 40px;   color: var(--text); }  .notice {   background-color: var(--accent);   color: white;   padding: 10px 20px;   border-radius: var(--radius-sm);   display: inline-block;   margin-bottom: 40px;   box-shadow: var(--shadow-sm);   font-weight: 500; }  /* Article Styles */ .article-container {   background-color: var(--white);   border-radius: var(--radius-lg);   box-shadow: var(--shadow-md);   padding: 40px;   margin: 40px auto;   position: relative;   overflow: hidden; }  .article-container::after {   content: '';   position: absolute;   top: 0;   right: 0;   width: 100px;   height: 100px;   background: linear-gradient(45deg, var(--secondary), var(--primary));   border-radius: 0 0 0 100%;   z-index: 0; }  article {   position: relative;   z-index: 1; }  article h2 {   color: var(--primary);   margin: 30px 0 20px;   font-size: 1.8rem;   position: relative;   padding-bottom: 10px; }  article h2::after {   content: '';   position: absolute;   bottom: 0;   left: 0;   width: 60px;   height: 3px;   background: linear-gradient(90deg, var(--accent), var(--secondary));   border-radius: 3px; }  article p {   margin-bottom: 20px;   font-size: 1.1rem;   line-height: 1.7; }  article img {   max-width: 100%;   height: auto;   border-radius: var(--radius-md);   box-shadow: var(--shadow-md);   margin: 20px 0;   transition: var(--transition); }  article img:hover {   transform: scale(1.02);   box-shadow: var(--shadow-lg); }  pre {   background: #f8f9fa;   border-radius: var(--radius-md);   padding: 20px;   margin: 20px 0;   overflow: auto;   border-left: 4px solid var(--accent);   font-family: 'Courier New', monospace;   font-size: 0.9rem;   line-height: 1.5; }  code {   font-family: 'Courier New', monospace;   background-color: rgba(255, 152, 0, 0.1);   padding: 2px 6px;   border-radius: var(--radius-sm);   color: var(--accent);   font-size: 0.9rem; }  table {   width: 100%;   border-collapse: collapse;   margin: 20px 0;   box-shadow: var(--shadow-sm);   border-radius: var(--radius-md);   overflow: hidden; }  th, td {   padding: 12px 15px;   text-align: left;   border-bottom: 1px solid #e0e0e0; }  th {   background-color: var(--primary);   color: white;   font-weight: 500; }  tr:nth-child(even) {   background-color: #f5f7fa; }  tr:hover {   background-color: rgba(66, 165, 245, 0.05); }  /* Image Grid */ .image-grid {   display: grid;   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));   gap: 20px;   margin: 30px 0; }  .image-card {   position: relative;   border-radius: var(--radius-md);   overflow: hidden;   box-shadow: var(--shadow-md);   transition: var(--transition); }  .image-card:hover {   transform: translateY(-5px);   box-shadow: var(--shadow-lg); }  .image-card img {   width: 100%;   height: 100%;   object-fit: cover;   transition: var(--transition); }  .image-card:hover img {   transform: scale(1.05); }  /* Footer */ .footer {   background: linear-gradient(135deg, var(--dark) 0%, #000000 100%);   color: white;   padding: 50px 0 20px;   text-align: center; }  .footer p {   margin-bottom: 20px;   opacity: 0.8; }  .footer-links {   display: flex;   justify-content: center;   list-style: none;   margin-bottom: 30px; }  .footer-links li {   margin: 0 15px; }  .footer-links a {   color: white;   text-decoration: none;   opacity: 0.7;   transition: var(--transition); }  .footer-links a:hover {   opacity: 1;   color: var(--accent); }  .copyright {   font-size: 0.9rem;   opacity: 0.6; }  /* Responsive Design */ @media (max-width: 992px) {   .hero h1 {     font-size: 2.5rem;   }      .hero p {     font-size: 1.1rem;   } }  @media (max-width: 768px) {   .navbar {     flex-direction: column;     padding: 15px 0;   }      .nav-links {     margin-top: 20px;     flex-wrap: wrap;     justify-content: center;   }      .nav-links li {     margin: 10px 15px;   }      .hero {     padding: 150px 0 80px;   }      .hero h1 {     font-size: 2rem;   }      .article-container {     padding: 30px 20px;   } }  @media (max-width: 576px) {   .hero {     padding: 130px 0 60px;   }      .hero h1 {     font-size: 1.8rem;   }      .hero p {     font-size: 1rem;   }      article h2 {     font-size: 1.5rem;   }      .image-grid {     grid-template-columns: 1fr;   } }  /* Animations */ @keyframes fadeIn {   from { opacity: 0; transform: translateY(20px); }   to { opacity: 1; transform: translateY(0); } }  .fade-in {   animation: fadeIn 0.8s ease-out forwards; }  .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; }  /* Scroll Indicator */ .scroll-indicator {   position: fixed;   bottom: 30px;   left: 50%;   transform: translateX(-50%);   width: 40px;   height: 60px;   border: 2px solid var(--primary);   border-radius: 20px;   display: flex;   justify-content: center;   align-items: center;   opacity: 0.7;   transition: var(--transition);   z-index: 999; }  .scroll-indicator:hover {   opacity: 1;   background-color: rgba(13, 71, 161, 0.1); }  .scroll-dot {   width: 8px;   height: 8px;   background-color: var(--primary);   border-radius: 50%;   animation: scrollAnimation 2s infinite; }  @keyframes scrollAnimation {   0% { transform: translateY(0); opacity: 1; }   50% { transform: translateY(15px); opacity: 0.5; }   100% { transform: translateY(0); opacity: 1; } }