body {
      margin: 0;
      padding: 0;
      background: #f7f7f7;
      color: #1a1a1a;
      font-family: "Inter", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }

    header {
      padding: 4rem 1rem 1rem;
      text-align: center;
    }

    h1 {
      font-size: 2.8rem;
      font-weight: 600;
      letter-spacing: -0.5px;
      margin: 0;
    }

    p.subtitle {
      margin-top: 0.75rem;
      font-size: 1.2rem;
      color: #555;
    }

    /* Animated Logo */
    .ethosengine-gears {
      position: relative;
      width: 190px;
      height: 190px;
      margin: 3rem auto;
    }

    /* Core */
    .core-gear {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 34px;
      height: 34px;
      background: #02b102a1;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      animation: coreBreath 1.2s ease-in-out infinite;
    }

    /* Base gear style */
    .gear {
      position: absolute;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: #f7f7f7;
      box-shadow: 0 0 0 3px currentColor;
      opacity: 0.9;
    }

    /* Teeth illusion */
    .gear::before {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 3px dashed currentColor;
    }

    /* Positions (triad around core) */
    .gear-ethos {
      color: #1f4fa3; /* Ethos: deep blue */
      top: 22%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: rotateEthos 10s linear infinite;
      transform-origin: 50% 50%;
    }

    .gear-logos {
      color: #d4a028; /* Logos: gold */
      top: 60%;
      left: 22%;
      transform: translate(-50%, -50%);
      animation: rotateLogos 10s linear infinite;
      transform-origin: 50% 50%;
    }

    .gear-pathos {
      color: #b3262e; /* Pathos: crimson */
      top: 60%;
      left: 78%;
      transform: translate(-50%, -50%);
      animation: rotatePathos 10s linear infinite;
      transform-origin: 50% 50%;
    }

    /* Counter‑rotation to suggest interlocking */
    @keyframes rotateEthos {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes rotateLogos {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(-360deg); }
    }

    @keyframes rotatePathos {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(-360deg); }
    }

    /* Breathing animation */
    @keyframes coreBreath {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.9;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    }

    /* Outer subtle ring (engine housing) */
    .outer-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      border: 1px solid #ccc;
      transform: translate(-50%, -50%);
      opacity: 0.5;
    }

    section {
      max-width: 720px;
      padding: 2rem 1.5rem;
      text-align: center;
      line-height: 1.6;
      color: #444;
    }

    footer {
      margin-top: auto;
      padding: 2rem;
      font-size: 0.9rem;
      color: #777;
    }