:root {
    /* Colors */
    --bento-bg: #0a0a0b;
    --bento-card: #1c1c1e;
    --bento-surface: #2a2b2d;
    --bento-highlight: rgba(144, 202, 249, 0.1); /* Tech chrome reflection */
    
    /* Accents */
    --bento-primary: #9da3b0; /* Brillant argent ou chrome */
    --bento-primary-dark: #838b98;
    --bento-glow: rgba(157, 163, 176, 0.3); /* Subtle chrome-like glow */
    
    /* Text */
    --bento-text: #d0d4db; /* Softer, more neutral color for large text */
    --bento-text-soft: #a0a7b5;
    --bento-text-muted: #767b85;
    
    /* Borders */
    --bento-border: rgba(160, 170, 185, 0.1);
    --bento-border-active: rgba(157, 163, 176, 0.4);
  }
  
  /* Bento Section CSS */
  .bento-section {
    background-color: var(--bento-bg);
    padding: 40px 20px;
    color: var(--bento-text);
  }
  
  .bento-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  
  .bento-title {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--bento-primary);
  }
  
  .bento-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .bento-item {
    max-width: 350px;
    margin: 20px;
    background-color: var(--bento-card);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  
  .bento-subtitle {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--bento-primary);
  }
  
  .bento-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1rem;
    color: #ffffff;
    background-color: var(--bento-primary);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .bento-button:hover {
    background-color: var(--bento-primary-dark);
  }