/* 
          REVISED APPLE-INSPIRED CSS - Stored in /assets/css/main.css 
          Includes styles for the restored Logo and FAQ Section.
        */
        :root {
          --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          --color-background: #000000;
          --color-surface: #1a1a1a;
          --color-surface-hover: #2c2c2e;
          --color-text-primary: #f5f5f7;
          --color-text-secondary: #a1a1a6;
          --color-accent: #007aff;
          --color-border: rgba(255, 255, 255, 0.1);
          --space-unit: 8px;
          --border-radius: 18px;
          --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
      body {
          font-family: var(--font-family-sans);
          background-color: var(--color-background);
          color: var(--color-text-primary);
          line-height: 1.6;
      }
      .container { width: 90%; max-width: 1100px; margin: 0 auto; padding: calc(var(--space-unit) * 6) 0; }

      /* Header - Logo is now prominent again */
      header {
          text-align: center;
          margin-bottom: calc(var(--space-unit) * 6);
      }
      .logo {
          max-width: 300px; /* Control the max size */
          width: 70%; /* Responsive width */
          height: auto;
          filter: drop-shadow(0 0 20px rgba(0, 122, 255, 0.2));
          transition: transform 0.3s ease;
      }
      .logo:hover {
          transform: scale(1.03);
      }

      /* Card Grid - Maintained clean style */
      .card-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
          gap: calc(var(--space-unit) * 2.5);
      }
      .card {
          background-color: var(--color-surface);
          border-radius: var(--border-radius);
          padding: calc(var(--space-unit) * 3);
          text-decoration: none;
          color: var(--color-text-primary);
          transition: transform var(--transition-fast), background-color var(--transition-fast);
          border: 1px solid var(--color-border);
          text-align: center;
      }
      .card:hover {
          transform: translateY(-5px);
          background-color: var(--color-surface-hover);
      }
      .card i { font-size: 1.75rem; margin-bottom: calc(var(--space-unit) * 1.5); color: var(--color-accent); }
      .card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: calc(var(--space-unit) * 0.5); }
      .card .status-note { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.3; }
      .card.disabled { opacity: 0.5; cursor: not-allowed; }
      .card.disabled:hover { transform: none; background-color: var(--color-surface); }
      
      /* RESTORED: FAQ Section - Redesigned to match new aesthetic */
      .faq-section {
          margin: calc(var(--space-unit) * 10) auto 0;
          max-width: 800px;
          background-color: var(--color-surface);
          border-radius: var(--border-radius);
          padding: calc(var(--space-unit) * 4);
          border: 1px solid var(--color-border);
      }
      .faq-section h2 {
          font-size: 1.8rem;
          font-weight: 700;
          text-align: center;
          margin-bottom: calc(var(--space-unit) * 4);
      }
      .faq-section ul { list-style: none; }
      .faq-section li { border-bottom: 1px solid var(--color-border); }
      .faq-section li:last-child { border-bottom: none; }
      .faq-section h4 {
          font-size: 1.1rem;
          font-weight: 600;
          padding: calc(var(--space-unit) * 2) 0;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .faq-section h4 i {
          color: var(--color-text-secondary);
          transition: transform var(--transition-fast);
      }
      .faq-section li.active h4 i { transform: rotate(180deg); color: var(--color-accent); }
      .faq-section .answer {
          color: var(--color-text-secondary);
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
          padding: 0;
      }
      .faq-section li.active .answer {
          max-height: 300px; /* Adjust if answers are very long */
          padding-bottom: calc(var(--space-unit) * 2);
      }
      .faq-section a { color: var(--color-accent); text-decoration: none; }
      .faq-section a:hover { text-decoration: underline; }

      /* Footer */
      footer { margin-top: calc(var(--space-unit) * 8); padding: calc(var(--space-unit) * 4) 0; border-top: 1px solid var(--color-border); text-align: center; font-size: 0.875rem; color: var(--color-text-secondary); }
      
      /* Install Button */
      #install-btn { position: fixed; bottom: 25px; right: 25px; background-color: var(--color-accent); color: white; border: none; border-radius: 50px; padding: 12px 20px; font-weight: 600; cursor: pointer; z-index: 1000; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); }

      @media (max-width: 768px) {
          .card-grid { grid-template-columns: 1fr 1fr; }
      }