* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        --data-white: #F8FAFB;
        --data-ice: #E8F4F8;
        --data-blue: #4A90E2;
        --data-deep: #2C5F8D;
        --data-electric: #00D9FF;
        --data-code: #1E3A5F;
        --data-accent: #7B68EE;
        --shadow-data: rgba(74, 144, 226, 0.15);
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        background: linear-gradient(135deg, var(--data-white) 0%, var(--data-ice) 100%);
        color: var(--data-code);
        line-height: 1.6;
        min-height: 100vh;
      }

      /* Navigation */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(248, 250, 251, 0.85);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(74, 144, 226, 0.1);
        padding: 1rem 2rem;
        z-index: 1000;
        transition: all 0.3s ease;
      }

      nav ul {
        list-style: none;
        display: flex;
        gap: 2rem;
        align-items: center;
        flex-wrap: wrap;
      }

      nav li {
        font-size: 0.95rem;
        font-weight: 500;
      }

      nav a {
        color: var(--data-deep);
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0.5rem 1rem;
        border-radius: 8px;
        position: relative;
      }

      nav a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--data-electric);
        transform: translateX(-50%);
        transition: width 0.3s ease;
      }

      nav a:hover {
        color: var(--data-blue);
        background: rgba(74, 144, 226, 0.08);
      }

      nav a:hover::after {
        width: 80%;
      }

      /* Hero Section */
      .hero {
        margin-top: 80px;
        padding: 6rem 2rem 4rem;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background:
          radial-gradient(circle at 20% 30%, rgba(0, 217, 255, 0.05) 0%, transparent 50%),
          radial-gradient(circle at 80% 70%, rgba(74, 144, 226, 0.05) 0%, transparent 50%);
        pointer-events: none;
      }

      .hero h1 {
        font-size: 4.5rem;
        font-weight: 800;
        color: var(--data-deep);
        letter-spacing: -0.03em;
        margin-bottom: 1.5rem;
        line-height: 1.1;
      }

      .hero h1 span {
        background: linear-gradient(135deg, var(--data-blue) 0%, var(--data-accent) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .hero-subtitle {
        font-size: 1.4rem;
        color: var(--data-blue);
        font-weight: 600;
        margin-bottom: 1rem;
      }

      .hero-meta {
        font-size: 1.1rem;
        color: var(--data-deep);
        opacity: 0.8;
        margin-bottom: 3rem;
      }

      /* SVG Animation Container */
      .hero-visual {
        max-width: 500px;
        margin: 3rem auto;
      }

      /* Content Container */
      .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 4rem 2rem;
      }

      /* Section Headers */
      .section-header {
        text-align: center;
        margin-bottom: 4rem;
        position: relative;
      }

      .section-header h2 {
        font-size: 2.8rem;
        font-weight: 700;
        color: var(--data-deep);
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
      }

      .section-header::after {
        content: '';
        display: block;
        width: 100px;
        height: 4px;
        background: linear-gradient(90deg, var(--data-electric), var(--data-accent));
        margin: 1.5rem auto 0;
        border-radius: 2px;
      }

      /* Bento Grid Layout */
      .bento-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        margin-bottom: 5rem;
      }

      /* Card Styles */
      .data-card {
        background: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(74, 144, 226, 0.15);
        border-radius: 20px;
        padding: 2.5rem;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .data-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
          repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(74, 144, 226, 0.02) 10px,
            rgba(74, 144, 226, 0.02) 20px);
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .data-card:hover::before {
        opacity: 1;
      }

      .data-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow:
          0 20px 40px var(--shadow-data),
          0 10px 20px rgba(74, 144, 226, 0.1),
          0 0 0 1px rgba(0, 217, 255, 0.2);
        border-color: var(--data-electric);
      }

      .card-icon {
        width: 90px;
        height: 90px;
        background: linear-gradient(135deg, var(--data-blue), var(--data-accent));
        border-radius: 50% 40% 45% 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        font-size: 2.5rem;
        color: white;
        animation: morph 6s ease-in-out infinite;
        transition: all 0.4s ease;
      }

      @keyframes morph {

        0%,
        100% {
          border-radius: 50% 40% 45% 55%;
        }

        25% {
          border-radius: 45% 55% 50% 40%;
        }

        50% {
          border-radius: 55% 45% 40% 50%;
        }

        75% {
          border-radius: 40% 50% 55% 45%;
        }
      }

      .data-card:hover .card-icon {
        transform: scale(1.15) rotate(8deg);
        box-shadow: 0 10px 30px rgba(74, 144, 226, 0.3);
      }

      .data-card h3 {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--data-deep);
        margin-bottom: 1rem;
        letter-spacing: -0.01em;
      }

      .data-card p {
        font-size: 1.1rem;
        color: var(--data-code);
        opacity: 0.85;
        line-height: 1.7;
        margin-bottom: 1.5rem;
      }

      .card-link {
        display: inline-block;
        color: var(--data-blue);
        text-decoration: none;
        font-weight: 600;
        font-size: 1.05rem;
        transition: all 0.3s ease;
        position: relative;
        padding-right: 1.5rem;
      }

      .card-link::after {
        content: '→';
        position: absolute;
        right: 0;
        transition: transform 0.3s ease;
      }

      .card-link:hover {
        color: var(--data-electric);
      }

      .card-link:hover::after {
        transform: translateX(5px);
      }

      /* Featured Card */
      .data-card.featured {
        grid-column: span 2;
        background: linear-gradient(135deg,
            rgba(74, 144, 226, 0.08) 0%,
            rgba(123, 104, 238, 0.08) 100%);
        border: 2px solid rgba(0, 217, 255, 0.3);
      }

      .featured .card-badge {
        display: inline-block;
        background: var(--data-electric);
        color: white;
        padding: 0.4rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 1rem;
        letter-spacing: 0.05em;
      }

      /* List Styles within Cards */
      .data-card ul {
        list-style: none;
        margin-top: 1rem;
      }

      .data-card li {
        padding: 0.6rem 0;
        padding-left: 1.5rem;
        position: relative;
        font-size: 1.05rem;
        color: var(--data-code);
      }

      .data-card li::before {
        content: '▸';
        position: absolute;
        left: 0;
        color: var(--data-electric);
        font-weight: bold;
      }

      .data-card li a {
        color: var(--data-blue);
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .data-card li a:hover {
        color: var(--data-electric);
        padding-left: 0.3rem;
      }

      /* Footer */
      footer {
        background: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 2px solid rgba(74, 144, 226, 0.1);
        padding: 2rem;
        text-align: center;
        margin-top: 4rem;
      }

      .footer-content {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
      }

      .footer-info {
        color: var(--data-deep);
        font-size: 0.95rem;
      }

      .footer-info a {
        color: var(--data-blue);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
      }

      .footer-info a:hover {
        color: var(--data-electric);
      }

      .language-selector {
        display: flex;
        gap: 1rem;
      }

      .lang-btn {
        padding: 0.5rem 1.2rem;
        background: rgba(74, 144, 226, 0.1);
        border: 2px solid rgba(74, 144, 226, 0.2);
        border-radius: 8px;
        color: var(--data-deep);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.3s ease;
      }

      .lang-btn:hover {
        background: var(--data-blue);
        color: white;
        border-color: var(--data-blue);
        transform: translateY(-2px);
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .hero h1 {
          font-size: 2.5rem;
        }

        .hero-subtitle {
          font-size: 1.1rem;
        }

        .section-header h2 {
          font-size: 2rem;
        }

        .bento-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
        }

        .data-card.featured {
          grid-column: span 1;
        }

        nav ul {
          flex-direction: column;
          gap: 0.5rem;
          align-items: flex-start;
        }

        .footer-content {
          flex-direction: column;
          text-align: center;
        }

        .hero-visual {
          max-width: 300px;
        }
      }

      @media (max-width: 480px) {
        .hero {
          padding: 4rem 1rem 2rem;
        }

        .hero h1 {
          font-size: 2rem;
        }

        .container {
          padding: 2rem 1rem;
        }

        .data-card {
          padding: 1.5rem;
        }
      }