/* Define CSS property for smooth animation */
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  
  /* Basic Reset */
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  html {
      font-size: 100%;
  }
  
  body {
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: #1d1d1f; /* Default text color - dark for light overlay */
      line-height: 1.5;
      background-color: #111111; /* Static dark background for the body */
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
  }
  
  /* Rotation Animation - Remains the same */
  @keyframes rotation {
    0% {
      --gradient-angle: 0deg;
    }
    100% {
      --gradient-angle: 360deg;
    }
  }
  
  /* Container for centering and NOW holds the animation */
  .container {
      flex-grow: 1;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px; /* Padding around the card area */
      position: relative; /* Needed for ::before */
      overflow: hidden; /* Important to clip the gradient */
  
      /* Animated Gradient Background - MOVED HERE from body */
      background: linear-gradient(var(--gradient-angle), blue, purple, red, orange);
      animation: rotation 5s linear infinite;
  }
  
  /* Blurred Overlay - Remains the same */
  .container::before {
    content: "";
    position: absolute;
    inset: 0.3rem; /* Creates the gap where container gradient shows */
    filter: blur(0.3rem);
    /* Slightly more opaque light background for better contrast */
    background-color: rgb(245, 245, 247, 0.95);
    z-index: 1; /* Above container background, below card */
    border-radius: 8px;
  }
  
  /* Content Card Styling - Remains the same */
  .content-card {
      position: relative;
      z-index: 2; /* Above the ::before overlay */
      background-color: rgba(255, 255, 255, 0.65); /* Adjusted transparency */
      backdrop-filter: blur(18px); /* Slightly more blur */
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 14px;
      padding: 40px 32px;
      max-width: 500px;
      width: 100%;
      text-align: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  /* Warning Icon Styling - Remains the same */
  .warning-icon {
      color: #555;
      margin-bottom: 24px;
      height: 2.75em;
      width: 2.75em;
  }
  
  /* Heading - Remains the same */
  h1 {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 12px;
      color: #1d1d1f;
  }
  
  /* Subtle Text Style - Remains the same */
  .subtle-text {
      color: #333;
      font-size: 0.9375rem;
      margin-bottom: 28px;
      font-weight: 400;
  }
  
  /* Contact Section - Remains the same */
  .contact-section {
      margin-top: 28px;
      padding-top: 28px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      font-size: 0.875rem;
      color: #333;
      font-weight: 400;
  }
  
  .contact-section p {
      margin: 0;
  }
  
  /* Link Styling - Remains the same */
  a {
      color: #007AFF;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.25s ease-out;
  }
  
  a:hover {
      color: #0056b3;
      text-decoration: underline;
  }
  
  /* Footer Styling - Adjusted for static dark background */
  footer {
      text-align: center;
      padding: 15px;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.6); /* Light text for dark background */
      background-color: #111111; /* Match static body background */
      width: 100%;
      flex-shrink: 0;
      position: relative; /* Keep relative for potential future layering */
      z-index: 3; /* Ensure it's above any potential stray elements */
  }
  
  /* Basic Responsiveness - Remains the same */
  @media (max-width: 600px) {
      .container::before {
          inset: 0.2rem; /* Slightly smaller inset on mobile */
      }
      .content-card {
          padding: 32px 24px;
          max-width: 90%;
      }
      h1 { font-size: 1.25rem; }
      .subtle-text { font-size: 0.875rem; }
      .contact-section { font-size: 0.8125rem; }
      .warning-icon { height: 2.5em; width: 2.5em; }
      footer { font-size: 0.7rem; }
  }